@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');







*,



*::before,



*::after {



    box-sizing: border-box;



    margin: 0;



    padding: 0
}







:root {



    --gd: #1a3a2a;



    --gm: #2d6a4f;



    --gb: #40916c;



    --gl: #74c69d;



    --gp: #d8f3dc;



    --gx: #b7e4c7;



    --cream: #faf7f0;



    --sand: #e9e0cc;



    --td: #1a2215;



    --tb: #3d4a38;



    --white: #fff;



    --gold: #c9a84c;



    --fh: "Roboto", sans-serif;



    --fb: "Montserrat", sans-serif;



    --r: 14px;



    --tr: .3s ease;



}







html {



    scroll-behavior: smooth
}







body {



    font-family: var(--fb);



    color: var(--td);



    background: var(--cream);



    overflow-x: hidden
}



.wrapper {

    display: block;

    width: 100%;

    overflow: hidden;

    min-height: 100vh;

    position: relative;

}





a {



    text-decoration: none;



    color: inherit
}







ul {



    list-style: none
}







.con {



    max-width: 1200px;



    margin: 0 auto;



    padding: 0 24px
}







.tag {



    display: inline-block;



    background: var(--gp);



    color: var(--gm);



    font-size: 11px;



    font-weight: 700;



    letter-spacing: .1em;



    text-transform: uppercase;



    padding: 5px 14px;



    border-radius: 20px
}



.icon {

    mask-repeat: no-repeat;

    mask-size: contain;

    background-color: currentColor;

    width: 16px;

    height: 16px;

    display: inline-block;

}



.icon-facebook {

    mask-image: url(../img/svg/facebook.svg);

}



.icon-instagram {

    mask-image: url(../img/svg/instagram.svg);

}



.icon-linkedin {

    mask-image: url(../img/svg/linkedin.svg);

}



.d-flex {

    display: flex;

}



.d-none {

    display: none;

}



.d-sm-flex {

    display: flex;

}



.align-items-center {

    align-items: center;

}



.btn {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    padding: 13px 26px;



    border-radius: 50px;



    font-family: var(--fb);



    font-weight: 600;



    font-size: 14px;



    cursor: pointer;



    transition: all var(--tr);



    border: none;



    line-height: 1
}







.bp {



    background: var(--gm);



    color: #fff
}











.bp:hover {
    background: var(--gd);

}



.cm {

    background: var(--cream);

    color: #000;

}





.cm:hover {

    background: var(--gd);

    color: #fff;

}







.bo {



    background: transparent;



    color: var(--gm);



    border: 2px solid var(--gm)
}







.bo:hover {



    background: var(--gm);



    color: #fff
}







.bw {



    background: #fff;



    color: var(--gd)
}







.bw:hover {



    background: var(--gp)
}







.reveal {



    opacity: 0;



    transform: translateY(28px);



    transition: opacity .65s, transform .65s
}







.reveal.visible {



    opacity: 1;



    transform: translateY(0)
}







.d1 {



    transition-delay: .12s
}







.d2 {



    transition-delay: .24s
}







.d3 {



    transition-delay: .36s
}



.sticky-logo,

.sc .logo {

    display: none;

}



.sc .sticky-logo {

    display: block;

}





@keyframes fadeUp {



    from {



        opacity: 0;



        transform: translateY(24px)
    }







    to {



        opacity: 1;



        transform: translateY(0)
    }



}







@keyframes float {







    0%,



    100% {



        transform: translateY(0)
    }







    50% {



        transform: translateY(-12px)
    }



}







@keyframes spin {



    to {



        transform: rotate(360deg)
    }



}







@keyframes pulse {







    0%,



    100% {



        opacity: .6
    }







    50% {



        opacity: 1
    }



}







/* ── NAV ── */



.header {



    position: fixed;



    top: 0;



    left: 0;



    right: 0;



    z-index: 1000;



    padding: 0 24px;



    transition: background .4s, box-shadow .4s
}







header.sc {



    background: rgba(250, 247, 240, .97);



    backdrop-filter: blur(14px);



    box-shadow: 0 2px 24px rgba(0, 0, 0, .08)
}







.ni {



    max-width: 1200px;



    margin: 0 auto;



    display: flex;



    align-items: center;



    justify-content: space-between;



    height: 72px
}







.nlogo {



    display: flex;



    align-items: center;



    gap: 10px
}







.nlogo img {



    max-height: 70px;



}







.licon {



    width: 36px;



    height: 36px;



    background: linear-gradient(135deg, var(--gb), var(--gm));



    border-radius: 50% 50% 0 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-shrink: 0
}







.licon svg {



    width: 18px;



    height: 18px;



    fill: #fff
}







.ntext {



    font-family: var(--fh);



    font-size: 18px;



    font-weight: 700;



    color: #fff;



    transition: color .3s
}







header.sc .ntext {



    color: var(--gd)
}







.nlinks {



    display: flex;



    align-items: center;



    gap: 4px
}







.nlinks a {



    font-size: 14px;



    font-weight: 500;



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



    padding: 8px 14px;



    border-radius: 8px;



    transition: all .25s
}







.header.sc .nlinks a {



    color: var(--tb)
}



.header.sc .nlinks a:hover {

    color: var(--gd);

}





.nlinks a:hover {



    color: var(--sand);



}







.nqbtn {



    background: #fff;



    color: var(--gd);



    padding: 10px 22px;



    border-radius: 50px;



    font-weight: 600;



    font-size: 14px;



    cursor: pointer;



    border: none;



    font-family: var(--fb);



    transition: all .3s
}







.header.sc .nqbtn {



    background: var(--gm);



    color: #fff
}







.nqbtn:hover {
    background-color: var(--sand);
    color: var(--tb);
}







.ham {



    display: none;



    flex-direction: column;



    gap: 5px;



    cursor: pointer;



    padding: 4px
}







.ham span {



    display: block;



    width: 24px;



    height: 2px;



    background: #fff;



    border-radius: 2px;



    transition: .3s
}







nav.sc .ham span {



    background: var(--gd)
}




.header.sc .nqbtn:hover {
    background: var(--gb);
    color: #fff;
}


/* ── HERO ── */



#hero {



    position: relative;



    height: 100vh;



    min-height: 620px;



    overflow: hidden
}







.slide {



    position: absolute;



    inset: 0;



    opacity: 0;



    transition: opacity 1.2s ease;



    display: flex;



    align-items: center
}







.slide.active {



    opacity: 1
}







/* Hero backgrounds as CSS gradients with pattern */



.sbg {



    position: absolute;



    inset: 0;



    transition: transform 7s ease
}







.slide.active .sbg {



    transform: scale(1.04)
}







.s1bg {



    background: linear-gradient(135deg, #0d2b1a 0%, #1a4a2e 40%, #2d7a50 100%)
}







.s2bg {



    background: linear-gradient(135deg, #1a2d0d 0%, #2e4a1a 40%, #4a7c2d 100%)
}







.s3bg {



    background: linear-gradient(135deg, #0d1a2b 0%, #1a2e4a 40%, #2d507a 100%)
}







.sov {



    position: absolute;



    inset: 0;



    background: linear-gradient(120deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 60%, transparent 100%)
}







/* Hero decorative SVG pattern */



.hero-deco {



    position: absolute;



    inset: 0;



    overflow: hidden;



    pointer-events: none;



    opacity: .12
}



.hero-deco img {



    width: 100%;

    height: 100%;

    object-fit: cover;

}







.hc {



    position: relative;



    z-index: 2;



    padding: 0 24px;



    max-width: 1200px;



    margin: 0 auto;



    width: 100%
}







.htag {



    display: inline-block;



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



    backdrop-filter: blur(8px);



    color: #fff;



    font-size: 11px;



    font-weight: 700;



    letter-spacing: .12em;



    text-transform: uppercase;



    padding: 7px 18px;



    border-radius: 20px;



    margin-bottom: 22px;



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



    animation: fadeUp .8s .1s both
}







.htitle {



    font-family: var(--fh);



    font-size: clamp(34px, 4.5vw, 76px);



    font-weight: 900;



    color: #fff;



    line-height: 1.06;



    max-width: 720px;



    animation: fadeUp .8s .25s both
}







.htitle em {



    font-style: normal;



    color: var(--gl)
}







.hdesc {



    font-size: clamp(14px, 1.5vw, 17px);



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



    max-width: 500px;



    line-height: 1.75;



    margin: 20px 0 36px;



    animation: fadeUp .8s .4s both
}







.hbtns {



    display: flex;



    flex-wrap: wrap;



    gap: 14px;



    animation: fadeUp .8s .55s both
}







.gbtn {



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



    color: #fff;



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



    backdrop-filter: blur(6px);



    padding: 12px 24px;



    border-radius: 50px;



    font-family: var(--fb);



    font-weight: 600;



    font-size: 14px;



    cursor: pointer;



    display: inline-flex;



    align-items: center;



    gap: 8px;



    transition: .3s
}







.gbtn:hover {



    background: rgba(255, 255, 255, .24)
}







.hstats {



    position: absolute;



    bottom: 44px;



    right: 44px;



    display: flex;



    gap: 36px;



    z-index: 2;



    animation: fadeUp .8s .7s both
}







.hstat .num {



    font-family: var(--fh);



    font-size: 34px;



    font-weight: 900;



    color: #fff
}







.hstat .lbl {



    font-size: 10px;



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



    text-transform: uppercase;



    letter-spacing: .1em;



    margin-top: 2px
}







.sdots {



    position: absolute;



    bottom: 36px;



    left: 50%;



    transform: translateX(-50%);



    display: flex;



    gap: 10px;



    z-index: 3
}







.dot {



    width: 8px;



    height: 8px;



    border-radius: 50%;



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



    cursor: pointer;



    transition: .3s
}







.dot.active {



    background: #fff;



    width: 26px;



    border-radius: 4px
}







/* Hero floating illustrations */



.hero-float {



    position: absolute;



    right: 8%;



    top: 50%;



    transform: translateY(-50%);



    z-index: 2;



    animation: float 4s ease-in-out infinite;



    display: none
}







/* ── PRODUCT VISUAL CARDS (replacing images) ── */



.img-vis {



    width: 100%;



    aspect-ratio: 4/3;



    border-radius: var(--r);



    overflow: hidden;



    position: relative;



    display: flex;



    align-items: center;



    justify-content: center
}







.img-vis svg {



    width: 45%;



    height: 45%;



    position: relative;



    z-index: 2
}







.iv-green {



    background: linear-gradient(135deg, #c8f0d8, #a8dfc0)
}







.iv-teal {



    background: linear-gradient(135deg, #c8e8f0, #a8d4e0)
}







.iv-warm {



    background: linear-gradient(135deg, #f0e8c8, #e0d4a8)
}







.iv-earth {



    background: linear-gradient(135deg, #d4e8c8, #b8d4a0)
}







.iv-orange {



    background: linear-gradient(135deg, #f0d8c8, #e0c4a8)
}







.iv-purple {



    background: linear-gradient(135deg, #dcd0f0, #c8b8e8)
}







.iv-dark {



    background: linear-gradient(135deg, #c0d8c8, #9ac0b0)
}







.iv-blue {



    background: linear-gradient(135deg, #c8d8f0, #a8c4e8)
}







.iv-forest {



    background: linear-gradient(135deg, #1a3a2a, #2d6a4f)
}







.iv-moss {



    background: linear-gradient(135deg, #2a4a1a, #4a7a2a)
}







.iv-sky {



    background: linear-gradient(135deg, #1a2a3a, #2a4a6a)
}







/* Decorative circles in image cards */



.img-vis::before {



    content: '';



    position: absolute;



    width: 160px;



    height: 160px;



    border-radius: 50%;



    opacity: .15;



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



    top: -40px;



    right: -40px
}







.img-vis::after {



    content: '';



    position: absolute;



    width: 80px;



    height: 80px;



    border-radius: 50%;



    opacity: .1;



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



    bottom: -20px;



    left: -20px
}







/* Hover zoom effect */



.img-vis {



    transition: transform .4s ease
}







.img-vis:hover {



    transform: scale(1.02)
}







/* ── STRIP ── */



#strip {



    background: var(--gd);



    padding: 72px 0
}







.sg {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 64px;



    align-items: center
}







.st .tag {



    background: rgba(116, 198, 157, .2);



    color: var(--gl)
}







.st h2 {



    font-family: var(--fh);



    font-size: clamp(26px, 3vw, 40px);



    color: #fff;



    margin-top: 14px;



    line-height: 1.2
}







.st p {



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



    line-height: 1.6;



    margin-top: 12px;



    font-size: 15px
}







.stbtn {



    color: var(--gl);



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



    padding: 11px 24px;



    border-radius: 50px;



    font-family: var(--fb);



    font-weight: 600;



    font-size: 14px;



    cursor: pointer;



    background: transparent;



    margin-top: 24px;



    display: inline-flex;



    align-items: center;



    gap: 8px;



    transition: .3s
}







.stbtn:hover {



    background: var(--gl);



    color: var(--gd)
}







.tg {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 14px
}







.tc {



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



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



    border-radius: 12px;



    padding: 22px;



    transition: all .3s
}







.tc:hover {



    background: rgba(116, 198, 157, .1);



    border-color: var(--gl);



    transform: translateY(-3px)
}







.tci {



    width: 40px;



    height: 40px;



    background: rgba(116, 198, 157, .15);



    border-radius: 10px;



    display: flex;



    align-items: center;



    justify-content: center;



    margin-bottom: 12px
}







.tci svg {



    width: 20px;



    height: 20px;



    fill: var(--gl)
}







.tc h4 {



    color: #fff;



    font-size: 14px;



    font-weight: 600;



    margin-bottom: 5px
}







.tc p {



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



    font-size: 12px;



    line-height: 1.55
}







/* ── CTA BAR ── */



.cb {



    background: linear-gradient(100deg, var(--gb), var(--gm));



    padding: 56px 0;



    text-align: center
}







.cb h2 {



    font-family: var(--fh);



    font-size: clamp(22px, 3vw, 36px);



    color: #fff;



    margin-bottom: 8px
}







.cb p {



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



    font-size: 15px;



    max-width: 480px;



    margin: 0 auto 26px
}







/* ── ABOUT ── */



#about {



    padding: 100px 0;



    background: var(--cream)
}







.ag {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 72px;



    align-items: center
}







.aiw {



    position: relative
}







.about-main-img {



    width: 100%;



    border-radius: 20px;



    overflow: hidden;



    aspect-ratio: 4/3;



    background: linear-gradient(135deg, #d0ead8, #a8d4b8);



    position: relative;



    display: flex;



    align-items: center;



    justify-content: center
}







.about-main-img::before {



    content: '';



    position: absolute;



    inset: 0;



    background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, .3), transparent 60%)
}







.about-main-img .leaf-big {



    position: absolute;



    opacity: .1
}







.aib {



    position: absolute;



    bottom: -18px;



    right: -18px;



    background: #fff;



    border-radius: 14px;



    padding: 18px 22px;



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



    text-align: center
}







.aib .big {



    font-family: var(--fh);



    font-size: 38px;



    font-weight: 900;



    color: var(--gm);



    line-height: 1
}







.aib .sm {



    font-size: 12px;



    font-weight: 500;



    color: var(--tb);



    margin-top: 3px;



    letter-spacing: .06em
}







.dr {



    position: absolute;



    top: -26px;



    left: -26px;



    width: 100px;



    height: 100px;



    border: 3px solid var(--gp);



    border-radius: 50%;



    opacity: .7;



    pointer-events: none
}







.afs {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 12px;



    margin-top: 24px
}







.af {



    display: flex;



    align-items: flex-start;



    gap: 11px;



    padding: 14px;



    background: #fff;



    border-radius: 12px;



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



    transition: .25s
}







.af:hover {



    border-color: var(--gl);



    transform: translateY(-2px)
}







.afi {



    width: 34px;



    height: 34px;



    flex-shrink: 0;



    border-radius: 9px;



    background: var(--gp);



    display: flex;



    align-items: center;



    justify-content: center
}







.afi svg {



    width: 17px;



    height: 17px;



    fill: var(--gm)
}







.af h5 {



    font-size: 13px;



    font-weight: 600;



    color: var(--td);



    margin-bottom: 1px
}







.af p {



    font-size: 11px;



    color: var(--tb)
}







/* ── PRODUCTS ── */



#products {



    padding: 100px 0;



    background: #fff
}







.ph {



    text-align: center;



    margin-bottom: 40px
}







.ptabs {



    display: flex;



    justify-content: center;



    gap: 10px;



    margin-bottom: 40px
}







.ptab {



    padding: 9px 20px;



    border-radius: 50px;



    font-size: 13px;



    font-weight: 600;



    cursor: pointer;



    transition: all .3s;



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



    color: var(--tb);



    background: transparent;



    font-family: var(--fb)
}







.ptab.active,



.ptab:hover {



    background: var(--gm);



    color: #fff;



    border-color: var(--gm)
}







.pp {



    display: none
}







.pp.active {


    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
}







.pc {



    border-radius: 16px;

    width: calc(33.33% - 26px);

    overflow: hidden;



    background: var(--cream);



    transition: all .35s;



    border: 1px solid transparent
}







.pc:hover {



    transform: translateY(-7px);



    box-shadow: 0 18px 50px rgba(0, 0, 0, .11);



    border-color: var(--gp)
}







.pi {



    position: relative
}







.pbadge {



    position: absolute;



    top: 12px;



    right: 12px;



    background: var(--gm);



    color: #fff;



    font-size: 10px;



    font-weight: 700;



    padding: 4px 11px;



    border-radius: 20px;



    text-transform: uppercase;



    z-index: 3
}







.pinfo {



    padding: 18px
}







.pinfo h3 {



    font-family: var(--fh);



    font-size: 19px;



    font-weight: 700;



    color: var(--gd);



    margin-bottom: 5px
}







.pinfo p {



    font-size: 12px;



    color: var(--tb);



    line-height: 1.6;



    margin-bottom: 14px
}







.pcta {



    display: flex;



    align-items: center;



    justify-content: space-between
}







.eb {



    font-size: 13px;



    font-weight: 600;



    color: var(--gm);



    background: none;



    border: none;



    cursor: pointer;



    font-family: var(--fb);



    transition: .25s;



    display: inline-flex;



    align-items: center;



    gap: 4px;



    padding: 0
}







.eb:hover {



    color: var(--gd);



    gap: 8px
}







/* ── VIDEOS ── */



#videos {



    padding: 88px 0;



    background: var(--gd)
}







.vh {



    text-align: center;



    margin-bottom: 44px
}







.vh h2 {



    font-family: var(--fh);



    font-size: clamp(28px, 3.5vw, 44px);



    color: #fff;



    margin-top: 12px
}







.vh p {



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



    font-size: 15px;



    max-width: 500px;



    margin: 10px auto 0;



    line-height: 1.7
}





.video-silder {

    margin: 0 -12px;

}



.video-silde {

    padding: 0 12px;

}



.vt {



    border-radius: 16px;



    overflow: hidden;



    position: relative;



    cursor: pointer;



    aspect-ratio: 16/9
}







.vt .vbg {



    position: absolute;



    inset: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    transition: all .35s
}







.vt:hover .vbg {



    filter: brightness(1.15)
}







.vov {



    position: absolute;



    inset: 0;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    gap: 10px;



    z-index: 2
}







.pb2 {



    width: 58px;



    height: 58px;



    border-radius: 50%;



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



    backdrop-filter: blur(8px);



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



    display: flex;



    align-items: center;



    justify-content: center;



    transition: .3s
}







.vt:hover .pb2 {



    background: #fff;



    transform: scale(1.1)
}







.pb2 svg {



    fill: #fff;



    width: 22px;



    height: 22px;



    margin-left: 3px;



    transition: .3s
}







.vt:hover .pb2 svg {



    fill: var(--gd)
}







.vlab {



    color: #fff;



    font-size: 13px;



    font-weight: 600;



    text-shadow: 0 1px 4px rgba(0, 0, 0, .6)
}







.vdur {



    position: absolute;



    bottom: 12px;



    left: 14px;



    background: rgba(0, 0, 0, .5);



    color: #fff;



    font-size: 10px;



    padding: 3px 8px;



    border-radius: 4px;



    font-weight: 600
}







/* ── WHY ── */



#why {



    padding: 100px 0;



    background: var(--cream)
}







.wg {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 72px;



    align-items: center
}







.wl {



    display: flex;



    flex-direction: column;



    gap: 16px;



    margin-top: 24px
}







.wi {



    display: flex;



    gap: 16px;



    padding: 18px;



    background: #fff;



    border-radius: 14px;



    transition: .3s;



    border: 2px solid transparent
}







.wi:hover {



    border-color: var(--gl);



    transform: translateX(5px)
}







.wn {



    width: 46px;



    height: 46px;



    border-radius: 50%;



    background: var(--gp);



    color: var(--gm);



    font-family: var(--fh);



    font-weight: 700;



    font-size: 17px;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-shrink: 0
}







.wi h4 {



    font-size: 14px;



    font-weight: 600;



    color: var(--gd);



    margin-bottom: 3px
}







.wi p {



    font-size: 12px;



    color: var(--tb);



    line-height: 1.6
}







/* Why visual grid - CSS image replacements */



.wimg {



    display: grid;



    grid-template-columns: 1fr 1fr;



    grid-template-rows: auto auto;



    gap: 12px;



    height: 460px
}







.wim {



    border-radius: 14px;



    overflow: hidden;



    display: flex;



    align-items: center;



    justify-content: center;



    position: relative
}







.wim::before {



    content: '';



    position: absolute;



    inset: 0;



    background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, .2), transparent 65%)
}







.wim svg {



    width: 40%;



    height: 40%;



    position: relative;



    z-index: 1;



    opacity: .7
}







.wim.tall {



    grid-row: span 2
}







/* ── DATA ── */



.ds {



    background: var(--gb);



    padding: 52px 0
}







.din {



    display: flex;



    justify-content: space-around;



    gap: 24px
}



.din .di {

    width: calc(20% - 24px);

}







.di .dn {



    font-family: var(--fh);



    font-size: 38px;



    font-weight: 900;



    color: #fff;

    text-align: center;

}







.di .dl {



    font-size: 14px;



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



    margin-top: 4px;



    text-align: center;

    letter-spacing: .08em
}







/* ── FEATURES ── */



#features {



    padding: 100px 0;



    background: #fff
}







.fh2 {



    text-align: center;



    margin-bottom: 52px
}







.fg {



    display: grid;



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



    gap: 26px
}







.fc {



    border-radius: 18px;



    overflow: hidden;



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



    transition: .35s;



    background: var(--cream)
}







.fc:hover {



    border-color: var(--gl);



    box-shadow: 0 14px 44px rgba(64, 145, 108, .13);



    transform: translateY(-5px)
}







.fim {



    aspect-ratio: 16/9;



    display: flex;



    align-items: center;



    justify-content: center;



    position: relative;



    overflow: hidden
}







.fim::before {



    content: '';



    position: absolute;



    inset: 0;



    background: radial-gradient(ellipse at 35% 35%, rgba(255, 255, 255, .25), transparent 60%)
}







.fim svg.icon {



    width: 36%;



    height: 36%;



    position: relative;



    z-index: 1;



    opacity: .65
}







.fb2 {



    padding: 22px
}







.fiw {



    width: 44px;



    height: 44px;



    border-radius: 11px;



    background: var(--gp);



    display: flex;



    align-items: center;



    justify-content: center;



    margin-bottom: 14px
}







.fiw svg {



    width: 22px;



    height: 22px;



    fill: var(--gm)
}







.fb2 h3 {



    font-family: var(--fh);



    font-size: 18px;



    font-weight: 700;



    color: var(--gd);



    margin-bottom: 7px
}







.fb2 p {



    font-size: 13px;



    color: var(--tb);



    line-height: 1.7
}







/* ── SUPPORT ── */



#support {



    padding: 68px 0;



    overflow: hidden;



    background: var(--cream);



    border-top: 1px solid var(--sand)
}







.supin {



    text-align: center;

}







.sups {



    display: flex;



    justify-content: center;



    flex-wrap: wrap;



    gap: 8px;



    margin-top: 32px
}







.supl {



    padding: 13px 22px;



    background: #fff;



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



    border-radius: 12px;



    font-size: 16px;



    font-weight: 600;



    color: var(--tb);



    display: flex;



    align-items: center;



    gap: 9px;



    transition: .3s
}



.marquee-row {

    display: flex;

    gap: 8px;

    width: max-content;

}



@keyframes scroll-left {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



@keyframes scroll-right {

    0% {

        transform: translateX(-50%);

    }



    100% {

        transform: translateX(0);

    }

}





.supl:hover {



    border-color: var(--gl);



    color: var(--gm);



    box-shadow: 0 4px 18px rgba(0, 0, 0, .07)
}







.supl svg {



    width: 20px;



    height: 20px;



    fill: var(--gm);



    opacity: .7
}







/* ── CTA DARK ── */



.ctas {



    padding: 96px 0;



    background: var(--gd);



    position: relative;



    overflow: hidden;



    text-align: center
}







.ctas::before {



    content: '';



    position: absolute;



    top: -80px;



    left: 50%;



    transform: translateX(-50%);



    width: 600px;



    height: 600px;



    border-radius: 50%;



    background: radial-gradient(circle, rgba(64, 145, 108, .2), transparent 70%);



    pointer-events: none
}







.ctas h2 {



    font-family: var(--fh);



    font-size: clamp(28px, 4vw, 52px);



    color: #fff;



    position: relative;



    margin-bottom: 14px
}







.ctas p {



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



    font-size: 16px;



    max-width: 500px;



    margin: 0 auto 34px;



    position: relative;



    line-height: 1.5
}







.ctabtns {



    display: flex;



    justify-content: center;



    gap: 14px;



    flex-wrap: wrap;



    position: relative
}




.ctabtns .bp:hover {
    background: #fff !important;
    color: var(--gb) !important;
}


/* ── TESTIMONIALS ── */



#testi {



    padding: 100px 0;



    background: #fff
}







.th {



    text-align: center;



    margin-bottom: 44px
}





.testimonial-silder {

    margin: 0 -12px;

}



.testimonial-silde {

    padding: 0 12px;

    height: 100%;

}



.testimonial-silder .slick-track,

.blog-silder .slick-track {

    display: flex;

}



.testimonial-silder.slick-initialized .slick-slide {

    display: flex !important;

    height: inherit;

}



.blog-silder.slick-initialized .slick-slide {

    height: inherit !important;

}



.testimonial-silder.slick-initialized .slick-slide>div,

.blog-silder.slick-initialized .slick-slide>div {

    height: 100%;

}



.slick-dots {

    display: flex;

    align-items: center;

    justify-content: center;

    column-gap: 7px;

    margin-top: 20px;

}



.slick-dots li button {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    border: none;

    background: var(--sand);

    cursor: pointer;

    font-size: 0;

    transition: .3s;

}



.slick-dots li.slick-active button {

    background: var(--gm);

    width: 24px;

    border-radius: 4px;

}



.tca {



    background: var(--cream);

    height: 100%;



    border-radius: 18px;



    padding: 28px;



    border: 1px solid var(--sand)
}







.tst {



    display: flex;



    gap: 3px;



    margin-bottom: 12px
}







.star {



    width: 14px;



    height: 14px;



    fill: var(--gold)
}







.tq {



    font-family: var(--fh);



    font-size: 44px;



    color: var(--gp);



    line-height: .9;



    margin-bottom: 4px
}







.tt {



    font-size: 13px;



    color: var(--tb);



    line-height: 1.5;



    margin-bottom: 18px
}







.tau {



    display: flex;



    align-items: center;



    gap: 12px
}







.tav {



    width: 44px;



    height: 44px;



    border-radius: 50%;



    flex-shrink: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    font-family: var(--fh);



    font-size: 18px;



    font-weight: 700
}







.tan {



    font-size: 13px;



    font-weight: 600;



    color: var(--td)
}







.tar {



    font-size: 11px;



    color: var(--tb)
}







.tnav {



    display: flex;



    justify-content: center;



    gap: 10px;



    margin-top: 32px
}







.tdot {



    width: 8px;



    height: 8px;



    border-radius: 50%;



    background: var(--sand);



    cursor: pointer;



    transition: .3s
}







.tdot.active {



    background: var(--gm);



    width: 24px;



    border-radius: 4px
}







/* ── BLOG ── */



#blog {



    padding: 100px 0;



    background: var(--cream)
}







.bhead {



    display: flex;



    justify-content: space-between;



    align-items: flex-end;



    margin-bottom: 40px
}



.blog-silder {

    margin: 0 -10px;

}



.blog-silde {

    height: 100%;

    padding: 0 10px;

}





.bc {



    background: #fff;



    border-radius: 14px;



    overflow: hidden;



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



    height: 100%;

    transition: .35s
}

.bc .bim {
    transition: all .3s ease-in-out;
}

.bc .bim img {
    width: 100%;
    transition: all .3s ease-in-out;
}

.bc:hover .bim {
    transform: scale(1.02);
}


.bim {



    aspect-ratio: 16/10;



    display: flex;



    align-items: center;



    justify-content: center;



    position: relative;



    overflow: hidden
}







.bim::before {



    content: '';



    position: absolute;



    inset: 0;



    background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, .2), transparent 55%)
}







.bim svg {



    width: 30%;



    height: 30%;



    position: relative;



    z-index: 1;



    opacity: .55
}







.bin {



    padding: 20px
}







.bcat {



    font-size: 10px;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: .09em;



    color: var(--gb);



    margin-bottom: 6px
}







.btit {



    font-family: var(--fh);



    font-size: 17px;



    font-weight: 700;



    color: var(--td);



    line-height: 1.35;



    margin-bottom: 8px;



    transition: .2s;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden
}







.bc:hover .btit {



    color: var(--gm)
}







.bmet {



    display: flex;



    align-items: center;



    justify-content: space-between;



    font-size: 11px;



    color: var(--tb);



    margin-top: 12px;



    padding-top: 12px;



    border-top: 1px solid var(--sand)
}







/* ── CTA BG ── */



.cta-forest {



    position: relative;



    overflow: hidden;



    padding: 96px 24px;



    text-align: center
}







.cta-forest-bg {



    position: absolute;



    inset: 0;



    background: linear-gradient(135deg, #0d2b1a 0%, #1a5033 40%, #2d8050 70%, #1a5033 100%)
}







.cta-forest-bg::before {



    content: '';



    position: absolute;



    inset: 0;



    background: radial-gradient(ellipse at 50% 0%, rgba(116, 198, 157, .2), transparent 60%)
}







/* Forest tree silhouettes */



.forest-trees {



    position: absolute;



    bottom: 0;



    left: 0;



    right: 0;



    height: 45%;



    opacity: .15
}







/* ── FOOTER ── */



footer {



    background: #151515;



    color: #bababa;



    padding: 80px 0 0
}







.ftp {



    display: grid;



    grid-template-columns: 2fr 1fr 1fr 1fr;



    gap: 44px;



    padding-bottom: 56px
}







.fbr img {



    max-height: 70px;



}







.fbr p {



    font-size: 13px;



    color: #bababa;



    line-height: 1.75;



    margin: 12px 0 22px
}







.sl {



    display: flex;



    gap: 10px
}







.sc2 {



    width: 34px;



    height: 34px;



    border-radius: 50%;



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



    display: flex;



    align-items: center;



    justify-content: center;



    transition: .3s;



    cursor: pointer
}







.sc2:hover {



    background: var(--gm);



    transform: translateY(-2px);



}



.sc2.facebook:hover {

    background: #3b5998;

}



.sc2.linkedin:hover {

    background: #0072b1;

}



.sc2.instagram:hover {

    background: #c13584;

}



.sc2 a {

    display: flex;

}



.fc2 h4 {



    font-size: 15px;



    font-weight: 600;



    color: #fff;



    margin-bottom: 18px;



    letter-spacing: .03em
}







.fc2 ul li {



    margin-bottom: 12px
}







.fc2 ul li a {



    font-size: 13px;



    color: #bababa;



    transition: .2s
}







.fc2 ul li a:hover {



    color: #fef7de;

}



.info-text {

    display: flex;

    align-items: center;

    justify-content: start;

    column-gap: 8px;

}



.info-text img {

    width: 14px;

    height: 14px;

    object-fit: contain;

}





/* Footer map - CSS visual */



.fmap {



    margin-top: 16px;



    border-radius: 10px;



    overflow: hidden;



    height: 130px;



    background: linear-gradient(135deg, #1e2e1e, #2a3e2a);



    position: relative;



    display: flex;



    align-items: center;



    justify-content: center
}







.fmap-grid {



    position: absolute;



    inset: 0;



    opacity: .2;



    background-image: linear-gradient(rgba(116, 198, 157, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 198, 157, .5) 1px, transparent 1px);



    background-size: 20px 20px
}







.fmap-pin {



    position: relative;



    z-index: 1;



    text-align: center
}







.fmap-pin span {



    font-size: 24px
}







.fmap-pin p {



    font-size: 11px;



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



    margin-top: 4px
}







.fbot {



    border-top: 1px solid rgba(255, 255, 255, .08);



    padding: 22px 0;



    display: flex;



    justify-content: space-between;



    align-items: center;



    flex-wrap: wrap;



    gap: 10px;



    font-size: 12px;



    color: #bababa;

}







/* ── MODAL ── */



.mov {



    position: fixed;



    inset: 0;



    background: rgba(0, 0, 0, .62);



    z-index: 2000;



    display: flex;



    align-items: center;



    justify-content: center;



    opacity: 0;



    pointer-events: none;



    transition: .3s;



    backdrop-filter: blur(5px)
}







.mov.open {



    opacity: 1;



    pointer-events: all
}







.mb {



    background: #fff;



    border-radius: 18px;



    padding: 36px;



    max-width: 460px;



    width: 90%;



    transform: scale(.93) translateY(14px);



    transition: .3s;



    max-height: 90vh;



    overflow-y: auto
}







.mov.open .mb {



    transform: scale(1) translateY(0)
}







.mh {



    display: flex;



    justify-content: space-between;



    align-items: flex-start;



    margin-bottom: 22px
}







.mh h3 {



    font-family: var(--fh);



    font-size: 24px;



    color: var(--gd)
}







.mcl {



    background: var(--sand);



    border: none;



    width: 30px;



    height: 30px;



    border-radius: 50%;



    cursor: pointer;



    font-size: 15px;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-shrink: 0;



    transition: .2s
}







.mcl:hover {



    background: var(--gp)
}







.fg2 {



    margin-bottom: 14px
}







.fg2 label {



    font-size: 12px;



    font-weight: 600;



    color: var(--td);



    display: block;



    margin-bottom: 5px
}







.fg2 input,



.fg2 textarea,



.fg2 select {



    width: 100%;



    padding: 11px 14px;



    border: 1.5px solid var(--sand);



    border-radius: 9px;



    font-family: var(--fb);



    font-size: 13px;



    color: var(--td);



    background: var(--cream);



    outline: none;



    transition: .2s
}







.fg2 input:focus,



.fg2 textarea:focus,



.fg2 select:focus {



    border-color: var(--gb)
}







.fg2 textarea {



    resize: vertical;



    min-height: 84px
}







.fsbm {



    width: 100%;



    padding: 13px;



    background: var(--gm);



    color: #fff;



    border: none;



    border-radius: 50px;



    font-size: 14px;



    font-weight: 600;



    cursor: pointer;



    transition: .3s;



    font-family: var(--fb)
}







.fsbm:hover {



    background: var(--gd)
}







.bktop {



    position: fixed;



    bottom: 26px;



    right: 26px;



    z-index: 999;



    width: 42px;



    height: 42px;



    border-radius: 50%;



    background: var(--gm);



    border: none;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



    opacity: 0;



    transform: translateY(18px);



    transition: .3s;



    box-shadow: 0 4px 16px rgba(0, 0, 0, .2)
}







.bktop.vis {



    opacity: 1;



    transform: translateY(0)
}







.bktop:hover {



    background: var(--gd)
}







.bktop svg {



    width: 17px;



    height: 17px;



    stroke: #fff;



    fill: none;



    stroke-width: 2.5
}





.mb-menu-logo {

    display: none;

}



.menu-icon {

    display: none;

    width: 2rem;

    height: 2rem;

    position: relative;

    padding: 0rem;

    margin-top: 0rem;

    margin-left: .9375rem;

    color: var(--white);

}



.menu-icon span {

    display: block;

    width: 1.25rem;

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    height: .125rem;

    background: var(--white);

    margin: auto;

}



.header.sc .menu-icon {

    color: var(--gd);

}



.header.sc .menu-icon span {

    background: var(--gd);

}



.menu-icon span:before {

    content: "";

    width: 1.5625rem;

    position: absolute;

    top: -0.5rem;

    right: 0;

    height: .125rem;

    background: currentColor;

}



.menu-icon span:after {

    content: "";

    width: 1.5625rem;

    position: absolute;

    bottom: -0.5rem;

    right: 0;

    height: .125rem;

    background: currentColor;

}



.body-fixed {

    overflow: hidden;

}



.sidebar-overlay {

    visibility: hidden;

    min-height: 100vh;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: 0;

    background: #000;

    z-index: 998;

}



.body-fixed .sidebar-overlay {

    opacity: .8;

    visibility: visible;

    left: 0;

    transition: all 0.6s ease-in-out;

}



#strip .button {

    display: none;

}



.responsive-btn,

.responsive-sl {

    display: none;

}





/* ── RESPONSIVE ── */



@media(max-width:1199px) {

    #hero {

        height: 50vh;

    }

}



@media(max-width:991px) {



    .sg,

    .ag,

    .wg {



        grid-template-columns: 1fr
    }







    .pp.active,


    .bgrid {



        grid-template-columns: 1fr 1fr
    }







    .vg {



        grid-template-columns: 1fr 1fr
    }







    .fg {



        grid-template-columns: 1fr 1fr
    }







    .ftp {



        grid-template-columns: 1fr 1fr
    }







    .hstats {



        display: none
    }







    .bhead {

        justify-content: center;

        align-items: center
    }



    .bhead>div {

        text-align: center;

    }







    .wimg {

        height: 420px
    }



    .menu-icon {

        display: inline-block;

        vertical-align: middle;

    }



    .navigation-bar {

        position: fixed;

        width: 50%;

        min-height: 100vh;

        top: 0;

        bottom: 0;

        left: -50%;

        transition: all .6s ease-in-out;

        margin: 0;

        z-index: 9999;

        height: 100vh;

        background: rgba(250, 247, 240, .97);

    }



    .navigation-bar.slide-menu {

        left: 0;

    }



    .navbar-main {

        width: 100%;

        margin: 0;

        padding: 0;

        display: block;

    }



    .mb-menu-logo {

        display: block;

        width: 100%;

        padding: 15px 55px 15px 15px;

        display: block;

        width: 100%;

        border-bottom: .0625rem solid rgb(179 179 179 / 20%);

    }



    .mb-menu-logo .menu-logo {

        max-width: 144px;

        display: block;

    }



    .mb-menu-logo .menu-logo img {

        width: 100%;

    }



    .mb-menu-logo .close-menu {

        position: absolute;

        right: 1.25rem;

        top: 2.1875rem;

        width: 1.5625rem;

        height: 1.5625rem;

        padding: .25rem;

    }



    .mb-menu-logo .close-menu:before {

        content: '';

        width: 100%;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        height: .125rem;

        background: var(--gd);

        -webkit-transform: rotate(45deg);

        transform: rotate(45deg);

        margin: auto;

        bottom: 0;

    }



    .mb-menu-logo .close-menu:after {

        content: '';

        width: 100%;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        height: .125rem;

        background: var(--gd);

        -webkit-transform: rotate(-45deg);

        transform: rotate(-45deg);

        margin: auto;

        bottom: 0;

    }



    .nav-menu-main {

        overflow-y: auto;

        height: calc(100vh - 5.375rem);

        min-height: calc(100vh - 5.375rem);

    }



    .nav-menu-main .nlinks {

        padding-top: 1.5625rem;

        padding-bottom: .9375rem;

        margin-right: 0 !important;

        display: block;

    }



    .nav-menu-main .nlinks a {

        padding: 15px 25px;

        display: block;

        font-size: 16px;

        color: var(--tb);

        border-bottom: .0625rem solid rgb(179 179 179 / 20%);

    }



    #strip,

    #about,

    #products,

    #videos,

    #why,

    #features,

    #support,

    .ctas,

    #testi,

    #blog {

        padding: 60px 0;

    }



    #strip .st .stbtn {

        display: none;

    }



    .sg,

    .wg {

        gap: 40px;

    }



    #strip .button {

        display: block;

        text-align: center;

    }



    #strip .button .stbtn {

        margin-top: 0;

    }



    .about-main-img {

        background: transparent;

        aspect-ratio: inherit;

    }



    .aib {

        bottom: -40px;

        right: 30px;

    }



    .aiw .dr {

        display: none;

    }



    .about-btn {

        justify-content: center;

        margin-top: 40px !important;

    }



    .wim img {

        width: 100%;

        height: 100%;

    }



    .di .dn {

        font-size: 28px;

    }



    .ds {

        padding: 42px 0;

    }



    .di .dl {

        font-size: 13px;

    }



    .din {

        gap: 20px;

    }



    .din .di {

        width: calc(20% - 20px);

    }



    .bhead .btn {

        display: none;

    }



    .responsive-btn {

        display: block;

        text-align: center;

        margin-top: 30px;

    }



    .cta-forest {

        padding: 46px 24px;

    }

    .pp.active{
        gap: 20px;
    }

    .pc {
        width: calc(50% - 20px);
    }
}





@media(max-width:767px) {

    .ham {



        display: flex
    }





    .vg {



        grid-template-columns: 1fr
    }



    .afs {



        grid-template-columns: 1fr
    }





    .tca {



        flex: 0 0 calc(100% - 2px)
    }



    .fg {

        gap: 16px;

    }



    .supl {

        font-size: 14px;

        padding: 10px 15px;

    }



    .htitle br {

        display: none;

    }



    .hdesc {

        max-width: 100%;

        margin: 15px 0 15px;

    }



    #hero {

        height: 100vh;

        min-height: 420px;

    }



    .sdots {

        bottom: 36px;

    }



    .ftp {

        padding-bottom: 40px;

    }



    .bktop {

        bottom: 46px;

    }



    #strip,

    #about,

    #products,

    #videos,

    #why,

    #features,

    #support,

    .ctas,

    #testi,

    #blog {

        padding: 50px 0;

    }



    footer {

        padding: 50px 0 0;

    }

}



@media (max-width: 568px) {



    .pp.active,

    .bgrid,

    .fg {

        grid-template-columns: 1fr;

    }

      .pp.active{
        gap: 15px;
    }

    .pc {
        width: 100%;
    }


    #about {

        overflow: hidden;

    }



    .ftp {

        display: flex;

        flex-wrap: wrap;

        row-gap: 40px;

        column-gap: 20px;

    }



    .fc2 {

        width: calc(50% - 20px);

    }



    .fbr {

        width: 100%;

    }



    .header {

        padding: 0 15px;

    }



    .nlogo img {

        max-height: 60px;

    }



    .menu-icon {

        margin-left: 8px;

    }



    #hero {

        height: 80vh;

        min-height: 420px;

    }



    .navigation-bar {

        width: 90%;

        left: -90%;

    }



    .nav-menu-main .nlinks a {

        padding: 12px 20px;

        font-size: 14px;

    }



    .gbtn,

    .btn {

        padding: 10px 18px;

    }



    .con {

        padding: 0 15px;

    }



    .tc {

        padding: 12px;

    }



    .tci {

        width: 35px;

        height: 35px;

    }



    .cb {

        padding: 40px 0;

    }



    .about-main-img img {

        width: 100%;

    }



    .aib {

        bottom: -30px;

        right: 0px;

        padding: 15px 12px;

    }



    .aib .big {

        font-size: 30px;

    }



    p,

    .st p,

    .cb p {

        font-size: 14px;

    }



    #about p,

    #products p,

    #why p,

    #features p,

    .ctas p,

    #testi p,

    #blog p,

    .fim p,

    .cta-forest p {

        font-size: 14px !important;

    }



    .ptabs {

        margin-bottom: 10px;

        padding-bottom: 20px;

        overflow-x: scroll;

        justify-content: start;

    }



    .ptab {

        padding: 5px 18px;

        white-space: nowrap;

        height: 40px;

    }



    .img-vis::before,

    .img-vis::after {

        display: none;

    }



    .img-vis img,

    .fim img,

    .blog-silde img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    .wimg {

        height: 270px;

    }



    .din {

        flex-wrap: wrap;

    }



    .din .di {

        width: calc(50% - 20px);

    }



    .fh2,

    .th,

    .bhead {

        margin-bottom: 30px;

    }



    .supl {

        font-size: 12px;

        padding: 10px 12px;

    }



    .supl svg {

        width: 16px;

        height: 16px;

    }



    .sups {

        margin-top: 20px;

    }



    .tca {

        padding: 15px;

    }



    .fbr .sl {

        display: none;

    }



    .fbr p {

        margin-bottom: 0;

    }



    .responsive-sl {

        display: flex;

        margin-top: 15px;

    }



    .cta-forest p {

        margin-bottom: 20px !important;

    }



    .fbot {

        justify-content: center;

    }



    .bktop {

        bottom: 46px;

        right: 10px;

    }



    footer {

        padding: 30px 0 0;

    }



    .ftp {

        padding-bottom: 20px;

    }

}