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

html{
    font-size: 10px;
    --db:#132577;
    --lg:#92989f;
    --wt:#fff;
    --bl:#000000;

}
body{
    font: 14px "poppins", sans-serif;
}

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

.row{display: grid; gap: 2rem; grid-template-columns: repeat(12,1fr);}

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


.wrap-1{padding: 52px 0 80px; color: var(--wt); background: url(../img/bg.svg) var(--db)  no-repeat center top/cover;}
header{margin-bottom: 63px;}
h1{font-size: 32px; margin-left: 35px;}
h1 a{color: inherit;}
.menu{border: 2px solid #fff;width: 80px; height: 30px; border-radius: 5px; background: none; float: right; display: none;}
.menu span{display: block; height: 2px; background: #fff; margin: 4px 8px;}




nav ul{list-style: none; padding: 0; justify-content: flex-end;
  
}

nav li{margin: 0 15px;}
nav a{color:inherit; font-weight: 600; display: block;}
.banner IMG{float:right;}
.banner .caption{margin: 0 100px 0 35px;}
.banner .lead{font-size: 28px; font-weight: 600;}
.banner p{font-size: 16px; line-height: 1.75; margin:30px 0 40px}
.banner a{display: block; width: 185px; line-height: 50px; background: #fff; color: var(--bl);text-align: center; border-radius: 5px; font-size: 16px; font-weight: 600;}

main{background: white; padding: 100px 0;}
main h2{color: var(--db); font-size: 20px; font-weight: 500; margin-bottom: 10px;}
main h2 + p{font-size: 28px; font-weight: 700;}
.service{padding: 45px 60px 41px 30px; border-radius: 5px; box-shadow: 0 0 13px #0000001a; border-top: 15px solid transparent;}
.services .row{margin: 40px 0 100px;}
.para{margin: 20px 0 30px; opacity: .6;}
.service a{color: inherit; text-decoration: underline; display: inline-block;}
.service h3{font-size: 20px; font-weight: 600;}
.s1{border-top-color: var(--db);}
.s2{background: var(--db); color: var(--wt);}

.info-text{height: 100px; display: grid; place-items:center;}
.info-text b{font-size: 24px; font-weight: 600;}
.info-text p{font-weight: 500;}

.about{margin: 100px 0}
.about ul{font-weight: 500; line-height: 40px;}
.about img{float: right;}

.work{margin: 100px 0;}
.work-detail{margin: 40px 0; }
.work-detail ul{padding: 0; gap: 20px; list-style: none;}
.work-detail li > a{width: 85px; height: 300px; display: block; flex-shrink: 0; box-shadow: 0 0 18px #0000002e; border-radius: 5px; writing-mode: sideways-lr; text-align: center; line-height: 85px; color: var(--db); font-size: 24px; font-weight: 500;}
.mission{margin-left: 20px;}
.mission-img{flex-shrink: 0; margin-right: 20px;}
.mission a{ width: 184px; line-height:54px; display: block; background: var(--db); color: var(--wt);text-align: center; border-radius: 5px;}
.mission h3{font-size: 24px; font-weight: 500;}

.testamonials{margin: 100px 0;}
.testamonials .upper{box-shadow: 0 0 18px #0000002e; padding: 60px 64px 0 64px}
.testamonials p{margin: 20px 0;}
.rating .fill{color: #ffc107;}
.rating .empty{color: #7d7d7d;}
.rating + img{transform: translateY(30px);}
.testamonials h3{font-size: 16px; font-weight: 600; margin-top: 54px;}
.projects{margin: 100px 0;}
.project-info{margin: 0 140px 0 60px;}
.project-info div p{line-height: 25px; font-size: 14px; margin: 25px 0;}
.project-info a{display: block; width: 214px; line-height: 51px; background: var(--db); color: var(--wt); text-align: center; font-size: 14px; border-radius: 5px;}
.team section{box-shadow: 0 0 18px #0000002e; border: 2px solid transparent; text-align: center; padding: 10px 10px 65px 10px; border-radius: 5px;}
.team section:hover{border-color: var(--db);}
.team h3{margin: 20px 0 5px;}
.team ul{ list-style: none; padding: 0; justify-content: center; gap: 50px; margin-top: 40px;}
.team .row{ margin-top: 50px;}


footer{ background: var(--db); color: var(--wt); padding:  60px 0;}
footer .flex p{font-size: 12px; color: #92989f;}
footer .flex{margin-top: 40px;}
footer h3{font-size: 18px; margin: 23px; line-height: 24px; font-weight: 600; color: #92989F;}
footer ul{list-style: none; padding: 0;}
footer a{ color: inherit; display: inline-block; font-size: 16px; line-height: 40px;}



@media screen and ( max-width:1280px) {
    .service{padding-right: 5px;}  
    .about ul{line-height: 30px;}
    
}

   

    
@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;}
nav{display: none;}
.menu{display: inline-block;}

h1{margin-left:0;}
.order-t-before{order: -1;}
    
.wrap-1 {height: auto;}
.banner .caption{margin: 0 0 0 0 ;}
.mission-img {width: 165px;}
.testamonials .upper{ padding: 60px 10px 0 10px;}
    }


@media screen and ( max-width:768px) {.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;}
.work-detail ul{flex-flow: column wrap;}
.work-detail ul li{flex-flow: column wrap;}
.work-detail li >a{writing-mode: horizontal-tb; width: 100%; height: 85px;}
.mission-img {width: auto;}
.team ul{gap: 15px;}
    
}

@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;}
.co-p-10{grid-column: span 10;}
.col-p-11{grid-column: span 11;}
.col-p-12{grid-column: span 12;}
h1{font-size: 30px;}
.mission .flex{flex-flow: column wrap;}
.mission{ margin: 20px 0 0 0 ;}
    
}