@media (max-width: 1024px) {

    .desktop-hero {
        display: none !important;
    }
    
    
  .navbar {
        position: sticky;
        top: 0;

        height: 70px;

        padding: 0 20px;

        z-index: 9999;
    }

    .mainlogo img {
        height: 52px;
    }


    /* Burger Show */

    .hamburger {
        display: flex;

        margin-left: auto;
        margin-right: 10px;
    }


    /* Icons */

    .icons {
        gap: 5px;
    }


    /* Hide Desktop Menu */

    .navbar ul.nav-menu {

        position: fixed;

        top: 70px;
        left: 0;

        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 0;

        padding: 10px 20px 20px;

        background:
            url("../images/paper5.png"),
            linear-gradient(#f7e8c6, #edd6a7);

        background-size: cover;
        background-position: center;

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

        transform: translateY(-120%);

        opacity: 0;
        visibility: hidden;

        transition: .4s ease;

        z-index: 9998;
    }


    /* Menu Open */

    .navbar ul.nav-menu.active {

        transform: translateY(0);

        opacity: 1;

        visibility: visible;
    }


    /* Menu Items */

    .navbar ul.nav-menu li {

        width: 100%;

        text-align: center;

        border-bottom: 1px solid rgba(126, 91, 40, .25);
    }

    .navbar ul.nav-menu li:last-child {
        border-bottom: none;
    }


    .navbar ul.nav-menu li a {

        display: block;

        width: 100%;

        padding: 15px 10px;

        font-size: 15px;
    }


    /* Remove Desktop Underline */

    .navbar ul.nav-menu li a::after {
        display: none;
    }


    .navbar ul.nav-menu li:hover a {
        color: #a56b00;

        background: rgba(255,255,255,.25);
    }
}
@media (max-width: 1024px) {


.process-hero {
    position: relative;
    width: 100%;
    min-height: 300px;

    background: url("../images/banner.png") repeat-y center top;
    background-size: 100% auto;

    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
z-index: 99;
    text-align: center;
}

.hero-content {
    max-width: 900px;
}

.hero-content > span {
    font-size: 14px;
    font-weight: bold;
    color: #596b31;
    letter-spacing: 1px;
}

.hero-content h1 {
    margin-top: 10px;
    font-size: 42px;
    font-weight: 400;
    color: #20230f;
}

.hero-content h1 b {
    color: #48622c;
}

.hero-content h1 strong {
    color: #8c7825;
}

.hero-content h2 {
    margin-top: 7px;
    font-size: 22px;
    font-weight: 500;
}

.hero-content p {
    margin-top: 15px;

    font-family: Arial, sans-serif;

    font-size: 13px;
    line-height: 1.6;
}

.hero-line {
    margin-top: 12px;
    color: #5a652c;
}



    .process-section {
        position: relative;
        width: 100%;
        height: 600vh;
        min-height: 600vh;
        padding: 0 15px;
        box-sizing: border-box;

       
        background: none;

        overflow: visible;
        isolation: isolate;
    }

   
    .process-section::before {
        content: "";
        position: fixed;
        inset: 0;

        background-image: url("../images/proccesback.png");
        background-repeat: repeat-y;
        background-position: center top;
        background-size: auto 750px;

        z-index: -1;
        pointer-events: none;
    }

    .process-sticky {
        position: sticky;
        top: 0;
        width: 100%;
        height: 90vh;
        min-height: 540px;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .step-container {
        position: relative;
        width: 100%;
        height: 82vh;
        margin: 0;
        flex: none;
        overflow: hidden;
    }


.timeline {
    width: 170px;

    height: 80%;

    position: relative;

    display: flex;

    justify-content: center;

    flex-shrink: 0;
}

.scroll-text {
    position: absolute;

    top: 0;
    left: 20px;

    text-align: center;

    font-family: Arial, sans-serif;

    font-size: 9px;

    color: #555;

    line-height: 1.5;
}




.timeline-line {
    position: absolute;

    top: 65px;
    bottom: 20px;

    width: 2px;

    background: #b89d51;
}




.timeline-items {
    position: absolute;

    top: 70px;
    bottom: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    z-index: 5;
}




.timeline-dot {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #f8f0d9;

    border: 2px solid #c6a746;

    display: flex;

    justify-content: center;
    align-items: center;

    font-size: 12px;

    color: #555;

    transition: .5s ease;
}




.timeline-dot.active {
    background: #fff;

    border-color: #75843a;

    color: #34441c;

    transform: scale(1.12);

    box-shadow:
        0 0 0 5px rgba(190, 165, 75, .15);
}


.step-container {
    position: relative;

    height: 80%;

    flex: 1;

    margin-right: 45px;

    overflow: hidden;
}

.step {
    position: absolute;

    inset: 0;

    display: grid;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(80px)
        scale(.97);

    transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1),
        visibility .7s;

    z-index: 1;
}




.step.active {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    z-index: 2;
}




.step.prev {
    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-80px)
        scale(.97);

    z-index: 1;
}


.process-card {
    position: relative;

    width: 100%;

    height: 530px;

    display: flex;

    overflow: hidden;

    border-radius: 18px;

    border: 2px solid #D6A63A;

    background: #F8EBD2;

    box-shadow:
        0 18px 35px rgba(77, 51, 20, 0.18);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.process-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 24px 45px rgba(77, 51, 20, 0.23);
}


.card-content {
    position: relative;

    width: 85%;

    height: 100%;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    padding-left: 55px;

    z-index: 5;

    background: linear-gradient(
        to right,
        #F8EBD2 0%,
        #F8EBD2 45%,
        rgba(248, 235, 210, 0.90) 52%,
        rgba(248, 235, 210, 0.55) 62%,
        rgba(248, 235, 210, 0.18) 72%,
        rgba(248, 235, 210, 0) 75%
    );
}


.process-icon {
    position: relative;

    width: 90px;

    height: 300px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
}



.icon-circle {
    position: relative;

    width: 92px;
    height: 92px;

    flex-shrink: 0;

    border-radius: 50%;

    border: 3px solid #B99024;

    background: #F9EFD9;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 5;

    box-shadow:
        0 0 0 5px rgba(185, 144, 36, 0.08);
}

.icon-circle span {
    font-size: 38px;

    line-height: 1;

    color: #315A2A;
}


.vertical-line {
    width: 3px;

    height: 135px;

    background: #315A2A;

    margin-top: -2px;

    flex-shrink: 0;
}



.line-dot {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #B99024;

    margin-top: -1px;

    box-shadow:
        0 0 0 3px rgba(185, 144, 36, 0.08);
}



.text-content {
    position: relative;

    margin-left: 18px;

    width: 360px;

    max-width: 360px;

    z-index: 10;
}



.step-number {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 56px;

    font-weight: bold;

    line-height: 1;

    color: #B58B22;

    margin-bottom: 8px;
}




.text-content h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;

    font-weight: bold;

    line-height: 1.2;

    color: #315A2A;

    letter-spacing: .4px;

    white-space: nowrap;
}




.separator {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 18px 0;
}

.separator span {
    width: 90px;
    height: 1px;

    background: #70804C;
}

.separator b {
    font-size: 15px;

    line-height: 1;

    color: #B99024;
}



.text-content p {
    width: 100%;

    max-width: 330px;

    font-size: 18px;

    line-height: 1.65;

    color: #3F3F35;
}


.card-image {
    position: absolute;

    top: 0;
    right: 0;

    width: 65%;

    height: 100%;

    z-index: 1;

    overflow: hidden;
}

.card-image img {
    position: absolute;

    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    z-index: 1;
}



.after-process {
    min-height: 350px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: #f7efd9;
}

.after-process h2 {
    font-size: 36px;

    font-weight: 400;

    color: #3a401e;

    line-height: 1.3;
}

.after-process button {
    margin-top: 25px;

    padding: 13px 28px;

    border: 1px solid #9a812e;

    border-radius: 25px;

    background: #eee2bd;

    color: #37441d;

    font-family: inherit;

    cursor: pointer;
}


@media (max-width: 1200px) {

    .navbar ul {
        gap: 22px;
    }

    .navbar ul li a {
        font-size: 12px;
    }

    .process-hero {
        min-height: 300px;

        background-size: 100% 100%;
    }

    .process-section {
        padding: 40px 25px;
    }

    .process-card {
        height: 400px;
    }

    .card-content {
        width: 48%;

        padding-left: 35px;
    }

    .card-image {
        width: 62%;
    }

    .text-content {
        width: 310px;
        max-width: 310px;
    }

    .step-number {
        font-size: 48px;
    }

    .text-content h2 {
        font-size: 26px;
    }

    .text-content p {
        font-size: 16px;
    }
}



@media (max-width: 900px) {

    .process-hero {
        min-height: 300px;

        background-size: 100% 60%;
    }

    .process-section {
        padding: 30px 20px;
    }

    .process-card {
        height: 360px;
    }

    .card-content {
        width: 52%;

        padding-left: 25px;
    }

    .card-image {
        width: 60%;
    }

    .process-icon {
        width: 70px;

        transform: scale(.85);

        transform-origin: center;
    }

    .text-content {
        margin-left: 5px;

        width: 280px;
        max-width: 280px;
    }

    .step-number {
        font-size: 42px;
    }

    .text-content h2 {
        font-size: 22px;
    }

    .separator {
        margin: 12px 0;
    }

    .separator span {
        width: 65px;
    }

    .text-content p {
        max-width: 260px;

        font-size: 14px;

        line-height: 1.55;
    }
}


@media (min-width: 701px) and (max-width: 900px) {
.process-hero {
        width: 100%;

        height: 220px;
        min-height: 220px;

        background-image:
            url("../images/banner.png");

        background-repeat: no-repeat;

        background-position: center center;

        background-size: cover;

        overflow: hidden;

        display: flex;

        justify-content: center;

        align-items: center;

        text-align: center;
    }
    .process-section {
        height: 600vh;

        padding: 0 20px;
    }

    .process-sticky {
        height: 100vh;

        overflow: hidden;

        display: flex;

        align-items: center;
    }

    .timeline {
        width: 90px;

        height: 75%;
    }

    .timeline-dot {
        width: 42px;
        height: 42px;

        font-size: 11px;
    }

    .timeline-line {
        top: 55px;
        bottom: 15px;
    }

    .timeline-items {
        top: 60px;
        bottom: 15px;
    }

    .step-container {
        height: 78%;

        margin-right: 10px;

        overflow: hidden;
    }

    .step {
        position: absolute;

        inset: 0;

        display: grid;

        align-items: center;
    }

    .process-card {
        height: auto;

        min-height: 520px;

        display: flex;

        flex-direction: column;

        overflow: hidden;
    }

    .card-content {
        width: 100%;

        height: 280px;

        padding: 30px;

        box-sizing: border-box;

        display: flex;

        align-items: flex-start;

        background: #F8EBD2;
    }

    .process-icon {
        width: 70px;

        height: 230px;

        transform: none;
    }

    .icon-circle {
        width: 65px;
        height: 65px;
    }

    .icon-circle span {
        font-size: 28px;
    }

    .vertical-line {
        height: 105px;
    }

    .text-content {
        width: calc(100% - 80px);

        max-width: none;

        margin-left: 10px;
    }

    .step-number {
        font-size: 40px;
    }

    .text-content h2 {
        font-size: 25px;

        white-space: normal;
    }

    .separator span {
        width: 65px;
    }

    .text-content p {
        max-width: 100%;

        font-size: 15px;
    }

    .card-image {
        position: relative;

        top: auto;
        right: auto;

        width: 100%;

        height: 240px;

        flex-shrink: 0;
    }

    .card-image img {
        position: absolute;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

}



@media (max-width: 700px) {

    .process-hero {
        width: 100%;

        height: 220px;
        min-height: 220px;

        background-image:
            url("../images/banner.png");

        background-repeat: no-repeat;

        background-position: center center;

        background-size: cover;

        overflow: hidden;

        display: flex;

        justify-content: center;

        align-items: center;

        text-align: center;
    }

    .hero-content {
        width: 100%;

        padding: 0 15px;

        box-sizing: border-box;
    }

    .hero-content > span {
        font-size: 12px;
    }

    .hero-content h1 {
        font-size: 28px;

        line-height: 1.2;
    }

    .hero-content h2 {
        font-size: 17px;

        line-height: 1.4;
    }

    .hero-content p {
        font-size: 11px;

        line-height: 1.5;
    }



    .process-section {

        width: 100%;

        height: 600vh;

        min-height: 600vh;

        padding: 0 15px;

        box-sizing: border-box;

        

        background-image:
            url("../images/proccesback.png");

        background-repeat: repeat-y;

        background-position: center top;

        background-size: auto 750px;


        background-attachment: fixed;

        overflow: visible;
    }



    .process-sticky {

        position: sticky;

        top: 0;

        width: 100%;

        height:90vh;

        min-height: 540px;

        overflow: hidden;

        display: flex;

        align-items: center;
    }



    .timeline {

        display: none;
    }



    .step-container {

        position: relative;

        width: 100%;

        height: 82vh;

        margin: 0;

        flex: none;

        overflow: hidden;
    }



    .step {

        position: absolute !important;

        inset: 0;

        width: 100%;

        height: 100%;

        margin: 0 !important;

        display: grid !important;

        align-items: center;

        opacity: 0;

        visibility: hidden;

        transform:
            translate3d(0, 90px, 0)
            scale(.97);

        transition:
            opacity .6s ease,
            transform .75s
                cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear .75s;

        z-index: 1;
    }


    /* Active card */

    .step.active {

        opacity: 1;

        visibility: visible;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        z-index: 5;

        transition:
            opacity .6s ease,
            transform .75s
                cubic-bezier(.22, 1, .36, 1);
    }


   

    .step.prev {

        opacity: 0;

        visibility: hidden;

        transform:
            translate3d(0, -90px, 0)
            scale(.97);

        z-index: 2;
    }



    .process-card {

        position: relative;

        width: 100%;

        height: auto;

        min-height: 460px;

        display: flex;

        flex-direction: column;

        overflow: hidden;

        border-radius: 16px;

        border: 2px solid #D6A63A;

        background: #F8EBD2;

        box-shadow:
            0 18px 35px
            rgba(77, 51, 20, 0.18);

        transform: none !important;

        transition: none !important;
    }


    .process-card:hover {

        transform: none !important;

        box-shadow:
            0 18px 35px
            rgba(77, 51, 20, 0.18);
    }



    .card-content {

        position: relative;

        width: 100%;

        height: 270px;

        min-height: 270px;

        flex-shrink: 0;

        padding: 22px 15px;

        box-sizing: border-box;

        display: flex;

        align-items: flex-start;

        background: #F8EBD2;

        z-index: 5;
    }



    .process-icon {

        position: relative;

        width: 55px;

        height: 220px;

        flex-shrink: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        transform: none;
    }


    .icon-circle {

        width: 55px;

        height: 55px;

        flex-shrink: 0;

        border-width: 2px;
    }

    .icon-circle span {

        font-size: 24px;
    }


    .vertical-line {

        width: 2px;

        height: 105px;

        margin-top: -2px;
    }


    .line-dot {

        width: 11px;

        height: 11px;
    }
    .card-image::before {
        content: "";

        position: absolute;

        top: -1px;
        left: 0;

        width: 100%;
        height: 45%;

        z-index: 3;

        pointer-events: none;

        background: linear-gradient(
            to bottom,
            #F8EBD2 0%,
            rgba(248, 235, 210, 0.95) 18%,
            rgba(248, 235, 210, 0.60) 45%,
            rgba(248, 235, 210, 0.20) 75%,
            rgba(248, 235, 210, 0) 80%
        );
    }


  

    .text-content {

        position: relative;

        width: calc(100% - 65px);

        max-width: none;

        margin-left: 10px;

        padding: 0;

        z-index: 10;
    }


    .step-number {

        font-size: 34px;

        line-height: 1;

        margin-bottom: 7px;
    }


    .text-content h2 {

        font-size: 20px;

        line-height: 1.2;

        white-space: normal;

        margin: 0;
    }


    .separator {

        margin: 11px 0;

        gap: 7px;
    }


    .separator span {

        width: 45px;
    }


    .separator b {

        font-size: 13px;
    }


    .text-content p {

        width: 100%;

        max-width: 100%;

        margin: 0;

        font-size: 14px;

        line-height: 1.55;
    }


   

    .card-image {

        position: relative;

        top: auto;

        right: auto;

        width: 100%;

        height: 220px;

        flex-shrink: 0;

        overflow: hidden;

        z-index: 1;
    }


    .card-image img {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        display: block;

        object-fit: cover;

        object-position: center;

        transform: none;

        transition: none;
    }


    
    .sidecart-side-cart {

        width: 100%;

        right: -100%;
    }

    .sidecart-side-cart.active {

        right: 0;
    }

    .sidecart-cart-header {

        height: 65px;

        padding: 0 15px;
    }

    .sidecart-cart-title h2 {

        font-size: 20px;
    }

    .sidecart-cart-body {

        padding: 15px;
    }

    .sidecart-cart-item {

        gap: 10px;
    }

    .sidecart-product-img {

        width: 60px;

        height: 90px;
    }

    .sidecart-product-details h3 {

        font-size: 22px;
    }

    .sidecart-product-details h4 {

        font-size: 26px;
    }

    .sidecart-qty-box {

        width: 95px;

        height: 34px;
    }

    .sidecart-trust-icons {

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

    .sidecart-checkout-btn,
    .sidecart-view-cart-btn {

        height: 45px;
    }
}



@media (max-width: 480px) {

    .process-sticky {

        min-height: 520px;
    }

    .step-container {

        height: 84vh;
    }

    .process-card {

        min-height: 430px;

        border-radius: 14px;
    }

    .card-content {

        height: 250px;

        min-height: 250px;

        padding: 18px 12px;
    }

    .process-icon {

        width: 50px;

        height: 205px;
    }

    .icon-circle {

        width: 50px;

        height: 50px;
    }

    .icon-circle span {

        font-size: 22px;
    }

    .vertical-line {

        height: 100px;
    }

    .text-content {

        width: calc(100% - 58px);

        margin-left: 7px;
    }

    .step-number {

        font-size: 30px;
    }

    .text-content h2 {

        font-size: 18px;
    }

    .text-content p {

        font-size: 13px;
    }

    .card-image {

        height: 180px;
    }


    /* Cart */

    .sidecart-cart-header {

        height: 60px;
    }

    .sidecart-cart-title h2 {

        font-size: 18px;
    }

    .sidecart-cart-title i {

        font-size: 18px;
    }

    .sidecart-product-details h3 {

        font-size: 20px;
    }

    .sidecart-product-details h4 {

        font-size: 22px;
    }

    .sidecart-bill-row {

        font-size: 14px;
    }

    .sidecart-total span {

        font-size: 24px;
    }

    .sidecart-total strong {

        font-size: 30px;
    }

    
    .sidecart-coupon-box button {

        width: 100%;

        height: 42px;
    }

    .sidecart-trust-icons {

        gap: 10px;
    }

    .sidecart-trust-icons i {

        font-size: 20px;
    }

    .sidecart-trust-icons p {

        font-size: 11px;
    }
}
@media (max-width: 1200px) {

   
    .footer {
        position: relative;
        z-index: 10;
        background-image: url("../images/mobilefooter2.png");
        background-repeat: repeat-y;
        background-position: center top;
        background-size: 100% auto;
    }

    
    .marquee {
        position: relative;
        z-index: 20;
    }

   
    .process-section-footer {
        position: relative;
        z-index: 10;
    }
     .card-image::before {
        content: "";

        position: absolute;

        top: -1px;
        left: 0;

        width: 100%;
        height: 45%;

        z-index: 3;

        pointer-events: none;

        background: linear-gradient(
            to bottom,
            #F8EBD2 0%,
            rgba(248, 235, 210, 0.95) 18%,
            rgba(248, 235, 210, 0.60) 45%,
            rgba(248, 235, 210, 0.20) 75%,
            rgba(248, 235, 210, 0) 80%
        );
    }

}
}