body{
    margin: 0;
    padding: 0;
}
*{
    box-sizing: border-box;
}
.footer-links{
    display: none;
}
nav {
    background-color: #ffffff;
    position: sticky;
    color: #252549;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;

    position: sticky;
    top: 0px; /* Stick the navigation bar to the top of the viewport */
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

nav img {
    height: 40px;
    margin-right: 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    display: flex;
 
}




nav ul li:last-child {
    margin-right: 0;
}


nav ul li a {
    color: #15152c;
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 14px;
    margin-right: 2px;
}
.icon-item:hover a{
    color: #696991;
}
.icon-item {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-bottom: 5px;
    margin-right: 20px;
    
}
.icon-item i {
    opacity: 0; /* Set initial opacity to 0 (completely transparent) */
    transition: opacity 0.3s ease; /* Smooth transition for opacity property */
}

.icon-item:hover i {
    opacity: 1; /* Set opacity to 1 (completely opaque) on hover */
}
.icon-item:hover::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background-color: #252549;
    transition: width 0.3s ease; /* Smooth transition for the width property */
}

.icon-item::before {
    content: ''; /* Moved this part to hover state to apply underline effect only on hover */
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 2px;
    width: 0;
    background-color: #252549;
    transition: width 0.3s ease; /* Smooth transition for the width property */
}

.icon-item i {
    padding-right: 5px;
    font-size: 11px;
}

nav ul button{
    width: 80px;
    height: 25px;
    border: none;
    border-radius: 10px;
    background-color: #080829;
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    cursor: pointer;
    animation: bubble 2s infinite;
}
nav ul button:hover{
    border: 1.5px solid #15152c;
    background-color: white;
    color: #252549;
}

nav ul li i{
    padding-right: 5px;
    font-size: 13px;
}

.dropdown-content {
    display: none;
    top: 30px;
    left: 40%;
    position: fixed;
    z-index: 1;
    justify-content: space-between;
  

}
.dropdown-content li{
    padding-right: 20px;
    margin-top: 2%;
    color: #000;
}
.dropdown-content li a:hover{
    color: #000;
}
.services-dropdown.expanded .dropdown-content {
    display: flex;
    
}
nav {
    /* ... (existing styles) ... */
    transition: height 0.3s ease; /* Add transition for smooth height change */
}

nav.expanded {
    height: 100px; /* Set the desired expanded height */
}
.menu-icon{
    display: none;
}
@font-face {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    src: url(../fonts/Galvanizer-Thin-BF653725d0915a8.ttf);
}.container {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Add margin at the bottom to create space between containers */
}

.text-container {
    width: 500px;
    margin-right: 20px; /* Add margin to create space between text and image */
    background-color: #ffffff;
    padding: 20px;
    text-align: justify;
    text-justify: inter-word;
    color: #080829;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    font-weight: 550;
}
.container{
    margin: 50px 0px;
}
.box h1{
    margin-top: 3%;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 36px;
    text-align: center;
    text-transform: uppercase;
}
.box h2{
    margin-top: 3%;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    padding: 10px 200px;
    text-transform: capitalize;
    font-weight: normal;

}
.image-container {
    width: 0;
    overflow: hidden;
    transition: width 1s ease-in-out; /* Use ease-in-out to create a smooth transition effect */
}

.image-container img {
    max-width: 100%;
    height: auto;
    width: 100%;
    margin-top: 40px;
}
.pop-from-right {
    width: 0;
    transition: width 1s ease-in-out;
    margin-left: auto; /* Align the container to the right */
}

.pop-from-right img {
    max-width: 100%;
    height: auto;
    width: 100%;
    margin-top: 40px;
}

.container:hover .pop-from-right {
    width: 50%; /* Adjust the width based on your design */
}


.container1 {
    display: flex;
}

.image-container1 {
    flex: 1;
    text-align: right;
    overflow: hidden;
    animation: slideIn 2s;
}

.img1 {
    max-width: 100%;
    height: auto;
}

.text-container1 {
    flex: 1;
    background-color: #f0f0f0;
    padding: 20px;
    opacity: 0;
    margin-top: 600px;
    margin-right: 200px; 
}

@keyframes slideIn {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.container {
    display: flex;
    justify-content: space-between;
    background-color: white;
    padding: 20px;
    
}

.mission-container, .vision-container, .achievements-container {
    flex: 1;
    background-color: white;
    padding: 20px;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    opacity: 0;
    animation: fadeInFromLeft 0.5s ease forwards;
    transition: transform 0.3s ease; /* Add transition for smooth scaling */
}


.mission-container:hover, .vision-container:hover, .achievements-container:hover {
    transform: scale(1.05); /* Scale slightly on hover */
}

@keyframes fadeInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.vision-container {
    animation-delay: 1s;
}

.achievements-container {
    animation-delay: 2s;
}

.container2{
    padding: 50px 0px;
    border-top: 1px solid #69699146;
    border-bottom: 1px solid #69699146;
}
.container2 h1, h2{
    text-transform: uppercase;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}
.container2 p{
    text-align: justify;
    text-justify: inter-word;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.mission-container, .vision-container, .achievements-container {
    transition: all 0.3s ease; /* Add transition property for smooth effect */
}

.mission-container:hover, .vision-container:hover, .achievements-container:hover {
    background-color: #080829;
    color: white;
    transform: scale(1.05); /* Apply transform instead of scale directly in the hover state */
}

body {

    overflow-x: hidden; /* Hide horizontal overflow for the whole page */
}

.scroll-container h1{
    text-align: center;
    font-size: 32px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-transform: uppercase;
}
.scroll-container {
    position: relative;
    overflow: hidden;
    padding: 50px 0px;
}

.scroll-content {
    display: flex;
    transition: transform 0.5s ease-in-out;
    padding: 50px 0px;
}

.scroll-content img {
    width: 25%; /* Set width to show 4 images in a row */
    flex-shrink: 0;
    height: 150px;
    object-fit: contain;
    padding: 20px;
}




.scroll-arrows {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0px 10px;
}

.scroll-arrows .arrow {
    font-size: 24px;
    cursor: pointer;
}

.left-arrow {
    margin-right: auto;
}

.right-arrow {
    margin-left: auto;
}



footer{
    background-color: #15152c05;
}

.footer-content{
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.footer-data{
    padding: 30px 0px;
    display: flex;
    justify-content: space-evenly;
    
    
}
.dhome-data img{
    width: 150px;
    height: 150px;
}
.dhome-data p{
    text-align: justify;
    text-justify: inter-word;
    width: 500px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.dhome-data{
    display: flex;
    flex-direction: column;
    
}
.footer-social-links{
    padding: 20px 0px;

   
}
.footer-social-links a{
    font-size: 25px;
    padding-left: 5%;
}
.nav-links{
    padding-left: 150px;
    display: flex;
    flex-direction: column;
    
}
.footer-links{
    padding-left: 150px;
    display: flex;
    flex-direction: column;
}
.nav-links li{
    text-align: left;
}
.footer-data li{
    list-style-type: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 13px;
    padding-top: 10%;
    color: black;
    font-weight: bold;
}
.footer-data li a{
    color: black;
    text-transform: capitalize;
}
.footer-data li a:hover{
    color: #25254998;
}

.nav-links h1{
    font-size: 17px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.footer-links h1{
    font-size: 17px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.contact{
    border-top: 1px solid #15152c27;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}
.contact a{
    font-size: 17px;
    color: #080829;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.contact a i{
    padding-right: 5px;
    font-size: 13px;
}

.address{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 16px;
    text-transform: capitalize;
    border-bottom: 1px solid #15152c27;
}

.address i{
    padding-right: 5px;
    font-size: 13px;
}

.copyright{
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}
.copyright a{
    text-transform: capitalize;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 15px;
    color: #080829;
}

#insta {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
            /* Also define standard property for compatibility */
            background-clip: text;
    -webkit-text-fill-color: transparent;
    
    
    
  }
  #youtube{
    color: red;
  }
  a {
    text-decoration: none;
  }


  
.menu-icon{
    display: none;
}
#contactForm {
    position: fixed;
    bottom: 20px;
    left: 35px;
    text-align: center;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    width: 350px;
    height: auto;
    z-index: 99;
    display: none;
}


.contact-us h1{
    text-align: center;
    font-size: 26px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.contact-us {
    /* Rest of your styles */
    position: relative;
    padding-top: 40px; /* Adjust padding to make room for the close button */
}
.form-group {
    margin: 0px 0;
    text-align: left;
    padding: 10px;
}

.contact-us label {
    display: block;
    margin-bottom: 5px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
}

.contact-us input,
textarea {
    width: 100%;
    padding: 7px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 13px;

}

.contact-us button {
    background-color: #252549;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.contact-us button:hover {
    background-color: #15152c;
}



.contact-us-popup {
    display: none;
    max-width: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 20px;
    text-align: center;
    z-index: 999;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out; /* Add a transition effect */
}

.contact-us-popup.active {
    opacity: 1; /* Displayed */
}

#contactForm1 {
    position: fixed;
    bottom: 20px;
    right: 35px;
    text-align: center;
    padding: 0px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    width: auto;
    height: auto;
    z-index: 99;
    display: none;

    /* Center the element horizontally */
    left: 50%;
    transform: translateX(-50%);
}
.quote-data{
    padding: 10px;
    width: 300px;
}
.quote-section{
    display: flex;
    justify-content: space-between;
}
.quote-section img{
    width: 300px;
    height: 500px;
    object-fit: cover;
    border-radius: 30px 0 0 20px;
}
.contact-us1 h1{
    text-align: center;
    font-size: 26px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.close-btn1 {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.contact-us1 {
    /* Rest of your styles */
    position: relative;
    padding-top: 40px; /* Adjust padding to make room for the close button */
}
.form-group {
    margin: 0px 0;
    text-align: left;
    padding: 10px;
}

.contact-us1 label {
    display: block;
    margin-bottom: 5px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
}

.contact-us1 input,
textarea {
    width: 100%;
    padding: 7px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 13px;

}

.contact-us1 button {
    background-color: #252549;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.contact-us1 button:hover {
    background-color: #15152c;
}

#contactForm2 {
    position: fixed;
    bottom: 10px;
    right: 35px;
    text-align: center;
    padding: 0px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    width: auto;
    height: auto;
    z-index: 99;
    display: none;

    /* Center the element horizontally */
    left: 50%;
    transform: translateX(-50%);
}
.quote-data2{
    padding: 10px;
    width: 300px;
}
.quote-section2{
    display: flex;
    justify-content: space-between;
    height: 500px;
}
.quote-section2 img{
    width: 300px;
    height: auto;
    object-fit: cover;
    border-radius: 30px 0 0 20px;
}
.contact-us2 h1{
    text-align: center;
    font-size: 26px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.close-btn2 {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.contact-us2 {
    /* Rest of your styles */
    position: relative;
    padding-top: 40px; /* Adjust padding to make room for the close button */
}
.form-group {
    margin: 0px 0;
    text-align: left;
    padding: 10px;
}

.contact-us2 label {
    display: block;
    margin-bottom: 2px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
}
.quote-section2 .light-social-links{
    display: flex;
    justify-content: space-around;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-top: 3px;
}
.quote-section2 .light-social-links a{
    padding: 5px 20px;
}
.contact-us2 input,
textarea {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 13px;

}

.contact-us2 button {
    background-color: #252549;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.contact-us2 button:hover {
    background-color: #15152c;
}
.whatsapp{
    position: fixed;
    right: 30px;
    bottom: 90px;
    
}
.whatsapp a{
    font-size: 22px;
    background-color: green;
    color: white;
    width: 40px;
    height: 40px;
    padding: 5px 8px;
    border-radius: 5px;
}
.whatsapp a:hover{
 
    background-color: white;
    color: green;
}
/* Add a media query for mobile devices (example: max-width: 768px) */
@media screen and (max-width: 768px) {
    nav ul {
        background-color: white;
        position: fixed;
        height: 100vh;
        width: 100%;
        top: 60px;
        right: -100%; /* Initial position, off the viewport */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Center the content horizontally */
        transition: right 0.3s ease;
        z-index: 99;
    }
    nav ul .quote {
        height: 25px;
        position: fixed;
        top: 20px;
        right: 60px;
    }
    
    nav ul.open {
        right: 0; /* Move in from the right when open class is added */
    }
    .menu-icon {
        display: block;
        position: fixed;
        right: 20px;
        top: 20px;
        cursor: pointer;
        z-index: 100;
    }
    
    .menu-icon div {
        width: 25px;
        height: 3px;
        background-color: #15152c;
        margin: 5px auto;
        transition: 0.3s;
    }
    
    .menu-icon .bar1.rotate-down,
    .menu-icon.close .bar1 {
        transform: rotate(-45deg) translate(-5px, 5px);
    }
    
    .menu-icon .bar2.fade-out,
    .menu-icon.close .bar2 {
        opacity: 0;
    }
    
    .menu-icon .bar3.rotate-up,
    .menu-icon.close .bar3 {
        transform: rotate(45deg) translate(-5px, -5px);
    }
    
    
    
    .services-dropdown .dropdown-content {
        display: none;
        position: absolute;
        width: 100%; /* Set the initial width of the dropdown content */
        left: 0;
    }
    
    .services-dropdown.active .dropdown-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 200px; /* Set the desired width of the dropdown content when active */
    }
    .services-dropdown{
        
        width: 300px;
        background-color: white;
        text-align: center;
    }
    .dropdown-content{
        margin-top: -5px;
        height:150px;
        width: auto;
        padding: 0px 40px;
    }
    .dropdown-content li{
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 0;
        text-align: left;
    }
    .services-dropdown.active .dropdown-content li {
        margin-bottom: 10px;
       /* Add margin between list items */
    }


    footer{
        background-color: #15152c05;
    }
    
    .footer-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    
    .footer-data{
        padding: 30px 0px;
        display: flex;
        flex-direction: column;
        
        
    }
    .dhome-data img{
        width: 150px;
        height: 150px;
    }
    .dhome-data p{
        text-align: justify;
        text-justify: inter-word;
        width: auto;
        padding: 0px 20px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    .dhome-data{
        display: flex;
        flex-direction: column;
        
    }
    .footer-social-links{
        padding: 0px 0px;
    
       
    }
    .footer-social-links a{
        font-size: 25px;
        padding-left: 5%;
    }
    .nav-links{
        padding: 20px 0 20px 20px;
        display: flex;
        flex-direction: column;
        
    }
    .footer-links{
        padding-left: 20px;
        display: flex;
        flex-direction: column;
    }
    .nav-links li{
        text-align: left;
    }
    .footer-data li{
        list-style-type: none;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 13px;
        padding-top: 2%;
        color: black;
        font-weight: bold;
    }
    .footer-data li a{
        color: black;
        text-transform: capitalize;
    }
    .footer-data li a:hover{
        color: #25254998;
    }
    
    .nav-links h1{
        font-size: 17px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    .footer-links h1{
        font-size: 17px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    .contact{
        border-top: 1px solid #15152c27;
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
    }
    .contact a{
        font-size: 17px;
        color: #080829;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    .contact a i{
        padding-right: 5px;
        font-size: 13px;
    }
    
    .address{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 16px;
        text-transform: capitalize;
        border-bottom: 1px solid #15152c27;
    }
    
    .address i{
        padding-right: 5px;
        font-size: 13px;
    }
    
    .copyright{
        display: flex;
        justify-content: space-between;
        padding: 10px 25px;
    }
    .copyright a{
        text-transform: capitalize;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 15px;
        color: #080829;
    }
    .box{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .box h1{
        font-size: 26px;
    }
    .box h2{
        font-size: 16px;
        padding: 10px 10px;
    }
    .about-container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .image-container img{
        width: 300px;
    }
    .container{
        display: flex;
        flex-direction: column;
    }
    .image-container {
        width: 0;
        overflow: hidden;
        transition: none; /* Use ease-in-out to create a smooth transition effect */
    }
    
    .image-container img {
        max-width: 100%;
        height: auto;
        width: 100%;
        margin-top: 40px;
    }
    .pop-from-right {
        width: 0;
        transition: none;
        margin-left: auto; /* Align the container to the right */
    }
    
    .pop-from-right img {
        height: 200px;
        
        width: 100%;
        margin-top: 40px;
    }
    
    
    
    .container1 {
        display: block;
    }
    
    .image-container1 {
        text-align: right;
        overflow: hidden;
        animation: none;
    }
    .text-container{
        width: 100%;
        padding: 0px 20px;
        font-weight: normal;
    }
    .box-container2{
        display: flex;
        flex-direction: column-reverse;
        align-items: first baseline;
    }
    .box-container2 img{
        width: 100%;
        
    }
    

    
    @keyframes slideIn {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(0);
        }
    }
    

    .mission-container, .vision-container, .achievements-container {
        flex: 1;
        background-color: white;
        padding: 20px;
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        margin-bottom: 20px;
        text-align: center;
        opacity: 0;
        animation: fadeInFromLeft 0.5s ease forwards;
        transition: transform 0.3s ease; /* Add transition for smooth scaling */
    }
    
    
    .mission-container:hover, .vision-container:hover, .achievements-container:hover {
        transform: scale(1.05); /* Scale slightly on hover */
    }
    
    @keyframes fadeInFromLeft {
        0% {
            opacity: 0;
            transform: translateX(-50px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .vision-container {
        animation-delay: 1s;
    }
    
    .achievements-container {
        animation-delay: 2s;
    }
    
    .container2{
        padding: 50px 0px;
        border-top: 1px solid #69699146;
        border-bottom: 1px solid #69699146;
    }
    .container2 h1, h2{
        text-transform: uppercase;
        text-align: center;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
    }
    .container2 p{
        text-align: justify;
        text-justify: inter-word;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    .mission-container, .vision-container, .achievements-container {
        transition: all 0.3s ease; /* Add transition property for smooth effect */
    }
    
    .mission-container:hover, .vision-container:hover, .achievements-container:hover {
        background-color: #080829;
        color: white;
        transform: scale(1.05); /* Apply transform instead of scale directly in the hover state */
    }
    .footer-menu{
        width: 100%;
        background-color: white;
        height: 50px;
        display: block;
        position: sticky;
        bottom: 0px;
        left: 0px;
        background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
        backdrop-filter: blur(10px); /* Apply a blur effect */
      
    }
    nav ul li{
        margin-top: 10px;
    }
    .footer-menu-data{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .footer-menu-data a{
        margin-top: 10px;
        font-size: 21px;
        color: #0f022e;
    }
    .footer-menu .menu-item {
        padding: 1px 0px;
        font-size: 21px;
        text-decoration: none;
        position: relative; /* Position relative for the sliding underline effect */
        transition: all 0.3s ease; /* Transition for smooth effect */
        background-color: transparent;
    
        /* Remove default underline */
    }
    
    .footer-menu .menu-item:after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: black; /* Initial color of the underline */
        transition: all 0.3s ease;
    }
    
    .footer-menu .menu-item.active:after {
        width: 100%; 
    }

    .help-text {
        background-color: white;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.527);
        padding: 10px 10px;
        position: absolute;
        top: -40px; /* Adjust the distance from the image as needed */
        right: 10%;
        width: 10px;
        font-size: 14px;
        font-weight: bold;
        text-transform: capitalize;
        border-radius: 50px 100px 50px 100px;
    }
    
    
    
    }
    
    

    .messages {
        overflow-y: auto; /* Enable vertical scrolling */
        scrollbar-width: thin; /* For Firefox */
        scrollbar-color: transparent transparent; /* For Firefox */
        -ms-overflow-style: none; /* For Internet Explorer and Edge */
        scrollbar-width: none; /* For Internet Explorer and Edge */
      }
      
      .messages::-webkit-scrollbar {
        width: 6px; /* For Chrome, Safari, and Opera */
      }
      
      .messages::-webkit-scrollbar-thumb {
        background-color: transparent; /* For Chrome, Safari, and Opera */
      }
      .chat-container {
          position: fixed;
          right: 80px;
          bottom: -420px; /* Start the chat container below the viewport */
          width: 300px;
          height: 420px;
          background-color: white;
          border: 1px solid #ccc;
          border-radius: 10px;
          overflow: hidden;
          padding: 20px;
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          transition: bottom 0.5s ease; /* Add transition for smooth sliding */
      }
      .close-button-bot {
          position: absolute;
          top: 10px;
          right: 10px;
          cursor: pointer;
          font-size: 20px;
      }
      
      .input-wrapper {
          display: flex;
          align-items: center;
      }
      
      .user-input {
          width: calc(100% - 80px);
          padding: 10px;
          margin-top: 20px;
          border: 1px solid #ccc;
          border-radius: 5px;
          font-size: 14px;
          max-width: 80%; /* Added max-width to prevent long messages from overflowing */
      }
      
      
      .send-btn {
          width: 55px;
          height: 35px;
          margin-top: 20px;
          margin-left: 10px;
          background-color: #0f022e;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 14px;
      }
      .send-btn:hover, .reload-chat-btn:hover {
          background-color: white;
          color: #0f022e;
          border: 1px solid #0f022e;
      }
      .reload-chat-btn{
          width: 55px;
          height: 35px;
          margin-top: 20px;
          margin-left: 10px;
          background-color: #0f022e;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 14px;
      }
      
      .fa-rotate-right{
          color: white;
          background-color: white;
      }
      
      .bot-message,
      .user-message {
          clear: both;
      }
      .message-container {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start; /* Align user messages to the right */
          margin-bottom: 15px;
      }
      
      .user-message {
          background-color: #252549;
          color: white;
          border-radius: 5px;
          padding: 5px;
          max-width: 90%;
          text-align: left;
          font-size: 12px;
          margin-left: auto; /* Align user messages to the right */
      }
      
      .bot-message {
          background-color: #252549;
          color: white;
          border-radius: 5px;
          padding: 10px;
          max-width: 85%;
          text-align: left;
          font-size: 12px;
          white-space: pre-line;
      }
      
      .bot-logo {
          margin-right: 10px;
      }
      
      
      .bot-button {
          z-index: 99;
          position: fixed;
          right: 20px;
          bottom: -160px; /* Start button below the viewport */
          transition: bottom 3s ease; 
          /* Add smooth transition effect */
      }
      .help-text {
          background-color: white;
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.527);
          padding: 10px 10px;
          position: absolute;
          top: -40px; /* Adjust the distance from the image as needed */
          right: 10%;
          width: 180px;
          font-weight: bold;
          text-transform: capitalize;
          border-radius: 50px 100px 50px 100px;
      }
      .bot-button img{
          width: 60px;
          height: 60px;
          object-fit: cover;
          filter: drop-shadow(5px 5px 2px rgb(0, 0, 0));
      }
      .chat-header {
          position: absolute;
          top: 0;
          right: 0;
          background-color: #0f022e;
          color: white;
          padding: 5px;
          width: 100%;
          text-align: center;
          border-radius: 5px 5px 0 0; /* Add rounded corners to the top */
          font-size: 10px;
      }
      .chat-header img{
          width: 30px;
          margin: 0px 10px;
          height: 30px;
          background-color: white;
      
      }
      .chat-subhead {
          position: absolute;
          top: 0;
          right: 0;
          margin-top: 17%;
          background-color: #1e103d;
          color: white;
          padding: 0px;
          width: 100%;
          text-align: center;
         font-size: 10px;
      }
      .bot-button a {
          color: #0f022e;
          font-size: 23px;
      }
      .bot-options{
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      .bot-options button {
          background-color: #252549;
          color: white;
          border: none;
          border-radius: 5px;
          padding: 8px 16px;
          margin-top: 5px;
          cursor: pointer;
          font-size: 12px;
          transition: background-color 0.3s;
          width: 220px;
      }
      
      .bot-options button:hover {
          background-color: white;
          color: #0f022e;
          border: 1px solid #080829;
      }
      

 
@media screen and (max-width: 479px) {
    body,a, h1, h2 {
        font-size: 12px; /* Adjust the font size as needed */
    }
}