/* @import url('https://fonts.googleapis.com/css?family=Titillium Web'); */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700;900&display=swap');
@import url('./colors.css');

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Titillium Web', sans-serif;
    line-height: 1.6;
    color: #333;
}
    
/* Header Styles ------------------------------------------------------- */
.header-section {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px;
        background-color: #fff;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    .logo img {
        max-height: 60px;
        margin-left: 30px;
    }

    .nav {
        display: flex;
        gap: 30px;
    }

    .nav a {
        text-decoration: none;
        color: var(--blue-dark);
        position: relative;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: 400;
        padding: 10px 0;
    }

    .nav .home-link {
        font-weight: 600;
    }

    .nav a i {
        font-size: 0.8rem;
    }

    /* Dropdown Menu Styles */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: block;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        /* Initially hidden */
        overflow: hidden;
        /* Prevent overflow */
        transition: opacity 0.3s ease, max-height 0.3s ease-in-out;
        /* Smooth transition */
        top: 100%;
    }

    .dropdown:hover .dropdown-content {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
        /* Increase the max-height to show the content */
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-weight: 400;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
    }

    /* Responsive adjustments for mobile devices */
    @media screen and (max-width: 768px) {
        .header {
            flex-direction: column;
            align-items: flex-start;
            padding: 15px 30px;
        }

        .logo img {
            max-height: 50px;
            margin-left: 0;
        }

        .nav {
            display: block;
            width: 100%;
            gap: 15px;
            text-align: center;
            margin-top: 20px;
        }

        .nav a {
            font-size: 1rem;
            padding: 8px 8px;
            display: block;
        }

        .nav i {
            display: none;
        }

        .more-icon {
            display: none;
        }

        .dropdown-content {
            display: none;
            position: static;
            box-shadow: none;
            visibility: visible;
            max-height: none;
            opacity: 1;
        }
    }

    /* For very small screens, stack and make adjustments */
    @media screen and (max-width: 480px) {
        .header {
            padding: 10px 15px;
        }

        .nav a {
            font-size: 0.9rem;
            padding: 8px 0;
        }

        .nav {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        /* Add '|' separator between links */
        .nav a::after {
            content: '|';
            margin-left: 10px;
        }

        .nav a:last-child::after {
            content: '';
            /* Remove '|' after the last item */
        }

        .nav .home-link {
            font-weight: 600;
        }

        .more-icon {
            display: none;
        }

        .dropdown-content a {
            font-size: 0.9rem;
        }

        /* Shorten text for small devices */
        .nav a[href="../Pages/HomePage.html"] {
            text-transform: none;
        }

        .nav a[href="../Pages/AboutUsPage.html"] {
            text-transform: none;
        }

        .nav a[href="../Pages/OurServicesPage.html"] {
            text-transform: none;
        }

        .nav a[href="../Pages/ContactUsPage.html"] {
            text-transform: none;
        }
        .nav a[href="../Pages/CareersPage.html"] {
            text-transform: none;
        }
    }
}


/* About us Section Styles ------------------------------------------------------- */
.about-us-section {
    .about-us {
        padding: 50px 20px;
        padding-top: 10px;
        padding-left: 4%;
        text-align: center;
        background-color: #fff;
    }

    .about-us h4 {
        font-size: 25px;
        font-weight: 400;
        margin-bottom: 30px;
        color: var(--blue-dark);

    }

    .about-us h2 {
        font-size: 25px;
        color: var(--blue-dark);
        margin-bottom: 10px;
        font-weight: lighter;
    }

    .about-us h3 {
        font-size: 1.8rem;
        font-weight: 300;
        margin-bottom: 0px;
    }

    .about-us .container {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 0px;
        flex-wrap: wrap;
        /* Allow wrapping on smaller screens */
    }

    .about-us .images {
        display: grid;
        max-width: 600px;
        grid-template-columns: repeat(2, 1fr);
        /* 2 equal-width columns */
        grid-template-rows: auto;
        gap: 15px;
        position: relative;
        
    }

    .about-us .images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        position: relative;
        transition: transform 0.1s ease-in-out;
    }
    .about-us .images img:hover{
        transform: scale(1.02);
    }

    .about-us .images img:nth-child(2) {
        margin-top: 28px;
        margin-left: 8px;
        max-width: 244px;
        max-height: 217px;
    }

    .about-us .images img:nth-child(3) {
        margin-left: 20px;
        max-width: 174px;
        max-height: 210px;
    }

    .about-us .images img:nth-child(1) {
        max-width: 312px;
        z-index: 2;
    }

    .about-us .images img:nth-child(4) {
        max-width: 312px;
        height: 312px;
        margin-top: -90px;
        margin-left: -100px;
        z-index: 3;
    }

    .about-us .text {
        margin-right: 50px;
        margin-top: 0px;
        margin-left: 0px;
        flex: 1;
        text-align: left;


    }


    .about-us .text h5 {
        font-size: 1.2rem;

    }

    .about-us .text .column i {
        font-size: 1rem;
        /* Adjust the size of the icon */
        color: var(--blue-dark);
        /* Dark blue color */
        vertical-align: middle;
        /* Align the icon with the text */
        vertical-align: -1.5px;
        fill: var(--blue-dark);
    }

    .about-us .text h1 {
        font-weight: 700;
        font-size: 56px;
        letter-spacing: -1.5px;
        line-height: 60px;
    }

    .about-us .text .about-us-subtext {
        color: var(--blue-dark);
    }

    .two-columns {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: 20px;
        /* Adjusts the gap between the paragraphs */
        margin-top: 20px;
        margin-left: 15px;
    }

    .two-columns p {
        flex: 1;
        text-align: left;
        font-size: 1.2rem;
        color: #333;
    }

    .left {
        text-align: left;
    }

    .right {
        text-align: right;
    }

    .learn-more-button {
        display: inline-block;
        margin-left: 2%;
        margin-top: 30px;
        padding: 12px 30px;
        background-color: var(--blue-dark);
        /* Adjust based on your color scheme */
        color: white;
        font-size: 1.2rem;
        font-weight: 600;
        border-radius: 30px;
        text-decoration: none;
        transition: transform 0.5s ease, background-color 0.3s ease;
    }

    .learn-more-button:hover {
        text-decoration: underline;

    }

    /* Responsive adjustments */
    /* Responsive adjustments for devices with max-width 768px */
    @media screen and (max-width: 1200px) {}

    @media screen and (max-width: 768px) {
        .about-us {
            padding-left: 5%;
            padding: 30px 20px;
        }

        .about-us h2 {
            font-size: 1.5rem;
        }

        .about-us h3 {
            font-size: 1.2rem;
        }

        .about-us .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Center all content */
            text-align: center;
        }

        .about-us .images {
            order: 1;
            /* Images appear first */
            grid-template-columns: 1fr;
            /* Stack images vertically */
            gap: 10px;
            max-width: 80%;
            /* Limit image width */
        }

        .about-us .images img {
            max-width: 100%;
            /* Full-width images */
            margin: 0 auto;
        }

        /* Hide second and fourth images on small screens */
        .about-us .images img:nth-child(2),
        .about-us .images img:nth-child(4) {
            display: none;
        }

        .about-us .text h4 {
            order: 3;
            margin: unset;
            font-size: px;
            margin-top: unset;
        }

        .about-us .text {
            order: 2;
            /* Text appears second */
            margin: 0 auto;
            /* Center the text container */
            padding: 15px;
            text-align: center;
            /* Center text horizontally */
        }



        .about-us .text h5 {
            font-size: 1rem;
        }

        .two-columns {
            margin-left: unset;
            padding: unset;
            text-align: left;
        }

        .two-columns p {
            font-size: 1rem;
        }

        .about-us .text h1 {
            font-size: 40px;
            line-height: 45px;
        }

        .learn-more-button {
            font-size: 1rem;
            padding: 10px 20px;
        }
    }

    /* Responsive adjustments for devices with max-width 480px */
    @media screen and (max-width: 480px) {
        .about-us {
            padding: 30px 15px;
        }

        .about-us h2 {
            font-size: 1rem;
        }

        .about-us h3 {
            font-size: 1rem;
        }

        .about-us .container {
            flex-direction: column;
            align-items: center;
            /* Center all content */
            text-align: center;
        }

        .about-us .images {
            order: 1;
            /* Images appear first */
            grid-template-columns: 1fr;
            max-width: 200px;
            padding-bottom: 0px;
        }

        /* Hide all images except the first on very small screens */
        .about-us .images img:nth-child(2),
        .about-us .images img:nth-child(3),
        .about-us .images img:nth-child(4) {
            display: none;
        }

        .about-us .images img:nth-child(1) {
            max-width: 100%;
            margin-top: 0;
        }

        .about-us .text {
            order: 2;
            /* Text appears second */
            margin: 0 auto;
            /* Center the text container */
            padding: 15px;
            padding-top: 0px;
            text-align: center;
            /* Center text horizontally */
        }

        .about-us .text h4 {
            margin-top: unset;
            font-size: 16px;
            margin-left: unset;
        }

        .about-us .text h5 {
            font-size: 0.7rem;
        }

        .two-columns p {
            font-size: 0.7rem;
        }

        .about-us .text h1 {
            font-size: 30px;
            line-height: 35px;
        }

        .learn-more-button {
            font-size: 0.7rem;
            padding: 10px 10px;
        }
    }


}

/* Our Values Section Styles ------------------------------------------------------- */
.our-values-section {
    .services {
        padding: 0px 20px;
        background-color: #fff;
        text-align: center;
    }

    .service-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 20px;
        justify-content: center;
        /* Center the cards */
    }

    .service-card {
        flex: 1 1 250px;
        /* Flexibly size the cards to a minimum width of 250px */
        height: 350px;
        overflow: hidden;
        margin: 10px;
        background-color: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: transform 0.3s ease;
        box-sizing: border-box;
    }

    .service-card i {
        font-size: 2.5rem;
        color: var(--blue-icon);
        margin-bottom: 15px;
    }

    .service-card h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .service-card p {
        font-size: 1rem;
        color: #666;
        margin-bottom: 20px;
    }

    .service-card:hover {
        transform: translateY(-5px);
        background-color: var(--blue-icon);
        color: #fff;
    }

    .service-card:hover h3,
    .service-card:hover p {
        color: #fff;
    }

    .service-card:hover i {
        color: #fff;
    }

    /* Responsive adjustments for 1024px */
    @media (max-width: 1024px) {
        .service-card {
            flex: 1 1 calc(50% - 20px);
            /* Two cards per row */
            padding: 20px;
            /* Slightly reduce padding */
            height: fit-content;
        }
    }

    /* Responsive adjustments for 768px */
    @media (max-width: 768px) {
        .service-card {
            flex: 1 1 calc(50% - 20px);
            /* Two cards per row */
            padding: 15px;
            /* Reduce padding for smaller devices */
        }

        .service-row {
            justify-content: center;
            /* Center cards horizontally */
        }
    }

    /* Responsive adjustments for 480px */
    @media (max-width: 480px) {
        .service-card {
            flex: 1 1 calc(50% - 20px);
            /* Two cards per row on very small screens */
            padding: 10px;
            /* Reduce padding for very small screens */
        }

        .service-row {
            justify-content: center;
            /* Center cards horizontally */
        }
    }
}

/* Our Mission Section ------------------------------------------------------- */

.our-mission-section {
    .our-mission {
        padding: 5% 5%;
    }

    .our-mission h2 {
        color: var(--blue-dark);
        /* Blue color for 'Our Mission' */
        font-size: 25px;
        font-weight: 400;
        margin-bottom: 20px;
        text-align: center;
        /* Centers the h2 text */
    }

    .our-mission .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .our-mission .text {
        flex: 1;
        text-align: left;
        padding-right: 10px;
    }

    .our-mission .image {
        flex: 1;
        margin-left: 0px;
    }

    .our-mission .image img {
        width: 100%;
        max-width: 50vw;
        height: auto;
        border-radius: 20px;
        transition: transform 0.1s ease-in-out;
    }
    .our-mission .image img:hover{
        transform: scale(1.01);
    }

    .our-mission h1 {
        color: var(--blue-dark);
        /* Blue color for 'Our Mission' */
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 55px;
        margin-bottom: 0px;
    }

    .our-mission .mission-subtext {
        color: var(--off-black);
        /* Color for 'mission subtext' */
    }

    .our-mission .mission {
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 1.2;
        margin-top: -5px;
    }

    .our-mission .mission span {
        margin-right: 5px;
    }

    .our-mission .implement {
        color: var(--blue-dark);
        /* Color for 'Implement' */
    }

    .our-mission .intro,
    .our-mission .details {
        font-size: 1.5rem;
        color: #666;
        margin-top: 20px;
    }

    .our-mission .intro {
        font-weight: 400;
    }

    .our-mission .details {
        font-weight: 300;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .our-mission .container {
            flex-direction: column;
            text-align: center;
        }

        .our-mission .image {
            order: -1;
            /* Moves the image above the text */
            margin-left: 0;
        }

        .our-mission .image img {
            max-width: 90%;
        }

        .our-mission h2 {
            font-size: 2rem;
        }

        .our-mission h1 {
            font-size: 2.5rem;
            line-height: 40px;
        }

        .our-mission .mission {
            font-size: 1rem;
        }

        .our-mission .intro,
        .our-mission .details {
            font-size: 1rem;
        }
    }

    @media (max-width: 480px) {}
}

/* Our Vision Section ------------------------------------------------------- */

.our-vision-section {
    .our-vision .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0% 5% 5% 5%;
    }

    .our-vision .text {
        text-align: center;
        width: 100%;
        margin-bottom: 40px;
        /* Space between title and cards */
    }

    .our-vision h2 {
        color: var(--blue-dark);
        font-size: 1.5rem;
        font-weight: 500;
    }

    .our-vision .vision-cards {
        display: flex;
        flex-direction: column;
        gap: 30px;
        width: 75%;
        /* Change Card sizes here */
    }

    .our-vision .card {
        display: flex;
        position: relative;
        /* Required for positioning */
        overflow: visible;
        /* Allow numbers to extend beyond the card */
        width: 100%;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 50px;
        /* Gap between cards */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Styling for the numbers */
    .card-number {
        position: relative;
        font-size: 150px;
        /* Large number */
        font-weight: bold;
        color: rgba(58, 116, 232, 0.1);
        /* Translucent dark-blue */
        pointer-events: none;
        /* Make it unclickable */
        z-index: 0;
        /* Ensure it’s behind other content */
    }

    /* Alternating number positioning */
    .card:nth-child(1) .card-number {
        top: -150px;
        left: -80px;
    }

    .card:nth-child(2) .card-number {
        top: -150px;
        right: -80px;
    }

    .card:nth-child(3) .card-number {
        top: -150px;
        left: -80px;
    }

    .card:nth-child(4) .card-number {
        top: -150px;
        right: -80px;
    }

    .our-vision .card-image {
        position: absolute;
        /* Position the image within the card */
        top: 0;
        left: 0;
        /* Align it to the left edge of the card */
        width: 25%;
        /* Image covers 25% of the card */
        height: 100%;
        /* Full height of the card */
    }

    .our-vision .card-image img {
        width: 250px;
        height: 100%;
        object-fit: cover;
        border-radius: 0px;
    }

    .our-vision .card-content {
        flex: 1;
        /* Takes up the remaining 75% */
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 100px;
    }

    .our-vision .card-content:nth-child(2) {
        margin-left: 250px;
    }

    .our-vision .card-content:nth-child(4) {
        margin-left: 200px;
    }

    .our-vision .card h3 {
        color: var(--blue-dark);
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 15px;
        text-align: left;
        /* Left aligned title */
    }

    .our-vision .card p {
        color: #666;
        font-size: 1.2rem;
        font-weight: 300;
        text-align: left;
        /* Left aligned text */
        background-color: white;
    }

    /* Modifier styles for each card */
    .our-vision .card:nth-child(1) {
        margin-left: -7%;
        box-shadow: 0px 28px 100px 0px rgba(196, 212, 252, 1);
        /* More spread blue shadow */
    }

    .our-vision .card:nth-child(2) {
        margin-left: 7%;
        box-shadow: 0px 28px 100px 0px rgba(196, 212, 252, 1);
        /* More spread blue shadow */
    }

    .our-vision .card:nth-child(3) {
        margin-left: -7%;
        box-shadow: 0px 28px 100px 0px rgba(196, 212, 252, 1);
        /* More spread blue shadow */
    }

    .our-vision .card:nth-child(4) {
        margin-left: 7%;
        box-shadow: 0px 40px 100px 0px rgba(196, 212, 252, 1);
        /* More spread blue shadow */
    }

    /* Hover effect for cards */
    .our-vision .card:hover {
        transform: translateY(-10px);
        box-shadow: 0px 12px 100px rgba(66, 165, 245, 1);
        /* More spread blue shadow */
    }

    /* Responsive adjustments for devices below 768px */
    @media (max-width: 768px) {

        /* Hide card numbers */
        .card-number {
            display: none;
            /* Hide card numbers on small devices */
        }


        /* Set everything to relative and stack image and text */
        .our-vision .card {
            position: relative;
            /* Set card to relative positioning */
            flex-direction: column;
            /* Stack image and text vertically */
            margin-left: 0;
            /* Remove left margin */
            width: 100%;
            /* Full width for each card */
            padding: 20px;
            /* Ensure consistent padding */
            box-shadow: none;
            /* Remove box-shadow for simplicity */
            margin-bottom: 30px;
            /* Ensure space between cards */
        }

        /* Adjust the card image */
        .our-vision .card-image {
            position: relative;
            /* Make image position relative */
            width: 100%;
            /* Image takes full width of the card */
            height: auto;
            /* Auto height to maintain aspect ratio */
            margin-bottom: 20px;
            /* Space between image and text */
        }

        .our-vision .card-image img {
            width: 100%;
            /* Ensure the image covers full width */
            height: auto;
            /* Maintain aspect ratio */
            object-fit: cover;
            /* Maintain image cover style */
            border-radius: 10px;
            /* Optional: add rounded corners */
        }

        /* Adjust the card content */
        .our-vision .card-content {
            position: relative;
            /* Set card content to relative */
            text-align: center;
            /* Center text */
        }

        /* Adjust the card headings and text */
        .our-vision h2 {
            font-size: 2rem;
            /* Smaller font size for the title */
            text-align: center;
            /* Center align title */
        }

        .our-vision .card h3 {
            font-size: 1.6rem;
            /* Smaller font size for card headings */
            text-align: center;
            /* Center align headings */
        }

        .our-vision .card p {
            font-size: 1rem;
            /* Smaller font size for paragraph text */
            text-align: center;
            /* Center align text */
        }

        /* Adjust card spacing and layout */
        .our-vision .vision-cards {
            gap: 20px;
            /* Reduced gap between cards */
            width: 80%;
            /* Full width for cards */
        }

        /* Remove extra margins and box-shadow for all cards */
        .our-vision .card:nth-child(1),
        .our-vision .card:nth-child(2),
        .our-vision .card:nth-child(3),
        .our-vision .card:nth-child(4) {
            margin-left: 0;
            /* Remove margins from all cards */
            box-shadow: none;
            /* Remove box-shadow for simplicity */
        }

        /* Fix alignment issues for 2nd and 4th card */
        .our-vision .card:nth-child(2),
        .our-vision .card:nth-child(4) {
            margin-left: 0;
            /* Remove any left margin from 2nd and 4th cards */
        }

        .our-vision .card-content:nth-child(2) {
            margin-left: 0;
        }

        .our-vision .card-content:nth-child(4) {
            margin-left: 0;
        }

        .our-vision .card-content:nth-child(1),
        .our-vision .card-content:nth-child(2),
        .our-vision .card-content:nth-child(3),
        .our-vision .card-content:nth-child(4) {
            margin-left: 0;

        }


    }

}

/* Our Team Section ------------------------------------------------------- */
.our-team-section{
    .our-team {
        text-align: center;
        padding: 20px 0;
        padding-top: unset;
    }
    
    .our-team h2 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        color: var(--blue-dark);
    }
    
    .our-team h3 {
        font-size: 1.2rem;
        margin-bottom: 40px;
        padding-left: 40px;
        padding-right: 40px;
        font-weight: 300;
        color: #666;
    }
    
    .team-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* Four cards per row */
        row-gap: 30px;
        /* Space between cards */
        column-gap: 0px;
        justify-items: center;
    }
    
    .team-card {
        background-color: #fff;
        border-radius: 25px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 45px;
        width: 250px;
        /* Card width */
        height: 350px;
        /* Card height */
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Image styles */
    .team-card .image {
        width: 100%;
        height: 100%;
        max-height: 250px;
    }
    
    .team-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Info below the image */
    .team-card .info {
        padding: 10px 15px;
    }
    
    .team-card h3 {
        font-size: 1.2rem;
        color: var(--blue-dark);
        /* Blue text for name */
        margin-bottom: 0px;
    }
    
    .team-card p {
        font-size: 1rem;
        color: #666;
        /* Neutral color for job title */
        margin-bottom: -20px;
    }
    
    .team-card:hover {
        transform: translateY(-10px);
        background-color: var(--blue-icon);
        color: #fff;
    }
    
    .team-card:hover h3,
    .team-card:hover p {
        color: #fff;
    }
    
    .team-card:hover .social-links a {
        color: #fff;
    }
    
    /* Social Links Icons */
    .team-card .social-links {
        display: flex;
        justify-content: right;
        margin-top: 10px;
    }
    
    .team-card .social-links a {
        color: var(--blue-icon);
        /* Blue color for icons */
        font-size: 1.5rem;
        /* Size of the icons */
        padding:  5px 5px;
        /* Space between the icons */
        transition: color 0.3s ease;
    }
    
    .team-card .social-links a:hover {
        color: #0056b3;
        /* Darker blue on hover */
    }
    
    /* Hover effect for icon */
    .team-card .social-links a i {
        visibility: visible;
        /* Ensure icons are always visible */
        opacity: 1;
    }
    
    /* Adjust grid for smaller screens */
    @media (max-width: 1500px) {
        .team-container {
            grid-template-columns: repeat(1, 1fr);
            /* 3 cards per row */
        }
    }
    
    @media (max-width: 1024px) {
        .team-container {
            grid-template-columns: repeat(1, 1fr);
            /* 2 cards per row */
        }
    
        .team-card {
            width: 300px;
            /* Adjust card size */
            height: 350px;
            /* Adjust card height */
        }
    
        .team-card h3 {
            font-size: 1.1rem;
            /* Smaller font size for the name */
        }
    
        .team-card p {
            font-size: 0.9rem;
            /* Smaller font size for the job title */
        }
    
        .team-card img {
    
            width: 80%;
            /* Reduce image width */
            height: 70%;
            /* Reduce image height */
        }
    
        .team-card .info {
            padding: 5px 10px;
            /* Reduce padding */
        }
    
        .team-card .social-links a {
            font-size: 1.3rem;
            /* Reduce icon size */
        }
    }
    
    @media (max-width: 768px) {
        .team-container {
            grid-template-columns: repeat(1, 1fr);
            /* 4 cards per row on mobile */
    
        }
    
        .team-card {
            width: 80%;
            /* Full width on smaller screens */
            height: auto;
            /* Adjust height automatically */
            gap: 30px;
    
        }
    
        .team-card h3 {
            font-size: 1rem;
            /* Smaller font size */
        }
    
        .team-card p {
            font-size: 0.8rem;
            /* Smaller font size */
        }
    
        .team-card img {
            margin-top: 10%;
            border-radius: 20px;
            width: 60%;
            /* Reduce image size */
            height: 60%;
            /* Reduce image height */
        }
    
        .team-card .info {
            margin-top: -10%;
            /* Reduce padding */
    
        }
    
        .team-card .social-links a {
            margin-top: 1%;
            font-size: 1.4rem;
            /* Further reduce icon size */
        }
    }
    
    @media (max-width: 480px) {
        .team-container {
            grid-template-columns: repeat(1, 1fr);
            /* 4 cards per row for small phones */
        }
    
        .team-card {
            width: 80%;
            /* Full width on small phones */
            height: auto;
            /* Adjust height automatically */
        }
    
        .team-card h3 {
            margin-top: -20px;
            font-size: 1.8rem;
            /* Even smaller font size */
        }
    
        .team-card p {
            font-size: 1rem;
            /* Even smaller font size */
    
        }
    
        .team-card img {
            margin: unset;
            margin-top: 30px;
            width: 100%;
            /* Further reduce image size */
            height: auto;
            /* Further reduce image height */
            max-width: 200px;
    
        }
    
        .team-card .info {
            margin-top: unset;
            /* Further reduce padding */
    
        }
    
        .team-card .social-links a {
            margin-right: 10px;
            margin-top: 5%;
            font-size: 2rem;
            /* Reduce icon size for smaller devices */
        }
    }
}   


/* Footer Styles ------------------------------------------------------- */
.footer-section{
    .footer {
        background-color: var(--blue-dark);
        /* Dark Blue Background */
        color: #fff;
        padding: 40px 20px;
        text-align: left;
    }
    
    .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 1200px;
        margin: 0 auto;
        gap: 20px;
        /* Adds spacing between sections */
    }
    
    .footer-left,
    .footer-middle,
    .footer-right {
        width: 30%;
    }
    
    .footer-left {
        width: 40%;
        /* Left section takes 40% */
    }
    
    .footer-logo {
        max-width: 300px;
        margin-bottom: 20px;
    }
    
    .social-links {
        margin-left: 20%;
        display: flex;
        gap: 15px;
        font-size: 2rem;
        margin-top: 10px;
    }
    
    .social-links a {
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .social-links a:hover {
        color: #007BFF;
        /* Blue hover effect */
    }
    
    .footer-middle h3,
    .footer-right h3 {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .footer-middle ul {
        list-style: none;
        padding: 0;
    }
    
    .footer-middle ul li {
        margin-bottom: 10px;
    }
    
    .footer-middle a {
        color: #fff;
        text-decoration: none;
        font-size: 1rem;
        transition: color 0.3s ease;
    }
    
    .footer-middle a:hover {
        color: #007BFF;
    }
    
    .footer-middle i,
    .footer-right i {
        margin-right: 8px;
    }
    
    .footer-right p {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    
    .back-to-top {
        display: none;
        gap: 10px;
        font-size: 1.8rem;
        transition: background-color 0.3s ease;
        /* Smooth transition for background */
    }
    
    .back-to-top i {
        color: rgba(255, 255, 255, 0.6);
    }
    
    .back-to-top:hover .back-to-top i {
        transform: translateY(-5px);
        /* Darker background on hover */
    }
    /* AI Enhanced Badge */
 .ai-enhanced {
    position: absolute;
    right:40px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    z-index: 1000;
}

 .ai-enhanced i {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    font-style: italic;
    transition: color 0.3s ease;
}


 .ai-enhanced:hover i {
    color: #007BFF; /* Hover effect for the icon */
}
    /* Responsive Adjustments */
    
    @media screen and (max-width: 768px) {
        .footer {
            display: flex;
            /* Use flexbox for alignment */
            justify-content: center;
            align-items: center;
            padding: 10px 80px;
            /* Reduce padding for smaller screens */
            text-align: center;
            /* Center align content */
        }
    
        .footer-container {
            display: flex;
            /* Use flexbox for alignment */
            justify-content: center;
            /* Space between logo and icons */
            align-items: center;
            /* Align content vertically */
            flex-direction: row;
            /* Arrange items horizontally */
        }
    
        .footer-left {
            display: flex;
            /* Use flex to align logo and icons horizontally */
            justify-content: center;
            /* Align items to the left */
            align-items: center;
            /* Align items vertically in the center */
            gap: 0px;
            /* Add space between logo and icons */
        }
    
        .footer-logo {
            max-width: 200px;
            /* Adjust logo size for smaller screens */
            height: auto;
            /* Maintain aspect ratio */
        }
    
        .social-links {
            display: flex;
            /* Show social links */
            gap: 15px;
            /* Space between icons */
            font-size: 1.8rem;
            /* Adjust icon size */
        }
    
        .back-to-top {
            display: flex;
            /* Make the icon visible */
        }
    
        .footer-middle,
        .footer-right {
            display: none;
            /* Hide the middle and right sections */
        }
        .ai-enhanced{
            right:30px;
            margin-top: 100px;
        }
    }
}