/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: #333;
}

/* Fade-In Effect */
.fade-in {
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Smooth transition */
}

.fade-in.visible {
    opacity: 1; /* Fully visible when the class 'visible' is added */
}

/* Fade-In-Up Effect */
.fade-in-up {
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Initially positioned slightly below */
    transition: opacity 2s ease-in-out, transform 1s ease-in-out; /* Smooth transition for both opacity and position */
}

.fade-in-up.visible {
    opacity: 1; /* Fully visible when the class 'visible' is added */
    transform: translateY(0); /* Move the element to its original position */
}


/* If you want elements to fade-in only when in view, no change here */


/* General Navbar Styling */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    padding: 6px 16px; /* Reduced padding for thinner navbar */
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Brand Styling */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0; /* Remove any default margin */
}

.navbar-brand img {
    width: 150px; /* Slightly smaller logo */
    height: auto;
}

/* Navigation Links */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 0;
    padding-left: 0;
}

.navbar-nav .nav-link {
    color: #333;
    padding: 5px 8px;
    font-size: 14px; /* Smaller font size */
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #8c52ff;
    text-shadow: 0 2px 4px rgba(140, 82, 255, 0.6);
}

/* Dropdown Styling */
.nav-item.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    display: none;
    flex-direction: column; /* Stack items vertically */
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 999;
    padding: 0;
}

.dropdown-item {
    padding: 10px 20px;
    display: block;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
}

.dropdown-item:hover {
    background-color: #f0f0f0;
    color: #8c52ff;
}

/* Show dropdown vertically on hover (desktop and mobile) */
.nav-item.dropdown:hover .dropdown-menu {
    display: flex;
    flex-direction: column; /* Ensure vertical stacking */
    gap: 0; /* No horizontal spacing needed */
}

/* Responsive: Mobile-specific tweaks */
@media (max-width: 992px) {
    .dropdown-menu {
        position: static;
        box-shadow: none;
        display: none;
        width: 100%;
    }

    .nav-item.dropdown:hover .dropdown-menu {
        display: flex;
    }

    .dropdown-item {
        padding: 10px 15px;
    }
}


/* Footer Styles */
.footer {
    background-color: #222;
    color: #ddd;
    padding-top: 50px;
    padding-bottom: 20px;
}

.footer-logo {
    width: 200px;
    margin-bottom: 10px;
}

.footer-description {
    margin-bottom: 15px;
    color: #ddd;
    font-size: 14px;
}

/* Social Icons */
.social-icons {
    margin-top: 20px; /* Add space between the text and the icons */
}

.social-icons a {
    color: #ddd; /* Default color for icons */
    font-size: 20px;
    margin-left: 20px; /* Space between icons */
    transition: color 0.3s ease;
    background: linear-gradient(45deg, #8c52ff, #6a3dff); /* Gradient background */
    -webkit-background-clip: text; /* Apply gradient to text */
    -webkit-text-fill-color: transparent; /* Transparent fill for gradient */
}

.social-icons a:hover {
    color: #8c52ff;
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Footer Content Alignment */
.footer .footer-content {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.footer .footer-content .footer-column {
    flex: 1; /* Equal width for each column */
    max-width: 300px;
}

.footer .footer-content .footer-column h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
}

/* Text Spacing */
.footer .footer-content .footer-column p,
.footer .footer-content .footer-column a {
    color: #ddd;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 10px;
}

.footer .footer-content .footer-column a:hover {
    color: #8c52ff;
}

.footer-description {
    margin-left: 20px; /* Adjust this value to move the text left */
}

/* Add space between <i> and <a> */
.footer .footer-column p i {
    margin-right: 10px; /* Space between the icon and the text */
}

/* Gradient purple color for <i> tag */
.footer .footer-column p i {
    background: linear-gradient(45deg, #8c52ff, #6a3dff); /* Gradient background */
    -webkit-background-clip: text; /* Clip background to text */
    -webkit-text-fill-color: transparent; /* Transparent fill to apply gradient */
    font-size: 20px; /* Adjust size if needed */
}

/* Copyright Section */
.copyright {
    background-color: #8c52ff;
    color: white;
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
}

/* Responsive Adjustments */
@media (min-width: 200px) and (max-width: 950px){
    .footer .footer-content {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center-align columns */
    }

    .footer .footer-content .footer-column {
        text-align: center; /* Center-align text */
        max-width: 100%;
    }

    .social-icons a {
        margin-left: 15px; /* Adjust spacing for smaller screens */
    }
}



/* ======= Desktop Slider Styles ======= */
.slider-container {
    background-color: white;
    width: 90%;
    height: 70vh;
    margin: 5vh auto;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider {
    position: relative;
    width: 95%;
    height: 90%;
    overflow: hidden;
    border-radius: 10px;
}

.slider-item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slider-item.active {
    opacity: 1;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.slider-container:hover .slider-item img {
    transform: scale(1.05);
}

.text-content {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    color: white;
    text-align: left;
    z-index: 10;
}

.text-content h3 {
    font-size: 36px;
    margin-bottom: 15px;
}

.text-content p {
    font-size: 18px;
    margin-bottom: 20px;
}

.text-content .button,
.button {
    background-color: #8c52ff;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 30px;
    display: inline-block;
}

.text-content .button:hover,
.button:hover {
    background-color: #6c3bb6;
}

/* ======= Mobile Slider Styles ======= */
.slider-container-mobile {
    display: none;
}

/* Hide desktop slider on mobile, show mobile slider */
@media (max-width: 768px) {
    .slider-container {
        display: none;
    }

    .slider-container-mobile {
        display: flex;
        background-color: white;
        width: 95%;
        height: 60vh;
        margin: 3vh auto;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .slider-mobile {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
    }

    .slider-item-mobile {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 1;
    }

    .slider-item-mobile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        transition: transform 0.3s ease;
    }

    .slider-container-mobile:active .slider-item-mobile img {
        transform: scale(1.05);
    }

    .text-content-mobile {
        position: absolute;
        top: 60px;
        left: 15px;
        color: white;
        text-align: left;
        z-index: 10;
    }

    .text-content-mobile h2 {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .text-content-mobile p {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .text-content-mobile .button {
        font-size: 12px;
        padding: 8px 16px;
        border-radius: 25px;
    }
}



/* Container for the flex layout */
.flex-container {
    display: flex;
    justify-content: space-between; /* Spaces image and text properly */
    align-items: center; /* Vertically aligns image and text */ /* Add some padding */
}

/* Image Container */
.image-container {
    width: 40%; /* Image takes up 45% of the width */
}

.image-container img {
    width: 100%; /* Make image responsive */
    height: auto; /* Keep the aspect ratio intact */
    object-fit: cover; /* Ensures the image covers the space without distortion */
}

/* Text Container */
.text-container {
    width: 15%; /* Reduced width for more compression */
    padding-left: 15px; /* Reduced space between image and text */
}

.text-container h1 {
    font-size: 1rem; /* Reduced font size for the heading */
    font-weight: 700;
    margin-bottom: 10px; /* Reduced margin for a more compact look */
    color: #333;
}

.text-container p {
    font-size: 0.8rem; /* Slightly smaller font size for paragraph */
    color: #555;
    margin-bottom: 20px; /* Reduced margin for better spacing */
    text-align: justify;
}

.btn-gradient {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    color: #8c52ff;
    background: transparent;
    border: 2px solid #8c52ff;
    border-radius: 50px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-gradient:hover {
    color: #fff;
    background: linear-gradient(to right, #8c52ff, #b566ff);
    border: none;
}

/* Mobile responsiveness */
@media (min-width: 200px) and (max-width: 950px) {
    .flex-container {
        flex-direction: column; /* Stack image and text vertically on smaller screens */
        align-items: center; /* Center content */
    }

    .image-container {
        width: 80%; /* Image takes up most of the screen on mobile */
        margin-bottom: 20px; /* Space between image and text */
    }

    .text-container {
        width: 80%; /* Text takes up the full width on mobile */
        text-align: center; /* Center the text */
    }

    .btn-gradient {
        width: 100%; /* Full-width button on mobile */
    }
}



/* Curved Container */
.curved-container {
    background-color: #4e0cd0; /* Background color */
    border-radius: 30px; /* Curved edges */
    padding: 40px; /* Padding inside the container */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow for depth */
    width: 90%; /* Container width set to 90% of the viewport width */
    height: 70vh; /* Container height set to 70% of the viewport height */
    margin: 5vh auto; /* Center the container vertically and horizontally */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center the content vertically */
    justify-content: center; /* Center the content horizontally */
    overflow: hidden; /* Hide any overflowing content */
}

/* Container for the flex layout */
.flex-container-2 {
    display: flex;
    justify-content: space-between; /* Spaces image and text properly */
    align-items: center; /* Vertically aligns image and text */
    width: 100%; /* Ensure the flex container takes up full width */
    height: 100%; /* Ensure the flex container takes up full height */
    padding: 20px;
}
/* Image Container */
.image-container-2 {
    width: 45%; /* Image takes up 45% of the width */
    /* Ensure the scaled image stays inside the container */
}

.image-container-2 img {
    width: 75%; /* Make image responsive */
    padding: 5px;
    height: auto; /* Keep the aspect ratio intact */
    object-fit: cover; /* Ensures the image covers the space without distortion */
    transition: transform 0.3s ease; /* Add smooth scaling transition to the image */
}


/* Text Container */
.text-container-2 {
    width: 50%; /* Text container takes up 50% of the width */
    padding-left: 20px;
}

.text-container-2 h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.text-container-2 p {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 30px;
    text-align: justify;
}

.btn-gradient-2 {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    background: transparent;
    border: 2px solid #ffffff;
    border-radius: 50px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-gradient-2:hover {
    color: #fff;
    background: linear-gradient(to right, #8c52ff, #b566ff);
    border: none;
}

/* Mobile responsiveness */
@media (min-width: 200px) and (max-width: 900px) {
    .flex-container-2 {
        flex-direction: column; /* Stack image and text vertically on smaller screens */
        align-items: center; /* Center content */
    }
    
    .curved-container{
        height: 160vh;
    }

    .image-container-2 {
        width: 85%;
        margin-bottom: -15px;
        align-items: center;}


    .text-container-2 {
        width: 110%; /* Text takes up the full width on mobile */
        text-align: left; /* Center the text */
        font-size: 12px;
        margin-right:12px ;
    }

    .btn-gradient-2 {
        width: 100%; /* Full-width button on mobile */
    }
}

/* Transform the image for mobile on hover */
@media (min-width: 200px) and (max-width: 950px) {
    .curved-container:hover .image-container-2 img {
        transform: scale(1.8); /* Slightly smaller scale for mobile for better fit */
    }
}


/* about/
/* Container for the slider */
.sld-rtl {
    width: 500px; /* Set fixed width for the container */
    height: 500px; /* Set fixed height for the container */
    margin: 5vh auto; /* Center the container vertically and horizontally */
    overflow: hidden; /* Hide any overflow */
    position: relative;
    border-radius: 0; /* Keep sharp edges */
}

/* The sliding container that holds the images */
.sld-rtl .sld {
    display: flex; /* Use flex to align images in a row */
    transition: transform 1s ease-in-out; /* Smooth transition for the sliding effect */
    width: 100%;
}

/* Individual slider items */
.sld-rtl .sld-item {
    width: 500px; /* Set fixed width for each image */
    height: 500px; /* Set fixed height */
    flex-shrink: 0; /* Prevent images from shrinking */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
}

/* Slider Images */
.sld-rtl .sld-item img {
    max-width: 100%; /* Ensure image width does not exceed the container width */
    max-height: 100%; /* Ensure image height does not exceed the container height */
    object-fit: contain; /* Ensure the full image is displayed without cropping */
}



/* Container for the entire section */
.container-xxl {
    padding: 5rem 0; /* Vertical padding */
}

/* Row Layout */
.row {
    display: flex;
    justify-content: space-between; /* Places the slider and text side by side */
    align-items: center;
}

/* Slider Container (Left) */
.sld-container {
    flex: 1; /* Takes up remaining space */
    max-width: 50%; /* Limits to 50% of the row width */
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

/* Grow on hover */
.sld-container:hover {
    transform: scale(1.3); /* Scale up by 10% */
}

/* Text Container (Right) */
.text-container {
    flex: 1; /* Takes up remaining space */
    max-width: 50%; /* Limits to 50% of the row width */
    padding-left: 20px;
    margin-right: 50px; /* Move the text container slightly left */
}

.text-container h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.text-container p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #555;
}

.text-container a {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 700;
    background-color: #8c52ff;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    transition: 0.3s ease;
}

.text-container a:hover {
    background-color: #6c3bb6;
}

/* Mobile responsiveness */

    @media (min-width: 200px) and (max-width: 950px){

    /* Adjust the row layout to column direction */
    .row {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center-align for a clean look */
    }

    /* Slider container adjustments */
    .sld-rtl {
        width: 100%; /* Full width for mobile */
        height: 250px; /* Adjusted height for mobile screens */
        margin: 0 auto 20px auto; /* Center with spacing below */
        overflow: hidden; /* Hide overflow to avoid visible edges */
        position: relative; /* Maintain relative positioning */
    }

    /* The sliding container */
    .sld-rtl .sld {
        display: flex; /* Flex layout for sliding items */
        transition: transform 0.8s ease-in-out; /* Smooth animation */
        width: 100%;
    }

    /* Individual slider items */
    .sld-rtl .sld-item {
        flex-shrink: 0; /* Prevent shrinking */
        width: 100%; /* Full width of container */
        height: 100%; /* Match container height */
        display: flex;
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
    }

    /* Images inside the slider */
    .sld-rtl .sld-item img {
        width: 100%; /* Scale image to fill width */
        height: 100%; /* Scale image to fill height */
        object-fit: cover; /* Ensure the image covers the container */
    }

    /* Text container adjustments */
    .text-container {
        width: 100%; /* Full width for text */
        text-align: center; /* Center-align the text */
        padding: 1rem; /* Add padding for better spacing */
        margin-right: 20px;
    }

    .text-container h1 {
        font-size: 1.8rem; /* Smaller font size for headings */
        margin-bottom: 1rem; /* Space below the heading */
    }

    .text-container p {
        font-size: 1rem; /* Smaller font size for paragraphs */
        margin-bottom: 1.5rem; /* Space below the paragraph */
    }

    .text-container a {
        padding: 10px 20px; /* Adjust button padding */
        font-size: 0.9rem; /* Adjust button text size */
        display: inline-block; /* Ensure proper spacing around the button */
    }
}


/*box*/

.container-box {
    background-color: white; /* White background for the box */
    width: 40%; /* Set to a percentage for responsive design */
    max-width: 350px; /* Restrict maximum width to keep it compact */
    height: 350px; /* Adjust height dynamically based on content */
    margin: 5vh auto; /* Center the box vertically and horizontally */
    border-radius: 15px; /* Rounded corners for smooth edges */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    overflow: hidden; /* Hide any overflowing child elements */
    display: flex; /* Flexbox for alignment */
    flex-direction: column; /* Stack child elements vertically */
    align-items: center; /* Center-align child elements horizontally */
    justify-content: center; /* Center-align child elements vertically */
    padding: 20px; /* Add internal spacing */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth hover animations */
}

/* Space between heading and paragraph */
.container-box h1 {
    margin-bottom: 15px; /* Adds space below the heading */
    text-align: center; /* Center the heading */
}

/* list style */
.container-box ul {
    font-size: 1rem; /* Standard text size */
    color: #555; /* Soft gray for paragraph text */
    line-height: 1.5; /* Improved readability */
    margin-top: 0; /* Ensure no extra margin above the paragraph */
    text-align: justify; /* Justify the paragraph text */
    width: 100%; /* Ensure the paragraph takes up full width */
    padding: 20px;
}

/* Hover Effect */
.container-box:hover {
    background-color: #8c52ff; /* Change background to purple on hover */
    transform: scale(1.05); /* Slightly enlarge the box on hover */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); /* Add a deeper shadow on hover */
    color: white; /* Change text color to white for readability */
}

/* Ensure child text remains visible on hover */
.container-box:hover h1,
.container-box:hover ul {
    color: white; /* Change text color to white */
}

.flex {
    display: flex; /* Enable flexbox layout */
    flex-direction: row; /* Arrange child elements in a row */
    justify-content: center; /* Add space between the items */
    gap: 0px; /* Add a gap between the boxes for better spacing */
    flex-wrap: wrap; /* Ensure the boxes wrap on smaller screens */
}

/* Mobile View Styling */
@media (min-width: 200px) and (max-width: 950px) {
    .container-box {
        width: 95%; /* Set the box width to 95% for better responsiveness on smaller screens */
    }
}


/* Outer container that holds everything */
.outer-con {
    width: 100%;
    display: flex;
    justify-content: center; /* Center align the flex container */
    padding: 20px;
}

/* Flex container to hold the mission and vision containers */
.flex-con {
    display: flex;
    align-items: center; /* Align items in the center */
    justify-content: center;
    width: 80%; /* Adjust width as needed */
    background-color: #fdfdfd;
    border-radius: 10px;
    padding: 20px;
}

/* Common styles for each container */
.con {
    width: 45%; /* Adjust width to make space for the vertical line */
    padding: 20px;
    transition: transform 0.3s ease; /* Smooth transform effect */
    text-align: center; /* Center align text inside the container */
}

/* Styling for the Mission and Vision sections */
.con h1 {
    padding-bottom: 20px;
    color: #000000;
    text-align: center;
    position: relative; /* For animation elements positioning */
    display: inline-block;
}

.con p {
    color: #3a3a3a;
    text-align: justify;
}

/* Vertical line between the containers */
.vertical-line {
    width: 2px;
    background-color: #ccc; /* Color of the line */
    height: 70%; /* Adjust the height of the line */
    margin: 0 20px; /* Space between containers */
}

/* Hover effect for text */
.con:hover {
    transform: scale(1.1); /* Grow the container when hovered */
}

/* Title and paragraph styles */
.con h1 {
    font-size: 2rem; /* Adjust size */
    color: #000000;
}

.con p {
    font-size: 1rem;
    color: #3a3a3a;
}

/* Optional: Add a smooth transition for text color on hover */
.con:hover h1, .container:hover p {
    color: #800080; /* Darker purple when hovered */
}

/* Rocket Animation for Mission */
.rocket {
    display: inline-block;
    font-size: 1.5rem; /* Adjust size of the rocket */
    animation: fly-rocket 2s linear infinite; /* Rocket constantly flies */
    position: absolute;
    right: -50px; /* Adjust horizontal position */
    top: 0px; /* Adjust vertical position */
}

/* Rocket flying keyframes */
@keyframes fly-rocket {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Move up slightly */
    }
    100% {
        transform: translateY(0); /* Return to original position */
    }
}

/* Eye Animation for Vision */
.eye {
    display: inline-block;
    font-size: 1.5rem; /* Adjust size of the eye */
    animation: blink-eye 2s steps(1) infinite; /* Eye blinks at intervals */
    position: absolute;
    right: -50px; /* Adjust horizontal position */
    top: 0px; /* Adjust vertical position */
}

/* Eye blinking keyframes */
@keyframes blink-eye {
    0%, 90% {
        transform: scaleY(1); /* Open eye */
    }
    95% {
        transform: scaleY(0); /* Closed eye */
    }
    100% {
        transform: scaleY(1); /* Back to open */
    }
}

/* Responsive Styles */
@media (min-width: 200px) and (max-width: 950px) {
    .flex-con {
        display: flex;
        width: 100%;
        padding: 0px;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .con h1 {
        font-size: 1rem;
        color: black;
        text-align: center;
    }

    .con p {
        color: black;
        text-align: justify;
        font-size: 10px;
    }

    .vertical-line {
        width: 80%;
        height: 1px;
        background-color: #4b0082;
        margin: 10px 0;
    }

    .con {
        width: 81%;
        padding: 20px;
    }

    .outer-con {
        padding: 70px;
    }

    /* Adjust animation element positions for smaller screens */
    .rocket, .eye {
        font-size: 1rem;
        right: -20px;
        top: 0;
    }
}




/* Container for the entire contact section */
.contact-container {
    background-color: #4B0082;
    width: 100%;
    padding: 50px 20px;
    box-sizing: border-box;
    background-color: #f9f9f9; /* Light background for contact area */
}

/* Heading for contact section */
.contact-heading {
    text-align: center;
    margin-bottom: 50px;
    font-size: 36px;
    font-weight: bold;
    color: #333;
}

/* Container for contact information (address, email, phone) */
.contact-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

/* Individual contact info item */
.contact-item {
    display: flex;
    align-items: center;
    color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 32%;
}

/* Icon in each contact info item */
.contact-icon {
    color: white;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
}

/* Contact form content section */
.contact-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Image on the left side */
.contact-image img {
    width: 100%;
    height: auto;
    max-width: 500px;
    border-radius: 5px;
    margin-left: 80px;
    margin-top: 20px;
    transition: transform 0.3s ease;
}

/* Apply scale effect on hover */
.contact-image img:hover {
    transform: scale(1.3); /* Scale the image to 110% of its original size */
}

/* Contact form section */
.contact-form {
    width: 45%;
}

/* Form rows with spacing */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Form group for individual input fields */
.form-group {
    width: 100%;
}

/* Style for labels */
.form-group label {
    font-size: 14px;
    font-weight: bold;
    color: #555;
    display: block;
    margin-bottom: 5px;
}

/* Style for input and textarea fields */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Style for the submit button */
.submit-btn {
    background-color:#6c3bbf;
    color: white;
    border: none;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
}

/* Button hover effect */
.submit-btn:hover {
    background-color: #4B0082;
    transition: background-color 0.3s ease;
}

/* Responsive Design */
@media screen and (min-width: 200px) and (max-width: 950px) {
    /* Stack contact info and image for smaller screens */
    .contact-info {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .contact-item {
        width: 100%;
        margin-bottom: 20px;
    }

    .contact-content {
        flex-direction: column;
        align-items: center;
    }

    .contact-form {
        width: 100%;
    }

    .contact-image {
        margin-bottom: 30px;
    }

    .contact-image img{
        margin-left: 1px;
        margin-top: -35px;
    }
}



/* Base styles for card */
/* .card-over,
 {
    background-color: #8c52ff;
    border-radius: 10px;
    box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.1);
    width: 340px;
    padding: 20px;
}

/* .card-over2 {
    height: 255px;
} */

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-evenly;
    padding: 20px;
}

.card {
    background: linear-gradient(to right, #8c52ff, #b38bfc);
 
    border-radius:  10px; /* Rounded corners */
    box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    width: 300px; /* Fixed width */
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth scale and shadow transition */
}

.card:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.card-title {
    font-size: 1.5rem; /* Larger title font size */
    color: #ffffff; /* Dark text for the title */
    text-align: center; /* Center aligned title */
    margin-bottom: 15px; /* Space below the title */
    font-weight: bold;
}

.card-text {
    font-size: 1rem; /* Standard font size for content */
    color: #dedede; /* Light gray text color */
    text-align: justify; /* Justify text for better readability */
    line-height: 1.6; /* Increased line height for spacing */
}

.read-more-btn {
    display: block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: transparent; /* Bright blue button */
    color: #4B0082;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    width: 51%; /* Full width button */
    text-align: center; /* Center the button text */
    transition: background-color 0.3s ease;
}

.read-more-btn:hover {
    background-color: transparent; /* Darker blue on hover */
    color: blue;
}

/* Media query for mobile view */
@media (min-width: 200px) and (max-width: 950px){
    .card-container {
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center cards in mobile view */
        gap: 20px; /* Smaller gap between cards */
    }

    .card
     {
        width: 90%; /* Adjust card width to fit smaller screens */
    }

    .card-title {
        font-size: 1.25rem; /* Slightly smaller title font size */
    }

    .card-text {
        font-size: 0.9rem; /* Slightly smaller text font size */
        line-height: 1.5; /* Adjust line height */
    }

    .read-more-btn {
        width: 100%; /* Full width for buttons on mobile */
    }
}


/*about-us*/
/* Spacer for spacing between sections */
.spacer {
    height: 100px;
}

/* Header Section Styling */
.header-sec {
    width: 90%; /* Full width of the page */
    height: 70vh; /* 70% of the viewport height */
    margin: 5vh auto; /* Auto margin for centering */
    padding: 0; /* No padding */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Image inside the header */
.header-sec img {
    width: 100%; /* Make the image span the full width of the container */
    height: 100%; /* Ensure the image takes the full height */
    object-fit: cover; /* Maintain aspect ratio and cover the container */
    display: block; /* Remove any unwanted spacing below the image */
}


/* Mobile Responsiveness */
@media only screen and (max-width: 768px) {
    .header-sec {
        width: 95%; /* Slightly smaller width on smaller screens */
        height: auto; /* Adjust height for smaller screens */
        margin: 3vh auto; /* Adjust margins for mobile */
        padding: 15px;
    }

    .header-sec img {
        width: 100%;
        height: auto; /* Adjust height for smaller screens */
    }
}

.wavy-quote-container {
    background: #b57edc;
    color: white;
    max-width: 578px;
    margin: 40px auto 40px auto;
    padding: 18px;
    text-align: center;
    font-style: italic;
    font-size: 16px;
    line-height: 1.6;
    border: none;
    border-radius: 14% 12% 17% 15% / 248% 81% 173% 69%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;

    /* Align to the right */
    margin-left: auto;
    margin-right: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .wavy-quote-container {
        font-size: 1.2rem;
        padding: 25px 20px;
        margin: 20px auto; /* Center on small screens */
    }
}


/* About Section */
.about-zeai {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  background-color: #f9f6ff;
}

.about-container {
  max-width: 1000px;
  text-align: justify;
}

.we-highlight {
  font-size: 80px;
  font-weight: bold;
  color: rebeccapurple;
  margin: 0;
  text-align: left;
}

.about-text {
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 20px auto;
  max-width: 800px;
}

.about-image {
  margin-top: 30px;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}


@media (max-width: 768px) {

  .we-highlight {
    font-size: 50px;
  }

  .about-text {
    font-size: 1.1rem;
    padding: 0 10px;
  }
}





/* Existing CSS */
.mvv-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background-color: #fff;
  flex-direction: column;
}


.mvv-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  flex-direction: column;
}

.mvv-box-m {
  max-width: 600px;
  text-align: center;
  padding: 20px;
  border-radius: 15px;
  border: 2px solid #ccc;
  transition: transform 0.3s;
  background-color: #f9f9f9;
  margin-right: 300px;
}

.mvv-box-m:hover {
  transform: scale(1.05);
  border-color: #aa00ff;
}

.mvv-box-v {
  max-width: 600px;
  text-align: center;
  padding: 20px;
  border-radius: 15px;
  border: 2px solid #ccc;
  transition: transform 0.3s;
  background-color: #f9f9f9;
   margin-left: 300px;
}

.mvv-box-v:hover {
  transform: scale(1.05);
  border-color: #aa00ff;
}

.mvv-box-va {
  max-width: 600px;
  text-align: center;
  padding: 20px;
  border-radius: 15px;
  border: 2px solid #ccc;
  transition: transform 0.3s;
  background-color: #f9f9f9;
  margin-right: 300px;
}

.mvv-box-va:hover {
  transform: scale(1.05);
  border-color: #aa00ff;
}

.mvv-icon {
  width: 60px;
  margin-bottom: 15px;
}

.mvv-title {
  font-size: 24px;
  font-weight: bold;
  color: #222;
}

.mvv-text-box {
  margin-top: 10px;
}

.mvv-text-box p {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

.values-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
}


/* Icon styling */
.mvv-icon {
  font-size: 70px;  /* Adjust size of the FontAwesome icon */
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .mvv-container {
    padding: 20px;
  }

  .mvv-section {
    flex-direction: column;
    gap: 20px;
  }

  .mvv-box-m,
  .mvv-box-v,
  .mvv-box-va {
    margin: 0 auto; /* Remove left/right margins */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mvv-title {
    font-size: 20px;
  }

  .mvv-text-box p {
    font-size: 14px;
  }

  .mvv-icon {
    width: 50px;
    font-size: 50px;
  }

  .values-image {
    width: 100%;
    height: auto;
  }
}