/* Common CSS */

html {
    scroll-behavior: smooth;
}

/* Scroll target offset for fixed header */
section[id],
div[id] {
    scroll-margin-top: 120px;
}

/* Adjust for mobile */
@media (max-width: 992px) {
    section[id],
    div[id] {
        scroll-margin-top: 85px;
    }
}

.cpl-container {
    @media(min-width: 1440px) {
        max-width: 1340px;
        margin: 0 auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* ============================================================
   CPL Landing Page – Header
   ============================================================ */

.cpl-header {
    background: #28106E;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    transition: background 0.3s ease;
}
.cpl-header-inner {
    display: flex;
    align-items: center;  
    height: 104px;
    padding: 0 15px;
    gap: 20px;
}

/* --- Logos --- */
.cpl-header-logos {
    display: flex;
    align-items: center;
    gap: 43px;
    flex-grow: 1;
}

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

.cpl-logo-barbados svg {
    width: 200px;
    height: 31px;
    display: block;
}

.cpl-logo-cpl {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.cpl-logo-cpl img {
    width: 144px;
    height: 46px;
    display: block;
    object-fit: contain;
}

/* --- Navigation --- */
.cpl-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cpl-nav-list {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cpl-nav-link {
    color: #fff;
    font-size: 16.78px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.cpl-nav-link:hover {
    opacity: 0.8;
    color: #FBEB1B;
}

/* --- Book Now Button --- */
.cpl-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 100px;
    background: #FBEB1B;
    color: #28106E;
    font-size: 16.78px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.cpl-book-btn:hover {
    color: #28106E;
    background: #f0df10;
}

/* --- Hamburger (hidden on desktop) --- */
.cpl-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.cpl-hamburger-bar {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cpl-hamburger--active .cpl-hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.cpl-hamburger--active .cpl-hamburger-bar:nth-child(2) {
    opacity: 0;
}

.cpl-hamburger--active .cpl-hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Language Dropdown --- */
.dropdown {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#dLabel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

#dLabel:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #FBEB1B;
}

#dLabel:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: #FBEB1B;
}

/* Language Flag Icon */
.flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
}

.flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Language Name */
.lng-name {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Dropdown Arrow */
.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #fff;
    transition: transform 0.3s ease;
    margin-left: 4px;
}

#dLabel[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    list-style: none;
    margin: 0;
    right: 0;
    padding: 8px 0;
}
/* Dropdown List Items */
.dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu li {
    margin: 0;
    padding: 0;
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #28106E;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.dropdown-menu li a:hover {
    background: #f5f5f5;
    padding-left: 20px;
}

.dropdown-menu li a:active {
    background: #efefef;
}

/* Flag in Dropdown */
.dropdown-menu .flag {
    width: 24px;
    height: 18px;
}

/* ============================================================
   Responsive – Tablet (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .cpl-logo-barbados img {
        width: 160px;
        height: 25px;
    }

    .cpl-logo-cpl img {
        width: 116px;
        height: 37px;
    }

    .cpl-header-logos {
        gap: 24px;
    }

    .cpl-nav-link,
    .cpl-book-btn {
        font-size: 14px;
    }

    .cpl-nav-list {
        gap: 16px;
    }

    /* Dropdown Responsive */
    .flag {
        width: 18px;
        height: 14px;
    }

    .dropdown-menu {
        min-width: 160px;
    }

    .dropdown-menu li a {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ============================================================
   Responsive – Mobile (max 768px)
   ============================================================ */
@media (max-width: 992px) {
    .cpl-header-inner {
        height: 72px;
        position: relative;
    }

    .cpl-hamburger {
        display: flex;
    }

    .cpl-nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: #28106E;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 16px 20px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .cpl-nav.cpl-nav--open {
        display: flex;
    }

    .cpl-nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        margin-bottom: 16px;
    }

    .cpl-nav-list li {
        width: 100%;
    }

    .cpl-nav-link {
        display: block;
        padding: 14px 0;
        font-size: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
    }

    .cpl-nav-list li:last-child .cpl-nav-link {
        border-bottom: none;
    }

    .cpl-book-btn {
        width: 100%;
        padding: 12px 15px;
        font-size: 16px;
        justify-content: center;
        text-align: center;
    }

    .cpl-logo-barbados svg {
        width: 130px;
        height: 20px;
    }

    .cpl-logo-cpl img {
        width: 100px;
        height: 32px;
    }

    .cpl-header-logos {
        gap: 16px;
    }
}

/* ============================================================
   Responsive – Small mobile (max 480px)
   ============================================================ */
@media (max-width: 480px) {
    .cpl-logo-barbados svg {
        width: 110px;
        height: 17px;
    }

    .cpl-logo-cpl img {
        width: 85px;
        height: 27px;
    }

    .cpl-header-logos {
        gap: 12px;
    }
}

/* ============================================================
   Hero – Responsive
   ============================================================ */
@media (max-width: 768px) {
    .cpl-hero {
        padding-top: 72px;
    }
}

@media (max-width: 480px) {
    .cpl-hero {
        padding-top: 72px;
        min-height: 100svh;
    }
}

/* ============================================================
   CPL Landing Page – Hero
   ============================================================ */

.cpl-hero {
    position: relative;
    /* height: 100vh; */
    padding-top: 104px;
    overflow: hidden;
    box-sizing: border-box;
}

.cpl-hero-video {
    position: static;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile portrait video — hidden by default */
.cpl-hero-mobile-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
@media (max-width:1440px){
     .cpl-hero{
        height: auto;
     }
    .cpl-hero-video { position: static; object-fit:contain; height: auto; }
}
@media (max-width:991px){
    .cpl-hero{
        padding-top: 72px;
        height: auto;
    }
}
/* Portrait mobile: swap videos, let height follow video */
@media (max-width: 767px) and (orientation: portrait) {
    .cpl-hero {
        height: auto;
        overflow: visible;
        padding-top: 0;
        min-height: auto;
    }
    .cpl-hero-video {
        display: none;
    }
    .cpl-hero-mobile-video {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        object-fit: unset;
        display: block;
        padding-top: 72px;
    }
}

.cpl-hero-overlay {
    position: absolute;
    inset: 0;
    /* background: rgba(40, 16, 110, 0.8); */
    z-index: 1;
}

/* ============================================================
   CPL Landing Page – Intro Section
   ============================================================ */

.cpl-intro {
    background: linear-gradient(123deg, #F67A00 0.11%, #9700FD 100.29%);
    overflow: hidden;
}

.cpl-intro-inner {
    display: flex;
    align-items: center;
}

/* Left content column */
.cpl-intro-content {
    flex: 0 0 52%;
    max-width: 662px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.cpl-intro-tagline {
    color: #fff;
    font-family: 'bebas_neueregular';
    font-size: 58px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.cpl-intro-wordmark {
    display: block;
    width: 100%;
}

.cpl-intro-wordmark svg {
    width: 100%;
    height: auto;
    display: block;
}

.cpl-intro-divider {
    width: 100%;
    height: 2px;
    background: #fff;
}

.cpl-intro-event-title {
    color: #fff;
    font-family: 'bebas_neueregular';
    font-size: 70px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.cpl-intro-event-title sup {
    font-size: 0.5em;
    vertical-align: super;
}

.cpl-intro-description {
    color: #fff;
    font-family: 'Metropolis';
    font-size: 32.74px;
    font-weight: 500;
    line-height: 38px;
    margin: 0;
}

/* Right visual column */
.cpl-intro-visual {
    flex: 0 0 51%;
    position: relative;
    right: -30px;
}

.cpl-intro-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   Intro Section – Responsive
   ============================================================ */
@media (min-width: 1920px) {
    .cpl-intro-visual {
        flex: 0 0 60%;
    }
}
@media (max-width: 1440px) {
    .cpl-intro-tagline {
        font-size: 50px;
    }

    .cpl-intro-event-title {
        font-size: 60px;
    }

    .cpl-intro-description {
        font-size: 24px;
        line-height: 30px;
    }
}
@media (max-width: 1320px) {
    .cpl-intro-visual {
        flex: 0 0 45%;
    }
}
@media (max-width: 1200px) {
    .cpl-intro-tagline {
        font-size: 42px;
    }

    .cpl-intro-event-title {
        font-size: 52px;
    }
}

@media (max-width: 1024px) {
    .cpl-intro-inner {
        min-height: auto;
    }

    .cpl-intro-content {
        flex: 0 0 55%;
        gap: 14px;
    }

    .cpl-intro-visual {
        flex: 0 0 44%;
    }

    .cpl-intro-tagline {
        font-size: 38px;
    }

    .cpl-intro-event-title {
        font-size: 46px;
    }

    .cpl-intro-description {
        font-size: 22px;
        line-height: 28px;
    }
}
@media (max-width: 992px) {
    .cpl-intro-inner {
        flex-direction: column;
    }
    .cpl-intro-visual{
        position: unset;
    }
}

@media (max-width: 768px) {

    .cpl-intro-content {
        flex: none;
        max-width: 100%;
        gap: 14px;
        order: 1;
    }

    .cpl-intro-visual {
        flex: none;
        order: 2;
        height: 420px;
        width: 100%;
    }

    .cpl-intro-tagline {
        font-size: 34px;
    }

    .cpl-intro-event-title {
        font-size: 40px;
    }

    .cpl-intro-description {
        font-size: 18px;
        line-height: 24px;
    }
}

@media (max-width: 480px) {
    .cpl-intro-content {
        gap: 12px;
    }

    .cpl-intro-visual {
        height: 320px;
    }

    .cpl-intro-tagline {
        font-size: 28px;
    }

    .cpl-intro-event-title {
        font-size: 32px;
    }

    .cpl-intro-description {
        font-size: 16px;
        line-height: 22px;
    }
}

/* ============================================================
   CPL Landing Page – Experience Hub Section
   ============================================================ */

.cpl-experience-hub {
    background: #F5F5F5;
}

.experience-hub-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.experience-hub-heading {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 26px;
}

.experience-hub-heading::before{
    content: '';
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg, #9700FD 0%, #9700FD 100%);
}
.experience-hub-heading::after {
    content: '';
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg, #9700FD -200%, #F67A00 100%);
}

.experience-hub-title {
    background: linear-gradient(90deg, #F67A00 0%, #9700FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Brume';
    font-size: 75px;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

.experience-hub-cards {
    display: flex;
    align-items: center;
    gap: 29px;
    width: 100%;
}

.experience-card {
    position: relative;
    flex: 1;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
}

.experience-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.experience-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 49.96%, #000 119.91%);
    z-index: 1;
}

.experience-card-content {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 0 10px;
    z-index: 2;
}

.experience-card-title {
    color: #fff;
    font-family: 'Metropolis';
    font-size: 30.62px;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 0;
}

.experience-card-subtitle {
    color: #fff;
    font-family: 'Metropolis';
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 0;
}

/* ============================================================
   Experience Hub – Responsive
   ============================================================ */

@media (max-width: 1440px) {
    .cpl-experience-hub {
        padding: 54px 60px 80px;
    }

    .experience-hub-title {
        font-size: 65px;
    }
}

@media (max-width: 1200px) {
    .cpl-experience-hub {
        padding: 48px 40px 72px;
    }

    .experience-hub-title {
        font-size: 55px;
    }

    .experience-card {
        height: 400px;
    }

    .experience-card-title {
        font-size: 24px;
    }

    .experience-card-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 1024px) {
    .cpl-experience-hub {
        padding: 44px 32px 64px;
    }

    .experience-hub-cards {
        gap: 20px;
    }

    .experience-card-title {
        font-size: 20px;
    }

    .experience-card-subtitle {
        font-size: 14px;
    }

    .experience-card {
        height: 360px;
    }
}

@media (max-width: 768px) {

    .experience-hub-heading {
        gap: 16px;
    }

    .experience-hub-title {
        font-size: 42px;
    }

    .experience-hub-cards {
        flex-direction: column;
        gap: 20px;
    }

    .experience-card-title {
        font-size: 28px;
    }

    .experience-card-subtitle {
        font-size: 16px;
    }

    .experience-card {
        width: 100%;
        height: 360px;
    }
}

@media (max-width: 480px) {

    .experience-hub-heading {
        gap: 12px;
    }

    .experience-hub-title {
        font-size: 32px;
    }

    .experience-card {
        height: 300px;
    }
}

/* ============================================================
   CPL Landing Page – Match Schedule Section
   ============================================================ */

.cpl-schedule {
    background: linear-gradient(135deg, #4BCDE0 0%, #5E7CD8 40%, #9535D4 100%);
}

.schedule-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.schedule-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.schedule-title {
    color: #FFF;
    font-family: 'Brume';
    font-size: 82.46px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
}

.schedule-subtitle {    
    color: #FFF;
    font-size: 34.09px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 0;
    width: 100%;
    margin-top: 60px;
}

.schedule-row-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.schedule-match {
    display: flex;
    align-items: center;
    padding: 24px 0 18px;
    position: relative;
}
.schedule-match::after {
    content: "";
    height: 1px;
    width: 100%;
    background: #FFF;
    position: absolute;
    bottom: 34px;
}

.schedule-match-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 65%;
}

.schedule-logo-wrapper{
    display: flex;
    flex: 1;
    margin-top: -92px;
}

.schedule-team-logo {
    width: 100%;
    object-fit: contain;
}

.schedule-match-date {
    display: flex;
    gap: 10px;
}

.schedule-date-num {
    color: #FFF;
    font-size: 69.87px;
    font-weight: 800;
    line-height: 1;
}

.schedule-date-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 4px;
}

.schedule-date-day {
    color: #FFF;
    font-size: 13.8px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.schedule-date-month {
    color: #FFF;
    font-size: 25.99px;
    font-weight: 800;
    line-height: 1;
}

.schedule-date-time {
    color: #FFF;
    font-size: 21.54px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    gap: 5px;
}
.schedule-custom-date-time{
    color: #FFF;
    font-size: 12.493px;
    font-weight: 500;
    line-height: 1;
}

.schedule-league {
    font-size: 23.98px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 45px;
    background: #fff;
    text-transform: uppercase;
    margin-top: 25px;
    z-index: 1;
    position: relative;
}
.schedule-league::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 1px;
    background-color: #FFFFFF;
}

.schedule-league--wcpl {
    color: #8F4097;
}

.schedule-league--mcpl {
    color: #3A8FD4;
}

.schedule-buy-btn-wrapper{
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.schedule-buy-btn {
    min-width: 237px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 999px;
    background: linear-gradient(90deg, #00AEEF 0%, #3BD8F7 100%);
    color: #FFF;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.schedule-buy-btn:hover {
    background: #fff;
    color: #8F4097;
    border-color: #fff;
}

/* ============================================================
   Match Schedule – Responsive
   ============================================================ */

@media (max-width: 1440px) {
    .schedule-date-num {
        font-size: 60px;
    }
    .schedule-subtitle{
        font-size: 28px;
    }
    .schedule-grid {
        gap: 20px 0;
    }
    .schedule-logo-wrapper{
        margin-top: -65px;
    }
}

@media (max-width: 1200px) {
    .schedule-title {
        font-size: 60px;
    }
    .schedule-subtitle{
        font-size: 24px;
    }

    .schedule-date-num {
        font-size: 52px;
    }

    .schedule-date-month {
        font-size: 14px;
    }

    .schedule-league {
        font-size: 14px;
        margin-top: 20px;
    }
    .schedule-league::before {
        height: 38px;
    }
    .schedule-match::after{
        bottom: 30px;
    }
}

@media (max-width: 1024px) {
    .schedule-title {
        font-size: 54px;
    }
    .schedule-subtitle{
        font-size: 22px;
    }

    .schedule-match {
        padding: 18px 0 14px;
    }

    .schedule-date-num {
        font-size: 44px;
    }

    .schedule-date-month {
        font-size: 12px;
    }

    .schedule-date-time {
        font-size: 11px;
    }

    .schedule-league {
        font-size: 12px;
    }
    .schedule-league::before {
        height: 35px;
    }
    .schedule-match::after{
        bottom: 24px;
    }
}

@media (max-width: 992px) {
    .schedule-logo-wrapper{
        margin-top: -35px;
    }
    .schedule-grid {
        margin-top: 40px;
    }
}
@media (max-width: 768px) {
    .schedule-title {
        font-size: 48px;
    }

    .schedule-subtitle {
        font-size: 17px;
    }

    .schedule-grid {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 30px;
    }

    .schedule-date-num {
        font-size: 52px;
    }

    .schedule-buy-btn {
        padding: 13px 48px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .schedule-title {
        font-size: 38px;
    }

    .schedule-subtitle {
        font-size: 15px;
    }

    .schedule-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 0;
    }

    .schedule-match {
        padding: 16px 0 14px;
    }

    .schedule-match-body {
        gap: 6px;
    }

    .schedule-date-num {
        font-size: 40px;
    }

    .schedule-date-month {
        font-size: 12px;
    }

    .schedule-league {
        font-size: 12px;
        padding: 5px 30px;
    }
    .schedule-league::before{
        height: 32px;
    }

    .schedule-buy-btn {
        padding: 12px 36px;
        font-size: 14px;
        letter-spacing: 1.5px;
    }
}

/* ============================================================
   CPL Landing Page – Social Feed Section
   ============================================================ */

.cpl-social-feed {
    background: linear-gradient(126deg, #39D8FB 0.11%, #9700FD 100.29%);
}

.social-feed-title {
    color: #FBEB1B;
    font-family: 'Brume';
    font-size: 82px;
    font-weight: 900;
    line-height: normal;
    text-align: center;
    margin: 0;
}

/* ============================================================
   Social Feed – Responsive
   ============================================================ */

@media (max-width: 1440px) {
    .social-feed-title {
        font-size: 72px;
    }
}

@media (max-width: 1200px) {
    .social-feed-title {
        font-size: 64px;
    }
}

@media (max-width: 1024px) {
    .social-feed-title {
        font-size: 58px;
    }
}

@media (max-width: 768px) {
    .social-feed-title {
        font-size: 48px;
    }
}

@media (max-width: 480px) {
    .social-feed-title {
        font-size: 38px;
    }
}

/* ============================================================
   CPL Landing Page – Offers Slider Section
   ============================================================ */

.cpl-offers {
    background: linear-gradient(123deg, #F67A00 0.11%, #9700FD 100.29%);
}

.offers-hub-heading {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 20px;
}

.offers-hub-heading::before{
    content: '';
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg, #9700FD 0%, #9700FD 100%);
}
.offers-hub-heading::after {
    content: '';
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg, #9700FD 0%, #9700FD 100%);
}

.offers-hub-title {
    background: linear-gradient(90deg, #F67A00 0%, #9700FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Brume';
    font-size: 75px;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}
.offers-hub-heading.white .offers-hub-title{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;
    background-clip: text;
}
.offers-hub-heading.white::before,.offers-hub-heading.white::after{
    background: linear-gradient(90deg, #fff 0%, #fff 100%);
}
.offers-slider {
    display: flex;
    gap: 38px;
}

.offers-card {
    background: #4B018C;
    border-radius: 13px;
    min-height: 220px;
    min-width: 0;
    flex: 1;
}

/* Slick active state — override flex for slider */
.offers-slider.slick-initialized {
    display: block;
}

.offers-slider.slick-initialized .offers-card {
    flex: none;
}

/* Equal-height cards: stretch all slides to tallest card */
.offers-slider.slick-initialized .slick-track {
    display: flex;
    align-items: stretch;
}

.offers-slider.slick-initialized .slick-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}

.offers-slider.slick-initialized .slick-slide > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.offers-slider.slick-initialized .slick-slide {
    padding: 0 10px;
}

.offers-slider.slick-initialized .slick-list {
    margin: 0 -10px;
}

/* Slick arrow overrides */
.offers-slider .slick-prev,
.offers-slider .slick-next {
    width: 44px;
    height: 44px;
    z-index: 10;
}

.offers-slider .slick-prev {
    left: -52px;
}

.offers-slider .slick-next {
    right: -52px;
}

.offers-slider .slick-prev::before,
.offers-slider .slick-next::before {
    font-size: 44px;
    color: #4B018C;
    opacity: 1;
}
.offers-slider .slick-dots{
    bottom: -50px;
}
.offers-slider .slick-dots li{
    margin:0;  
}
.offers-slider  .slick-dots li button:before{
    font-size: 12px;
    color: grey;
    opacity: 1;
}
.offers-slider .slick-dots li.slick-active button:before{
    color: #F67A00;
}
/* ============================================================
   Offers Slider – Responsive
   ============================================================ */

@media (max-width: 1440px) {
    .cpl-offers {
        padding: 56px 60px;
    }
    .offers-hub-title {
        font-size: 65px;
    }
}

@media (max-width: 1200px) {
    .cpl-offers {
        padding: 48px 48px;
    }

    .offers-hub-title {
        font-size: 55px;
    }
}

@media (max-width: 1024px) {
    .cpl-offers {
        padding: 44px 40px;
    }
}

@media (max-width: 768px) {
    .cpl-offers {
        padding: 40px 24px;
    }

    .offers-hub-title {
        font-size: 42px;
    }
}

@media (max-width: 576px) {
    .cpl-offers {
        padding: 32px 16px;
    }


    .offers-slider .slick-prev {
        left: -24px;
    }

    .offers-slider .slick-next {
        right: -24px;
    }
}
@media (max-width: 480px) {
    .offers-hub-title {
        font-size: 32px;
    }
}


/* Footer CSS */
.cpl-footer {
    background: #28106E;
    width: 100%;
    z-index: 100;
    transition: background 0.3s ease;
}
.cpl-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 104px;
    padding: 0 15px;
}

/* --- Logos --- */
.cpl-footer-logos {
    display: flex;
    align-items: center;
    gap: 43px;
    flex-shrink: 0;
}

/* --- Navigation --- */
.cpl-nav-footer {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cpl-nav-footer-list {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cpl-nav-footer-link {
    color: #fff;
    font-size: 16.78px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.cpl-nav-footer-link:hover {
    opacity: 0.8;
    color: #FBEB1B;
}

/* ============================================================
   Responsive – Tablet (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    

    .cpl-nav-footer-link,
    .cpl-book-btn {
        font-size: 14px;
    }

    .cpl-nav-footer-list {
        gap: 16px;
    }
}

/* ============================================================
   Responsive – Mobile (max 768px)
   ============================================================ */
@media (max-width: 992px) {
    .cpl-footer-inner {
        padding: 10px 0;
        height: unset;
        flex-direction: column;
        gap: 12px;
    }

    .cpl-nav-footer.cpl-nav--open {
        display: flex;
    }

    .cpl-nav-footer-list li {
        width: 100%;
    }

    .cpl-nav-footer-link {
        display: block;
        padding: 14px 0;
        font-size: 16px;
        width: 100%;
    }
    .cpl-nav-footer{
        gap: 8px;
        flex-direction: column;
    }
    .cpl-nav-footer .cpl-book-btn{
        width: unset;
    }
}

/* ============================================================
   Responsive – Small mobile (max 480px)
   ============================================================ */
@media (max-width: 480px) {
    .cpl-footer-logos {
        gap: 12px;
    }
    .cpl-nav-footer-list {
        gap: 10px;
    }
    .cpl-nav-footer-link {
        font-size: 13px;
    }
}
/* Footer CSS */



/* ============================================================
   CPL Landing Page – Countdown Section
   ============================================================ */

.booking-section{
    background: linear-gradient(154deg, #F67A00 0.11%, #9700FD 100.29%);
    overflow: hidden;
}

/* ============================================================
   CPL Landing Page – Enter Now Section
   ============================================================ */

.cpl-enter-now {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    /*max-width: 690px;*/
    width: 100%;
    padding-left: calc((100vw - 1320px) / 2)  ;
}

.cpl-enter-now-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.cpl-enter-now-heading {
    align-self: stretch;
    color: #fff;
    font-family: 'bebas_neueregular';
    font-size: 50px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.cpl-enter-now-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.cpl-enter-now-highlight {
    align-self: stretch;
    color: #FBEB1B;
    font-family: 'Brume';
    font-size: 120px;
    font-weight: 900;
    line-height: 127px;
    margin: 0;
}

.cpl-enter-now-subheading {
    align-self: stretch;
    color: #fff;
    font-family: 'Brume';
    font-size: 82px;
    font-weight: 900;
    line-height: 82px;
    margin: 0;
}

.cpl-enter-now-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    align-self: stretch;
}

.cpl-enter-now-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.cpl-enter-now-label {
    align-self: stretch;
    color: #fff;
    font-family: 'bebas_neueregular';
    font-size: 42px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.cpl-enter-now-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.cpl-enter-now-description {
    align-self: stretch;
    color: #fff;
    font-family: 'Metropolis';
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.cpl-enter-now-caption {
    align-self: stretch;
    color: #fff;
    font-family: 'Metropolis';
    font-size: 42px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.cpl-enter-now-btn {
    min-width: 0;
    width: 237px;
}
.cpl-enternow-image{
    margin-top: -60px;
}
/* ============================================================
   Enter Now – Responsive
   ============================================================ */
@media(max-width:1400px){
    .cpl-enter-now {
        padding-left: calc((100vw - 1120px) / 2);
    }
}
@media(max-width:1200px){
    .cpl-enter-now {
        padding-left: calc((100vw - 991px) / 2);
    }
}
@media(max-width:1140px){
    .cpl-enter-now {
        padding-left: calc((100vw - 950px) / 2 + 15px);
    }
}
@media (max-width: 992px) {
    .cpl-enter-now-heading {
        font-size: 40px;
    }

    .cpl-enter-now-highlight {
        font-size: 90px;
        line-height: 96px;
    }

    .cpl-enter-now-subheading {
        font-size: 62px;
        line-height: 62px;
    }

    .cpl-enter-now-label {
        font-size: 34px;
    }

    .cpl-enter-now-description {
        font-size: 20px;
    }

    .cpl-enter-now-caption {
        font-size: 32px;
    }
    .cpl-enter-now {
        padding-left: calc((100vw - 720px) / 2 + 15px);
    }
    .cpl-enternow-image{
        margin-top: 0px;
    }
    
}
@media (max-width: 767px) {
    .cpl-enter-now {
        max-width: 100%;
        padding: 0 15px;
    }
}
@media (max-width: 576px) {
    .cpl-enter-now {
        max-width: 100%;
    }

    .cpl-enter-now-heading {
        font-size: 30px;
    }

    .cpl-enter-now-highlight {
        font-size: 64px;
        line-height: 68px;
    }

    .cpl-enter-now-subheading {
        font-size: 44px;
        line-height: 44px;
    }

    .cpl-enter-now-label {
        font-size: 26px;
    }

    .cpl-enter-now-description {
        font-size: 18px;
    }

    .cpl-enter-now-caption {
        font-size: 24px;
    }

    .cpl-enter-now-btn {
        width: 100%;
    }
}

.countdown-inner {
    display: flex;
    align-items: center;
    border: 2px solid #fff;
    border-radius: 30px;
    padding: 38px 54px 38px 55px;
}

.countdown-info {
    flex: 0 0 409px;
    max-width: 409px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.countdown-deadline {
    color: #FBEB1B;
    font-family: 'Brume';
    font-size: 54px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
}

.countdown-draw-date {
    color: #FFF;
    font-family: "bebas_neueregular";
    font-size: 48.7px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    text-transform: uppercase;
}

.countdown-timer {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    justify-content: flex-end;
}

.countdown-unit {
    width: 176px;
    height: 208px;
    background: #560E73;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.countdown-num {
    color: #fff;
    font-family: 'bebas_neueregular';
    font-size: 145px;
    font-weight: 500;
    line-height: 1;
    display: block;
    text-align: center;
}

.countdown-label {
    color: #fff;
    font-family: 'Metropolis';
    font-size: 25px;
    font-weight: 500;
    line-height: normal;
    display: block;
    text-align: center;
    margin-top: 6px;
}

.countdown-separator {
    flex-shrink: 0;
    display: block;
}

/* ============================================================
   Countdown – Responsive
   ============================================================ */

@media (max-width: 1440px) {

    .countdown-info{
        flex: 0 0 350px;
        max-width: 350px;
    }
    .countdown-deadline{
        font-size: 48px;
    }
    .countdown-draw-date{
        font-size: 40px;
    }
    .countdown-unit {
        width: 152px;
        height: 180px;
    }

    .countdown-num {
        font-size: 120px;
    }

    .countdown-label {
        font-size: 21px;
    }
}

@media (max-width: 1200px) {

    .countdown-inner {
        padding: 28px;
    }

    .countdown-info {
        flex: 0 0 260px;
        max-width: 260px;
    }

    .countdown-deadline {
        font-size: 36px;
    }

    .countdown-draw-date {
        font-size: 32px;
    }

    .countdown-unit {
        width: 130px;
        height: 158px;
    }

    .countdown-num {
        font-size: 100px;
    }

    .countdown-label {
        font-size: 18px;
    }
}

@media (max-width: 1024px) {

    .countdown-inner {
        flex-direction: column;
        align-items: center;
        padding: 28px 24px;
        gap: 28px;
    }

    .countdown-info {
        flex: none;
        max-width: 100%;
    }

    .countdown-timer {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {

    .countdown-deadline {
        font-size: 36px;
    }

    .countdown-draw-date {
        font-size: 30px;
    }

    .countdown-unit {
        width: 110px;
        height: 136px;
    }

    .countdown-num {
        font-size: 80px;
    }

    .countdown-label {
        font-size: 15px;
        margin-top: 4px;
    }

    .countdown-separator {
        height: 50px;
        width: 11px;
    }
}

@media (max-width: 767px) {

    .countdown-inner {
        padding: 20px 16px;
    }

    .countdown-deadline {
        font-size: 30px;
    }

    .countdown-draw-date {
        font-size: 24px;
    }

    .countdown-timer {
        gap: 4px;
    }

    .countdown-unit {
        width: calc(25% - 12px);
        height: 110px;
        border-radius: 8px;
    }

    .countdown-num {
        font-size: 52px;
    }

    .countdown-label {
        font-size: 11px;
    }

    .countdown-separator {
        width: 8px;
        height: 36px;
    }
}

/* ============================================================
   CPL Landing Page – Entry Form Section
   ============================================================ */

.entry-form-card {
    background: #560E73;
    border-radius: 30px;
    padding: 30px 40px;
}

.entry-form-header {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 32px;
}

.entry-form-title {
    color: #FBEB1B;
    font-family: 'bebas_neueregular';
    font-size: 75px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    flex-shrink: 0;
}

.entry-form-description {
    color: #fff;
    font-size: 21px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    max-width: 490px;
}

.entry-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
}

.entry-form-field--full {
    grid-column: 1 / -1;
}

.entry-form-label {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.entry-form-input {
    display: block;
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 10px;
    padding: 20px 24px;
    font-size: 18px;
    font-weight: 500;
    color: #560E73;
}

.entry-form-input::placeholder {
    color: #B08FC0;
    opacity: 1;
}

.entry-form-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(251, 235, 27, 0.5);
    color: #560E73;
}

.entry-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='12' viewBox='0 0 23 12' fill='none'%3E%3Cpath d='M22.97 0L11.49 11.48L0 0' stroke='%23560E73' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    background-size: 16px 9px;
    padding-right: 50px;
}

.entry-form-input.is-invalid,
.was-validated .entry-form-input:invalid {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.6);
}

.entry-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 30px;
}

.entry-form-check {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 0;
    min-height: 0;
}
.entry-form-checkbox,.entry-form-check-label{
    cursor: pointer;
}

.entry-form-checkbox {
    width: 25px;
    height: 25px;
    margin: 0;
    flex-shrink: 0;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 0;
}

.entry-form-checkbox:checked {
    background-color: #00AEEF;
    border-color: #00AEEF;
}

.entry-form-checkbox:focus {
    box-shadow: 0 0 0 3px rgba(251, 235, 27, 0.5);
    border-color: #fff;
}

.entry-form-check-label {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    padding-left: 40px;
}

.entry-form-terms-link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.entry-form-terms-link:hover {
    color: #FBEB1B;
}

.entry-form-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #00AEEF 0%, #3BD8F7 100%);
    color: #fff;
    font-family: 'Metropolis', -apple-system, Roboto, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.entry-form-submit-btn:hover {
    opacity: 0.9;
}

.entry-form.cpl-d-none {
    display: none;
}
.entry-form-header.cpl-d-none {
    display: none;
}

.entry-form-thankyou {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 40px 20px;
}

.entry-form-thankyou.cpl-d-flex {
    display: flex;
}

.entry-form-thankyou-title {
    color: #FBEB1B;
    font-family: 'bebas_neueregular';
    font-size: 60px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.entry-form-thankyou-text {
    color: #fff;
    font-family: 'Metropolis', -apple-system, Roboto, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    max-width: 560px;
    margin: 0;
}

.entry-form-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 44px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: 'Metropolis', -apple-system, Roboto, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.entry-form-back-btn:hover {
    background: #fff;
    color: #560E73;
}

/* Terms and Conditions Modal */
.cpl-terms-modal .modal-content {
    border-radius: 20px;
    border: none;
    overflow: hidden;
}

.cpl-terms-modal .modal-header {
    background: #560E73;
    border-bottom: none;
    padding: 24px 32px;
}

.cpl-terms-modal .modal-title {
    color: #FBEB1B;
    font-family: 'bebas_neueregular', sans-serif;
    font-size: 32px;
    letter-spacing: 0.5px;
}

.cpl-terms-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.cpl-terms-modal .modal-body {
    padding: 28px 32px;
    color: #333;
    font-family: 'Metropolis', -apple-system, Roboto, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

.cpl-terms-modal .modal-footer {
    border-top: none;
    padding: 0 32px 28px;
}

.cpl-modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #00AEEF 0%, #3BD8F7 100%);
    color: #fff;
    font-family: 'Metropolis', -apple-system, Roboto, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

/* ============================================================
   Entry Form – Responsive
   ============================================================ */

@media (max-width: 1440px) {

    .entry-form-title {
        font-size: 64px;
    }
}

@media (max-width: 1200px) {

    .entry-form-card {
        padding: 30px;
    }

    .entry-form-title {
        font-size: 54px;
    }

    .entry-form-description {
        font-size: 18px;
    }

    .entry-form-input {
        padding: 17px 20px;
        font-size: 16px;
    }
}

@media (max-width: 1024px) {

    .entry-form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .entry-form-description {
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    .entry-form-card {
        padding: 20px;
    }

    .entry-form-title {
        font-size: 44px;
    }

    .entry-form-description {
        font-size: 16px;
    }

    .entry-form-grid {
        grid-template-columns: 1fr;
    }

    .entry-form-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .entry-form-submit-btn {
        width: 100%;
    }

    .entry-form-thankyou-title {
        font-size: 44px;
    }

    .entry-form-thankyou-text {
        font-size: 17px;
    }
}

@media (max-width: 480px) {

    .entry-form-title {
        font-size: 34px;
    }

    .entry-form-input {
        padding: 14px 16px;
        font-size: 15px;
    }

    .entry-form-label {
        font-size: 12px;
    }

    .entry-form-check-label {
        font-size: 15px;
    }

    .entry-form-thankyou-title {
        font-size: 34px;
    }
}

.itineraries-card{
    background-color: #4B018C;
    min-height: 280px;
    border-radius: 20px;
}

/* ============================================================
   CPL Landing Page – Offers Section
   ============================================================ */

.cpl-offers {
    background: linear-gradient(123deg, #F67A00 0.11%, #9700FD 100.29%);
    padding: 80px 0;
}

.offers-hub-title {
    background: linear-gradient(90deg, #F67A00 0%, #9700FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Brume';
    font-size: 75px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}
.offers-hub-title.white{
    background: none;
    -webkit-text-fill-color: #fff;
}


.offers-hub-subtitle {
    color: #666;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

/* Offers Slider Container */
.offers-slider {
    width: 100%;
    position: relative;
}

/* Itinerary Slider Container */
.itinerary-slider {
    width: 100%;
    position: relative;
}

/* Individual Offer Card */
.offers-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: calc(100% - 0px); /* Adjust height based on padding */
    padding: 20px;
}

/* Offers Card Image */
.offers-card-image {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

/* Offers Card Content */
.offers-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    height: calc(100% - 290px); /* Adjust height based on image height */
    padding-top: 20px;

}

.offers-card-title {
    color: #28106E;
    font-family: 'Metropolis';
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.offers-card-description {
    color: #666;
    font-family: 'Metropolis';
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.offers-sub-title {
    border:1px solid #1E88E5;
    color: #220c61;
    font-family: 'Metropolis';
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.offers-sub-title span{
    font-weight: 700;
    color: #1E88E5;
}
.offers-sub-title::before {
    content: '★';
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #1E88E5;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 18px;
}
.offers-card-description-text {
    color: #220c61;
    font-weight: bold;
}
.offers-card-description ul {
    margin: 12px 0 0;
    padding-left: 0;
    list-style: none;
}

.offers-card-description ul li {
    color: #666;
    font-family: 'Metropolis';
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 8px;
    padding-left: 28px;
    position: relative;
}

.offers-card-description ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ffffff;
    background: #1E88E5;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 10px;
}
/* Pin button to bottom of card */
.offers-card-content .schedule-buy-btn {
    min-width: auto;
    margin-top: auto;
}
.offers-card-content .schedule-buy-btn:hover{
    background: linear-gradient(90deg, #F67A00 0%, #9700FD 100%);
    color: #fff;
}
/* Slick Slider Customization */
.slick-slide {
    padding: 0 15px;
}

.slick-slide.slick-slide-slide {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.slick-slide.slick-active {
    opacity: 1;
}

/* Slick Dots */
.slick-dots {
    bottom: -50px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    position: absolute !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.slick-dots li {
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.slick-dots li button:before {
    font-size: 0 !important;
    content: '' !important;
}

.slick-dots li button {
    font-size: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #ddd !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    display: block !important;
}

.slick-dots li.slick-active button {
    background: linear-gradient(90deg, #F67A00 0%, #9700FD 100%) !important;
}
.cpl-offers .slick-dots li.slick-active button {
    background: #ffff !important;
}
/* ============================================================
   Offers Section – Responsive
   ============================================================ */

@media (max-width: 1440px) {
    .cpl-offers {
        padding: 70px 0;
    }

    .offers-hub-title {
        font-size: 65px;
    }

    .offers-card-title {
        font-size: 22px;
    }
}

@media (max-width: 1200px) {
    .cpl-offers {
        padding: 60px 0;
    }

    .offers-hub-heading {
        margin-bottom: 40px;
    }

    .offers-hub-title {
        font-size: 55px;
    }

    .offers-hub-subtitle {
        font-size: 18px;
    }

    .offers-card-content {
        gap: 14px;
    }

    .offers-card-title {
        font-size: 20px;
    }

    .offers-card-description {
        font-size: 14px;
    }

}

@media (max-width: 1024px) {
    .cpl-offers {
        padding: 50px 0;
    }

    .offers-hub-title {
        font-size: 45px;
    }

}

@media (max-width: 768px) {
    /* Adaptive height on mobile — reset equal-height flex */
    .offers-slider.slick-initialized .slick-track {
        display: block;
    }

    .offers-slider.slick-initialized .slick-slide {
        height: auto;
        display: block;
    }

    .offers-slider.slick-initialized .slick-slide > div {
        display: block;
    }

    .cpl-offers {
        padding: 40px 0;
    }

    .offers-hub-heading {
        margin-bottom: 35px;
    }

    .offers-hub-title {
        font-size: 38px;
    }

    .offers-hub-subtitle {
        font-size: 16px;
    }

    .offers-card-title {
        font-size: 18px;
    }

    .offers-card-description {
        font-size: 13px;
    }
    .offers-card-btn {
        padding: 10px 20px;
        font-size: 12px;
    }

}

@media (max-width: 480px) {
    .cpl-offers {
        padding: 30px 0;
    }

    .offers-hub-title {
        font-size: 32px;
    }

    .offers-hub-subtitle {
        font-size: 14px;
    }

    .offers-card {
        border-radius: 12px;
    }
    .offers-card-content {
        gap: 12px;
    }

    .offers-card-title {
        font-size: 16px;
    }

    .offers-card-description {
        font-size: 12px;
    }

    .offers-card-btn {
        padding: 10px 16px;
        font-size: 11px;
    }
}