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

body {
    font-family: Georgia, "Times New Roman", serif;
    background: #f7efd9;
    color: #283817;
}



 .mainlogo{
    display: flex;
    align-items: center;
    gap: 2px;
 }

.hamburger {
    display: none;
    width: 30px;
    height: 30px;

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

    cursor: pointer;

    border-radius: 50%;

    transition: .3s;
  
}

.hamburger i {
    font-size: 24px;
    color: #4d3510;
}

.hamburger:hover {
    background: #e7d0a4;
}


/* =========================================
NAVBAR
========================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
    max-width: 100%;
    height: 78px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 40px;

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

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

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

    margin: 0;
    border-radius: 0;
}

.mainlogo img {
    height: 60px;
}

.navbar ul {
    display: flex;
    list-style: none;
    gap: 38px;
}

.navbar ul li a {
    text-decoration: none;
    font-size: 14px;
    font-family: Cinzel, serif;
    font-weight: 700;
    color: #4c3512;
    position: relative;
    transition: .3s;
}

.navbar ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: #b57b18;
    transition: .4s;
}

.navbar ul li:hover a {
    color: #a56b00;
}

.navbar ul li:hover a::after {
    width: 100%;
}


/* =========================================
ICONS
========================================= */

.icons {
    display: flex;
    gap: 18px;
}

.icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: .35s;
    position: relative;
}

.icon i {
    font-size: 22px;
    color: #4d3510;
}

.icon:hover {
    background: #e7d0a4;
}

.cart span {
    position: absolute;
    top: 3px;
    right: 1px;
    width: 18px;
    height: 18px;
    background: #7f2a18;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================
CART OVERLAY
========================================= */

.sidecart-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: .35s;
    z-index: 9998;
}

.sidecart-cart-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================
SIDE CART
========================================= */

.sidecart-side-cart {
    position: fixed;
    top: 0;
    right: -430px;

    width: 420px;
    height: 100vh;

    background: #f8ecd7;
    background-image: url("../images/cart.png");
    background-size: cover;

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

    transition: .4s ease;

    z-index: 9999;

    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

    overflow-y: hidden;
}

.sidecart-side-cart.active {
    right: 0;
}


/* Scrollbar */

.sidecart-side-cart::-webkit-scrollbar {
    width: 7px;
}

.sidecart-side-cart::-webkit-scrollbar-thumb {
    background: #9d7a47;
    border-radius: 20px;
}


/* =========================================
CART HEADER
========================================= */

.sidecart-cart-header {
    flex-shrink: 0;
    height: 72px;

    background: url("../images/wooden1.png");
    background-size: cover;
    background-position: center;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 20px;

    color: #fff;

    border-bottom: 2px solid rgba(255, 255, 255, .15);
    z-index: 999;
}

.sidecart-cart-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidecart-cart-title i {
    font-size: 22px;
    color: #e8d18d;
}

.sidecart-cart-title h2 {
    font-family: "Cinzel", serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .5px;
    margin: 0;
}

.sidecart-close-cart {
    font-size: 28px;
    cursor: pointer;
    transition: .3s;
}


/* =========================================
CART BODY
========================================= */

.sidecart-cart-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidecart-cart-count {
    font-family: Poppins, sans-serif;
    color: #5b4632;
    font-size: 15px;
    margin-bottom: 18px;
}

.sidecart-cart-items {
    flex: 1;
    max-height: 147px;
    overflow-y: auto;
    padding-right: 6px;
}

.sidecart-cart-items::-webkit-scrollbar {
    width: 6px;
}

.sidecart-cart-items::-webkit-scrollbar-thumb {
    background: #9d7a47;
    border-radius: 20px;
}


/* =========================================
PRODUCT CARD
========================================= */

.sidecart-cart-item {
    position: relative;
    display: flex;
    align-items: flex-start;

    gap: 15px;

    border: 2px solid #7C5325;
    border-radius: 14px;

    padding: 5px;

    margin-bottom: 18px;

    transition: .3s;
}

.sidecart-product-img {
    width: 72px;
    height: 110px;

    object-fit: contain;

    flex-shrink: 0;

    transition: .35s;
}

.sidecart-product-details {
    flex: 1;
}

.sidecart-product-details h3 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 18px;

    color: #4d2d16;

    font-weight: 700;
}

.sidecart-product-details p {
    margin: 1px 0 4px;

    font-size: 14px;

    color: #777;

    font-family: Poppins, sans-serif;
}

.sidecart-product-details h4 {
    margin: 0 0 6px;

    font-size: 22px;

    color: #3d2411;

    font-weight: 700;

    font-family: "Cormorant Garamond", serif;
}

.sidecart-cart-item:hover .sidecart-product-img {
    transform: scale(1.05);
}


/* =========================================
QUANTITY
========================================= */

.sidecart-qty-box {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100px;

    height: 30px;
    border: 1.5px solid #e6cfab;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
    margin: 10px 0;
}

.sidecart-qty-box button {
    width: 40px;

    height: 30px;

    border: none;

    background: transparent;

    font-size: 18px;

    font-weight: 600;

    cursor: pointer;

    color: #5b3915;

    transition: .3s;
}

.sidecart-qty-box button:hover {
    background: #f8ecd7;
}

.sidecart-qty-box span {
    font-size: 18px;

    font-weight: 600;

    color: #3b2412;
}


/* =========================================
DELETE BUTTON
========================================= */

.sidecart-delete-btn {
    position: absolute;
    border: none;
    background: none;

    cursor: pointer;

    color: #85684a;

    font-size: 18px;

    bottom: 18px;
    right: 20px;

    transition: .25s;
}

.sidecart-delete-btn:hover {
    color: #b51f1f;
    transform: scale(1.15);
}


/* =========================================
COUPON SECTION
========================================= */

.sidecart-coupon-section {
    margin-top: 10px;
    margin-bottom: 20px;
}

.sidecart-coupon-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 15px;
}

.sidecart-coupon-title span {
    flex: 1;
    height: 1px;
    background: #d5b78b;
}

.sidecart-coupon-title h4 {
    margin: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    color: #6a451f;

    font-family: "Cinzel", serif;
    font-size: 15px;
    letter-spacing: .8px;
}

.sidecart-coupon-title i {
    color: #8b6d2b;
}

    /* EMPTY CART - REMOVE SCROLL */
.sidecart-cart-items:has(.empty-cart) {
    max-height: none !important;
    height: auto !important;
    overflow: hidden !important;
    padding-right: 0 !important;
    flex: none !important;
}

/* Empty Cart Image Container */
.sidecart-cart-items .empty-cart {
    width: 100%;
    height: 220px;
    overflow: hidden;

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

    margin: 0;
    padding: 0;
}

/* Empty Cart Image */
.sidecart-cart-items .empty-cart-image {
    width: 100%;
    max-width: 380px;
    height: 220px;

    object-fit: contain;
    display: block;

    margin: 0 auto;
}


/* =========================================
COUPON INPUT BOX
========================================= */

.sidecart-coupon-box {
    display: flex;
    gap: 10px;
}

.sidecart-coupon-box input {
    flex: 1;

    height: 42px;

    border: 2px solid #7C5325;

    border-radius: 8px;

    padding: 0 14px;

    background: none;
    outline: none;

    transition: 0.3s ease;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    font-family: Poppins;
}

.sidecart-coupon-box input:focus {
    border-color: #7c5325;
}

.sidecart-coupon-box button {
    width: 95px;

    border: none;

    border-radius: 8px;

    background: linear-gradient(180deg, #6d4320, #4c2912);

    color: #fff;

    box-shadow:
        0 6px 15px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .15);

    font-weight: 600;

    cursor: pointer;

    transition: .3s;
}

.sidecart-coupon-box button:hover {
    transform: translateY(-3px);

    background: linear-gradient(180deg, #7b4c25, #593016);
}


/* =========================================
COUPON TAG
========================================= */

.sidecart-coupon-tag {
    margin-top: 12px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: #f5ddb0;

    border: 1px solid #e5c78d;

    border-radius: 8px;

    padding: 8px 12px;

    font-size: 14px;

    color: #5d421d;
}

.sidecart-coupon-tag div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidecart-coupon-tag .fa-circle-check {
    color: #3b8a3b;
}


/* =========================================
BILL SUMMARY
========================================= */

.sidecart-bill-box {
    margin-top: 1px;

    border-top: 1px dashed #887651;

    padding-top: 8px;
}

.sidecart-bill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;

    font-family: Poppins;

    color: #4b3824;
    font-size: 14px;
}

.sidecart-bill-row strong {
    color: #3a2615;
}

.sidecart-green {
    color: #2f8c3c !important;
}

.sidecart-total {
    border-top: 1px dashed #887651;

    padding-top: 2px;
    margin-top: 2px;
}

.sidecart-total span {
    font-size: 25px;

    font-family: "Cormorant Garamond", serif;

    font-weight: 700;
}

.sidecart-total strong {
    font-size: 30px;

    font-family: "Cormorant Garamond", serif;
}


/* =========================================
SAVING BOX
========================================= */

.sidecart-saving-box {
    margin-top: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 10px;

    border-radius: 8px;

    background: #f5ecd6;

    border: 1px solid #e3d2a7;

    color: #6a5629;

    font-size: 14px;

    font-family: Poppins;
}

.sidecart-saving-box i {
    color: #8a6b2a;
}


/* =========================================
BUTTONS
========================================= */

.sidecart-checkout-btn {
    width: 100%;

    height: 48px;

    margin-top: 1px;

    border: none;

    border-radius: 8px;

    background: linear-gradient(#6d4320, #4a2912);

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .5px;

    cursor: pointer;

    transition: .3s;
}

.sidecart-checkout-btn:hover {
    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.sidecart-checkout-btn i {
    margin-right: 8px;
}

.sidecart-view-cart-btn {
    width: 100%;

    height: 46px;

    margin-top: 12px;

    border: 2px solid #b99163;

    background: transparent;

    border-radius: 8px;

    color: #5b3719;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;
}

.sidecart-view-cart-btn:hover {
    background: #f5e7cd;
}


/* =========================================
TRUST SECTION
========================================= */

.sidecart-trust-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-top: 15px;
}

.sidecart-trust-icons div {
    border: 1px solid #e4cfaa;

    border-radius: 12px;

    padding: 5px 5px;

    text-align: center;

    transition: .3s;

    cursor: pointer;
}

.sidecart-trust-icons div:hover {
    transform: translateY(-4px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}

.sidecart-trust-icons i {
    font-size: 20px;

    color: #8b5a2b;
}

.sidecart-trust-icons p {
    margin: 0;

    font-size: 10px;

    line-height: 14px;

    color: #5b4632;

    font-family: Poppins, sans-serif;
}


/* =========================================
FOOTER IMAGE
========================================= */

.sidecart-cart-footer-image {
    margin-top: 30px;

    text-align: center;
}

.sidecart-cart-footer-image img {
    width: 100%;

    opacity: .95;

    display: block;
}


/* =========================================
PROCESS HERO
========================================= */

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

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

.process-section {
    width: 100%;
    position: relative;
    max-width: none;
    margin: 0;
    padding: 60px 40px;

    height: 600vh;

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


/* =========================================
MAIN CARD
========================================= */

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


/* =========================================
LEFT CONTENT AREA
========================================= */

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


/* =========================================
ICON + VERTICAL LINE
========================================= */

.process-icon {
    position: relative;

    width: 90px;
    height: 300px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================
ICON CIRCLE
========================================= */

.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
========================================= */

.vertical-line {
    width: 3px;

    height: 135px;

    background: #315A2A;

    margin-top: -2px;

    flex-shrink: 0;
}


/* =========================================
BOTTOM DOT
========================================= */

.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
========================================= */

.text-content {
    position: relative;

    margin-left: 18px;

    width: 360px;

    max-width: 360px;

    z-index: 10;
}


/* =========================================
STEP NUMBER
========================================= */

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

    font-size: 56px;

    font-weight: bold;

    line-height: 1;

    color: #B58B22;

    margin-bottom: 8px;
}


/* =========================================
TITLE
========================================= */

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

    font-size: 30px;

    font-weight: bold;

    line-height: 1.2;

    color: #315A2A;

    letter-spacing: 0.4px;

    white-space: nowrap;
}


/* =========================================
DECORATIVE SEPARATOR
========================================= */

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


/* =========================================
DESCRIPTION
========================================= */

.text-content p {
    width: 100%;

    max-width: 330px;

    font-size: 18px;

    line-height: 1.65;

    color: #3F3F35;
}


/* =========================================
RIGHT IMAGE
========================================= */

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


/* =========================================
STICKY SCREEN
========================================= */

.process-sticky {
    position: sticky;

    top: 0;

    height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;
}


/* =========================================
TIMELINE
========================================= */

.timeline {
    width: 170px;

    height: 80%;

    position: relative;

    display: flex;

    justify-content: center;
}

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


/* Vertical line */

.timeline-line {
    position: absolute;

    top: 65px;

    bottom: 20px;

    width: 2px;

    background: #b89d51;
}


/* Timeline dots container */

.timeline-items {
    position: absolute;

    top: 70px;

    bottom: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    z-index: 5;
}


/* Circle */

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


/* Active circle */

.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
========================================= */

.step-container {
    position: relative;

    height: 80%;

    flex: 1;

    margin-right: 45px;
}


/* =========================================
EVERY STEP SAME POSITION
========================================= */

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


/* Active step */

.step.active {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    z-index: 2;
}


/* Previous step */

.step.prev {
    opacity: 0;

    visibility: hidden;

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


/* =========================================
AFTER PROCESS
========================================= */

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


/* =========================================
TABLET
========================================= */

@media (max-width: 1200px) {

    .navbar ul {
        gap: 22px;
    }

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

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

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

        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        text-align: center;
    }

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


/* =========================================
SMALL TABLET
========================================= */

@media (max-width: 900px) {

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

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

        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        text-align: center;
    }

    .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(0.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;
    }
}


/* =========================================
MOBILE
========================================= */

@media (max-width: 700px) {

    /* HERO */

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

    .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 BACKGROUND */

    .process-section {
        width: 100%;

        padding: 30px 15px;

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

        background-size: auto 750px;

        background-attachment: scroll;
    }


    /* PROCESS LAYOUT */

    .process-sticky {
        position: relative;
        top: auto;

        height: auto;
        min-height: auto;

        display: block;

        overflow: visible;
    }

    .timeline {
        display: none;
    }

    .step-container {
        width: 100%;
        height: auto;

        margin: 0;
        position: relative;
    }

    .step {
        position: relative;
        inset: auto;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .step.active {
        display: block;

        opacity: 1;
        visibility: visible;

        transform: none;
    }


    /* CARD */

    .process-card {
        width: 100%;
        height: auto;
        min-height: 460px;

        display: flex;
        flex-direction: column;

        overflow: hidden;

        border-radius: 16px;
    }


    /* CONTENT */

    .card-content {
        width: 100%;
        height: 300px;

        padding: 25px 15px;

        display: flex;
        align-items: flex-start;

        background: #F8EBD2;
    }


    /* ICON */

    .process-icon {
        width: 58px;
        height: 230px;

        flex-shrink: 0;

        transform: none;
    }

    .icon-circle {
        width: 58px;
        height: 58px;

        border-width: 2px;
    }

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

    .vertical-line {
        width: 2px;
        height: 110px;
    }

    .line-dot {
        width: 11px;
        height: 11px;
    }


    /* TEXT */

    .text-content {
        width: calc(100% - 66px);
        max-width: none;

        margin-left: 8px;
    }

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

    .text-content h2 {
        font-size: 20px;
        line-height: 1.2;

        white-space: normal;
    }

    .separator {
        margin: 12px 0;
    }

    .separator span {
        width: 45px;
    }

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

        font-size: 14px;
        line-height: 1.55;
    }


    /* IMAGE */

    .card-image {
        position: relative;

        top: auto;
        right: auto;

        width: 100%;
        height: 260px;

        flex-shrink: 0;
    }

    .card-image img {
        position: absolute;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }


    /* CART */

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


/* =========================================
SMALL MOBILE
========================================= */

@media (max-width: 480px) {

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


/* =========================================
MOBILE PROCESS BACKGROUND
========================================= */

.process-section {
    background-attachment: fixed;
}


/* =========================================
SMALL MOBILE PROCESS
========================================= */

@media (max-width: 600px) {

    .process-hero {
        height: 220px;
    }

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

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