/* CSS Document */

:root {
    --primary-color: #4CAF50;
    --secondary-color: #388E3C;
    --text-color: #333333;
    --background-color: #FAF9F6;
    --white: #FFFFFF;
    --black: #000000;
    --gray: #555555;
    --light-gray: #CCCCCC;
	
	/* Spacing Scale */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */
	
	/* Section Spacing */
    --section-padding-y: var(--space-xl);
    --section-padding-x: var(--space-xl);
    
    /* Container */
    --container-padding-x: var(--space-xl);
    --container-max-width: 1200px;
}

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


.warning-text {
  color: #e63946;
  font-size: 13px;
  display: none;
  margin-top: -8px;
  margin-bottom: 8px;
}
input.error {
  border-color: #e63946;
  background-color: #fff5f5;
}


/* General styles for body and html */
body, html {
	font-family: 'Poppins', sans-serif; /* Sets default font */
	scroll-behavior: smooth; /* Smooth scrolling for anchor links */
	background-color: var(--background-color); /* Beige background */
    color: var(--text-color); /* Dark gray text */
	line-height: 1.7; 
}

h1 {
    font-size: 36px;
    color: #333333; /* Dark gray text */
	font-weight: 800; /* Bold heading */
    text-transform: uppercase; /* Uppercase text */
	letter-spacing: 1px; /* Add spacing between letters */
	margin-bottom:  var(--space-xl);
	text-shadow: 2px 2px 2px rgba(90, 70, 50, 0.2); /* warm brown tone */
}

h2 {
    font-size: 32px;
    margin-bottom: var(--space-xl);
    color: #333333; /* Dark gray text */
    font-family: 'Poppins', sans-serif; /* Modern font */
	font-weight: 600; /* Bold heading */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 1px; /* Add spacing between letters */
	text-shadow: 2px 2px 2px rgba(90, 70, 50, 0.15); /* warm brown tone */
}

h3 {
    font-size: 20px;
    margin-bottom:  var(--space-sm);
    color: #333;
	text-shadow: 2px 2px 2px rgba(90, 70, 50, 0.1); /* warm brown tone */
}

p {
    font-size: 14px;
    color: #555;
	margin-bottom: var(--space-sm);
}

ul {
	margin-bottom: var(--space-md);
}

/* Container for Consistent Width */
.container {
    max-width: var(--container-max-width); /* Limit max width for better readability */
    width: 100%;
    margin: 0 auto; /* Center the container */
    padding: 0 var(--container-padding-x);
  	overflow-x: hidden; /* Contain all children */
}

.btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); /* Green gradient */
    color: var(--white);
    padding: 12px 30px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
	letter-spacing: 0.5px;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
    margin: 10px; /* Optional: Add margin for spacing */
}

.btn:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); /* Reverse gradient on hover */
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.content {
	max-width: 800px; /* Limits the width for better readability */
	margin: 0 auto; /* Centers the content horizontally */
	z-index: 2;
}




/* Header */
header {
    background: linear-gradient(to top, #444444, #000000);
    padding: 1px 0; /* Consistent padding */
    position: sticky;
    top: 0;
    z-index: 1000;
	box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
	width: 100%;
}

/* Logo on the Left */
.logo img {
    max-width: 250px; /* Adjust logo size */
    height: auto;
	padding: var(--space-sm) 0 0;
}


/* Navbar Links in the Center */
nav {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    padding: 0 var(--space-md);
}

nav a {
    color: var(--white);
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--primary-color); /* Green on hover */
}

/* Navbar Toggle Button (for mobile) */
.navbar-toggle {
    display: none;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.language-selector {
}

/* Language Selector Dropdown Styles */
.language-selector select {
    background-color: transparent;
    border: 1px solid white;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.language-selector select:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown Options */
.language-selector select option {
    background-color: #333333; /* Dark gray background */
    color: white; /* White text */
}

/* Language Selector in Mobile Menu */
.language-selector-mobile {
    display: none; /* Hide by default */
    padding: 10px 0;
    text-align: center;
}

/* Full-screen sections */
section {
	width: 100%;
    padding: var(--section-padding-y) var(--section-padding-x); /* Add more padding */
	display: flex; /* Flexbox for centering content */
	flex-direction: column; /* Ensure vertical alignment of logo and content */
	justify-content: center; /* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	text-align: center; /* Centers text */
	background-size: cover; /* Ensures the background image covers the section */
	background-position: center; /* Centers the background image */
	position: relative; /* Needed for absolute positioning of logo */
	overflow: hidden; /* Ensures no overflow issues with blur */
	z-index: 2;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.02);
	scroll-margin-top: 75px; /* adjust to your header’s height */

}


/* General content styling for sections */
.content {
	max-width: 800px; /* Limits the width for better readability */
	margin: 0 auto; /* Centers the content horizontally */
	z-index: 2;
}



/* Home Section Styles */
#home {
    min-height: 90vh; /* Full viewport height */
	padding-top: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
	position: relative; /* NEW for overlay */
    background: #f8f8f8;
    overflow: hidden;
}

#home::before { /* NEW overlay gradient */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(0,0,0,0.1), rgba(0,0,0,0));
    z-index: 1;
}

.home-container {
    display: flex;
    align-items: stretch;
	gap: 40px;
    max-width: 100%;
    margin: 0 auto;
	position: relative;
    z-index: 2;
}

/* Left Side: Product Image */
.home-left {
    flex: 0.95;
    display: flex;
    align-items: stretch;
	padding: var(--space-sm);
}

.home-left img {
    width: 100%;
	max-width: 45vw;
    height: 100%; /* Proportional scaling */
	object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




/* Right Side: Content */
.home-right {
    flex: 1;
	display: flex;              /* make it a flex container */
    flex-direction: column;     /* stack content vertically */
    justify-content: center;
    text-align: left;
}



.home-right .subheadline {
    font-size: 16px;
    color: #555555; /* Medium gray text */
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

.benefits-list {
    list-style: none;
   
}

.benefits-list li {
    font-size: 16px;
    color: #333333; /* Dark gray text */
    margin-bottom: var(--space-sm);
    padding-left: var(--space-lg);
}

.benefits-list li::before {
    content: "✔"; /* Checkmark icon */
    position: absolute;
    left: 0;
    color: #4CAF50; /* Green checkmark */
    font-size: 14px;
}



/* Animation for Home Section */
.home-left img {
    opacity: 0;
	width: 100%;
    transform: translateX(-50px);
    animation: fadeInLeft 1s ease-in-out forwards;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.home-right h1, .home-right h3, .home-right .subheadline, .benefits-list {
    opacity: 0;
    transform: translateX(50px);
    animation: fadeInRight 1s ease-in-out forwards;
}

/* Apply only opacity animation to the button */
.home-right .btn {
    opacity: 0;
	display: inline-block;
	margin: var(--space-md) var(--space-sm) var(--space-sm) 20px;
    animation: fadeInRightButton 1s ease-in-out forwards;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out; /* Add transition for hover */
}

/* Keyframes for Animations */
@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframes for Button Animation (opacity only) */
@keyframes fadeInRightButton {
    to {
        opacity: 1;
    }
}







/* Product Section Styles */
#products {
    background: linear-gradient(to bottom, #FAF8ED, #F7F4E5);
    text-align: center;
}


.product-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	justify-content: center;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
	padding: clamp(15px, 2vw, 30px);
	padding-top: 18px;
}

.product-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    padding: 10px 0px;
    text-align: center;
    width: 100%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.product-card img {
    width: 100%;
    max-width: 250px;
	margin: var(--space-lg) 0 var(--space-sm);
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.5s ease-in-out; /* Slower hover effect */
}


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


.product-card h3 a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s;
}

.product-card h3 a:hover {
    color: #4CAF50;
}

.product-card p {
	padding:0px 10px;
    font-size: 13px;
    color: #555555;
    line-height: 1.6;
}

.product-card p strong {
	font-size: 16px;
    color: #333333;
}

.product-card .btn {
    display: inline-block;
    padding: 8px 20px;
}

/* Product Buttons */
.product-buttons .secondary-btn {
  background: #F5F5DC;
  color: var(--text-color);
  border: 1px solid var(--primary-color);
}
.product-buttons .secondary-btn:hover {
  background: var(--primary-color);
  color: #fff;
}




/* Shipping & Delivery Section */

#shipping-delivery {
    background: #f8f8f8;;
}

#shipping-delivery::before { /* NEW overlay gradient */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(0,0,0,0.1), rgba(0,0,0,0));
    z-index: 1;
}

.shipping-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
	z-index: 2;
}

.shipping-map {
	align-items: center;
	text-align: center;
    flex: 0.4;
	border-radius: 12px;
	box-shadow: 0 3px 12px rgba(0,0,0,0.15); /* NEW depth */
	z-index: 2;
}

.shipping-map img {
    width: 100%;
	object-fit: cover;
	padding: 20px;
}

.shipping-details {
    flex: 0.6;
    text-align: left;
	margin-top: 10px;
	margin-bottom: 22px;
    padding: 30px 40px; /* NEW inner spacing */
    border-radius: 12px; /* NEW rounded edges */
    box-shadow: 0 3px 12px rgba(0,0,0,0.15); /* NEW subtle shadow */
	z-index: 2;
}

.shipping-details h2 {
    margin-bottom: var(--space-lg);
}

.shipping-details p { /* Description paragraph */
    font-size: 15px;
    margin-bottom: var(--space-lg); /* 24px */
    line-height: 1.6;
}


.shipping-details ul {
    list-style: none;
}

.shipping-details ul li {
    font-size: 14px;
    margin-bottom: var(--space-sm);
    padding-left: 32px;
    position: relative;
	line-height: 1.5;
}

.shipping-details ul li::before {
    content: "";
	color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: url("../images/truck.svg") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); /* subtle depth */
}

.pin-code-checker {
	display: flex;
    flex-wrap: nowrap;
    gap: 0px;
    margin-bottom: var(--space-lg);
	justify-content: flex-start;
}

.pin-code-checker input {
    flex: 1;
	min-width: 180px; /* ⬅️ Prevent too small */
    max-width: 450px; /* ⬅️ Limit maximum */; 
    padding: 12px 16px;
    border-radius: 12px 0 0 12px;
    border: 1px solid #ccc;
	border-right: none;
    background-color: #fffdf7;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); /* NEW */
}

.pin-code-checker button {
	flex-shrink: 0; /* ⬅️ Prevent shrinking of button */
    padding: 12px 24px;
	margin-left: 1px;
    background-color: #4CAF50;
    color: white;
    border: none;
	border-radius: 0 12px 12px 0;
    cursor: pointer;
    transition: background-color 0.3s;
	box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.pin-code-checker button:hover {
    background-color: #388E3C;
}


#why-khejri {
    background: linear-gradient(to bottom, #FAF8ED, #F7F4E5);
    text-align: center;
	position: relative;
    overflow: hidden;
}

#why-khejri::before { /* NEW faint leaf pattern bg */
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/leaf-pattern.png') repeat;
    opacity: 0.12;
    z-index: 0;
}

#why-khejri .content {
    margin: 0 auto;
    text-align: center;
	position: relative;
    z-index: 1;
}

#why-khejri h3 {
    text-align: left;
}

#why-khejri ul {
    list-style: none;
    padding: 0;
	text-align: left;
}

#why-khejri ul li {
    font-size: 16px;
    color: #555555;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

#why-khejri ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-size: 18px;
}

#why-khejri .btn {
    display: inline-block;
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: white;
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
    margin-top: 20px;
}


#why-khejri .btn:hover {
    background: linear-gradient(45deg, #E8DFC7, #F5F5DC);
    transform: scale(1.05);
}


/* Override section styles for FAQ */
#faq {
    height: auto; /* Remove full viewport height */
    background-color: #FFFFFF;
    padding: 70px 40px 50px;
}

/* Specific to faq page headlines */
#faq h3 {
	text-align: left;
	border-bottom: 1px solid #eee;
    border-radius: 6px; /* NEW */
	padding: 10px 30px;
	text-shadow: 0; 	
}

.faq-content {
    max-width: 800px;
    margin: 0 auto;
}


.faq-item {
    border-bottom: 1px solid #eee;
    border-radius: 6px; /* NEW */
	padding: 0 10px;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    text-align: left;
    font-size: 16px;
    color: #333333;
    padding: 15px 0;
    cursor: pointer;
    transition: color 0.3s;
}

.faq-question.active {
    border-left: 4px solid var(--primary-color); /* NEW highlight */
    padding-left: 8px;
}

.faq-question:hover {
    color: #4CAF50;
}

.faq-icon {
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.2s;
    color: #4CAF50;
}

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

.faq-answer {
    display: none;
	text-align: left;
    padding: 5px 0 15px;
    font-size: 14px;
    color: #555555;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.faq-answer.show {
    display: block;
    max-height: 500px;
}

/* Footer Styles */
footer {
    background: linear-gradient(to bottom, #4A4A4A, #000000);
    color: white;
    padding: 40px 0 20px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-branding {
    flex: 1 1 300px;
    text-align: center;
	
}

.footer-logo {
    max-width: 250px;
    height: auto;
}

.footer-tagline {
    font-size: 14px;
    color: #ccc;
	margin-bottom: 20px;
}

.footer-links {
    flex: 2 1 400px;
    display: flex;
    gap: 20px;
}

.link-column {
    flex: 1;
	text-align: center;
}

.link-column h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: white;
}

.link-column ul {
    list-style: none;
    padding: 0;
}

.link-column ul li {
    margin-bottom: 10px;
}

.link-column ul li a {
	position: relative; /* NEW underline animation */
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.link-column ul li a::after { /* NEW underline effect */
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}


.link-column ul li a:hover {
    color: white;
}

.link-column ul li a:hover::after {
    width: 100%;
}

.footer-newsletter {
    flex: 1 1 300px;
    text-align: center;
}


.newsletter-form {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 360px;
    margin: 0 auto;
	padding: 12px 12px;
}

.newsletter-form input {
	flex: 1;
	min-width: 100px;
    max-width: 250px; /* limits total width */
    padding: 7px 12px;
    border: none;
    border-radius: 12px 0 0 12px;
    font-size: 14px;
    background-color: #555;
    color: white;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}


.newsletter-form input::placeholder {
    color: #ccc;
}

.newsletter-form button {
	margin: 0;
	flex-shrink: 0;
    padding: 7px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.newsletter-form button:hover {
    background-color: #388E3C;
}


.social-icons {
    display: flex;
    justify-content: center;
    gap: 22px;
	padding: 6px 10px;
}

.social-icons img {
    width: 18px;
    height: 18px;
    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s ease;
    filter: brightness(0) invert(1);
}

.social-icons img:hover {
    opacity: 1;
    transform: scale(1.15);
	box-shadow: 0 0 10px var(--primary-color);
}





.footer-bottom {
    text-align: center;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #555555;
    font-size: 13px;
    color: #CCCCCC;
}

.legal-links {
    margin-bottom: 7px;
}

.legal-links a {
    color: #CCCCCC;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s;
}

.legal-links a:hover {
    color: white;
}
.footer-bottom p{
    font-size: 12px;
}



/* Modal backdrop */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  overflow-y: auto; /* allow scroll if needed */
}

/* Modal box */
.modal-content {
  background: #fff;
  margin: 5vh auto;
  padding: 20px 25px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  position: relative;
  max-height: 90vh;        /* prevent overflow */
  overflow-y: auto;         /* allow internal scroll */
  scrollbar-width: thin;
}

/* Inputs and button */
.modal-content input, 
.modal-content button {
  width: 100%;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px;
  box-sizing: border-box;
}

/* Close button */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  color: #666;
  cursor: pointer;
}

/* Adjust for small devices */
@media (max-height: 600px) {
  .modal-content {
    margin: 2vh auto;
    padding: 15px;
    max-height: 96vh;
  }
}