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

:root {
    /* Ayurvedic Color Palette */
    --primary: #42a547;
    --secondary: #292929;
    --background: #FFFFFF;


    --soft-green: #e2f6e3;


    --primary-terracotta: #E67E22;
    --primary-herbal-green: #42a547;
    --primary-sand: #F4E6D7;
    --primary-white: #F4E6D7;
    --primary-turmeric: #FFC72C;
    --primary-neem: #4CAF50;
    --primary-clay: #C76E4A;

    /* hover */
    --hover: #358438;

    /* Neutral Colors */
    --text-dark: #2C3E50;
    --text-soft: #5D6D7E;
    --bg-cream: #FDF8F2;
    --bg-soft-green: #F0F7E6;

    /* Typography */
    --font-heading: "Poppins", sans-serif;
    --font-body: "Inter", sans-serif;

    /* Spacing */
    --section-spacing: 80px;
    --element-spacing: 30px;
}

/* ===== Reusable Section Styles ===== */
.ayur-section {
    padding: var(--section-spacing) 0;
    position: relative;
    overflow: hidden;
}

.ayur-section.bg-cream {
    background-color: var(--bg-cream);
}

.ayur-section.bg-soft-green {
    /* background-color: var(--bg-soft-green); */
}

.ayur-section.bg-pattern {
    background-image: url('../images/ayur-pattern.png');
    background-repeat: repeat;
    background-size: 200px;
    opacity: 0.05;
}

/* ===== Headline Styles ===== */
.ayur-headline {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.ayur-headline h2 {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.ayur-headline h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(to right, var(--primary-saffron), var(--primary-herbal-green));
}

.ayur-headline h3 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary);
    letter-spacing: 0.3px;
}

/* ===== Dosha Badge Styles ===== */
.dosha-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
    border: 1px solid var(--primary-herbal-green);
}

.ayur-service-card:hover .dosha-badge {
    border: 1px solid #fff;
}

/* 
.dosha-badge.vata {
    background: rgba(110, 44, 0, 0.1);
    color: #6E2C00;
    border: 1px solid #6E2C00;
}

.dosha-badge.pitta {
    background: rgba(255, 69, 0, 0.1);
    color: #FF4500;
    border: 1px solid #FF4500;
}

.dosha-badge.kapha {
    background: rgba(46, 125, 50, 0.1);
    color: var(--primary-herbal-green);
    border: 1px solid var(--primary-herbal-green);
}

.dosha-badge.tridosha {
    background: linear-gradient(45deg, rgba(110, 44, 0, 0.1), rgba(255, 69, 0, 0.1), rgba(46, 125, 50, 0.1));
    color: var(--primary-white);
    border: 1px solid var(--primary-white);
} */

/* ===== Product Card Styles ===== */
.ayur-product-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    margin: 15px 0;
}

.ayur-product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(46, 125, 50, 0.15);
}

.ayur-product-card .product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
}

.ayur-product-card .badge-organic {
    background: var(--primary-herbal-green);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
}

.ayur-product-card .badge-ayush {
    background: var(--primary-saffron);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
}

.ayur-product-card .product-thumb {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}

.ayur-product-card .product-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ayur-product-card:hover .product-thumb img {
    transform: scale(1.1);
}

.ayur-product-card .product-info {
    padding: 20px;
    text-align: left;
}

.ayur-product-card .product-name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-white);
    margin-bottom: 10px;
}

.ayur-product-card .product-name a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ayur-product-card .dosha-indicator {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
}

.ayur-product-card .dosha-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ayur-product-card .dosha-dot.vata {
    background: #6E2C00;
}

.ayur-product-card .dosha-dot.pitta {
    background: #FF4500;
}

.ayur-product-card .dosha-dot.kapha {
    background: #2E7D32;
}

.ayur-product-card .product-price {
    margin: 15px 0;
}

.btn_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ayur-product-card .current-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-terracotta);
}

.ayur-product-card .old-price {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
    margin-left: 10px;
}


.ayur-product-card .out-of-stock {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 50px;
    font-size: 14px;
    text-align: center;
}

/* ===== Ayurvedic Service Cards ===== */
.ayur-service-card {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.ayur-service-card:hover {
    background: var(--primary-herbal-green);
    color: #fff
}

.ayur-service-card .icon-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    background: var(--bg-cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--primary-herbal-green);
    transition: all 0.3s ease;
}

.ayur-service-card:hover .icon-wrapper {
    background: white;
    color: var(--primary-herbal-green);
}

.ayur-service-card h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    margin-bottom: 15px;
}

.ayur-service-card p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ===== CTA Banner Styles ===== */
.ayur-cta-banner {
    background: linear-gradient(165deg, var(--primary), var(--background));
    padding: 60px 0;
    color: white;
    position: relative;
    overflow: hidden;
}

.ayur-cta-banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/mandala-pattern.png') center/cover;
    opacity: 0.1;
    z-index: -1;
}

.ayur-cta-banner .cta-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.ayur-cta-banner .cta-content {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.ayur-cta-banner .btn-ayur-light {
    background: white;
    color: var(--primary-herbal-green);
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.ayur-cta-banner .btn-ayur-light:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* ===== Dosha Quiz Card ===== */

.ayur-quiz-card {
    border-radius: 20px;
    padding: 0px 30px;
    position: relative;
    overflow: hidden;
}

.ayur-quiz-card .quiz-title {
    font-family: var(--font-heading);
    font-size: 36px;
    color: var(--secondary);
    margin-bottom: 20px;
}

.ayur-quiz-card p {
    font-size: 18px;
    font-weight: 400;
    color: var(--secondary);
    letter-spacing: .5px;
}

.ayur-quiz-card .quiz-features {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.ayur-quiz-card .quiz-features li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    font-size: 18px;
    font-weight: 400;
}

.ayur-quiz-card .quiz-features li i {
    color: var(--primary);
    margin-right: 10px;
}

.ayur-quiz-card .btn-ayur-quiz {
    background: var(--primary);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    line-height: 1;
}

.ayur-quiz-card .btn-ayur-quiz:hover {
    background: var(--hover);
}

/* ===== Trust Badges ===== */

/* .ayur-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 30px;
    margin: 40px 0;
}

.ayur-trust-badge {
    text-align: center;
    min-width: 120px;
}

.ayur-trust-badge .badge-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--background);
}

.ayur-trust-badge span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--secondary);
    display: block;
} */


/* Section */
.ayur-section {
    padding: 70px 20px;
    position: relative;
}

/* Layout */
.ayur-trust-badges {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* Card */
.ayur-trust-badge {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 18px;
    text-align: center;
    width: 300px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.ayur-trust-badge:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Icon */
.badge-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #3aa856, #2f8f47);
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 18px;
    transition: 0.3s;
}

.ayur-trust-badge:hover .badge-icon {
    transform: scale(1.1);
}

/* Heading */
.ayur-trust-badge h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
    color: #1f2937;
}

/* Text */
.ayur-trust-badge p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .ayur-trust-badge {
        width: 100%;
        max-width: 100%;
    }
}

/* ===== Trust Badges ===== */

/* ===== Responsive Styles ===== */
@media (max-width: 991px) {
    :root {
        --section-spacing: 60px;
    }

    .ayur-headline h2 {
        font-size: 32px;
    }

    .ayur-cta-banner .cta-title {
        font-size: 36px;
    }

    .ayur-quiz-card .quiz-title {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .ayur-newsletter .newsletter-form {
        flex-direction: column;
    }

    .ayur-product-card .product-name {
        font-size: 18px;
    }

    .ayur-trust-badges {
        gap: 15px;
    }
}

/* ===== Animation Classes ===== */
@keyframes leafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

.ayur-leaf-animation {
    animation: leafFloat 6s ease-in-out infinite;
}

/* ===== Rating Stars ===== */
.ayur-rating {
    color: var(--primary-turmeric);
    font-size: 12px;
    margin: 6px 0 5px 0;
}

.ayur-rating i {
    margin: 0 2px;
}

/* hero section */
/* ========================================
   HERO SLIDER - OWL CAROUSEL STYLES
======================================== */

.hero-slider-section {
    position: relative;
    overflow: hidden;
}

/* Hero Slide Item */

/* Hero Slider Section */
.hero-slider-section {
    position: relative;
    overflow: hidden;
}

.hero-slide-item {
    height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

/* Content Container */
.hero-slide-item .container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 15px;
}

/* Content Alignment */
.hero-slide-content {
    padding: 30px;
    animation: contentFadeIn 1s ease;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-slide-content.left-align {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.hero-slide-content.center-align {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero-slide-content.right-align {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

/* Typography */
.hero-slide-content h1 {
    font-family: "Poppins", sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.hero-slide-content p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 30px;
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* Button Style */
.button-47 {
    display: inline-block;
    /* background: #FF9933; */
    border: none;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
}

.button-47:hover {
    background: white;
    color: #8B5A2B;
    transform: translateY(-5px);
}

/* Owl Carousel Custom Navigation */
.hero-slider-section .owl-theme .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.hero-slider-section .owl-theme .owl-nav .owl-prev,
.hero-slider-section .owl-theme .owl-nav .owl-next {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    backdrop-filter: blur(5px);
}

.hero-slider-section .owl-theme .owl-nav .owl-prev {
    left: 20px;
}

.hero-slider-section .owl-theme .owl-nav .owl-next {
    right: 20px;
}

.hero-slider-section .owl-theme .owl-nav .owl-prev:hover,
.hero-slider-section .owl-theme .owl-nav .owl-next:hover {
    background: #FF9933;
    border-color: #FF9933;
    transform: scale(1.1);
}

/* Dots Styling */
.hero-slider-section .owl-theme .owl-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
}

.hero-slider-section .owl-theme .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    margin: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
}

.hero-slider-section .owl-theme .owl-dots .owl-dot.active span {
    background: #FF9933;
    width: 30px;
    border-radius: 10px;
}

/* ========== MOBILE RESPONSIVE FIXES ========== */

/* Tablet Devices (768px - 1024px) */
@media (max-width: 1024px) {
    .hero-slide-item {
        height: 500px;
    }

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

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

    .hero-slider-section .owl-theme .owl-nav .owl-prev,
    .hero-slider-section .owl-theme .owl-nav .owl-next {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Mobile Devices (576px - 768px) */
@media (max-width: 768px) {
    .hero-slide-item {
        height: 400px;
        background-position: center 30%;
    }

    .hero-slide-content {
        padding: 20px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 10px;
    }

    .hero-slide-content h1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .hero-slide-content p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .button-47 {
        padding: 10px 25px;
        font-size: 14px;
    }

    /* Show dots on mobile */
    .hero-slider-section .owl-theme .owl-dots {
        bottom: 6%;
        left: 40%;
        transform: translateX(50%);
    }

    .hero-slider-section .owl-theme .owl-dots .owl-dot span {
        width: 8px;
        height: 8px;
    }

    .hero-slider-section .owl-theme .owl-dots .owl-dot.active span {
        width: 20px;
    }
}

/* Small Mobile Devices (below 576px) */
@media (max-width: 576px) {
    .hero-slide-item {
        height: 350px;
    }

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

    .hero-slide-content p {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .button-47 {
        padding: 8px 20px;
        font-size: 12px;
    }

    .hero-slide-content {
        padding: 15px;
    }
}

/* Landscape Mode Fix for Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-slide-item {
        height: 300px;
    }

    .hero-slide-content h1 {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .hero-slide-content p {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .button-47 {
        padding: 6px 15px;
        font-size: 11px;
    }
}

/* Custom Dots */
.hero-slider-section .owl-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 5px;
}

.hero-slider-section .owl-dot span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-sand) !important;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.hero-slider-section .owl-dot.active span {
    background: #FF9933;
    transform: scale(1.2);
    width: 30px;
    border-radius: 20px;
    border-color: white;
}

.hero-slider-section .owl-dot:hover span {
    background: white;
}


/* Responsive Design */
@media (max-width: 991px) {
    .hero-slide-item {
        height: 500px;
    }

    .slide-title {
        font-size: 42px;
    }

    .slide-description {
        font-size: 16px;
    }

    .hero-slide-content {
        max-width: 500px;
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .hero-slide-item {
        height: 400px;
    }

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

    .slide-description {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .slide-button {
        padding: 10px 25px !important;
        font-size: 14px !important;
    }

    .hero-slide-content {
        max-width: 100%;
        padding: 20px;
        text-align: center !important;
    }

    .hero-slide-content.left-align,
    .hero-slide-content.right-align,
    .hero-slide-content.center-align {
        margin: 0 auto;
        text-align: center;
    }

    .hero-slider-prev {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .hero-slider-section .owl-dots {
        width: 8px;
        height: 8px;
    }

    .hero-slider-section .owl-dots.active {
        width: 20px;
    }
}

@media (max-width: 480px) {
    .hero-slide-item {
        height: 350px;
    }

    .slide-title {
        font-size: 24px;
    }

    .slide-description {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .slide-button {
        padding: 8px 20px !important;
        font-size: 12px !important;
    }
}

/* Animation Classes */
.fadeOut {
    animation: fadeOut 0.8s ease forwards;
}

.fadeIn {
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* hero section */


/* Header css */

/* ========================================
   AYURVEDA HEADER STYLES
======================================== */

/* Top Bar */
.ayur-top-bar {
    background: #282828;
    padding: 8px 0;
    color: white;
    font-size: 13px;
}

.ayur-top-bar .left ul,
.ayur-top-bar .right ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ayur-top-bar .left ul li,
.ayur-top-bar .right ul li {
    display: inline-block;
    margin-right: 20px;
}

.ayur-top-bar .left ul li i {
    margin-right: 5px;
    color: #fff;
}

.ayur-top-bar .ayur-text {
    font-weight: 500;
    margin-right: 5px;
}

.ayur-social li a {
    color: white;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.ayur-social li a:hover {
    opacity: 1;
    color: var(--primary-saffron);
}

.btn-dosha-quick {
    background: #fff;
    color: var(--primary-white) !important;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
}

.btn-dosha-quick i {
    color: var(--primary-white) !important;
}

.btn-dosha-quick:hover {
    background: white;
    transform: translateY(-2px);
}

/* Main Header */
.ayur-header {
    background: white;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ayur-header .logo img {
    max-height: 60px;
}

/* Search Form */
.ayur-search-form .form-group {
    position: relative;
    margin-bottom: 0;
}

.ayur-search {
    width: 100%;
    height: 50px;
    border: 2px solid #eee;
    border-radius: 50px;
    padding: 0 60px 0 20px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.ayur-search:focus {
    border-color: var(--primary-herbal-green);
    outline: none;
    box-shadow: 0 0 10px rgba(46, 125, 50, 0.1);
}

.btn-ayur-search {
    position: absolute;
    right: 5px;
    top: 5px;
    background: var(--primary-herbal-green);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ayur-search:hover {
    background: var(--hover);
    transform: scale(1.05);
}

/* User Actions */
.ayur-user-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ayur-user-actions>li {
    margin-left: 20px;
    position: relative;
}

.btn-ayur-login,
.btn-ayur-register,
.btn-ayur-profile {
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

.btn-ayur-login {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-ayur-login:hover {
    border-color: var(--primary);
    color: var(--secondary);
}

.btn-ayur-register {
    background: var(--secondary);
    color: white;
}

.btn-ayur-register:hover {
    background: #434343;
    color: #fff;
}

.btn-ayur-profile {
    background: #ffff;
    border-radius: .5rem;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.btn-ayur-profile:hover {
    border: 0;
}

.btn-ayur-profile a {
    text-decoration: none;
    color: #000;
    font-family: var(--font-heading);
}

/* Cart Icon */
.cart-icon {
    position: relative;
    display: block;
    font-size: 24px;
    color: var(--secondary);
}

.cart-icon:hover {
    color: #ef6207;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef6207;
    color: white;
    font-size: 11px;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cart Preview Dropdown */
.cart-dropdown {
    position: relative;
}

.cart-preview {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cart-dropdown:hover .cart-preview {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
}

.cart-total {
    padding: 10px 0;
    border-top: 1px solid #eee;
    font-weight: 600;
    color: var(--primary-white);
}

.btn-ayur-view-cart {
    display: block;
    text-align: center;
    background: var(--primary-herbal-green);
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-ayur-view-cart:hover {
    background: var(--primary-white);
    color: #fff;
}

.empty-cart {
    text-align: center;
    color: #999;
    margin: 10px 0;
}

/* User Dropdown */
.user-dropdown .dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    transform: translate3d(20px, 42.8px, 0px) !important;
}

.user-dropdown .dropdown-menu li a {
    padding: 8px 20px;
    color: var(--secondary);
    transition: all 0.3s ease;
    font-size: 14px;
    display: block;
    width: 100%;
}

.user-dropdown .dropdown-menu li a i {
    margin-right: 10px;
    color: var(--primary-herbal-green);
}

.user-dropdown .dropdown-menu li a:hover {
    background: var(--bg-soft-green);
    padding-left: 25px;
}

/* Navigation Menu */
/* Navigation Styles - FIXED */
.ayur-nav {
    background: var(--primary-herbal-green);
    position: relative;
    z-index: 999;
}

.ayur-nav.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    animation: slideDown 0.5s ease;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.menu-container {
    position: relative;
}

/* Desktop Navigation (Default) */
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex !important;
    /* Changed from display: none */
    position: relative;
    /* Changed from absolute */
    top: auto;
    /* Removed negative top */
    left: auto;
    width: auto;
    min-height: auto;
    background: transparent;
    color: #fff;
}

.nav-menu>li {
    position: relative;
    margin: 0;
}

.nav-menu>li>a {
    display: block;
    padding: 15px 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    font-family: var(--font-body);
    transition: all 0.3s ease;
    margin: 0 4px;
}

.nav-menu>li.active>a {
    color: #fff;
    background: var(--hover);
}

.nav-menu>li>a i {
    margin-right: 5px;
}

.nav-menu>li:hover>a,
.nav-menu>li.active>a {
    background: #fff;
    border-radius: 5px;
    color: var(--hover);
}

/* Sub Menus - Desktop */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(-10px);
}

.menu-item-has-children:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu li {
    position: relative;
    list-style-type: none;
}

.sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 500;
    white-space: nowrap;
}

.sub-menu li a i {
    margin-right: 10px;
    color: var(--primary-herbal-green);
}

.sub-menu li:hover>a {
    background: #f5f5f5;
    padding-left: 25px;
    color: var(--primary-herbal-green);
}

/* Third Level Menu */
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 5px;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .nav-menu {
        display: none !important;
        /* Hidden by default on mobile */
        position: absolute;
        top: -135px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        max-height: 80vh;
        overflow-y: auto;
        z-index: 1000;
        border-radius: 10px;
    }

    .nav-menu.active {
        display: flex !important;
        /* Show when active class is added */
    }

    .nav-menu>li>a {
        color: #333;
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
    }

    .nav-menu>li>a i {
        color: #333;
    }

    /* Mobile sub-menus */
    .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        display: none;
        box-shadow: none;
        padding-left: 20px;
        background: #f9f9f9;
        transform: none;
    }

    .sub-menu.active {
        display: block;
    }

    .sub-menu li a {
        padding: 10px 20px;
        white-space: normal;
    }

    .sub-menu .sub-menu {
        padding-left: 20px;
    }

    .menu-item-has-children>a {
        position: relative;
    }

    .menu-item-has-children>a i.bi-chevron-down,
    .menu-item-has-children>a i.bi-chevron-right {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #3d3d3d;
    }
}

/* Desktop: Show menu normally */
@media (min-width: 769px) {
    .nav-menu {
        display: flex !important;
        justify-content: center;
    }
}

/* Mobile Menu Toggle Button - Add this to your HTML if not present */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    padding: 10px;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
}

/* navigation menu */

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: #ffffff;
    color: #000000;
    padding: 8px 12px;
    cursor: pointer;
    width: fit-content;
    border: 1px solid var(--secondary);
    font-size: 1rem;
    border-radius: 0.5rem;
}


/* Quick Dosha Button */
/* .ayur-quick-dosha {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    display: none;
} */

.ayur-quick-dosha a {
    display: flex;
    align-items: center;
    background: var(--primary-saffron);
    color: var(--primary-white);
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(255, 153, 51, 0.3);
    transition: all 0.3s ease;
}

.ayur-quick-dosha a i {
    margin-right: 10px;
    font-size: 18px;
}

.ayur-quick-dosha a:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 153, 51, 0.4);
}

/* Responsive Styles */
@media (max-width: 991px) {

    .ayur-top-bar .left ul li,
    .ayur-top-bar .right ul li {
        margin-right: 10px;
    }

    .ayur-top-bar .left ul li:last-child {
        display: none;
    }

    .nav-menu>li>a {
        padding: 12px 15px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .mobile-menu-toggle {
        display: block;
    }

    .nav-menu>li>a {
        padding: 12px 20px;
    }

    .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        display: none;
    }

    .menu-item-has-children:hover>.sub-menu {
        transform: none;
    }

    .sub-menu .sub-menu {
        left: 0;
        margin-left: 20px;
    }

    .ayur-top-bar {
        display: none;
    }

    .ayur-header .logo {
        text-align: center;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ayur-user-actions {
        justify-content: center;
        margin-top: 15px;
    }

    .cart-preview {
        right: -50px;
    }
}


.menu-mobile {
    display: none;
}

/* Header css */

/* blog section */
/* ========================================
   AYURVEDIC BLOG SECTION STYLES
======================================== */

/* Blog Section Background */
.ayur-section.bg-soft-green {
    /* background: linear-gradient(135deg, #F0F7E6 0%, #E8F2DD 100%); */
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

/* Blog Card */
.blog-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(46, 125, 50, 0.1);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-bottom: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.2);
}

/* Blog Image Container */
.blog-card .blog-image {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.blog-card .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.1);
}

/* Blog Date Badge */
.blog-card .blog-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #FF9933, #E67E22);
    color: white;
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
    min-width: 60px;
    box-shadow: 0 5px 15px rgba(255, 153, 51, 0.3);
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.blog-card .blog-date .day {
    font-size: 20px;
    font-weight: 700;
    display: block;
    line-height: 1.2;
    font-family: "Poppins", sans-serif;
}

.blog-card .blog-date .month {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Blog Content */
.blog-card .blog-content {
    padding: 25px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    position: relative;
}

.blog-card .blog-content:before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(to right, transparent, #2E7D32, transparent);
}

/* Blog Meta Information */
.blog-card .blog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 13px;
    color: #7F8C8D;
    padding-bottom: 10px;
    border-bottom: 1px dashed #E0E0E0;
}

.blog-card .blog-meta i {
    color: #FF9933;
    margin-right: 5px;
    font-size: 12px;
}

.blog-card .blog-meta .author {
    font-weight: 500;
    color: #2E7D32;
}

.blog-card .blog-meta .category {
    background: #F0F7E6;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    color: #2E7D32;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Blog Title */
.blog-card .blog-content h3 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #8B5A2B;
    margin: 0 0 10px;
    line-height: 1.4;
    transition: color 0.3s ease;
    position: relative;
    padding-bottom: 10px;
}

.blog-card .blog-content h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #FF9933;
    transition: width 0.3s ease;
}

.blog-card:hover .blog-content h3:after {
    width: 60px;
}

.blog-card:hover .blog-content h3 {
    color: #2E7D32;
}

/* Blog Description */
.blog-card .blog-content p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #5D6D7E;
    margin-bottom: 20px;
    flex: 1;
}

/* Read More Link */
.blog-card .blog-read-more {
    display: inline-flex;
    align-items: center;
    color: #2E7D32;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
    padding: 8px 0;
    border-top: 1px dashed #E0E0E0;
    width: 100%;
}

.blog-card .blog-read-more i,
.blog-card .blog-read-more .fa {
    margin-left: 8px;
    transition: transform 0.3s ease;
    font-size: 12px;
}

.blog-card .blog-read-more:hover {
    color: #8B5A2B;
    text-decoration: none;
}

.blog-card .blog-read-more:hover i,
.blog-card .blog-read-more:hover .fa {
    transform: translateX(8px);
}

/* View All Blog Button */
.view-all-blog {
    margin-top: 40px;
    position: relative;
}

.view-all-blog:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #2E7D32, transparent);
    z-index: 1;
}

.view-all-blog .btn-ayur-outline {
    position: relative;
    z-index: 2;
    background: white;
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid var(--primary);
    border-radius: 50px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    font-size: 15px;
}

.view-all-blog .btn-ayur-outline i,
.view-all-blog .btn-ayur-outline .fa {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.view-all-blog .btn-ayur-outline:hover {
    background: var(--primary);
    color: white;
    border: none;
}

/* Blog Categories Pills (Optional) */
.blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    justify-content: center;
}

.blog-category {
    padding: 8px 20px;
    background: white;
    border: 1px solid #E0E0E0;
    border-radius: 50px;
    color: #5D6D7E;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-category:hover,
.blog-category.active {
    background: #2E7D32;
    border-color: #2E7D32;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.2);
}

/* Responsive Design */
@media (max-width: 991px) {
    .blog-card .blog-image {
        height: 200px;
    }

    .blog-card .blog-content h3 {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .ayur-section.bg-soft-green {
        padding: 40px 0;
    }

    .blog-card {
        margin-bottom: 20px;
    }

    .blog-card .blog-image {
        height: 180px;
    }

    .blog-card .blog-content h3 {
        font-size: 18px;
    }

    .blog-card .blog-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .view-all-blog .btn-ayur-outline {
        padding: 10px 25px;
        font-size: 14px;
    }

    .blog-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 15px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .blog-category {
        white-space: nowrap;
    }
}

/* Animation for Blog Cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blog-card {
    animation: fadeInUp 0.6s ease forwards;
}

.blog-card:nth-child(1) {
    animation-delay: 0.1s;
}

.blog-card:nth-child(2) {
    animation-delay: 0.3s;
}

.blog-card:nth-child(3) {
    animation-delay: 0.5s;
}

/* blog section */



/* ========================================
   TESTIMONIALS SECTION - FIXED VERSION
======================================== */

.testimonials-section {
    background: #487e49;
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

.testimonials-section:before {
    content: '"';
    position: absolute;
    top: -50px;
    right: -50px;
    font-size: 300px;
    font-family: serif;
    color: rgba(46, 125, 50, 0.05);
    transform: rotate(15deg);
    pointer-events: none;
}

.testimonials-section:after {
    content: '"';
    position: absolute;
    bottom: -50px;
    left: -50px;
    font-size: 300px;
    font-family: serif;
    color: rgba(255, 153, 51, 0.05);
    transform: rotate(-15deg);
    pointer-events: none;
}

/* Testimonial Carousel Container */
.testimonial-carousel {
    margin: 40px 0 20px;
}

/* Testimonial Item */
.testimonial-item {
    padding: 10px 0;
}

/* Testimonial Card */

.testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 30px 25px;
    transition: all 0.4s ease;
    position: relative;
    border: 1px solid rgba(46, 125, 50, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.testimonial-card:hover {
    transform: translateY(-10px);
}

/* Quote Icon */
.quote-icon {
    color: #FF9933;
    font-size: 32px;
    opacity: 0.3;
    margin-bottom: 20px;
    display: block;
}

/* Testimonial Content */
.testimonial-content {
    flex: 1;
}

.testimonial-content p {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #5D6D7E;
    margin-bottom: 20px;
    font-style: italic;
}

/* Rating Stars */
.testimonial-rating {
    margin-bottom: 25px;
}

.testimonial-rating i {
    color: #FFC72C;
    font-size: 16px;
    margin-right: 3px;
}

.testimonial-rating i.fa-star-o {
    color: #E0E0E0;
}

/* Author Section */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px dashed #E0E0E0;
}

.author-img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FF9933;
    padding: 3px;
    background: white;
}

.author-info h4 {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #8B5A2B;
    margin: 0 0 5px;
}

.author-location {
    font-size: 13px;
    color: #7F8C8D;
    margin: 0;
}

.author-location i {
    color: #FF9933;
    margin-right: 5px;
    font-size: 11px;
}

/* Owl Carousel Navigation */

.owl-nav {
    display: flex;
    justify-content: end;
    gap: 15px;
    margin-top: 15px !important;
}

.owl-prev,
.owl-next {
    width: 45px;
    height: 45px;
    border-radius: 50% !important;
    background: white !important;
    border: 1px solid #2E7D32 !important;
    color: #2E7D32 !important;
    font-size: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.owl-prev:hover,
.owl-next:hover {
    background: var(--hover);
    color: var(--primary);
    transform: scale(1.1);
}

/* Owl Dots */
.owl-dots {
    text-align: center;
    margin-top: 20px;
}

/* 
.owl-dot {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background: #E0E0E0 !important;
    transition: all 0.3s ease;
}

.owl-dot.active {
    background: #FF9933 !important;
    width: 30px;
    border-radius: 20px;
} */

/* Responsive */
@media (max-width: 991px) {
    .testimonial-card {
        padding: 25px 20px;
    }

    .testimonial-content p {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .testimonials-section {
        padding: 40px 0;
    }

    .testimonial-card {
        padding: 20px 15px;
    }

    .author-img {
        width: 50px !important;
        height: 50px !important;
    }

    .author-info h4 {
        font-size: 16px;
    }

    .owl-prev,
    .owl-next {
        width: 35px;
        height: 35px;
        font-size: 16px !important;
    }
}

/* testimonial section */


/* newsletter section */

/* Newsletter Main Container */
.home-newsletter.ayur-newsletter {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    margin: 0;
    border: none;
}

/* Decorative Background Elements */
/* .home-newsletter.ayur-newsletter:before {
    content: '🌿🌿🌿';
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 150px;
    opacity: 0.1;
    transform: rotate(15deg);
    white-space: nowrap;
    pointer-events: none;
}

.home-newsletter.ayur-newsletter:after {
    content: '🌱🌱🌱';
    position: absolute;
    bottom: -30px;
    left: -30px;
    font-size: 150px;
    opacity: 0.1;
    transform: rotate(-15deg);
    white-space: nowrap;
    pointer-events: none;
} */

/* Newsletter Single Container */

.home-newsletter .single {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    padding: 40px;
    backdrop-filter: blur(10px);
    border: 2px solid rgb(231 231 231);
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}


/* Heading Styling */

.home-newsletter h2 {
    font-family: "Poppins", sans-serif;
    font-size: 42px;
    font-weight: 500;
    color: #000000;
    margin: 15px 0 10px;
    text-align: center;
    text-transform: none;
    position: relative;
    padding-bottom: 15px;
}


/* Sanskrit Subtitle */
.newsletter-subtitle {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    color: #8B5A2B;
    text-align: center;
    margin: 5px 0;
    font-style: italic;
}

.newsletter-subtitle-en {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #5D6D7E;
    text-align: center;
    margin-bottom: 30px;
    font-style: italic;
}

/* Input Group - Preserving Original Structure */
.home-newsletter .input-group {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 25px;
    position: relative;
}

/* Input Field Styling */
.newsletter-input {
    height: 60px !important;
    border: 2px solid #E0E0E0 !important;
    border-radius: 50px !important;
    padding: 0 140px 0 25px !important;
    font-size: 16px !important;
    font-family: "Poppins", sans-serif !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.newsletter-input:focus {
    border-color: var(--primary) !important;
    outline: none !important;
}

/* Button Styling */
.newsletter-btn {
    position: absolute !important;
    right: 5px !important;
    top: 5px !important;
    height: 50px !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-herbal-green)) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0 25px !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    font-family: "Poppins", sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.newsletter-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.newsletter-btn:hover {
    background: linear-gradient(135deg, #E67E22, #D35400) !important;
}

.newsletter-btn:hover i {
    transform: rotate(15deg);
}

/* Benefits List */
.newsletter-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 25px 0 20px;
}

.newsletter-benefits span {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #414141;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.newsletter-benefits i {
    color: #2E7D32;
    font-size: 14px;
}

/* Privacy Note */
.newsletter-privacy {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #7F8C8D;
    text-align: center;
    margin: 20px 0 0;
}

.newsletter-privacy i {
    color: #FF9933;
    margin-right: 5px;
}

.privacy-link {
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.privacy-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Alert Messages - Preserving Functionality */
.home-newsletter script {
    display: none;
}

/* Responsive Design */
@media (max-width: 991px) {
    .home-newsletter .single {
        padding: 30px 20px;
        margin: 0 15px;
    }

    .home-newsletter h2 {
        font-size: 32px;
    }

    .newsletter-benefits {
        gap: 15px;
    }

    .newsletter-benefits span {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .home-newsletter.ayur-newsletter {
        padding: 40px 0;
    }

    .home-newsletter h2 {
        font-size: 28px;
    }

    .newsletter-subtitle {
        font-size: 16px;
    }

    .newsletter-subtitle-en {
        font-size: 12px;
    }

    .newsletter-input {
        height: 55px !important;
        padding-right: 120px !important;
        font-size: 14px !important;
    }

    .newsletter-btn {
        height: 45px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }

    .newsletter-benefits {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .newsletter-benefits span {
        width: max-content;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .home-newsletter .single {
        padding: 20px 15px;
    }

    .newsletter-input {
        padding-right: 100px !important;
    }

    .newsletter-btn {
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    .newsletter-btn i {
        display: none;
    }

    .leaf-icon {
        font-size: 18px;
        margin: 0 4px;
    }
}

/* newsletter section */


/* ========================================
   HERB SPOTLIGHT SECTION
======================================== */

.herb-spotlight-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

.herb-spotlight-section.bg-cream {
    background: linear-gradient(135deg, #FDF8F2 0%, #F9F0E6 100%);
}

/* Decorative Background */
.herb-spotlight-section:before {
    content: '🌿🌿🌿';
    position: absolute;
    top: -50px;
    left: -50px;
    font-size: 200px;
    opacity: 0.05;
    transform: rotate(-15deg);
    pointer-events: none;
}

.herb-spotlight-section:after {
    content: '🍂🍂🍂';
    position: absolute;
    bottom: -50px;
    right: -50px;
    font-size: 200px;
    opacity: 0.05;
    transform: rotate(15deg);
    pointer-events: none;
}

/* ===== Left Column - Herb Images ===== */
.herb-image-container {
    position: relative;
    padding: 30px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    border: 2px solid white;
    margin-bottom: 30px;
}

/* Main Herb Image */
.herb-main-image {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
    animation: herbFloat 6s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

@keyframes herbFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

/* Floating Elements */
.herb-floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.floating-element {
    position: absolute;
    animation: floating 4s ease-in-out infinite;
}

.floating-element img {
    width: 50px;
    height: auto;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

.floating-element.leaf-1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.floating-element.root-1 {
    bottom: 20%;
    right: 15%;
    animation-delay: 0.5s;
}

.floating-element.berry-1 {
    top: 30%;
    right: 20%;
    animation-delay: 1s;
}

.floating-element.flower-1 {
    bottom: 30%;
    left: 15%;
    animation-delay: 1.5s;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

/* Herb Names Card */
.herb-names-card {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(46, 125, 50, 0.2);
    text-align: center;
    white-space: nowrap;
    border: 2px solid #FF9933;
    z-index: 4;
    animation: cardGlow 3s ease-in-out infinite;
}

@keyframes cardGlow {

    0%,
    100% {
        box-shadow: 0 10px 30px rgba(46, 125, 50, 0.2);
    }

    50% {
        box-shadow: 0 15px 40px rgba(255, 153, 51, 0.3);
    }
}

.herb-names-card .sanskrit-name {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #8B5A2B;
    margin: 0;
    line-height: 1.2;
}

.herb-names-card .latin-name {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    color: #5D6D7E;
    font-style: italic;
    margin: 5px 0 0;
}

/* ===== Right Column - Herb Content ===== */
.herb-spotlight-content {
    padding: 40px 0 40px 30px;
}

/* Badges */
.herb-badge {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.badge-organic {
    background: #2E7D32;
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.2);
}

.badge-traditional {
    background: #FF9933;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(255, 153, 51, 0.2);
}

/* Herb Title */
.herb-title {
    font-family: "Poppins", sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
    line-height: 1.2;
    position: relative;
    display: inline-block;
}

.herb-title:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #FF9933, #2E7D32);
    border-radius: 3px;
}

/* Scientific Names */
.herb-scientific {
    margin-bottom: 25px;
}

.herb-scientific .sanskrit {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #FF9933;
    display: block;
    margin-bottom: 5px;
}

.herb-scientific .common-names {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #5D6D7E;
    font-style: italic;
}

/* Description */
.herb-description {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #5D6D7E;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 15px;
    border-left: 4px solid #FF9933;
}

.herb-description strong {
    color: #2E7D32;
    font-weight: 600;
}

/* Benefits Grid */
.herb-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateX(5px);
    box-shadow: 0 10px 25px rgba(46, 125, 50, 0.1);
}

.benefit-icon {
    width: 50px;
    height: 50px;
    background: #F0F7E6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #2E7D32;
    transition: all 0.3s ease;
}

.benefit-item:hover .benefit-icon {
    background: #2E7D32;
    color: white;
    transform: rotate(360deg);
}

.benefit-text h4 {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #8B5A2B;
    margin: 0 0 5px;
}

.benefit-text p {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    color: #7F8C8D;
    margin: 0;
}

/* Action Buttons */
.herb-actions {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.btn-ayur-primary {
    background: #2E7D32;
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid #2E7D32;
}

.btn-ayur-primary:hover {
    background: #8B5A2B;
    border-color: #8B5A2B;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(46, 125, 50, 0.3);
}

.btn-ayur-outline {
    background: transparent;
    color: #2E7D32;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid #2E7D32;
}


/* Quick Facts */
.herb-quick-facts {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    border-top: 2px dashed #E0E0E0;
}

.fact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #5D6D7E;
    background: #F5F5F5;
    padding: 8px 15px;
    border-radius: 50px;
}

.fact-item i {
    color: #FF9933;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 991px) {
    .herb-title {
        font-size: 42px;
    }

    .herb-benefits-grid {
        grid-template-columns: 1fr;
    }

    .herb-actions {
        flex-direction: column;
    }

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

@media (max-width: 767px) {
    .herb-spotlight-content {
        padding: 30px 0 0;
    }

    .herb-title {
        font-size: 36px;
    }

    .herb-names-card {
        position: relative;
        bottom: 0;
        margin-top: 20px;
        white-space: normal;
    }

    .herb-names-card .sanskrit-name {
        font-size: 18px;
    }

    .herb-badge {
        justify-content: center;
    }

    .herb-quick-facts {
        flex-wrap: wrap;
        justify-content: center;
    }

    .floating-element img {
        width: 35px;
    }
}

@media (max-width: 480px) {
    .herb-title {
        font-size: 28px;
    }

    .herb-description {
        font-size: 14px;
        padding: 15px;
    }

    .benefit-item {
        padding: 10px;
    }

    .benefit-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .benefit-text h4 {
        font-size: 14px;
    }

    .benefit-text p {
        font-size: 11px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .herb-spotlight-section.bg-cream {
        background: linear-gradient(135deg, #2A2A2A 0%, #1F1F1F 100%);
    }

    .herb-image-container {
        background: rgba(50, 50, 50, 0.5);
    }

    .herb-names-card {
        background: #333;
    }

    .herb-names-card .sanskrit-name {
        color: #FF9933;
    }

    .herb-description {
        background: rgba(0, 0, 0, 0.3);
        color: #E0E0E0;
    }

    .benefit-item {
        background: #333;
    }

    .benefit-text h4 {
        color: #FF9933;
    }

    .benefit-text p {
        color: #B0B0B0;
    }

    .fact-item {
        background: #333;
        color: #B0B0B0;
    }
}


/* footer */

/* Main Footer */
.ayur-footer {
    background: #262726;
    color: var(--secondary);
    position: relative;
    overflow: hidden;
}

/* Decorative Background */
.ayur-footer:before {
    content: '🌿';
    position: absolute;
    top: -50px;
    right: -50px;
    font-size: 200px;
    opacity: 0.03;
    transform: rotate(15deg);
    pointer-events: none;
}

.ayur-footer:after {
    content: '🍂🍂';
    position: absolute;
    bottom: -50px;
    left: -50px;
    font-size: 200px;
    opacity: 0.03;
    transform: rotate(-15deg);
    pointer-events: none;
}

/* Footer Main Content */
.footer-main {
    padding: 70px 0 40px;
    position: relative;
    z-index: 2;
}

/* Footer Widgets */
.footer-widget {
    margin-bottom: 30px;
}

.footer-widget h4 {
    font-family: "Poppins", sans-serif;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 25px;
    padding-bottom: 15px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-widget h4:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(to right, #FF9933, #2E7D32);
    border-radius: 3px;
}

.footer-widget h4:before {
    content: '🌿';
    position: absolute;
    right: 0;
    bottom: -5px;
    font-size: 20px;
    opacity: 0.3;
}

/* Footer Logo */
.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img {
    max-height: 60px;
    border-radius: .5rem;
}

/* Footer About Text */
.footer-about p {
    font-size: 14px;
    line-height: 1.8;
    color: #ffffff;
    margin-bottom: 20px;
}

/* Ayurvedic Signature */
.ayur-signature {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 3px solid #FF9933;
}

.ayur-signature .sanskrit {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #FF9933;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.ayur-signature .meaning {
    font-size: 12px;
    color: #a3a3a3;
    font-style: italic;
}

/* Social Icons */
.footer-social h4 {
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.footer-social h4:after {
    width: 30px;
}

.social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.social-icons li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 153, 51, 0.3);
}

.social-icons li a:hover {
    background: #FF9933;
    color: #1a2e1a;
    transform: translateY(-5px);
    border-color: #FF9933;
    box-shadow: 0 5px 15px rgba(255, 153, 51, 0.3);
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links li a {
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links li a i {
    margin-right: 8px;
    color: #FF9933;
    font-size: 12px;
    transition: all 0.3s ease;
}

.footer-links li a:hover {
    color: #FF9933;
    transform: translateX(5px);
}

.footer-links li a:hover i {
    transform: translateX(3px);
}

/* Contact Info */
.contact-info {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
}

.contact-info .icon {
    width: 30px;
    flex-shrink: 0;
}

.contact-info .icon i {
    color: #FF9933;
    font-size: 16px;
}

.contact-info .text {
    flex: 1;
}

.contact-info .text p {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.contact-info .text a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info .text a:hover {
    color: #FF9933;
}

/* Footer Newsletter */
.footer-newsletter {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-newsletter h5 {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

.footer-newsletter-form .input-group {
    display: flex;
    width: 100%;
}

.footer-newsletter-form input {
    flex: 1;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 153, 51, 0.3);
    border-radius: 50px 0 0 50px;
    padding: 0 15px;
    color: #fff;
    font-size: 13px;
}

.footer-newsletter-form input:focus {
    outline: none;
    border-color: #FF9933;
    background: rgba(255, 255, 255, 0.15);
}

.footer-newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.footer-newsletter-form .btn-subscribe {
    height: 40px;
    width: 40px;
    background: #FF9933;
    border: none;
    border-radius: 0 50px 50px 0;
    color: #1a2e1a;
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer-newsletter-form .btn-subscribe:hover {
    background: #2E7D32;
    color: #fff;
}

/* Footer Divider */
.footer-divider {
    position: relative;
    z-index: 2;
}

.divider-pattern {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.divider-pattern span {
    display: inline-block;
    margin: 0 15px;
    font-size: 24px;
}

.divider-pattern .leaf {
    color: #FF9933;
    animation: leafFloat 3s ease-in-out infinite;
}

.divider-pattern .om {
    font-family: serif;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
}

.divider-pattern .leaf:nth-child(1) {
    animation-delay: 0s;
}

.divider-pattern .leaf:nth-child(3) {
    animation-delay: 1.5s;
}

/* Footer Bottom */
.footer-bottom {
    padding: 20px 0;
    background: #ededed;
    position: relative;
    z-index: 2;
}

.copyright p {
    margin: 0;
    font-size: 13px;
    color: #a3a3a3;
}

.copyright .ayur-text {
    color: #FF9933;
    font-style: italic;
}

.footer-bottom-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

.footer-bottom-links ul li {
    display: inline-block;
    margin-left: 20px;
}

.footer-bottom-links ul li a {
    color: #1b1b1b;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links ul li a:hover {
    color: #FF9933;
}

/* Scroll to Top */
.scrollup {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: none;
}

.scrollup i {
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    background: #FF9933;
    color: #1a2e1a;
    text-align: center;
    font-size: 20px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.scrollup i:hover {
    background: #2E7D32;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
    .footer-main {
        padding: 50px 0 20px;
    }

    .footer-widget {
        margin-bottom: 40px;
    }

    .footer-bottom-links ul {
        text-align: left;
        margin-top: 10px;
    }

    .footer-bottom-links ul li {
        margin-left: 0;
        margin-right: 20px;
    }
}

@media (max-width: 767px) {
    .footer-main {
        padding: 40px 0 10px;
    }

    .footer-widget h4 {
        margin-bottom: 20px;
    }

    .divider-pattern span {
        margin: 0 8px;
        font-size: 20px;
    }

    .footer-bottom-links ul li {
        display: block;
        margin-bottom: 8px;
        margin-right: 0;
    }

    .scrollup {
        bottom: 15px;
        right: 15px;
    }

    .scrollup i {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 16px;
    }
}

/* Animations */
@keyframes leafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* footer */


/* login page */

/* ========================================
   AYURVEDIC LOGIN PAGE STYLES - LIGHT MODE ONLY
   Frontend Only - Backend Code Preserved
======================================== */

/* Login Page Banner */
.ayur-login-banner {
    position: relative;
    min-height: 250px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayur-login-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255 255 255 / 80%), rgb(94 94 94));
    z-index: 1;
}

.ayur-login-banner .container {
    position: relative;
    z-index: 2;
}

.ayur-login-banner .banner-content {
    text-align: center;
    color: white;
    padding: 60px 0;
}

.ayur-login-banner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.ayur-login-banner .banner-subtitle {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    opacity: 0.9;
    margin: 0;
}

/* Login Page Container */
.ayur-login-page {
    padding: 60px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* .ayur-login-page:before {
    content: '🌿🌿🌿';
    position: absolute;
    top: -50px;
    left: -50px;
    font-size: 200px;
    opacity: 0.05;
    transform: rotate(-15deg);
    pointer-events: none;
}

.ayur-login-page:after {
    content: '🌿🌿🌿';
    position: absolute;
    bottom: -50px;
    right: -50px;
    font-size: 200px;
    opacity: 0.05;
    transform: rotate(15deg);
    pointer-events: none;
} */

/* Login Container */
.ayur-login-container {
    background: white;
    border-radius: 20px;
    padding: 50px 40px;
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid rgba(255, 153, 51, 0.2);
}

/* Decorative Elements */
.login-decorative {
    text-align: center;
    margin-bottom: 20px;
}

.login-decorative .leaf-icon {
    font-size: 24px;
    color: #2E7D32;
    margin: 0 10px;
    animation: leafFloat 3s ease-in-out infinite;
}

.login-decorative .om-icon {
    font-size: 32px;
    color: #FF9933;
    margin: 0 10px;
    font-family: serif;
}

.login-decorative .leaf-icon:nth-child(1) {
    animation-delay: 0s;
}

.login-decorative .leaf-icon:nth-child(3) {
    animation-delay: 1.5s;
}

@keyframes leafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* Login Header */
.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h2 {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    color: #8B5A2B;
    margin: 0 0 10px;
}

.login-header p {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    color: #7F8C8D;
    margin: 0;
}

/* Alert Messages */
.ayur-alert {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid transparent;
}

.ayur-alert i {
    font-size: 18px;
}

.ayur-alert-error {
    background: #fee9e9;
    color: #c62828;
    border-left-color: #c62828;
}

.ayur-alert-success {
    background: #e8f5e9;
    color: #2E7D32;
    border-left-color: #2E7D32;
}

/* Form Groups */
.ayur-form-group {
    margin-bottom: 25px;
}

.ayur-form-group label {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5D6D7E;
    margin-bottom: 8px;
    display: block;
}

.ayur-form-group label i {
    color: #FF9933;
    margin-right: 8px;
    font-size: 14px;
}

.ayur-form-group .required {
    color: #FF9933;
}

/* Input Fields */
.ayur-input {
    height: 50px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 20px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 100%;
    background: white;
}

.ayur-input:focus {
    border-color: #FF9933;
    box-shadow: 0 0 15px rgba(255, 153, 51, 0.1);
    outline: none;
}

.ayur-input::placeholder {
    color: #b0b0b0;
    font-size: 13px;
}

/* Form Options */
.ayur-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2E7D32;
    cursor: pointer;
}

.remember-me label {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #5D6D7E;
    cursor: pointer;
    margin: 0;
}

.forgot-password {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #FF9933;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.forgot-password:hover {
    color: #2E7D32;
    text-decoration: none;
}

.forgot-password i {
    font-size: 14px;
}

/* Submit Button */
.ayur-form-submit {
    margin-bottom: 25px;
}

.ayur-btn-primary {
    width: 100%;
    height: 55px;
    background: var(--primary);
    border: none;
    border-radius: 50px;
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid transparent;
}

.ayur-btn-primary:hover {
    background: var(--hover);
    transform: translateY(-3px);
    color: #fff;
}

.ayur-btn-primary i {
    font-size: 18px;
}

/* Register Link */
.register-link {
    text-align: center;
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px dashed #e0e0e0;
}

.register-link p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #7F8C8D;
    margin: 0;
}

.register-link a {
    color: #2E7D32;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.register-link a:hover {
    color: #FF9933;
    text-decoration: underline;
}

/* Ayurvedic Quote */
.login-quote {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    border-left: 4px solid #FF9933;
}

.login-quote i {
    color: #FF9933;
    font-size: 20px;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

.login-quote p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: italic;
    color: #8B5A2B;
    margin: 0 0 5px;
    line-height: 1.6;
}

.login-quote span {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    color: #7F8C8D;
    display: block;
}

/* Responsive Design */
@media (max-width: 991px) {
    .ayur-login-container {
        padding: 40px 30px;
        margin: 0 20px;
    }

    .login-header h2 {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .ayur-login-banner h1 {
        font-size: 36px;
    }

    .ayur-login-banner .banner-subtitle {
        font-size: 16px;
    }

    .ayur-login-container {
        padding: 30px 20px;
    }

    .login-header h2 {
        font-size: 26px;
    }

    .ayur-form-options {
        flex-direction: column;
        align-items: flex-start;
    }

    .login-quote p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .ayur-login-container {
        padding: 25px 15px;
    }

    .login-header h2 {
        font-size: 24px;
    }

    .ayur-input {
        height: 45px;
    }

    .ayur-btn-primary {
        height: 50px;
        font-size: 14px;
    }

    .login-quote p {
        font-size: 14px;
    }
}

/* login page */


/* Register page */

/* ========================================
   AYURVEDIC REGISTRATION PAGE STYLES
======================================== */

/* Registration Page Banner */
.ayur-register-banner {
    position: relative;
    min-height: 250px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayur-register-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.508), rgba(255, 153, 51, 0.579));
    z-index: 1;
}

.ayur-register-banner .banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 60px 0;
}

.ayur-register-banner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.ayur-register-banner .banner-subtitle {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    opacity: 0.9;
    margin: 0;
}

/* Registration Page Container */
.ayur-register-page {
    padding: 60px 0;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
}

.ayur-register-page:before {
    content: '🌿🌿🌿';
    position: absolute;
    top: -50px;
    left: -50px;
    font-size: 200px;
    opacity: 0.05;
    transform: rotate(-15deg);
    pointer-events: none;
}

.ayur-register-page:after {
    content: '🌿🌿🌿';
    position: absolute;
    bottom: -50px;
    right: -50px;
    font-size: 200px;
    opacity: 0.05;
    transform: rotate(15deg);
    pointer-events: none;
}

/* Registration Container */
.ayur-register-container {
    background: white;
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 153, 51, 0.2);
}

/* Decorative Elements */
.register-decorative {
    text-align: center;
    margin-bottom: 20px;
}

.register-decorative .leaf-icon {
    font-size: 24px;
    color: #2E7D32;
    margin: 0 10px;
    animation: leafFloat 3s ease-in-out infinite;
}

.register-decorative .om-icon {
    font-size: 32px;
    color: #FF9933;
    margin: 0 10px;
    font-family: serif;
}

/* Register Header */
.register-header {
    text-align: center;
    margin-bottom: 30px;
}

.register-header h2 {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    color: #8B5A2B;
    margin: 0 0 10px;
}

.register-header p {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    color: #7F8C8D;
    margin: 0;
}

/* Benefits Cards */
.register-benefits {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.benefit-card {
    background: #F0F7E6;
    padding: 15px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #2E7D32;
    border: 1px solid rgba(46, 125, 50, 0.2);
    transition: all 0.3s ease;
}

.benefit-card:hover {
    background: #2E7D32;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(46, 125, 50, 0.2);
}

.benefit-card i {
    font-size: 16px;
}

/* Form Section Title */
.form-section-title {
    margin: 30px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px dashed #FF9933;
}

.form-section-title h3 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    color: #8B5A2B;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section-title h3 i {
    color: #FF9933;
    font-size: 20px;
}

/* Textarea Field */
.ayur-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    resize: vertical;
    min-height: 100px;
}

.ayur-textarea:focus {
    border-color: #FF9933;
    box-shadow: 0 0 15px rgba(255, 153, 51, 0.1);
    outline: none;
}

/* Select Field */
.ayur-select {
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 15px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    width: 100%;
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
}

.ayur-select:focus {
    border-color: #FF9933;
    box-shadow: 0 0 15px rgba(255, 153, 51, 0.1);
    outline: none;
}

/* Hint Text */
.ayur-hint {
    font-size: 12px;
    color: #7F8C8D;
    margin-top: 5px;
    display: block;
    font-style: italic;
}

/* Terms & Conditions */
.ayur-terms {
    margin: 25px 0;
    padding: 15px;
    background: #F8F9FA;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ayur-terms input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2E7D32;
    cursor: pointer;
}

.ayur-terms label {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #5D6D7E;
    cursor: pointer;
    margin: 0;
}

.ayur-terms a {
    color: #FF9933;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.ayur-terms a:hover {
    color: #2E7D32;
    text-decoration: underline;
}

/* Login Link */
.login-link {
    text-align: center;
    margin: 25px 0;
    padding-top: 20px;
    border-top: 1px dashed #e0e0e0;
}

.login-link p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #7F8C8D;
    margin: 0;
}

.login-link a {
    color: #2E7D32;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.login-link a:hover {
    color: #FF9933;
    text-decoration: underline;
}

/* Registration Quote */
.register-quote {
    background: linear-gradient(135deg, #FDF8F2, #F9F0E6);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    margin-top: 30px;
    border: 1px solid rgba(255, 153, 51, 0.2);
}

.register-quote i {
    color: #FF9933;
    font-size: 24px;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

.register-quote p {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #8B5A2B;
    margin: 0 0 10px;
    line-height: 1.6;
    font-style: italic;
}

.register-quote span {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #7F8C8D;
    display: block;
}

/* Responsive */
@media (max-width: 991px) {
    .ayur-register-container {
        padding: 40px 30px;
        margin: 0 20px;
    }

    .register-header h2 {
        font-size: 30px;
    }

    .benefit-card {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .ayur-register-banner h1 {
        font-size: 36px;
    }

    .ayur-register-banner .banner-subtitle {
        font-size: 16px;
    }

    .ayur-register-container {
        padding: 30px 20px;
    }

    .register-header h2 {
        font-size: 26px;
    }

    .form-section-title h3 {
        font-size: 20px;
    }

    .register-quote p {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .ayur-register-container {
        padding: 25px 15px;
    }

    .register-header h2 {
        font-size: 24px;
    }

    .ayur-input,
    .ayur-select,
    .ayur-textarea {
        font-size: 13px;
    }

    .benefit-card {
        font-size: 12px;
    }

    .register-quote p {
        font-size: 16px;
    }
}

/* Register page */




/* cart page */

/* ========================================
   AYURVEDIC CART PAGE STYLES - LIGHT MODE ONLY
======================================== */

/* Cart Page Banner */
.ayur-cart-banner {
    position: relative;
    min-height: 250px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayur-cart-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(46 125 50 / 29%), rgb(139 90 43 / 24%));
    z-index: 1;
}

.ayur-cart-banner .container {
    position: relative;
    z-index: 2;
}

.ayur-cart-banner .banner-content {
    text-align: center;
    color: white;
    padding: 60px 0;
}

.ayur-cart-banner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.ayur-cart-banner .banner-subtitle {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    opacity: 0.9;
    margin: 0;
}

/* Cart Page Container */
.ayur-cart-page {
    padding: 60px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* .ayur-cart-page:before {
    content: '🌿🌿🌿';
    position: absolute;
    top: -50px;
    left: -50px;
    font-size: 200px;
    opacity: 0.05;
    transform: rotate(-15deg);
    pointer-events: none;
}

.ayur-cart-page:after {
    content: '🌿🌿🌿';
    position: absolute;
    bottom: -50px;
    right: -50px;
    font-size: 200px;
    opacity: 0.05;
    transform: rotate(15deg);
    pointer-events: none;
} */

/* Cart Header */
.cart-header {
    text-align: center;
    margin-bottom: 40px;
}

.cart-decorative {
    margin-bottom: 20px;
}

.cart-decorative .leaf-icon {
    font-size: 24px;
    color: #2E7D32;
    margin: 0 10px;
    animation: leafFloat 3s ease-in-out infinite;
}

.cart-decorative .om-icon {
    font-size: 32px;
    color: #FF9933;
    margin: 0 10px;
    font-family: serif;
}

.cart-header h2 {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    color: #8B5A2B;
    margin: 0 0 10px;
}

.cart-header p {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    color: #7F8C8D;
    margin: 0;
}

/* Empty Cart State */
.empty-cart-state {
    text-align: center;
    padding: 60px 40px;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid rgb(225 225 225);
}

.empty-cart-icon {
    width: 120px;
    height: 120px;
    background: #F0F7E6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 50px;
    color: #2E7D32;
    border: 2px dashed #FF9933;
    animation: cartPulse 2s ease-in-out infinite;
}

@keyframes cartPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.empty-cart-state h2 {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    color: #8B5A2B;
    margin: 0 0 15px;
}

.empty-cart-state p {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #7F8C8D;
    margin: 0 0 30px;
}

.empty-cart-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.btn-ayur-primary {
    background: #2E7D32;
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid #2E7D32;
}

.btn-ayur-primary:hover {
    background: #FF9933;
    border-color: #FF9933;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 153, 51, 0.3);
}

.btn-ayur-outline {
    background: transparent;
    color: #2E7D32;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid #2E7D32;
}


.empty-cart-quote {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 15px;
    border-left: 4px solid #FF9933;
}

.empty-cart-quote i {
    color: #FF9933;
    font-size: 20px;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

.empty-cart-quote p {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-style: italic;
    color: #8B5A2B;
    margin: 0 0 5px;
}

.empty-cart-quote span {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #7F8C8D;
}

/* Cart Table */
.ayur-cart-table-container {
    background: white;
    border-radius: 18px;
    padding: 11px;
    margin-bottom: 30px;
    border: 1px solid rgb(0 0 0 / 34%);
    overflow-x: auto;
}

.ayur-cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 15px;
    margin: 0;
}

.ayur-cart-table thead th {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: #000000;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    padding: 12px 10px;
    background: #f3f3f3;
    border: none;
    white-space: nowrap;
}

.ayur-cart-table thead th:first-child {
    border-radius: 6px 0 0 6px;
}

.ayur-cart-table thead th:last-child {
    border-radius: 0 6px 6px 0;
}

.ayur-cart-table tbody tr {
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.ayur-cart-table tbody tr:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.1);
    transform: translateY(-2px);
}

.ayur-cart-table tbody td {
    padding: 12px 11px;
    vertical-align: middle;
    border: none;
    border-top: 1px solid #e0e0e0;
    font-family: var(--font-body);
}

/* Cart Product Thumbnail */
.cart-product-thumb {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #FF9933;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.cart-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cart Product Name */
.cart-name h4 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin: 0;
}

/* Cart Attributes */
.cart-attribute {
    display: inline-block;
    padding: 6px 12px;
    background: white;
    border-radius: 50px;
    font-size: 13px;
    color: #5D6D7E;
    border: 1px solid #e0e0e0;
}

.color-attribute {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Cart Price */
.cart-price .price {
    font-size: 16px;
    font-weight: 600;
    color: #191919;
}

/* Quantity Selector */
.quantity-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 120px;
}


.quantity-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    transition: all 0.3s ease;
    font-family: var(--font-body);
}

.quantity-btn:hover {
    background: #ff9933;
    border-color: #ff9933;
    color: #fff;
}

.quantity-input {
    width: 50px;
    height: 40px;
    text-align: center;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    font-family: var(--font-body);
}

.quantity-input:focus {
    outline: none;
    border-color: #c6c6c6;
}

/* Cart Total */
.cart-total .total-price {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    font-family: var(--font-body);
}



/* Cart Remove Button */
.cart-remove {
    color: #c62828;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 50px;
    background: #fee9e9;
    font-family: var(--font-body);
}

.cart-remove i {
    font-size: 13px;
}

.cart-remove .remove-text {
    font-size: 12px;
    font-weight: 500;
}

.cart-remove:hover {
    background: #c62828;
    color: white;
}

/* Cart Summary Row */
.cart-summary {
    background: #fafafa !important;
    border-radius: 10px;
}

.cart-summary td {
    border-top: 2px solid #d1d1d1 !important;
    font-weight: 600;
    font-family: var(--font-body);
}

.summary-label strong {
    color: #2D2D2D;
    font-size: 15px;
    font-family: var(--font-body);
    font-weight: 600;
}

.summary-qty span {
    color: #000000;
    font-size: 15px;
    font-family: var(--font-body);
    font-weight: 600;
}

.summary-total strong {
    color: var(--secondary);
    font-weight: 600;
    font-size: 16px;
    font-family: var(--font-body);
}

/* Cart Actions */
.cart-actions {
    margin-top: 30px;
}

.cart-info-box {
    background: white;
    padding: 15px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #d3d3d3;
    border-left: 4px solid #FF9933;
}

.cart-info-box i {
    font-size: 24px;
    color: #2E7D32;
}

.cart-info-box span {
    font-size: 14px;
    color: #5D6D7E;
}

.cart-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-cart-update,
.btn-cart-continue,
.btn-cart-checkout {
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-cart-update {
    background: #2E7D32;
    color: white;
}

.btn-cart-update:hover {
    background: var(--hover);
}

.btn-cart-continue {
    background: #f8f9fa;
    color: #5D6D7E;
    border: 2px solid #e0e0e0;
}

.btn-cart-continue:hover {
    color: rgb(0, 0, 0);
}

.btn-cart-checkout {
    background: var(--primary);
    color: white;
}

.btn-cart-checkout:hover {
    background: #ffffff;
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

/* Related Products */
.cart-related {
    margin-top: 100px;
}

.related-header {
    text-align: center;
    margin-bottom: 30px;
}

.related-header h3 {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    color: #8B5A2B;
    margin: 0 0 5px;
}

.related-header p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #7F8C8D;
}


/* Responsive Design */
@media (max-width: 991px) {
    .ayur-cart-table thead {
        display: none;
    }

    .ayur-cart-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border-radius: 10px;
        padding: 15px;
    }

    .ayur-cart-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border: none;
        border-bottom: 1px dashed #e0e0e0;
    }

    .ayur-cart-table tbody td:last-child {
        border-bottom: none;
    }

    .ayur-cart-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #000000;
        margin-right: 15px;
        font-size: 13px;
    }

    .cart-product-thumb {
        width: 60px;
        height: 60px;
    }

    .cart-buttons {
        justify-content: center;
        margin-top: 20px;
    }

    .cart-info-box {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .ayur-cart-banner h1 {
        font-size: 36px;
    }

    .ayur-cart-banner .banner-subtitle {
        font-size: 16px;
    }

    .cart-header h2 {
        font-size: 28px;
    }

    .empty-cart-state {
        padding: 40px 20px;
    }

    .empty-cart-actions {
        flex-direction: column;
    }

    .btn-cart-update,
    .btn-cart-continue,
    .btn-cart-checkout {
        width: 100%;
        justify-content: center;
    }

    .related-product-card {
        max-width: 280px;
        margin: 0 auto 20px;
    }
}

@media (max-width: 480px) {
    .ayur-cart-table-container {
        padding: 15px;
    }

    .cart-header h2 {
        font-size: 24px;
    }

    .cart-decorative .leaf-icon,
    .cart-decorative .om-icon {
        font-size: 20px;
        margin: 0 5px;
    }

    .quantity-selector {
        max-width: 100px;
    }

    .quantity-btn {
        width: 25px;
        height: 25px;
    }

    .quantity-input {
        width: 40px;
        height: 35px;
    }
}

/* Animation */
@keyframes leafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* cart page */

/* about page */

/* ========================================
   AYURVEDIC ABOUT US PAGE STYLES - LIGHT MODE ONLY
======================================== */

/* About Page Banner */
.ayur-about-banner {
    position: relative;
    min-height: 350px;
    background-size: cover;
    background-position: top;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayur-about-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(46 125 50 / 20%), rgb(139 90 43 / 0%));
    z-index: 1;
}

.ayur-about-banner .container {
    position: relative;
    z-index: 2;
}

.ayur-about-banner .banner-content {
    text-align: center;
    color: white;
    padding: 80px 0;
}

.ayur-about-banner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 56px;
    font-weight: 700;
    margin: 0 0 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.ayur-about-banner .banner-subtitle {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    opacity: 0.95;
    margin: 0;
    font-weight: 300;
}

/* About Page Container */
.ayur-about-page {
    padding: 60px 0;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
}

.ayur-about-page:before {
    content: '🌿🌿🌿';
    position: absolute;
    top: -50px;
    left: -50px;
    font-size: 200px;
    opacity: 0.03;
    transform: rotate(-15deg);
    pointer-events: none;
}

.ayur-about-page:after {
    content: '🌿🌿🌿';
    position: absolute;
    bottom: -50px;
    right: -50px;
    font-size: 200px;
    opacity: 0.03;
    transform: rotate(15deg);
    pointer-events: none;
}

/* About Content Wrapper */
.about-content-wrapper {
    background: white;
    border-radius: 30px;
    padding: 50px;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 153, 51, 0.15);
}

/* Decorative Elements */
.about-decorative {
    text-align: center;
    margin-bottom: 30px;
}

.about-decorative .leaf-icon {
    font-size: 28px;
    color: #2E7D32;
    margin: 0 12px;
    animation: leafFloat 3s ease-in-out infinite;
}

.about-decorative .om-icon {
    font-size: 36px;
    color: #FF9933;
    margin: 0 12px;
    font-family: serif;
}

.about-decorative .leaf-icon:nth-child(1) {
    animation-delay: 0s;
}

.about-decorative .leaf-icon:nth-child(3) {
    animation-delay: 1.5s;
}

/* About Quote */
.about-quote {
    background: linear-gradient(135deg, #FDF8F2, #F9F0E6);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    border-left: 6px solid #FF9933;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.about-quote i {
    color: #FF9933;
    font-size: 30px;
    opacity: 0.4;
    margin-bottom: 15px;
    display: block;
}

.about-quote p {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #8B5A2B;
    margin: 0 0 15px;
    line-height: 1.6;
    font-style: italic;
}

.about-quote span {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #7F8C8D;
    display: block;
    letter-spacing: 1px;
}

/* Main Content */
.about-main-content {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.9;
    color: #5D6D7E;
    margin-bottom: 40px;
}

.about-main-content p {
    margin-bottom: 20px;
}

.about-main-content h2 {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    color: #8B5A2B;
    margin: 30px 0 20px;
}

.about-main-content h3 {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    color: #2E7D32;
    margin: 25px 0 15px;
}

.about-main-content ul,
.about-main-content ol {
    margin: 20px 0;
    padding-left: 20px;
}

.about-main-content li {
    margin-bottom: 10px;
}

/* Divider */
.about-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
}

.about-divider .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #FF9933, transparent);
}

.about-divider .leaf-icon {
    font-size: 24px;
    color: #2E7D32;
    animation: leafSpin 4s linear infinite;
}

@keyframes leafSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mission & Vision Cards */
.about-mission-vision {
    margin-bottom: 50px;
}

.mission-card {
    background: #F8F9FA;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid rgba(255, 153, 51, 0.1);
    margin-bottom: 20px;
}

.mission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.1);
    border-color: #FF9933;
}

.card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 32px;
    transition: all 0.3s ease;
}

.mission-card:hover .card-icon {
    background: #FF9933;
    transform: rotateY(180deg);
}

.mission-card h3 {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    color: #8B5A2B;
    margin: 0 0 15px;
}

.mission-card p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #5D6D7E;
    margin: 0;
}

/* Core Values */
.about-values {
    margin-bottom: 50px;
    text-align: center;
}

.about-values h3 {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    color: #8B5A2B;
    margin: 0 0 30px;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.about-values h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #FF9933, #2E7D32);
    border-radius: 3px;
}

.value-item {
    background: white;
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 153, 51, 0.1);
    margin-bottom: 20px;
    height: 100%;
}

.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(46, 125, 50, 0.1);
    border-color: #2E7D32;
}

.value-item i {
    font-size: 40px;
    color: #FF9933;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.value-item:hover i {
    color: #2E7D32;
    transform: scale(1.2);
}

.value-item h4 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    color: #8B5A2B;
    margin: 0 0 8px;
}

.value-item p {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #7F8C8D;
    margin: 0;
}

/* Stats Section */
.about-stats {
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    padding: 50px 30px;
    border-radius: 20px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.about-stats:before {
    content: '🌿🌿🌿';
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 150px;
    opacity: 0.1;
    transform: rotate(15deg);
}

.stat-item {
    text-align: center;
    color: white;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.stat-number {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.stat-label {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

/* Team Section */
.about-team {
    margin-bottom: 50px;
}

.about-team h3 {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    color: #8B5A2B;
    text-align: center;
    margin: 0 0 30px;
    position: relative;
    padding-bottom: 15px;
}

.about-team h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #FF9933, #2E7D32);
    border-radius: 3px;
}

.team-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 153, 51, 0.15);
    margin-bottom: 20px;
    height: 100%;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(46, 125, 50, 0.15);
    border-color: #2E7D32;
}

.team-image {
    height: 250px;
    overflow: hidden;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.1);
}

.team-info {
    padding: 25px 20px;
    text-align: center;
}

.team-info h4 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    color: #8B5A2B;
    margin: 0 0 8px;
}

.team-designation {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #2E7D32;
    margin: 0 0 5px;
}

.team-specialty {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #7F8C8D;
    margin: 0 0 15px;
}

.team-social {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.team-social a {
    width: 35px;
    height: 35px;
    background: #F0F7E6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2E7D32;
    transition: all 0.3s ease;
    border: 1px solid rgba(46, 125, 50, 0.2);
}

.team-social a:hover {
    background: #2E7D32;
    color: white;
    transform: translateY(-3px);
}

/* CTA Section */
.about-cta {
    background: linear-gradient(135deg, #FDF8F2, #F9F0E6);
    padding: 50px;
    border-radius: 20px;
    text-align: center;
    border: 2px dashed #FF9933;
    position: relative;
    overflow: hidden;
}

.about-cta:before {
    content: '🌿';
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 100px;
    opacity: 0.1;
    transform: rotate(-15deg);
}

.about-cta:after {
    content: '🌿';
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 100px;
    opacity: 0.1;
    transform: rotate(15deg);
}

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

.cta-content h3 {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    color: #ffff;
    margin: 0 0 15px;
}

.cta-content p {
    font-size: 16px;
    color: #fff;
    margin: 0 0 25px;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-ayur-primary {
    background: #2E7D32;
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid #2E7D32;
}

.btn-ayur-primary:hover {
    background: #FF9933;
    border-color: #FF9933;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 153, 51, 0.3);
}

.btn-ayur-outline {
    background: transparent;
    color: #2E7D32;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid #2E7D32;
}

.btn-ayur-outline:hover {
    background: #2E7D32;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(46, 125, 50, 0.3);
}

/* Responsive Design */
@media (max-width: 991px) {
    .ayur-about-banner h1 {
        font-size: 42px;
    }

    .ayur-about-banner .banner-subtitle {
        font-size: 18px;
    }

    .about-content-wrapper {
        padding: 40px 30px;
        margin: 0 20px;
    }

    .about-quote p {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .ayur-about-banner h1 {
        font-size: 32px;
    }

    .ayur-about-banner .banner-subtitle {
        font-size: 16px;
    }

    .about-content-wrapper {
        padding: 30px 20px;
    }

    .about-quote p {
        font-size: 18px;
    }

    .about-main-content {
        font-size: 14px;
    }

    .mission-card {
        padding: 25px 20px;
    }

    .stat-number {
        font-size: 32px;
    }

    .cta-content h3 {
        font-size: 26px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

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

@media (max-width: 480px) {
    .about-content-wrapper {
        padding: 20px 15px;
    }

    .about-quote p {
        font-size: 16px;
    }

    .about-quote span {
        font-size: 12px;
    }

    .value-item {
        padding: 20px 15px;
    }

    .value-item i {
        font-size: 30px;
    }

    .value-item h4 {
        font-size: 18px;
    }

    .team-image {
        height: 200px;
    }

    .team-info h4 {
        font-size: 20px;
    }

    .cta-content h3 {
        font-size: 22px;
    }

    .cta-content p {
        font-size: 14px;
    }
}

/* Animation */
@keyframes leafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* about page */


/* FAQ page */

/* ========================================
   AYURVEDIC FAQ PAGE STYLES - LIGHT MODE ONLY
======================================== */

/* FAQ Page Banner */
.ayur-faq-banner {
    position: relative;
    min-height: 300px;
    background-size: cover;
    background-position: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayur-faq-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(46 125 50 / 41%), rgb(255 153 51 / 38%));
    z-index: 1;
}

.ayur-faq-banner .container {
    position: relative;
    z-index: 2;
}

.ayur-faq-banner .banner-content {
    text-align: center;
    color: white;
    padding: 80px 0;
}

.ayur-faq-banner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 52px;
    font-weight: 700;
    margin: 0 0 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.ayur-faq-banner .banner-subtitle {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    opacity: 0.95;
    margin: 0;
    font-weight: 300;
}

/* FAQ Page Container */
.ayur-faq-page {
    padding: 60px 0;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
}

.ayur-faq-page:before {
    content: '❓❓❓';
    position: absolute;
    top: -50px;
    left: -50px;
    font-size: 200px;
    opacity: 0.02;
    transform: rotate(-15deg);
    pointer-events: none;
}

.ayur-faq-page:after {
    content: '❓❓❓';
    position: absolute;
    bottom: -50px;
    right: -50px;
    font-size: 200px;
    opacity: 0.02;
    transform: rotate(15deg);
    pointer-events: none;
}

/* Decorative Elements */
.faq-decorative {
    text-align: center;
    margin-bottom: 30px;
}

.faq-decorative .leaf-icon {
    font-size: 28px;
    color: #2E7D32;
    margin: 0 12px;
    animation: leafFloat 3s ease-in-out infinite;
}

.faq-decorative .om-icon {
    font-size: 36px;
    color: #FF9933;
    margin: 0 12px;
    font-family: serif;
}

.faq-decorative .leaf-icon:nth-child(1) {
    animation-delay: 0s;
}

.faq-decorative .leaf-icon:nth-child(3) {
    animation-delay: 1.5s;
}

/* FAQ Header */
.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-header h2 {
    font-family: "Poppins", sans-serif;
    font-size: 38px;
    color: #8B5A2B;
    margin: 0 0 10px;
}

.faq-header p {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #7F8C8D;
    margin: 0;
}

/* Search Bar */
.faq-search {
    max-width: 500px;
    margin: 0 auto 30px;
}

.search-wrapper {
    position: relative;
}

.search-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #FF9933;
    font-size: 16px;
    z-index: 2;
}

.search-wrapper input {
    width: 100%;
    height: 55px;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    padding: 0 20px 0 45px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    transition: all 0.3s ease;
    background: white;
}

.search-wrapper input:focus {
    outline: none;
    border-color: #FF9933;
    box-shadow: 0 0 20px rgba(255, 153, 51, 0.15);
}

.search-wrapper input::placeholder {
    color: #b0b0b0;
    font-style: italic;
}

/* FAQ Categories */
.faq-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

.faq-category-btn {
    padding: 10px 25px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5D6D7E;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-category-btn:hover {
    border-color: #2E7D32;
    color: #2E7D32;
    transform: translateY(-2px);
}

.faq-category-btn.active {
    background: #2E7D32;
    border-color: #2E7D32;
    color: white;
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.2);
}

/* FAQ Accordion Wrapper */
.faq-accordion-wrapper {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
    border: 1px solid rgba(255, 153, 51, 0.15);
}

/* Ayurvedic Accordion */
.ayur-accordion .panel {
    border: none;
    border-radius: 15px;
    margin-bottom: 20px;
    background: #f8f9fa;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.ayur-accordion .panel:hover {
    box-shadow: 0 8px 25px rgba(46, 125, 50, 0.1);
}

.ayur-accordion .panel-heading {
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 15px !important;
    padding: 0;
    transition: all 0.3s ease;
}

.ayur-accordion .panel-heading:hover {
    border-color: #FF9933;
}

.ayur-accordion .panel-title {
    margin: 0;
}

.ayur-accordion .panel-title a {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    text-decoration: none;
    position: relative;
    color: #8B5A2B;
}

/* FAQ Icon */
.faq-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-icon i {
    color: white;
    font-size: 18px;
}

.ayur-accordion .panel-title a:hover .faq-icon {
    background: #FF9933;
    transform: rotate(360deg);
}

/* FAQ Question */
.faq-question {
    flex: 1;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #8B5A2B;
    line-height: 1.5;
}

/* FAQ Indicator */
.faq-indicator {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-left: 15px;
}

.faq-indicator i {
    color: #FF9933;
    font-size: 16px;
    transition: all 0.3s ease;
}

.ayur-accordion .panel-title a.collapsed .faq-indicator i {
    transform: rotate(-90deg);
    color: #2E7D32;
}

.ayur-accordion .panel-title a:not(.collapsed) .faq-indicator i {
    transform: rotate(0deg);
    color: #FF9933;
}

/* Panel Body */
.ayur-accordion .panel-collapse {
    border-top: 2px dashed rgba(255, 153, 51, 0.3);
}

.ayur-accordion .panel-body {
    padding: 25px;
    background: white;
    border-radius: 0 0 15px 15px;
}

/* Answer Badge */
.answer-badge {
    margin-bottom: 20px;
}

.badge-answer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F0F7E6;
    color: #2E7D32;
    padding: 8px 20px;
    border-radius: 50px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(46, 125, 50, 0.2);
}

.badge-answer i {
    color: #FF9933;
}

/* Answer Content */
.answer-content {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #5D6D7E;
    margin-bottom: 25px;
}

.answer-content p {
    margin-bottom: 15px;
}

.answer-content ul,
.answer-content ol {
    margin: 15px 0;
    padding-left: 20px;
}

.answer-content li {
    margin-bottom: 8px;
}

.answer-content strong {
    color: #2E7D32;
}

/* Helpful Section */
.answer-helpful {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px dashed #e0e0e0;
    flex-wrap: wrap;
}

.answer-helpful span {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #7F8C8D;
}

.btn-helpful {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    padding: 8px 20px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #5D6D7E;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-helpful i {
    font-size: 14px;
}

.btn-helpful:hover {
    border-color: #2E7D32;
    color: #2E7D32;
}

.btn-helpful.voted {
    background: #2E7D32;
    border-color: #2E7D32;
    color: white;
}

/* Contact Section */
.faq-contact {
    margin-bottom: 40px;
}

.contact-card {
    background: linear-gradient(135deg, #FDF8F2, #F9F0E6);
    padding: 50px;
    border-radius: 20px;
    text-align: center;
    border: 2px dashed #FF9933;
    position: relative;
    overflow: hidden;
}

.contact-card:before {
    content: '❓';
    position: absolute;
    top: -30px;
    left: -30px;
    font-size: 150px;
    opacity: 0.05;
    transform: rotate(15deg);
}

.contact-card:after {
    content: '❓';
    position: absolute;
    bottom: -30px;
    right: -30px;
    font-size: 150px;
    opacity: 0.05;
    transform: rotate(-15deg);
}

.contact-icon {
    width: 80px;
    height: 80px;
    background: #2E7D32;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: white;
    font-size: 32px;
    /* border: 3px solid #FF9933; */
}

.contact-card h3 {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    color: #8B5A2B;
    margin: 0 0 15px;
}

.contact-card p {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #5D6D7E;
    margin: 0 0 25px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.contact-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-ayur-primary {
    background: #2E7D32;
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid #2E7D32;
}

.btn-ayur-primary:hover {
    background: #FF9933;
    border-color: #FF9933;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 153, 51, 0.3);
}

.btn-ayur-outline {
    background: transparent;
    color: #2E7D32;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid #2E7D32;
}



/* FAQ Quote */
.faq-quote {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 15px;
    border-left: 4px solid #FF9933;
    max-width: 600px;
    margin: 0 auto;
}

.faq-quote i {
    color: #FF9933;
    font-size: 24px;
    opacity: 0.5;
    margin-bottom: 15px;
    display: block;
}

.faq-quote p {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #8B5A2B;
    margin: 0 0 10px;
    font-style: italic;
}

.faq-quote span {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #7F8C8D;
}

/* Responsive Design */
@media (max-width: 991px) {
    .ayur-faq-banner h1 {
        font-size: 42px;
    }

    .ayur-faq-banner .banner-subtitle {
        font-size: 16px;
    }

    .faq-header h2 {
        font-size: 32px;
    }

    .faq-accordion-wrapper {
        padding: 20px;
    }

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

@media (max-width: 767px) {
    .ayur-faq-banner h1 {
        font-size: 32px;
    }

    .faq-header h2 {
        font-size: 28px;
    }

    .faq-categories {
        gap: 8px;
    }

    .faq-category-btn {
        padding: 8px 18px;
        font-size: 13px;
    }

    .faq-accordion-wrapper {
        padding: 15px;
    }

    .ayur-accordion .panel-title a {
        padding: 15px;
        flex-wrap: wrap;
    }

    .faq-icon {
        width: 35px;
        height: 35px;
    }

    .faq-icon i {
        font-size: 14px;
    }

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

    .contact-card {
        padding: 30px 20px;
    }

    .contact-buttons {
        flex-direction: column;
        align-items: center;
    }

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

@media (max-width: 480px) {
    .faq-header h2 {
        font-size: 24px;
    }

    .faq-header p {
        font-size: 14px;
    }

    .faq-category-btn {
        width: 100%;
        text-align: center;
    }

    .answer-helpful {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-helpful {
        width: 100%;
        justify-content: center;
    }

    .faq-quote p {
        font-size: 18px;
    }
}

/* Animation */
@keyframes leafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.accordion-button:focus {
    border-color: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background: #fff !important;
}

/* FAQ page */


/* contact page */
/* ========================================
   AYURVEDIC CONTACT PAGE STYLES - LIGHT MODE ONLY
======================================== */

/* Contact Page Banner */
.ayur-contact-banner {
    position: relative;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayur-contact-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(46 125 50 / 31%), rgb(255 153 51 / 34%));
    z-index: 1;
}

.ayur-contact-banner .container {
    position: relative;
    z-index: 2;
}

.ayur-contact-banner .banner-content {
    text-align: center;
    color: white;
    padding: 80px 0;
}

.ayur-contact-banner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 52px;
    font-weight: 700;
    margin: 0 0 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.ayur-contact-banner .banner-subtitle {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    opacity: 0.95;
    margin: 0;
    font-weight: 300;
}

/* Contact Page Container */
.ayur-contact-page {
    padding: 60px 0;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
}

.ayur-contact-page:before {
    content: '🌿🌿🌿';
    position: absolute;
    top: -50px;
    left: -50px;
    font-size: 200px;
    opacity: 0.02;
    transform: rotate(-15deg);
    pointer-events: none;
}

.ayur-contact-page:after {
    content: '🌿🌿🌿';
    position: absolute;
    bottom: -50px;
    right: -50px;
    font-size: 200px;
    opacity: 0.02;
    transform: rotate(15deg);
    pointer-events: none;
}

/* Decorative Elements */
.contact-decorative {
    text-align: center;
    margin-bottom: 30px;
}

.contact-decorative .leaf-icon {
    font-size: 28px;
    color: #2E7D32;
    margin: 0 12px;
    animation: leafFloat 3s ease-in-out infinite;
}

.contact-decorative .om-icon {
    font-size: 36px;
    color: #FF9933;
    margin: 0 12px;
    font-family: serif;
}

.contact-decorative .leaf-icon:nth-child(1) {
    animation-delay: 0s;
}

.contact-decorative .leaf-icon:nth-child(3) {
    animation-delay: 1.5s;
}

/* Contact Header */
.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-header h2 {
    font-family: "Poppins", sans-serif;
    font-size: 38px;
    color: #8B5A2B;
    margin: 0 0 10px;
}

.contact-header p {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #7F8C8D;
    margin: 0;
}

/* Contact Info Cards */
.contact-info-cards {
    margin-bottom: 50px;
}

.info-card {
    background: white;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 153, 51, 0.15);
    height: 100%;
    margin-bottom: 20px;
}

.info-card:hover {
    border-color: #FF9933;
}

.info-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 28px;
    transition: all 0.3s ease;
}

.info-card:hover .info-icon {
    background: #FF9933;
    transform: rotateY(180deg);
}

.info-card h3 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    color: #8B5A2B;
    margin: 0 0 15px;
}

.info-card p {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    color: #5D6D7E;
    margin: 0 0 5px;
}

.info-card p a {
    color: #5D6D7E;
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-card p a:hover {
    color: #FF9933;
}

.info-timing {
    font-size: 13px;
    color: #7F8C8D !important;
    margin-top: 10px;
    font-style: italic;
}

/* Contact Form Wrapper */
.contact-form-wrapper {
    background: white;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    margin-bottom: 50px;
    border: 1px solid rgba(255, 153, 51, 0.15);
}

/* Form Container */
.contact-form-container {
    padding-right: 20px;
}

.form-title {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    color: #8B5A2B;
    margin: 0 0 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.form-title i {
    color: #FF9933;
    font-size: 24px;
}

/* Form Groups */
.ayur-form-group {
    margin-bottom: 25px;
}

.ayur-form-group label {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5D6D7E;
    margin-bottom: 8px;
    display: block;
}

.ayur-form-group label i {
    color: #FF9933;
    margin-right: 8px;
}

.ayur-form-group .required {
    color: #FF9933;
}

/* Input Fields */
.ayur-input {
    height: 50px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 20px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 100%;
    background: white;
}

.ayur-input:focus {
    border-color: #FF9933;
    box-shadow: 0 0 15px rgba(255, 153, 51, 0.1);
    outline: none;
}

/* Textarea */
.ayur-textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    resize: vertical;
    background: white;
}

.ayur-textarea:focus {
    border-color: #FF9933;
    box-shadow: 0 0 15px rgba(255, 153, 51, 0.1);
    outline: none;
}

/* Submit Button */
.btn-ayur-submit {
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 35px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid transparent;
    width: 100%;
    justify-content: center;
}

.btn-ayur-submit:hover {
    background: #FF9933;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 153, 51, 0.3);
}

/* Form Quote */
.form-quote {
    margin-top: 30px;
    padding: 15px;
    background: #F8F9FA;
    border-radius: 10px;
    text-align: center;
    border-left: 4px solid #FF9933;
}

.form-quote i {
    color: #FF9933;
    font-size: 18px;
    opacity: 0.5;
    margin-right: 8px;
}

.form-quote p {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-style: italic;
    color: #8B5A2B;
    margin: 0;
    display: inline-block;
}

/* Contact Sidebar */
.contact-sidebar {
    padding-left: 20px;
}

/* Quick Contact Card */
.quick-contact-card {
    background: #F8F9FA;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 153, 51, 0.15);
}

.quick-contact-card h4 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    color: #8B5A2B;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-contact-card h4 i {
    color: #FF9933;
}

.quick-contact-card p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #5D6D7E;
    margin: 0 0 15px;
    line-height: 1.6;
}

.response-time {
    background: white;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 13px;
    color: #2E7D32;
    border-left: 3px solid #FF9933;
}

.response-time i {
    color: #2E7D32;
    margin-right: 8px;
}

/* Contact Wisdom */
.contact-wisdom {
    background: linear-gradient(135deg, #FDF8F2, #F9F0E6);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
    text-align: center;
    border: 1px dashed #FF9933;
}

.contact-wisdom i {
    color: #FF9933;
    font-size: 20px;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

.contact-wisdom p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #8B5A2B;
    margin: 0 0 10px;
    font-style: italic;
}

.contact-wisdom span {
    font-size: 13px;
    color: #7F8C8D;
}

/* Contact Social */
.contact-social {
    background: white;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 153, 51, 0.15);
}

.contact-social h4 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    color: #8B5A2B;
    margin: 0 0 20px;
    text-align: center;
}

.social-links {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.social-link {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
}

.social-link.facebook {
    background: #3b5998;
}

.social-link.twitter {
    background: #1da1f2;
}

.social-link.instagram {
    background: #e4405f;
}

.social-link.youtube {
    background: #cd201f;
}

.social-link:hover {
    transform: translateY(-5px) rotate(360deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    color: #fff;
}

/* Map Section */
.contact-map-section {
    margin-top: 6rem;
}

.map-title {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    color: #8B5A2B;
    margin: 0 0 25px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.map-title i {
    color: #FF9933;
    font-size: 24px;
}

.map-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 3px solid #FF9933;
}

.map-container iframe {
    width: 100%;
    height: 400px;
    display: block;
}

/* Responsive Design */
@media (max-width: 991px) {
    .ayur-contact-banner h1 {
        font-size: 42px;
    }

    .contact-header h2 {
        font-size: 32px;
    }

    .contact-form-wrapper {
        padding: 30px 20px;
    }

    .contact-form-container {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .contact-sidebar {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .ayur-contact-banner h1 {
        font-size: 32px;
    }

    .ayur-contact-banner .banner-subtitle {
        font-size: 16px;
    }

    .contact-header h2 {
        font-size: 28px;
    }

    .form-title {
        font-size: 24px;
    }

    .map-title {
        font-size: 24px;
    }

    .map-container iframe {
        height: 300px;
    }

    .info-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {

    .contact-decorative .leaf-icon,
    .contact-decorative .om-icon {
        font-size: 24px;
        margin: 0 8px;
    }

    .contact-header h2 {
        font-size: 24px;
    }

    .contact-header p {
        font-size: 14px;
    }

    .form-title {
        font-size: 20px;
        gap: 8px;
    }

    .btn-ayur-submit {
        padding: 12px 25px;
        font-size: 14px;
    }

    .map-title {
        font-size: 20px;
    }

    .social-link {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* Animation */
@keyframes leafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* contact page */


/* Button */
.button-47 {
    align-items: center;
    /* background: var(--primary-white); */
    border: 0 solid #E2E8F0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    color: #fff;
    display: inline-flex;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    height: 56px;
    justify-content: center;
    line-height: 24px;
    overflow-wrap: break-word;
    padding: 24px;
    text-decoration: none;
    width: auto;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}



/* why choose use page */

/* ========================================
   AYURVEDIC ABOUT PAGE - ENHANCED STYLES
======================================== */

/* Existing styles from previous about page plus these new ones */

/* Client Content */
.client-content {
    margin-top: 20px;
}

.lead-text {
    font-size: 18px;
    font-weight: 500;
    color: #2E7D32;
    line-height: 1.8;
    margin-bottom: 25px;
    padding: 20px;
    background: #F0F7E6;
    border-radius: 15px;
    border-left: 4px solid #FF9933;
}

/* Brand Opening Section */
.brand-opening {
    margin: 40px 0;
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(255, 153, 51, 0.15);
}

.brand-opening h2 {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    color: #8B5A2B;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-opening h2 i {
    color: #FF9933;
    font-size: 36px;
}

.brand-opening p {
    font-size: 16px;
    line-height: 1.8;
    color: #5D6D7E;
    margin-bottom: 15px;
}

/* Section Titles */
.section-title {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    color: #8B5A2B;
    margin: 0 0 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.section-title i {
    color: #FF9933;
    font-size: 36px;
}

.section-subtitle {
    text-align: center;
    font-size: 16px;
    color: #7F8C8D;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

/* Why Choose Section */
.why-choose-section {
    margin: 50px 0;
    padding: 40px;
    background: linear-gradient(135deg, #FDF8F2, #F9F0E6);
    border-radius: 30px;
}

.choose-grid {
    margin-top: 30px;
}

.choose-card {
    background: white;
    padding: 30px 25px;
    border-radius: 20px;
    margin-bottom: 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 153, 51, 0.15);
    height: 100%;
}

.choose-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.1);
    border-color: #FF9933;
}

.choose-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 32px;
    transition: all 0.3s ease;
}

.choose-card:hover .choose-icon {
    background: #FF9933;
    transform: rotateY(180deg);
}

.choose-card h3 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    color: #8B5A2B;
    margin: 0 0 15px;
}

.choose-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #5D6D7E;
    margin: 0;
}

/* Products Section */
.products-section {
    margin: 50px 0;
}

.products-grid {
    margin-top: 30px;
}

.product-card {
    background: white;
    padding: 30px 20px;
    border-radius: 20px;
    margin-bottom: 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 153, 51, 0.15);
    height: 100%;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.1);
    border-color: #2E7D32;
}

.product-icon {
    width: 70px;
    height: 70px;
    background: #F0F7E6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #2E7D32;
    font-size: 28px;
    transition: all 0.3s ease;
}

.product-card:hover .product-icon {
    background: #2E7D32;
    color: white;
    transform: scale(1.1);
}

.product-card h3 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    color: #8B5A2B;
    margin: 0 0 15px;
}

.product-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #5D6D7E;
    margin: 0;
}

/* CTA Section Enhancement */
.about-cta {
    background: linear-gradient(135deg, #2E7D32, #1B5E20);
    padding: 50px;
    border-radius: 30px;
    margin-top: 50px;
    position: relative;
    overflow: hidden;
}

.about-cta:before {
    content: '🌿🌿🌿';
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 150px;
    opacity: 0.1;
    transform: rotate(15deg);
}

.cta-content {
    position: relative;
    z-index: 2;
    color: white;
}

.cta-content h3 {
    font-family: "Poppins", sans-serif;
    font-size: 38px;
    margin: 0 0 20px;
}

.cta-content p {
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto 25px;
    max-width: 700px;
    opacity: 0.95;
}

.cta-content strong {
    color: #FF9933;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-ayur-primary {
    background: #FF9933;
    color: #fff;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-ayur-primary:hover {
    color: #8B5A2B;
    background: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 991px) {
    .section-title {
        font-size: 30px;
    }

    .brand-opening h2 {
        font-size: 28px;
    }

    .why-choose-section {
        padding: 30px 20px;
    }
}

@media (max-width: 767px) {
    .section-title {
        font-size: 26px;
    }

    .brand-opening h2 {
        font-size: 24px;
    }

    .lead-text {
        font-size: 16px;
    }

    .choose-card,
    .product-card {
        margin-bottom: 20px;
    }

    .about-cta {
        padding: 30px 20px;
    }

    .cta-content h3 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 22px;
        gap: 8px;
    }

    .section-title i {
        font-size: 24px;
    }

    .brand-opening h2 {
        font-size: 20px;
    }

    .choose-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

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

/* why choose us page */





/* ========================================
   SEARCH RESULTS PAGE - MODERN AYURVEDIC STYLING
   No Backend Changes - Pure CSS
======================================== */

/* Search Page Banner */
.ayur-search-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    margin-bottom: 0;
}

.ayur-search-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(45, 106, 79, 0.88), rgba(127, 85, 57, 0.88));
    z-index: 1;
}

.ayur-search-banner .inner {
    position: relative;
    z-index: 2;
    padding: 80px 0;
    text-align: center;
}

.banner-content {
    max-width: 800px;
    margin: 0 auto;
}

.banner-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
    color: #FF8C42;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.ayur-search-banner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: white;
    margin: 0 0 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.ayur-search-banner .search-query {
    color: #FF8C42;
    background: rgba(255, 255, 255, 0.15);
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
}

.banner-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
}

/* Search Page Container */
.ayur-search-page {
    padding: 50px 0;
    background: #f9f9f9;
}

/* Search Info Header */
.search-info-header {
    background: white;
    border-radius: 16px;
    padding: 20px 25px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid #e8e8e8;
}

.search-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #5A5A5A;
}

.search-stats i {
    color: #FF8C42;
    font-size: 20px;
}

.search-stats strong {
    color: var(--primary);
    font-size: 18px;
}

.search-stats em {
    font-style: italic;
    color: var(--primary);
    font-weight: 500;
}

.search-suggest {
    background: #F2F9F0;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    color: var(--primary);
}

.search-suggest i {
    margin-right: 6px;
    color: #FF8C42;
}

/* Product Grid */
.product-grid-enhanced {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

/* Product Card */
.item.item-search-result {
    margin-bottom: 30px;
    padding: 0 15px;
}

.inner.product-card-enhanced {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
    position: relative;
}

.inner.product-card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px rgba(45, 106, 79, 0.15);
}

/* Product Badges */
.product-badge {
    position: absolute;
    top: 12px;
    z-index: 10;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.product-badge.featured {
    left: 12px;
    background: var(--primary);
}

.product-badge.sale {
    right: 12px;
    background: #FF8C42;
}

/* Product Image */
.thumb.product-image {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    background: #f8f8f8;
}

/* .photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
} */

.inner.product-card-enhanced:hover .photo {
    transform: scale(1.08);
}

/* Overlay */
.overlay.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(45, 106, 79, 0.85);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner.product-card-enhanced:hover .overlay.product-overlay {
    opacity: 1;
}

.quick-view-btn {
    background: white;
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.quick-view-btn:hover {
    background: #FF8C42;
    color: white;
}

/* Product Info */
.text.product-info {
    padding: 20px;
    text-align: center;
    background: white;
}

.product-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.4;
}

.product-title a {
    color: #2D2D2D;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-title a:hover {
    color: #FF8C42;
}

/* Dosha Tags */
.dosha-tags {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dosha {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.dosha.vata {
    background: #8B5A2B;
}

.dosha.pitta {
    background: #FF4500;
}

.dosha.kapha {
    background: var(--primary);
}

/* Rating */
.product-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.stars i {
    color: #E9B35F;
    font-size: 12px;
    margin: 0 1px;
}

.rating-count {
    font-size: 12px;
    color: #8B8B8B;
}

/* Price */
.product-price {
    margin-bottom: 15px;
}

.current-price {
    font-size: 18px;
    font-weight: 700;
    color: #FF8C42;
}



/* Out of Stock */
.out-of-stock {
    margin-top: 5px;
}

.out-stock-badge {
    display: inline-block;
    background: #fee9e9;
    color: #c62828;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
}

.out-stock-badge i {
    margin-right: 5px;
}

/* Add to Cart Button */
.product-action {
    margin-top: 5px;
}

.btn-add-cart {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

.btn-add-cart:hover {
    background: #FF8C42;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.3);
    color: #fff;
}

.btn-add-cart i {
    margin-right: 6px;
}

/* No Results Found */
.no-results-found {
    text-align: center;
    padding: 60px 0;
}

.no-results-card {
    background: white;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    margin: 0 auto;
}

.no-results-icon {
    width: 100px;
    height: 100px;
    background: #F2F9F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 48px;
    color: var(--primary);
}

.no-results-card h3 {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    color: #2D2D2D;
    margin-bottom: 10px;
}

.no-results-card p {
    color: #5A5A5A;
    margin-bottom: 25px;
}

.search-suggestions {
    background: #F2F9F0;
    border-radius: 16px;
    padding: 25px;
    margin-top: 20px;
    text-align: left;
}

.search-suggestions h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 15px;
}

.search-suggestions ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.search-suggestions ul li a {
    display: inline-block;
    background: white;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.search-suggestions ul li a:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-back-home {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-back-home:hover {
    background: #FF8C42;
    transform: translateY(-2px);
}

.btn-back-home i {
    margin-right: 6px;
}

/* Pagination Styling */
.pagination-container {
    margin-top: 40px;
    text-align: center;
    width: 100%;
}

.pagination {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    background: white;
    padding: 15px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination a {
    background: #f5f5f5;
    color: #5A5A5A;
}

.pagination a:hover {
    background: var(--primary);
    color: white;
}

.pagination .current {
    background: #FF8C42;
    color: white;
}

.pagination .disabled {
    background: #e8e8e8;
    color: #b0b0b0;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 991px) {
    .ayur-search-banner h1 {
        font-size: 34px;
    }

    .search-info-header {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .ayur-search-banner .inner {
        padding: 60px 0;
    }

    .ayur-search-banner h1 {
        font-size: 28px;
    }

    .banner-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .product-title {
        font-size: 14px;
    }

    .current-price {
        font-size: 16px;
    }

    .btn-add-cart {
        padding: 8px 15px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .ayur-search-banner h1 {
        font-size: 24px;
    }

    .no-results-card {
        padding: 30px 20px;
    }

    .pagination a,
    .pagination span {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.item.item-search-result {
    animation: fadeInUp 0.5s ease forwards;
}

/* searc resut */


/* product page */

/* Product Page Container */
.product-page {
    padding: 40px 0;
    background: #fff;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Container Fix */
.product-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    overflow-x: hidden;
}

/* Breadcrumb */
.breadcrumb-simple {
    margin-bottom: 30px;
    font-size: 13px;
    color: #000;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.breadcrumb-simple a {
    color: #2E7D32;
    text-decoration: none;
}

.breadcrumb-simple a:hover {
    color: #FF9933;
}

.breadcrumb-simple span {
    margin: 0 5px;
    color: #414040;
}

/* Product Grid - FIXED */
.product-gridd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
    width: 100%;
    overflow: hidden;
}

/* Gallery - FIXED */
.product-gallery {
    width: 100%;
    overflow: hidden;
}

.product-gallery .main-image {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
    background: #f8f8f8;
}

.product-gallery .main-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.thumbnails {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.thumbnails .thumb {
    width: 80px;
    height: 80px;
    border: 2px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.thumbnails .thumb.active {
    border-color: #FF9933;
}

.thumbnails .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Info - FIXED */
.product-detail-info {
    width: 100%;
    overflow: hidden;
    word-wrap: break-word;
}

.product-name {
    font-size: 30px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 10px;
    line-height: 1.3;
    word-break: break-word;
}

.product-meta {
    margin-bottom: 15px;
}

.rating i {
    color: #FFC72C;
    font-size: 14px;
}

.rating span {
    color: #666;
    font-size: 13px;
    margin-left: 8px;
}

.product-price {
    margin-bottom: 10px;
}

.current-price {
    font-size: 28px;
    font-weight: 700;
    color: #000;
}



.product-description p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    word-break: break-word;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-body);
}

/* Form Fields - FIXED */
.form-field {
    margin-bottom: 20px;
    width: 100%;
    margin-top: 20px;
}

.form-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #000000;
}

.product-select {
    width: 100%;
    max-width: 200px;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    background: white;
}

.quantity-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.qty-btn {
    width: 36px;
    height: 40px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    line-height: 1;
    font-weight: 500;
}

.qty-btn:hover {
    background: #FF9933;
    color: white;
}

.qty-input {
    width: 60px;
    height: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-size: 14px;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.stock {
    display: inline-block;
    margin-left: 15px;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 50px;
    line-height: 1.product-description p;
}

.stock.in-stock {
    background: #e8f5e9;
    color: #2E7D32;
}

.stock.out-stock {
    background: #fee9e9;
    color: #c62828;
}

.stock i {
    margin-right: 5px;
}

.add-to-cart-btn {
    width: 100%;
    background: #2E7D32;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
    background: #FF9933;
    color: #000;
    border: 1px solid var(--secondary);
}

.add-to-cart-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.product-share {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.product-share span {
    font-size: 14px;
    color: #666;
    margin-right: 10px;
}

/* Tabs - FIXED */
.product-tabs {
    margin-top: 50px;
    border-top: 1px solid #eee;
    width: 100%;
    overflow: hidden;
}

.tabs-nav {
    display: flex;
    gap: 5px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    overflow-x: auto;
    padding-bottom: 0;
}

.tab-btn {
    padding: 12px 24px;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: #FF9933;
}

.tab-btn.active {
    color: #FF9933;
    border-bottom: 2px solid #FF9933;
}

.tabs-content {
    padding: 30px 0;
    width: 100%;
    overflow: hidden;
}

.tab-pane {
    display: none;
    width: 100%;
}

.tab-pane.active {
    display: block;
}

.tab-pane p {
    color: #666;
    line-height: 1.7;
    word-break: break-word;
}

/* Reviews Section - FIXED */
.reviews-section {
    max-width: 100%;
    overflow: hidden;
}

.reviews-list {
    margin-bottom: 40px;
    width: 100%;
}

.review-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    width: 100%;
    overflow: hidden;
}

.review-item:last-child {
    border-bottom: none;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.review-header strong {
    font-size: 15px;
    color: #333;
}

.review-rating i {
    color: #FFC72C;
    font-size: 12px;
}

.review-item p {
    color: #666;
    line-height: 1.6;
    margin: 0;
    word-break: break-word;
}

/* Write Review - FIXED */
.write-review {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    width: 100%;
    overflow: hidden;
}

.write-review h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.rating-input {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rating-input span {
    font-size: 14px;
    color: #666;
}

.star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 5px;
}

.star-input input {
    display: none;
}

.star-input label {
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
}

.star-input label:hover,
.star-input label:hover~label,
.star-input input:checked~label {
    color: #FFC72C;
}

.review-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
}

.review-textarea:focus {
    outline: none;
    border-color: #FF9933;
}

.submit-review {
    background: #2E7D32;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.submit-review:hover {
    background: #FF9933;
}

.reviewed-alert,
.login-alert {
    padding: 15px;
    background: #f5f5f5;
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
}

.login-alert a {
    color: #FF9933;
    text-decoration: none;
}

.login-alert a:hover {
    text-decoration: underline;
}

/* Related Products - FIXED */
.related-products {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    width: 100%;
    overflow: hidden;
}

.related-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 25px;
    border-bottom: 1px solid #2929291a;
    width: fit-content;
    padding: 0 0 10px 0;
    font-family: var(--font-heading);
}


.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    padding: 0 0 60px 0;
}

/* Responsive - FIXED */
@media (max-width: 992px) {
    .product-gridd {
        gap: 30px;
    }

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

@media (max-width: 768px) {
    .product-page {
        padding: 20px 0;
    }

    .product-gridd {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-name {
        font-size: 24px;
    }

    .current-price {
        font-size: 24px;
    }

    .tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        padding: 10px 20px;
        font-size: 14px;
        white-space: nowrap;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .thumbnails {
        flex-wrap: wrap;
        justify-content: center;
    }

    .thumbnails .thumb {
        width: 70px;
        height: 70px;
    }

    .product-select {
        max-width: 100%;
    }

    .quantity-box {
        display: inline-flex;
    }
}

@media (max-width: 480px) {
    .product-select {
        width: 100%;
        max-width: 100%;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .review-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .rating-input {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-name {
        font-size: 22px;
    }

    .current-price {
        font-size: 20px;
    }

    .breadcrumb-simple {
        font-size: 11px;
        flex-wrap: wrap;
    }

    .stock {
        display: block;
        margin-left: 0;
        margin-top: 10px;
        font-size: 12px;
        padding: 5px 8px;
        border-radius: 50px;
        font-weight: 400;
        line-height: 1;
    }
}

/* product page */



/* ========================================
   CHECKOUT PAGE - MODERN AYURVEDIC STYLING
   No Backend Changes - Pure CSS
======================================== */

/* Checkout Page Banner */
.ayur-checkout-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    margin-bottom: 0;
}

.ayur-checkout-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(45, 106, 79, 0.88), rgba(127, 85, 57, 0.88));
    z-index: 1;
}

.ayur-checkout-banner .inner {
    position: relative;
    z-index: 2;
    padding: 80px 0;
    text-align: center;
}

.banner-content {
    max-width: 800px;
    margin: 0 auto;
}

.banner-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
    color: #FF8C42;
    animation: pulse 2s infinite;
}

.ayur-checkout-banner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin: 0 0 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.banner-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
}

.banner-breadcrumb {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.banner-breadcrumb a {
    color: #FF8C42;
    text-decoration: none;
}

.banner-breadcrumb a:hover {
    color: white;
}

.banner-breadcrumb .separator {
    margin: 0 8px;
}

/* Checkout Page Container */
.ayur-checkout-page {
    padding: 60px 0;
    background: #f9f9f9;
}

/* Login Required Card */

.checkout-login-required {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.login-required-card {
    background: white;
    border-radius: 24px;
    padding: 50px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.login-required-icon {
    width: 100px;
    height: 100px;
    background: #F2F9F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 48px;
    color: var(--primary);
}

.login-required-card h3 {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    color: #2D2D2D;
    margin-bottom: 15px;
}

.login-required-card p {
    color: #5A5A5A;
    margin-bottom: 30px;
}

.btn-login-required {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-login-required:hover {
    background: #FF8C42;
    transform: translateY(-2px);
    color: #fff;
}
/* Checkout Table Styles */

/* Order Summary Section */
.checkout-order-summary {
    background: white;
    border-radius: 24px;
    padding: 30px 15px;
    margin-bottom: 40px;
}

.summary-header {
    text-align: center;
    margin-bottom: 30px;
}

.summary-icon {
    width: 60px;
    height: 60px;
    background: #F2F9F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
    color: var(--primary);
}

.summary-header h3 {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    color: #2D2D2D;
    margin: 0 0 5px;
}

.summary-header p {
    color: #5A5A5A;
    font-size: 14px;
}

.ayur-checkout-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ayur-checkout-table thead th {
    padding: 15px;
    background: #F2F9F0;
    color: #2e7d32;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    border-bottom: 2px solid #e0e0e0;
}

.ayur-checkout-table tbody td {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

/* Product Image */
.checkout-product-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #FF8C42;
}

.checkout-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Name */
.checkout-name h4 {
    font-size: 14px;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 5px 0;
}

.checkout-attribute {
    display: inline-block;
    background: #f5f5f5;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #5A5A5A;
}

/* Quantity Badge */
.qty-badge {
    display: inline-block;
    background: #2e7d32;
    color: white;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

/* Price */
.total-price {
    font-weight: 700;
    color: #FF8C42;
    font-size: 16px;
}

/* Summary Section */
.checkout-summary {
    width: 100%;
    margin-top: 20px;
}

.checkout-summary td {
    padding: 12px 15px;
    border-top: 1px solid #e0e0e0;
}

.checkout-summary tr:last-child td {
    border-bottom: none;
}

/* Grand Total */
.grand-total {
    background: #F2F9F0;
}

.grand-total td {
    padding: 15px;
}

.grand-total-amount {
    font-size: 22px;
    font-weight: 700;
    color: #FF8C42;
}

/* Label Styling */
.summary-label {
    font-weight: 600;
    color: #333;
}

.summary-value {
    text-align: right;
    font-weight: 500;
    color: #555;
}

/* Responsive Table */
@media (max-width: 768px) {
    .ayur-checkout-table thead {
        display: none;
    }

    .ayur-checkout-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 10px;
    }

    .ayur-checkout-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 10px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .ayur-checkout-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: #2e7d32;
    }

    .checkout-product-thumb {
        margin: 0 auto;
    }
}

/* Checkout Table */

/* Address Section */
.checkout-address-section {
    margin-bottom: 40px;
}

.section-header {
    text-align: center;
    margin-bottom: 30px;
}

.section-icon {
    width: 60px;
    height: 60px;
    background: #F2F9F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
    color: var(--primary);
}

.section-header h3 {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    color: #2D2D2D;
    margin: 0 0 5px;
}

.section-header p {
    color: #5A5A5A;
    font-size: 14px;
}

/* Address Cards */
.address-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.address-header {
    background: var(--primary);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.address-header i {
    font-size: 20px;
}

.address-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.address-content {
    padding: 20px;
}

.address-table {
    width: 100%;
}

.address-table tr {
    border-bottom: 1px solid #f0f0f0;
}

.address-table th,
.address-table td {
    padding: 10px;
    font-size: 14px;
    vertical-align: top;
}

.address-table th {
    font-weight: 600;
    color: #2D2D2D;
    width: 35%;
}

.address-table td {
    color: #5A5A5A;
}

/* Edit Address Buttons */
.edit-address-buttons {
    margin-top: 20px;
    text-align: right;
}

.btn-back-to-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    color: #5A5A5A;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-back-to-cart:hover {
    background: var(--primary);
    color: white;
}

/* Payment Section */
.checkout-payment-section {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.payment-methods-wrapper {
    margin-top: 30px;
}

/* Payment Method Cards */
.payment-method-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    height: 100%;
}

.payment-method-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.payment-method-card.active {
    border-color: #FF8C42;
    background: white;
    box-shadow: 0 10px 25px rgba(255, 140, 66, 0.15);
}

.payment-method-icon {
    width: 70px;
    height: 70px;
    background: #F2F9F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: var(--primary);
}

.payment-method-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 8px;
}

.payment-method-card p {
    font-size: 13px;
    color: #5A5A5A;
    margin-bottom: 15px;
}

.payment-method-select {
    margin-top: 15px;
}

.payment-radio {
    margin-right: 8px;
    accent-color: #FF8C42;
}

/* Payment Forms */
.payment-forms-container {
    margin-top: 40px;
}

.payment-form {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 30px;
}

/* Bank Details Card */
.bank-details-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    border-left: 4px solid #FF8C42;
}

.bank-details-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.bank-details-header i {
    font-size: 24px;
    color: var(--primary);
}

.bank-details-header h4 {
    margin: 0;
    font-size: 18px;
    color: #2D2D2D;
}

.bank-details-content {
    font-size: 14px;
    color: #5A5A5A;
    line-height: 1.6;
}

/* Transaction Textarea */
.transaction-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    transition: all 0.3s ease;
}

.transaction-textarea:focus {
    outline: none;
    border-color: #FF8C42;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
}

/* Submit Buttons */
.btn-submit-payment {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.paypal-btn {
    background: #0070ba;
    color: white;
}

.paypal-btn:hover {
    background: #003087;
    transform: translateY(-2px);
}

.bank-submit-btn {
    background: var(--primary);
    color: white;
}

.bank-submit-btn:hover {
    background: #1B4D3E;
    transform: translateY(-2px);
}

.cod-submit-btn {
    background: #FF8C42;
    color: white;
}

.cod-submit-btn:hover {
    background: #E67E22;
    transform: translateY(-2px);
}

/* COD Info Card */
.cod-info-card {
    text-align: center;
    padding: 20px;
    margin-bottom: 25px;
    background: white;
    border-radius: 16px;
}

.cod-icon {
    width: 70px;
    height: 70px;
    background: #F2F9F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: var(--primary);
}

.cod-info-card h4 {
    font-size: 20px;
    color: #2D2D2D;
    margin: 0 0 10px;
}

.cod-info-card p {
    color: #5A5A5A;
    margin-bottom: 20px;
}

.cod-benefits {
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 300px;
    margin: 0 auto;
}

.cod-benefits li {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5A5A5A;
    font-size: 14px;
}

.cod-benefits li i {
    color: var(--primary);
}

/* Address Warning */
.address-warning {
    text-align: center;
    padding: 50px;
    background: #fff5e6;
    border-radius: 20px;
}

.warning-icon {
    width: 80px;
    height: 80px;
    background: #fee9e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: #c62828;
}

.address-warning h4 {
    font-size: 24px;
    color: #c62828;
    margin: 0 0 15px;
}

.address-warning p {
    color: #5A5A5A;
    margin-bottom: 25px;
}

.btn-update-info {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-update-info:hover {
    background: #FF8C42;
}

/* Responsive */
@media (max-width: 991px) {
    .ayur-checkout-banner h1 {
        font-size: 38px;
    }

    .address-table th,
    .address-table td {
        display: block;
        width: 100%;
    }

    .address-table th {
        padding-bottom: 0;
    }
}

@media (max-width: 768px) {
    .ayur-checkout-page {
        padding: 40px 0;
    }

    .ayur-checkout-banner .inner {
        padding: 60px 0;
    }

    .ayur-checkout-banner h1 {
        font-size: 30px;
    }

    .banner-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .ayur-checkout-table thead {
        display: none;
    }

    .ayur-checkout-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 15px;
    }

    .ayur-checkout-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .ayur-checkout-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary);
    }

    .payment-method-card {
        margin-bottom: 20px;
    }
}

/* Animation */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}


/* checkout page */



/* ========================================
   CUSTOMER BILLING & SHIPPING PAGE
   Modern Ayurvedic Styling
======================================== */

/* Page Container */
.ayur-billing-page {
    padding: 50px 0;
    background: #f9f9f9;
    min-height: calc(100vh - 200px);
}

/* Billing Content Wrapper */
.billing-content-wrapper {
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Page Header */
.billing-header {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

.header-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #F2F9F0, #FFF9EF);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: var(--primary);
    border: 1px solid rgba(45, 106, 79, 0.2);
}

.billing-header h1 {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 10px;
}

.billing-header p {
    color: #5A5A5A;
    font-size: 15px;
    margin: 0;
}

/* Alert Messages */
.ayur-alert {
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid transparent;
}

.ayur-alert i {
    font-size: 18px;
}

.ayur-alert-error {
    background: #fee9e9;
    color: #c62828;
    border-left-color: #c62828;
}

.ayur-alert-success {
    background: #e8f5e9;
    color: var(--primary);
    border-left-color: var(--primary);
}

/* Info Cards */
.info-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}


.card-header {
    background: linear-gradient(135deg, var(--primary), #1B4D3E);
    padding: 20px 25px;
    text-align: center;
    color: white;
}

.card-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 24px;
}

.card-header h3 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 5px;
    color: white;
}

.card-header p {
    font-size: 13px;
    opacity: 0.8;
    margin: 0;
}

.card-body {
    padding: 25px;
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #2D2D2D;
    margin-bottom: 8px;
}

.form-group label i {
    color: #FF8C42;
    margin-right: 6px;
    width: 16px;
}

.form-group .required {
    color: #FF8C42;
    margin-left: 3px;
}

/* Input Fields */
.ayur-input {
    width: 100%;
    height: 48px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 15px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.ayur-input:focus {
    border-color: #FF8C42;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
}

.ayur-input::placeholder {
    color: #b0b0b0;
}

/* Select Fields */
.ayur-select {
    width: 100%;
    height: 50px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 15px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D6A4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.ayur-select:focus {
    border-color: #FF8C42;
    outline: none;
}

/* Textarea */
.ayur-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    resize: vertical;
}

.ayur-textarea:focus {
    border-color: #FF8C42;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
}

/* Copy Billing Button */
.copy-billing-btn {
    margin-bottom: 25px;
    text-align: right;
}

.btn-copy-billing {
    background: #F2F9F0;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-copy-billing:hover {
    background: var(--primary);
    color: white;
}

.btn-copy-billing i {
    margin-right: 6px;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #e0e0e0;
    flex-wrap: wrap;
}

.btn-submit {
    background: linear-gradient(135deg, var(--primary), #1B4D3E);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-submit:hover {
    background: #FF8C42;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.3);
}

.btn-cancel {
    background: #f5f5f5;
    color: #5A5A5A;
    border: none;
    border-radius: 50px;
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.btn-cancel:hover {
    background: #e0e0e0;
    color: var(--secondary);
}

/* Ayurvedic Wisdom */
.billing-wisdom {
    margin-top: 40px;
    padding-top: 30px;
    text-align: center;
    border-top: 1px solid #e0e0e0;
}

.wisdom-content {
    max-width: 500px;
    margin: 0 auto;
}

.wisdom-content i {
    color: #FF8C42;
    font-size: 24px;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

.wisdom-content p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: italic;
    color: var(--primary);
    margin: 0 0 8px;
    line-height: 1.5;
}

.wisdom-content span {
    font-size: 12px;
    color: #8B8B8B;
}

/* Responsive */
@media (max-width: 991px) {
    .billing-content-wrapper {
        padding: 30px;
    }

    .billing-header h1 {
        font-size: 30px;
    }

    .info-card {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .ayur-billing-page {
        padding: 30px 0;
    }

    .billing-content-wrapper {
        padding: 20px;
    }

    .billing-header h1 {
        font-size: 26px;
    }

    .card-header {
        padding: 15px 20px;
    }

    .card-body {
        padding: 20px;
    }

    .form-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-submit,
    .btn-cancel {
        width: 100%;
        justify-content: center;
    }

    .copy-billing-btn {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .billing-header h1 {
        font-size: 22px;
    }

    .header-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

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

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-card {
    animation: fadeInUp 0.5s ease forwards;
}

/* billing page */


/* ========================================
   CUSTOMER ORDERS PAGE
   Modern Ayurvedic Styling
======================================== */

/* Page Container */
.ayur-orders-page {
    padding: 50px 0;
    background: #f9f9f9;
    min-height: calc(100vh - 200px);
}

/* Orders Content Wrapper */
.orders-content-wrapper {
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Page Header */
.orders-header {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

.header-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #F2F9F0, #FFF9EF);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: var(--primary);
    border: 1px solid rgba(45, 106, 79, 0.2);
}

.orders-header h1 {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 10px;
}

.orders-header p {
    color: #5A5A5A;
    font-size: 15px;
    margin: 0;
}

/* Orders Table */
.orders-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.orders-table thead th {
    background: #7d937f;
    color: white;
    padding: 15px;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
}

.orders-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.orders-table tbody tr:hover {
    background: #F2F9F0;
}

.orders-table tbody td {
    padding: 20px 15px;
    vertical-align: top;
    font-size: 14px;
    color: #5A5A5A;
}

/* Order Products Column */
.order-products {
    min-width: 280px;
}

.order-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-item {
    padding-bottom: 10px;
    border-bottom: 1px dashed #e0e0e0;
}

.order-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.item-name {
    font-weight: 600;
    color: #2D2D2D;
    display: block;
    margin-bottom: 5px;
}

.item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #8B8B8B;
}

.item-details span {
    background: #f5f5f5;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Order Date */
.order-date {
    font-weight: 500;
    color: var(--primary);
    white-space: nowrap;
}

/* Order Transaction ID */
.order-txnid {
    font-family: monospace;
    font-size: 12px;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

/* Order Amount */
.order-amount {
    font-weight: 700;
    color: #FF8C42;
    font-size: 16px;
}

/* Order Status */
.order-status {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-completed {
    background: #e8f5e9;
    color: var(--primary);
}

.status-pending {
    background: #fff3e0;
    color: #FF8C42;
}

.status-processing {
    background: #e3f2fd;
    color: #1976d2;
}

.status-cancelled {
    background: #fee9e9;
    color: #c62828;
}

.status-default {
    background: #f5f5f5;
    color: #757575;
}

/* Order Method */
.order-method {
    background: #f5f5f5;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    display: inline-block;
}

/* Order ID */
.order-id {
    font-family: monospace;
    font-weight: 600;
    color: var(--primary);
    background: #F2F9F0;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

/* No Orders State */
.no-orders td {
    padding: 60px 20px;
}

.no-orders-content {
    text-align: center;
    padding: 40px;
}

.no-orders-content i {
    font-size: 64px;
    color: var(--primary);
    /* opacity: 0.3; */
    margin-bottom: 0px;
    display: block;
}

.no-orders-content h3 {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    color: #2D2D2D;
    margin: 0 0 10px;
}

.no-orders-content p {
    color: #5A5A5A;
    margin-bottom: 25px;
}

.btn-start-shopping {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-start-shopping:hover {
    background: #FF8C42;
    transform: translateY(-2px);
}

.btn-start-shopping i {
    margin-left: 8px;
    font-size: 14px;
    color: #fff;
}

/* Pagination Wrapper */
.pagination-wrapper {
    margin-top: 30px;
    text-align: center;
}

.pagination {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 50px;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination a {
    background: white;
    color: var(--primary);
    border: 1px solid #e0e0e0;
}

.pagination a:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.pagination .current {
    background: #FF8C42;
    color: white;
}

.pagination .disabled {
    background: #e8e8e8;
    color: #b0b0b0;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 991px) {
    .orders-content-wrapper {
        padding: 30px;
    }

    .orders-header h1 {
        font-size: 30px;
    }

    .orders-table thead {
        display: none;
    }

    .orders-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 16px;
        padding: 15px;
        background: white;
    }

    .orders-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .orders-table tbody td:last-child {
        border-bottom: none;
    }

    .orders-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary);
        margin-right: 15px;
        min-width: 100px;
    }

    .order-products {
        flex-direction: column;
    }

    .order-products:before {
        align-self: flex-start;
    }

    .order-items-list {
        width: 100%;
    }

    .order-date,
    .order-txnid,
    .order-amount,
    .order-status,
    .order-method,
    .order-id {
        text-align: right;
    }
}

@media (max-width: 768px) {
    .ayur-orders-page {
        padding: 30px 0;
    }

    .orders-content-wrapper {
        padding: 20px;
    }

    .orders-header h1 {
        font-size: 26px;
    }

    .header-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .orders-table tbody td:before {
        min-width: 80px;
        font-size: 12px;
    }

    .item-details {
        flex-direction: column;
        gap: 5px;
    }

    .item-details span {
        display: inline-block;
        width: fit-content;
    }
}

@media (max-width: 480px) {
    .orders-header h1 {
        font-size: 22px;
    }

    .orders-table tbody td {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .orders-table tbody td:before {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .order-date,
    .order-txnid,
    .order-amount,
    .order-status,
    .order-method,
    .order-id {
        text-align: left;
    }

    .no-orders-content h3 {
        font-size: 20px;
    }

    .btn-start-shopping {
        padding: 10px 25px;
        font-size: 14px;
    }
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.order-row {
    animation: fadeInUp 0.4s ease forwards;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

/* customer billing */


/* ========================================
   CUSTOMER PASSWORD UPDATE PAGE
   Modern Ayurvedic Styling
======================================== */

/* Page Container */
.ayur-password-page {
    padding: 50px 0;
    background: #f9f9f9;
    min-height: calc(100vh - 200px);
}

/* Password Content Wrapper */
.password-content-wrapper {
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Page Header */
.password-header {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

.header-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #F2F9F0, #FFF9EF);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: var(--primary);
    border: 1px solid rgba(45, 106, 79, 0.2);
}

.password-header h1 {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 10px;
}

.password-header p {
    color: #5A5A5A;
    font-size: 15px;
    margin: 0;
}

/* Password Form Container */
.password-form-container {
    max-width: 700px;
    margin: 0 auto;
}

/* Alert Messages */
.ayur-alert {
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid transparent;
}

.ayur-alert i {
    font-size: 18px;
}

.ayur-alert-error {
    background: #fee9e9;
    color: #c62828;
    border-left-color: #c62828;
}

.ayur-alert-success {
    background: #e8f5e9;
    color: var(--primary);
    border-left-color: var(--primary);
}

/* Form Card */
.form-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    margin-bottom: 30px;
    padding: 10px 10px;
}

.card-header {
    background: linear-gradient(135deg, var(--primary), #1B4D3E);
    padding: 25px;
    text-align: center;
    color: white;
}

.card-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 28px;
}

.card-header h3 {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
    color: white;
}

.card-header p {
    font-size: 13px;
    opacity: 0.8;
    margin: 0;
}

.card-body {
    padding: 30px 0px;
}

/* Password Strength */
.password-strength {
    margin-bottom: 25px;
}

.strength-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.strength-progress {
    width: 0;
    height: 100%;
    background: #c62828;
    transition: width 0.3s ease;
    border-radius: 3px;
}

.strength-text {
    font-size: 12px;
    color: #8B8B8B;
}

.strength-text span {
    font-weight: 600;
}

/* Form Groups */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #2D2D2D;
    margin-bottom: 8px;
}

.form-group label i {
    color: #FF8C42;
    margin-right: 8px;
}

.form-group .required {
    color: #FF8C42;
    margin-left: 3px;
}

/* Input Wrapper for Toggle Button */
.input-wrapper {
    position: relative;
}

.ayur-input {
    width: 100%;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 45px 0 15px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.ayur-input:focus {
    border-color: #FF8C42;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #8B8B8B;
    font-size: 16px;
    transition: color 0.3s ease;
}

.toggle-password:hover {
    color: #FF8C42;
}

/* Password Hint */
.password-hint {
    font-size: 12px;
    color: #8B8B8B;
    margin-top: 6px;
}

.password-hint i {
    color: #FF8C42;
    margin-right: 5px;
}

/* Password Match */
.password-match {
    font-size: 12px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.match-success {
    color: var(--primary);
}

.match-error {
    color: #c62828;
}

/* Password Requirements */
.password-requirements {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.password-requirements h4 {
    font-size: 14px;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 12px;
}

.password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.password-requirements ul li {
    font-size: 12px;
    color: #8B8B8B;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.password-requirements ul li i {
    width: 16px;
    font-size: 12px;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-submit {
    background: linear-gradient(135deg, var(--primary), #1B4D3E);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-submit:hover:not(:disabled) {
    background: #FF8C42;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.3);
}

.btn-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-cancel {
    background: #f5f5f5;
    color: #5A5A5A;
    border: none;
    border-radius: 50px;
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-cancel:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
}

/* Security Tips */
.security-tips {
    background: #F2F9F0;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
    text-align: center;
}

.tips-icon {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
    color: var(--primary);
}

.security-tips h4 {
    font-size: 18px;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 15px;
}

.security-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    max-width: 300px;
    margin: 0 auto;
}

.security-tips ul li {
    font-size: 13px;
    color: #5A5A5A;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.security-tips ul li i {
    color: var(--primary);
    font-size: 12px;
}

/* Ayurvedic Wisdom */
.password-wisdom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.password-wisdom i {
    color: #FF8C42;
    font-size: 24px;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

.password-wisdom p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: italic;
    color: var(--primary);
    margin: 0 0 8px;
}

.password-wisdom span {
    font-size: 12px;
    color: #8B8B8B;
}

/* Responsive */
@media (max-width: 991px) {
    .password-content-wrapper {
        padding: 30px;
    }

    .password-header h1 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .ayur-password-page {
        padding: 30px 0;
    }

    .password-content-wrapper {
        padding: 20px;
    }

    .password-header h1 {
        font-size: 26px;
    }

    .header-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .card-body {
        padding: 20px;
    }

    .form-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-submit,
    .btn-cancel {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .password-header h1 {
        font-size: 22px;
    }

    .card-header h3 {
        font-size: 20px;
    }

    .security-tips ul li {
        font-size: 12px;
    }

    .password-wisdom p {
        font-size: 16px;
    }
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-card {
    animation: fadeInUp 0.4s ease forwards;
}

/* customer password update */

/* ========================================
   CUSTOMER PROFILE UPDATE PAGE
   Modern Ayurvedic Styling
======================================== */

/* Page Container */
.ayur-profile-page {
    padding: 50px 0;
    background: #f9f9f9;
    min-height: calc(100vh - 200px);
}

/* Profile Content Wrapper */
.profile-content-wrapper {
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Page Header */
.profile-header {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

.header-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #F2F9F0, #FFF9EF);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: var(--primary);
    border: 1px solid rgba(45, 106, 79, 0.2);
}

.profile-header h1 {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 10px;
}

.profile-header p {
    color: #5A5A5A;
    font-size: 15px;
    margin: 0;
}

/* Alert Messages */
.ayur-alert {
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid transparent;
}

.ayur-alert i {
    font-size: 18px;
}

.ayur-alert-error {
    background: #fee9e9;
    color: #c62828;
    border-left-color: #c62828;
}

.ayur-alert-success {
    background: #e8f5e9;
    color: var(--primary);
    border-left-color: var(--primary);
}

/* Form Card */
/* .form-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    margin-bottom: 30px;
} */

.card-header {
    background: linear-gradient(135deg, var(--primary), #1B4D3E);
    padding: 25px;
    text-align: center;
    color: white;
}

.card-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 28px;
}

.card-header h3 {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
    color: white;
}

.card-header p {
    font-size: 13px;
    opacity: 0.8;
    margin: 0;
}

.card-body {
    padding: 30px 0px;
}

/* Form Groups */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #2D2D2D;
    margin-bottom: 8px;
}

.form-group label i {
    color: #FF8C42;
    margin-right: 8px;
}

.form-group .required {
    color: #FF8C42;
    margin-left: 3px;
}

/* Input Fields */
.ayur-input {
    width: 100%;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 15px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.ayur-input:focus {
    border-color: #FF8C42;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
}

.ayur-input:disabled {
    background: #f5f5f5;
    color: #8B8B8B;
    cursor: not-allowed;
}

/* Disabled Input Wrapper */
.input-wrapper.disabled-input {
    position: relative;
}

.input-wrapper.disabled-input .input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8B8B8B;
}

/* Field Hint */
.field-hint {
    font-size: 12px;
    color: #8B8B8B;
    margin-top: 6px;
}

.field-hint i {
    color: #FF8C42;
    margin-right: 5px;
}

/* Textarea */
.ayur-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    resize: vertical;
}

.ayur-textarea:focus {
    border-color: #FF8C42;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
}

/* Select Field */
.ayur-select {
    width: 100%;
    height: 50px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 15px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D6A4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

.ayur-select:focus {
    border-color: #FF8C42;
    outline: none;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    flex-wrap: wrap;
}

.btn-submit {
    background: linear-gradient(135deg, var(--primary), #1B4D3E);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-submit:hover {
    background: #FF8C42;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.3);
}

.btn-cancel {
    background: #f5f5f5;
    color: #5A5A5A;
    border: none;
    border-radius: 50px;
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-cancel:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
}

/* Profile Tips */
.profile-tips {
    background: #F2F9F0;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.tips-icon {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 28px;
    color: #FF8C42;
}

.profile-tips h4 {
    font-size: 20px;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 20px;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.tip-item {
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.tip-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.tip-item i {
    font-size: 28px;
    color: #646464;
    margin-bottom: 10px;
    display: block;
}

.tip-item span {
    font-size: 13px;
    color: #5A5A5A;
    display: block;
}

/* Ayurvedic Wisdom */
.profile-wisdom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.profile-wisdom i {
    color: #FF8C42;
    font-size: 24px;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

.profile-wisdom p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: italic;
    color: var(--primary);
    margin: 0 0 8px;
}

.profile-wisdom span {
    font-size: 12px;
    color: #8B8B8B;
}

/* Responsive */
@media (max-width: 991px) {
    .profile-content-wrapper {
        padding: 30px;
    }

    .profile-header h1 {
        font-size: 30px;
    }

    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .ayur-profile-page {
        padding: 30px 0;
    }

    .profile-content-wrapper {
        padding: 20px;
    }

    .profile-header h1 {
        font-size: 26px;
    }

    .header-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .card-body {
        padding: 20px;
    }

    .form-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-submit,
    .btn-cancel {
        width: 100%;
        justify-content: center;
    }

    .tips-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .profile-header h1 {
        font-size: 22px;
    }

    .card-header h3 {
        font-size: 20px;
    }

    .profile-wisdom p {
        font-size: 16px;
    }
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-card {
    animation: fadeInUp 0.4s ease forwards;
}


/* customer profile udpate */

/* ========================================
   CUSTOMER SIDEBAR - MODERN AYURVEDIC DESIGN
======================================== */

.user-sidebar {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

/* Sidebar Header */
.sidebar-header {
    background: linear-gradient(135deg, #42a547, #1B4D3E);
    padding: 25px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sidebar-header::before {
    content: '🌿';
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 80px;
    opacity: 0.1;
    transform: rotate(15deg);
}

.sidebar-header::after {
    content: '🌱';
    position: absolute;
    bottom: -20px;
    left: -20px;
    font-size: 80px;
    opacity: 0.1;
    transform: rotate(-15deg);
}

.user-avatar {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 36px;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-welcome h4 {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 5px;
}

.user-welcome p {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0;
    font-family: "Poppins", sans-serif;
}

/* Sidebar Menu */
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item.divider {
    height: 1px;
    background: #e0e0e0;
    margin: 10px 20px;
    padding: 0;
    border: none;
}

.menu-item a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 12px;
}

.menu-item:hover {
    background: #F2F9F0;
}

.menu-item.active {
    background: #F2F9F0;
    border-left: 3px solid #42a547;
}

.menu-item.active .menu-icon {
    color: #42a547;
}

.menu-item.active .menu-text {
    color: var(--primary);
    font-weight: 600;
}

/* Menu Icon */
.menu-icon {
    width: 35px;
    height: 35px;
    background: #f5f5f5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.menu-icon i {
    font-size: 16px;
    color: var(--primary);
    transition: all 0.3s ease;
}

.menu-item:hover .menu-icon {
    background: var(--primary);
}

.menu-item:hover .menu-icon i {
    color: white;
}

.menu-item.active .menu-icon {
    background: #fff;
}

.menu-item.active .menu-icon i {
    color: #414141;
}

/* Menu Text */
.menu-text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #5A5A5A;
    transition: all 0.3s ease;
}

.menu-item:hover .menu-text {
    color: #000;
}

/* Menu Arrow */
.menu-arrow {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.menu-item:hover .menu-arrow {
    opacity: 1;
    transform: translateX(0);
}

.menu-arrow i {
    font-size: 12px;
    color: #FF8C42;
}

.menu-item.active .menu-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Sidebar Footer */
.sidebar-footer {
    background: #F2F9F0;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #e0e0e0;
}

.ayur-quote {
    position: relative;
}

.ayur-quote i {
    color: #FF8C42;
    font-size: 18px;
    opacity: 0.5;
    margin-bottom: 8px;
    display: block;
}

.ayur-quote p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-style: italic;
    color: var(--primary);
    margin: 0 0 5px;
    line-height: 1.5;
}

.ayur-quote span {
    font-size: 11px;
    color: #8B8B8B;
    display: block;
}

/* Responsive */
@media (max-width: 991px) {
    .user-sidebar {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .sidebar-header {
        padding: 20px;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .user-welcome h4 {
        font-size: 12px;
    }

    .user-welcome p {
        font-size: 16px;
    }

    .menu-item a {
        padding: 12px 15px;
    }

    .menu-icon {
        width: 30px;
        height: 30px;
    }

    .menu-icon i {
        font-size: 14px;
    }

    .menu-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .sidebar-header {
        padding: 15px;
    }

    .user-avatar {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .user-welcome p {
        font-size: 14px;
    }

    .menu-text {
        font-size: 13px;
    }

    .ayur-quote p {
        font-size: 12px;
    }
}

/* Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.menu-item {
    animation: slideIn 0.3s ease forwards;
    animation-delay: calc(var(--i, 0) * 0.05s);
}


/* customer sidebar */

/* ========================================
   CUSTOMER DASHBOARD PAGE
   Modern Ayurvedic Styling
======================================== */

/* Page Container */
.ayur-dashboard-page {
    padding: 50px 0;
    background: #f9f9f9;
    min-height: calc(100vh - 200px);
}

/* Dashboard Content Wrapper */
.dashboard-content-wrapper {
    background: white;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Welcome Section */
.welcome-section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.welcome-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #F2F9F0, #FFF9EF);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary);
    border: 1px solid rgba(45, 106, 79, 0.2);
}

.welcome-text h1 {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #2D2D2D;
    margin: 0 0 8px;
}

.welcome-text p {
    color: #5A5A5A;
    font-size: 15px;
    margin: 0;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: #F2F9F0;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.stat-icon {
    width: 55px;
    height: 55px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--secondary);
}

.stat-info h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--secondary);
    margin: 0 0 5px;
}

.stat-info p {
    font-size: 13px;
    color: #5A5A5A;
    margin: 0;
}

/* Section Title */
.section-title {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid #FF8C42;
}

.section-title i {
    color: #FF8C42;
    font-size: 22px;
}

/* Quick Actions */
.quick-actions {
    margin-bottom: 40px;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.action-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.action-card:hover {
    transform: translateY(-5px);
    background: white;
    border-color: #FF8C42;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.action-icon {
    width: 55px;
    height: 55px;
    background: #F2F9F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
    color: var(--secondary);
    transition: all 0.3s ease;
}

.action-card:hover .action-icon {
    background: var(--bg-cream);
    color: var(--secondary);
}

.action-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 8px;
}

.action-card p {
    font-size: 12px;
    color: #8B8B8B;
    margin: 0;
}

/* Recent Orders */
.recent-orders {
    margin-bottom: 40px;
}

.recent-orders-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.recent-orders-table thead th {
    background: #F2F9F0;
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-align: left;
}

.recent-orders-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.recent-orders-table tbody tr:hover {
    background: #F2F9F0;
}

.recent-orders-table tbody td {
    padding: 12px 15px;
    font-size: 14px;
    color: #5A5A5A;
}

.order-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-completed {
    background: #e8f5e9;
    color: var(--primary);
}

.status-pending {
    background: #fff3e0;
    color: #FF8C42;
}

.status-processing {
    background: #e3f2fd;
    color: #1976d2;
}

.status-cancelled {
    background: #fee9e9;
    color: #c62828;
}

.btn-view {
    background: #f5f5f5;
    color: #5A5A5A;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-view:hover {
    background: var(--primary);
    color: white;
}

.view-all-link {
    text-align: right;
    margin-top: 15px;
}

.view-all-link a {
    color: #FF8C42;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.view-all-link a:hover {
    color: var(--primary);
}

.view-all-link a i {
    margin-left: 5px;
}

/* No Orders Card */
.no-orders-card {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 16px;
}

.no-orders-icon {
    width: 80px;
    height: 80px;
    background: #F2F9F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
    color: var(--primary);
}

.no-orders-card h4 {
    font-size: 20px;
    color: #2D2D2D;
    margin: 0 0 10px;
}

.no-orders-card p {
    color: #5A5A5A;
    margin-bottom: 20px;
}

.btn-start-shopping {
    display: inline-flex;
    background: var(--primary);
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    line-height: 1;
}

.btn-start-shopping:hover {
    background: var(--hover);
    color: #FFF;
}

/* Profile Summary */
.profile-summary {
    margin-bottom: 30px;
}

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.info-item label {
    font-size: 12px;
    font-weight: 600;
    color: #8B8B8B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 5px;
}

.info-item p {
    font-size: 16px;
    font-weight: 500;
    color: #2D2D2D;
    margin: 0;
}

.edit-profile-link {
    text-align: right;
}

.btn-edit-profile {
    display: inline-block;
    background: #f5f5f5;
    color: var(--primary);
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-edit-profile:hover {
    background: var(--primary);
    color: white;
}

.btn-edit-profile i {
    margin-right: 6px;
}

/* Ayurvedic Wisdom */
.dashboard-wisdom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.wisdom-content i {
    color: #FF8C42;
    font-size: 24px;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

.wisdom-content p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: italic;
    color: var(--primary);
    margin: 0 0 8px;
}

.wisdom-content span {
    font-size: 12px;
    color: #8B8B8B;
}

/* Responsive */
@media (max-width: 991px) {
    .dashboard-content-wrapper {
        padding: 25px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .profile-info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .ayur-dashboard-page {
        padding: 30px 0;
    }

    .dashboard-content-wrapper {
        padding: 20px;
    }

    .welcome-section {
        flex-direction: column;
        text-align: center;
    }

    .welcome-text h1 {
        font-size: 26px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .actions-grid {
        grid-template-columns: 1fr;
    }

    .recent-orders-table thead {
        display: none;
    }

    .recent-orders-table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 12px;
    }

    .recent-orders-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        border-bottom: 1px solid #f0f0f0;
    }

    .recent-orders-table tbody td:last-child {
        border-bottom: none;
    }

    .recent-orders-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary);
        margin-right: 15px;
    }
}

@media (max-width: 480px) {
    .welcome-text h1 {
        font-size: 22px;
    }

    .welcome-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .stat-info h3 {
        font-size: 22px;
    }

    .section-title {
        font-size: 20px;
    }

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

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card,
.action-card,
.recent-orders,
.profile-summary {
    animation: fadeInUp 0.4s ease forwards;
}


/* dashboard page */

/* ========================================
   FORGOT PASSWORD PAGE
   Modern Ayurvedic Styling
======================================== */

/* Page Banner */
.ayur-forgot-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    margin-bottom: 0;
}

.ayur-forgot-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(45, 106, 79, 0.88), rgba(127, 85, 57, 0.88));
    z-index: 1;
}

.ayur-forgot-banner .inner {
    position: relative;
    z-index: 2;
    padding: 80px 0;
    text-align: center;
}

.banner-content {
    max-width: 800px;
    margin: 0 auto;
}

.banner-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
    color: #fff;
    animation: pulse 2s infinite;
}

.ayur-forgot-banner h1 {
    font-family: "Poppins", sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin: 0 0 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.banner-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
}

/* Page Container */
.ayur-forgot-page {
    padding: 60px 0;
    background: #f9f9f9;
    min-height: calc(100vh - 300px);
}

/* Forgot Content Wrapper */
.forgot-content-wrapper {
    max-width: 550px;
    margin: 0 auto;
}

/* Alert Messages */
.ayur-alert {
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid transparent;
}

.ayur-alert i {
    font-size: 18px;
}

.ayur-alert-error {
    background: #fee9e9;
    color: #c62828;
    border-left-color: #c62828;
}

.ayur-alert-success {
    background: #e8f5e9;
    color: var(--primary);
    border-left-color: var(--primary);
}

/* Form Container */
.forgot-form-container {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    padding: 10px;
}

/* Form Card */
.form-card {
    overflow: hidden;
}

.card-header {
    background: linear-gradient(135deg, var(--primary), #1B4D3E);
    padding: 35px 25px;
    text-align: center;
    color: white;
    border-radius: 1.4rem !important;
}

.card-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 32px;
}

.card-header h3 {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
    color: white;
}

.card-header p {
    font-size: 14px;
    opacity: 0.85;
    margin: 0;
    color: #fff;
}

.card-body {
    padding: 30px 0px;
}

/* Form Groups */

.form-group {
    margin-bottom: 25px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #2D2D2D;
    margin-bottom: 8px;
}

.form-group label i {
    color: #FF8C42;
    margin-right: 8px;
}

.form-group .required {
    color: #FF8C42;
    margin-left: 3px;
}

/* Input Wrapper */
.input-wrapper {
    position: relative;
}

.ayur-input {
    width: 100%;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 0 45px 0 15px;
    font-family: var(--font-body);
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.ayur-input:focus {
    border-color: #FF8C42;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
}

.input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8B8B8B;
}

/* Field Hint */
.field-hint {
    font-size: 12px;
    color: #8B8B8B;
    margin-top: 8px;
}

.field-hint i {
    color: #FF8C42;
    margin-right: 5px;
}

/* Form Actions */
.form-actions {
    margin-top: 30px;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--primary), #1B4D3E);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-submit:hover {
    background: #FF8C42;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 66, 0.3);
}

/* Form Footer */
.form-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.form-footer p {
    font-size: 14px;
    color: #5A5A5A;
    margin: 0;
}

.form-footer a {
    color: #FF8C42;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.form-footer a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Security Tips */
.security-tips {
    background: #F2F9F0;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    text-align: center;
}

.tips-icon {
    width: 55px;
    height: 55px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
    color: #FF8C42;
}

.security-tips h4 {
    font-size: 18px;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 15px;
}

.security-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    max-width: 280px;
    margin: 0 auto;
}

.security-tips ul li {
    font-size: 13px;
    color: #5A5A5A;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.security-tips ul li i {
    color: var(--primary);
    font-size: 12px;
}

/* Help Section */
.help-section {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.help-icon {
    width: 55px;
    height: 55px;
    background: #F2F9F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
    color: var(--primary);
}

.help-section h4 {
    font-size: 18px;
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 10px;
}

.help-section p {
    font-size: 14px;
    color: #5A5A5A;
    margin: 0;
}

.help-section a {
    color: #FF8C42;
    text-decoration: none;
    font-weight: 500;
}

.help-section a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Ayurvedic Wisdom */
.forgot-wisdom {
    text-align: center;
    padding-top: 20px;
}

.forgot-wisdom i {
    color: #FF8C42;
    font-size: 24px;
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}

.forgot-wisdom p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: italic;
    color: var(--primary);
    margin: 0 0 8px;
}

.forgot-wisdom span {
    font-size: 12px;
    color: #8B8B8B;
}

#st-3.st-left {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .ayur-forgot-banner h1 {
        font-size: 32px;
    }

    .ayur-forgot-page {
        padding: 40px 0;
    }

    .banner-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .card-header h3 {
        font-size: 24px;
    }

    .card-body {
        padding: 25px;
    }

    .ayur-input {
        height: 48px;
    }
}

@media (max-width: 480px) {
    .ayur-forgot-banner h1 {
        font-size: 26px;
    }

    .banner-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .card-header {
        padding: 25px 20px;
    }

    .card-header h3 {
        font-size: 20px;
    }

    .card-body {
        padding: 20px;
    }

    .btn-submit {
        padding: 12px;
        font-size: 14px;
    }

    .security-tips ul li {
        font-size: 12px;
    }

    .forgot-wisdom p {
        font-size: 16px;
    }
}

/* Animation */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}


/* forget password */












/* Modern Sidebar Category Navigation */
#left.span3 {
    background: transparent;
    margin-bottom: 30px;
}



/* Main Menu Container */
.nav.menu {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    background: white;

}

/* Top Level Categories */
.cat-level-1 {
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    background: white;
}

.cat-level-1:last-child {
    border-bottom: none;
}

.cat-level-1>a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #2d3e50;
    text-decoration: none;
    transition: all 0.3s ease;
    background: white;
    gap: 12px;
    position: relative;
    font-weight: 500;
}

.cat-level-1>a:hover {
    background: #f8f9fa;
    padding-left: 25px;
}

.cat-level-1.active>a {
    background: linear-gradient(90deg, rgba(44, 125, 160, 0.1), white);
    color: #2c7da0;
    font-weight: 600;
    border-left: 3px solid #2c7da0;
}

/* Sign Icons (Plus/Minus) */
.sign {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: rgba(97, 165, 194, 0.1);
}

.sign i {
    font-size: 12px;
    color: #61a5c2;
    transition: all 0.3s ease;
}

.cat-level-1>a:hover .sign {
    background: rgba(44, 125, 160, 0.2);
    transform: scale(1.05);
}

.cat-level-1>a:hover .sign i {
    color: #2c7da0;
}

/* Category Label */
.lbl {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
}

.lbl1 {
    font-size: 0.9rem;
    font-weight: normal;
}

/* Submenu Children */
.children {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fafbfc;
    border-top: 1px solid #f0f0f0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.children.collapse.in,
.children.show {
    max-height: 800px;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Second Level Categories */
.deeper.parent {
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    background: #fafbfc;
}

.deeper.parent:last-child {
    border-bottom: none;
}

.deeper.parent>a {
    display: flex;
    align-items: center;
    padding: 12px 20px 12px 45px;
    color: #6c757d;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 10px;
    font-size: 0.9rem;
    position: relative;
}

.deeper.parent>a:hover {
    background: #f5f5f5;
    padding-left: 55px;
    color: #2c7da0;
}

.deeper.parent.active>a {
    background: rgba(44, 125, 160, 0.08);
    color: #2c7da0;
    font-weight: 600;
    border-left: 2px solid #2c7da0;
}

.deeper.parent .sign {
    width: 20px;
    height: 20px;
    background: rgba(108, 117, 125, 0.1);
}

.deeper.parent .sign i {
    font-size: 10px;
    color: #6c757d;
}

.deeper.parent>a:hover .sign {
    background: rgba(44, 125, 160, 0.2);
}

.deeper.parent>a:hover .sign i {
    color: #2c7da0;
}

/* Third Level Categories (End Categories) */
.children .children {
    background: #ffffff;
    padding-left: 0;
    border-top: none;
}

.children .children .item-411,
.children .children li[class*="item-"] {
    border-bottom: 1px solid #f8f9fa;
    position: relative;
}

.children .children .item-411:last-child,
.children .children li[class*="item-"]:last-child {
    border-bottom: none;
}

.children .children a {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 65px;
    color: #868e96;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
    font-size: 0.85rem;
    position: relative;
}

.children .children a:hover {
    background: #f8f9fa;
    padding-left: 75px;
    color: #2c7da0;
}

.children .children a.active {
    background: rgba(44, 125, 160, 0.08);
    color: #2c7da0;
    font-weight: 500;
    border-left: 2px solid #2c7da0;
}

/* Remove default plus/minus for end categories */
.children .children .sign {
    display: none;
}

/* Active state for end categories */
.children .children li.active a {
    background: rgba(44, 125, 160, 0.08);
    color: #2c7da0;
    font-weight: 500;
    border-left: 2px solid #2c7da0;
}

/* Hover Underline Effect */
.cat-level-1>a::after,
.deeper.parent>a::after,
.children .children a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #2c7da0, #61a5c2);
    transition: width 0.3s ease;
}

.cat-level-1>a:hover::after,
.deeper.parent>a:hover::after,
.children .children a:hover::after {
    width: 100%;
}

/* Rotate icon when expanded */
.cat-level-1.open .sign i,
.cat-level-1.active .sign i,
.cat-level-1 .sign.collapsed i {
    transition: transform 0.3s ease;
}

.cat-level-1:not(.collapsed) .sign i,
.cat-level-1.open .sign i {
    transform: rotate(45deg);
}

.deeper.parent:not(.collapsed) .sign i,
.deeper.parent.open .sign i {
    color: #000;
    font-size: 14px;
}

#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.toast-notification {
    min-width: 300px;
    margin-bottom: 15px;
    padding: 15px 20px;
    border-radius: 8px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.toast-notification.success {
    border-left: 4px solid #28a745;
    background: #f0fff4;
}

.toast-notification.error {
    border-left: 4px solid #dc3545;
    background: #fff5f5;
}

.toast-notification.warning {
    border-left: 4px solid #ffc107;
    background: #fffbf0;
}

.toast-notification.info {
    border-left: 4px solid #17a2b8;
    background: #f0f9ff;
}

.toast-icon {
    font-size: 24px;
}

.toast-notification.success .toast-icon {
    color: #28a745;
}

.toast-notification.error .toast-icon {
    color: #dc3545;
}

.toast-notification.warning .toast-icon {
    color: #ffc107;
}

.toast-notification.info .toast-icon {
    color: #17a2b8;
}

.toast-content {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.toast-close {
    cursor: pointer;
    font-size: 18px;
    color: #999;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #333;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    animation: progress 3s linear forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes progress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* Animation for dropdown */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.children {
    animation: slideDown 0.3s ease-out;
}

/* Bootstrap Collapse Compatibility */
.collapse {
    display: none;
}

.collapse.in,
.collapse.show {
    display: block;
}

/* Active State for Current Page */
.cat-level-1.active>a {
    background: linear-gradient(90deg, rgba(44, 125, 160, 0.1), white);
    color: #2c7da0;
    font-weight: 600;
    border-left: 3px solid #2c7da0;
}

.deeper.parent.active>a {
    background: rgba(44, 125, 160, 0.08);
    color: #2c7da0;
    font-weight: 600;
    border-left: 2px solid #2c7da0;
}



#left ul.nav>li.cat-level-1.parent>a {
    background: #ffffff;
    color: #000000;
}

#left ul.nav>li.parent>a {
    text-transform: capitalize;
}

#left ul.nav>li.cat-level-1.parent>a>.sign,
#left ul.nav>li.cat-level-1 li.parent>a>.sign {
    margin-left: 0px;
    background-color: #ffffff;
    color: #000;
    padding: 0;
}

#left ul.nav>li.cat-level-1.parent>a {
    background: #ffffff;
    color: #000000;
    padding: 0 15px;
    border: none;
}

#left.span3::-webkit-scrollbar {
    width: 5px;
}

#left.span3::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#left.span3::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
    transition: background 0.3s ease;
}

#left.span3::-webkit-scrollbar-thumb:hover {
    background: #2c7da0;
}

#left ul.nav>li.cat-level-1 .lbl {
    color: #000000;
}


/* Ripple Effect on Click */
.cat-level-1>a,
.deeper.parent>a,
.children .children a {
    position: relative;
    overflow: hidden;
}

.cat-level-1>a:active:after,
.deeper.parent>a:active:after,
.children .children a:active:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(44, 125, 160, 0.3);
    transform: translate(-50%, -50%);
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }

    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* Badge for Category Count (Optional) */
.cat-level-1>a .badge {
    background: #e9ecef;
    color: #6c757d;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cat-level-1>a:hover .badge {
    background: #2c7da0;
    color: white;
}

/* Responsive Design */
@media (max-width: 992px) {
    #left.span3 {
        margin-bottom: 30px;
    }

    .nav.menu {
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .cat-level-1>a {
        padding: 12px 15px;
    }

    .deeper.parent>a {
        padding: 10px 15px 10px 35px;
    }

    .children .children a {
        padding: 8px 15px 8px 55px;
    }

    .cat-level-1>a:hover {
        padding-left: 20px;
    }

    .deeper.parent>a:hover {
        padding-left: 45px;
    }

    .children .children a:hover {
        padding-left: 65px;
    }

    .sign {
        width: 22px;
        height: 22px;
    }

    .sign i {
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    h3 {
        font-size: 1.3rem;
    }

    .lbl {
        font-size: 0.9rem;
    }

    .lbl1 {
        font-size: 0.85rem;
    }
}




/* Smooth Hover Transition for All Items */
.cat-level-1,
.deeper.parent,
.children .children li {
    transition: all 0.3s ease;
}

/* Focus States for Accessibility */
.cat-level-1>a:focus,
.deeper.parent>a:focus,
.children .children a:focus {
    outline: none;
    background: rgba(44, 125, 160, 0.1);
    color: #2c7da0;
}