/* =================================
   DualShift Services Page
================================= */



/* Hero */

.services-hero{

    min-height:70vh;

    padding:8%;

    display:flex;

    align-items:center;

}



.services-hero h1{

    font-size:65px;

    line-height:1.2;

    margin-top:25px;

    font-weight:900;

}



.services-hero h1 span{

    color:#38bdf8;

}



.services-hero p{

    max-width:750px;

    margin-top:30px;

    font-size:21px;

    color:#94a3b8;

}








/* Services Blocks */


.service-detail{

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

}



.service-detail.reverse{

    flex-direction:row-reverse;

}





.service-text{

    flex:1;

}




.service-text h2{

    font-size:42px;

    margin-bottom:25px;

}



.service-text p{

    color:#94a3b8;

    font-size:19px;

    margin-bottom:25px;

}




.service-text ul{

    margin-bottom:35px;

}



.service-text li{

    list-style:none;

    color:#cbd5e1;

    margin:12px 0;

}



.service-text li::before{

    content:"✓";

    color:#38bdf8;

    font-weight:bold;

    margin-right:12px;

}








/* Service Visual Box */


.service-box{


    width:350px;

    height:350px;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:45px;

    font-weight:900;


    color:#38bdf8;


    background:

    linear-gradient(

    145deg,

    #111827,

    #020617

    );



    border-radius:40px;


    border:

    1px solid rgba(255,255,255,.1);



    box-shadow:

    0 30px 80px rgba(0,0,0,.5);



    animation:

    serviceFloat 5s infinite;


    transition:.4s;

}



.service-box:hover{


    border-color:#38bdf8;


    transform:

    translateY(-10px)
    scale(1.03);


}





@keyframes serviceFloat{


    50%{

        transform:translateY(-20px);

    }

}








/* Call Action */


.call-action{


    text-align:center;


    margin:70px 8%;


    padding:70px 40px;



    background:


    linear-gradient(

    145deg,

    #111827,

    #020617

    );



    border-radius:30px;



    border:

    1px solid rgba(255,255,255,.1);


}



.call-action h2{

    font-size:45px;

    margin-bottom:20px;

}



.call-action p{

    color:#94a3b8;

    font-size:20px;

    margin-bottom:35px;

}








/* Reveal */

.services-hero .reveal,
.service-detail.reveal,
.call-action.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:1s ease;

}



.services-hero .reveal.active,
.service-detail.reveal.active,
.call-action.reveal.active{


    opacity:1;

    transform:translateY(0);


}








/* Mobile */


@media(max-width:1000px){



.services-hero{

    text-align:center;

}



.services-hero h1{

    font-size:45px;

}



.services-hero p{

    font-size:18px;

}





.service-detail,
.service-detail.reverse{


    flex-direction:column;


    text-align:center;


    gap:40px;


}



.service-text h2{


    font-size:35px;


}




.service-box{


    width:280px;


    height:280px;


    font-size:35px;


}




.service-text li::before{


    margin-right:8px;


}





.call-action{


    margin:40px 5%;


    padding:40px 20px;


}



.call-action h2{


    font-size:35px;


}



}