:root {
  --primary-color: #8e2de2;      /* Rich Purple (used in the figure) */
  --secondary-color: #1283c6;    /* Deep Blue (left part of lotus) */
  --accentColour: #c471ed;       /* Light Magenta-Purple (highlight) */
  --black: #1d1d1d;
  --lightBg: #e6ddf0;            /* Very light lavender for background */
  --lightGrey: #dcd6e6;          /* Soft grey-purple for borders */
  --fade: #c1ace6;               /* Faded lavender-purple for shadows */
  --extraLight: #f9f7fc;         /* Almost white with lavender tint */
}


@media (max-width: 1700.98px) {
  .newBanner {
    padding: 120px 0;
    background: linear-gradient(#00000073, #00000073) 0 0 / cover,url("../image/NewBanner.webp") right/cover no-repeat;
}
}
@media (max-width: 1399.98px) {
  
}
@media (max-width: 1199.98px) {
  .display-2 {
    font-size: 48px;
    line-height: 84px;
  }
  .secH,
  .therdH {
    line-height: 62px;
  }
  .secH {
    font-size: 36px;
  }
  .therdH {
    font-size: 26px;
  }

  .VastuForYourSpace .container>.row{
  align-items: start;
}

.UlStyleUI li {
    font-size: 13px;
}

}

@media (max-width: 1024.98px) {
  #ca1.owl-carousel .item1 {
  background: linear-gradient(#0000008c, #0000008c) 0 0 / cover,
    url("../image/BannerMOB1.webp") center/cover no-repeat;
}
#ca1.owl-carousel .item2 {
  background: linear-gradient(#0000008c, #0000008c) 0 0 / cover,
    url("../image/BannerMOB2.webp") center/cover no-repeat;
}
#ca1.owl-carousel .item3 {
  background: linear-gradient(#0000008c, #0000008c) 0 0 / cover,
    url("../image/BannerMOB3.webp") center/cover no-repeat;
}

.navLink {
    font-size: 14px;
}

}

@media screen and (device-width: 1024px) and (device-height: 600px) and (orientation: landscape) {
  /* Styles for Google Nest Hub in landscape */
 #ca1.owl-carousel .item1 {
  background: linear-gradient(#0000008c, #0000008c) 0 0 / cover,
    url("../image/Banner1.webp") center/cover no-repeat;
}
#ca1.owl-carousel .item2 {
  background: linear-gradient(#0000008c, #0000008c) 0 0 / cover,
    url("../image/Banner2.webp") center/cover no-repeat;
}
#ca1.owl-carousel .item3 {
  background: linear-gradient(#0000008c, #0000008c) 0 0 / cover,
    url("../image/Banner3.webp") center/cover no-repeat;
}

}





@media (max-width: 991.98px) {


  .display-2 {
    font-size: 44px;
    line-height: 78px;
  }
  .secH {
    font-size: 32px;
    line-height: 56px;
  }
  .therdH {
    font-size: 24px;
    line-height: 40px;
  }


  .container-fluid.header .btnoutline{
order: 2;
  }
  .brandLogo{
    order: 1;
  }
  .navToggle{
    order: 3;
  }
  .navLink {
    color: var(--primary-color);
    padding: 12px 8px;
}
.navLink.active {
  color: var(--black);
}
.navMenu {
  gap: 4px;
}
.footerContacts .row{
  row-gap: 24px;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.footerContacts .row .col-lg-4{
max-width: 342px;
}
.newBanner{
  padding: 120px 0;
  background: url('../image/newBannMobBack.webp') center no-repeat,linear-gradient(#8e2de2,#8e2de2);
}

.treatmentPhilosophy .container>.row{
  flex-direction: column-reverse;
}

.whoShouldAvoidPanchakarma .container>.row{
  flex-direction: column-reverse;
}

}


@media (max-width: 767.98px) {

  .display-2 {
    font-size: 32px;
    line-height: 58px;
  }
  .secH {
    font-size: 28px;
    line-height: 52px;
  }
  .therdH {
    font-size: 22px;
    line-height: 40px;
  }
  .owl-nav{
    display: none !important;
  }
  .defaultPadding {
    padding: 50px 0;
  }
 .MainRowNavPills{
  flex-direction: column;
  row-gap: 40px;
 }
 .nav.nav-pills  {
  margin-right: 0 !important;
  flex-direction: row !important;
  gap: 8px;
}
}

 @media screen and (max-width: 600px) {
  .ayurvedicTreatmentList table {
    min-width: unset;
    width: 100%;
  }

  .ayurvedicTreatmentList th:first-of-type {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    z-index: 2;
  }

  .ayurvedicTreatmentList table tr>th:first-of-type {
    position: sticky;
    left: 0;
    color: #ffffff;
    background-color: var(--primary-color);
    z-index: 2;
}

.ayurvedicTreatmentList table tr>th:first-of-type::after{
content: "Ayur. Treat.";
background-color: var(--secondary-color);
padding: 2px 4px;
border-radius: 50px;
color: #ffffff;
position: absolute;
right: 4px;
top: 50%;
font-size: 9px;
transform: translateY(-50%);
}

  table.ResponsiveTable thead {
    display: none;
  }

  table.ResponsiveTable tbody td {
    display: block;
  }

  table.ResponsiveTable tbody tr td:first-child {
    background: #666;
    color: #fff;
  }

  table.ResponsiveTable tbody td:before {
    content: attr(data-th);
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
  }

}

@media (max-width: 575.98px) {
   .ZodiacCards .fourthH{
    font-size: 14px;
  }
  .ZodiacCards .birthDates{
    font-size: 12px;
  }

  .astroBanner #ca1.owl-carousel .item {
    padding: 80px 12px;
    height: unset;
  }
     .astroBanner #ca1.owl-carousel .item > .container {
    position: relative;
    left: unset;
    top: unset;
    right: unset;
    transform: unset;
    width: auto;
  }
}

@media only screen and (max-height: 539.98px) {
  #ca1.owl-carousel .item {
    padding: 80px 12px;
    height: unset;
  }
  #ca1.owl-carousel .item > .container {
    position: relative;
    left: unset;
    top: unset;
    right: unset;
    transform: unset;
    width: auto;
  }
}


@media only screen and (max-height: 539.98px) and (max-width: 1024px) {
  #ca1.owl-carousel .item {
    padding: 80px 12px;
    height: unset;
  }
  #ca1.owl-carousel .item > .container {
   position: relative;
    left: unset;
    top: unset;
    right: unset;
    transform: unset;
    width: auto;
  }

#ca1.owl-carousel .item1 {
  background: linear-gradient(#0000008c, #0000008c) 0 0 / cover,
    url("../image/Banner1.webp") center/cover no-repeat;
}
#ca1.owl-carousel .item2 {
  background: linear-gradient(#0000008c, #0000008c) 0 0 / cover,
    url("../image/Banner2.webp") center/cover no-repeat;
}
#ca1.owl-carousel .item3 {
  background: linear-gradient(#0000008c, #0000008c) 0 0 / cover,
    url("../image/Banner3.webp") center/cover no-repeat;
}

}