@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
*{    box-sizing: border-box;    margin: 0;    padding: 0;    text-transform: capitalize;    font-family: "Roboto Slab", serif;}
html {  scroll-behavior: smooth;}
header{    position:relative ;     padding: 2em 0;    background: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.1));}
.logo{    font-size: 2em;    font-weight: 600;}
.navbar{    width: 100%;        padding: 2rem, 4rem;          margin: auto;           display: flex;    align-items: center;    justify-content: space-between;    z-index: 1;    top: 0;    position: fixed;background-color: #d6d6d6;}
.navbar.scrolled{background-color: #d6d6d6;box-shadow:rgba(0,0,0,0.35) 0px 5 15px ;}
.nav_items{    display: flex; gap: 0.2rem;   justify-content: center;    flex: 1;    align-items: center;   }
.nav_items li{list-style: none; padding: 1em;}
.nav_items li a{    text-decoration: none;       transition: 0.3s;    font-size:16px ;    font-weight:600 ;    color: #000;}
.nav_items li::before{    content: '';    height: 2px;    width: 0%;    display: block;    background: #0071c5;    margin: auto;    transition: 0.5s;}
.nav_items li:hover::before{    width: 100%;}.btn{padding: 12px 15px;font-size: 16px;cursor: pointer;}
.btn1 a{     background-color: transparent;    border: 2px solid transparent;    margin-right: 2px;    text-decoration: none;    color: #000;}
.btn1{    background-color: transparent;    border: 2px solid transparent;    margin-right: 2px;}
.btn1:hover{    color: #0071c5;    border: 2px solid #0071c5;}
.btn2{    background-color: #0071c5;    color: #fff;    border: 2px solid #082567;}
.btn2:hover{    color: #0071c5;    border: 2px solid #0071c5;    background: transparent;}
.nav_menu{    display: none;}
/*main*/.main{    display: grid;    grid-template-columns: 1fr 1fr;    gap: 50px;    align-items:start; box-sizing: border-box;   padding:2em;   /* box-sizing: border-box;*/    width: 90%;    margin: auto;    }
.left{ display: flex;  flex-direction: column;  justify-content: center;}
.left h1{    font-size: 3em;  margin-bottom: 0.5em;}
.left p{    font-size:16px ;    line-height:1.6 ;    padding: 2% 0; color: #555;}
.right{    display: flex;    justify-content: center;    align-items: center;}
.right img{        width: 100%;  max-width: 500px;  height: auto; border-radius: 10px;} 
   .sec{        padding: 8% 0 5% 0;        width: 82%;        margin: auto;    }    
   .head,.Service_box{        display: grid;        grid-template-columns: 1fr 1fr;        gap: 0em 6em;        align-items: center;    }   
    .head .sub_heading,     .head .heading{        grid-column: 1;    }  
      .sub_heading{        color: #0071c5;        font-size: 3rem;    }
      .heading{font-size: 1.7rem;}
      .head .para{   color: #777;}
      .boxes{    margin-top: 4rem;    display: grid;    gap: 2rem;    grid-template-columns: repeat(3,1fr);}
      .box{    text-align: center;}
      .box span .right_box li span,.box_1 span{    display: inline-block;    font-size: 2.3em;    margin-bottom: 2rem;    padding: 10px 17px;    color: #0092ff;    border-radius:  5px;      background-color: #f2f2f2;     border: 4px solid #fff;     box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
      .box h4{    margin-bottom: 1rem;    font-size: 1.5rem;    font-weight: 700;    color: #000;}
      .box:hover span, .right_box li:hover span{    padding: 14px 21px;    color: #fff;    border: none;    cursor:pointer ;    background: linear-gradient(to bottom, #082567,#0071c5);}
      /*services*/
      .head_1{    width: 70%;    text-align: center;    margin: auto;}
      .para{    color: #777;}.head_1 .heading{    padding: 15px 0;}
      .Service_box{    padding-top: 4rem;    gap: 0em 3em;}
      .Service_box li{list-style: none;}
      .left_box p{    font-size: 14px;    padding: 15px 0;    line-height: 1.5;    margin-right: 3em;    color: #777;}
      .left_box li{    padding: 15px 0;}
      .left_box li i{    color: #fff;    padding: 1px;    background: linear-gradient(to bottom,#082567,#0071c5);    border-radius: 50%;    margin-right: 12px;}
      .left_box button{    margin-top: 2em;}
      .right_box li{display: flex;align-items: flex-start;gap: 1em;margin: 2% 0;}
      .right_box h4{    font-size: 19px;}
      .right_box p{    font-size: 15px;padding-top: 12px;color: #777;}
      /*route*/
      .boxes_1{    margin-inline-end: auto;    margin-top: 4rem;    position: relative;}
      .box_1{    position: absolute;    max-width: 190px;}
      .box_1 span{    margin-bottom: 0.5rem;    font-size: 1.7rem;background-color:#d6d6d6;}
      .box_1:nth-child(1){    left: 5rem;    top: 1rem;}
      .box_1:nth-child(2){    left: 1rem;    top: 50%;    text-align: left;    transform: translateY(-50%);}
      .box_1:nth-child(3){    left: 5rem;    bottom: 0rem;    }
      .box_1:nth-child(4){    right: 5rem;    top: 1rem;    }
      .box_1:nth-child(5){    right: 1rem;    top: 50%;    text-align: right;    transform: translateY(-50%);}
      .box_1:nth-child(6){right: 5rem;    bottom: 0rem;    text-align: right;}
      .boxes_1 img{     display: flex;    margin-inline: auto;    opacity: 0.4;    width: 720px;    border-radius: 10%;} 
      /*contact*/
       .contact{    background: linear-gradient(to bottom,#082567,#0071c5);    margin: 4% auto;    border-radius: 15px;    color:#fff; }  
       .box_2{    text-align: center;    margin-top: 2%; }
        .box_2 input{    padding: 12px 15px;    font-size: 16px;    outline: none;border: 2px solid #082567; }
        .box_2 button{    background-color: #0092ff;    color: #fff;    border: 2px solid #fff;}
        /*footer*/
        .footer{    display: grid;    gap: 4rem 2rem;    border-bottom: 1px solid #777;    grid-template-columns: repeat(4,1fr);}
        .footer_col h4{    margin-bottom: 2rem;    font-size: 1.5rem;    font-weight: 700;    color: #000;    letter-spacing: 1px;}
        .footer_links{    display: grid;    gap: 1rem;}
        .footer ul,.footer_bar ul{    list-style: none;}
        .footer_links li a{    text-decoration: none;    color: #777;}
        .footer_links li a:hover{    color: #0092ff;}.footer_bar{padding-block: 2rem;display: flex;align-items: center;justify-content: space-between;gap: 1rem;flex-wrap: wrap;}
        .footer_bar p{    font-weight: 500;    color: #777;}
        .footer_bar h4{    font-size: 1.5rem;    font-weight: 700;}
        .footer_socials{    display: flex;    align-items: center;    gap: 1rem;}
        .footer_socials li a{    display: inline-block;    padding: 8px 10px;    font-size: 1rem;    color: #000;    text-decoration: none;    border-radius: 100%;    box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
        .footer_socials li a:hover{    background: linear-gradient(to bottom,#082567,#0071c5);    color: #fff;}
       /*gallery*/
                 .gallery-section{
                  padding: 50px 0 100px;
                  text-align: center;
                  
               }
               .gallery-section .gallery-list{
                  display: flex;
                  flex-wrap: wrap;
                  gap: 32px;
               }
               .gallery-section .gallery-list .gallery-item{
                    overflow: hidden;
                    border-radius: 35px;
                    width: calc(100% / 3 - 32px);
               }
               .gallery-section .gallery-item .gallery-image{
                  width: 90%;   
                  height: 95%;
                  cursor: zoom-in;
                  transition: 0.3s ease;
               } 
               .gallery-section .gallery-item:hover .gallery-image{
                  transform: scale(1.3);}
        /*responsive*/
        @media only screen and (max-width:920px){    .main{        width: 95%;    }    .left h1{        font-size: 2.7em;    }    .navbar{        padding: 2rem 2rem;    }    .sec{        width: 90%;    }   .gallery-section .gallery-list{gap: 30px;}   .gallery-section .gallery-list .gallery-item{  width: calc(100% / 2 - 30px);} } 
        @media only screen and (max-width:820px){    .nav_items{        position: absolute;        top: 0;        left: 0%;        width: 100%;        padding: 5em 0em 2em 0em ;        display: flex;        align-items: center;        text-align: center;        flex-direction: column;        gap:0.2rem ;        background-color: #d6d6d6;        transition: 0.5s;        z-index: -1;        transform: translateY(-100%);}        .nav_items.open{        transform: translateY(0);   z-index: -1;  }    .nav_menu{        display: block;        font-size: 2em;    }    .nav_btns{        display: none;    }    .main,.head,.Service_box{        grid-template-columns: 1fr;    }    .head_1{        width: 95%;    }    .head .para{        grid-column:1 ;    }    .boxes{        grid-template-columns: repeat(2,1fr);    }    .footer{          grid-template-columns: repeat(3,1fr);    }}
@media only screen and (max-width:680px){ .gallery-section .gallery-list .gallery-item { width: 100%;} .boxes{    grid-template-columns: repeat(1,1fr);   }}.route{    width: 100%;}.footer_bar{    flex-direction: column;    text-align: center;}.footer{    grid-template-columns: repeat(2,1fr);}
@media only screen and (max-width:465px){ .hero-title {  font-size: 2em; text-align: center;} .left h1{    font-size: 2em;      } h1{    top:6px; } .heading{    font-size: 2.5em; } .main{    width: 100%; }.box_1{      position: static !important;  margin: 10px auto;  width: 80%;  text-align: center;}.boxes_1 {  display: flex;  flex-wrap: wrap;  justify-content: center;  align-items: center;} .right img {    width: 100%;    max-width: 300px;    height: auto;  }.boxes_1 img{    width: 300px;    padding: 5em 0;}.box_2 input,.box_2 button{    width: 70%;}.box_2 button{    margin-top: 2%;}.footer{    grid-template-columns: repeat(1,1fr);}.hero-title br {display: none; /* optional for smaller screens */}}
@media (max-width: 400px) {  .footer {    grid-template-columns: 1fr;    text-align: center;  }.logo img {    height: 35px;}}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}