:root {
  --section-gap-responsive-mobile: 60px;
  --slide-progress-height: 4px;
  --slide-progress-area-bg: rgba(0, 0, 0, 0.1);
  --slide-progress-bg: #853f33;
  --slide-progress-gap: 4px;
  --slide-content-bg: rgba(0, 0, 0, 0.4);
}

/* ====================================================
     ≤767.98px (Large phones, foldables)
==================================================== */
@media (max-width: 767.98px) {
  [data-responsive-order] {
    order: var(--order-value);
  }

  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .row {
    margin-left: -24px;
    margin-right: -24px;
  }

  [class*='col-'] {
    padding-left: 24px;
    padding-right: 24px;
  }

  .moodboard-btm-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .product-section__info-area {
    margin-top: -84px;
  }

  .section-gap {
    &:not(.section-gap--no-top) {
      padding-top: var(--section-gap-responsive-mobile);
    }

    &:not(.section-gap--no-bottom) {
      padding-bottom: var(--section-gap-responsive-mobile);
    }
  }

  .mood-board-collage-right-img-xxl {
    height: calc(100vh - 384px);
    object-fit: cover;
  }

  .mood-board-collage-group {
    height: calc(100vh - 180px);
    object-fit: cover;
  }

  .slide-content-gap-top {
    padding-top: 60px !important;
  }

  .slide-with-progress-wrapper {
    min-height: 250px;
  }

  .moodboard-btm-section__desc_gap {
    margin-bottom: 62px;
  }

  .moodboard-btm__auto-height-mobile {
    min-height: calc(100vh - 310px);
  }

  .moodboard-btn__bottom-caption-text {
    width: 100% !important;
    padding-left: 16px;
    margin-top: 46px;
    padding-right: 42px;
  }
  .product-section-gap:not(.product-section-gap--no-top) {
    padding-top: var(--section-gap-responsive-mobile);
  }
  .product-section-gap:not(.product-section-gap--no-bottom) {
    padding-bottom: var(--section-gap-responsive-mobile);
  }
  .product-section-2 .product-section-2__description-img {
    max-width: 70px;
    height: 90px;
  }
  .product-section-3__top-area {
    padding-top: var(--section-gap-responsive-mobile);
  }
  .product-section-3 .product-section-3__heading {
    padding-bottom: 96px;
  }
  .product-section-3 .product-section-3__asset-img {
    margin-top: -64px;
  }
  .product-section-3 .product-section-3__circle {
    padding: 64px 46px;
    margin-top: -346px;
  }
  .product-section-3 .product-section-3__img-group-with-text {
    margin: 0 -24px;
  }
  .product-section__text-label {
    left: -6px;
  }
  .product-section__text-label svg {
    transform: rotate(180deg) translateX(-6px);
  }
  .video-section {
    padding-bottom: 32px;
  }
  .video-section .video-section__content {
    gap: 16px;
  }
  .video-section .video-section__play-icon {
    width: 54px;
    height: 54px;
  }
  .video-section .video-section__play-icon img {
    width: 16px;
    height: 16px;
  }

  .product-starter-image {
    width: 150%;
    margin-left: -25%;
  }
}

/* ==========================
    Slider style start
============================== */

[data-slider-section-index='0'] [data-collage] {
  display: none;
}

[data-slider-section-index='1'] [data-mood-board-person] {
  display: none;
}

.slide-with-progress-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.section-collage-description-mobile-gap {
  margin-bottom: 60px !important;
}

.slide-with-progress-progress {
  display: flex;
  gap: var(--slide-progress-gap);
  padding: 16px 24px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.slide-with-progress-progress div {
  flex: 1;
  height: var(--slide-progress-height);
  background: var(--slide-progress-area-bg);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.slide-with-progress-progress div span {
  display: block;
  height: 100%;
  width: 0%;
  transition: width linear;
  background-color: var(--slide-progress-bg);
}

.slide-with-progress-slider {
  flex: 1;
  height: 100%;
}

.slide-with-progress-slide {
  height: 100%;
  background-position: center;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}

.product-section-1-wrapper {
  margin-top: 0;
  border: 0;
  padding: 0;
}

/* ==========================
    Slider style end
============================== */
/* ========================================================
     ≤575.98px (Phones)
======================================================== */
@media (max-width: 575.98px) {
  /* =====================================
============== Hero Section ================
======================================== */

  .hero-section-bottom {
    padding: 28px;
    gap: 48px;
  }

  .hero-bottom-text-content p {
    font-size: 24px;

    font-weight: 300;
  }

  .hero-section-bottom img {
    width: 300px;
    height: auto !important;
  }

  .hero-section::before {
    padding: 8px;
    background-size:
      100% 8px,
      /* top */ 100% 8px,
      /* bottom */ 8px 100%,
      /* left */ 8px 100%; /* right */
  }
  .section-gap.section-gap--no-bottom-mobile {
    padding-bottom: 0px !important;
  }
  .product-section__gallery .product-section__gallery-large-img {
    aspect-ratio: 10/12;
  }
  .product-section__gallery .product-section__gallery-small-img {
    aspect-ratio: 360/424;
  }

  /* =======================================
------- Moodboard Bottom Section ---------
========================================== */

  .moodboard-btm__text-content p {
    max-width: 100%;
    width: 100%;
  }

  .moodboard-btm__image-container {
    max-width: calc(100vw - 20px);
    overflow: hidden;
    gap: 0px !important;
    border: 0px !important;
  }

  .moodboard-btm__image-container-top {
    max-height: 384px !important;
    height: 384px !important;
    width: 100%;
    position: relative;
    z-index: 11;
    border: 1px solid var(--color-gray-10);
  }

  .moodboard-btm__image1 {
    position: unset;
  }

  .moodboard-btm__image1 p {
    position: absolute;
    left: 20px;
    top: 20px;
  }
  .moodboard-btm__image1 img {
    width: 129px !important;
    height: 100px !important;
    right: 20px;
    top: 20px;
    position: absolute;
  }

  .moodboard-btm__image2 {
    bottom: unset;
    position: absolute;
    top: 51px;
    left: 20px;
    width: 131px !important;
    height: 136px !important;
  }

  .moodboard-btm__image3 {
    bottom: unset;
    left: unset;
    position: absolute;
    right: 10px;
    top: 142px;
    width: 175px;
    height: 202px;
  }

  .moodboard-btm__image4 {
    display: none !important;
  }
  .moodboard-btm__image5 {
    position: absolute;
    left: 43px;
    top: 167px;
    width: 111px !important;
    height: 147px !important;
    aspect-ratio: 111.5/147.33;
    object-fit: cover;
  }

  .moodboard-btm__image6 {
    left: 20px !important;
    top: 50% !important;
    position: absolute;
    object-fit: cover;

    width: 138px !important;
    height: 188px !important;
    z-index: 10;
    mix-blend-mode: normal !important;
  }

  .moodboard-btm__image7 {
    aspect-ratio: 1/1;
    width: 100%;
    height: calc(100vh - 500px);
    object-fit: cover;
  }
  .moodboard-btm__image8 {
    width: 50%;
  }
  .moodboard-btm__image8 img {
    width: 100%;
    height: auto;
  }

  .moodboard-btm__image9 {
    width: 50%;
    background-color: var(--color-beige-bg);
  }

  .moodboard-btm__image9 p {
    margin-bottom: 0px !important;
    display: none;
  }
  .moodboard-btm__image9 img {
    width: 100%;
    height: auto;
  }

  .moodboard-btm__image-container-bottom {
    z-index: 9;
    padding: 0px 24px 0;
  }

  .moodboard-btm__overlap-image {
    padding: 12px;
    width: 100%;
    height: 240px;
    gap: 12px;
    position: relative;
    top: unset;
    right: unset;
  }

  /* =======================================
--- Section: Quote & Artist Text Only ----
======================================= */

  .section-quote-artist {
    height: unset;
    padding-top: var(--section-gap-responsive-mobile);
    padding: var(--section-gap-responsive-mobile) 30px 28px;
  }

  .section-quote-artist div:first-of-type {
    max-width: 100% !important;
  }

  .section-quote-artist p:first-of-type {
    width: calc(100% - 30px);
    text-align: center;
    font-size: 28px !important;
  }

  /* =====================================
=========== Invitation Section =========
======================================== */

  .invitation-section {
    padding: 0px 62px 41px 66px;
    height: unset;
  }

  .invitation-text-wrapper {
    flex-basis: unset;
    transform: translateY(-100px);
  }
  .invitation-text-wrapper h3 {
    font-size: 34px;
    line-height: 98%;
    letter-spacing: -1.36px;
  }
  .invitation-text-wrapper p,
  .invitation-text-wrapper h5,
  .invitation-text-wrapper a {
    font-size: 12px;
  }
  .invitation-text-wrapper a {
    padding: 16px 28px;
  }
  .invitation-section-img {
    width: 507px;
    height: 496px;
    top: unset !important;
    right: unset !important;
    position: relative;
    scale: 1;
  }

  .invitation-section-branch-img {
    right: 25px !important;
    left: 26px;
    top: 0px;
    width: 101px;
    height: 152px;
  }

  /* =======================================
------ Book an appointment Section -------
======================================= */

  .booking-form {
    min-width: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 36px 32px !important;
  }

  .booking-form__text-content h3 {
    font-size: 38px !important;
    line-height: 96%;
    margin-bottom: 40px;
  }

  .booking-form__close-btn {
    right: 32px;
    top: 32px;
  }

  .booking-form__submit-btn {
    border-radius: 0px !important;
  }

  .house-of-tata-section {
    height: unset;
    padding: 130px 29px 180px 32px;
    gap: 70px;
  }
  .house-of-tata-section p {
    font-size: 12px !important;
  }
  .house-of-tata-text-wrapper {
    max-width: calc(100% - 62px);
  }
  .house-of-tata-text-wrapper .from-the-font-img {
    width: 80px;
    height: 25px;
  }
  .house-of-tata-text-wrapper .title-img {
    width: 284px;
    height: 30px;
  }
  .house-of-tata-bg-vector {
    transform: scale(2);
    top: -10%;
  }

  /* =======================================
------------ Product Sections ------------
======================================= */

  .product-section-gallery-5 {
    width: 55%;
    aspect-ratio: 1/1;
    height: unset;
    left: 13px;
    bottom: 20px;
  }
  .product-section-gallery-3 {
    width: 45%;
    height: 197px !important;
    aspect-ratio: 1/1.2;
    height: unset;
    right: 0;
    bottom: 40px;
    position: absolute;
  }
  .product-section-left {
    flex-basis: unset;
  }
  .product-section-left .product-section-gallery-4 {
    height: unset;
    gap: 24px !important;
    position: relative;
    left: unset;
    top: unset;
  }
  .product-section-left .product-section-gallery-4 img:first-of-type {
    height: 44px;
    width: 115px;
  }
  .product-section-left .product-section-gallery-4 p {
    font-size: 13px;
    font-weight: 300;
    line-height: 132%;
  }
  .product-section-left .text-petal-crown {
    font-size: 11px;
    font-weight: 300;
    left: 48px;
    top: 180px;
    max-width: 180px;
    text-align: left;
  }
  .product-section-left .text-petal-crown::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: black;
    left: -14px;
    right: unset;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
  }
  .product-section-left .product-section-gallery-2 {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 325px;
    top: 170px;
    scale: 1.3;
    z-index: 30;
  }
  .product-section-right {
    display: none !important;
  }
}

/* ============================
    >= 768px 
============================ */

@media (min-width: 768px) {
  /* =======================
-------- Utilities ---------
========================= */
  .min-vh-100 {
    min-height: 100vh !important;
  }

  .position-md-absolute {
    position: absolute !important;
  }

  .align-self-md-start {
    align-self: flex-start !important;
  }

  .fw-md-400 {
    font-weight: 400;
  }

  .bottom-md-0 {
    bottom: 0 !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  /* =======================
------ Custom Style --------
========================= */

  .section-pull-up {
    margin-top: -100px;
  }
  .section-gap:not(.section-gap--no-top) {
    padding-top: var(--section-gap);
  }
  .section-gap:not(.section-gap--no-bottom) {
    padding-bottom: var(--section-gap);
  }
  .section-gap-md:not(.section-gap-md--no-top) {
    padding-top: var(--section-gap);
  }
  .section-gap-md:not(.section-gap-md--no-bottom) {
    padding-bottom: var(--section-gap);
  }
  .hero-text-block {
    margin-top: 86px;
  }
  .product-section-gap:not(.product-section-gap--no-top) {
    padding-top: var(--section-gap);
  }
  .product-section-gap:not(.product-section-gap--no-bottom) {
    padding-bottom: var(--section-gap);
  }
  .initially-shrink-section {
    width: 75%;
  }
  .product-section .product-section__svg-wrapper {
    margin-top: -270px;
  }
  .product-section .product-section__info-area {
    top: 72px;
  }
  .product-section .product-section__gallery .product-section__gallery-large-img {
    aspect-ratio: 762/657;
  }
  .product-section .product-section__gallery .product-section__gallery-small-img {
    aspect-ratio: 360/424;
  }

  .product-starter-image {
    margin-top: 72px;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    transition: 0.3s all ease;
  }

  .product-section-1-wrapper {
    width: 85%;
    /* transition: 0.3s all linear; */
    will-change: transform;
  }

  .product-section-starter {
    height: calc(100vh + 100px);
    max-height: 1100px;
  }
  .product-section-1 .product-section-1__gallery {
    margin-top: -84px;
  }
  .product-section-2 .product-section-2__container {
    margin-top: -100px;
  }
  .product-section-3 .product-section__container-text-label {
    right: -82px;
    top: -30px;
  }
  .product-section-3__top-area {
    padding-top: var(--section-gap);
  }
  .product-section-3__asset-img {
    top: -84px;
    padding: 0 84px;
  }
  .product-section-3__circle {
    top: -464px;
  }
  .video-section__play-icon img {
    width: 32px;
    margin-right: -4px;
  }
  .house-of-tata-section p {
    margin-top: 82px;
  }

  .text-petal-crown {
    font-weight: 300;
    line-height: 140%; /* 16.8px */
    letter-spacing: 1.44px;
    color: var(--color-charcoal);
    position: absolute;
    left: 330px;
    top: 300px;
    max-width: 156px;
    text-align: right;
  }
  .text-petal-crown::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: black;
    right: -8px;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
  }
}

/* ============================
    >= 1320px 
============================ */
@media (min-width: 1320px) {
  .container {
    max-width: 1185px;
  }
}

/* ============================
    >= 1600px 
============================ */
@media (min-width: 1320px) {
  .container {
    max-width: 1215px;
  }

  .hero-section-top {
    gap: 55px;
  }
}
@media (min-width: 1920px) {
  .col-xxl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xxl-11 {
    max-width: 91.666667%;
    flex: 0 0 91.666667%;
  }
  .col-xxl-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }
  .ml-xxl-0 {
    margin-left: 0 !important;
  }

  .mood-board-collage-right-img-xxl {
    height: 79vh;
  }
}

@keyframes moveGradient {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}