* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: 'Roboto', sans-serif;
}

/* ADD THIS FOR SMOOTH SCROLLING */
html {
    scroll-behavior: smooth;
}

h1 {
    font-size: 30px; 
    font-weight: 800; 
}

h2 {
    font-size: 28px;
    font-weight: 800;
    text-align: center; 
    margin-bottom: 20px;
}

h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.4;
    padding: 10px 0;
}

/* --- Header & Navigation --- */
.header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(33, 33, 33, 0.7), rgba(33, 33, 33, 0.7)), url(1.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}

nav {
    display: flex;
    padding: 0 5% 20px;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: rgb(251, 251, 251);
    font-size: 28px;
    font-family: Arial, sans-serif;
}

.logo-img {
    width: 180px; /* Adjust this number to make your logo bigger or smaller */
    height: auto;
    display: block; 
    margin-top: 0; 
}

/* Mobile Side Menu */
.nav-links {
    position: fixed; 
    background: rgba(0, 0, 0, 0.95);
    height: 100vh;
    width: 200px;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 10;
    transition: right 0.5s ease;
    padding-top: 60px;
}

.nav-links ul li {
    list-style: none;
    display: block; 
    margin: 25px;
}

.nav-links ul li a {
    color: rgb(251, 251, 251);
    text-decoration: none;
    font-size: 16px;
    transition: 0.4s ease-in-out;
}

.nav-links ul li a:hover {
    color: rgb(240, 2, 2);
}

/* Hamburger & Close Icons */
nav .fa {
    display: block;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.nav-links .fa-times {
    position: absolute;
    top: 20px;
    left: 20px;
}

/* --- Hero Text & Buttons --- */
.text-box {
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.text-box p {
    margin: 15px 0 30px;
    font-size: 14px;
    line-height: 1.5;
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    background-color: #e60303;
    border-radius: 25px;
    padding: 15px 30px;
    text-align: center;
    transition: 0.3s ease;
    border: none;
}

.hero-btn:hover {
    background-color: #ff3333;
    color: #fff;
}

/* --- Layout Rows (Mobile Default = Stacked Column) --- */
.row {
    display: flex;
    flex-direction: column; 
    gap: 20px;
    margin-top: 5%;
}

/* --- Intro Blocks (Shared for Benefits and About) --- */
.intro-block {
    text-align: center;
    margin-bottom: 60px;
}

.intro-block p {
    font-size: 18px; 
    color: #555;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto; 
    padding: 0 15px; /* Keeps text from touching screen edges on mobile */
}

/* --- Course / Benefits Section --- */
.course {
    width: 90%;
    margin: auto;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

.course-col {
    background: #0000003d;
    border-radius: 10px;
    padding: 20px 12px;
    text-align: left;
}

.course-col img {
    width: 100%;
    border-radius: 10px;
}

/* --- Description / About Section --- */
.description {
    width: 100%;
    background-color: #f0f0f0;
    padding: 60px 5%;
}

.description-row {
    display: flex;
    flex-direction: column; 
    text-align: center;
    margin-bottom: 50px;
    gap: 20px;
}

.desc-text h3 {
    font-size: 26px; 
    color: #000;
    margin-bottom: 10px;
}

.desc-text p {
    font-size: 18px; 
    color: #555;
    line-height: 1.6;
}

.desc-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* CSS for the Main Page Mini Gallery */
        .mini-gallery-section {
            width: 80%;
            margin: 60px auto;
            text-align: center;
        }

        .gallery-preview-container {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 40px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .gallery-item {
            flex-basis: 31%; /* Creates a neat 3-column row */
            border-radius: 10px;
            overflow: hidden;
            display: block;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }

        /* Hover effect: Zoom image slightly and lift the card */
        .gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(230, 3, 3, 0.4);
        }

        .gallery-item:hover img {
            transform: scale(1.08);
        }

        .gallery-btn-container {
            margin-top: 20px;
        }

        /* Mobile responsiveness */
        @media(max-width: 768px) {
            .gallery-item {
                flex-basis: 100%;
                margin-bottom: 20px;
            }
        }

 /* =========================================
   1. ZIG-ZAG CONTENT SECTION (Image & Text)
   ========================================= */
.zig-zag-section {
    padding: 80px 5%;
    background-color: #111;
    color: #fff;
    overflow: hidden;
}

.zig-zag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 80px;
}

/* This class reverses the flex direction to create the zig-zag */
.zig-zag-row.reverse {
    flex-direction: row-reverse; 
}

.zig-zag-img {
    flex-basis: 50%;
}

.zig-zag-img img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(230, 3, 3, 0.15); /* Subtle red gym glow */
    display: block;
    object-fit: cover;
}

.zig-zag-text {
    flex-basis: 50%;
}

.zig-zag-text h3 {
    color: #e60303; /* Gym red accent */
    font-size: 32px;
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
}

.zig-zag-text p {
    font-size: 17px;
    line-height: 1.7;
    color: #ccc;
    font-family: 'Roboto', sans-serif;
}

/* =========================================
   2. STAGGERED "ZIG-ZAG" PHOTO GALLERY GRID
   ========================================= */
.gallery-grid-section {
    padding: 80px 5%;
    background-color: #111;
    text-align: center;
}

.gallery-grid-section h2 {
    color: #fff;
    margin-bottom: 60px;
    font-size: 36px;
    font-family: 'Roboto', sans-serif;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; /* Controls spacing between columns and rows */
    align-items: start;
    padding-bottom: 25px; 
}

.grid-item {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    aspect-ratio: 1 / 1; /* Forces all images to the same uniform shape so they never overlap */
}

/* Use margin-top instead of transform to prevent bleeding into the next row */
.grid-item:nth-child(even) {
    margin-top: 50px; 
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Hover zoom effect */
.grid-item:hover img {
    transform: scale(1.1);
}

/* =========================================
   3. SCROLL REVEAL ANIMATIONS
   ========================================= */
.reveal-item {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

/* Because we used margin-top for the zig-zag, the reveal animation is now much simpler */
.reveal-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   4. MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 800px) {
    .zig-zag-row, 
    .zig-zag-row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        margin-bottom: 60px;
    }
    
    /* Remove the staggering margin on mobile so the grid stays neat */
    .grid-item:nth-child(even) {
        margin-top: 0;
    }
}

        /* --- PARALLAX PARALLEL SCROLL SECTION --- */
        .parallax-banner {
            /* Replace with your actual background image */
            background-image: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=1470&auto=format&fit=crop'); 
            min-height: 400px; 
            background-attachment: fixed; /* This creates the parallel scroll effect */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 50px;
            box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.6); /* Dark overlay */
        }

        .parallax-banner h2 {
            color: #fff;
            font-family: 'Roboto', sans-serif;
            font-size: 48px;
            text-transform: uppercase;
            letter-spacing: 3px;
            border-bottom: 3px solid #e60303;
            padding-bottom: 10px;
            text-align: center;
        }

        /* --- IMAGE GRID WITH SCROLL REVEAL --- */
        .gallery-grid-section {
            padding: 80px 20px;
            max-width: 1200px;
            margin: auto;
        }

        .gallery-grid-section h2 {
            text-align: center;
            color: #fff;
            font-family: 'Roboto', sans-serif;
            font-size: 36px;
            margin-bottom: 50px;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .grid-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            
            /* Initial state for Scroll-into-view animation */
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* Class added by JavaScript when scrolled into view */
        .grid-item.show {
            opacity: 1;
            transform: translateY(0);
        }

        .grid-item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

        .grid-item:hover img {
            transform: scale(1.1);
        }

        /* --- MOBILE RESPONSIVENESS --- */
        @media(max-width: 768px) {
            /* Stack the zig-zag rows vertically on small screens */
            .zig-zag-row, .zig-zag-row.reverse {
                flex-direction: column;
                gap: 20px;
                text-align: center;
                margin-bottom: 60px;
            }
            .zig-zag-img img {
                height: 300px;
            }
            .zig-zag-text h3 {
                font-size: 28px;
            }
            
            /* Disable parallax fixed effect on mobile for better performance/support */
            .parallax-banner { 
                min-height: 300px; 
                background-attachment: scroll; 
            }
            .parallax-banner h2 { 
                font-size: 32px; 
            }
        }

/* --- Form & Contact Section --- */
.personal-information {
    width: 90%;
    margin: auto;
    padding: 50px 0;
}

.form-col {
    background-color: #333;
    color: #fff;
    border-radius: 6px;
    padding: 30px 15px;
    text-align: center;
}

.form-col h2 {
    font-size: 28px;
    color: #fff;
    margin-bottom: 15px;
}

.form-col p {
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 1.5;
}

.registration-form h3 {
    margin-bottom: 15px;
}

.registration-form input {
    width: 100%; 
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    border: none;
    font-size: 16px;
}

.sub-col {
    color: white !important;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    margin-top: 15px;
}

/* =========================================
   CONTACT & LOCATION STYLES
   ========================================= */
.contact-details {
    text-align: left; /* Aligns the address text to the left for better reading */
}

.contact-info p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.4;
}

.contact-info i {
    color: #e60303; /* Brand red color for icons */
    margin-right: 10px;
    font-size: 18px;
}
/* Update form-col layout for side-by-side on desktop */
.personal-information .form-col {
    flex-basis: 48%;
}

/* =========================================
   IMAGE LOGO STYLING
   ========================================= */
.logo-img {
    max-height: 125px; /* Adjust this number to make your logo bigger or smaller */
    width: auto;      /* Keeps the image proportions correct */
    display: flex;   /* Removes extra space below the image */
}

/* Horizontal Slider Dots */
.carousel-dots {
    position: absolute;
    bottom: 25px; /* Pushes the dots to the bottom of the image */
    left: 50%;
    transform: translateX(-50%); /* Centers the dots perfectly */
    display: flex;
    gap: 15px; /* Space between dots */
    z-index: 15;
}

.carousel-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4); /* Transparent white */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Hover and Active states for dots */
.carousel-dot.active, 
.carousel-dot:hover {
    background-color: #e60303; /* Brand red */
    transform: scale(1.3); /* Slightly enlarges the active dot */
}

/* =========================================
   VERTICAL SLIDER SECTION
   ========================================= */
.vertical-slider-section {
    width: 100%;
    background-color: #222; /* Dark background to contrast with the light sections */
    color: #fff;
    padding: 60px 5%;
    text-align: center;
}

.vertical-slider-section .intro-block h2 {
    color: #fff;
}

.vertical-slider-section .intro-block p {
    color: #ccc;
}

.slider-container {
    width: 90%;
    max-width: 800px;
    height: 200px; /* Fixed height for the visible area */
    margin: 0 auto;
    overflow: hidden; /* Hides the slides outside the container */
    position: relative;
    background: #333;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.slider-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.6s ease-in-out; /* Smooth sliding animation */
}

.slide {
    height: 200px; /* Must match the container's height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    box-sizing: border-box;
}

.slide .quote {
    font-size: 18px;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #e60303; /* Brand red color */
}

.slide h4 {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

/* =========================================
   VERTICAL DOT NAVIGATION
   ========================================= */
html {
    scroll-behavior: smooth; /* Enables smooth scrolling when a dot is clicked */
}

.dot-nav {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000; /* Keeps it on top of all other elements */
}

.dot-nav .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Hover and Active states */
.dot-nav .dot:hover,
.dot-nav .dot.active {
    background-color: #e60303; /* Your brand's red color */
    transform: scale(1.3);
}

/* Tooltip labels on hover */
.dot-nav .dot::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.dot-nav .dot:hover::after {
    opacity: 1;
}

/* =========================================
   FOOTER SECTION
   ========================================= */
.footer {
    background-color: #111; /* Very dark background to separate it from the main content */
    color: #fff;
    padding: 60px 5% 20px;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: #e60303; /* Brand red */
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-col p {
    font-size: 15px;
    line-height: 1.6;
    color: #bbb;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #bbb;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: #e60303; /* Turns red on hover */
}

/* Social Icons */
.social-links a {
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: #333;
    margin: 0 5px;
    text-align: center;
    line-height: 40px; /* Vertically centers the icon */
    border-radius: 50%; /* Makes them perfect circles */
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background-color: #e60303;
    color: #fff;
    transform: translateY(-4px); /* Slight jump effect on hover */
}

/* Copyright Section */
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 20px;
}

.footer-bottom p {
    font-size: 14px;
    color: #777;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .carousel-slide {
        height: 350px;
    }
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}
/* =========================================
   FOOTER RESPONSIVE (DESKTOP)
   ========================================= */
@media (min-width: 768px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left; /* Aligns text left on larger screens */
    }
    
    .footer-col {
        flex-basis: 30%; /* Divides the footer into 3 equal columns */
    }
}

/* Ensure spacing between map and form on mobile */
@media (max-width: 767px) {
    .contact-col {
        margin-bottom: 50px;
    }
}

/* Hide on very small screens to save space */
@media (max-width: 600px) {
    .dot-nav {
        display: none;
    }
}

/* Responsive adjustment for mobile */
@media (max-width: 767px) {
    .slider-container, .slide {
        height: 250px; /* Give more height for text wrapping on small screens */
    }
}

/* =========================================
   DESKTOP & TABLET ALIGNMENT
   ========================================= */
@media (min-width: 768px) {

    /* Typography Scales Up */
    h1 { font-size: 45px; }
    h2 { font-size: 38px; }
    
    .text-box h1 { font-size: 62px; }
    .text-box p { font-size: 16px; }

    /* Header Nav un-collapses */
    nav .fa { display: none; }

    .nav-links {
        position: static; 
        background: transparent; 
        height: auto;
        width: auto;
        padding-top: 0;
        flex: 1;
        text-align: right;
    }

    .nav-links ul li {
        display: inline-block; 
        margin: 0;
        padding: 8px 12px;
    }

    /* Rows become horizontal */
    .row {
        flex-direction: row;
        justify-content: space-between;
    }

    /* Shared Intro block scaling */
    .intro-block p {
        font-size: 20px; 
        padding: 0;
    }

    /* Course columns sit side-by-side */
    .course {
        width: 80%;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .course-col {
        flex-basis: 31%; 
    }

    /* Alternating layout activates */
    .description {
        padding: 80px 10%;
    }
    
    .description-row {
        flex-direction: row; 
        align-items: center;
        text-align: left;
        margin-bottom: 80px;
    }
    .description-row:nth-child(even) {
        flex-direction: row-reverse; 
    }
    .desc-text, .desc-img {
        flex-basis: 45%;
    }
    
    .desc-text h3 {
        text-align: left;
        font-size: 32px;
    }
    
    .desc-text p {
        font-size: 20px; 
    }

    /* Form scales out */
    .personal-information {
        width: 80%;
    }
    .form-col {
        padding: 40px;
        flex-basis: 48%;
    }
    .form-col h2 {
        font-size: 35px;
    }
    .registration-form input {
        width: 80%;
        max-width: 400px;
        margin: 10px auto; 
        display: block;
    }
    .sub-col {
        width: auto;
        min-width: 200px;
    }
}