/*==========================================
WEAR CLEAN - PREMIUM FOUNDATION
==========================================*/

:root {

    --primary: #6B8E23;
    --primary-dark: #405810;
    --primary-light: #EEF4E3;

    --secondary: #D8CBA8;

    --ivory: #FAF8F2;

    --white: #ffffff;

    --heading: #2D3227;

    --text: #646464;

    --border: #ECE8DA;

    --gold: #B07810;
    
        --gold-light: #E8E0C8;

    --radius: 18px;

    --radius-lg: 28px;

    --shadow-sm: 0 10px 30px rgba(0, 0, 0, .05);

    --shadow-md: 0 20px 50px rgba(0, 0, 0, .08);

    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .12);

    --transition: .35s cubic-bezier(.4, 0, .2, 1);

}


/*==========================================

RESET

==========================================*/

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Lato', sans-serif;

    color: var(--text);

    background: #fff;

    line-height: 1.75;

    max-width: 100%;
    overflow-x: hidden;

    

}

img {

    display: block;

    max-width: 100%;

    height: auto;

}

a {

    text-decoration: none;

}

ul {

    list-style: none;
    padding: 0;

}

.container {

    max-width: 1360px;

}

.section-padding {

    padding: 50px 0;

}


/*==========================================

TYPOGRAPHY

==========================================*/


p {

    font-size: 17px;

    color: var(--text);

}


/*==========================================

SECTION HEADING

==========================================*/

.wc-section-heading {

    max-width: 720px;

    margin: auto auto 60px;

}

.wc-section-tag {

    display: inline-block;

    padding: 10px 20px;

    border-radius: 40px;

    background: var(--primary-light);

    color: var(--primary);

    font-family: 'Montserrat';

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    margin-bottom: 20px; 

    border: 1px solid rgba(171, 169, 169, 0.91);

}


/*==========================================

BUTTONS

==========================================*/

.wc-btn-primary,
.wc-btn-outline,
.wc-btn-light {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 100px;
    padding: 8px 20px;

    transition: var(--transition);

    font-family: 'Montserrat';

    font-weight: 500;

}

.wc-btn-primary {

    background: var(--primary);

    color: #fff;

}

.wc-btn-primary i {
    font-size: 16px;
    padding-right: 8px;
}

.wc-btn-primary:hover {

    transform: translateY(-4px);

    background: var(--primary-dark);

}

.wc-btn-outline {

    border: 2px solid #B07810;

    color: #B07810;

}

.wc-btn-outline:hover {

    background: var(--primary);

    color: #fff;

}

.wc-btn-light {

    background: #fff;

    color: var(--heading);

    box-shadow: var(--shadow-sm);

}

.wc-btn-light:hover {

    transform: translateY(-4px);

}


/*==========================================

HEADER

==========================================*/

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

.wc-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    padding: 7px 0;

    background: #fff;

    border-bottom: 1px solid rgba(175, 175, 175, .25);

    transition:
        padding .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}


/* =========================================================
   SCROLLED HEADER
========================================================= */

.wc-header.scrolled {

    padding: 4px 0;

    background: rgba(250, 248, 242, .96);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .06);

}


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

.wc-navbar {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}


/* =========================================================
   LOGO
========================================================= */

.wc-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;

}


.wc-logo img {

    display: block;

    width: auto;

    height: 72px;

    object-fit: contain;

    transition:
        height .3s ease,
        transform .3s ease;

}


.wc-header.scrolled .wc-logo img {

    height: 64px;

}


.wc-logo:hover img {

    transform: scale(1.03);

}


/* =========================================================
   MOBILE MENU WRAPPER
========================================================= */

.wc-mobile-menu {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* =========================================================
   NAVIGATION
========================================================= */

.wc-nav {

    flex: 1;

    display: flex;

    justify-content: center;

}


.wc-nav ul {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 38px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.wc-nav li {

    position: relative;

}


.wc-nav a {

    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 28px 0;

    color: var(--heading);

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition: color .3s ease;

}


/* =========================================================
   NAV UNDERLINE
========================================================= */

.wc-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 18px;

    width: 0;

    height: 2px;

    border-radius: 20px;

    background: var(--primary);

    transition: width .3s ease;

}


.wc-nav a:hover {

    color: var(--primary);

}


.wc-nav a:hover::after,

.wc-nav a.active::after {

    width: 100%;

}


.wc-nav a.active {

    color: var(--primary);

}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.wc-header-actions {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 12px;

}


.wc-header-actions i {

    margin-right: 5px;

}


/* =========================================================
   PHONE BUTTON
========================================================= */

.wc-btn-outline {

    height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 20px;

    gap: 5px;

    border: 1.5px solid var(--gold);

    border-radius: 50px;

    background: #fff;

    color: var(--gold);

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition: all .3s ease;

}


.wc-btn-outline:hover {

    background: #E8E0C8;

    color: var(--gold);

    transform: translateY(-2px);

}


/* =========================================================
   PRIMARY ACTION
========================================================= */

.wc-header-actions .wc-btn-primary {

    min-width: 150px;

    height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 24px;

    border-radius: 50px;

    background: var(--primary);

    border: 1px solid var(--primary);

    color: #fff;

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 8px 20px rgba(107, 142, 35, .15);

    transition: all .3s ease;

}


.wc-header-actions .wc-btn-primary:hover {

    background: #58751c;

    border-color: #58751c;

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(107, 142, 35, .22);

}


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

.wc-mobile-toggle {

    display: none;

    width: 44px;

    height: 44px;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 1px solid rgba(107, 142, 35, .25);

    border-radius: 50%;

    background: transparent;

    color: var(--heading);

    font-size: 18px;

    cursor: pointer;

    transition: all .3s ease;

}


.wc-mobile-toggle:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: #fff;

}


.wc-header.menu-open .wc-mobile-toggle {

    background: var(--primary);

    border-color: var(--primary);

    color: #fff;

}

@media (max-width: 991px) {

    .wc-navbar {

        min-height: 72px;

    }


    .wc-logo img {

        height: 65px;

    }


    .wc-mobile-menu {

        gap: 20px;

    }


    .wc-nav ul {

        gap: 20px;

    }


    .wc-nav a {

        font-size: 12px;

    }


    .wc-header-actions {

        gap: 8px;

    }


    .wc-btn-outline {

        padding: 0 14px;

        font-size: 11px;

    }


    .wc-header-actions .wc-btn-primary {

        min-width: 125px;

        padding: 0 18px;

    }

    

}

@media (max-width: 767px) {

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

    .wc-header {

        padding: 5px 0;

    }


    .wc-header.scrolled {

        padding: 3px 0;

    }


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

    .wc-navbar {

        position: relative;

        min-height: 68px;

        gap: 15px;

    }


    /* =====================================================
       LOGO
    ===================================================== */

    .wc-logo img {

        height: 62px;

    }


    .wc-header.scrolled .wc-logo img {

        height: 57px;

    }


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

    .wc-mobile-toggle {

        display: flex;

        flex-shrink: 0;

    }


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

    .wc-mobile-menu {

        position: absolute;

        top: calc(100% + 8px);

        left: 0;

        width: 100%;

        display: block;

        padding: 20px;

        background: #fff;

        border-radius: 0 0 20px 20px;

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

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .3s ease;

    }


    /* =====================================================
       OPEN MENU
    ===================================================== */

    .wc-header.menu-open .wc-mobile-menu {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }


    /* =====================================================
       NAVIGATION
    ===================================================== */

    .wc-nav {

        display: block;

        width: 100%;

        padding: 0;

    }


    .wc-nav ul {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        width: 100%;

        gap: 4px;

    }


    .wc-nav li {

        width: 100%;

    }


    .wc-nav a {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        padding: 12px 14px;

        border-radius: 10px;

        color: var(--heading);

        font-size: 13px;

        font-weight: 600;

    }


    /* Remove desktop underline */

    .wc-nav a::after {

        display: none;

    }


    .wc-nav a:hover {

        background: rgba(107, 142, 35, .08);

        color: var(--primary);

    }


    .wc-nav a.active {

        background: rgba(107, 142, 35, .10);

        color: var(--primary);

    }


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

    .wc-header-actions {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 10px;

        margin-top: 18px;

        padding-top: 18px;

        border-top: 1px solid rgba(0, 0, 0, .08);

    }


    /* =====================================================
       MOBILE PHONE BUTTON
    ===================================================== */

    .wc-header-actions .wc-btn-outline {

        width: 100%;

        height: 48px;

        justify-content: center;

        padding: 0 16px;

        border-radius: 12px;

        font-size: 12px;

    }


    /* =====================================================
       MOBILE ENQUIRE BUTTON
    ===================================================== */

    .wc-header-actions .wc-btn-primary {

        width: 100%;

        min-width: 0;

        height: 48px;

        justify-content: center;

        padding: 0 16px;

        border-radius: 12px;

        font-size: 12px;

    }

       

}

@media (max-width: 767px) {

    .wc-section-tag {

        display: inline-flex;

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

        padding: 10px 16px;

        margin-bottom: 12px;

        border-radius: 50px;

        font-family: 'Montserrat', sans-serif;

        font-size: 11px;

        font-weight: 700;

        letter-spacing: .8px;

        line-height: 1.2;

        white-space: nowrap;

    }

}

/*==========================================

HERO

==========================================*/

.wc-hero {

    padding: 90px 0 0px;

    background: rgba(211, 211, 211, 0.149);

    position: relative;

    overflow: hidden;

}

.wc-hero-content {
    padding: 60px 0 0;
}

.wc-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    font-size: 12px;
    letter-spacing: 0.8px;
    font-weight: 700;

    background: #E8E0C8;

    border-radius: 50px;

    box-shadow: var(--shadow-sm);

    margin-bottom: 28px;

    color: #B07810;

    border: 1px solid var(--gold);

}

h2.hero-title {
    font-family: 'Playfair Display';
    color: var(--heading);
    font-size: 53px;
    font-weight: 500px;
    letter-spacing: 0.5px;

    margin-bottom: 25px;

}

.wc-hero h2 span {

    display: block;
    font-size: 54px;
    font-weight: 500;

    color: var(--primary);

}

.wc-hero p {

    max-width: 540px;

    margin-bottom: 38px;

    color: rgb(107, 107, 107);

}

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

.wc-hero-buttons {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 32px;

}


/* =========================================================
   BASE BUTTON
========================================================= */

.wc-hero-buttons a {

    height: 56px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 27px;

    border-radius: 50px;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        border-color .3s ease;

}


/* =========================================================
   WHATSAPP — PRIMARY
========================================================= */

.wc-btn-whatsapp {

    min-width: 178px;

    background: #6B8E23;

    color: #fff;

    border: 1px solid #6B8E23;

    box-shadow:
        0 8px 22px rgba(107, 142, 35, .18);

}


.wc-btn-whatsapp i {

    font-size: 19px;

}


.wc-btn-whatsapp:hover {

    background: #58771b;

    border-color: #58771b;

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(107, 142, 35, .25);

}


/* =========================================================
   EXPLORE SERVICES — SECONDARY
========================================================= */

.wc-btn-secondary {

    min-width: 190px;

    background: transparent;

    color: #B07810;

    border: 1.5px solid #B07810;

}


.wc-btn-secondary i {

    font-size: 10px;

    transition: transform .3s ease;

}


.wc-btn-secondary:hover {

    background: #E8E0C8;

    border-color: #E8E0C8;

    color: #B07810;

    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(107, 142, 35, .15);

}


.wc-btn-secondary:hover i {

    transform: translateX(4px);

}

.wc-trust {

    display: grid;

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

    gap: 18px;

    margin-top: 60px;

}

.wc-trust-item {

    display: flex;

    align-items: center;

    gap: 18px;

    background: #fff;

    padding: 24px;

    border-radius: 18px;

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

}

.wc-trust-item:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-md);

}

.wc-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 22px;

}

/*==================================
HERO STATS
==================================*/

/* ===========================
   HERO STATS
=========================== */

/* ==========================================
   HERO TRUST INDICATORS
========================================== */

.wc-hero-stats {

    display: grid;

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

    margin-top: 25px;

    padding: 20px;

    max-width: 600px;

    border-top: 1px solid rgba(34, 35, 31, 0.10);

    gap: 5px;

    background-color: var(--gold-light);
     border-radius: 10px;

}


/* Individual stat */

.wc-stat {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0 12px;

    position: relative;

}

.stat-experience {
    display: none;
}

.box1 {
    max-width: 150px;
}

.box2{
    max-width: 190px;
}

.wc-stat:first-child {

    padding-left: 0;

}

.wc-stat:last-child {

    padding-right: 0;

}





/* Icon */

.wc-hero-stat-icon {

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid var(--gold);

    color: var(--gold);

    font-size: 16px;

    background: var(--gold-light);

}


/* Text */

.wc-stat-content {

    min-width: 150px;

}


/* Heading */

.wc-stat-content h3 {

    margin: 0 0 4px;

    color: var(--gold);

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.25;

}


/* Description */

.wc-stat-content span {

    display: block;

    color: black;

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.45;

}



@media (max-width: 768px) {

    .wc-hero{
        padding: 110px 0 90px;
    }
    
    .wc-hero-content{
        padding: 10px 0;
       
       
    }

    span.wc-badge{
        width: 290px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.8px;
        padding: 8px 6px;
        margin-left: 15px;
       
    }

    h2.hero-title{
        font-size: 27px;
        font-weight: 500;
        text-align: center;
    }

        .wc-hero h2 span{
            font-size: 27px;
            font-weight: 500;
        }

        .wc-hero-buttons> .wc-btn-primary{
            font-size: 14px;
            padding: 10px;
        }

        .wc-hero p{
            text-align: center;
            width: auto;
            font-size: 10px;
        }

                          .wc-hero-stats {
                              width: 100%;
                              max-width: 100%;
            
                              display: grid;
                              grid-template-columns: repeat(3, minmax(0, 1fr));
            
                              gap: 0;
            
                              margin-top: 28px;
                              padding: 16px 6px;
            
                              background: var(--gold-light);
            
                              border: 1px solid rgba(176, 120, 16, .12);
                              border-radius: 16px;
            
                              box-shadow: 0 8px 25px rgba(0, 0, 0, .04);
            
                              box-sizing: border-box;
                          }
            
            
                          /* =====================================================
                   EACH STAT
                ===================================================== */
            
                          .wc-stat {
                              width: 100%;
                              max-width: none;
                              min-width: 0;
                              min-height: 0;
            
                              display: flex;
                              flex-direction: column;
            
                              align-items: center;
                              justify-content: flex-start;
            
                              gap: 6px;
            
                              padding: 3px 5px;
            
                              position: relative;
            
                              box-sizing: border-box;
                          }
            
            
                          /* =====================================================
                   VERTICAL DIVIDER
                ===================================================== */
            
                          .wc-stat:not(:last-child)::after {
                              content: "";
            
                              position: absolute;
            
                              right: 0;
                              top: 10%;
            
                              width: 1px;
                              height: 80%;
            
                              background: rgba(176, 120, 16, .20);
                          }
            
            
                          /* =====================================================
                   ICON
                ===================================================== */
            
                          .wc-hero-stat-icon {
                              width: 32px;
                              height: 32px;
            
                              flex-shrink: 0;
            
                              display: flex;
                              align-items: center;
                              justify-content: center;
            
                              border-radius: 50%;
            
                              font-size: 13px;
            
                              background: rgba(255, 255, 255, .65);
            
                              border: 1px solid var(--gold);
            
                              color: var(--gold);
                          }
            
            
                          /* =====================================================
                   STAT CONTENT
                ===================================================== */
            
                          .wc-stat-content {
                              width: 100%;
                              min-width: 0;
            
                              text-align: center;
                          }
            
            
                          /* =====================================================
                   STAT TITLE
                ===================================================== */
            
                          .wc-stat-content h3 {
                              margin: 0 0 3px;
            
                              color: var(--gold);
            
                              font-family: 'Montserrat', sans-serif;
            
                              font-size: 12px;
                              font-weight: 600;
            
                              line-height: 1.25;
            
                              min-height: 27px;
            
                              display: flex;
                              align-items: center;
                              justify-content: center;
            
                              text-align: center;
                          }
            
            
                          /* =====================================================
                   STAT DESCRIPTION
                ===================================================== */
            
                          .wc-stat-content span,
                          .stat-description {
                              display: block;
            
                              margin: 0;
            
                              font-size: 10px;
            
                              line-height: 1.35;
            
                              text-align: center;
            
                              color: var(--text-dark, #222);
                          }
            
            
                          /* Remove desktop restrictions */
                          .box1,
                          .box2 {
                              width: auto;
                              max-width: none;
                          }

                                                  .box3 h3 {
                                                      padding-top: 5px;
                                                  }

   

}

@media (max-width: 480px) {

    .wc-hero {
        padding: 95px 0 50px;
    }

    .wc-hero p {
        font-size: 12px;
        padding: 0 5px;
    }


    /* Buttons */
    .wc-hero-buttons {
        gap: 8px;
    }

    .wc-hero-buttons a {
        min-width: 0;
        flex: 1;
        height: 48px;
        padding: 0 10px;
        font-size: 12px;
    }


   .wc-hero-stats {
       margin-top: 22px;

       padding: 14px 5px;

       border-radius: 14px;
   }


   .wc-stat {
       padding: 3px 4px;

       gap: 5px;
   }


   .wc-hero-stat-icon {
       width: 30px;
       height: 30px;

       font-size: 12px;
   }


   .wc-stat-content h3 {
       font-size: 12px;

       line-height: 1.25;

       min-height: 26px;

       margin-bottom: 3px;
   }

   .box3 h3 {
    padding-top: 5px;
   }


   .wc-stat-content span,
   .stat-description {
       font-size: 10px;

       line-height: 1.3;
   }
}

@media (max-width: 576px) {

    .wc-hero-buttons {

        width: 100%;

        flex-direction: row;

        align-items: stretch;

        gap: 12px;

    }


    .wc-hero-buttons a {

        width: 100%;

        height: 54px;

    }

}



.wc-btn-hero{
    display: inline-flex;
    
        align-items: center;
    
        justify-content: center;
        padding: 20px;
    
        min-width: 180px;
    
        height: 56px;
    
        border-radius: 100px;
    
        transition: var(--transition);
    
        font-family: 'Montserrat';
    
        font-weight: 600;

        color: var(--primary-dark);
        border: 2px solid var(--primary-dark);
        
}

.wc-btn-hero:hover {

    background: var(--primary);

    color: #fff;

}

/* =========================================================
   HERO RIGHT VISUAL
========================================================= */

.wc-hero-visual {

    position: relative;

    width: 100%;

    height: 650px;

    margin-left: auto;

    padding: 25px;

}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.wc-hero-visual-bg {

    position: absolute;

    z-index: 0;

    right: 0;

    bottom: 0;

    width: 88%;

    height: 88%;

    border-radius: 40px;

    background: #e8eadb;

    transform: rotate(2deg);

    padding-top: 50px;

}


/* =========================================================
   MAIN IMAGE
========================================================= */

.wc-hero-main-image {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 38px;

    background: #ddd;

    box-shadow:
        0 30px 70px rgba(35, 40, 25, 0.14);

}


/* Image */

.wc-hero-main-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform 0.8s ease;

}


/* Subtle image movement */

.wc-hero-main-image:hover img {

    transform: scale(1.025);

}


/* =========================================================
   TOP DELIVERY CARD
========================================================= */

/* =========================================
   HERO FIRST ORDER FLOATING BADGE
========================================= */

.wc-hero-delivery-card {

    position: absolute;

    z-index: 5;

    top: 35px;
    right: 35px;

    width: 270px;
    min-height: 55px;

    display: flex;
    align-items: center;

    padding: 10px 15px 10px 10px;

    background: #ffffff;

    border: 1px solid #e5d7b8;

    border-radius: 60px;

    box-shadow:
        0 12px 35px rgba(70, 60, 35, 0.08);

    box-sizing: border-box;
}


/* =========================================
   DISCOUNT CIRCLE
========================================= */

.wc-discount-badge {

    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    background: #b87900;

    color: #fff;

    border: 2px solid #ffffff;

    outline: 1px solid #b87900;

    outline-offset: 3px;

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

    box-sizing: border-box;
}


/* 20% */

.wc-discount-number {

    display: block;

    font-family: 'Playfair Display', serif;

    font-size: 22px;

    font-weight: 700;

    line-height: 0.95;

    letter-spacing: -0.5px;
}


/* OFF */

.wc-discount-off {

    display: block;

    margin-top: 3px;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #fff;
}


/* =========================================
   TEXT CONTENT
========================================= */

.wc-discount-content {

    flex: 1;

    min-width: 0;

    margin-left: 10px;
}


.wc-discount-content strong {

    display: block;

    margin-bottom: 2px;

    color: #b87900;

    font-family: 'Lato', sans-serif;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.6px;
}


.wc-discount-content span {

    display: block;

    color: #55564f;

    font-family: 'Montserrat', sans-serif;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.5;
}


/* =========================================
   RIGHT DECORATIVE ICON
========================================= */

.wc-discount-icon {

    width: 42px;
    height: 55px;

    flex-shrink: 0;

    display: flex;

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

    color: #c79b48;

    font-size: 30px;

    transform: rotate(-15deg);

    margin-left: 12px;
}

@media (max-width: 768px) {

    .wc-hero-delivery-card {

        top: 20px;
        right: 15px;

        width: auto;
        min-height: 82px;

        padding: 8px 15px 8px 8px;

        border-radius: 45px;
    }


    .wc-discount-badge {

        width: 48px;
        height: 48px;

        outline-offset: 2px;
    }


    .wc-discount-number {

        font-size: 15px;
    }


    .wc-discount-off {

        font-size: 8px;

        letter-spacing: 0.7px;
    }


    .wc-discount-content {

        margin-left: 8px;
    }


    .wc-discount-content strong {

        margin-bottom: 1px;

        font-size: 10px;
        font-weight: 900;

        letter-spacing: 0.6px;
    }


    .wc-discount-content span {

        font-size: 9px;
        font-weight: 700;

        line-height: 1.4;
    }


    .wc-discount-icon {

        width: 30px;

        font-size: 22px;

        margin-left: 6px;
    }
}
/* =========================================================
   BOTTOM CARE CARD
========================================================= */

.wc-hero-care-card {

    position: absolute;

    z-index: 5;

    left: -5px;

    bottom: 45px;

    width: 310px;

    padding: 23px 25px;

    border-radius: 22px;

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

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

    box-shadow:
        0 22px 55px rgba(30, 35, 20, 0.15);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    transition: all 0.35s ease;

}


/* Hover */

.wc-hero-care-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 28px 65px rgba(30, 35, 20, 0.19);

}


/* Label */

.wc-care-label {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    color: #6B8E23;

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.8px;

}


/* Check icon */

.wc-care-label i {

    font-size: 11px;

}


/* Heading */

.wc-hero-care-card h4 {

    margin: 0 0 8px;

    color: #252620;

    font-family: 'Playfair Display', serif;

    font-size: 23px;

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -0.3px;

}


/* Green heading */

.wc-hero-care-card h4 span {

    display: block;

    color: #6B8E23;

}


/* Description */

.wc-hero-care-card p {

    margin: 0;

    max-width: 250px;

    color: #6d7069;

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    line-height: 1.65;

}


/* =========================================================
   SMALL DECORATIVE BADGE
========================================================= */

.wc-hero-small-badge {

    position: absolute;

    z-index: 6;

    right: 30px;

    bottom: 25px;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #6B8E23;

    color: #fff;

    border: 5px solid #FAF8F2;

    box-shadow:
        0 10px 25px rgba(30, 35, 20, 0.12);

    font-size: 12px;

}

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

@media (max-width: 1199px) {

    .wc-hero-visual {

        height: 590px;

        padding-left: 15px;

        padding-right: 15px;

    }

    .wc-hero-delivery-card {

        right: 5px;

    }

    .wc-hero-care-card {

        left: -5px;

        width: 200px;

    }

}

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

@media (max-width: 991px) {

    .wc-hero-visual {

        height: 560px;

        padding: 0 10px 20px;

        margin-top: 15px;

    }

    .wc-hero-visual-bg {

        right: 5px;

        width: 92%;

        height: 90%;

        border-radius: 30px;

    }

    .wc-hero-main-image {

        border-radius: 30px;

    }

        .wc-hero-delivery-card {
            top: 15px;
            right: 5px;
            min-width: auto;
            width: 200px;
            padding: 10px 8px;
            border-radius: 15px;
        }

    .wc-delivery-icon {

        width: 28px;

        height: 28px;

        border-radius: 10px;

        font-size: 10px;

    }

    .wc-hero-care-card {

        left: 0;

        bottom: 30px;

        width: 210px;

        padding: 19px 20px;

        border-radius: 18px;

    }

    .wc-hero-care-card h4 {

        font-size: 20px;

    }

    .wc-hero-care-card p{
        width: 100%;
        max-width: 180px;
        text-align: start;
    }

    .wc-hero-small-badge {

        right: 15px;

        bottom: 15px;

    }

}

@media (max-width: 575px) {

    .wc-hero-visual {

        height: 480px;

        padding: 0;

    }

    .wc-hero-main-image {

        border-radius: 25px;

    }

    .wc-hero-visual-bg {

        right: 0;

        bottom: 0;

        border-radius: 28px;

    }

   

   

    .wc-hero-care-card {

        left: 10px;

        bottom: 15px;

        width: 210px;

        padding: 17px 18px;

    }

    .wc-hero-care-card h4 {

        font-size: 19px;

    }

    .wc-hero-care-card p {

        font-size: 9px;

    }

    .wc-hero-small-badge {

        display: none;

    }

}

/*=========================================================
STATISTICS
=========================================================*/

.wc-stats {

    background: #fff;

    position: relative;

    z-index: 2;

}

.wc-stat-card {

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 24px;

    padding: 20px 15px;

    text-align: center;

    transition: var(--transition);

    box-shadow: var(--shadow-sm);

    height: 100%;

}

.wc-stat-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-md);

}

.wc-stat-number {

    font-family: 'Montserrat', sans-serif;

    font-size: 24px;

    font-weight: 700;

    color: var(--primary);

    line-height: 1.5;

    margin-bottom: 15px;

}

.wc-stat-card h5 {

    font-size: 16px;

    margin-bottom: 10px;

}

.wc-stat-card p {

    margin: 0;

}



/*=========================================================
WHY CHOOSE US
=========================================================*/

.wc-why {

    background: var(--ivory);

}

/*=========================================================
WHY WEAR CLEAN
=========================================================*/

.wc-why {

    background: var(--ivory);

    position: relative;

    overflow: hidden;

}

.wc-why::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    background: rgba(107, 142, 35, .05);

    border-radius: 50%;

    top: -180px;

    right: -150px;

}

.wc-why::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    background: rgba(216, 203, 168, .18);

    border-radius: 50%;

    bottom: -180px;

    left: -150px;

}


/* =========================================================
   WHY WEAR CLEAN
========================================================= */

.wc-difference {

    position: relative;

    padding: 110px 0 120px;

    background: #FAF8F2;

    overflow: hidden;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.wc-difference .wc-section-heading {

    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;

}


.wc-difference .wc-section-tag {

    display: inline-flex;

    align-items: center;

    margin-bottom: 20px;

    border-radius: 50px;

    background: var(--primary-light);
    
        color: var(--primary);

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}


.wc-difference .wc-section-heading h2 {

    margin: 0 0 15px;

    color: #252620;

    font-family: 'Playfair Display', serif;

    font-size: clamp(40px, 5vw, 60px);

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -1px;

}


.wc-difference .wc-section-heading p {

    max-width: 600px;

    margin: 0 auto;

    color: #686B64;

    font-family: 'Lato', sans-serif;

    font-size: 17px;

    line-height: 1.8;

}


/* =========================================================
   BENTO GRID
========================================================= */

/* =========================================================
   BENTO GRID
========================================================= */

.wc-bento-grid {

    display: grid;

    grid-template-columns: 1.45fr 1fr;

    grid-template-rows: 280px 280px 240px;

    gap: 22px;

    width: 100%;

}


/* =========================================================
   CARD POSITIONS — DESKTOP
========================================================= */

/* 01 — Large left card */

.wc-bento-card:nth-child(1) {

    grid-column: 1;

    grid-row: 1 / 3;

}


/* 02 — Top right card */

.wc-bento-card:nth-child(2) {

    grid-column: 2;

    grid-row: 1;

}


/* 03 — Bottom right card */

.wc-bento-card:nth-child(3) {

    grid-column: 2;

    grid-row: 2;

}


/* 04 — Full width bottom */

.wc-bento-card:nth-child(4) {

    grid-column: 1 / 3;

    grid-row: 3;

}


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

.wc-bento-card {

    position: relative;

    min-width: 0;

    min-height: 0;

    overflow: hidden;

    border-radius: 28px;

    background: #30342a;

    isolation: isolate;

    box-shadow:
        0 15px 45px rgba(35, 40, 25, 0.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.wc-bento-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 25px 60px rgba(35, 40, 25, 0.15);

}


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

.wc-bento-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -3;

    transition:
        transform .8s cubic-bezier(.2, .7, .2, 1);

}


.wc-bento-card:hover .wc-bento-image {

    transform: scale(1.06);

}


/* =========================================================
   IMAGE POSITIONING
========================================================= */

.wc-bento-card:nth-child(1) .wc-bento-image {

    object-position: center;

}


.wc-bento-card:nth-child(2) .wc-bento-image {

    object-position: center;

}


.wc-bento-card:nth-child(3) .wc-bento-image {

    object-position: center;

}


.wc-bento-card:nth-child(4) .wc-bento-image {

    object-position: center ;

}


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

.wc-bento-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(180deg,
            rgba(20, 25, 15, 0.05) 0%,
            rgba(20, 25, 15, 0.18) 35%,
            rgba(20, 25, 15, 0.88) 100%);

}


/* =========================================================
   OLIVE TINT
========================================================= */

.wc-bento-card::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(135deg,
            rgba(107, 142, 35, 0.10),
            transparent 55%);

    pointer-events: none;

}


/* =========================================================
   CONTENT
========================================================= */

.wc-bento-content {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 30px;

    color: #fff;

}


.wc-bento-card:nth-child(1) .wc-bento-content {

    padding: 38px;

}


.wc-bento-card:nth-child(4) .wc-bento-content {

    padding: 30px 38px;

}


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

.wc-bento-number {

    position: absolute;

    top: 28px;

    right: 30px;

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

    font-family: 'Playfair Display', serif;

    font-size: 14px;

    letter-spacing: 1px;

}


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

.wc-bento-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    border-radius: 14px;

    background: rgba(255, 255, 255, .14);

    border: 1px solid rgba(255, 255, 255, .22);

    color: #fff;

    font-size: 16px;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    transition: all .35s ease;

}


.wc-bento-card:hover .wc-bento-icon {

    background: #6B8E23;

    border-color: #6B8E23;

    transform: translateY(-3px);

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.wc-bento-card h3 {

    max-width: 450px;

    margin: 0 0 10px;

    color: #fff;

    font-family: 'Playfair Display', serif;

    font-size: 27px;

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -.3px;

}


/* Large card */

.wc-bento-card:nth-child(1) h3 {

    font-size: 32px;

}


/* Bottom card */

.wc-bento-card:nth-child(4) h3 {

    font-size: 32px;

}


.wc-bento-card p {

    max-width: 470px;

    margin: 0 0 15px;

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

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

    line-height: 1.7;

}


.wc-bento-card:nth-child(1) p {

    max-width: 500px;

    font-size: 14px;

}


.wc-bento-card:nth-child(4) p {

    max-width: 650px;

}


/* =========================================================
   TRUST TAG
========================================================= */

.wc-bento-tag {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .13);

    border: 1px solid rgba(255, 255, 255, .20);

    color: #fff;

    font-family: 'Lato', sans-serif;

    font-size: 12px;
    letter-spacing: 1px;

    font-weight: 400;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

}


.wc-bento-tag i {

    color: #d8e5a9;

    font-size: 12px;

}

.wc-bento-wide {

    position: relative;

    min-height: 320px;

    border-radius: 28px;

    overflow: hidden;

    isolation: isolate;

}

.wc-bento-wide .wc-bento-image {

    object-position: center center;

}


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

@media (max-width: 991px) {

    .wc-bento-grid {

        grid-template-columns: 1fr 1fr;

        grid-template-rows:
            400px 300px 300px;

        gap: 18px;

    }


    /* 01 */

    .wc-bento-card:nth-child(1) {

        grid-column: 1 / 3;

        grid-row: 1;

    }


    /* 02 */

    .wc-bento-card:nth-child(2) {

        grid-column: 1;

        grid-row: 2;

    }


    /* 03 */

    .wc-bento-card:nth-child(3) {

        grid-column: 2;

        grid-row: 2;

    }


    /* 04 */

    .wc-bento-card:nth-child(4) {

        grid-column: 1 / 3;

        grid-row: 3;

    }


    .wc-bento-card:nth-child(1) h3 {

        font-size: 32px;

    }

}


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

@media (max-width: 767px) {

    .wc-bento-grid {

        grid-template-columns: 1fr;

        grid-template-rows:
            400px 400px 400px 400px;

        gap: 16px;

    }


    /* 01 */

    .wc-bento-card:nth-child(1) {

        grid-column: 1;

        grid-row: 1;

    }


    /* 02 */

    .wc-bento-card:nth-child(2) {

        grid-column: 1;

        grid-row: 2;

    }


    /* 03 */

    .wc-bento-card:nth-child(3) {

        grid-column: 1;

        grid-row: 3;

    }


    /* 04 */

    .wc-bento-card:nth-child(4) {

        grid-column: 1;

        grid-row: 4;

    }


    .wc-bento-card {

        border-radius: 22px;

    }


    .wc-bento-content {

        padding: 25px;

    }


    .wc-bento-card:nth-child(1) .wc-bento-content,

    .wc-bento-card:nth-child(4) .wc-bento-content {

        padding: 25px;

    }


    .wc-bento-card:nth-child(1) h3,

    .wc-bento-card:nth-child(4) h3,

    .wc-bento-card h3 {

        font-size: 27px;

    }


    .wc-bento-card p,

    .wc-bento-card:nth-child(1) p,

    .wc-bento-card:nth-child(4) p {

        font-size: 10px;

        max-width: 100%;

    }

    .wc-difference>.wc-section-tag{
        display: inline-flex;
        
            align-items: center;
            justify-content: center;
        
            padding: 10px 16px;
        
            margin-bottom: 12px;
        
            border-radius: 50px;
        
            font-family: 'Montserrat', sans-serif;
        
            font-size: 11px;
        
            font-weight: 700;
        
            letter-spacing: .8px;
        
            line-height: 1.2;
        
            white-space: nowrap;
    }

}
/*=========================================================
PROCESS SECTION
=========================================================*/

.wc-process {

    background: #fff;

    position: relative;

    overflow: hidden;

}

.wc-process::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(107, 142, 35, .05);

    top: -180px;

    right: -180px;

}

.wc-process::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: rgba(216, 203, 168, .15);

    bottom: -150px;

    left: -120px;

}


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

.wc-process-timeline {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 25px;

    margin-top: 70px;

    z-index: 2;

}


/*=========================================================
CENTER LINE
=========================================================*/

.wc-process-progress {

    position: absolute;

    top: 70px;

    left: 10%;

    width: 80%;

    height: 3px;

    background: var(--border);

    z-index: 0;

}

.wc-process-progress::after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    background: linear-gradient(90deg, var(--primary), var(--secondary));

}


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

.wc-process-step {

    position: relative;

    flex: 1;

    text-align: center;

    z-index: 2;

}


/*=========================================================
NUMBER CIRCLE
=========================================================*/

.wc-process-circle {

    width: 130px;

    height: 130px;

    margin: auto;

    border-radius: 50%;

    background: #fff;

    border: 4px solid var(--primary-light);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    box-shadow: 0 15px 45px rgba(0, 0, 0, .08);

    transition: .35s;

}

.wc-process-circle span {

    font-family: 'Montserrat', sans-serif;

    font-size: 16px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 8px;

}

.wc-process-circle i {

    font-size: 34px;

    color: var(--primary);

}

.wc-process-step:hover .wc-process-circle {

    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);

}


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

.wc-process-card {

    margin-top: 35px;

    background: #fff;

    border-radius: 22px;

    padding: 30px;

    border: 1px solid var(--border);

    box-shadow: 0 15px 40px rgba(0, 0, 0, .05);

    transition: .35s;

    min-height: 210px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

}

.wc-process-card:hover {

    transform: translateY(-8px);

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

}

.wc-process-card h4 {

    font-family: 'Montserrat', sans-serif;

    font-size: 22px;

    color: var(--heading);

    margin-bottom: 15px;

}

.wc-process-card p {

    color: var(--text);

    line-height: 1.8;

    margin-bottom: 0;

}


/*=========================================================
HOVER
=========================================================*/

.wc-process-step:hover h4 {

    color: var(--primary);

}

.wc-process-step:hover .wc-process-circle i {

    transform: scale(1.15);

    transition: .35s;

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .wc-process-timeline {

        flex-direction: column;

        gap: 50px;

        padding-left: 50px;

    }

    .wc-process-progress {

        width: 3px;

        height: 100%;

        left: 64px;

        top: 0;

    }

    .wc-process-progress::after {

        width: 100%;

        height: 100%;

    }

    .wc-process-step {

        display: flex;

        align-items: flex-start;

        gap: 30px;

        text-align: left;

    }

    .wc-process-circle {

        width: 95px;

        height: 95px;

        flex-shrink: 0;

    }

    .wc-process-circle span {

        font-size: 14px;

    }

    .wc-process-circle i {

        font-size: 24px;

    }

    .wc-process-card {

        margin-top: 0;

        width: 100%;

        min-height: auto;

    }

}

@media(max-width:576px) {

    .wc-process-timeline {

        padding-left: 0;

    }

    .wc-process-progress {

        display: none;

    }

    .wc-process-step {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .wc-process-card {

        margin-top: 20px;

    }

}

/*=========================================================
HOVER EFFECTS
=========================================================*/

.wc-stat-card,
.wc-bento-card,
.wc-process-card {

    transition: all .35s ease;

}

.wc-process-card:hover .wc-process-number {

    transform: scale(1.08);

    background: var(--primary-dark);

}

.wc-bento-card:hover .wc-bento-icon {

    transform: rotate(-8deg) scale(1.08);

}



/*=========================================================
SECTION BACKGROUNDS
=========================================================*/

.wc-stats {

    padding: 70px 0;

}

.wc-why {

    padding: 100px 0;

}

.wc-process {

    padding: 100px 0;

}



/*=========================================================
SCROLL ANIMATION
=========================================================*/

.fade-up {

    opacity: 0;

    transform: translateY(40px);

    transition: all .8s ease;

}

.fade-up.show {

    opacity: 1;

    transform: translateY(0);

}



/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px) {

    .wc-bento-grid {

        grid-template-columns: 1fr;

    }

    .wc-bento-large,
    .wc-bento-small {

        grid-column: span 1;

    }

    .wc-process-row::before {

        display: none;

    }

    .wc-process-card {

        margin-bottom: 40px;

    }

}

@media(max-width:768px) {

    .wc-stat-number {

        font-size: 40px;

    }

    .wc-bento-card {

        padding: 30px;

    }

}


/*=========================================
    GARMENTS SECTION
=========================================*/

.wc-garments {
    background: rgba(128, 128, 128, 0.222);
    position: relative;
    overflow: hidden;
}

.wc-garments::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: var(--primary-light);
    border-radius: 50%;
    top: -220px;
    right: -180px;
    opacity: .7;
}

.wc-garments .container {
    position: relative;
    z-index: 2;
}

/*=========================================
    SECTION HEADING
=========================================*/

.wc-section-heading {
    max-width: 760px;
    margin: 0 auto 70px;
}

.wc-section-heading h2 {
    font-family: 'Playfair Display';
    font-size: 60px;
    font-weight: 500;
    color: var(--heading);
    margin: 20px 0;
    line-height: 1.2;
}

.wc-section-heading p {
    font-size: 17px;
    color: var(--text);
    line-height: 1.8;
    max-width: 620px;
    margin: auto;
}

/*=========================================
    GARMENT CARD
=========================================*/

.wc-garment-category {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border);
    height: 100%;
    position: relative;
}

.wc-garment-category:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

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

.wc-category-image {
    height: 260px;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.wc-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.wc-garment-category:hover img {
    transform: scale(1.08);
}

/*=========================================
    FLOATING ICON
=========================================*/

.wc-category-icon {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 215px;

    border: 8px solid var(--white);

    transition: .4s;
    z-index: 5;
}

.wc-garment-category:hover .wc-category-icon {
    transform: translateX(-50%) rotate(-8deg) scale(1.08);
}

/*=========================================
    CONTENT
=========================================*/

.wc-category-content {
    padding: 70px 20px 35px;
}

.wc-category-content h4 {
    text-align: center;
    color: var(--heading);
    margin-bottom: 30px;
    font-size: 28px;
    position: relative;
}

.wc-category-content p{
    text-align: center;
}

.wc-category-content h4::after {
    content: "";
    width: 70px;
    height: 3px;
    background: var(--primary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -14px;
    border-radius: 20px;
}

/*=========================================
    LIST
=========================================*/

/*==============================
Garment Grid
==============================*/

.wc-garment-grid {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 30px;
}

/*==============================
Garment Item
==============================*/

.wc-garment-item {

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

    padding: 8px;

    background: #fff;

    border: 1px solid rgba(107, 142, 35, .12);

    border-radius: 14px;

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

    transition: .35s ease;

}

.wc-garment-item:hover {

    transform: translateY(-4px);

    border-color: var(--primary);

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

}

/*==============================
Icon
==============================*/

.wc-garment-item i {

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 12px;

    transition: .35s;

}

.wc-garment-item:hover i {

    background: var(--primary);

    color: #fff;

    transform: rotate(12deg);

}

/*==============================
Text
==============================*/

.wc-garment-item span {

    font-size: 12px;

    font-weight: 600;

    color: var(--heading);

}

/*==============================
Mobile
==============================*/

@media(max-width:576px) {

    .wc-garment-grid {

        gap: 10px;

    }

    .wc-garment-item {

        padding: 14px;

    }

    .wc-garment-item span {

        font-size: 15px;

    }

    .wc-garment-item i {

        width: 30px;

        height: 30px;

        font-size: 13px;

    }

}



/*=========================================
    RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .wc-section-heading {
        margin-bottom: 50px;
    }

    .wc-section-heading h2 {
        font-size: 38px;
    }

    .wc-category-image {
        height: 240px;
    }

    .wc-category-icon {
        top: 195px;
    }

    .wc-premium-quote {
        padding: 45px 30px;
    }

}

@media(max-width:767px) {

    .wc-section-heading h2 {
        font-size: 30px;
    }

    .wc-section-heading p {
        font-size: 16px;
    }

    .wc-category-content {
        padding: 65px 25px 30px;
    }

    .wc-category-content h4 {
        font-size: 24px;
    }

    .wc-garment-list {
        grid-template-columns: 1fr;
    }

    .wc-category-icon {
        width: 75px;
        height: 75px;
        font-size: 28px;
        top: 200px;
    }

    .wc-premium-quote h3 {
        font-size: 28px;
    }

    .wc-premium-quote {
        padding: 40px 25px;
    }

}

/* =========================================================
   ADDITIONAL SERVICES STRIP
========================================================= */

.wc-additional-services {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

    margin-top: 28px;

    padding: 20px 28px;

    background: var(--gold-light);

    border: 1px solid var(--gold-light);

    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(35, 40, 25, 0.04);

}


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

.wc-additional-title {

    flex-shrink: 0;

    color: var(--gold);

    font-family: 'Montserrat', sans-serif;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;

}


/* =========================================================
   SERVICE LIST
========================================================= */

.wc-additional-list {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

}


/* =========================================================
   SERVICE ITEM
========================================================= */

.wc-additional-item {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

    color: #4d5149;

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

    font-weight: 500;

}


/* =========================================================
   CHECK ICON
========================================================= */

.wc-additional-item i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: rgba(107, 142, 35, 0.10);

    color: #6B8E23;

    font-size: 12px;

}


/* =========================================================
   DIVIDER
========================================================= */

.wc-additional-divider {

    width: 1px;

    height: 22px;

    background: #e3e3dc;

}

@media (max-width:768px) {
    .wc-additional-services{
        flex-direction: column;
    }

    .wc-additional-list {
        flex-direction: column;
        gap: 5px;
    }
}



/*=================================================
            SERVICE AREAS
=================================================*/

.wc-service-area {
    background: var(--ivory);
    position: relative;
}

.wc-location-card {

    height: 100%;

    padding: 40px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    position: relative;

    overflow: hidden;

    transition: var(--transition);

}

.wc-location-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 5px;

    height: 100%;

    background: var(--primary);

    transition: var(--transition);

}

.wc-location-card::after {

    content: "";

    position: absolute;

    width: 140px;

    height: 140px;

    border-radius: 50%;

    background: var(--primary-light);

    right: -70px;

    bottom: -70px;

    opacity: .6;

    transition: var(--transition);

}

.wc-location-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

    border-color: var(--primary);

}

.wc-location-card:hover::before {

    width: 100%;

    opacity: .04;

}

.wc-location-card h3 {

    position: relative;

    z-index: 2;

    font-size: 28px;

    color: var(--heading);

    margin-bottom: 20px;

}

.wc-location-card p {

    position: relative;

    z-index: 2;

    color: var(--text);

    line-height: 1.9;

    margin-bottom: 30px;

}

.wc-location-card a {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    font-weight: 600;

    color: var(--primary);

    transition: var(--transition);

}

.wc-location-card a:hover {

    gap: 14px;

    color: var(--primary-dark);

}

/* Optional location icon */

.wc-location-card h3::before {

    content: "📍";

    margin-right: 10px;

    font-size: 20px;

}

/* =========================================================
   SERVICE AREA INFORMATION STRIP
========================================================= */

.wc-area-info-section {

    background: #FAF8F2;

    padding: 35px 0;

}


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

.wc-area-info {

    position: relative;

    display: flex;

    align-items: center;

    gap: 28px;

    padding: 30px 38px;

    background: #fff;

    border: 1px solid rgba(107, 142, 35, .18);

    border-radius: 28px;

    box-shadow:
        0 15px 40px rgba(52, 74, 18, .06);

    overflow: hidden;

}


/* Subtle olive accent */

.wc-area-info::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background: var(--gold);

}


/* Very subtle decorative circle */

.wc-area-info::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    right: -100px;

    bottom: -120px;

    background: rgba(107, 142, 35, .06);

    pointer-events: none;

}


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

.wc-area-info-left {

    display: flex;

    align-items: center;

    gap: 22px;

    flex: 0 0 34%;

}


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

.wc-area-icon {

    width: 62px;

    height: 62px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: #EEF2E5;

    color: var(--gold);

    font-size: 22px;

    border: 1px solid rgba(107, 142, 35, .12);

}


/* =========================================================
   HEADING
========================================================= */

.wc-area-heading span {

    display: block;

    margin-bottom: 7px;

    color: var(--gold);

    font-family: 'Montserrat', sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.wc-area-heading h3 {

    margin: 0;

    color: var(--heading);

    font-family: 'Playfair Display', serif;

    font-size: 27px;

    font-weight: 500;

    line-height: 1.15;

}


.wc-area-heading h3 strong {

    display: block;

    color: var(--gold);

    font-weight: 500;

}


/* =========================================================
   DIVIDER
========================================================= */

.wc-area-divider {

    width: 1px;

    height: 75px;

    background: linear-gradient(to bottom,
            transparent,
            #D8CBA8,
            transparent);

    flex-shrink: 0;

}


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

.wc-area-info-text {

    flex: 1;

}


.wc-area-info-text p {

    margin: 0;

    color: #59614D;

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

    line-height: 1.75;

}


.wc-area-info-text strong {

    color: var(--gold);

    font-weight: 700;

}


/* =========================================================
   CTA
========================================================= */

.wc-area-info-action {

    flex-shrink: 0;

    position: relative;

    z-index: 2;

}


.wc-area-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 190px;

    padding: 15px 24px;

    border-radius: 50px;

    background: var(--gold);

    color: var(--gold-light);

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    box-shadow: 0 8px 20px rgba(107, 142, 35, .20);

    transition: all .3s ease;

}


.wc-area-btn i {

    font-size: 18px;

}


.wc-area-btn:hover {

    background: #344A12;

    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(52, 74, 18, .22);

}


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

@media (max-width: 991px) {

    .wc-area-info {

        flex-wrap: wrap;

        gap: 22px;

    }

    .wc-area-info-left {

        flex: 1 1 100%;

    }

    .wc-area-divider {

        display: none;

    }

    .wc-area-info-text {

        flex: 1;

    }

}


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

@media (max-width: 767px) {

    .wc-area-info-section {

        padding: 25px 0;

    }


    .wc-area-info {

        flex-direction: column;

        align-items: flex-start;

        padding: 28px 24px;

        gap: 20px;

        border-radius: 22px;

    }


    .wc-area-info-left {

        width: 100%;

        align-items: flex-start;

        gap: 16px;

    }


    .wc-area-icon {

        width: 50px;

        height: 50px;

        border-radius: 15px;

        font-size: 18px;

    }


    .wc-area-heading span {

        font-size: 9px;

        letter-spacing: 1.1px;

    }


    .wc-area-heading h3 {

        font-size: 25px;

    }


    .wc-area-info-text {

        width: 100%;

    }


    .wc-area-info-text p {

        font-size: 12px;

        line-height: 1.7;

    }


    .wc-area-info-action {

        width: 100%;

    }


    .wc-area-btn {

        width: 100%;

        min-width: 0;

    }

}

/*=================================================
            RESPONSIVE
=================================================*/

@media(max-width:991px) {

    .wc-location-card {

        padding: 35px;

    }

}

@media(max-width:767px) {

    .wc-location-card {

        padding: 28px;

    }

    .wc-location-card h3 {

        font-size: 24px;

    }

    .wc-location-card p {

        font-size: 15px;

        line-height: 1.8;

    }

    .wc-area-info-inner {
        grid-template-columns: 1fr;
    }

    .wc-area-info-action{
        justify-content: center;
    }

}

.wc-location-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.wc-location-tags span {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.wc-location-tags span:hover {
    background: var(--primary);
    color: var(--white);
}

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

.wc-trust-section {
    background: var(--white);
    position: relative;
}

.wc-trust-card {

    height: 100%;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 50px 35px;

    text-align: center;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.wc-trust-card::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: var(--primary-light);

    top: -140px;

    right: -120px;

    opacity: .7;

    transition: var(--transition);

}

.wc-trust-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow: var(--shadow-lg);

}

.wc-trust-card:hover::before {

    transform: scale(1.3);

}

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

.wc-trust-card i {

    width: 90px;

    height: 90px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 34px;

    margin-bottom: 30px;

    transition: var(--transition);

    position: relative;

    z-index: 2;

}

.wc-trust-card:hover i {

    background: var(--primary);

    color: var(--white);

    transform: rotateY(180deg);

}

/*=========================================
                CONTENT
=========================================*/

.wc-trust-card h4 {

    font-size: 28px;

    color: var(--heading);

    margin-bottom: 18px;

    position: relative;

    z-index: 2;

}

.wc-trust-card p {

    color: var(--text);

    line-height: 1.8;

    margin: 0;

    position: relative;

    z-index: 2;

}

/*=========================================
            RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .wc-trust-card {

        padding: 40px 30px;

    }

}

@media(max-width:767px) {

    .wc-trust-card {

        padding: 35px 25px;

    }

    .wc-trust-card i {

        width: 75px;

        height: 75px;

        font-size: 28px;

        margin-bottom: 25px;

    }

    .wc-trust-card h4 {

        font-size: 24px;

    }

}

/*=================================================
                FAQ SECTION
=================================================*/

.wc-faq {
    background: rgba(237, 235, 235, 0.951);
    position: relative;
}



.wc-faq .accordion-item {

    border: none;

    border-radius: var(--radius);

    overflow: hidden;

    margin-bottom: 20px;

    background: var(--white);

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

}

.wc-faq .accordion-item:hover {

    box-shadow: var(--shadow-md);

}

.wc-faq .accordion-button {

    background: var(--white);

    color: var(--heading);

    font-size: 20px;

    font-weight: 600;

    padding: 26px 30px;

    box-shadow: none;

    border: none;

    transition: var(--transition);

}

.wc-faq .accordion-button:not(.collapsed) {

    background: var(--primary);

    color: var(--white);

}

.wc-faq .accordion-button:focus {

    box-shadow: none;

    border: none;

}

/* Custom Icon */

.wc-faq .accordion-button::after {

    width: 40px;

    height: 40px;

    background-image: none;

    content: "+";

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 26px;

    font-weight: 400;

    transition: var(--transition);

}

.wc-faq .accordion-button:not(.collapsed)::after {

    content: "–";

    background: rgba(255, 255, 255, .15);

    align-items: center;

    color: var(--white);

    transform: rotate(180deg);

}

.wc-faq .accordion-body {

    padding: 28px 30px;

    color: var(--text);

    line-height: 1.9;

    background: var(--white);

    border-top: 1px solid var(--border);

}

/* Left Accent Border */

.wc-faq .accordion-item {

    position: relative;

}

.wc-faq .accordion-item::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 5px;

    height: 100%;

    background: var(--primary);

}

/*==================================
FAQ Image
==================================*/

.wc-faq-image {

    position: relative;

    border-radius: 30px;

    

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

}

.wc-faq-image img {

    width: 100%;

    height: 600px;
    object-fit: cover;
    display: block;

    border-radius: 30px;

}

.wc-faq-floating-card {

    position: absolute;

    top: 40px;

    right: 25px;

    width: 260px;

    background: rgba(255, 255, 255, .95);

    backdrop-filter: blur(18px);

    border-radius: 24px;

    padding: 24px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);

}

.wc-faq-stat {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px 0;

}

.wc-faq-stat:not(:last-child) {

    border-bottom: 1px solid #ececec;

}

.wc-faq-stat i {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 20px;

}

.wc-faq-stat h4 {

    margin: 0;

    font-size: 30px;

}

.wc-faq-stat span {

    color: var(--text);

}

.wc-faq-badge {

    position: absolute;

    left: 30%;

    bottom: 30px;

    transform: translateX(-50%);

    background: #fff;

    padding: 16px 8px;

    border-radius: 60px;

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

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 600;

}

.wc-faq-badge i {

    color: var(--primary);

}

/* =========================================================
   HELP CARD — GOLD VERSION
========================================================= */

.wc-help-card {

    position: relative;

    min-height: 390px;

    padding: 20px 30px;

    border-radius: 30px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #FAF8F2 0%,
            #E8E0C8 55%,
            #D8CBA8 100%);

    border: 1px solid rgba(176, 120, 16, .15);

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

}


/* =========================================================
   CONTENT
========================================================= */

.wc-help-content {

    position: relative;

    z-index: 3;

    max-width: 650px;

}


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

.wc-help-tag {

    display: inline-flex;

    align-items: center;

    padding: 10px 18px;

    border-radius: 50px;

    background: rgba(176, 120, 16, .08);

    border: 1px solid rgba(176, 120, 16, .18);

    color: #B07810;

    font-family: 'Montserrat', sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 24px;

}


/* =========================================================
   HEADING
========================================================= */

.wc-help-card h3 {

    margin: 0 0 22px;

    color: black;

    font-family: 'Playfair Display', serif;

    font-size: 42px;

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1px;

}


.wc-help-card h3 span {

    color: #B07810;

}


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

.wc-help-card p {

    max-width: 570px;

    margin: 0 0 32px;

    color: #59614D;

    font-family: 'Montserrat', sans-serif;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.wc-help-btn {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 15px 23px;

    border-radius: 50px;

    background: #B07810;

    color: #fff;

    font-family: 'Montserrat', sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(176, 120, 16, .22);

    transition: all .3s ease;

}


.wc-help-btn i:first-child {

    font-size: 20px;

    color: #fff;

}


.wc-help-arrow {

    font-size: 12px;

    margin-left: 5px;

    transition: transform .3s ease;

}


.wc-help-btn:hover {

    background: #344A12;

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(52, 74, 18, .20);

}


.wc-help-btn:hover .wc-help-arrow {

    transform: translateX(4px);

}


/* =========================================================
   BACKGROUND WHATSAPP ICON
========================================================= */

.wc-help-bg-icon {

    position: absolute;

    right: 45px;

    bottom: -55px;

    z-index: 1;

    color: rgba(176, 120, 16, .07);

    font-size: 280px;

    line-height: 1;

    transform: rotate(-8deg);

}


/* =========================================================
   DECORATIVE GOLD CIRCLE
========================================================= */

.wc-help-glow {

    position: absolute;

    width: 330px;

    height: 330px;

    right: -110px;

    top: -150px;

    border-radius: 50%;

    background: rgba(176, 120, 16, .10);

    z-index: 1;

}


/* =========================================================
   SECOND DECORATIVE SHAPE
========================================================= */

.wc-help-card::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    left: -90px;

    bottom: -100px;

    border-radius: 50%;

    background: rgba(176, 120, 16, .07);

}


/* =========================================================
   SMALL GOLD ACCENT
========================================================= */

.wc-help-card::after {

    content: "";

    position: absolute;

    width: 70px;

    height: 4px;

    left: 50px;

    top: 0;

    background: #B07810;

    border-radius: 0 0 10px 10px;

    z-index: 4;

}


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

@media(max-width:767px) {

    .wc-help-card {

        min-height: auto;

        padding: 38px 28px;

        border-radius: 24px;

    }


    .wc-help-tag {

        font-size: 9px;

        padding: 8px 14px;

        margin-bottom: 20px;

    }


    .wc-help-card h3 {

        font-size: 40px;

        line-height: 1.05;

        margin-bottom: 18px;

    }


    .wc-help-card p {

        font-size: 13px;

        line-height: 1.7;

        margin-bottom: 25px;

    }


    .wc-help-btn {

        padding: 14px 19px;

        font-size: 13px;

    }


    .wc-help-bg-icon {

        right: -35px;

        bottom: -30px;

        font-size: 190px;

    }


    .wc-help-card::after {

        left: 28px;

        width: 55px;

    }

}
/*=========================================
            RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .wc-faq .accordion-button {

        font-size: 18px;

        padding: 22px 24px;

    }

    .wc-faq .accordion-body {

        padding: 22px 24px;

    }

}

@media(max-width:767px) {

    .wc-faq .accordion-button {

        font-size: 17px;

        padding: 18px 20px;

    }

    .wc-faq .accordion-body {

        padding: 18px 20px;

        font-size: 15px;

    }

    .wc-faq .accordion-button::after {

        width: 34px;

        height: 34px;

        font-size: 22px;

    }

}

.wc-cta-content {
    position: relative;
    border-radius: 28px;
    padding: 40px 60px;
        background: url("../images/wc-cta.webp") center center/cover no-repeat;
}

.wc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(24, 35, 8, .90),
            rgba(24, 35, 8, .70),
            rgba(24, 35, 8, .40));
}

.wc-cta .container {
    position: relative;
    z-index: 2;
}

.wc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.wc-brand {
    display: flex;
    align-items: center;
    gap: 24px;
}

.wc-brand img {
    width: 170px;
}

.wc-divider {
    width: 1px;
    height: 90px;
    background: rgba(233, 202, 123, .45);
}

.wc-brand span {
    color: #EAC979;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: 2px;
}

.wc-rating {
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 18px;
    padding: 25px 35px;
    text-align: center;
}

.wc-rating .stars {
    color: #EAC979;
    font-size: 24px;
    letter-spacing: 5px;
}

.wc-rating h6 {
    color: #fff;
    font-size: 22px;
    margin: 10px 0 6px;
}

.wc-rating p {
    color: #ddd;
    margin: 0;
}

.wc-text {
    margin-top: 45px;
    max-width: 760px;
}

.wc-text h2 {
    color: #fff;
    font-family: 'Playfair Display';
    font-size: 72px;
    line-height: 1.08;
    font-weight: 300;
    margin-bottom: 30px;
}

.wc-text span {
    color: #EAC979;
}

.wc-line {
    width: 180px;
    height: 2px;
    background: #CFAE63;
    margin-bottom: 30px;
}

.wc-text p {
    color: #ececec;
    font-size: 22px;
    line-height: 1.8;
    max-width: 700px;
}

.wc-buttons {
    display: flex;
    gap: 22px;
    margin-top: 45px;
}

.btn-primary,
.btn-outline {
    height: 64px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 600;
    transition: .35s;
}

.btn-primary {
    background: #F3D48A;
    color: #222;
}

.btn-primary:hover {
    transform: translateY(-4px);
}

.btn-outline {
    border: 1px solid rgba(234, 201, 121, .6);
    color: #fff;
}

.btn-outline:hover {
    background: #EAC979;
    color: #222;
}

.wc-call {
    margin: 30px 0 60px;
    color: #fff;
    font-size: 18px;
}

.wc-call strong {
    color: #F3D48A;
}

.wc-features {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .15);
    backdrop-filter: blur(10px);
}

.feature {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 35px 22px;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.feature:last-child {
    border-right: none;
}

.feature i {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #D5B46E;
    color: #D5B46E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.feature h5 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 5px;
}

.feature span {
    color: #ddd;
    font-size: 15px;
}

@media(max-width:991px) {

    .wc-cta {
        padding: 40px 10px;
    }

    .wc-cta-content{
        padding: 20px;
        align-items: center;
        justify-content: center;
    }

    .wc-top {
        flex-direction: column;
        gap: 30px;
    }

    .wc-brand {
        flex-direction: column;
        align-items: flex-start;
    }

    .wc-divider {
        display: none;
    }

    .wc-text h2 {
        font-size: 46px;
    }

    .wc-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-outline {
        width: 100%;
        justify-content: center;
    }

    .wc-features {
        grid-template-columns: 1fr;
    }

    .feature {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
}

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

.wc-footer {

    background: var(--heading);

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

    padding: 110px 0 30px;

    position: relative;

    overflow: hidden;

}

/* Decorative Background */

.wc-footer::before {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .03);

    top: -180px;

    right: -120px;

}

.wc-footer::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .02);

    bottom: -120px;

    left: -80px;

}

.wc-footer .container {

    position: relative;

    z-index: 2;

}



/*=========================================
                LOGO
=========================================*/

.wc-footer img {

    max-width: 220px;


}

.wc-footer p {

    line-height: 1.9;

    margin-bottom: 30px;
    color: rgb(225, 222, 222);
    

}

.footer-desc{
max-width: 280px;
}

.wc-social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.wc-social-icons a {
    width: 40px;
    height: 40px;

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

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    color: #ffffff;
    font-size: 16px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.wc-social-icons a:hover {
    background: #ffffff;
    color: #6B8E23;
    border-color: #ffffff;

    transform: translateY(-3px);
}

/*=========================================
                HEADINGS
=========================================*/

.wc-footer h5 {

    color: var(--white);

    font-size: 22px;

    margin-bottom: 25px;

    position: relative;

    padding-bottom: 12px;

}

.wc-footer h5::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 50px;

    height: 3px;

    background: var(--primary);

    border-radius: 10px;

}

/*=========================================
                LISTS
=========================================*/

.wc-footer ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.wc-footer ul li {

    margin-bottom: 14px;

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

}

.wc-footer ul li:last-child {

    margin-bottom: 0;

}

.wc-footer ul li a {

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

    text-decoration: none;

    transition: var(--transition);

}

.wc-footer ul li a:hover {

    color: var(--primary);

}

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

.wc-social {

    display: flex;

    gap: 14px;

}

.wc-social a {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .08);

    color: var(--white);

    text-decoration: none;

    transition: var(--transition);

}

.wc-social a:hover {

    background: var(--primary);

    transform: translateY(-5px);

}

/*=========================================
                DIVIDER
=========================================*/

.wc-footer hr {

    border: none;

    height: 1px;

    background: rgba(255, 255, 255, .08);

    margin: 5px 0 30px;

}

/*=========================================
            FOOTER BOTTOM
=========================================*/

.wc-footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

}

.wc-footer-bottom p {

    margin: 0;

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

}

.wc-footer-bottom div {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;

}

.wc-footer-bottom a {

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

    text-decoration: none;

    transition: var(--transition);

}

.wc-footer-bottom a:hover {

    color: var(--primary);

}
.wc-final-buttons{
display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.wc-btn-footer1{
    display: inline-flex;
    
        align-items: center;
    
        justify-content: center;
    
        padding: 15px 25px;
    
        border-radius: 100px;
    
        transition: var(--transition);
    
        font-family: 'Montserrat';
    
        font-weight: 600;

        background-color: var(--primary-dark);
        color: white;
        font-size: 14px;
}
.wc-footer .col-lg-4 {
    text-align: left;
}

/*=========================================
            RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .wc-footer {

        padding: 70px 0 25px;

    }
        .wc-footer .col-lg-4 {
            text-align: center;
        }

    .wc-footer h5 {

        margin-top: 10px;

    }
  
}

@media(max-width:767px) {

    .wc-footer {

        text-align: center;

        padding: 60px 0 25px;

    }

        .wc-footer-brand {
    
            display: flex;
    
            flex-direction: column;
    
            align-items: center;
    
            text-align: center;
    
        }

    .wc-footer h5::after {

        left: 50%;

        transform: translateX(-50%);

    }

    .wc-social {

        justify-content: center;

    }

    .wc-footer-bottom {

        flex-direction: column;

        text-align: center;

    }

    .wc-footer-bottom div {

        justify-content: center;

        gap: 18px;

    }

}

/* =========================================================
   MOBILE WHATSAPP CTA
========================================================= */
/* =========================================
   MOBILE WHATSAPP CTA
========================================= */

/* =========================================
   MOBILE WHATSAPP FLOATING BUTTON
========================================= */

.wc-mobile-whatsapp {

    display: none;

}


@media (max-width: 767px) {

    .wc-mobile-whatsapp {

        position: fixed;

        right: 18px;
        bottom: 36px;

        z-index: 9999;

        width: 48px;
        height: 48px;

        display: flex;

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

        background: #6B8E23;

        color: #fff;

        border-radius: 50%;

        text-decoration: none;

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

        border: 2px solid rgba(255, 255, 255, .9);

        transition:
            transform .3s ease,
            box-shadow .3s ease;

    }


    .wc-mobile-whatsapp i {

        font-size: 22px;

        line-height: 1;

    }


    .wc-mobile-whatsapp:hover {

        color: #fff;

        transform: translateY(-3px);

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

    }


    .wc-mobile-whatsapp:active {

        transform: scale(.94);

    }

}

/* =========================================================
   POPULAR SEARCHES
========================================================= */

.wc-popular-searches {

    margin-top: 55px;

    padding: 5px 0 24px;

    border-top: 1px solid rgba(255, 255, 255, .08);

}


.wc-popular-searches-inner {

    display: flex;

    align-items: flex-start;

    gap: 25px;

}


/* Label */

.wc-popular-label {

    flex-shrink: 0;

    padding-top: 2px;

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

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 500;

    line-height: 1.7;

}


/* Search links wrapper */

.wc-search-tags {

    display: flex;

    flex-wrap: wrap;

    column-gap: 18px;

    row-gap: 5px;

}


/* Search links */

.wc-search-tags a {

    position: relative;

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

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 400;

    line-height: 1.8;

    text-decoration: none;

    transition: color .25s ease;

}


/* Small separator */

.wc-search-tags a:not(:last-child)::after {

    content: "•";

    position: absolute;

    right: -12px;

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

}


/* Hover */

.wc-search-tags a:hover {

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

}

@media(max-width:767px) {

    .wc-popular-searches {

        margin-top: 40px;

        padding: 20px 0 22px;

        text-align: center;

    }


    .wc-popular-searches-inner {

        display: block;

    }


    .wc-popular-label {

        display: block;

        margin-bottom: 8px;

    }


    .wc-search-tags {

        justify-content: center;

        column-gap: 14px;

        row-gap: 4px;

    }


    .wc-search-tags a {

        font-size: 9px;

    }


    .wc-search-tags a:not(:last-child)::after {

        right: -9px;

    }

}


/*======================
Legal CSS
===================*/
/* =========================================================
   PRIVACY / LEGAL CONTENT
========================================================= */

.wc-legal-content {

    max-width: 950px;

    margin: 0 auto;

    padding: 0 0 100px;

}


/* =========================================================
   LEGAL ITEM
========================================================= */

.wc-legal-item {

    margin-bottom: 10px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(107, 142, 35, .15);

}


/* Remove border from last section */

.wc-legal-item:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;

}


/* =========================================================
   HEADINGS
========================================================= */

.wc-legal-item h2 {

    margin: 0 0 18px;

    font-family: 'Playfair Display', serif;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.3;

    color: var(--heading);

    position: relative;

}


/* =========================================================
   PARAGRAPHS
========================================================= */

.wc-legal-item p {

    margin: 0 0 10px;

    max-width: 850px;

    font-family: 'Montserrat', sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.9;

    color: var(--text);

}


.wc-legal-item p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   LISTS
========================================================= */

.wc-legal-item ul {

    margin: 18px 0 0;

    padding: 0 0 10px 0;

    list-style: none !important;

    display: grid;

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

    gap: 10px 30px;

}


.wc-legal-item ul li {

    position: relative;

    padding: 12px 16px 12px 38px;

    background: rgba(107, 142, 35, .045);

    border: 1px solid rgba(107, 142, 35, .10);

    border-radius: 10px;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    color: var(--text);

    list-style: none !important;
}


/* Check icon */

.wc-legal-item ul li::before {

    content: "✓";

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    width: 17px;

    height: 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    font-size: 10px;

    font-weight: 700;

}


/* =========================================================
   STRONG TEXT
========================================================= */

.wc-legal-item strong {

    color: var(--heading);

    font-weight: 600;

}


/* =========================================================
   LINKS
========================================================= */

.wc-legal-item a {

    color: var(--primary);

    font-weight: 600;

    text-decoration: none;

    transition: .3s ease;

}


.wc-legal-item a:hover {

    color: var(--primary-dark);

    text-decoration: underline;

}


/* =========================================================
   CONTACT SECTION
========================================================= */

.wc-legal-item:last-child {

    background: rgba(107, 142, 35, .045);

    border: 1px solid rgba(107, 142, 35, .12);

    border-radius: 20px;

    padding: 5px 0;

}


.wc-legal-item:last-child h2 {

    margin-bottom: 25px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .wc-legal-content {

        padding: 60px 30px 80px;

    }

    .wc-legal-item h2 {

        font-size: 26px;

    }

}


@media (max-width: 767px) {

    .wc-legal-content {

        padding: 45px 20px 65px;

    }


    .wc-legal-item {

        margin-bottom: 38px;

        padding-bottom: 30px;

    }


    .wc-legal-item h2 {

        font-size: 23px;

        line-height: 1.4;

    }


    .wc-legal-item p {

        font-size: 13px;

        line-height: 1.8;

    }


    .wc-legal-item ul {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .wc-legal-item ul li {

        font-size: 12px;

        padding: 11px 14px 11px 36px;

    }


    .wc-legal-item:last-child {

        padding: 25px 20px;

        border-radius: 16px;

    }

}

/* =====================================================
   WEAR CLEAN
   PRICING SECTION
===================================================== */

.wc-pricing-section {

    position: relative;

    padding: 60px 0 65px;

    background: #ffffff;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND WORD
===================================================== */

.wc-pricing-bg-word {

    position: absolute;

    top: 5px;
    left: 50%;

    transform: translateX(-50%);

    font-family: 'Montserrat', sans-serif;

    font-size: 150px;

    font-weight: 800;

    letter-spacing: 18px;

    color: rgba(107, 142, 35, 0.025);

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.wc-pricing-container {

    position: relative;

    width: 90%;

    max-width: 1280px;

    margin: 0 auto;

    z-index: 2;
}


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

.wc-pricing-header {

    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;
}


/* =====================================================
   EYEBROW
===================================================== */

.wc-pricing-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 10px 20px;

    margin-bottom: 20px;

    background: var(--primary-light);

    border: 1px solid rgba(171, 169, 169, 0.91);

    border-radius: 50px;

    color: var(--primary);

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.wc-pricing-eyebrow span {

    color: var(--gold);

    font-size: 8px;
}


/* =====================================================
   MAIN HEADING
===================================================== */

.wc-pricing-title {

    margin: 0;

    color: var(--heading);

    font-family: 'Playfair Display', serif;

    font-size: 60px;

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1.5px;
    padding: 20px 0;
}


.wc-pricing-title span {

    color: var(--primary-dark);

}


/* =====================================================
   HEADING DECORATIVE LINE
===================================================== */

.wc-pricing-heading-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 20px auto 18px;
}


.wc-pricing-heading-line span {

    width: 120px;

    height: 1px;

    background: var(--gold-light);
}


.wc-pricing-heading-line i {

    color: var(--gold);

    font-size: 11px;
}


.wc-pricing-subtitle {

    max-width: 650px;

    margin: 0 70px;

    color: var(--text);

    font-family: 'Lato', sans-serif;

    font-size: 17px;

    line-height: 1.7;
}


/* =====================================================
   PRICING GRID
===================================================== */

.wc-pricing-grid {

    display: grid;

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

    gap: 16px;

    align-items: stretch;
}


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

.wc-pricing-card {

    position: relative;

    min-height: 380px;

    padding: 38px 26px 27px;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 14px;

    box-shadow:
        0 10px 30px rgba(45, 50, 39, .045);

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}


/* Top line */

.wc-pricing-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 3px;

    background: var(--gold);

    transform: scaleX(.35);

    transform-origin: left;

    transition: transform var(--transition);
}


.wc-pricing-card:hover {

    transform: translateY(-7px);

    border-color: rgba(107, 142, 35, .25);

    box-shadow: var(--shadow-md);
}


.wc-pricing-card:hover::before {

    transform: scaleX(1);

}


/* =====================================================
   FEATURED CARD
===================================================== */

.wc-pricing-card-featured {

    background: var(--primary-light);

    border-color: rgba(107, 142, 35, .25);

    box-shadow:
        0 15px 40px rgba(107, 142, 35, .10);
}


.wc-pricing-card-featured::before {

    background: var(--primary);

    transform: scaleX(1);
}


/* =====================================================
   CARD NUMBER
===================================================== */

.wc-pricing-number {

    position: absolute;

    top: 22px;

    right: 20px;

    font-family: 'Playfair Display', serif;

    font-size: 52px;

    font-weight: 500;

    line-height: 1;

    color: var(--gold-light);

    opacity: .75;

    pointer-events: none;
}


/* =====================================================
   CARD ICON
===================================================== */

.wc-pricing-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .75);

    border: 1px solid rgba(176, 120, 16, .18);

    color: var(--primary);

    font-size: 20px;

    box-shadow:
        0 8px 20px rgba(45, 50, 39, .04);
}


.wc-pricing-card-featured .wc-pricing-icon {

    background: rgba(255, 255, 255, .65);

}


/* =====================================================
   CATEGORY
===================================================== */

.wc-pricing-category {

    display: block;

    max-width: 250px;

    min-height: 18px;

    color: var(--primary-dark);

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.2px;

    line-height: 1.45;
}


/* =====================================================
   PRICE
===================================================== */

.wc-pricing-price {

    margin-top: 25px;
}


.wc-pricing-label {

    display: block;

    margin-bottom: 3px;

    color: var(--text);

    font-family: 'Lato', sans-serif;

    font-size: 16px;

    line-height: 1.4;
}


.wc-pricing-amount {

    color: var(--heading);

    font-family: 'Lato', serif;

    font-size: 52px;

    font-weight: 700;

    line-height: 1;
    gap: 5px;
}


.wc-pricing-amount span {

    color: var(--primary);

    font-family: 'Montserrat', sans-serif;

    font-size: 27px;

    font-weight: 600;

    vertical-align: 7px;

    margin-right: 1px;
}


.wc-pricing-card-featured .wc-pricing-amount {

    color: var(--primary-dark);
}


/* =====================================================
   CARD DIVIDER
===================================================== */

.wc-card-divider {

    display: flex;

    align-items: center;

    gap: 9px;

    margin: 22px 0 20px;
}


.wc-card-divider span {

    flex: 1;

    height: 1px;

    background: var(--gold-light);
}


.wc-card-divider i {

    color: var(--gold);

    font-size: 8px;
}


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

.wc-pricing-description {

    margin: 0;

    color: var(--text);

    font-family: 'Lato', sans-serif;

    font-size: 14px;

    line-height: 1.65;
    letter-spacing: .3px;
}


/* =====================================================
   FIRST ORDER OFFER
===================================================== */

.wc-pricing-offer {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    max-width: 100%;

    margin: 28px auto 38px;

    padding: 9px 30px 9px 9px;

    background: #faf7ed;

    border: 1px solid rgba(176, 120, 16, .30);

    border-radius: 60px;

    box-shadow:
        0 8px 25px rgba(176, 120, 16, .06);

    overflow: hidden;
}


/* =====================================================
   OFFER BADGE
===================================================== */

.wc-offer-badge {

    width: 65px;

    height: 65px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--gold);

    color: #ffffff;

    border: 3px solid #ffffff;

    box-shadow:
        0 0 0 1px var(--gold);

    font-family: 'Playfair Display', serif;
}


.wc-offer-badge strong {

    font-size: 23px;

    line-height: .9;
}


.wc-offer-badge span {

    font-family: 'Montserrat', sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =====================================================
   OFFER CONTENT
===================================================== */

.wc-offer-content {

    padding-left: 16px;
}


.wc-offer-title {

    display: block;

    margin-bottom: 4px;

    color: var(--gold);

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.wc-offer-content p {

    margin: 0;

    color: var(--text);

    font-family: 'Lato', sans-serif;

    font-size: 11px;
}


/* =====================================================
   OFFER DECORATION
===================================================== */

.wc-offer-decoration {

    margin-left: 25px;

    color: var(--gold);

    font-size: 28px;

    opacity: .7;

    transform: rotate(-20deg);
}


/* =====================================================
   PRICE ENQUIRY CTA
===================================================== */

.wc-pricing-cta {

    display: grid;

    grid-template-columns: 1fr auto 1.15fr;

    align-items: center;

    gap: 45px;

    padding: 40px 60px;

    background:
        linear-gradient(135deg,
            var(--primary-dark),
            #354c0c);

    border: 1px solid rgba(176, 120, 16, .30);

    border-radius: 25px;

    box-shadow:
        0 20px 50px rgba(45, 50, 39, .15);

    position: relative;

    overflow: hidden;
}


/* Inner border */

.wc-pricing-cta::before {

    content: "";

    position: absolute;

    inset: 7px;

    border: 1px solid rgba(232, 224, 200, .22);

    border-radius: 20px;

    pointer-events: none;
}


/* =====================================================
   CTA LEFT
===================================================== */

.wc-pricing-cta-left {

    position: relative;

    z-index: 2;
}


.wc-pricing-cta-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--gold-light);

    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.wc-pricing-cta-eyebrow::after {

    content: "";

    display: block;

    width: 30px;

    height: 1px;

    margin-top: 7px;

    background: var(--gold);
}


.wc-pricing-cta-left h3 {

    margin: 0 0 12px;

    color: #ffffff;

    font-family: 'Playfair Display', serif;

    font-size: 32px;

    font-weight: 500;

    line-height: 1.15;
}


.wc-pricing-cta-left p {

    max-width: 470px;

    margin: 0;

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

    font-family: 'Lato', sans-serif;

    font-size: 12px;

    line-height: 1.6;
}


/* =====================================================
   CTA DIVIDER
===================================================== */

.wc-pricing-cta-divider {

    width: 1px;

    height: 115px;

    background: rgba(232, 224, 200, .20);
}


/* =====================================================
   CTA RIGHT
===================================================== */

.wc-pricing-cta-right {

    position: relative;

    z-index: 2;
}


/* =====================================================
   WHATSAPP BUTTON
===================================================== */

.wc-pricing-whatsapp {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    width: 100%;

    box-sizing: border-box;

    padding: 14px 20px;

    background: #ffffff;

    border-radius: 50px;

    color: var(--primary-dark);

    text-decoration: none;

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;

    font-weight: 700;

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

    transition: var(--transition);
}


.wc-pricing-whatsapp:hover {

    transform: translateY(-3px);

    background: var(--gold-light);

    color: var(--primary-dark);
}


.wc-pricing-whatsapp i:first-child {

    font-size: 19px;

    color: #25D366;
}


.wc-pricing-whatsapp i:last-child {

    font-size: 13px;

    color: var(--primary);
}


/* =====================================================
   BENEFITS
===================================================== */

.wc-pricing-benefits {

    display: grid;

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

    gap: 18px;

    margin-top: 25px;
    justify-content: center;
}


.wc-pricing-benefit {

    display: flex;

    align-items: center;

    gap: 9px;
}


.wc-pricing-benefit>i {

    color: var(--gold-light);

    font-size: 20px;

    margin-top: 2px;

}


.wc-pricing-benefit span {

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

    font-family: 'Lato', sans-serif;

    font-size: 14px;

    line-height: 1.45;
}


/* =====================================================
   BOTTOM TAGLINE
===================================================== */

.wc-pricing-tagline {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 30px;

    color: var(--primary);

    font-family: 'Playfair Display', serif;

    font-size: 14px;

    font-style: italic;

    text-align: center;
}


.wc-pricing-tagline span {

    color: var(--gold);

    font-size: 20px;
}

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

@media (max-width: 1050px) {

    .wc-pricing-title {
        font-size: 30px;
        letter-spacing: 0.6px;
    }

    .wc-pricing-subtitle{
        font-size: 16px;
        margin: 0;
    }

    .wc-pricing-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 18px;
    }


    .wc-pricing-card {
        min-height: 350px;
    }


    .wc-pricing-cta {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 15px 20px; 

        align-items: center;
    }

    .wc-pricing-cta-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .wc-pricing-cta-left p {
        width: 280px;
    }


    .wc-pricing-cta-divider {
        display: none;
    }


    .wc-pricing-cta-right {
        display: flex;
        align-items: center;
        flex-direction: column;    
        width: 100%;
    }

    .wc-pricing-whatsapp {
        width: 280px;
    }

}

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

/* =====================================================
   PRICING - MOBILE
===================================================== */

@media (max-width: 600px) {

    /* =========================================
       PRICING CARD
    ========================================= */

    .wc-pricing-card {

        min-height: 0;

        padding: 25px 22px 30px;

        text-align: center;

        border-radius: 18px;

        display: block;

        box-sizing: border-box;
    }


    /* =========================================
       TOP ROW
       ICON LEFT / NUMBER RIGHT
    ========================================= */

    .wc-pricing-card>.wc-pricing-icon {

        position: absolute;

        top: 24px;
        left: 22px;

        width: 58px;
        height: 58px;

        margin: 0;

        display: flex;

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

        border-radius: 50%;

        font-size: 20px;

        background: rgba(255, 255, 255, .85);

        border: 1px solid rgba(176, 120, 16, .18);

        box-shadow:
            0 8px 22px rgba(45, 50, 39, .05);

        z-index: 3;
    }

    .wc-pricing-eyebrow {
        display: inline-flex;
        
            align-items: center;
            justify-content: center;
        
            padding: 10px 16px;
        
            margin-bottom: 12px;
        
            border-radius: 50px;
        
            font-family: 'Montserrat', sans-serif;
        
            font-size: 11px;
        
            font-weight: 700;
        
            letter-spacing: .8px;
        
            line-height: 1.2;
        
            white-space: nowrap;
    }


    /* =========================================
       NUMBER - RIGHT
    ========================================= */

    .wc-pricing-number {

        position: absolute;

        top: 22px;
        right: 22px;

        width: auto;

        margin: 0;

        font-family: 'Playfair Display', serif;

        font-size: 48px;

        font-weight: 500;

        line-height: 1;

        color: var(--gold-light);

        opacity: .9;

        text-align: right;

        z-index: 2;
    }


    /* =========================================
       CARD CONTENT
    ========================================= */

    .wc-pricing-card-content {

        width: 100%;

        padding-top: 105px;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    /* =========================================
       CATEGORY
    ========================================= */

    .wc-pricing-category {

        width: 100%;

        max-width: 290px;

        min-height: auto;

        margin: 0 auto;

        text-align: center;

        font-size: 11px;

        line-height: 1.5;

        letter-spacing: 1.3px;
    }


    /* =========================================
       PRICE AREA
    ========================================= */

    .wc-pricing-price {

        width: 100%;

        margin-top: 22px;

        text-align: center;
    }


    .wc-pricing-label {

        display: block;

        margin-bottom: 6px;

        font-size: 13px;

        text-align: center;
    }


    .wc-pricing-amount {

        font-family: 'Lato', sans-serif;

        font-size: 48px;

        font-weight: 700;

        line-height: 1;

        letter-spacing: -1.5px;

        text-align: center;
    }


    .wc-pricing-amount span {

        font-family: 'Montserrat', sans-serif;

        font-size: 29px;

        font-weight: 600;

        vertical-align: 8px;

        margin-right: 2px;
    }


    /* =========================================
       DIVIDER
    ========================================= */

    .wc-card-divider {

        width: 100%;

        max-width: 260px;

        margin: 24px auto 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;
    }


    .wc-card-divider span {

        flex: 1;

        height: 1px;

        background: var(--gold-light);
    }


    .wc-card-divider i {

        flex-shrink: 0;

        color: var(--gold);

        font-size: 9px;
    }


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

    .wc-pricing-description {

        width: 100%;

        max-width: 315px;

        margin: 0 auto;

        text-align: center;

        font-size: 12px;

        line-height: 1.65;

        color: var(--text);
    }


    /* =========================================
       FEATURED CARD
    ========================================= */

    .wc-pricing-card-featured {

        background: var(--primary-light);
    }

    .wc-pricing-offer {

        margin: 20px auto 30px;

        padding: 8px 22px 8px 8px;

    }

    .wc-offer-title {
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 2px;
        letter-spacing: 0.6px;
    }

        .wc-pricing-benefits {
            gap: 6px;
            margin-left: 5px;
        }
    .wc-pricing-benefit {
        gap: 6px;
    }

    .wc-pricing-benefit>i {
        font-size: 12px;
    }

    .wc-pricing-benefit span {
        font-size: 9px;
    }

        .wc-pricing-cta-eyebrow::after{
           display: none;
            
        }

}


/*============================
ABOUT HERO
============================*/

.about-hero {

    padding: 120px 0;
    background: var(--ivory);

}

.about-grid {

    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;

}

.section-tag {

    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;

}

.about-content h1 {

    font-size: 64px;
    line-height: 1.1;
    color: var(--heading);
    margin-bottom: 28px;

}

.lead {

    font-size: 18px;
    line-height: 1.9;
    color: var(--text);
    max-width: 650px;

}

.signature {

    margin: 40px 0 55px;
    font-size: 34px;
    color: var(--primary);
    font-family: cursive;

}

.about-features {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;

}

.feature {

    text-align: center;

}

.feature .icon {

    width: 82px;
    height: 82px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;

}

.feature .icon i {

    font-size: 28px;
    color: var(--primary);

}

.feature h4 {

    margin-bottom: 10px;
    color: var(--heading);

}

.feature p {

    font-size: 14px;
    color: var(--text);
    line-height: 1.7;

}

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

.about-image {

    position: relative;

}

.about-image img {

    width: 100%;
    border-radius: var(--radius-lg);
    display: block;
    box-shadow: var(--shadow-lg);

}

.floating-card {

    position: absolute;
    left: -40px;
    bottom: 40px;
    width: 250px;
    background: var(--primary);
    color: #fff;
    padding: 28px;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);

}

.floating-card span {

    display: block;
    opacity: .8;
    margin-bottom: 10px;

}

.floating-card h4 {

    font-size: 28px;
    line-height: 1.3;
    color: #fff;

}

/*============================
STORY
============================*/

.our-story {

    padding: 120px 0;
    background: #fff;

}

.story-grid {

    display: grid;
    grid-template-columns: .9fr 1fr 320px;
    gap: 60px;
    align-items: center;

}

.story-image img {

    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);

}

.story-content h2 {

    font-size: 48px;
    margin: 20px 0 30px;
    color: var(--heading);

}

.story-content p {

    color: var(--text);
    line-height: 1.9;
    margin-bottom: 20px;

}

/*============================
STATS
============================*/

.story-stats {

    display: flex;
    flex-direction: column;
    gap: 20px;

}

.stat {

    background: var(--ivory);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;

}

.stat-icon {

    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.stat-icon i {

    font-size: 28px;
    color: var(--primary);

}

.stat h3 {

    font-size: 34px;
    color: var(--heading);

}

.stat p {

    margin-top: 5px;
    color: var(--text);

}

/*============================
RESPONSIVE
============================*/

@media(max-width:992px) {

    .about-grid,
    .story-grid {

        grid-template-columns: 1fr;

    }

    .about-features {

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

    }

    .about-content h1 {

        font-size: 46px;

    }

    .story-content h2 {

        font-size: 38px;

    }

    .floating-card {

        position: relative;
        left: 0;
        bottom: 0;
        margin-top: -60px;
        margin-left: 20px;

    }

}

@media(max-width:576px) {

    .about-features {

        grid-template-columns: 1fr;

    }

    .about-content h1 {

        font-size: 36px;

    }

    .signature {

        font-size: 26px;

    }

}


/*==============================
PAGE BANNER
==============================*/

.wc-page-banner {
    position: relative;
    padding: 120px 0 70px;
    background: #F8F7F2;
    overflow: hidden;
}

.wc-page-banner::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    background: rgba(111, 143, 44, .08);
    border-radius: 50%;
}

.wc-page-banner::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 220px;
    height: 220px;
    background: rgba(111, 143, 44, .05);
    border-radius: 50%;
}

.wc-page-banner-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.wc-page-banner h1 {
    font-size: 54px;
    margin: 15px 0;
    color: #1f1f1f;
}

.wc-page-banner p {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
}

/*==============================
PAGE BANNER
==============================*/

.wc-page-banner {

    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background: var(--primary);

    text-align: center;

}

/* Decorative circles */

.wc-page-banner::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -120px;
    left: -120px;

    border-radius: 50%;

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

}

.wc-page-banner::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    bottom: -100px;
    right: -100px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

}

.wc-page-banner-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: auto;

}

.wc-page-banner h1 {

    color: #fff;

    font-size: 56px;

    font-weight: 700;

    margin: 20px 0;

}

.wc-page-banner p {

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

    font-size: 18px;

    line-height: 1.8;

    max-width: 620px;

    margin: auto;

}

/*==============================
Breadcrumb
==============================*/

.wc-breadcrumb {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    padding: 50px 0 0;

    margin: 0;

    list-style: none;

}

.wc-breadcrumb li {

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

    font-size: 15px;

}

.wc-breadcrumb li:not(:last-child)::after {

    content: "/";

    margin-left: 10px;

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

}

.wc-breadcrumb a {

    color: #fff;

    text-decoration: none;

    transition: .3s;

}

.wc-breadcrumb a:hover {

    color: #F3E8A5;

}

.wc-breadcrumb li:last-child {

    color: #F3E8A5;

}

/*==============================
Stats Section
==============================*/

.wc-stats {
    position: relative;
    overflow: hidden;
}

/*==============================
Stat Card
==============================*/

.wc-stat-card {

    position: relative;

    height: 100%;

    padding: 40px 32px;

    background: #fff;

    border: 1px solid rgba(106, 143, 44, .12);

    border-radius: 24px;

    text-align: center;

    transition: all .35s ease;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .06);

    overflow: hidden;

}

/* Decorative Circle */

.wc-stat-card::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -110px;
    right: -110px;

    border-radius: 50%;

    background: rgba(106, 143, 44, .05);

    transition: .4s;

}

/* Hover */

.wc-stat-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 30px 60px rgba(0, 0, 0, .10);

    border-color: rgba(106, 143, 44, .25);

}

.wc-stat-card:hover::before {

    transform: scale(1.2);

}

/*==============================
Icon
==============================*/

.wc-stat-icon {

    width: 72px;

    height: 72px;

    margin: 0 auto 28px;

    border-radius: 50%;

    background: #eef6e6;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 30px;

    transition: .35s;

}

.wc-stat-card:hover .wc-stat-icon {

    background: var(--primary);

    color: #fff;

    transform: rotate(8deg) scale(1.08);

}

/*==============================
Counter
==============================*/

.wc-stat-number {

    font-size: 28px;

    font-weight: 600;

    color: var(--heading);

    line-height: 1.5;

    margin-bottom: 12px;

    transition: .3s;
    

}

.wc-stat-card:hover .wc-stat-number {

    color: var(--primary);

}

/*==============================
Heading
==============================*/

.wc-stat-card h3 {

    font-size: 22px;

    color: var(--heading);
    font-weight: bold;

    margin-bottom: 10px;

    line-height: 1.3;

    font-family: 'Playfair Display';

}

/*==============================
Subtitle
==============================*/

.wc-stat-subtitle {

    display: inline-block;

    margin-bottom: 10px;

    padding: 6px 10px;

    background: #f5f8ef;

    color: var(--primary);

    border-radius: 30px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;

}

/*==============================
Paragraph
==============================*/

.wc-stat-card p {

    font-size: 14px;

    color: var(--text);
    font-weight: 600;

    line-height: 1.8;

    margin-bottom: 25px;
    letter-spacing: 0.6px;

}

/*==============================
Divider
==============================*/

.wc-stat-divider {

    width: 70px;

    height: 2px;

    margin: auto;

    margin-bottom: 10px;

    background: rgba(106, 143, 44, .18);

}

/*==============================
Footer
==============================*/

.wc-stat-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--gold);

    font-size: 14px;

    font-weight: 600;

}

.wc-stat-footer i {

    font-size: 16px;

}

/*==============================
Responsive
==============================*/

@media(max-width:991px) {

    .wc-stat-card {

        padding: 10px;

    }

    .wc-stat-number {

        font-size: 18px;

    }

    .wc-stat-card h3 {
        margin: 0;

        font-size: 14px;

    }

    .wc-breadcrumb a{
        font-size: 14px;
        
    }

    ol.wc-breadcrumb{
        margin-bottom: 10px;
    }

    

}

@media(max-width:767px) {

    .wc-stat-card {

        padding: 10px;

    }

    .wc-stat-number {

        font-size: 24px;

    }

    .wc-stat-icon {

        width: 48px;

        height: 48px;

        font-size: 24px;

    }

    .wc-stat-card p{
        margin: 0;
        padding: 8px 0;
        line-height: 20px;
        font-size: 12px;
    }
     
    .wc-stat-subtitle{
        margin: 0;
        font-size: 11px;
        font-weight: 600;
    }
    .wc-stat-footer{
        display: none;
    }

    .wc-page-banner{
        padding: 80px 0 30px;
    }

    .wc-page-banner-content h1{
        font-size: 30px;
    }

    .wc-page-banner-content p{
        font-size: 14px;
    }

}

/*=============================
    SERVICES HEADER
==============================*/

.wc-services-header {

    padding: 90px 0 60px;

    background: #F8F7F2;

}

.wc-breadcrumb {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 35px;

    font-size: 15px;

}

.wc-breadcrumb a {

    color: white;

    text-decoration: none;

    transition: .3s;

}

.wc-breadcrumb a:hover {

    color: #42500F;

}

.wc-breadcrumb span {

    color: #888;

}

.wc-breadcrumb .active {

    color: #222;

    font-weight: 600;

}

.wc-services-heading {

    max-width: 760px;

}


.wc-services-heading h1 {

    font-size: 58px;

    line-height: 1.1;

    color: #1F2A12;

    margin-bottom: 20px;

    font-weight: 300;

}

.wc-services-heading p {

    font-size: 19px;

    line-height: 1.8;

    color: #666;

}


/*=========================
SERVICE SECTION
=========================*/

.wc-service-block {

    padding: 70px 0;

}

.wc-service-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}


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

.wc-service-image {

    position: relative;

    overflow: hidden;

    border-radius: 28px;

}

.wc-service-image img {

    width: 100%;

    height: 650px;

    object-fit: cover;

    transition: .5s;

}

.wc-service-image:hover img {

    transform: scale(1.06);

}

.wc-service-badge {

    position: absolute;

    left: 30px;

    bottom: 30px;

    padding: 14px 22px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .92);

    display: flex;

    align-items: center;

    gap: 10px;

    color: #556f1d;

    font-weight: 600;

    backdrop-filter: blur(15px);

}

.wc-service-badge i {

    color: #d9b35b;

}


/*=========================
CONTENT
=========================*/

.wc-service-subtitle {

    color: #556f1d;

    letter-spacing: 3px;

    text-transform: uppercase;

    font-size: 14px;

    font-weight: 600;

}

.wc-service-content h2 {

    font-size: 52px;

    margin: 18px 0 30px;

    color: #1d2511;

    font-weight: 300;

}

.wc-service-content p {

    font-size: 18px;

    line-height: 1.9;

    color: #666;

    margin-bottom: 35px;

}


/*=========================
FEATURES
=========================*/

.wc-service-features {

    display: grid;

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

    gap: 18px;
    
    margin-bottom: 20px;

}

.service-feature {

    display: flex;

    gap: 12px;

    align-items: center;

}

.service-feature i {

    color: #6a7b1d;

}

.service-feature span {

    color: #333;

}


/*=========================
INFO BOXES
=========================*/

.wc-service-info {

    display: grid;

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

    gap: 20px;

    margin-bottom: 40px;

}

.info-box {

    padding: 25px;

    background: #faf9f3;

    border-radius: 18px;

}

.info-box h5 {

    margin-bottom: 8px;

    color: #556f1d;

}

.info-box span {

    color: #666;

}


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

.wc-btn {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 18px 36px;

    border-radius: 50px;

    background: #556f1d;

    color: #fff;

    text-decoration: none;

    transition: .35s;

}

.wc-btn:hover {

    background: #445916;

    color: #fff;

    transform: translateY(-3px);

}

.wc-btn i {

    transition: .35s;

}

.wc-btn:hover i {

    transform: translateX(5px);

}


/*=========================
REVERSE LAYOUT
=========================*/

.wc-service-block.reverse .wc-service-image {

    order: 2;
    background-color: #e5e2e2f6;

}

.wc-service-block.reverse .wc-service-content {

    order: 1;

}


/*=========================
RESPONSIVE
=========================*/

@media(max-width:991px) {

    .wc-service-block{
        padding: 40px 0;
    }

    .wc-service-row {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .wc-service-image img {

        height: 400px;

    }

    .wc-service-content h2 {

        font-size: 38px;

    }

    .wc-service-features {

        grid-template-columns: 1fr;

    }

    .wc-service-info {

        grid-template-columns: 1fr;

    }

}

/*=========================================
    CONTACT PAGE
=========================================*/

.wc-contact {
    background: #F8F7F2;
}

/*=========================================
    HEADING
=========================================*/

.wc-contact .wc-section-heading {
    max-width: 720px;
    margin: 0 auto 60px;
}

.wc-contact .wc-section-heading h1 {
    font-size: 56px;
    font-weight: 300;
    color: #24300F;
    margin: 20px 0;
}

.wc-contact .wc-section-heading p {
    color: #666;
    font-size: 18px;
    line-height: 1.8;
}

/*=========================================
    LEFT SIDE
=========================================*/

.wc-contact-info {

    background: linear-gradient(135deg, #556F1D, #3E4F15);

    border-radius: 30px;

    padding: 45px;

    color: #fff;

    height: 100%;

    position: sticky;

    top: 110px;

}

.wc-contact-card {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 35px;

}

.wc-contact-card:last-child {

    margin-bottom: 0;

}

.wc-contact-icon {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .1);

    border: 1px solid rgba(255, 255, 255, .15);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.wc-contact-icon i {

    font-size: 22px;

    color: #DDBE73;

}

.wc-contact-card h4 {

    font-size: 20px;

    margin-bottom: 10px;

    color: #fff;

}

.wc-contact-card p {

    margin: 0;

    color: #E5E5E5;

    line-height: 1.8;

}

.wc-contact-card span {

    display: block;

    margin-top: 8px;

    color: #E5E5E5;

    line-height: 1.8;

}

.wc-contact-card a {

    color: #fff;

    text-decoration: none;

    font-weight: 600;

}

.wc-contact-card a:hover {

    color: #DDBE73;

}

/*=========================================
    PICKUP NOTE
=========================================*/

.wc-contact-note {

    margin-top: 45px;

    display: flex;

    gap: 18px;

    align-items: flex-start;

    padding: 25px;

    background: rgba(255, 255, 255, .08);

    border-radius: 20px;

    border: 1px solid rgba(255, 255, 255, .12);

}

.wc-contact-note i {

    font-size: 28px;

    color: #DDBE73;

}

.wc-contact-note h5 {

    margin-bottom: 8px;

    color: #fff;

}

.wc-contact-note p {

    color: #E5E5E5;

    margin: 0;

}

/*=========================================
    FORM
=========================================*/

.wc-contact-form {

    background: #fff;

    border-radius: 30px;

    padding: 20px 50px;

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

}

.wc-form-heading {

    margin-bottom: 35px;

}

.wc-form-heading h3 {

    font-family: 'Montserrat';

    font-size: 40px;

    font-weight: 400;

    margin: 18px 0;

    color: #24300F;

}

.wc-form-heading p {

    color: #666;

    line-height: 1.8;

    font-size: 16px;

}

.wc-contact-form label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: #24300F;

}

/*=========================================
    INPUTS
=========================================*/

.wc-contact-form .form-control,
.wc-contact-form .form-select {

    height: 60px;

    border-radius: 15px;

    border: 1px solid #DDD;

    padding: 0 20px;

    font-size: 15px;

    box-shadow: none;

    transition: .3s;

}

.wc-contact-form textarea.form-control {

    height: auto;

    padding: 18px 20px;

    resize: none;

}

.wc-contact-form .form-control:focus,
.wc-contact-form .form-select:focus {

    border-color: #556F1D;

    box-shadow: 0 0 0 .15rem rgba(85, 111, 29, .15);

}

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

.wc-contact-form .wc-btn {

    width: 100%;

    height: 60px;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: #556F1D;

    color: #fff;

    border-radius: 50px;

    font-size: 16px;

    font-weight: 600;

    transition: .35s;

}

.wc-contact-form .wc-btn:hover {

    background: #445916;

    transform: translateY(-2px);

}

/*=========================================
    FOOTER FEATURES
=========================================*/

.wc-form-footer {

    margin-top: 35px;

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

}

.wc-form-footer div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #555;

    font-size: 15px;

}

.wc-form-footer i {

    color: #556F1D;

}

/*=========================================
    RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .wc-contact {

        padding: 70px 0;

    }

    .wc-contact-info {

        position: relative;

        top: 0;

        margin-bottom: 35px;

        padding: 35px;

    }

    .wc-contact-form {

        padding: 35px 25px;

    }

    .wc-contact .wc-section-heading h1 {

        font-size: 40px;

    }

    .wc-form-heading h3 {

        font-size: 30px;

    }

    .wc-form-footer {

        flex-direction: column;

        gap: 15px;

    }

}

@media(max-width:576px) {

    .wc-contact-info {

        padding: 30px 25px;

    }

    .wc-contact-card {

        gap: 15px;

    }

    .wc-contact-icon {

        width: 50px;

        height: 50px;

    }

    .wc-contact-icon i {

        font-size: 18px;

    }

    .wc-contact-form {

        padding: 30px 20px;

    }

    .wc-contact-form .form-control,
    .wc-contact-form .form-select {

        height: 55px;

    }

}

.wc-pickup-modal {

    border: 0;

    border-radius: 24px;

    overflow: hidden;

}

.wc-pickup-modal .modal-header {

    background: var(--primary);

    color: #fff;

    padding: 18px 35px;

    border: 0;

}

.wc-pickup-modal .modal-header h3 {

    margin-bottom: 6px;

    color: #fff;

}

.wc-pickup-modal .modal-header p {

    margin: 0;

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

}

.wc-pickup-modal .modal-body {

    padding: 35px;

}

.wc-pickup-modal label {

    font-weight: 600;

    margin-bottom: 8px;

    display: block;

}

.wc-pickup-modal .form-control,
.wc-pickup-modal .form-select {

    height: 54px;

    border-radius: 14px;

    border: 1px solid var(--border);

}

.wc-pickup-modal textarea.form-control {

    height: 90px;

    resize: none;

}

.wc-modal-features {

    margin-top: 25px;

    display: flex;

    justify-content: space-between;

    gap: 15px;

    flex-wrap: wrap;

    padding-top: 20px;

    border-top: 1px solid var(--border);

}

.wc-modal-features div {

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 500;

}

.wc-modal-features i {

    color: var(--primary);

}

.modal-backdrop.show {

    opacity: .75;

    backdrop-filter: blur(6px);

}
.wc-btn {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    width: 100%;

    height: 56px;

    border: none;

    border-radius: 14px;

    background: var(--primary);

    color: #fff;

    font-weight: 600;

    font-size: 16px;

}



/*==========================================================
                    HERO SECTION
==========================================================*/

.wcsa-hero {

    background:
        linear-gradient(135deg, #FAF8F2 0%, #F6F3EA 100%);

    padding: 180px 0 120px;

    overflow: hidden;

}

.wcsa-hero::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background: rgba(107, 142, 35, .06);

    top: -220px;
    right: -160px;

}

.wcsa-hero::after {

    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    border-radius: 50%;

    background: rgba(216, 203, 168, .18);

    bottom: -160px;
    left: -120px;

}

.wcsa-hero .container {

    position: relative;

    z-index: 2;

}

.wcsa-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 22px;

    background: rgba(107, 142, 35, .12);

    border: 1px solid rgba(107, 142, 35, .15);

    border-radius: 100px;

    color: var(--primary-dark);

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 30px;

}

.wcsa-tag::before {

    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--primary);

}

.wcsa-hero h1 {

    max-width: 720px;

    color: var(--heading);

    margin-bottom: 28px;

    line-height: 1.15;

}

.wcsa-hero h1 span {

    color: var(--primary);

}

.wcsa-hero p {

    max-width: 620px;

    color: var(--text);

    line-height: 1.9;

    margin-bottom: 42px;

    font-size: 18px;

}

.wcsa-hero-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

}



/*==========================================================
                HERO INFORMATION CARD
==========================================================*/

.wcsa-hero-card {

    background: rgba(255, 255, 255, .82);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .65);

    border-radius: var(--radius-lg);

    padding: 35px;

    display: grid;

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

    gap: 22px;

    box-shadow: var(--shadow-lg);

}

.wcsa-stat {

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 28px 20px;

    text-align: center;

    transition: var(--transition);

}

.wcsa-stat:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-md);

}

.wcsa-stat h3 {

    color: var(--primary);

    margin-bottom: 8px;

    font-size: 38px;

    font-weight: 700;

}

.wcsa-stat p {

    margin: 0;

    color: var(--text);

    line-height: 1.6;

    font-size: 15px;

}



/*==========================================================
                INTRODUCTION
==========================================================*/

.wcsa-intro {

    padding: 110px 0 60px;

    background: #fff;

}

.wcsa-intro .wcsa-section-heading {

    max-width: 860px;

}

.wcsa-intro .wcsa-section-heading h2 {

    margin-bottom: 25px;

}

.wcsa-intro .wcsa-section-heading p {

    font-size: 17px;

    line-height: 2;

}

/*==========================================================
                LOCATION SECTIONS
==========================================================*/

.wcsa-location-section {
    padding: 40px 0;
    background: var(--ivory);
}

.wcsa-location-card {

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    padding: 60px;

    overflow: hidden;

    position: relative;

    transition: var(--transition);

    box-shadow: var(--shadow-sm);

}

.wcsa-location-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 6px;
    height: 100%;

    background: linear-gradient(180deg,
            var(--primary),
            var(--primary-dark));

}

.wcsa-location-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}



/*==========================================================
                LOCATION INFO
==========================================================*/

.wcsa-location-info {

    padding-right: 30px;

}

.wcsa-location-tag {

    display: inline-flex;

    align-items: center;

    padding: 10px 18px;

    border-radius: 100px;

    background: var(--primary-light);

    color: var(--primary-dark);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}

.wcsa-location-info h2 {

    margin-bottom: 22px;

    color: var(--heading);

}

.wcsa-location-info p {

    color: var(--text);

    line-height: 1.9;

    margin-bottom: 35px;

}



/*==========================================================
            LOCATION BUTTON
==========================================================*/

.wcsa-location-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 16px 28px;

    border-radius: 100px;

    text-decoration: none;

    font-weight: 600;

    color: var(--white);

    background: var(--primary);

    transition: var(--transition);

}

.wcsa-location-btn:hover {

    background: var(--primary-dark);

    color: var(--white);

    transform: translateY(-4px);

}

.wcsa-location-btn:hover {

    gap: 16px;

}



/*==========================================================
            SUB HEADINGS
==========================================================*/

.wcsa-location-subtitle {

    margin-bottom: 20px;

}

.wcsa-location-subtitle h4 {

    color: var(--heading);

    margin: 0;

    position: relative;

    padding-left: 20px;

}

.wcsa-location-subtitle h4::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--primary);

}



/*==========================================================
                LOCATION GRID
==========================================================*/

.wcsa-location-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}

.wcsa-location-grid span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 100px;

    color: var(--heading);

    font-weight: 500;

    transition: var(--transition);

    cursor: default;

}

.wcsa-location-grid span:hover {

    background: var(--primary);

    color: var(--white);

    border-color: var(--primary);

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(107, 142, 35, .22);

}



/*==========================================================
            CARD HOVER EFFECTS
==========================================================*/

.wcsa-location-card:hover .wcsa-location-tag {

    background: var(--primary);

    color: #fff;

}

.wcsa-location-card:hover h2 {

    color: var(--primary);

}

.wcsa-location-card:hover::before {

    width: 10px;

}



/*==========================================================
            STAGGERED CHIP ANIMATION
==========================================================*/

.wcsa-location-grid span {

    animation: wcsaFade .45s ease both;

}

.wcsa-location-grid span:nth-child(2) {
    animation-delay: .04s;
}

.wcsa-location-grid span:nth-child(3) {
    animation-delay: .08s;
}

.wcsa-location-grid span:nth-child(4) {
    animation-delay: .12s;
}

.wcsa-location-grid span:nth-child(5) {
    animation-delay: .16s;
}

.wcsa-location-grid span:nth-child(6) {
    animation-delay: .20s;
}

.wcsa-location-grid span:nth-child(7) {
    animation-delay: .24s;
}

.wcsa-location-grid span:nth-child(8) {
    animation-delay: .28s;
}



/*==========================================================
                KEYFRAMES
==========================================================*/

@keyframes wcsaFade {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==========================================================
                SERVICE AVAILABILITY
==========================================================*/

.wcsa-availability {

    padding: 120px 0;

    background: var(--white);

}

.wcsa-availability-card {

    max-width: 950px;

    margin: auto;

    background: linear-gradient(135deg,
            var(--heading),
            #3A4232);

    border-radius: var(--radius-lg);

    padding: 80px 70px;

    text-align: center;

    color: var(--white);

    position: relative;

    overflow: hidden;

    box-shadow: var(--shadow-lg);

}

.wcsa-availability-card::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .04);

    right: -180px;

    top: -180px;

}

.wcsa-availability-card::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .03);

    left: -90px;

    bottom: -90px;

}

.wcsa-availability-card>* {

    position: relative;

    z-index: 2;

}

.wcsa-availability-card span {

    display: inline-block;

    background: rgba(255, 255, 255, .12);

    color: #fff;

    padding: 10px 20px;

    border-radius: 100px;

    margin-bottom: 20px;

    font-weight: 600;

}

.wcsa-availability-card h2 {

    color: #fff;

    margin-bottom: 25px;

}

.wcsa-availability-card p {

    max-width: 700px;

    margin: 0 auto 40px;

    line-height: 1.9;

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

}

.wcsa-availability-buttons {

    display: flex;

    justify-content: center;

    gap: 18px;

    flex-wrap: wrap;

}





/*==========================================================
                    FINAL CTA
==========================================================*/

.wcsa-cta {

    padding: 0 0 120px;

    background: var(--white);

}

.wcsa-cta-box {

    background: var(--primary-light);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    padding: 90px 70px;

    text-align: center;

    position: relative;

    overflow: hidden;

}

.wcsa-cta-box::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background: rgba(107, 142, 35, .08);

    top: -150px;

    right: -120px;

}

.wcsa-cta-box>* {

    position: relative;

    z-index: 2;

}

.wcsa-cta-box span {

    display: inline-flex;

    padding: 10px 22px;

    border-radius: 100px;

    background: #fff;

    color: var(--primary-dark);

    font-weight: 600;

    margin-bottom: 25px;

}

.wcsa-cta-box h2 {

    max-width: 760px;

    margin: 0 auto 25px;

    color: var(--heading);

}

.wcsa-cta-box p {

    max-width: 720px;

    margin: 0 auto 40px;

    color: var(--text);

    line-height: 1.9;

}

.wcsa-cta-buttons {

    display: flex;

    justify-content: center;

    gap: 18px;

    flex-wrap: wrap;

}





/*==========================================================
                RESPONSIVE
==========================================================*/

@media(max-width:991px) {

    .wcsa-hero {

        padding: 140px 0 90px;

        text-align: center;

    }

    .wcsa-hero h1,

    .wcsa-hero p {

        max-width: 100%;

    }

    .wcsa-hero-buttons {

        justify-content: center;

    }

    .wcsa-hero-card {

        margin-top: 50px;

    }

    .wcsa-location-card {

        padding: 45px;

    }

    .wcsa-location-info {

        padding-right: 0;

        margin-bottom: 40px;

        text-align: center;

    }

    .wcsa-location-grid {

        justify-content: center;

    }

    .wcsa-location-subtitle h4 {

        text-align: center;

        padding-left: 0;

    }

    .wcsa-location-subtitle h4::before {

        display: none;

    }

}



@media(max-width:767px) {

    .wcsa-hero {

        padding: 120px 0 70px;

    }

    .wcsa-hero-card {

        grid-template-columns: 1fr;

        padding: 25px;

    }

    .wcsa-stat {

        padding: 22px;

    }

    .wcsa-stat h3 {

        font-size: 30px;

    }

    .wcsa-intro {

        padding: 70px 0 30px;

    }

    .wcsa-location-section {

        padding: 25px 0;

    }

    .wcsa-location-card {

        padding: 30px;

    }

    .wcsa-location-grid {

        gap: 10px;

    }

    .wcsa-location-grid span {

        width: 100%;

        justify-content: center;

        font-size: 15px;

    }

    .wcsa-location-btn {

        width: 100%;

        justify-content: center;

    }

    .wcsa-availability {

        padding: 80px 0;

    }

    .wcsa-availability-card {

        padding: 50px 30px;

    }

    .wcsa-cta {

        padding: 0 0 80px;

    }

    .wcsa-cta-box {

        padding: 60px 30px;

    }

}

@media (max-width:767px) {

    .wcsa-location-grid {

        display: grid;

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

        gap: 12px;

    }

    .wcsa-location-grid span {

        width: 100%;

        justify-content: flex-start;

        padding: 12px 14px;

        font-size: 14px;

    }

}



@media(max-width:575px) {

    .wcsa-tag,

    .wcsa-location-tag,

    .wcsa-section-heading span {

        font-size: 13px;

    }

    .wcsa-hero p,

    .wcsa-section-heading p,

    .wcsa-location-info p,

    .wcsa-availability-card p,

    .wcsa-cta-box p {

        font-size: 15px;

        line-height: 1.8;

    }

    .wcsa-hero-buttons,

    .wcsa-availability-buttons,

    .wcsa-cta-buttons {

        flex-direction: column;

    }

    .wcsa-hero-buttons a,

    .wcsa-availability-buttons a,

    .wcsa-cta-buttons a {

        width: 100%;

    }

}

@media (max-width: 767px) {

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

}