@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: all .4s ease-in-out;



}







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
}







:-webkit-autofill,



:-webkit-autofill:hover,



:-webkit-autofill:focus,



:-webkit-autofill:active {



    -webkit-text-fill-color: #000 !important;



    transition: background-color 5000000s ease-in-out 0s !important;



}







.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);



}







.icon-certified {



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



}







.icon-calendar {



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



}







.icon-no-plastic {



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



}







.icon-support {



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



}







.icon-biodegradable {



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



}







.icon-lightweight {



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



}







.icon-printing {



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



}







.icon-tooling {



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



}







.icon-production {



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



}







.icon-food {



    mask-image: url(../img/svg/food-and-beverages.svg);



}







.icon-agriculture {



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



}







.icon-pharma {



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



}







.icon-automotive {



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



}







.icon-fmcg {



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



}







.icon-appliances {



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



}







.icon-unit {



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



}







.icon-industry {



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



}







.icon-plastic {



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



}







.icon-turnaround {



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



}







.icon-manufacturing {



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



}







.icon-whatsapp {



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



}







.icon-quote {



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



}







.whatapp-btn {



    position: fixed;



    right: 20px;



    bottom: 90px;



    width: 60px;



    height: 60px;



    background-color: #1cd766;



    border-radius: 50%;



    z-index: 99;



    display: flex;



    align-items: center;



    justify-content: center;



}







.whatapp-btn .icon {



    width: 30px;



    height: 30px;



    background-color: #fff;



}











.d-flex {



    display: flex;



}







.d-none {



    display: none;



}







.d-sm-flex {



    display: flex;



}







.justify-content-space-between {



    justify-content: space-between;



}







.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: var(--tr);



    border: none;



    line-height: 1
}







.bp {



    background: var(--gm);



    color: #fff
}







.bp:hover {



    background: var(--gold);



}







.cm {



    background: var(--cream);



    color: #000;



}







.cm:hover {



    background: var(--gold);



    color: #fff;



}







.bo {



    background: transparent;



    color: var(--gm);



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







.bo:hover {



    background: var(--gm);



    color: #fff
}







.bw {



    background: #fff;



    color: var(--gd)
}







.bw:hover {



    background: var(--gold);



    color: #fff
}







.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,



.home .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 {

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    padding: 0 24px;

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



.home .header {

    position: fixed;

}



header.sc {

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

    backdrop-filter: blur(14px);

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

    position: fixed;

}





.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: 50px;



}







.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;



    padding-right: 20px;



}







.nlinks a {

    font-size: 16px;

    font-weight: 500;

    color: var(--tb);

    padding: 8px 14px;

    border-radius: 8px;

    transition: all .25s
}



.home .header .nlinks a {

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

}



.header.sc .nlinks a {

    color: var(--tb)
}







.header.sc .nlinks a:hover {

    color: var(--gd);

}







.nlinks a:hover,

.home .header .nlinks a:hover {

    color: var(--gold);

}







.nqbtn {



    background: var(--gm);



    color: var(--white);



    padding: 10px 22px;



    border-radius: 50px;



    font-weight: 600;



    font-size: 14px;



    cursor: pointer;



    border: none;



    font-family: var(--fb);



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



}



.home .header .nqbtn {

    background: #fff;

    color: var(--gd);

}



.header.sc .nqbtn {



    background: var(--gm);



    color: #fff
}







.nqbtn:hover,

.home .header .nqbtn:hover {



    background-color: var(--gold);



    color: var(--white);



}







.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(--gold);



    color: #fff;



}







/* ── HERO ── */



#hero {



    position: relative;



    height: 100vh;



    min-height: 800px;



    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-slider {



    position: relative;



    z-index: 1;



}







.hero-slider,



.hero-slider-main,



.hero-slider .slick-list,



.hero-slider .slick-track,



.hero-slider .slick-slide,



.hero-slider .slick-slide>div,



.hero-slider .hero-slider-col {



    height: 100%;



}







.hero-deco {



    position: absolute;



    inset: 0;



    overflow: hidden;



    pointer-events: none;



}

.hero-banner-form .fg2 label {
    display: none !important;
}


.hero-deco::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}



.hero-deco img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







#hero .container {



    max-width: 1200px;



    margin: 0 auto;



    height: 100%;



    padding-top: 72px;



    padding-left: 24px;



    padding-right: 24px;



    display: flex;



    align-items: center;



    position: relative;



    z-index: 2;



}







.hero-banner-content {



    max-width: 715px;



    position: relative;



    z-index: 1;



}







.hero-banner-form {



    position: absolute;



    max-width: 1200px;



    top: 0;



    height: 100%;



    left: 0;



    right: 0;



    margin: auto;



    display: flex;



    align-items: center;



}







.hero-banner-form .mb {
    margin-left: auto;
    margin-top: 72px;
    position: relative;
    z-index: 1;
    max-height: inherit;
    overflow: inherit;
    border-radius: 25px;
    max-width: 390px;
    background-color: rgba(0, 0, 0, .75);
    background-image: linear-gradient(rgba(72, 158, 52, 0.6), rgba(12, 82, 144, 0.6));
}


.hero-banner-form .mb .mh h3 {
    font-size: 28px;
    font-weight: 800;
    color: var(--white);
    line-height: 28px;
    padding: 0px;
    pointer-events: none;
    display: block;
    position: relative;
    margin-bottom: 0px;
    background-color: transparent;
    font-family: var(--fh);
    letter-spacing: 0.4px;
}


.hero-banner-form .mb .mh p {
    color: var(--white) !important;
    font-size: 14px !important;
    margin-top: 6px !important;
}



.hero-slider .slick-dots {



    position: absolute;



    bottom: 1.3125rem;



    left: 50%;



    display: flex;



    justify-content: center;



    align-items: center;



    z-index: 1;



    transform: translateX(-50%);



}







.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, 16px);



    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: var(--tr)
}







.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: 1px 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: var(--tr)
}







.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(--white)
}







.tc h4 {



    color: #fff;



    font-size: 16px;



    font-weight: 600;



    margin-bottom: 5px
}







.tc p {



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



    font-size: 14px;



    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 .icon {



    width: 17px;



    height: 17px;



    background-color: var(--gm);



}







.af h5 {



    font-size: 14px;



    font-weight: 600;



    color: var(--td);



    margin-bottom: 1px
}







.af p {



    font-size: 11px;



    font-weight: 500;



    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 18px 25px;



}







.pinfo h3 {



    font-family: var(--fh);



    font-size: 20px;



    font-weight: 700;



    color: var(--gd);



    margin-bottom: 10px
}







.pinfo p {



    font-size: 13px;



    font-weight: 500;



    color: var(--tb);



    line-height: 1.6;



    margin-bottom: 26px;



}







.pcta {



    display: flex;



    align-items: center;



    justify-content: space-between
}







.pcta .bo {



    font-size: 13px;



    padding: 10px 15px;



}







.pc:hover .pcta .bo {



    background: var(--gm);



    color: #fff
}







.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: 16px;



    font-weight: 600;



    color: var(--gd);



    margin-bottom: 3px
}







.wi p {



    font-size: 13px;



    font-weight: 500;



    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;

    width: 100%;

    height: 100%;

}



.wim img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}







.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(--gd);



    padding: 52px 0
}







.din {



    display: flex;



    justify-content: space-around;



    gap: 10px
}







.din .di {



    width: calc(20% - 10px);



    border-radius: 16px;



    padding: 25px;



    transition: all 0.3s ease;



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



    backdrop-filter: blur(6px);



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



}







.din .di:hover {



    transform: translateY(-6px);



    border-color: var(--white);



    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);



}







.di .icon-box {



    width: 55px;



    height: 55px;



    border-radius: 50%;



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



    display: flex;



    align-items: center;



    justify-content: center;



    margin: 0 auto 15px;



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



}







.di .icon-box .icon {



    width: 30px;



    height: 30px;



    background-color: var(--white)
}







.di .dn {



    font-family: var(--fh);



    font-size: 38px;



    font-weight: 900;



    color: var(--gold);



    text-align: center;



}







.di .dl {



    font-size: 14px;



    color: #fff;



    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 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}







.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)
}







.fiw .icon {



    width: 22px;



    height: 22px;



    background-color: 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;



    font-weight: 500;



    color: var(--tb);



    line-height: 1.6
}







/* ── 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: 15px
}



#support .con {

    margin-bottom: 30px;

}







.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 .icon {



    width: 20px;



    height: 20px;



    fill: var(--gm);



}







/* ── 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: var(--gold) !important;



    color: var(--white) !important;



}







.ctabtns svg {



    animation: innerCircle 1s ease-in-out infinite alternate;



    -webkit-animation: innerCircle 1s ease-in-out infinite alternate;



}







/* ── 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: #e16f00
}







.tq {



    font-family: var(--fh);



    font-size: 44px;



    color: var(--gp);



    line-height: .9;



    margin-bottom: 4px
}







.tt {



    font-size: 13px;



    font-weight: 500;



    color: var(--tb);



    line-height: 1.5;



    margin-bottom: 35px
}







.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: 14px;



    font-weight: 600;



    color: var(--td)
}







.tar {



    font-size: 12px;



    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: center;



    align-items: flex-end;



    margin-bottom: 40px
}







.bhead>div,



.responsive-btn {



    text-align: center;



}







.responsive-btn {



    margin-top: 30px;



}







.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);



}







.btit {



    font-family: var(--fh);



    font-size: 18px;



    font-weight: 700;



    color: var(--td);



    line-height: 1.35;



    margin-bottom: 12px;



    transition: .2s;



    display: -webkit-box;



    -webkit-line-clamp: 2;



    -webkit-box-orient: vertical;



    overflow: hidden
}







.bc:hover .btit {



    color: var(--gm)
}







.bin p {



    font-size: 14px;



    font-weight: 500;



    color: var(--tb);



    line-height: 1.6;



    display: -webkit-box;



    -webkit-line-clamp: 3;



    -webkit-box-orient: vertical;



    overflow: hidden
}







.bin .bdate {



    font-size: 10px;



    font-weight: 500;



    color: var(--gb);



}







.mb-15 {



    margin-bottom: 15px;



}







.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: 60px;



}







.fbr p {



    font-size: 14px;



    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: 16px;



    font-weight: 600;



    color: #fff;



    margin-bottom: 18px;



    letter-spacing: .03em
}







.fc2 ul li {



    margin-bottom: 12px
}



.fc2.contact {

    min-width: 230px;

}







.fc2 ul li a,



.fc2 ul li p {



    font-size: 14px;



    font-weight: 500;



    color: rgb(255 255 255 / 80%);



    transition: .2s;



    line-height: 1.5;



}







.fc2 ul li a:hover {



    color: var(--gold);



}







.info-text {



    display: flex;



    justify-content: start;



    column-gap: 12px;



}







.info-text img {



    width: 16px;



    height: 16px;



    object-fit: contain;



    margin-top: 2px;







}







/* 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;



    font-weight: 500;



    color: #bababa;



}







.fbot a {



    transition: var(--tr);



}







.fbot a:hover {



    color: var(--gold);



}







/* ── 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: 30px;



    padding: 30px;



    max-width: 460px;



    width: 90%;



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



    transition: .3s;



    max-height: 90vh;



    overflow-y: auto
}

.mb .btn {
    width: 100%;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 12px;
}

.hero-banner-form .mb .btn {
    background: var(--gold);
    color: #000;
}

.hero-banner-form .mb .btn:hover {
    background: var(--gb);
    color: var(--white);
}


.model-open {

    overflow: hidden;

}





.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: 16px
}







.fg2 label {



    font-size: 12px;



    font-weight: 600;



    color: var(--td);



    display: block;



    margin-bottom: 7px
}







.fg2 input,



.fg2 textarea,



.fg2 select {

    width: 100%;
    background-color: #f6f6f6;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    line-height: 20px;
    height: 45px;
    padding: 12px;
    color: #333333;
    font-weight: 500;
    resize: none;
    -webkit-appearance: none;
    position: relative;
    font-family: var(--fb);
}


.fg2 input:focus-visible,
.fg2 textarea:focus-visible,
.fg2 select:focus-visible {
    outline: none;
}

.hero-banner-form .fg2 input,
.hero-banner-form .fg2 textarea,
.hero-banner-form .fg2 select {
    background-color: #fff;
    border-color: #fff;
}


.fg2 select {



    background-image: url(../img/svg/select-down.svg);



    background-repeat: no-repeat;



    background-position: center right 20px;



    background-size: 10px;



    padding: 11px 40px 11px 14px;



}







.fg2 select option {



    background-color: #fff;



}







select:has(option:checked:first-child) {



    color: #747474;



}







.fg2 input:focus,



.fg2 textarea:focus,



.fg2 select:focus {



    border-color: var(--sand);



    background-color: var(--cream);



}







.fg2 textarea {



    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;



    color: var(--gd);



    margin-left: .9375rem;



}







.menu-icon span {



    display: block;



    width: 1.25rem;



    position: absolute;



    top: 0;



    bottom: 0;



    right: 0;



    height: .125rem;



    background: var(--gd);



    margin: auto;



}



.home .menu-icon {

    color: var(--white);

}



.home .header.sc .menu-icon {

    color: var(--gd);

}





.home .menu-icon span {

    background: var(--white);

}



.home .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-sl {



    display: none;



}







.quote-icon {



    margin-bottom: 10px;



}







.quote-icon .icon {



    width: 40px;



    height: 40px;



    background-color: rgb(201 168 76 / 22%);



}











@keyframes innerCircle {







    0% {



        -webkit-transform: rotate(0) skew(1deg)
    }







    10% {



        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }







    20% {



        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }







    30% {



        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }







    40% {



        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }







    50% {



        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }







    100% {



        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }







}



.marquee-main {

    position: relative;

}



.marquee-main::before {

    content: '';

    position: absolute;

    width: 130px;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 1;

    background: linear-gradient(to right, #faf7f0, transparent);

}



.marquee-main::after {

    content: '';

    position: absolute;

    width: 130px;

    height: 100%;

    top: 0;

    right: 0;

    z-index: 1;

    background: linear-gradient(to left, #faf7f0, transparent);

}



.hero-form-row+p {

    position: relative;

}



.wpcf7-form-control-wrap {

    display: block;

}



.wpcf7-form-control-wrap .wpcf7-not-valid-tip,

.wpcf7-form-control-wrap label.error {

    position: absolute;

    right: 0;

    top: -1.25rem;

    width: auto;

    height: auto;

    margin: 0;

    font-size: 12px !important;

    line-height: 12px !important;

    background: #fb0101;

    padding: .3125rem .3125rem .25rem !important;

    color: #fff !important;

}



.wpcf7-form-control-wrap .wpcf7-not-valid-tip:after,

.wpcf7-form-control-wrap label.error:after,

.error:after {

    border-color: #fb0101 transparent transparent;

    -o-border-image: none;

    border-image: none;

    border-right: .375rem solid transparent;

    border-style: solid;

    border-width: .375rem;

    content: "";

    height: 0;

    left: .3125rem;

    position: absolute;

    bottom: -0.625rem;

    width: 0;

    transform: rotate(360deg);

}



.wpcf7 form .wpcf7-response-output {

    padding: .3125rem !important;

    text-align: center !important;

    margin: 15px 0 0 !important;

}



.wpcf7 form.failed .wpcf7-response-output,

.wpcf7 form.aborted .wpcf7-response-output,

.wpcf7 form.invalid .wpcf7-response-output,

.wpcf7 form.unaccepted .wpcf7-response-output,

.wpcf7 form.payment-required .wpcf7-response-output {

    border: 1px solid #fb0101 !important;

    color: #fb0101 !important;

    font-size: 12px !important;

}



.wpcf7 form.sent .wpcf7-response-output {

    border: 1px solid #46b450 !important;

    color: #46b450 !important;

}



.wpcf7 form.spam .wpcf7-response-output {

    border: 1px solid #f56e28 !important;

    color: #f56e28 !important;

}



.wpcf7-spinner {

    position: absolute !important;

    top: 0;

    right: 0;

    left: 0;

    bottom: 0;

    margin: auto !important;

    z-index: 2;

}



.common-sec {

    padding: 100px 0;

}



.thank-you-sec,

.error-sec {

    height: calc(100vh - var(--header-height));

    display: flex;

    align-items: center;

}



.thank-you-sec .thank-you-img {

    max-width: 150px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 20px;

    display: block;

}



img {

    display: block;

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

}



.text-center {

    text-align: center !important;

}



.thank-you-sec .thank-you-con .thank-you-title {

    font-size: 120px;

    line-height: 1;

    margin-bottom: 15px;

    font-weight: 600;

    color: var(--gd);

    font-family: var(--fh);

}



.thank-you-sec .thank-you-con .thank-you-title b,

.error-sec .error-title b {

    font-weight: 700 !important;

}



.thank-you-sec .thank-you-con p {

    color: var(--tb);

    font-size: 18px;

    font-weight: 500;

    display: block;

    line-height: 1.4;

    margin-bottom: 22px;

}



.error-sec .error-con {

    text-align: center;

    max-width: 450px;

    margin: auto;

}



.error-sec .error-title {

    font-size: 200px;

    font-weight: 800;

    color: var(--gd);

    line-height: 1.2;

}



.error-sec .error-title span {

    color: var(--gold);

}



.error-subtitle {

    font-size: 50px;

    line-height: 1;

    color: var(--gd);

    font-weight: 700;

    padding-bottom: 20px;

}



.error-sec p {

    color: var(--tb);

    font-size: 1rem;

    font-weight: 500;

    display: block;

    line-height: 1.4;

    margin-bottom: 1.375rem;

}

.inner-banner-sec {
    position: relative;
}

.inner-banner-image {
    position: relative;
    width: 100%;
    height: 500px;
}

.inner-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inner-banner-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.inner-banner-content {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    left: 50%;
    padding: 0 30px;
}

.inner-banner-title {
    color: var(--white);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3;
    display: block;
    margin-bottom: 12px;
}

.inner-banner-content .cms-con {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 18px;
}

.inner-banner-content .cms-con p {
    color: rgb(255 255 255 / 91%);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.breadcrumbs span {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    padding: 0 5px;
    color: #fff;
}

.breadcrumbs span a {
    color: #fff;
    font-weight: 400;
    transition: all .5s ease-in-out;
}

.breadcrumbs span a:hover {
    color: var(--gold);
}

.our-product-list-sec,
.product-details-sec {
    background-color: var(--white);
}

.our-product-list-sec .img-vis img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.product-details-grid .img-box {
    width: 100%;
    height: 100%;
}

.product-details-grid .img-box img {
    width: 100%;
    aspect-ratio: 1 / 0.75;
    object-fit: cover;
}

.specs-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gb);
    margin-bottom: 10px;
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.features-list li {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 10px;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--tb);
    font-weight: 500;
}

.features-list li::before {
    content: "✓";
    width: 20px;
    height: 20px;
    background: #e8f5e9;
    border-radius: 50%;
    font-size: 0.65rem;
    color: var(--gd);
    font-weight: 800;
    top: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
}

.product-specifications-sec ul {
    list-style: none;
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}

.product-specifications-sec ul li {
    width: calc(50% - 10px);
    border-bottom: 1px solid var(--sand);
    padding: 15px 5px;
    margin: 0;
    display: flex;
    align-items: start;
    color: var(--td);
    line-height: 1.3;
    font-size: 14px;
}

.product-specifications-sec ul li b {
    width: 200px;
    flex: 0 0 200px;
    display: block;
}

.releted-product-sec {
    background-color: var(--white);
}

.sec-head {
    display: block;
    margin-bottom: 30px;
}

.sec-title {
    color: var(--gd);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    margin-bottom: 0;
}

.category-name {
    display: inline-block;
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: var(--gm);
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.product-details-sec .sec-head {
    margin-bottom: 12px;
}

.product-price {
    display: flex;
    align-items: baseline;
    color: var(--gold);
    font-size: 20px;
    font-weight: 600;
    column-gap: 5px;
    margin-bottom: 15px;
}

.product-price sub {
    font-size: 14px;
    font-weight: 500;
}


.blog-listing-filter-search {
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;
    border: 1px solid rgba(31,23,65,.1);
    border-radius: 10px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px
}

.blog-listing-filter-search .form-control {
    font-size: 16px;
    box-shadow: none;
    padding: 12px 15px
}

.search-submit-btn {
    font-size: 18px;
    min-width: 40px;
    width: 40px;
    aspect-ratio: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gm);
    margin-right: 15px;
    border-color: transparent;
    transition: all 0.4s ease-in-out
}

.search-submit-btn:hover {
    background-color: var(--gold);
}

.search-submit-btn svg {
    display: block;
    height: 20px;
    width: 20px
}

.blog-category {
    display: block;
    margin-bottom: 40px;
}

.blog-category ul {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.blog-category ul li.categories {
    font-size: 0
}

.blog-category ul li {
    width: auto;
    display: inline-block
}

.blog-category ul li a {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #000;
    background-color: transparent;
    padding: 9px 16px;
    border-radius: 50px;
    display: inline-block;
    border: 2px solid var(--sand);
    transition: all 0.4s ease-in-out;
}

.blog-category ul li.current-cat a,.blog-category ul li a:hover {
    color: #fff;
    background-color: var(--gm);
    border-color: var(--gm);
}

.selectFilter{display: none;}

.form-control {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    border-bottom: 1px solid #3f4e5033
}

.form-control::placeholder {
    opacity: 1;
    color: rgba(0,0,0,.4)
}

.form-control:focus {
    color: #000;
    background-color: transparent;
    border-color: #000;
    outline: 0;
    box-shadow: none
}

.form-control:focus::placeholder {
    color: rgba(0,0,0,1)
}

.form-control:focus-visible {
    border-color: #000;
    outline: 0
}

.blog-details-img {
    width: 100%;
    height: 100%;
    margin-bottom: 25px;
    border-radius: 14px;
}

.blog-details-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1400 / 600;
}

.blog-details-wrap .blog-date {
    color:var(--gb);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    margin-bottom: 20px;
    display: block
}

ul{padding: 0;margin: 0;}

.pagination-wrap{margin-top: 20px;}
.pagination {
    display: block;
    text-align: center
}

.page-numbers {
    display: inline-block;
    padding: 7px 12px;
    margin: 0 2px 0 0;
    border: 1px solid rgba(31,23,65,.1);
    line-height: 1;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.4s ease-in-out;
}

.page-numbers.current,a.page-numbers:hover {
    background: var(--gb);
    color: #fff;
    border-color: rgba(31,23,65,.1)
}

.social-media-sticky .a2a_kit{display: flex;gap: 10px;}
.social-media-sticky .a2a_kit a {transition: 0.4s ease-in-out; }
.a2a_kit .a2a_svg { transition: 0.4s ease-in-out; border-radius: 50% !important; background-color: rgb(255, 255, 255) !important; }
.a2a_kit .a2a_svg svg { width: 16px; height: 16px; top: 50%; transform: translateY(-50%); transition: 0.4s ease-in-out; }
.a2a_kit .a2a_svg svg path { transition: 0.4s ease-in-out; fill: rgb(35, 47, 62) !important; }
.social-media-sticky .a2a_kit a:hover svg path { fill: rgb(129, 33, 207) !important; }
.social-media-sticky .a2a_kit a:hover .a2a_svg.a2a_s_facebook { background-color: rgb(24, 119, 242) !important; }
.social-media-sticky .a2a_kit a:hover .a2a_svg.a2a_s_whatsapp { background-color: rgb(36, 174, 52) !important; }
.social-media-sticky .a2a_kit a:hover .a2a_svg.a2a_s_print { background-color: rgb(0, 123, 255) !important; }
.social-media-sticky .a2a_kit a:hover .a2a_svg.a2a_s_link { background-color: rgb(128, 0, 128) !important; }
.social-media-sticky .a2a_kit a:hover .a2a_svg.a2a_s_a2a { background-color: rgb(0, 0, 0) !important; }
.social-media-sticky .a2a_kit a:hover svg path { fill: rgb(255, 255, 255) !important; }
.single-post .breadcrumbs {margin-top: 30px;}
.single-post .breadcrumbs span, .single-post .breadcrumbs span a,.single-post .breadcrumbs span{color: var(--tb);}
.single-post .breadcrumbs span a:hover{color: var(--gold);}