/*=========================================================
                NECTAFRESH HERO SLIDER
                PART 2A
=========================================================*/

/*==============================
        VARIABLES
==============================*/

:root{

    --primary:#5DAA3B;
    --primary-dark:#4A8F2D;
    --secondary:#F8F9FA;

    --white:#ffffff;
    --black:#111111;

    --text:#4F4F4F;

    --radius:20px;

    --transition:.35s ease;

    --shadow:0 20px 60px rgba(0,0,0,.18);

}

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

.nf-hero{

    position:relative;

    width:100%;

    overflow:hidden;

    background:#0d0d0d;

}

/*==============================
        SWIPER
==============================*/

.nfHeroSlider{

    position:relative;

    width:100%;

    height:650px;

}

.nfHeroSlider .swiper-wrapper{

    width:100%;

    height:100%;

}

.nfHeroSlider .swiper-slide{

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

}

/*==============================
        BACKGROUND IMAGES
==============================*/

.hero-slide{

    background-repeat:no-repeat;

    background-position:center;

    background-size:cover;

}

/* Slide 1 */

.hero-slide-1 {
    background-image: url("../images/slide-1.webp");
}

/* Slide 2 */

.hero-slide-2 {
    background-image: url("../images/slide-2.webp");
}

/* Slide 3 */

.hero-slide-3 {
    background-image: url("../images/slide-3.webp");
}

/* Slide 4 */

.hero-slide-4 {
    background-image: url("../images/slide-4.webp");
}
/* Slide 5 */

.hero-slide-5 {
    background-image: url("../images/exhibition.webp");
}
/*==============================
        OVERLAY
==============================*/

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.60) 35%,
            rgba(0,0,0,.35) 70%,
            rgba(0,0,0,.15) 100%
        );

}

/* Green tint */

.hero-overlay::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(93,170,59,.12),
            transparent 55%
        );

}

/*==============================
        CONTAINER
==============================*/
.nf-container{
    width:min(1400px,92%);
    margin:0 auto;
    position:relative;
    z-index:5;

    display:flex;
    justify-content:flex-start;
    align-items:center;
}

/*==============================
        HERO CONTENT
==============================*/

.hero-content{
    position:relative;
    z-index:10;

    width:100%;
    max-width:680px;

    margin:0;
    padding:42px 45px;

    text-align:left;

    border-radius:24px;

    background:rgba(10,35,20,.42);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:0 20px 60px rgba(0,0,0,.18);

    overflow:hidden;
}

/*==============================
        GLASS BOX
==============================*/

.hero-content{

    padding:50px;

    border-radius:24px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.15);

    box-shadow:var(--shadow);

}

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

.hero-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:22px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.6px;

}

.hero-subtitle::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--primary);

}

/*==============================
        CONTENT WIDTH
==============================*/

.hero-content>*{

    position:relative;

    z-index:2;

}

/*==============================
        OPTIONAL DECORATION
==============================*/

.hero-content::before{

    content:"";

    position:absolute;

    right:-120px;

    top:-120px;

    width:240px;

    height:240px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

}

.hero-content::after{

    content:"";

    position:absolute;

    left:-70px;

    bottom:-70px;

    width:140px;

    height:140px;

    border-radius:50%;

    background:rgba(93,170,59,.15);

}

/*==============================
        KEN BURNS EFFECT
==============================*/

.hero-slide{

    animation:heroZoom 16s linear infinite alternate;

}

@keyframes heroZoom{

    from{

        background-size:100%;

    }

    to{

        background-size:110%;

    }

}

/*==============================
        ACTIVE SLIDE
==============================*/

.swiper-slide-active .hero-content{

    animation:heroContent .9s ease forwards;

}

@keyframes heroContent{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*=========================================================
                HERO TYPOGRAPHY
                PART 2B
=========================================================*/

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

.hero-content h1,
.hero-content h2{

    margin:0 0 24px;

    color:var(--white);

    font-size:58px;

    font-weight:800;

    line-height:1.12;

    letter-spacing:-1px;

}

.hero-content h1 span,
.hero-content h2 span{

    color:var(--primary);

}

/*==============================
        PARAGRAPH
==============================*/

.hero-content p{

    margin: 20px 0 28px;

    max-width:620px;

    color:rgba(255,255,255,.90);

    font-size:18px;

    line-height:1.9;

    font-weight:400;

}

/*==============================
        FEATURE LIST
==============================*/

.hero-list{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    list-style:none;

    margin:0 0 42px;

    padding:0;

}

.hero-list li{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    color:var(--white);

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

.hero-list li::before{

    content:"✓";

    color:var(--primary);

    font-size:16px;

    font-weight:700;

}

.hero-list li:hover{

    background:var(--primary);

    border-color:var(--primary);

    transform:translateY(-4px);

    box-shadow:0 14px 28px rgba(93,170,59,.35);

}

.hero-list li:hover::before{

    color:var(--white);

}

/*==============================
        BUTTON GROUP
==============================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

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

.hero-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:all .35s ease;

}

.btn-primary{

    min-width:220px;

    height:58px;

    border-radius:50px;

    background:var(--primary);

    color:var(--white);

    font-size:16px;

    font-weight:700;

    border:2px solid var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);

    border-color:var(--primary-dark);

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(93,170,59,.35);

}

.btn-secondary{

    min-width:220px;

    height:58px;

    border-radius:50px;

    background:transparent;

    color:var(--white);

    border:2px solid rgba(255,255,255,.85);

    font-size:16px;

    font-weight:700;

}

.btn-secondary:hover{

    background:var(--white);

    color:#111;

    transform:translateY(-4px);

}

/*==============================
    SWIPER NAVIGATION
==============================*/

.hero-prev,
.hero-next{

    width:58px !important;

    height:58px !important;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.20);

    transition:all .35s ease;

}

.hero-prev{

    left:40px !important;

}

.hero-next{

    right:40px !important;

}

.hero-prev:hover,
.hero-next:hover{

    background:var(--primary);

    border-color:var(--primary);

    transform:scale(1.08);

}

/* Swiper Icon */

.hero-prev::after,
.hero-next::after{

    color:var(--white);

    font-size:18px !important;

    font-weight:700;

}

/*==============================
        PAGINATION
==============================*/

.hero-pagination{

    bottom:40px !important;

}

.hero-pagination .swiper-pagination-bullet{

    width:14px;

    height:14px;

    margin:0 8px !important;

    background:rgba(255,255,255,.45);

    opacity:1;

    transition:.35s;

}

.hero-pagination .swiper-pagination-bullet-active{

    width:36px;

    border-radius:50px;

    background:var(--primary);

}

/*==============================
        BUTTON FOCUS
==============================*/

.btn-primary:focus,
.btn-secondary:focus{

    outline:none;

    box-shadow:0 0 0 4px rgba(93,170,59,.25);

}

/*==============================
    NAVIGATION HOVER SHADOW
==============================*/

.hero-prev:hover,
.hero-next:hover{

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

}

/*==============================
        SELECTION
==============================*/

.hero-content ::selection{

    background:var(--primary);

    color:var(--white);

}
/*=========================================================
                HERO.CSS
                PART 2C
                Animations • Effects • Utilities
=========================================================*/


/*==========================================
        SLIDE CONTENT ANIMATION
==========================================*/

.hero-content>*{
    opacity:0;
    transform:translateY(40px);
}

/* Active Slide Animation */

.swiper-slide-active .hero-subtitle{
    animation:heroFade .6s .2s forwards;
}

.swiper-slide-active h1,
.swiper-slide-active h2{
    animation:heroFade .7s .35s forwards;
}

.swiper-slide-active p{
    animation:heroFade .7s .55s forwards;
}

.swiper-slide-active .hero-list{
    animation:heroFade .7s .75s forwards;
}

.swiper-slide-active .hero-buttons{
    animation:heroFade .7s .95s forwards;
}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================
        KEN BURNS IMPROVED
==========================================*/

.hero-slide{

    animation:kenBurns 14s ease-in-out infinite alternate;

}

@keyframes kenBurns{

    from{

        background-size:100%;

        background-position:center;

    }

    to{

        background-size:110%;

        background-position:center center;

    }

}


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

.hero-content{

    transition:.45s ease;

}

.hero-content:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 80px rgba(0,0,0,.25);

}


/*==========================================
        BUTTON EFFECTS
==========================================*/

.btn-primary,
.btn-secondary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before,
.btn-secondary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.75s;

}

.btn-primary:hover::before,
.btn-secondary:hover::before{

    left:120%;

}


/*==========================================
        HERO LIST EFFECT
==========================================*/

.hero-list li{

    position:relative;

    overflow:hidden;

}

.hero-list li::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.10),
        transparent
    );

    transform:translateX(-120%);

}

.hero-list li:hover::after{

    transition:.7s;

    transform:translateX(120%);

}


/*==========================================
        NAVIGATION EFFECT
==========================================*/

.hero-prev,
.hero-next{

    overflow:hidden;

}

.hero-prev::before,
.hero-next::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    transform:scale(0);

    transition:.35s;

}

.hero-prev:hover::before,
.hero-next:hover::before{

    transform:scale(1.6);

}


/*==========================================
        PAGINATION
==========================================*/

.hero-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-pagination .swiper-pagination-bullet{

    transition:.35s ease;

}

.hero-pagination .swiper-pagination-bullet:hover{

    transform:scale(1.3);

}


/*==========================================
        IMAGE OVERLAY EFFECT
==========================================*/

.hero-overlay{

    transition:.5s;

}

.swiper-slide-active .hero-overlay{

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.72),
        rgba(0,0,0,.45),
        rgba(0,0,0,.15)
    );

}


/*==========================================
        SWIPER SMOOTHNESS
==========================================*/

.swiper-slide{

    backface-visibility:hidden;

    transform:translate3d(0,0,0);

}

.swiper{

    overflow:hidden;

}


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

.hero-buttons a:focus-visible{

    outline:3px solid rgba(255,255,255,.6);

    outline-offset:4px;

}

.hero-prev:focus-visible,
.hero-next:focus-visible{

    outline:3px solid #fff;

}


/*==========================================
        UTILITIES
==========================================*/

.text-white{

    color:#fff;

}

.text-primary{

    color:var(--primary);

}

.fw-700{

    font-weight:700;

}

.fw-800{

    font-weight:800;

}

.shadow-lg{

    box-shadow:0 25px 70px rgba(0,0,0,.25);

}

.rounded-xl{

    border-radius:24px;

}


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

.hero-slide{

    will-change:transform;

}

.hero-content{

    will-change:transform,opacity;

}

.hero-prev,
.hero-next{

    will-change:transform;

}


/*==========================================
        REDUCE MOTION
==========================================*/

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}
/*==================================================
    HERO CONTENT - LEFT ALIGNMENT FIX
==================================================*/

.nfHeroSlider .nf-container {
    width: min(1400px, 92%);
    height: 100%;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Main Glass Content Box */
.nfHeroSlider .hero-content {
    width: 100%;
    max-width: 680px;

    margin: 0;
    padding: 42px 45px;

    text-align: left;

    display: block;
}

/* Subtitle */
.nfHeroSlider .hero-subtitle {
    margin: 0 0 20px 0;
}

/* Heading */
.nfHeroSlider .hero-content h1,
.nfHeroSlider .hero-content h2 {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* Description */
.nfHeroSlider .hero-content p {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 600px;
}

/* Product Chips */
.nfHeroSlider .hero-list
    margin: 0 0 32px;
    justify-content: flex-start;
}

/* Buttons */
.nfHeroSlider .hero-buttons {
    justify-content: flex-start;
}
/* ==========================================================
   ALL HERO SLIDES - PREMIUM LIGHT GLASS CONTENT STYLE
   Applies to Slide 1, 2, 3, 4, 5
========================================================== */

/* Main Glass Content Box */
.nfHeroSlider .hero-content {
    width: 100%;
    max-width: 680px;

    padding: 42px 45px;
    margin: 0;

    text-align: left;

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 24px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
}


/* ==========================================================
   SUBTITLE
========================================================== */

.nfHeroSlider .hero-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 24px;

    padding: 11px 22px;

    color: #245c24;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    background: rgba(255, 255, 255, 0.82);

    border: 1px solid rgba(44, 105, 49, 0.12);
    border-radius: 50px;
}


/* Green Dot */
.nfHeroSlider .hero-subtitle::before {
    content: "";

    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    background: #59b638;
    border-radius: 50%;
}


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

.nfHeroSlider .hero-content h1,
.nfHeroSlider .hero-content h2 {
    margin: 0 0 20px;

    color: #173d25;

    font-size: 46px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;

    text-align: left;
}


/* Green highlighted heading text */
.nfHeroSlider .hero-content h1 span,
.nfHeroSlider .hero-content h2 span {
    color: #58b536;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.nfHeroSlider .hero-content p {
    max-width: 600px;

    margin: 0 0 18px;

    color: #35433a;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;

    text-align: left;
}


/* ==========================================================
   FEATURE CHIPS
========================================================== */

.nfHeroSlider .hero-list {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-start;

    gap: 12px;

    padding: 0;
    margin: 0 0 32px;

    list-style: none;
}


.nfHeroSlider .hero-list li {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 20px;

    color: #24452c;

    font-size: 14px;
    font-weight: 700;

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(44, 105, 49, 0.20);

    border-radius: 50px;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* Green Check */
.nfHeroSlider .hero-list li::before {
    content: "✓";

    color: #55b638;

    font-size: 18px;
    font-weight: 800;
}


/* Chip Hover */
.nfHeroSlider .hero-list li:hover {
    transform: translateY(-2px);

    background: rgba(255, 255, 255, 0.95);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}


/* ==========================================================
   BUTTON AREA
========================================================== */

.nfHeroSlider .hero-buttons {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-start;

    gap: 16px;
}


/* Primary Button */
.nfHeroSlider .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;

    padding: 15px 28px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    background: #58b536;

    border: 2px solid #58b536;
    border-radius: 50px;

    transition: all 0.3s ease;
}


.nfHeroSlider .btn-primary:hover {
    color: #ffffff;

    background: #397f28;
    border-color: #397f28;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(57, 127, 40, 0.25);
}


/* Secondary Button */
.nfHeroSlider .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;

    padding: 15px 28px;

    color: #245c24;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    background: rgba(255, 255, 255, 0.78);

    border: 2px solid #4fae36;
    border-radius: 50px;

    transition: all 0.3s ease;
}


.nfHeroSlider .btn-secondary:hover {
    color: #ffffff;

    background: #4fae36;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(79, 174, 54, 0.20);
}


/* ==========================================================
   DESKTOP CONTENT POSITION
========================================================== */

.nfHeroSlider .nf-container {
    width: min(1400px, 92%);
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    position: relative;
    z-index: 5;
}