@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
:root {
  /* color */
  --dark-blue: #052B54;
  --blue: #074486;
  --white: #fff;
  --gray: #5C5C5C;
  --light-blue: #A1CEFF;

  /* font */
  --font-body: "Lato", sans-serif;
  --font-banner: "Playfair Display", serif;
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
}
a{outline: none;}
.btn-white {
  background: var(--white)!important;
  color: var(--blue)!important;
  border: none!important;
  font-weight: 700;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 0.45rem 1rem;
  text-transform: capitalize;
}
.btn-white:hover, .blue-btn:hover {
  transform: translateY(-2px);
  transition: all 0.3s ease;
}
.blue-btn {
  background: var(--blue)!important;
  color: var(--white)!important;
  border: none!important;
  font-weight: 700;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 0.5rem 1rem;
  text-transform: capitalize;
}
img {
  max-width: 100%;
  height: auto;
}
.f-18 {font-size: 18px;}
.f-14 {font-size: 14px;}
.f-16 {font-size: 16px;}
.uppercase {text-transform: uppercase;}
.highlight-slider, .gallery-slider, .main-slider {
  .owl-carousel .owl-nav button {
    background: var(--white)!important;
    color: var(--blue)!important;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    position: absolute;
  }
  .owl-carousel .owl-nav .owl-prev {
    left: -55px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 1px 4px #074486b3;
  }
  .owl-carousel .owl-nav .owl-next {
    right: -55px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 1px 4px #074486b3;
  }
  .owl-carousel .owl-stage {display: flex;}
  .owl-carousel .item {height: 100%;}
  .owl-dots {
    text-align: center;
    margin-top: 5px;
  }
  button.owl-dot {
    background: #dddddd3d !important;
    height: 10px;
    width: 10px;
    font-size: 10px !important;
    border-radius: 50%;
    margin: 3px;
  }
  button.owl-dot.active {
    background: var(--white)!important;
  }
} 
/* ==================================================== HEADER CSS ======================================================== */
.main-header {  
  .top-header {
    background: var(--dark-blue);
  }
  .context {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 7px 12px;
  }
  .contact {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    color: var(--white);
  }
  .social {
    display: flex;
    gap: 0.35rem;

    a {
      background: var(--white);
      color: var(--dark-blue);
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      border-radius: 50%;
      font-size: 13px;
      text-decoration: none;
    }
  }
  p {
    margin-bottom: 0;
  }
  .flex-display {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--white);
    text-decoration: none;
  }

  .nav-header {
    background: var(--light-blue);
  }
  .navbar-collapse {
    justify-content: space-between;
    gap: 0.5rem;
  }
  .nav-link{
    color: var(--dark-blue);
    font-weight: 500;
    text-align: center;
  }
  .nav-link.active, .nav-link:hover {
    text-decoration: underline;
    color: var(--dark-blue);
  }
  .nav-subitem li {
    padding: 4px 18px;
  }
  .nav-subitem li a{
    color: var(--dark-blue);
    font-size: 15px;
    text-decoration: none;
  }
  .nav-subitem li a:hover, .nav-subitem li a.active {
    color: var(--blue);
    text-decoration: underline;
  }
  .fixed-top {box-shadow: 0px 4px 4px #00000078;}
  .donate-btn .blue-btn {background: var(--dark-blue)!important;}
  .donate {display: flex;align-items: center;gap: 0.45rem;}
  .donate-link {color: var(--white);text-decoration: none;animation: donateBlink 0.7s infinite alternate;background: none;font-weight: 600;}
  .donate-link:hover, .flex-display:hover {text-decoration: underline;}
}
@keyframes donateBlink {
  0% {color: var(--white);}
  100% {color: #0DBD27;}
}
/* ==================================================== FOOTER CSS ======================================================== */
.main-footer {
  background: linear-gradient(to bottom, rgb(161 206 255 / 82%) 0%, rgb(161 206 255 / 92%) 100%), url(../img/footer-bg.webp) no-repeat top / cover;
  color: var(--dark-blue);

  .h-txt {
    font-weight: 700;
  }
  p {
    margin-bottom: 0;
  }
  .links {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    display: grid;
    gap: 0.4rem;

    a {
      color: var(--dark-blue);
      text-decoration: none;
    }
    a:hover, a.active {
      text-decoration: underline;
    }
  }
  .social {
    display: flex;
    gap: 0.45rem;

    a {
      background: var(--white);
      color: var(--blue);
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      border-radius: 50%;
      font-size: 16px;
      text-decoration: none;
    }
  }
  .links .icon {
    background: var(--white);
    color: var(--blue);
    width: 16px;
    height: 16px;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 7.5px;
    border-radius: 50%;
    font-size: 16px;
    text-decoration: none;
  }
  .links .flex-display a{
    display: flex;
    gap: 0.5rem;
  }
}
.copy-right {
  background: var(--white);
  color: var(--blue);
  font-weight: 500;
  .sec-display {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    a {
      color: var(--blue);text-decoration: none;
      &:hover {text-decoration: underline;}
    }
  }
}
.f-16 {font-size: 16px;}
/* ==================================================== HOME CSS ======================================================== */
.homepage {
  user-select: none;
  .top-txt {
    text-align: center;
    color: var(--blue);
    .w-header{text-transform: capitalize;font-weight: 800;}
  }
  .header-text {
    font-weight: 800;
    color: var(--blue);
    text-transform: capitalize;
  }
  .sub-header {
    font-weight: 600;
  }
  p {
    color: var(--gray);
    font-size: 18px;
  }
  .home-banner {
    overflow: hidden;
    position: relative;

    .banner-bg {
      display: block;
      width: 100%;
      height: 950px;
      object-fit: cover;
      object-position: bottom center;
    }
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, #052b54c4 0%, #052b5433 100%);
      pointer-events: none;
    }
    .banner-inner {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    .banner-header {
      color: var(--white);
      text-align: center;
      text-transform: uppercase;
      font-family: var(--font-banner);
      word-wrap: break-word;
    }
    .h1-ls {
      font-weight: 700;
      letter-spacing: 0.45em;
      text-shadow: 0px 3px 0px var(--dark-blue);
    }
    .h3-ls {
      letter-spacing: 12px;
      margin-bottom: 14px;
      text-shadow: 0px 1px 0.7px var(--dark-blue);
    }
    .banner-animation {
      margin-top: 65px;
      position: relative;
      display: grid;

      .img-center {
        display: flex;
        justify-self: center;
        padding-top: 14.5%;
        position: relative;
        z-index:3;
      }
    }
    .circle-img-svg {
      position: absolute;
      top: -50px;
      display: flex;
      justify-self: center;
    }
    .circle-img-svg svg{
      width: 100%;
      height: 100%;
    }
    .outer-img {animation: rotateMantra 20s linear infinite;transform-origin: center center;}
    .inner-img {animation: rotateMantra2 20s linear infinite;transform-origin: center center;}
  }
  .about-us {
    background: linear-gradient(90deg, #FFFEF5 0%, #e6c56a1a 100%);
    box-shadow: 0px 4.25px 4.25px rgba(0, 0, 0, 0.3);
    overflow: hidden;

    ul.timeline {
      position: relative;
      list-style: none;
      .blue {
        color: var(--blue);
        font-weight: 700;
      }
      p {
        text-align: justify;
        font-size: 16px;
      }
      /* &::before {
        content: "";
        position: absolute;
        left: 15px;
        top: 10px;
        bottom: 30px;
        width: 2px;
        background: var(--dark-blue);
      } */
      li {
        position: relative;
        margin-bottom: 18px;
        padding-left: 10px;
        &::before {
          content: "";
          position: absolute;
          left: -23px;
          top: 6px;
          width: 12px;
          height: 12px;
          background: var(--dark-blue);
          border-radius: 50%;
        }
      }
      li.hidden {
        display: none;
      }
      /* .read-more {
        user-select: none;
        cursor: pointer;
        width: fit-content;
      } */
    }
  }
  .stoke-txt {
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    color: rgb(5 43 84 / 7%);
    letter-spacing: 2px;
    margin-bottom: 3px;
  }
  .aasharam {
    background: 
      linear-gradient(to bottom, rgb(5 43 84 / 50%) 0%, rgb(5 43 84 / 90%) 100%),
      url(../img/home-aasharam-bg-.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;

    .card {
      position: relative;
      border-radius: 15px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.80);
      overflow: hidden;

      .img-content {
        background: rgb(7 68 134 / 90%);
        border-radius: 15px;
        text-align: center;
        color: var(--white);
        padding: 12px 10px;
        position: absolute;
        bottom: 0;    
        width: 100%;  
        height: auto;
        transform: translateY(40%); 
        transition: transform 0.7s ease; 

        .hidden-btn {
          opacity: 0;
          transition: opacity 0.5s ease;
        }
      }    
    
      &:hover  {
        .img-content {
          transform: translateY(0%);
          align-content: center;
          height: 100%;
          .hidden-btn {opacity: 1;}
        } 
      }   
    }
  }  
  .meditation {
    background: linear-gradient(90deg, #FFFEF5 0%, #e6c56a1a 100%),url(../img/home-meditation-bg.webp) no-repeat bottom right;
    /* box-shadow: 0px 4.25px 4.25px rgba(0, 0, 0, 0.3); */
    overflow: hidden;

    .bg-img {
      /* background: linear-gradient(90deg, #d9d9d900 0%, #faf4e200 100%), url(../img/meditation-bg.png);
      background-size: auto;
      background-position: 30% bottom;
      background-repeat: no-repeat; */
      align-items: end;
      justify-content: end;
    }
  }
  .highlight {
    background: var(--blue);
    overflow: hidden;

    .card {
      padding: 24px;
      gap: 0.5rem;
      border-radius: 10px;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      justify-content: space-around;
      height: 100%;
      background: #fff url(../img/card-bg.png)no-repeat center;
      background-position: center;
    }
    p.blue {color: var(--blue);}
    .highlight-slider {
      justify-content: center;
    }
  }
  .teaching {
    background: linear-gradient(to left, #fdfdfde3 0%, #ffffff 100%), url(../img/teaching-bg.png) no-repeat center / cover;
    overflow: hidden;
  }  
  .event {
    .card {
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.24);
      border: 1px solid #fff;
      height: 100%;
      img {border-radius: 8px;}
      p {margin-bottom: 0;}
    }
    .header-card {
      font-weight: 700;
      color: var(--dark-blue);
      margin-top: 16px;
    }
  }
  .our-project {
    background:linear-gradient(to bottom, #D9D9D9 0%, #FAF4E2 100%) ;
  }
  .gallery-slider {
    .item {padding: 0px 10px 10px;}
    img {width: 100%;}
    .card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      border: none;
      box-shadow: 0px 4px 4px #0000006b;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .card-content {
      position: absolute;
      background: rgb(7 68 134 / 80%);
      color: var(--white);
      border-radius: 16px;
      width: 80%;
      height: 28%;
      display: flex;
      flex-direction: column;
      justify-content: center;  
      align-items: center;
      padding: 12px;
      text-align: center;
      transition: width 0.5s ease, height 0.5s ease;
      .hidden-btn {
        opacity: 0;
        top: 57%;
        transform: translateY(100px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        position: absolute;
      }
      &:hover {
        width: 100%;
        height: 100%;
        .hidden-btn {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
    .text {
      margin: 0;
      font-weight: 500;
      display: -webkit-box;
      -webkit-line-clamp: 1; 
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: capitalize;
    }
  }
  .gallery-sec.blue {
    background: linear-gradient(to left, #074486e3 0%, #074486e3 100%), url(../img/gallery-bg.png) no-repeat top center / cover;
  }
  .gallery-sec.white {
    background: linear-gradient(to left, #ffffffe6 0%, #ffffffe6 100%), url(../img/gallery-bg.png) no-repeat top center / cover;
      button.owl-dot.active {background: var(--blue)!important;}
      button.owl-dot {background: #07448626!important;}
  }
  .join-donate {
    background: linear-gradient(to bottom, #074486d4 0%, #074486 100%), url(../img/join-donate-bg.webp) no-repeat top center / cover;
    overflow: hidden;

    .top-header h1 {
      letter-spacing: 1px;
    }
  }
  .join-donate.white {
    background: linear-gradient(to bottom, #fdfdfde3 0%, #ffffffeb 100%), url(../img/join-donate-bg.webp) no-repeat top center / cover;
  }
  .upcoming-event {
    background: linear-gradient(to left, #fdfdfde3 0%, #ffffff 100%), url(../img/upcoming-event-bg.png) no-repeat center / cover;
    box-shadow: 0px 4.25px 4.25px rgba(0, 0, 0, 0.3);
    overflow: hidden;

    .res-width {
      border: 4px solid #fff;
      border-radius: 50px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }
  }
  .event-chart {
    list-style: none;
    padding: 0;
    position: relative;
    margin-bottom: 0px;

    /* &::before {
      content: "";
      position: absolute;
      left: 136px;
      top: 50px;
      bottom: 95px;
      width: 2px;
      background: var(--dark-blue);
    } */
    li {
      display: flex;
      gap: 1.25rem;
      align-items: center;
      position: relative;
      margin-bottom: 30px;
      p{margin-bottom: 0;}
    }
    /* li::before {
      content: "";
      position: absolute;
      left: 130px;
      top: 35px;
      width: 14px;
      height: 14px;
      background: var(--dark-blue);
      border-radius: 50%;
    } */
    .date {font-weight: 700;margin-bottom: 3px;color: var(--blue);font-size: 24px;}
    .title {font-weight: 700;margin-bottom: 0;color: var(--blue);}
    img {
      width: 109px;
      border: 2px solid #fff;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 17px;
    }
  }
  .youtube-video {
    iframe {border-radius: 10px;border: 1px solid #07448626;}
  }
}
@keyframes rotateMantra {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@keyframes rotateMantra2 {
  from {transform: rotate(360deg);}
  to {transform: rotate(0deg);}
}
.main-banner {
  background-repeat: no-repeat!important;
  background-size: cover!important;
  padding: 24px 12px;

  .breadcrumb {
    justify-content: center;
    column-gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0;
  }
  .banner-header {font-weight: 800;letter-spacing: 0.5px;}
  a {color: var(--white);}
  span {font-size: 14px;}
}
.align-end-img {align-content: end;}
.align-center {align-content: center;}
/* ==================================================== BAPUSHREE CSS ======================================================== */
.bapushree-main {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%,#0b60bca3 100%),url(../img/bapushree-banner-bg.webp) top left;
  }
  .introduction {
    overflow-x: hidden;
    background: url(../img/bapushree-intro-bg.webp)no-repeat bottom;
    background-size: cover;
    p,li {color: var(--blue);}
  }
  .yt-link {
    background: linear-gradient(to right, #052B54 0%,#052b5480 100%),url(../img/yt-bg.webp)no-repeat;
    background-size: cover;
    background-position: top center;
    iframe {border-radius: 12px;height: 600px;width: 100%;border: 1px solid #07448626;}
  }
  .bapushree-tab {
    overflow-x: hidden;
    background: linear-gradient(to left,rgb(5 43 84) 0%,rgb(5 43 84 / 80%) 80%),url(../img/bapushree-tab-bg.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;

    .nav-pills {
      display: flex;
      gap: 0.5rem;
      flex-direction: column;
    }
    .nav-link {
      color: var(--white);
      padding: 5% 7%;
      border-radius: 4px;
      position: relative;
      &.active,
      .show > & {
        color: var(--dark-blue);
        background: var(--white);
      }
      &.active::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #fff;
      }
    }
    .card {
      height: 100%;
      padding: 25px;
      border-radius: 4px;
    }
    .tab-pane {
      height: 100%;
    }
  }
}
.great-stage {
  overflow: hidden;
  position: relative;
  background: linear-gradient(to left,#BFE0FF 0%, #ffffff00 100%);
  .stage-pos-bg {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .img-index {position: relative;z-index: 1;}
  p,li {color: var(--blue);}
}
.journey-sec {
  overflow-x: hidden;
  background: linear-gradient(to right,#052B54 0%, #052b54a8 100%), url(../img/journey-bg.webp);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}
.text-white p {color: var(--white);}
.project-sec {
    background: linear-gradient(to right,rgba(68, 165, 254, 0.21) 0%,rgba(255, 255, 255, 0) 100%),
    linear-gradient(to bottom,rgba(217, 217, 217, 0) 82%,rgba(250, 244, 226, 1) 96%);

    .res-img-w {
      position: relative;
      z-index: -1;
    }
}

.cus-swiper {
  .swiper-container{position: relative;}
  .swiper{width: 100%;}
  .swiper-pagination {
    width: auto;

    .swiper-pagination-bullet-active {
      background: var(--blue);
    }
  }
  .Pagination-flex {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    align-items: center;
    padding-top: 14px;
    font-size: 12px;
    color: var(--blue);
  }
  .custom-prev,
  .custom-next {
    display: flex;
  }
  .swiper-content {
    position: relative;
    overflow: hidden;
    padding-top: 16px;
    margin: 0 23%;
    text-align: center;
    .header-blue {
      color: var(--blue);
      font-weight: 700;
    }
    p {
      font-size: 16px;
      margin-bottom: 0;
      color: var(--gray);
    }
    > div {
      position: absolute;
      width: 100%;
      opacity: 0;
      transform: translateX(100px);
      transition: transform 0.6s ease, opacity 0.6s ease;
      &.active {
        opacity: 1;
        transform: translateX(0);
        position: relative;
        top: 0;
      }
    }
  }
}

.project-sec {
  .swiper-slide {
    max-width: 800px;
    max-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    filter: contrast(0.3) opacity(1);
    img {
      border-radius: 28px;
      object-fit: cover;
    }
    &.swiper-slide-active {
      filter: none;
    }
  } 
  .swiper-slide[data-visible="false"] {
    opacity: 0;
    pointer-events: none;

    &[data-visible="true"] {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

.type-of-samadhi { 
  .swiper-slide{
    width: 400px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    filter: contrast(0.3) opacity(1);
    img {
      border-radius: 30px;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    &.swiper-slide-active {
      filter: none;
    }
  }
}

.home-project-sec {
  overflow: hidden;
  background: linear-gradient(to right,#052B54 0%, #052b54a8 100%),url(../img/home-project-bg.webp) no-repeat ;
  background-position: top center;
  background-size: cover;

  .item {padding: 10px 2px;}
  .card {
    border-radius: 20px;
    box-shadow: 0px 4px 4px #0000003b;
    text-align: center;
    padding: 20px;
    height: 100%;

    img {border-radius: 10px;width: 100%;}
    .blue-txt {
      color: var(--blue);
      font-weight: 700;
      margin-top: 1rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;   
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p{
      margin-bottom: 0;
      font-size: 16px;
      display: -webkit-box;
      -webkit-line-clamp: 4;   
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.notable-event {
  overflow-x: hidden;
  background: linear-gradient(to right,#052b54d1 0%, #052b54a8 100%), url(../img/upcoming-event-bg.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* ==================================================== MAIYASHREE CSS ======================================================== */
.maiyashree-main {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%,#0b60bca3 100%),url(../img/maiyashree-banner-bg.webp) top left;
  }
  .maiyashree-intro {
    background:linear-gradient(to left, #ffffffcf 0%, #ffffff26 100%),url(../img/maiyashree-intro-bg.webp)no-repeat top;
    background-size: cover;
    p,li {color: var(--blue);}
  }
  .great-stage {
    background: linear-gradient(to left,#bfe0ff00 0%, #ffffff00 100%);
  }
  
  /* .lotus-animation {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    .img-center {
      position: absolute;
      bottom: -10%;
      max-width: 65%;
      width: 100%;
    }
    .petal {
      transform-origin: center bottom;
      transition: transform 1s ease;
    }
    .p1 { transform: translateX(0) rotate(22deg); }
    .p2 { transform: translateX(0) rotate(-22deg); }
    .p3 { transform: translateX(0) rotate(44deg); }
    .p4 { transform: translateX(0) rotate(-44deg); }

    .animate .p1,.animate .p2,.animate .p3,.animate .p4 {
      transform: translateX(0) rotate(0);
    }
  } */
  
  .maiyashree-ui {
    .cus-ui {display: grid;height: 100%;}
    p, li {color: var(--blue);}
    .meditate-font {color: var(--blue);font-weight: 500;font-family: ink free;letter-spacing: 1px;margin-bottom: 0;}
  }
  .award-sec {
    background: url(../img/award-bg.webp)no-repeat bottom;
    background-size: cover;
    .img-zoom{ text-align: center;
      img {
        transition: transform 0.7s ease;
        &:hover {transform: scale(1.05);}
      } 
    }
  }
  .maiyashree-tab {
    background: var(--blue);
    min-height: 420px;
    height: 100%;
  }
}
.timeline-section {
  color: var(--white);
  overflow: hidden;

  .timeline-auto{
    width: 100%;
    overflow: auto;
    position: relative;
  }
  .timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-bottom: 23px;
    gap: 1rem;

    &::before {
      content: "";
      position: absolute;
      top: 61%;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--white);
      z-index: 1;
    }
  }
  .progress-line {
    position: absolute;
    top: 61%;
    left: 0;
    height: 3px;
    background: #017CEE;
    width: 25px;
    transition: width 0.4s ease;
    z-index: 2;
  }
  .timeline-item {
    text-align: center;
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1rem;
    cursor: pointer;
    z-index: 3;

    .year {
      margin-bottom: 0;
      font-weight: 600;
    }
    .dot {
      width: 18px;
      height: 18px;
      background: var(--white);
      border-radius: 50%;
      box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.35);
      transition: background 0.5s, box-shadow 0.5s;
    }
    &.active .dot {
      background: #017CEE;
      box-shadow: 0 0 0 7px var(--white);
    }
  } 
  .timeline-content {
    position: relative;
    margin-top: 12px;
    .header {
      font-weight: 700;
      margin-bottom: 1rem;
    }
    ul {
      margin: 0;
      display: grid;
      gap: 0.5rem;
      font-size: 18px;
    }
    .timeline-content-item {
      opacity: 0;
      max-height: 0;
      transform: translateX(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      overflow: hidden;

      &.active {
        opacity: 1;
        transform: translateX(0);
        max-height: 100%; 
      }
    }
  }
}
/* ==================================================== TRIMURTI ASHRAM CSS ======================================================== */
.ashram-main {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%,#0b60bca3 100%),url(../img/trimurti-banner-bg.png) top left;
  }
  .temple-sec {
    background: linear-gradient(to bottom,#ffffff 0%,#ffffffc7 45%,#ffffff80 75%,#ffffff00 100%) top / 100% 100% no-repeat,
      url(../img/trimurti-ashram-bg.png) center/cover no-repeat;
    overflow: hidden;
    position: relative;
    .temple-row {
      position: relative;
      justify-content: center;
      .temple-name {
        position: absolute;
        top: -8%;
      }
      .z-1 {position: relative;}
    }
  }
  .location-sec{
    background: linear-gradient(to right, #BFE0FF 0%,#ffffff00 100%);
    overflow: hidden;
    ul p{margin-bottom: 5px;}
    .row {align-items: start;}
    .loaction-iframe {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        background: var(--blue);
        height: 65%;
        width: 50%;
        left: -25%;
        top: 50%;
        transform: translateY(-50%);
      }
      iframe{
        border-radius: 8px;
        border: 1px solid #07448626;
        position: relative;
      }
    }
  }
  .facilities-sec {
    background: linear-gradient(to left, #052B54 0%,#052b549c 100%),url(../img/facilities-bg.png) no-repeat top center / cover;
    .card {
      border-radius: 12px;
      overflow: hidden;
      height: 100%;
      .blue {color: var(--blue);font-weight: 700;}
      img {border-radius: 8px;width: 100%;margin: 1rem 0rem;}
      .card-info {
        p{font-size: 13px;}
        ul {margin: 0;padding-left: 1.5rem;}
        li p {margin-bottom: 2px;}
      }
      .card-btn {
        text-align: end;
        .btn {
          padding: 5px;
          font-size: 16px;
          height: 42px;
          width: 58px;
          border-radius: 12px 0;
        }
      }
    }
  }
  .activity-sec{
    background: linear-gradient(to right, #052B54 0%,#052b5480 100%),url(../img/activity-bg.png) no-repeat top center / cover;
    .blue {font-weight: 700;color: var(--blue);}
    .card {
      border-radius: 24px;
      box-shadow: 5px 9px 34px #0000004a;
      text-align: center;
      padding: 10%;
      align-items: center;
      height: 100%;
      p{margin-bottom: 0;font-size: 16px;}
      img {width: 50px;height: 50px;margin-bottom: 15px;}
    }
  }
  .our-centers {
    .centers-img {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 10px;
      img {
        width: 100%;
      }
      .centers-text {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        align-content: center;
        color: var(--white);
        transition: transform 0.7s ease;
        transform: translateY(100%);
        opacity: 0;
      }
      &:hover {
        .centers-text {
          transform: translateY(0%);
          opacity: 1;
          background: rgb(7 68 134 / 80%);
        }
      }
    }
  }
}
 
.ashram-main.girnar {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%,#0b60bca3 100%),url(../img/girnar-banner-bg.png) top left;
  }
  .temple-sec {
    background: linear-gradient(to bottom,#ffffff 0%,#ffffffc7 45%,#ffffff80 75%,#ffffff00 100%) top / 100% 100% no-repeat,
      url(../img/girnar-ashram-bg.png) center/cover no-repeat;
  }   
  .facilities-sec {
    background: linear-gradient(to left, #052B54 0%,#052b549c 100%),url(../img/girnar-facilities-bg.png) no-repeat top center / cover;
  } 
  .activity-sec{
    background: linear-gradient(to right, #052B54 0%,#052b5480 100%),url(../img/activities-bg-2.png) no-repeat top center / cover;
  }
}

.mahamantra-main {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%, #0b60bca3 100%), url(../img/mahamantra-banner-bg.png) top left;
  }
  .origin-of-mantra {p{color: var(--blue);}}
  .mantra-ui {
    display: grid;
    text-align: left;
    justify-content: center;
    gap: 0.5rem;
    color: var(--blue);
    p{margin-bottom: 0px;}
  }
}
.cus-ui {
  padding-left: 1.5rem;
  p {margin-bottom: 8px;}
} 
.shadow-img {position: absolute;bottom: 0;z-index: 2;left: 0;}
.youth-main{
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%, #0b60bca3 100%), url(../img/youth-banner-bg.png) top left;
  }
  .blue {color: var(--dark-blue);}
  .guidance-sec {
    background: linear-gradient(to bottom,#ffffff 0%,#ffffffc7 45%,#ffffff80 75%,#ffffff00 100%) top / 100% 100% no-repeat,
      url(../img/guidence-bg.png) center/cover no-repeat;
      overflow: hidden;
      position: relative;
  }
  .dis-flex {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    .p-top {padding-top: 60px;}
    img {border-radius: 30px;box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);}
  }
  .guideline {
    background: linear-gradient(to right,rgba(5, 43, 84, 0.97) 0%,rgba(5, 43, 84, 0.84) 40%,rgba(5, 43, 84, 1) 100%), url(../img/guideline-bg.png) no-repeat center / cover;
  }
  .youth-card {
    flex-direction: row;
    align-items: self-start;
    gap: 1.5rem;
    padding: 25px;
    border-radius: 0px;
  }
  .life-partner {
    background: linear-gradient(to right,rgba(5, 43, 84, 0.97) 0%,rgba(5, 43, 84, 0.84) 40%,rgba(5, 43, 84, 1) 100%), url(../img/life-partner-bg.png) no-repeat center / cover;
  }
  .balanced-life {
    background: linear-gradient(to right,rgba(5, 43, 84, 0.97) 0%,rgba(5, 43, 84, 0.84) 40%,rgba(5, 43, 84, 1) 100%), url(../img/life-partner-bg.png) no-repeat center / cover;
  }
  .human-being {
    background: linear-gradient(to right,rgba(5, 43, 84, 0.97) 0%,rgba(5, 43, 84, 0.84) 40%,rgba(5, 43, 84, 1) 100%), url(../img/life-partner-bg.png) no-repeat center / cover;
  }
} 

.activities-main {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%, #0b60bca3 100%), url(../img/activities-banner-bg.png) top left;
  }
  .activities-slider {
    .card {
      border: 0;background: none;
      p {margin-bottom: 0;font-size: 16px;}
    }
    .blue-header {color: var(--blue);font-weight: 700;margin-top: 1rem;}
    img {border-radius: 20px;width: 100%;}
  }
  .activities-slider.white {
    background: var(--white);
    button.owl-dot.active {background: var(--blue)!important;}
    button.owl-dot {background: #07448626!important;}
  }
  .activities-slider.blue {
    background: var(--blue);
    color: var(--white);
    p {color: var(--white);}
    .white-header {color: var(--white);font-weight: 700;margin-top: 1rem;}
  }
  .programs-centers {
     background: linear-gradient(to left, #ffffffa3 0%, #F7FCFE 100%), url(../img/programs-centers-bg.png) no-repeat center / cover;
    .blue {color: var(--blue);}
    p,li {color: var(--blue);}
  }
}

.gallery-main {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%, #0b60bca3 100%), url(../img/gallery-banner-bg.png) top left;
  }
}

.project-main {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%, #0b60bca3 100%), url(../img/projects-banner-bg.png) top left;
  }
  .card {
    position: relative;
    padding: 16px;
    box-shadow: 0px 4px 25px #0000001a;
    border: 0;
    border-radius: 14px;
    height: 100%;
    text-align: center;
    img {border-radius: 12px;width: 100%;}
    .blue-header {color: var(--blue);font-weight: 700;margin-top: 1rem;}
    .card-btn {
      position: absolute;
      bottom: -22px;
      width: 100%;
      left: 0;
      text-align: center;
    }
    p{font-size: 16px;}
  }
}

.project-detail {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%, #0b60bca3 100%), url(../img/project-detail-banner-bg.png) top left;
  }
  .detail-info {
    img {border-radius: 23px;}
  }
}

.our-mission-main {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%, #0b60bca3 100%), url(../img/project-detail-banner-bg.png) top left;
  }
  .mission-border {
    border: 2px solid #07448621;
    height: 100%;
    width: 1px;
  }
}

.active-slider {
  overflow: hidden;
}
.let-us-light {
  background: linear-gradient(to right, #030305 0%, #074486cc 100%),url(../img/let-us-light-bg.webp) no-repeat ;
  background-size: cover;
  .blue {color: #51F9FF;font-weight: 700;text-transform: capitalize;}
  .text-italic {font-style: italic;}
}

.donate-qr {
  .main-banner {
    background: linear-gradient(to bottom, #052B54 0%,#0b60bca3 100%),url(../img/donate-now-bg.png) top left;
  }
  .nav-pills {
    justify-content: center;
  }
  .nav-link {
    font-size: 24px;
    background: var(--white);
    color: var(--gray);
    min-width: 350px;
    border-radius: 0px;
    box-shadow: 0px 1px 2px rgb(0 0 0 / 30%);
    padding: 12px;
  }
  .nav-link.active {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0px 1px 2px rgb(0 0 0 / 30%);
  }
  .tab-pane {
    p{margin-bottom: 4px;}
    .blue {color: var(--blue);font-weight: 700;}
  }
}

.women-saints {
  .main-banner {
    background: linear-gradient(to bottom, #052b54 0%, #0b60bca3 100%),url(../img/women-saints-banner-bg.png) top left;
  }
  .universal-power {
    background: url(../img/power-bg.png)no-repeat center;
    background-size: cover;
  }
  .dis-flex {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    .p-top {padding-top: 60px;}
    img {border-radius: 30px;box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);}
  }  
  .saints-card {
    flex-direction: row;
    align-items: self-start;
    gap: 1.5rem;
    padding: 25px;
    border-radius: 0px;
  }
  .real-power{
    background: linear-gradient(to right,rgba(5, 43, 84, 0.97) 0%,rgba(5, 43, 84, 0.84) 40%,rgba(5, 43, 84, 1) 100%), url(../img/guideline-bg.png) no-repeat center / cover;
  }
  .blue {color: var(--blue);}
}
.privacy-policy {
  .main-banner {
    background: linear-gradient(to bottom, #052b54 0%, #0b60bca3 100%),url(../img/women-saints-banner-bg.png) top left;
  }
  .policy-header{
    font-weight: 700;
    color: var(--blue);
    padding-top: 0.65rem;
    text-transform: capitalize;
  }
}

/* -------------------------------- pushpendra css start-------------------------------------- */
.contact-main {
    .main-banner {
      background: linear-gradient(to bottom, #052b54 0%, #0b60bca3 100%),url(../img/contact-banner-bg.png) top left;
    }
    .contact-form-sec {
        padding: 50px 0px;
    }
    .contact-info {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .contact-info h2 {
        font-size: 28px;
        margin-bottom: 10px;
        color: #0b4b8f;
        font-weight: 600;
    }
    .contact-info p {
        line-height: 1.5;
        margin-bottom: 12px;
        color: #0b4b8f;
    }
    .info-block {
        margin-bottom: 15px;
    }
    .info-block p strong {
        font-weight: 800;
    }
    .info-block p > i {
        margin-right: 10px;
    }
    .para-span {
        margin-left: 23px;
    }
    .contact-form {
        background: #0b4b8f;
        padding: 25px;
        width: 100%;
        border-radius: 25px;
        color: #fff;
    }
    .contact-form form {
        display: flex;
        flex-direction: column;
    }
    .contact-form label {
        margin: 10px 0 5px;
    }
    .contact-form input,
    .contact-form textarea, .contact-form select {
        padding: 10px;
        border: none;
        border-radius: 6px;
        margin-bottom: 10px;
        outline: none;
        box-shadow: none!important;
    }
    .contact-map {
      position: relative;
      overflow: hidden;
      text-decoration: none;
      color: var(--blue);
      text-align: center;
      padding: 25px 20px;
      box-shadow: 0px 1px 2px #00000042;
      border-radius: 10px;
      p{
        color: var(--blue);
        margin-bottom: 1px;
        font-weight: 700;
      }
      .map-overlay {
        position: absolute;
        background: var(--blue);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        color: var(--white);
        align-content: center;
        opacity: 0;
        transition: opacity .5s ease;
      }
      &:hover .map-overlay {
        opacity: 1; 
      }
    }
    
}
.sahaj-siddha-yoga-main {
    .main-banner {
        background: linear-gradient(to bottom, #052b54 0%, #0b60bca3 100%),
            url(../img/sahaj-siddha-yoga-banner-bg.png) top left;
    }
    .spontaneous-meditation {
        overflow-x: hidden;
        background: linear-gradient(to right, #ffffff70 0%, #ffffff00 100%),
            url(../img/spontaneous-meditation-bg.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        p,li{color: var(--blue);}
    }
    .calm-mind-sec {
        background-color: var(--blue);
    }
    .benefits-of-meditation-sec {
        overflow-x: hidden;
        background: linear-gradient(to right, #ffffffeb 0%, #ffffff87 100%),
            url(../img/benefits-of-meditation-bg.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        p,li{color: var(--blue);}
    }
    .lord-dattatreya-sec {
        overflow-x: hidden;
        background: linear-gradient(to right, #052b54a1 0%, #052b54 100%),
            url(../img/lord-dattatreya-bg.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .slider-container {
        overflow: hidden;
        width: 100%;
    }
    .slider-wrapper {
        display: flex;
        gap: 30px;
        transition: transform 0.6s ease;
    }
    .slide {
        background: white;  
        height: 100%;
        display: flex;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0px 1px 14px rgb(0 0 0 / 19%);
    }
    .item {padding: 12px;}
 
    .slide-content {
        width: 100%;
        padding: 20px;
        text-align: center;
    }
 
    .date {
        font-size: 14px;
        opacity: 0.6;
    }
 
    .slide-content h3 {
        font-size: 23px;
        font-weight: 700;
        color: var(--blue);
    }
    .slide-content h6 {
      font-size: 18px;
      color: var(--blue);
    }
    .slide-content .date {
        font-size: 14px;
        margin-bottom: 6px;
    }
    .slide-content p {
      margin-bottom: 0;
      display: -webkit-box;
      -webkit-line-clamp: 4; /* number of lines */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
    }
 
    .dots {
        margin-top: 25px;
    }
 
    .dot {
        width: 12px;
        height: 12px;
        display: inline-block;
        background: #cfcfcf;
        border-radius: 50%;
        margin: 5px;
        cursor: pointer;
    }
 
    .dot.active {
        background: #0070ff;
    }
}
.gallery-details {
    .main-banner {
        background: linear-gradient(to bottom, #052b54 0%, #0b60bca3 100%),
            url(../img/gallery-details-banner-bg.png) top left;
    }
    .gallery-section {
        text-align: center;
        padding: 50px 0;
    }
 
    .gallery-title {
        font-size: 42px;
        color: #003a74;
        font-weight: bold;
    }
 
    .gallery-subtitle {
        width: 70%;
        margin: auto;
        margin-bottom: 40px;
        color: #052b54;
    }
 
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        width: 90%;
        margin: auto;
    }
 
    .gallery-item {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.3s;
    }
 
    .gallery-item:hover {
        transform: scale(1.03);
    }
 
    /* Lightbox (Popup) */
    .lightbox {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
        z-index: 9999;
    }
 
    .lightbox-content {
        display: flex;
        align-items: center;
        margin-top: auto;
    }
 
    #lightbox-img {
        width: 1200px;
        height: auto;
        max-height: 80vh;
        border-radius: 6px;
    }
 
    .prev,
    .next {
        font-size: 48px;
        color: #fff;
        cursor: pointer;
        margin: 0 20px;
    }
 
    .close {
        position: absolute;
        top: 30px;
        right: 30px;
        cursor: pointer;
        color: #fff;
    }
 
    /* Thumbs */
    .lightbox-thumbs {
        display: flex;
        gap: 15px;
        margin-top: auto;
        overflow-x: auto;
        padding-bottom: 10px;
    }
 
    .lightbox-thumbs img {
        width: 150px;
        height: 90px;
        object-fit: cover;
        cursor: pointer;
        border-radius: 5px;
        opacity: 0.6;
        transition: 0.3s;
    }
 
    .lightbox-thumbs img.active {
        border: 3px solid #fff;
        opacity: 1;
    }
}
.join-community-form {
    .main-banner {
        background: linear-gradient(to bottom, #052b54 0%, #0b60bca3 100%),
            url(../img/join-community-banner-bg.png) top left;
    }
    .contact-form-sec {
        padding: 50px 0px;
    }
    .contact-info {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .contact-info h2 {
        font-size: 28px;
        margin-bottom: 10px;
        color: #0b4b8f;
        font-weight: 600;
    }
    .contact-info p {
        line-height: 1.5;
        margin-bottom: 12px;
        color: #0b4b8f;
    }
    .info-block {
        margin-bottom: 15px;
    }
    .info-block p strong {
        font-weight: 800;
    }
    .info-block p > i {
        margin-right: 10px;
    }
    .para-span {
        margin-left: 23px;
    }
    .contact-form {
        background: #0b4b8f;
        padding: 3% 6%;
        width: 100%;
        border-radius: 25px;
        color: #fff;
    }
    /* .contact-form form {
        display: flex;
        flex-direction: column;
    } */
    .contact-form label {
        margin: 10px 0 5px;
    }
    .contact-form input,
    .contact-form textarea, .contact-form select {
        padding: 10px;
        border: none;
        border-radius: 6px;
        margin-bottom: 10px;
        width: 100%;
        outline: none;
        box-shadow: none!important;
    }
}
.homepage {
    & .type-of-samadhi,
    .testimonial-section {
        button.owl-dot {
            background: #07448626 !important;
        }
        button.owl-dot.active {
            background: var(--blue) !important;
        }
    }
}
/* -------------------------------- pushpendra css end-------------------------------------- */
.swiper-pagination-bullet-active {background: var(--blue);}

p.error-message {
    color: #f71212;
}
p.success-message {
    color: #6cfc6c;
}
.interested-options {
    display: flex;
    gap: 20px;   /* space between items */
    align-items: center;
    flex-wrap: nowrap; /* stays in one row */
}

.interested-options .option {
    display: flex;
    align-items: center;
    gap: 5px;  /* small gap between checkbox & label text */
}

.coming-soon {
  background: url(../img/coming-soon.png)no-repeat top center;
  height: 100vh;
  width: 100%;
  background-size: cover;
  color: var(--blue);
  padding-top: 100px;
  .timer-box {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1.15rem;
  }
  .header {font-weight: 900;text-transform: uppercase;letter-spacing: 2px;}
  p{font-weight: 500;margin-bottom: 0;}
}

/* youtube play */
.lite-yt {
  position: relative;
  display: block;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #07448626;
  width: 100%;
  height: 200px; 

  img.thumbnail,
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  img {
    height: 100%;
    object-fit: cover;
  }
  .play-btn {
    width: 90px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; 
  }
}