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

html{ 
     font-size: 10px;
     --blue:#132577;
     --white:#fff;
     --gray:#92989F;
     --black:#000;
     --blackop:#0009;
     --whiteop:#fff9;
}

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

.container{ max-width: 1260px; margin: auto; padding: 0 1rem;}

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

/* grid */
.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-12{ grid-column: span 12;}

/* custom css */
.wrap-1{ background: url(../img/banner-bg.svg) no-repeat center/cover var(--blue); color: var(--white); padding-bottom: 84px;}
header{ padding: 58px 0 61px; }
.wrap-1 a{ color: inherit; display: inline-block;}
.wrap-1 nav ul{ list-style: none; padding: 0; gap: 3rem;}
.wrap-1 nav a{ font-size: 14px; font-weight: 600; }
.menu{ background: none; border: 1px solid; color: var(--white); display: none; font-size: 20px; padding: 5px 10px;}

.banner .caption{ font-size: 28px; font-weight: 600; }
.banner .para{ line-height: 1.7; margin: 3rem 0 4rem; }
.banner :is(.caption,.para){ margin-right: 100px;}
.banner a{ display: inline-block; width: 185px; line-height: 50px; background: var(--white); color: var(--black); border-radius: 5px; text-align: center; font-weight: 600; }



.wrap-2{ background: var(--white); color: var(--black); padding: 10rem 0;}
.wrap-2 h2{ font-size: 20px; font-weight: 500; color: var(--blue);}
.wrap-2 h2+p{ font-size: 28px; font-weight: 700; color: var(--black); margin: 1rem 0 4rem;}
.service{ padding: 45px 60px 40px 30px; border-radius: 5px; box-shadow: 0 0 13px #0000001a; position: relative;}
.service h3{ font-size: 20px; font-weight: 600; }
.service p{ font-size: 14px; color: var(--blue); margin: 20px 0 30px; }
.service a{ font-size: 14px; color: inherit;}
.services .col-3:nth-child(1) section::before{ content: ''; position: absolute; background: var(--blue); height: 15px; left: 0; right: 0; top: 0; border-radius: 5px 5px 0 0; }
.services .col-3:nth-child(2) section{ background: var(--blue); color: var(--white);}
.services .col-3:nth-child(2) section p{ color: var(--whiteop);}

.info{ margin: 10rem 0; }
.info-block{ padding: 21.5px 0;}
.info-block p{ font-size: 14px; font-weight: 500;}
.info-block p b{ font-size: 24px; font-weight: 600;}
.work{ margin: 10rem 0; }
.projects{ margin: 10rem 0;}

.about p:nth-child(3){ color: var(--blackop); }
.about ul{ margin-top: 3rem; flex-flow: wrap;}
.about li{ flex: 0 1 50%; }

.accordion ul{ list-style: none; padding: 0; gap: 2rem}
.accordion .collapse{ display: none; }
.accordion li.flex{ gap: 2rem; }
.accordion .collapse .flex{ gap: 2rem; }
.accordion a.vert{ display: block; writing-mode: sideways-lr; height: 300px; line-height: 81px; text-align: center; font-size: 24px; font-weight: 500; color: var(--blue); border-radius: 5px; box-shadow: 0 0 13px #0000001a; border: 2px solid transparent; }
.accordion li.active .collapse{ display: block; }
.accordion li.active a.vert{ border-color: var(--blue); }
.collapse h3{ font-size: 24px; font-weight: 500; }
.collapse p{ font-size: 14px; color: var(--blackop); margin: 1rem 0 2rem;}
.collapse a{ display: 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 p{ font-size: 14px; margin: 20px 0;}
.review img{ transform: translateY(34px);}
.ratings{ margin-bottom: 30px;}
.ratings span{ color: #7d7d7d80; font-size: 20px; }
.ratings span.fill{ color: #FFC107; }
.review-footer{padding-top: 54px;}
.review-footer h3{ font-size: 16px; font-weight: 600;}
.review-footer small{ font-size: 14px;}


.project-details{ padding: 0 70px;}
.project-details p{ font-size: 14px;}
.project-details p:nth-child(3){ margin-bottom: 30px;}
.project-details a{ display: inline-block; margin-top: 30px; background: var(--blue); width: 214px; line-height: 51px; color: var(--white); text-align: center; border-radius: 5px; }

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



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


/* responsive */
@media screen and (max-width:1280px){
     .wrap-1 nav ul{ gap: 2rem;}
     .banner :is(.caption,.para){ margin-right: 0px;}
     .service{ padding: 45px 15px 40px 15px;}
     .review-shadow{ padding: 60px 34px 0;}
     .project-details{ padding: 0 10px;}
}

@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-12{ grid-column: span 12;} 
.accordion a.vert{line-height: 40px;}
.review-shadow{ padding: 60px 10px 0;}
.team-member ul{gap: 20px;}
}

@media screen and (max-width:767px){         /* phone landscape */
.col-m-6{ grid-column: span 6;}
.col-m-12{ grid-column: span 12;}
nav{ display: none;}
.menu{ display: inline-block;}
.order-m-before{order: -1;}
.accordion a.vert{height: 100%;}
.work-image img{ width: 200px; height: auto; }
}

@media screen and (max-width:460px){
.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-12{ grid-column: span 12;}  
h1{ font-size: 30px;}
.accordion ul,.accordion li.flex,.accordion .collapse .flex{ flex-flow: column; }
.accordion a.vert{ writing-mode: horizontal-tb; height: auto; width: 100%;}
}