@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; display: inline-block;}
ul{ list-style: none; padding: 0;}
img{ vertical-align: bottom;}
button{ cursor: pointer;}
label{ display: inline-block;}
:disabled{ cursor: not-allowed;}
iframe{ border: none;}


html{ 
     font-size: 10px;
     --blue:#132577;
     --white:#fff;
     --black:#000;
     --orange:#FFC107;
     --gray:#92989F;
     --ff:"Poppins", sans-serif;
}
body{ font: 16px var(--ff);}

.flex{ display: flex;}
.align-center{ align-items: center; }
.justify-right{ justify-content: end;}
.justify-center{ justify-content: center;}
.justify-space-bet{ justify-content: space-between;}
.img-resp{ max-width: 100%; height: auto; }
.text-center{ text-align: center;}
.g-2{ gap: 2rem;}


.container{ max-width: 1260px; margin: auto; 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;}


.wrap-1{ background: url(../img/banner-bg.svg) no-repeat center/cover var(--blue); color: var(--white); padding: 58px 0 84px;}
header{ margin-bottom: 61px;}
.wrap-1 a{ color: inherit;}
.wrap-1 nav ul{ gap: 3rem;}
.wrap-1 nav a{ font-size: 14px; font-weight: 600; }
.menu{ display: none; border: 1px solid var(--white); background: none; border-radius: 5px;}
.menu span{ display: block; height: 2px; background: #fff; width: 50px; margin: 5px;}


.banner-text{ max-width: 473px;}
.banner h2{ font-size: 28px; font-weight: 600; }
.banner p{ line-height: 1.7; margin: 3rem 0 4rem; }
.banner a{ width: 185px; line-height: 50px; background: var(--white); color:var(--black); text-align: center; border-radius: 5px; font-weight: 600; }


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

.service{ box-shadow: 0 0 10px #0000001a; padding: 45px 60px 40px 30px; margin-top: 4rem; border-radius: 5px; position: relative; }
.service h3{ font-size: 20px; font-weight: 600;}
.service p{ opacity: 0.6; font-size: 14px; margin: 2rem 0 3rem;}
.service a{ font-size: 14px; color: inherit; }
.service.bt::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15px; background: var(--blue); border-radius: 5px 5px 0 0;}
.service.active{ background: var(--blue); color: var(--white);}


.info{ margin: 10rem 0; text-align: center;}
.info p.num{ font-size: 24px; font-weight: 600; margin-top: 21px; }
.info p.details{ font-size: 14px; font-weight: 500; margin-bottom: 22px;}

.about .text{ font-size: 14px; margin: 2rem 0 3rem;}
.about ul{ list-style: disc; padding-left: 4rem; line-height: 40px;}

.our-works{ margin: 10rem 0; }
.our-works ul{ margin-top: 4rem;}
.works{ gap: 2rem;}
.works a.vert{  width: 85px; height: 300px; flex-shrink: 0; writing-mode: sideways-lr; text-align: center; line-height: 85px; box-shadow: 0 0 18px #0000001a; border-radius: 5px; color: var(--blue); font-size: 24px; font-weight: 500; border: 2px solid transparent; }
.works li.active a.vert{ border-color: var(--blue); }
.work-collapse{ display: none;}
.work-collapse h3{ font-size: 24px; font-weight: 500;}
.work-collapse p{ font-size: 14px; opacity: 0.6; margin: 1rem 0 2rem;}
.work-collapse a{ width: 185px; line-height: 51px; text-align: center; background: var(--blue); color: var(--white); border-radius: 5px; font-size: 14px; }
li.active .work-collapse{ display: block;}


.testimonials{ margin-top: 4rem;}
.review{ text-align: center; }
.ratings span{ color: var(--gray);}
.ratings span.filled{ color: var(--orange);}
.review .shadow{ box-shadow: 0 0 18px #0000001a; padding: 60px 64px 0; }
.review  p{ font-size: 14px; margin: 2rem 0;}
.review  h3{ font-size: 16px; font-weight: 600; margin-top: 54px;}
.review  small{ font-size: 14px; }
.review  img{ transform: translateY(34px);}


.projects{ margin: 10rem 0;}
.project-text{ max-width: 400px; margin: auto; }
.projects p:not(:nth-child(2)){ font-size: 14px; margin: 3rem 0; }
.projects a{ width: 214px; line-height: 51px; background: var(--blue); color: var(--white); border-radius: 5px; text-align: center; }

.team{ text-align: center;}
.team-member{ box-shadow: 0 0 18px #0000001a; padding: 1rem 1rem 64px 1rem; margin-top: 4rem;}
.team h3{ font-size: 24px; font-weight: 600; margin: 2rem 0 5px;}
.team ul{ gap: 5rem; margin-top: 4rem;}

.wrap-3{background: var(--blue); color: var(--white); padding: 6rem 0;}
.wrap-3 h3{ color: var(--gray); margin-bottom: 23px;}
.wrap-3 a{ color: inherit;}
.wrap-3 li{ line-height: 40px;}
.copy{ color: var(--gray); margin-top: 4rem;}



@media screen and (max-width:1279px) {
      h1{ font-size: 30px;}
      .service{ padding: 45px 15px 40px 15px;}
      .review .shadow{ padding: 60px 34px 0;}
}


@media screen and (max-width:980px) {
     .col-t-order-before{ order: -1;}
     .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;}
     .wrap-1 nav ul{ gap: 2rem;}
     .banner h2{ font-size: 26px;}
     .work-collapse img{ width: 180px; height: auto; }
     .review .shadow{ padding: 20px 14px 0;}
     .team ul{gap: 2rem;}
}


@media screen and (max-width:767px){
     h1{ font-size: 28px;}
     .collapse{ display: none;}
     .menu{ display: inline-block;}
     .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;}
     .col-m-order-before{ order: -1;}
     .service{ padding: 45px 40px 40px 30px;}
     .works.flex{ flex-flow: column; }
     .works a.vert{ writing-mode: horizontal-tb; width: 100%; height: auto;}
     .works li > .flex{ flex-flow: column;}
     .team ul{ gap: 1rem;}
     .copy{ flex-flow: column;}
}

@media screen and (max-width:480px) {
     .col-p-1{ grid-column: span 1;}
     .col-p-2{ grid-column: span 2;}
     .col-p-3{ grid-column: span 3;}
     .col-p-4{ grid-column: span 4;}
     .col-p-5{ grid-column: span 5;}
     .col-p-6{ grid-column: span 6;}
     .col-p-7{ grid-column: span 7;}
     .col-p-8{ grid-column: span 8;}
     .col-p-9{ grid-column: span 9;}
     .col-p-10{ grid-column: span 10;}
     .col-p-11{ grid-column: span 11;}
     .col-p-12{ grid-column: span 12;}
     .work-collapse .flex{ flex-flow: column;}
     .work-collapse img{ width:fit-content; max-width: 100%; height: auto; }
     .team h3{ font-size: 20px;}
     .team ul{ gap: 5rem;}
}