/* CSS Document */

:root {
    --primary-color: #4CAF50;
    --secondary-color: #388E3C;
    --text-color: #333333;
    --background-color: #F5F5DC;
    --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-2xl);
    --section-padding-x: var(--space-xl);

}


/* Responsive Navbar */
.navbar-toggle {
    display: none;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 15;
}

.navbar-close {
    display: none; /* Initially hidden */
    background-color: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 15;
}

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

nav ul.collapsed {
    display: flex; /* Initially hidden */
    flex-direction: row;
    position: static;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    transition: all 0.3s ease-in-out; /* Add smooth transition */
}

nav ul.collapsed.show {
    display: block; /* Show the navbar when toggled */
}



/* Media size change */

/* Tablet (769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.container {
    margin: 0 auto; /* Center the container */
    padding: 0 var(--space-sm);
	}	
	
	#home {
        padding: var(--space-lg) var(--space-md); /* 32px 16px */
    }
	
	.home-container {
        gap: var(--space-md); /* 24px */
    }

    .home-left {
        padding: var(--space-sm); /* 8px */
    }

    .home-left img {
        width: 100%;
        max-width: 45vw; /* Proportional */
    }

    h1 {
        font-size: 32px;
        margin-bottom: var(--space-xl); /* 32px */
    }

    .home-right .subheadline {
        font-size: 15px;
        margin-bottom: var(--space-lg); /* 24px */
    }

    .benefits-list li {
        font-size: 14px;
        margin-bottom: var(--space-sm); /* 8px */
    }

    .home-right .btn {
        padding: 12px 30px;
        margin: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    }
	
	
	.shipping-map {
        flex: 0.4; /* 50/50 split */
    }
	
	.shipping-details {
    flex: 0.6;
    text-align: left;
	}
	
}





@media (max-width: 768px) {

    nav ul.collapsed {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.9);
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }
    
	nav ul.collapsed.show {
        animation: slideIn 0.3s ease forwards; /* NEW slide animation */
    }
	
    @keyframes slideIn { /* NEW */
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
	
    nav ul.collapsed li {
        padding: 10px 0;
    }
	
    .navbar-toggle {
        display: block;
    }
    
    .language-selector {
        display: none; /* Hide desktop language selector */
    }

    .language-selector-mobile {
        display: block; /* Show in mobile menu */
    }
	
	.language-selector-mobile select {
        width: 100%;
        max-width: 150px;
        margin: 0 auto;
        padding: 8px;
        font-size: 14px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
	
	nav ul.collapsed li.language-mobile {
        padding: 15px 0;
        text-align: center;
    }
    
    nav ul.collapsed li.language-mobile select {
        background-color: white;
        color: #333;
        padding: 8px 12px;
        width: 80%;
        max-width: 200px;
    }
	
	.container {
    margin: 0 auto; /* Center the container */
    padding: 0;
	}
	
	section {
        padding: 40px 10px; /* Adjust for mobile */
    }
	
	#home {
        padding: 0; /* 24px 8px */
        min-height: auto; /* Fit content */
    }

    .home-container {
        flex-direction: column;
		margin: 0;
    }

    .home-left {
        padding: 0; /* 8px */
		margin: 0;
    }

    .home-left img {
        width: 100%; /* Fuller width */
		max-width: 800px;
		border-radius: 0;
    }

    .home-right {
        padding: var(--space-xl) 0; /* 16px vertical */
        text-align: left;
    }

    h1 {
        font-size: 28px;
        margin-bottom: var(--space-lg); /* 24px */
		text-align: center;
    }

    .home-right .subheadline {
        font-size: 14px;
        margin-bottom: var(--space-md); /* 16px */
    }
	
	h3 {
		text-align: center;
	}
	
    .home-right .btn {
		text-align: center;
        margin: var(--space-sm) auto; /* 8px */
    }
	
	.product-container {
        padding: 10px;
    }
    
	.shipping-container {
        flex-direction: column;
        text-align: center;
    }

    .shipping-details h2{
        text-align: center;
    }

	
	
	#why-khejri {
        padding: 40px 10px; /* Reduce padding on smaller screens */
    }
	
	.faq-question {
        font-size: 14px;
        padding: 12px 0;
    }
    
    .faq-answer {
        font-size: 13px;
    }
	


}