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


html{ 
     font-size: 10px;
     --dblue:#132577;
     --white:#fff;
     --black:#000;
     --gray:#92989F;
}

body{ font: 16px "Poppins", sans-serif;}

.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; }
.flex{ display: flex;}
.align-center{ align-items: center;}
.justify-space-bet{ justify-content: space-between;}
.justify-right{ justify-content: end;}
.justify-center{ justify-content: center;}
.img-resp{ max-width: 100%; height: auto;}
.text-center{ text-align: center;}
.text-right{ text-align: right;}

/* layout */
.wrap-1{ background: url(../img/banner-bg.svg) no-repeat center top/cover var(--dblue); color: var(--white); padding: 58px 0 84px;}
h1{ font-size: 2em;}
h1 a{ color: inherit; display: inline-block;}
nav ul{ gap: 3rem; }
nav a{ color: inherit; font-size: 14px; font-weight: 600; display: inline-block; white-space: nowrap;}
.menu{ background: none; border: 2px solid var(--white); border-radius: 5px; display: none; }
.menu span{ display: block; width: 60px; height: 2px; background: var(--white); margin: 5px; }

.banner{ margin-top: 61px;}
.banner-text{ margin-right: 112px;}
.banner .lead{ font-size: 28px; font-weight: 600;}
.banner p:nth-child(2){  line-height: 1.7; margin: 3rem 0 4rem; }
.banner a{ display: inline-block; width: 185px; line-height: 50px; background: var(--white); text-align: center; border-radius: 5px; font-weight: 600; color: var(--black);}
.banner picture{ display: block; text-align: center;}



.wrap-2{ background: var(--white); color: var(--black); padding: 10rem 0;}
.wrap-2 h2{ font-size: 20px; font-weight: 500; color: var(--dblue); margin-bottom: 1rem;}
.wrap-2 h2+p{ font-size: 28px; font-weight: bold; color: var(--black); line-height: 1.5; }

.services .row{ margin-top: 4rem;}
.service{ padding: 45px 60px 40px 30px; border-radius: 5px; box-shadow: 0 0 13px 0 #0000001a; position: relative; }
.service h3{ font-size: 2rem;}
.service p{ font-size: 14px; color: inherit; opacity: .6; margin: 2rem 0 3rem;}
.service a{ font-size: 14px; color: inherit; }
.service.bt::before{ content: ''; position: absolute; left: 0; right: 0; top: 0; display: block; height:15px; background: var(--dblue); border-radius: 5px 5px 0 0; }
.service.bg{ background: var(--dblue); color: var(--white);}


.info{ margin: 100px 0;}
.info p.num{ font-size: 24px; font-weight: 600; }
.info p.info-text{ font-size: 14px; font-weight: 500;}


.aboutus p.info-text{ font-size: 14px; line-height: 25px; color: inherit; opacity: .6; margin-top: 20px; }
.aboutus ul{ margin: 30px 0; list-style: disc; line-height: 40px; padding-left: 40px;}

.work{ margin: 100px 0;}
.work-details{ margin-top: 40px;}
.work-details ul{ gap: 20px; }
.work-details a.vert{ width: 85px; height: 300px; flex-shrink: 0; box-shadow: 0 0 10px #0000001a; display: grid; place-items: center; margin-right: 20px; color: var(--dblue); font-size: 24px; font-weight: 500; border-radius: 5px; }
.work-details a.vert span{ display: inline-block; white-space: nowrap; writing-mode: sideways-lr; line-height: 85px; }
.collapse{ display: none;}
.collapse .flex{ gap: 20px; }
li.active .collapse{ display: block;}
li.active a.vert{ border: 2px solid var(--dblue);}
.work-text h3{ font-size: 24px; font-weight: 500; }
.work-text p{font-size: 14px; color: inherit; opacity: .6; margin: 10px 0 20px; }
.work-text a{ display: block; width: 184px; line-height: 51px; background: var(--dblue); color: var(--white); text-align: center; border-radius: 5px; }


.review{ text-align: center; margin-top: 4rem;}
.rev-up{ box-shadow: 0 0 18px #0000002e; padding: 60px 64px 0; }
.review p{ margin: 20px 0; font-size: 14px;}
.ratings span{ color: #7D7D7D;}
.ratings span.fill{ color: #FFC107;}
.review img{ transform: translateY(38px);}
.rev-down{ padding-top: 54px; }
.review h3{ font-size: 18px; font-weight: 600;}


.projects{ margin: 100px 0;}
.project-text{ padding: 0 45px 0 70px; }
.project-text p{ font-size: 14px; line-height: 25px; margin: 3rem 0; }
.project-text a{ display: block; width: 214px; line-height: 51px; background: var(--dblue); color: var(--white); border-radius: 5px; text-align: center; color: var(--white);}



.team{ padding: 10px; box-shadow: 0 0 10px #0000001a; border-radius: 5px; text-align: center; border: 2px solid transparent; margin-top: 50px; }
.team:hover{ border-color: var(--dblue);}
.team h3{ font-size: 24px; font-weight: 600; margin: 20px 0 5px;}
.team small{ font-size: 16px;}
.social{ margin: 40px 0 55px;}
.social ul{ gap: 50px;}
.social li a{ display: block; width: 50px; line-height: 46px; color: var(--dblue); border: 2px solid; border-radius: 50%; font-size: 20px;}
.social a:hover{ background: var(--dblue); color: var(--white);}


.wrap-3{ background: var(--dblue); color: var(--white);}
footer{ padding: 60px 0;}
.content{ margin-bottom: 40px;}
.content h3{ color: var(--gray); font-size: 18px; margin-bottom: 20px;}
.content a{ color: var(--white);}
.content li{  line-height: 40px; }
.sub-footer{ color: var(--gray);}




@media screen and (max-width:1278px) {
     .service{ padding: 45px 16px 40px 16px;}
     .rev-up{padding: 40px 44px 0;}
}

@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; }
.col-t-order-before{ order: -1;}
nav ul{ gap: 2rem; }
.banner-text{ margin-right: 0;}
.banner .lead{font-size: 26px;}
 .rev-up{padding: 40px 10px 0;}
 .work-details ul{ flex-flow: column;}
 .work li > .flex{ flex-flow: column;}
 .work-details a.vert{ width: 100%; height: 85px; margin-bottom: 3rem;}
 .work-details a.vert span{ writing-mode: horizontal-tb;}
 .social ul{ gap: 25px;}
}

@media screen and (max-width:767px){
.col-m-4{ grid-column: span 4; }
.col-m-6{ grid-column: span 6; }
.col-m-12{ grid-column: span 12; }
.col-m-order-before{ order: -1;}
.collapse{ display: none; }
.menu{ display: inline-block;}
.team h3{font-size: 20px;}
.social ul{ gap: 15px;}
}

@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; }
h1{ font-size: 30px;}
.work-details  .collapse .flex{ flex-flow: column;}
.project-text{ padding: 10px;}
}