.page-banner{

    background:#F8F5EF;

    padding:70px 0;

}

.page-banner h1{

    color:#173F35;
    font-size:48px;
    font-weight:700;

}

.page-banner p{

    color:#777;

}

.page-banner a{

    text-decoration:none;
    color:#1E5D45;
    font-weight:600;

}

/* ===========================
   SHOP PAGE HEADER FIX
=========================== */

.shop-banner{
    margin-top:220px;
}

@media (max-width: 991px) {
    .shop-banner{
        margin-top: 100px;
    }
}

@media (max-width: 767px) {
    .shop-banner{
        margin-top: 85px;
    }
}

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

.contact-section{
    background:#F8F9FA;
}


/* LEFT SIDE */

.contact-info h2{

    font-size:36px;
    font-weight:700;
    color:#173f35;
    margin-bottom:10px;

}

.contact-subtitle{

    color:#777;
    font-size:16px;
    margin-bottom:35px;

}


.contact-item{

    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:30px;

}


.contact-icon{

    width:48px;
    height:48px;

    min-width:48px;

    background:#E8F4EE;
    color:#1E5D45;

    border-radius:50%;

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

    font-size:21px;

}


.contact-item h5{

    margin:0 0 7px;

    color:#173f35;
    font-weight:600;

}


.contact-item p{

    margin:0;
    color:#666;
    line-height:1.7;

}


/* WORKING HOURS */

.working-hours{

    background:#f0eeea;

    border:1px solid #173f35;

    border-radius:15px;

    padding:25px;

    margin-top:35px;

}


.working-hours h5{

    color:#173f35;
    font-weight:700;
    margin-bottom:15px;

}


.working-hours p{

    color:#555;
    margin-bottom:8px;
    line-height:1.7;

}


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

.contact-form-card{

    background:#fff;

    padding:35px;

    border-radius:18px;

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

}


.contact-form-card h3{

    color:#173f35;

    font-size:28px;

    font-weight:700;

    margin-bottom:25px;

}


.contact-form-card label{

    display:block;

    font-weight:600;

    color:#333;

    margin-bottom:8px;

}


.contact-form-card .form-control{

    border:1px solid #D9E0DD;

    border-radius:12px;

    padding:13px 16px;

    font-size:15px;

    transition:.3s;

}


.contact-form-card .form-control:focus{

    border-color:#1E5D45;

    box-shadow:0 0 0 3px rgba(30,93,69,.10);

}


.contact-form-card textarea{

    resize:none;

}


.contact-submit{

    width:100%;

    border:none;

    background:#1E5D45;

    color:#fff;

    padding:14px 25px;

    border-radius:12px;

    font-weight:600;

    font-size:16px;

    transition:.3s;

}


.contact-submit:hover{

    background:#D4A017;

    color:#fff;

    transform:translateY(-2px);

}


.contact-submit i{

    margin-left:8px;

}


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

@media(max-width:768px){

    .contact-info h2{

        font-size:30px;

    }

    .contact-form-card{

        padding:25px;

    }

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

.page-banner{

    position:relative;

    min-height:300px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

}

/* Banner Image */

.page-banner-image{

    position:absolute;

    inset:0;

    z-index:1;

}

.page-banner-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

/* Dark Overlay */

.page-banner-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

/* Text */

.page-banner-content{

    position:relative;

    z-index:2;

    color:#fff;

}

.page-banner-content h1{

    font-size:48px;

    font-weight:700;

    margin-bottom:12px;

}

.page-banner-content p{

    margin:0;

    font-size:16px;

}

.page-banner-content a{

    color:#fff;

    text-decoration:none;

}

.page-banner-content a:hover{

    color:#dcb35c;

}


/* Mobile */

@media(max-width:768px){

    .page-banner{

        min-height:220px;

    }

    .page-banner-content h1{

        font-size:34px;

    }

}
/* =========================
   About Us Section
========================= */

.about-section {
    background: #fafbf8;
}

.about-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 30px;
    background: #e8f5ed;
    color: #176b4a;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.about-title {
    font-size: 38px;
    font-weight: 700;
    color: #173c2d;
    margin-bottom: 12px;
}

.about-subtitle {
    max-width: 650px;
    margin: auto;
    color: #6b756f;
    font-size: 16px;
}

.about-heading {
    font-size: 30px;
    font-weight: 700;
    color: #173c2d;
    margin-bottom: 20px;
}

.about-text {
    color: #626b66;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}



/* About Points */

.about-points {
    margin-top: 28px;
}

.about-point {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.point-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #176b4a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.about-point h5 {
    margin: 0 0 5px;
    color: #173c2d;
    font-size: 17px;
}

.about-point p {
    margin: 0;
    color: #727a75;
    font-size: 14px;
}
.brand-img-wrap {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.brand-row .brand-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.brand-img-wrap:hover .brand-img {
    transform: scale(1.08);
}

@media (max-width: 991.98px) {
    .brand-row [class^="order-lg-"] {
        order: initial !important;
    }
}
.about-tagline {
    font-weight: 600;
    color: var(--bs-primary, #198754);
    margin-bottom: 0.75rem;
}

.read-more-toggle {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.read-more-toggle .text-less { display: none; }
.read-more-toggle[aria-expanded="true"] .text-more { display: none; }
.read-more-toggle[aria-expanded="true"] .text-less { display: inline-block; }

.about-section {
    background: #fafbf8;
    margin-top: 100px; 
}

@media (max-width: 991.98px) {
    .about-section {
        padding-top: 90px;
    }
}
/* =========================
   FAQ
========================= */

.faq-wrapper {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.06);
}

.faq-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.faq-header > span {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e8f5ed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.faq-header h3 {
    margin: 0;
    color: #173c2d;
    font-size: 25px;
}

.faq-header p {
    margin: 4px 0 0;
    color: #777;
    font-size: 14px;
}


/* FAQ Item */

.faq-item {
    border-bottom: 1px solid #e9ecea;
}

.faq-question {
    width: 100%;
    border: none;
    background: transparent;
    padding: 19px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    color: #263d32;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.faq-question span {
    font-size: 24px;
    font-weight: 400;
    color: #176b4a;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer p {
    margin: 0;
    padding: 0 5px 18px;
    color: #737b76;
    font-size: 14px;
    line-height: 1.7;
}

.faq-item.active .faq-answer {
    max-height: 250px;
}

.faq-item.active .faq-question span {
    transform: rotate(45deg);
}


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

@media (max-width: 991px) {

    .about-title {
        font-size: 32px;
    }

    .about-heading {
        font-size: 27px;
    }

    .faq-wrapper {
        margin-top: 10px;
    }
}


@media (max-width: 576px) {

    .about-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .about-title {
        font-size: 27px;
    }

    .about-subtitle {
        font-size: 14px;
    }

    .faq-wrapper {
        padding: 20px;
    }

    .faq-header h3 {
        font-size: 21px;
    }

    .faq-question {
        font-size: 14px;
    }
}

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

.page-banner{

    background:#F8F5EF;

    padding:70px 0;

}

.page-banner h1{

    color:#173F35;
    font-size:48px;
    font-weight:700;

}

.page-banner p{

    color:#777;

}

.page-banner a{

    text-decoration:none;
    color:#1E5D45;
    font-weight:600;

}

/* =========================
   BLOG PAGE
========================= */

.blog-page{

    background:#F8F9FA;
    padding:70px 0;

}


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

.blog-page-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    height:100%;

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

    transition:.4s;

}

.blog-page-card:hover{

    transform:translateY(-8px);

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

}


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

.blog-image{

    height:240px;

    position:relative;

    overflow:hidden;

}

.blog-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;

}

.blog-page-card:hover .blog-image img{

    transform:scale(1.06);

}


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

.blog-category{

    position:absolute;

    top:18px;
    left:18px;

    background:#1E5D45;

    color:#fff;

    padding:7px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}


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

.blog-content{

    padding:28px;

}

.blog-content h3{

    font-size:24px;

    font-weight:700;

    line-height:1.4;

    color:#173F35;

    margin-bottom:18px;

}

.blog-content p{

    color:#666;

    line-height:1.8;

    font-size:15px;

    margin-bottom:14px;

}

.read-more{

    display:inline-block;

    margin-top:8px;

    color:#1E5D45;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.read-more:hover{

    color:#D4A017;

    padding-left:5px;

}


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

@media(max-width:768px){

    .page-banner{

        padding:60px 0;

    }

    .page-banner h1{

        font-size:38px;

    }

    .page-banner p{

        font-size:15px;

    }

    .blog-image{

        height:220px;

    }

}

/* =========================
   BLOG READ MORE
========================= */

.more-content{
    display:none;
}

.read-more-btn{

    border:none;
    background:none;

    padding:0;
    margin-top:5px;

    color:#1f5d45;

    font-weight:700;

    cursor:pointer;

    font-family:inherit;

}

.read-more-btn:hover{

    color:#d4a017;

}

.article-subtitle{
    color:#1E5D45;
    font-size:24px;
    font-weight:700;
    margin-top:30px;
    margin-bottom:18px;
}

.article-points{
    padding-left:25px;
    margin-bottom:25px;
}

.article-points li{
    margin-bottom:15px;
    padding-left:8px;
    line-height:1.8;
    color:#555;
}

.article-points li::marker{
    color:#1E5D45;
    font-weight:700;
}

.article-points strong{
    color:#1E5D45;
}