/* ====== GOOGLE FONTS IMPORT ====== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Playfair+Display:wght@400;700&family=Dancing+Script:wght@400;700&display=swap');
/* ====== LANDSCAPE SLIDER STYLES ====== */
.ls-slider-container {
width: 100%;
height: 100vh;
max-height: 1350px;
position: relative;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ls-slider-wrapper {
width: 100%;
height: 100%;
position: relative;
}
/* Individual slides */
.ls-slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ls-slide.ls-active {
opacity: 1;
}
/* Slide background images */
.ls-slide-bg {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* Content for first slide */
.ls-slide-content {
top: 35%;
position: absolute;
z-index: 2;
width: 90%;
max-width: 1400px;
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
}
/* Text container for first slide */
.ls-text-container {
text-align: center;
width: 70%;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: auto;
}
/* Main heading - Using Montserrat for ALLROUNDER font */
.ls-main-heading {
font-weight: 500;
font-size: 2.5vw;
color: white;
line-height: 1;
letter-spacing: 3px;
margin-bottom: 10px;
text-align: center;
width: 100%;
font-family: 'Montserrat', sans-serif; /* Similar to ALLROUNDER */
}
/* Highlight text - Using Dancing Script for Amsterdam font */
.ls-highlight {
font-size: 4vw;
color: #d3b054;
line-height: 1;
margin-top: 10px;
font-family: 'Dancing Script', cursive; /* Similar to Amsterdam Three */
font-weight: 700;
}
/* Countdown timer */
.ls-countdown-container {
width: 100%;
margin-top: 20px;
}
.ls-countdown-title {
color: white;
font-size: 1.3vw;
text-align: right;
margin-bottom: 10px;
letter-spacing: 1px;
font-family: 'Montserrat', sans-serif; /* Similar to ALLROUNDER */
}
.ls-countdown {
display: flex;
justify-content: flex-end;
gap: 15px;
}
.ls-countdown-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 100px;
}
.ls-countdown-value {
font-size: 2.5vw;
color: #d3b054;
line-height: 1;
font-family: 'Dancing Script', cursive; /* Similar to Amsterdam Three */
font-weight: 700;
}
.ls-countdown-label {
color: white;
font-size: 1vw;
margin-top: 5px;
letter-spacing: 1px;
font-family: 'Montserrat', sans-serif; /* Similar to ALLROUNDER */
}
/* Navigation buttons */
.ls-slider-nav {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
align-items: center;
gap: 30px;
}
.ls-nav-btn {
background-color: rgba(211, 176, 84, 0.7);
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
transition: all 0.3s ease;
font-family: 'Montserrat', sans-serif;
}
.ls-nav-btn:hover {
background-color: rgba(211, 176, 84, 1);
transform: scale(1.1);
}
/* Slide indicators */
.ls-slide-indicators {
display: flex;
gap: 15px;
}
.ls-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.ls-indicator.ls-active {
background-color: #d3b054;
transform: scale(1.2);
}
/* Image display classes */
.ls-desktop-image {
display: block;
}
.ls-mobile-image {
display: none;
}
/* Rest of the CSS remains the same... */
/* [Previous CSS code continues from here - all responsive styles remain exactly the same] */
@media (max-width: 1024px) {
.ls-slide-content {
max-width: 100%;
top: 37%;
padding: 0 15px;
}
.ls-text-container {
width: 90%;
padding: 10px;
}
.ls-main-heading {
font-size: 3vw;
}
.ls-highlight {
font-size: 6vw;
}
.ls-countdown-title {
font-size: 2.2vw;
}
.ls-countdown-value {
font-size: 4vw;
}
.ls-countdown-label {
font-size: 1.3vw;
}
}
@media (max-width: 768px) {
.ls-slider-container {
height: 70vh;
min-height: 500px;
}
.ls-slide-content {
flex-direction: column;
justify-content: center;
text-align: center;
top: 20%;
}
.ls-text-container {
width: 90%;
margin: 0 auto;
align-items: center;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
.ls-main-heading {
font-size: 4vw;
text-align: center;
letter-spacing: 3px;
line-height: 1.5;
}
.ls-highlight {
font-size: 8vw;
margin-top: 15px;
}
.ls-countdown-title {
font-size: 4vw;
text-align: center;
margin-bottom: 15px;
}
.ls-countdown {
justify-content: center;
gap: 10px;
}
.ls-countdown-item {
min-width: 70px;
}
.ls-countdown-value {
font-size: 6vw;
}
.ls-countdown-label {
font-size: 2.5vw;
}
.ls-slider-nav {
bottom: 20px;
}
}
@media (max-width: 480px) {
.ls-slider-container {
height: auto;
aspect-ratio: 3 / 4;
max-height: none;
}
.ls-slide-bg.ls-mobile-image {
object-fit: contain;
width: 100%;
height: 100%;
}
.ls-countdown-container {
margin-top: 0px !important;
backdrop-filter: blur(15px);
background: transparent;
}
.ls-slide-content {
top: 18%;
width: 100%;
}
.ls-text-container {
width: 95%;
padding: 25px 5px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 12px;
}
.ls-main-heading {
font-size: 4vw;
letter-spacing: 2px;
line-height: 1.4;
}
.ls-highlight {
font-size: 5vw;
margin-top: 20px;
margin-bottom: 10px;
}
.ls-countdown-title {
font-size: 5vw;
margin-bottom: 12px;
text-align: center;
}
.ls-countdown {
gap: 8px;
justify-content: center;
}
.ls-countdown-item {
min-width: 65px;
}
.ls-countdown-value {
font-size: 5vw;
}
.ls-countdown-label {
font-size: 3.5vw;
}
.ls-nav-btn {
width: 50px;
height: 50px;
font-size: 18px;
}
.ls-slider-nav {
gap: 20px;
bottom: 30px;
}
.ls-desktop-image {
display: none;
}
.ls-mobile-image {
display: block;
}
}
@media (max-width: 375px) {
.ls-slider-container {
min-height: 667px;
height: 100vh;
}
.ls-slide-content {
top: 12%;
}
.ls-text-container {
padding: 20px 12px;
}
.ls-main-heading {
font-size: 6vw;
}
.ls-highlight {
font-size: 5vw;
}
.ls-countdown-item {
min-width: 60px;
}
.ls-countdown-value {
font-size: 5vw;
}
.ls-countdown-label {
font-size: 4vw;
}
}
/* Loading state */
.ls-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
z-index: 100;
display: none;
font-family: 'Montserrat', sans-serif;
}
/* Accessibility improvements */
.ls-nav-btn:focus,
.ls-indicator:focus {
outline: 2px solid #d3b054;
outline-offset: 2px;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.ls-slide {
transition: none;
}
.ls-nav-btn:hover {
transform: none;
}
.ls-indicator.ls-active {
transform: none;
}
}
<!--
<!-- -->
// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Slider elements
const lsSlides = document.querySelectorAll('.ls-slide');
const lsIndicators = document.querySelectorAll('.ls-indicator');
const lsPrevBtn = document.querySelector('.ls-prev-btn');
const lsNextBtn = document.querySelector('.ls-next-btn');
const lsLoading = document.getElementById('lsLoading');
// Countdown elements
const lsDaysElement = document.getElementById('ls-days');
const lsHoursElement = document.getElementById('ls-hours');
const lsMinutesElement = document.getElementById('ls-minutes');
const lsSecondsElement = document.getElementById('ls-seconds');
// Configuration - SET YOUR VALUES HERE
const lsConfig = {
// Countdown date - SET YOUR TARGET DATE HERE
countdownDate: new Date('2026-03-21T23:59:59').getTime(),
// Slide timing (milliseconds)
slideInterval: 9000, // 5 seconds
// Image paths (already set in HTML img src attributes)
images: {
slide1: {
desktop: 'https://planetsheesha.com/wp-content/uploads/2025/12/Zaafrani-Oud-Website.jpg',
mobile: 'https://planetsheesha.com/wp-content/uploads/2025/12/3.jpg'
},
slide2: {
desktop: 'https://planetsheesha.com/wp-content/uploads/2025/12/Sliders-1-scaled.jpg',
mobile: 'https://planetsheesha.com/wp-content/uploads/2025/12/4.jpg'
}
}
};
// Slider state
let lsCurrentSlide = 0;
let lsAutoSlideInterval;
let lsIsLoading = false;
// Function to handle responsive image switching
function lsHandleResponsiveImages() {
const isMobile = window.innerWidth {
img.style.display = 'none';
img.setAttribute('aria-hidden', 'true');
});
mobileImages.forEach(img => {
img.style.display = 'block';
img.setAttribute('aria-hidden', 'false');
});
} else {
desktopImages.forEach(img => {
img.style.display = 'block';
img.setAttribute('aria-hidden', 'false');
});
mobileImages.forEach(img => {
img.style.display = 'none';
img.setAttribute('aria-hidden', 'true');
});
}
}
// Initialize the slider
function lsInitSlider() {
lsHandleResponsiveImages();
lsUpdateSlide();
lsStartAutoSlide();
lsUpdateCountdown();
setInterval(lsUpdateCountdown, 1000);
lsHideLoading();
}
// Show loading indicator
function lsShowLoading() {
if (lsLoading) {
lsLoading.style.display = 'block';
lsIsLoading = true;
}
}
// Hide loading indicator
function lsHideLoading() {
if (lsLoading) {
lsLoading.style.display = 'none';
lsIsLoading = false;
}
}
// Update slide display
function lsUpdateSlide() {
lsSlides.forEach(slide => {
slide.classList.remove('ls-active');
slide.setAttribute('aria-hidden', 'true');
});
lsSlides[lsCurrentSlide].classList.add('ls-active');
lsSlides[lsCurrentSlide].setAttribute('aria-hidden', 'false');
lsIndicators.forEach((indicator, index) => {
if (index === lsCurrentSlide) {
indicator.classList.add('ls-active');
indicator.setAttribute('aria-current', 'true');
} else {
indicator.classList.remove('ls-active');
indicator.setAttribute('aria-current', 'false');
}
});
}
// Go to next slide
function lsNextSlide() {
lsCurrentSlide = (lsCurrentSlide + 1) % lsSlides.length;
lsUpdateSlide();
lsResetAutoSlide();
}
// Go to previous slide
function lsPrevSlide() {
lsCurrentSlide = (lsCurrentSlide - 1 + lsSlides.length) % lsSlides.length;
lsUpdateSlide();
lsResetAutoSlide();
}
// Go to specific slide
function lsGoToSlide(index) {
if (index >= 0 && index < lsSlides.length) {
lsCurrentSlide = index;
lsUpdateSlide();
lsResetAutoSlide();
}
}
// Start auto-slide
function lsStartAutoSlide() {
lsAutoSlideInterval = setInterval(lsNextSlide, lsConfig.slideInterval);
}
// Reset auto-slide timer
function lsResetAutoSlide() {
clearInterval(lsAutoSlideInterval);
lsStartAutoSlide();
}
// Update countdown timer
function lsUpdateCountdown() {
const now = new Date().getTime();
const timeLeft = lsConfig.countdownDate - now;
if (timeLeft {
indicator.addEventListener('click', () => {
lsGoToSlide(index);
});
indicator.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
lsGoToSlide(index);
}
});
});
// Pause auto-slide on hover/focus
const lsSliderContainer = document.querySelector('.ls-slider-container');
if (lsSliderContainer) {
lsSliderContainer.addEventListener('mouseenter', () => {
clearInterval(lsAutoSlideInterval);
});
lsSliderContainer.addEventListener('mouseleave', () => {
lsStartAutoSlide();
});
lsSliderContainer.addEventListener('focusin', () => {
clearInterval(lsAutoSlideInterval);
});
lsSliderContainer.addEventListener('focusout', () => {
lsStartAutoSlide();
});
}
// Handle window resize
function lsHandleResize() {
lsHandleResponsiveImages();
const slideContent = document.querySelector('.ls-slide-content');
if (slideContent) {
if (window.innerWidth <= 480) {
slideContent.style.top = '15%';
} else if (window.innerWidth {
lsTouchStartX = e.changedTouches[0].screenX;
}, { passive: true });
lsSliderContainer.addEventListener('touchend', (e) => {
lsTouchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, { passive: true });
}
function handleSwipe() {
const swipeThreshold = 50;
const diff = lsTouchStartX - lsTouchEndX;
if (Math.abs(diff) > swipeThreshold) {
if (diff > 0) {
lsNextSlide();
} else {
lsPrevSlide();
}
}
}
// Show loading initially
lsShowLoading();
// Initialize the slider
window.addEventListener('load', function() {
setTimeout(lsInitSlider, 100);
});
// Fallback initialization
setTimeout(function() {
if (lsIsLoading) {
lsInitSlider();
}
}, 3000);
});
Loading...
-->
<!-- -->
Zaafrani Oud A Scented Legacy, Bottled for the Present
Welcome to the World of Zaafrani – Where luxury meets legacy.
Every fragrance begins with a feeling of a memory of home, the lingering scent of rose petals in the breeze, the deep, earthy aroma of ancient oud burning in a distant souk. At Zaafrani Oud, we don’t just make perfumes, we bring memories to life. Rooted in the rich traditions of Arabic perfumery and thoughtfully crafted for the modern world, our fragrances are more than just scents; they’re experiences, emotions, and heritage in a bottle. From the bold power of pure oud to the soothing warmth of bakhur, every Zaafrani creation takes you on a sensory journey across cultures, across moments, and into the heart of what makes you, you.
Why Choose Us?
Inspired by Heritage
Delivered with Love
Long-Lasting Fragrance
Premium Ingredients
Our Collection – Fragrances with a Soul
Al-Qasr Oud | Al-Shurooq | Oud Al-Dhahabi | Oud Al-Khalis
Zaafrani Oud – Mukhallat and Gul Ittars
Original price was: ₹2,999.00.₹1,999.00Current price is: ₹1,999.00. inclusive of GST
Add to cart
Zaafrani Oud – 10ml Set of 6 Apparel Perfumes
Original price was: ₹2,999.00.₹1,499.00Current price is: ₹1,499.00. inclusive of GST
Add to cart
Latest blog
