*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
html,
body{
     width: 100%;
     height: 100%;
     font-family: Arial, Helvetica, sans-serif;
     color: #fff;
}
#main{
          overflow: hidden;
}

        /* Page 1 section */
        #page1 {
            width: 100%;
            height: 100vh;
            background-color: #1e3554;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;
            position: relative;
        }

        /* Adjusted H1 for better centering and font size */
        #page1 h1 {
            font-size: 5vw; 
            font-weight: 600;
            margin-bottom: 2vh;
            line-height: 1.2;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        #page1 h1 span {
            color: #ff8c42;
        }

        /* Adjusted P for better readability */
        #page1 p {
            font-size: 1.5vw;
            line-height: 1.5;
            color: #ffffffaf;
            margin-top: 0;
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* The Hamburger Menu Button (Open button) */
        .hamburger-toggle-button {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            background: #274163;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 102;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
        
        .hamburger-toggle-button svg {
            color: #fff;
            width: 24px;
            height: 24px;
        }

        /* Nav menu */
        .nav-menu {
            position: fixed;
            top: 0;
            left: -320px;
            width: 300px;
            height: 100%;
            background: #2b4566;
            padding: 20px;
            box-sizing: border-box;
            transition: left 0.5s ease-in-out;
            z-index: 101;
            overflow-y: auto; /* Kept 'auto' to allow scrolling if content overflows */
            box-shadow: 2px 0 10px rgba(0,0,0,0.5);
        }

        /* Custom Scrollbar (to hide the default white/grey one) */
        .nav-menu::-webkit-scrollbar {
            width: 5px;
        }
        .nav-menu::-webkit-scrollbar-track {
            background: #2b4566;
        }
        .nav-menu::-webkit-scrollbar-thumb {
            background: #456285;
            border-radius: 10px;
        }
        .nav-menu::-webkit-scrollbar-thumb:hover {
            background: #557196;
        }
        
        /* State when menu is open */
        .nav-menu.active {
            left: 0;
        }
        
        /* Menu items styling */
        .nav-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
            padding-top: 20px;
        }

        .nav-menu ul li {
            margin-bottom: 5px;
        }

        .nav-menu ul li a {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            text-decoration: none;
            color: #fff;
            font-size: 1rem;
            border-radius: 8px;
            transition: background 0.2s ease;
        }
        
        .nav-menu ul li a:hover,
        .nav-menu ul li.active a {
            background-color: #385175;
        }
        
        .nav-menu a .bi {
            margin-right: 15px;
            font-size: 1.2rem;
        }

        /* Sub-menu styling */
        .nav-menu .sub-menu {
            padding-left: 30px;
            max-height: 0;
            overflow: hidden; 
            transition: max-height 0.3s ease-in-out;
        }
        
        .nav-menu .sub-menu.open {
            max-height: 200px;
            overflow: visible;
        }
        
        /* Footer section of the menu */
        .nav-menu-footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #456285;
            text-align: center;
        }
        
        .nav-menu-footer p {
            font-size: 0.8rem;
            color: #a0a0a0;
        }

        /* Overlay for background blur and darkening */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            z-index: 99;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease;
        }
        
        .overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Styling for the sign-in section */
        .sign-in-section {
            padding: 15px;
            border-bottom: 1px solid #456285;
            margin-bottom: 20px;
        }
        .sign-in-section a {
            text-decoration: none;
            display: flex;
            align-items: center;
            font-weight: bold;
        }
        .sign-in-section p {
            margin-left: 35px;
            font-size: 0.9rem;
            color: #a0a0a0;
        }

        /* //#274163 */
    #line{
    background-color:#2A3B54; 
    width: 100%;
    height: 2vh;
    position: absolute;
    bottom: 0vh;
    /* margin-top: 58vh; */
}
html {
  scroll-behavior: smooth; /* enables smooth scroll */
}

.box {
  background-color: #2A3B54;
  width: 3.5vw;
  height: 6vh;
  position: absolute;
  bottom: 1vh;
  left: 50%;
  transform: translateX(-50%);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 2.5rem;
  z-index: 1;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.arrow-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: arrowBounce 1.5s infinite ease-in-out; /* 👈 animate the wrapper */
}

.box .bi {
  color: #ffffff99;
  font-size: 5vh;
  transition: color 0.3s ease;
}

.box .bi:hover {
  color: #fff;
}

/* Bounce animation */
@keyframes arrowBounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(12px); }
  100% { transform: translateY(0); }
}

        .header-banner {
            color: #333;
            font-size: 1.1em;
            font-weight: 600;
            margin: 30px 20px 20px 20px;
            text-align: center;
            max-width: 1000px;
        }


.header-banner h2 {
  padding-left: 3.9vw;
  color: #274163;
  font-size: 3vw;
  margin-bottom: 10px;
}

.header-banner p {
    margin-top: 4vh;
    text-align: start;
  padding-left: 12.5vw;
  font-size: 1.3vw;
  color: #444444c3;
  margin-bottom: 40px;
}

.header-banner p span {
  display: block;
  margin-top: 10px;
  color: #e74c3c;
  font-weight: bold;
}

        .main-container {
            padding-left: 25vw;
            width: 90%;
            max-width: 1000px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 50px;
        }

        /* Card Styling */
        .card-container {
            position: relative;
            width: 74vw;
            /* Increased height slightly to accommodate the stacking and transforms */
            height: 380px;
            margin-bottom: 20px;
            /* Enable 3D context for better stacking control */
            perspective: 1000px;
        }

        .card {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.5s ease-in-out; /* Smoother transition for stacking/hiding */
            opacity: 0;
            pointer-events: none;
            box-sizing: border-box;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0.6) 100%);
            background-size: cover;
            background-position: center right;

            /* Default state for inactive cards (pushed back and slightly scaled/rotated) */
            transform: translateZ(-20px) scale(0.98) translateY(10px);
            z-index: 5;
        }

        /* Active Card Styling (Brings it to the front and resets transform) */
        .card.active {
            opacity: 1;
            pointer-events: all;
            z-index: 10;
            transform: translateZ(0) scale(1) translateY(0);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Stronger shadow for the top card */
        }

        /* ----------------------------------------- */
        /* Specific Card Colors/Gradients (Book Edges) */
        /* ----------------------------------------- */
        .acro-card {
            border-top: 5px solid #e74c3c;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 40%, rgba(231, 76, 60, 0.5) 100%);
            /* Position slightly off-center (Right for first card, like the screenshots suggest a slight shift) */
            transform: translateZ(-15px) scale(0.98) translateY(10px) translateX(3px);
            /* z-index adjusted so the first one appears at the bottom of the stack initially */
            z-index: 1; 
        }

        .wag-card {
            border-top: 5px solid #9b59b6;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 40%, rgba(155, 89, 182, 0.5) 100%);
            transform: translateZ(-10px) scale(0.99) translateY(5px) translateX(2px);
            z-index: 2;
        }

        .mag-card {
            border-top: 5px solid #6c5ce7;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 40%, rgba(108, 92, 231, 0.5) 100%);
            transform: translateZ(-5px) scale(0.99) translateY(2px) translateX(1px);
            z-index: 3;
        }

        .rhy-card {
            border-top: 5px solid #e67e22;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 40%, rgba(230, 126, 34, 0.5) 100%);
            transform: translateZ(-3px) scale(0.99) translateY(1px) translateX(0.5px);
            z-index: 4;
        }

        .tra-card {
            border-top: 5px solid #2ecc71;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 40%, rgba(46, 204, 113, 0.5) 100%);
            transform: translateZ(-1px) scale(0.99) translateY(0.5px) translateX(0.2px);
            z-index: 5;
        }

        /* Reset the specific transforms and z-index for the active card */
        .card.active {
            transform: translateZ(0) scale(1) translateY(0) translateX(0);
            z-index: 10;
        }


        /* ----------------------------------------- */
        /* Standard Styles (Title, Buttons, Nav) */
        /* ----------------------------------------- */
        .card-title {
            font-size: 1.8em;
            font-weight: 700;
            margin-bottom: 30px;
            color: #333;
        }
        .acro-card .card-title { color: #e74c3c; }
        .wag-card .card-title { color: #9b59b6; }
        .mag-card .card-title { color: #6c5ce7; }
        .rhy-card .card-title { color: #e67e22; }
        .tra-card .card-title { color: #2ecc71; }

        .button-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            padding-top: 8vw;
        }

        .button-grid button {
            background-color: white;
            border: 2px solid #101010;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 0.95em;
            font-weight: 600;
            color: #555;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
            white-space: nowrap;
        }

        .button-grid button:hover {
            border-color: #3498db;
            color: #3498db;
        }

        .discipline-nav {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
            padding: 4px;
            /* background-color: rgba(28, 28, 30, 0.727); */
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            width: 100%;
            max-width: fit-content;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
}

        .nav-button {
            color: #050505;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*padding: 20px 25px;
            */height: 14vh;
            border: none;
            cursor: pointer;
            font-weight: 400;
            transition: color 0.2s;
}
#textNav{
    font-size: 1vw;
    color: #101010c5;
}

        .nav-button .icon-placeholder {
            font-size: 6vh;
            /* margin-bottom: 5px; */
}

        .nav-button.active {
            color: white;
        }
        .nav-button[data-discipline="ACRO"].active { background-color: #e74c3c; }
        .nav-button[data-discipline="WAG"].active { background-color: #9b59b6; }
        .nav-button[data-discipline="MAG"].active { background-color: #6c5ce7; }
        .nav-button[data-discipline="RHY"].active { background-color: #e67e22; }
        .nav-button[data-discipline="TRA"].active { background-color: #2ecc71; }

#page3{
     width: 100vw;
     height: 95vh;
     display: flex;
}
#page3 .left{
     width: 55%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
#page3 h2{
     color: #2A3B54;
font-size: 3.6vw;
line-height: 8vh;

}
#page3 ul{
     margin-top: 8px;
     padding-left: 10vh;
}
#page3 p{
     padding-top: 4vh;
     color: #101010;
     display: flex;
     text-align: start;
   font-size: 1.5vw;  
     
}
#page3 .right{
     width: 45%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
}

#page3>.right>span{
     position: absolute;
     top: 4vw;
     left: 4vw;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background-color: transparent;
     border: 1px solid #10101071;
     z-index: 1;
}
/* #page3>.right>span:nth-child(1){
     position: absolute;
} */
#page3>.right>span:nth-child(2){
     position: absolute;
     top: 4vw;
     left: 6vw;
     background-color: transparent;
     border: 1px solid #10101071;
     z-index: 2;
}
#page3>.right>span:nth-child(3){
    width: 400px;
    height: 400px;
    position: absolute;
    top: 6vw;
    left: 5vw;
    background-image: url("https://www.acro-companion.com/assets/pics/home_page_images/big-image-circle-1000.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 3;

    /* Animation */
    animation: floatZoom 6s ease-in-out infinite;
}

#page3>.right>span:nth-child(4){
    position: absolute;
    width: 250px;
    height: 250px;
    top: 21vw;
    left: 18vw;
    background-image: url("https://www.acro-companion.com/assets/pics/home_page_images/small-image-circle-600.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 4;

    /* Animation */
    animation: floatZoom 8s ease-in-out infinite;
}

/* Keyframes for smooth floating + zooming */
@keyframes floatZoom {
  0%   { transform: scale(1) translateY(0); }
  50%  { transform: scale(1.05) translateY(-10px); }
  100% { transform: scale(1) translateY(0); }
}   

        .community-section {
          color: #fff;
          background-color: #1e3554;
            text-align: center;
            padding: 80px 20px;
        }

        h2.main-heading {
            font-size: 40px;
            font-weight: 600;
            margin-bottom: 50px;
            line-height: 1.2;
        }

        /* Stats Section */
        .stats-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 60px;
            margin-bottom: 60px;
        }

        .stat-box {
            text-align: center;
        }

        .stat-number {
            font-size: 38px;
            font-weight: bold;
            color: #ff8c42;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 16px;
            opacity: 0.8;
        }

/* Testimonials Section */

.testimonials-section {
    padding-top: 10px; 
    padding-bottom: 70px; 
    background: #1e3554; 
    text-align: center;
    overflow: hidden; 
    position: relative;
    margin: 0;
}


.carousel-content-wrapper {
    position: relative; 
    overflow: hidden; 
    width: 95%; 
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto; 
    padding-top: 50px;
    box-sizing: border-box; 
}

.carousel-content-wrapper::before,
.carousel-content-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10; 
    pointer-events: none; 
    width: 80px; 
}


.carousel-content-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #1e3554 10%, transparent 100%);
}

.carousel-content-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #1e3554 10%, transparent 100%);
}

.testimonials-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
    left: 0;
    transition: transform 0.5s ease-in-out;
    padding-bottom: 50px;
    transform: translateX(0);
    padding-left: 200px; 
    padding-right: 200px; 
    margin-left: -20px;
    margin-right: -20px;
}

.testimonial-card {
    border-radius: 15px;
    padding: 30px;
    width: 320px; 
    flex-shrink: 0;
    position: relative;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* padding-top: 70px; is where the avatar positioning space is defined */
    padding-top: 70px; 
    margin-right: 0; 
    background-color: white; 
    color: #1e3554;
    z-index: 1; /* Ensures cards are below gradients but above background */
}

.card-avatar, .ac-logo-circle {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid #1e3554;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    z-index: 2; 
    background-color: white; 
}

.card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-logo-circle {
    background-color: #2575e5; 
}
.ac-logo {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
}

.quote-icon {
    font-size: 40px;
    color: #2575e5;
    position: absolute;
    top: 20px; 
    left: 20px;
    z-index: 1; 
}

.testimonial-nav {
    margin-top: 20px;
}

.testimonial-nav .nav-button {
    background: transparent;
    border: 2px solid rgb(202, 20, 20);
    color: white;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.2em;
    transition: opacity 0.3s;
}

.nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info {
    color: white;
    margin: 0 20px;
    font-size: 1.1em;
}

        .white-card {
            background-color: #fff;
            color: #333;
        }

        .blue-card {
            background-color: #274163;
            color: #fff;
        }
        
        .card-avatar {
            position: absolute;
            top: -45px;
            left: 50%;
            transform: translateX(-50%);
            width: 90px;
            height: 90px;
            border-radius: 50%;
            border: 4px solid #1e3554;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .card-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .ac-logo-circle {
            position: absolute;
            top: -45px;
            left: 50%;
            transform: translateX(-50%);
            width: 90px;
            height: 90px;
            border-radius: 50%;
            border: 4px solid #1e3554;
            background-color: #2575e5; /* The specific blue color from the image */
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .ac-logo {
            font-size: 28px;
            font-weight: bold;
            color: #fff;
        }

        .quote-icon {
            font-size: 40px;
            color: #2575e5; /* Adjusted to match the blue in the circle */
            position: absolute;
            top: 20px;
            left: 20px;
        }

        .testimonial-text {
            font-size: 16px;
            line-height: 1.6;
            margin-top: 15px;
        }
        
        .testimonial-meta {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .testimonial-name {
            font-size: 18px;
            font-weight: bold;
            color: #ff8c42;
        }

        .testimonial-location, .testimonial-role {
            font-size: 14px;
            opacity: 0.7;
            margin-top: 5px;
        }
        
        .testimonial-nav {
            padding: 20px;
            margin-top: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }
        
        .nav-button {
            background: none;
            color: #fff;
            border: 1px solid #fff;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .nav-button:hover {
            background-color: #274163;
        }

        .page-info {
            font-size: 18px;
            font-weight: bold;
        }

.testimonials-section {
    padding-top: 60px; 
    padding-bottom: 70px; 
    background: #1e3554; 
    text-align: center;
    overflow: hidden; 
    position: relative;
    margin: 0;
}

/* CAROUSEL WRAPPER & FADE EFFECT */
.carousel-content-wrapper {
    position: relative; 
    overflow: hidden; 
    width: 95%; 
    max-width: 1200px;
    margin: 0 auto; 
    padding: 0 20px; 
    box-sizing: border-box; 
}

/* Gradient Overlays */
.carousel-content-wrapper::before,
.carousel-content-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10; 
    pointer-events: none; 
    width: 80px; 
}
.carousel-content-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #1e3554 10%, transparent 100%);
}
.carousel-content-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #1e3554 10%, transparent 100%);
}

/* CAROUSEL CONTAINER (SCROLLING TRACK) */
.testimonials-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
    left: 0;
    transition: transform 0.5s ease-in-out;
    padding-bottom: 50px;
    transform: translateX(0);
    padding-left: 200px; 
    padding-right: 200px; 
    padding-top:50px;
    margin-left: -20px;
    margin-right: -20px;
}

.testimonial-card {
    border-radius: 15px;
    padding: 30px;
    width: 320px; 
    flex-shrink: 0;
    position: relative;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding-top: 70px; 
    margin-right: 0; 
    background-color: white; 
    color: #1e3554;
    z-index: 1; 
}

.card-avatar, .ac-logo-circle {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid #1e3554; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    z-index: 2; 
    background-color: white; 
}
.card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ac-logo-circle {
    background-color: #2575e5; 
}
.ac-logo {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
}
.quote-icon {
    font-size: 40px;
    color: #2575e5;
    position: absolute;
    top: 20px; 
    left: 20px;
    z-index: 1; 
}
/* --- Base Styles (Assuming your card width is 320px) --- */

/* The element that contains and clips the carousel content */
/* If you don't have a wrapper, apply these overflow/width properties to the direct parent of #testimonials-container */
#testimonials-wrapper {
    /* Example desktop width for 4 cards */
    max-width: 1370px; /* Adjust this based on your 4-card layout */
    overflow: hidden; /* CRITICAL: Hides the off-screen cards */
    margin: 0 auto; 
}

/* The element that holds all the cards in a single row */
#testimonials-container {
    display: flex;
    gap: 30px; /* Matches your JavaScript cardGap */
    transition: transform 0.5s ease-in-out; 
    width: fit-content; 
}

/* The individual card size */
.testimonial-card {
    min-width: 320px;
    width: 320px;
}

/* ------------------------------------------------------------------- */

/* --- Mobile Responsiveness Fix (For screens up to 768px wide) --- */

@media (max-width: 768px) {
    
    /* 1. Adjust Card Width for smaller phones */
    /* We make the card smaller so it fits nicely on a phone screen */
    .testimonial-card {
        /* Set card width to use up most of the screen width */
        width: 5vw; 
        min-width: 200px; /* Set a minimum size to prevent it from getting too small */
    }
    
    /* 2. Set the Viewport to EXACTLY the width of one card */
    #testimonials-wrapper {
        /* This sets the clipping window to the width of one card (85vw) 
           plus half of the gap (15px) to center the card on the viewport. */
        max-width: calc(85vw + 15px); 
        margin: 0 auto; /* Ensures the wrapper is centered */
    }
    
    /* 3. Center the entire carousel area */
    /* This is often necessary if the whole section is slightly misaligned */
    .testimonial-carousel-section { 
        padding: 0 10px; /* Example padding to prevent cards from touching screen edges */
    }
    
    /* 4. Center the pagination/navigation */
    .pagination-controls {
        /* Assuming your controls are in a separate container */
        width: calc(85vw + 15px); /* Match the wrapper width */
        margin: 20px auto; 
    }
}
.testimonial-nav {
    /* Container to hold the pagination controls */
    padding: 20px 0; /* Add vertical padding */
    margin-top: 20px;
    display: flex;
    justify-content: center; /* Center the controls */
    align-items: center;
    gap: 20px; /* Space between buttons and page info */
}

.testimonial-nav .nav-button {
    /* Styling for the < and > buttons */
    background: #274163; /* Darker blue background for the button */
    color: #fff; /* White color for the chevron (text) */
    border: none; /* No border for a cleaner look */
    padding: 10px 15px; /* Adjust padding for size */
    cursor: pointer;
    border-radius: 50%; /* Makes the button perfectly circular */
    font-size: 1.5em; /* Increase font size of the chevron */
    font-weight: bold;
    line-height: 1; /* Ensures chevron is vertically centered */
    width: 45px; /* Fixed width/height for perfect circle */
    height: 45px;
    display: flex; /* Use flex to ensure content is centered */
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.testimonial-nav .nav-button:hover {
    background-color: #385175; /* Slightly lighter blue on hover */
}

.testimonial-nav .nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #1a2a40; /* Slightly different disabled background */
}

.page-info {
    /* Styling for the "4 / 6" text */
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    min-width: 60px; /* Give it a little space so it doesn't jump */
    text-align: center;
}


#page5 {
    height: auto;
    padding: 0 0 0px 0; 
    background-color: #31486A; 
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    line-height: normal; 
    box-sizing: border-box;
}

.footer-container {
    width: 90%;
    max-width: 1200px; 
    margin: 0 auto;
}


.up {
    padding: 80px 0 60px 0; 
    width: 100%;
}
#page5 h3 {
    font-size: 2.5em; 
    font-weight: 700;
    margin-bottom: 10px;
}
#page5 p {
    font-size: 1.1em; 
    font-weight: 500;
    color: #ffffffcb;
    line-height: 1.6;
    margin: 0 auto 20px auto; 
    width: auto; 
}
.contact-btn {
    margin-top: 20px;
    width: 180px; 
    height: 50px; 
    border-radius: 5px; 
    border: none;
    background-color: #e66509; 
    color: #fff;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}
.contact-btn:hover {
    background-color: #c46b27;
}


.down {
    display: flex;
    justify-content: space-evenly; 
    align-items: center; 
    padding: 40px 0; 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
    width: 100%;
    text-align: center;
}

.down-col {

    width: 250px; 
    padding: 0 10px;
}

.logo-col {
    display: flex;
    align-items: flex-start;
    text-align: left; 
}
.ac-icon {
    width: 60px;
    height: 60px;
    background-image: url('path/to/your/acro-companion-logo.svg'); 
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 15px;
}
.logo-col h5 {
    font-size: 1.3em;
    font-weight: 400; 
    color: #fff;
    line-height: 1.5;
    margin-top: -10px;
    white-space: pre-line; 
}
.logo-col h5 strong {
    font-weight: 700; 
}

.contact-col {
    text-align: left; 
}
#cap{
    font-size: 1.2em;
    color: #fff;
}

.contact-col p {
    font-size: 1em;
    font-weight: 400;
    color: #ffffffcb;
    line-height: 1.8; 
    margin: 0;
}

.social-col {
    text-align: right; 
}
.social-col a {
    color: #ffffffcb;
    font-size: 1.8em; 
    margin-left: 15px; 
    transition: color 0.3s, transform 0.3s, text-shadow 0.3s ease-out;
}
.social-col a:hover {
    color: #fff; 
    transform: scale(1.1);
    
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.7), 
        0 0 10px rgba(255, 255, 255, 0.5), 
        0 0 15px rgba(255, 255, 255, 0.3), 
        0 0 20px rgba(255, 255, 255, 0.1); 
}

.copyright {
    width: 100%;
    padding-top: 10px;
    font-size: 0.9em;
    background-color: #1010107f;
    color: #ffffff99;
    text-align: center;
}




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

    #page1 h1{
        font-size: 5vh;

    }


            /* Page 2 Responsive Section */

            .header-banner h2{
                font-size: 8vw;
                padding-left: 40px;
                text-align: start;
            }
            .header-banner p{
                font-size: 3vw;
                text-align: start;
                padding-left: 40px;
            }
            .card-container {
                height: auto;
                width:100vw;
                min-height: 400px;
                padding-right: 60px;
            }
            .card, .card.active { /* Reset stacking/tilt effect on small screens for better visibility */
                transform: none;
                z-index: auto;
            }
            .card.active {
                position: relative;
            }
            .card:not(.active) {
                display: none;
            }
            .card-title { font-size: 2.5em; text-align: center;   margin-bottom: 20px ; }
            .button-grid { gap: 10px; }
            .button-grid button { padding: 8px 15px; }
            .discipline-nav { flex-wrap: wrap; gap: 5px; padding: 5px;  margin-left: -50px;  }
            .discipline-nav>button{
                color: red;
                border-radius: 50%;
                background-color:transparent;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
                transition: 0.5s all ease-in-out;
                &:hover{
                    color: white;
                    background-color: #2ecc71;
                }
}
            .nav-button {  padding: 8px 10px; font-size: 0.7em;  }
            #textNav{
                font-size: 2vw;

            }

/* Page 3 Responsive Section */

            #page3{
                width: 100%;
                height: 130vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
            #page3>.left>ul{
                /* background-color: yellowgreen; */
                width: 90vw;
                /* line-height: 0vh; */
                display: flex;
                justify-items: center;
                align-items: center;
                text-align: center;
                flex-direction: column;
            }
            #page3>.left>ul>h2{
                margin-left: -30px;
                margin-top: -20px;
                font-size: 5.8vw;
                line-height: 5vh;
                padding-bottom: 4vh;
            }
            #page3>.left>ul>p{
                margin-right: 10px;
                text-align: start;
                padding: 10px 10px;
                font-size: 3vh;
            }
            #page3 .right{
     width: 25%;
     height: 70%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
}

#page3>.right>span{
     position: absolute;
     top: 1vw;
     left: -20vw;
     width: 250px;
     height: 250px;
     border-radius: 50%;
     background-color: transparent;
     border: 1px solid #10101071;
     z-index: 1;
}
/* #page3>.right>span:nth-child(1){
     position: absolute;
} */
#page3>.right>span:nth-child(2){
     position: absolute;
     top: 1vw;
     left: -22vw;
     background-color: transparent;
     border: 1px solid #10101071;
     z-index: 2;
}
#page3>.right>span:nth-child(3){
    width: 250px;
    height: 250px;
    position: absolute;
    top: 2.2vw;
    left: -21vw;
    background-image: url("https://www.acro-companion.com/assets/pics/home_page_images/big-image-circle-1000.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 3;

    /* Animation */
    animation: floatZoom 6s ease-in-out infinite;
}

#page3>.right>span:nth-child(4){
    position: absolute;
    width: 180px;
    height: 180px;
    top: 24vw;
    left: 4vw;
    background-image:
    url("https://www.acro-companion.com/assets/pics/home_page_images/small-image-circle-600.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 4;
    animation: floatZoom 8s ease-in-out infinite;
}

/* Keyframes for smooth floating + zooming */
@keyframes floatZoom {
  0%   { transform: scale(1) translateY(0); }
  50%  { transform: scale(1.05) translateY(-10px); }
  100% { transform: scale(1) translateY(0); }
}   

/* page4 Responsive Section */

        h2.main-heading {
            font-size: 6vw;
            font-weight: 600;
            margin-top: -30px;
            margin-bottom: 50px;
            line-height: 1.2;
            color: #ffffff96;
        }
        .testimonials-section{
            padding-top: 0px;
        }
        
        /* #page5 Responsive Section */

}