html, body {
margin: 0;
font-family: 'Playfair Display', serif !important;

}

p {
font-family: Helvetica, Arial, sans-serif !important;
}

/* ================= HERO SECTION ================= */
.container{
  max-width: 1150px !important;
}


.hero {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 100vh;
overflow: hidden;
background-color: #000;
gap: 15px;
position: relative;
z-index: 1; 
}

.hero .column {
flex: 1 1 auto;
background-size: cover;
background-position: center;
position: relative;
transform: translateY(100%);
}

.hero .overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.1);
}

.hero-text {
color: white;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
}

.hero-text h1 {
font-size: 4rem;
font-weight: bold;
}

.hero-text p {
font-size: 1.2rem;
margin-top: 0.5rem;
}

.hero .menu-btn {
position: absolute;
top: 5px;
right: 20px;
background: white;
color: black;
padding: 6px 14px;
border-radius: 20px;
font-weight: 500;
margin-right: 10px !important;
font-size: 0.9rem;
z-index: 3;
}

@media (max-width: 768px) {
.hero {
flex-direction: column;
}
.hero .column {
height: 25vh;
}
.logo{
width: 320px !important;
}
.cart-btn{
  margin-top: 7px !important;
}

}

/* ================= FRAGRANCE SECTION ================= */
.fragrance-section {
padding: 90px 0;
background-color: #fff;
}

.fragrance-section .container {
max-width: 1000px;
margin: 0 auto;
}

.fragrance-content {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
}

.fragrance-content .text-left,
.fragrance-content .text-right {
flex: 1;
}

.fragrance-content h2 {
font-size: 38px;
font-weight: 600;
line-height: 1.2;
max-width: 400px;
word-break: break-word;
}

.fragrance-content p {
font-size: 16px;
line-height: 1.6;
color: #333;
}

@media (max-width: 768px) {
.fragrance-content {
flex-direction: column;
gap: 20px;
}
.fragrance-content h2 {
font-size: 24px;
}
}

/* ================= PRODUCT SECTIONS (Common) ================= */
.fire-bg,
.product-bg,
.water-bg,
.earth-bg,
.air-bg,
.water-content-bg {
position: relative;
background-size: cover;
background-position: center;
min-height: 900px;
overflow: hidden;
}

.bg-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: -1;
}

.fire-bg { background-image: url('../img/Fire-image.webp'); }
.product-bg { background-image: url('../img/bg-img.webp'); }
.water-content-bg { background-image: url('../img/bg-img.webp'); }

/* GIF Center */
.fire-gif {
max-width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* Heading Image */
.product-heading-img {
width: 420px !important;
max-width: 100%;
}

/* Section Common Positioning */
.product-section {
position: relative;
}

.middle-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
perspective: 1200px;
}

.bottle-wrapper {
position: relative;
width: 18vw;
max-width: 240px;
aspect-ratio: 2/5;
transform-style: preserve-3d;
transition: transform 1s ease;
cursor: pointer;
}

.bottle-wrapper:hover {
transform: rotateY(180deg);
}

.bottle-wrapper .bottle {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
object-fit: contain;
}

/* Back face rotated */
.bottle-wrapper .back {
transform: rotateY(180deg);
}

.middle-image .stand {
width: 70vw;
max-width: 480px;
height: auto;
margin-top: -6%;
pointer-events: none;
}

.text {
color: #000;
font-size: 18px;
}

.shop-btn {
background: black;
color: white;
padding: 10px 25px;
border: none;
text-transform: uppercase;
letter-spacing: 1px;
}

/* ================= CONTENT BOXES ================= */
.content-box,
.water-box,
.air-box {
max-width: 600px;
width: 100%;
margin: 0 auto;
}

@media (min-width: 1200px) {
.content-box { transform: translateX(90px) !important; }
.water-box, .air-box { transform: translateX(-30px) !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
.content-box { transform: translateX(50px) !important; }
.water-box, .air-box { transform: translateX(-15px) !important; }
}

@media (max-width: 991px) {
.content-box, .water-box, .air-box {
transform: none !important;
text-align: center;
padding: 0 20px;
}
.middle-image img { max-width: 250px; }
}

@media (max-width: 480px) {
.middle-image {
top: 40%;
transform: translate(-50%, -50%);
}

.middle-image .bottle {
width: 70vw;
max-width: 170px !important;
position: relative;
left: -20px !important;
margin: 0 auto;
}

.middle-image .stand {
width: 80vw;
max-width: 260px;
margin-top: -15px !important;
}
}

/* ================= HEIGHT RESPONSIVE ================= */
@media (max-width: 992px) {
.fire-bg, .product-bg, .water-bg, .earth-bg, .air-bg, .water-content-bg {
min-height: 600px;
}
.fire-gif { max-width: 80%; }
}

@media (max-width: 576px) {
.fire-bg, .product-bg, .water-bg, .earth-bg, .air-bg, .water-content-bg {
min-height: 500px;
}
.product-heading-img{
padding-top: 70px !important;
}
}

/* ================= REVIEWS ================= */
.reviews-section {
background-image: url('../img/reviews-bg.webp');
background-size: cover;
background-position: center;
padding: 50px 20px;
color: white;
text-align: center;
}

.reviews-section h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.reviews-section p {
font-size: 1.2rem;
max-width: 900px;
margin: 0 auto 40px auto;
}

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

.images img {
width: 360px;
}

/* ================= FOOTER ================= */
footer {
padding: 80px 0px 20px 0px;
}

.footer-links a {
display: block;
color: white;
text-decoration: none;
font-size: 0.9rem;
margin-bottom: 5px;
}

.footer-links a:hover {
text-decoration: underline;
}

.newsletter {
margin-left: 80px;
}

.newsletter input {
background: transparent;
border: none;
border-bottom: 1px solid white;
color: white;
outline: none;
width: 100%;
padding: 5px;
}

.newsletter input::placeholder {
color: #ccc;
font-size: 0.8rem;
letter-spacing: 2px;
}

.newsletter-input {
border-radius: 0 !important;
text-transform: uppercase;
color: #fff;
}

.newsletter-input::placeholder {
text-transform: uppercase;
color: #fff;
opacity: 1 !important;
}

.social-icons a {
color: #808080;
margin-right: 10px;
font-size: 1.1rem;
}

.social-icons a:hover {
color: white;
}

.footer-bottom {
font-size: 0.8rem;
color: #aaa;
}

@media (max-width: 480px) {
.newsletter {
margin-left: 0;
}
}
/* intro animation css */
/* Intro Overlay */
.intro-overlay {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
overflow: hidden;
opacity: 1;
transition: opacity 1s ease;
}

.intro-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.logo-wrapper {
position: relative;
display: inline-block;
}

.logo {
width: 420px;
opacity: 0;
transform: scale(0.7);
z-index: 1;
}

.dot {
position: absolute;
top: 6%;
left: 75%;
transform: translate(-50%, -50%) scale(1);
transform-origin: center center;
width: 20px !important;
z-index: 2;
opacity: 1 !important;
}

.shine {
position: absolute;
top: 0;
left: -150%;
width: 80%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
transform: skewX(-20deg);
}

body.intro-active {
overflow: hidden;
}

.overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
pointer-events: none;
}

.menu-btn {
position: absolute;
top: 0px;
right: 30px;
background: #fff;
padding: 10px 18px;
border-radius: 5px;
cursor: pointer;
z-index: 3;
font-weight: bold;
}

/* Popup Menu */
.popup-menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(20, 20, 20, 0.95);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: left 0.4s ease;
z-index: 999 !important;
overflow: hidden;
}

.popup-menu.active {
left: 0;
}

.popup-menu ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}

.popup-menu ul li {
margin: 15px 0;
}

.popup-menu ul li a {
text-decoration: none;
color: #fff;
font-size: 28px;
transition: color 0.3s;
display: inline-block;
}

/* Letters effect */
.popup-menu ul li a span {
display: inline;
opacity: 0;
transform: translateY(20px);
}

.popup-menu ul li a span.show {
opacity: 1;
transform: translateY(0);
transition: all 0.3s ease;
}

.popup-menu ul li a:hover {
color: #aaa;
}

.close-btn {
position: absolute;
top: 20px;
right: 20px !important;
font-size: 30px;
color: #fff !important;
cursor: pointer;
}



@media (max-width: 768px) {
.popup-menu ul li a {
font-size: 20px;
}
}

/* reviews popup video */

/* Video Popup */
.video-popup {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 999;
}
.video-popup.active {
display: flex;
}
.video-content {
position: relative;
width: 80%;
max-width: 800px;
aspect-ratio: 16/9;
background: #000;
border-radius: 10px;
overflow: hidden;
}
.video-content iframe {
width: 100%;
height: 100%;
border: none;
}
.video-content .close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 35px;
color: #fff;
cursor: pointer;
z-index: 2;
transition: color 0.3s ease;
}
.video-content .close-btn:hover {
color: #ff9800;
}

/* end video popup css */

/* About Us Css */

/* Hero Section */
.hero-section {
position: relative;
height: 330px;
background: url(../img/Aboutus-banner.webp) center/cover no-repeat !important;
display: flex;
align-items: end;
justify-content: center;
color: #fff;
text-align: center;
padding-bottom: 50px;
  z-index: 1; 
}

.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-content h1 {
font-size: 2rem;
font-weight: 600;
}
.breadcrumb {
justify-content: center;
background: transparent;
margin-bottom: 0;

}
.breadcrumb-item a {
color: #fff;
text-decoration: none;
}
.breadcrumb-item.active {
color: #fff !important;
}

.menu{
border-radius: 30px;
font-size: 14px !important;
padding: 10px 20px;
}

.hero-banner {
background: url(../img/abstract-background\ 1.webp) bottom/cover no-repeat;
min-height: 500px;
position: relative;
overflow: hidden;
}

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

.hero-banner h1 {
font-size: 34px;
font-weight: 600;
}

.hero-banner p {
font-size: 1.1rem;
}

.hero-banner .btn {
border-radius: 30px;
font-weight: 400;
padding: 0px !important;
background-color: #00000000;
color: #fff;
}

.hero-image{
width: 100px !important;
margin-bottom: 20px !important;
}

.section-title {
text-align: center;
font-size: 1.8rem;
margin: 50px 0 30px;
}
.product img {
max-width: 80px;
margin-bottom: 15px;
}
.product {
transition: transform 0.3s;
padding: 20px;
background: #fafafa;
}
.product:hover {
transform: translateY(-5px);
}

.herobanner-logo{
  max-width: 400px !important;
}

.logo {
text-align: left !important;
}

@media (max-width: 768px) {
.logo {
text-align: left !important;
}
.container-fluid {
justify-content: flex-start !important;
}
.menu-btn {
margin-left: auto;
top: 1px;
margin-right: 5px;
}

.herobanner-logo{
  max-width: 300px !important;
}


}

/* end About Us css */

/* our team css */
.team-section {
position: relative;
height: 330px;
background: url(../img/team-bg.webp) center/cover no-repeat;
display: flex;
align-items: end;
justify-content: center;
color: #fff;
text-align: center;
padding-bottom: 50px;
}

.team-section img {
  max-width: 250px;
}
.team-section h4 {
  margin-bottom: 15px;
}
.social-links a {
  font-size: 20px;
  color: #333;
  transition: color 0.3s ease;
}
.social-links a:hover {
  color: #0d6efd;
}

.subtitle {
  font-size: 16px;       
  font-weight: normal;   
  color: #000;          
}


/* end team css */

/* contact us css */
.contact-section {
  position: relative;
  height: 360px;
  background: url(../img/contact-bg.webp) center/cover no-repeat;
  display: flex;
  align-items: end;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding-bottom: 50px;
}

.contact-box {
  position: relative;  
  margin-top: -80px;
  background: #fff;
  padding: 40px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  margin-bottom: 40px;
  z-index: 99; 
}

.contact-info {
  font-family: 'Helvetica', sans-serif;
  display: flex;             
  align-items: flex-start;   
}

.contact-info i {
  font-size: 16px;
  color: #000;
  background-color: #D9D9D9 !important;
  border-radius: 30px;
  padding: 7px 11px;
  margin-right: 10px;
  flex-shrink: 0;            
}

.contact-info span {
  flex: 1;                    
}

.form-control {
  border-radius: 0px !important;
  background-color: #EEEEEE !important; 
  border-top: 2px solid #B5B5B580 !important;
  margin-bottom: 15px;
}

.btn-custom {
  background: #000 !important;
  color: #fff !important;
  border-radius: 0px !important;
  padding: 9px !important;
  width: 100%;
  font-weight: 600;
}

.btn-custom:hover {
  background: #333;
}

iframe {
  padding: 0px !important;
  border: 0;
  width: 100%;
  height: 500px;
}

/* end contact us css */


/* reviews css */

.review-section {
  position: relative;
  height: 330px;
  background: url(../img/reviews-section-bg.webp) center/cover no-repeat;
  display: flex;
  align-items: end;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding-bottom: 50px;
  z-index: 1; 
}

  .review-card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      background: #fff;
      height: 100%;
    }
    .review-card .stars {
      color: #f5b50a;
    }
    .carousel-item {
      padding: 20px 0;
    }

/* end reviews css */


/* product page css */

.products-section {
  position: relative;
  height: 650px;
  background: url(../img/products-section-bg.webp) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding-bottom: 70px;
}

.products-detail {
  position: relative;  
  margin-top: -300px !important;
  background: #fff;
  padding: 40px !important;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  margin-bottom: 40px;
  z-index: 1; 
}


.products-detail h2 {
  font-size: 2rem;
}
.products-section img {
  border-radius: 8px;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
}
.subtitle {
  font-size: 15px;
  color: #666;
  font-style: normal;
}

/* end product css */

/* menu cart icon css */

.hero-actions {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 25px; 
  color: #fff;
  z-index: 1000;
}

.cart-btn {
  cursor: pointer;
  color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.cart-btn:hover {
  transform: scale(1.15);
  color: #f8d210;
}

/* Cart Count Badge */
.cart-count {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  padding: 2px 6px;
  background: #dc3545;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Cart Popup */
.cart-popup {
  position: fixed;
  top: 0;
  right: -400px;
  width: 350px;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 15px rgba(0,0,0,0.2);
  transition: right 0.35s ease-in-out;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.cart-popup.active {
  right: 0;
}

/* Cart Header */
.cart-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  font-weight: 600;
}

.close-cart {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #555;
  transition: color 0.2s ease;
}

.close-cart:hover {
  color: #dc3545;
}

/* Cart Items */
.cart-items {
  flex: 1;
  padding: 15px 20px !important;
  overflow-y: auto;
}

.cart-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f1f1f1 !important;
  font-size: 14px;
}

.cart-item img {
  width: 60px;
  height: 100px !important;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 10px;
}

.cart-item span {
  font-weight: 500;
  color: #333;
}

.cart-item button {
  background: none;
  border: none;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cart-item button:hover {
  color: #dc3545;
}

/* Empty Cart */
.cart-items .empty {
  text-align: center;
  color: #777;
  font-size: 14px;
  margin-top: 50px;
}

/* Cart Footer */
.cart-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
}

/* Overlay */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  z-index: 9998;
}

.cart-overlay.active {
  opacity: 1;
  visibility: visible;
}


#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* ya apka background color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.6s ease, visibility 0.5s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-gif {
    width: 80px; 
    height: auto;
}

/* end pre-loader css */

/* scroll top btn css */
#scrollTopBtn {
    display: none; 
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background: #000;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

@media only screen and (max-width: 480px) {
 #scrollTopBtn {
    bottom: 20px;
    right: 20px;
    padding: 9px 13px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
}