/* For screens below 350px */
@media (max-width: 350px) {
  .navbar {
    padding: 0.5rem; /* Reduce padding to make navbar smaller */
  }
  .navbar-brand {
    font-size: 1.2rem; /* Reduce font size of navbar brand */
  }
  .nav-link {
    font-size: 1rem; /* Reduce font size of navbar links */
  }
  .img-container {
    height: 100vh; /* Make image container full screen height */
  }
  .custom-img {
    object-fit: cover; /* Ensure image covers the full container */
    width: 100%; /* Make image full width */
    height: 100vh; /* Make image full screen height */
  }
}
@media (max-width: 768px) {
  .custom-img {
    width: 80%; /* Reduce the image width to 80% on smaller screens */
    height: auto;
  }
}

@media (max-width: 480px) {
  .custom-img {
    width: 60%; /* Reduce the image width to 60% on even smaller screens */
    height: auto;
  }
}






/*Home*/
 .image-container {
     width: 100%;
    overflow: hidden;
  }

  .image-container img {
    width: 100%;
    max-height: 50%;
    display: block;
  }






/* navbar*/
/*.exit-text {
  position: relative;
  display: inline-block;  make each span an inline-block element 
   background-color: #FF0000;  red background 
}*/

.drvsc{
    color: red;
}
.exit-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FF0000; /* red background */
  z-index: -1; /* move the pseudo-element behind the text */
}
.exit-text {
  position: relative;
  display: inline-block; /* make each span an inline-block element */
  padding: 0.2em; /* add some padding to manage the box size */
  background-color: #FF0000; /* red background */
  width: 30px; /* fixed width */
  height: 33px; /* fixed height */
  line-height: 18px; /* adjust line height to center the text vertically */
  text-align: center; /* center the text horizontally */
  margin: 0 5px; /* add some margin to add space between words */
}
.exit-l::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FF0000; /* red background */
  z-index: -1; /* move the pseudo-element behind the text */
}

.exit-l{
     position: relative;
  display: inline-block; /* make each span an inline-block element */
  padding: 0.2em; /* add some padding to manage the box size */
  background-color: yellow; /* red background */
  color: black;
  width: 30px; /* fixed width */
  height: 33px; /* fixed height */
  line-height: 18px; /* adjust line height to center the text vertically */
  text-align: center; /* center the text horizontally */
  margin: 0 5px; /* add some margin to add space between words */
}
.exit-{
      color: #FF0000; /* red color */
  font-size: 29px; /* adjust font size to match the EXIT letters */
  margin: 0 7px; /* add some margin to separate from EXIT and L */
}

section img{
    width: 100%;
    height: 80vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
.custom-img {
    width: 100%;
    height: 100%; /* Adjust the height as needed */
    object-fit: cover; /* Ensures the image covers the container without stretching */
}
.img-container {
    height: 50px; /* Set a specific height for the container */
}
@media (max-width: 768px) {
    .img-container {
        height: 500px; /* Adjust height for smaller screens */
    }
}

  .whatsapp-btn {
            position: fixed;
            bottom: 20px; /* Adjust as needed */
            right: 20px; /* Adjust as needed */
            background-color: #25D366; /* WhatsApp green color */
            color: #fff;
            border-radius: 50%;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            font-size: 24px;
            z-index: 9999; /* Ensure it's on top of other content */
            display: none; /* Hidden by default */
        }

        /* Show the button only on mobile and tablet devices */
        @media (max-width: 768px) {
            .whatsapp-btn {
                display: block;
            }
        }

        /* WhatsApp icon styling */
        .whatsapp-btn i {
            margin: 0;
        }












/*About*/
#About{
    background-color: grey;
    color: white;
}
.abt-text{
    font-size: 50px;
    
}
.abt-text-wrapper {
  position: relative;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 1s, transform 1s;
}

.abt-text-wrapper.animate {
  opacity: 1;
  transform: translateX(0);
}
@keyframes bounceIn {
    0% {
        transform: translateX(-100vw); /* Start off-screen to the left */
    }
    60% {
        transform: translateX(30px); /* First bounce */
    }
    80% {
        transform: translateX(-15px); /* Second bounce */
    }
    100% {
        transform: translateX(0); /* End position */
    }
}
.bounce-in {
    animation: bounceIn 1.5s ease-in-out forwards;
}



#Vehicles{
    background-color: grey;
}
/* Add animation keyframes */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply animations to the images */
.slide-in-left {
    animation: slideInLeft 1s ease-out;
}

.slide-in-right {
    animation: slideInRight 1s ease-out;
}







/*Lessons & Packages*/

#Lessons{
    background-color:grey; 
}
.ptext{
    color: white;
}




/*Driving Test Information*/

#Driving{
    background-color:grey; 
}






/*Contact*/ 
#Contact{
    background-color: grey;
}



#Usefullink{
    background-color: grey;
}


/*footer*/
.footer{
    color: white;
}

.exit-text{
    color: white;
}

.social-icons {
    display: flex;
    justify-content: space-evenly;
    gap: 5px;
}

.social-icons a {
    margin: 0 2px;
}

.social-icons a span {
    font-size: 24px;
     color: #ffffff;
}