.elementor-445 .elementor-element.elementor-element-0d38bab{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-445 .elementor-element.elementor-element-0d38bab:not(.elementor-motion-effects-element-type-background), .elementor-445 .elementor-element.elementor-element-0d38bab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111111;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-35a76a7 *//*==================================================
GOOGLE FONT
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');



/*==================================================
BASE
==================================================*/

.sms-projects{

    background:#111111;
    color:#fff;
    font-family:"Space Grotesk",sans-serif;
    padding:90px 0;
    overflow:hidden;

}


.sms-container{

    width:min(1180px,calc(100% - 50px));
    margin:auto;

}




/*==================================================
SMALL HERO
==================================================*/


.sms-project-header{

    max-width:620px;
    margin-bottom:70px;

}



.sms-project-header span{

    color:#ff5c1a;

    font-size:11px;

    letter-spacing:3px;

    font-weight:500;

}



.sms-project-header h1{

    margin-top:18px;

    font-size:clamp(42px,5vw,68px);

    line-height:.98;

    letter-spacing:-3px;

    font-weight:600;

}



.sms-project-header p{

    margin-top:22px;

    max-width:500px;

    color:#888;

    font-size:16px;

    line-height:1.7;

}






/*==================================================
PROJECT
==================================================*/


.sms-project{


    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:70px;

    padding:65px 0;

    border-top:1px solid rgba(255,255,255,.08);


}



.sms-project.reverse{


    grid-template-columns:.85fr 1.15fr;


}



.sms-project.reverse .sms-project-image{

    order:2;

}


.sms-project.reverse .sms-project-info{

    order:1;

}






/*==================================================
IMAGE SLIDER
==================================================*/


.sms-project-image{


    height:420px;

    border-radius:20px;

    overflow:hidden;

    background:#111;

}



.sms-slider{

    width:100%;

    height:100%;

}



.sms-slider .swiper-slide{

    height:100%;

}



.sms-slider img{


    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}



.sms-project:hover img{

    transform:scale(1.05);

}




.sms-slider .swiper-pagination{

    bottom:15px!important;

}



.swiper-pagination-bullet{

    width:6px!important;

    height:6px!important;

    background:#fff!important;

    opacity:.35;

}


.swiper-pagination-bullet-active{

    background:#ff5c1a!important;

    opacity:1;

}





/*==================================================
CONTENT
==================================================*/


.sms-project-info small{


    font-size:11px;

    color:#666;

    letter-spacing:3px;

}



.sms-project-info h2{


    margin:20px 0 15px;


    font-size:clamp(30px,3vw,46px);


    line-height:1;


    letter-spacing:-1.8px;


    font-weight:600;


}



.sms-project-info p{


    max-width:390px;

    color:#888;

    font-size:15px;

    line-height:1.7;


}



.sms-project-info a{


    display:inline-flex;

    margin-top:28px;

    padding-bottom:7px;

    color:#fff;

    font-size:14px;

    border-bottom:1px solid rgba(255,255,255,.3);

    transition:.3s ease;


}



.sms-project-info a:hover{


    color:#ff5c1a;

    border-color:#ff5c1a;

    transform:translateX(5px);

}





/*==================================================
TABLET
==================================================*/


@media(max-width:1024px){


.sms-project{

    gap:45px;

}


.sms-project-image{

    height:350px;

}



.sms-project-info h2{

    font-size:38px;

}


}





/*==================================================
MOBILE
==================================================*/


@media(max-width:768px){


.sms-projects{

    padding:70px 0;

}



.sms-container{

    width:calc(100% - 30px);

}



.sms-project-header{

    margin-bottom:45px;

}



.sms-project-header h1{

    font-size:42px;

    letter-spacing:-2px;

}



.sms-project-header p{

    font-size:15px;

}



.sms-project,
.sms-project.reverse{


    display:flex;

    flex-direction:column;

    gap:30px;

    padding:45px 0;


}



.sms-project.reverse .sms-project-image,
.sms-project.reverse .sms-project-info{

    order:unset;

}



.sms-project-image{

    height:260px;

    border-radius:16px;

}



.sms-project-info h2{

    font-size:32px;

}



.sms-project-info p{

    font-size:14px;

}


}





/*==================================================
SMALL PHONE
==================================================*/


@media(max-width:480px){


.sms-project-header h1{

    font-size:36px;

}



.sms-project-image{

    height:220px;

}



.sms-project-info h2{

    font-size:28px;

}


}/* End custom CSS */