/* ===============================
   MAIN WRAPPER
==================================*/
.content-wrapper {
    width: 100%;
    padding: 20px 0;
    background: #f5f5f5;
}

.slider-wrapper-main {
    position: relative;
    width: 90%;
    margin: auto;
    overflow: visible;   /* FIX → allows arrows & image to show fully */
}

/* ===============================
   SLIDES
==================================*/
.slide-panel {
    display: none;
    width: 100%;
    transition: opacity 0.5s ease-in-out;
}

.active-slide {
    display: block;
}

/* ===============================
   ACTIVITY SECTION
==================================*/
.activity-section {
    margin-bottom: 40px;
}

.activity-box {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 320px;
    overflow: hidden;
    border-radius: 6px;
}

/* ===============================
   TEXT AREA
==================================*/
.activity-text {
    flex: 1;
    padding: 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.activity-heading {
    font-size: 32px;
    margin-bottom: 15px;
    font-weight: 700;
}

/* ===============================
   IMAGE AREA
==================================*/
.activity-image {
    flex: 1;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;   /* FIX ensures it is never collapsed */
}

/* ===============================
   ARROW BUTTONS (OUTSIDE)
==================================*/
.nav-arrow {
    position: absolute;
    top: 35%;
    background: transparent;   /* ✅ NO background */
    color: black;
    border: none;
    padding: 0;                /* ✅ remove button padding background */
    font-size: 78px;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 50;
}


/* LEFT ARROW */
.arrow-left {
    left: -60px;                     /* outside container */
}

/* RIGHT ARROW */
.arrow-right {
    right: -60px;
}
@media (max-width: 768px) {
    .nav-arrow {
        font-size: 48px;
		top: 40%;
    }

    .arrow-left {
        left: -5px;
    }

    .arrow-right {
        right: -5px;
    }
}
/* ===============================
   RESPONSIVE (TABLET)
==================================*/
@media (max-width: 991px) {

    .activity-box {
        flex-direction: column;
        min-height: auto;
    }

    .activity-image {
        width: 100%;
        height: 260px !important; /* FIX: image visible */
        display: block;
    }

    .activity-text {
        padding: 25px;
    }

    .activity-heading {
        font-size: 26px;
    }

    /* Adjust arrow outside distance */
    .arrow-left { left: -40px; }
    .arrow-right { right: -20px; }
}

/* ===============================
   RESPONSIVE (MOBILE)
==================================*/
@media (max-width: 768px) {

    .activity-box {
        flex-direction: column;
        width: 100%;
    }

    .activity-image {
        width: 100%;
        height: 240px !important;
        display: block !important;
        background-size: cover;
        background-position: center;
    }

    .activity-text {
        padding: 20px;
    }

    /* Arrows slightly closer */
    .arrow-left { left: -15px; }
    .arrow-right { right: -15px; }
}

/* ===============================
   SMALL MOBILE (<= 600)
==================================*/
@media (max-width: 600px) {

    .activity-image {
        height: 200px !important;
    }

    .activity-heading {
        font-size: 22px;
    }

    .activity-text p {
        font-size: 15px;
        line-height: 1.6;
    }

    .arrow-left { left: -10px; }
    .arrow-right { right: -10px; }
}

/* ===============================
   PREVIOUS PAGE BUTTON (bottom)
==================================*/
.prev-btn-wrapper {
    margin-top: 30px;
    text-align: left;
}

.prev-btn {
    width: 55px;
    height: 55px;
    background: #ffffff;
    color: maroon;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    font-size: 26px;
    transition: all 0.3s ease;
}

.prev-btn:hover {
    transform: translateX(-5px);
    background: #000;
    color: #fff;
}

.arrow-icon {
    font-weight: bold;
}
/* ===============================
   MOBILE VIEW – PREVIOUS BUTTON
==================================*/
@media (max-width: 768px) {

    .prev-btn-wrapper {
        margin-top: 15px;
        text-align: left;
        padding-left: 10px;
    }

    .prev-btn {
        width: 45px;          /* smaller size */
        height: 45px;
        font-size: 22px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    }
}

/* ===============================
   SMALL MOBILE (<= 480px)
==================================*/
@media (max-width: 480px) {

    .prev-btn-wrapper {
        padding-left: 8px;
    }

    .prev-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* SPORTS EXTRA CONTENT */

.sports-extra-content{
    width:90%;
    margin:60px auto;
    padding:30px;
    background:#f5f5f5;
    border-radius:10px;
}

.sports-info-box{
    margin-bottom:40px;
}

.sports-info-box h2,
.sports-note-box h2{
    color:#0d6b4d;
    font-size:30px;
    margin-bottom:20px;
    font-weight:700;
}

.sports-info-box ul{
    padding-left:25px;
}

.sports-info-box ul li{
    margin-bottom:12px;
    font-size:19px;
    line-height:1.7;
    color:#444;
}

.sports-note-box{
    background:#dff1ea;
    padding:25px;
    border-left:6px solid #0d6b4d;
    border-radius:6px;
}

.sports-note-box p{
    font-size:18px;
    line-height:1.8;
    color:#444;
}

/* MOBILE */

@media(max-width:768px){

    .sports-extra-content{
        width:95%;
        padding:20px;
    }

    .sports-info-box h2,
    .sports-note-box h2{
        font-size:24px;
    }

    .sports-info-box ul li,
    .sports-note-box p{
        font-size:16px;
    }
}