/* =========================================================================
   for Preloader css start here
========================================================================= */
.site-preloader {
   display: none;
}

.home-page .site-preloader {
   position: fixed;
   inset: 0;
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--secondary-color);
   transition: opacity .6s ease, visibility .6s ease;
   /* display: none; */
}

.home-page .site-preloader--hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.home-page .site-preloader__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3rem;
}

.home-page .site-preloader__logo {
   width: 13.3rem;
   animation: preloaderLogo .8s ease forwards;
}

.home-page .site-preloader__logo svg,
.home-page .site-preloader__logo img {
   width: 100%;
   height: auto;
   max-height: 6rem;
   object-fit: contain;
   display: block;
}

.home-page .site-preloader__progress {
   width: 16rem;
   height: .2rem;
   background: var(--grey-extra-light);
   overflow: hidden;
   border-radius: 5rem;
}

.home-page .site-preloader__progress-bar {
   display: block;
   width: 100%;
   height: 100%;
   background: var(--primary-color);
   transform: translateX(-100%);
   animation: preloaderProgress 1.8s ease forwards;
}

@keyframes preloaderLogo {

   0% {
      opacity: 0;
      transform: scale(.85);
   }

   100% {
      opacity: 1;
      transform: scale(1);
   }

}

@keyframes preloaderProgress {

   0% {
      transform: translateX(-100%);
   }

   100% {
      transform: translateX(0);
   }

}

@media (prefers-reduced-motion: reduce) {

   .home-page .site-preloader__logo,
   .home-page .site-preloader__progress-bar {
      animation: none;
   }

}

/* Responsive for preloader */

@media(max-width:767.98px) {

   .home-page .site-preloader__logo {
      width: 11rem;
   }

   .home-page .site-preloader__progress {
      width: 14rem;
   }

}

@media(max-width:575.98px) {

   .home-page .site-preloader__logo {
      width: 9rem;
   }

   .home-page .site-preloader__progress {
      width: 12rem;
   }

}

/* =========================================================================
   for Preloader css ends here
========================================================================= */


/* =========================================================================
   Header Starts Here
========================================================================= */

.site-header {
   position: sticky;
   top: 0;
   left: 0;
   z-index: 999;
   background: var(--secondary-color);
   box-shadow: 0 .4rem .4rem rgba(0, 0, 0, .25);
   padding-block: clamp(1.2rem, 1.063rem + 0.488vw, 2rem) clamp(1.5rem, 1.244rem + 0.915vw, 3rem);
}

.site-header__wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: clamp(1rem, -2.207rem + 3.233vw, 4rem);
}

.site-header__logo {
   flex-shrink: 0;
}

.site-header__logo svg,
.site-header__logo img {
   width: clamp(20rem, 7.095rem + 3.232vw, 13.3rem);
   height: auto;
   max-height: 5rem;
   object-fit: contain;
   display: block;
}

.site-header__nav {
   flex: 1;
   display: flex;
   justify-content: center;
   transition: all .45s ease;
}

.site-header__nav-logo {
   display: none;
}

.site-header__menu {
   display: flex;
   align-items: center;
   gap: clamp(0.4rem, -0.933rem + 1.111vw, 1.2rem);
   padding: clamp(1rem, 0rem + 0.833vw, 1.6rem) clamp(1rem, -0.667rem + 1.389vw, 2rem);
   border-radius: clamp(0.8rem, 0.663rem + 0.488vw, 1.6rem);
   background: var(--grey-extra-light);
}

.site-header__item {
   display: flex;
}

.site-header__item:last-child {
   display: none;
}

.site-header__link {
   display: flex;
   align-items: center;
   justify-content: center;

   padding: clamp(0.6rem, 0.172rem + 0.431vw, 1rem) clamp(1.2rem, -0.51rem + 1.724vw, 2.8rem);

   border-radius: clamp(0.4rem, -0.028rem + 0.431vw, 0.8rem);

   font-family: var(--font-clash-display);
   font-size: clamp(1.4rem, 0.759rem + 0.647vw, 2rem);
   font-weight: 500;

   text-transform: uppercase;

   transition: all .35s ease;
}

.site-header__link:hover,
.site-header__link--active {
   background: var(--primary-color);
   color: var(--secondary-color);
}

.site-header__actions {
   display: flex;
   align-items: center;
   gap: clamp(0.4rem, -0.455rem + 0.862vw, 1.2rem);
   flex-shrink: 0;
}

.site-header__icon-btn {
   position: relative;

   display: flex !important;
   align-items: center;
   justify-content: center;

   width: clamp(4.5rem, 2.897rem + 1.616vw, 6rem);
   height: clamp(4.5rem, 2.897rem + 1.616vw, 6rem);

   border-radius: clamp(0.4rem, 0.332rem + 0.244vw, 0.8rem);

   background: var(--grey-extra-light);

   transition: .35s;
}

.site-header__icon-btn svg {
   max-width: clamp(1.6rem, 1.172rem + 0.431vw, 2rem);
   max-height: clamp(1.6rem, 1.172rem + 0.431vw, 2rem);
   width: 100%;
   height: 100%;
}

.site-header__icon-btn svg path {
   transition: .35s;
}

.site-header__icon-btn:hover,
.site-header__icon-btn--active {
   background: var(--primary-color);
}

.site-header__icon-btn:hover svg path,
.site-header__icon-btn--active svg path {
   fill: var(--secondary-color);
}

.site-header__badge {
   position: absolute;

   top: .3rem;
   right: .3rem;

   min-width: clamp(1.4rem, 1.298rem + 0.366vw, 2rem);
   height: clamp(1.4rem, 1.298rem + 0.366vw, 2rem);
   width: max-content;
   padding-inline: .3rem;

   border-radius: 999px;

   background: var(--blue);
   box-shadow: 0 0 0 .2rem var(--grey-extra-light);

   display: flex;
   align-items: center;
   justify-content: center;

   color: var(--secondary-color);

   font-family: var(--font-clash-display);
   font-size: clamp(0.8rem, 0.732rem + 0.244vw, 1.2rem);
   font-weight: 500;
   line-height: 1;
   white-space: nowrap;
}

.site-header__login {

   font-family: var(--font-clash-display);

   font-size: clamp(1.6rem, 1.172rem + 0.431vw, 2rem);

   font-weight: 500;

   text-transform: uppercase;

   margin-left: 1rem;

}

.site-header__login:hover {

   color: var(--blue);

}

.site-header__toggle {

   display: none;

   width: clamp(4.5rem, 2.897rem + 1.616vw, 6rem);

   height: clamp(4.5rem, 2.897rem + 1.616vw, 6rem);

   border-radius: clamp(0.4rem, 0.332rem + 0.244vw, 0.8rem);

   background: var(--grey-extra-light);

   align-items: center;

   justify-content: center;

   flex-direction: column;

   gap: clamp(0.4rem, 0.321rem + 0.281vw, 0.6rem);

   transition: .35s;

}

.site-header__toggle span {

   width: clamp(1.4rem, 1.161rem + 0.854vw, 2.8rem);

   height: clamp(0.1rem, 0.083rem + 0.061vw, 0.2rem);

   border-radius: 5rem;

   background: var(--primary-color);

   transition: .35s ease;

}

.site-header__toggle:hover {

   background: var(--primary-color);

}

.site-header__toggle:hover span {

   background: var(--secondary-color);

}

.site-header__toggle.active span:nth-child(1) {

   transform: translateY(.8rem) rotate(45deg);

}

.site-header__toggle.active span:nth-child(2) {

   opacity: 0;

}

.site-header__toggle.active span:nth-child(3) {

   transform: translateY(-.8rem) rotate(-45deg);

}

.site-header__overlay {

   position: fixed;

   inset: 0;

   background: rgba(0, 0, 0, .45);

   backdrop-filter: blur(.4rem);

   opacity: 0;

   visibility: hidden;

   pointer-events: none;

   transition: .35s;

   z-index: 998;

}

.site-header__overlay.active {

   opacity: 1;

   visibility: visible;

   pointer-events: auto;

}

.site-header__nav {

   transition: right .45s ease;

}

/* Responsive Starts Here */

@media (max-width: 991.98px) {

   .site-header__toggle {
      display: flex;
   }

   .site-header__login {
      display: none;
   }

   .site-header__nav {

      position: fixed;

      top: 0;
      right: -100%;

      width: clamp(28rem, 25.64rem + 8.427vw, 34rem);
      height: 100vh;

      background: var(--secondary-color);

      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: clamp(1.5rem, 0.91rem + 2.107vw, 3rem);

      padding: clamp(1.5rem, 0.91rem + 2.107vw, 3rem);

      box-shadow: -2rem 0 5rem rgba(0, 0, 0, .12);

      z-index: 999;

   }

   .site-header__nav.active {

      right: 0;

   }

   .site-header__nav-logo {
      display: block;
      background: lightgray;
      width: 100%;
      padding: 1rem;
   }

   .site-header__nav-logo svg,
   .site-header__nav-logo img {
      max-width: clamp(11rem, 10.096rem + 3.23vw, 13.3rem);
      height: auto;
      max-height: 5rem;
      object-fit: contain;
   }

   .site-header__menu {

      width: 100%;

      flex-direction: column;

      align-items: stretch;

      background: transparent;

      padding: 0;

      gap: clamp(0.8rem, 0.721rem + 0.281vw, 1rem);

   }

   .site-header__item {

      width: 100%;

   }

   .site-header__item:last-child {
      display: block;
   }

   .site-header__link {

      width: 100%;

      justify-content: flex-start;

      padding: clamp(1rem, 0.843rem + 0.562vw, 1.4rem) clamp(1rem, 0.843rem + 0.562vw, 1.4rem);

      font-size: clamp(1.6rem, 1.443rem + 0.562vw, 2rem);

   }

   .site-header__icon-btn,
   .site-header__toggle {
      width: clamp(3.5rem, 3.107rem + 1.404vw, 4.5rem);
      height: clamp(3.5rem, 3.107rem + 1.404vw, 4.5rem);
      border-radius: clamp(0.4rem, 0.366rem + 0.122vw, 0.6rem);
   }

}

@media (max-width: 767.98px) {


   .site-header__icon-btn svg {

      transform: scale(.9);

   }

}

@media (max-width: 575.98px) {


   .site-header__icon-btn svg {

      transform: scale(.8);

   }

}

@media (max-width: 319.98px) {

   .site-header__wrapper {

      flex-wrap: wrap;

      justify-content: center;

   }

   .site-header__nav {
      width: 100%;
   }

   .site-header__actions {

      width: 100%;

      justify-content: center;

   }

}

/* =========================================================================
   Header Ends Here
========================================================================= */


/* =========================================================================
   for Footer css start here 
========================================================================= */
.site-footer {
   position: relative;
   overflow: hidden;
   background: var(--light-black);
   color: var(--secondary-color);
}

.site-footer__wrapper {
   position: relative;
   z-index: 2;
   padding-top: 4.5rem;
}

.site-footer__top {
   display: flex;
   gap: 4rem;
   justify-content: space-between;
}

.site-footer__company {
   max-width: 41.7rem;
}

.site-footer__logo {
   display: inline-flex;
   margin-bottom: 4rem;
}

.site-footer__logo img {
   width: 30rem;
}

.site-footer__description {
   font-family: var(--font-clash-display);
   font-weight: 500;
   margin-bottom: 3.2rem;
   color: var(--grey-muted);
}

.site-footer__contact {
   display: flex;
   flex-direction: column;
   gap: .8rem;
   margin-bottom: 2.4rem;
}

.site-footer__contact a,
.site-footer__address {
   font-family: var(--font-clash-display);
   font-weight: 500;
   color: var(--grey-muted);
   transition: color .35s ease;
}

.site-footer__contact a:hover {
   color: var(--pink);
}

.site-footer__address {
   font-family: var(--font-clash-display);
   font-weight: 500;
   font-style: normal;
}

/* Navigation */

.site-footer__links-wrapper {
   display: flex;
   gap: clamp(1rem, -4.333rem + 6.944vw, 9rem);
}

.site-footer__menu {
   display: flex;
   flex-direction: column;
   gap: 6.6rem;
}

.site-footer__main-link,
.site-footer__heading {
   display: inline-flex;
   align-items: center;
   gap: clamp(0.8rem, 0.254rem + 1.951vw, 4rem);
   font-family: var(--font-clash-display);
   font-size: clamp(2rem, 1.539rem + 1.646vw, 4.7rem);
   font-weight: 500;
   text-transform: uppercase;
   transition: color .35s ease;
   color: var(--secondary-color);
}

.site-footer__main-link svg,
.site-footer__heading svg {
   width: clamp(2rem, 1.488rem + 1.829vw, 5rem);
   height: clamp(2rem, 1.488rem + 1.829vw, 5rem);
   transition: transform .35s ease, color .35s ease;
}

.site-footer__main-link svg path,
.site-footer__heading svg path {
   transition: transform .35s ease, color .35s ease;
}


/* Links */
.site-footer__heading {
   margin-bottom: 4.5rem;
}

.site-footer__links ul {
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
}

.site-footer__links ul li a {
   font-family: var(--font-clash-display);
   font-weight: 500;
   position: relative;
   display: inline-flex;
   color: var(--grey-muted);
   transition: color .35s ease;
}

/* Background Typography */

.site-footer__background {
   margin-top: -5rem;
   overflow: hidden;
}

.site-footer__background img {
   width: 100%;
}

/* Copyright */

.site-footer__copyright {
   position: relative;
   z-index: 2;
   padding: 2.2rem;
   text-align: center;
   background-color: var(--primary-color);
}

.site-footer__copyright p {
   font-family: var(--font-clash-display);
   color: var(--secondary-color);
   text-transform: uppercase;
   font-size: 2rem;
   font-weight: 500;
}

/* Footer Hover Effects */

.site-footer__logo svg {
   transition: transform .45s ease;
}

.site-footer__logo:hover svg {
   transform: scale(1.04);
}

/* Main Navigation */

.site-footer__main-link,
.site-footer__heading span {
   position: relative;
}

.site-footer__main-link span,
.site-footer__heading span {
   position: relative;
   transition: color .35s ease, transform .35s ease;
   width: max-content;
}

.site-footer__main-link svg {
   flex-shrink: 0;
   transform: translateX(0);
}

.site-footer__main-link:hover span,
.site-footer__heading:hover span {
   transform: translateX(.4rem);
}

.site-footer__main-link:hover svg {
   transform: translateX(.8rem) translateY(-.8rem);
}

.site-footer__main-link:hover svg path {
   fill: var(--pink);
}

/* Shop Heading */

.site-footer__heading {
   transition: color .35s ease;
}

.site-footer__heading svg {
   flex-shrink: 0;
   transform: translateX(0);
}

/* .site-footer__heading:hover {
   color: var(--pink);
} */

.site-footer__heading:hover svg {
   transform: translateX(.8rem) translateY(-.8rem);
}

.site-footer__heading:hover svg path {
   fill: var(--pink);
}

/* Footer Links */

.site-footer__links li a,
.site-footer__contact li a {
   position: relative;
   overflow: hidden;
}

.site-footer__links li a::after,
.site-footer__contact li a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -.4rem;
   width: 100%;
   height: .2rem;
   background: var(--pink);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .35s ease;
}

.site-footer__links li a:hover,
.site-footer__contact li a:hover {
   color: var(--pink);
}

.site-footer__links a:hover::after,
.site-footer__contact a:hover::after {
   transform: scaleX(1);
}

/* Active Menu State */

.site-footer__main-link--active span {
   color: var(--pink);
   transform: translateX(.4rem);
}

.site-footer__main-link--active svg {
   transform: translateX(.8rem) translateY(-.8rem);
}

.site-footer__main-link--active svg path {
   fill: var(--pink);
}

.site-footer__heading--active span {
   color: var(--pink);
   transform: translateX(.4rem);
}

.site-footer__heading--active svg {
   transform: translateX(.8rem) translateY(-.8rem);
}

.site-footer__heading--active svg path {
   fill: var(--pink);
}

.site-footer__links li a.site-footer__link--active {
   color: var(--pink);
}

.site-footer__links li a.site-footer__link--active::after {
   transform: scaleX(1);
}

/* Address */

.site-footer__address {
   transition: color .35s ease;
}

.site-footer__company:hover .site-footer__address {
   color: var(--secondary-color);
}

/* Decorative Line */

.site-footer__decorative img {
   animation: footerWave 18s linear infinite alternate;
}

/* Background Typography */

.site-footer__background img {
   transform: scale(1);
   transition: transform 8s ease;
}

.site-footer:hover .site-footer__background img {
   transform: scale(1.03);
}

/* Footer Fade */

.site-footer__top>* {
   opacity: 1;
   transform: translateY(0);
   transition:
      opacity .6s ease,
      transform .6s ease;
}

/* Copyright */

.site-footer__copyright p {
   transition: letter-spacing .35s ease;
}

.site-footer__copyright:hover p {
   letter-spacing: .08rem;
}

/* Scrollbar Friendly */

.site-footer a {
   -webkit-tap-highlight-color: transparent;
}

/* Keyframes */

@keyframes footerWave {

   0% {
      transform: translateX(0);
   }

   50% {
      transform: translateX(-2rem);
   }

   100% {
      transform: translateX(2rem);
   }

}

@media (max-width:1499.98px) {

   .site-footer__wrapper {
      padding-top: 4rem;
   }

   .site-footer__top {
      gap: 3rem;
   }

   .site-footer__company {
      max-width: 36rem;
   }

   .site-footer__menu {
      gap: 5.2rem;
   }

   .site-footer__heading {
      margin-bottom: 3.8rem;
   }

   .site-footer__background {
      margin-top: -4rem;
   }

}

@media (max-width:1199.98px) {

   .site-footer__wrapper {
      padding-top: 3.6rem;
   }

   .site-footer__top {
      gap: 3rem;
      align-items: flex-start;
   }

   .site-footer__company {
      max-width: 30rem;
   }

   .site-footer__logo {
      margin-bottom: 3rem;
   }

   .site-footer__logo svg {
      width: 24rem;
      height: auto;
   }

   .site-footer__description {
      margin-bottom: 2.4rem;
   }

   .site-footer__contact {
      margin-bottom: 2rem;
   }

   .site-footer__menu {
      gap: 4rem;
   }

   .site-footer__heading {
      margin-bottom: 3rem;
   }

   .site-footer__links ul {
      gap: 1.4rem;
   }

   .site-footer__background {
      margin-top: -3rem;
   }

}

@media (max-width:991.98px) {

   .site-footer__wrapper {
      padding-top: 3rem;
   }

   .site-footer__top {
      flex-direction: column;
      gap: 5rem;
   }

   .site-footer__company {
      max-width: 100%;
   }

   .site-footer__links-wrapper {
      width: 100%;
      justify-content: space-between;
   }

   .site-footer__navigation {
      flex: 1;
   }

   .site-footer__links {
      flex: 1;
   }

   .site-footer__menu {
      gap: 3rem;
   }

   .site-footer__heading {
      margin-bottom: 2.4rem;
   }

   .site-footer__copyright {
      padding: 2rem;
   }

}

@media (max-width:767.98px) {

   .site-footer__wrapper {
      padding-top: 2.4rem;
   }

   .site-footer__top {
      gap: 4rem;
   }

   .site-footer__links-wrapper {
      flex-direction: column;
      gap: clamp(2rem, 0.85rem + 4.107vw, 4rem);
   }

   .site-footer__menu {
      gap: 2.4rem;
   }

   .site-footer__heading {
      margin-bottom: 2rem;
   }

   .site-footer__links ul {
      gap: 1.2rem;
   }

   .site-footer__background {
      margin-top: -2rem;
   }

   .site-footer__copyright {
      padding: 1.8rem;
   }

   .site-footer__copyright p {
      font-size: 1.8rem;
   }

}

@media (max-width:575.98px) {

   .site-footer__wrapper {
      padding-top: 2rem;
   }

   .site-footer__logo {
      margin-bottom: 2.4rem;
   }

   .site-footer__logo svg {
      width: 20rem;
      height: auto;
   }

   .site-footer__description {
      margin-bottom: 2rem;
   }

   .site-footer__contact {
      margin-bottom: 1.8rem;
   }

   .site-footer__menu {
      gap: 2rem;
   }

   .site-footer__heading {
      margin-bottom: 1.8rem;
   }

   .site-footer__links ul {
      gap: 1rem;
   }

   .site-footer__background {
      margin-top: -1rem;
   }

   .site-footer__copyright {
      padding: 1.6rem;
   }

   .site-footer__copyright p {
      font-size: 1.6rem;
   }

}

@media (max-width:424.98px) {

   .site-footer__top {
      gap: 3rem;
   }

   .site-footer__logo svg {
      width: 18rem;
   }

   .site-footer__heading {
      margin-bottom: 1.6rem;
   }

   .site-footer__links ul {
      gap: .8rem;
   }

   .site-footer__copyright p {
      font-size: 1.4rem;
   }

}

@media (max-width:374.98px) {

   .site-footer__logo svg {
      width: 16rem;
   }

   .site-footer__menu {
      gap: 1.6rem;
   }

   .site-footer__copyright {
      padding: 1.4rem;
   }

   .site-footer__copyright p {
      font-size: 1.3rem;
   }

}

@media (max-width:319.98px) {

   .site-footer__wrapper {
      padding-top: 1.6rem;
   }

   .site-footer__logo svg {
      width: 14rem;
   }

   .site-footer__menu {
      gap: 1.2rem;
   }

   .site-footer__links ul {
      gap: .6rem;
   }

   .site-footer__copyright {
      padding: 1.2rem;
   }

   .site-footer__copyright p {
      font-size: 1.2rem;
   }

}

/* =========================================================================
   for Footer css ends here 
========================================================================= */


/* =========================================================================
   for index css start here 
========================================================================= */


/* -------------------------------------------------------------------
   for hero banner css start here
------------------------------------------------------------------- */

.home-page .hero-banner {
   position: relative;
   overflow: hidden;
   border-top-left-radius: clamp(3rem, 2.146rem + 3.049vw, 8rem);
   border-top-right-radius: clamp(3rem, 2.146rem + 3.049vw, 8rem);
}

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

.home-page .hero-banner__wrapper {
   position: relative;
   overflow: hidden;
}

.home-page .hero-banner__media,
.home-page .hero-banner__overlay {
   position: absolute;
   inset: 0;
}

.home-page .hero-banner__media {
   z-index: 0;
}

.home-page .hero-banner__video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.home-page .hero-banner__overlay {
   z-index: 1;
   background: linear-gradient(90deg,
         rgba(0, 0, 0, .42) 0%,
         rgba(0, 0, 0, .18) 35%,
         rgba(0, 0, 0, .08) 60%,
         rgba(0, 0, 0, .20) 100%);
}

.home-page .hero-banner__content {
   position: relative;
   z-index: 2;
   width: 100%;
}

.home-page .hero-banner__title {
   font-family: var(--font-clash-display);
   font-size: clamp(6rem, 2.893rem + 11.098vw, 24.2rem);
   font-weight: 600;
   color: var(--secondary-color);
   margin-bottom: clamp(2rem, 0.378rem + 5.793vw, 11.5rem);
}

.home-page .hero-banner__content-bottom {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 4rem;
}

.home-page .hero-banner__description {
   max-width: 52.6rem;
}

.home-page .hero-banner__description p {
   font-size: clamp(1.5rem, 1.244rem + 0.915vw, 3rem);
   color: var(--grey-extra-light);
   margin-bottom: clamp(1.6rem, 1.327rem + 0.976vw, 3.2rem);
}

.home-page .hero-banner .btn-link__line {
   width: clamp(4.5rem, 3.134rem + 7.805vw, 12.5rem);
}

.home-page .hero-banner .btn-link:hover .btn-link__line {
   width: clamp(6rem, 3.61rem + 13.659vw, 20rem);
}

.home-page .btn-link--white {
   color: var(--secondary-color);
}

.home-page .btn-link--white:hover {
   color: var(--pink);
}

.home-page .hero-banner__cards {
   display: flex;
   align-items: flex-end;
   gap: .8rem;
}

.home-page .hero-banner-card {
   position: relative;
   border-radius: clamp(2rem, 1.659rem + 1.22vw, 4rem);
   overflow: hidden;
   backdrop-filter: blur(24px);
   transition: transform .4s ease;
   background-color: var(--bg-transparent);
   width: 28rem;
   min-height: clamp(22rem, 20.976rem + 3.659vw, 28rem);
   height: stretch;
}

.home-page .hero-banner-card--details {
   padding: clamp(2rem, 1.829rem + 0.61vw, 3rem) clamp(2rem, 1.659rem + 1.22vw, 4rem);
}

.hero-banner-card--product {
   display: flex;
   justify-content: center;
   align-items: center;
}

.home-page .hero-banner-card__price {
   font-size: clamp(3.1rem, 2.571rem + 1.89vw, 6.2rem);
   font-weight: 700;
   margin-bottom: clamp(3.1rem, 2.571rem + 1.89vw, 6.2rem);
   display: inline-block;
}

.home-page .hero-banner-card__title {
   font-size: clamp(1.6rem, 1.463rem + 0.488vw, 2.4rem);
   font-weight: 700;
   margin-bottom: clamp(0.2rem, 0.166rem + 0.122vw, 0.4rem);
}

.home-page .hero-banner-card__text {
   font-size: clamp(1.2rem, 1.132rem + 0.244vw, 1.6rem);
   color: var(--grey-primary);
}

.home-page .hero-banner-card--product {
   position: relative;
}

.home-page .hero-banner-card__action {
   position: absolute;
   top: clamp(1.2rem, 1.132rem + 0.244vw, 1.6rem);
   right: clamp(1.2rem, 1.132rem + 0.244vw, 1.6rem);
   width: clamp(4rem, 3.659rem + 1.22vw, 6rem);
   height: clamp(4rem, 3.659rem + 1.22vw, 6rem);
   border-radius: 100%;
   background-color: var(--primary-color);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease-in-out;
   z-index: 1;
}

.home-page .hero-banner-card__action svg {
   width: clamp(1.8rem, 1.749rem + 0.183vw, 2.1rem);
}

.home-page .hero-banner-card__action:hover {
   background-color: var(--secondary-color);
}

.home-page .hero-banner-card__action:hover svg {
   transform: rotate(45deg);
}

.home-page .hero-banner-card__action:hover svg path {
   fill: var(--primary-color);
}

.home-page .hero-banner-card--video video {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}

.home-page .hero-banner-card--product:hover img,
.home-page .hero-banner-card--video:hover video {
   transform: scale(1.06);
}

.home-page .hero-banner-card--product img,
.home-page .hero-banner-card--video video {
   transition: transform .6s ease;
}

.home-page .hero-banner-card--product img {
   max-width: clamp(22rem, 20.976rem + 3.659vw, 28rem);
   margin-inline: auto;
}


/* Responsive for hero banner */

@media(max-width:1499.98px) {

   .home-page .hero-banner__title {
      text-align: center;
   }

   .home-page .hero-banner__description {
      text-align: center;
   }

   .home-page .hero-banner__content-bottom {
      flex-direction: column;
      align-items: center;
   }

}

@media(max-width:991.98px) {

   .home-page .hero-banner__cards {
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
   }

   .home-page .hero-banner-card {
      width: calc(50% - 1rem);
   }

}

@media(max-width:767.98px) {

   .home-page .hero-banner-card {
      width: 100%;
   }

}

/* -------------------------------------------------------------------
   for hero banner css ends here
------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   for our mission css start here
------------------------------------------------------------------- */

.home-page .our-mission {
   overflow: hidden;
}

.home-page .our-mission__wrapper {
   display: flex;
   flex-direction: column;
}

.home-page .our-mission__heading {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 8rem;
   margin-bottom: 6rem;
}

.home-page .our-mission__heading-left {
   max-width: 98rem;
   flex: 1;
}

.home-page .our-mission__heading-right {
   flex-shrink: 0;
}

.home-page .our-mission__heading-right .section-title__heading {
   text-align: right;
   color: var(--grey-muted);
   margin: 0;
}


.home-page .our-mission__description {
   font-size: 4.2rem;
   margin-bottom: 3.2rem;
}

.home-page .our-mission__body {
   display: flex;
   gap: 1.6rem;
   align-items: stretch;
}

.home-page .our-mission__image {
   position: relative;
   overflow: hidden;
   border-radius: clamp(2rem, 1.659rem + 1.22vw, 4rem);
   aspect-ratio: 892/843;
   max-width: clamp(45.7rem, -0.8rem + 46.875vw, 89.2rem);
}

.home-page .our-mission__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform .5s ease;
}

.home-page .our-mission__image:hover img {
   transform: scale(1.05);
}

.home-page .our-mission__cards {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
   height: 100%;
}

.home-page .our-mission-card {
   position: relative;
   overflow: hidden;
   border-radius: clamp(2rem, 1.659rem + 1.22vw, 4rem);
}

.home-page .our-mission-card img {
   display: block;
   width: 100%;
   height: 100%;
}

.home-page .our-mission-card:hover img {
   transform: scale(1.05);
}

.home-page .our-mission-card img {
   transition: transform .5s ease;
}

.home-page .our-mission-card--light {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--bg-light);
}

.home-page .our-mission-card--light .our-mission-card__content {
   max-width: clamp(26.7rem, 7.459rem + 19.397vw, 44.7rem);
   padding: 7rem 1.7rem 7rem 3.2rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.home-page .our-mission-card__icon {
   width: 7.4rem;
   height: 7.4rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 3.2rem;
}

.home-page .our-mission-card__icon img,
.home-page .our-mission-card__icon svg {
   width: 100%;
   object-fit: contain;
}

.home-page .our-mission-card__title {
   font-size: 6.2rem;
   font-weight: 400;
   margin-bottom: 1.2rem;
}

.home-page .our-mission-card__title span {
   display: block;
   font-weight: 700;
}

.home-page .our-mission-card--light .our-mission-card__image {
   flex: 1;
   overflow: hidden;
}

.home-page .our-mission-card--light .our-mission-card__image img {
   width: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform .5s ease;
}

.home-page .our-mission-card--light:hover .our-mission-card__image img {
   transform: scale(1.02);
}

.home-page .our-mission-card--dark {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: clamp(2rem, -0.993rem + 3.017vw, 4.8rem);
   padding: clamp(3.5rem, 2.431rem + 1.078vw, 4.5rem) clamp(2rem, -0.672rem + 2.694vw, 4.5rem);
   background: var(--primary-color);
}

.home-page .our-mission-card--dark .our-mission-card__image {
   max-width: clamp(15rem, -1.997rem + 17.134vw, 30.9rem);
   flex-shrink: 0;
   overflow: hidden;
}

.home-page .our-mission-card--dark .our-mission-card__image img {
   width: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform .5s ease;
}

.home-page .our-mission-card--dark:hover .our-mission-card__image img {
   transform: scale(1.02);
}

.home-page .our-mission-card--dark .our-mission-card__content {
   flex: 1;
}

.home-page .our-mission-card--dark .our-mission-card__title {
   color: var(--secondary-color);
}

.home-page .our-mission-card--dark .our-mission-card__description {
   color: var(--secondary-color);
}

.home-page .our-mission-card {
   transition: transform .35s ease, box-shadow .35s ease;
}

.home-page .our-mission-card:hover {
   transform: translateY(-.4rem);
   box-shadow: 0 2rem 6rem rgba(0, 0, 0, .12);
}

.home-page .our-mission__image,
.home-page .our-mission-card {
   will-change: transform;
}

.home-page .our-mission__image img,
.home-page .our-mission-card img {
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

.home-page .our-mission-card__title,
.home-page .our-mission-card__description {
   word-break: break-word;
}

/* Responsive for our mission */

/* Responsive for our mission */

@media(max-width:1499.98px) {

   .home-page .our-mission__heading {
      gap: 6rem;
      margin-bottom: 5rem;
   }

   .home-page .our-mission__heading-left {
      max-width: 82rem;
   }

   .home-page .our-mission__description {
      font-size: 3.8rem;
   }

   .home-page .our-mission-card__title {
      font-size: 5rem;
   }

   .home-page .our-mission-card__icon {
      width: 6.4rem;
      height: 6.4rem;
      margin-bottom: 2.8rem;
   }

}

@media(max-width:1199.98px) {

   .home-page .our-mission__heading {
      gap: 4rem;
      margin-bottom: 4rem;
   }

   .home-page .our-mission__heading-left {
      max-width: 68rem;
   }

   .home-page .our-mission__description {
      font-size: 3.2rem;
      margin-bottom: 2.8rem;
   }

   .home-page .our-mission__body {
      gap: 1.2rem;
   }

   .home-page .our-mission-card--light .our-mission-card__content {
      padding: 3.5rem 2rem;
   }

   .home-page .our-mission-card__icon {
      width: 5.6rem;
      height: 5.6rem;
      margin-bottom: 2.4rem;
   }

   .home-page .our-mission-card__title {
      font-size: 4rem;
   }

   /* .home-page .our-mission-card--dark .our-mission-card__image {
      max-width: 22rem;
   } */

}

@media(max-width:991.98px) {

   .home-page .our-mission__heading {
      flex-direction: column-reverse;
      gap: 2rem;
      margin-bottom: 3rem;
   }

   .home-page .our-mission__heading-left,
   .home-page .our-mission__heading-right {
      width: 100%;
      max-width: 100%;
   }

   .home-page .our-mission__heading-right .section-title__heading {
      text-align: left;
   }

   .home-page .our-mission__description {
      font-size: 2.8rem;
   }

   .home-page .our-mission-card--light .our-mission-card__content {
      max-width: clamp(30rem, 16.12rem + 24.096vw, 40rem);
   }

   .home-page .our-mission__body {
      flex-direction: column;
   }

   .home-page .our-mission__image {
      max-width: 100%;
   }

   .home-page .our-mission-card__title {
      font-size: 4.4rem;
   }

}

@media(max-width:767.98px) {

   .home-page .our-mission__description {
      font-size: 2.2rem;
   }



   .home-page .our-mission-card--dark .our-mission-card__content {
      width: 100%;
   }

   .home-page .our-mission-card__title {
      font-size: 3.6rem;
   }

}

@media(max-width:575.98px) {

   .home-page .our-mission__description {
      font-size: 2rem;
   }

   .home-page .our-mission-card--light {
      flex-direction: column;
   }

   .home-page .our-mission-card--light .our-mission-card__content {
      max-width: 100%;
      width: 100%;
      padding: 3rem;
      order: 2;
   }

   .home-page .our-mission-card--light .our-mission-card__image {
      width: 100%;
      order: 1;
   }

   .home-page .our-mission-card--dark .our-mission-card__image {
      max-width: 100%;
      width: 100%;
   }

   .home-page .our-mission-card--dark {
      flex-direction: column;
      align-items: flex-start;
   }

   .home-page .our-mission-card__icon {
      width: 5rem;
      height: 5rem;
      margin-bottom: 2rem;
   }

   .home-page .our-mission-card__title {
      font-size: 3rem;
   }

}

@media(max-width:424.98px) {

   .home-page .our-mission__description {
      font-size: 1.8rem;
   }

   .home-page .our-mission-card--light .our-mission-card__content {
      padding: 2rem;
   }

   .home-page .our-mission-card__title {
      font-size: 2.6rem;
      margin-bottom: 1rem;
   }

   .home-page .our-mission-card__icon {
      width: 4.5rem;
      height: 4.5rem;
   }

}

@media(max-width:374.98px) {

   .home-page .our-mission__description {
      font-size: 1.7rem;
   }

   .home-page .our-mission-card__title {
      font-size: 2.2rem;
   }

   .home-page .our-mission-card__icon {
      width: 4rem;
      height: 4rem;
      margin-bottom: 1.6rem;
   }

}

@media(max-width:319.98px) {

   .home-page .our-mission__description {
      font-size: 1.5rem;
   }

   .home-page .our-mission-card__title {
      font-size: 2rem;
   }

   .home-page .our-mission-card--light .our-mission-card__content {
      padding: 1.6rem;
   }

}

/* -------------------------------------------------------------------
   for our mission css ends here
------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   for beauty category starts here
------------------------------------------------------------------- */

.home-page .beauty-category {
   overflow: hidden;
}

.home-page .beauty-category__wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.6rem;
}

.home-page .beauty-category__card {
   position: relative;
   overflow: hidden;
}

.home-page .beauty-category__link {
   position: relative;
   display: block;
   overflow: hidden;
}

.home-page .beauty-category__image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 592/953;
}

.home-page .beauty-category__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform .8s cubic-bezier(.22, .61, .36, 1);
   will-change: transform;
}

.home-page .beauty-category__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg,
         rgba(0, 0, 0, 0) 0%,
         rgba(0, 0, 0, .10) 40%,
         rgba(0, 0, 0, .55) 100%);
   opacity: .75;
   transition: opacity .45s ease,
      background .45s ease;
   z-index: 1;
}

.home-page .beauty-category__content {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 5.2rem;
   z-index: 2;
   text-align: center;
   color: var(--secondary-color);
   transition: transform .45s ease;
}

.home-page .beauty-category__title {
   font-family: var(--font-clash-display);
   font-size: 6rem;
   font-weight: 600;
   text-transform: uppercase;
}

.home-page .beauty-category__text {
   font-family: var(--font-clash-display);
   font-size: 4.8rem;
   font-weight: 500;
}

.home-page .beauty-category__card:hover .beauty-category__image img {
   transform: scale(1.12);
}

.home-page .beauty-category__card:hover .beauty-category__overlay {
   opacity: 1;
   background: linear-gradient(180deg,
         rgba(0, 0, 0, .10) 0%,
         rgba(0, 0, 0, .28) 45%,
         rgba(0, 0, 0, .72) 100%);
}

.home-page .beauty-category__card:hover .beauty-category__content {
   transform: translateY(-2rem);
}

.home-page .beauty-category__card,
.home-page .beauty-category__image,
.home-page .beauty-category__image img {
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

/* Animation */

.home-page .beauty-category__card {
   will-change: transform;
}

.home-page .beauty-category__image,
.home-page .beauty-category__overlay,
.home-page .beauty-category__content {
   pointer-events: none;
}

.home-page .beauty-category__title,
.home-page .beauty-category__text {
   transition: transform .45s ease,
      opacity .45s ease;
}

.home-page .beauty-category__title {
   transform: translateY(0);
}

.home-page .beauty-category__text {
   transform: translateY(0);
   opacity: .95;
}

.home-page .beauty-category__card:hover .beauty-category__title {
   transform: translateY(-.8rem);
}

.home-page .beauty-category__card:hover .beauty-category__text {
   transform: translateY(-1.4rem);
   opacity: 1;
}

.home-page .beauty-category__card:hover {
   z-index: 2;
}

.home-page .beauty-category__card:focus-within .beauty-category__image img,
.home-page .beauty-category__card:focus-within .beauty-category__overlay,
.home-page .beauty-category__card:focus-within .beauty-category__content,
.home-page .beauty-category__card:focus-within .beauty-category__title,
.home-page .beauty-category__card:focus-within .beauty-category__text {
   transition-duration: .45s;
}

.home-page .beauty-category__link:focus-visible {
   outline: .2rem solid var(--blue);
   outline-offset: .4rem;
}

/* Responsive */

@media(max-width:1499.98px) {

   .home-page .beauty-category__title {
      font-size: 4.6rem;
   }

   .home-page .beauty-category__text {
      font-size: 2.5rem;
   }

}

@media(max-width:1199.98px) {

   .home-page .beauty-category__title {
      font-size: 3.8rem;
   }

   .home-page .beauty-category__text {
      font-size: 2.2rem;
   }

   .home-page .beauty-category__content {
      bottom: 4rem;
   }

}

@media(max-width:991.98px) {

   .home-page .beauty-category__wrapper {
      grid-template-columns: repeat(2, 1fr);
   }

   .home-page .beauty-category__card:last-child {
      grid-column: 1 / -1;
   }

}

@media(max-width:767.98px) {

   .home-page .beauty-category__wrapper {
      grid-template-columns: 1fr;
      gap: 1.6rem;
   }

   .home-page .beauty-category__card:last-child {
      grid-column: auto;
   }

   .home-page .beauty-category__image {
      aspect-ratio: 16/12;
   }

   .home-page .beauty-category__content {
      bottom: 3rem;
   }

   .home-page .beauty-category__title {
      font-size: 3.4rem;
   }

   .home-page .beauty-category__text {
      font-size: 2rem;
   }

}

@media(max-width:575.98px) {

   .home-page .beauty-category__title {
      font-size: 3rem;
   }

   .home-page .beauty-category__text {
      font-size: 1.8rem;
   }

}

@media(max-width:424.98px) {

   .home-page .beauty-category__title {
      font-size: 2.6rem;
   }

   .home-page .beauty-category__text {
      font-size: 1.7rem;
   }

   .home-page .beauty-category__content {
      bottom: 2.4rem;
   }

}

@media(max-width:374.98px) {

   .home-page .beauty-category__title {
      font-size: 2.3rem;
   }

   .home-page .beauty-category__text {
      font-size: 1.5rem;
   }

}

@media(max-width:319.98px) {

   .home-page .beauty-category__title {
      font-size: 2rem;
   }

   .home-page .beauty-category__text {
      font-size: 1.4rem;
   }

}

/* -------------------------------------------------------------------
   for beauty category ends here
------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   for featured products starts here
------------------------------------------------------------------- */

.home-page .featured-products {
   overflow: hidden;
}

.home-page .featured-products__tab {
   font-family: var(--font-clash-display);
   font-size: clamp(3rem, 2.317rem + 2.439vw, 7rem);
   font-weight: 500;
   color: var(--grey-secondary);
}

.home-page .featured-products__tabs-nav {
   column-gap: clamp(2.5rem, 1.476rem + 3.659vw, 8.5rem);
   margin-bottom: clamp(3rem, 2.488rem + 1.829vw, 6rem);
   overflow: hidden;
}

.home-page .featured-products__tab.tabs__button--active {
   color: var(--pink);
}

.home-page .featured-products__heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 2rem;
   margin-bottom: 3.2rem;
}

.home-page .featured-products__title {
   font-family: var(--font-clash-display);
   font-size: clamp(2rem, 1.693rem + 1.756vw, 3.8rem);
   font-weight: 500;
   color: var(--grey-secondary);
   text-transform: uppercase;
}

/* responsive css */

@media (max-width:1499.98px) {

   .home-page .featured-products__heading {
      margin-bottom: 3rem;
   }

}

@media (max-width:1199.98px) {

   .home-page .featured-products__heading {
      margin-bottom: 2.8rem;
   }

}

@media (max-width:991.98px) {

   .home-page .featured-products__heading {
      margin-bottom: 2.4rem;
   }

}

@media (max-width:767.98px) {

   .home-page .featured-products__heading {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.6rem;
      margin-bottom: 2rem;
   }

}

@media (max-width:575.98px) {

   .home-page .featured-products__tabs-nav {
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
      -ms-overflow-style: none;
   }

   .home-page .featured-products__tabs-nav::-webkit-scrollbar {
      display: none;
   }

   .home-page .featured-products__tab {
      flex-shrink: 0;
      white-space: nowrap;
   }

   .home-page .featured-products__heading {
      gap: 1.2rem;
      margin-bottom: 1.6rem;
   }

}

@media (max-width:424.98px) {

   .home-page .featured-products__heading {
      gap: 1rem;
      margin-bottom: 1.2rem;
   }

}

@media (max-width:374.98px) {

   .home-page .featured-products__heading {
      margin-bottom: 1rem;
   }

}

@media (max-width:319.98px) {

   .home-page .featured-products__heading {
      margin-bottom: .8rem;
   }

}

/* -------------------------------------------------------------------
   for featured products ends here
------------------------------------------------------------------- */


/* -------------------------------------------------------------------
   for face serums banner starts here
------------------------------------------------------------------- */

.home-page .face-serums-banner {
   overflow: hidden;
}

.home-page .face-serums-banner__wrapper {
   position: relative;
   overflow: hidden;
}

.home-page .face-serums-banner__image-box {
   position: relative;
   aspect-ratio: 1920 / 1080;
   min-height: clamp(45rem, 40.732rem + 24.39vw, 70rem);
}

.home-page .face-serums-banner__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease;
}

.home-page .face-serums-banner__wrapper:hover .face-serums-banner__image {
   transform: scale(1.05);
}

.home-page .face-serums-banner__content {
   position: absolute;
   top: 50%;
   left: clamp(1.5rem, 0.732rem + 2.744vw, 6rem);
   transform: translateY(-50%);
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   max-width: 62.2rem;
}

.home-page .face-serums-banner__title {
   display: flex;
   flex-direction: column;
   margin-bottom: clamp(1.5rem, 0.732rem + 2.744vw, 6rem);
   font-family: var(--font-clash-display);
   font-size: clamp(6rem, 4.498rem + 5.366vw, 14.8rem);
   font-weight: 500;
   text-transform: uppercase;
}

.home-page .face-serums-banner__title-primary {
   color: var(--secondary-color);
}

.home-page .face-serums-banner__title-secondary {
   color: var(--pink);
}

.home-page .face-serums-banner .btn-link {
   color: var(--secondary-color);
}

.home-page .face-serums-banner .btn-link:hover {
   color: var(--pink);
}


/* -------------------------------------------------------------------
   for face serums banner ends here
------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   for category collection starts here
------------------------------------------------------------------- */

.home-page .category-collection {
   overflow: hidden;
}

.home-page .category-collection__wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10rem;
}

.home-page .category-collection__card {
   display: block;
}

.home-page .category-card {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
   background: var(--bg-light);
   border-radius: 6rem;
   transition: all .5s ease;
}

.home-page .category-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--blue);
   opacity: 0;
   transition: opacity .5s ease;
   z-index: 0;
   border-radius: 6rem;
}

.home-page .category-card>* {
   position: relative;
   z-index: 1;
}

.home-page .category-card__image-box {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   overflow: hidden;
   margin: -4.5rem;
   margin-bottom: 3rem;
}

.home-page .category-card__image {
   width: 100%;
   transition: transform .6s ease;
   will-change: transform;
}

.home-page .category-card__content {
   margin-bottom: 5rem;
}

.home-page .category-card__title {
   font-family: var(--font-clash-display);
   font-size: clamp(1.9rem, 1.576rem + 1.159vw, 3.8rem);
   font-weight: 500;
   color: var(--primary-color);
   text-align: center;
   text-transform: uppercase;
   transition: color .4s ease;
}

.home-page .category-card:hover {
   transform: translateY(-1rem);
}

.home-page .category-card:hover::before {
   opacity: 1;
}

.home-page .category-card:hover .category-card__image {
   transform: scale(1.01) translateY(-.5rem);
}

.home-page .category-card:hover .category-card__title {
   color: var(--secondary-color);
}

/* for category collection responsive starts here  */

@media (max-width:1499.98px) {

   .home-page .category-collection__wrapper {
      gap: 8rem;
   }

   .home-page .category-card {
      border-radius: 5rem;
   }

   .home-page .category-card::before {
      border-radius: 5rem;
   }

   .home-page .category-card__image-box {
      margin: -3.5rem;
      margin-bottom: 2.8rem;
   }

   .home-page .category-card__content {
      margin-bottom: 4rem;
   }

}

@media (max-width:1199.98px) {

   .home-page .category-collection__wrapper {
      gap: 4rem;
   }

   .home-page .category-card {
      border-radius: 4rem;
   }

   .home-page .category-card::before {
      border-radius: 4rem;
   }

   .home-page .category-card__image-box {
      margin: -2.8rem;
      margin-bottom: 2.4rem;
   }

   .home-page .category-card__content {
      margin-bottom: 3.2rem;
   }

}

@media (max-width:991.98px) {

   .home-page .category-collection__wrapper {
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem;
   }

   .home-page .category-card {
      border-radius: 3.2rem;
   }

   .home-page .category-card::before {
      border-radius: 3.2rem;
   }

   .home-page .category-card__image-box {
      margin: -2.4rem;
      margin-bottom: 2rem;
   }

   .home-page .category-card__content {
      margin-bottom: 2.8rem;
   }

}

@media (max-width:767.98px) {

   .home-page .category-collection__wrapper {
      gap: 2.4rem;
   }

   .home-page .category-card {
      border-radius: 2.8rem;
   }

   .home-page .category-card::before {
      border-radius: 2.8rem;
   }

   .home-page .category-card__image-box {
      margin: -2rem;
      margin-bottom: 1.6rem;
   }

   .home-page .category-card__content {
      margin-bottom: 2.4rem;
   }

}

@media (max-width:575.98px) {

   .home-page .category-collection__wrapper {
      grid-template-columns: 1fr;
      gap: 2rem;
   }

   .home-page .category-card {
      border-radius: 2.4rem;
   }

   .home-page .category-card::before {
      border-radius: 2.4rem;
   }

   .home-page .category-card__image-box {
      margin: -1.6rem;
      margin-bottom: 1.6rem;
   }

   .home-page .category-card__content {
      margin-bottom: 2rem;
   }

}

@media (max-width:424.98px) {

   .home-page .category-card {
      border-radius: 2rem;
   }

   .home-page .category-card::before {
      border-radius: 2rem;
   }

   .home-page .category-card__image-box {
      margin: -1.2rem;
      margin-bottom: 1.2rem;
   }

   .home-page .category-card__content {
      margin-bottom: 1.6rem;
   }

}

@media (max-width:374.98px) {

   .home-page .category-collection__wrapper {
      gap: 1.6rem;
   }

   .home-page .category-card__image-box {
      margin: -1rem;
      margin-bottom: 1rem;
   }

   .home-page .category-card__content {
      margin-bottom: 1.4rem;
   }

}

@media (max-width:319.98px) {

   .home-page .category-card {
      border-radius: 1.6rem;
   }

   .home-page .category-card::before {
      border-radius: 1.6rem;
   }

   .home-page .category-card__image-box {
      margin: -.8rem;
      margin-bottom: .8rem;
   }

   .home-page .category-card__content {
      margin-bottom: 1.2rem;
   }

}

/* -------------------------------------------------------------------
   for category collection ends here
------------------------------------------------------------------- */


/* -------------------------------------------------------------------
   for hair care ritual starts here
------------------------------------------------------------------- */

.home-page .hair-care-ritual {
   overflow: hidden;
}

.home-page .hair-care-ritual__wrapper {
   background: var(--bg-light);
   border-radius: 6rem;
   padding-block: 14rem 7.5rem;
}

.home-page .hair-care-ritual__title-wrapper {
   max-width: 122rem;
   margin: 0 auto 2rem;
   text-align: center;
}

.home-page .hair-care-ritual__title-wrapper .section-title {
   margin-bottom: 2rem;
}

.home-page .hair-care-ritual__title-wrapper .section-title__description {
   font-size: 4.2rem;
}

.home-page .hair-care-ritual__title-wrapper .btn-link {
   margin-bottom: 3.3rem;
}

.home-page .hair-care-ritual__banner {
   position: relative;
   max-width: 111rem;
   margin: 0 auto;
}

.home-page .hair-care-ritual__image-box {
   overflow: hidden;
}

.home-page .hair-care-ritual__image {
   width: 100%;
   transition: transform .6s ease;
}

.home-page .hair-care-ritual__wrapper:hover .hair-care-ritual__image {
   transform: scale(1.03);
}

.home-page .hair-care-ritual__floating-cards {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.home-page .hair-product-card {
   position: absolute;
   pointer-events: auto;
   z-index: 2;
}

.home-page .hair-product-card--top-left {
   top: 10.8rem;
   left: 15.9rem;
}

.home-page .hair-product-card--bottom-left {
   left: 0rem;
   bottom: 31.2rem;
}

.home-page .hair-product-card--right {
   top: 28rem;
   right: clamp(0rem, -6rem + 7.813vw, -9rem);
}

.home-page .hair-product-card {
   display: block;
}

.home-page .hair-product-card__wrapper {
   display: flex;
   align-items: center;
   gap: 1.6rem;
   width: 39rem;
   padding: .9rem;
   background: var(--secondary-color);
   border-radius: .6rem;
   box-shadow: 0 2rem 6rem rgba(0, 0, 0, .08);
   overflow: hidden;
   transition:
      width .45s ease,
      padding .45s ease,
      border-radius .45s ease,
      box-shadow .45s ease,
      transform .45s ease;
}

.home-page .hair-product-card__media {
   flex-shrink: 0;
   width: 12rem;
   transition: width .45s ease, margin-bottom .45s ease;
}

.home-page .hair-product-card__image-box {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: 1.2rem;
   overflow: hidden;
   transition: all .45s ease;
   border-radius: .6rem;
}

.home-page .hair-product-card__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .45s ease;
}

.home-page .hair-product-card__details {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex: 1;
   gap: 1.6rem;
   min-width: 0;
   transition: all .45s ease;
}

.home-page .hair-product-card__content {
   flex: 1;
   min-width: 0;
}

.home-page .hair-product-card__price {
   margin-bottom: 1rem;
   font-size: 3.8rem;
   font-weight: 700;
   transition: all .45s ease;
}

.home-page .hair-product-card__title {
   margin-bottom: .5rem;
   font-size: 2rem;
   font-weight: 700;
   transition: all .45s ease;
}

.home-page .hair-product-card__rating {
   display: flex;
   align-items: center;
   font-size: 1.2rem;
   color: #ffb800;
   transition: all .45s ease;
}

.home-page .hair-product-card__rating span {
   color: #d5d5d5;
}

.home-page .hair-product-card__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 5rem;
   height: 5rem;
   background: var(--primary-color);
   color: var(--secondary-color);
   border-radius: 50%;
   transition: all .45s ease;
}

.home-page .hair-product-card__icon svg {
   transition: transform .45s ease;
}

/* Hover  */

.home-page .hair-product-card:hover {
   z-index: 10;
}

.home-page .hair-product-card:hover .hair-product-card__wrapper {
   display: block;
   box-shadow: 0 3rem 8rem rgba(0, 0, 0, .15);
}

.home-page .hair-product-card:hover .hair-product-card__media {
   width: 100%;
   margin-bottom: 2rem;
}

.home-page .hair-product-card:hover .hair-product-card__image-box {
   width: 100%;
   aspect-ratio: 3/2;
}

.home-page .hair-product-card:hover .hair-product-card__image {
   transform: scale(1.05);
}

.home-page .hair-product-card:hover .hair-product-card__icon svg {
   transform: rotate(45deg);
}

/*  for hair care ritual responsive starts here */

@media (max-width:1499.98px) {

   .home-page .hair-care-ritual__wrapper {
      padding-block: 10rem 6rem;
      border-radius: 5rem;
   }

   .home-page .hair-care-ritual__title-wrapper {
      max-width: 100rem;
      margin-bottom: 3rem;
   }

   .home-page .hair-care-ritual__title-wrapper .section-title__description {
      font-size: 3.6rem;
   }

   .home-page .hair-care-ritual__title-wrapper .btn-link {
      margin-bottom: 3rem;
   }

   .home-page .hair-care-ritual__banner {
      max-width: 95rem;
   }

   .home-page .hair-product-card--top-left {
      top: 9rem;
      left: 12rem;
   }

   .home-page .hair-product-card--bottom-left {
      bottom: 26rem;
   }

   .home-page .hair-product-card--right {
      top: 24rem;
   }

   .home-page .hair-product-card__wrapper {
      width: 34rem;
   }

   .home-page .hair-product-card__media {
      width: 10rem;
   }

   .home-page .hair-product-card__price {
      font-size: 3.2rem;
   }

   .home-page .hair-product-card__title {
      font-size: 1.8rem;
   }

   .home-page .hair-product-card__icon {
      width: 4.6rem;
      height: 4.6rem;
   }

}

@media (max-width:1199.98px) {

   .home-page .hair-care-ritual__wrapper {
      padding: 8rem 4rem 5rem;
      border-radius: 4rem;
   }

   .home-page .hair-care-ritual__title-wrapper {
      max-width: 85rem;
   }

   .home-page .hair-care-ritual__title-wrapper .section-title__description {
      font-size: 3rem;
   }

   .home-page .hair-care-ritual__banner {
      max-width: 82rem;
   }

   .home-page .hair-product-card--top-left {
      top: 8rem;
      left: 7rem;
   }

   .home-page .hair-product-card--bottom-left {
      bottom: 21rem;
   }

   .home-page .hair-product-card--right {
      top: 20rem;
   }

   .home-page .hair-product-card__wrapper {
      width: 30rem;
      gap: 1.2rem;
   }

   .home-page .hair-product-card__media {
      width: 8.5rem;
   }

   .home-page .hair-product-card__price {
      font-size: 2.8rem;
   }

   .home-page .hair-product-card__title {
      font-size: 1.6rem;
   }

   .home-page .hair-product-card__icon {
      width: 4.2rem;
      height: 4.2rem;
   }

}

@media (max-width:991.98px) {

   .home-page .hair-care-ritual__wrapper {
      padding: 6rem 3rem 4rem;
      border-radius: 3.2rem;
   }

   .home-page .hair-care-ritual__title-wrapper {
      max-width: 100%;
      margin-bottom: 4rem;
   }

   .home-page .hair-care-ritual__title-wrapper .section-title__description {
      font-size: 2.4rem;
   }

   .home-page .hair-care-ritual__banner {
      max-width: 68rem;
   }

   .home-page .hair-product-card--top-left {
      top: 5rem;
      left: 1rem;
   }

   .home-page .hair-product-card--bottom-left {
      bottom: 15rem;
   }

   .home-page .hair-product-card--right {
      top: 15rem;
   }

   .home-page .hair-product-card__wrapper {
      width: 24rem;
      padding: .8rem;
      gap: 1rem;
   }

   .home-page .hair-product-card__media {
      width: 6.8rem;
   }

   .home-page .hair-product-card__price {
      font-size: 2.2rem;
      margin-bottom: .6rem;
   }

   .home-page .hair-product-card__title {
      font-size: 1.4rem;
   }

   .home-page .hair-product-card__icon {
      width: 3.8rem;
      height: 3.8rem;
   }

}

@media (max-width:767.98px) {

   .home-page .hair-care-ritual__wrapper {
      padding: 5rem 2rem 3rem;
      border-radius: 2.8rem;
   }

   .home-page .hair-care-ritual__title-wrapper {
      margin-bottom: 3rem;
   }

   .home-page .hair-care-ritual__title-wrapper .section-title__description {
      font-size: 2rem;
   }

   .home-page .hair-care-ritual__banner {
      max-width: 100%;
   }

   .home-page .hair-care-ritual__floating-cards {
      position: static;
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      margin-top: 3rem;
   }

   .home-page .hair-product-card {
      position: static;
   }

   .home-page .hair-product-card__wrapper {
      width: 100%;
   }

}

@media (max-width:575.98px) {

   .home-page .hair-care-ritual__wrapper {
      padding: 4rem 1.6rem 2.4rem;
      border-radius: 2.4rem;
   }

   .home-page .hair-care-ritual__title-wrapper {
      margin-bottom: 2.4rem;
   }

   .home-page .hair-care-ritual__title-wrapper .section-title {
      margin-bottom: 1.6rem;
   }

   .home-page .hair-care-ritual__title-wrapper .section-title__description {
      font-size: 1.8rem;
   }

   .home-page .hair-care-ritual__title-wrapper .btn-link {
      margin-bottom: 2rem;
   }

   .home-page .hair-product-card__wrapper {
      width: 100%;
      gap: 1rem;
   }

   .home-page .hair-product-card__media {
      width: 8rem;
   }

   .home-page .hair-product-card__price {
      font-size: 2rem;
   }

   .home-page .hair-product-card__title {
      font-size: 1.5rem;
   }

}

@media (max-width:424.98px) {

   .home-page .hair-care-ritual__wrapper {
      border-radius: 2rem;
      padding: 3rem 1.2rem 2rem;
   }

   .home-page .hair-care-ritual__title-wrapper .section-title__description {
      font-size: 1.6rem;
   }

   .home-page .hair-product-card__wrapper {
      padding: .8rem;
   }

   .home-page .hair-product-card__media {
      width: 7rem;
   }

   .home-page .hair-product-card__price {
      font-size: 1.8rem;
   }

   .home-page .hair-product-card__title {
      font-size: 1.4rem;
   }

   .home-page .hair-product-card__icon {
      width: 3.6rem;
      height: 3.6rem;
   }

}

@media (max-width:374.98px) {

   .home-page .hair-product-card__wrapper {
      gap: .8rem;
   }

   .home-page .hair-product-card__media {
      width: 6rem;
   }

   .home-page .hair-product-card__price {
      font-size: 1.6rem;
   }

   .home-page .hair-product-card__title {
      font-size: 1.3rem;
   }

}

@media (max-width:319.98px) {

   .home-page .hair-care-ritual__wrapper {
      padding: 2.4rem 1rem 1.6rem;
   }

   .home-page .hair-product-card__wrapper {
      padding: .6rem;
   }

   .home-page .hair-product-card__media {
      width: 5rem;
   }

   .home-page .hair-product-card__price {
      font-size: 1.4rem;
   }

   .home-page .hair-product-card__title {
      font-size: 1.2rem;
   }

   .home-page .hair-product-card__icon {
      width: 3.2rem;
      height: 3.2rem;
   }

}

/* -------------------------------------------------------------------
   for hair care ritual ends here
------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   for unique skincare starts here
------------------------------------------------------------------- */

.home-page .unique-skincare {
   overflow: hidden;
}

.home-page .unique-skincare__wrapper {
   position: relative;
}

.home-page .unique-skincare__content {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   position: relative;
}

.home-page .unique-skincare__left {
   max-width: 84rem;
}

.home-page .unique-skincare__center {
   margin-top: -4rem;
}

.home-page .unique-skincare__background-title {
   font-family: var(--font-clash-display);
   font-size: clamp(7rem, -0.41rem + 26.463vw, 50.4rem);
   font-weight: 500;
   position: relative;
   z-index: 0;
}

.home-page .unique-skincare__right {
   align-self: flex-end;
   max-width: 60rem;
   margin-block: 4.5rem 16rem;
}

.home-page .unique-skincare__description {
   margin-bottom: 6rem;
}

/* Images */

.home-page .unique-skincare__images {
   position: absolute;
   inset: 0;
   z-index: 2;
   pointer-events: none;
}

.home-page .unique-skincare__image-box {
   position: absolute;
   overflow: hidden;
   border-radius: 4rem;
   box-shadow: 0 2rem 8rem rgba(0, 0, 0, .12);
   pointer-events: auto;
}

.home-page .unique-skincare__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .6s ease;
}

.home-page .unique-skincare__image-box:hover .unique-skincare__image {
   transform: scale(1.05);
}

/* Right Image */

.home-page .unique-skincare__image-box--top {
   top: 5.7rem;
   right: 0rem;
   width: clamp(12rem, 4.59rem + 26.463vw, 55.4rem);
   animation: uniqueFloatingTop 9s ease-in-out infinite;
}

/* Left Image */

.home-page .unique-skincare__image-box--bottom {
   left: 0;
   bottom: 0;
   width: clamp(17rem, 4.246rem + 45.549vw, 91.7rem);
   animation: uniqueFloatingBottom 11s ease-in-out infinite;
}

/* Animation Starts Here  */

@keyframes uniqueFloatingTop {

   0% {
      transform: translate3d(0, 0, 0);
   }

   25% {
      transform: translate3d(-1.2rem, 1.2rem, 0);
   }

   50% {
      transform: translate3d(-2.5rem, 2.5rem, 0);
   }

   75% {
      transform: translate3d(-1.2rem, 1.2rem, 0);
   }

   100% {
      transform: translate3d(0, 0, 0);
   }

}

@keyframes uniqueFloatingBottom {

   0% {
      transform: translate3d(0, 0, 0);
   }

   25% {
      transform: translate3d(1rem, -1rem, 0);
   }

   50% {
      transform: translate3d(2rem, -2rem, 0);
   }

   75% {
      transform: translate3d(1rem, -1rem, 0);
   }

   100% {
      transform: translate3d(0, 0, 0);
   }

}

/* unique skincare responsive */

@media (max-width:1499.98px) {

   .home-page .unique-skincare__left {
      max-width: 72rem;
   }

   .home-page .unique-skincare__center {
      margin-top: -3rem;
   }

   .home-page .unique-skincare__right {
      max-width: 52rem;
      margin-block: 4rem 13rem;
   }

   .home-page .unique-skincare__description {
      margin-bottom: 5rem;
   }

   .home-page .unique-skincare__image-box--top {
      top: 4rem;
   }

}

@media (max-width:1199.98px) {

   .home-page .unique-skincare__left {
      max-width: 60rem;
   }

   .home-page .unique-skincare__center {
      margin-top: -2rem;
   }

   .home-page .unique-skincare__right {
      max-width: 45rem;
      margin-block: 3.2rem 10rem;
   }

   .home-page .unique-skincare__description {
      margin-bottom: 4rem;
   }

   .home-page .unique-skincare__image-box {
      border-radius: 3rem;
   }

   .home-page .unique-skincare__image-box--top {
      top: 3rem;
   }

}

@media (max-width:991.98px) {

   .home-page .unique-skincare__left {
      max-width: 48rem;
   }

   .home-page .unique-skincare__center {
      margin-top: -1rem;
   }

   .home-page .unique-skincare__right {
      max-width: 38rem;
      margin-block: 2.8rem 8rem;
   }

   .home-page .unique-skincare__description {
      margin-bottom: 3.2rem;
   }

   .home-page .unique-skincare__image-box {
      border-radius: 2.4rem;
   }

   .home-page .unique-skincare__image-box--top {
      top: 2rem;
   }

}

@media (max-width:767.98px) {

   .home-page .unique-skincare__content {
      gap: 3rem;
   }

   .home-page .unique-skincare__left,
   .home-page .unique-skincare__right {
      max-width: 100%;
   }

   .home-page .unique-skincare__right {
      align-self: flex-start;
      margin-block: 2rem 32rem;
   }

   .home-page .unique-skincare__center {
      margin-top: 0;
      text-align: center;
   }

   .home-page .unique-skincare__background-title {
      line-height: .9;
   }

   .home-page .unique-skincare__description {
      margin-bottom: 2.8rem;
   }

   .home-page .unique-skincare__image-box {
      border-radius: 2rem;
   }

   .home-page .unique-skincare__image-box--top {
      top: auto;
      right: 0;
      bottom: 18rem;
   }

}

@media (max-width:575.98px) {

   .home-page .unique-skincare__content {
      gap: 2.4rem;
   }

   .home-page .unique-skincare__right {
      margin-block: 1.6rem 24rem;
   }

   .home-page .unique-skincare__description {
      margin-bottom: 2.4rem;
   }

   .home-page .unique-skincare__image-box {
      border-radius: 1.6rem;
   }

   .home-page .unique-skincare__image-box--top {
      bottom: 14rem;
   }

}

@media (max-width:424.98px) {

   .home-page .unique-skincare__right {
      margin-bottom: 20rem;
   }

   .home-page .unique-skincare__description {
      margin-bottom: 2rem;
   }

   .home-page .unique-skincare__image-box--top {
      bottom: 12rem;
   }

}

@media (max-width:374.98px) {

   .home-page .unique-skincare__right {
      margin-bottom: 18rem;
   }

   .home-page .unique-skincare__image-box--top {
      bottom: 10rem;
   }

}

@media (max-width:319.98px) {

   .home-page .unique-skincare__right {
      margin-bottom: 15rem;
   }

   .home-page .unique-skincare__description {
      margin-bottom: 1.6rem;
   }

   .home-page .unique-skincare__image-box--top {
      bottom: 8rem;
   }

}

/* -------------------------------------------------------------------
   for unique skincare ends here
------------------------------------------------------------------- */


/* -------------------------------------------------------------------
   for Blog Main starts here
------------------------------------------------------------------- */

.home-page .blog-main {
   overflow: hidden;
}

.home-page .blog-main__section-title-wrapper {
   max-width: 84rem;
   margin-inline: auto;
   margin-bottom: clamp(2rem, 1.317rem + 2.439vw, 6rem);
   text-align: center;
}

.home-page .blog-main__section-title-wrapper .section-title {
   margin-bottom: clamp(2rem, 1.317rem + 2.439vw, 6rem);
}

.home-page .blog-main__blogs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: clamp(0.8rem, 0.732rem + 0.244vw, 1.2rem);
}

.home-page .blog-main__blog-card {
   overflow: hidden;
}

@media(max-width:1199.98px) {
   .home-page .blog-main__blogs {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media(max-width:575.98px) {
   .home-page .blog-main__blogs {
      grid-template-columns: 1fr;
   }
}


/* -------------------------------------------------------------------
   for Blog Main ends here
------------------------------------------------------------------- */


/* -------------------------------------------------------------------
   for  why choose us starts here
------------------------------------------------------------------- */

.home-page .why-choose-us {
   overflow: hidden;
}

.home-page .why-choose-us__wrapper {
   display: flex;
   flex-direction: column;
   gap: 6rem;
}

.home-page .why-choose-us__top {
   display: flex;
   gap: clamp(8rem, -20.862rem + 29.095vw, 35rem);
   align-items: flex-start;
}

.home-page .why-choose-us__left {
   max-width: 31.8rem;
}

.home-page .why-choose-us__left .section-title__heading {
   margin: 0;
}

.home-page .why-choose-us__right {
   flex: 1;
}

.home-page .why-choose-us__description {
   margin-bottom: clamp(1.4rem, 0.922rem + 1.707vw, 4.2rem);
   font-size: clamp(1.4rem, 0.922rem + 1.707vw, 4.2rem);
}

.home-page .why-choose-us__statistics {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 4rem;
}

.home-page .why-choose-us__number {
   margin-bottom: clamp(0.8rem, 0.732rem + 0.244vw, 1.2rem);
   font-family: var(--font-clash-display);
   font-size: clamp(3.8rem, 3.151rem + 2.317vw, 7.6rem);
   font-weight: 500;
}

.home-page .why-choose-us__label {
   font-size: clamp(1.4rem, 1.195rem + 1.171vw, 2.6rem);
}

/* Video Card */

.home-page .why-choose-us__video-card {
   position: relative;
   overflow: hidden;
   border-radius: clamp(2rem, 1.659rem + 1.22vw, 4rem);
   aspect-ratio: 1789 / 620;
   min-height: clamp(30rem, 26.585rem + 12.195vw, 50rem);
}

.home-page .why-choose-us__video-box {
   position: absolute;
   inset: 0;
}

.home-page .why-choose-us__video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .8s ease;
}

.home-page .why-choose-us__video-card:hover .why-choose-us__video {
   transform: scale(1.05);
}

.home-page .why-choose-us__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(270deg, rgba(227, 167, 107, 0) 0%, #6A3500 100%);
   z-index: 1;
}

.home-page .why-choose-us__content {
   position: absolute;
   top: 50%;
   left: clamp(1.6rem, 0.678rem + 3.293vw, 7rem);
   transform: translateY(-50%);
   z-index: 2;
}

.home-page .why-choose-us__list {
   display: flex;
   flex-direction: column;
   gap: 3rem;
}

.home-page .why-choose-us__item {
   display: flex;
   align-items: center;
   gap: 1.6rem;
}

.home-page .why-choose-us__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: clamp(2rem, 1.556rem + 1.585vw, 4.6rem);
   height: clamp(2rem, 1.556rem + 1.585vw, 4.6rem);
}

.home-page .why-choose-us__icon svg {
   width: 100%;
   height: 100%;
}

.home-page .why-choose-us__text {
   font-size: clamp(1.8rem, 1.373rem + 1.524vw, 4.3rem);
   font-weight: 500;
   color: var(--secondary-color);
   transition: color .35s ease;
}

.home-page .why-choose-us__item:hover .why-choose-us__text {
   color: var(--pink);
}

.home-page .why-choose-us__item:hover .why-choose-us__icon {
   transform: rotate(10deg) scale(1.08);
}

.home-page .why-choose-us__icon {
   transition: all .35s ease;
}


/* why choose us responsive */

/* why choose us responsive */

@media (max-width:1499.98px) {

   .home-page .why-choose-us__wrapper {
      gap: 5.6rem;
   }

   .home-page .why-choose-us__left {
      max-width: 28rem;
   }

   .home-page .why-choose-us__statistics {
      gap: 3rem;
   }

   .home-page .why-choose-us__list {
      gap: 2.6rem;
   }

}

@media (max-width:1199.98px) {

   .home-page .why-choose-us__wrapper {
      gap: 5rem;
   }

   .home-page .why-choose-us__left {
      max-width: 24rem;
   }

   .home-page .why-choose-us__statistics {
      gap: 2.4rem;
   }

   .home-page .why-choose-us__list {
      gap: 2.2rem;
   }

}

@media (max-width:991.98px) {

   .home-page .why-choose-us__wrapper {
      gap: 4rem;
   }

   .home-page .why-choose-us__top {
      flex-direction: column;
      gap: clamp(1rem, 0.213rem + 2.809vw, 3rem);
   }

   .home-page .why-choose-us__left {
      max-width: 100%;
   }

   .home-page .why-choose-us__statistics {
      gap: 2rem;
   }

   .home-page .why-choose-us__list {
      gap: 2rem;
   }

}

@media (max-width:767.98px) {

   .home-page .why-choose-us__wrapper {
      gap: 3.2rem;
   }

   .home-page .why-choose-us__statistics {
      flex-wrap: wrap;
      row-gap: 2.4rem;
   }

   .home-page .why-choose-us__stat {
      flex: 0 0 calc(50% - 1rem);
   }

   .home-page .why-choose-us__overlay {
      background: linear-gradient(180deg,
            rgba(106, 53, 0, .85) 0%,
            rgba(106, 53, 0, .55) 45%,
            rgba(106, 53, 0, .15) 100%);
   }

   .home-page .why-choose-us__list {
      gap: 1.8rem;
   }

}

@media (max-width:575.98px) {

   .home-page .why-choose-us__wrapper {
      gap: 2.8rem;
   }

   .home-page .why-choose-us__statistics {
      flex-direction: column;
      gap: 2rem;
   }

   .home-page .why-choose-us__list {
      gap: 1.6rem;
   }

   .home-page .why-choose-us__item {
      gap: 1.2rem;
   }

}

@media (max-width:424.98px) {

   .home-page .why-choose-us__list {
      gap: 1.4rem;
   }

}

@media (max-width:374.98px) {

   .home-page .why-choose-us__item {
      gap: 1rem;
   }

   .home-page .why-choose-us__list {
      gap: 1.2rem;
   }

}

@media (max-width:319.98px) {

   .home-page .why-choose-us__wrapper {
      gap: 2rem;
   }

}

/* -------------------------------------------------------------------
   for  why choose us ends here
------------------------------------------------------------------- */


/* =========================================================================
   for index page css ends here 
========================================================================= */


/* =========================================================================
   for about page css starts here 
========================================================================= */

/* -------------------------------------------------------------------
   for beauty designed starts here
------------------------------------------------------------------- */

.about-page .beauty-designed {
   overflow: hidden;
}

.about-page .beauty-designed__wrapper {
   position: relative;
}

.about-page .beauty-designed__top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8rem;
   margin-bottom: 3.4rem;
}

.about-page .beauty-designed__heading {
   max-width: clamp(50rem, 15.152rem + 35.129vw, 82.6rem);
}

.about-page .beauty-designed__title {
   font-family: var(--font-clash-display);
   font-size: clamp(3.5rem, 2.39rem + 3.963vw, 10rem);
   font-weight: 400;
}

.about-page .beauty-designed__title span {
   color: var(--pink);
   font-weight: 500;
}

.about-page .beauty-designed__content {
   flex: 1;
}

/* Gallery */

.about-page .beauty-designed__gallery {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 1.2rem;
}

.about-page .beauty-designed__item {
   flex-shrink: 0;
}

.about-page .beauty-designed__image-box {
   overflow: hidden;
   border-radius: 4rem;
}

.about-page .beauty-designed__image {
   width: 100%;
   display: block;
   transition: transform .6s ease;
}

.about-page .beauty-designed__image-box:hover .beauty-designed__image {
   transform: scale(1.06);
}

/* Image Sizes */

.about-page .beauty-designed__item--one {
   width: clamp(32rem, 0.5rem + 26.25vw, 50.9rem);
   animation: beautyFloatUp 8s ease-in-out infinite;
}

.about-page .beauty-designed__item--two {
   width: clamp(22rem, -3rem + 20.833vw, 37rem);
   margin-top: 28.8rem;
   animation: beautyFloatDown 8s ease-in-out infinite;
}

.about-page .beauty-designed__item--three {
   width: clamp(22rem, -3rem + 20.833vw, 37rem);
   margin-top: 7.9rem;
   animation: beautyFloatUp 8s ease-in-out infinite;
   animation-delay: .8s;
}

.about-page .beauty-designed__item--four {
   width: clamp(32rem, 0.5rem + 26.25vw, 50.9rem);
   animation: beautyFloatDown 8s ease-in-out infinite;
   animation-delay: .8s;
   margin-top: 19.8rem;
}

/* Animation */

@keyframes beautyFloatUp {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(clamp(-1rem, 0.744rem + 0.915vw, -2.5rem));
   }

}

@keyframes beautyFloatDown {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(clamp(1rem, 0.744rem + 0.915vw, 2.5rem));
   }

}

/* responsive css */

@media (max-width:1499.98px) {

   .about-page .beauty-designed__top {
      gap: 6rem;
      margin-bottom: 3rem;
   }

   .about-page .beauty-designed__item--two {
      margin-top: 24rem;
   }

   .about-page .beauty-designed__item--three {
      margin-top: 6rem;
   }

   .about-page .beauty-designed__item--four {
      margin-top: 16rem;
   }

}

@media (max-width:1199.98px) {

   .about-page .beauty-designed__top {
      gap: 4rem;
      margin-bottom: 2.8rem;
   }

   .about-page .beauty-designed__gallery {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.4rem;
      align-items: start;
   }

   .about-page .beauty-designed__item,
   .about-page .beauty-designed__item--one,
   .about-page .beauty-designed__item--two,
   .about-page .beauty-designed__item--three,
   .about-page .beauty-designed__item--four {
      width: 100%;
      margin-top: 0;
   }

   .about-page .beauty-designed__image-box {
      border-radius: 3rem;
   }

}

@media (max-width:991.98px) {

   .about-page .beauty-designed__top {
      flex-direction: column;
      align-items: flex-start;
      gap: 3.2rem;
      margin-bottom: 4rem;
   }

   .about-page .beauty-designed__heading,
   .about-page .beauty-designed__content {
      max-width: 100%;
      width: 100%;
   }

}

@media (max-width:767.98px) {

   .about-page .beauty-designed__top {
      gap: 2.4rem;
      margin-bottom: 3.2rem;
   }

   .about-page .beauty-designed__gallery {
      gap: 2rem;
   }

   .about-page .beauty-designed__image-box {
      border-radius: 2.4rem;
   }

   .about-page .beauty-designed__item {
      animation-duration: 6s;
   }

   @keyframes beautyFloatDown {

      0%,
      100% {
         transform: translateY(0);
      }

      50% {
         transform: translateY(clamp(-1rem, 0.744rem + 0.915vw, -2.5rem));
      }

   }

}

@media (max-width:575.98px) {

   .about-page .beauty-designed__gallery {
      grid-template-columns: 1fr;
      gap: 1.6rem;
   }

   .about-page .beauty-designed__image-box {
      border-radius: 2rem;
   }

}

@media (max-width:424.98px) {

   .about-page .beauty-designed__top {
      gap: 2rem;
      margin-bottom: 2.4rem;
   }

   .about-page .beauty-designed__gallery {
      gap: 1.2rem;
   }

   .about-page .beauty-designed__image-box {
      border-radius: 1.6rem;
   }

}

@media (max-width:374.98px) {

   .about-page .beauty-designed__gallery {
      gap: 1rem;
   }

   .about-page .beauty-designed__image-box {
      border-radius: 1.2rem;
   }

}

@media (max-width:319.98px) {

   .about-page .beauty-designed__top {
      gap: 1.6rem;
   }

   .about-page .beauty-designed__gallery {
      gap: .8rem;
   }

   .about-page .beauty-designed__image-box {
      border-radius: 1rem;
   }

}

/* -------------------------------------------------------------------
   for beauty designed ends here
------------------------------------------------------------------- */


/* -------------------------------------------------------------------
   Our Story Starts Here
------------------------------------------------------------------- */

.about-page .brand-story {
   overflow: hidden;
}

.about-page .brand-story__wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.6rem;
}

.about-page .brand-story__left,
.about-page .brand-story__right {
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
}

/* Video */

.about-page .brand-story__video-box {
   position: relative;
   overflow: hidden;
   border-radius: 0;
   aspect-ratio: 894/968;
}

.about-page .brand-story__video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .8s ease;
}

.about-page .brand-story__video-box:hover .brand-story__video {
   transform: scale(1.05);
}

/* Image */

.about-page .brand-story__image-box {
   overflow: hidden;
}

.about-page .brand-story__image-box--left {
   aspect-ratio: 894/446;
}

.about-page .brand-story__image-box--right {
   aspect-ratio: 889/1430;
}

.about-page .brand-story__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .8s ease;
}

.about-page .brand-story__image-box:hover .brand-story__image {
   transform: scale(1.05);
}

/* Content Cards */
.about-page .brand-story__mission,
.about-page .brand-story__content {
   display: flex;
   align-items: center;
   padding: 7rem;
   background: var(--bg-light);
   flex: 1;
}

.about-page .brand-story__mission .section-title,
.about-page .brand-story__content .section-title {
   max-width: 65.3rem;
}

/* Hover */

.about-page .brand-story__mission,
.about-page .brand-story__content,
.about-page .brand-story__video-box,
.about-page .brand-story__image-box {
   transition: transform .45s ease, box-shadow .45s ease;
}

.about-page .brand-story__mission:hover,
.about-page .brand-story__content:hover,
.about-page .brand-story__video-box:hover,
.about-page .brand-story__image-box:hover {
   transform: translateY(-.6rem);
   box-shadow: 0 2rem 6rem rgba(0, 0, 0, .08);
}

/*  Responsive  */

@media (max-width: 1499.98px) {

   .about-page .brand-story__mission,
   .about-page .brand-story__content {
      padding: 6rem;
   }

   .about-page .brand-story__mission .section-title,
   .about-page .brand-story__content .section-title {
      max-width: 58rem;
   }

}

@media (max-width: 1199.98px) {

   .about-page .brand-story__wrapper {
      gap: 1.2rem;
   }

   .about-page .brand-story__left,
   .about-page .brand-story__right {
      gap: 1.2rem;
   }

   .about-page .brand-story__mission,
   .about-page .brand-story__content {
      padding: 4.8rem;
   }

   .about-page .brand-story__mission .section-title,
   .about-page .brand-story__content .section-title {
      max-width: 100%;
   }

}

@media (max-width: 991.98px) {

   .about-page .brand-story__wrapper {
      grid-template-columns: 1fr;
      gap: 2rem;
   }

   .about-page .brand-story__left {
      flex-direction: column-reverse;
   }

   .about-page .brand-story__left,
   .about-page .brand-story__right {
      gap: 2rem;
   }

   .about-page .brand-story__video-box {
      aspect-ratio: 16 / 10;
   }

   .about-page .brand-story__image-box--left {
      aspect-ratio: 16 / 8;
   }

   .about-page .brand-story__image-box--right {
      aspect-ratio: 16 / 10;
   }

   .about-page .brand-story__mission,
   .about-page .brand-story__content {
      padding: 4rem;
   }

}

@media (max-width: 767.98px) {

   .about-page .brand-story__wrapper {
      gap: 1.6rem;
   }

   .about-page .brand-story__left,
   .about-page .brand-story__right {
      gap: 1.6rem;
   }

   .about-page .brand-story__mission,
   .about-page .brand-story__content {
      padding: 3rem;
   }

   .about-page .brand-story__video-box {
      aspect-ratio: 4 / 3;
   }

   .about-page .brand-story__image-box--left {
      aspect-ratio: 16 / 9;
   }

   .about-page .brand-story__image-box--right {
      aspect-ratio: 4 / 5;
   }

}

@media (max-width: 575.98px) {

   .about-page .brand-story__wrapper {
      gap: 1.2rem;
   }

   .about-page .brand-story__left,
   .about-page .brand-story__right {
      gap: 1.2rem;
   }

   .about-page .brand-story__mission,
   .about-page .brand-story__content {
      padding: 2.4rem;
   }

   .about-page .brand-story__video-box,
   .about-page .brand-story__image-box {
      border-radius: 2rem;
   }

}

@media (max-width: 424.98px) {

   .about-page .brand-story__mission,
   .about-page .brand-story__content {
      padding: 2rem 1.8rem;
   }

   .about-page .brand-story__wrapper,
   .about-page .brand-story__left,
   .about-page .brand-story__right {
      gap: 1rem;
   }

}

@media (max-width: 374.98px) {

   .about-page .brand-story__mission,
   .about-page .brand-story__content {
      padding: 1.8rem 1.6rem;
   }

}

@media (max-width: 319.98px) {

   .about-page .brand-story__mission,
   .about-page .brand-story__content {
      padding: 1.6rem 1.2rem;
   }

}

/* -------------------------------------------------------------------
   Our Story Ends Here
------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   for what we offer starts here
------------------------------------------------------------------- */

.about-page .what-we-offer {
   overflow: hidden;
}

.about-page .what-we-offer__heading .section-title {
   max-width: 111.8rem;
   margin-inline: auto;
   text-align: center;
   margin-bottom: 6rem;
}

/* Tabs */

.about-page .what-we-offer__tabs {
   display: flex;
   align-items: center;
   gap: clamp(1rem, 0.146rem + 3.049vw, 6rem);
}

.about-page .what-we-offer__nav {
   display: flex;
   flex-direction: column;
   gap: .8rem;
   flex-shrink: 0;
   max-width: clamp(30rem, -0.5rem + 25.417vw, 48.3rem);
   width: 100%;
}

.about-page .what-we-offer__nav .tabs__button {
   width: 100%;
   padding: clamp(1.5rem, 1.176rem + 1.159vw, 3.4rem) clamp(1.5rem, 1.039rem + 1.646vw, 4.2rem);
   border: none;
   border-radius: clamp(1rem, 0.829rem + 0.61vw, 2rem);
   background: var(--bg-light);
   font-size: clamp(1.6rem, 1.327rem + 0.976vw, 3.2rem);
   font-weight: 500;
   text-align: left;
   cursor: pointer;
   transition: all .4s ease;
   font-family: var(--font-cabinet-grotesk);
}

.about-page .what-we-offer__nav .tabs__button:hover {
   background: var(--light-black);
   color: var(--secondary-color);
   transform: translateX(.8rem);
}

.about-page .what-we-offer__nav .tabs__button--active {
   background: var(--light-black);
   color: var(--secondary-color);
}

.about-page .what-we-offer__body {
   flex: 1;
}

.about-page .what-we-offer__content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: clamp(3rem, -2rem + 4.167vw, 6rem);
}

.about-page .what-we-offer__media {
   flex-shrink: 0;
   width: clamp(43rem, -1.333rem + 36.944vw, 69.6rem);
}

.about-page .what-we-offer__video-box {
   overflow: hidden;
   border-radius: 4rem;
   aspect-ratio: 696 / 747;
}

.about-page .what-we-offer__video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .8s ease;
}

.about-page .what-we-offer__video-box:hover .what-we-offer__video {
   transform: scale(1.05);
}

.about-page .what-we-offer__info {
   flex: 1;
   max-width: 49.5rem;
}

.about-page .what-we-offer__info .section-title {
   margin-bottom: clamp(2rem, 1.317rem + 2.439vw, 6rem);
}


/* Animation */

.about-page .tabs__content {
   opacity: 0;
   visibility: hidden;
   transform: translateY(3rem);
   transition: all .45s ease;
}

.about-page .tabs__content--active {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.about-page .what-we-offer__video-box,
.about-page .what-we-offer__info {
   animation: offerFade .8s ease;
}

@keyframes offerFade {

   from {
      opacity: 0;
      transform: translateY(3rem);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }

}

@media (max-width:1499.98px) {

   .about-page .what-we-offer__heading .section-title {
      max-width: 95rem;
      margin-bottom: 5rem;
   }

   .about-page .what-we-offer__info {
      max-width: 45rem;
   }

}

@media (max-width:1199.98px) {

   .about-page .what-we-offer__heading .section-title {
      max-width: 82rem;
      margin-bottom: 4rem;
   }

   .about-page .what-we-offer__tabs {
      flex-direction: column;
      gap: clamp(3rem, 2.696rem + 1.087vw, 4rem);
   }

   .about-page .what-we-offer__nav {
      flex-direction: row;
      flex-wrap: wrap;
      max-width: 100%;
      gap: 1.2rem;
   }

   .about-page .what-we-offer__nav .tabs__button {
      text-align: center;
      flex: 1 1 calc(50% - .6rem);
   }

   .about-page .what-we-offer__content {
      gap: 3rem;
   }

   .about-page .what-we-offer__media {
      width: 48rem;
   }

   .about-page .what-we-offer__video-box {
      border-radius: 3rem;
   }

   .about-page .what-we-offer__info {
      max-width: 38rem;
   }

}

@media (max-width:991.98px) {

   .about-page .what-we-offer__heading .section-title {
      max-width: 70rem;
   }

   .about-page .what-we-offer__content {
      flex-direction: column;
      gap: 4rem;
      text-align: center;
   }

   .about-page .what-we-offer__media {
      width: 100%;
      max-width: 60rem;
   }

   .about-page .what-we-offer__info {
      max-width: 68rem;
   }

   .about-page .what-we-offer__info .btn {
      margin-inline: auto;
   }

}

@media (max-width:767.98px) {

   .about-page .what-we-offer__heading .section-title {
      margin-bottom: 3.5rem;
   }

   .about-page .what-we-offer__nav {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
   }

   .about-page .what-we-offer__content {
      gap: 3rem;
   }

   .about-page .what-we-offer__video-box {
      border-radius: 2.5rem;
   }

}

@media (max-width:575.98px) {

   .about-page .what-we-offer__heading .section-title {
      margin-bottom: 3rem;
   }

   .about-page .what-we-offer__video-box {
      border-radius: 2rem;
   }

   .about-page .what-we-offer__info .btn {
      width: 100%;
   }

}


/* -------------------------------------------------------------------
   for what we offer ends here
------------------------------------------------------------------- */


/* -------------------------------------------------------------------
   for premium banner starts here
------------------------------------------------------------------- */

.about-page .premium-banner {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   color: var(--secondary-color);
}

.about-page .premium-banner__video-box {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.about-page .premium-banner__video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 8s ease;
}

.about-page .premium-banner:hover .premium-banner__video {
   transform: scale(1.04);
}

.about-page .premium-banner__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(270deg,
         rgba(0, 0, 0, 0) 0%,
         #000000 202.28%);
   z-index: 1;
}

.about-page .premium-banner .container {
   position: relative;
   z-index: 2;
}

.about-page .premium-banner__wrapper {
   display: flex;
   align-items: center;
}

.about-page .premium-banner__content {
   max-width: 89.2rem;
}

.about-page .premium-banner .section-title {
   font-family: var(--font-clash-display);
}

.about-page .premium-banner .section-title__tagline {
   color: var(--secondary-color);
   margin-bottom: .8rem;
   font-size: 8.8rem;
   font-weight: 500;
   text-transform: uppercase;
}

.about-page .premium-banner .section-title__description {
   font-size: 4.8rem;
   text-transform: capitalize;
}

/* Animation */

.about-page .premium-banner__content {
   animation: premiumBannerFade 1s ease;
}

@keyframes premiumBannerFade {

   from {
      opacity: 0;
      transform: translateY(4rem);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }

}

@media (max-width:1499.98px) {

   .about-page .premium-banner {
      min-height: 65rem;
   }

   .about-page .premium-banner__content {
      max-width: 76rem;
   }

   .about-page .premium-banner .section-title__tagline {
      font-size: 7.2rem;
   }

   .about-page .premium-banner .section-title__description {
      font-size: 4rem;
   }

}

@media (max-width:1199.98px) {

   .about-page .premium-banner {
      min-height: 56rem;
   }

   .about-page .premium-banner__content {
      max-width: 64rem;
   }

   .about-page .premium-banner .section-title__tagline {
      font-size: 6rem;
      margin-bottom: 1rem;
   }

   .about-page .premium-banner .section-title__description {
      font-size: 3.4rem;
   }

}

@media (max-width:991.98px) {

   .about-page .premium-banner {
      min-height: 48rem;
   }

   .about-page .premium-banner__wrapper {
      justify-content: center;
      text-align: center;
   }

   .about-page .premium-banner__content {
      max-width: 60rem;
   }

   .about-page .premium-banner .section-title__tagline {
      font-size: 5rem;
   }

   .about-page .premium-banner .section-title__description {
      font-size: 2.8rem;
   }

}

@media (max-width:767.98px) {

   .about-page .premium-banner {
      min-height: 40rem;
   }

   .about-page .premium-banner__content {
      max-width: 100%;
   }

   .about-page .premium-banner .section-title__tagline {
      font-size: 4rem;
      margin-bottom: .8rem;
   }

   .about-page .premium-banner .section-title__description {
      font-size: 2.4rem;
   }

}

@media (max-width:575.98px) {

   .about-page .premium-banner {
      min-height: 34rem;
   }

   .about-page .premium-banner .section-title__tagline {
      font-size: 3.2rem;
   }

   .about-page .premium-banner .section-title__description {
      font-size: 2rem;
   }

}

@media (max-width:424.98px) {

   .about-page .premium-banner {
      min-height: 30rem;
   }

   .about-page .premium-banner .section-title__tagline {
      font-size: 2.8rem;
   }

   .about-page .premium-banner .section-title__description {
      font-size: 1.8rem;
   }

}

@media (max-width:374.98px) {

   .about-page .premium-banner {
      min-height: 28rem;
   }

   .about-page .premium-banner .section-title__tagline {
      font-size: 2.5rem;
   }

   .about-page .premium-banner .section-title__description {
      font-size: 1.6rem;
   }

}

@media (max-width:319.98px) {

   .about-page .premium-banner {
      min-height: 25rem;
   }

   .about-page .premium-banner .section-title__tagline {
      font-size: 2.2rem;
   }

   .about-page .premium-banner .section-title__description {
      font-size: 1.4rem;
   }

}

/* -------------------------------------------------------------------
   for premium banner ends here
------------------------------------------------------------------- */


/* =========================================================================
   for about page css ends here 
========================================================================= */


/* =========================================================================
   for FAQ css starts here 
========================================================================= */

/* -------------------------------------------------------------------
   for help banner starts here
------------------------------------------------------------------- */

.faq-page .help-banner {
   overflow: hidden;
}

.faq-page .help-banner__wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8rem;
}

.faq-page .help-banner__content {
   flex: 1;
   max-width: 84.9rem;
}

.faq-page .help-banner__content .section-title {
   margin: 0;
}

.faq-page .help-banner .section-title__description:not(:last-child) {
   margin-bottom: 2rem;
}

.faq-page .help-banner__image {
   flex-shrink: 0;
   max-width: clamp(48rem, 22.024rem + 26.185vw, 72.3rem);
}

.faq-page .help-banner__image-box {
   overflow: hidden;
}

.faq-page .help-banner__img {
   width: 100%;
   display: block;
   transition: transform .8s ease;
}

.faq-page .help-banner__image-box:hover .help-banner__img {
   transform: scale(1.05);
}

.faq-page .help-banner__content,
.faq-page .help-banner__image {
   animation: helpBannerFade .8s ease;
}

@keyframes helpBannerFade {

   from {
      opacity: 0;
      transform: translateY(3rem);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }

}

@media (max-width:1499.98px) {

   .faq-page .help-banner__wrapper {
      gap: 6rem;
   }

   .faq-page .help-banner__content {
      max-width: 74rem;
   }

}

@media (max-width:1199.98px) {

   .faq-page .help-banner__wrapper {
      gap: 4rem;
   }

   .faq-page .help-banner__content {
      max-width: 58rem;
   }

   .faq-page .help-banner .section-title__description:not(:last-child) {
      margin-bottom: 1.6rem;
   }

}

@media (max-width:991.98px) {

   .faq-page .help-banner__wrapper {
      flex-direction: column;
      text-align: center;
      gap: 5rem;
   }

   .faq-page .help-banner__content {
      max-width: 72rem;
   }

   .faq-page .help-banner__image {
      max-width: clamp(22rem, 10.202rem + 42.135vw, 52rem);
      width: 100%;
   }

}

@media (max-width:767.98px) {

   .faq-page .help-banner__wrapper {
      gap: 4rem;
   }

   .faq-page .help-banner__content {
      max-width: 100%;
   }

   .faq-page .help-banner .section-title__description:not(:last-child) {
      margin-bottom: 1.2rem;
   }

}

@media (max-width:575.98px) {

   .faq-page .help-banner__wrapper {
      gap: 3rem;
   }

}

@media (max-width:424.98px) {

   .faq-page .help-banner__wrapper {
      gap: 2.5rem;
   }

}

@media (max-width:319.98px) {

   .faq-page .help-banner__wrapper {
      gap: 2rem;
   }

}

/* -------------------------------------------------------------------
   for help banner ends here
------------------------------------------------------------------- */


/* -------------------------------------------------------------------
   for faq accordion starts here
------------------------------------------------------------------- */

.faq-page .faq-accordion {
   background-size: cover;
   background-repeat: no-repeat;
}

.faq-page .faq-accordion__wrapper {
   display: flex;
   flex-direction: column;
   gap: 15rem;
}

/* Group */

.faq-page .faq-accordion__group {
   display: flex;
   width: 100%;
   gap: 1.6rem;
   align-items: flex-start;
}

.faq-page .faq-accordion__group-info {
   position: sticky;
   top: 14rem;
   max-width: 57rem;
   width: 100%;
}

/* FAQ Grid */

.faq-page .faq-accordion__items {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.2rem;
   align-items: start;
}

/* Card */

.faq-page .faq-accordion__item {
   background-color: var(--secondary-color);
   border-radius: clamp(1.6rem, 1.19rem + 1.463vw, 4rem);
   overflow: hidden;
   transition:
      background .45s ease,
      transform .45s ease,
      box-shadow .45s ease;
   aspect-ratio: 591/591;
   padding: clamp(1.6rem, 1.19rem + 1.463vw, 4rem);
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
}

.faq-page .faq-accordion__item:hover {
   transform: translateY(-.5rem);
   box-shadow: 0 2rem 6rem rgba(0, 0, 0, .08);
}

.faq-page .faq-accordion__item--active {
   background: var(--primary-color);
}

/* Question */

.faq-page .faq-accordion__question {
   font-size: clamp(2rem, 1.454rem + 1.951vw, 5.2rem);
   font-weight: 400;
   color: var(--primary-color);
   transition: color .35s ease;
}

.faq-page .faq-accordion__item--active .faq-accordion__question {
   color: var(--secondary-color);
}

/* Button */

.faq-page .faq-accordion__button {
   margin-top: auto;
}

/* Icon */

.faq-accordion__icon {
   position: relative;
   display: inline-block;
   flex-shrink: 0;
   width: clamp(4rem, 2.532rem + 5.244vw, 12.6rem);
   height: clamp(4rem, 2.532rem + 5.244vw, 12.6rem);
   border-radius: 50%;
   background: var(--primary-color);
   color: var(--secondary-color);
   transition: all .4s ease;
   border: 1px solid var(--primary-color);
}

.faq-page .faq-accordion__item--active .faq-accordion__icon {
   transform: rotate(180deg);
   border: 1px solid var(--secondary-color);
}

.faq-accordion__icon::before,
.faq-accordion__icon::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   background: currentColor;
   border-radius: 10rem;
   transition: all .35s ease;
}

.faq-accordion__icon::before {
   width: clamp(1.6rem, 1.276rem + 1.159vw, 3.5rem);
   height: clamp(0.025rem, 0.023rem + 0.006vw, 0.035rem);
   transform: translate(-50%, -50%);
}

.faq-accordion__icon::after {
   width: clamp(0.025rem, 0.023rem + 0.006vw, 0.035rem);
   height: clamp(1.6rem, 1.276rem + 1.159vw, 3.5rem);
   transform: translate(-50%, -50%);
}

.faq-accordion__item--active .faq-accordion__icon::after {
   transform: translate(-50%, -50%) scaleY(0);
   opacity: 0;
}


/* Answer */
.faq-page .faq-accordion__answer {
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition:
      max-height .5s ease,
      opacity .35s ease;
   color: var(--secondary-color);
}

.faq-page .faq-accordion__answer-inner {
   margin-bottom: 1.2rem;
}

.faq-page .faq-accordion__item--active .faq-accordion__answer {
   opacity: 1;
}

/* Animation */

.faq-page .faq-accordion__group {
   animation: faqFade .8s ease;
}

@keyframes faqFade {

   from {
      opacity: 0;
      transform: translateY(4rem);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }

}

@media (max-width: 1499.98px) {

   .faq-page .faq-accordion__item {
      aspect-ratio: auto;
   }

   .faq-page .faq-accordion__wrapper {
      gap: 12rem;
   }

   .faq-page .faq-accordion__group-info {
      max-width: 48rem;
   }

}

@media (max-width: 1199.98px) {

   .faq-page .faq-accordion__wrapper {
      gap: 10rem;
   }

   .faq-page .faq-accordion__group-info {
      max-width: 36rem;
   }

}

@media (max-width: 991.98px) {

   .faq-page .faq-accordion__wrapper {
      gap: 8rem;
   }

   .faq-page .faq-accordion__group {
      flex-direction: column;
      gap: 4rem;
   }

   .faq-page .faq-accordion__group-info {
      position: static;
      max-width: 100%;
   }

   .faq-page .faq-accordion__items {
      width: 100%;
   }

   .faq-page .faq-accordion__item {
      aspect-ratio: auto;
      min-height: 32rem;
   }

}

@media (max-width: 767.98px) {

   .faq-page .faq-accordion__wrapper {
      gap: 6rem;
   }

   .faq-page .faq-accordion__items {
      grid-template-columns: 1fr;
   }

   .faq-page .faq-accordion__item {
      min-height: auto;
   }

}

@media (max-width: 575.98px) {

   .faq-page .faq-accordion__wrapper {
      gap: 5rem;
   }

}

@media (max-width: 424.98px) {

   .faq-page .faq-accordion__wrapper {
      gap: 4rem;
   }

   .faq-page .faq-accordion__group {
      gap: 3rem;
   }

   .faq-page .faq-accordion__items {
      gap: 1rem;
   }

   .faq-page .faq-accordion__answer-inner {
      margin-bottom: .8rem;
   }

}

@media (max-width: 319.98px) {

   .faq-page .faq-accordion__wrapper {
      gap: 3rem;
   }

}

/* -------------------------------------------------------------------
   for faq accordion ends here
------------------------------------------------------------------- */


/* -------------------------------------------------------------------
 FAQ Contact CTA Section Starts Here
------------------------------------------------------------------- */

.faq-page .help-cta {
   overflow: hidden;
   background: var(--light-black);
}

.faq-page .help-cta__wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
}

.faq-page .help-cta__media {
   overflow: hidden;
}

.faq-page .help-cta__image-box {
   overflow: hidden;
   height: 100%;
}

.faq-page .help-cta__image {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   transition: transform .8s ease;
}

.faq-page .help-cta__image-box:hover .help-cta__image {
   transform: scale(1.06);
}

.faq-page .help-cta__content {
   max-width: 57.2rem;
   width: 100%;
   margin-inline: auto;
}

.faq-page .help-cta__content .section-title {
   margin-bottom: 7.3rem;
   color: var(--secondary-color);
}

.faq-page .help-cta .btn-link {
   width: fit-content;
   color: var(--secondary-color);
}

.faq-page .help-cta .btn-link:hover {
   color: var(--pink);
}

/* Hover */

.faq-page .help-cta__content,
.faq-page .help-cta__media {
   transition: transform .45s ease;
}

.faq-page .help-cta:hover .help-cta__content {
   transform: translateX(.8rem);
}

/* Animation */

.faq-page .help-cta__media {
   animation: helpCtaImage 1s ease;
}

.faq-page .help-cta__content {
   animation: helpCtaContent 1s ease;
}

@keyframes helpCtaImage {

   from {
      opacity: 0;
      transform: translateX(-6rem);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }

}

@keyframes helpCtaContent {

   from {
      opacity: 0;
      transform: translateX(6rem);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }

}

@media (max-width: 1499.98px) {

   .faq-page .help-cta__content {
      max-width: 50rem;
      padding-inline: 2rem;
   }

   .faq-page .help-cta__content .section-title {
      margin-bottom: 5.5rem;
   }

}

@media (max-width: 1199.98px) {

   .faq-page .help-cta__wrapper {
      grid-template-columns: .95fr 1fr;
   }

   .faq-page .help-cta__content {
      max-width: 44rem;
      padding-inline: 2rem;
   }

   .faq-page .help-cta__content .section-title {
      margin-bottom: 4.5rem;
   }

}

@media (max-width: 991.98px) {

   .faq-page .help-cta__wrapper {
      grid-template-columns: 1fr;
   }

   .faq-page .help-cta__media {
      order: 1;
   }

   .faq-page .help-cta__content {
      order: 2;
      max-width: 100%;
      padding: 8rem 4rem;
   }

   .faq-page .help-cta__content .section-title {
      margin-bottom: 4rem;
   }

}

@media (max-width: 767.98px) {

   .faq-page .help-cta__content {
      padding: 6rem 3rem;
   }

   .faq-page .help-cta__content .section-title {
      margin-bottom: 3.5rem;
   }

}

@media (max-width: 575.98px) {

   .faq-page .help-cta__content {
      padding: 5rem 2rem;
   }

   .faq-page .help-cta__content .section-title {
      margin-bottom: 3rem;
   }

}

@media (max-width: 424.98px) {

   .faq-page .help-cta__content {
      padding: 4rem 1.6rem;
   }

   .faq-page .help-cta__content .section-title {
      margin-bottom: 2.5rem;
   }

   .faq-page .help-cta:hover .help-cta__content {
      transform: none;
   }

}

@media (max-width: 374.98px) {

   .faq-page .help-cta__content {
      padding: 3.5rem 1.5rem;
   }

}

@media (max-width: 319.98px) {

   .faq-page .help-cta__content {
      padding: 3rem 1.2rem;
   }

}

/* -------------------------------------------------------------------
 FAQ Contact CTA Section Ends Here
------------------------------------------------------------------- */

/* ==========================================================================
   FAQ Section CSS Ends Here
========================================================================== */

/* =========================================================================
   for Contact css start here 
========================================================================= */

/* -------------------------------------------------------------------
   for contact info starts here
-------------------------------------------------------------------- */

.contact-page .contact-info {
   overflow: hidden;
}

.contact-page .contact-info__wrapper {
   display: flex;
   align-items: center;
}

.contact-page .contact-info__content {
   max-width: clamp(38rem, -12.241rem + 50.647vw, 85rem);
}

.contact-page .contact-info__content .section-title {
   margin-bottom: 6rem;
}

.contact-page .contact-info__content .section-title__tagline {
   font-family: var(--font-clash-display);
}

.contact-page .contact-info__content .section-title__tagline span {
   font-weight: 500;
}

/* Contact List */

.contact-page .contact-info__list {
   display: flex;
   flex-direction: column;
   gap: 6.5rem;
}

.contact-page .contact-info__item {
   display: flex;
   align-items: flex-start;
   gap: 3.2rem;
}

/* Icon */

.contact-page .contact-info__icon {
   width: 7.2rem;
   height: 7.2rem;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--primary-color);
   transition:
      background .35s ease,
      transform .35s ease;
}

.contact-page .contact-info__icon svg {
   width: 3.6rem;
   height: 3.6rem;
   object-fit: contain;
}

/* Details */

.contact-page .contact-info__title {
   margin-bottom: .8rem;
   font-family: var(--font-clash-display);
   font-size: 2.8rem;
   font-weight: 500;
}

.contact-page .contact-info__link {
   display: inline-block;
   transition: color .35s ease;
}

.contact-page .contact-info__text {
   margin-top: .4rem;
}

/* Image */

.contact-page .contact-info__media {
   overflow: hidden;
   flex: 1;
}

.contact-page .contact-info__image-box {
   overflow: hidden;
}

.contact-page .contact-info__image {
   display: block;
   width: 100%;
   transition: transform .8s ease;
}

/* Hover */

.contact-page .contact-info__item:hover .contact-info__icon {
   background: var(--pink);
   transform: translateY(-.4rem);
}

.contact-page .contact-info__item:hover .contact-info__link {
   color: var(--pink);
}

.contact-page .contact-info__image-box:hover .contact-info__image {
   transform: scale(1.05);
}

/* Animation */

.contact-page .contact-info__content {
   animation: contactInfoContent 1s ease;
}

.contact-page .contact-info__media {
   animation: contactInfoImage 1s ease;
}

@keyframes contactInfoContent {

   from {
      opacity: 0;
      transform: translateX(-6rem);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }

}

@keyframes contactInfoImage {

   from {
      opacity: 0;
      transform: translateX(6rem);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }

}

@media (max-width: 1499.98px) {

   .contact-page .contact-info
   {
      margin-bottom: clamp(6rem, 4.623rem + 4.918vw, 12rem);
   }
   .contact-page .contact-info__wrapper {
      gap: 5rem;
   }

   .contact-page .contact-info__content .section-title {
      margin-bottom: 5rem;
   }

   .contact-page .contact-info__list {
      gap: 5rem;
   }

}

@media (max-width: 1199.98px) {

   .contact-page .contact-info__wrapper {
      gap: 4rem;
   }

   .contact-page .contact-info__content .section-title {
      margin-bottom: 4rem;
   }

   .contact-page .contact-info__list {
      gap: 4rem;
   }

   .contact-page .contact-info__item {
      gap: 2.4rem;
   }

   .contact-page .contact-info__icon {
      width: 6.5rem;
      height: 6.5rem;
   }

   .contact-page .contact-info__icon svg {
      width: 3rem;
      height: 3rem;
   }

   .contact-page .contact-info__title {
      font-size: 2.4rem;
   }

}

@media (max-width: 991.98px) {

   .contact-page .contact-info__wrapper {
      flex-direction: column;
      gap: 6rem;
   }

   .contact-page .contact-info__content,
   .contact-page .contact-info__media {
      max-width: 100%;
      width: 100%;
      flex: unset;
   }

   .contact-page .contact-info__content .section-title {
      margin-bottom: 4rem;
      text-align: center;
   }

   .contact-page .contact-info__image-box {
      max-width: 70rem;
      margin-inline: auto;
   }

}

@media (max-width: 767.98px) {

   .contact-page .contact-info__wrapper {
      gap: 5rem;
   }

   .contact-page .contact-info__content .section-title {
      margin-bottom: 3.5rem;
   }

   .contact-page .contact-info__list {
      gap: 3rem;
   }

   .contact-page .contact-info__item {
      gap: 2rem;
   }

   .contact-page .contact-info__icon {
      width: 6rem;
      height: 6rem;
   }

   .contact-page .contact-info__icon svg {
      width: 2.8rem;
      height: 2.8rem;
   }

   .contact-page .contact-info__title {
      font-size: 2.2rem;
   }

}

@media (max-width: 575.98px) {

   .contact-page .contact-info__wrapper {
      gap: 4rem;
   }

   .contact-page .contact-info__content .section-title {
      text-align: left;
   }

   .contact-page .contact-info__list {
      gap: 2.8rem;
   }

   .contact-page .contact-info__item {
      gap: 1.6rem;
   }

   .contact-page .contact-info__icon {
      width: 5.6rem;
      height: 5.6rem;
   }

   .contact-page .contact-info__icon svg {
      width: 2.6rem;
      height: 2.6rem;
   }

   .contact-page .contact-info__title {
      font-size: 2rem;
      margin-bottom: .5rem;
   }

   .contact-page .contact-info__link,
   .contact-page .contact-info__text {
      line-height: 1.5;
   }

}

@media (max-width: 424.98px) {

   .contact-page .contact-info__list {
      gap: 2.4rem;
   }

   .contact-page .contact-info__item {
      gap: 1.4rem;
   }

   .contact-page .contact-info__icon {
      width: 5rem;
      height: 5rem;
   }

   .contact-page .contact-info__icon svg {
      width: 2.3rem;
      height: 2.3rem;
   }

   .contact-page .contact-info__title {
      font-size: 1.8rem;
   }

}

@media (max-width: 374.98px) {

   .contact-page .contact-info__item {
      align-items: flex-start;
   }

   .contact-page .contact-info__icon {
      width: 4.6rem;
      height: 4.6rem;
   }

   .contact-page .contact-info__icon svg {
      width: 2rem;
      height: 2rem;
   }

   .contact-page .contact-info__title {
      font-size: 1.7rem;
   }

}

@media (max-width: 319.98px) {

   .contact-page .contact-info__wrapper {
      gap: 3rem;
   }

   .contact-page .contact-info__list {
      gap: 2rem;
   }

   .contact-page .contact-info__item {
      flex-direction: column;
      gap: 1.2rem;
   }

   .contact-page .contact-info__icon {
      width: 4.2rem;
      height: 4.2rem;
   }

   .contact-page .contact-info__icon svg {
      width: 1.8rem;
      height: 1.8rem;
   }

}

/* -------------------------------------------------------------------
   for contact info ends here
-------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   for contact form starts here
-------------------------------------------------------------------- */

.contact-page .contact-form {
   overflow: hidden;
   position: relative;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.contact-page .contact-form::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg,
         rgba(0, 0, 0, .18) 0%,
         rgba(0, 0, 0, .06) 35%,
         rgba(0, 0, 0, 0) 100%);
}

.contact-page .contact-form__wrapper {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
}

.contact-page .contact-form__card {
   max-width: 77.9rem;
   width: 100%;
   padding: 6.6rem 4.7rem;
   border-radius: 4rem;
   background: var(--secondary-color);
   box-shadow: 0 2rem 8rem rgba(0, 0, 0, .12);
}

.contact-page .contact-form__title {
   margin-bottom: 3.2rem;
   font-family: var(--font-clash-display);
   font-size: 2.4rem;
   font-weight: 500;
   text-align: center;
}

/* Form */

.contact-page .contact-form__form {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.contact-page .contact-form__field {
   display: flex;
   flex-direction: column;
}

.contact-page .contact-form__label {
   font-family: var(--font-clash-display);
   margin-bottom: .6rem;
   font-size: clamp(1.4rem, 1.332rem + 0.244vw, 1.8rem);
   font-weight: 500;
   color: var(--primary-color);
}

.contact-page .contact-form__input,
.contact-page .contact-form__textarea {
   width: 100%;
   padding: 1.8rem 2.4rem;
   border: 1px solid #000000;
   border-radius: clamp(0.8rem, 0.663rem + 0.488vw, 1.6rem);
   background: transparent;
   font-size: clamp(1.4rem, 1.332rem + 0.244vw, 1.8rem);
   color: var(--primary-color);
   transition:
      border-color .35s ease,
      box-shadow .35s ease,
      transform .35s ease;
}

.contact-page .contact-form__textarea {
   min-height: 12.9rem;
   resize: vertical;
}

.contact-page .contact-form__input::placeholder,
.contact-page .contact-form__textarea::placeholder {
   color: var(--grey-muted);
}

.contact-page .contact-form__input:focus,
.contact-page .contact-form__textarea:focus {
   outline: none;
   border-color: var(--pink);
   box-shadow: 0 0 0 .4rem rgba(255, 74, 141, .12);
}

.contact-page .contact-form .btn-blue {
   margin-top: 1.5rem;
}

/* Hover */

.contact-page .contact-form__card {
   transition:
      transform .45s ease,
      box-shadow .45s ease;
}

.contact-page .contact-form__card:hover {
   transform: translateY(-.8rem);
   box-shadow: 0 3rem 9rem rgba(0, 0, 0, .18);
}

/* Animation */

.contact-page .contact-form__card {
   animation: contactFormFade 1s ease;
}

@keyframes contactFormFade {

   from {
      opacity: 0;
      transform: translateX(-6rem);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }

}

@media (max-width: 1499.98px) {

   .contact-page .contact-form__card {
      max-width: 70rem;
      padding: 5.5rem 4rem;
   }

}

@media (max-width: 1199.98px) {

   .contact-page .contact-form__wrapper {
      min-height: 75rem;
   }

   .contact-page .contact-form__card {
      max-width: 62rem;
      padding: 5rem 3.5rem;
   }

   .contact-page .contact-form__title {
      margin-bottom: 2.8rem;
   }

   .contact-page .contact-form__form {
      gap: 1.4rem;
   }

   .contact-page .contact-form__input,
   .contact-page .contact-form__textarea {
      padding: 1.6rem 2rem;
   }

}

@media (max-width: 991.98px) {

   .contact-page .contact-form {
      background-position: 70% center;
   }

   .contact-page .contact-form::before {
      background: rgba(0, 0, 0, .35);
   }

   .contact-page .contact-form__wrapper {
      justify-content: center;
      min-height: auto;
   }

   .contact-page .contact-form__card {
      max-width: 68rem;
      padding: 4.5rem 3.2rem;
   }

}

@media (max-width: 767.98px) {

   .contact-page .contact-form__card {
      max-width: 100%;
      padding: 4rem 2.8rem;
      border-radius: 3rem;
   }

   .contact-page .contact-form__title {
      margin-bottom: 2.5rem;
   }

   .contact-page .contact-form__form {
      gap: 1.2rem;
   }

   .contact-page .contact-form__input,
   .contact-page .contact-form__textarea {
      padding: 1.5rem 2rem;
      border-radius: 1.2rem;
   }

   .contact-page .contact-form__textarea {
      min-height: 11rem;
   }

}

@media (max-width: 575.98px) {

   .contact-page .contact-form__card {
      padding: 3.5rem 2rem;
      border-radius: 2.4rem;
   }

   .contact-page .contact-form__title {
      margin-bottom: 2rem;
   }

   .contact-page .contact-form__label {
      margin-bottom: .5rem;
   }

   .contact-page .contact-form__input,
   .contact-page .contact-form__textarea {
      padding: 1.4rem 1.8rem;
   }

   .contact-page .contact-form .btn-blue {
      margin-top: 1rem;
   }

}

@media (max-width: 424.98px) {

   .contact-page .contact-form__card {
      padding: 3rem 1.8rem;
      border-radius: 2rem;
   }

   .contact-page .contact-form__form {
      gap: 1rem;
   }

   .contact-page .contact-form__input,
   .contact-page .contact-form__textarea {
      padding: 1.3rem 1.6rem;
      border-radius: 1rem;
   }

   .contact-page .contact-form__textarea {
      min-height: 10rem;
   }

}

@media (max-width: 374.98px) {

   .contact-page .contact-form__card {
      padding: 2.5rem 1.5rem;
   }

   .contact-page .contact-form__title {
      margin-bottom: 1.8rem;
   }

   .contact-page .contact-form__input,
   .contact-page .contact-form__textarea {
      padding: 1.2rem 1.4rem;
   }

}

@media (max-width: 319.98px) {

   .contact-page .contact-form__card {
      padding: 2rem 1.2rem;
      border-radius: 1.6rem;
   }

   .contact-page .contact-form__form {
      gap: .8rem;
   }

   .contact-page .contact-form__input,
   .contact-page .contact-form__textarea {
      padding: 1rem 1.2rem;
      border-radius: .8rem;
   }

   .contact-page .contact-form__textarea {
      min-height: 9rem;
   }

}

/* -------------------------------------------------------------------
   for contact form ends here
-------------------------------------------------------------------- */

/* =========================================================================
   for Contact css ends here 
========================================================================= */


/* =========================================================================
   for Common css start here 
========================================================================= */

/* -------------------------------------------------------------------
   newsletter starts here
------------------------------------------------------------------- */

.newsletter {
   overflow: hidden;
}

.newsletter__wrapper {
   display: flex;
   align-items: center;
   padding: 2rem 3rem;
   background: var(--bg-light);
   border-radius: 4rem;
   position: relative;
}

.newsletter__image {
   max-width: clamp(32rem, -10.759rem + 43.103vw, 72rem);
}

.newsletter__image img {
   width: 100%;
   transition: transform .6s ease;
   margin: -5rem -5rem 0 0;
}

.newsletter__wrapper:hover .newsletter__image img {
   transform: scale(1.04);
}

.newsletter__content {
   flex: 1;
}

.newsletter__content .section-title {
   max-width: 58.1rem;
   margin-bottom: 3.2rem;
}


.newsletter__features {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1.6rem;
   margin-bottom: 6rem;
}

.newsletter__features li {
   font-family: var(--font-clash-display);
   display: flex;
   align-items: center;
   position: relative;
   font-weight: 500;
   color: var(--blue);
   text-transform: uppercase;
}

.newsletter__features li:not(:last-child)::after {
   content: "•";
   margin-left: 1.6rem;
}

.newsletter__form {
   display: flex;
   align-items: center;
   gap: 1.6rem;
}

.newsletter__input {
   flex: 1;
   padding: clamp(1.25rem, 1.079rem + 0.61vw, 2.25rem) clamp(1.4rem, 1.255rem + 0.518vw, 2.25rem);
   border: none;
   border-radius: clamp(1rem, 0.829rem + 0.61vw, 2rem);
   background: var(--secondary-color);
   transition: all .35s ease;
   font-size: clamp(1.6rem, 1.395rem + 0.732vw, 2.8rem);
   font-weight: 500;
}

.newsletter__input::placeholder {
   color: var(--grey-secondary);
}

.newsletter__input:focus {
   box-shadow: 0 0 0 .2rem rgba(0, 78, 212, .12) !important;
}

.newsletter__form .btn {
   flex-shrink: 0;
   max-width: clamp(20rem, 11.2rem + 11.458vw, 33.2rem);
}

/* newsletter responsive */

@media (max-width:1499.98px) {

   .newsletter__wrapper {
      padding: 2rem 3rem;
   }

   .newsletter__content .section-title {
      max-width: 54rem;
      margin-bottom: 3rem;
   }

   .newsletter__features {
      margin-bottom: 5rem;
   }

}

@media (max-width:1199.98px) {

   .newsletter__wrapper {
      padding: 2rem;
      border-radius: 3.2rem;
   }

   .newsletter__image img {
      margin: -3rem -3rem 0 0;
   }

   .newsletter__content .section-title {
      max-width: 48rem;
      margin-bottom: 2.8rem;
   }

   .newsletter__features {
      gap: 1.2rem;
      margin-bottom: 4rem;
   }

   .newsletter__features li:not(:last-child)::after {
      margin-left: 1.2rem;
   }

}

@media (max-width:991.98px) {

   .newsletter__wrapper {
      flex-direction: column;
      text-align: center;
      padding: 4rem;
      gap: 3rem;
   }

   .newsletter__image {
      margin: 0 auto;
      max-width: clamp(20rem, 8.202rem + 42.135vw, 50rem);
   }

   .newsletter__image img {
      margin: 0;
   }

   .newsletter__content {
      width: 100%;
   }

   .newsletter__content .section-title {
      max-width: 100%;
      margin-inline: auto;
      margin-bottom: 2.8rem;
   }

   .newsletter__features {
      justify-content: center;
      margin-bottom: 3rem;
   }

   .newsletter__form {
      width: 100%;
   }

}

@media (max-width:767.98px) {

   .newsletter__wrapper {
      padding: 3rem;
      border-radius: 2.8rem;
   }

   .newsletter__features {
      justify-content: center;
      gap: 1rem;
      margin-bottom: 2.8rem;
   }

   .newsletter__features li:not(:last-child)::after {
      margin-left: 1rem;
   }

   .newsletter__form {
      flex-direction: column;
      align-items: stretch;
      gap: 1.6rem;
   }

   .newsletter__input {
      width: 100%;
   }

   .newsletter__form .btn {
      width: 100%;
      max-width: 100%;
   }

}

@media (max-width:575.98px) {

   .newsletter__wrapper {
      padding: 2.4rem;
      border-radius: 2.4rem;
   }

   .newsletter__content .section-title {
      margin-bottom: 2.4rem;
   }

   .newsletter__features {
      flex-direction: column;
      gap: 1.2rem;
      margin-bottom: 2.4rem;
   }

   .newsletter__features li::after {
      display: none;
   }

}

@media (max-width:424.98px) {

   .newsletter__wrapper {
      padding: 2rem;
      border-radius: 2rem;
   }

   .newsletter__content .section-title {
      margin-bottom: 2rem;
   }

   .newsletter__features {
      margin-bottom: 2rem;
   }

}

@media (max-width:374.98px) {

   .newsletter__wrapper {
      padding: 1.8rem;
   }

}

@media (max-width:319.98px) {

   .newsletter__wrapper {
      padding: 1.6rem;
   }

   .newsletter__features {
      gap: .8rem;
   }

}

/* -------------------------------------------------------------------
   newsletter ends here
------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   for common product slider starts here
------------------------------------------------------------------- */

.product-slider {
   position: relative;
   width: 100%;
}

.product-slider .swiper {
   width: 100%;
   overflow: hidden;
}

.product-slider .swiper-wrapper {
   align-items: stretch;
}

.product-slider .swiper-slide {
   height: auto;
}

.product-slider .swiper-slide>* {
   height: 100%;
}

.product-slider .product-card:hover {
   transform: translateY(0px);
}

.product-slider__navigation {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: clamp(1.5rem, 1.244rem + 0.915vw, 3rem);
   margin-top: clamp(1.6rem, 1.327rem + 0.976vw, 3.2rem);
}

.product-slider__button {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   cursor: pointer;
   transition: all .3s ease;
   width: clamp(5rem, 4.146rem + 3.049vw, 10rem);
   height: clamp(5rem, 4.146rem + 3.049vw, 10rem);
   border-radius: 100%;
   background-color: var(--primary-color);
   border: .15rem solid var(--primary-color);
}

.product-slider__button:hover {
   background-color: var(--secondary-color);
}

.product-slider__button svg {
   transition: all 0.3s ease-in-out;
   max-width: clamp(2rem, 1.659rem + 1.22vw, 4rem);
}

.product-slider__button:hover svg {
   scale: 1.2;
}

.product-slider__button:hover path {
   fill: var(--primary-color);
}

.product-slider__button.swiper-button-disabled {
   opacity: .4;
   pointer-events: none;
}

/* -------------------------------------------------------------------
   for common product slider ends here
------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   for common tabs starts here
------------------------------------------------------------------- */

.tabs {
   width: 100%;
}

.tabs__nav {
   display: flex;
   align-items: center;
}

.tabs__body {
   width: 100%;
}

.tabs__content {
   display: none;
}

.tabs__content--active {
   display: block;
   animation: tabsFade .4s ease;
}

@keyframes tabsFade {

   from {
      opacity: 0;
      transform: translateY(1rem);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }

}

/* -------------------------------------------------------------------
   for common tabs ends here
------------------------------------------------------------------- */

/* ------------------------------------------------------------------
                    for common buttons 
------------------------------------------------------------------*/

/* btn link */
.btn-link {
   font-family: var(--font-clash-display);
   font-weight: 600;
   font-size: clamp(1.9rem, 1.576rem + 1.159vw, 3.8rem);
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   gap: clamp(0.4rem, 0.332rem + 0.244vw, 0.8rem);
   color: var(--blue);
   text-decoration: none;
}

.btn-link__icon {
   display: flex;
   align-items: center;
}

.btn-link__line {
   width: clamp(3rem, 2.522rem + 1.707vw, 5.8rem);
   height: .2rem;
   background: currentColor;
   transition: width .3s ease;
}

.btn-link:hover .btn-link__line {
   width: clamp(5.5rem, 4.561rem + 3.354vw, 11rem);
}

.btn-link__arrow {
   margin-left: -.7rem;
}

/* For all buttons */

.btn {
   font-family: var(--font-cabinet-grotesk);
   font-weight: 700;
   font-size: clamp(1.8rem, 1.629rem + 0.61vw, 2.8rem);
   padding-block: clamp(1.25rem, 1.079rem + 0.61vw, 2.25rem);
   width: 100%;
   border-radius: clamp(1rem, 0.829rem + 0.61vw, 2rem);
   text-transform: capitalize;
   display: inline-block;
   text-align: center;
}

/* btn-blue & Hover */
.btn-blue {
   background-color: var(--blue);
   color: var(--secondary-color) !important;
}

.btn-blue-hover:hover {
   background-color: var(--primary-color);
}

/* btn-red & Hover */
.btn-red {
   background-color: var(--dark-red);
   color: var(--secondary-color) !important;
}

.btn-red-hover:hover {
   background-color: var(--primary-color);
}

/* btn-grey & Hover */
.btn-grey {
   background-color: var(--bg-muted);
   color: var(--primary-color) !important;
}

.btn-grey-hover:hover {
   background-color: var(--primary-color);
   color: var(--secondary-color) !important;
}

/* btn-outline & Hover */
.btn-outline {
   background-color: var(--secondary-color);
   color: var(--primary-color) !important;
   border: .2rem solid var(--primary-color);
   padding-block: clamp(1.05rem, 0.879rem + 0.61vw, 2.05rem);
}

.btn-outline-hover:hover {
   background-color: var(--primary-color);
   color: var(--secondary-color) !important;
}


/* ------------------------------------------------------------------
                    for section paddings 
------------------------------------------------------------------*/
.section-padding {
   padding-block: clamp(6rem, 4.463rem + 5.488vw, 15rem);
}

.section-padding-top {
   padding-top: clamp(6rem, 4.463rem + 5.488vw, 15rem);
   padding-bottom: 0;
}

.section-padding-bottom {
   padding-top: 0;
   padding-bottom: clamp(6rem, 4.463rem + 5.488vw, 15rem);
}


/* ------------------------------------------------------------------
                    for section title
------------------------------------------------------------------*/
.section-title__heading {
   font-family: var(--font-clash-display);
   font-size: clamp(2.2rem, 1.961rem + 0.854vw, 3.6rem);
   text-transform: uppercase;
   margin-bottom: clamp(3rem, 2.488rem + 1.829vw, 6rem);
   font-weight: 500;
   color: var(--grey-secondary);
}

.section-title__tagline {
   font-size: clamp(3.2rem, 2.688rem + 1.829vw, 6.2rem);
   font-weight: 400;
   margin-bottom: clamp(0.8rem, 0.732rem + 0.244vw, 1.2rem);
}

.section-title__tagline span {
   font-weight: 700;
}

.section-title__tagline span.section-title__tagline-block {
   display: block;
}

/* =========================================================================
   for Common css ends here 
========================================================================= */
/* Footer Social */

.site-footer__social {
   display: flex;
   align-items: center;
   gap: 1.2rem;
   margin-top: 2.4rem;
}

.site-footer__social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   width: 4rem;
   height: 4rem;

   border: .1rem solid rgba(255, 255, 255, .2);
   border-radius: 50%;

   color: var(--grey-muted);

   transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}

.site-footer__social a:hover {
   color: var(--secondary-color);
   border-color: var(--pink);
   background-color: var(--pink);
}