/* Collection */
.studios-collection{ background: #F7F9FC; border-radius: 40px 40px 0 0; margin-top: -40px; padding: 100px 0; position: relative; }
.studios-collection .content{ display: flex; justify-content: space-between; align-items: flex-start; }

.studios-collection .left{ max-width: 400px; top: 120px; position: sticky; }
.studios-collection .left .label{ text-transform: uppercase; font-size: 15px; margin-bottom: 25px; }
.studios-collection .left h2{ font-size: 36px; font-weight: 400; line-height: 1.1; margin-bottom: 25px; letter-spacing: -1px; }
.studios-collection .left h2 span{ display: block; }
.studios-collection .left .description{ color: #898989; margin-bottom: 25px; font-size: 15px; line-height: 1.4; }
.studios-collection .left .button{}

.studios-collection .right{ max-width: 600px; width: 600px; }
.studios-collection .right .studios-list{}
.studios-collection .right .studios-list li{ width: 100%; margin-bottom: 20px; }
.studios-collection .right .studios-list li .box-content{ display: flex; background: var(--white); border-radius: 20px; padding: 40px 30px; width: 100%; color: var(--black); transition: var(--transition); position: relative; overflow: hidden; }
.studios-collection .right .studios-list li .box-content .studio-icon{ font-size: 72px; width: 100px; min-width: 100px; display: flex; align-items: center; justify-content: center; margin-right: 50px; transition: var(--transition); position: relative; z-index: 10; }
.studios-collection .right .studios-list li .box-content .text{ position: relative; z-index: 10; }
.studios-collection .right .studios-list li .box-content .text h4{ font-size: 20px; margin-bottom: 10px; font-weight: 600; transition: var(--transition); }
.studios-collection .right .studios-list li .box-content .text p{ font-size: 15px; line-height: 1.4; margin-bottom: 10px; color: #606060; transition: var(--transition); }
.studios-collection .right .studios-list li .box-content .text p span{ display: block; }
.studios-collection .right .studios-list li .box-content .text .learn-more{ color: #010101; font-size: 13px; transition: var(--transition); }
.studios-collection .right .studios-list li .box-content .text .learn-more i{ font-size: 10px; transition: all .05s; display: inline-block; }
.studios-collection .right .studios-list li:hover .box-content .text .learn-more i{ transform: translateX(3px); }

.studios-collection .right .studios-list li:hover .box-content .text h4,
.studios-collection .right .studios-list li:hover .box-content .text p,
.studios-collection .right .studios-list li:hover .box-content .studio-icon,
.studios-collection .right .studios-list li:hover .box-content .text .learn-more{ color: var(--white) !important; }

    /* Color Icons */
    .studios-collection .right .studios-list li.data-studio .box-content .studio-icon{ color: #96C5FF; }
    .studios-collection .right .studios-list li.ai-studio .box-content .studio-icon{ color: #FFA29B; }
    .studios-collection .right .studios-list li.cloud-studio .box-content .studio-icon{ color: #0D5BFF; }
    .studios-collection .right .studios-list li.engineering-studio .box-content .studio-icon{ color: #2946CF; font-size: 76px; }
    .studios-collection .right .studios-list li.product-design-studio .box-content .studio-icon{ color: #AB77FF; }
    .studios-collection .right .studios-list li.app-solutions-studio .box-content .studio-icon{ color: #F4594E; }
    .studios-collection .right .studios-list li.firmware-studio .box-content .studio-icon{ color: #ffb600; }
    .studios-collection .right .studios-list li.blockchain-studio .box-content .studio-icon{ color: #d348ea; }
    .studios-collection .right .studios-list li.product-management-studio .box-content .studio-icon{ color: #3379cc; }
    .studios-collection .right .studios-list li.qa-studio .box-content .studio-icon{ color: #00bd5f; }

    /* Hover Icons */
    .studios-collection .right .studios-list li .box-content:after{ transform: translateX(50px); transition: all .6s; }
    .studios-collection .right .studios-list li:hover .box-content:after{ transform: translateX(0); }

    .studios-collection .right .studios-list li.data-studio .box-content:after{ content: '\e810'; font-family: var(--qubika); font-size: 320px; position: absolute; top: -110px; right: -50px; z-index: 0; color: rgba(255,255,255,.2); }
    .studios-collection .right .studios-list li.ai-studio .box-content:after{ content: '\e851'; font-family: var(--qubika); font-size: 320px; position: absolute; top: -110px; right: -50px; z-index: 0; color: rgba(255,255,255,.2); }
    .studios-collection .right .studios-list li.cloud-studio .box-content:after{ content: '\e852'; font-family: var(--qubika); font-size: 320px; position: absolute; top: -70px; right: -50px; z-index: 0; color: rgba(255,255,255,.2); }
    .studios-collection .right .studios-list li.engineering-studio .box-content:after{ content: '\e803'; font-family: var(--qubika); font-size: 420px; position: absolute; top: -160px; right: -70px; z-index: 0; color: rgba(255,255,255,.2); }
    .studios-collection .right .studios-list li.product-design-studio .box-content:after{  content: '\e853'; font-family: var(--qubika); font-size: 380px; position: absolute; top: -140px; right: -100px; z-index: 0; color: rgba(255,255,255,.2); }
    .studios-collection .right .studios-list li.app-solutions-studio .box-content:after{ content: '\e801'; font-family: var(--qubika); font-size: 320px; position: absolute; top: -110px; right: -50px; z-index: 0; color: rgba(255,255,255,.2); }
    .studios-collection .right .studios-list li.firmware-studio .box-content:after{ content: '\e858'; font-family: var(--qubika); font-size: 320px; position: absolute; top: -110px; right: -50px; z-index: 0; color: rgba(255,255,255,.2); }
    .studios-collection .right .studios-list li.blockchain-studio .box-content:after{ content: '\e859'; font-family: var(--qubika); font-size: 320px; position: absolute; top: -100px; right: -160px; z-index: 0; color: rgba(255,255,255,.2); }
    .studios-collection .right .studios-list li.product-management-studio .box-content:after{ content: '\e856'; font-family: var(--qubika); font-size: 370px; position: absolute; top: -130px; right: -50px; z-index: 0; color: rgba(255,255,255,.2); }
    .studios-collection .right .studios-list li.qa-studio .box-content:after{ content: '\e857'; font-family: var(--qubika); font-size: 320px; position: absolute; top: -110px; right: -90px; z-index: 0; color: rgba(255,255,255,.2); }
    
    /* Hovers */
    .studios-collection .right .studios-list li.data-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(267.87deg, #96C5FF 8%, #5FA7FF 98.69%); opacity: 0; }
    .studios-collection .right .studios-list li.ai-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(270deg, #FFFFFF -80.35%, #FFA29B 82.94%); opacity: 0; }
    .studios-collection .right .studios-list li.cloud-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(270deg, #FFFFFF -39.31%, #0D5BFF 95.36%); opacity: 0; }
    .studios-collection .right .studios-list li.engineering-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(270deg, #FFFFFF -33.73%, #2946CF 94.97%); opacity: 0; }
    .studios-collection .right .studios-list li.product-design-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(270deg, #FFFFFF -61.24%, #AB77FF 94.42%); opacity: 0; }
    .studios-collection .right .studios-list li.app-solutions-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(270deg, #FFFFFF -37.81%, #F4594E 94.34%); opacity: 0; }
    .studios-collection .right .studios-list li.firmware-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(270deg, #FFFFFF -77.83%, #FFB600 96.86%); opacity: 0; }
    .studios-collection .right .studios-list li.blockchain-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(270deg, #FFFFFF -67.22%, #D348EA 91.82%); opacity: 0; }
    .studios-collection .right .studios-list li.product-management-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(270deg, #FFFFFF -88.84%, #3379CC 97.25%); opacity: 0; }
    .studios-collection .right .studios-list li.qa-studio .box-content:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(270deg, #FFFFFF -94.42%, #0EBB65 97.88%); opacity: 0; }

    .studios-collection .right .studios-list li .box-content:before{ transition: var(--transition); }
    .studios-collection .right .studios-list li:hover .box-content:before{ opacity: 1 !important; }

@media screen and (max-width: 1280px){
    
    /* Collection */
    .studios-collection .left{ max-width: 350px; }
    .studios-collection .left .label{ font-size: 14px; }
    .studios-collection .left h2{ font-size: 30px; }
    .studios-collection .left .description{ font-size: 14px; }

    .studios-collection .right{ width: 550px; max-width: 550px; }

    .studios-collection .right .studios-list li .box-content{ padding: 35px 25px; }
    .studios-collection .right .studios-list li .box-content .studio-icon{ font-size: 56px; width: 85px; min-width: 85px; margin-right: 30px; }
    .studios-collection .right .studios-list li.engineering-studio .box-content .studio-icon{ font-size: 62px; }
    .studios-collection .right .studios-list li .box-content .text h4{ font-size: 20px; }
    .studios-collection .right .studios-list li .box-content .text p{ font-size: 14px; }
    .studios-collection .right .studios-list li .box-content .text p span{ display: inline; }

}

@media screen and (max-width: 1024px){

    /* Collection */
    .studios-collection{ padding: 70px 0 40px; }
    .studios-collection .content{ flex-direction: column; }
    .studios-collection .left{ position: static; max-width: 100%; margin-bottom: 60px; }
    .studios-collection .left h2 span{ display: inline; }

    .studios-collection .right{ width: 100%; max-width: 100%; }

    .studios-collection .right .studios-list li .box-content{ padding: 25px 20px; }
    .studios-collection .right .studios-list li .box-content .studio-icon{ font-size: 52px; width: 70px; min-width: 70px; margin-right: 30px; }
    .studios-collection .right .studios-list li.engineering-studio .box-content .studio-icon{ font-size: 56px; }
    .studios-collection .right .studios-list li .box-content .text h4{ font-size: 19px; }
    .studios-collection .right .studios-list li .box-content .text p{ font-size: 13px; }
    .studios-collection .right .studios-list li .box-content .text p span{ display: inline; }

}