@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;}
:disabled{ cursor: not-allowed;}
label{ display: inline-block;}


html{
     font-size: 10px;
     --blue:#132577;
     --white:#fff;
     --black:#000;
     --gray:#0009;
}

body{
     font: 16px/normal poppins, sans-serif;
}

.container{
     max-width: 1260px;
     margin: auto;
     padding: 0 1rem;
}
.text-center{ text-align: center;}
.img-resp{ max-width: 100%; height: auto; }
.flex{ display: flex;}
.align-center{ align-items: center;}
.justify-bet{ justify-content: space-between;}
.justify-center{ justify-content: center;}
.justify-right{ justify-content: right;}
.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; }


/* layout */
.wrap-1{ background: url(../img/banner-background.svg) no-repeat center/cover; color: var(--white); padding-bottom: 84px; }
header{ padding: 58px 0;}
nav ul{ list-style: none; padding: 0; gap: 3rem;}
nav a{ color: inherit; font-size: 14px; font-weight: 600; display: inline-block;}
.menu{ background: none; border: 1px solid; border-radius: 5px; color: var(--white); font-size: 2rem; display: none; }
.banner-text{ padding-right: 110px; }
.banner .caption strong{ font-size: 24px; font-weight: 600; line-height: 1.5;}
.banner .desc{ line-height: 1.7; margin: 3rem 0 4rem;}
.banner a{ display: inline-block; background: #fff; width: 185px; line-height: 50px; color: var(--black); text-align: center; font-weight: 600; border-radius: 5px; }
.slick-prev{ position: absolute; left: 0; top: 50%; }
.slick-next{ position: absolute; right: 0; top: 50%;}
.slick-dots{ display: flex; justify-content: center; list-style: none; padding: 0; gap: 1rem;}
/* li.slick-active button{ background: #f00; color: #fff;} */


.wrap-2{ padding: 100px 0;}
.wrap-2 h2{ font-size: 20px; font-weight: 500; color: var(--blue);}
.wrap-2 h2+p{ font-size: 28px; font-weight: 700; margin-bottom: 4rem; }

.service{ padding: 45px 60px 40px 30px; box-shadow: 0 0 10px #0000001a; border-radius: 5px; position: relative;}
.service h3{ font-size: 20px; font-weight: 600; }
.service p{ font-size: 14px; color: var(--gray); margin: 20px 0 30px;}
.service a{ text-decoration: underline; font-size: 14px; color: inherit;}
.services .col-3:nth-child(1) .service::before{ content: ''; position: absolute; left: 0; right: 0; top: 0;height: 15px; background: var(--blue); border-radius: 5px 5px 0 0 ; }
.services .col-3:nth-child(2) .service{ background: var(--blue); color: var(--white); }
.services .col-3:nth-child(2) .service p{ color: #fff9;}

.company-info{ margin: 100px 0;}
.info{ text-align: center; padding: 22px 0;}
.info b{ font-weight: 600; font-size: 24px;}
.info p{ font-size: 14px; font-weight: 500; color: var(--gray);}
.about p:nth-child(3){ font-size: 14px; color: var(--gray); margin: 20px 0 30px;  }
.about ul{ line-height: 40px; flex-flow: wrap; }
.about li{ flex: 0 1 50%;}

.our-work{ margin: 100px 0;}
.work{ margin-top: 40px;}
.work ul{ gap: 2rem; padding: 0;}
.work li{ gap: 2rem;}
.work li .collapse{ display: none; }
.work li a.vert{ writing-mode: sideways-lr; line-height: 81px; display: block; color: var(--blue); font-size: 24px; font-weight: 500; border-radius: 5px; box-shadow: 0 0 18px #0000001a; border: 2px solid transparent; text-align: center; }
.work li.active .vert{ border-color: var(--blue); }
.work li:first-child .collapse{ display: block; }
.collapse .flex{ gap: 2rem;}
.collapse h3{ font-size: 24px; font-weight: 500;}
.collapse p{ font-size: 14px; color: var(--gray); margin: 1rem 0 2rem; }
.collapse a{ display: inline-block; width: 184px; line-height: 51px; background: var(--blue); color: var(--white); text-align: center; border-radius: 5px;}

.review{ text-align: center;}
.review .shadow{ box-shadow: 0 0 18px #0000001a; padding: 60px 64px 0;}
.review .shadow p{ margin: 20px 0; font-size: 14px;}
.review .shadow span{ color: #7D7D7D}
.review .shadow span.fill{ color: #FFC107}
.review h3{ font-size: 16px; font-weight: 600; margin-top: 54px;}
.review small{ font-size: 14px; }
.review img{ transform: translateY(34px);}


.projects{ margin: 100px 0; }
.project-details{ padding: 0 60px; }
.project-details p:nth-child(4){ margin: 20px 0; }
.project-details a{ display: inline-block; background: var(--blue); color: var(--white); width: 214px; line-height:51px; text-align: center; border-radius: 5px; }

.team-member{ text-align: center;  box-shadow: 0 0 18px #0000001a; border-radius: 5px; padding: 10px 10px 65px 10px; border: 2px solid transparent;}
.team-member h3{ margin: 20px 0 5px;}
.team-member ul{ list-style: none; padding: 0; gap:50px; margin-top: 40px;}
.team-member ul a{ display: block; border-radius: 50%; width: 50px; line-height: 46px; border: 2px solid; color: var(--blue); text-align: center; font-size: 24px;}
.team-member ul a:hover{ background: var(--blue); color: #fff;}
.team-member:hover{  border-color: var(--blue);}



.wrap-3{ background: var(--blue); color: var(--white); padding: 1rem 0; }
.f-top{ color: var(--white); padding: 60px 0 40px;}
.f-top h3{ color: #92989F;  margin-bottom: 23px; font-size: 18px;}
.f-top ul{ list-style: none; padding: 0;}
.f-top a{ color: #fff; line-height: 40px;}
.f-bottom{ color: #92989F; padding-bottom: 60px; }



/* responsive */
@media screen and (max-width:1280px){
     .banner-text{padding-right: 0;}
     .service{ padding: 45px 15px 40px 15px}
     .review .shadow{ padding: 60px 34px 0; }
     .project-details{ padding: 0;}
}


@media screen and (max-width:980px){
.col-t-3{ grid-column: span 3; }
.col-t-4{ grid-column: span 4; }
.col-t-6{ grid-column: span 6; }
.col-t-8{ grid-column: span 8; }
.col-t-9{ grid-column: span 9; }
.col-t-12{ grid-column: span 12; }
nav ul{gap: 2rem;}
.service {padding: 45px 10px 40px 11px;}
.work li a.vert{ line-height: 40px;}
.review .shadow{ padding: 60px 10px 0; }
.team-member ul{ gap: 15px;}
}


@media screen and (max-width:767px){
.col-m-4{ grid-column: span 4; }
.col-m-6{ grid-column: span 6; }
.col-m-8{ grid-column: span 8; }
.col-m-12{ grid-column: span 12;}
nav{ display: none;}
.menu{ display: inline-block;}
.order-m-up{ order: -1;}
.justify-m-center{ justify-content: center;}
.service{ padding: 45px 60px 40px 30px;}
.work ul{ flex-flow: column; }
.work :is(ul,li), .collapse .flex{ flex-flow: column;}
.work li a.vert{ writing-mode: horizontal-tb;}
.f-bottom .flex{ flex-flow: column; gap: 3rem;}
}


@media screen and (max-width:460px){
.col-p-6{ grid-column: span 6; }
.col-p-12{ grid-column: span 12; }
.about li{ flex: 0 1 100%;}


}