@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Great+Vibes&display=swap');

:root {
  --green: #003f34;
  --green2: #07594a;
  --cream: #f7f0df;
  --cream2: #fffaf0;
  --gold: #c59a45;
  --gold2: #e1bd6b;
  --ink: #143b35;
  --white: #fff;
  --shadow: 0 10px 30px rgba(44, 55, 37, .12);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--cream2);
  color: #1d2926;
  font-family: 'DM Sans', sans-serif
}

.logo img {
  max-width: 340px;
  width: 100%;
}

img {
  max-width: 100%;
  display: block
}

h1,
h2,
h3,
h4 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink)
}

a {
  text-decoration: none
}

.topbar {
  background: var(--green);
  color: #fff;
  font-size: 14px;
  padding: 9px 0
}

.topbar a {
  color: #fff
}

.top-book {
  background: var(--gold2);
  color: #153b34 !important;
  padding: 9px 18px;
  margin: -6px 0;
  font-weight: 700
}

.main-navbar {
  background: rgba(255, 252, 244, .97);
  border-bottom: 1px solid #e8dec9;
  z-index: 1000
}

.navbar-brand {
  min-width: 270px
}

.brand-symbol {
  width: 54px;
  height: 54px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 24px;
  margin-right: 10px
}

.brand-name {
  font-family: 'Great Vibes', cursive;
  font-size: 25px;
  line-height: 1;
  color: #123e36
}

.brand-sub {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-top: 4px
}

.nav-link {
  font-size: 17px;
  font-weight: 700;
  color: #1f2e2a !important;
  padding: 25px 8px !important
}

.nav-link:hover {
  color: var(--gold) !important
}

.phone-btn {
  border: 1px solid var(--green);
  border-radius: 24px;
  padding: 10px 15px;
  color: var(--green);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap
}

.hero-section {
  overflow: hidden
}

.hero-slide {
  min-height: 650px;
  position: relative;
  overflow: hidden
}

.hero-one {
  background-image: url("assets/images/slider/04.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
    .hero-one {
        background-size: cover;
        background-position: 65% center;
    }
}

.hero-one:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 63, 52, .07) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .25
}

.hero-two {
  background-image: url(assets/images/slider/02.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-four {
  background-image: url(assets/images/slider/b4fab1f9-34ac-413f-a9a4-0b23865c823c.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding: 70px 0
}
.hero-three {
  background-image: url(assets/images/slider/03.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.eyebrow,
.section-kicker {
  display: block;
  color: #927039;
  text-transform: none;
  letter-spacing: 1.4px;
  font-size: 16px;
  margin-bottom: 10px
}

.hero-copy h1 {
  font-size: 60px;
  line-height: .94;
  margin: 0 0 20px;
  font-weight: 700
  

}

.hero-copy h1 span,
.hero-copy h1 em {
  color: var(--gold);
  font-style: normal
}

.hero-copy p {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.65;
  color: #39443f

}

.gold-btn,
.dark-btn,
.outline-btn,
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 14px 21px;
  font-weight: 700;
  font-size: 13px;
  transition: .3s
}

.gold-btn {
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color: #143b35;
  box-shadow: 0 7px 20px rgba(197, 154, 69, .2)
}

.gold-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(197, 154, 69, .3);
  color: #143b35
}
.hero-three::before, .hero-one::before, .hero-two::before, .hero-four::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(255, 250, 239, 0.97) 0%,
      rgba(255, 250, 239, 0.88) 0%,
      rgba(255, 250, 239, 0.35) 35%,
      rgba(255, 250, 239, 0.05) 75%
    );
  }
.whatsapp-btn {
  background: #fff;
  border: 1px solid #ddd6c8;
  color: #222
}

.whatsapp-btn i {
  color: #0aa657;
  font-size: 20px
}

.dark-btn {
  background: var(--green);
  color: #fff
}

.dark-btn:hover {
  background: #082f29;
  color: #fff;
  transform: translateY(-2px)
}

.outline-btn {
  border: 1px solid var(--green);
  color: var(--green)
}

.hero-points {
  max-width: 650px
}

.point-box {
  background: rgba(255, 255, 255, .72);
  border: 1px solid #e8dfcd;
  border-radius: 18px;
  padding: 13px 6px;
  text-align: center;
  min-height: 78px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .04)
}

.point-box i {
  display: block;
  color: var(--gold);
  font-size: 25px;
  line-height: 1;
  margin-bottom: 7px
}

.point-box strong,
.point-box small {
  display: block;
  font-size: 10px
}

.point-box small {
  color: #666;
  margin-top: 2px
}

.hero-person {
  height: 100%;
  min-height: 650px;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.hero-person img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: center top;
  border-radius: 0 0 0 0;
  mix-blend-mode: multiply
}

.floating-card {
  position: absolute;
  right: 0;
  top: 80px;
  width: 180px;
  padding: 20px;
  background: rgba(255, 250, 239, .9);
  border: 1px solid #d8c89e;
  border-radius: 12px;
  color: #7c6436;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  line-height: 1.15;
  box-shadow: var(--shadow)
}

.floating-card b {
  color: #29463e;
  font-weight: 600
}

.hero-orbit {
  height: 500px;
  display: grid;
  place-items: center;
  position: relative
}

.orbit-ring {
  width: 360px;
  height: 360px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(197, 154, 69, .08), 0 0 0 75px rgba(197, 154, 69, .05);
  animation: spin 18s linear infinite
}

.orbit-center {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--gold2);
  font-size: 48px;
  box-shadow: 0 15px 40px rgba(0, 63, 52, .25);
  animation: pulse 2.8s ease-in-out infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes pulse {
  50% {
    transform: scale(1.07)
  }
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--green);
  transform: scale(.7)
}

.swiper-pagination-bullet-active {
  background: var(--gold)
}

@media (max-width: 767px) {

  .hero-slide {
    min-height: 430px;
    height: 430px;
  }

  /* Background image ko text ke liye readable banana */
  .hero-three::before, .hero-one::before, .hero-two::before, .hero-four::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(255, 250, 239, 0.97) 0%,
      rgba(255, 250, 239, 0.88) 45%,
      rgba(255, 250, 239, 0.35) 75%,
      rgba(255, 250, 239, 0.05) 100%
    );
  }

  .hero-three .container, .hero-one .container, .hero-two .container, .hero-four .container {
    position: relative;
    z-index: 2;
  }

  /* .hero-three .hero-copy,  .hero-one .hero-copy,  .hero-two .hero-copy {
    padding: 30px 15px;
    max-width: 75%;
  } */

  .hero-three .eyebrow, .hero-one .eyebrow , .hero-two .eyebrow, .hero-four .eyebrow  {
    font-size: 11px;
    margin-bottom: 6px;
    color: #927039;
  }

  .hero-three .hero-copy h1, .hero-one .hero-copy h1, .hero-two .hero-copy h1, .hero-four .hero-copy h1{
    font-size: 30px;
    line-height: 1.05;
    margin-bottom: 12px;
  }

  .hero-three .hero-copy p,.hero-one .hero-copy p, .hero-two .hero-copy p, .hero-four .hero-copy p{
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 15px;
    max-width: 290px;
  }

  .hero-three .gold-btn,
  .hero-three .whatsapp-btn,
  .hero-one .gold-btn,
  .hero-one .whatsapp-btn,
  .hero-two .gold-btn,
  .hero-two .whatsapp-btn {
    padding: 14px 28px;
    font-size: 10px;
    width: 50%;
  }

}

.section-pad {
  padding: 75px 0
}

.about-section {
  background: linear-gradient(180deg, #fffaf0, #f5eedf)
}

.about-image {
  position: relative;
  padding: 0 10px 15px 0
}

.about-image img {
  height: 390px;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow)
}

.experience {
  position: absolute;
  right: -5px;
  bottom: 0;
  background: var(--gold2);
  padding: 13px 18px;
  border-radius: 10px;
  text-align: center;
  color: var(--green);
  box-shadow: var(--shadow)
}

.experience small {
  display: block;
  font-size: 14px
}

.experience strong {
  font-size: 39px;
  font-family: 'Cormorant Garamond', serif;
  line-height: 1
}

.about-section h2,
.section-heading h2,
.testimonial-wrap h2,
.blog-section h2 {
  font-size: 42px;
  margin-bottom: 10px
}

.about-section h2 span {
  color: var(--gold);
  font-size: 20px
}

.about-section p {
  font-size: 16px;
  line-height: 1.8;
  color: #4c5550
}

.mini-stats {
  margin-top: 20px
}

.mini-stats div {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.mini-stats i {
  font-size: 24px;
  color: var(--gold);
  margin-bottom: 5px
}

.mini-stats b {
  font-size: 14px
}

.mini-stats small {
  font-size: 12px;
  color: #777
}

.quote-card {
  height: 100%;
  background: #fffaf0;
  border: 1px solid #e6d8b9;
  border-radius: 12px;
  padding: 35px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow);
  position: relative
}

.quote-card:before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #eee2c8;
  border-radius: 10px;
  pointer-events: none
}

.quote-card i {
  font-size: 45px;
  color: var(--gold)
}

.quote-card p {
  font: 500 24px/1.25 'Cormorant Garamond', serif;
  color: #304b43
}

.quote-card strong {
  font: italic 22px 'Great Vibes', cursive;
  color: #34564c;
  margin-top: 20px
}

.services-section {
  background: #f7f0df
}

.section-heading h2 {
  margin: 0
}

.heading-line {
  width: 90px;
  height: 2px;
  background: var(--gold);
  margin: 10px auto
}

.service-card {
  height: 100%;
  min-height: 205px;
  background: #fffdf8;
  border: 1px solid #e5dccb;
  border-radius: 13px;
  padding: 20px 10px;
  text-align: center;
  /* box-shadow: var(--shadow); */
  transition: .35s
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 35px rgba(40, 50, 40, .15);
  border-color: var(--gold)
}

.service-card i {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f6edcf;
  color: var(--green);
  font-size: 29px;
  margin: 0 auto 13px
}

.service-card h3 {
  font: 700 15px/1.15 'DM Sans', sans-serif;
  color: #222;
  margin-bottom: 8px
}

.service-card p {
  font-size: 14px;
  color: #777;
  margin: 0
}

.gem-section {
  overflow: hidden
}

.gemstone-content {
  min-height: 330px;
  display: flex;
  background: #eee9d8;
  position: relative;
  background-image: url("assets/images/gemstones.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

}

.gem-text {
  width: 46%;
  padding: 45px 25px 35px 6%;
  position: relative;
  z-index: 2
}

.gem-text h2 {
  font-weight: 700;
  font-size: 43px;
  line-height: .95;
  margin: 0 0 12px
}

.gem-text p {
  font-size: 16px;
  line-height: 1.6
}

.gem-image {
  width: 54%;
  overflow: hidden
}

.gem-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 1s
}

.gemstone-content:hover .gem-image img {
  transform: scale(1.08)
}

.why-box {
  background-image: url("assets/images/choose-us.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 45px 7%;
  position: relative
}

.why-box h2 {

  color: #fff;
  font-size: 43px;
  margin: 0 0 15px
}

.why-box .section-kicker {
  color: var(--gold2)
}

.why-box ul {
  list-style: none;
  padding: 0;
  margin: 0
}

.why-box li {
  font-size: 16px;
  padding: 9px 0;
  display: flex;
  align-items: center;
  gap: 12px
}

.why-box li i {
  color: var(--gold2);
  font-size: 18px
}

.zodiac-section {
  background: #f1f3e3
}

.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 30px
}

.zodiac-grid div {
  text-align: center
}

.zodiac-grid span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: auto;
  background: var(--green);
  color: var(--gold2);
  font-size: 28px;
  box-shadow: 0 7px 15px rgba(0, 63, 52, .14);
  transition: .3s
}

.zodiac-grid div:hover span {
  transform: translateY(-8px) rotate(8deg);
  background: var(--gold);
  color: var(--green)
}

.zodiac-grid small {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600
}

.testimonial-section {
  background: #f8f0df
}

.testimonial-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: var(--shadow);
  min-height: 210px
}

.testimonial-card p {
  font-size: 14px;
  line-height: 1.7
}

.client {
  display: flex;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e6d8bd;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--green)
}

.stars {
  color: #e3a814;
  letter-spacing: 2px
}

.booking-box {
  background: var(--green);
  color: #fff;
  padding: 30px;
  border-radius: 13px;
  box-shadow: var(--shadow);
  height: 100%
}

.booking-box h2 {
  color: #fff;
  font-size: 40px;
  margin: 0 0 15px
}

.booking-box .section-kicker {
  color: var(--gold2)
}

.form-control,
.form-select {
  height: 43px;
  border-radius: 5px;
  border: 0;
  font-size: 12px
}

.booking-box textarea.form-control {
  height: auto
}

.booking-features {
  padding-left: 25px
}

.booking-features div {
  padding: 10px 0;
  font-size: 16px;
  display: flex;
  gap: 10px;
  align-items: center
}

.booking-features i {
  color: var(--gold2);
  font-size: 18px
}



footer {
  background: #003f34;
  color: #dce8df;
  padding: 55px 0 25px
}

footer h4 {
  color: #fff;
  font: 600 19px 'DM Sans', sans-serif;
  margin-bottom: 18px
}

footer a {
  display: block;
  color: #dce8df;
  font-size: 16px;
  margin: 8px 0
}

footer p {
  font-size: 16px;
  line-height: 1.7
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold2)
}

.footer-brand i {
  font-size: 38px
}

.footer-brand b {
  display: block;
  font: 28px 'Great Vibes', cursive
}

.footer-brand small {
  display: block;
  letter-spacing: 2px;
  font-size: 8px
}

.footer-social {
  display: flex;
  gap: 10px
}

.footer-social a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0
}

.footer-social .wa {
  background: #25d366;
  border: 0;
  color: #fff
}

footer hr {
  border-color: rgba(255, 255, 255, .2);
  margin: 30px 0 18px
}

.floating-wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  z-index: 999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  animation: pulse 2s infinite
}

@media(max-width:991px) {
  .nav-link {
    padding: 10px 0 !important
  }

  .phone-btn {
    display: inline-block;
    margin: 10px 0
  }

  .hero-slide {
    min-height: auto
  }

  .hero-copy {
    padding: 70px 0 25px
  }

  .hero-copy h1 {
    font-size: 48px
  }

  .hero-person {
    min-height: 500px
  }

  .hero-person img {
    height: 500px
  }

  .floating-card {
    right: 10px;
    top: 40px
  }

  .gemstone-content {
    min-height: 520px
  }

  .zodiac-grid {
    grid-template-columns: repeat(6, 1fr)
  }
}

@media(max-width:575px) {
  .topbar {
    font-size: 9px
  }

  .brand-name {
    font-size: 21px
  }

  .brand-symbol {
    width: 43px;
    height: 43px
  }

  .hero-copy h1 {
    font-size: 39px
  }

  .hero-copy p {
    font-size: 13px
  }

  .hero-points .point-box {
    min-height: 75px
  }

  .section-pad {
    padding: 55px 0
  }

  .about-section h2,
  .section-heading h2,
  .testimonial-wrap h2,
  .blog-section h2 {
    font-size: 34px
  }

  .gemstone-content {
    display: block
  }

  .gem-text,
  .gem-image {
    width: 100%
  }

  .gem-text {
    padding: 40px 25px
  }

  .gem-image {
    height: 270px
  }

  .zodiac-grid {
    grid-template-columns: repeat(4, 1fr)
  }

  .booking-features {
    padding: 20px 0 0
  }

  .hero-person {
    min-height: 390px
  }

  .hero-person img {
    height: 390px
  }

  .floating-card {
    font-size: 13px;
    width: 145px
  }

  .hero-orbit {
    height: 350px
  }

  .orbit-ring {
    width: 250px;
    height: 250px
  }
}
/* background image  */
.zodiac-section {
  position: relative;
  background-image: url("assets/images/zodiac-signs/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 0;
  overflow: hidden;
}
.footer-brand{
  width: 300px;
}



/* Responsive */
@media (max-width: 768px) {

    .gallery-section {
        padding: 60px 0;
    }

    .section-heading h2 {
        font-size: 30px;
    }

    .gallery-item {
        height: 240px;
    }
}

@media (max-width: 576px) {

    .gallery-item {
        height: 220px;
    }

    .gallery-content h4 {
        font-size: 17px;
    }
}


.gallery-item {
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}


/* Popup Background */

.image-popup {
    display: none;
    position: fixed;
    z-index: 99999;
    inset: 0;

    background: rgba(0, 0, 0, 0.88);

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

    padding: 30px;

    cursor: zoom-out;
}


/* Large Image */

.image-popup img {
    max-width: 90%;
    max-height: 90vh;

    object-fit: contain;

    border-radius: 8px;

    animation: zoomImage 0.3s ease;
}


/* Close Button */

.close-popup {
    position: absolute;

    top: 20px;
    right: 35px;

    color: white;

    font-size: 45px;
    font-weight: 300;

    cursor: pointer;

    z-index: 100000;
}


/* Animation */

@keyframes zoomImage {

    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }

}


/* Mobile */

@media (max-width: 768px) {

    .gallery-item img {
        height: 230px;
    }

    .image-popup {
        padding: 15px;
    }

    .image-popup img {
        max-width: 96%;
        max-height: 85vh;
    }

    .close-popup {
        top: 10px;
        right: 20px;
        font-size: 38px;
    }

}




.service-dropdown {
  width: 100%;
  max-width: 300px;
  position: relative;
}

.service-dropdown select {
  width: 100%;
  height: 52px;
  padding: 0 45px 0 20px;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background-color: #fff;
  color: #292929;
  font-size: 17px;
  font-family: inherit;
  outline: none;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Dropdown arrow */
.service-dropdown::after {
  content: "\f282";
  font-family: "bootstrap-icons";
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #555;
  pointer-events: none;
}

.service-dropdown select:focus {
  border-color: #999;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.service-dropdown select option {
  padding: 12px;
  font-size: 17px;
  background: #fff;
  color: #292929;
}


/* =========================================================
   ABOUT PAGE - DR. BHAWNA RALHAN
   Bootstrap 5 + Custom CSS
========================================================= */


/* General */
.about-page {
    overflow: hidden;
    background: var(--ast-cream);
    color: var(--ast-text);
}

.about-page img {
    max-width: 100%;
}

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

.section-title {
    margin-bottom: 50px;
}

.section-title .small-title {
    color: var(--ast-gold);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-title h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    line-height: 1.15;
    color: var(--ast-green);
    margin-bottom: 15px;
}

.section-title p {
    max-width: 650px;
    margin: auto;
    color: #68716d;
}

/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    background:
        /* linear-gradient(90deg,
            rgba(248,242,229,1) 0%,
            rgba(248,242,229,.96) 38%,
            rgba(248,242,229,.60) 58%,
            rgba(248,242,229,.08) 100%
        ), */
        url('assets/images/about/hero.png') center right / cover no-repeat;
}

.gallery-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    background:
        /* linear-gradient(90deg,
            rgba(248,242,229,1) 0%,
            rgba(248,242,229,.96) 38%,
            rgba(248,242,229,.60) 58%,
            rgba(248,242,229,.08) 100%
        ), */
        url('assets/images/galleryimg/hero.png') center right / cover no-repeat;
}

.about-hero::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(201,154,56,.18);
    border-radius: 50%;
    left: -150px;
    top: 80px;
}

.about-hero::after {
    content: "✦";
    position: absolute;
    color: rgba(201,154,56,.35);
    font-size: 90px;
    left: 90px;
    bottom: 50px;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 690px;
}

.hero-kicker {
    color: var(--ast-gold);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.about-hero h1 {
    font-size: clamp(42px, 2vw, 70px);
    line-height: 1.08;
    color: var(--ast-green);
    margin-bottom: 22px;
}

.about-hero h1 span {
    color: var(--ast-gold);
}

.about-hero p {
    font-size: 18px;
    line-height: 1.8;
    color: #4f5d57;
    max-width: 580px;
    margin-bottom: 30px;
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--ast-gold-light), var(--ast-gold));
    color: #17251f;
    border: none;
    padding: 15px 28px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(145,105,28,.18);
    transition: .3s ease;
}

.btn-gold:hover {
    color: #17251f;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(145,105,28,.25);
}

/* =========================================================
   STORY SECTION
========================================================= */

.story-section {
    position: relative;
    background: #fffdf8;
}

.story-image-wrap {
    position: relative;
    padding: 15px;
}

.story-image-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    height: 90%;
    border: 1px solid rgba(201,154,56,.45);
    border-radius: 20px;
    z-index: 0;
}

.story-image {
    position: relative;
    /* z-index: 1; */
    width: 100%;
    height: 540px;
    object-fit: cover;
    border-radius: 18px;
}

.experience-badge {
    position: absolute;
    z-index: 3;
    right: -5px;
    bottom: 35px;
    background: var(--ast-gold);
    color: #fff;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 15px 30px rgba(90,65,18,.22);
}

.experience-badge strong {
    font-size: 42px;
    line-height: 1;
}

.experience-badge span {
    font-size: 13px;
    margin-top: 5px;
}

.story-content {
    padding-left: 35px;
}

.story-content .small-title {
    color: var(--ast-gold);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.story-content h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    color: var(--ast-green);
    margin: 10px 0 22px;
}

.story-content p {
    color: #5e6863;
    line-height: 1.85;
    font-size: 16px;
    margin-bottom: 18px;
}

.signature {
    font-family: cursive;
    color: var(--ast-green);
    font-size: 30px;
    margin-top: 20px;
}

/* Quote */
.about-quote {
    background: var(--ast-cream);
    border-left: 4px solid var(--ast-gold);
    /* padding: 25px 30px; */
    margin-top: 25px;
    border-radius: 0 15px 15px 0;
}

.about-quote i {
    color: var(--ast-gold);
    font-size: 25px;
}

.about-quote p {
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.6;
    color: var(--ast-green);
    margin: 8px 0 0;
}

/* =========================================================
   STATS
========================================================= */

.stats-section {
    background: #fffdf8;
    padding-bottom: 85px;
}

.stats-box {
    background: var(--ast-cream);
    border: 1px solid rgba(201,154,56,.20);
    border-radius: 18px;
    padding: 35px 20px;
    text-align: center;
    height: 100%;
    transition: .3s ease;
}

.stats-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(37,67,56,.08);
}

.stats-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 1px solid var(--ast-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: var(--ast-gold);
    font-size: 25px;
}

.stats-box h3 {
    color: var(--ast-green);
    font-size: 30px;
    margin-bottom: 5px;
}

.stats-box p {
    margin: 0;
    color: #6c746f;
}

/* =========================================================
   APPROACH
========================================================= */

.approach-section {
    position: relative;
    background: var(--ast-green);
    color: white;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: url(assets/images/about/approach.png) center right / cover no-repeat;

}

.approach-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(232,200,115,.12);
    border-radius: 50%;
    left: -180px;
    top: -160px;
}

.approach-image {
    height: 520px;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.approach-content {
    padding-left: 35px;
}

.approach-content .small-title {
    color: var(--ast-gold-light);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
}

.approach-content h2 {
    font-family: Georgia, serif;
    font-size: 45px;
    line-height: 1.2;
    color: white;
    margin: 12px 0 20px;
}

.approach-content p {
    color: rgba(255,255,255,.78);
    line-height: 1.85;
}

.approach-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.approach-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    color: white;
}

.approach-list span {
    width: 45px;
    height: 45px;
    border: 1px solid var(--ast-gold);
    color: var(--ast-gold-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   VALUES
========================================================= */

.values-section {
    background: var(--ast-cream);
    position: relative;
}

.value-card {
    height: 100%;
    background: #fffdf8;
    border: 1px solid rgba(201,154,56,.20);
    padding: 38px 28px;
    border-radius: 18px;
    text-align: center;
    transition: .35s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(27,60,48,.10);
}

.value-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(201,154,56,.12);
    border: 1px solid rgba(201,154,56,.45);
    color: var(--ast-gold);
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 22px;
}

.value-card h4 {
    color: var(--ast-green);
    font-family: Georgia, serif;
    font-size: 23px;
    margin-bottom: 12px;
}

.value-card p {
    color: #69736e;
    line-height: 1.7;
    margin: 0;
}

/* =========================================================
   MISSION / VISION
========================================================= */

.mission-section {
    background: #fffdf8;
}

.mission-card {
    padding: 40px;
    border-radius: 20px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mission-card.green {
    background: var(--ast-green);
    color: white;
}

.mission-card.gold {
    background: linear-gradient(135deg, #e8cf91, #c99a38);
    color: #18372d;
}

.mission-card h3 {
    font-family: Georgia, serif;
    font-size: 34px;
    margin-bottom: 18px;
}

.mission-card p {
    line-height: 1.8;
    opacity: .9;
}

/* =========================================================
   CTA
========================================================= */

.about-cta {
    position: relative;
    padding: 80px 0;
    background:
        linear-gradient(rgba(4,77,59,.92), rgba(4,77,59,.92)),
        url('assets/images/gemstones.jpg') center / cover;
    color: white;
    text-align: center;
}

.about-cta h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    margin-bottom: 18px;
}

.about-cta p {
    max-width: 680px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,.80);
    line-height: 1.8;
}

/* =========================================================
   CREDENTIALS
========================================================= */

.credentials-section {
    background: var(--ast-cream);
}

.credential-box {
    background: #fffdf8;
    border-radius: 18px;
    padding: 30px;
    height: 100%;
    border: 1px solid rgba(201,154,56,.20);
}

.credential-box h4 {
    color: var(--ast-green);
    font-family: Georgia, serif;
    font-size: 24px;
    margin-bottom: 18px;
}

.credential-item {
    display: flex;
    gap: 15px;
    margin-bottom: 18px;
    align-items: flex-start;
}

.credential-item .icon {
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(201,154,56,.12);
    color: var(--ast-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.credential-item strong {
    display: block;
    color: var(--ast-green);
    margin-bottom: 3px;
}

.credential-item small {
    color: #707873;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .about-hero {
        min-height: 620px;
        background-position: 68% center;
    }

    .about-hero-content {
        max-width: 600px;
    }

    .story-content,
    .approach-content {
        padding-left: 0;
        margin-top: 45px;
    }

    .section-title h2 {
        font-size: 40px;
    }

    .story-content h2,
    .approach-content h2 {
        font-size: 38px;
    }

    .approach-image {
        height: 450px;
    }
}

@media (max-width: 767px) {
    .hero-points .point-box{
        display:none;
    }
    .section-padding {
        padding: 65px 0;
    }

    .about-hero {
        min-height: 470px;
        background:
            linear-gradient(
                180deg,
                rgba(248,242,229,.94) 0%,
                rgba(248,242,229,.82) 55%,
                rgba(248,242,229,.30) 100%
            ),
            url('assets/images/about-hero.jpg') center / cover no-repeat;
        align-items: flex-start;
        padding-top: 70px;
    }

    .about-hero h1 {
        font-size: 43px;
    }

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

    .section-title h2 {
        font-size: 35px;
    }

    .story-image {
        height: 430px;
    }

    .experience-badge {
        width: 115px;
        height: 115px;
        right: 5px;
    }

    .experience-badge strong {
        font-size: 32px;
    }

    .story-content h2,
    .approach-content h2 {
        font-size: 34px;
    }

    .approach-image {
        height: 350px;
    }

    .about-cta h2 {
        font-size: 36px;
    }

    .mission-card {
        padding: 30px;
    }
}

/* =========================================
   PURPOSE SECTION
========================================= */

.purpose-section {
    position: relative;
    overflow: hidden;
    padding: 95px 0 105px;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(213, 170, 76, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(8, 65, 51, 0.06),
            transparent 30%
        ),
        #fbf8ef;
}


/* Decorative Moon */

.purpose-moon {
    position: absolute;
    left: 35px;
    top: 45px;
    font-size: 105px;
    line-height: 1;
    color: rgba(207, 166, 70, 0.16);
    transform: rotate(-20deg);
    pointer-events: none;
}


/* Decorative Star */

.purpose-star {
    position: absolute;
    right: 70px;
    top: 70px;
    font-size: 55px;
    color: rgba(207, 166, 70, 0.35);
    pointer-events: none;
}


/* =========================================
   HEADING
========================================= */

.purpose-heading {
    position: relative;
    z-index: 2;
    margin-bottom: 55px;
}

.purpose-eyebrow {
    display: inline-block;
    margin-bottom: 13px;

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 5px;

    color: #bd8b27;
}


.purpose-heading h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.15;
    font-weight: 500;

    color: #073e32;
}


.purpose-heading h2 span {
    color: #bd8b27;
}


/* Heading Ornament */

.heading-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin: 10px auto 17px;
}


.heading-ornament span {
    width: 55px;
    height: 1px;
    background: #cda34a;
}


.heading-ornament i {
    color: #bd8b27;
    font-size: 20px;
    font-style: normal;
}


/* =========================================
   MISSION CARD
========================================= */

.mission-card,
.vision-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;

    border-radius: 25px;

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


.mission-card:hover,
.vision-card:hover {
    transform: translateY(-7px);
}


/* Mission */

.mission-card {
    display: flex;
    align-items: center;

    background: #fffaf0;

    border: 1px solid rgba(190, 145, 50, 0.45);

    box-shadow:
        0 15px 45px rgba(85, 64, 25, 0.09);
}


/* Mission Mandala */

.mission-mandala {
    position: absolute;

    right: -100px;
    bottom: -100px;

    width: 310px;
    height: 310px;

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

    border: 1px solid rgba(190, 145, 50, 0.2);
    border-radius: 50%;

    font-size: 150px;
    color: rgba(190, 145, 50, 0.10);

    transform: rotate(20deg);
}


.mission-mandala::before,
.mission-mandala::after {
    content: "";

    position: absolute;
    inset: 28px;

    border: 1px solid rgba(190, 145, 50, 0.18);
    border-radius: 50%;
}


.mission-mandala::after {
    inset: 65px;
}


/* =========================================
   VISION CARD
========================================= */

.vision-card {
    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(196, 154, 57, 0.12),
            transparent 33%
        ),
        #063f32;

    border: 1px solid #cda34a;

    box-shadow:
        0 20px 50px rgba(3, 52, 42, 0.18);
}


/* =========================================
   CARD CONTENT
========================================= */

.mission-content,
.vision-content {
    position: relative;
    z-index: 3;

    width: 100%;

    padding: 55px 55px;
}


.purpose-icon {
    width: 68px;
    height: 68px;

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

    margin-bottom: 25px;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #e7c66e,
        #c89a36
    );

    box-shadow:
        0 8px 20px rgba(176, 130, 34, 0.18);
}


.purpose-icon span {
    color: white;
    font-size: 30px;
}


.mission-content h3,
.vision-content h3 {
    margin-bottom: 20px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    font-weight: 500;
}


.mission-content h3 {
    color: #073e32;
}


.vision-content h3 {
    color: #ffffff;
}


.mission-content p,
.vision-content p {
    max-width: 570px;

    margin-bottom: 28px;

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.85;
}


.mission-content p {
    color: #425b54;
}


.vision-content p {
    color: rgba(255, 255, 255, 0.88);
}


/* =========================================
   CARD DIVIDER
========================================= */

.card-divider {
    display: flex;
    align-items: center;
    gap: 12px;
}


.card-divider span {
    display: block;

    width: 75px;
    height: 1px;

    background: #c79a3b;
}


.card-divider i {
    font-style: normal;
    color: #c79a3b;
}


.vision-divider span {
    background: #d7ad51;
}


/* =========================================
   ZODIAC BACKGROUND
========================================= */

.zodiac-bg {
    position: absolute;

    right: -115px;
    top: 50%;

    width: 390px;
    height: 390px;

    transform: translateY(-50%);

    opacity: 0.65;
}


.zodiac-circle {
    position: relative;

    width: 100%;
    height: 100%;

    border: 1px solid rgba(215, 173, 81, 0.3);
    border-radius: 50%;

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


.zodiac-circle::before {
    content: "";

    position: absolute;
    inset: 55px;

    border: 1px solid rgba(215, 173, 81, 0.25);
    border-radius: 50%;
}


.zodiac-circle::after {
    content: "☉";

    position: absolute;

    width: 100px;
    height: 100px;

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

    border: 1px solid rgba(215, 173, 81, 0.35);
    border-radius: 50%;

    color: #d7ad51;
    font-size: 55px;
}


.zodiac-circle span {
    position: absolute;

    color: rgba(220, 184, 94, 0.65);

    font-family: Georgia, serif;
    font-size: 22px;
}


/* Zodiac positions */

.zodiac-circle span:nth-child(1) {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.zodiac-circle span:nth-child(2) {
    top: 45px;
    right: 85px;
}

.zodiac-circle span:nth-child(3) {
    top: 115px;
    right: 28px;
}

.zodiac-circle span:nth-child(4) {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.zodiac-circle span:nth-child(5) {
    bottom: 105px;
    right: 30px;
}

.zodiac-circle span:nth-child(6) {
    bottom: 40px;
    right: 85px;
}

.zodiac-circle span:nth-child(7) {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.zodiac-circle span:nth-child(8) {
    bottom: 40px;
    left: 85px;
}

.zodiac-circle span:nth-child(9) {
    bottom: 105px;
    left: 30px;
}

.zodiac-circle span:nth-child(10) {
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}

.zodiac-circle span:nth-child(11) {
    top: 115px;
    left: 28px;
}

.zodiac-circle span:nth-child(12) {
    top: 45px;
    left: 85px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991.98px) {

    .purpose-section {
        padding: 75px 0 80px;
    }

    .purpose-heading {
        margin-bottom: 40px;
    }

    .mission-card,
    .vision-card {
        min-height: 390px;
    }

    .mission-content,
    .vision-content {
        padding: 45px;
    }

    .zodiac-bg {
        right: -170px;
        opacity: 0.35;
    }

}


@media (max-width: 767.98px) {

    .purpose-section {
        padding: 60px 0 65px;
    }

    .purpose-moon,
    .purpose-star {
        display: none;
    }

    .purpose-eyebrow {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .purpose-heading h2 {
        font-size: 36px;
    }

    .heading-ornament span {
        width: 35px;
    }

    .mission-card,
    .vision-card {
        min-height: auto;
        border-radius: 20px;
    }

    .mission-content,
    .vision-content {
        padding: 35px 28px;
    }

    .purpose-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 20px;
    }

    .purpose-icon span {
        font-size: 25px;
    }

    .mission-content h3,
    .vision-content h3 {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .mission-content p,
    .vision-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .zodiac-bg {
        width: 300px;
        height: 300px;
        right: -145px;
        opacity: 0.25;
    }

}


@media (max-width: 575.98px) {

    .purpose-section {
        padding: 50px 0 55px;
    }

    .purpose-heading {
        margin-bottom: 30px;
    }

    .purpose-heading h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .purpose-eyebrow {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .mission-content,
    .vision-content {
        padding: 30px 22px;
    }

    .mission-content h3,
    .vision-content h3 {
        font-size: 29px;
    }

    .mission-content p,
    .vision-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .card-divider span {
        width: 55px;
    }

}

/* =========================================
   PURPOSE SECTION
========================================= */

.purpose-section {
    position: relative;
    overflow: hidden;
    padding: 95px 0 105px;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(213, 170, 76, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(8, 65, 51, 0.06),
            transparent 30%
        ),
        #fbf8ef;
}


/* Decorative Moon */

.purpose-moon {
    position: absolute;
    left: 35px;
    top: 45px;
    font-size: 105px;
    line-height: 1;
    color: rgba(207, 166, 70, 0.16);
    transform: rotate(-20deg);
    pointer-events: none;
}


/* Decorative Star */

.purpose-star {
    position: absolute;
    right: 70px;
    top: 70px;
    font-size: 55px;
    color: rgba(207, 166, 70, 0.35);
    pointer-events: none;
}


/* =========================================
   HEADING
========================================= */

.purpose-heading {
    position: relative;
    z-index: 2;
    margin-bottom: 55px;
}

.purpose-eyebrow {
    display: inline-block;
    margin-bottom: 13px;

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 5px;

    color: #bd8b27;
}


.purpose-heading h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.15;
    font-weight: 500;

    color: #073e32;
}


.purpose-heading h2 span {
    color: #bd8b27;
}


/* Heading Ornament */

.heading-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin: 10px auto 17px;
}


.heading-ornament span {
    width: 55px;
    height: 1px;
    background: #cda34a;
}


.heading-ornament i {
    color: #bd8b27;
    font-size: 20px;
    font-style: normal;
}


/* =========================================
   MISSION CARD
========================================= */

.mission-card,
.vision-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;

    border-radius: 25px;

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


.mission-card:hover,
.vision-card:hover {
    transform: translateY(-7px);
}


/* Mission */

.mission-card {
    display: flex;
    align-items: center;

    background: #fffaf0;

    border: 1px solid rgba(190, 145, 50, 0.45);

    box-shadow:
        0 15px 45px rgba(85, 64, 25, 0.09);
}


/* Mission Mandala */

.mission-mandala {
    position: absolute;

    right: -100px;
    bottom: -100px;

    width: 310px;
    height: 310px;

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

    border: 1px solid rgba(190, 145, 50, 0.2);
    border-radius: 50%;

    font-size: 150px;
    color: rgba(190, 145, 50, 0.10);

    transform: rotate(20deg);
}


.mission-mandala::before,
.mission-mandala::after {
    content: "";

    position: absolute;
    inset: 28px;

    border: 1px solid rgba(190, 145, 50, 0.18);
    border-radius: 50%;
}


.mission-mandala::after {
    inset: 65px;
}


/* =========================================
   VISION CARD
========================================= */

.vision-card {
    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(196, 154, 57, 0.12),
            transparent 33%
        ),
        #063f32;

    border: 1px solid #cda34a;

    box-shadow:
        0 20px 50px rgba(3, 52, 42, 0.18);
}


/* =========================================
   CARD CONTENT
========================================= */

.mission-content,
.vision-content {
    position: relative;
    z-index: 3;

    width: 100%;

    padding: 55px 55px;
}


.purpose-icon {
    width: 68px;
    height: 68px;

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

    margin-bottom: 25px;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #e7c66e,
        #c89a36
    );

    box-shadow:
        0 8px 20px rgba(176, 130, 34, 0.18);
}


.purpose-icon span {
    color: white;
    font-size: 30px;
}


.mission-content h3,
.vision-content h3 {
    margin-bottom: 20px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    font-weight: 500;
}


.mission-content h3 {
    color: #073e32;
}


.vision-content h3 {
    color: #ffffff;
}


.mission-content p,
.vision-content p {
    max-width: 570px;

    margin-bottom: 28px;

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.85;
}


.mission-content p {
    color: #425b54;
}


.vision-content p {
    color: rgba(255, 255, 255, 0.88);
}


/* =========================================
   CARD DIVIDER
========================================= */

.card-divider {
    display: flex;
    align-items: center;
    gap: 12px;
}


.card-divider span {
    display: block;

    width: 75px;
    height: 1px;

    background: #c79a3b;
}


.card-divider i {
    font-style: normal;
    color: #c79a3b;
}


.vision-divider span {
    background: #d7ad51;
}


/* =========================================
   ZODIAC BACKGROUND
========================================= */

.zodiac-bg {
    position: absolute;

    right: -115px;
    top: 50%;

    width: 390px;
    height: 390px;

    transform: translateY(-50%);

    opacity: 0.65;
}


.zodiac-circle {
    position: relative;

    width: 100%;
    height: 100%;

    border: 1px solid rgba(215, 173, 81, 0.3);
    border-radius: 50%;

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


.zodiac-circle::before {
    content: "";

    position: absolute;
    inset: 55px;

    border: 1px solid rgba(215, 173, 81, 0.25);
    border-radius: 50%;
}


.zodiac-circle::after {
    content: "☉";

    position: absolute;

    width: 100px;
    height: 100px;

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

    border: 1px solid rgba(215, 173, 81, 0.35);
    border-radius: 50%;

    color: #d7ad51;
    font-size: 55px;
}


.zodiac-circle span {
    position: absolute;

    color: rgba(220, 184, 94, 0.65);

    font-family: Georgia, serif;
    font-size: 22px;
}


/* Zodiac positions */

.zodiac-circle span:nth-child(1) {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.zodiac-circle span:nth-child(2) {
    top: 45px;
    right: 85px;
}

.zodiac-circle span:nth-child(3) {
    top: 115px;
    right: 28px;
}

.zodiac-circle span:nth-child(4) {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.zodiac-circle span:nth-child(5) {
    bottom: 105px;
    right: 30px;
}

.zodiac-circle span:nth-child(6) {
    bottom: 40px;
    right: 85px;
}

.zodiac-circle span:nth-child(7) {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.zodiac-circle span:nth-child(8) {
    bottom: 40px;
    left: 85px;
}

.zodiac-circle span:nth-child(9) {
    bottom: 105px;
    left: 30px;
}

.zodiac-circle span:nth-child(10) {
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}

.zodiac-circle span:nth-child(11) {
    top: 115px;
    left: 28px;
}

.zodiac-circle span:nth-child(12) {
    top: 45px;
    left: 85px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991.98px) {

    .purpose-section {
        padding: 75px 0 80px;
    }

    .purpose-heading {
        margin-bottom: 40px;
    }

    .mission-card,
    .vision-card {
        min-height: 390px;
    }

    .mission-content,
    .vision-content {
        padding: 45px;
    }

    .zodiac-bg {
        right: -170px;
        opacity: 0.35;
    }

}


@media (max-width: 767.98px) {

    .purpose-section {
        padding: 60px 0 65px;
    }

    .purpose-moon,
    .purpose-star {
        display: none;
    }

    .purpose-eyebrow {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .purpose-heading h2 {
        font-size: 36px;
    }

    .heading-ornament span {
        width: 35px;
    }

    .mission-card,
    .vision-card {
        min-height: auto;
        border-radius: 20px;
    }

    .mission-content,
    .vision-content {
        padding: 35px 28px;
    }

    .purpose-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 20px;
    }

    .purpose-icon span {
        font-size: 25px;
    }

    .mission-content h3,
    .vision-content h3 {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .mission-content p,
    .vision-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .zodiac-bg {
        width: 300px;
        height: 300px;
        right: -145px;
        opacity: 0.25;
    }

}


@media (max-width: 575.98px) {

    .purpose-section {
        padding: 50px 0 55px;
    }

    .purpose-heading {
        margin-bottom: 30px;
    }

    .purpose-heading h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .purpose-eyebrow {
        font-size: 10px;
        letter-spacing: 2.5px;
    }

    .mission-content,
    .vision-content {
        padding: 30px 22px;
    }

    .mission-content h3,
    .vision-content h3 {
        font-size: 29px;
    }

    .mission-content p,
    .vision-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .card-divider span {
        width: 55px;
    }

}

.services-page {
        background: var(--astro-cream);
        color: var(--astro-text);
        overflow: hidden;
    }

    /* =========================
       HERO
    ========================= */

    .services-hero {
        position: relative;
        min-height: 500px;
        display: flex;
        align-items: center;
        background:
            radial-gradient(circle at 90% 20%, rgba(207,161,58,.16), transparent 28%),
            radial-gradient(circle at 10% 80%, rgba(6,75,60,.08), transparent 30%),
            var(--astro-cream);
        padding: 90px 0;
    }

    .services-hero::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border: 1px solid rgba(207,161,58,.22);
        border-radius: 50%;
        right: -150px;
        top: 20px;
    }

    .services-hero::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border: 1px solid rgba(6,75,60,.12);
        border-radius: 50%;
        right: -70px;
        top: 90px;
    }

    .hero-small-title {
        color: var(--astro-gold);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .services-hero h1 {
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(42px, 5vw, 70px);
        line-height: 1.08;
        font-weight: 500;
        color: var(--astro-green);
        margin-bottom: 24px;
    }

    .services-hero h1 span {
        color: var(--astro-gold);
    }

    .services-hero p {
        max-width: 650px;
        font-size: 17px;
        line-height: 1.8;
        color: var(--astro-muted);
        margin-bottom: 32px;
    }

    .gold-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(135deg, #e5c56d, #cfa13a);
        color: #172c25;
        padding: 14px 26px;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 700;
        transition: all .3s ease;
        box-shadow: 0 10px 25px rgba(207,161,58,.20);
    }

    .gold-btn:hover {
        color: #172c25;
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(207,161,58,.28);
    }

    .outline-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 24px;
        border: 1px solid var(--astro-green);
        border-radius: 10px;
        color: var(--astro-green);
        text-decoration: none;
        font-weight: 600;
        margin-left: 10px;
        transition: .3s ease;
    }

    .outline-btn:hover {
        background: var(--astro-green);
        color: white;
    }

    /* Zodiac visual */

    .zodiac-wrapper {
        position: relative;
        width: 390px;
        height: 390px;
        margin: auto;
    }

    .zodiac-circle {
        position: absolute;
        inset: 20px;
        border-radius: 50%;
        border: 1px solid rgba(207,161,58,.55);
        background:
            radial-gradient(circle,
                rgba(255,255,255,.9) 0 17%,
                transparent 17.5% 32%,
                rgba(207,161,58,.12) 32.5% 33%,
                transparent 33.5% 49%,
                rgba(207,161,58,.20) 49.5% 50%,
                transparent 50.5%);
        box-shadow:
            0 0 0 15px rgba(207,161,58,.04),
            0 0 0 35px rgba(207,161,58,.03);
    }

    .zodiac-center {
        position: absolute;
        width: 105px;
        height: 105px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: var(--astro-green);
        color: var(--astro-light-gold);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-family: Georgia, serif;
        font-size: 15px;
        letter-spacing: 1px;
        box-shadow: 0 15px 35px rgba(6,75,60,.20);
    }

    .zodiac-symbol {
        position: absolute;
        color: var(--astro-green);
        font-size: 28px;
        font-family: Georgia, serif;
        font-weight: bold;
    }

    .z1 { top: 5px; left: 50%; transform: translateX(-50%); }
    .z2 { top: 38px; right: 70px; }
    .z3 { top: 105px; right: 18px; }
    .z4 { top: 50%; right: 0; transform: translateY(-50%); }
    .z5 { bottom: 105px; right: 18px; }
    .z6 { bottom: 38px; right: 70px; }
    .z7 { bottom: 5px; left: 50%; transform: translateX(-50%); }
    .z8 { bottom: 38px; left: 70px; }
    .z9 { bottom: 105px; left: 18px; }
    .z10 { top: 50%; left: 0; transform: translateY(-50%); }
    .z11 { top: 105px; left: 18px; }
    .z12 { top: 38px; left: 70px; }

    /* =========================
       INTRO
    ========================= */

    .services-intro {
        padding: 90px 0 55px;
        background: #fffdf8;
    }

    .section-label {
        color: var(--astro-gold);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    .section-title {
        font-family: Georgia, "Times New Roman", serif;
        color: var(--astro-green);
        font-size: clamp(34px, 4vw, 48px);
        line-height: 1.2;
        margin-bottom: 18px;
    }

    .section-text {
        color: var(--astro-muted);
        font-size: 16px;
        line-height: 1.8;
        max-width: 750px;
        margin: auto;
    }

    /* =========================
       SERVICE CARDS
    ========================= */

    .service-section {
        padding: 50px 0 100px;
        background: #fffdf8;
    }

    .service-section .service-card {
        height: 100%;
        position: relative;
        background: rgba(255,255,255,.88);
        border: 1px solid var(--astro-border);
        border-radius: 20px;
        padding: 35px 28px;
        transition: all .35s ease;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(40,55,48,.05);
    }

    .service-section .service-card::before {
        content: "";
        position: absolute;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: rgba(207,161,58,.07);
        right: -35px;
        top: -35px;
        transition: .4s ease;
    }

    .service-section .service-card:hover {
        transform: translateY(-8px);
        border-color: rgba(207,161,58,.55);
        box-shadow: 0 20px 45px rgba(40,55,48,.12);
    }

    .service-section .service-card:hover::before {
        transform: scale(1.4);
    }

    .service-icon {
        width: 70px;
        height: 70px;
        border-radius: 18px;
        background: #f8f0dc;
        border: 1px solid #ead9ad;
        color: var(--astro-green);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 31px;
        margin-bottom: 25px;
    }

    .service-section .service-card h3 {
        font-family: Georgia, "Times New Roman", serif;
        color: var(--astro-green);
        font-size: 25px;
        margin-bottom: 14px;
    }

    .service-section .service-card p {
        color: var(--astro-muted);
        line-height: 1.7;
        font-size: 15px;
        margin-bottom: 20px;
    }

    .service-link {
        color: var(--astro-green);
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
    }

    .service-link i {
        transition: .25s ease;
    }

    .service-link:hover i {
        margin-left: 5px;
    }

    /* =========================
       FEATURED SECTION
    ========================= */

    .featured-service {
        padding: 100px 0;
        background: var(--astro-green);
        position: relative;
        overflow: hidden;
    }

    .featured-service::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border: 1px solid rgba(229,197,109,.15);
        border-radius: 50%;
        right: -180px;
        top: -180px;
    }

    .featured-service::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        border: 1px solid rgba(229,197,109,.10);
        border-radius: 50%;
        left: -180px;
        bottom: -180px;
    }

    .featured-content {
        position: relative;
        z-index: 2;
    }

    .featured-service .section-label {
        color: var(--astro-light-gold);
    }

    .featured-service .section-title {
        color: #fffdf8;
    }

    .featured-service .section-text {
        color: rgba(255,255,255,.75);
        margin: 0;
    }

    .featured-box {
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(229,197,109,.25);
        border-radius: 20px;
        padding: 35px;
        backdrop-filter: blur(8px);
    }

    .featured-item {
        display: flex;
        gap: 15px;
        margin-bottom: 25px;
    }

    .featured-item:last-child {
        margin-bottom: 0;
    }

    .featured-check {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(229,197,109,.16);
        color: var(--astro-light-gold);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .featured-item h5 {
        color: #fff;
        margin-bottom: 5px;
        font-size: 17px;
    }

    .featured-item p {
        color: rgba(255,255,255,.65);
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
    }

    /* =========================
       WHY CHOOSE
    ========================= */

    .why-section {
        padding: 100px 0;
        background: var(--astro-cream);
    }

    .why-card {
        background: #fffdf8;
        border: 1px solid var(--astro-border);
        padding: 30px 25px;
        border-radius: 18px;
        height: 100%;
        transition: .3s ease;
    }

    .why-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(40,55,48,.08);
    }

    .why-number {
        font-family: Georgia, serif;
        color: var(--astro-gold);
        font-size: 35px;
        margin-bottom: 15px;
    }

    .why-card h4 {
        color: var(--astro-green);
        font-family: Georgia, serif;
        font-size: 21px;
    }

    .why-card p {
        color: var(--astro-muted);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

    /* =========================
       CTA
    ========================= */

    .services-cta {
        padding: 90px 0;
        background: #fffdf8;
    }

    .cta-box {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #064b3c, #033b30);
        border-radius: 25px;
        padding: 65px 50px;
        text-align: center;
        box-shadow: 0 20px 50px rgba(6,75,60,.15);
    }

    .cta-box::before {
        content: "✦";
        position: absolute;
        font-size: 180px;
        color: rgba(229,197,109,.06);
        left: 30px;
        top: -55px;
    }

    .cta-box::after {
        content: "✦";
        position: absolute;
        font-size: 180px;
        color: rgba(229,197,109,.06);
        right: 30px;
        bottom: -80px;
    }

    .cta-box h2 {
        position: relative;
        z-index: 2;
        color: #fff;
        font-family: Georgia, serif;
        font-size: clamp(32px, 4vw, 48px);
        margin-bottom: 15px;
    }

    .cta-box p {
        position: relative;
        z-index: 2;
        max-width: 650px;
        margin: 0 auto 30px;
        color: rgba(255,255,255,.75);
        line-height: 1.8;
    }

    .cta-box .gold-btn {
        position: relative;
        z-index: 2;
    }

    /* =========================
       RESPONSIVE
    ========================= */

    @media (max-width: 991px) {

        .services-hero {
            padding: 70px 0;
        }

        .zodiac-wrapper {
            width: 330px;
            height: 330px;
            margin-top: 50px;
        }

        .services-intro,
        .why-section,
        .featured-service {
            padding: 70px 0;
        }
    }

    @media (max-width: 767px) {

        .services-hero {
            min-height: auto;
            padding: 60px 0;
            text-align: center;
        }

        .services-hero p {
            font-size: 15px;
        }

        .outline-btn {
            margin-left: 0;
            margin-top: 12px;
        }

        .zodiac-wrapper {
            width: 280px;
            height: 280px;
        }

        .zodiac-center {
            width: 85px;
            height: 85px;
            font-size: 12px;
        }

        .zodiac-symbol {
            font-size: 21px;
        }

        .z2 { right: 48px; }
        .z3 { right: 8px; }
        .z5 { right: 8px; }
        .z6 { right: 48px; }
        .z8 { left: 48px; }
        .z9 { left: 8px; }
        .z11 { left: 8px; }
        .z12 { left: 48px; }

        .service-section {
            padding-bottom: 70px;
        }

        .featured-box {
            margin-top: 35px;
        }

        .cta-box {
            padding: 50px 25px;
        }
    }

    @media (max-width: 480px) {

        .services-hero h1 {
            font-size: 39px;
        }

        .zodiac-wrapper {
            width: 245px;
            height: 245px;
        }

        .zodiac-circle {
            inset: 15px;
        }

        .service-card {
            padding: 28px 22px;
        }

        .gold-btn,
        .outline-btn {
            width: 100%;
            justify-content: center;
        }
    }


    .gallery-page {
        background: #fcfaf3;
        padding-bottom: 80px;
    }

    /* Gallery Hero */
    /* .gallery-hero {
        position: relative;
        min-height: 380px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background:
            linear-gradient(90deg,
                rgba(252,250,243,0.98) 0%,
                rgba(252,250,243,0.94) 42%,
                rgba(252,250,243,0.35) 75%,
                rgba(252,250,243,0.1) 100%),
            url('assets/images/gallery-hero.jpg') center right / cover no-repeat;
    }*/

    .gallery-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            90deg,
            rgba(255, 250, 239, 0.97) 0%,
            rgba(255, 250, 239, 0.88) 0%,
            rgba(255, 250, 239, 0.35) 75%,
            rgba(255, 250, 239, 0.05) 100%
        );
    }

    /* .gallery-hero-content {
        position: relative;
        z-index: 2;
        max-width: 650px;
    }

    .gallery-small-title {
        color: #bd8b2d;
        font-size: 14px;
        letter-spacing: 4px;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .gallery-hero h1 {
        font-family: Georgia, serif;
        font-size: clamp(42px, 5vw, 68px);
        line-height: 1.05;
        color: #064c43;
        margin-bottom: 20px;
    }

    .gallery-hero h1 span {
        color: #c99a3d;
    }

    .gallery-hero p {
        color: #4d5b58;
        font-size: 17px;
        line-height: 1.8;
        max-width: 570px;
    } */

    /* Section Heading */
    .gallery-section {
        padding: 75px 0;
        position: relative;
    }

    .gallery-heading {
        text-align: center;
        margin-bottom: 45px;
    }

    .gallery-heading .subtitle {
        color: #c99a3d;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .gallery-heading h2 {
        font-family: Georgia, serif;
        color: #064c43;
        font-size: clamp(32px, 4vw, 48px);
        margin-bottom: 12px;
    }

    .gallery-heading p {
        color: #66716e;
        max-width: 650px;
        margin: auto;
        line-height: 1.7;
    }

    /* Gallery */
    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 8px 30px rgba(33, 54, 47, .10);
        cursor: pointer;
        height: 330px;
    }

    .gallery-item.large {
        height: 500px;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .6s ease;
    }

    .gallery-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            rgba(0, 45, 39, .75),
            transparent 55%
        );
        opacity: 0;
        transition: .4s ease;
    }

    .gallery-overlay {
        position: absolute;
        left: 25px;
        right: 25px;
        bottom: 22px;
        z-index: 3;
        color: #fff;
        transform: translateY(15px);
        opacity: 0;
        transition: .4s ease;
    }

    .gallery-overlay h4 {
        font-family: Georgia, serif;
        font-size: 21px;
        color: #ffffff;
        margin-bottom: 5px;
    }

    .gallery-overlay span {
        color: #e7c46f;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .gallery-item:hover img {
        transform: scale(1.08);
    }

    .gallery-item:hover::after,
    .gallery-item:hover .gallery-overlay {
        opacity: 1;
    }

    .gallery-item:hover .gallery-overlay {
        transform: translateY(0);
    }

    /* Achievement Section */
    .achievement-box {
        margin-top: 70px;
        background: #064c43;
        border-radius: 25px;
        padding: 55px 40px;
        position: relative;
        overflow: hidden;
    }

    .achievement-box::before {
        content: "✦";
        position: absolute;
        right: 35px;
        top: 10px;
        font-size: 150px;
        color: rgba(211,168,76,.10);
    }

    .achievement-box h3 {
        font-family: Georgia, serif;
        color: #fff;
        font-size: 35px;
        margin-bottom: 12px;
    }

    .achievement-box p {
        color: rgba(255,255,255,.75);
        max-width: 650px;
        line-height: 1.8;
    }

    .achievement-btn {
        display: inline-block;
        margin-top: 15px;
        background: #d6ad52;
        color: #15352f;
        padding: 13px 25px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        transition: .3s;
    }

    .achievement-btn:hover {
        background: #edc96f;
        color: #15352f;
    }

    /* Lightbox */
    .gallery-lightbox {
        position: fixed;
        inset: 0;
        background: rgba(0, 30, 26, .92);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        padding: 30px;
    }

    .gallery-lightbox.active {
        display: flex;
    }

    .gallery-lightbox img {
        max-width: 92%;
        max-height: 88vh;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0,0,0,.4);
    }

    .lightbox-close {
        position: absolute;
        top: 25px;
        right: 35px;
        width: 45px;
        height: 45px;
        border: 1px solid rgba(255,255,255,.4);
        background: rgba(255,255,255,.1);
        color: #fff;
        border-radius: 50%;
        font-size: 25px;
        cursor: pointer;
    }

    @media(max-width: 767px) {

        .gallery-hero {
            min-height: 420px;
            background:
                linear-gradient(
                    rgba(252,250,243,.92),
                    rgba(252,250,243,.75)
                ),
                url('assets/images/gallery-hero.jpg') center / cover no-repeat;
        }

        .gallery-hero h1 {
            font-size: 42px;
        }

        .gallery-hero p {
            font-size: 15px;
        }

        .gallery-section {
            padding: 55px 0;
        }

        .gallery-item,
        .gallery-item.large {
            height: 280px;
        }

        .achievement-box {
            padding: 40px 25px;
        }

        .achievement-box h3 {
            font-size: 28px;
        }
    }

     .contact-page {
        background: #fcfaf3;
        color: #173f38;
    }

    /* ================= HERO ================= */

    .contact-hero {
        position: relative;
        min-height: 350px;
        display: flex;
        align-items: center;
        overflow: hidden;

        background:
            linear-gradient(
                90deg,
                rgba(252,250,243,.98) 0%,
                rgba(252,250,243,.94) 45%,
                rgba(252,250,243,.45) 100%
            ),
            url('assets/images/contact-hero.jpg')
            center right / cover no-repeat;
    }

    .contact-hero-content {
        max-width: 650px;
        position: relative;
        z-index: 2;
    }

    .contact-label {
        color: #c59638;
        font-size: 13px;
        letter-spacing: 4px;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 14px;
    }

    .contact-hero h1 {
        font-family: Georgia, serif;
        font-size: clamp(42px, 5vw, 64px);
        line-height: 1.08;
        color: #064c43;
        margin-bottom: 18px;
    }

    .contact-hero h1 span {
        color: #c59638;
    }

    .contact-hero p {
        color: #52615d;
        font-size: 17px;
        line-height: 1.8;
        max-width: 580px;
    }


    /* ================= CONTACT SECTION ================= */

    .contact-section {
        padding: 80px 0;
    }

    .contact-heading {
        margin-bottom: 45px;
    }

    .contact-heading .small-title {
        color: #c59638;
        font-size: 13px;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .contact-heading h2 {
        font-family: Georgia, serif;
        font-size: 42px;
        color: #064c43;
        margin-bottom: 15px;
    }

    .contact-heading p {
        color: #66736f;
        line-height: 1.8;
        max-width: 650px;
    }


    /* ================= INFO CARDS ================= */

    .contact-info-card {
        background: #fff;
        border: 1px solid rgba(198,150,55,.18);
        border-radius: 18px;
        padding: 25px;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 18px;
        box-shadow: 0 8px 25px rgba(20,50,43,.07);
        transition: .3s;
    }

    .contact-info-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(20,50,43,.12);
    }

    .contact-icon {
        min-width: 55px;
        height: 55px;
        border-radius: 50%;
        background: #f4e4bd;
        color: #a87920;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23px;
    }

    .contact-info-card h5 {
        font-family: Georgia, serif;
        color: #064c43;
        margin-bottom: 5px;
        font-size: 19px;
    }

    .contact-info-card p {
        margin: 0;
        color: #66716e;
        font-size: 14px;
        line-height: 1.6;
    }

    .contact-info-card a {
        color: #66716e;
        text-decoration: none;
    }

    .contact-info-card a:hover {
        color: #b8872c;
    }


    /* ================= FORM ================= */

    .contact-form-box {
        background: #064c43;
        border-radius: 25px;
        padding: 45px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 15px 45px rgba(6,76,67,.16);
    }

    .contact-form-box::before {
        content: "✦";
        position: absolute;
        right: 25px;
        top: -35px;
        font-size: 150px;
        color: rgba(214,173,82,.08);
    }

    .contact-form-box h3 {
        color: #fff;
        font-family: Georgia, serif;
        font-size: 32px;
        margin-bottom: 8px;
    }

    .contact-form-box .form-subtitle {
        color: rgba(255,255,255,.72);
        margin-bottom: 28px;
        font-size: 14px;
    }

    .contact-form .form-control,
    .contact-form .form-select {
        height: 53px;
        border: 1px solid rgba(255,255,255,.25);
        background: rgba(255,255,255,.09);
        color: #fff;
        border-radius: 8px;
        padding: 12px 15px;
    }

    .contact-form textarea.form-control {
        height: 125px;
        resize: none;
    }

    .contact-form .form-control::placeholder {
        color: rgba(255,255,255,.65);
    }

    .contact-form .form-control:focus,
    .contact-form .form-select:focus {
        border-color: #d7ad54;
        box-shadow: 0 0 0 3px rgba(215,173,84,.12);
        background: rgba(255,255,255,.12);
        color: #fff;
    }

    .contact-form .form-select option {
        color: #222;
        background: #fff;
    }

    .contact-submit {
        border: none;
        background: #d7ad54;
        color: #173b35;
        padding: 14px 28px;
        border-radius: 8px;
        font-weight: 600;
        transition: .3s;
    }

    .contact-submit:hover {
        background: #ebc66e;
        transform: translateY(-2px);
    }


    /* ================= QUICK CTA ================= */

    .quick-contact {
        margin-top: 25px;
        padding: 22px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 12px;
    }

    .quick-contact span {
        color: rgba(255,255,255,.7);
        font-size: 13px;
    }

    .quick-contact a {
        color: #e2bd65;
        text-decoration: none;
        font-weight: 600;
        margin-right: 20px;
    }


    /* ================= MAP ================= */

    .map-section {
        padding-bottom: 80px;
    }

    .map-box {
        overflow: hidden;
        border-radius: 22px;
        height: 420px;
        box-shadow: 0 10px 35px rgba(20,50,43,.1);
        border: 5px solid #fff;
    }

    .map-box iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }


    /* ================= BOTTOM CTA ================= */

    .contact-cta {
        background: #f1e5c9;
        padding: 55px 30px;
        border-radius: 25px;
        text-align: center;
        margin-bottom: 80px;
    }

    .contact-cta h3 {
        font-family: Georgia, serif;
        color: #064c43;
        font-size: 34px;
        margin-bottom: 12px;
    }

    .contact-cta p {
        color: #5c6965;
        margin-bottom: 25px;
    }

    .gold-btn {
        display: inline-block;
        background: #d4aa4d;
        color: #173b35;
        text-decoration: none;
        padding: 14px 28px;
        border-radius: 8px;
        font-weight: 600;
        margin: 5px;
        transition: .3s;
    }

    .gold-btn:hover {
        background: #e9c469;
        color: #173b35;
        transform: translateY(-2px);
    }

    .green-btn {
        display: inline-block;
        background: #064c43;
        color: #fff;
        text-decoration: none;
        padding: 14px 28px;
        border-radius: 8px;
        font-weight: 600;
        margin: 5px;
        transition: .3s;
    }

    .green-btn:hover {
        background: #0b6358;
        color: #fff;
    }


    /* ================= RESPONSIVE ================= */

    @media(max-width: 991px) {

        .contact-form-box {
            margin-top: 20px;
        }

        .contact-hero {
            min-height: 400px;
        }

    }

    @media(max-width: 767px) {

        .contact-hero {
            min-height: 430px;

            background:
                linear-gradient(
                    rgba(252,250,243,.91),
                    rgba(252,250,243,.82)
                ),
                url('assets/images/contact-hero.jpg')
                center / cover no-repeat;
        }

        .contact-hero h1 {
            font-size: 42px;
        }

        .contact-hero p {
            font-size: 15px;
        }

        .contact-section {
            padding: 55px 0;
        }

        .contact-heading h2 {
            font-size: 34px;
        }

        .contact-form-box {
            padding: 30px 22px;
        }

        .contact-form-box h3 {
            font-size: 27px;
        }

        .map-box {
            height: 320px;
        }

        .contact-cta {
            padding: 40px 20px;
        }

        .contact-cta h3 {
            font-size: 28px;
        }

    }

    /* ================= YEAR TABS ================= */

.gallery-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 auto 45px;
}

.gallery-tab {
    border: 1px solid #d7b45e;
    background: #fffdf7;
    color: #064c43;
    padding: 11px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}

.gallery-tab:hover {
    background: #f4e6c5;
    color: #064c43;
    transform: translateY(-2px);
}

.gallery-tab.active {
    background: #064c43;
    color: #fff;
    border-color: #064c43;
    box-shadow: 0 7px 18px rgba(6, 76, 67, .18);
}


/* ================= GALLERY FILTER ================= */

.gallery-year-item {
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.gallery-year-item.hide-gallery {
    display: none;
}


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

@media (max-width: 575px) {

    .gallery-tabs {
        gap: 8px;
        margin-bottom: 30px;
    }

    .gallery-tab {
        padding: 9px 19px;
        font-size: 13px;
    }

}

/* =========================================
   ASTROLOGY SERVICES
========================================= */

.astrology-services {
    padding: 90px 0;
    background: #faf8f1;
}


/* HEADING */

.services-heading {
    max-width: 760px;
    margin: 0 auto 55px;
}

.services-heading span {
    display: inline-block;
    color: #c0922d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.services-heading h2 {
    font-family: Georgia, "Times New Roman", serif;
    color: #073f38;
    font-size: 44px;
    line-height: 1.2;
    margin-bottom: 18px;
}

.services-heading p {
    color: #626762;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   SERVICE CARD
========================================= */

.astrology-service-card {
    width: 100%;
    /* min-height: 330px; */

    display: grid;
    grid-template-columns: 45% 55%;

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 18px;

    padding: 22px;

    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.055);

    transition: all .35s ease;
}


.astrology-service-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.09);
}


/* =========================================
   IMAGE
========================================= */

.service-img {
    /* height: 285px; */
    overflow: hidden;
    border-radius: 7px;
}

.service-img img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .5s ease;
}

.astrology-service-card:hover .service-img img {
    transform: scale(1.04);
}


/* =========================================
   CONTENT
========================================= */

.service-info {
    padding: 5px 20px 5px 30px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* TOP */

.service-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 12px;
}

.service-no {
    color: #c7952e;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;
}


/* ROUND ICON */

.service-round-icon {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #104e47;

    color: #ffffff;

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

    font-size: 17px;

    box-shadow:
        0 5px 12px rgba(7, 63, 56, .15);
}


/* TITLE */

.service-info h3 {
    font-family: Georgia, "Times New Roman", serif;

    color: #073f38;

    font-size: 27px;

    margin: 0 0 10px;
}


/* DESCRIPTION */

.service-info p {
    color: #666b68;

    font-size: 17px;

    line-height: 1.7;

    max-width: 560px;

    margin-bottom: 12px;
}


/* LINK */

.service-info a {
    width: fit-content;

    color: #c18e27;

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    transition: .3s;
}

.service-info a:hover {
    color: #073f38;

    transform: translateX(4px);
}


/* =========================================
   REVERSE ROW
========================================= */

.astrology-service-card.reverse {
    grid-template-columns: 55% 45%;
}


/* image right */

.astrology-service-card.reverse .service-img {
    order: 2;
}


/* content left */

.astrology-service-card.reverse .service-info {
    order: 1;

    padding-left: 0;
    padding-right: 30px;
}


/* =========================================
   PAGE BREAK
========================================= */

.services-page-break {
    height: 60px;

    position: relative;
}

.services-page-break::after {
    content: "MORE SERVICES";

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    color: #c0922d;

    font-size: 10px;

    letter-spacing: 3px;

    background: #faf8f1;

    padding: 0 18px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .astrology-service-card,
    .astrology-service-card.reverse {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .service-img,
    .astrology-service-card .service-img {
        order: 1;
        height: 300px;
    }

    .service-info,
    .astrology-service-card.reverse .service-info {
        order: 2;
        padding: 25px 5px 10px;
    }

}


@media (max-width: 575px) {

    .astrology-services {
        padding: 60px 0;
    }

    .services-heading {
        margin-bottom: 35px;
    }

    .services-heading h2 {
        font-size: 31px;
    }

    .services-heading p {
        font-size: 14px;
    }

    .astrology-service-card,
    .astrology-service-card.reverse {
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 15px;
    }

    .service-img,
    .astrology-service-card .service-img {
        height: 220px;
    }

    .service-info,
    .astrology-service-card.reverse .service-info {
        padding: 20px 5px 10px;
    }

    .service-info h3 {
        font-size: 24px;
    }

    .service-info p {
        font-size: 17px;
    }

    .services-page-break {
        height: 35px;
    }

}

/* HERO */
        .video-hero {
            position: relative;
            min-height: 650px;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        /* VIDEO */
        .video-hero video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -3;
        }

        /* DARK / GOLD OVERLAY */
        .video-overlay {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(
                    90deg,
                    rgba(248, 241, 224, 0.98) 0%,
                    rgba(248, 241, 224, 0.90) 38%,
                    rgba(248, 241, 224, 0.45) 65%,
                    rgba(20, 35, 45, 0.30) 100%
                );
            z-index: -2;
        }

        /* GOLD BOTTOM EFFECT */
        .video-hero::after {
            content: "";
            position: absolute;
            left: -5%;
            bottom: -100px;
            width: 110%;
            height: 180px;
            background: #d5a83d;
            transform: rotate(-3deg);
            z-index: -1;
            opacity: .85;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding: 80px 0;
        }

        .hero-small-title {
            color: #b78721;
            font-size: 14px;
            letter-spacing: 2px;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .hero-title {
            font-family: 'DM Serif Display', serif;
            color: #073c42;
            font-size: clamp(45px, 5vw, 78px);
            line-height: 1;
            margin-bottom: 20px;
        }

        .hero-title span {
            color: #c99b35;
        }

        .hero-description {
            max-width: 550px;
            color: #34494d;
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        /* BUTTON */
        .hero-btn {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            padding: 15px 28px;
            background: #d5a83d;
            color: #fff;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            transition: .3s;
        }

        .hero-btn:hover {
            background: #b88720;
            color: #fff;
            transform: translateY(-3px);
        }

        /* INFO BOXES */
        .hero-features {
            display: flex;
            gap: 12px;
            margin-top: 45px;
            flex-wrap: wrap;
        }

        .feature-box {
            width: 145px;
            min-height: 90px;
            background: rgba(255,255,255,.90);
            border-radius: 15px;
            padding: 15px 10px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
            backdrop-filter: blur(5px);
        }

        .feature-box .icon {
            font-size: 25px;
            color: #c99b35;
            margin-bottom: 7px;
        }

        .feature-box h6 {
            font-size: 13px;
            color: #073c42;
            margin: 0;
            font-weight: 600;
        }

        .feature-box small {
            color: #777;
            font-size: 10px;
        }

        /* VIDEO CONTROL */
        .video-control {
            position: absolute;
            right: 30px;
            bottom: 30px;
            z-index: 10;
        }

        .video-control button {
            width: 50px;
            height: 50px;
            border: 1px solid rgba(255,255,255,.7);
            background: rgba(0,0,0,.35);
            color: #fff;
            border-radius: 50%;
            backdrop-filter: blur(5px);
            transition: .3s;
        }

        .video-control button:hover {
            background: #d5a83d;
        }

        /* MOBILE */
        @media(max-width: 767px) {

            .video-hero {
                min-height: 750px;
            }

            .video-overlay {
                background:
                    linear-gradient(
                        180deg,
                        rgba(248,241,224,.95),
                        rgba(248,241,224,.72),
                        rgba(248,241,224,.90)
                    );
            }

            .hero-content {
                padding: 60px 20px;
            }

            .hero-title {
                font-size: 45px;
            }

            .hero-description {
                font-size: 15px;
            }

            .hero-features {
                gap: 8px;
            }

            .feature-box {
                width: calc(50% - 5px);
            }

            .video-control {
                right: 15px;
                bottom: 15px;
            }
        }