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

html, body {
    height: 100%; /* Ensure html and body take full height */
    margin: 0; /* Explicitly remove default margins */
    padding: 0; /* Explicitly remove default padding */
    margin-top: 80px;
}

body {
    justify-content: center;
    min-height: 200vh; /* Increased to ensure enough scrollable content for demonstration */
    /* margin and padding are now handled by html, body rule above */
    box-sizing: border-box;
    zoom: 1;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

body.no-scroll, html.no-scroll {
    overflow-y: hidden; /* Prevent vertical scroll when menu is open */
}

/* --- Navbar Styles (Keep as is) --- */
.Navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
    margin-top: 30px;
    background-color: rgba(13, 13, 14, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 2px solid rgba(13, 13, 14, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 105px;
    width: 90%;
    padding: 0 100px;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease-in-out, margin-top 0.3s ease-in-out, border-radius 0.3s ease-in-out, width 0.3s ease-in-out, transform 0.3s ease-in-out, border 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.Navbar.scrolled {
    margin-top: 0;
    border-radius: 0;
    border: none;
    background-color: rgba(13, 13, 14, 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    transform: none;
}

.Navbar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-70%, -60%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle at center, rgba(0, 85, 202), rgba(255, 255, 255, 0.1) 80%, transparent 20%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(200px);
    transition: transform 0.3s ease-in-out;
}

.logo {
    display: flex;
    align-items: center;
}

.logoimg {
    width: 50%;
}

.logo span {
    color: #007bff;
}

.list-items {
    list-style: none;
    display: flex;
    gap: 50px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.inner-items a {
    text-decoration: none;
    color: black;
    font-family: "Nunito", sans-serif;
    font-size: 25px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.inner-items a:hover {
    color: #007bff;
}

/* NEW: Hamburger menu styles */
.menu-toggle {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1001; /* Above list-items when open */
}

.menu-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: black; /* Or a color that contrasts with the navbar */
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* State when menu is open (hamburger to cross animation) */
.menu-toggle.open .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background-color: #fff;
}

.menu-toggle.open .bar:nth-child(2) {
    transform: rotate(-45deg);
    background-color: #fff;
}

.menu-toggle.open .bar:nth-child(3) {
    opacity: 0;
}

/* Dropdown parent */
.dropdown {
    position: relative;
}

/* Dropdown menu base styles */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    padding: 10px 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
}

/* Show menu on hover */
@media (min-width: 769px) {
    .dropdown:hover .dropdown-menu,
    .dropdown-menu:hover {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Individual dropdown items */
.dropdown-menu li {
    list-style: none;
    padding: 10px 20px;
}

.dropdown-menu li a {
    text-decoration: none;
    color: black;
    font-weight: 500;
    display: block;
}


/* --- Hero Section Styles --- */
.hero {
    display: flex;
    gap: 150px;
    align-items: center;
    justify-content: center;
    padding: 60px 100px;
    width: 100%;
    margin-top: 60px;
    font-family: "Nunito", sans-serif;
}


.header-span {
    color: #0055CA;
}

.hero-header {
    font-size: 70px;
    font-weight: 800;
    line-height: 120%;
}

.hero-content p {
    font-size: 30px;
    max-width: 600px;
    margin: 0 auto 30px auto; /* Center paragraph and add bottom margin */
}


.hero-content p span {
    font-weight: 600;
    line-height: 190%;
}
.demo-button {
    padding: 15px;
    padding-top: 12px;
    width: 500px;
    height: 70px;
    border-radius: 18px;
    cursor: pointer;
    color: #F9FAFB;
    font-size: 23px;
    font-weight: 500;
    background-color: #0055CA;
    border: 3px solid #0055CA;
    transition: 0.3s ease-in;
    /* Added for anchor tag styling */
    text-decoration: none;
    display: inline-block; /* Essential for applying width/height/padding correctly */
    box-sizing: border-box; /* Ensures padding and border are included in the specified width/height */
    text-align: center; /* Centers the text horizontally */
    line-height: 40px; /* Adjust this value to vertically center text if needed */
}

.demo-button:hover {
    transition: 0.3s ease-in;
    background-color: #F9FAFB00;
    color: #0055CA;
}

/* --- Fade-in Animation Styles (Keep as is) --- */
.fade-left {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-right {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-right.active,
.fade-left.active {
    opacity: 1;
    transform: translateX(0);
}

.fade-left.active {
    transition-delay: 0.2s;
}

.courses h1 {
    font-size: 50px;
    font-family: "Nunito", sans-serif;
    text-align: center;
}

.courses {
    padding-top: 200px;
    height: 100vh;
}

.courses-container {
    display: flex;
    gap: 50px;
    justify-content: center;
    margin-top: 75px;
}

/* --- MODIFIED CARD STYLES FOR JS ANIMATION CONTROL --- */
.card {
    width: 500px;
    background-color: #F9FAFB;
    font-family: "Nunito", sans-serif;
    border-radius: 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 50px;
    text-align: center;
    
    /* Initial state for scroll-in animation */
    opacity: 0;
    transform: translateY(50px); 
    
    /* Only opacity transition here initially. Transform transitions are
        defined on more specific states below for independent control. */
    transition: opacity 0.8s ease-out; /* For the fade-in part of scroll-in */
}

/* State after scrolling in (Target for scroll-in, and resting state) */
.card.fade-in-up.active {
    opacity: 1;
    transform: translateY(0); 
    /* This transition controls the scroll-in TRANSFORM speed (0.8s)
        AND acts as the "default" transition for returning from hover-out
        unless the '.unhovering' class overrides it. */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
}

/* Optional: Add a slight delay for the second card to animate after the first */
.card:nth-child(2).fade-in-up.active {
    transition-delay: 0.2s; /* Adjust this value as needed (e.g., 0.1s, 0.3s) */
}

/* State when card is actively hovered (Hover-in speed) */
.card.fade-in-up.active.hovered {
    transform: scale(1.1) translateY(0); /* Combine scale with the active translateY */
    transition: transform 0.2s ease-in; /* Hover-in speed */
}

/* New state for when mouse leaves (Hover-out speed) */
.card.fade-in-up.active.unhovering {
    transform: translateY(0); /* Target transform when unhovering */
    transition: transform 0.2s ease-in; /* Hover-out speed */
}

/* --- Card Content Styles (Keep as is) --- */
.card h2 {
    font-family: "Nunito", sans-serif;
    font-size: 30px;
    font-weight: 700;
    margin-top: -20px;
    margin-bottom: 30px;
    color: #0055CA;
}

.card ul {
    line-height: 50px;
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 40px;
}

/* Remove :hover transform from here as it's handled by JS classes now */
/* You can keep other :hover styles if they don't conflict with transform */


.card a {
    background-color: #0055CA;
    border: 3px solid #0055CA;
    border-radius: 50px;
    padding: 10px 20px;
    text-decoration: none;
    color: #F9FAFB;
    transition: 0.3s ease-in;
}

.card a:hover {
    background-color: #F9FAFB;
    color: #0055CA;
    transition: 0.3s ease-in;
}

/* Why Us Section */

.spacer {
    aspect-ratio: 960/250;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.layer {
    background-image: url('waves.svg');
}

.whyus {
    height: 110vh;
    background-color: #2983ff;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.layer2 {
    background-image: url('waves2.svg');
}

.whyus h1 {
    margin-top: 10px;
    font-size: 50px;
    color: white;
    font-family: "Nunito", sans-serif;
    text-align: center;
}

.whyuscont {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.infocard {
    /* REMOVED: width: 33%; - Let the grid handle the width */
    border-radius: 20px;
    padding: 30px;
    color: white;
    font-family: "Nunito", sans-serif;
    /* Ensure content doesn't overflow */
    box-sizing: border-box;
    display: flex; /* Use flexbox for inner content alignment */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: 0.2s ease-in;
}


.infocard:hover {
    transform: scale(1.05);
    transition: 0.2s ease-in;
}

.infocard h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #080077;
    font-size: 30px;
}

.infocard p {
    font-size: 20px;
}

.contactcont {
    height: 100vh;
    background: url('circle-scatter-haikei (1).svg');
    background-repeat: no-repeat; /* Add this line */
    background-position: center; /* You might want this too */
    background-size: cover; /* And this for similar behavior as .contact */
    display: flex;
    justify-content: center;
    align-items: center;
}

.contcont {
    height: 80vh;
    width: 70%;
    background-color: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.2fr 1fr 0.5fr;
    overflow: hidden;
}

.contheader {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #F9FAFB;
    font-size: 40px;
    font-family: "Nunito", sans-serif;
}

.contp1 {
    grid-column: 1;
    grid-row: 2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.contp1 form {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    align-items: center;
}

.contp1 input, .contp1 select {
    padding: 20px;
    border-radius: 15px;
    text-decoration: none;
    border: none;
    width: 80%;
    font-family: "Nunito", sans-serif;
    font-size: 18px;
}

.contp1 select {
    
    font-family: "Nunito", sans-serif;
    font-size: 18px;
}

.contp1 a {
    padding: 15px;
    border-radius: 30px;
    border: none;
    width: 80%;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 20px;
    box-sizing: border-box;
    font-family: "Nunito", sans-serif;
    transition: 0.2s ease-in;
    text-align: center;
    text-decoration: none;
}

.contp1 a:hover {
    background-color: #0070e8;
    transition: 0.2s ease-in;
}

.contp1 input::placeholder {
    
    font-family: "Nunito", sans-serif;
    font-size: 18px;
}

#text {
    height: 150px;
    padding: 20px;
    border-radius: 15px;
    text-decoration: none;
    border: none;
    width: 80%;
}

#text::placeholder {
    font-family: "Nunito", sans-serif;
    font-size: 18px;
}

.contp2 {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    padding: 30px 30px;
}

.contp3 {
    grid-row: 1 / span 3;
}

.wapbutton a{
    background-color: #39AE41;
    text-decoration: none;
    display: flex;
    width: 200px;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 20px;
    color: white;
    font-family: "Nunito", sans-serif;
    font-size: 18px;
    transition: 0.2s ease-in;
}

.wapbutton a:hover {
    background-color: #35a13c;
    transition: 0.2s ease-in;
}

.wapbutton a img {
    width: 30px;
    margin-right: 10px;
}

.infotext {
    color: white;
    font-family: "Nunito", sans-serif;
    font-size: 20px;
    width: 50%;
}

.contect {
    display: none;
}

#call {
    margin-bottom: 10px;
}

.bol {
    font-weight: 800;
}

.testicont {
    height: 80vh;
    width: 100%;
    margin-top: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
}

.testimonials {
    position: relative;
    max-width: 900px;
    width: 100%;
    padding: 50px 0;
    row-gap: 100px;
    overflow: hidden;
}

.testimonials .image {
    height: 170px;
    width: 170px;
    object-fit: cover;
    border-radius: 50%;
}

.testimonials .slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 30px;
}

.quotes {
    width: 30px;
}

.slide p{
    padding: 0 100px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #0055CA;
    font-family: "Nunito", sans-serif;
}

.slide .details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.details .name {
    font-size: 25px;
    font-weight: 600;
    color: #0055CA;
    font-family: "Nunito", sans-serif;
}

.details .job {
    font-size: 15px;
    font-weight: 600;
    font-family: "Nunito", sans-serif;
    color: #0055CA;
}

.outcomes {
    height: 80vh;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.outcont {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
}

.outcard img{
    width: 300px;
}

.outcard h1 {
    font-weight: 800;
    font-size: 50px;
}

.outcard p {
    font-size: 18px;
    font-weight: 600;
}

.outcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    row-gap: 10px;
    font-family: "Nunito", sans-serif;
}

.wasap {
    /* The container for the fixed button */
    position: fixed; /* Keep it fixed on the screen */
    bottom: 80px;
    right: 80px;
    z-index: 1000; /* Ensure it's on top of most content */
}

.wasap a {
    /* Initial state of the button */
    width: 70px;
    height: 70px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    /* justify-content: flex-start;  Removed from here, will apply on hover for expansion */
    position: relative; /* Crucial for absolute positioning of children */

    /* Added for the sliding effect */
    transition: all 0.3s ease; /* Smooth transition for all properties */
    overflow: hidden; /* Hide overflowing chat-text initially */
}

.whatsapp-icon-wrapper {
    width: 70px;
    height: 70px;
    background-color: #39AE41; /* Green background for the icon */
    border-radius: 50px; /* Make it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For z-index and maintaining its position */
    z-index: 2; /* Ensures it stays above the chat-text */
    /* No transform here, as it's the fixed part of the button */
    flex-shrink: 0; /* Prevent it from shrinking when the parent expands */
}

.wasap a img {
    width: 40px;
    height: 40px; /* Ensure image maintains aspect ratio */
}

.wasap a .chat-text {
    /* White bar styles */
    position: absolute; /* Positioned relative to .wasap a */
    background-color: white;
    color: #39AE41; /* Text color */
    font-family: sans-serif;
    font-weight: bold;
    padding: 10px 15px; /* Adjust padding as needed */
    border-radius: 50px; /* Same as the button for seamless look */
    white-space: nowrap; /* Prevent text from wrapping */
    opacity: 0; /* Hidden by default */
    transform: translateX(calc(70px - 50px)); /* Start just behind the icon (adjust 50px if your icon is smaller/larger) */
    transition: all 0.3s ease; /* Smooth transition for the text and bar */
    /* Removed left: 0; - will rely on transform and flexbox */
    z-index: 1; /* Below the icon */
    width: 100%; /* Take 100% of the *remaining* width when flexed, or 100% of parent when absolute */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* Align text to the right within the white bar */
    padding-right: 20px; /* Add some padding on the right for the text */
    font-family: "Nunito", sans-serif;
    font-size: 20px;
}

/* Hover effects */
.wasap a:hover {
    width: 250px; /* Adjust this value to control how far the bar extends */
    border-radius: 50px; /* Ensure border-radius stays consistent */
    justify-content: flex-start; /* Align items to the start when expanded */
    background-color: transparent; /* Remove background color from the main 'a' tag on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.wasap a:hover .chat-text {
    opacity: 1; /* Make visible on hover */
    transform: translateX(0); /* Slide into view, starting from the left edge of the expanded container */
    padding-left: 70px; /* Push the text to the right, beyond the icon's width */
}

.outcomes .hed {
    font-family: "Nunito", sans-serif;
    font-size: 50px;
    text-align: center;
    margin-bottom: 80px;
}

.igcsecont {
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.viewmore {
    display: grid;
    margin-top: 30px;
    height: 90vh;
    width: 95%;
    grid-template-columns: 1fr 1fr 0.75fr 0.75fr;
    grid-template-rows: 1fr 2fr 1fr;
    font-family: "Nunito", sans-serif;
}
.description {
    /* background-color: red; */
    grid-column: span 2;
    grid-row: span 2;
    font-size: 1.9rem;
    text-align: left;
    padding: 20px;
    width: 90%;
    height: 70vh;
    margin-left: 30px;
}

.description ul {
    margin-left: 30px;
}
.igh2 {
    font-family: "Nunito", sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: 2.3rem;
    margin-top: 30px;
}

.courseimage {
    /* background-color: blue; */
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.courseimage img {
    height: 90%;
    width: 90%;
    border-radius: 50px;
}

.subjects {
    display: flex;
    /* background-color: black; */
    font-size: 1.5rem;
    justify-content: left;
    align-items: center;
    text-align: left;
    margin-left: 30px;
    width: 80%;
    margin-top: 40px;
    flex-direction: column;
    grid-column: span 2;
}

.subjects h3 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
}

.subjects ul {
    margin-left: 60px;
}


.enrollbutton {
    /* background-color: green; */
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.enrollbutton a {
    background-color: #0055CA;
    padding: 35px;
    width: 90%;
    text-align: center;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    border: 5px solid #0055CA ;
    font-size: 1.2rem;
    transition: 0.2s ease-in;
}

.enrollbutton a:hover {
    background-color: rgba(0, 0, 0, 0);
    color: #0055CA;
    transition: 0.2s ease-in;
}

.igcse {
    text-align: center;
    font-family: "Nunito", sans-serif;
    font-weight: bold;
    font-size: 5rem;
    margin-top: 100px;
}

.crashcoursecont {
    text-align: left;
    width: 100%;
    font-family: "Nunito", sans-serif;
    flex-direction: column;
    font-size: 1rem;
    width: 30%;
}

.crashcoursecont ul {
    font-size: 1.5rem;
    margin-left: 30px;
}

.bigcont {
    display: flex;
    justify-content: center;
    margin-top: 200px;
    gap: 300px;
    align-items: center;
    height: 40vh;
}

.action {
    display: flex;
    flex-direction: column;
    gap: 50px;
    font-family: "Nunito", sans-serif;
}



/* --- Media Queries for Mobile Responsiveness --- */
@media screen and (max-width: 768px) {
    .Navbar {
        padding: 0 20px;
        height: 80px;
        border-radius: 20px; /* Smaller border-radius for mobile navbar */
    }

    .Navbar.scrolled {
        width: 100%;
        border-radius: 0;
    }

    .Navbar .list-items {
        /* Mobile specific styles for the menu */
        position: fixed;
        top: 0; /* Ensures it starts at the very top edge */
        left: 0; /* Ensures it starts at the very left edge */
        width: 100%;
        height: 90vh; /* Full viewport height */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background-color: rgba(13, 13, 14, 0.9); /* Fully opaque */
        border-radius: 50px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateY(-100%); /* Start off-screen above */
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
        z-index: 999; /* Below hamburger, above content */
        opacity: 0;
        pointer-events: none; /* Prevent clicks when hidden */
        display: flex; /* Keep flex for column layout, but control visibility with transform/opacity */
    }

    .list-items.open {
        transform: translateY(0); /* Slide into view */
        opacity: 1;
        pointer-events: auto; /* Allow clicks when open */
    }

    .Navbar .logo {
        font-size: 35px; /* Adjust logo size */
    }

    .menu-toggle {
        display: flex; /* Show hamburger on mobile */
    }

    .Navbar::before {
        transform: translate(-50%, -50%) scale(0.5); /* Adjust gradient size and position */
        filter: blur(100px);
    }

    .list-items .inner-items a {
        color: white; /* Change link color for dark background */
        font-size: 35px; /* Larger for mobile */
        padding: 15px 0;
        display: block; /* Make links block level for better touch targets */
        width: fit-content; /* Allow links to size to content */
    }

    /* Hero Section */
    .hero {
        flex-direction: column;
        padding: 40px 20px;
        gap: 50px;
        margin-top: 30px;
    }

    .hero-content {
        /* Ensure text-align: center is applied to hero-content on mobile */
        text-align: center;
    }

    .hero-header {
        font-size: 40px;
        text-align: center; /* Center header on mobile */
    }

    .hero-content p {
        font-size: 20px;
        text-align: center; /* Center paragraph on mobile */
        max-width: 100%;
    }

    .demo-button {
        width: 90%;
        height: 60px;
        font-size: 18px;
        line-height: 30px;
    }

    .hero-illustration {
        display: none; /* Hide hero illustration on mobile */
    }

    /* Courses Section */
    .courses {
        padding-top: 100px;
        height: auto; /* Allow height to adjust */
        min-height: 80vh;
    }

    .courses h1 {
        font-size: 40px;
    }

    .courses-container {
        flex-direction: column;
        gap: 30px;
        margin-top: 50px;
        align-items: center; /* Center cards */
    }

    .card {
        width: 90%;
        padding: 30px;
    }

    .card h2 {
        font-size: 25px;
    }

    .card ul {
        font-size: 16px;
        line-height: 40px;
    }

    /* Testimonials Section */
    .testicont {
        height: auto;
        padding: 50px 0;
        margin-bottom: 0;
    }

    .testimonials {
        padding: 30px 0;
    }

    .slide p {
        padding: 0 20px;
        font-size: 16px;
    }

    .details .name {
        font-size: 20px;
    }

    .details .job {
        font-size: 14px;
    }

    .swiper-button-next, .swiper-button-prev {
        display: none !important; /* Hide navigation arrows on mobile */
    }

    /* Why Us Section */
    .whyus {
        height: auto;
        padding: 50px 20px;
    }

    .whyus h1 {
        font-size: 40px;
        margin-bottom: 30px;
    }

    .whyuscont {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .infocard {
        padding: 20px;
    }

    .infocard h2 {
        font-size: 25px;
    }

    .infocard p {
        font-size: 16px;
    }

    /* Outcomes Section */
    .outcomes {
        height: auto;
        padding: 50px 20px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .outcomes .hed {
        font-size: 40px;
        margin-bottom: 30px;
    }

    .outcont {
        flex-direction: column;
        gap: 30px;
    }

    .outcard img {
        width: 150px; /* Smaller icons */
    }

    .outcard h1 {
        font-size: 40px;
    }

    .outcard p {
        font-size: 16px;
    }

    /* Contact Section */
    .contactcont {
        height: auto;
        min-height: 100vh;
        width: 100%;
        padding: 20px;
    }

    .contcont {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto; /* Header, Form, Info, Map */
        width: 95%;
        height: auto;
        border-radius: 20px;
    }

    .contheader {
        font-size: 30px;
        padding-top: 20px;
        grid-column: 1 / span 1; /* Ensure it spans one column */
        grid-row: 1;
    }

    .contp1 {
        grid-column: 1 / span 1;
        grid-row: 2;
        border-bottom: none; /* Remove border */
        padding: 0 10px;
        height: 40vh;
    }

    .contp1 form {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: space-evenly;
        align-items: center;
    }

    .contp1 input, .contp1 select, .contp1 a {
        width: 95%;
        font-size: 16px;
        padding: 15px;
    }

    .contp1 input::placeholder, .contp1 select {
        font-size: 16px;
    }

    .contp2 {
        grid-column: 1 / span 1;
        grid-row: 3;
        flex-direction: column;
        text-align: center;
        padding: 20px 10px;
    }

    .infotext {
        width: 95%;
        font-size: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .doubleInfoText {
        margin-top: -5px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    .contect {
        font-size: 30px;
    }

    .wapbutton a {
        width: 95%;
        font-size: 16px;
        padding: 12px;
    }

    .contp3 {
        display: none;
    }
    .wapbutton a {
        display: none;
    }

    iframe {    
        display: none;
    }

    /* WhatsApp Button */
    .wasap {
        bottom: 20px;
        right: 20px;
    }

    .wasap a {
        width: 60px;
        height: 60px;
    }

    .whatsapp-icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .wasap a img {
        width: 35px;
        height: 35px;
    }

    .wasap a .chat-text {
        font-size: 16px;
        transform: translateX(calc(60px - 40px)); /* Adjust for smaller icon wrapper */
    }

    .wasap a:hover {
        width: 200px; /* Smaller expanded width */
    }

    .wasap a:hover .chat-text {
        padding-left: 60px; /* Adjust padding for smaller icon wrapper */
    }

    .igcse {
        font-size: 3rem;
        margin-top: 20px;
    }

    .igcsecont {
        height: auto;
        padding: 20px 0;
    }

    .viewmore {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 90%;
        gap: 20px;
    }

    .description,
    .coursestructure,
    .subjects,
    .feestructure,
    .enrollbutton {
        font-size: 1.25rem;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .courseimage {
        width: 100%;
        height: auto;
    }

    .courseimage img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    .subjects {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 0;
        margin-top: 0;
    }

    .subjects h3 {
        font-size: 1.75rem;
        margin-bottom: 10px;
    }

    .enrollbutton {
        width: 100%;
    }

    .enrollbutton a {
        padding: 20px;
        font-size: 1.25rem;
    }

    .bigcont {
        flex-direction: column;
        gap: 80px;
    }

    .crashcoursecont {
        text-align: center;
    }

    .crashcoursecont ul {
        font-size: 0.9rem;
    }

    .crashcoursecont h1 {
        font-size: 1.2rem;
        margin-bottom: 30px;
        margin-top: 100px;
    }

    .crashcoursecont {
        width: 80%;
    }
}