:root{
    --black-100 : #000;
    --orange : #FF7A01;
    --offwhite : #e5e5e5;
    --offblack : #8A8A8A;
    --gray : #292929;
}
@media screen and (max-width: 768px) {

    .navbar-nav{
        width: 100%;
        height: auto;
        margin-top:8px;
        background-color: var(--black-100);
        color: black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .navbar-nav .nav-item{
        margin: 10px 0 10px 0;
    }
    .navbar-toggler {
        background-color: transparent; /* Replace with your desired color */
        border: none; /* Removes border */
        outline: none; /* Removes outline */
    }
    
    .navbar-toggler:focus {
        box-shadow: none; /* Ensures no shadow appears on focus */
        outline: none; /* Removes focus outline */
    }

    .navbar-toggler-icon {
        background-image: url('/assets/hamburger-toggle.svg');
        /* Replace 'yourColor' with the color code, like '%23000' for black or '%23ff6347' for a specific shade */
    }


    
    body, html {
        margin: 0;
        padding: 0;
    }

    /* Header Video Section - Index Page */
       .header-section {
           width: 100%;
           height: 90vh;
           position: relative;
           overflow: hidden;
       }
   
       .header-section video {
           width: 100%;
           height: 100%; /* Ensure the video covers the entire height */
           object-fit: cover; /* Ensure the video fills the space without being cut off */
       }
   
       .header-content {
           width: 100%;
           height: 90%;
           display: flex;
           flex-direction: column-reverse; /* Stack the image below the text */
           align-items: center;
           justify-content: center;
           padding: 20px 0;
           z-index: 2; /* Ensure content stays above the video */
       }
      
       .header-title h1 {
           font-size: 30px; /* Adjust font size for mobile */
           line-height: 1.2em;
           color: #fff; /* Ensure text is white for better contrast */
       }
   
       .header-title p {
           font-size: 14px;
           color: #fff;
           line-height: 1.4em;
           text-align: justify; /* Make text easier to read on mobile */
           margin-top: 0;
       }
   
       /* .header-img {
           width: 100%;
           height: auto;
           max-height: 100%;
           object-fit: cover; /* Ensure the image fits properly 
           text-align: center;
       } */
   
       /* .header-img img {
           width: 60%;
           height: auto;
       } */
   
          
       /* Achievement and Award Section - Index Page */
         .achievement-area{
           grid-template-columns: repeat(2, auto);
         }
   
       /* Quotes Section - Index Page */
       .quote-area{
           flex-direction: column;
           padding: 10px 0;
       }
       .quote-text h2{
           font-size: 45px;
           text-align: left;
       }
       /* Missin-Vission Section - Index Page */
       .mission-vission-section{
           padding: 80px 30px;
       }
       .mission-vission-area{
           flex-direction: column;
       }
       .mission-vission-vid video{
           max-width: 100%;
       }
   
       /* Featured Section - Index */
       .feature-area{
           flex-direction: column;
           padding: 20px 0;
       }
       .feature-vid video{
           max-width: 100%;
           margin-top: 20px;
       }
   
       /* Blog Section - Index */
       .blog-area{
           flex-direction: column;
       }
       .blog-content h3{
        font-size: 40px;
       }
       .blog-text h2{
        font-size: 20px;
        font-weight: 400;
       }

   
       /* Quote Section - Index */
   
       
       /* Youtube Section - Index */
   
       .youtube-area{
           flex-direction: column;
       }
       .youtube-list ul li button {
           font-size: 14px;
       }
   
       /* ========= ABOUT RESPONSIVE BELOW ========= */
   
       .about-header-area{
           display: flex;
           flex-direction: column;
       }
   
       /* ========= GALLERY RESPONSTIVE BELOW ======== */
       .gallery-header-section{
           width: 100%;
           height: 50vh;
       }
       .gallery-header-area{
           width: 100%;
           height: 100%;
           background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url('/assets/ak-mishra-3.webp');
               background-attachment: fixed;
               background-size: contain;
               background-position: center right;
           display: flex;
           flex-direction: row;
           align-items: center;
           justify-content: center;
       }
   
       .cursor{
           display: none;
       }
   
       /* MOVING TEXT SECTION - EXPERIENCE TEXT */
       /* Moving Text */
       .moving-text{
           display: inline-block;
           white-space: nowrap;
           padding: 7vw 0 0 0;
           animation-duration: 70s;
           h5{
               font-size: 30vw;
           font-weight: 500;
           letter-spacing: -.5rem;
           color: var(--gray);
           display: inline-block;
           }
       }
       
       .moving-text .dot{
           width: 7vw;
           height: 7vw;
           border-radius: 50%;
           background-color: var(--gray);
           display: inline-block;
           margin: 0vw 2vw 4vw 2vw;
       }
   
       .experience-text{     
           h4{
               font-size: 160px;
               font-weight: 400;
               margin-bottom: -40px;
           }
           h5{
               font-size: 90px;
               font-weight: 500;
               
           }
           h6{
               font-size: 30px;
               margin-top: -20px;
               font-weight: 500;
           }
       }
   
        /* Social Media Section - Index */
      
       .socialmedia-container {
        width: 100%;
        max-width: 1200px;
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, auto);
        padding: 10px;
        margin: auto;
      }

      .footer-social-media{
        width: 100%;
        height: 180px;
    }
        /* Social Media Section - Index */

       /* Footer Section - Index */
       .footer-section{
        padding-top: 10px;
       }
       .footer-title h2{
            font-size: 85px;
           line-height: 70px;
           margin: 40px 0;
       }
       .footer-area{
           flex-direction: column-reverse;
       }
       .footer-content{
           width: 100%;
           margin: auto;
           padding: 50px 20px;
       }
       .footer-form form{
           padding: 50px 20px;
       }
       .footer-text{
           padding: 20px;
       }
   
   }