@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates: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&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates: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&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');




*{
    padding: 0%;
    margin: 0%;
    
    
}


::-webkit-scrollbar{
    width: 7px;
    
}
::-webkit-scrollbar-thumb{
    
    height: 20px;
    background: #083962;
  }
  ::-webkit-scrollbar-thumb:hover{
    background: #052641;
  }     


  .app img{
    height: 5vh;
    transition: all 0.5s linear;
  }

  .app img:hover{
    transform: rotateX(360deg);
  }
  .app{
    display: flex;
  }


  .Btn{
    width: 13vw;
    height: 5vh;
    
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    background: transparent;
    font-size: 2.3vh;
    transition: all 0.1s linear;
    border-radius: 50px;
    border: 0.1px solid rgba(0, 0, 0, 0.267);
    position: relative;z-index: 99;text-decoration: none;
}

.Btn::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -100%;
        transition: all 0.2s ease-in-out;
        
    background-color: rgb(15, 15, 15);
    color: aliceblue;
    border-radius: 50px;
}

.Btn:hover{
    border: none;
    color: aliceblue;
}

.Btn:hover::after{
    bottom: 0%;
    z-index:-1;
    color: aliceblue;
    }



    /*------------------------------------HERO--------------------------------------------------------*/

    .hero {
        
        display: flex;
        justify-content: center;
        margin-top: 25vh;
        height: max-content;
        
        align-items: center;
       
    
      
    }

   .hero img{
       
        width: 100vw;
        height: 100vh;
    }


 

   
    

/*-------------------------------NAVBAR-------------------------------------------------------------*/



@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
  
#mobile-nav{
    display: none;
}

nav img{
    height: 12vh;
}

#mobile-nav ul li a:hover{
    color: #083962;
}

#nav-logo{
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and ( width<=900px ) {
    body #mobile-nav{
        display: block;
        position: fixed;
        top: 0%;
        width: 100%;
        z-index: 99999999999;
    }

   body .nav-bar{
        display: none;
    }
}




.nav-bar{
    display: flex;
    position: fixed;
    top: 0%;
    z-index: 9999999999999999999999999999;
    
    gap: 20px;
    
    align-items: center;
    
  
    width: 100%;
    background-color: rgb(255, 255, 255);
   
    
    height: 15vh;
     
   
    justify-content: space-between;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.555);
    
    
    



    
}


.nav-items{
    display: flex;
    gap: 3vh;
    list-style: none;
    padding-right: 5vw;
    font-family: "Montserrat", sans-serif;font-weight: 400;
font-style: normal;

text-transform: uppercase;
color: black;
    overflow-x: visible;
}

.nav-links ul li a{
    text-decoration: none;
    
    font-size: 2vh;
    display: block;
    
    overflow-x: visible;
    font-weight: 500;
    color: rgb(0, 0, 0);
    position: relative;
    transition: all 0.1s linear;
}
.nav-links ul li a:hover{
    
     text-shadow: 0 0 5px #00000007;
     /* font-weight: 900; */
     
   
    
    overflow-x: visible;    
}

#cust{
    color: rgb(0, 0, 0);cursor: pointer;
}
.nav-links ul li a::after{
    content: '';
    position: absolute;
    bottom: -7px;
    background-color: #082943;
    height: 0.3px;
    overflow-x: visible;
    transition: all 0.2s linear;
    width: 100%;
    left: 0%;
    transform: scaleX(0);
}
.nav-links ul li a:hover::after{
    
    transform: scaleX(
        1
        );
    }
    
    .company{
        position: relative;
        transition: all 3s linear ;
        overflow-x: visible;
        
}
    .cust-service{
        position: relative;
        transition: all 3s linear ;
        overflow-x: visible;
        
}



.Company-subMenu{
    
    flex-direction: column;
    opacity: 0;
    gap: 15px;
    /* box-shadow: 0 0 5px black; */
    position: absolute;
    top: -10px;
    left: -25%;
    width: 100px;
    color: black;

    height: 140px;
    
    transition: all 0.2s linear;
    color: white;
    text-shadow: 0 0 25px white,0 0 50px white,0 0 100px white,0 0 125px white;
    
    text-align: center;
    visibility: hidden;
}




.logo img{
    height: 15vh;
    cursor: pointer;
    position: relative;
    top: 1vh;
    padding-left: 1.3vw;
        
    
    
}




.Cust-subMenu{
    
    flex-direction: column;
    opacity: 0;
    gap: 15px;
    /* box-shadow: 0 0 5px black; */
    position: absolute;
    top: -10px;
    left: -15%;
    width: 100px;
    height: 140px;
    
    transition: all 0.2s linear;
    color: white;
    text-shadow: 0 0 25px white,0 0 50px white,0 0 100px white,0 0 125px white;
    
    text-align: center;
    visibility: hidden;
}

.Company-subMenu li a{
    display: block;
    margin-top: 25px;
    position: relative;
}
.Cust-subMenu li a{
    display: block;
    margin-top: 25px;
    position: relative;
}

/* #company-link{
    height: 0px;

    
} */

.company:hover .Company-subMenu{
    
    top: 20px;
    opacity: 1;
    visibility: visible;

} 
.cust-service:hover .Cust-subMenu{
    
    top: 20px;
    opacity: 1;
    visibility: visible;

} 



.Company-subMenu li{
    list-style: none;
}
.Cust-subMenu li{
    list-style: none;
}




/*------------------------HOME Section 1-------------------------------------*/


 .hero{
        height: 82vh;
        
        
    }


















/*---------------------------------------rides-----------------------------------------------*/


.Mobilehero{
    display: none;
}

.ride div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.884);
}
.ride div svg{
    margin-right: 10px;
}


    

.rides{
    height: fit-content;
    font-family: "Montserrat", sans-serif;

    color: #282828;
    background-color: aliceblue;
  margin-top: 16vh;
  margin-bottom: 4vh;
    
    
  }
  
  .ride{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:  7vh 0 7vh 0;
    transition: all 0.3s linear;
    border-radius: 30px;

    
  }
  .ride:hover{
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.288);
    transform: scale(1.01);
  }
  
  .vehicle{
    display: grid;
    align-items: center;
    justify-content: space-around;
    
    
    grid-template-columns: 25vw 25vw 25vw;
  
  }
  
  .vehicle img{
    height: 25vh;
    width: 25vh;
    transition:all 0.4s linear;
  }
  .vehicle img:hover{
      filter:drop-shadow(0 0 5px #C3D4E3);
  }

  .vehicle p{
    font-size: 0.9rem;
    font-weight: 900;
  }
  
  
  
 .rides h2{
  
    font-size:8vh;
    font-weight: 800;
    text-align: center;
    padding: 50px 0px 50px 0px;
  
  }

    

/*-------------------Services we provide-----------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');




.scroll3-wrap{
    display: flex;
    flex-direction: column;
    

    
    

    background-color:rgb(255, 255, 255);
    overflow: hidden;
    
  
    cursor: default;
}
.service-wrap{
   
    overflow: hidden;
    height: 70vh;
    background-color: #083962;
     width: 100vw;
     position: relative;
    


}




.service-wrap h2{
    font-size: 4rem;
    color: aliceblue;
    text-transform: capitalize;
   
    
  
  font-weight: 900;
  
  
  
}

#service-heading{
    font-size: 8vh;
    color: rgb(255, 255, 255);
    text-transform: capitalize;
   
    
  font-optical-sizing: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  
  z-index: 2;
  position: relative;
  
}
/* #service-heading::after{
    content: 'We Deliver In And Around';
    font-size: 4rem;
    color: rgba(38, 0, 255, 0.884);
    
    text-transform: capitalize;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.493);
    font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  position: absolute;
  top: 0%;
  left: -6px;
  font-weight: 700;
  padding-bottom: 20px;
  
  
  font-style: normal;
} */


.places-section{
 padding-top: 5vh;
  display: flex;
  gap: 5vh;
  flex-direction: column;
  align-items: center;
  color: white;
}

.location-wrap{
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 100px;
  position: relative;

}

.location img{
  height: 30vh;   
  width: 30vh;
  transition: all 0.3s linear;
  cursor: pointer;
  
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.445));
}
.location img:hover{
  transform: scale(1.1);
}

.location h3{
  font-weight: 700;
}
.location{
  display: flex;
  flex-direction: column;
  
  align-items: center;
}






/*-------------------------------FAQ---------------------------------------------------------*/


.faq{
    
    
    margin-top: 2vh;
    overflow: hidden;
    cursor: default;
    padding-bottom: 6vh;
    
}
.faq-ques{
    font-family: "Montserrat", sans-serif;
}
a{
    text-decoration: none;
}

    .faq-btn{
        
        display: flex;
        margin-top: 40px;
        justify-content: center;
    }
    
   
    
    .faq-name{
        text-align: center;
        font-size: 8vh;margin: 0%;
        font-weight: 900;
        color: #282828;
        padding-bottom: 4vh;
    }
    
    
    


.faq-wrap{
    display: flex;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



/*-------------------------------ADVANTAGES---------------------------------*/

.advantages{
    
    overflow: hidden;
    padding-top: 10vh;
    
    
}

.advantages h3{
    text-align: center;
    font-size: 2.5rem;
    color: #282828;
    font-weight: 800;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}

/* 
{
 
} */

.flex1 div,.flex2 div{
    height: 30vh;
    width: 20vw;
    
    display: flex;
    transition: all 0.2s linear;
    flex-direction: column;
    gap: 10px;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.534);
    justify-content: center;
    align-items: center;
}

.grid img{
    height: 10vh;
    width:10vh ;
    animation: levitate 2s ease infinite;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.027)
    );
}

@keyframes levitate {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

.flex1 div:hover{
    background-color: #083962;
    color: aliceblue;
    box-shadow: none;
    border:1px solid #34a3ff;
}
.flex2 div:hover{
    background-color: #083962;
    color: aliceblue;
    box-shadow: none;
    border:1px solid #34a3ff;
}

.grid p{
    text-align: center;
    font-size: 1.2rem;
}

.grid{
    display:flex ;
    flex-direction: column;
    height: 90vh;
    gap: 40px;
    align-items: center;
    justify-content: center;

    
}

.flex1,.flex2{
    display: flex;
    gap: 20px;
}



.social{
    display: flex;
    gap: 10px;
   
    align-items: center;
   
    justify-content: center;
    
    
    
}

.circle{
    height: 6vh;
    width: 6vh ;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s linear;
    border: 1px solid aliceblue;
    position: relative;
    bottom: 1vh;
    border-radius: 50%;
}

.circle svg{
    color: aliceblue;
    height: 5vh;
}

.circle:hover{
    
    transform: rotateZ(360deg);
    box-shadow: 0 0 5px #83c1e781,0 0 25px #7ab5da83,0 0 50px #7dbbe27a,0 0 100px #77b3d879;
}
.mediaLinks{
    display: flex;
    flex-direction: column;
    justify-content: center;
   
}
.mediaLinks p{
 
    
    
    font-size:3.9vh ;
    padding-bottom: 1.5vh;
}







































.maintenance{
    height: 100vh; 
    display: flex;
    
    overflow:hidden;
    justify-content: center;
    align-items:center;
    flex-direction: column;
         background-color: #083962;
    color: aliceblue;
    font-family: "Montserrat", sans-serif;
    
}

.maintenance p{
    font-size: 5vh;
}


.maintenance span{
    font-size: 7vh;font-weight: 600;
    padding-top: 5vh;
    animation: glow 3s infinite linear;

}

@keyframes glow {
    0%{
        text-shadow: 0 0 0px aliceblue;
    }

    50%{
        text-shadow: 0 0 5px rgba(240, 248, 255, 0.562),0 0 25px rgba(240, 248, 255, 0.555),0 0 50px rgba(240, 248, 255, 0.534),0 0 100px rgba(240, 248, 255, 0.589);
    }
}





















.footer{
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   height: auto;
    color: aliceblue;
    background-color: rgba(0, 0, 0, 0.945);
    padding: 5vh 0 5vh 0;
  
}



.f-t{
  display: flex;
  justify-content: space-between;
  width: 95%;
  
}

.f-b{
  display: flex;
  
  justify-content: space-between;
  width: 95%;
  padding-top: 20px;
  border-top: 0.5px solid aliceblue;

}

.f-b div{

  display: flex;
  flex-direction: column;
  font-size: 0.9rem;

}



.center-footer{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 5vh 0 10vh 0;
}

.quick-links ul li a{
    text-decoration: none;
    color: aliceblue;
}

.quick-links ul li a:hover{
    text-decoration: underline;
  
}

.quick-links ul{
    list-style: none;
}
.support ul li a{
    text-decoration: none;
    color: aliceblue;
    text-transform: capitalize;
}

.support ul li a:hover{
    text-decoration: underline;
}

.support ul{
    list-style: none;
}

.right-footer span{
    font-size: xx-small;
}


.right-footer{
    padding-top: 5vh;
    padding-right: 5vh;
    
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    font-size: 2vh;
    font-weight: 100;

    
    
    gap: 4vh;
}
.support{
    padding-top: 5vh;
    padding-right: 10vh;
    display: flex;
    flex-direction: column;
    
}

.right-footer img{
    height: 7vh;
    width: 20vh;
    transition: all 0.4s linear;
   
}
.right-footer img:hover{
   transform: scale(1.06);
}




.social{
    display: flex;
    gap: 10px;
   
    align-items: center;
   
    justify-content: center;
    
    
    
}

.circle{
    height: 6vh;
    width: 6vh ;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s linear;
    border: 1px solid aliceblue;
    position: relative;
    bottom: 1vh;
    border-radius: 50%;
}

.circle svg{
    color: aliceblue;
    height: 5vh;
}

.circle:hover{
    
    transform: rotateZ(360deg);
    box-shadow: 0 0 5px #83c1e781,0 0 25px #7ab5da83,0 0 50px #7dbbe27a,0 0 100px #77b3d879;
}
.mediaLinks{
    display: flex;
    flex-direction: column;
    justify-content: center;
   
}
.mediaLinks p{
 
    
    
    font-size:3.9vh ;
    padding-bottom: 1.5vh;
}


























































@media only screen and (width<=830px) and (width>576px) {

 

      

  .footer {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      
      padding: 10vh 0vh 0 5vh;
      color: aliceblue;
      background-color: rgba(0, 0, 0, 0.945);
  }

  .f-t{
    flex-direction: column;
    padding-bottom: 10vh;
  }

  .f-b{
    padding-bottom: 10vh;
  }
  .mediaLinks {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: baseline;
  }
  
  .right-footer img {
      height: 7vh;
      width: 20vh;
      padding: 0 2vh 0 0vh;
  }
  
  .right-footer {
      padding-top: 7vh;
      padding-right: 5vh;
      display: flex;
      flex-direction: column;
      justify-content: end;
      font-size: 2vh;
      font-weight: 100;
      gap: 10vh;
  }

  
 










  
}

@media  screen and (max-width: 576px) {


.f-t{
  flex-direction: column;
  padding-bottom: 10vh;
}

.footer {
  display: flex;
  flex-direction: column;
  padding-left: 5vh;
  justify-content: space-around;
  
  color: aliceblue;
  background-color: rgba(0, 0, 0, 0.945);
}

.center-footer {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 5vh 0 5vh 0;
}

.support {
  padding-top: 0;
  padding-right: 10vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
}



}