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

body, html {
    font-family: 'Arial', sans-serif;
    background-color: #111;
    color: #fff;
    scroll-behavior: smooth;
    margin-bottom: 20px;
}


/* --- FONT CHANGE 2: Noto Sans Armenian Override for the Armenian version --- */
/* Target the body and all contained elements when the HTML lang attribute is "hy" */
html[lang="hy"] body,
html[lang="hy"] a,
html[lang="hy"] nav .center-title,
html[lang="hy"] nav ul li a,
html[lang="hy"] .mobile-menu li a,
html[lang="hy"] .section p,
html[lang="hy"] .section ul {
    /* Apply Noto Sans Armenian for all key text elements */
    font-family: 'Noto Sans Armenian', sans-serif;
}

a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    padding: 5px 5px; /* Increased height */
    z-index: 1000;

    min-height: 60px; /* Forces consistent height across all pages */
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul.left-links,
nav ul.left-links-gallery {
    display: flex;          /* Ensure it behaves like a flex container */
    flex: 1;                /* Takes up 50% of the available space (matches right-links) */
    justify-content: flex-start; /* Aligns content to the left */
    align-items: center;    /* Vertically centers the text/images */

    margin: 0;
    padding: 0;
}

.right-links .language-link {
    display: flex;
}

/* Mute Link Styling */
#mute-link {
    display: flex;
    align-items: center;
    /* Top:8px, Right:12px (Moved Right), Bottom:8px, Left:0px (Closer to flags) */
    padding: 8px 12px 8px 8px;
}

.mute-icon-container {
    display: inline-block;
}

nav ul.right-links {
    flex: 1;
    justify-content: flex-end;
    gap: 5px; /* Keeps the language block and mute button close */
}

nav .center-title {
    font-family: 'Montserrat', sans-serif;
    position: absolute; /* Makes the title independent of links */
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: bolder;
    color: #fff;
    text-transform: none; /* Return letters to normal style */
}

nav ul li {
    list-style: none;
}

nav ul li a {
    display: inline-block;
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background 0.3s;
    text-transform: none; /* Return letters to normal style */
    font-size: 12px; /* Adjust font size to balance with taller nav */
}

nav ul.left-links li a:hover {
    transform: scale(1.1);
}

/* --- NEW Gallery Switcher Icon Styling (Replaces text on gallery pages) --- */
.gallery-switch-link {
    display: flex;
    align-items: center;
    /* Top:8px, Right:12px, Bottom:8px, Left:0px (Closer to flags) */
    padding: 8px 12px 8px 8px;
}

.gallery-switch-icon {
    width: 20px; /* Adjust size for visibility */
    height: 20px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.gallery-switch-link:hover .gallery-switch-icon {
    transform: scale(1.1);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: absolute; /* Use absolute to position below the burger menu */
    top: 35px; /* Adjust this to position it below the burger icon */
    left: 0; /* Align with the burger icon */
    width: 150px; /* Smaller width for the menu */
    background: rgba(0, 0, 0, 0.80); /* Black background with slight transparency */
    flex-direction: column;
    padding: 10px; /* Smaller padding */
    z-index: 1000; /* Ensure it appears above other elements */
    border-radius: 2px; /* Rounded edges for the menu */
    overflow-y: auto; /* Allow scrolling for overflow */
    opacity: 0; /* Initially invisible */
    transform: translateY(-20px); /* Position above the burger menu */
    transition: all 0.3s ease; /* Smooth transition for visibility */
}

/* Links inside the Mobile Menu */
.mobile-menu li {
    margin: 3px 0; /* Reduced space between links */
}

.mobile-menu li a {
    color: #fff; /* White text for links */
    font-size: 0.7rem; /* Smaller font size */
    text-decoration: none; /* Remove underline */
    padding: 1px 3px; /* Reduced padding */
    display: block; /* Block display for links */
    transition: background 0.3s ease; /* Smooth hover effect */
}

.mobile-menu li a:hover {
    background: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
}

/* Adjust Burger Menu */
.burger-menu {
    display: none; /* Hide by default */
    flex-direction: column;
    gap: 3px;
    left: 10px; /* Keep burger icon close to the edge */
    top: 15px; /* Align vertically */
    cursor: pointer;
    z-index: 1100; /* Ensure burger icon is above the menu */
}

.burger-menu span {
    display: block;
    width: 14px; /* Smaller burger icon width */
    height: 2px; /* Smaller height for lines */
    background: #fff; /* White color for lines */
    transition: all 0.3s ease;
}

/* Show Mobile Menu */
.mobile-menu.show {
    display: flex;
    opacity: 1; /* Make visible */
    transform: translateY(0); /* Slide down */
}

/* Slide-down Animation (optional) */
@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ajp-logo {
    width: 30px;
    height: auto;
    vertical-align: middle; /* Align the image vertically with the text */
}

.ajp-logo-mobile {
    width: 20px; /* Adjust the size of the image */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align the image vertically with the text */
    margin-right: 8px; /* Add some space between the image and the text */
}

.smoothcomp-logo {
    width: 100px; /* Adjust the size of the image */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align the image vertically with the text */
    /*margin-left: 25px; /* Add some space between the image and the text */
}

.smoothcomp-logo-mobile {
    width: 100px; /* Adjust the size of the image */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align the image vertically with the text */
    /*margin-left: 15px; /* Add some space between the image and the text */
}

/* --- SVG Icon Container Styling --- */
.mute-icon-container svg {
    /* Base styling for the injected SVG */
    display: block;
    width: 16px;
    height: 16px;
    vertical-align: top; /* Prevents base alignment issues */
}

/* --- Pulsing Animation --- */
.pulsing-link {
    color: white; /* Default color */
    font-weight: bold;
    text-decoration: none;
    animation: pulseColor 1.5s infinite; /* Pulsing animation */
}

/* Keyframes for pulsing the color to red (for TEXT)*/
@keyframes pulseColor {
    0% {
        color: white; /* Start with white */
    }
    50% {
        color: red; /* Pulse to red */
    }
    100% {
        color: white; /* Go back to white */
    }
}

/* When the link is clicked, stop pulsing */
.pulsing-link.clicked {
    animation: none; /* Stop animation */
    color: white; /* Ensure the final state is white */
}

/* Language switcher container */
.language-switcher {
    display: flex;
    align-items: center; /* aligns items vertically in the center */
    /* FIX: Tighten gap to 3px */
    gap: 3px;
    font-family: 'Arial', sans-serif !important;
}

/* FIX: Override default navigation link padding for the flags.
   Default is "8px 12px", which pushes flags apart and away from the mute icon.
   "5px 3px" keeps them compact and closer to the right. */
.language-switcher a {
    padding: 5px 3px !important;
}

/* Flag icons */
.language-switcher img.flag-icon {
    height: 16px;        /* adjust as needed to match nav height */
    width: 16px;         /* maintain correct aspect ratio */
    border-radius: 4px;  /* slightly rounded corners */
    display: block;
}

/* Active language highlight */
.language-switcher a.active img.flag-icon {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* Separator */
.language-switcher span.separator {
    margin: 0;
    line-height: 1; /* Ensures vertical alignment matches flags */
}


/* Intro Section */
.intro {
    height: 100vh; /* Full height of the viewport */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #000;
    z-index: 1;
    padding-top: 60px; /* Space for navbar */
    margin-bottom: 20px; /* Default spacing between video and next section */
}

/* Video inside Intro */
#intro-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the container */
    object-position: center center;
    z-index: 0; /* Set to 0 to avoid unintended overlapping */
}

/* Sections */
section,
#intro,
#about,
#achievements,
#gallery,
#events {
    scroll-margin-top: 60px; /* Matches your nav padding/height */
}

.section {
    margin: 30px auto;
    padding: 10px 0 20px;
    max-width: 1200px;
    background: #1b1b1b;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.section h2 {
    font-family: "Michroma", serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.4rem;
    text-align: center;
    color: #e50914;
    margin-bottom: 30px;
}

html[lang="hy"] .section h2 {
    /* Use Noto Sans Armenian for a clean, bold look */
    font-family: 'Noto Sans Armenian', sans-serif;
    /* You may want to increase the weight for a stronger impact like Michroma */
    font-weight: 500;
}

.section p, .section ul {
    font-size: 0.9rem;
    line-height: 1.8;
    text-align: justify;
    color: #ddd;
}

/* --- NEW CONTENT LINK STYLING --- */
.section p a {
    color: #fff; /* Bright red text */
    text-decoration: underline; /* Add underline for visibility */
    font-weight: Bold;  /* Ensure it stands out */
    transition: color 0.3s ease;
}

.section p a:hover {
    color: #e50914; /* White text on hover */
    text-decoration: none; /* Remove underline on hover */
}

/* Explicitly set the visited state for content links to match the default color */
.section p a:visited {
    color: #fff /* Force visited links to stay white */
}

.section ul li {
    margin-bottom: 10px;
}


/* Gallery Section*/
.gallery-box {
    width: 280px;
    height: 280px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    border: 3px solid #e50914;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);"
}

.gallery-box .overlay-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    z-index: 2;
    transition: background 0.3s ease, color 0.3s ease;
}

.gallery-box:hover .overlay-text {
    background: rgba(0, 0, 0, 0.8);
    color: #e50914;
}

.gallery-box .photo-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-box .photo-slider .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.gallery-box .photo-slider .slide.active {
    opacity: 1;
}

.lb-details {
    display: none !important;
}

/* noinspection CssInvalidPseudoSelector */
video::-webkit-media-controls {
    display: none; /* Hides the default video controls */
}


/* About Section Styles */
.about-content {
    display: grid;
    /* Two equal columns */
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    padding: 0 30px;

    /* This ensures the image column stretches to match the text column height */
    align-items: stretch;
}

.about-text {
    /* The text ALONE determines the section height now */
    height: auto;
}

.about-image-column {
    /* Critical: Set position relative so the absolute image inside stays here */
    position: relative;

    /* Critical: Width 100% of the grid cell */
    width: 100%;

    /* Since the image inside is absolute, this container effectively has 0 height
       of its own content. It only has height because the Grid 'stretches' it
       to match the text column. This is exactly what we want. */
}

.about-image {
    /* Take the image out of the flow so it doesn't push the height */
    position: absolute;
    top: 0;
    left: 0;

    /* Force it to fill the container exactly */
    width: 100%;
    height: 100%;

    /* Crop logic */
    object-fit: cover;

    /* Pins the bottom.
       Short text (English) -> Image gets short -> Top (black part) is cut.
       Tall text (Armenian) -> Image gets tall -> Top is revealed. */
    object-position: center;

    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}


#about a:hover {
    color: #e50914;
}


/* Achievements Section Styles */
.achievements-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; /* Ensures the image and listing are spaced evenly */
    gap: 20px;
    padding: 0 20px; /* Adds left and right padding */
    min-height: 400px; /* Minimum height for the section to avoid shifting */
}

.achievement-image-wrapper {
    flex: 1; /* This will ensure the image takes 50% of the space */
    flex-direction: column;
    vertical-align: center;
    gap: 40px;
    display: flex;
    justify-content: center; /* Center the image inside the wrapper */
    align-items: center;
}

.achievements-image {
    width: 100%;
    max-width: 400px; /* Adjust max-width of the image */
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
    align-self: center;
    object-fit: cover;
}

.achievements-mobile {
    flex: 1; /* Ensure the achievements listing takes 50% of the space */
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    padding-left: 20px; /* Add padding to the left of the list for better alignment */
    overflow: hidden; /* Prevent overflow and shifting */
}

.mobile-achievement {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 10px 2em 10px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #202020;
    color: #fff;
    cursor: pointer;
    position: relative;
    min-height: 10px;
    transition: height 0.3s ease; /* Smooth transition for height change */
    line-height: 1.5;
}

.mobile-achievement.active::after {
    content: "▲";
    font-size: 0.8rem;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.mobile-achievement::after {
    content: "▼";
    font-size: 0.8rem;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.mobile-achievement .achievement-title {
    font-weight: bold;
    font-size: 0.6rem;
}

.mobile-achievement.active .achievement-title {
    margin-bottom: 5px; /* Space between title and details */
}

.mobile-details p {
    font-size: 0.7rem;
}

/* Style for the details */
.mobile-details {
    display: none;
    font-size: 0.7rem; /* Smaller font size */
    padding: 10px 15px;
    background-color: rgba(51, 51, 51, 0.8); /* Smooth background */
    color: #ccc;
    border-radius: 0 0 5px 5px;
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.mobile-achievement.active::after {
    content: "▲"; /* Arrow points up when active */
}

.mobile-details.active {
    display: block;
}


/* Events Gallery */
.events-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-top: 20px; /* NEW: Adds space so the top badge doesn't hit the title */
}

.events-gallery a {
    display: flex;
    text-decoration: none;
    color: inherit;
    overflow: visible !important; /* NEW: Critical! Allows the badge to hang outside the box */
}


/* Event Box Container */
.event-box {
    width: 200px;
    min-height: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 3px solid #e50914;
    border-radius: 8px;
    background-color: #fff;
    padding: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow: visible !important; /* NEW: Critical! Ensures badge isn't cut off */
}

.event-box:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Event Images */
.event-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}


/* Add this to main.css */
.event-box.highlight {
    border-color: #ffd700; /* Gold border */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); /* Gold Glow */
    /*transform: scale(1.08); /* Slightly larger */
    z-index: 10; /* Ensure it sits on top */
    position: relative; /* NEW: Required for z-index to work */
}

/* Optional: Add a "HAPPENING NOW" badge */
.event-box.highlight::before {
    content: attr(data-badge); /* <--- key change: reads text from HTML */
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffd700;
    color: #000;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap; /* Ensures text doesn't wrap */
}


/* Event Title */
.event-title {
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-top: 5px;
    /* Allow title to take up available space before the date */
    flex-grow: 1;
}

/* --- NEW DATE STYLE --- */
.event-date {
    font-size: 0.85rem; /* Slightly smaller than title */
    color: #666; /* Grey color to distinguish from title */
    margin-top: 5px;
    font-weight: 600;
    text-align: center;
    padding-top: 5px;
}

.boxer {
    margin-bottom: 65px;
}

/* --- EVENTS CAROUSEL (Mobile Only) --- */

/* Wrapper handles relative positioning for the arrows */
.events-carousel-wrapper {
    position: relative;
    width: 100%;
}

#events h2 {
    margin-bottom: 40px !important;
}

/* Default Arrow Styling (Hidden on Desktop) */
.carousel-btn {
    display: none; /* Hidden on Desktop */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* Remove box/circle styling */
    background: none;
    border: none;

    /* Style the triangle */
    color: #e50914; /* Bright Red */
    font-size: 40px; /* Big and easy to hit */
    line-height: 1;
    cursor: pointer;

    /* Ensure it sits on top of everything */
    z-index: 200;

    /* Remove blue highlight on tap */
    -webkit-tap-highlight-color: transparent;
    user-select: none;

    /* Add a subtle drop shadow for visibility on white backgrounds */
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
}

/* FIX: Use positive numbers so they sit INSIDE the screen edges */
.prev-btn { left: 2px; }
.next-btn { right: 2px; }

/* Footer */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;

    text-align: center;
    padding: 10px;
    background-color: #333;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #ddd;
}

footer .mobile-disclaimer {
    margin: 0;
    line-height: 1.4;
}

footer .disclaimer {
    margin-top: 8px;
    font-size: 12px;
    color: #ddd;
}

footer .separator {
    margin: 0 6px;
}

/* --- YouTube Lazy Loader (Preserves iframe design) --- */
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-wrapper .yt-frame {
    position: absolute;
    inset: 0;

    border: 3px solid #e50914;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.video-wrapper .yt-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Play icon overlay --- */
.yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 14px;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    transition:
            background-color 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;
}

/* Hover state triggered from frame */
.video-wrapper .yt-frame:hover .yt-play {
    background-color: #fd0033; /* YouTube red */
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.45);
}

.yt-play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 18px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}


/* ---------------------------------------------------------------------------------- */
/* --- RESPONSIVE OVERRIDES --- */
/* ---------------------------------------------------------------------------------- */

/* Responsive Design (Show Burger Menu only on Mobile - Up to 1280px) */
@media (max-width: 1280px) {
    .burger-menu {
        display: flex; /* Show burger icon on smaller screens */
        padding: 10px;
    }

    nav ul {
        align-items: initial;
    }

    nav ul li a:hover {
        background: none; /* Remove background change on hover */
    }

    nav ul.left-links {
        display: none; /* Hide full-size nav links on mobile */
    }

    .mobile-menu li {
        text-align: left; /* Align menu links to the left */
    }

    .mute-icon-container { /* Ensure the container is displayed on mobile */
        display: inline-block;
        width: 16px; /* Explicit width */
        height: 16px; /* Explicit height */
        line-height: 0;
    }
    .mute-icon-container svg {
        width: 100%; /* Fill the container */
        height: 100%; /* Fill the container */
    }

    .language-switcher {
        gap: 3px !important;
    }

    .language-switcher span.separator {
        margin: 0 !important;
    }

    #mute-link {
        padding: 8px 6px 8px 0;
        height: 100%;
    }

    /* --- GALLERY SWITCHER FIX FOR MOBILE --- */

    .gallery-switch-link {
        /* Reduce padding around the icon on mobile */
        padding: 8px 6px 8px 0;
        /* Ensure the link container is centered vertically */
        height: 100%;
    }

    .gallery-switch-icon {
        /* Match flag icon size */
        width: 16px;
        height: 16px;
        /* Force vertical alignment to match the flags and sound icon */
        vertical-align: top;
        /* Remove transform transition on mobile for immediate alignment */
        transition: none;
    }

    .gallery-switch-link:hover .gallery-switch-icon {
        transform: none; /* Remove scaling on mobile hover */
    }
    /* --- END GALLERY SWITCHER FIX --- */

    /* Explicitly set the visited state for content links to match the default color */
    .section p a:visited {
        color: #fff /* Force visited links to stay white */
    }
}

/* Adjustments for smaller screens (Up to 768px) */
@media (max-width: 768px) {
    /* Intro Section */
    .intro {
        height: auto; /* Let content define height */
        padding-top: 60px; /* Space for navbar */
        margin-bottom: 30px; /* Add spacing between video and next section */
    }

    #intro-video {
        position: relative; /* Relative positioning avoids overflow issues */
        top: 0;
        width: 100%; /* Full width */
        height: auto; /* Maintain aspect ratio */
        max-height: 50vh; /* Limit max height */
        object-fit: cover;
        object-position: center center;
    }

    /* Sections */
    .section {
        margin: 20px auto;
        padding:20px;
    }

    .intro {
        margin-bottom: 15px
    }

    /* About Section ONIK ONIK ONIK*/
    .about-content {
        /* Switch back to stacking */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        /* Padding matches the section padding so text & image align */
        padding: 0;
    }

    .about-text {
        width: 100%;
        /* Optional: specific padding for text if needed, otherwise inherit */
        padding: 0 10px;
    }

    .about-image-column {
        /* Remove the 'grid stretch' logic */
        width: 100%;
        display: block; /* Just a standard block */
        position: static; /* Reset position */
        height: auto;

        /* Match the text padding so the image aligns perfectly with text edges */
        padding: 0 10px;
    }

    .about-image {
        /* Put image back into the flow */
        position: static;

        /* Allow natural height */
        height: 500px;

        /* CHANGED: Match the full width of the text container */
        width: 100%;
        max-width: 100%;

        /* Reset cropping for mobile so you see the whole photo */
        object-fit: cover;
        object-position: top 80%;
    }

    /* Achievements Section */
    .achievements-content {
        flex-direction: column;
        gap: 20px;
        padding: 0 10px; /* Adjust padding for smaller screens */
    }

    .achievement-image-wrapper {
        display: none; /* Hide image wrapper on mobile */
    }

    .achievements-mobile {
        width: 100%;
        padding-left: 0; /* Remove left padding on mobile */
    }

    /* Footer */
    body {
        margin: 1.6%;
    }

    .boxer {
        margin-bottom: 50px;
    }

    /* FIX: Reduce the gap between Title and Gallery */
    #events h2 {
        margin-bottom: -10px !important;
    }

    /* Show the Arrows */
    .carousel-btn {
        display: block;
        transition: opacity 0.3s ease; /* Smooth fade for hiding */
    }

    /* Class used by JS to hide buttons */
    .carousel-btn.hidden-btn {
        opacity: 0;
        pointer-events: none; /* Prevent clicking when invisible */
    }

    /* Carousel Container OnikOnik*/
    .events-gallery {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start !important;

        /* Enable Scrolling */
        overflow-x: auto;
        overflow-y: hidden;

        gap: 0;
        width: 100%;

        /* SNAP LOGIC */
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always; /* Forces it to stop on every card */

        /* REMOVED: scroll-behavior: smooth; <--- DELETE THIS LINE */

        -webkit-overflow-scrolling: touch;

        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }

    /* FIX 1: New rule to hide buttons while scrolling */
    .events-carousel-wrapper.is-scrolling .carousel-btn {
        opacity: 0 !important;
        pointer-events: none; /* Prevent clicks while hidden */
    }

    /* Hide Scrollbar (Standard) */
    .events-gallery::-webkit-scrollbar {
        display: none;
    }

    /* The Slide (The Link <a>) */
    .events-gallery a {
        min-width: 100%;
        flex: 0 0 100%;
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow: visible;
    }

    /* THE EVENT BOX (The Card) */
    .event-box {
        width: 260px !important;      /* Slightly wider */
        max-width: 260px !important;

        /* RESTORE VERTICAL LOOK: Increase height */
        height: auto;
        min-height: 320px;            /* Taller box */

        margin: 0 auto;
        position: relative;
        overflow: visible !important;
    }

    /* Taller Images for Mobile */
    .event-box img {
        height: 260px !important;     /* Taller image to match the box */
        object-fit: cover;
    }

    /* Reset positioning for the highlighted box */
    .event-box.highlight {
        transform: none !important;
        left: auto;
        top: auto;
    }



    footer {
        padding: 8px;
    }

    footer .mobile-disclaimer {
        font-size: 10px;
    }

    footer .disclaimer {
        margin-top: 6px;
    }
}


/* Adjustments for medium screens (tablets - 768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .intro {
        height: 80vh; /* Slightly smaller height for tablets */
        margin-bottom: 30px; /* Consistent spacing */
    }

    #intro-video {
        max-height: 80vh; /* Limit height proportionally */
    }
}