/* ==========================================================
   DOODLE UI COMPONENT
   Module  : Component
   File    : support-slider.css
   Version : 2.0.0
   Author  : Doodle IT Development
========================================================== */

/* ==========================================================
   SUPPORT
========================================================== */

.support-slider{

    padding-block:var(--section-space-desktop);

}

/* ==========================================================
   TITLE
========================================================== */

.section-heading{

    margin-bottom:var(--space-8);

    text-align:center;

}

.section-title{

    color:var(--color-text);

    font-size:var(--font-size-4xl);

    font-weight:var(--font-bold);

}

/* ==========================================================
   WRAPPER
========================================================== */

.support-slider-wrapper{

    display:flex;

    gap:var(--space-6);

    overflow-x:auto;

    scroll-behavior:smooth;

    cursor:grab;

}

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

.support-card{

    flex:0 0 340px;

    overflow:hidden;

    background:var(--color-surface);

    border:var(--border-width) solid var(--color-border);

    border-radius:var(--card-radius);

    box-shadow:var(--card-shadow);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.support-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.support-card-image{

    display:block;

    aspect-ratio:16/10;

    overflow:hidden;

}

.support-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.support-card-body{

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

    padding:var(--card-padding);

}

.support-card-title{

    color:var(--color-text);

    font-size:var(--font-size-xl);

    font-weight:var(--font-bold);

}

.support-card-description{

    color:var(--color-text-secondary);

    line-height:var(--line-height-relaxed);

}

@media (max-width:767px){

    .support-slider{

        padding-block:var(--section-space-mobile);

    }

    .support-card{

        flex:0 0 280px;

    }

}