/* =========================================================
   SAMRAMBA KERALAM 2030
   RC2.3 — DATA-DRIVEN CAROUSEL
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.rc2-carousel-section {

    width: 100%;

    padding:
        30px 0 20px;

    background:
        #F8FAFC;

    overflow: hidden;

}


.rc2-carousel-container {

    width:
        min(
            calc(100% - 40px),
            var(--rc2-container)
        );

    margin:
        0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.rc2-carousel-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;

}


.rc2-carousel-heading {

    max-width: 650px;

}


.rc2-carousel-eyebrow {

    display: inline-block;

    margin-bottom: 8px;

    color:
        var(--rc2-green);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .08em;

}


.rc2-carousel-heading h2 {

    margin: 0;

    color:
        var(--rc2-navy);

    font-family:
        Poppins,
        sans-serif;

    font-size:30px;

    line-height: 1.15;

    letter-spacing:
        -.025em;

}


.rc2-carousel-heading p {

    margin:
        9px 0 0;

    color:
        var(--rc2-text-soft);

    font-size: 15px;

    line-height: 1.55;

}


/* =========================================================
   NAVIGATION BUTTONS
========================================================= */

.rc2-carousel-controls {

    display: flex;

    gap: 8px;

    flex-shrink: 0;

}


.rc2-carousel-control {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--rc2-border);

    border-radius: 12px;

    background:
        white;

    color:
        var(--rc2-navy);

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;

}


.rc2-carousel-control:hover {

    transform:
        translateY(-2px);

    background:
        var(--rc2-navy);

    color:
        white;

}


.rc2-carousel-control svg {

    width: 18px;
    height: 18px;

}


/* =========================================================
   VIEWPORT
========================================================= */

.rc2-carousel {

    position: relative;

    width: 100%;

}


.rc2-carousel-track {

    display: flex;

    gap: 18px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scroll-snap-type:
        x mandatory;

    padding:
        5px 3px 18px;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
        touch;

}


.rc2-carousel-track::-webkit-scrollbar {

    display: none;

}


/* =========================================================
   CARD
========================================================= */

.rc2-carousel-card {

    flex:
        0 0 285px;

    scroll-snap-align:
        start;

    background:
        white;

    border:
        1px solid var(--rc2-border);

    border-radius:
        20px;

    overflow:
        hidden;

    box-shadow:
        0 10px 30px
        rgba(15,23,42,.06);

    transition:
        transform .45s ease,
        box-shadow .25s ease,
        opacity .45s ease;

}

/* =========================================================
   RC2.3 — TWO-WAY HORIZONTAL ROTATION
   DESKTOP + MOBILE
========================================================= */

.rc2-carousel-card.rc2-carousel-center {

    opacity:
        1;

    transform:
        translateX(0);

    z-index:
        3;

}


.rc2-carousel-card.rc2-carousel-left {

    opacity:
        0;

    transform:
        translateX(-100%);

    z-index:
        1;

}


.rc2-carousel-card.rc2-carousel-right {

    opacity:
        0;

    transform:
        translateX(100%);

    z-index:
        1;

}


.rc2-carousel-card.rc2-carousel-hidden {

    opacity:
        0;

    transform:
        translateX(0);

    z-index:
        0;

}

/* =========================================
   DESKTOP CARD HOVER POLISH
========================================= */

@media (hover: hover) and (pointer: fine) {

    .rc2-carousel-card:hover {

        transform:
            translateY(-4px);

        box-shadow:
            0 14px 30px rgba(0, 0, 0, .12);

    }

}

.rc2-carousel-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 40px
        rgba(15,23,42,.10);

}


/* =========================================================
   IMAGE
========================================================= */

.rc2-carousel-image-wrap {

    position: relative;

    width: 100%;

    aspect-ratio:
        0.9;

    overflow: hidden;

    height:
        auto;

    background:
    white;

    isolation: isolate;

    border-radius:
        18px 18px 0 0;

    display: flex;

    align-items: center;

    justify-content: center;

}


.rc2-carousel-image {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius:
    0;

box-shadow:
    none;

    opacity:
        0;

    animation:
        rc2ImageFadeIn .45s ease forwards;
}

/* =========================================
   CAROUSEL IMAGE MODES
========================================= */

/* Portrait book covers */

.rc2-image-contain .rc2-carousel-image {

    object-fit: contain;

}


/* Original image treatment */

.rc2-image-original .rc2-carousel-image {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

/* =========================================
   ORIGINAL IMAGE MODE
========================================= */

.rc2-image-original {

    background:
        white;

}

.rc2-carousel-card:hover
.rc2-carousel-image {

    transform:
        scale(1.03);
}


/* =========================================================
   BADGE
========================================================= */

.rc2-carousel-badge {

    position: absolute;

    z-index: 2;

    top: 12px;
    left: 12px;

    padding:
        6px 9px;

    border-radius:
        999px;

    background:
        rgba(11,31,58,.88);

    color:
        white;

    font-size: 9px;

    font-weight: 800;

    letter-spacing:
        .06em;

    backdrop-filter:
        blur(8px);

}


/* =========================================================
   CONTENT
   DESKTOP — COMPACT INFORMATION AREA
========================================================= */

.rc2-carousel-content {

    padding:
        9px 10px 10px;

}


.rc2-carousel-content h3 {

    margin:
        0 0 7px;

    color:
        var(--rc2-navy);

    font-family:
        Poppins,
        sans-serif;

    font-size:
        13px;

    line-height:
        1.15;

    letter-spacing:
        -.01em;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.rc2-carousel-content p {

    margin:
        0 0 11px;

    color:
        var(--rc2-text-soft);

    font-size:
        9px;

    line-height:
        1.25;

}


.rc2-carousel-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    min-height:
        30px;

    padding:
        0 10px;

    border-radius:
        8px;

    background:
        #ECFDF5;

    color:
        var(--rc2-green-dark);

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        800;

}


.rc2-carousel-button svg {

    width:
        10px;

    height:
        10px;

}


/* =========================================================
   DESKTOP CARD WIDTH
========================================================= */

@media (min-width: 1100px) {

    .rc2-carousel-card {

        flex-basis:
            250px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .rc2-carousel-header {

        align-items:
            flex-start;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .rc2-carousel-section {

        padding:
            55px 0 25px;

    }


    .rc2-carousel-container {

        
    width:
        calc(100% - clamp(24px, 7vw, 32px));

    }


    .rc2-carousel-header {

        display: block;

        margin-bottom:
            18px;

    }

    .rc2-carousel-card {

    flex:
        0 0 clamp(220px, 72vw, 290px);

    max-width:
        290px;

    border-radius:
        18px;    

   }

       .rc2-carousel-badge {

        top:
            clamp(9px, 2.5vw, 12px);

        left:
            clamp(9px, 2.5vw, 12px);

        padding:
            clamp(4px, 1.2vw, 6px)
            clamp(7px, 2vw, 9px);

        font-size:
            clamp(8px, 2.1vw, 9px);

    }


    .rc2-carousel-image-wrap {

        aspect-ratio:
            0.85;

    }


    .rc2-carousel-eyebrow {

        font-size:
            10px;

    }


    .rc2-carousel-heading h2 {

        font-size:
            19px;

    }


    .rc2-carousel-heading p {

         margin:
        14px 0 0;

        font-size:
            12px;

        line-height:
            1.5;

    }


    .rc2-carousel-controls {

        display: none;

    }


    .rc2-carousel-track {

    gap:
        12px;

    padding:
        3px 2px 14px;

    scroll-padding-left:
        2px;

}

    .rc2-carousel-content {

        padding:
            11px 12px 12px;

    }


    .rc2-carousel-content h3 {

        font-size:
        clamp(12px, 3.3vw, 13px);

    }


    .rc2-carousel-content p {

         font-size:
        clamp(8.8px, 2.45vw, 9.5px);

    }


    .rc2-carousel-button {

        min-height:
            30px;

        padding:
            0 14px;

          font-size:
        clamp(8.8px, 2.45vw, 9.5px);

        gap:
            5px;

    }

}

/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

.rc2-carousel-section {

    padding:
        55px 0 30px;

}

.rc2-carousel-container {

        width:
            calc(100% - 20px);

}

.rc2-carousel-card {

     flex:
            0 0 clamp(200px, 58vw, 240px);

}

  .rc2-carousel-badge {

     top:
         clamp(7px, 2.2vw, 9px);

     left:
         clamp(7px, 2.2vw, 9px);

     padding:
          clamp(3px, 1vw, 4px)
         clamp(6px, 1.8vw, 7px);

    font-size:
         clamp(7px, 2vw, 8px);

}


.rc2-carousel-image-wrap {

    aspect-ratio:
        0.85;

}    


.rc2-carousel-eyebrow {

    font-size:
        8px;

}

.rc2-carousel-heading h2 {

    font-size:
        15px;

}

.rc2-carousel-heading p {

    font-size:
          clamp(10px, 2.9vw, 11px);

    line-height:
        1.45;

}

    .rc2-carousel-content {

        padding:
            10px 11px 11px;

    }


   .rc2-carousel-content h3 {

        font-size:
        clamp(11px, 3.05vw, 12px);

    }


    .rc2-carousel-content p {

         font-size:
        clamp(8.2px, 2.3vw, 9px);

    }


    .rc2-carousel-button {

        min-height:
            30px;

        padding:
            0 14px;

        font-size:
            clamp(8.2px, 2.3vw, 9px);

        gap:
            5px;

    }

}

/* =========================================
   CAROUSEL IMAGE FADE-IN
========================================= */

@keyframes rc2ImageFadeIn {

    from {

        opacity:
            0;

    }

    to {

        opacity:
            1;

    }

}