/* ==========================
   HERO CAROUSEL
========================== */

.hero-carousel{

    width:100%;

    padding:20px 0 30px;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(255,255,255,.94),
            rgba(245,252,248,.94)
        ),
        url("assets/background.png");

    background-repeat:repeat;

    background-size:700px;

    background-position:center;

}

.hero-carousel{
    position:relative;
}

.hero-carousel::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-120px;
    top:80px;

    border-radius:50%;

    background:#25D366;

    opacity:.08;

    filter:blur(120px);

    pointer-events:none;

}

.hero-carousel::after{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-100px;
    bottom:30px;

    border-radius:50%;

    background:#8DE7B5;

    opacity:.10;

    filter:blur(120px);

    pointer-events:none;

}

/* .hero-carousel{

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fffb 50%,
    #f1fbf5 100%
    );

} */

#carouselHero{

    width:100%;

    margin:0;

    border-radius:24px;

    overflow:hidden;

    box-shadow:none;

}

.hero-image{

    width:100%;

    height:820px;      /* +100px */

    object-fit:contain;

background:
        linear-gradient(
            rgba(255,255,255,.94),
            rgba(245,252,248,.94)
        ),
        url("assets/background.png");

}

/* ==========================
   Indicator
========================== */

.carousel-indicators{
    bottom:22px;
    gap:8px;
    margin-bottom:0;
}

.carousel-indicators button{
    width:12px;
    height:12px;
    border-radius:50%;
    border:none;
    background:#fff;
    opacity:.45;
    transition:.3s;
}

.carousel-indicators .active{
    width:42px;
    border-radius:50px;
    opacity:1;
    background:#25D366;
}

/* ==========================
   Arrow
========================== */

.carousel-control-prev,
.carousel-control-next{
    width:8%;
    opacity:1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    width:52px;
    height:52px;

    border-radius:50%;

    background-color:rgba(255,255,255,.9);
    background-size:22px;

    box-shadow:0 8px 24px rgba(0,0,0,.15);
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover{
    transform:scale(1.08);
}

/* ==========================
   Animation
========================== */

.carousel-item{
    transition:transform .7s ease-in-out;
}

/* ==========================
   HERO CAROUSEL
========================== */

.hero-carousel{

    width:100%;

    padding:20px 0 30px;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(255,255,255,.94),
            rgba(245,252,248,.94)
        ),
        url("assets/background.png");

    background-repeat:repeat;

    background-size:700px;

    background-position:center;

}

.hero-carousel{
    position:relative;
}

.hero-carousel::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-120px;
    top:80px;

    border-radius:50%;

    background:#25D366;

    opacity:.08;

    filter:blur(120px);

    pointer-events:none;

}

.hero-carousel::after{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-100px;
    bottom:30px;

    border-radius:50%;

    background:#8DE7B5;

    opacity:.10;

    filter:blur(120px);

    pointer-events:none;

}

/* .hero-carousel{

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fffb 50%,
    #f1fbf5 100%
    );

} */

#carouselHero{

    width:100%;

    margin:0;

    border-radius:24px;

    overflow:hidden;

    box-shadow:none;

}

.hero-image{

    width:100%;

    height:820px;      /* +100px */

    object-fit:contain;

background:
        linear-gradient(
            rgba(255,255,255,.94),
            rgba(245,252,248,.94)
        ),
        url("assets/background.png");

}

/* ==========================
   Indicator
========================== */

.carousel-indicators{
    bottom:22px;
    gap:8px;
    margin-bottom:0;
}

.carousel-indicators button{
    width:12px;
    height:12px;
    border-radius:50%;
    border:none;
    background:#fff;
    opacity:.45;
    transition:.3s;
}

.carousel-indicators .active{
    width:42px;
    border-radius:50px;
    opacity:1;
    background:#25D366;
}

/* ==========================
   Arrow
========================== */

.carousel-control-prev,
.carousel-control-next{
    width:8%;
    opacity:1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    width:52px;
    height:52px;

    border-radius:50%;

    background-color:rgba(255,255,255,.9);
    background-size:22px;

    box-shadow:0 8px 24px rgba(0,0,0,.15);
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover{
    transform:scale(1.08);
}

/* ==========================
   Animation
========================== */

.carousel-item{
    transition:transform .7s ease-in-out;
}
/* ===========================
TABLET
=========================== */
@media (max-width:992px){

    .hero-carousel{
        padding:15px 0 40px;
    }

    #carouselHero{
        width:100%;
        border-radius:24px;
        overflow:hidden;
        box-shadow:none;
    }

    .hero-image{
        width:100%;
        height:auto;
        display:block;
        object-fit:contain;
    }

}

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

    .hero-carousel{
        padding-top:85px;
        padding-bottom:25px;
    }

    #carouselHero{
        width:100%;
        border-radius:20px;
        overflow:hidden;
        box-shadow:none;
    }

    .hero-image{
        width:100%;
        height:auto;
        display:block;
        object-fit:contain;
    }

    .carousel-control-prev,
    .carousel-control-next{
        display:none;
    }

    .carousel-indicators{
        bottom:10px;
    }

    .carousel-indicators button{
        width:10px;
        height:10px;
    }

    .carousel-indicators .active{
        width:28px;
    }

}
/* ===============================
   HERO FULL SCREEN
================================*/



/* ===============================
   HERO FULL SCREEN
================================*/