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

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

html,
body {
    height: 100%;
    width: 100%;
}

body {
    font-family: "Roboto" !important;
    display: flex;
    flex-direction: column;
}

:root {
    --site-color: #4F378A;
    --light-color: #F8F7FB;
    --white-color: #FFFFFF;
    --main-text: #303030;
    --gray-text: #848484;
    --boder-color: #DCD7E8;
    --section-color: #EDF6FC;
    --section-color-2: #F3F2FF;
    --section-color-3: #FEF6ED;
    --section-color-4: #F6FFF0;
    --fs-14: 14px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-26: 26px;
    --fs-32: 32px;
    --fs-35: 35px;
    --fs-40: 40px;
    --fs-46: 46px;
    --fs-48: 48px;
    --fs-52: 52px;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --lh-24: 24px;
    --lh-30: 30px;
    --lh-38: 38px;
    --lh-46: 46px;
    --lh-52: 52px;
    --lh-72: 72px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-30: 30px;
    --radius-40: 40px;
    --break-word: all;
}

.site-color {
    color: var(--site-color) !important;
}

.site-bg-color {
    background-color: var(--site-color) !important;
}

.light-color {
    color: var(--light-color) !important;
}

.light-bg-color {
    background-color: var(--light-color) !important;
}

.white-color {
    color: var(--white-color) !important;
}

.white-bg-color {
    background-color: var(--white-color) !important;
}

.boder-color {
    color: var(--boder-color) !important;
}

.section-bg-color {
    background-color: var(--section-color) !important;
}

.section-bg-color-two {
    background-color: var(--section-color-2) !important;
}

.gray-text {
    color: var(--gray-text) !important;
}

.main-text {
    color: var(--main-text) !important;
}

.fs-custom-14 {
    font-size: var(--fs-14) !important;
}

.fs-custom-18 {
    font-size: var(--fs-18) !important;
}

.fs-custom-20 {
    font-size: var(--fs-20) !important;
}

.fs-custom-22 {
    font-size: var(--fs-22) !important;
}

.fs-custom-24 {
    font-size: var(--fs-24) !important;
}

.fs-custom-26 {
    font-size: var(--fs-26) !important;
}

.fs-custom-32 {
    font-size: var(--fs-32);
}

.fs-custom-35 {
    font-size: var(--fs-35) !important;
}

.fs-custom-40 {
    font-size: var(--fs-40) !important;
}

.fs-custom-46 {
    font-size: var(--fs-46) !important;
}

.fs-custom-48 {
    font-size: var(--fs-48);
}

.font-weight-500 {
    font-weight: var(--fw-500) !important;
}

.font-weight-600 {
    font-weight: var(--fw-600) !important;
}

.font-weight-700 {
    font-weight: var(--fw-700) !important;
}

.line-height-24 {
    line-height: var(--lh-24) !important;
}

.line-height-30 {
    line-height: var(--lh-30) !important;
}

.line-height-38 {
    line-height: var(--lh-38) !important;
}

.line-height-46 {
    line-height: var(--lh-46) !important;
}

.line-height-52 {
    line-height: var(--lh-52) !important;
}

.line-height-72 {
    line-height: var(--lh-72) !important;
}

.radius-4 {
    border-radius: var(--radius-4) !important;
}

.radius-8 {
    border-radius: var(--radius-8) !important;
}

.radius-10 {
    border-radius: var(--radius-10) !important;
}

.radius-12 {
    border-radius: var(--radius-12) !important;
}

.radius-16 {
    border-radius: var(--radius-16) !important;
}

.radius-20 {
    border-radius: var(--radius-20) !important;
}

.radius-30 {
    border-radius: var(--radius-30) !important;
}

.radius-40 {
    border-radius: var(--radius-40) !important;
}

/* START HERO SECTION */

.create-order-btn {
    height: 52px;
}

.card-border {
    border: 1px solid var(--boder-color) !important;
}

.line-opacity {
    opacity: 0.3;
}

.scan-qr-section {
    display: flex;
}

.scan-qr {
    width: 150px;
}
/* END HERO SECTION */

/* START CLIENT REVIEW */

#client-slider {
    margin-top: 60px;
}

.fixed-card {
    min-height: 175px;
    max-width: 630px;
}

.client-card-body {
    height: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-card-body h5 {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--main-text);
    height: 24px;
    overflow: hidden;
}

.client-card-body h6 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--gray-text);
    height: 24px !important;
    overflow: hidden;
}

.client-card-body p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--main-text);
}

.client-img {
    height: auto;
    width: 100px !important;
}

.review {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--gray-text);
}

.vertical-line {
    position: absolute;
    right: 0;
    height: 80%;
    width: 2px;
    background-color: #EDEDED;
}

.horizontal-line {
    height: 2px;
    width: 100%;
    background-color: #EDEDED;
    margin-top: 10px;
}

.rating-section {
    flex-wrap: wrap;
}

.rating-content {
    flex: 1;
}

.owl-controls .owl-buttons {
    text-align: center;
    margin-top: 20px;
}

/* END CLIENT REVIEW */


/* START COMMON CSS */

.centered-paragraph {
    max-width: 240px;
    margin: 0 auto;
    text-align: center;
}

.form-control:focus { 
    box-shadow: none !important;
}

.multiline-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.loader {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid var(--site-color);
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
    font-size: 18px;
    padding: 8px;
    width: 43px;
    transition: background-color 0.3s;
}

#myBtn:hover {
    background-color: #e4d4d4;
}

.error {
    color: red;
}

 .is-invalid {
    border-color: red;
}

.is-valid {
    border-color: green;
}

.iti {
    position: relative;
    display: block !important;
}
.error-message {
    display: block;
    margin-top: 5px; /* Adjust this value as needed */
}

.sing-out{
    background-color: red !important;
    color: white !important;
    font-weight: 700 !important;
}

#item_nav{
    cursor: pointer;
}

.paragraph-maxwidth {
    max-width: 922px
}

.padding-top-80 {
    padding-top: 80px;
}

/* END COMMON CSS */

/* START NAVBAR */
.navbar {
    background-color: var(--white-color);
    /* background-color: var(--site-color); */
    height: 80px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0px 10px 20px rgba(44, 62, 80, 0.05);
}


.nav-border {
    border: 1px solid var(--main-text) !important;
}

/* END NAVBAR */


/* START FOOTER */

.footer {
   /* background-color: var(--site-color); */
   background-color: var(--light-color);
}

.footer-p {
    font-size: 18px;
    cursor: pointer;
}

/* END FOOTER */

/* START MODAL */

/* start ordertracking */

.ordertracking-modalcontent {
    border-radius: 1rem !important;
}

.ordertracking-modalhead {
    padding: 1.2rem 1.4rem !important;
}

.ordertracking-modalbody {
    padding: 0.2rem 1.4rem !important;
}

.ordertracking-form {
    padding: 0.675rem .75rem !important;
    border: 1px solid #d4d4d4 !important;
    margin-bottom: 14px !important;
}

.ordertracking-form:focus {
    box-shadow: 0 0 0 0.25rem rgb(157 78 229 / 25%) !important;
}

/* START TRACK ORDER */
.trackorder-section {
    background: transparent linear-gradient(244deg, #fde6cd, #ebebff) 0 0 no-repeat padding-box;
    margin-top: 4rem;
}

.track-order {
    margin-top: 5rem !important;
}

.track-order-btn {
    background-color: var(--site-color) !important;
    padding: 12px !important;

}

.headingText {
    margin-bottom: 10px;
    color: var(--site-color);
    font-weight: 700;
    font-size: 72px;
    line-height: 81px;
}

.headingp {
    letter-spacing: .36px;
    color: #333;
    margin: 0 0 20px;
}

.trackby {
    letter-spacing: 0px;
    color: #0B0757;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 20px !important;
}

.cardbox {
    background: #fff 0 0 no-repeat padding-box;
    box-shadow: 0 12px 24px #4429be1f;
    border-radius: 22px;
    padding: 10px 10px;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

/* END TRACK ORDER */

/* START ORDER STATUS  */

.orderstatus-section {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.headingTextorder {
    margin-bottom: 10px;
    color: var(--site-color);
    font-weight: 700;
    font-size: 50px;
    line-height: 81px;
}

.ordertracking-ul ul {
    display: flex;
    padding: 0 !important;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.ordertracking-ul ul li {
    flex-basis: calc(20% - 20px);
    position: relative;
    list-style: none;
    margin-bottom: 20px;
    padding: 0 10px;
}

.ordertracking-ul ul .lia :before {
    content: '';
    position: absolute;
    border: 1px dashed #707070;
    opacity: 0.17;
    width: calc(100% + -45px);
    top: 14%;
    left: 55px;
    transform: translateY(-50%);
    z-index: -1;
}

.contentcard {
    position: relative;
    z-index: 1;
}

.contentcard h3 {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    color: #0b0757;
    margin: 20px 0 12px;
}

.contentcard p {
    margin: 0;
    letter-spacing: 0;
    color: #333;
    font-size: 14px;
    line-height: 24px;
    display: flex;
}

/* END ORDER STATUS */

/* END ORDERTRACKING */

/* START PRIVACY POLICY */

.privacy-policy {
    margin-top: 6rem;
}

.privacy-policy p {
    font-size: 15px;
}

.privacy-policy ul li span {
    font-size: 13px;
}

/* END PRIVACY POLICY */

/* START TERMS & SERVICE & Pages */
.terms-service,
.pages {
    margin-top: 10rem;
}

.terms-service p,
.pages p {
    font-size: 14px;
}

/* END TERMS & SERVICE & Pages */

/* START SIGN IN */

.signin-modalcontent {
    border-radius: 1rem !important;
}

.signin-modalhead {
    padding: 1.2rem 1.4rem !important;
}

.signin-modalbody {
    padding: 0.2rem 1.4rem !important;
}

.signin-form {
    padding: 0.675rem .75rem !important;
    border: 1px solid #d4d4d4 !important;
}

.signin-form:focus {
    box-shadow: 0 0 0 0.25rem rgb(157 78 229 / 25%) !important;
}

.signin-check-input:checked {
    background-color: var(--site-color) !important;
}

.signin-check-input {
    width: 1.2em !important;
    height: 1.2em !important;
    border: 2px solid #49454f !important;
    border-radius: 0px !important;
}

.sign-in-h5 {
    color: var(--site-color) !important;
}

.sing-up-p {
    color: var(--site-color) !important;
}

.sign-in-label {
    font-size: 15px !important;
}

.sign-in-btn {
    background-color: var(--site-color) !important;
    padding: 12px !important;
}

.sign-in-with-google {
    border: 1px solid #a29393 !important;
    border-radius: 20px !important;
    padding: 8px !important;
    color: #929292 !important;
}

.sign-in-with-google p {
    margin-right: 20px !important;
    font-size: 15px !important;
}

.sign-in-with-google-img {
    margin-left: 20px !important;
}

/* END SIGN IN */

/* START MAINPAGE FORGOT PASSWORD */

.forgot-modalcontent {
    border-radius: 1rem !important;
}

.forgot-modalhead {
    padding: 1.2rem 1.4rem !important;
}

.forgot-modalbody {
    padding: 0.2rem 1.4rem !important;
}

.forgot-form {
    padding: 0.675rem .75rem !important;
    border: 1px solid #d4d4d4 !important;
}

.forgot-form:focus {
    box-shadow: 0 0 0 0.25rem rgb(157 78 229 / 25%) !important;
}

.main-page-forgot {
    color: var(--site-color) !important;
}

.main-page-forgot-p {
    font-size: 15px !important;
    color: #848484 !important;
}

.main-page-forgot-btn {
    background-color: var(--site-color) !important;
    padding: 12px !important;
}

.main-page-forgot-label {
    font-size: 15px !important;
}

/* END MAINPAGE FORGOT PASSWORD */

/* START SIGN UP */
.signup-modalcontent {
    border-radius: 1rem !important;
}

.signup-modalhead {
    padding: 1.2rem 1.4rem !important;
}

.signup-modalbody {
    padding: 0.2rem 1.4rem !important;
}

.signup-form {
    padding: 0.675rem .75rem !important;
    border: 1px solid #d4d4d4 !important;
}

.signup-form:focus {
    box-shadow: 0 0 0 0.25rem rgb(157 78 229 / 25%) !important;
}

.signup-check-input:checked {
    background-color: var(--site-color) !important;
}

.signup-check-input {
    width: 1.2em !important;
    height: 1.2em !important;
    border: 2px solid #49454f !important;
    border-radius: 0px !important;
}

.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}

.forgot-togglePassword {
    position: absolute;
    top: 50%;
    right: 35%;
    transform: translateY(-50%);
    cursor: pointer;
}

.sign-up-purle {
    color: var(--site-color) !important;
}

.sing-up-font {
    font-size: 15px !important;
}

.sing-up-btn {
    background-color: var(--site-color) !important;
    padding: 12px !important;
}

.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
    height: 48px !important;
}

/* END SIGN UP */

/* START FORGOT PASSWORD */

.forgotModal-modalcontent {
    background-color: #eeebf5 !important;
}

.forgotModal-form {
    padding: 0.675rem .75rem !important;
    border: 1px solid #d4d4d4 !important;
    background-color: #eeebf5 !important;
}

.forgotModal-form:focus {
    box-shadow: 0 0 0 0.25rem rgb(157 78 229 / 25%) !important;
}

.forgot-cancle-btn {
    background-color: #ebf2f7 !important;
    padding: 10px;
    width: 130px;
    border: 1px solid #d4d4d4 !important;
}

.forgot-submit-btn {
    background-color: var(--site-color) !important;
    padding: 10px;
    width: 130px;
}

.forgot-pwd-h5 {
    color: var(--site-color) !important;
}

.forgot-email-label {
    font-size: 16px !important;
}

.forgot-pwd-p {
    font-size: 15px !important;
}

.admin-forgot-btn {
    padding-left: 0px !important;
}

/* END FORGOT PASSWORD */


/* END MODAL */

/* START ADMIN LOGIN */
.adminlogin-form:focus {
    box-shadow: 0 0 0 0.25rem var(--site-color) !important;
}

.admin-p {
    color: #848484;
    font-size: 14px;
}

.admin-email-label {
    color: #454749 !important;
    font-weight: 500 !important;
    width: 20% !important;
}

.adminlogin-form {
    width: 68% !important;
    padding: 10px !important;
}

.admin-pwd-label {
    color: #454749 !important;
    font-weight: 500 !important;
    width: 20% !important;
}

.admin-pwd-input {
    width: 68% !important;
    padding: 10px !important;
}

.forgot-link {
    color: black !important;
}

.forgot-link-row {
    width: 78% !important;
}

.admin-login-btn {
    background-color: var(--site-color) !important;
    padding: 12px !important;
    width: 145px !important;
}

.admin-login-row {
    width: 78% !important;
}

.admin-login-container {
    margin-top: 13rem !important;
}

.admin-logo-img {
    background-color: var(--site-color) !important;
}

/* END ADMIN LOGIN */



/* START LOGIN CAROUSEL */
.login-carousel {
    background-color: var(--site-color) !important;
}

.login-carousel-slide {
    margin-top: 13rem !important;
}

.admin-title{
    color: #fff !important;
}

/* END LOGIN CAROUSEL */

/* START WHY DELIVERY SECTION */

.why-delivery-img {
    max-height: 240px;
}

/* END WHY DELIVERY SECTION */

/* START OVER VIEW SECTION  */

.section-li {
    max-width: 422px;
}

.section-img {
    max-height: 500px;
}

/* END OVER VIEW SECTION */

/* START DELIVER YOUR WAY SECTION */

.delivery-div {
    height: 200px;
}

.deliver-img {
    max-height: 50%; 
    max-width: 100%; 
    object-fit: contain;
}

/* END DELIVER YOUR WAY SECTION */


/* START DELIVERY PARTNER */

.step-circle {
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-weight: 500;
    font-size: 16px;
}

.delivery-job-img {
    max-height: 500px; 
    height: auto; 
    object-fit: contain;
}

.delivery-partner-p {
    max-width: 748px;
}

/* END DELIVERY PARTNER */

/* START CONTACT US */

.contactus-section {
    max-width: 529px; 
    border: 1px solid #DCD7E8;
}

/* END CONTACT US */

/* START ABOUT US */

.about-section {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.about-section h1 {
    color: #2e3033;
}

.about-section p {
    color: #848484;
    font-size: 18px;
}

.about-section-content {
    background-color: #f5f5f5;
    margin-top: 4rem;
}

.about-section-content p {
    color: #848484;
}

.aboutus-img {
    width: 500px !important;
}

/* END ABOUT US */

/* START ORDER HISTORY */

.order-history-card {
    border: 1px solid rgb(152 138 138 / 13%) !important;
}

.timeline-with-icons {
    border-left: 4px solid var(--site-color);
    position: relative;
    list-style: none;
}

.timeline-with-icons .timeline-item {
    position: relative;
}

.timeline-with-icons .timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline-with-icons .timeline-icon {
    position: absolute;
    left: -59px;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
   background-color: var(--site-color);
}

.timeline-content {
    margin-left: 10px;
}

.timeline-section {
    min-height: 24.9rem;
    margin-left: 3rem;
}

.timeline-main-section {
    margin-top: 8rem;
    margin-bottom: 5rem;
}

.history-name {
    height: 60px;
   background-color: var(--site-color);
}

.history-name span {
    font-size: 18px;
}

.timeline-end {
    border: initial;
}

/* END ORDER HISTORY */

/* MEDIA QUERY */

@media (min-width: 992px) {
    .step-box {
        position: relative;
    }

    .step-box:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 11px;
        right: -81px;
        width: 178px;
        height: 1px;
        border-top: 2px dashed #DCD7E8;
        z-index: 1;
    }
}

@media only screen and (max-width: 992px) {

    .navbar {
        height: auto;
    }
    /* .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        padding-left: 10px !important;
        margin-bottom: 0;
        list-style: none;
        justify-content: flex-end;
        margin-top: -46px;
        justify-content: space-evenly;
        width: 40%;
        float: right;
    } */

    /* .collapse:not(.show) {
        display: block !important;
    } */

    #item_nav {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .second-section {
        margin-top: 10rem;
        margin-bottom: 4rem;
    }

    .testimonial-text {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {

    .fs-custom-40 {
        font-size: 1.8rem !important;
    }
    
    .courier-section {
        min-height: auto;
        padding: 2rem 0;
    }
    
    .courier-image {
        max-height: 200px;
        margin-bottom: 1rem;
    }

    .aboutus-img,
    .contactus-img,
    .login-carousel {
        display: none !important;
    }

    .about-section,
    .contactus-section {
        margin-top: 3rem !important;
        margin-bottom: 4rem !important;
    }

    .deliverypartner {
        margin-bottom: 0rem !important;
    }

    .delivery-partner-btn {
        width: 100% !important;
        margin-bottom: 5rem !important;
    }

    .ordertracking-ul ul {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .ordertracking-ul ul li {
        width: 100%;
        position: relative;
    }

    .lia {
        display: inline-block;
        width: calc(100% - 1rem);
        margin-right: 0;
        vertical-align: top;
    }

    .iconWrap {
        float: left;
        margin-right: 10px;
    }

    .ordertracking-ul ul .lia :before {
        content: '' !important;
        position: absolute !important;
        border: 1px dashed #707070 !important;
        opacity: 0.17 !important;
        top: 100% !important;
        left: 23px !important;
        transform: translateY(-50%) !important;
        z-index: -1 !important;
        width: 0px !important;
        height: 100% !important;
        float: left !important;
    }

}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .ordertracking-ul ul {
        display: flex !important;
        padding: 0 !important;
        justify-content: normal !important;
        flex-wrap: wrap !important;
        margin-top: 3rem !important;
    }

    .ordertracking-ul ul li {
        flex-basis: calc(35% - 20px) !important;
    }

}

@media only screen and (min-width: 1205px) and (max-width: 1500px) {
    .bike-image {
        top: 245px !important;
        position: relative;
        z-index: 2;
    }

    .road-image {
        position: relative;
        top: 185px !important;
    }

    .delivery-section {
        min-height: 630px !important;
    }

    .second-section {
        margin-top: 10rem;
        margin-bottom: 4rem;
    }

    .deliverypartner {
        margin-top: 2rem;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1205px) {
    .first-main-class {
        position: absolute;
        top: 126px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        width: calc(100% - 40px);
    }

    .bike-image {
        width: 70%;
        top: 270px !important;
        position: relative;
        z-index: 2;
    }

    .road-image {
        position: relative;
        top: 222px;
    }

    .delivery-section {
        min-height: 580px !important;
    }

    .second-section {
        margin-top: 10rem;
        margin-bottom: 4rem;
    }

    .deliverypartner {
        margin-top: 2rem;
    }

    .home-testimonial {
        height: 750px
    }
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
    .first-main-class {
        position: relative;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        width: calc(100% - 40px);
    }


    .bike-image {
        top: 27px !important;
        position: relative;
        z-index: 2;
    }

    .road-image {
        position: relative;
        top: 50px !important;
    }

    .bike {
        width: 60vh !important;
        position: relative;
        top: 60px;

    }

    .img-background {
        margin-top: 35px !important;
    }

    .about-img-section {
        justify-content: center !important;
    }

    .deliverypartner {
        margin-top: 2rem;
    }
}

@media only screen and (max-width: 576px) {

    .scan-qr {
        width: auto !important;
    }

    .scan-qr-section {
        display: inline-block !important;
    }

    .navbar-nav {
        width: 60%;
    }

    .fs-custom-40 {
        font-size: 1.5rem !important;
    }

    .fs-custom-22 {
        font-size: 1rem !important;
    }
    
    .courier-image {
        max-height: 180px;
    }

    .first-main-class {
        position: relative;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        width: calc(100% - 40px);
    }

    .bike-image {
        width: 70%;
        top: 45px !important;
        position: relative;
        z-index: 2;
    }

    .road-image {
        position: relative;
        top: 25px;
    }

    .img-background {
        margin-top: 35px !important;
    }

    .testimonial-text {
        overflow: auto;
    }

    .testimonial-text::-webkit-scrollbar {
        display: none;
    }

    .home-testimonial {
        height: 800px
    }

    .ordertracking-ul ul {
        flex-direction: column;
    }

    .ordertracking-ul ul li {
        width: 100%;
    }

    .adminlogin-form {
        width: 100% !important;
        padding: 10px !important;
    }

    .admin-pwd-input {
        width: 100% !important;
        padding: 10px !important;
    }

    .forgot-togglePassword {
        right: 8% !important;
    }

    .forgot-link-row {
        width: 104% !important;
    }

    .admin-login-row {
        width: 105% !important;
    }

}

@media only screen and (min-width: 1200px) {
    .why-section-img {
        width: 85% !important;
        margin-left: 1rem;
    }

    .cardbox {
        width: 75% !important;
    }
}

@media only screen and (min-width: 1500px) {
    .delivery-section {
        min-height: 760px !important;
    }
}

/* SCROLL BAR */
::-webkit-scrollbar {
    display: none;
    /* width: 5px; */
}



/* CC Forward Green: selectable homepage hero designs */
.ccfg-hero { position: relative; overflow: hidden; }
.ccfg-hero .card { border-radius: 18px; }
.ccfg-hero-design-1 {
    background: linear-gradient(125deg, #e4f4e9 0%, #f8fcf9 58%, #cce8d5 100%) !important;
}
.ccfg-hero-design-1 .card-border {
    border: 2px solid #188447 !important;
    box-shadow: 0 18px 42px rgba(13, 87, 47, .12);
}
.ccfg-hero-design-2 { background: #f7faf8 !important; }
.ccfg-hero-design-2 .card-border { box-shadow: 0 10px 28px rgba(0, 0, 0, .055); }
.ccfg-hero-design-3 {
    background: linear-gradient(135deg, #073f2b 0%, #0b5939 60%, #124b35 100%) !important;
}
.ccfg-hero-design-3 h1,
.ccfg-hero-design-3 h2,
.ccfg-hero-design-3 > .container p { color: #fff; }
.ccfg-hero-design-3 .card { background: #fff; color: #173d2c; }
.ccfg-hero-design-3 .card p,
.ccfg-hero-design-3 .card h4 { color: #173d2c !important; }
.ccfg-hero-design-3 .card-border { border: 1px solid #d4b66b !important; }
.ccfg-hero-design-4 { background: #edf6ef !important; }
.ccfg-hero-design-4 img.img-fluid.rounded-4 {
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    border-radius: 24px !important;
    box-shadow: 0 20px 44px rgba(7, 63, 43, .18);
}
.ccfg-hero-choice {
    cursor: pointer;
    border: 2px solid #dce5df;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ccfg-hero-choice:hover,
.ccfg-hero-choice-active {
    border-color: #188447;
    box-shadow: 0 4px 16px rgba(24, 132, 71, .13);
}
.ccfg-hero-choice input { accent-color: #188447; }
@media (max-width: 767px) {
    .ccfg-hero-design-4 img.img-fluid.rounded-4 { max-height: 360px; }
}


/* CC Forward Green: four real hero image layouts */
.ccfg-hero { position: relative; isolation: isolate; overflow: hidden; }
.ccfg-hero > .container { position: relative; z-index: 2; }
.ccfg-hero-side-slideshow {
    position: relative; width: 100%; min-height: 450px; overflow: hidden;
    border-radius: 26px; background: #dcebe0;
    box-shadow: 0 18px 42px rgba(5,52,30,.16);
}
.ccfg-hero-side-slideshow img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    min-height: 450px; object-fit: cover; opacity: 0;
    animation: ccfgRealFade 36s infinite;
}
.ccfg-hero-side-slideshow img:nth-child(1) { animation-delay: 0s; }
.ccfg-hero-side-slideshow img:nth-child(2) { animation-delay: 6s; }
.ccfg-hero-side-slideshow img:nth-child(3) { animation-delay: 12s; }
.ccfg-hero-side-slideshow img:nth-child(4) { animation-delay: 18s; }
.ccfg-hero-side-slideshow img:nth-child(5) { animation-delay: 24s; }
.ccfg-hero-side-slideshow img:nth-child(6) { animation-delay: 30s; }
@keyframes ccfgRealFade {
    0% { opacity: 0; transform: translateX(24px) scale(1.025); }
    4% { opacity: 1; transform: translateX(0) scale(1); }
    15% { opacity: 1; transform: translateX(0) scale(1); }
    19% { opacity: 0; transform: translateX(-18px) scale(1.015); }
    100% { opacity: 0; }
}

/* Option 1: full-bleed photo slideshow with dark readable overlay */
.ccfg-hero-design-1 { background: #073f2b !important; color: #fff; }
.ccfg-hero-design-1 .ccfg-hero-slideshow {
    display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.ccfg-hero-design-1 .ccfg-hero-slideshow:after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(2,35,20,.94), rgba(2,45,25,.76) 48%, rgba(2,35,20,.28));
}
.ccfg-hero-design-1 .ccfg-hero-slideshow img {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 680px;
    object-fit: cover; opacity: 0; animation: ccfgBoldSlide 36s infinite;
}
.ccfg-hero-design-1 .ccfg-hero-slideshow img:nth-child(1) { animation-delay: 0s; }
.ccfg-hero-design-1 .ccfg-hero-slideshow img:nth-child(2) { animation-delay: 6s; }
.ccfg-hero-design-1 .ccfg-hero-slideshow img:nth-child(3) { animation-delay: 12s; }
.ccfg-hero-design-1 .ccfg-hero-slideshow img:nth-child(4) { animation-delay: 18s; }
.ccfg-hero-design-1 .ccfg-hero-slideshow img:nth-child(5) { animation-delay: 24s; }
.ccfg-hero-design-1 .ccfg-hero-slideshow img:nth-child(6) { animation-delay: 30s; }
@keyframes ccfgBoldSlide {
    0% { opacity: 0; transform: translateX(5%) scale(1.04); }
    4% { opacity: 1; transform: translateX(0) scale(1); }
    15% { opacity: 1; transform: translateX(0) scale(1); }
    19% { opacity: 0; transform: translateX(-3%) scale(1.025); }
    100% { opacity: 0; }
}
.ccfg-hero-design-1 h1, .ccfg-hero-design-1 h2 { color: #fff !important; }
.ccfg-hero-design-1 .ccfg-hero-visual { display: none; }
.ccfg-hero-design-1 .row.align-items-center > .col-lg-6:first-child {
    flex: 0 0 66.6667%; max-width: 66.6667%;
}

/* Option 2: light professional split layout */
.ccfg-hero-design-2 { background: linear-gradient(110deg,#f7fbf7,#edf6ec) !important; }

/* Option 3: premium dark-green split layout */
.ccfg-hero-design-3 { background: linear-gradient(125deg,#032c1d,#075337 65%,#0c3b29) !important; }
.ccfg-hero-design-3 h1, .ccfg-hero-design-3 h2 { color: #fff !important; }
.ccfg-hero-design-3 .ccfg-hero-side-slideshow { border: 1px solid rgba(214,188,111,.7); }
.ccfg-hero-design-3 .card { background: #fff; }

/* Option 4: overlapping agricultural image collage */
.ccfg-hero-design-4 { background: #f2f7ef !important; }
.ccfg-hero-collage { height: 510px; position: relative; overflow: hidden; border-radius: 24px; }
.ccfg-collage-tile {
    position: absolute; overflow: hidden; border: 5px solid #f2f7ef;
    border-radius: 20px; box-shadow: 0 8px 22px rgba(7,63,43,.15);
}
.ccfg-collage-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.ccfg-collage-tile:hover img { transform: scale(1.06); }
.ccfg-collage-tile-1 { left: 0; top: 0; width: 58%; height: 48%; }
.ccfg-collage-tile-2 { right: 0; top: 0; width: 42%; height: 34%; }
.ccfg-collage-tile-3 { right: 0; top: 33%; width: 47%; height: 38%; }
.ccfg-collage-tile-4 { left: 0; top: 46%; width: 39%; height: 54%; }
.ccfg-collage-tile-5 { left: 35%; bottom: 0; width: 34%; height: 35%; }
.ccfg-collage-tile-6 { right: 0; bottom: 0; width: 33%; height: 32%; }

@media (max-width:767px) {
    .ccfg-hero-design-1 .row.align-items-center > .col-lg-6:first-child { flex: 0 0 100%; max-width: 100%; }
    .ccfg-hero-design-1 .ccfg-hero-slideshow img { min-height: 900px; }
    .ccfg-hero-side-slideshow, .ccfg-hero-side-slideshow img { min-height: 320px; }
    .ccfg-hero-collage { height: 360px; }
}


/* CC Forward Green admin layout wireframe previews */
.ccfg-admin-preview { height:138px; position:relative; overflow:hidden; border:1px solid #d4e2d7; border-radius:9px; background:#eff6ef; margin-top:10px; }
.ccfg-admin-preview-1 { background:#082e20; }
.ccfg-preview-bg { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,32,18,.94),rgba(3,70,37,.3)); }
.ccfg-preview-copy { position:absolute; z-index:2; left:6%; top:18%; width:52%; }
.ccfg-preview-copy b,.ccfg-preview-copy i { display:block; height:5px; margin:0 0 7px; border-radius:4px; background:#176c3c; width:90%; }
.ccfg-preview-copy b { height:10px; width:95%; margin-bottom:11px; }
.ccfg-preview-copy i:nth-of-type(2) { width:72%; }
.ccfg-preview-copy i:nth-of-type(3) { width:55%; }
.ccfg-admin-preview-1 .ccfg-preview-copy b,.ccfg-admin-preview-1 .ccfg-preview-copy i { background:#fff; }
.ccfg-preview-photo { position:absolute; right:0; top:0; width:48%; height:100%; background:linear-gradient(135deg,#8ebd83,#2b7043); }
.ccfg-admin-preview-3 { background:linear-gradient(120deg,#032c1d,#0b5939); }
.ccfg-admin-preview-3 .ccfg-preview-copy b,.ccfg-admin-preview-3 .ccfg-preview-copy i { background:#d4e7a9; }
.ccfg-preview-panel { position:absolute; z-index:3; right:3%; bottom:8%; width:31%; height:49%; border-radius:5px; border:1px solid #d7e5da; background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.15); }
.ccfg-preview-panel:before { content:""; display:block; height:5px; margin:11px 6px 7px; border-radius:3px; background:#176c3c; }
.ccfg-preview-panel:after { content:""; display:block; height:22px; margin:6px; border:1px solid #c9ddcf; border-radius:3px; background:#e6f1e8; }
.ccfg-preview-track { position:absolute; z-index:4; left:5%; bottom:8%; color:#176c3c; font-size:7px; font-weight:700; }
.ccfg-admin-preview-1 .ccfg-preview-track { color:#fff; }
.ccfg-preview-collage { position:absolute; right:3%; top:5%; width:54%; height:90%; }
.ccfg-preview-collage span { position:absolute; width:54%; height:53%; border:2px solid #fff; border-radius:5px; background:linear-gradient(135deg,#8cbf83,#23643b); }
.ccfg-preview-collage .ccfg-tile-a { left:0; top:0; }
.ccfg-preview-collage .ccfg-tile-b { right:0; top:0; background:linear-gradient(135deg,#d5e7ae,#64904a); }
.ccfg-preview-collage .ccfg-tile-c { left:3%; bottom:0; background:linear-gradient(135deg,#b9d59d,#3d7b43); }
.ccfg-preview-collage .ccfg-tile-d { right:0; bottom:0; background:linear-gradient(135deg,#9cc5a0,#195d38); }
.ccfg-hero-choice { cursor:pointer; border:2px solid #dce5df; border-radius:12px; background:#fff; }
.ccfg-hero-choice input { accent-color:#188447; }
.ccfg-hero-choice-active { border-color:#188447 !important; box-shadow:0 0 0 2px rgba(24,132,71,.13); }


/* CC Forward Green: final controlled hero layout overrides */
.ccfg-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
}
.ccfg-hero > .container { position: relative; z-index: 2; }
.ccfg-hero .row.align-items-center { margin-top: 0 !important; }
.ccfg-hero h1, .ccfg-hero h2 {
    font-size: clamp(2rem, 3.1vw, 3.25rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
}
.ccfg-hero h2 { font-size: clamp(1.55rem, 2.35vw, 2.55rem); }
.ccfg-hero .card { margin-top: 24px !important; }
.ccfg-hero-visual { min-width: 0; }
.ccfg-hero-side-slideshow {
    position: relative; width: 100%; height: 440px; min-height: 0;
    overflow: hidden; border-radius: 24px; background: #dcebe0;
    box-shadow: 0 18px 42px rgba(5,52,30,.16);
}
.ccfg-hero-side-slideshow img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    min-height: 0; object-fit: cover; opacity: 0;
    animation: ccfgRealFade 36s infinite;
}
.ccfg-hero-side-slideshow img:nth-child(1) { animation-delay: 0s; }
.ccfg-hero-side-slideshow img:nth-child(2) { animation-delay: 6s; }
.ccfg-hero-side-slideshow img:nth-child(3) { animation-delay: 12s; }
.ccfg-hero-side-slideshow img:nth-child(4) { animation-delay: 18s; }
.ccfg-hero-side-slideshow img:nth-child(5) { animation-delay: 24s; }
.ccfg-hero-side-slideshow img:nth-child(6) { animation-delay: 30s; }

.ccfg-hero-design-1 { background:#073f2b !important; color:#fff; }
.ccfg-hero-design-1 .ccfg-hero-slideshow {
    display:block; position:absolute; inset:0; z-index:0; overflow:hidden;
}
.ccfg-hero-design-1 .ccfg-hero-slideshow:after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,rgba(2,35,20,.94),rgba(2,45,25,.76) 55%,rgba(2,35,20,.35));
}
.ccfg-hero-design-1 .ccfg-hero-slideshow img {
    position:absolute; inset:0; width:100%; height:100%; min-height:0;
    object-fit:cover; opacity:0; animation:ccfgBoldSlide 36s infinite;
}
.ccfg-hero-design-1 .ccfg-hero-visual { display:none; }
.ccfg-hero-design-1 .row.align-items-center > .col-lg-6:first-child {
    flex:0 0 75%; max-width:75%;
}
.ccfg-hero-design-1 h1,.ccfg-hero-design-1 h2 { color:#fff !important; }
.ccfg-hero-design-1 .card { max-width:680px; }

.ccfg-hero-design-2 { background:linear-gradient(110deg,#f7fbf7,#edf6ec) !important; }
.ccfg-hero-design-2 .ccfg-hero-visual { display:block; }
.ccfg-hero-design-2 .ccfg-hero-side-slideshow:after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent 55%,rgba(247,251,247,.08));
    pointer-events:none;
}

.ccfg-hero-design-3 { background:linear-gradient(125deg,#032c1d,#075337 65%,#0c3b29) !important; }
.ccfg-hero-design-3 h1,.ccfg-hero-design-3 h2 { color:#fff !important; }
.ccfg-hero-design-3 .ccfg-hero-side-slideshow { border:1px solid rgba(214,188,111,.7); }
.ccfg-hero-design-3 .card { background:#fff; color:#173d2c; }

.ccfg-hero-design-4 { background:#f2f7ef !important; }
.ccfg-hero-design-4 .ccfg-hero-collage {
    width:100%; height:440px; min-height:0; position:relative;
    overflow:hidden; border-radius:24px;
}
.ccfg-hero-design-4 .ccfg-collage-tile {
    position:absolute; overflow:hidden; border:4px solid #f2f7ef;
    border-radius:18px; box-shadow:0 8px 22px rgba(7,63,43,.15);
}
.ccfg-hero-design-4 .ccfg-collage-tile img {
    display:block; width:100%; height:100%; object-fit:cover;
}
.ccfg-hero-design-4 .ccfg-collage-tile-1 { left:0; top:0; width:58%; height:48%; }
.ccfg-hero-design-4 .ccfg-collage-tile-2 { right:0; top:0; width:42%; height:34%; }
.ccfg-hero-design-4 .ccfg-collage-tile-3 { right:0; top:33%; width:47%; height:38%; }
.ccfg-hero-design-4 .ccfg-collage-tile-4 { left:0; top:46%; width:39%; height:54%; }
.ccfg-hero-design-4 .ccfg-collage-tile-5 { left:35%; bottom:0; width:34%; height:35%; }
.ccfg-hero-design-4 .ccfg-collage-tile-6 { right:0; bottom:0; width:33%; height:32%; }

@media (max-width:991px) {
    .ccfg-hero { padding-top:32px !important; padding-bottom:32px !important; }
    .ccfg-hero-design-1 .row.align-items-center > .col-lg-6:first-child {
        flex:0 0 100%; max-width:100%;
    }
    .ccfg-hero-side-slideshow { height:360px; margin-top:26px; }
    .ccfg-hero-design-4 .ccfg-hero-collage { height:360px; margin-top:26px; }
}
@media (max-width:575px) {
    .ccfg-hero h1 { font-size:2rem; }
    .ccfg-hero h2 { font-size:1.5rem; }
    .ccfg-hero-side-slideshow { height:280px; }
    .ccfg-hero-design-4 .ccfg-hero-collage { height:300px; }
    .ccfg-hero .scan-qr-section img { width:76px; height:76px; object-fit:contain; }
}


/* CC Forward Green: hide duplicate slideshow outside Option 1 */
.ccfg-hero:not(.ccfg-hero-design-1) > .ccfg-hero-slideshow {
    display: none !important;
}
.ccfg-hero-design-1 > .ccfg-hero-slideshow {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.ccfg-hero-design-1 > .ccfg-hero-slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}


/* CC Forward Green: linked app store badges in hero */
.ccfg-hero-store-links { position:relative; z-index:4; margin-top:20px; }
.ccfg-hero-store-links .ccfg-store-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:150px; min-height:54px; padding:5px 12px;
    background:#fff; border:1px solid #d7e3da; border-radius:9px;
    box-shadow:0 3px 10px rgba(0,0,0,.07);
}
.ccfg-hero-store-links .ccfg-store-badge img {
    display:block; max-width:142px; width:auto; height:40px; object-fit:contain;
}
.ccfg-hero-store-links .ccfg-store-badge:hover { transform:translateY(-2px); }
@media(max-width:575px) {
    .ccfg-hero-store-links .ccfg-store-badge { min-width:128px; }
    .ccfg-hero-store-links .ccfg-store-badge img { max-width:118px; height:35px; }
}


/* CC Forward Green: download row below both hero columns */
.ccfg-hero-download-below {
    clear: both;
    width: 100%;
    margin: 30px auto 0;
    padding: 24px 16px 6px;
    border-top: 1px solid rgba(23,108,60,.16);
    position: relative;
    z-index: 3;
}
.ccfg-hero-download-below h3 {
    margin: 0 0 8px;
    color: #176c3c;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
}
.ccfg-hero-download-below > p {
    margin: 0 0 18px;
    color: #5e6d62;
}
.ccfg-hero-download-below .ccfg-hero-store-links { margin-top: 0 !important; }
.ccfg-hero-download-below .ccfg-store-badge {
    min-width: 220px;
    min-height: 76px;
    padding: 10px 18px;
    border-radius: 12px;
}
.ccfg-hero-download-below .ccfg-store-badge img {
    max-width: 190px;
    height: 52px;
    object-fit: contain;
}
@media (max-width:575px) {
    .ccfg-hero-download-below { margin-top: 20px; padding-top: 20px; }
    .ccfg-hero-download-below .ccfg-store-badge { min-width: 190px; min-height: 66px; }
    .ccfg-hero-download-below .ccfg-store-badge img { max-width: 165px; height: 44px; }
}


/* CC Forward Green: center app downloads beneath hero columns */
.ccfg-hero .ccfg-hero-download-below {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.ccfg-hero .ccfg-hero-download-below .ccfg-hero-store-links {
    width: 100%;
    display: flex;
    justify-content: center;
}
.ccfg-hero .ccfg-hero-download-below .ccfg-hero-store-links > div {
    justify-content: center !important;
    width: 100%;
}


/* CC Forward Green: place app downloads beneath right collage */
.ccfg-hero .ccfg-hero-download-below {
    width: 50%;
    margin: -8px 0 0 auto;
    padding: 14px 0 4px;
    border-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    box-sizing: border-box;
}
.ccfg-hero .ccfg-hero-download-below h3 {
    margin: 0 0 6px;
}
.ccfg-hero .ccfg-hero-download-below > p {
    margin: 0 0 12px;
}
.ccfg-hero .ccfg-hero-download-below .ccfg-hero-store-links,
.ccfg-hero .ccfg-hero-download-below .ccfg-hero-store-links > div {
    width: 100%;
    display: flex;
    justify-content: center;
}
.ccfg-hero .ccfg-hero-download-below .ccfg-store-badge {
    min-width: 175px;
    min-height: 66px;
}
.ccfg-hero .ccfg-hero-download-below .ccfg-store-badge img {
    max-width: 150px;
    height: 44px;
}
@media (max-width: 991px) {
    .ccfg-hero .ccfg-hero-download-below {
        width: 100%;
        margin: 18px auto 0;
        padding-top: 18px;
        border-top: 1px solid rgba(23,108,60,.16);
    }
}
@media (max-width: 575px) {
    .ccfg-hero .ccfg-hero-download-below .ccfg-store-badge {
        min-width: 145px;
        min-height: 58px;
    }
    .ccfg-hero .ccfg-hero-download-below .ccfg-store-badge img {
        max-width: 125px;
        height: 38px;
    }
}


/* CC Forward Green: align store buttons beneath collage */
.ccfg-hero .ccfg-hero-download-below {
    width: 100%;
    margin: 8px 0 0;
    padding: 0 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}
.ccfg-hero .ccfg-hero-download-below h3 {
    margin: 0 0 6px;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}
.ccfg-hero .ccfg-hero-download-below > p {
    margin: 0 0 12px;
}
.ccfg-hero .ccfg-hero-download-below .ccfg-hero-store-links,
.ccfg-hero .ccfg-hero-download-below .ccfg-hero-store-links > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.ccfg-hero .ccfg-hero-download-below .ccfg-store-badge {
    width: 190px;
    min-width: 0;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    box-sizing: border-box;
}
.ccfg-hero .ccfg-hero-download-below .ccfg-store-badge img {
    display: block;
    width: 160px;
    max-width: 100%;
    height: 46px;
    object-fit: contain;
}
@media (max-width: 575px) {
    .ccfg-hero .ccfg-hero-download-below .ccfg-hero-store-links > div {
        gap: 8px;
    }
    .ccfg-hero .ccfg-hero-download-below .ccfg-store-badge {
        width: 145px;
        min-height: 58px;
        padding: 6px;
    }
    .ccfg-hero .ccfg-hero-download-below .ccfg-store-badge img {
        width: 125px;
        height: 38px;
    }
}


/* CC Forward Green: slight hero collage top spacing */
.ccfg-hero .ccfg-hero-visual {
    padding-top: 18px;
}
@media (max-width: 991px) {
    .ccfg-hero .ccfg-hero-visual {
        padding-top: 14px;
    }
}


/* CC Forward Green: align tracking card with store badges */
.ccfg-hero .ccfg-hero-download-below {
    margin-top: 0 !important;
}
.ccfg-hero .ccfg-hero-download-below h3 {
    margin-top: 0;
    margin-bottom: 10px;
}
.ccfg-hero .ccfg-hero-store-links {
    margin-top: 0 !important;
}
.ccfg-hero .ccfg-hero-store-links > div {
    justify-content: center;
    gap: 12px !important;
}
.ccfg-hero .ccfg-store-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 10px 16px;
}
.ccfg-hero .ccfg-store-badge img {
    display: block;
    width: 150px;
    height: 44px;
    object-fit: contain;
}
@media (min-width: 992px) {
    .ccfg-hero .ccfg-hero-download-below {
        padding-bottom: 0;
    }
    .ccfg-hero .ccfg-hero-visual {
        display: flex;
        flex-direction: column;
    }
    .ccfg-hero .ccfg-hero-download-below {
        margin-top: 12px !important;
    }
}

/* CC Forward Green: adjust tracking card only; preserve image layout */
@media (min-width: 992px) {
    .ccfg-hero .row.align-items-center {
        align-items: flex-start !important;
    }

    .ccfg-hero .row.align-items-center > .col-lg-6:first-child {
        display: block;
    }

    .ccfg-hero .row.align-items-center > .col-lg-6:first-child > .card {
        margin-top: 20px !important;
        padding: 20px !important;
        transform: translateY(8px);
    }

    .ccfg-hero .ccfg-hero-visual {
        padding-top: 28px !important;
    }
}

@media (max-width: 991px) {
    .ccfg-hero .row.align-items-center > .col-lg-6:first-child > .card {
        padding: 20px !important;
        transform: none;
    }
}


/* CC Forward Green: image layout lower adjustment 2 */
@media (min-width: 992px) {
    .ccfg-hero .ccfg-hero-visual {
        padding-top: 40px !important;
    }
}


/* CC Forward Green: image layout lower adjustment 3 */
@media (min-width: 992px) {
    .ccfg-hero .ccfg-hero-visual {
        padding-top: 52px !important;
    }
}

/* CC Forward Green: align tracking card with hero visuals */
@media (min-width: 992px) {
  .ccfg-hero .row.align-items-center > .col-lg-6:first-child > .card {
    transform: translateY(0) !important;
    margin-top: 12px !important;
  }
}

/* CC Forward Green: reduce tracking card height */
@media (min-width: 992px) {
  .ccfg-hero .row.align-items-center > .col-lg-6:first-child > .card {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  .ccfg-hero .row.align-items-center > .col-lg-6:first-child > .card .form-group,
  .ccfg-hero .row.align-items-center > .col-lg-6:first-child > .card .mb-3 {
    margin-bottom: 8px !important;
  }

  .ccfg-hero .row.align-items-center > .col-lg-6:first-child > .card input,
  .ccfg-hero .row.align-items-center > .col-lg-6:first-child > .card select {
    min-height: 36px !important;
  }
}

/* CC Forward Green: fine-tune tracking card alignment */
@media (min-width: 992px) {
  .ccfg-hero .row.align-items-center > .col-lg-6:first-child > .card {
    transform: translateY(6px) !important;
  }
}



/* ==========================================================
   CC FORWARD GREEN — PROFESSIONAL HERO POLISH
   Visual refinement only: preserve existing layout/functionality
   ========================================================== */

.ccfg-hero {
    position: relative;
    isolation: isolate;
}

.ccfg-hero h1 {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: clamp(2.15rem, 3.5vw, 3.45rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.045em;
    color: #173d2b;
    text-wrap: balance;
    margin-bottom: 1.1rem;
}

.ccfg-hero h2,
.ccfg-hero h3 {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: #173d2b;
    text-wrap: balance;
}

.ccfg-hero p {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: #58675e;
}

.ccfg-hero .card {
    border: 1px solid rgba(30, 100, 60, 0.12) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fcf8 100%);
    box-shadow:
        0 18px 45px rgba(22, 65, 42, 0.09),
        0 3px 10px rgba(22, 65, 42, 0.04) !important;
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
}

.ccfg-hero .card:hover {
    border-color: rgba(30, 100, 60, 0.22) !important;
    box-shadow:
        0 22px 52px rgba(22, 65, 42, 0.13),
        0 4px 12px rgba(22, 65, 42, 0.05) !important;
}

.ccfg-hero .card .card-body {
    padding: clamp(1.25rem, 2.4vw, 2rem);
}

.ccfg-hero label {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.ccfg-hero input,
.ccfg-hero select,
.ccfg-hero textarea {
    min-height: 48px;
    border: 1px solid #dce7de !important;
    border-radius: 12px !important;
    background-color: #fff;
    color: #20392b;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: .96rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ccfg-hero input:focus,
.ccfg-hero select:focus,
.ccfg-hero textarea:focus {
    border-color: #398354 !important;
    box-shadow: 0 0 0 4px rgba(57, 131, 84, .12) !important;
    outline: none;
}

.ccfg-hero .btn {
    min-height: 46px;
    border-radius: 12px;
    padding: .78rem 1.35rem;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: transform .2s ease, box-shadow .2s ease,
                background-color .2s ease;
}

.ccfg-hero .btn:hover {
    transform: translateY(-2px);
}

.ccfg-hero .btn-success,
.ccfg-hero .btn-primary {
    box-shadow: 0 7px 18px rgba(28, 105, 57, .18);
}

.ccfg-hero .ccfg-hero-visual img {
    border-radius: 18px;
}

.ccfg-hero .ccfg-hero-visual {
    min-width: 0;
}

.ccfg-hero a:focus-visible,
.ccfg-hero button:focus-visible {
    outline: 3px solid rgba(57, 131, 84, .55);
    outline-offset: 3px;
}

@media (max-width: 991.98px) {
    .ccfg-hero h1 {
        font-size: clamp(2rem, 6vw, 2.8rem);
        letter-spacing: -.035em;
    }

    .ccfg-hero .card {
        border-radius: 18px !important;
    }
}

@media (max-width: 575.98px) {
    .ccfg-hero h1 {
        font-size: 2rem;
        line-height: 1.17;
    }

    .ccfg-hero p {
        font-size: .95rem;
        line-height: 1.65;
    }

    .ccfg-hero .card .card-body {
        padding: 1.15rem;
    }

    .ccfg-hero .btn {
        width: 100%;
    }
}


/* CC Forward Green — refined hero typography only */
.ccfg-hero h1 {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: clamp(2.25rem, 3.2vw, 3.15rem) !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -1.4px !important;
    margin-bottom: 12px !important;
}

.ccfg-hero h2 {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-size: clamp(1.55rem, 2.3vw, 2.3rem) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -.6px !important;
}

.ccfg-hero h3,
.ccfg-hero .card h4 {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -.25px !important;
}

.ccfg-hero p {
    font-family: "Roboto", "Segoe UI", sans-serif !important;
    font-size: 15.5px !important;
    line-height: 1.75 !important;
}

.ccfg-hero label,
.ccfg-hero input,
.ccfg-hero select,
.ccfg-hero button,
.ccfg-hero .btn {
    font-family: "Roboto", "Segoe UI", sans-serif !important;
}

.ccfg-hero label {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.ccfg-hero .btn {
    font-weight: 600 !important;
    letter-spacing: .1px !important;
}

@media (max-width: 575.98px) {
    .ccfg-hero h1 {
        font-size: 2rem !important;
        letter-spacing: -.8px !important;
    }

    .ccfg-hero h2 {
        font-size: 1.55rem !important;
    }
}



/* CC Forward Green — approved premium agricultural hero */
.ccfg-hero-approved {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 34px 0 76px !important;
    color: #111d2a;
    background: linear-gradient(118deg, #fbfdf9 0%, #f4f8f1 55%, #fffaf1 100%) !important;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif !important;
}
.ccfg-hero-approved .ccfg-hero-background {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(250,253,248,.95), rgba(250,253,248,.82) 47%, rgba(250,253,248,.52)), url("/forward-green-assets/hero/01.jpg");
    background-size: cover;
    background-position: center;
    opacity: .28;
}
.ccfg-hero-approved .ccfg-hero-container { position: relative; z-index: 2; }
.ccfg-approved-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
    gap: 24px;
}
.ccfg-approved-left { min-width: 0; padding: 14px 0 0; }
.ccfg-approved-eyebrow {
    display: flex; align-items: center; gap: 10px;
    color: #26774a; font-size: 12px; font-weight: 800;
    letter-spacing: 2.1px; line-height: 1.6; margin-bottom: 22px;
}
.ccfg-leaf-mark { font-size: 27px; color: #5b9b68; line-height: 1; }
.ccfg-hero-approved h1 {
    color: #101d2b !important;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(36px, 4vw, 57px) !important;
    font-weight: 800 !important; line-height: 1.08 !important;
    letter-spacing: -2.3px !important; margin: 0 0 8px !important;
    overflow-wrap: normal; text-wrap: balance;
}
.ccfg-hero-approved h2 {
    color: #176743 !important;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(27px, 3vw, 43px) !important;
    font-weight: 800 !important; line-height: 1.13 !important;
    letter-spacing: -1.5px !important; margin: 0 0 17px !important;
    text-wrap: balance;
}
.ccfg-hero-approved .ccfg-approved-intro {
    color: #606970 !important; font-size: 16px !important;
    line-height: 1.65 !important; max-width: 570px; margin: 0 0 30px;
}
.ccfg-approved-cards {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 16px; align-items: stretch;
}
.ccfg-approved-card {
    position: relative; min-width: 0; padding: 22px 20px 20px;
    border: 1px solid rgba(38,112,70,.12);
    border-radius: 24px; background: rgba(255,255,255,.91);
    box-shadow: 0 13px 34px rgba(27,70,43,.09);
    display: flex; flex-direction: column;
}
.ccfg-create-card {
    background: linear-gradient(145deg, #fff 0%, #fff6e9 100%);
    border-color: rgba(224,133,37,.19);
}
.ccfg-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; border-radius: 50%; margin-bottom: 14px;
}
.ccfg-card-icon svg { width: 38px; height: 38px; }
.ccfg-track-icon { color: #08734a; background: #d9f0e1; box-shadow: inset 0 0 0 8px rgba(25,139,85,.12); }
.ccfg-create-icon { color: #fff; background: #ed8a16; box-shadow: inset 0 0 0 8px rgba(255,255,255,.24); }
.ccfg-hero-approved .ccfg-approved-card h3 {
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
    color: #111d2a !important; font-size: clamp(18px, 1.6vw, 24px) !important;
    font-weight: 800 !important; line-height: 1.25 !important;
    letter-spacing: -.65px !important; margin: 0 0 8px !important;
}
.ccfg-hero-approved .ccfg-approved-card p {
    color: #616971 !important; font-size: 14px !important;
    line-height: 1.55 !important; margin: 0 0 18px !important;
}
.ccfg-approved-track-form { margin-top: auto; }
.ccfg-approved-order-input {
    display: flex; align-items: center; gap: 10px; min-height: 48px;
    border: 1px solid #dce2df; border-radius: 14px;
    background: #fff; padding: 0 12px; margin: 0 0 12px;
}
.ccfg-approved-order-input svg { width: 24px; height: 24px; flex: 0 0 24px; color: #155c40; }
.ccfg-approved-order-input input {
    width: 100%; min-width: 0; border: 0 !important; outline: 0 !important;
    box-shadow: none !important; background: transparent !important;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important; color: #23382d; padding: 10px 0;
}
.ccfg-approved-button {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; width: 100%; min-height: 50px; padding: 12px 18px;
    border: 0; border-radius: 14px; color: #fff !important;
    text-decoration: none !important; font-size: 15px; font-weight: 700;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif !important;
    box-shadow: 0 7px 15px rgba(24,100,61,.17);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ccfg-approved-button:hover { transform: translateY(-2px); color: #fff !important; box-shadow: 0 11px 22px rgba(24,100,61,.22); }
.ccfg-approved-track-button { background: linear-gradient(110deg,#086b45,#14794d); }
.ccfg-approved-create-button {
    margin-top: auto; background: linear-gradient(110deg,#dc7417,#f3940e);
    box-shadow: 0 7px 15px rgba(221,123,20,.19);
}
.ccfg-approved-create-button:hover { box-shadow: 0 11px 22px rgba(221,123,20,.25); }
.ccfg-approved-button span:last-child { font-size: 23px; font-weight: 400; line-height: 1; }
.ccfg-approved-right { min-width: 0; }
.ccfg-approved-collage {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr .88fr .88fr; gap: 8px;
    height: 430px; width: 100%;
}
.ccfg-approved-photo { min-width: 0; min-height: 0; overflow: hidden; border-radius: 19px; background: #dce8d9; }
.ccfg-approved-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.ccfg-approved-photo:hover img { transform: scale(1.04); }
.ccfg-approved-photo-1 { grid-column: 1; grid-row: 1; }
.ccfg-approved-photo-2 { grid-column: 2; grid-row: 1; }
.ccfg-approved-photo-3 { grid-column: 1; grid-row: 2; }
.ccfg-approved-photo-4 { grid-column: 2; grid-row: 2; }
.ccfg-approved-photo-5 { grid-column: 1; grid-row: 3; }
.ccfg-approved-photo-6 { grid-column: 2; grid-row: 3; }
.ccfg-approved-download { padding: 17px 0 0; text-align: center; }
.ccfg-approved-download h3 {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    color: #111d2a !important; font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(21px, 2vw, 29px) !important; font-weight: 800 !important;
    letter-spacing: -.7px !important; margin: 0 0 7px !important;
}
.ccfg-approved-download h3 span { width: 30px; height: 1px; background: #a8d0a9; }
.ccfg-approved-download p { color: #59636a !important; font-size: 13px !important; line-height: 1.5 !important; margin: 0 0 16px !important; }
.ccfg-approved-store-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; }
.ccfg-approved-store-links a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 155px; height: 53px; padding: 4px 12px;
    background: #000; border: 1px solid #222; border-radius: 9px;
    box-shadow: 0 5px 12px rgba(0,0,0,.15); overflow: hidden;
}
.ccfg-approved-store-links a img { display: block; max-width: 100%; max-height: 43px; width: auto; height: auto; object-fit: contain; }
.ccfg-approved-store-notice { color: #65716a; font-size: 12px; }
.ccfg-approved-bottom-wave {
    position: absolute; z-index: 1; left: -4%; right: -4%; bottom: -65px;
    height: 125px; pointer-events: none;
    background: linear-gradient(170deg,#b9dcb7 0%,#e2efcf 55%,#f5f8ed 100%);
    border-radius: 50% 48% 0 0 / 36% 40% 0 0;
    transform: rotate(-1.5deg);
}
.ccfg-approved-bottom-wave:before {
    content: ""; position: absolute; left: -2%; bottom: 16px;
    width: 39%; height: 95px; background: #23834f;
    border-radius: 0 100% 0 0; transform: rotate(3deg);
}
.ccfg-approved-bottom-wave:after {
    content: ""; position: absolute; left: 0; right: 0; top: 20px;
    height: 72px; background: rgba(255,255,255,.35);
    border-radius: 50% 55% 0 0 / 45% 50% 0 0;
}
@media (max-width: 1199.98px) {
    .ccfg-approved-grid { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 18px; }
    .ccfg-approved-card { padding: 18px 15px; }
    .ccfg-approved-collage { height: 390px; }
    .ccfg-hero-approved h1 { letter-spacing: -1.5px !important; }
}
@media (max-width: 991.98px) {
    .ccfg-hero-approved { padding: 32px 0 70px !important; }
    .ccfg-approved-grid { grid-template-columns: 1fr; gap: 30px; }
    .ccfg-approved-left { padding-top: 0; }
    .ccfg-approved-intro { max-width: 720px; }
    .ccfg-approved-collage { height: 460px; }
    .ccfg-approved-cards { max-width: 760px; }
}
@media (max-width: 575.98px) {
    .ccfg-hero-approved { padding: 25px 0 62px !important; }
    .ccfg-approved-eyebrow { font-size: 10px; letter-spacing: 1.1px; margin-bottom: 16px; }
    .ccfg-hero-approved h1 { font-size: 35px !important; letter-spacing: -1.2px !important; }
    .ccfg-hero-approved h2 { font-size: 27px !important; letter-spacing: -.7px !important; }
    .ccfg-hero-approved .ccfg-approved-intro { font-size: 15px !important; margin-bottom: 22px; }
    .ccfg-approved-cards { grid-template-columns: 1fr; gap: 14px; }
    .ccfg-approved-card { padding: 20px; border-radius: 21px; }
    .ccfg-approved-card h3 { font-size: 23px !important; }
    .ccfg-approved-collage { height: 340px; gap: 6px; }
    .ccfg-approved-photo { border-radius: 13px; }
    .ccfg-approved-download h3 { font-size: 23px !important; }
    .ccfg-approved-download h3 span { width: 17px; }
    .ccfg-approved-store-links a { min-width: 140px; height: 49px; }
}
@media (prefers-reduced-motion: reduce) {
    .ccfg-approved-photo img, .ccfg-approved-button { transition: none; }
}


/* Distinctive premium typography for the African soil tagline */
.ccfg-hero-approved .ccfg-approved-left h2 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(29px, 3.1vw, 43px) !important;
    font-weight: 700 !important;
    font-style: italic !important;
    letter-spacing: -1.1px !important;
    line-height: 1.2 !important;
    color: #176743 !important;
    text-wrap: balance;
}


/* Distinctive editorial tagline */
.ccfg-hero-approved h2.ccfg-unique-tagline {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important;
    font-size: clamp(30px, 3.2vw, 44px) !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -1.2px !important;
    color: #176743 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
    margin-top: 4px !important;
    margin-bottom: 20px !important;
}


/* Correct hero title and subtitle hierarchy */
.ccfg-hero-approved h1 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif !important;
    font-size: clamp(38px, 4vw, 54px) !important;
    font-weight: 700 !important;
    font-style: italic !important;
    line-height: 1.12 !important;
    letter-spacing: -1.3px !important;
    color: #111d2a !important;
    margin-bottom: 12px !important;
}

.ccfg-hero-approved h2.ccfg-unique-tagline,
.ccfg-hero-approved .ccfg-approved-left > h2 {
    font-family: "Roboto", "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(15px, 1.25vw, 17px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
    color: #626b70 !important;
    text-shadow: none !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

@media (max-width: 575.98px) {
    .ccfg-hero-approved h1 {
        font-size: 35px !important;
        letter-spacing: -.7px !important;
    }

    .ccfg-hero-approved h2.ccfg-unique-tagline,
    .ccfg-hero-approved .ccfg-approved-left > h2 {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* Refine collage proportions and prevent it crowding the download section */
.ccfg-hero-approved .ccfg-approved-collage {
    height: 360px !important;
    grid-template-rows: 1fr .88fr .88fr !important;
    gap: 7px !important;
}
.ccfg-hero-approved .ccfg-approved-photo {
    min-height: 0 !important;
}
.ccfg-hero-approved .ccfg-approved-download {
    padding-top: 12px !important;
}
.ccfg-hero-approved .ccfg-approved-store-links a {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}
.ccfg-hero-approved .ccfg-approved-store-links a img {
    display: block !important;
    width: 170px !important;
    height: auto !important;
    max-height: 58px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
}
@media (max-width: 575.98px) {
    .ccfg-hero-approved .ccfg-approved-collage {
        height: 300px !important;
    }
    .ccfg-hero-approved .ccfg-approved-store-links a img {
        width: 145px !important;
    }
}

/* Refine collage spacing and official store badges */
.ccfg-hero-approved .ccfg-approved-collage {
    height: 330px !important;
    position: relative !important;
    top: 10px !important;
    grid-template-rows: 1fr .88fr .88fr !important;
    gap: 7px !important;
}
.ccfg-hero-approved .ccfg-approved-photo { min-height: 0 !important; }
.ccfg-hero-approved .ccfg-approved-download { padding-top: 18px !important; }
.ccfg-hero-approved .ccfg-approved-store-links a {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-width: 0 !important;
}
.ccfg-hero-approved .ccfg-approved-store-links a img {
    display: block !important;
    width: 160px !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
}
@media (max-width: 575.98px) {
    .ccfg-hero-approved .ccfg-approved-collage { height: 290px !important; top: 0 !important; }
    .ccfg-hero-approved .ccfg-approved-store-links a img { width: 145px !important; }
}

/* CCFG HERO SPACING FIX - 12 OCT 2026 */
.ccfg-hero-approved .ccfg-approved-grid {
    align-items: start !important;
}
.ccfg-hero-approved .ccfg-approved-collage {
    height: 300px !important;
    max-height: 300px !important;
    position: relative !important;
    top: 0 !important;
    gap: 6px !important;
    margin-top: 12px !important;
}
.ccfg-hero-approved .ccfg-approved-collage img {
    min-height: 0 !important;
}
.ccfg-hero-approved .ccfg-approved-download {
    margin-top: 8px !important;
    padding-top: 8px !important;
}
.ccfg-hero-approved .ccfg-approved-store-links a img {
    opacity: 1 !important;
    filter: none !important;
}
@media (max-width: 575.98px) {
    .ccfg-hero-approved .ccfg-approved-collage {
        height: 270px !important;
        max-height: 270px !important;
        margin-top: 8px !important;
    }
}

/* Push the complete right-hand hero column downward */
.ccfg-hero-approved .ccfg-approved-grid {
    align-items: start !important;
}
.ccfg-hero-approved .ccfg-approved-collage {
    margin-top: 45px !important;
    position: relative !important;
    top: 0 !important;
}
.ccfg-hero-approved .ccfg-approved-download {
    margin-top: 8px !important;
}
@media (max-width: 575.98px) {
    .ccfg-hero-approved .ccfg-approved-collage {
        margin-top: 20px !important;
    }
}

/* Move hero collage slightly further down */
.ccfg-hero-approved .ccfg-approved-collage {
    margin-top: 65px !important;
}
@media (max-width: 575.98px) {
    .ccfg-hero-approved .ccfg-approved-collage {
        margin-top: 25px !important;
    }
}

/* Push collage and app download section 50px further down */
.ccfg-hero-approved .ccfg-approved-collage {
    margin-top: 115px !important;
}
@media (max-width: 575.98px) {
    .ccfg-hero-approved .ccfg-approved-collage {
        margin-top: 75px !important;
    }
}

/* Push hero collage another 30px down */
.ccfg-hero-approved .ccfg-approved-collage {
    margin-top: 145px !important;
}
@media (max-width: 575.98px) {
    .ccfg-hero-approved .ccfg-approved-collage {
        margin-top: 105px !important;
    }
}

/* Slightly lower the collage and app download section */
.ccfg-hero-approved .ccfg-approved-collage {
    margin-top: 165px !important;
}
@media (max-width: 575.98px) {
    .ccfg-hero-approved .ccfg-approved-collage {
        margin-top: 125px !important;
    }
}

/* Increase collage image layout height only */
.ccfg-hero-approved .ccfg-approved-collage {
    height: 380px !important;
    max-height: none !important;
}

/* Move collage and complete app-download section 30px upward */
.ccfg-hero-approved .ccfg-approved-collage {
    margin-top: 135px !important;
}
.ccfg-hero-approved .ccfg-approved-download {
    transform: translateY(-30px) !important;
}

/* Fine-tune hero collage and app-download position */
.ccfg-hero-approved .ccfg-approved-collage {
    margin-top: 125px !important;
}
.ccfg-hero-approved .ccfg-approved-download {
    transform: translateY(-40px) !important;
}

/* Final 5px downward adjustment */
.ccfg-hero-approved .ccfg-approved-collage {
    margin-top: 130px !important;
}
.ccfg-hero-approved .ccfg-approved-download {
    transform: translateY(-35px) !important;
}

/* Move collage images only 10px upward */
.ccfg-hero-approved .ccfg-approved-collage {
    transform: translateY(-10px) !important;
}

/* Move collage images 10px further upward */
.ccfg-hero-approved .ccfg-approved-collage {
    transform: translateY(-20px) !important;
}

/* CCFG MOBILE HERO — match approved phone mockup */
@media (max-width: 767.98px) {
    .ccfg-hero-approved {
        overflow: hidden !important;
        padding-top: 0 !important;
        padding-bottom: 32px !important;
    }

    .ccfg-hero-approved .ccfg-hero-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ccfg-hero-approved .ccfg-approved-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    .ccfg-hero-approved .ccfg-approved-left {
        display: contents !important;
    }

    .ccfg-hero-approved .ccfg-approved-eyebrow {
        display: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h1 {
        grid-row: 1 !important;
        font-size: clamp(37px, 9.5vw, 48px) !important;
        line-height: 1.08 !important;
        letter-spacing: -1.2px !important;
        margin: 24px 0 14px !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h2.ccfg-unique-tagline {
        grid-row: 2 !important;
        font-size: 17px !important;
        line-height: 1.48 !important;
        margin: 0 0 24px !important;
    }

    .ccfg-hero-approved .ccfg-approved-cards {
        grid-row: 3 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: stretch !important;
        margin: 0 0 22px !important;
    }

    .ccfg-hero-approved .ccfg-approved-card {
        min-width: 0 !important;
        width: 100% !important;
        padding: 14px 12px !important;
        border-radius: 20px !important;
    }

    .ccfg-hero-approved .ccfg-card-icon {
        width: 54px !important;
        height: 54px !important;
        margin-bottom: 14px !important;
    }

    .ccfg-hero-approved .ccfg-approved-card h3 {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }

    .ccfg-hero-approved .ccfg-approved-card p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .ccfg-hero-approved .ccfg-approved-order-input {
        min-width: 0 !important;
    }

    .ccfg-hero-approved .ccfg-approved-order-input input {
        min-width: 0 !important;
        font-size: 11px !important;
    }

    .ccfg-hero-approved .ccfg-approved-button {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 10px !important;
        font-size: 13px !important;
    }

    .ccfg-hero-approved .ccfg-approved-right {
        display: contents !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        grid-row: 4 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(3, minmax(105px, 1fr)) !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1.12 !important;
        gap: 8px !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
        position: static !important;
        top: auto !important;
        transform: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }

    .ccfg-hero-approved .ccfg-approved-download {
        grid-row: 5 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 12px !important;
        text-align: center !important;
        transform: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-download h3 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        font-size: clamp(22px, 6vw, 28px) !important;
        line-height: 1.2 !important;
        margin: 0 0 20px !important;
        white-space: nowrap !important;
    }

    .ccfg-hero-approved .ccfg-approved-download h3 span {
        display: block !important;
        flex: 1 1 auto !important;
        max-width: 48px !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links a {
        display: block !important;
        flex: 1 1 0 !important;
        max-width: 230px !important;
        min-width: 0 !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links a img {
        display: block !important;
        width: 100% !important;
        max-width: 230px !important;
        max-height: none !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

@media (max-width: 380px) {
    .ccfg-hero-approved .ccfg-hero-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .ccfg-hero-approved .ccfg-approved-card {
        padding: 12px 9px !important;
    }

    .ccfg-hero-approved .ccfg-approved-cards {
        gap: 8px !important;
    }

    .ccfg-hero-approved .ccfg-approved-download h3 {
        font-size: 21px !important;
        gap: 7px !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links {
        gap: 7px !important;
    }
}

/* CCFG MOBILE FINAL SPACING FIX */
@media (max-width: 767.98px) {
    .ccfg-hero-approved {
        padding-top: 1px !important;
        overflow: visible !important;
    }

    .ccfg-hero-approved .ccfg-hero-container {
        position: relative !important;
        padding-top: 1px !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h1 {
        margin-top: 30px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        aspect-ratio: 0.78 / 1 !important;
        grid-template-rows: repeat(3, minmax(90px, 1fr)) !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo,
    .ccfg-hero-approved .ccfg-approved-photo img {
        min-height: 0 !important;
    }

    .ccfg-hero-approved .ccfg-approved-download {
        position: relative !important;
        transform: none !important;
        margin-top: 0 !important;
    }
}

/* CCFG MOBILE: AGRICULTURAL PHOTO BACKGROUND + BLACK FADE */
@media (max-width: 767.98px) {
    .ccfg-hero-approved {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        padding: 0 0 30px !important;
        background-color: #18251c !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .70) 0%,
                rgba(0, 0, 0, .58) 28%,
                rgba(0, 0, 0, .80) 58%,
                rgba(0, 0, 0, .96) 100%
            ),
            url('/forward-green-assets/products/03-burundi-green-coffee.jpg'),
            url('/forward-green-assets/reference-media/burundi-black-tea/002-plantation-terraced-tea-plantation.jpg'),
            url('/forward-green-assets/products/04-hass-avocado.jpg'),
            url('/forward-green-assets/products/16-beans-and-pulses.jpg'),
            url('/forward-green-assets/products/07-green-banana-matooke.jpg'),
            url('/forward-green-assets/products/12-lake-tanganyika-fish.jpg') !important;
        background-size:
            100% 100%,
            50% 24%,
            50% 24%,
            50% 24%,
            50% 24%,
            50% 24%,
            50% 24% !important;
        background-position:
            center,
            left top,
            right top,
            left 24%,
            right 24%,
            left 48%,
            right 48% !important;
        background-repeat: no-repeat !important;
    }

    .ccfg-hero-approved .ccfg-hero-background {
        display: none !important;
    }

    .ccfg-hero-approved .ccfg-hero-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1px 14px 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .ccfg-hero-approved .ccfg-approved-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }

    .ccfg-hero-approved .ccfg-approved-left,
    .ccfg-hero-approved .ccfg-approved-right {
        display: contents !important;
    }

    .ccfg-hero-approved .ccfg-approved-eyebrow {
        display: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h1 {
        grid-row: 1 !important;
        color: #fff !important;
        font-size: clamp(34px, 9vw, 44px) !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
        text-shadow: 0 2px 14px rgba(0,0,0,.55) !important;
        margin: 30px 0 12px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h2.ccfg-unique-tagline {
        grid-row: 2 !important;
        color: #fff !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-shadow: 0 2px 10px rgba(0,0,0,.7) !important;
        margin: 0 0 24px !important;
    }

    /* Tracking first, create order directly underneath */
    .ccfg-hero-approved .ccfg-approved-cards {
        grid-row: 3 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        margin: 0 0 24px !important;
        align-items: stretch !important;
    }

    .ccfg-hero-approved .ccfg-approved-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 20px 17px !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.96) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
    }

    .ccfg-hero-approved .ccfg-card-icon {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 10px !important;
    }

    .ccfg-hero-approved .ccfg-approved-card h3 {
        font-size: 19px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    .ccfg-hero-approved .ccfg-approved-card p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .ccfg-hero-approved .ccfg-approved-order-input,
    .ccfg-hero-approved .ccfg-approved-order-input input {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .ccfg-hero-approved .ccfg-approved-button {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 13px 12px !important;
    }

    /* The photos now form the background, not a separate collage */
    .ccfg-hero-approved .ccfg-approved-collage {
        display: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-download {
        grid-row: 4 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 0 10px !important;
        text-align: center !important;
        transform: none !important;
        color: #fff !important;
    }

    .ccfg-hero-approved .ccfg-approved-download h3 {
        color: #fff !important;
        font-size: 23px !important;
        line-height: 1.25 !important;
        margin: 0 0 18px !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.65) !important;
        white-space: normal !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links a {
        display: block !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 220px !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links a img {
        display: block !important;
        width: 100% !important;
        max-width: 220px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .ccfg-hero-approved .ccfg-approved-bottom-wave {
        display: none !important;
    }
}

/* CCFG MOBILE PHOTO BACKGROUND — full width, visible natural colors */
@media (max-width: 767.98px) {
    .ccfg-hero-approved {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background-color: #1d3021 !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .38) 0%,
                rgba(0, 0, 0, .30) 30%,
                rgba(0, 0, 0, .58) 65%,
                rgba(0, 0, 0, .82) 100%
            ),
            url('/forward-green-assets/hero/01.jpg') !important;
        background-size: 100% 100%, cover !important;
        background-position: center, center top !important;
        background-repeat: no-repeat !important;
    }

    .ccfg-hero-approved .ccfg-hero-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h1,
    .ccfg-hero-approved .ccfg-approved-left h2.ccfg-unique-tagline {
        color: #fff !important;
        text-shadow: 0 2px 12px rgba(0,0,0,.72) !important;
    }

    .ccfg-hero-approved .ccfg-approved-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* CCFG MOBILE PHOTO BACKGROUND — full width, visible natural colors */
@media (max-width: 767.98px) {
    .ccfg-hero-approved {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background-color: #1d3021 !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .38) 0%,
                rgba(0, 0, 0, .30) 30%,
                rgba(0, 0, 0, .58) 65%,
                rgba(0, 0, 0, .82) 100%
            ),
            url('/forward-green-assets/hero/01.jpg') !important;
        background-size: 100% 100%, cover !important;
        background-position: center, center top !important;
        background-repeat: no-repeat !important;
    }

    .ccfg-hero-approved .ccfg-hero-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h1,
    .ccfg-hero-approved .ccfg-approved-left h2.ccfg-unique-tagline {
        color: #fff !important;
        text-shadow: 0 2px 12px rgba(0,0,0,.72) !important;
    }

    .ccfg-hero-approved .ccfg-approved-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* CCFG MOBILE APP-LIKE LAYOUT — desktop unaffected */
.ccfg-mobile-bottom-nav {
    display: none;
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .ccfg-mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        z-index: 9999 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-height: 66px !important;
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: space-around !important;
        gap: 2px !important;
        background: rgba(255,255,255,.98) !important;
        border-top: 1px solid #e7ece8 !important;
        box-shadow: 0 -5px 20px rgba(0,0,0,.08) !important;
    }

    .ccfg-mobile-bottom-nav .ccfg-mobile-nav-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 3px 1px !important;
        color: #7b8380 !important;
        text-decoration: none !important;
        font-family: Arial, sans-serif !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .ccfg-mobile-bottom-nav .ccfg-mobile-nav-item i {
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .ccfg-mobile-bottom-nav .ccfg-mobile-nav-active {
        color: #087647 !important;
        font-weight: 700 !important;
    }

    .ccfg-hero-approved {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .ccfg-hero-approved .ccfg-hero-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ccfg-hero-approved .ccfg-approved-grid {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* CCFG FINAL MOBILE WIDTH FIX — preserve desktop and vertical scrolling */
@media (max-width: 767.98px) {
    html,
    body#app {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none;
    }

    body#app {
        min-width: 0 !important;
    }

    body#app > #loading {
        max-width: 100vw !important;
    }

    body#app > .main-page {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: clip !important;
    }

    .main-page > *,
    .ccfg-hero-approved,
    .ccfg-hero-approved .ccfg-hero-container,
    .ccfg-hero-approved .ccfg-approved-grid,
    .ccfg-hero-approved .ccfg-approved-left,
    .ccfg-hero-approved .ccfg-approved-right {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ccfg-hero-approved {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* CCFG MOBILE FINAL HOME ORDER — desktop unaffected */
@media (max-width: 767.98px) {
    .ccfg-hero-approved .ccfg-track-card {
        display: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-cards {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        display: grid !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(3, minmax(90px, 1fr)) !important;
        gap: 8px !important;
        margin: 20px 0 !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo,
    .ccfg-hero-approved .ccfg-approved-photo img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }

    .ccfg-hero-approved .ccfg-approved-download {
        width: 100% !important;
        margin: 16px 0 20px !important;
        padding: 16px 0 !important;
        transform: none !important;
    }

    .ccfg-mobile-bottom-nav .ccfg-mobile-nav-item {
        font-size: 9px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .ccfg-mobile-bottom-nav .ccfg-mobile-nav-item i {
        font-size: 18px !important;
    }
}

/* CCFG MOBILE HERO TEXT WIDTH CORRECTION */
@media (max-width: 767.98px) {
    .ccfg-hero-approved .ccfg-hero-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin: 0 auto !important;
    }

    .ccfg-hero-approved .ccfg-approved-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 20px !important;
    }

    .ccfg-hero-approved .ccfg-approved-left,
    .ccfg-hero-approved .ccfg-approved-right {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .ccfg-hero-approved .ccfg-approved-eyebrow,
    .ccfg-hero-approved .ccfg-approved-left h1,
    .ccfg-hero-approved .ccfg-approved-left h2.ccfg-unique-tagline,
    .ccfg-hero-approved .ccfg-approved-left p {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h1 {
        font-size: clamp(30px, 8vw, 42px) !important;
        line-height: 1.12 !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h2.ccfg-unique-tagline {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .ccfg-hero-approved .ccfg-approved-cards {
        width: 100% !important;
        min-width: 0 !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* CCFG MOBILE: REMOVE DUPLICATE CREATE ORDER CARD */
@media (max-width: 767.98px) {
    .ccfg-hero-approved .ccfg-create-card {
        display: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-cards {
        display: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        margin-top: 18px !important;
    }

    .ccfg-hero-approved .ccfg-approved-download {
        margin-top: 18px !important;
    }
}

/* CCFG MOBILE CLEAN HERO — remove background photo and prevent clipped heading */
@media (max-width: 767.98px) {
    .ccfg-hero-approved {
        background-image: none !important;
        background-color: #f7f9f6 !important;
    }

    .ccfg-hero-approved .ccfg-hero-background {
        display: none !important;
        background-image: none !important;
    }

    .ccfg-hero-approved .ccfg-hero-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow: visible !important;
    }

    .ccfg-hero-approved .ccfg-approved-left {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h1 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(28px, 8vw, 36px) !important;
        line-height: 1.15 !important;
        letter-spacing: normal !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        color: #176b3a !important;
        text-shadow: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h2.ccfg-unique-tagline,
    .ccfg-hero-approved .ccfg-approved-left p,
    .ccfg-hero-approved .ccfg-approved-eyebrow {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        color: #34443a !important;
        text-shadow: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        margin-top: 20px !important;
    }
}

/* CCFG MOBILE HEADING VISIBILITY AND SPACING FIX */
@media (max-width: 767.98px) {
    .ccfg-hero-approved {
        padding-top: 22px !important;
        overflow: visible !important;
    }

    .ccfg-hero-approved .ccfg-hero-container {
        padding-top: 0 !important;
        overflow: visible !important;
    }

    .ccfg-hero-approved .ccfg-approved-grid {
        align-items: start !important;
        gap: 14px !important;
    }

    .ccfg-hero-approved .ccfg-approved-left {
        padding-top: 0 !important;
        margin-top: 0 !important;
        overflow: visible !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h1 {
        display: block !important;
        position: relative !important;
        margin: 0 0 12px !important;
        padding: 4px 0 2px !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: 1.25 !important;
        overflow: visible !important;
        transform: none !important;
        clip-path: none !important;
        font-size: clamp(27px, 7.5vw, 34px) !important;
    }

    .ccfg-hero-approved .ccfg-approved-left h2.ccfg-unique-tagline {
        margin: 0 0 12px !important;
        padding: 0 !important;
        line-height: 1.5 !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-eyebrow {
        margin: 0 0 8px !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        margin-top: 12px !important;
    }
}

/* CCFG MOBILE HEADING REPAIR — final override */
@media screen and (max-width: 767.98px) {
    section.ccfg-hero.ccfg-hero-approved {
        overflow: visible !important;
        padding-top: 18px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-hero-container,
    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-grid,
    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-left {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-eyebrow {
        display: flex !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 0 10px !important;
        overflow: visible !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-left h1,
    section.ccfg-hero.ccfg-hero-approved h1 {
        position: static !important;
        inset: auto !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 12px !important;
        padding: 6px 0 !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        transform: none !important;
        font-size: 32px !important;
        line-height: 1.3 !important;
        letter-spacing: normal !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        text-indent: 0 !important;
    }
}

/* CCFG FINAL MOBILE MOSAIC — one authoritative layout */
@media screen and (max-width: 767.98px) {
    .ccfg-hero-approved .ccfg-approved-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        min-height: 280px !important;
        margin: 12px 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage .ccfg-approved-photo {
        position: absolute !important;
        display: block !important;
        inset: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 2px solid #fff !important;
        border-radius: 13px !important;
        box-shadow: 0 0 0 1px #cbd9cd, 0 4px 12px rgba(24,70,43,.14) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    /* Plantation: large panel across the upper left */
    .ccfg-hero-approved .ccfg-approved-photo-2 {
        top: 0 !important;
        left: 0 !important;
        width: 68% !important;
        height: 53% !important;
        z-index: 1 !important;
    }

    /* Coffee: upper right */
    .ccfg-hero-approved .ccfg-approved-photo-1 {
        top: 0 !important;
        right: 0 !important;
        width: 35% !important;
        height: 36% !important;
        z-index: 2 !important;
    }

    /* Bananas: overlapping left centre */
    .ccfg-hero-approved .ccfg-approved-photo-5 {
        top: 39% !important;
        left: 0 !important;
        width: 42% !important;
        height: 57% !important;
        z-index: 3 !important;
    }

    /* Avocados: central lower panel */
    .ccfg-hero-approved .ccfg-approved-photo-3 {
        top: 51% !important;
        left: 27% !important;
        width: 46% !important;
        height: 47% !important;
        z-index: 2 !important;
    }

    /* Beans and pulses: right centre */
    .ccfg-hero-approved .ccfg-approved-photo-4 {
        top: 39% !important;
        right: 0 !important;
        width: 39% !important;
        height: 36% !important;
        z-index: 4 !important;
    }

    /* Fish: lower right */
    .ccfg-hero-approved .ccfg-approved-photo-6 {
        right: 0 !important;
        bottom: 0 !important;
        width: 34% !important;
        height: 47% !important;
        z-index: 5 !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage .ccfg-approved-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 10px !important;
    }

    .ccfg-hero-approved .ccfg-approved-download {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 14px 0 20px !important;
        padding: 0 !important;
        transform: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .ccfg-hero-approved .ccfg-approved-download h3 {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        text-align: center !important;
        line-height: 1.35 !important;
        transform: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links {
        position: static !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links a {
        display: block !important;
        width: calc(50% - 5px) !important;
        max-width: 180px !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .ccfg-hero-approved .ccfg-approved-store-links a img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* CCFG MOBILE COLLAGE — spread overlapping photos across full width */
@media screen and (max-width: 767.98px) {
    .ccfg-hero-approved .ccfg-approved-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 290px !important;
        min-height: 290px !important;
        margin: 16px 0 24px !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage .ccfg-approved-photo {
        position: absolute !important;
        display: block !important;
        inset: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        border: 3px solid #fff !important;
        border-radius: 15px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,.16) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: none !important;
    }

    /* Large plantation image on the left */
    .ccfg-hero-approved .ccfg-approved-photo-2 {
        top: 0 !important;
        left: 0 !important;
        width: 64% !important;
        height: 58% !important;
        z-index: 1 !important;
    }

    /* Coffee at upper right */
    .ccfg-hero-approved .ccfg-approved-photo-1 {
        top: 0 !important;
        right: 0 !important;
        width: 39% !important;
        height: 43% !important;
        z-index: 3 !important;
    }

    /* Avocados across the lower middle */
    .ccfg-hero-approved .ccfg-approved-photo-3 {
        left: 23% !important;
        bottom: 0 !important;
        width: 48% !important;
        height: 48% !important;
        z-index: 4 !important;
    }

    /* Beans on the right */
    .ccfg-hero-approved .ccfg-approved-photo-4 {
        right: 0 !important;
        top: 42% !important;
        width: 40% !important;
        height: 42% !important;
        z-index: 5 !important;
    }

    /* Bananas at lower left */
    .ccfg-hero-approved .ccfg-approved-photo-5 {
        left: 0 !important;
        bottom: 0 !important;
        width: 34% !important;
        height: 42% !important;
        z-index: 3 !important;
    }

    /* Fish overlapping at lower right */
    .ccfg-hero-approved .ccfg-approved-photo-6 {
        right: 0 !important;
        bottom: 0 !important;
        width: 34% !important;
        height: 38% !important;
        z-index: 6 !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage .ccfg-approved-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 11px !important;
    }
}

/* CCFG MOBILE COLLAGE FINAL */
@media screen and (max-width: 767.98px) {
    .ccfg-hero-approved .ccfg-approved-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 290px !important;
        min-height: 290px !important;
        margin: 18px 0 24px !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage .ccfg-approved-photo {
        position: absolute !important;
        display: block !important;
        inset: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        border: 3px solid #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,.15) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo-2 {
        top: 0 !important; left: 0 !important;
        width: 66% !important; height: 57% !important;
        z-index: 1 !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo-1 {
        top: 0 !important; right: 0 !important;
        width: 39% !important; height: 43% !important;
        z-index: 3 !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo-5 {
        left: 0 !important; bottom: 0 !important;
        width: 36% !important; height: 46% !important;
        z-index: 3 !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo-3 {
        left: 26% !important; bottom: 0 !important;
        width: 46% !important; height: 49% !important;
        z-index: 2 !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo-4 {
        top: 40% !important; right: 0 !important;
        width: 39% !important; height: 40% !important;
        z-index: 4 !important;
    }

    .ccfg-hero-approved .ccfg-approved-photo-6 {
        right: 0 !important; bottom: 0 !important;
        width: 34% !important; height: 38% !important;
        z-index: 5 !important;
    }

    .ccfg-hero-approved .ccfg-approved-collage .ccfg-approved-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 10px !important;
    }

    .ccfg-hero-approved .ccfg-approved-download {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 14px 0 20px !important;
        padding: 0 0 20px !important;
        transform: none !important;
    }
}

/* CCFG MOBILE COLLAGE — consolidated final layout reset */
@media screen and (max-width: 767.98px) {
    section.ccfg-hero.ccfg-hero-approved .ccfg-hero-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 22px !important;
        align-items: stretch !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-right {
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-collage {
        display: block !important;
        position: relative !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 290px !important;
        min-height: 290px !important;
        margin: 0 0 20px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-collage > .ccfg-approved-photo {
        position: absolute !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border: 3px solid #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,.15) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-photo-2 {
        top: 0 !important; left: 0 !important;
        right: auto !important; bottom: auto !important;
        width: 66% !important; height: 57% !important; z-index: 1 !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-photo-1 {
        top: 0 !important; right: 0 !important;
        left: auto !important; bottom: auto !important;
        width: 39% !important; height: 43% !important; z-index: 3 !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-photo-5 {
        left: 0 !important; bottom: 0 !important;
        right: auto !important; top: auto !important;
        width: 36% !important; height: 46% !important; z-index: 3 !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-photo-3 {
        left: 26% !important; bottom: 0 !important;
        right: auto !important; top: auto !important;
        width: 46% !important; height: 49% !important; z-index: 2 !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-photo-4 {
        top: 40% !important; right: 0 !important;
        left: auto !important; bottom: auto !important;
        width: 39% !important; height: 40% !important; z-index: 4 !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-photo-6 {
        right: 0 !important; bottom: 0 !important;
        left: auto !important; top: auto !important;
        width: 34% !important; height: 38% !important; z-index: 5 !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-collage > .ccfg-approved-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-download {
        position: relative !important;
        display: block !important;
        float: none !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 20px !important;
        padding: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
}

/* CCFG MOBILE — smaller agricultural collage */
@media screen and (max-width: 767.98px) {
    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-collage {
        width: 88% !important;
        max-width: 360px !important;
        height: 220px !important;
        min-height: 220px !important;
        margin: 0 auto 18px !important;
        align-self: center !important;
    }
}

/* CCFG MOBILE — move image collage slightly upward */
@media screen and (max-width: 767.98px) {
    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-collage {
        margin-top: -10px !important;
    }
}

/* CCFG MOBILE — compact app download section */
@media screen and (max-width: 767.98px) {
    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-download h3 {
        font-size: 19px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
        gap: 7px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-download h3 span {
        width: 14px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-download p {
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-store-links {
        gap: 7px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-store-links a {
        width: calc(50% - 4px) !important;
        max-width: 145px !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 3px 8px !important;
        border-radius: 7px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-store-links a img {
        max-height: 32px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
}

/* CCFG MOBILE — reduce both store badges and download text */
@media screen and (max-width: 767.98px) {
    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-download h3 {
        font-size: 17px !important;
        line-height: 1.25 !important;
        gap: 5px !important;
        margin-bottom: 6px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-download h3 span {
        width: 11px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-download p {
        font-size: 10px !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-store-links {
        gap: 6px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-store-links a {
        width: calc(50% - 3px) !important;
        max-width: 125px !important;
        min-width: 0 !important;
        height: 34px !important;
        padding: 2px 6px !important;
        border-radius: 6px !important;
    }

    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-store-links a img {
        max-width: 100% !important;
        max-height: 27px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* CCFG MOBILE — move app download section slightly upward */
@media screen and (max-width: 767.98px) {
    section.ccfg-hero.ccfg-hero-approved .ccfg-approved-download {
        margin-top: -10px !important;
    }
}

/* CCFG IMPORT TICKER — above hero, desktop and mobile */
.ccfg-import-ticker {
    width: 100%;
    background: #fff;
    color: #62666a;
    overflow: hidden;
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    border-bottom: 1px solid #f0eee9;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif;
}

.ccfg-import-ticker-label {
    padding: 13px 24px 0;
    color: #9299a3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.5;
    white-space: nowrap;
}

.ccfg-import-ticker-window {
    width: 100%;
    overflow: hidden;
    padding: 15px 0 22px;
}

.ccfg-import-ticker-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: ccfgImportTickerScroll 65s linear infinite;
    will-change: transform;
}

.ccfg-import-ticker-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 38px;
    padding-right: 38px;
    white-space: nowrap;
}

.ccfg-import-ticker-group span {
    color: #62666a;
    font-size: clamp(18px, 2.5vw, 34px);
    font-weight: 400;
    letter-spacing: .2px;
    line-height: 1.35;
    white-space: nowrap;
}

.ccfg-import-ticker-group i {
    display: block;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    background: #f4b323;
}

@keyframes ccfgImportTickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 767.98px) {
    .ccfg-import-ticker-label {
        padding: 10px 16px 0;
        font-size: 9px;
        letter-spacing: 1.7px;
    }

    .ccfg-import-ticker-window {
        padding: 12px 0 16px;
    }

    .ccfg-import-ticker-track {
        animation-duration: 55s;
    }

    .ccfg-import-ticker-group {
        gap: 22px;
        padding-right: 22px;
    }

    .ccfg-import-ticker-group span {
        font-size: 18px;
    }

    .ccfg-import-ticker-group i {
        flex-basis: 7px;
        width: 7px;
        height: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccfg-import-ticker-track {
        animation: none;
    }
}


/* CCFG FEATURED PRODUCTS — compact cards */
#featured-products .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 10px !important;
}
#featured-products .card {
    height: 100%;
    border-radius: 8px;
}
#featured-products .card-body {
    padding: 10px !important;
}
#featured-products .card img {
    height: 105px !important;
    width: 100%;
    object-fit: cover;
    margin-bottom: 8px !important;
}
#featured-products .card h5 {
    font-size: 14px;
    line-height: 1.25;
    margin-bottom: 5px;
}
#featured-products .card p {
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 8px;
}
#featured-products .card .btn {
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.3;
}
@media (max-width: 767.98px) {
    #featured-products {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
    #featured-products .text-center.mb-4 {
        margin-bottom: 14px !important;
    }
    #featured-products .card img {
        height: 82px !important;
    }
    #featured-products .card-body {
        padding: 8px !important;
    }
    #featured-products .card h5 {
        font-size: 12px;
    }
    #featured-products .card p {
        font-size: 11px;
        line-height: 1.25;
    }
    #featured-products .card .btn {
        font-size: 11px;
        padding: 4px 6px;
        white-space: normal;
    }
}


/* CCFG FEATURED PRODUCT ACTIONS */
#featured-products .ccfg-product-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
#featured-products .ccfg-create-order {
    flex: 1;
    min-width: 0;
    padding: 6px 4px;
    font-size: 12px;
    white-space: nowrap;
}
#featured-products .ccfg-whatsapp {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    border-radius: 6px;
    font-size: 21px;
    text-decoration: none;
}
@media (max-width: 767.98px) {
    #featured-products .ccfg-create-order { font-size: 11px; padding: 6px 3px; }
    #featured-products .ccfg-whatsapp { flex-basis: 30px; width: 30px; height: 30px; }
}

/* CCFG — Orange Create Order buttons */
#featured-products .ccfg-create-order {
    background-color: #f28c28 !important;
    border-color: #f28c28 !important;
    color: #ffffff !important;
}
#featured-products .ccfg-create-order:hover,
#featured-products .ccfg-create-order:focus {
    background-color: #d97516 !important;
    border-color: #d97516 !important;
    color: #ffffff !important;
}


/* CCFG PRODUCTS PAGE ORDER AND WHATSAPP ACTIONS */
#featured-products .ccfg-product-actions,
main .ccfg-product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
main .ccfg-create-order {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    background: #f28c28 !important;
    border: 1px solid #f28c28 !important;
    color: #fff !important;
    text-align: center;
}
main .ccfg-create-order:hover,
main .ccfg-create-order:focus {
    background: #d97516 !important;
    border-color: #d97516 !important;
    color: #fff !important;
}
main .ccfg-whatsapp {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    border-radius: 6px;
    font-size: 23px;
    text-decoration: none;
}
main .ccfg-whatsapp:hover,
main .ccfg-whatsapp:focus {
    background: #1da851;
    color: #fff;
}


/* CCFG PREMIUM FEATURED PRODUCTS REDESIGN */
#featured-products {
    background: #f6f8f5 !important;
    padding: 44px 0 !important;
}
#featured-products > .container { max-width: 1240px; }
#featured-products .text-center.mb-4 h2 {
    color: #183b2b;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 750;
    letter-spacing: -.6px;
    margin-bottom: 10px;
}
#featured-products .text-center.mb-4 p {
    color: #68736c;
    max-width: 650px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.7;
}
#featured-products .row > [class*="col-"] {
    display: flex;
    padding: 0 9px;
    margin-bottom: 18px !important;
}
#featured-products .row > [class*="col-"] > .card {
    width: 100%;
    border: 1px solid #e5eae4;
    border-radius: 13px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(24,59,43,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
#featured-products .row > [class*="col-"] > .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(24,59,43,.12);
}
#featured-products .card-body {
    display: flex;
    flex-direction: column;
    padding: 14px !important;
}
#featured-products .card img {
    width: 100%;
    height: 160px !important;
    object-fit: cover;
    border-radius: 9px !important;
    margin-bottom: 12px !important;
}
#featured-products .card h5 {
    color: #183b2b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 7px;
}
#featured-products .card p {
    color: #68736c;
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 14px;
    flex-grow: 1;
}
#featured-products .ccfg-product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
}
#featured-products .ccfg-create-order {
    display: inline-flex;
    flex: 1;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border-radius: 7px;
    background: #f28c28 !important;
    border: 1px solid #f28c28 !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
#featured-products .ccfg-create-order:hover {
    background: #d97516 !important;
    border-color: #d97516 !important;
}
#featured-products .ccfg-whatsapp {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #25D366;
    color: #fff;
    font-size: 22px;
    text-decoration: none;
}
#featured-products .container > .text-center.mt-3 .btn {
    padding: 11px 24px;
    border-radius: 8px;
    font-weight: 700;
}
@media (min-width: 768px) {
    #featured-products .card-body { padding: 16px !important; }
    #featured-products .card img { height: 175px !important; }
}
@media (max-width: 767.98px) {
    #featured-products { padding: 28px 0 !important; }
    #featured-products .text-center.mb-4 { margin-bottom: 17px !important; }
    #featured-products .text-center.mb-4 h2 { font-size: 23px; line-height: 1.3; }
    #featured-products .text-center.mb-4 p { font-size: 12px; line-height: 1.55; }
    #featured-products .row { margin-left: -5px; margin-right: -5px; }
    #featured-products .row > [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 10px !important;
    }
    #featured-products .card-body { padding: 9px !important; }
    #featured-products .card img { height: 105px !important; margin-bottom: 9px !important; }
    #featured-products .card h5 { font-size: 13px; }
    #featured-products .card p { font-size: 11px; line-height: 1.4; margin-bottom: 10px; }
    #featured-products .ccfg-product-actions { gap: 5px; }
    #featured-products .ccfg-create-order { min-height: 33px; padding: 5px 3px; font-size: 10px; }
    #featured-products .ccfg-whatsapp { flex-basis: 31px; width: 31px; height: 33px; font-size: 19px; }
}

/* CCFG MOBILE VERTICAL SCROLL FIX — desktop layout unchanged */
@media (max-width: 767.98px) {
    html {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
    }

    body#app {
        display: block !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body#app > .main-page {
        height: auto !important;
        min-height: 0 !important;
        overflow-y: visible !important;
    }

    body#app > #site-footer {
        position: relative !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
}

/* CCFG DESKTOP VERTICAL SCROLL FIX — mobile rules preserved */
@media (min-width: 768px) {
    html {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
    }

    body#app {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body#app > .main-page {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: visible !important;
    }

    body#app > #site-footer {
        position: relative !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }
}