:root {
  /* =====================================================
     SADAF BRIDAL BRAND PALETTE
     The six colours below are exactly as supplied by the client.
     Change a colour here and it changes across the whole site.
     ===================================================== */

  --brand-mocha: #523d2e;          /* 1. Primary background, dark mocha  */
  --brand-mocha-2: #5a4333;        /* 2. Secondary background            */
  --brand-champagne: #d7b487;      /* 3. Champagne gold, primary metallic */
  --brand-highlight: #f4e4c9;      /* 4. Champagne gold highlight        */
  --brand-warm-gold: #c89b67;      /* 5. Warm gold                       */
  --brand-antique: #8f6643;        /* 6. Antique gold / shadow           */

  /* -----------------------------------------------------
     Supporting neutrals.
     Not in the supplied palette. Added because the brief asks for
     clean white space, and every website needs a page background and
     a body text colour. Both are tints of the champagne highlight
     above, so they stay in the same warm family.
     ----------------------------------------------------- */
  --brand-white: #ffffff;          /* cards and panels                   */
  --brand-ivory: #fcf8f2;          /* page background                    */
  --brand-cream: #fbf4e9;          /* alternating sections               */
  --brand-line: #ede2d2;           /* hairline borders                   */
  --brand-ink: #3e2e23;            /* headings on light backgrounds      */
  --brand-body: #5f4c3e;           /* body copy on light backgrounds     */
  --brand-muted: #8a7461;          /* captions and helper text           */

  /* Translucent golds for borders and glows */
  --brand-gold-line: rgba(215, 180, 135, 0.4);
  --brand-gold-glow: rgba(215, 180, 135, 0.55);

  /* -----------------------------------------------------
     CONTRAST RULE, IMPORTANT
     Champagne #d7b487 on white is only 1.95:1. It is far too pale
     to read as text on a light background, so it is used for FILLS,
     BORDERS and for TEXT ON MOCHA only.
     Gold text sitting on white or ivory uses antique gold #8f6643,
     which measures 5.06:1 and passes accessibility guidelines.
     Text sitting on a gold fill is always mocha, never white.
     ----------------------------------------------------- */

  /* =====================================================
     OLD COLOUR NAMES
     The original site used these names in hundreds of places.
     They now point at the new palette, so every existing rule
     picks up the new colours without being rewritten.
     ===================================================== */
  --color-white: var(--brand-ivory);
  --color-black: var(--brand-ink);
  --color-gold: var(--brand-antique);
  --color-champagne: var(--brand-champagne);
  --text-gray: var(--brand-body);
  --font-white: var(--brand-ivory);

  /* =====================================================
     TYPOGRAPHY
     Cormorant Garamond for headings, matching the serif in the
     logo wordmark. Inter for body copy, buttons and forms.
     ===================================================== */
  --font-display: "Gambarino", "Gambarino Placeholder", Georgia,
    "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* =====================================================
     LOGO SIZING
     The logo is a stacked mark, taller than it is wide, so it is
     sized by height. Adjust these values to resize it everywhere.
     ===================================================== */
  --logo-height-desktop: 88px;
  --logo-height-mobile: 52px;
  --logo-height-footer: 124px;
  --logo-height-modal: 82px;
}

@font-face {
  font-family: "Gambarino";
  src: url("../fonts/Gambarino-Regular.woff2") format("woff2"),
    url("../fonts/Gambarino-Regular.woff") format("woff"),
    url("../fonts/Gambarino-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-family: "Gambarino", "Gambarino Placeholder", serif;
}

.section-padding {
  padding: 0px 40px;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 80px);
}

/*=======================
NAVIGATION BAR STYLES
=======================*/

.navigation-bar {
  padding: 0px 40px;
  background-color: var(--brand-white) !important;
  color: var(--color-black);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar {
  padding: 5px clamp(16px, 5vw, 80px);
  margin: 0 auto;
  max-width: 1440px;
  background-color: transparent !important;
}

@media (max-width: 400px) {
  .navigation-bar {
    padding: 0px 10px !important;
  }

  .navbar {
    padding: 5px 10px !important;
  }
}

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

.nav-left,
.nav-ceter,
.nav-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "Inter";
}

.nav-link {
  color: var(--color-black) !important;
  transition: all 0.3s ease;
}

.nav-left .nav-item .nav-link:hover,
.nav-item-right .nav-item .nav-link:hover {
  color: var(--color-champagne) !important;
}

/* =======================
MEGA MENU
=======================*/

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  max-width: 650px;
}

.dropdown-menu {
  left: 0%;
  background-color: transparent;
  border: none;
  padding: 10px;
}

.dropdown-menu-service-row {
  align-items: center;
  padding: 20px 10px;
  background-color: var(--brand-white);
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.dropdown-menu-service-col {
  padding: 25px 10px;
  border-radius: 10px;
  background-color: var(--color-black);
  color: var(--font-white);
  height: 100%;
}

.dropdown-menu-service-col h6 {
  padding: 15px 10px;
  border-radius: 10px;
  background-color: var(--brand-white);
  color: var(--font-white);
  margin: 15px 0px;
}

.dropdown-menu-service-detail {
  padding-left: 20px;
  display: none;
}

.dropdown-menu-service-detail.active {
  display: block;
}

.dropdown-menu-service-col h6.active {
  background-color: var(--color-champagne);
  color: var(--color-black);
}

.dropdown-menu-service-detail h6 {
  color: var(--color-gold);
}

.dropdown-menu-service-detail p {
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 5px;
}

/* =======================
LOGO + SOCIAL
=======================*/

.navbar-brand img {
  margin: 10px 0px;
}

.nav-logo-social-box {
  display: flex;
  gap: 12px;
}

.nav-logo-social {
  width: 40px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1.5px solid var(--color-champagne);
  transition: all 0.3s ease;
}

.nav-logo-social a i {
  font-size: 20px;
  color: var(--color-champagne);
  margin-top: 5px;
}

.nav-logo-social:hover {
  background-color: var(--color-champagne);
  transform: scale(1.1);
}

.nav-logo-social:hover i {
  color: var(--color-white);
}

/* =======================
CALL BUTTON
=======================*/

.call-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--brand-champagne);
  color: var(--brand-ink) !important;
  text-decoration: none !important;
  border-radius: 999px;
  font-weight: 400;
  font-size: 16px;
  font-family: "Inter";
  transition: all 0.3s ease;
}

.call-btn:hover {
  background-color: var(--color-black) !important;
  color: var(--color-champagne) !important;
  border: 1px solid var(--color-champagne);
}

/* =======================
MOBILE CALL BUTTON (NAVBAR)
=======================*/

.mobile-call-nav {
  display: none;
}

/* =======================
OFFCANVAS
=======================*/

.offcanvas {
  background-color: var(--color-white);
  z-index: 1050;
}

.offcanvas .navbar-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.offcanvas .nav-link {
  padding: 10px 12px;
}

.offcanvas-header {
  position: relative;
}

.sidenav-btn-x {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 1.5rem;
  color: var(--color-champagne);
  background: transparent;
  border: none;
  transition: transform 0.3s ease;
}

.sidenav-btn-x:hover {
  transform: rotate(90deg);
}

/* =======================
MOBILE STYLES
=======================*/

@media (max-width: 991.98px) {
  /* Show mobile call button in navbar */
  .mobile-call-nav {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }

  .mobile-call-nav a {
    color: var(--color-black) !important;
    text-decoration: none !important;
  }

  .mobile-call-nav .call-btn {
    padding: 8px 15px;
    font-size: 16px;
    color: var(--color-black) !important;
  }

  .mobile-call-nav:hover .call-btn {
    padding: 8px 15px;
    font-size: 16px;
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
  }

  /* Hide desktop call button */
  .desktop-call-btn {
    display: none;
  }

  /* Disable mega menu hover */
  .nav-item.dropdown:hover .dropdown-menu {
    display: none;
  }

  .service-link-arrow i {
    margin-left: 10px;
    transition: transform 0.3s ease;
  }

  .service-link-arrow:not(.collapsed) i {
    transform: rotate(90deg);
  }

  .list-unstyled {
    background-color: var(--brand-ink);
    color: var(--brand-ivory);
    border-radius: 20px;
    width: 200px;
    padding: 10px 20px;
  }

  .list-unstyled li a {
    color: var(--color-white) !important;
    text-decoration: none !important;
    padding-left: 20px;
  }

  .sidebar-link:hover {
    color: var(--color-champagne);
  }

  .side-nav-social a {
    padding: 8px;
    border-radius: 50%;
    background-color: var(--color-black);
    transition: all 0.3s ease;
    text-decoration: none !important;
  }

  .side-nav-social a i {
    font-size: 25px;
    color: var(--color-champagne);
  }

  .side-nav-social a:hover {
    background-color: var(--color-gold);
  }

  .side-nav-social a:hover i {
    color: var(--color-white);
  }
}

/* =======================
DESKTOP ONLY
=======================*/

@media (min-width: 992px) {
  .offcanvas {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/*=======================
NAVIGATION BAR STYLES END
=======================*/

/*=======================
HERO SECTION STYLES START
=======================*/

.hero-container {
  padding: 0px 20px;
  background-color: var(--brand-cream);
}

.hero-row {
  align-items: center;
  padding-bottom: 40px;
  padding-top: 40px;
}

.hero-intro {
  padding: 20px 10px;
  color: var(--color-black);
}

.hero-intro h1 {
  font-size: 46px;
}

.hero-intro p {
  font-size: 16px;
  font-family: "Inter";
  color: var(--text-gray);
}

.dark-btn,
.light-btn {
  padding: 10px 20px !important;
  border-radius: 50px !important;
  margin: 5px 10px !important;
  transition: all 0.3s ease;
  /* smooth hover animation */
}

.dark-btn {
  background-color: var(--color-champagne) !important;
  border: 2px solid var(--color-champagne) !important;
  margin: 10px !important;
  margin-left: 0px !important;
}

.light-btn {
  background-color: transparent !important;
  border: 2px solid var(--color-champagne) !important;
  margin-left: 0px !important;
  color: var(--brand-champagne);
}

.dark-btn a {
  text-decoration: none !important;
  font-weight: 600 !important;
  color: var(--font-white) !important;
}

.light-btn a {
  text-decoration: none !important;
  font-weight: 600 !important;
  color: var(--color-champagne) !important;
}

.dark-btn:hover {
  background-color: var(--color-black) !important;
  border-color: 1px solid var(--color-black) !important;
  color: var(--brand-champagne);
}

.dark-btn:hover a {
  color: var(--color-champagne) !important;
}

.light-btn:hover {
  background-color: var(--color-champagne) !important;
  color: var(--brand-ink);
  /* fill background */
  border-color: var(--color-champagne) !important;
}

.light-btn:hover a {
  color: var(--font-white) !important;
  /* invert text color */
}

.hero-image-box {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 7/10;
  margin: 5px 0px;
}

.hero-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-video {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  /* same ratio as your image */
  display: block;
}

@media (max-width: 575px) {
  .hero-intro {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-intro h1 {
    font-size: 40px;
  }

  .hero-intro p {
    font-size: 16px;
    font-family: "Inter";
    color: var(--text-gray);
  }

  .dark-btn,
  .light-btn {
    padding: 10px 15px;
    border-radius: 50px;
    transition: all 0.3s ease;
    /* smooth hover animation */
  }

  .dark-btn a,
  .light-btn a {
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
  }
}

/*=======================
HERO SECTION STYLES END
=======================*/

/*=======================
ABOUT US SECTION STYLES START
=======================*/

.about-row {
  /* border: 2px solid red; */
  padding: 0px;
  align-items: center;
}

.about-img {
  border-radius: 20px;
  aspect-ratio: 1/1;
  position: relative;
}

.about-img img {
  border-radius: 20px;
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center;
}

.about-img-batch {
  position: absolute;
  left: -20px;
  bottom: -50px;
  background-color: var(--color-champagne);
  color: var(--font-white);
  padding: 20px 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  z-index: 10;
}

.about-icon {
  padding: 5px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-black);
  margin-right: 10px;
}

.about-img-batch i {
  font-size: 36px;
  color: var(--color-champagne);
}

.about-img-batch h3 {
  font-size: 32px;
  font-weight: 400;
  margin: 0px;
  color: var(--color-black);
}

.about-img-batch p {
  font-size: 20px;
  margin: 0px;
  color: var(--color-black);
}

/* About Intro */

.about-info {
  padding: 10px;
}

.about-info span {
  margin-right: 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-champagne);
}

.about-info span img {
  width: 30px;
  height: auto;
  margin-right: 10px;
}

.about-info h2 {
  font-size: 36px;
  margin: 20px 0px;
  color: var(--color-black);
}

.about-info p {
  font-size: 14px;
  color: var(--text-gray);
  line-height: 1.5;
  margin-bottom: 20px;
  font-family: "inter";
}

.about-features-container {
  padding: 10px;
  display: flex;
  gap: 20px;
  justify-content: left;
}

.about-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  /* width: 190px; */
  /* height: auto; */
  border-radius: 20px;
  aspect-ratio: 1/1;
  margin: 5px;
  border: 1px solid var(--color-champagne);
  /* background-color: var(--color-black); */
  /* background-color: rgba(0, 0, 0, 0.9); */
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px 0px;
  transition: all 0.3s ease;
}

.about-features:hover {
  transform: scale(1.03);
}

.about-features-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-champagne);
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-features i {
  font-size: 25px;
  color: var(--color-black);
}

.feature-detail {
  display: flex;
  flex-direction: column;
}

.about-features h3 {
  text-align: center;
  color: var(--color-black);
  font-weight: 600;
  margin-top: 5px;
}

.about-features p {
  text-align: center;
  font-weight: 500;
  color: var(--text-gray);
}

/* RESPONSIVE ABOUT FEATURES */
@media (max-width: 991.5px) {
  .about-info {
    margin-top: 80px;
  }

  .about-features {
    aspect-ratio: 4/2;
  }
}

@media (max-width: 768px) {
  .about-info {
    margin-top: 20px;
  }

  .about-img {
    margin-bottom: 40px;
  }

  .about-row {
    display: flex;
    flex-direction: column-reverse;
  }

  .about-features {
    max-width: 250px;
  }

  .about-features {
    display: flex;
    flex-direction: row;
  }

  .bridal-section {
    padding-bottom: 30px;
  }

  .about-img-batch {
    padding: 10px 20px;
  }

  .about-img-batch h3 {
    font-size: 28px;
  }

  .about-img-batch p {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .about-row {
    display: flex;
    flex-direction: column-reverse;
  }

  .about-features-container {
    display: flex;
    flex-direction: row;
  }

  .about-features {
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    aspect-ratio: 4/2;
  }

  .about-features-icon {
    width: 55px;
    height: 55px;
  }

  .about-features i {
    font-size: 26px;
  }

  .about-features h3 {
    font-size: 20px;
  }

  .about-features p {
    font-size: 14px;
  }

  .about-row {
    /* border: 3px solid red; */
    flex-direction: row-reverse;
  }

  .about-info {
    /* border: 2px solid red; */
    padding: 0px;
  }
}

@media (max-width: 538px) {
  .about-row {
    display: flex;
    flex-direction: column-reverse;
  }

  .about-features {
    padding: 20px;
    height: fit-content;
    aspect-ratio: 4/2;
  }
}

/*=======================
ABOUT US SECTION STYLES END
=======================*/

/*=======================
BRIDAL  SECTION STYLES START
=======================*/

.bridal-section {
  padding-bottom: clamp(30px, 5vw, 60px);
}

/* BACKGROUND CONTAINER */
.bridal-container {
  position: relative;
  background-image: url("../images/makeuo-product.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 85vh;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 60px);

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* DARK GRADIENT OVERLAY */
.bridal-container::before {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* CONTENT BOX */
.bridal-box {
  position: relative;
  z-index: 2;
  text-align: center;

  width: 100%;
  padding: clamp(15px, 3vw, 30px);
}

/* HEADER */
.bridal-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
}

.bridal-header span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 20px;
  font-weight: 600;
  color: var(--color-champagne);
}

.bridal-header span img {
  width: clamp(25px, 3vw, 30px);
}

.bridal-header h2 {
  font-size: clamp(30px, 4vw, 36px);
  margin: 16px 0;
  color: var(--color-white);
  line-height: 1.3;
}

/* SERVICE LIST */
/* SERVICE LISTING CONTAINER */
.service-listing {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(30px, 2vw, 20px);
}

/* SERVICE ITEM CARD */
.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: clamp(14px, 2vw, 22px);
  border-radius: 15px;

  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);

  width: clamp(350px, 22vw, 500px);

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* OPTIONAL HOVER (DESKTOP ONLY FEEL) */
@media (hover: hover) {
  .service-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  }
}

/* SERVICE ICON / IMAGE */
.service-item img {
  width: 100%;
  max-width: 140px;
  height: auto;

  object-fit: contain;
  margin-bottom: 10px;
}

.service-item h5 {
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-champagne);
}

.service-item p {
  font-size: clamp(14px, 2.2vw, 16px);
  color: var(--color-white);
  line-height: 1.6;
  margin: 10px;
  font-family: "inter";
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .bridal-container {
    min-height: auto;
    padding: 40px 30px;
  }
}

@media (max-width: 768px) {
  .bridal-container {
    padding: 30px 20px;
    align-items: flex-start;
  }

  .bridal-box {
    padding: 0;
  }
}

@media (max-width: 480px) {
  .bridal-header h2 {
    font-size: 36px;
  }

  .bridal-header span {
    font-size: 18px;
    font-weight: 600;
  }

  .service-listing {
    gap: 12px;
  }
}

/*=======================
Bridal SECTION STYLES END
=======================*/

/*=======================
CAROUSEL SECTION STYLES START
=======================*/

.carousel-container {
  margin: 0 auto;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-250px * 7));
  }
}

.slider {
  box-shadow: 0 10px 20px -5px rgba(255, 255, 255, 0.253);
  height: auto;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  border: 2px solid var(--brand-line);
}

.slider::before,
.slider::after {
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(400px * 14);
  background: var(--color-black);
}

.slider .slide {
  height: 100px;
  width: auto;
  padding: 0px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider .slide img {
  width: 50px;
  height: auto;
}

.slider .slide p {
  padding-left: 20px;
  font-size: 30px;
  color: var(--color-white);
  margin: 0px;
  text-transform: uppercase;
}

/*=======================
CAROUSEL SECTION STYLES END
=======================*/

/*=======================
SERVICES SECTION STYLES START
=======================*/

.service-section {
  width: 100%;
}

.service-container {
  padding: clamp(20px, 5vw, 80px);
  background-color: var(--color-white);
}

.service-section-row {
  align-items: center;
}

/* LEFT CONTENT */
.scroll-buttons {
  padding: 10px;
}

.scroll-buttons span {
  margin-right: 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-champagne);
}

.scroll-buttons span img {
  width: 30px;
  height: auto;
  margin-right: 10px;
}

.scroll-buttons h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 20px 0px;
  color: var(--color-black);
}

.service-btn {
  margin-top: 20px;
}

.service-list {
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 12px;
  border-radius: 10px;
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 500;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.service-list:hover {
  background: var(--color-champagne);
  color: var(--color-black);
}

/* ACTIVE BUTTON */
.service-list.active {
  background-color: var(--color-champagne);
  color: var(--color-black);
  border-color: var(--secondary-green);
}

/* IMAGE GALLERY */
.image-gallery {
  max-height: min(600px, 80vh);
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);

  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.image-gallery::-webkit-scrollbar {
  display: none;
}

.image-gallery img {
  width: min(400px, 90%);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 15px;
  transform: rotate(20deg);
  transition: transform 0.4s ease, scale 0.4s ease;
}

.image-gallery img.active {
  transform: rotate(0deg) scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .service-section-row {
    gap: 40px;
  }

  .image-gallery {
    max-height: 70vh;
  }
}

@media (max-width: 576px) {
  .image-gallery {
    max-height: 65vh;
  }
}

/* Center service images horizontally */
.image-gallery img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  transform-origin: center center;
  translate: 0 0;
}

/*=======================
SERVICES SECTION STYLES END
=======================*/

/*=======================
WHY CHOOSE US SECTION STYLES START
=======================*/
.why-choose-container {
  padding: clamp(20px, 5vw, 80px);
}

.why-choose-image {
  padding: 10px;
}

.why-choose-image span {
  margin-right: 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-champagne);
}

.why-choose-image span img {
  width: 30px;
  height: auto;
  margin-right: 10px;
}

.why-choose-image h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 20px 0px;
  color: var(--color-black);
}

.why-choose-info {
  display: flex;
  align-items: center;
  color: var(--color-black);
  padding: 10px;
}

.why-choose-info p {
  font-family: "inter";
  color: var(--text-gray);
}

.reason-box {
  padding: 20px;
  background-color: var(--color-black);
  border-radius: 20px;
  min-height: 300px;
  margin: 10px 0px;
  transition: all 0.3s ease;
}

.reason-box:hover {
  transform: scale(1.05);
}

.reason-icon {
  padding: 5px;
}

.reason-icon img {
  width: 60px;
  height: 60px;
}

.reason-box h3 {
  padding: 5px 0px;
  color: var(--color-white);
}

.reason-box p {
  font-size: 16px;
  color: var(--color-white);
  font-family: "inter";
}

@media (max-width: 767px) {
  .reason-box {
    min-height: 240px;
  }
}

/*=======================
WHY CHOOSE US SECTION STYLES END
=======================*/

/*=======================
CHRISTMAS OFFER SECTION STYLES START
=======================*/

.offer-container {
  background-image: url("../images/hero-img-2.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: clamp(30px, 5vw, 80px);
}

.offer-box {
  max-width: 600px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px;
  border-radius: 20px;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offer-box h3 {
  font-size: 28px;
  line-height: 37px;
  color: var(--color-white);
}

.offer-btn {
  border: 2px solid var(--color-champagne);
}

.offer-btn a {
  color: var(--color-champagne);
  font-weight: 600;
}

/*=======================
CHRISTMAS OFFER SECTION STYLES END
=======================*/

/*=======================
REVIEW SECTION STYLES START
=======================*/

.reviews-section {
  background: var(--bg);
  padding-top: 0;
}

.review-container {
  padding: clamp(20px, 5vw, 80px);
  background-color: var(--color-white);
}

/* HEADER */
.reviews-header span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-champagne);
}

.reviews-header span img {
  width: 30px;
}

.reviews-header h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 20px 0;
  color: var(--color-black);
}

.header-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* SLIDER */
.review-wrapper {
  overflow: hidden;
  margin-top: 40px;
}

.review-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s ease;
  padding: 10px 5px;
  align-items: flex-start;
}

/* CARD */
.review-card {
  /* background: var(--color-black); */
  /* color: var(--color-black); */
  padding: 28px;
  border-radius: 18px;
  color: var(--color-white);
  flex: 0 0 calc(33.333% - 16px);
  border: 1px solid var(--color-champagne);
  height: auto;
  box-shadow: rgba(99, 99, 99, 0.09) 0px 2px 8px;
}

.stars {
  color: var(--color-champagne);
  font-size: 20px;
}

.review-text {
  margin: 18px 0 26px;
  line-height: 1.7;
  font-family: "inter";
  font-size: 16px;
  color: var(--color-black);
}

.review-user {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-black);
}

.review-user img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* BUTTONS BELOW */
.slider-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.slider-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-champagne);
  background: var(--brand-ivory);
  /* background: var(--color-black); */
  color: var(--color-champagne);
  font-size: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-btn:hover {
  background-color: var(--color-champagne);
  color: var(--color-white);
}

/* TABLET */
@media (max-width: 992px) {
  .review-card {
    flex: 0 0 calc(50% - 12px);
  }
}

/* MOBILE */
@media (max-width: 576px) {
  .review-card {
    flex: 0 0 100%;
  }

  .slider-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .header-btn {
    justify-content: flex-start;
    margin-top: 20px;
  }
}

/*=======================
REVIEW SECTION STYLES ENDS
=======================*/

/*=======================
| Gallery SECTION STYLES START
=======================*/

.gallery-header span {
  margin-right: 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-champagne);
}

.gallery-header span img {
  width: 30px;
  height: auto;
  margin-right: 10px;
}

.gallery-header h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 20px 0px;
  color: var(--color-black);
}

.header-txt {
  display: flex;
  align-items: center;
  color: var(--text-gray);
  font-family: "inter";
  font-size: 16px;
}

.gallery-image,
.gallery-head {
  padding-bottom: 0px;
  padding-top: 0px;
  margin: 0%;
}

.gallery-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 5px 0;
}

.gallery-track {
  display: flex;
  width: max-content;
  animation: galleryScroll 30s linear infinite;
}

.gallery-item {
  flex: 0 0 auto;
  margin: 10px;
}

.gallery-item img {
  width: 260px;
  height: 360px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  filter: grayscale(1);
  transition: all 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.05);
  filter: grayscale(0);
}

/* PERFECT INFINITE SCROLL */
@keyframes galleryScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* REVERSE DIRECTION */
.gallery-wrapper.reverse .gallery-track {
  animation: galleryScrollReverse 30s linear infinite;
}

/* RIGHT → LEFT */
@keyframes galleryScrollReverse {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* PAUSE ON HOVER */
.gallery-wrapper:hover .gallery-track {
  animation-play-state: paused;
}

/* TABLET */
@media (max-width: 992px) {
  .gallery-item img {
    width: 220px;
    height: 320px;
  }
}

/* MOBILE */
@media (max-width: 576px) {
  .gallery-item img {
    width: 180px;
    height: 260px;
  }
}

/*=======================
 Gallery SECTION STYLES END |
=======================*/

/*=======================
 FAQs SECTION STYLES
=======================*/

.faq-container {
  padding: clamp(20px, 5vw, 80px);
  /* background-color: var(--color-white); */
  background: var(--brand-white);
}

.faq-accordion {
  display: flex;
  justify-content: center;
}

.faq-accordion-row {
  display: flex;
  align-items: flex-start;
}

/* Video */
.faq-video {
  border-radius: 14px;
  overflow: hidden;
  background: var(--brand-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  aspect-ratio: 6 / 9;
}

.faq-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Header */
.faq-header span {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-champagne);
}

.faq-header span img {
  width: 30px;
  margin-right: 10px;
}

.faq-header h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 20px 0;
  color: var(--color-black);
}

/* Accordion */
.accordion {
  width: 100%;
}

.item {
  background-color: var(--color-champagne);
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.question {
  padding: 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-black);
}

/* 🔑 FINAL, CORRECT ACCORDION */
.answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
  padding: 0 16px;
  font-family: "inter";
}

.answer-inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.item.open .answer {
  grid-template-rows: 1fr;
  padding: 16px;
}

.item.open .answer-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Icon animation */
.icon {
  transition: transform 0.3s ease;
}

.item.open .icon {
  transform: rotate(45deg);
}

/*=======================
 FOOTER SECTION STYLES STARTS 
=======================*/

.footer-section {
  background-color: var(--color-black);
  color: var(--brand-white);
  padding: 60px 0 20px;
}

.footer-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 80px);
  padding-bottom: 0px;
}

.footer-brand {
  padding: 5px;
}

.footer-brand img {
  width: 180px;
  height: auto;
}

.footer-brand p {
  font-size: 14px;
  margin-top: 12px;
  line-height: 1.6;
  font-family: "inter";
}

.footer-logo-social-box {
  padding: 0px 10px;
}

.footer-logo-social {
  width: 40px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-white);
  transition: all 0.3s ease;
  /* smooth hover animation */
}

.footer-logo-social a i {
  font-size: 25px;
  width: 30px;
  height: 30px;
  color: var(--color-gold);
  margin-top: 5px;
  transition: color 0.3s ease;
}

.footer-logo-social:hover {
  background-color: var(--color-gold);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.footer-logo-social:hover a i {
  color: var(--color-white);
}

.footer-title {
  font-weight: 400;
  margin-bottom: 15px;
  font-size: 30px;
}

.footer-links,
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li i {
  font-size: 16px;
  margin-right: 3px;
  margin-bottom: 8px;
  color: var(--font-white);
}

.footer-links li,
.footer-contact li {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 8px;
  font-family: "inter";
}

.footer-links li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.insta-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.insta-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  transition: transform 0.4s ease;
}

/* Instagram icon overlay */
.insta-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-white);
  font-size: 32px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hover Effects */
.insta-item:hover img {
  transform: scale(1.05);
}

.insta-item:hover .insta-icon {
  opacity: 1;
  animation: shake 0.5s ease-in-out;
}

/* Shake animation */
@keyframes shake {
  0% {
    transform: scale(0.8) rotate(0);
  }

  20% {
    transform: scale(1.1) rotate(-40deg);
  }

  40% {
    transform: scale(1.1) rotate(40deg);
  }

  60% {
    transform: scale(1.05) rotate(-30deg);
  }

  80% {
    transform: scale(1) rotate(30deg);
  }

  100% {
    transform: scale(1) rotate(0);
  }
}

.footer-divider {
  border-color: var(--font-white);
  margin: 20px 0 15px;
}

.footer-bottom {
  text-align: center;
  font-size: 14px;
  opacity: 0.9;
  color: var(--font-white);
  font-family: "inter";
}

.footer-bottom a {
  color: var(--font-white);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.footer-bottom a:hover {
  text-decoration: underline;
  color: var(--color-champagne);
}

@media (max-width: 480px) {
  .footer-brand {
    text-align: center;
  }

  .footer-logo-social-box {
    justify-content: center;
  }

  .footer-title {
    text-align: center;
  }

  .footer-links,
  .footer-contact {
    text-align: center;
  }

  .footer_contact_button {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
  }
}

/* =======================
 FOOTER SECTION STYLES END |
=======================*/

/* Instagram Floating Widget */
.instagram-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background-color: var(--color-black);
  border-radius: 50%;
  border: 1px solid var(--brand-gold-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-white);
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.instagram-widget img {
  max-width: 70%;
  /* don’t force full width */
  max-height: 70%;
  /* keep some padding */
  object-fit: contain;
  object-position: center;
}

.instagram-widget:hover {
  transform: scale(1.1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* ======================= Service Area ======================= */
.service_area {
  background: var(--brand-cream);
}

/* .service_cards-content {
  display: flex;
  flex-direction: row;
} */

.service_cards-content {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 40px;
}

/* Individual card */
.service_card_item {
  /* background: rgba(10, 10, 10, 0.75);  */
  backdrop-filter: blur(14px);
  border-radius: 20px;
  padding: 20px 15px;
  border: 1px solid var(--color-champagne);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  flex: 1 1 260px;
  /* responsive width */
  max-width: 200px;
  height: fit-content;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
}

.reviews-header h2 {
  margin: 0px;
}

-.service_card_item:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.09);
}

/* Card title */
.service_card_item h3 {
  font-size: 22px;
  margin-bottom: 8px;
  color: var(--color-champagne);
}

/* Card description */
.service_card_item span {
  font-size: 14px;
  color: var(--text-gray);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .service_card_item {
    flex: 1 1 100%;
  }
}

/* Terms page - clean + responsive */
.terms-page {
  padding: 60px 18px;
}

.terms-container {
  max-width: 980px;
  margin: 0 auto;
}

.terms-header h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  margin: 0 0 6px;
}

.terms-subtitle {
  margin: 0;
  opacity: 0.75;
  font-size: 1rem;
}

.terms-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}

.terms-nav a {
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.95rem;
  line-height: 1;
}

.terms-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 20px 20px;
  margin: 14px 0;
}

.terms-card h2 {
  font-size: clamp(18px, 2.4vw, 24px);
  margin: 0 0 10px;
}

.terms-card ul {
  margin: 0;
  padding-left: 1.15rem;
}

.terms-card li {
  margin: 8px 0;
  line-height: 1.7;
  font-size: 1rem;
}

.terms-card {
  scroll-margin-top: 110px;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .terms-page {
    padding: 40px 14px;
  }

  .terms-card {
    padding: 16px;
    border-radius: 12px;
  }

  .terms-nav a {
    padding: 9px 10px;
    font-size: 0.9rem;
  }
}

/* ==================== Modal Styles ==================== */

/* Logo */
.modal_logo_sadaf {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal_logo_sadaf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
}

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

/* Modal Box */
.modal-box {
  background: var(--brand-ink);
  max-width: 600px;
  width: 90%;
  height: 520px;
  max-height: 95vh;
  padding: 30px 25px;
  border-radius: 20px;
  position: relative;
  animation: scaleIn 0.3s ease;
  /* overflow-y: auto;
  overflow-x: hidden; */
  overflow: hidden;
  display: flex;
  flex-direction: column;

  border: 0.5px solid var(--brand-champagne);

  scroll-behavior: smooth;

  box-sizing: border-box;
}

.modal-box:hover {
  box-shadow: 0 0 20px rgba(215, 180, 135, 0.5);
}

/* Scrollbar Styling */
.modal-box::-webkit-scrollbar {
  width: 4px;
}

.modal-box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.modal-box::-webkit-scrollbar-thumb {
  background: rgba(215, 180, 135, 0.5);
  border-radius: 10px;
}

/* Modal Animation */
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Heading and paragraph */
.modal-box h2 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 600;
  color: var(--brand-champagne);
}

.modal-box p {
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  margin-bottom: 25px;
  color: rgb(212, 212, 212);
}

/* Close button */
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--brand-champagne);
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: var(--brand-champagne);
}

/* Form layout */
.mail_number,
.service_date {
  display: flex;
  gap: 15px;
}

.mail_number .modal_email,
.mail_number .modal_contact,
.service_date .modal_services,
.service_date .modal_date {
  flex: 1;
}

.form-group.modal_services select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--brand-gold-line);
  background: var(--brand-mocha-2);
  color: var(--brand-champagne);
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-weight: 300;
  appearance: none;
}

/* Appointment form container */
.modal_appointment_form {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding-right: 5px;
  background: var(--brand-ink);

  /* Smooth scrolling */
  scroll-behavior: smooth;

  /* Firefox scrollbar colors */
  scrollbar-width: thin;
  scrollbar-color: var(--brand-champagne) rgba(30, 30, 30, 0.3);
}

/* WebKit Browsers */
.modal_appointment_form::-webkit-scrollbar {
  width: 8px;
}

.modal_appointment_form::-webkit-scrollbar-track {
  background: rgba(30, 30, 30, 0.3);
  border-radius: 10px;
}

.modal_appointment_form::-webkit-scrollbar-thumb {
  background-color: var(--brand-champagne);
  border-radius: 10px;
  border: 2px solid var(--brand-ink);
}

.modal_appointment_form::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand-highlight);
}

/* Form groups */
.appointment-form .form-group {
  margin-bottom: 18px;
}

/* Labels */
label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-champagne) !important;
}

/* Inputs, selects, textarea */
.appointment-form input,
.appointment-form select,
.appointment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--brand-gold-line);
  font-size: 13px;
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-weight: 300;
  background: var(--brand-mocha-2);
  margin-top: 4px;
  color: rgb(220, 220, 220);
  transition: border 0.3s, background 0.3s;
}

.appointment-form input::placeholder,
.appointment-form textarea::placeholder {
  color: rgb(159, 159, 159);
}

/* Focus state */
.appointment-form input:focus,
.appointment-form select:focus,
.appointment-form textarea:focus {
  border-color: var(--brand-champagne);
  background: var(--brand-mocha-2);
  outline: none;
}

/* Submit button */
.modal_submit_button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-champagne);
  color: var(--brand-ink);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.modal-submit i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.modal-submit:hover {
  background: var(--brand-highlight);
  transform: translateY(-2px);
}

.modal-submit:hover i {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
  .mail_number,
  .service_date {
    flex-direction: column;
  }

  .modal-box {
    height: auto;
    max-height: 90vh;
    padding: 20px;
    margin: 20px;
  }

  .modal_appointment_form {
    padding: 10px;
  }

  .modal-logo_sadaf {
    width: 80px;
    height: 80px;
  }
}

input[type="date"] {
  color: var(--brand-champagne);
}

/* Style the native date picker icon in WebKit browsers */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(82%) sepia(57%) saturate(5046%) hue-rotate(36deg)
    brightness(95%) contrast(95%);
  cursor: pointer;
}

/* Optional: pointer & hover effect */
input[type="date"]:hover::-webkit-calendar-picker-indicator {
  filter: invert(82%) sepia(57%) saturate(5046%) hue-rotate(36deg)
    brightness(100%) contrast(100%);
}

/* =========== Media Query =========== */
/* Small laptops & tablets */
@media (max-width: 1024px) {
  .modal-box {
    width: 80%;
    height: auto;
    max-height: 90vh;
    padding: 25px 20px;
  }

  .modal-box h2 {
    font-size: 28px;
  }

  .modal-box p {
    font-size: 13px;
    line-height: 18px;
  }

  .mail_number,
  .service_date {
    gap: 12px;
  }
}

/* Tablets & large phones */
@media (max-width: 768px) {
  .modal-box {
    width: 90%;
    padding: 20px 15px;
    height: auto;
    max-height: 85vh;
  }

  .modal-logo_sadaf {
    width: 80px;
    height: 80px;
  }

  .modal-box h2 {
    font-size: 24px;
  }

  .modal-box p {
    font-size: 12px;
    line-height: 17px;
  }

  .mail_number,
  .service_date {
    flex-direction: column;
    gap: 10px;
  }

  .modal-submit {
    padding: 10px 15px;
    font-size: 13px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .modal-box {
    width: 95%;
    padding: 15px 12px;
    height: auto;
    max-height: 80vh;
  }

  .modal-logo_sadaf {
    width: 70px;
    height: 70px;
  }

  .modal-box h2 {
    font-size: 20px;
  }

  .modal-box p {
    font-size: 11px;
    line-height: 16px;
  }

  .appointment-form input,
  .appointment-form select,
  .appointment-form textarea {
    font-size: 12px;
    padding: 8px 10px;
  }

  .modal-submit {
    width: 100%;
    font-size: 13px;
    padding: 10px;
  }
}

/* Extra small phones */
@media (max-width: 360px) {
  .modal-box {
    width: 98%;
    padding: 12px 10px;
    max-height: 75vh;
  }

  .modal-box h2 {
    font-size: 18px;
  }

  .modal-box p {
    font-size: 10px;
    line-height: 15px;
  }

  .appointment-form input,
  .appointment-form select,
  .appointment-form textarea {
    font-size: 11px;
    padding: 7px 9px;
  }

  .modal-submit {
    font-size: 12px;
    padding: 9px;
  }

  .modal-logo_sadaf {
    width: 60px;
    height: 60px;
  }
}

/* Responsive for tablets */
@media (max-width: 768px) {
  #confirmationMessage h3 {
    font-size: 20px;
  }
  #confirmationMessage p {
    font-size: 13px;
    line-height: 1.5;
  }
  #confirmationMessage {
    margin-top: 15px;
    padding: 12px 8px;
  }
}

/* Responsive for mobile phones */
@media (max-width: 480px) {
  #confirmationMessage h3 {
    font-size: 18px;
  }
  #confirmationMessage p {
    font-size: 12px;
    line-height: 1.4;
  }
  #confirmationMessage {
    margin-top: 10px;
    padding: 10px 6px;
  }
}

/* Extra small phones */
@media (max-width: 360px) {
  #confirmationMessage h3 {
    font-size: 16px;
  }
  #confirmationMessage p {
    font-size: 11px;
    line-height: 1.3;
  }
  #confirmationMessage {
    margin-top: 8px;
    padding: 8px 5px;
  }
}

/* Optional fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =====================================================
   BRAND REFRESH
   Added during the 2026 update. Sets the new typography, the
   stacked logo sizing, and the components that needed adjusting
   for the mocha and champagne palette.
   ===================================================== */

/* ---------- Typography ---------- */

html,
body {
  font-family: var(--font-body);
  color: var(--brand-body);
  background-color: var(--brand-ivory);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-intro h1,
.about-info h2,
.bridal-header h2,
.scroll-buttons h2,
.why-choose-image h2,
.faq-header h2,
.footer-title,
.modal_title_sub h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--brand-ink);
}

.hero-intro h1 {
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 400;
}

.about-info h2,
.bridal-header h2,
.scroll-buttons h2,
.why-choose-image h2,
.faq-header h2 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400;
}

p,
li,
label,
input,
select,
textarea,
button,
.nav-link,
.answer,
.footer-links li,
.footer-contact li {
  font-family: var(--font-body);
}

p {
  color: var(--brand-body);
}

/* Small gold labels above each section heading */
.about-info span,
.bridal-header span,
.scroll-buttons span,
.why-choose-image span,
.reviews-header span,
.gallery-header span,
.faq-header span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =====================================================
   GOLD TEXT ON LIGHT BACKGROUNDS
   Champagne #d7b487 measures only 1.95:1 against white, which is
   unreadable. Every place gold is used as TEXT on a light background
   is switched to antique gold #8f6643, which measures 5.06:1.
   Gold FILLS and gold text on mocha keep the champagne.
   ===================================================== */

.nav-left .nav-item .nav-link:hover,
.nav-item-right .nav-item .nav-link:hover,
.nav-logo-social a i,
.sidenav-btn-x,
.sidebar-link:hover,
.side-nav-social a i,
.about-info span,
.scroll-buttons span,
.why-choose-image span,
.reviews-header span,
.gallery-header span,
.faq-header span,
.service_card_item h3,
.offer-btn a,
.slider-btn,
.stars,
.light-btn {
  color: var(--brand-antique);
}

.light-btn a {
  color: var(--brand-antique) !important;
}

/* Gold on a gold fill was invisible. Mocha reads at 5.2:1. */
.about-img-batch i {
  color: var(--brand-mocha);
}

/* The bridal band sits on a photograph behind a dark overlay, so its gold
   must be the pale champagne highlight, not the antique gold used on white.
   Measured 1.2:1 with antique gold, 8:1 with the highlight. */
.bridal-header span,
.service-item h5 {
  color: var(--brand-highlight);
}

/* The offer panel is a dark overlay sitting on a photograph, so gold inside
   it uses the champagne rather than the antique gold meant for white. */
.offer-box .light-btn,
.offer-box .light-btn a {
  color: var(--brand-champagne) !important;
}

.offer-box .light-btn {
  border-color: var(--brand-champagne) !important;
}

/* Unstyled links were falling back to the default browser blue. */
a {
  color: var(--brand-antique);
}

a:hover {
  color: var(--brand-mocha);
}

/* The scrolling strapline band had near white text on a white page, which
   made it invisible. The white border and glow show it was always meant to
   sit on a dark background, so it now uses the primary mocha. */
.carousel-container {
  background-color: var(--brand-mocha);
}

.slider {
  border-color: var(--brand-gold-line);
  box-shadow: none;
}

.slider .slide p {
  color: var(--brand-highlight);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
}

/* ---------- Logo ---------- */

/* The logo is a stacked mark, so it is sized by height and the width
   attribute in the HTML is overridden here. */
.navbar-brand img {
  width: auto !important;
  height: var(--logo-height-mobile);
  margin: 2px 0;
  display: block;
}

@media (min-width: 992px) {
  .navbar-brand img {
    height: var(--logo-height-desktop);
    margin: 0;
  }
}

.navigation-bar {
  background-color: var(--brand-white) !important;
  border-bottom: 1px solid var(--brand-line);
  box-shadow: none;
}

.navbar {
  padding-top: 0;
  padding-bottom: 0;
}

.nav-ceter {
  flex: 0 0 auto;
}

.footer-brand img {
  width: auto;
  height: var(--logo-height-footer);
  max-width: 100%;
}

.modal_logo_sadaf img {
  width: auto;
  height: var(--logo-height-modal);
}

/* ---------- Navigation ---------- */

.nav-link {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--brand-ink) !important;
}

/* The mega menu sits on a white panel, so its text must stay dark.
   It previously used an undefined colour variable. */
.dropdown-menu-service-col,
.dropdown-menu-service-col h6 {
  color: var(--brand-ink);
  background-color: transparent;
}

.dropdown-menu-service-row {
  background-color: var(--brand-white);
  border: 1px solid var(--brand-line);
}

.offcanvas {
  background-color: var(--brand-white);
}

/* ---------- Buttons ---------- */

.dark-btn,
.light-btn,
.call-btn,
.modal-submit,
.service-list {
  font-family: var(--font-body);
  letter-spacing: 0.04em;
}

/* White on champagne is 1.95:1 and unreadable. Mocha on champagne is 5.2:1. */
.dark-btn a,
.light-btn:hover a,
.call-btn {
  color: var(--brand-mocha) !important;
}

.dark-btn:hover {
  background-color: var(--brand-mocha) !important;
  border-color: var(--brand-mocha) !important;
}

.dark-btn:hover a,
.call-btn:hover {
  color: var(--brand-highlight) !important;
}

.call-btn:hover {
  background-color: var(--brand-mocha) !important;
  border: 1px solid var(--brand-mocha);
}

.light-btn:hover {
  background-color: var(--brand-champagne) !important;
  border-color: var(--brand-champagne) !important;
}

/* ---------- Sections ---------- */

.hero-container {
  background-color: var(--brand-cream);
}

.faq-container {
  background: var(--brand-ivory);
}

/* Solid champagne panels were overpowering and the text on them was weak.
   Cream panels with a gold edge keep the gold as an accent. */
.item {
  background-color: var(--brand-cream);
  border: 1px solid var(--brand-line);
  border-left: 3px solid var(--brand-champagne);
}

.question {
  color: var(--brand-ink);
}

.answer {
  color: var(--brand-body);
}

/* ---------- Footer, primary mocha background ---------- */

.footer-section {
  background-color: var(--brand-mocha);
  color: var(--brand-highlight);
}

.footer-title {
  color: var(--brand-champagne);
  font-size: clamp(22px, 3vw, 28px);
}

.footer-brand p,
.footer-links li a,
.footer-contact li,
.footer-contact li i,
.footer-bottom {
  color: var(--brand-highlight);
}

.footer-links li a:hover,
.footer-bottom a:hover {
  color: var(--brand-champagne);
}

.footer-divider {
  border-color: var(--brand-gold-line);
  opacity: 1;
}

.footer-logo-social {
  background-color: transparent;
  border: 1px solid var(--brand-gold-line);
}

.footer-logo-social a i {
  color: var(--brand-champagne);
}

.footer-logo-social:hover {
  background-color: var(--brand-champagne);
}

.footer-logo-social:hover a i {
  color: var(--brand-mocha);
}

/* ---------- Enquiry modal, secondary mocha background ---------- */

.modal-box {
  background: var(--brand-mocha);
  border: 1px solid var(--brand-gold-line);
}

.modal_appointment_form {
  background: var(--brand-mocha);
}

.modal_title_sub h2 {
  color: var(--brand-highlight);
}

.modal_title_sub p {
  color: var(--brand-champagne);
}

.appointment-form input,
.appointment-form select,
.appointment-form textarea,
.form-group.modal_services select {
  background: var(--brand-mocha-2);
  border: 1px solid var(--brand-gold-line);
  color: var(--brand-highlight);
  font-family: var(--font-body);
}

.appointment-form input:focus,
.appointment-form select:focus,
.appointment-form textarea:focus {
  border-color: var(--brand-champagne);
  outline: none;
}

.appointment-form label {
  color: var(--brand-highlight);
}

.modal-submit {
  background: var(--brand-champagne);
  color: var(--brand-mocha);
}

.modal-submit:hover {
  background: var(--brand-highlight);
}

/* ---------- Accessibility ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-antique);
  outline-offset: 2px;
}

/* ---------- Small screens ---------- */

@media (max-width: 575px) {
  body {
    font-size: 15px;
  }

  .footer-brand img {
    height: 104px;
  }

  .modal_logo_sadaf img {
    height: 64px;
  }
}