@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

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

/* ROOT VARIABLES */
:root {
  --primary-color: #e6d5c3;
  --secondary-color: #7a1e2b;
  --dark-color: #1a1a1a;
  --white-color: #fff;
  --text-color: #e6d5c3;
  --text-black: #1a1a1a;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-64: 64px;
  --fs-18: 18px;
  --fs-44: 44px;
  --fs-24: 24px;
  --fs-22: 22px;
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --Playfair-Display: "Playfair Display";
}

html,
body {
  height: 100%;
  width: 100%;
  background-color: var(--primary-color);
}

.nav-link {
  color: var(--primary-color);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: var(--fw-500);
}

.navbar-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.navbar-nav {
  gap: 20px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  /* Keep the color the same as the default color */
  color: #e6cdb3 !important;
  /* Also remove any default text decoration (like an underline) if it appears */
  text-decoration: none;
  /* You might also want to set a background color to 'transparent' if a block of color appears */
  background-color: transparent;
}

@media (min-width: 992px) {
  .navbar {
    min-height: 100px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(5px);
  }

  .navbar .navbar-nav-left,
  .navbar .navbar-nav-right {
    flex-direction: row;
    align-items: center;
  }

  .navbar-logo-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
  }
}

@media (max-width: 991.98px) {
  .navbar-logo-center {
    display: none;
  }

  .navbar-toggler {
    padding: 0;
    border: none;
  }

  /* FIX: Mobile Logo - Removed !important display: none */
  .navbar-brand-main.d-lg-none {
    margin-left: 0;
    margin-right: auto;
    display: none !important;
  }
}

/* Removed extra offcanvas and navbar-logo-center media queries here */

/* hero section start  */

.hero {
  height: 95vh;
  background-image: url("../img/back-2.jpeg");
  background-size: cover;
  background-blend-mode: darken;
  display: flex;
  align-items: center;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

/* Responsive Columns */
.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
  }

  .hero {
    height: auto;
  }

  .right-side,
  .left-side {
    min-width: unset;
    height: auto;
    padding: 30px 8vw;
  }
}

/* Inner sides */
.left-side,
.right-side {
  height: 90vh;
  overflow: hidden;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.left-side {
  min-width: 300px;
}

/* Headings responsive */
.left-side h1 {
  font-size: 45px;
  line-height: 1.5;
  margin-top: 40px;
  color: var(--text-color);
  font-family: var(--Playfair-Display);
  font-style: italic;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* add kiya */
}

.left-side h2 {
  font-size: 28px;
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
  font-style: italic;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* add kiya */
}

.btn-explore {
  padding: 9px 14px;
  background-color: var(--secondary-color);
  font-family: "Poppins", sans-serif;
  color: var(--primary-color);
  font-weight: var(--fw-600);
  transition: all 0.5s ease;
}

.btn-explore:hover {
  background-color: transparent;
  border: 1px solid var(--primary-color);
  color: #e6d5c3;
}

@media (max-width: 600px) {
  .hero {
    flex-direction: column;
    padding: 0;
  }

  .left-side,
  .right-side {
    padding: 24px 5vw;
    height: auto;
    min-width: unset;
  }

  .left-side h1 {
    font-size: 32px;
    line-height: 40px;
    margin-top: 16px;
  }

  .left-side h2 {
    font-size: 2vw;
    margin-bottom: 12px;
  }

  .loader-bar-container {
    width: 70%;
    height: 4px;
  }

  .right-side {
    padding-left: 0;
    padding-top: 0;
    min-width: unset;
  }
}

/* Loader Bar */
.loader-bar-container {
  width: 25%;
  height: 6px;
  background: #848484;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.loader-bar {
  height: 100%;
  width: 0;
  background: var(--primary-color);
  animation: loaderAnimation 3s linear infinite forwards;
}

@keyframes loaderAnimation {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

/* Slider styles */
.slider-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.slider-container img {
  position: absolute;
  top: 60%;
  left: 50%;
  width: auto;
  max-width: 450px;
  max-height: 400px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}

.slider-container img.active {
  opacity: 1;
  z-index: 2;
}

@media (max-width: 991px) {
  .slider-container img {
    top: 50%;
    max-width: 320px;
    max-height: 300px;
  }
}

@media (max-width: 600px) {
  .slider-container img {
    max-width: 82vw;
    max-height: 200px;
    top: 48%;
    left: 52%;
  }
}

@media (max-width: 576px) {
  .slider-container img {
    display: none;
  }
}

/* hero section end  */

/* category section start  */

.category .cat-heading h2,
.gender-category .cat-heading h2 {
  color: var(--secondary-color);
  font-family: var(--Playfair-Display);
}

.category .cat-heading h3,
.gender-category .cat-heading h3 {
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  font-style: italic;
}

.cat-card {
  position: relative;
  width: 250px;
  height: 310px;
  transition: 200ms;
}

.cat-card:active {
  width: 250px;
  height: 290px;
}

#card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  transition: 700ms;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
    rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.subtitle {
  transform: translateY(160px);
  color: rgb(134, 110, 221);
  text-align: center;
  width: 100%;
}

.title {
  opacity: 0;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out-out;
  transition-delay: 100ms;
  position: absolute;
  font-size: x-large;
  font-weight: bold;
  color: white;
}

.tracker:hover ~ #card .title {
  opacity: 1;
}

#prompt {
  bottom: 8px;
  left: 12px;
  z-index: 20;
  font-size: 20px;
  font-weight: bold;
  transition: 300ms ease-in-out-out;
  position: absolute;
  max-width: 110px;
  color: rgb(255, 255, 255);
}

.tracker {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
}

.tracker:hover {
  cursor: pointer;
}

.tracker:hover ~ #card #prompt {
  opacity: 0;
}

.tracker:hover ~ #card {
  transition: 300ms;
  filter: brightness(1.1);
}

.container:hover #card::before {
  transition: 200ms;
  content: "";
  opacity: 80%;
}

.canvas {
  perspective: 800px;
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "tr-1 tr-2 tr-3 tr-4 tr-5"
    "tr-6 tr-7 tr-8 tr-9 tr-10"
    "tr-11 tr-12 tr-13 tr-14 tr-15"
    "tr-16 tr-17 tr-18 tr-19 tr-20"
    "tr-21 tr-22 tr-23 tr-24 tr-25";
}

#card::before {
  content: "";
  filter: blur(2rem);
  opacity: 30%;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: 200ms;
}

.tr-1 {
  grid-area: tr-1;
}

.tr-2 {
  grid-area: tr-2;
}

.tr-3 {
  grid-area: tr-3;
}

.tr-4 {
  grid-area: tr-4;
}

.tr-5 {
  grid-area: tr-5;
}

.tr-6 {
  grid-area: tr-6;
}

.tr-7 {
  grid-area: tr-7;
}

.tr-8 {
  grid-area: tr-8;
}

.tr-9 {
  grid-area: tr-9;
}

.tr-10 {
  grid-area: tr-10;
}

.tr-11 {
  grid-area: tr-11;
}

.tr-12 {
  grid-area: tr-12;
}

.tr-13 {
  grid-area: tr-13;
}

.tr-14 {
  grid-area: tr-14;
}

.tr-15 {
  grid-area: tr-15;
}

.tr-16 {
  grid-area: tr-16;
}

.tr-17 {
  grid-area: tr-17;
}

.tr-18 {
  grid-area: tr-18;
}

.tr-19 {
  grid-area: tr-19;
}

.tr-20 {
  grid-area: tr-20;
}

.tr-21 {
  grid-area: tr-21;
}

.tr-22 {
  grid-area: tr-22;
}

.tr-23 {
  grid-area: tr-23;
}

.tr-24 {
  grid-area: tr-24;
}

.tr-25 {
  grid-area: tr-25;
}

.tr-1:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-2:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-3:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-4:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-5:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.tr-6:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-7:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-8:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-9:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-10:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-11:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-12:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-13:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.tr-14:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.tr-15:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

.tr-16:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-17:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-18:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-19:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-20:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-21:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-22:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-23:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-24:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-25:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}

.card-heading {
  font-family: var(--Playfair-Display);
  font-size: 22px;
  color: var(--dark-color);
  font-weight: var(--fw-500);
  text-transform: capitalize;
}

@media (max-width: 1200px) {
  .cat-card {
    max-width: 210px;
    height: 260px;
  }

  .cat-heading {
    font-size: 20px;
  }
}

@media (max-width: 992px) {
  .cat-card {
    max-width: 170px;
    height: 260px;
  }

  .cat-heading {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .main-cat-card {
    margin-bottom: 24px;
  }

  .cat-card {
    max-width: 95vw;
    height: 260px;
  }

  .cat-heading {
    font-size: 17px;
  }
}

@media (max-width: 576px) {
  .main-cat-card {
    margin-bottom: 16px;
  }

  .cat-card {
    max-width: 98vw;
    height: 260px;
  }

  .cat-heading h3 {
    font-size: 25px;
  }
}

@media (max-width: 400px) {
  .cat-card {
    max-width: 96vw;
    height: 260px;
    font-size: 10px;
  }

  .cat-heading {
    font-size: 13px;
  }
}

/* Utility for spacing on XS screens */
.row.g-4 > [class*="col-"] {
  margin-bottom: 24px;
}

/* Disable text select */
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* category section end  */

/* gender category section start  */

.gender-card {
  width: 100%;
  max-width: 380px;
  height: 340px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.gender-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease-in-out;
}

.gender-card:hover img {
  scale: 1.05;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .gender-card {
    max-width: 320px;
    height: 340px;
  }
}

@media (max-width: 767px) {
  .gender-card {
    max-width: 80vw;
    height: 360px;
  }

  .cat-heading {
    margin-top: 16px !important;
    padding-top: 10px !important;
  }
}

@media (max-width: 576px) {
  .gender-card {
    max-width: 100vw;
    height: 340px;
  }

  .cat-heading h2 {
    font-size: 1.4rem !important;
  }

  .cat-heading h3 {
    font-size: 1.1rem !important;
  }

  .card-heading p {
    font-size: 14px;
  }
}

/* gender category section end  */
/* ------------------------------------------- Ved ------------------------------------------------------------------ */
/* --- WhatsApp Floating Button Styling --- */

.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.whatsapp-float:hover {
  background-color: var(--primary-color);
  /* Swap colors on hover */
  color: var(--secondary-color);
  box-shadow: 0 6px 20px rgba(122, 30, 43, 0.8);
  transform: scale(1.05);
}

.whatsapp-float i {
  font-size: 32px;
}

@media (max-width: 767.98px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    font-size: 28px;
  }
}

/* --- Gallery Section Styling --- */

.gallery-sec {
  background: var(--secondary-color);
  /*! background: var(--primary-color); */
}

.gallery-head {
  margin-bottom: 1rem;
}

.gh-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 14px);
  font-family: var(--Playfair-Display);
  font-weight: var(--fw-700);
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.2;
  color: var(--primary-color);
  /*! color: var(--secondary-color); */
}

.gh-text {
  display: inline-block;
  padding: 0 0.25rem;
  letter-spacing: 0.5px;
  font-style: italic;
}

.gh-line {
  height: 2px;
  width: clamp(32px, 8vw, 80px);
  background: var(--primary-color);
  /*! background: var(--secondary-color); */
  border-radius: 2px;
  opacity: 0.9;
}

.gh-sub {
  margin: 0.25rem 0 0 0;
  font-family: var(--Poppins);
  font-weight: var(--fw-500);
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 0.3px;
  color: var(--primary-color);
  /*! color: var(--secondary-color); */
}

/* Slight spacing on small screens */
@media (max-width: 576px) {
  .gallery-head {
    margin-bottom: 0.75rem;
  }
}

.grid-warp {
  max-width: 600px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "i1 i2 i3"
    "grp grp i4"
    "grp grp i5";
  gap: 12px;
}

.i1 {
  grid-area: i1;
}

.i2 {
  grid-area: i2;
}

.i3 {
  grid-area: i3;
}

.grp {
  grid-area: grp;
  position: relative;
  isolation: isolate;
}

.grp .img-fill {
  transition: opacity 900ms ease;
  -webkit-transition: opacity 900ms ease;
  -moz-transition: opacity 900ms ease;
  -ms-transition: opacity 900ms ease;
  -o-transition: opacity 900ms ease;
}

.grp .ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  border-radius: inherit;
}

.i4 {
  grid-area: i4;
}

.i5 {
  grid-area: i5;
}

.cell {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--primary-color);
}

.cell:not(.grp) {
  aspect-ratio: 1/1;
}

.grp {
  aspect-ratio: 1/1;
}

.img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Add this at the end of your CSS file */
.video-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Makes video cover the div */
  object-position: center;
  /* Centers the video */
  display: block;
  border-radius: inherit;
  /* If you want rounded corners like images */
}

@media (max-width: 576px) {
  .grid {
    gap: 10px;
  }

  .grid-warp {
    max-width: 100%;
  }
}

/* --- Product Listing Section Styling (Hover Effect) --- */

.product-list-sec {
  background-color: var(--white-color);
}

.product-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  background: var(--primary-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

/* Hover Effect: Show Model Image */
.product-main-img,
.product-hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease;
}

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

.product-card:hover .product-main-img {
  opacity: 0;
}

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

/* Info Overlay Styling */
.product-info-overlay {
  padding: 15px 10px;
  text-align: center;
  background-color: var(--white-color);
}

.product-name {
  font-family: var(--Playfair-Display);
  font-weight: var(--fw-700);
  font-size: var(--fs-20);
  color: var(--secondary-color);
  margin-bottom: 3px;
}

.product-desc {
  font-family: var(--Poppins);
  font-size: var(--fs-12);
  color: var(--dark-color);
  margin-bottom: 5px;
}

/* --- Offer Section Styling --- */

.offer-sec {
  background-color: var(--primary-color);
  color: var(--text-black);
}

.offer-sec .gh-title {
  color: var(--secondary-color);
}

.offer-sec .gh-line {
  background: var(--secondary-color);
}

.offer-sec .gh-sub {
  color: var(--text-black);
}

.offer-carousel {
  max-width: 1200px;
  margin: 0 auto;
}

.offer-slide {
  padding: 30px 0;
  border-radius: 15px;
}

.product-img-wrap,
.model-img-wrap {
  text-align: center;
}

.large-product-img {
  height: auto;
  max-height: 400px;
  /*Big image*/
  width: auto;
  object-fit: contain;
}

.offer-content {
  font-family: var(--Poppins);
}

.offer-title {
  font-family: var(--Playfair-Display);
  font-weight: var(--fw-700);
  color: var(--secondary-color);
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 0.5rem;
}

.offer-desc {
  font-weight: var(--fw-400);
  font-size: var(--fs-16);
  color: var(--dark-color);
  margin-bottom: 1rem;
}

.offer-price {
  font-family: var(--Playfair-Display);
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
  color: var(--secondary-color);
  margin-bottom: 1.5rem;
}

/* Offer Button */
.offer-btn {
  background-color: var(--secondary-color);
  /* Dark Maroon Button */
  color: var(--white-color);
  font-weight: var(--fw-500);
  padding: 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  border: 2px solid var(--secondary-color);
}

.offer-btn:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}

/* Small Model Image */
.model-lifestyle-img {
  height: 100%;
  min-height: 250px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: -8px -8px 20px 0 rgba(122, 30, 43, 0.25),
    /* Top-left maroon shadow */ 0 8px 24px 2px rgba(26, 26, 26, 0.55);
  /* Bottom dark shadow */
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
  .offer-slide .row {
    flex-direction: column;
  }

  .product-img-wrap {
    order: 1;
    margin-bottom: 1.5rem;
  }

  .offer-content {
    order: 2;
    margin-bottom: 1.5rem;
  }

  .large-product-img {
    max-height: 300px;
  }
}

.offer-carousel .owl-nav button {
  font-size: 30px;
  color: var(--secondary-color) !important;
  background: transparent !important;
  margin: 0 10px;
  opacity: 0.8;
  transition: opacity 0.3s;
}

/* Yeh class ensure karegi ki items smoothly transition karein */
.custom-animated-slider .item {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.custom-animated-slider .owl-item.active .item {
  opacity: 1;
}

.custom-animated-slider .animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

/* --- About Us Section Styling --- */

.about-sec {
  background-color: var(--primary-color);
  color: var(--dark-color);
  text-wrap: auto;
}

.about-main-img {
  width: 100%;
  height: auto;
  max-height: 550px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.ah-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--Playfair-Display);
  font-weight: var(--fw-700);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  color: var(--secondary-color);
}

.ah-text {
  display: inline-block;
}

.ah-line {
  height: 4px;
  width: 60px;
  background: var(--secondary-color);
  border-radius: 2px;
  opacity: 1;
  margin-bottom: 0.5rem;
}

.ah-tagline {
  margin: 0.5rem 0 0 0;
  font-family: var(--Poppins);
  font-weight: var(--fw-500);
  font-size: var(--fs-18);
  letter-spacing: 0.3px;
  font-style: italic;
  color: var(--dark-color);
}

.about-body-text {
  font-family: var(--Poppins);
  font-size: var(--fs-16);
  line-height: 1.8;
  margin-bottom: 1rem;
  color: var(--dark-color);
}

.about-features li {
  font-family: var(--Poppins);
  font-size: var(--fs-16);
  margin-bottom: 0.5rem;
  font-weight: var(--fw-500);
}

.about-features i {
  color: var(--secondary-color);
  margin-right: 8px;
  font-size: var(--fs-18);
}

.about-btn {
  background-color: var(--secondary-color);
  color: var(--white-color);
  font-weight: var(--fw-500);
  padding: 10px 40px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid var(--secondary-color);
  transition: all 0.3s ease;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.about-btn:hover {
  background-color: transparent;
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

@media (max-width: 768px) {
  .about-head {
    text-align: center !important;
  }

  .ah-title {
    align-items: center;
  }

  .ah-line {
    margin: 0.5rem auto;
  }

  /* FIX for text overflow on small screens */
  .about-content-wrap {
    padding-left: 5vw;
    /* Added horizontal padding */
    padding-right: 5vw;
    /* Added horizontal padding */
  }

  .about-features {
    padding-left: 0;
    text-align: center;
  }

  .about-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 1.5rem auto 0 auto !important;
  }

  /* Optional: Adjust image on small screens to provide margin from edges */
  .about-img-wrap {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

/* Add this new media query to fix the layout for medium-sized screens (like tablets) */
@media (max-width: 991.98px) and (min-width: 768px) {
  .about-main-img {
    max-height: 450px;
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  .ah-title {
    font-size: clamp(26px, 3.5vw, 38px);
  }

  .about-img-wrap {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
  }

  .about-content-wrap {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* --- Central Divide Minimalist Footer Styling --- */

.main-footer.central-divide-style {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: 30px 0;
  position: relative;
}

/* 1. Logo (Centerpiece) */

.logo-divide-col {
  position: relative;
}

.logo-divide-col::before,
.logo-divide-col::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(50% - 50px);
  height: 1px;
  background: var(--primary-color);
}

.logo-divide-col::before {
  left: -10px;
}

.logo-divide-col::after {
  right: -10px;
}

.brand-logo-divide {
  max-width: 150px;
  height: auto;
  /*! filter: drop-shadow(0 0 4px rgba(230, 213, 195, 0.6)); */
  z-index: 2;
  display: block;
}

/* 2. Contact Details (Left) */
.contact-title-divide {
  font-family: var(--Playfair-Display);
  font-weight: var(--fw-700);
  font-size: var(--fs-18);
  color: var(--white-color);
  margin-bottom: 0.5rem;
}

.contact-divide p {
  font-family: var(--Poppins);
  font-size: var(--fs-15);
  margin: 0.2rem 0;
}

.contact-divide i {
  margin-right: 6px;
  font-size: var(--fs-16);
  color: var(--primary-color);
}

.contact-divide a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: var(--fw-400);
  transition: color 0.3s ease;
}

.contact-divide a:hover {
  color: var(--white-color);
}

/* 3. Links and Copyright (Right) */
.footer-divide-nav a {
  color: var(--primary-color);
  text-decoration: none;
  font-family: var(--Poppins);
  font-weight: var(--fw-500);
  font-size: var(--fs-15);
  padding: 0 8px;
  transition: color 0.3s ease;
}

.footer-divide-nav a:hover {
  color: var(--white-color);
}

.sep-divide {
  color: var(--primary-color);
  opacity: 0.4;
  font-size: 14px;
}

.copyright-divide {
  font-family: var(--Poppins);
  font-size: var(--fs-14);
  opacity: 0.6;
  margin-top: 5px;
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
  .main-footer.central-divide-style {
    padding: 20px 0 25px 0;
  }

  .contact-divide,
  .link-divide {
    text-align: center !important;
  }

  .logo-divide-col {
    order: -1;
    /* Logo moves to the top */
    margin-bottom: 1.5rem;
  }

  .logo-divide-col::before,
  .logo-divide-col::after {
    display: none;
  }

  .footer-divide-nav {
    margin-top: 1rem;
  }
}
/* Add at the end */
#bigImg,
#bigImgPreview {
  transition: opacity 0.4s ease;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cell.grp {
  position: relative;
  overflow: hidden;
}