@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*,::before,::after{ margin: 0; box-sizing: border-box;}
a{ text-decoration: none;}
img{ vertical-align: bottom;}
button{ cursor: pointer; padding: 0;}
:disabled{ cursor: not-allowed; }
ul{ list-style: none; padding: 0;}


html{ 
    font-size: 15px;
    --ff: "Poppins", sans-serif, sans-serif;
    /*--red:#ed242e;*/
       --red:#d8111b;
}

body{ font: 16px/1.3 var(--ff)}




/* grid */
.container{ max-width: 1230px; margin: auto; padding: 0 1rem;}
.container-lg{ max-width: 1590px; margin: auto; padding: 0 1rem;}
.container-xlg{ max-width: 1790px; margin: auto; padding: 0 1rem; }
.container-full{ padding: 0 1rem;}
.row{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem;}
.col-1{ grid-column: span 1;}
.col-2{ grid-column: span 2;}
.col-3{ grid-column: span 3;}
.col-4{ grid-column: span 4;}
.col-5{ grid-column: span 5;}
.col-6{ grid-column: span 6;}
.col-7{ grid-column: span 7;}
.col-8{ grid-column: span 8;}
.col-9{ grid-column: span 9;}
.col-10{ grid-column: span 10;}
.col-11{ grid-column: span 11;}
.col-12{ grid-column: span 12;}
.flex{ display: flex;}
.justify-space-bet{ justify-content: space-between;}
.justify-center{ justify-content: center;}
.align-center{ align-items: center;}
.img-resp{ max-width: 100%; height: auto;}
.p0{ padding: 0;}
.cap{ text-transform: capitalize;}
.ucase{ text-transform: uppercase;}
.text-center{ text-align: center;}



/*layout*/

.wrap-1{background: url(../imgs/bg-1.webp) no-repeat center top/cover #00132b;  color: #fff; position: relative; overflow: hidden;}
header{display: grid; grid-template-columns: 100px auto 100px; position:fixed; top: 0; left: 0; right: 0; z-index: 1; color: #fff;}
header button{width: 100px; height: 100px; background: #00132b; border: none; color: inherit;}
header nav{background: var(--red); position: relative; z-index: 0;}
header nav li{ margin: 0 6px;}
header nav a{color: inherit; line-height: 100px; display: block; text-transform: uppercase; padding: 0 2rem; text-align: center;}
header nav a img{ display: block; position: absolute; transform: translate(40%,-50%); }
header nav::before{
    content: '';
    position: absolute;
    width: 158px;
    aspect-ratio: 1/1;
    background: var(--red);
    left: 50%;
    transform: translate(-50%, -10px);
    border-radius: 50%;
    z-index: -1;
}


.controls{width: 126px; aspect-ratio: 1/1; background: var(--red); border: none; color: var(--ff); border-radius: 50%; position: absolute; top: 50%;} 
.prev{left: 0; transform: translate(-54px,-50%);}
.next{right:0; transform: translate(54px,-50%);}
.caption{font-size: 6rem; font-weight: bold; margin-bottom: 88px;}
.btn{width: 204px; height: 50px; background: #fff; border: none;}
.btnf{width: 150px; height: 50px; background: #fff; color: var(--red); font-size: 20px;  border: 1px solid var(--red);border-radius: 10px;}
.btn.active{background: var(--red); color: #fff;}
.text{padding: 200px 0;}




.wrap-2{background: #fefefd; color: #081419; }
.about{border-radius: 88px; padding: 88px; background: #fff; position: relative; top: -170px; box-shadow: 0 0 62px rgb(13, 3 ,3, 0.10);}
.hr1{background: var(--red); width: 93px; height: 11px; border-radius: 5.5px;}

.wrap-2 h2{font:700 45px var(--ff); line-height: 0.9; margin-top: 40px;} 
.wrap-2 p{font: 400 17px/30px var(--ff); margin: 45px 0;}
.wrap-2 a{width: 274px; display: block; line-height: 75px; background: #00132b; color: #fff; text-align: center;}
.wrap-2[class^="container"]{margin: 50px auto;}
.text-center{padding-top: 20px;}
.wrap-2-p{display: none;}


 

.carousel{text-align: center; background: url(../imgs/bg-2.webp) no-repeat center top/cover; padding: 200px 0; border-radius: 200px;position: relative; }
.box{background: #fff; padding: 65px 40px; border-radius: 15px;}
.button{display: block; width: 174px; line-height: 51px; background-color: #081419; color: #fff; margin: 40px auto;}
.button:hover{background: var(--red);}
.controls2{position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%);}
.controls2 button{background: #fff; border-radius: 50%; width: 93px; aspect-ratio: 1/1; border: none; box-shadow: 0 0 60px rgba(3, 3, 3, 0.3);}
.controls2 button:hover{background: var(--red);}
.heading{padding: 50px;}


.row2{display: none;}



.cases{text-align: center; background: #fff; padding: 2rem; position: relative; box-shadow: 0 0 60px rgba(3, 3, 3, 0.3); margin-top: 25px;}
.cases figure{position: relative;}
.cases .figcaption{position: absolute; width: 171px;line-height: 51px; background: var(--red); color: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.cases figcaption{color: inherit; display: block;}
.cases::after{content: ''; width: 80px; height: 80px; background: url(../imgs/icon.webp) no-repeat; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%);}


.wrap-3{background: url(../imgs/bg-3.webp) no-repeat center top/cover; padding: 85px  0 55px; text-align: center; margin-top: 80px;}
.wrap-3 input{width: 100%; background: none; border: 1px solid #fff; height: 87px; border-radius: 44.5px; padding: 2rem; color: #fff;
font-size: 18px;}
.wrap-3 input::placeholder{color: #fff;}
.wrap-3 button{width: 402px; height: 82px; border: none; background: #081419; color: #fff; border-radius: 41px; margin-top: 32px;}

.wrap-4{background: #111; color: #fff; padding: 100px 0;}
.wrap-4 footer{max-width: 780px; border-top: 1px solid #fff; padding: 30px 0; margin: 50px auto 0;}
.wrap-4 span{margin-right: 30px;}
.wrap-4 h3{line-height: 40px;}


.overlay{position: fixed;left: 0; right: 0; top: 0; bottom: 0; background: #0008;z-index: 2;}
.popover{position: fixed; z-index: 3; background: #fff; padding: 1rem; border-radius: 10px;left: 50%; top: 50%;
transform: translate(-50%,-50%);}
.popover input{width: 100%;} 
    

/* responsive */
@media screen and (max-width:1610px){

    
}

@media screen and (max-width:1220px){
    html{ font-size: 13px;}
    header nav a{ padding:0 1rem;}
    .text{ text-align: center;}
}

@media screen and (max-width:980px){
.col-t-1{ grid-column: span 1;}
.col-t-2{ grid-column: span 2;}
.col-t-3{ grid-column: span 3;}
.col-t-4{ grid-column: span 4;}
.col-t-5{ grid-column: span 5;}
.col-t-6{ grid-column: span 6;}
.col-t-7{ grid-column: span 7;}
.col-t-8{ grid-column: span 8;}
.col-t-9{ grid-column: span 9;}
.col-t-10{ grid-column: span 10;}
.col-t-11{ grid-column: span 11;}
.col-t-12{ grid-column: span 12;}   
.collapse{ display: none;}
header nav::before{ display: none;}
.ot1{ order: 1;}

}

@media screen and (max-width:767px){
    html{ font-size: 12px;}
    .col-m-1{ grid-column: span 1;}
    .col-m-2{ grid-column: span 2;}
    .col-m-3{ grid-column: span 3;}
    .col-m-4{ grid-column: span 4;}
    .col-m-5{ grid-column: span 5;}
    .col-m-6{ grid-column: span 6;}
    .col-m-7{ grid-column: span 7;}
    .col-m-8{ grid-column: span 8;}
    .col-m-9{ grid-column: span 9;}
    .col-m-10{ grid-column: span 10;}
    .col-m-11{ grid-column: span 11;}
    .col-m-12{ grid-column: span 12;}
    .collapse{display: none; position: absolute ; left: 0; right: 0;top: 100px; background: #000;height: auto; padding: 1rem;}
    .collapse > div{flex-flow:column ;}
    .collapse nav ul{flex-flow: column;}
   
}

@media screen and (max-width:460px){
    .col-p-4{ grid-column: span 4;}
    .col-p-6{ grid-column: span 6;}
    .col-p-12{ grid-column: span 12;}
    .about{padding: 1rem;}
    .wrap-2 a{ width: 200px; margin: auto;}
    .wrap-3 button{width: 300px;}
    .wrap-4 p{font-size: 10px;}
    .wrap-4 span{font-size: 13px;}
    .controls{width: 90px;}
    .caption{font-size: 4rem;}
    .btn{margin-top: 15px;}
    .wrap-2 h2{font-size: 30px;}
    .controls2 button{width: 60px;}
    
}