/* ==========================================================
   CONFIDENCE SECTION
   PART 1 - Layout, Heading & Cards
========================================================== */

:root{

    --confidence-max-width:1280px;
    --confidence-card-width:280px;
    --confidence-card-height:420px;

    --confidence-radius:12px;

    --confidence-text:#ffffff;

    --confidence-heading:#111111;

    --background-text-block-grid-40x40:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 40px,
            rgba(0,0,0,.04) 40px,
            rgba(0,0,0,.04) 41px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            rgba(0,0,0,.04) 40px,
            rgba(0,0,0,.04) 41px
        );

    --confidence-overlay:
        linear-gradient(
            to top,
            rgba(0,0,0,.70) 0%,
            rgba(0,0,0,.20) 55%,
            rgba(0,0,0,0) 100%
        );

}

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

.confidence-section{

    width:100%;

    padding:90px 0;

    overflow:hidden;

    background:
        linear-gradient(#fff, #fff),
        var(--background-text-block-grid-40x40);

}

.confidence-container{

    width:100%;

    max-width:var(--confidence-max-width);

    margin:auto;

    padding:0 20px;

}

/* ==========================================================
   HEADING
========================================================== */

.confidence-heading{

    max-width:580px;

    margin:0 auto 50px;

    text-align:center;

}

.confidence-heading h2{

    font-family:'League Spartan',sans-serif;

    font-size:32px;

    font-weight:500;

    line-height:1.2;

    color:var(--confidence-heading);

    letter-spacing:-0.5px;

}

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

.confidence-slider-wrapper{

    position:relative;

}

.confidence-slider{

    display:flex;

    gap:18px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -ms-overflow-style:none;

    padding-bottom:10px;

}

.confidence-slider::-webkit-scrollbar{

    display:none;

}

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

.confidence-card{

    flex:0 0 var(--confidence-card-width);

    width:var(--confidence-card-width);

    height:var(--confidence-card-height);

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

    overflow:hidden;

    position:relative;

    text-decoration:none;

    background:#eee;

    transition:.35s;

}

.confidence-card:hover{

    transform:translateY(-8px);

}

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

.confidence-image{

    position:absolute;

    inset:0;

}

.confidence-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

}

.confidence-card:hover img{

    transform:scale(1.08);

}

.confidence-overlay{

    position:absolute;

    inset:0;

    background:var(--confidence-overlay);

}

/* ==========================================================
   CONFIDENCE SECTION
   PART 2 - Card Content, Arrows & Animations
========================================================== */

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

.confidence-content{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:5;

    padding:28px;

    color:var(--confidence-text);

}

.confidence-content h3{

    font-family:'League Spartan',sans-serif;

    font-size:44px;

    font-weight:700;

    line-height:.92;

    text-transform:uppercase;

    letter-spacing:-1px;

    margin:0 0 18px;

    color:#fff;

    text-shadow:0 2px 10px rgba(0,0,0,.45);

}

.confidence-content p{

    margin:0;

    font-family:'League Spartan',sans-serif;

    font-size:18px;

    font-weight:400;

    color:#fff;

    opacity:.95;

}

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

.confidence-card{

    box-shadow:

        0 8px 25px rgba(0,0,0,.08);

}

.confidence-card:hover{

    box-shadow:

        0 20px 40px rgba(0,0,0,.18);

}

.confidence-card:hover .confidence-overlay{

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.82),

            rgba(0,0,0,.28),

            rgba(0,0,0,0)

        );

}

.confidence-card:hover .confidence-content{

    transform:translateY(-6px);

}

.confidence-content{

    transition:.35s ease;

}

/* ==========================================================
   NAVIGATION ARROWS
========================================================== */

.confidence-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#111;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:20;

    box-shadow:

        0 8px 20px rgba(0,0,0,.15);

    transition:.3s;

}

.confidence-prev{

    left:-28px;

}

.confidence-next{

    right:-28px;

}

.confidence-arrow i{

    font-size:20px;

}

.confidence-arrow:hover{

    background:#111;

    color:#fff;

    transform:translateY(-50%) scale(1.08);

}

.confidence-arrow:active{

    transform:translateY(-50%) scale(.96);

}

/* ==========================================================
   HIDE ARROWS WHEN DISABLED
========================================================== */

.confidence-arrow.disabled{

    opacity:.3;

    pointer-events:none;

}

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

.confidence-card{

    animation:confidenceFade .6s ease both;

}

.confidence-card:nth-child(2){

    animation-delay:.05s;

}

.confidence-card:nth-child(3){

    animation-delay:.10s;

}

.confidence-card:nth-child(4){

    animation-delay:.15s;

}

.confidence-card:nth-child(5){

    animation-delay:.20s;

}

.confidence-card:nth-child(6){

    animation-delay:.25s;

}

@keyframes confidenceFade{

    from{

        opacity:0;

        transform:

            translateY(40px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.confidence-reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.confidence-reveal.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.confidence-card:focus{

    outline:3px solid #ff6b2b;

    outline-offset:4px;

}

.confidence-arrow:focus{

    outline:3px solid #ff6b2b;

}

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

.confidence-image img{

    transition:

        opacity .35s ease,

        transform .5s ease;

}

/* ==========================================================
   SHADOW POLISH
========================================================== */

.confidence-slider{

    padding-top:10px;

    padding-bottom:18px;

}

.confidence-card{

    will-change:transform;

}

/* ==========================================================
   CONFIDENCE SECTION
   PART 3 - Responsive, Touch & Final Refinements
========================================================== */

/* ==========================================================
   LARGE DESKTOP (1600px+)
========================================================== */

@media (min-width:1600px){

:root{

    --confidence-max-width:1500px;
    --confidence-card-width:320px;
    --confidence-card-height:480px;

}

.confidence-heading{

    max-width:700px;

}

.confidence-heading h2{

    font-size:40px;

}

.confidence-content h3{

    font-size:50px;

}

.confidence-content p{

    font-size:20px;

}

}

/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:1200px){

.confidence-slider{

    gap:22px;

}

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1199px){

:root{

    --confidence-card-width:260px;
    --confidence-card-height:390px;

}

.confidence-heading h2{

    font-size:30px;

}

.confidence-arrow{

    width:52px;

    height:52px;

}

.confidence-prev{

    left:-18px;

}

.confidence-next{

    right:-18px;

}

}

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

@media (max-width:991px){

.confidence-section{

    padding:70px 0;

}

.confidence-container{

    padding:0 18px;

}

.confidence-heading{

    margin-bottom:40px;

}

.confidence-heading h2{

    font-size:28px;

    line-height:1.15;

}

:root{

    --confidence-card-width:240px;
    --confidence-card-height:360px;

}

.confidence-content{

    padding:22px;

}

.confidence-content h3{

    font-size:36px;

}

.confidence-content p{

    font-size:17px;

}

.confidence-arrow{

    display:none;

}

}

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

@media (max-width:768px){

.confidence-section{

    padding:60px 0;

}

.confidence-container{

    padding:0 16px;

}

.confidence-heading{

    max-width:100%;

    margin-bottom:32px;

}

.confidence-heading h2{

    font-size:30px;

    line-height:1.2;

    letter-spacing:-0.5px;

}

.confidence-slider{

    gap:16px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    padding-bottom:8px;

}

.confidence-card{

    flex:0 0 82%;

    width:82%;

    height:420px;

    scroll-snap-align:start;

}

.confidence-content{

    padding:22px;

}

.confidence-content h3{

    font-size:34px;

}

.confidence-content p{

    font-size:16px;

}

}

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

@media (max-width:480px){

.confidence-section{

    padding:50px 0;

}

.confidence-container{

    padding:0 14px;

}

.confidence-heading h2{

    font-size:26px;

}

.confidence-card{

    flex:0 0 88%;

    width:88%;

    height:360px;

}

.confidence-content{

    padding:18px;

}

.confidence-content h3{

    font-size:28px;

    margin-bottom:12px;

}

.confidence-content p{

    font-size:15px;

}

}

/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

.confidence-card:hover{

    transform:none;

}

.confidence-card:hover img{

    transform:none;

}

.confidence-card:hover .confidence-overlay{

    background:var(--confidence-overlay);

}

}

/* ==========================================================
   HIDE SCROLLBAR
========================================================== */

.confidence-slider{

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.confidence-slider::-webkit-scrollbar{

    width:0;

    height:0;

    display:none;

}

/* ==========================================================
   SMOOTH SCROLLING
========================================================== */

.confidence-slider{

    scroll-behavior:smooth;

}

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

.confidence-image img{

    display:block;

    image-rendering:auto;

}

/* ==========================================================
   PERFORMANCE
========================================================== */

.confidence-card,
.confidence-image img,
.confidence-content{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

.confidence-card,
.confidence-image img,
.confidence-content,
.confidence-arrow{

    transition:none !important;

    animation:none !important;

}

.confidence-slider{

    scroll-behavior:auto;

}

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

.confidence-arrow{

    display:none;

}

.confidence-slider{

    overflow:visible;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.confidence-card{

    width:auto;

    height:320px;

}

}

/* ==========================================================
   FINAL POLISH
========================================================== */

.confidence-card{

    overflow:hidden;

    border-radius:14px;

}

.confidence-content{

    z-index:10;

}

.confidence-overlay{

    pointer-events:none;

}

.confidence-slider-wrapper{

    position:relative;

}

.confidence-section *{

    box-sizing:border-box;

}