/*
  Theme Name: Future_Fuel
  Theme URI: https://futurefuel.flyessential.com/staging
  Author: GSM Result Team
  Author URI: https://www.gsmresults.com/
  Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
  Requires at least: 6.7
  Tested up to: 6.9
  Requires PHP: 7.2
  Version: 1.4
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: twentytwentyfive
  Template: twentytwentyfive
  Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
  */

:root{
        --dark-green:#024120;
        --black:#1C1C1C;
        --green:#99EBC0;
        --light-green:#DCEBCA;
        --light-black:#474747;
        --white:#FFFFFF;
        --White-smoke:#F5F5F5; 
        --border:#D9D9D9;
        --light-pink:#A4778E;
        --fs-100-35:clamp(2.1875rem, 1.5488rem + 2.9197vw, 4.6875rem);
        --fs-70-33:clamp(1.875rem, 1.2363rem + 2.9197vw, 4.375rem);
        --fs-100-40: clamp(2.2rem, -0.1786rem + 8.5714vw, 6.25rem);
        --fs-dm-24: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
        --fs-24-19: clamp(1.125rem, 0.8571rem + 0.8571vw, 1.5rem);
        --fs-dm-24:clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
        --fs-24-22:clamp(1.375rem, 1.2857rem + 0.2857vw, 1.5rem);;
        --fs-28-25:clamp(1.5625rem, 1.4286rem + 0.4286vw, 1.75rem);
        --fs-28-20:clamp(1.2rem, 0.8929rem + 1.1429vw, 1.75rem);
        --fs-14:clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
        --fs-20-18:clamp(1.125rem, 1.081rem + 0.1408vw, 1.25rem);
        --fs-dm-18:clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
        --fs-dm-28:clamp(1.75rem, 1.75rem + 0vw, 1.75rem);
        --fs-dm-15:clamp(0.9375rem, 0.9375rem + 0vw, 0.9375rem);
        --fs-dm-16:clamp(1rem, 1rem + 0vw, 1rem);
        --fs-18-12:clamp(0.75rem, 0.618rem + 0.4225vw, 1.125rem);

    }

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body{
        line-height: 1.7;
        overflow-x: hidden;
       font-size: var(--fs-20-18) !important;
    }


p:last-child {
  margin-bottom: 0px !important;
}


     .fs-20-18{font-size: var(--fs-20-18);}
    .fs-100-35{font-size: var(--fs-80-30);}
    .fs-70-33{font-size: var(--fs-70-30);}
    .fs-dm-24{font-size: var(--fs-dm-24);}
    .fs-24-19{font-size: var(--fs-24-19);}
    .fs-14{font-size: var(--fs-14);}
    .fs-28-25{font-size: var(--fs-28-25);}
    .fs-24-22{font-size: var(--fs-24-22);}
    .fs-28-20{font-size: var(--fs-28-20);}
    .fs-dm-28{font-size: var(--fs-dm-28);}
    .fs-dm-15{font-size: var(--fs-dm-15);}
    .fs-dm-18{font-size: var(--fs-dm-18);}
    .fs-dm-16{font-size: var(--fs-dm-16);}
    .fs-18-12{font-size: var(--fs-18-12);}
    .fw-600{font-weight: 600;}
   .fw-400{font-weight: 400;}
    a{text-decoration: none !important; font-weight: 400;}
    li{list-style: none !important;}
    .bg-light-green{ background-color: var(--light-green);}
    .bg-dark-green{background-color: var(--dark-green);}
    .bg-white{background-color: var(--white);}
    .light-pink{color: var(--light-pink);}
    .bg-white-smoke{background-color: var(--White-smoke);}
    .text-green{color: var(--dark-green) !important;}
    .text-black{color: var(--black);}
    .text-light-black{color: var(--light-black);}
    .text-white{color: var(--white);}
    .mb-45{margin-bottom: 45px;}
    .mb-24{margin-bottom: 24px;}
    .mb-30{margin-bottom: 30px;}
    .mb-16{margin-bottom: 16px;}
    .mb-40{margin-bottom: 40px;}
    .mb-60{margin-bottom: 60px;}
     .mb-16{margin-bottom: 16px;}
     .mb-14{margin-bottom: 14px;}
    .mb-70{
        margin-bottom: 70px;
    }
    .line-h-34{line-height: 34px;}
    .m-block{margin: 10px 10px 10px 10px;}
    .border-radius-10{border-radius: 10px;}
    .section-padding-block{padding: 80px 0px;}
    .text-right{text-align: right;}
    .hero-padding-block{
        padding: 80px 0px;
    }

  section{ margin: 10px 10px !important;border-radius: 10px;}
  img{max-width: 100%;}
    h1 h2 h3 h4 {color: var(--dark-green) !important;}
    h1{font-size: var(--fs-100-35) !important;font-weight: 500; }
    h2{font-size: var(--fs-70-33) ;  line-height: 1.2; font-weight: 500;}
    @media (min-width: 1920px) {.container {max-width: 1720px !important; } }
@media (min-width: 1600px) {.container { max-width: 1480px;}}

.green-btn{ position: relative;display: inline-flex; align-items: center; gap: 10px; background-color: var(--dark-green); padding: 5px 5px 5px 20px; border-radius: 30px;
color: var(--white);font-weight: 500; font-size: var(--fs-dm-18); overflow: hidden; transition: color 0.3s ease;text-decoration: none;}

.green-btn::before{content: ""; position: absolute; inset: 0; background: var(--white); border: 1px solid var(--dark-green); width: 0%; z-index: 0; 
    transition: width 0.4s ease;border-radius: 30px;}
.green-btn span,
.green-btn .arrow{ position: relative; z-index: 1;}
.arrow{ width: 44px; height: 44px; background-color: var(--white); border-radius: 50%; display: flex; align-items: center;justify-content: center;
 transition: background-color 0.3s ease, transform 0.4s ease; overflow: hidden;}
.arrow img{ transition: opacity 0.2s ease;}
.green-btn:hover{ color: var(--dark-green);}
.green-btn:hover::before{ width: 100%;}
.green-btn:hover .arrow{background-color: var(--dark-green);animation: arrowSlide 0.4s ease forwards;}
.green-btn:hover .arrow img{content: url("https://futurefuel.flyessential.com/staging/wp-content/uploads/2026/02/white-arrows.png");}

@keyframes arrowSlide{
    0%   { transform: translateX(-160px); }
    100% { transform: translateX(0); }
}
.green-btn:hover{color: var(--dark-green);}
.green-btn:hover::before{ width: 100%;}

    .header-padding-block{padding: 20px 0px;}
    .border-bottoms{padding: 10px 0px;border-bottom: 1px solid grey !important;}
    .hero-badges span {color: var(--dark-green);padding: 8px 14px;font-size: var(--fs-18-12);font-weight: 400; display: flex; align-items: center; gap: 6px;}
    .hero-title {font-size: var(--fs-100-40);font-weight: 500;color: #024120;line-height: 1.1;}
    .hero-text { color: var(--light-black);line-height: 1.7;}
    .hero-image-wrapper { overflow: hidden;}
    
    .d-nun{display: none !important;}
 
    :where(.wp-site-blocks :focus) {
    outline: none !important;
}

.wp-block-navigation__container 
.wp-block-navigation-item__content { text-transform: capitalize !important; transition: color 0.3s ease ;}
 header .wp-block-navigation-item__content:hover{font-weight: 500 !important;}
.wp-block-navigation__container .current-menu-item .wp-block-navigation-item__content::after{ width: 0px !important;}
.wp-block-search__button { background: transparent !important;border: none !important;padding: 0 !important;border-radius: 0 !important;min-width: auto !important;
box-shadow: none !important;}
.wp-block-search__button svg {width: 30px !important;height: 30px !important;}
 header .wp-block-navigation__container 
.wp-block-navigation-item__content::after {content: "" !important;position: absolute !important;left: 0  !important;bottom: -4px !important;width: 0 !important;
height: 2px !important; background-color: var(--dark-green) !important;  transition: width 0.3s ease !important;}
.wp-block-navigation__container 
.wp-block-navigation-item__content:hover {color: var(--dark-green) !important;}
.wp-block-navigation__container 
.wp-block-navigation-item__content:hover::after {width: 100% !important;}
.wp-block-navigation__responsive-container{background-color: var(--dark-green) !important;}
.wp-block-search__input {
  padding: 10px 18px !important;
  border: 1px solid var(--dark-green) !important;
  outline: none !important;
}
.wp-block-search__inside-wrapper{
    align-items: center !important;
}

.wp-block-search__button,
.wp-block-search__button svg,
.wp-block-search__button img {
  padding: 0 !important;
}

.best-product-card {padding: 20px;transition: all 0.5s;border-radius: 15px;}
.best-product-card:hover {transform: translatey(-30px);background-color: var(--light-green); }
.product-title { color: var(--dark-green); font-weight: 600; font-size: var(--fs-28-20);}
.product-price { color:var(--black); font-weight: 500; font-size: var(--fs-24-19);  margin-bottom: 16px !important;   }
.product-desc {font-size: 14px;color: #6b6b6b;line-height: 1.5;}

.add-cart-btn:hover{ background-color: #0f4d2f; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.15);}
.add-cart-btn .btn-icon{width: 38px;height: 38px;background-color: var(--white);border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: background-color 0.3s ease, transform 0.4s ease;overflow: hidden;}
.add-cart-btn .btn-icon img{ width: 15px; height: auto; transition: opacity 0.2s ease;}
.add-cart-btn:hover .btn-icon{background-color: var(--dark-green); animation: addCartArrowSlide 0.4s ease forwards;}
.add-cart-btn:hover .btn-icon img{ content: url("https://futurefuel.flyessential.com/staging/wp-content/uploads/2026/02/white-arrows.png");} 

@keyframes addCartArrowSlide{
    0%   { transform: translateX(-120px); }
    100% { transform: translateX(0); }
}
 @media (max-width:1780px) {
  .hero-image-wrapper .hero-image{width: 580px; height: 537px;}
 
    .d-blocks{display: none !important;}
    .testimonials-section h2{max-width: 771px;margin: auto;margin-bottom: 20px;}
    .target-card-icon{ width: 170px !important;height: 170px !important;}
    .target-wrapper{gap: 20px !important;}
    .target-container .mb-16{margin-bottom: 11px !important;}
     .ayurvedic-wrapper .ayurved{width: 530px; height: 583px;}
     .about-main{width: 580px; height: 515px;}
     .bg-border{left: 59% !important;}
   .target-section h2 .d-blocks{display: block !important;}}

   @media (max-width: 1620px) {
    .hero-image-wrapper .hero-image{
        width: 525px;
    }
        .ayurvedic-wrapper .ayurved{
            width: 525px;
        }
            .about-main{
                width: 530px ;
            }
                .bg-border{
                    left: 61%;
                }
             
   }

   @media (max-width:1400px) {
      .ayurvedic-wrapper .ayurved{width: 100%; height: 100%;}
     .about-main{width: 100%; height: 100%;}
        .hero-image-wrapper .hero-image{width: 100%; height: 100%;}
        .bg-border{display: none !important;}
        .bg-left-pattern{display: none !important;}
        .bg-left-patterns{display: none !important;}
   }
 
 @media (max-width:1200px) {
    h1{width: 100%;}
    .flex-revers{flex-direction: row-reverse !important;gap: 10px; }
.d-non{display: none !important;}
.d-nun{display: block !important;}
 .step-card:hover { transform: none !important;}

 

 }
 footer .wp-block-site-logo.is-default-size img{
    width: 100% !important;
 }

    @media (max-width: 768px) {.section-padding-block{ padding: 40px 0px;}
    .display-n{display: none !important;}
    .newsletter-section{background-image: none !important;}}
    @media (max-width:576px) {

  .hero-padding-block{padding: 30px 0px 40px 0px;}
.wp-block-navigation__responsive-container-open{width: 30px !important;}
.wp-image-4451{width: 21px !important;}
#flex-columns{padding: 13px 18px 10px 18px !important;}

}

    @media (max-width:400px) {.hero-badges span {padding: 5px 5px;}
.hero-badges img{width: 12px !important;}}
.d-blocks{display: block;}.target-section { background-image: url(https://futurefuel.flyessential.com/staging/wp-content/uploads/2026/02/right-top-50.png);
background-position: right top; background-repeat: no-repeat; background-size: auto;}

    .target-card-icon{ display: flex;justify-content: center; align-items: center; width: 200px; height: 200px; flex-shrink: 0; border-radius: 20px;
border: 2px solid var(--dark-green);  background-color: transparent; position: relative; transition: background-color 0.3s ease;}
.target-card-icon img{ position: absolute;transition: opacity 0.3s ease;}

.icon-white{opacity: 0;}
.icon-green{opacity: 1;}
.target-wrapper:hover .target-card-icon{background-color: var(--dark-green);}
.target-wrapper:hover .icon-green{opacity: 0;}
.target-wrapper:hover .icon-white{opacity: 1;}
.target-container{transition: transform 0.4s ease;}
.target-wrapper:hover .target-container{transform: translateY(-10px);}
.target-wrapper{display: flex;gap: 30px; align-items: center;}
.target-container p{color: var(--light-black);}
.target-container h3{color: var(--dark-green);}

  
 .ayurvedic-list li{ font-size: var(--fs-24-19); line-height: 36px;}
.list-flex {display: flex; align-items: center; gap: 10px;}
.list-flex p{margin-bottom: 0px;}
 .wellness-section{ background-image: url(https://futurefuel.flyessential.com/staging/wp-content/uploads/2026/02/left-bottom-50.png);
background-position: left bottom; background-repeat: no-repeat; background-size: auto;}

.position-relatives{ position: relative !important; z-index: 9999;}
.bg-border{ z-index: -1; position: absolute; left: 70%;}
 .position-r{ position: relative; z-index: 9999;}
.bg-left-pattern{position: absolute !important; left: 0px; top: -4px; z-index: -1 !important;}
.position-relative{ position: relative; z-index: 9999;}
.bg-left-patterns{ position: absolute; left: -7px; z-index: -1; top: -20px;}

    @media (max-width:992px) {
        .flex-reverse{flex-direction: column-reverse !important;}
        .position-r{top: 0% !important;width: 100% !important;   }
         .mb-70{margin-bottom: 30px;}
    .text-right{text-align: left;}
    }
    @media (max-width:576px) {
        .green-btn{font-size: var(--fs-dm-15); padding: 4px 4px 4px 16px !important;} 
        .hero-text{ margin-bottom: 30px;}
        .ayurvedic-wrapper  .mb-30{ margin-bottom: 24px !important;}
        .ayurvedic-list .mb-30{ margin-bottom: 24px; }
        .about-section .mb-45{ margin-bottom: 25px !important; }
        .faq-section .mb-60{ margin-bottom: 35px; }
        .arrow{ width: 30px; height: 30px;}
        .arrow img{ max-width: 20px !important; }
        .step-card{ padding: 40px 24px !important;  margin-bottom: 32px !important; }
        .wellness-section .green-btn{ padding: 4px 4px 4px 16px !important; margin-bottom: 35px !important; }
        .hero-section .green-btn{ padding: 4px  4px 4px 17px  !important; }
           .target-section h2 .d-blocks{ display: none !important;}
        .wp-block-search.wp-block-search__button-only .wp-block-search__input{
            position: absolute;
            top: 64px;
            left: -8px;
            padding: 8px 16px !important;
            width: 100%;

        }
  .wp-image-5035{width: 120px !important;}
   .wp-container-core-group-is-layout-6268fe61 { gap: 2px !important; }
    }
    .wp-block-navigation__responsive-container-close{
        color: var(--dark-green);
        background-color: var(--white);
        border-radius: 50px;
        padding: 5px;
    }
    @media (max-width:400px) {
        h2{margin-bottom: 15px;}
        .target-wrapper{flex-direction: column; text-align: center;}
        .target-card-icon{width: 100% !important;height: 150px !important; text-align: center;}
        .target-container .mb-16{margin-bottom: 8px !important;}
    }

    .newsletter-section {background-image:url("https://futurefuel.flyessential.com/staging/wp-content/uploads/2026/02/left-top-50.png"),
    url("https://futurefuel.flyessential.com/staging/wp-content/uploads/2026/02/bg-right.png");
  background-position: left top, right center; background-repeat: no-repeat, no-repeat; background-size:auto, auto; border-radius: 1.25rem; text-align: center;}
.wpcf7-spinner{display: none;}

    @media (max-width:992px) { .margin-top-90{margin-top: 0px !important;} .margin-left-40{margin-left: 0px !important;} }
    @media (max-width:766px) {
        .arrow-icon{  right: 9%; top: 69%; }
        .arrow-icon img{ width: 20px; }
    }
    .margin-top-90{ margin-top: 90px;}
    @media (max-width: 1740px) {
    .margin-left-40{
        margin-left: 40px;
    }
    }
    .step-card {position: relative;padding: 50px 40px;border-radius: 20px; min-height: 100%;}
    .step-card.light {border: 2px solid #ffffff;}
    .step-number {position: absolute;top: -14px;left: 14px;background-color: #0b3d1e;color: #fff;width: 36px;height: 36px;
    border-radius: 50%;font-size: var(--fs-dm-28);display: flex;align-items: center;justify-content: center;}

.step-card,
.step-card h3,
.step-card p,
.step-card .step-number {
  transition: all 0.3s ease;
}
.step-card:hover {transform: translateY(-40px);background-color: var(--dark-green); }
.step-card:hover h3,
.step-card:hover p { color: var(--white);}
.step-card:hover .step-number {background-color: var(--white);color: var(--dark-green);}
.step-card:hover .text-light-black {color: var(--white);}
details,
summary {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

    .faq-item {border-bottom: 1px solid var(--border) !important;padding: 2rem 0;}
    .faq-item:first-child {padding-top: 0; }
    .faq-question {list-style: none;display: flex;align-items: center;justify-content: space-between;gap:2rem;cursor: pointer;}
    .faq-question::-webkit-details-marker {display: none;}
    .faq-icon { padding: 20px 20px;border-radius: 50%;background: var(--green);position: relative;flex-shrink: 0;
    transition: background var(--transition-fast);}
    .faq-icon::before,
    .faq-icon::after {content: ""; position: absolute; background: var(--dark-green); transition: transform var(--transition-fast), opacity var(--transition-fast);}
    .faq-icon::before {width: 14px;height: 2px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
    .faq-icon::after { width: 2px;height: 14px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
    details[open] .faq-icon {background: var(--green);}
    details[open] .faq-icon::after { opacity: 0;transform: translate(-50%, -50%) rotate(90deg);}
    .faq-answer { padding-top: 1rem; max-width: 70rem; animation: fadeIn 0.3s ease;}
     .faq-question h3{color: var(--black); font-weight: 400; line-height: 1.3; }
     .faq-answer p{ color: var(--light-black); }
    @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }

    @media (max-width:576px) {
        .faq-question{  gap: 1rem; }
        .about-section .green-btn{ padding: 4px 4px 4px 16px  !important; }
        .faq-item{ margin-bottom: -20px; } 
        footer .wp-block-column p{margin: auto;}
        footer .social-iconss{
    margin: auto !important;
}
    }

footer{margin: 10px 10px !important;}
footer .wp-block-columns { display: grid;  grid-template-columns: 1.6fr 1fr 1fr 1.5fr; padding: 0px 8px;}
footer .wp-block-column:first-child p {  max-width: 259px; }
footer .social-iconss{
    max-width: 259px !important;
}
@media (max-width: 1200px) {footer .wp-block-columns {grid-template-columns: repeat(2, 1fr) !important;}
  footer .wp-block-column {text-align: center !important;}
  footer .wp-block-heading {text-align: left !important;}
  footer .wp-block-navigation__container {align-items: center !important;}
}

@media (max-width: 992px) {footer .wp-block-columns {grid-template-columns: repeat(2, 1fr) !important;}}

@media (max-width: 576px) {
  footer .wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
    text-align: left !important;
  }
  footer .wp-block-column {
    grid-column: span 2;
  }
  footer .wp-block-column:nth-child(2),
  footer .wp-block-column:nth-child(3) {
    grid-column: span 1;
  }

  .footer-logos img{
    max-width: 170px !important;
  }


  footer .wp-block-column{
    padding-right: 0px;
}
  footer .wp-block-column p {
    margin-bottom: 20px !important;
  }
}


  footer .wp-block-navigation__container,

  footer .wp-block-navigation__container {gap: 15px !important;}
footer .wp-block-column p {margin-bottom: 20px !important;}
footer .wp-block-column {align-self: flex-start !important;}
footer h3.wp-block-heading {margin-bottom: 14px !important;}
footer .wp-block-navigation__container { gap: 19px !important;}
footer .wp-block-navigation-item { margin: 0 !important;}
footer .wp-block-navigation-item__content {padding: 4px 0 !important;line-height: 1.4 !important;display: inline-flex !important;
align-items: center !important;}
footer .wp-block-navigation-item__label {display: inline-flex !important;align-items: center !important;gap: 10px !important;}
footer .wp-block-navigation-item__label img { display: block !important;flex-shrink: 0 !important;
margin: 0 !important;}

@media (max-width: 1200px) {footer .wp-block-column {width: 100% !important;max-width: 100% !important;}
  footer .wp-block-navigation-item__label { display: flex !important;align-items: flex-start !important; gap: 12px !important;text-align: left !important;}
  footer .wp-block-navigation-item__label img {width: 22px !important;height: 22px !important;margin-top: 2px !important;}
  footer .wp-block-navigation-item__content,
  footer a { word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; }
  footer .wp-block-navigation-item__content {line-height: 1.5 !important;}
  footer .wp-block-columns {text-align: center !important;}
  footer .wp-block-column:last-child {text-align: left !important;}
footer .wp-block-columns {gap: 36px !important;}
footer  .wp-block-navigation-item__content{padding: 0px !important;}
}
footer .wp-block-navigation a:hover,
footer .wp-block-navigation-item__content:hover { background: transparent !important;}
footer .wp-block-navigation a:hover .wp-block-navigation-item__label { color: #474747 !important;}

.testimonials-head{  background-color: var(--white);  padding: 30px;  border-radius: 20px;}
.testimonials-logo{  display: flex; gap: 9px;}
.testimonials-head h3{ margin-bottom: 4px;}
.star-icon{ display: flex; gap: 5px;}
.cfvsw-shop-variations{ display: none !important;}
.latest-products { display: flex;}
.product-img a{border: none !important; outline: none !important;}
.wpmslider-prev{background: var(--dark-green) !important; color: var(--white);    
    width: 37px !important;
    height: 37px !important;
   margin-right: 10px !important;
    border-radius: 30px !important;}
.wpmslider-next{background: var(--dark-green) !important; color: var(--white);
 width: 37px !important;
    height: 37px !important;
   margin-right: 10px !important;
    border-radius: 30px !important;
}
.strong-view.nav-position-outside .wpmslider-controls{
    padding: 30px 0px 0px 0px !important;
}
.strong-view.controls-style-buttons2:not(.rtl) .wpmslider-next:before{
    top: 8px !important; 
}
.strong-view.controls-style-buttons2:not(.rtl) .wpmslider-prev:before {
    top: 8px !important;
}
@media (min-width: 1200px) { .carousel-btn { display: none !important;}}

@media (max-width: 1199px) {.latest-products-wrapper { position: relative; overflow: hidden;}
/* .latest-products { flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; }.latest-product-item { flex: 0 0 50%; } */
   /* .latest-products-wrapper .carousel-btn {  display: flex;  position: absolute;  top: 50%;  transform: translateY(-50%);  z-index: 20;
 background: #0b4d2c; color: #fff; border: none; width: 40px;  height: 40px;  border-radius: 50%;  align-items: center;  justify-content: center;  font-size: 22px;
  cursor: pointer; }
    .prev-btn { left: 8px; }
    .next-btn { right: 8px; } */
    .latest-products{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-behavior:smooth;
}

.latest-products::-webkit-scrollbar{
    display:none;
}

.latest-product-item{
    flex:0 0 auto;
}
}

@media (max-width: 575px) {.latest-product-item { flex: 0 0 100%; }.best-section .mb-40{margin-bottom: 25px !important;}
.latest-section .mb-40{margin-bottom: 25px !important;}}
.popular-products {display: flex; flex-wrap: wrap;}
.popular-products-wrapper .carousel-btn { display: none;}
@media (max-width: 1199px) {.popular-products-wrapper { position: relative;overflow: hidden; }.popular-products { flex-wrap: nowrap;
 overflow: hidden; scroll-behavior: smooth; margin-left: 0; margin-right: 0;}
  .carousel-btn { display: flex; position: absolute; top: 50%;  transform: translateY(-50%);  z-index: 20;
  background: #0b4d2c; color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; font-size: 22px;
 cursor: pointer;}
 .prev-btn { left: 8px; }
.next-btn { right: 8px; }}

@media (min-width: 576px) and (max-width: 1199px) {
    .popular-products > div {
 flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 575px) {
 .popular-products > div {  flex: 0 0 100%; max-width: 100%; }}
.carousel-btn{
    width: 35px !important;
    height: 35px !important;
}
.carousel-btn img{
    width: 15px !important;
}
.testimonials-wrapper { perspective: 1200px;}
.testimonial-card { position: relative; width: 100%; min-height: 320px; transform-style: preserve-3d; transition: transform 0.7s ease;}
.testimonials-wrapper:hover .testimonial-card { transform: rotateY(180deg);}
.testimonials-head,
.img-back { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden;  border-radius: 16px; transform-style: preserve-3d;}

.testimonials-head {background: #fff;z-index: 2;transform: rotateY(0deg) translateZ(1px);}
.testimonials-wrapper:hover .testimonials-head { opacity: 0; pointer-events: none;}
.img-back { transform: rotateY(180deg); z-index: 1;}
.img-back img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px;}
.img-back { position: absolute; inset: 0; transform: rotateY(180deg); z-index: 1;}
.star-back { position: absolute; bottom: 28px; left: 30%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2;}

@media (max-width:576px) {
     .testimonials-head{ padding: 23px !important;}
    .testimonial-card{  height: 350px !important; }}
@media (max-width:992px) {
     .testimonials-section .mb-60{ margin-bottom: 25px !important; }
}

.news-form{  display: inline-flex;  border: 1px solid var(--dark-green);  border-radius: 30px;}
.wpcf7-form-control{  padding: 10px 20px !important;  border-radius: 30px 0px 0px 30px; border: none; color: var(--dark-green);
     background-color: var(--light-green); font-size: var(--fs-dm-18);}
.news-btn{  position: relative;}


.subscribe-form-btn{ padding: 10px 60px 10px 17px !important; border-radius: 30px; background-color: var(--dark-green); color: var(--white);
    font-size: var(--fs-dm-18); font-weight: 500; transition: color 0.3s ease; z-index: 1; border: 1px solid var(--dark-green);}
.subscribe-form-btn:hover{background-color: var(--white); color: var(--dark-green); }
.news-btn p::after{content: ""; width: 44px; height: 44px ; background-color: var(--white); border-radius: 50%;
 background-image: url("https://futurefuel.flyessential.com/staging/wp-content/uploads/2026/02/green-arrow.png");
background-repeat: no-repeat; background-position: center; background-size: 28px 28px;  position: absolute; right: 4px;
  top: 4px;   transition: background-color 0.3s ease, background-image 0.3s ease;}
  .news-btn:hover p::after {
    content: "";
 width: 44px !important; 
 height: 44px !important ;
  background-color: var(--dark-green) ;
  background-image: url("https://futurefuel.flyessential.com/staging/wp-content/uploads/2026/02/white-arrows.png") !important;
  background-size: 20px 20px  !important;
  top: 4px !important;
}

@media (max-width:768px) {  
.news-form{ display: block; padding: 10px; overflow: hidden;}
.subscribe-form-btn{ width: 100%;}
}

@media (max-width:576px) {
 .news-btn p::after{
            width: 35px;
        height: 35px;
        background-size: 20px 20px;
        top: 5px;
 }
 .subscribe-form-btn{ padding: 5px 60px 7px 17px !important;}}
 .subscribe-form-btn:hover{padding: 10px 60px 10px 17px !important;}
.news-btn:hover p::after{
 width: 35px ; 
 height: 33px;
  background-size: 18px 18px !important;
}
.wpcf7-not-valid.subscribe-form-mail { border: none !important; box-shadow: none !important;}
.wpcf7-form-control:focus { outline: none !important; box-shadow: none !important;}



.wp-block-button .wp-block-button__link{ border-radius: 30px !important; background-color: var(--dark-green) !important;
color: var(--white) !important;}

.wp-block-button .wp-block-button__link:hover{background-color: var(--light-green) !important;
color: var(--dark-green) !important;}

.woocommerce.wc-block-catalog-sorting select.orderby{ padding: 10px 10px; background-color: var(--dark-green);
 color: var(--white); border-radius:10px ;}
.wc-block-product-template__responsive .wc-block-product{ transition: all 1s ease;}
.wc-block-product-template__responsive .wc-block-product:hover{border: 1px solid var(--dark-green);
border-radius: 20px;transform: translateY(-10px);}
.wc-block-product-template__responsive h3 a{font-size: var(--fs-28-20) !important;color: var(--dark-green);}

@media (max-width:576px)  {
header .wp-block-group-is-layout-constrained{  width: 100%;}
}

.philosphy-badge{ display: flex; max-width: 1126px; margin: auto; padding: 13px 40px; border-radius: 10px;
    text-align: left; gap: 7px;}
.package-badge{display: flex; gap: 30px;}

@media (max-width:576px) {
    .philosophy-section .mb-40{ margin-bottom: 20px;}
.line-h-34{ line-height: 30px ;}
.package-section .mb-45{margin-bottom: 24px;}
.package-section .mb-24{margin-bottom: 16px;}
.package-badge .mb-30{margin-bottom: 16px;}
.choose-badge {padding: 5px 10px !important;}

.philosphy-badge{  padding: 13px 9px !important;flex-direction: column;justify-content: center;
align-items: center;text-align: center;}
.badge-leaves{
    text-align: center;
}
.div-philosophy-img img{min-height: 150px !important;}
}


@media (max-width:1780px) {
    .vertical-line::after{
    height: 88.9% !important;
    top: 197px !important;
    left: 50%;
    transform: translateX(-50%)
}
@media (max-width:1680px) {
    .vertical-line::after{
        height: 89.1% !important;
        top: 194px !important;
    }
}

}
@media (max-width:1420px) {
      .vertical-line::after{
   
    height: 89% !important;
    top: 152px !important;
    left: 50%;
    transform: translateX(-50%)
}
}
@media (max-width:992px) {
     .vertical-line::after{
   display: none !important;
} 
.border-left{border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important;}
.border-right{border-top-right-radius: 0px !important;border-bottom-right-radius: 0px !important;}
.choose-us-section  .mb-24{margin-bottom: 10px;}
.choose-us-section  .mb-60{margin-bottom: 30px;}
.choose-us-section img{border-radius: 15px;}
}

.package-section p{max-width: 640px;}
.choose-badge{background-color: var(--light-green); padding: 5px 30px; }
.choose-badge span{font-weight: 600;}
.choose-badge:hover{background-color: var(--dark-green); }
.choose-badge:hover span{color: var(--white) !important; font-weight: 400 !important;}
.border-left{border-top-left-radius: 20px ; border-bottom-left-radius: 20px ;}
.border-right{border-top-right-radius: 20px ;border-bottom-right-radius: 20px ;}

.vertical-line{
    position: relative;
}
.vertical-line::after{
    content: "";
    display: block;
    width: 4px;
    height: 90% ;
    background: var(--dark-green);
    position: absolute;
    top: 201px ;
    left: 50%;
    transform: translateX(-50%)
}

.banner-padding{
    padding: 130px 10px;
}
.archive .about-nav{
    display: none;
}
.home .about-nav{
    display: none;
}
.page-id-30 .about-nav{display: none;}
.page-id-26 .header-nav{
    display: none;
}
.page-id-5073 .header-nav{display: none;}
.page-id-5073 .about-nav{
      position: absolute;
  display: block;
  z-index: 1;
  width: 100%;
}
.page-id-983 .header-nav{
    display: none;
}
.page-id-983 .about-nav{
      position: absolute;
  display: block;
  z-index: 1;
  width: 100%;

}
.page-id-26 .about-nav{
    position: absolute;
  display: block;
  z-index: 1;
  width: 100%;
}

.wp-block-cover__background{
    position: relative !important;
}

.about-nav .wp-block-navigation__container .wp-block-navigation-item__content:hover{
    color: var(--white) !important;
}

header .about-nav .wp-block-navigation__container .wp-block-navigation-item__content::after{
    background-color: var(--white) !important;
}
@media (max-width:576px) {
    .about-nav-logo{
        margin-bottom: 10px !important;
    }
 
    .banner-padding{
  padding: 140px 10px 57px 12px;
    }
    .wp-block-cover__image-background{
        height: 300px !important;
    }
}
.wp-container-core-group-is-layout-e3e81afc{
    gap: 0px !important;
}

/* @media (max-width: 400px) {


  .banner-padding .wp-block-cover__image-background {
    display: none;
  }


  .banner-padding {
    background-image: url("https://yourwebsite.com/path-to-mobile-image.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
} */



.personal-card-wrapper{
    padding: 30px 30px;
    border: 1px solid var(--dark-green);
    border-radius: 20px;
    position: relative;
}

.personal-card-header h3{
    margin-bottom: 0px !important;
}
.peronal-card-icon{
    position: relative;
    width: 50px;
    height: 50px;
}

/* both icons in same place */
.peronal-card-icon img{
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

/* default icon visible */
.icon-green{
    opacity: 1;
}

/* hover icon hidden initially */
.peronal-card-icon img:last-child{
    opacity: 0;
}

/* hover card */
.personal-card-wrapper:hover{
    background-color: var(--dark-green);
}

/* text color change */
.personal-card-wrapper:hover h3,
.personal-card-wrapper:hover p{
    color: var(--white) !important;
}

/* icon swap */
.personal-card-wrapper:hover .icon-green{
    opacity: 0;
}

.personal-card-wrapper:hover .peronal-card-icon img:last-child{
    opacity: 1;
}
@media (max-width:567px) {
    .personal-card-wrapper {
        padding: 22px 18px;
    }
    .peronal-card-icon {
    position: relative;
    width: 30px;
    height: 30px;
}
.page-id-5073 .wp-block-cover__inner-container h2{
    font-size: 70px !important;
}

.page-id-983 .wp-block-cover__inner-container h2{
   font-size: 60px !important;
}
}

.page-id-983 .wp-block-cover__inner-container h2{
    color: var(--light-pink) !important;
}





.timeline {
    position: relative;
    max-width: 1400px;
    margin: 40 auto;
    padding: 0px 50px 130px 50px;
}

/* Vertical Line - Background (inactive) */
.timeline-line-bg {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #d4d8c5;
    transform: translateX(-50%);
    z-index: 1;
}


.timeline-line-fill {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 0%;
    background-color: #024120;
    transform: translateX(-50%);
    transition: height 0.4s ease-out;
    z-index: 2;
}

/* Timeline Step */
.timeline-step {
    position: relative;
    margin-bottom: 260px;
   
}

.timeline-step:last-child {
    margin-bottom: 0;
}

.timeline-circle img{
    width:40px;
    height:40px;
    transition:0.3s ease;
}


.timeline-circle.active img{
    filter: brightness(0) invert(1);
}

.timeline-circle {
    position: absolute;
    left: 50%;
    top: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #024120;
    background-color: #f5f5f5;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Active circle state */
.timeline-circle.active {
    background-color: #024120;
    border-color: #024120;
}

/* Icon styling */
.timeline-circle svg {
    width: 40px;
    height: 40px;
    transition: stroke 0.4s ease, fill 0.4s ease;
}

.timeline-circle svg path {
    stroke: #024120;
    transition: stroke 0.4s ease, fill 0.4s ease;
}

.timeline-circle.active svg path {
    stroke: #f5f5f5;
    fill: #f5f5f5;
}

/* Special handling for filled icons */
.timeline-circle svg path[fill]:not([fill="none"]) {
    fill: #024120;
}

.timeline-circle.active svg path[fill]:not([fill="none"]) {
    fill: #f5f5f5;
}

/* Content blocks */
.timeline-content {
    position: absolute;
    width: 637px;
    top: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Alternate left and right */
.timeline-step:nth-child(odd) .timeline-content {
    right: calc(50% + 70px);
    text-align: right;
}

.timeline-step:nth-child(even) .timeline-content {
    left: calc(50% + 70px);
}

/* Content styling */
.timeline-content h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: var(--fs-28-20);
    line-height: 40px;
    color: #024120;
    margin-bottom: 16px;
}

.timeline-section .section-title{
    color: var(--color-accent) !important;
} 
.timeline-content .divider {
    width: 100%;
    height: 1px;
    background-color: #888f65;
    margin-bottom: 16px;
}

.timeline-content p {
    line-height: 34px;
    color: #474747;
}


/* @media (max-width:1200px) {
       .timeline {
        padding: 0 20px;
    }

    .timeline-content {
        width: 400px;
    }

    .timeline-step:nth-child(odd) .timeline-content {
        right: calc(50% + 60px);
    }

    .timeline-step:nth-child(even) .timeline-content {
        left: calc(50% + 60px);
    }
}

@media  {
    
} */
 /* =========================
   LARGE SCREENS (≤1200px)
========================= */

@media (max-width:1420px) {
    .timeline-content{
        width: 550px ;
    }
}


@media (max-width:1200px){

.timeline{
    padding:0 30px 154px 30px;
}

/* Reduce content width */
.timeline-content{
    width:420px;
}

/* Reduce distance from center line */
.timeline-step:nth-child(odd) .timeline-content{
    right:calc(50% + 60px);
}

.timeline-step:nth-child(even) .timeline-content{
    left:calc(50% + 60px);
}

/* Slightly smaller circle */
.timeline-circle{
    width:70px;
    height:70px;
}

.timeline-circle img{
    width:34px;
    height:34px;
}


.timeline-mb{
    margin-bottom: 170px;
}

}

@media (max-width: 991px){

.timeline{
    padding:0 20px 80px 20px;
}
.timeline-mb{
    margin-bottom: 0px !important;
}

/* Move timeline line to left */
.timeline-line-bg,
.timeline-line-fill{
    left:40px;
    transform:none;
}

/* Circle position */
.timeline-circle{
    left:-8px;
    transform:none;
    width:60px;
    height:60px;
}

/* Icon smaller */
.timeline-circle img{
    width:28px;
    height:28px;
}

/* Step spacing */
.timeline-step{
    margin-bottom:60px;
}

/* Content becomes full width */
.timeline-content{
    position:relative;
    width:100%;
    left:auto !important;
    right:auto !important;
    text-align:left !important;
  
}

}

@media (max-width:776px) {
    .timeline-content{
        padding-left: 70px;
    }
}


@media (max-width: 576px){

.timeline{
    padding:0 10px 60px 0px;
}


.timeline-line-bg,
.timeline-line-fill{
    left:20px;
}


.timeline-circle{
  
            left: -3px;
        width: 50px;
        height: 50px;
}


.timeline-circle img{
    width:24px;
    height:24px;
}


.timeline-content{
    padding-left:60px;
}

.timeline-content h2{
    line-height: 25px !important;
    text-wrap:inherit !important;
}

.timeline-content p{
    line-height:26px;
}

.timeline-step{
    margin-bottom:90px;
}
.timeline-section .section-titles{
    padding: 0px !important;
}


}