/*==========================
Navbar
==========================*/

.glass-navbar{

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

    backdrop-filter:blur(18px);

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

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

    border-bottom:1px solid rgba(255,255,255,.35);

    padding:12px 0;

    transition:.35s ease;

}

.logo{

    width:165px;

}

.logo-sm{

    width:140px;

}

.nav-menu{

    gap:20px;

}

.nav-link{

    font-size:16px;

    font-weight:600;

    color:#0C3A07;

    transition:.3s;

    position:relative;

}

.nav-link:hover,

.nav-link.active{

    color:#5a5a5a;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#0C3A07;

    transition:.3s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:100%;

}

.btn-theme{

    background:#0C3A07;

    color:#fff;

    border-radius:50px;

    padding:12px 28px;

    font-weight:600;

    transition:.3s;

}

.btn-theme:hover{

    background:#163f10;

    color:#fff;

    transform:translateY(-2px);

}

.navbar-toggler{

    display:none;

}

.navbar-toggler i{

    font-size:30px;

    color:#0C3A07;

}

/*==========================
Offcanvas
==========================*/

.offcanvas{

    width:310px;

}

.offcanvas-header{

    padding:20px;

}

.offcanvas-body .nav-link{

    padding:10px 0;

    font-size:17px;

    font-weight:600;

}


/* Hero */
.hero-section{
    position: relative;
    overflow: hidden;
    padding: 9rem 0 5rem;
    background:
        radial-gradient(circle at top left,
        rgba(218, 229, 185, 0.856) 0%,
        rgba(255,255,255,0) 35%),

        radial-gradient(circle at bottom right,
        rgba(182, 250, 201, 0.521) 0%,
        rgba(255,255,255,0) 40%),

        linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fcf6 60%,
        #eef8ee 100%);
}
.hero-title{

    font-size: clamp(2.3rem,5vw,4.5rem);

    font-weight:700;

    line-height:1.15;

    color:var(--primary);

    max-width:900px;

    margin:auto;

}

.hero-description{

    max-width:760px;

    margin:25px auto 40px;

    font-size:1.15rem;

    color:var(--gray);

    line-height:1.8;

}
.hero-btn-group{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:65px;

}
.hero-image{
    border-radius:32px;
    overflow:hidden;
    position:relative;
    box-shadow:
    0 30px 80px rgba(12,58,7,.12);
    border:1px solid rgba(255,255,255,.8);

}
.hero-image-title{

    position:absolute;

    left:50%;

    bottom:15%;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

    font-size:clamp(2.8rem,7vw,6rem);

    font-family:'inter', serif;

    /* font-weight:500; */

    letter-spacing:2px;

    color:#0C3A07;

    pointer-events:none;

    user-select:none;

    animation:textReveal 1.6s ease forwards,
              floatText 5s ease-in-out infinite;

}

.hero-image img{

    width:100%;

    display:block;

}

.hero-image{

    animation:floatImage 5s ease-in-out infinite;

}

/*==================================
Hero CTA Buttons
==================================*/

.hero-actions{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:70px;

}

.hero-btn-primary,
.hero-btn-secondary{

    position:relative;
    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:220px;
    height:60px;

    padding:0 36px;

    border-radius:60px;

    font-size:16px;
    font-weight:600;

    text-decoration:none;

    overflow:hidden;

    transition:.35s ease;

}

/* hero primary-btn */
.hero-btn-primary{

    background:var(--primary);

    color:#fff;

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

    box-shadow:
    0 10px 30px rgba(12,58,7,.15);

}

.hero-btn-primary::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.35),

    transparent);

    transition:.6s;

}

.hero-btn-primary:hover{

    color:#fff;

    transform:translateY(-5px);

    box-shadow:

    0 18px 40px rgba(12,58,7,.28);

}

.hero-btn-primary:hover::before{

    left:120%;

}

/* hero secondary btn */
.hero-btn-secondary{

    background:#fff;

    color:var(--primary);

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

    box-shadow:

    0 10px 25px rgba(0,0,0,.05);

}

.hero-btn-secondary::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

    z-index:0;

}

.hero-btn-secondary span{

    position:relative;

    z-index:2;

}

.hero-btn-secondary{

    z-index:1;

}

.hero-btn-secondary:hover::before{

    transform:scaleX(1);

}

.hero-btn-secondary:hover{

    color:#fff;

    transform:translateY(-5px);

}

.hero-btn-secondary:hover{

    border-color:#081308;

}



/* feature strips */
/*==================================
Feature Marquee
==================================*/

.feature-strip{

    background:var(--primary);

    overflow:hidden;

    padding:18px 0;

    white-space:nowrap;

    position:relative;

}

.feature-track{

    display:flex;

    align-items:center;

    width:max-content;

    animation:scrollFeature 22s linear infinite;

}

.feature-strip:hover .feature-track{

    animation-play-state:paused;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:14px;

    margin-right:70px;

    color:#fff;

    font-size:2.5rem;

    font-weight:500;

    flex-shrink:0;

}

.feature-item i{

    font-size:2rem;

    color:#fff;

}


/* Products */

:root {
            --brand-dark-green: #0b3d16;
            --brand-light-green: #dce7d1;
            --brand-text-green: #375b34;
            --bg-gray: #f4f4f4;
            --border-color: #e5e5e5;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: #333;
        }

        /* --- Header Styles --- */
        .badge-dot {
            height: 10px;
            width: 10px;
            background-color: #728c59;
            border-radius: 50%;
            display: inline-block;
        }

        .section-title {
            font-weight: 800;
            font-size: 2.5rem;
            letter-spacing: -0.5px;
        }

        .section-subtitle {
            color: #4a4a4a;
            font-size: 1.1rem;
            font-weight: 500;
        }

        /* --- Product Card Styles --- */
        .product-card {
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 16px;
            background: #fff;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .product-image-container {
            width: 100%;
            height: 260px;
            overflow: hidden;
            border-radius: 4px;
            margin-bottom: 16px;
        }

        .product-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-title {
            color: var(--brand-dark-green);
            font-weight: 700;
            font-size: 1.15rem;
            margin-bottom: 8px;
        }

        .product-desc {
            font-size: 0.85rem;
            color: #555;
            min-height: 40px;
            margin-bottom: 16px;
            line-height: 1.4;
        }

        .benefit-label {
            font-size: 0.85rem;
            color: #333;
            margin-bottom: 8px;
        }

        .tags-container {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .tag {
            background-color: var(--brand-light-green);
            color: var(--brand-text-green);
            font-size: 0.75rem;
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: 600;
        }

        .card-divider {
            border-top: 1px solid var(--border-color);
            margin: auto 0 16px 0; /* Pushes footer to bottom */
        }

        .price-box {
            background-color: var(--bg-gray);
            font-size: 0.8rem;
            font-weight: 600;
            padding: 10px 12px;
            border-radius: 4px;
            color: #222;
        }

        .btn-whatsapp {
            background-color: var(--brand-dark-green);
            color: #fff;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 10px 16px;
            border-radius: 4px;
            border: none;
            text-decoration: none;
            transition: opacity 0.2s ease;
        }

        .btn-whatsapp:hover {
            opacity: 0.9;
            color: #fff;
        }

        /* --- Owl Carousel Custom Nav --- */
        .owl-carousel {
            position: relative;
        }

        /* Prevent button outlines on click */
        .owl-carousel .owl-nav button.owl-prev,
        .owl-carousel .owl-nav button.owl-next {
            outline: none;
        }
         .owl-carousel .owl-nav button.owl-prev i,
        .owl-carousel .owl-nav button.owl-next i{
            font-size: 1.5rem;
            color: #fff;
        }

        .owl-nav button.owl-prev,
        .owl-nav button.owl-next {
            position: absolute;
            top: 40%; 
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background-color: var(--brand-dark-green) !important;
            color: #fff !important;
            border-radius: 50% !important;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transition: background 0.3s ease;
        }

        /* Position arrows half-outside the carousel */
        .owl-nav button.owl-prev {
            left: -25px;
        }

        .owl-nav button.owl-next {
            right: -25px;
        }

        .owl-nav button:hover {
            background-color: #06260d !important;
        }

        /* --- Explore Button --- */
        .btn-explore {
            background-color: var(--bg-gray);
            color: #111;
            font-weight: 600;
            font-size: 1rem;
            padding: 12px 32px;
            border-radius: 50px;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            transition: background 0.2s ease;
        }

        .btn-explore i {
            font-size: 1.1rem;
            font-weight: bold;
        }

        .btn-explore:hover {
            background-color: #e2e2e2;
        }
        
        /* Add padding to container so arrows don't clip on smaller screens */
        .carousel-wrapper {
            padding: 0 15px;
        }


/*=========================================
 Explore Products Button
=========================================*/

.explore-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border-radius:60px;

    background:rgba(167, 165, 165, 0.281);
    text-decoration:none;

    color:var(--black);

    font-weight:600;

    transition:.35s ease;

    box-shadow:0 12px 30px rgba(12,58,7,.15);

}

.explore-btn i{

    transition:.35s;
        text-decoration:none;

}

.explore-btn:hover{

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

    transform:translateY(-5px);

    box-shadow:0 18px 45px rgba(12,58,7,.22);

}

.explore-btn:hover i{

    transform:translateX(6px);

}

/* whyfitchal section */
/* --- Why FitChal Section Styles (Pro CSS) --- */
.why-fitchal {
  padding: 80px 0;
  background-color: #e7f3dd4a; /* Clean base canvas */
}

/* Structural Alignment */
.custom-badge-dot {
  width: 20px;
  height: 20px;
  background-color: var(--brand-dark-green); /* Synchronized with Theme Main Green */
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.section-main-title {
  color: var(--brand-dark-green);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.section-desc-text {
  color: var(--muted-text);
  font-size: 1.1rem;
  line-height: 1.65;
  margin-top: 15px;
  max-width: 950px;
}

/* --- Responsive Feature Cards --- */
.fitchal-card {
  border-radius: 24px; /* Soft smooth organic curves */
  padding: 40px 25px;
  border: 1px solid transparent;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, box-shadow; /* Browser rendering optimization */
}
/* Odd Cards (1st, 3rd, 5th...) */
.row > div:nth-child(odd) .fitchal-card {
    background: linear-gradient(135deg, #ECFDDC 0%, #DDF9D7 100%);
}

/* Even Cards (2nd, 4th, 6th...) */
.row > div:nth-child(even) .fitchal-card {
    background: #cacac96e;
}

/* Alternating Tints Using Your Global Theme Variables */
.bg-green-tint {
  background-color: var(--bg-sage-green);
}

.bg-neutral-tint {
  background-color: var(--bg-warm-neutral);
}

/* Centered Icon Box */
.icon-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  margin: 0 auto;
}

.fitchal-icon {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Card Content Styling */
.card-feature-title {
  color: var(--brand-dark-green);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.card-feature-desc {
  color: var(--muted-text);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* --- High Performance Hover Micro-interactions --- */
.fitchal-card:hover {
  transform: translateY(-8px);
  /* Uses a subtle shadow tinted with your dark green to look organic */
  box-shadow: 0 15px 30px rgba(28, 69, 36, 0.08); 
  border-color: rgba(28, 69, 36, 0.05);
}



/* how its work section */
/* --- How It Works Steps Design --- */

/* Step Container Block */
.step-container {
  border-radius: 24px; /* Matches our global theme curves */
  padding: 40px;
  border: 1px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Background classes utilizing your global variables */
.step-container.bg-green-tint {
  background-color: #f6ffdb86;
}

.step-container.bg-neutral-tint {
  background-color: #ececec91;
}

/* Image Presentation Styles */
.step-image-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Subtle depth shadow */
}

.step-img {
  width: 100%;
  height: 350px;
  object-fit: cover; /* Maintains aspect ratio without distorting the design */
  display: block;
}

/* Typography Rules */
.step-number-badge {
  color: #72825c; /* Secondary light olive-green color */
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.step-title {
  color: var(--brand-dark-green);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.step-desc {
  color: var(--muted-text);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Elegant micro-interaction on Hover */
.step-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(28, 69, 36, 0.06);
}



/* --- Benefits Section Pro Style --- */
.benefits-sec {
  background-color: #f7faf8; /* Light pastel background canvas */
  padding: 80px 0;
}

/* Card Design & Aspect Ratio Management */
.benefit-card {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.benefit-img-container {
  position: relative;
  width: 100%;
  height: 380px; /* Optimal vertical aspect-ratio */
  border-radius: 20px;
  overflow: hidden;
}

/* Card Image scale zoom effect on hover */
.benefit-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Subtle overlay gradient to ensure text readability */
.benefit-img-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* --- Floating Bottom Badge --- */
.benefit-floating-badge {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px); /* Maintains uniform padding on left and right */
  background-color: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 5;
  transition: background-color 0.3s ease;
}

/* Floating Badge Icon block alignment */
.benefit-icon-box {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.benefit-icon-box img {
  width: 100% !important; /* Forces Owl Carousel to not distort the smaller SVG icon size */
  height: 100%;
  object-fit: contain;
}

.benefit-badge-title {
  color: var(--brand-dark-green);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Hover Micro-interactions */
.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(28, 69, 36, 0.1);
}

.benefit-card:hover .benefit-card-img {
  transform: scale(1.05);
}

/* Custom Dots for Owl Carousel as per mockup image */
#benefitsCarousel .owl-dots {
  margin-top: 35px !important;
  display: flex;
  justify-content: center;
  gap: 8px;
}

#benefitsCarousel .owl-dot span {
  width: 12px !important;
  height: 12px !important;
  background: #dbdeda !important; /* Soft default dot */
  margin: 0 !important;
  transition: background 0.3s ease, transform 0.3s ease;
  border-radius: 50%;
}

#benefitsCarousel .owl-dot.active span {
  background: var(--brand-dark-green) !important; /* Brand dynamic dot active */
  transform: scale(1.15);
}

/* testimonial */

/* --- Testimonial Section Pro Style --- */
.testimonial-sec {
  background-color: #ffffff;
  padding: 80px 0;
  overflow: hidden;
}

/* Review Card Container Layout */
.review-card {
  background-color: #ceffdc48; /* Syncs with website theme green tint */
  border-radius: 20px;
    padding: 5rem 3rem;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Strategic Quote Placement */
.quote-icon {
  font-family: Georgia, serif;
  font-size: 4.5rem;
  color: var(--brand-dark-green);
  line-height: 0;
  position: absolute;
  opacity: 0.8;
}

.quote-start {
  top: 30px;
  left: 20px;
}

.quote-end {
  bottom: 85px;
  right: 20px;
}

/* Review Main Quote Body Text */
.review-text {
  font-size: 1.2rem;
  font-weight: 500;
  color: #000000;
  line-height: 1.5;
  margin-bottom: 35px;
  position: relative;
  z-index: 2;
}

/* User Identity Section */
.user-avatar {
  width: 60px !important; /* Locks Owl Carousel global image dimensions override */
  height: 60px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.user-name {
  color: var(--brand-dark-green);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 2px 0;
}

.user-designation {
  color: var(--muted-text);
  font-size: 0.85rem;
  display: block;
  margin-bottom: 4px;
}

.star-rating {
  font-size: 0.85rem;
  color: #ffc107; /* Standard clean golden stars */
}

.rating-num {
  color: #000000;
  font-weight: 600;
  margin-left: 4px;
}

/* --- Absolute Custom Exterior Navigation Arrows --- */
.custom-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: var(--brand-dark-green);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  z-index: 10;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.custom-nav-btn:hover {
  background-color: #122d17;
  transform: translateY(-50%) scale(1.05);
}

.custom-prev-btn {
  left: -20px;
}

.custom-next-btn {
  right: -20px;
}


/* --- Modern FAQ Section Styles --- */
.faq-sec {
  background-color: #e8ffed3b ;/* Subtle soft green background tint */
  padding: 80px 0;
}

/* Custom Accordion Base Reset */
.custom-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Space between modern cards */
}

.custom-accordion .faq-item {
  background-color: #ffffff !important; /* Soft pure white cards on top of tinted background */
  border-radius: 16px !important; /* Soft curves */
  border: 1px solid rgba(28, 69, 36, 0.05) !important;
  box-shadow: 0 4px 12px rgba(28, 69, 36, 0.02);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover effects to feel tactile */
.custom-accordion .faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(28, 69, 36, 0.06);
}

/* --- Accordion Interactive Header Button --- */
.faq-btn {
  color: var(--brand-dark-green) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  padding: 24px 28px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: color 0.3s ease !important;
}

/* Custom styling for standard Bootstrap icons */
.faq-btn::after {
  background-size: 1.15rem !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Active Open Accordion State styling */
.faq-btn:not(.collapsed) {
  color: var(--brand-dark-green) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* --- Accordion Panel Body Area --- */
.faq-body {
  padding: 20px 28px 28px 28px !important;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted-text);
  background-color: #ffffff;
}

.faq-body strong {
  color: var(--brand-dark-green);
}



/* Footer */
/* --- Site Footer Main Layout --- */
.site-footer {
  background-color: #ffffff; /* Crisp modern canvas bg */
  padding-top: 60px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Top Branding Styles */
.footer-logo {
  max-width: 160px; /* Perfect visual width */
  height: auto;
  object-fit: contain;
}

.footer-tagline {
  color: var(--muted-text);
  font-size: 1.05rem;
  font-style: italic;
  margin: 0;
}

/* Custom Thin Horizontal Separator */
.footer-separator {
  border: 0;
  height: 1px;
  background-color: rgba(28, 69, 36, 0.15); /* Tinted with brand dark green */
  opacity: 1;
}

/* Column Header Titles */
.footer-col-title {
  color: var(--brand-dark-green);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 24px;
}

/* Clean List-styling & Dynamic hover shifts */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list a {
  color: var(--muted-text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  display: inline-block;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Modern hover right-slide micro-interaction */
.footer-links-list a:hover {
  color: var(--brand-dark-green);
  transform: translateX(5px);
}

/* --- Contact Us Info Block --- */
.contact-icon-box {
  color: var(--brand-dark-green);
  font-size: 1.1rem;
  width: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.contact-text {
  color: var(--muted-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-link {
  color: var(--muted-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: var(--brand-dark-green);
}

/* --- Social Icons Custom Block --- */
.socials-title {
  color: var(--brand-dark-green);
  font-size: 1.3rem;
  font-weight: 700;
}

.social-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2); /* Soft circle border line */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  font-size: 0.95rem;
}

/* Smooth circle hover transformations */
.social-icon-btn:hover {
  background-color: var(--brand-dark-green);
  border-color: var(--brand-dark-green);
  color: #ffffff;
  transform: translateY(-3px);
}

/* --- Footer Bottom Copyright Area --- */
.copyright-text {
  color: var(--muted-text);
  font-size: 0.95rem;
  font-weight: 500;
}



/* --- Pro Dark-Themed Contact Section --- */
.contact-section {
  background-color: #aca9a92a; /* Contrast background to let the card pop */
  padding: 80px 0;
}

/* Outer Card Shell with soft shadow */
.contact-card-wrapper {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(28, 69, 36, 0.08);
}

/* Dark Green Side Background */
.brand-dark-bg {
  background-color: var(--brand-dark-green, #1c4524); /* Matches your beautiful CTA dark shade */
}

.contact-main-title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Channel Card Item Style */
.channel-card {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 20px;
  border-radius: 16px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.channel-card:hover {
  transform: translateX(5px);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Decorative Badge Indicator */
.custom-badge-dot.bg-white {
  width: 8px;
  height: 8px;
  background-color: #ffffff !important;
  border-radius: 50%;
  display: inline-block;
}

/* Icon circles on dark column */
.channel-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Special branding treatment for WhatsApp */
.whatsapp-green-bg {
  background-color: #25d366 !important;
  color: #ffffff !important;
}

.channel-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}

.channel-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.channel-link:hover {
  opacity: 0.85;
}

.whatsapp-text {
  color: #25d366;
}

.fs-xs {
  font-size: 0.75rem;
}