/* ===================================================
   RESET & VARIABLES
=================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
:root {
  --maroon: #8b1a1a;
  --maroon-dk: #6d1313;
  --maroon-lt: #a82020;
  --cream: #f2ede6;
  --cream2: #ede7df;
  --white: #ffffff;
  --text: #1a1a1a;
  --text-mid: #4a4a4a;
  --text-lt: #888;
  --border: #ddd5c8;
  --gold: #c9a04a;
  --r: 14px;
  --tr: all 0.3s ease;
}
body {
  font-family: 'DM Sans Regular';
  color: var(--text);
  background: linear-gradient(0deg, #FAF8F6 0%, #FAF8F6 100%), #FFF;
  overflow-x: hidden;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background: var(--maroon);
  border-radius: 3px;
}

/* ===================================================
   NAVBAR
=================================================== */
.navbar {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9000;
  transition: box-shadow 0.3s;
  border-radius: 20px;
  background: #fff;
  box-shadow: 4px 4px 30px 0 rgba(197, 197, 200, 0.25);
}
.navbar.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: fixed;
  border-radius: 0;
   animation: slideDown 0.35s ease-out;
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}
.nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    transition: padding 0.3s;
    gap: 24px;
}
/* .navbar.scrolled .nav-inner {
  padding: 10px 40px;
} */

.nav-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}
.nav-brand-icon {
  width: 56px;
  height: 53px;
  img{
    border-radius: 10px;
  }
}
.nav-brand-text {
  color: #780C0D;
    font-family: 'Aboreto Regular';
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 123.077%;
    letter-spacing: -0.6px;
}


/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
      padding: 7px 12px;
    border-radius: 8px;
    transition: var(--tr);
    white-space: nowrap;
    position: relative;
    color: #252525;
    font-family: 'DM Sans Bold';
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    line-height: 22px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--maroon);
  transform: scaleX(0);
  transition: transform 0.25s;
  border-radius: 2px;
}
.nav-links a:hover {
  color: var(--maroon);
}
.nav-links a:hover::after {
  transform: scaleX(1);
}

/* Right side: book btn + hamburger */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.btn-book-nav {
  padding: 12px 28px;
    transition: var(--tr);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #FFF;
    font-family: 'DM Sans Medium';
    font-size: 14.937px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #780C0D 0%, #8C0100 100%), rgba(0, 0, 0, 0.00);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.btn-book-nav:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(139, 26, 26, 0.3);
}
.login {
    color: #780C0D;
    font-family: 'DM Sans Medium';
    font-size: 14.901px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    margin-right: 0;
}
/* Hamburger — only on mobile */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
}
.hamburger-btn:hover {
  background: rgba(139, 26, 26, 0.07);
}
.hamburger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--maroon);
  border-radius: 2px;
  transition: var(--tr);
}

/* ---- Responsive: hide links, show hamburger ---- */
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
  .hamburger-btn {
    display: flex;
  }
  .nav-inner {
    padding: 12px 20px;
  }
  .navbar.scrolled .nav-inner {
    padding: 10px 20px;
  }
}

/* ===================================================
   OFFCANVAS MENU
=================================================== */
.oc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(10, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
}
.oc-overlay.open {
  opacity: 1;
  visibility: visible;
}

.offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 9999;
  width: 340px;
  max-width: 90vw;
  background: var(--white);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.offcanvas.open {
  transform: translateX(0);
}

.oc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--maroon);
}
.oc-head-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oc-head-brand i {
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
}
.oc-head-brand span {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.oc-close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tr);
}
.oc-close:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(90deg);
}

.oc-nav {
  flex: 1;
  padding: 20px 0;
}
.oc-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    font-size: 20px;
    font-weight: 500;
    color: var(--text);
    border-left: 3px solid transparent;
    transition: var(--tr);
    font-family: 'DM Sans Medium';
    .cta-contact-ico {
    width: 36px;
    height: 36px;
    border-radius: 6px;
}
}
.oc-nav a:hover {
  background: rgba(139, 26, 26, 0.05);
  border-left-color: var(--maroon);
  color: var(--maroon);
  padding-left: 34px;
}
.oc-nav a i {
  width: 18px;
  color: var(--maroon);
  font-size: 15px;
  flex-shrink: 0;
}
.oc-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 28px;
}

.oc-foot {
  padding: 22px 28px;
  border-top: 1px solid var(--border);
      .login {
        margin-right: 20PX;
        text-align: center;
        display: block;
        margin-bottom: 20px;
        font-size: 20px;
    }
}
.login {
  color: #fff;

}
.oc-foot-btn {
  width: 100%;
  padding: 13px;
  background: var(--maroon);
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: var(--tr);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.oc-foot-btn:hover {
  background: var(--maroon-dk);
}
.oc-contact {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-lt);
  text-align: center;
}
.oc-contact a {
  color: var(--maroon);
  font-weight: 600;
}

/* ===================================================
   BANNER
=================================================== */
.banner {
    /* margin-top: 8px; */
  img {
    width: 100%;
    border-radius: 0 0 0 0;
    background: #a00000;
  }
}
/* ===================================================
   HERO SECTION 
=================================================== */
.hero {
  padding: 140px 40px 100px;
  display: flex;
  align-items: center;
}
.hero-inner {
  max-width: 1280px;
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1fr .67fr;
gap: 60px;
align-items: center;
}

/* LEFT SIDE */
.hero-left {
    position: relative;
}
/* my code */

 .head-font h1{
  font-size: 40px;
  span{
    font-size: 40px;
  }
}
.hero-left .text-font {font-size: 22px;}
.hero-left .body-font{font-size: 14px;}
.hero-title .head-font h1{
  font-size: 45px;
span{
  font-size: 45px;
}
}
.feat-card-big-icon .icon-box {
  width:100px;
  transition: transform 0.3s ease;
}

/* my code */
.hero-title {
  margin-bottom: 26px;
  text-transform: uppercase;
  color: #780C0D;
font-family: 'Aboreto Regular';
font-size: 65px;
font-style: normal;
font-weight: 400;
line-height: 172.308%;
letter-spacing: -2.4px;
span{
    font-size: 75px;
}
}
.hero-subtitle {
  color: #1A1A1A;
font-family: 'Abhaya Libre Bold';
font-size: 35.523px;
font-style: normal;
font-weight: 700;
line-height: 119.358%;
  margin-bottom: 16px;
}
.hero-body {
  color: #3A3A3A;
font-size: 21px;
font-style: normal;
font-weight: normal;
line-height: 152.381%;
margin-bottom: 34px;
}
.hero-body strong {
  font-family: 'DM Sans Bold';
  font-weight: normal;
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.btn-hero-primary {
  padding: 21px 29px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--tr);
    border: none;
    cursor: pointer;
    color: #FFF;
    text-align: center;
    font-family: 'DM Sans Bold';
    font-size: 25px;
    font-style: normal;
    font-weight: normal;
    line-height: 28px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #780C0D 0%, #8C0100 100%), rgba(0, 0, 0, 0.00);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
}
.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(139, 26, 26, 0.38);
}

.btn-hero-outline {
  padding: 20px 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--tr);
    color: #780C0D;
    text-align: center;
    font-family: 'DM Sans Bold';
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    border-radius: 9999px;
    border: 1.6px solid rgba(120, 12, 13, 0.20);
    background: rgba(255, 255, 255, 0.90);
}
.btn-hero-outline:hover {
  border-color: var(--maroon);
  color: var(--maroon);
  transform: translateY(-2px);
}

/* Feature mini cards row */
.hero-features {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hfeat {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: var(--tr);
    cursor: default;
    flex: 1;
    border-radius: 24px;
    border: 0.8px solid #EBE8E0;
    background: #FFF;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    width: 183px;
    height: 174px;
}
.hfeat:first-child {
background: linear-gradient(135deg, #780C0D 0%, #8C0100 100%), rgba(0, 0, 0, 0.00);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 20px 60px -15px rgba(120, 12, 13, 0.08);
}
.hfeat:last-child{
border: 0.8px solid #1F1F1F;
background: #F7F5F0;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}
.hfeat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.hfeat-icon {
  width: 48px;
height: 48px;
border-radius: 16px;
background: rgba(227, 149, 147, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.hfeat:first-child .hfeat-icon {
  background: #FFBFD2;
}
.hfeat h5 {
  color: #1F2937;
    font-family: 'Abhaya Libre Bold';
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 112%;
    margin-bottom: 4px;
}
.hfeat:first-child h5 {
  color: #fff;
}
.hfeat p {
  color: #4B5563;
font-family: 'DM Sans Bold';
font-size: 13.871px;
font-style: normal;
font-weight: 700;
line-height: 144.187%;
margin-bottom: 0;
}
.hfeat:first-child p {
  color: rgba(255, 255, 255, 0.80);
}
.multipet-icon{
    margin-bottom: 15px;
    display: flex;
    img{
        width: 40px;
        height: 40px;
        padding: 1.6px 1.4px 1.4px 1.6px;
        border: 1.6px solid #FFF;
        border-radius: 50%;
        object-fit: cover;
        &:last-child{
            margin-left: -15px;
        }
    }
}
/* RIGHT SIDE */
.hero-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-photo-wrap {
  position: relative;
}
.hero-photo-card {
  width: 100%;
  overflow: hidden;
  border-radius: 40px;
    background: rgba(0, 0, 0, 0.00);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}


/* 24/7 badge – top right corner */
.badge-247 {
  position: absolute;
    top: -18px;
    right: -15px;
    width: 147.349px;
    height: 137.871px;
    transform: rotate(-1deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 3;
    border-radius: 16px;
    background: linear-gradient(135deg, #780C0D 0%, #8C0100 100%), rgba(0, 0, 0, 0.00);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.badge-247 strong {
      color: #FFF;
    font-family: 'Abhaya Libre Bold';
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    line-height: 41.111px;
    margin-bottom: 9px;
}
.badge-247 span {
  color: #FFF;
    font-family: 'DM Sans Bold';
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    line-height: 20px;
}

/* Video·Call·Chat card – overlapping bottom left */
.vc-card {
  position: absolute;
    bottom: -32px;
    left: -30px;
    background: #fff;
    border-radius: 14px;
    padding: 25px 33px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
    animation: float-vc 3.5s ease-in-out infinite;
    min-width: 190px;
}
@keyframes float-vc {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.vc-icon {
  width: 56px;
height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
background: linear-gradient(135deg, rgba(120, 12, 13, 0.10) 0%, rgba(227, 149, 147, 0.20) 100%), rgba(0, 0, 0, 0.00);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc-text strong {
  color: #1F2937;
    font-family: 'Abhaya Libre Bold';
    font-size: 19.976px;
    font-style: normal;
    font-weight: normal;
    line-height: 140.169%;
}
.vc-text span {
  color: #4B5563;
    font-size: 13.858px;
    font-style: normal;
    font-weight: 400;
    line-height: 144.321%;
}

/* Learn about vet button below photo */
.learn-btn-wrap {
  margin-top: 61px;
text-align: center;
}
.btn-learn {
  background: transparent;
  color: var(--text);
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: var(--tr);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-learn:hover {
  border-color: var(--maroon);
  color: var(--maroon);
  transform: translateY(-2px);
}

.container{
    max-width:1280px;
    margin-inline: auto;
}
.text-center{
    text-align: center;
}
.mb-90{
    margin-bottom: 90px;
}
/* ===================================================
   BEST CHOICE SECTION
=================================================== */
.best-choice-sec {
  background: linear-gradient(0deg, #7E1813 0%, #7E1813 100%), rgba(0, 0, 0, 0.00);
  position: relative;
  overflow: hidden;
  padding: 80px 60px;
}
.best-choice-sec::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
  pointer-events: none;
}

/* Header */
.bc-pill {
  display: inline-block;
    padding: 17px 33px;
    margin-bottom: 24px;
    color: #F4EBEB;
    text-align: center;
    font-family: 'DM Sans Bold';
    font-size: 25px;
    font-style: normal;
    font-weight: normal;
    line-height: 20px;
    border-radius: 9999px;
    border: 0.8px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.10);
}
.bc-title {
  margin-bottom: 14px;
    color: #FFF;
    text-align: center;
    font-family: 'Aboreto Regular';
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: 98.4px;
}
.bc-sub {
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-family: 'Abhaya Libre Bold';
    font-size: 35px;
    font-style: normal;
    font-weight: normal;
    line-height: 40px;
}

/* 3-col × 2-row grid */
.feat-grid {
  display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}
.feat-card-big {
    padding: 30px 26px 26px;
    text-align: left;
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1.6px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.10);
    z-index: 1;
    &::before{
        content: '';
        width: 96px;
        height: 96px;
        border-radius: 9999px;
        opacity: 0.3;
        background: linear-gradient(135deg, #FDA4AF 0%, #B45454 100%), rgba(0, 0, 0, 0.00);
        filter: blur(20px);
        position: absolute;
        right: -30px;
        top: -30px;
        z-index: -1;
        transition: ease-in-out .5s;
    }
}
.feat-card-big:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.2);
  &::before{
    transform: scale(20);
  }
}
.feat-card-big-icon {
  width: 80px;
    height: 80px;
    padding: 13.4px 4.6px 12.6px 12.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 24px;
    transition: var(--tr);
    flex-shrink: 0;
    border-radius: 16px;
    background: #C97875;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.feat-card-big:hover .feat-card-big-icon {
  transform: scale(1.08);
}
.feat-card-big h4 {
      margin-bottom: 15px;
    color: #FFF;
    font-family: 'DM Sans Bold';
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 32px;
}
.feat-card-big p {
  color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    line-height: 144.444%;
    margin-bottom: 18px;
}
.feat-learn-more {
  display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    text-decoration: none;
    color: #E8D5D5;
    font-family: 'DM Sans Bold';
    font-size: 15.565px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}
.feat-card-big:hover .feat-learn-more {
  color: #fff;
}
.feat-learn-more i {
  font-size: 10px;
}

@media (max-width: 860px) {
  .feat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .best-choice-sec {
    padding: 70px 30px;
  }
}
@media (max-width: 540px) {
  .best-choice-sec {
    padding: 60px 20px;
  }
  .bc-title {
    font-size: 30px;
  }
}

/* ===================================================
   HOW IT WORKS – NEW DESIGN
=================================================== */
.how-sec {
  background: #faf8f6;
  padding: 60px 40px;
}
.how-header {
  text-align: center;
  margin-bottom: 67px;
}
.how-pill {
  display: inline-block;
    letter-spacing: 0.5px;
    padding: 18px 30px;
    margin-bottom: 22px;
    color: #8B1E3F;
    font-family: 'DM Sans Bold';
    font-size: 25px;
    font-style: normal;
    font-weight: normal;
    line-height: 20px;
    border-radius: 9999px;
    background: rgba(139, 30, 63, 0.10);
}
.how-main-title {
    margin-bottom: 12px;
    text-transform: uppercase;
    color: #780C0D;
    text-align: center;
    font-family: 'Aboreto Regular';
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 65.6px;
}
.how-main-title span {
      background: linear-gradient(135deg, #8B1E3F 0%, #D4A5A5 100%), rgba(0, 0, 0, 0.00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.how-main-sub {
      margin: 0 auto;
    color: #57534E;
    text-align: center;
    font-family: 'Abhaya Libre Bold';
    font-size: 30px;
    font-style: normal;
    font-weight: normal;
    line-height: 28px;
}
   
/* Timeline layout */
.hiw-timeline {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
}
/* vertical line */
.hiw-timeline::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 10px;
  bottom: 40px;
  width: 2px;
  border-radius: 9999px;
background: linear-gradient(180deg, #8B1E3F 0%, #E8D4D4 50%, #8B1E3F 100%), rgba(0, 0, 0, 0.00);
  z-index: 0;
}

.hiw-step {
  display: flex;
  gap: 28px;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  position: relative;
  z-index: 1;
  animation: revealFallback 0.6s ease 2.2s both;
}
.hiw-step.vis {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* Number badge */
.hiw-num {
  flex-shrink: 0;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
}
.hiw-num-badge {
      color: #fff;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: transform 0.3s;
    border-radius: 16px;
    background: linear-gradient(135deg, #8B1E3F 0%, #6B1630 100%), rgba(0, 0, 0, 0.00);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 20px 60px -15px rgba(139, 30, 63, 0.15);
    display: flex;
    width: 64px;
    height: 64px;
    padding: 15.2px 0 16px 0;
    justify-content: center;
    align-items: center;
}
.hiw-step:hover .hiw-num-badge {
  transform: scale(1.08);
}

/* special last badge - teal cross */
.hiw-num-badge.teal {
  background: linear-gradient(135deg, #2a9d8f, #219186);
  box-shadow: 0 4px 14px rgba(42, 157, 143, 0.35);
}
/* done checkmark */
.hiw-num-badge.done-badge {
    border-radius: 9999px;
    background: linear-gradient(135deg, #22C55E 0%, #059669 100%), rgba(0, 0, 0, 0.00);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 25px 50px -12px rgba(139, 58, 58, 0.25);
    display: flex;
    width: 79px;
    height: 81px;
    padding: 17px 15px 16px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tick {
    margin-top: -90px;
    margin-left: -12px;
}
/* Card */
.hiw-card {
  flex: 1;
    padding: 32px;
    transition: box-shadow 0.3s, transform 0.3s;
    margin-bottom: 44px;
    border-radius: 24px;
    border: 0.8px solid #F5F5F4;
    background: linear-gradient(135deg, #FFF 0%, rgba(249, 235, 235, 0.50) 100%), rgba(0, 0, 0, 0.00);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 20px 60px -15px rgba(139, 30, 63, 0.15);
}
.hiw-step:hover .hiw-card {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}
.hiw-card h4 {
    margin-bottom: 12px;
    color: #1C1917;
    font-family: 'Abhaya Libre Bold';
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}
.hiw-card p {
  margin-bottom: 0;
    color: #57534E;
    font-family: 'DM Sans Medium';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 35px;
}

/* availability tag */
.hiw-avail {
      display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    color: #8B1E3F;
    font-family: 'DM Sans Bold';
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px;
}
.hiw-avail i {
  border-radius: 12px;
    background: #FFF;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ps{
    margin-top: 15px;
}
/* form mock inside step 2 */
.hiw-form-mock {
  margin-top: 16px;
  background: #f9f6f2;
  border: 1.5px solid #ede8e0;
  border-radius: 10px;
  padding: 14px;
}
.mock-line {
  height: 9px;
  background: #e8e0d5;
  border-radius: 4px;
  margin-bottom: 9px;
}
.mock-line.w100 {
  width: 100%;
}
.mock-line.w70 {
  width: 70%;
}
.mock-line.w50 {
  width: 50%;
}
.mock-line.w85 {
  width: 85%;
}
.mock-line-row {
  display: flex;
  gap: 8px;
  margin-bottom: 9px;
}
.mock-line-row .mock-line {
  flex: 1;
  margin-bottom: 0;
}
.mock-upload {
  border: 1.5px dashed #d4ccc4;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #bbb;
}
.mock-upload i {
  font-size: 18px;
  color: var(--maroon);
  opacity: 0.4;
}
.mock-upload span {
  font-size: 11px;
  color: #bbb;
}
.hiw-encrypt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #2a9d8f;
}

/* payment chips */
.hiw-pay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.pay-chip {
  display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 9999px;
    background: #FFF;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: #57534E;
    font-family: 'DM Sans Bold';
    font-size: 13.516px;
    font-style: normal;
    font-weight: normal;
    line-height: 20px;
}

/* consult mode chips */
.hiw-mode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}
.mode-chip {
  display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #44403C;
    font-family: 'DM Sans Bold';
    font-size: 13.409px;
    font-style: normal;
    font-weight: normal;
    line-height: 20px;
    &:nth-child(2){
        i{
            background: #DBEAFE;
        }
    }
    &:nth-child(3){
        i{
            background: #F3E8FF;
        }
    }
}
.mode-chip i {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 4px 3.2px 5px 4.8px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: #D1FAE5;
}
.ccp{
    margin: 0;
border: 0.8px solid #D1FAE5;
background: linear-gradient(135deg, #ECFDF5 0%, #FFF 100%), rgba(0, 0, 0, 0.00);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 20px 60px -15px rgba(139, 30, 63, 0.15);
}
/* final care checklist */
.hiw-checklist {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #44403C;
    font-family: 'DM Sans Bold';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}
.hiw-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text-mid);
}
.hiw-check .ck-icon {
      border-radius: 8px;
    background: #D1FAE5;
    display: flex;
    width: 24px;
    height: 24px;
    padding: 4px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.hiw-check .ck-icon i {
  font-size: 9px;
  color: #fff;
}
.hiw-check .ck-icon.pending {
  background: #e8e0d5;
}
.hiw-check .ck-icon.pending i {
  color: #bbb;
}

/* Responsive */
@media (max-width: 640px) {
  .how-sec {
    padding: 70px 20px;
  }
  .hiw-timeline::before {
    left: 21px;
  }
  .hiw-num {
    width: 44px;
  }
  .hiw-num-badge {
    width: 36px;
    height: 36px;
    font-size: 14px;
    border-radius: 8px;
  }
  .hiw-num-badge.done-badge {
    width: 36px;
    height: 36px;
  }
  .hiw-card {
    padding: 16px 16px 14px;
  }
  .hiw-card h4 {
    font-size: 15px;
  }
  .how-main-title {
    font-size: 26px;
  }
}

/* ===================================================
   SERVICES – WHAT WE COVER
=================================================== */
.svc-sec {
  background: #fff;
  padding: 90px 40px;
}
.svc-header {
  text-align: center;
  margin-bottom: 55px;
  .how-main-sub{
    margin: 0 auto;
    font-family: 'Abhaya Libre Bold';
    color: #57534E;
    /* color: #780C0D; */
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
  }
}
.svc-pill {
  display: inline-block;
  border: 1.5px solid #c8b0b0;
  color: var(--maroon);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 7px 22px;
  border-radius: 30px;
  margin-bottom: 22px;
  background: #fff;
}
.svc-main-title {
  font-size: clamp(26px, 4.5vw, 52px);
  font-weight: 700;
  color: var(--maroon);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.svc-main-sub {
  font-size: 14px;
  color: var(--text-mid);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Each circle */
.svc-dot {
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 10px;
  cursor: pointer;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  line-height: 1.3;
}
.svc-dot:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* Light variant */
.svc-dot.light {
      border-radius: 9999px;
    border: 1.6px solid #E8D4D4;
    background: #F9EBEB;
}
.svc-dot.light span {
  font-size: 14px;
    font-weight: normal;
    color: var(--maroon);
    font-family: 'DM Sans Bold';
}

/* Dark variant */
.svc-dot.dark {
  border-radius: 10000px;
background: linear-gradient(90deg, #8B1E3F 0%, #6B1630 100%), rgba(0, 0, 0, 0.00);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 20px 60px -15px rgba(139, 30, 63, 0.15);
  border: none;
}
.svc-dot.dark span {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.svc-dot .light  {  font-size: 14px;
  span {
  font-size: 14px;

}
}
/* Hover override – light becomes dark */
.svc-dot.light:hover {
  background: #efcfcf;
}


/* Hover override – dark becomes deeper */
.svc-dot.dark:hover {
  background: var(--maroon-dk);
}

/* Responsive */
@media (max-width: 1100px) {
  .svc-grid {
    grid-template-columns: repeat(6, 1fr);
    max-width: 900px;
  }
}
@media (max-width: 820px) {
  .svc-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 600px;
    gap: 14px;
  }
}
@media (max-width: 560px) {
  .svc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 380px;
  }
  .svc-dot {
    padding: 12px 8px;
  }
  .svc-dot span {
    font-size: 10.5px;
  }
  .svc-sec {
    padding: 70px 20px;
  }
}
@media (max-width: 380px) {
  .svc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* ===================================================
   CONSULTATION MODES – NEW DESIGN
=================================================== */
.consult-sec {
  background: #fff;
  padding: 90px 40px;
}
.consult-header {
  text-align: center;
  margin-bottom: 55px;
}
.consult-pill {
  display: inline-block;
  background: rgba(139, 26, 26, 0.07);
  border: 1.5px solid rgba(139, 26, 26, 0.15);
  color: var(--maroon);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 24px;
  border-radius: 30px;
  margin-bottom: 20px;
}
.consult-main-title {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700;
  color: var(--maroon);
  line-height: 1.1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

/* Cards row */
.modes-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 0 auto;
    align-items: start;
}

/* Base card */
.mode-card {
  padding: 28px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1.6px solid rgba(0, 0, 0, 0.00);
    background: rgba(139, 30, 63, 0.10);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 10px 30px -5px rgba(139, 58, 58, 0.10);
    transition: all .5s;
}
.mode-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 45px rgba(139, 26, 26, 0.12);
background: linear-gradient(135deg, #8B1E3F 0%, #5A1228 100%), rgba(0, 0, 0, 0.00);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 10px 30px -5px rgba(139, 58, 58, 0.10);
h4,p,li{
    color: #fff;
}
}

/* Featured / centre card – dark maroon */
.mode-card.pop {
  border-radius: 30px;
border: 1.6px solid rgba(0, 0, 0, 0.00);
background: linear-gradient(135deg, #8B1E3F 0%, #5A1228 100%), rgba(0, 0, 0, 0.00);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 10px 30px -5px rgba(139, 58, 58, 0.10);
}
.mode-card.pop:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 70px rgba(139, 26, 26, 0.42);
}

/* Top row: icon + price badge */
.mode-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.mode-icon-box {
  width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 16px;
    background: #C97875;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.mode-card .mode-price-badge:hover{background: #F7CBD8;}
.mode-price-badge {
  padding: 6px 21px;
    white-space: nowrap;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 2px 2px 20px 0 rgba(120, 12, 13, 0.10);
    color: #780C0D;
    font-family: 'DM Sans Bold';
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    line-height: 32px;
}
.mode-card.pop .mode-price-badge {
background: #F7CBD8;
box-shadow: 2px 2px 20px 0 rgba(120, 12, 13, 0.10);
}

/* Title */
.mode-card h4 {
    margin-bottom: 12px;
    color: #5C2222;
    font-family: 'Abhaya Libre Bold';
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    transition: all .5s;
}
.mode-card.pop h4 {
  color: #fff;
}

/* Description */
.mode-card p {
  margin-bottom: 20px;
    color: #57534E;
    font-family: 'DM Sans Medium';
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    transition: all .5s;
}
.mode-card.pop p {
  color: rgba(255, 255, 255, 0.76);
}

/* Feature checklist */
.mode-features {
  list-style: none;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mode-features li {
  display: flex;
    align-items: center;
    gap: 10px;
    color: #57534E;
    font-family: 'DM Sans Medium';
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    transition: all .5s;
}
.mode-features li::before {
  content: "✓";
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.mode-card.pop .mode-features li {
  color: rgba(255, 255, 255, 0.82);
}
.mode-card.pop .mode-features li::before {
  color: rgba(255, 255, 255, 0.7);
}

/* CTA Button */
.mode-btn {
  width: 100%;
  padding: 16px;
background: linear-gradient(135deg, #8B1E3F 0%, #5A1228 100%), rgba(0, 0, 0, 0.00);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--tr);
  letter-spacing: 0.3px;
}
.mode-btn:hover {
  transform: translateY(-2px);
  /* box-shadow: 0 8px 22px rgba(139, 26, 26, 0.3); */
  /* background: linear-gradient(90deg, rgba(191, 124, 124, 0.00) 0%, #BF7C7C 100%), rgba(0, 0, 0, 0.00); */
  background: linear-gradient(270deg, #a9445c, #d97a7a, #a9445c);
  background-size: 400% 400%;
  transition: 0.3s;
}

.mode-card.pop .mode-btn {
  color: #fff;
  border-radius: 30px;
  background: linear-gradient(90deg, rgba(191, 124, 124, 0.00) 0%, #BF7C7C 100%), rgba(0, 0, 0, 0.00);
}
.mode-card.pop .mode-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Responsive */
@media (max-width: 900px) {
  .modes-row {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
}
@media (max-width: 540px) {
  .consult-sec {
    padding: 70px 20px;
  }
  .mode-card {
    padding: 24px 20px 26px;
  }
}

/* ===================================================
   TESTIMONIALS
=================================================== */
.testi-sec {
  background: #faf7f5;
  padding: 60px 0px;
}
.testi-header {
  text-align: center;
  margin-bottom: 55px;
}
.testi-pill {
  display: inline-block;
  background: rgba(139, 26, 26, 0.08);
  border: 1.5px solid rgba(139, 26, 26, 0.18);
  color: var(--maroon);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 24px;
  border-radius: 30px;
  margin-bottom: 20px;
}
.testi-main-title {
  
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight: 700;
  color: var(--maroon);
  text-transform: uppercase;
  letter-spacing: -0.3px;
  line-height: 1.1;
  margin-bottom: 14px;
}
.testi-main-sub {
  font-size: 14px;
  color: var(--text-mid);
  font-style: italic;
}

/* Slider wrap */
.testi-slider-wrap {
  position: relative;
}

/* Card – light variant */
.testi-card {
  margin: 8px 10px 24px;
  background: #fff;
  border: 1.5px solid #ede6de;
  border-radius: 16px;
  padding: 28px 26px;
  transition: var(--tr);
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  min-height: 190px;
  border-radius: 24px;
border: 0.8px solid #F5F5F4;
background: #FFF;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 20px 60px -15px rgba(139, 30, 63, 0.15);
}
.testi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.09);
}

/* Dark featured card */
.testi-card.slick-center {
background: linear-gradient(135deg, #8B1E3F 0%, #6B1630 100%), rgba(0, 0, 0, 0.00);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 20px 60px -15px rgba(139, 30, 63, 0.15);
}
.testi-card.slick-center .testi-card-text {
  color: rgba(255, 255, 255, 0.9);
}
.testi-card.slick-center .testi-author {
  color: #fff;
}
.testi-card.slick-center .testi-stars {
  color: #f5d36a;
}

.testi-card-text {
  color: #44403C;
    font-family: 'DM Sans Medium';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 144.444%;
    margin-bottom: 20px;
}
.testi-stars {
  color: var(--gold);
  letter-spacing: 3px;
  font-size: 14px;
  margin-top: auto;
}
.testi-author {
  color: #8B1E3F;
font-family: 'Abhaya Libre Bold';
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 120%;
  margin-top: 14px;
  font-style: normal;
}
.testi-card.dark .testi-author {
  color: rgba(255, 255, 255, 0.8);
}
.rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.testi-rev {
    float: left;
    height: 130px;
    margin-right: 15px;
}
.testi-av {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.testi-rev-info strong {
  font-size: 13px;
  display: block;
  font-weight: 700;
  color: var(--text);
}
.testi-rev-info span {
  font-size: 11px;
  color: var(--text-lt);
}
.testi-card.dark .testi-rev-info strong {
  color: #fff;
}
.testi-card.dark .testi-rev-info span {
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 760px) {
  .testi-sec {
    padding: 70px 20px 80px;
  }
  .testi-main-title {
    font-size: 28px;
  }
}

/* ===== SLICK CRITICAL FIXES ===== */
.slick-slider {
  display: block !important;
  visibility: visible !important;
}
.slick-list {
  overflow: hidden;
}
.slick-track {
  display: flex !important;
}
.slick-slide {
  height: auto;
  display: block !important;
}
.slick-initialized .slick-slide {
  display: block !important;
}

/* slick dots override */
.slick-dots {
  bottom: -30px;
}
.slick-dots li button::before {
  color: var(--maroon) !important;
  font-size: 8px !important;
}
.slick-dots li.slick-active button::before {
  opacity: 1 !important;
}

/* Slick arrows – all sliders */
.slick-prev,
.slick-next {
  width: 40px;
  height: 40px;
  background: #fff !important;
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
  z-index: 10;
  transition: all 0.25s ease;
}
.slick-prev {
  left: -20px;
}
.slick-next {
  right: -20px;
}
.slick-prev:hover,
.slick-next:hover {
  background: var(--maroon) !important;
}
.slick-prev::before,
.slick-next::before {
  color: var(--maroon);
  font-size: 16px;
  transition: color 0.2s;
}
.slick-prev:hover::before,
.slick-next:hover::before {
  color: #fff;
}

/* Wrapper needs relative + padding for arrows */
.gallery-slider-wrap,
.health-slider-wrap {
  position: relative;
  padding: 0 25px;
}

/* ===================================================
   GALLERY (MOMENTS)
=================================================== */
.gallery-sec {
  background: #fff;
  padding: 60px 0;
  overflow: hidden;
}
.gallery-header {
    padding: 0 60px;
    margin-bottom: 70px;
    text-align: center;
}
.gallery-pill {
  display: inline-block;
  background: rgba(139, 26, 26, 0.07);
  border: 1.5px solid rgba(139, 26, 26, 0.16);
  color: var(--maroon);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 22px;
  border-radius: 30px;
  margin-bottom: 16px;
}
.gallery-main-title {
  
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 700;
  color: var(--maroon);
  text-transform: uppercase;
  letter-spacing: -0.3px;
  line-height: 1.1;
}

/* Full-bleed photo strip */
.gallery-slider {
 position: relative;
}


.gallery-photo {
  flex-shrink: 0;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  transition: transform 0.3s;
  cursor: pointer;
  margin: 16px;
}
.gallery-photo:hover {
  img{
    transform: scale(1.1);
  }
}
.gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all .5s;
}

/* placeholder photo color variants */
.gp1 {
  background: linear-gradient(160deg, #b8c4d0 0%, #6a7a8a 100%);
}
.gp2 {
  background: linear-gradient(160deg, #c8b8a8 0%, #8a7868 100%);
}
.gp3 {
  background: linear-gradient(160deg, #b0c0b0 0%, #607060 100%);
}
.gp4 {
  background: linear-gradient(160deg, #b8b8c8 0%, #686878 100%);
}

@media (max-width: 760px) {
  .gallery-header {
    padding: 0 20px;
  }
  .gallery-strip {
    padding: 0 20px;
    gap: 10px;
  }
  .gallery-photo {
    width: 200px;
    height: 260px;
  }
  .gallery-main-title {
    font-size: 24px;
  }
}

/* ===================================================
   PET PORTAL SECTION
=================================================== */
.portal-sec {
  background: linear-gradient(0deg, #7E1813 0%, #7E1813 100%), rgba(0, 0, 0, 0.00);
  padding: 60px 60px;
  position: relative;
  overflow: hidden;
  .bc-pill {
    margin-bottom: 50px;
}
}
/* subtle radial glow top-right */
.portal-sec::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -160px;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Two-column layout */
.portal-inner {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── LEFT ── */
.portal-left {
    position: relative;
    .bc-title {
    margin-bottom: 14px;
    text-align: left;
    font-size: 40px;
    line-height: 149.091%;
}
.bc-sub {
    color: #F4EBEB;
    text-align: left;
    font-size: 22px;
    line-height: 131.818%;
    margin-bottom: 37px;
}
}
.mode-card:hover .mode-price-badge{
  background: #f3b3c0;
  color: #7c0f2c;
}

/* Feature rows */
.portal-features {
      display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 42px;
    width: 90%;
}
.portal-feat {
      display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    transition: background 0.25s;
    border-radius: 16px;
    border: 0.8px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.10);
}
.portal-feat:hover {
  background: rgba(255, 255, 255, 0.13);
}
.portal-feat-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.20);
}

.social-icons{
  display:flex;
  gap:20px;
}

.icon-box{
  width:70px;
  height:70px;
  /* border:2px solid #fff; */
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
}

.icon-box img{
  width:28px;
}

.icon-box:hover{
  /* background:white; */
  transform:scale(1.1);
}


.multiple-icon{
    width: 70px;
    height: 70px;
}
.portal-feat:hover .portal-feat-icon {
  background: rgba(255, 255, 255, 0.22);
}
.portal-feat-text h5 {
      color: #FFF;
    font-family: 'Abhaya Libre Bold';
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 4px;
}
.portal-feat-text p {
  color: #FFF;
    font-size: 13.965px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

/* CTA button */
.btn-portal {
  padding: 17px 44px;
    cursor: pointer;
    transition: var(--tr);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    letter-spacing: 0.3px;
    border-radius: 30px;
    background: linear-gradient(90deg, rgba(191, 124, 124, 0.00) 0%, #BF7C7C 100%), rgba(0, 0, 0, 0.00);
    color: #FFF;
    text-align: center;
    font-family: 'Abhaya Libre Bold';
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    border: 0;
}
/* .btn-portal:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px); */
  .btn-portal:hover{
  background: linear-gradient(270deg, #a9445c, #d97a7a, #a9445c);
    background-size: 400% 400%;
  transition: 0.3s;
   transform: translateY(-2px); 
}

/* ── RIGHT – Mock App Card ── */
.portal-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.portal-mockup {
      padding: 28px 26px;
    width: 100%;
    max-width: 600px;
    transform: rotate(2deg);
    transition: transform 0.4s ease;
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.portal-mockup:hover {
  transform: rotate(0deg) translateY(-6px);
}

/* mockup header */
.pm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.pm-logo-dot {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 6px solid #c97875;
}
.pm-header h4 {
  color: #000;
    font-family: 'Abhaya Libre Bold';
    font-size: 25px;
    font-style: normal;
    font-weight: normal;
    line-height: 28px;
}

/* pet photo grid */
.pm-pets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.pm-pet {
    overflow: hidden;
    position: relative;
    height: 146px;
    display: flex;
    img{
        border-radius: 16px;
    }
}

.pm-pet-label {
    position: absolute;
    bottom: 17px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 8px;
    color: #FFF;
    font-family: 'DM Sans Bold';
    font-size: 13.134px;
    font-style: normal;
    font-weight: normal;
    line-height: 24px;
}

/* recent consultations */
.pm-section-title {
      margin-bottom: 12px;
    color: #000;
    font-family: 'Abhaya Libre Bold';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}
.pm-consults {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-consult {
      display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 0.8px solid #F4EBEB;
    background: #FDFCF8;
}
.pm-consult-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(139, 26, 26, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pm-consult-body {
  flex: 1;
}
.pm-consult-body strong {
      display: block;
    margin-bottom: 2px;
    color: #780C0D;
    font-family: 'Abhaya Libre Bold';
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -1px;
}
.pm-consult-body span {
      color: #000;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16.348px;
}
.pm-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pm-badge.done {
  background: #DCFCE7;
  color: #15803D;
}
.pm-badge.upcoming {
  background: #DBEAFE;
  color: #1D4ED8;
}

/* Responsive */
@media (max-width: 960px) {
  .portal-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .portal-sec {
    padding: 70px 30px;
  }
  .portal-mockup {
    transform: none;
    max-width: 420px;
    margin: 0 auto;
  }
  .portal-mockup:hover {
    transform: translateY(-4px);
  }
}
@media (max-width: 540px) {
  .portal-sec {
    padding: 60px 20px;
  }
  .portal-title {
    font-size: 26px;
  }
  .pm-pets {
    gap: 8px;
  }
  .pm-pet {
    height: 100px;
    font-size: 40px;
  }
}

/* ===================================================
   ABOUT DR BASU SECTION
=================================================== */
.about-sec {
  background: #fff;
  padding: 90px 60px;
}
.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 32px;
  align-items: start;
}

/* ── LEFT: photo + name card ── */
.about-photo-col {
    position: relative;
}
.about-photo-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 90px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.18);
}
.about-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-photo-emoji {
  font-size: 90px;
  opacity: 0.6;
}
/* Name card overlay at bottom */
.about-name-card {
  position: absolute;
    bottom: 15px;
    left: 25px;
    right: 20%;
    padding: 22px 27px;
    border-radius: 30px;
    background: #7E1813;
}
.about-name-card h3 {
  margin-bottom: 3px;
    color: #FFF;
    font-family: 'Abhaya Libre Bold';
    font-size: 29.974px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
}
.about-name-card .about-deg {
  font-size: 17px;
  color: #F4EBEB;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}
.about-licensed {
  color: #F4EBEB;
 font-family: 'Abhaya Libre Bold';
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 28px;
  margin-bottom: 8px;
}
.about-license-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.about-ltag {
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans Bold';
    font-size: 11.803px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
}

/* ── RIGHT: content ── */
.about-right {
    position: relative;
}

/* Note card */
.about-note-card {
      padding: 28px 28px;
    margin-bottom: 24px;
    border-radius: 24px;
    border: 0.8px solid #F4EBEB;
    background: #FDFCF8;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 10px 30px -5px rgba(139, 58, 58, 0.10);
}
.about-card-label {
  display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #5C2222;
    font-family: 'Abhaya Libre Bold';
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
}
.about-card-label::before {
  content: "";
  width: 4px;
  height: 22px;
  background: var(--maroon);
  border-radius: 3px;
  flex-shrink: 0;
}
.about-note-card p {
    margin-bottom: 14px;
    color: #57534E;
    font-family: 'DM Sans Medium';
    font-size: 15.896px;
    font-style: normal;
    font-weight: 500;
    line-height: 163.565%;
}
.about-note-card p:last-child {
  margin-bottom: 0;
}

/* Interests card */
.about-interests-card {
      padding: 26px 28px;
    border-radius: 24px;
    border: 1.6px solid #E5E7EB;
    background: #FFF;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 10px 30px -5px rgba(139, 58, 58, 0.10);
}
.about-interests-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin-top: 4px;
}
.about-interest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #292524;
    font-family: 'Abhaya Libre Bold';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}
.about-int-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(139, 26, 26, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 960px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-photo-wrap {
    max-width: 340px;
    margin: 0 auto;
  }
  .about-sec {
    padding: 70px 30px;
  }
}
@media (max-width: 540px) {
  .about-sec {
    padding: 60px 20px;
  }
  .about-interests-grid {
    grid-template-columns: 1fr;
  }
  .about-note-card,
  .about-interests-card {
    padding: 20px 18px;
  }
}

/* ===================================================
   HEALTH LIBRARY SECTION – NEW DESIGN
=================================================== */
.health-sec {
  background: #fff;
  padding: 60px 60px;
}

/* top bar */
.hl-topbar {
  text-align: center;
  margin-bottom: 18px;
}
.hl-pill {
  display: inline-block;
  background: rgba(139, 26, 26, 0.07);
  border: 1.5px solid rgba(139, 26, 26, 0.15);
  color: var(--maroon);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 26px;
  border-radius: 30px;
}

/* heading row: title left, "View all articles" right */
.hl-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto 36px;
}

.hl-view-all {
  display: inline-flex;
    align-items: center;
    gap: 13px;
    background: #F9EBEB;
    border: 0;
    padding: 10px 30px;
    border-radius: 30px;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--tr);
    flex-shrink: 0;
    margin-bottom: 6px;
    color: #8B1E3F;
    font-family: 'Abhaya Libre Bold';
    font-size: 15.498px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}
.hl-view-all:hover {
  background: var(--maroon);
  color: #fff;
}
.hl-view-all i {
  font-size: 12px;
}

/* main grid: big featured left + article list right */
.hl-grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  align-items: start;
}

/* ── FEATURED ARTICLE (left) ── */
.hl-featured {
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.hl-featured:hover {
  h3{
    color: #5A1228;
  }
}

.hl-feat-img {
  width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 32px;
    display: block;
    img{
          width: 100%;
    height: 100%;
    object-fit: cover;
    }
}

.hl-feat-body {
    padding: 24px 0;
}
.hl-feat-body h3 {
    margin-bottom: 10px;
    color: #1C1917;
    font-family: 'Abhaya Libre Bold';
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
}
.hl-feat-body p {
  color: #57534E;
font-family: 'DM Sans Medium';
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: 131.818%;
  margin-bottom: 14px;
}
.hl-feat-author {
  font-size: 18px;
  font-weight: 700;
  color: var(--maroon);
  display: flex;
  align-items: center;
  font-family: 'DM Sans Bold';
  gap: 8px;
}
.hl-feat-author span {
  color: var(--text-lt);
  font-weight: 400;
  font-size: 12px;
}

/* ── ARTICLE LIST (right) ── */
.hl-articles {
  display: flex;
  flex-direction: column;
  gap: 23px;
}
.hl-article {
    padding: 23px 24px;
    cursor: pointer;
    transition: var(--tr);
    border-radius: 16px;
    border: 0.8px solid #F5F5F4;
    background: linear-gradient(135deg, #FFF 0%, rgba(249, 235, 235, 0.30) 100%), rgba(0, 0, 0, 0.00);
}
.hl-article:hover {
  background: #fff;
  border-color: rgba(139, 26, 26, 0.25);
  transform: translateX(4px);
  box-shadow: 0 6px 22px rgba(139, 26, 26, 0.09);
  h4{
    color: #5A1228;
  }
}
.hl-article h4 {
 margin-bottom: 7px;
    color: #1C1917;
    font-family: 'Abhaya Libre Bold';
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}
.hl-article p {
    color: #57534E;
    font-family: 'DM Sans Medium';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

/* Responsive */
@media (max-width: 960px) {
  .hl-grid {
    grid-template-columns: 1fr;
  }
  .hl-feat-img {
    height: 260px;
  }
  .health-sec {
    padding: 70px 30px;
  }
}
@media (max-width: 600px) {
  .health-sec {
    padding: 60px 20px;
  }
  .hl-heading-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .hl-feat-img {
    height: 220px;
    font-size: 70px;
  }
  .hl-feat-body h3 {
    font-size: 19px;
  }
}

/* ===================================================
   FAQ – NEW 2-COLUMN DESIGN
=================================================== */
.faq-sec {
  background: #fff;
  padding: 60px 60px;
}
.faq-header {
  text-align: center;
  margin-bottom: 55px;
}
.faq-pill {
  display: inline-block;
  background: rgba(139, 26, 26, 0.07);
  border: 1.5px solid rgba(139, 26, 26, 0.18);
  color: var(--maroon);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 26px;
  border-radius: 30px;
  margin-bottom: 22px;
}
.faq-main-title {
  
  font-size: clamp(28px, 5vw, 58px);
  font-weight: 700;
  color: var(--maroon);
  line-height: 1.08;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

/* 2-column grid */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Each accordion item */
.faq-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
    border: 1px solid #CECECE;
    box-shadow: 0 1px 4px 0 rgba(25, 33, 61, 0.06);
    margin-bottom: 20px;
}
.faq-item.open {
  border-radius: 16px;
border: 1px solid #F1F2F9;
background: rgba(120, 12, 13, 0.10);
}
.faq-item:hover:not(.open) {
  border-radius: 16px;
border: 1px solid #F1F2F9;
background: rgba(120, 12, 13, 0.10);
}

/* Question row */
.faq-q {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}
.faq-q-icon {
 width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 0;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.faq-q-text {
  flex: 1;
color: #000;
font-family: 'Abhaya Libre Bold';
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 135%;
}
.faq-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(139, 26, 26, 0.08) url(../img/faq-plus.png);
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon);
  font-size: 13px;
  transition: all 0.25s ease;
  border-radius: 8px;
  
}
.faq-item.open .faq-ico {
  background:  linear-gradient(135deg, #8B1E3F 0%, #5A1228 100%), rgba(0, 0, 0, 0.00) ;
    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.12) inset, 0 1px 1.5px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 6px 0 rgba(74, 58, 255, 0.10);
    position: relative;
    &::after{
        content: '';
        background: url(../img/faq-minus.png);
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
        background-position: center;
    }
}
/* plus → minus via rotation */
.faq-item.open .faq-ico i {
  transform: rotate(45deg);
}
.faq-ico i {
  display: block;
  transition: transform 0.25s ease;
}

/* Answer */
.faq-a {
      display: none;
    padding: 0 22px 20px 63px;
    color: #505050;
    font-style: normal;
    font-weight: 400;
    line-height: 166%;
}

/* Responsive */
@media (max-width: 860px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .faq-sec {
    padding: 70px 30px;
  }
}
@media (max-width: 540px) {
  .faq-sec {
    padding: 60px 20px;
  }
  .faq-main-title {
    font-size: 26px;
  }
  .faq-a {
    padding-left: 22px;
  }
}

/* ===================================================
   GET IN TOUCH SECTION
=================================================== */
.cta-sec {
  background: linear-gradient(135deg, rgba(120, 12, 13, 0.05) 0%, rgba(227, 149, 147, 0.05) 50%, rgba(227, 149, 147, 0.00) 100%), rgba(0, 0, 0, 0.00);
  padding: 60px 60px;
  text-align: center;
  .how-main-sub {
    color: #000;
    font-family: 'DM Sans Regular';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}
}
.cta-pill {
  display: inline-block;
  background: rgba(139, 26, 26, 0.08);
  border: 1.5px solid rgba(139, 26, 26, 0.18);
  color: var(--maroon);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 26px;
  border-radius: 30px;
  margin-bottom: 22px;
}
.cta-main-title {
  
  font-size: clamp(28px, 5vw, 58px);
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: -0.5px;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 16px;
}
.cta-main-sub {
  font-size: 14px;
  color: var(--text-mid);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.75;
  font-style: italic;
}

/* Contact cards row */
.cta-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto 28px;
}
.cta-contact-card {
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    transition: box-shadow 0.25s, transform 0.25s;
    cursor: pointer;
    text-decoration: none;
    border-radius: 16px;
    border: 1px solid #F4EBEB;
    background: rgba(255, 255, 255, 0.70);
}
.cta-contact-card:hover {
  box-shadow: 0 10px 30px rgba(139, 26, 26, 0.1);
  transform: translateY(-3px);
}
.cta-contact-ico {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
 border-radius: 12px;
background: linear-gradient(135deg, #8B1E3F 0%, #5A1228 100%), rgba(0, 0, 0, 0.00);
}
.cta-contact-label {
      text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    color: #1F2937;
    font-family: 'Abhaya Libre Bold';
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}
.cta-contact-value {
  color: #780C0D;
    font-family: 'DM Sans Bold';
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

/* Emergency notice */
.cta-emergency {
    margin: 0 auto;
    padding: 26px 22px;
    text-align: left;
    border-radius: 12px;
    border-left: 4px solid #780C0D;
    background: #FFFBEB;
    margin-top: 50px;
    color: #780C0D;
    font-family: 'DM Sans Bold';
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
}

/* keep btn-white for other uses */
.btn-white {
  background: #fff;
  color: var(--maroon);
  padding: 14px 30px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--tr);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.btn-white:hover {
  background: var(--cream);
  transform: translateY(-3px);
}
.btn-outline-wh {
  background: transparent;
  color: #fff;
  padding: 14px 30px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--tr);
}
.btn-outline-wh:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

@media (max-width: 640px) {
  .cta-cards-row {
    grid-template-columns: 1fr;
  }
  .cta-sec {
    padding: 70px 20px;
  }
  .cta-main-title {
    font-size: 28px;
  }
}

/* ===================================================
   PET STORE COMING SOON BANNER
=================================================== */
.app-strip {
    background: #ffffff;
    padding: 60px 60px;
}
.store-banner {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 50px;
    background: #F9EBEB;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 44px 55px;
  overflow: hidden;
  position: relative;
}
.store-banner-left {
    position: relative;
}
.store-badge {
  display: inline-block;
    background: #fff;
    border: 1.5px solid #e0d0d0;
    padding: 9px 29px;
    border-radius: 30px;
    margin-bottom: 35px;
    color: #8B3A3A;
    text-align: center;
    font-family: 'Abhaya Libre Bold';
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}
.store-banner-title {
  color: #780C0D;
    font-family: 'Abhaya Libre Bold';
    font-size: 70px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
}
.store-banner-title span {
  color: #000;
  font-size: 50px;
  display: block;
  margin-bottom: 28px;
}
.store-banner-right {
  flex-shrink: 0;
  position: relative;
  img{
    border-radius: 20px;
  }
}


@media (max-width: 860px) {
  .store-banner {
    grid-template-columns: 1fr;
    padding: 32px 28px;
  }
  .store-banner-right {
    width: 100%;
    height: 160px;
  }
  .app-strip {
    padding: 30px 20px;
  }
}
@media (max-width: 540px) {
  .store-banner-title {
    font-size: 22px;
  }
}

/* ===================================================
   STATS BAND
=================================================== */
.stats-band {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 40px;
}
.stats-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-box {
  text-align: center;
}
.stat-n {
  
  font-size: 40px;
  font-weight: 700;
  color: var(--maroon);
  line-height: 1;
  margin-bottom: 7px;
}
.stat-box p {
  font-size: 13px;
  color: var(--text-mid);
  font-weight: 500;
}

/* ===================================================
   REVEAL UTILITY
=================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.vis {
  opacity: 1;
  transform: translateY(0);
}
/* Safety: after 2s force all reveals visible regardless of JS */
@keyframes revealFallback {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.reveal {
  animation: revealFallback 0.6s ease 2s both;
}

/* Keep reveal elements tied to scroll instead of global fallback auto-show. */
body.scroll-anim-enabled .reveal,
body.scroll-anim-enabled .hiw-step {
  animation: none;
}

/* ===================================================
   FOOTER
=================================================== */
footer {
  background: #7E1813;
  padding: 80px 60px;
  .nav-brand-text{
    color: #fff;
  }
  .nav-brand-icon {
    border: 1px solid #FFF;
    border-radius: 10px;
}
.nav-brand {
    margin-bottom: 35px;
}
}
.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
  gap: 50px;
  margin-bottom: 50px;
}

/* Brand col */
.ft-brand-box {
    position: relative;
}
.ft-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ft-logo-icon {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
}
.ft-logo-name {
  
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
}
.ft-brand-desc {
  max-width: 82%;
    color: #FFF;
    font-family: 'DM Sans Bold';
    font-size: 15.749px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
}

/* Col headings */
.ft-col {
    position: relative;
}
.ft-col h5 {
  margin-bottom: 20px;
    letter-spacing: 0.2px;
    color: #FFF;
    font-family: 'Abhaya Libre Bold';
    font-size: 17.623px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}
.ft-col a {
      display: block;
    margin-bottom: 13px;
    transition: all 0.5s;
    text-decoration: none;
    color: #FFF;
    font-size: 15.942px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
        display: flex;
}
.ft-col a:hover {
  color: #fff;
}

/* Contact col */
.ft-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ft-contact-ico {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
}
.ft-contact-item a,
.ft-contact-item span {
      display: block;
    margin-bottom: 0;
    transition: color 0.2s;
    text-decoration: none;
    color: #FFF;
    font-size: 15.942px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  transition: color 0.2s;
}
.ft-contact-item a:hover {
  color: #fff;
}
.ft-col a {
  color: #ffff;
}

/* Social col */
.ft-social-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.ft-soc {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  cursor: pointer;
  transition: var(--tr);
  text-decoration: none;
      border: 1px solid #fff;
}
.ft-soc:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
  color: #fff;
}
.ft-social-sub {
      max-width: 66%;
    color: #FFF;
    font-size: 13.852px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

/* Bottom bar */
.footer-btm {
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #FFF;
    font-family: 'DM Sans Bold';
    font-size: 13.996px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}
.footer-btm-links {
  display: flex;
  gap: 24px;
}
.footer-btm-links a {
      text-decoration: none;
    transition: color 0.2s;
    color: #FFF;
    font-family: 'DM Sans Bold';
    font-size: 13.883px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}
.footer-btm-links a:hover {
  color: #fff;
}

/* Responsive */
@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  footer {
    padding: 50px 30px 24px;
  }
}
@media (max-width: 580px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  footer {
    padding: 44px 20px 20px;
  }
  .footer-btm {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .footer-btm-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
}

/* ===================================================
   FAB 24/7
=================================================== */
.fab247 {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 8990;
  width: 62px;
  height: 62px;
  background: var(--maroon);
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 28px rgba(139, 26, 26, 0.5);
  cursor: pointer;
  animation: fab-float 3s ease-in-out infinite;
  transition: var(--tr);
}
.fab247:hover {
  background: var(--maroon-dk);
  transform: scale(1.08);
}
@keyframes fab-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.fab247 strong {
  
  font-size: 16px;
  line-height: 1;
}
.fab247 span {
  font-size: 7.5px;
  letter-spacing: 1px;
  opacity: 0.85;
}

/* ===================================================
   BOOKING MODAL – TIMELINE STYLE
=================================================== */

/* Overlay */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(6, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
}
.modal-bg.show {
  display: flex;
}

/* Box */
.modal-box {
  background: #f9f6f3;
  border-radius: 22px;
  width: 100%;
  max-width: 480px;
  margin: auto;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.35);
  animation: modal-in 0.36s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  overflow: hidden;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Header ── */
.modal-hd {
  background: var(--maroon);
  padding: 20px 24px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-hd-left {
  display: flex;
  align-items: center;
  gap: 11px;
}
.modal-hd-ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #fff;
}
.modal-hd h3 {
  font-family: 'DM Sans Bold';
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.modal-hd p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}
.modal-steps-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}
.msd {
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s;
}
.msd.act {
  background: #fff;
  width: 28px;
}
.msd.done {
  background: rgba(255, 255, 255, 0.55);
}
.modal-x {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  transition: var(--tr);
}
.modal-x:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(90deg);
}

/* ── Scrollable body ── */
.modal-bd {
  padding: 22px 20px 20px;
  max-height: 72vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 26, 26, 0.18) transparent;
}
.modal-bd::-webkit-scrollbar {
  width: 4px;
}
.modal-bd::-webkit-scrollbar-thumb {
  background: rgba(139, 26, 26, 0.2);
  border-radius: 4px;
}

/* ── Vertical timeline line ── */
.modal-timeline {
  position: relative;
}

/* ── Step row – no timeline line, no badge ── */
.ms-row {
  display: flex;
  gap: 0;
  margin-bottom: 13px;
  position: relative;
  z-index: 1;
}
.ms-num {
  display: none;
}
.ms-badge {
  display: none;
}
.ms-badge.teal {
  display: none;
}

/* ── White card ── */
.ms-card {
  flex: 1;
  background: #fff;
  border: 1.5px solid #ebe3db;
  border-radius: 14px;
  padding: 16px 18px;
  transition: box-shadow 0.2s;
}
.ms-card:hover {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
}

.ms-card-title {
  
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
}
.ms-card-desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 12px;
}

/* availability tag */
.ms-avail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--maroon);
  margin-top: 10px;
}
.ms-avail i {
  font-size: 10px;
}

/* ── Form fields ── */
.frow {
  display: flex;
  gap: 10px;
}
.fgrp {
  margin-bottom: 11px;
  flex: 1;
}
.fgrp label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: 'DM Sans Bold';
}
.fgrp input,
.fgrp select,
.fgrp textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid #e2d9d0;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: #faf7f4;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.fgrp input:focus,
.fgrp select:focus,
.fgrp textarea:focus {
  border-color: var(--maroon);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.07);
}
.fgrp textarea {
  resize: vertical;
  min-height: 66px;
}

/* ── Mode options ── */
.ms-mopts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.ms-mopt {
  padding: 10px 6px;
  border-radius: 10px;
  border: 1.5px solid #e2d9d0;
  background: #faf7f4;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.ms-mopt.sel,
.ms-mopt:hover {
  border-color: var(--maroon);
  background: rgba(139, 26, 26, 0.05);
}
.ms-mopt i {
  font-size: 17px;
  color: var(--maroon);
  display: block;
  margin-bottom: 4px;
}
.ms-mopt-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  display: block;
}
.ms-mopt-price {
  font-size: 10px;
  font-weight: 700;
  color: #c9a04a;
}

/* ── Chips ── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.chip {
  padding: 5px 11px;
  border-radius: 16px;
  border: 1.5px solid #e2d9d0;
  background: #faf7f4;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-mid);
  transition: all 0.2s;
}
.chip.sel,
.chip:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}

/* ── Payment method selector ── */
.ms-pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.ms-pay-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1.5px solid #e2d9d0;
  background: #faf7f4;
  cursor: pointer;
  transition: all 0.2s;
}
.ms-pay-method.sel,
.ms-pay-method:hover {
  border-color: var(--maroon);
  background: rgba(139, 26, 26, 0.05);
}
.ms-pay-method-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(139, 26, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--maroon);
  flex-shrink: 0;
  transition: 0.2s;
}
.ms-pay-method.sel .ms-pay-method-ico {
  background: var(--maroon);
  color: #fff;
}
.ms-pay-method-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.ms-pay-method-sub {
  font-size: 10px;
  color: var(--text-lt);
}
.ms-pay-sel-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d4cbc2;
  margin-left: auto;
  flex-shrink: 0;
  transition: 0.2s;
}
.ms-pay-method.sel .ms-pay-sel-dot {
  border-color: var(--maroon);
  background: var(--maroon);
  box-shadow: inset 0 0 0 3px #fff;
}

/* ── Mode chips (Video/Call/Chat) ── */
.ms-mode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.ms-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 16px;
  border: 1.5px solid #e2d9d0;
  background: #faf7f4;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mid);
}
.ms-mode-chip i {
  color: var(--maroon);
  font-size: 11px;
}

/* ── Date/time grid ── */
.ms-dt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── Real file upload area ── */
.ms-upload-area {
  border: 2px dashed #d4c8be;
  border-radius: 11px;
  padding: 20px 14px;
  text-align: center;
  background: #faf6f2;
  margin: 10px 0 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.ms-upload-area:hover,
.ms-upload-area.drag-over {
  border-color: var(--maroon);
  background: rgba(139, 26, 26, 0.03);
}
.ms-upload-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.ms-upload-ico {
  width: 38px;
  height: 38px;
  background: rgba(139, 26, 26, 0.08);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 17px;
  color: var(--maroon);
}
.ms-upload-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.ms-upload-sub {
  font-size: 11px;
  color: var(--text-lt);
}
.ms-upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.ms-preview-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid #e2d9d0;
}
.ms-upload-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--maroon);
  margin-top: 6px;
  display: block;
}

/* ── Encrypt badge ── */
.ms-encrypt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #2a9d8f;
  margin-top: 6px;
}

/* ── Care block (last step info box) ── */
.ms-care-block {
  background: #fff;
  border: 1.5px solid #ebe3db;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 0;
}
.ms-care-block .ms-card-title {
  font-size: 15px;
  font-weight: 700;
  
  color: var(--text);
  margin-bottom: 6px;
}
.ms-care-block .ms-card-desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 12px;
}

/* ── Checklist ── */
.ms-checklist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
}
.ms-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-mid);
}
.ms-ck-ico {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #2a9d8f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-ck-ico i {
  font-size: 8px;
  color: #fff;
}
.ms-ck-ico.pending {
  background: #e6ddd4;
}
.ms-ck-ico.pending i {
  color: #bbb;
}

/* ── Summary box ── */
.ms-summary {
  background: rgba(139, 26, 26, 0.04);
  border: 1.5px solid rgba(139, 26, 26, 0.1);
  border-radius: 10px;
  padding: 13px 15px;
  margin-top: 10px;
}
.ms-summary-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--maroon);
  margin-bottom: 8px;
}
#sumContent {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 2;
}

/* ── Bottom nav ── */
.modal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 18px;
  border-top: 1px solid #ebe3db;
  background: #f9f6f3;
}
.btn-back2 {
  padding: 9px 18px;
  border-radius: 20px;
  background: #fff;
  color: var(--text-mid);
  border: 1.5px solid #ddd4cc;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--tr);
}
.btn-back2:hover {
  background: #f0ebe4;
  border-color: #ccc4ba;
}
.btn-next2 {
  padding: 10px 24px;
  border-radius: 20px;
  background: var(--maroon);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: var(--tr);
}
.btn-next2:hover {
  background: var(--maroon-dk);
  transform: translateY(-2px);
}

/* ── Success ── */
.modal-success {
  display: none;
  text-align: center;
  padding: 28px 20px 18px;
}
.suc-ico {
  width: 68px;
  height: 68px;
  background: rgba(42, 157, 143, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #2a9d8f;
  margin: 0 auto 16px;
  animation: suc-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
      background: linear-gradient(135deg, #22C55E 0%, #059669 100%), rgba(0, 0, 0, 0.00);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00), 0 0 0 0 rgba(0, 0, 0, 0.00), 0 25px 50px -12px rgba(139, 58, 58, 0.25);
}
@keyframes suc-pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.modal-success h4 {
  
  font-size: 21px;
  color: var(--maroon);
  margin-bottom: 8px;
}
.modal-success p {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.8;
}
.booking-ref {
  display: inline-block;
  margin: 12px auto;
  background: #fff;
  border: 1px dashed var(--maroon);
  padding: 6px 20px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: 2px;
}

/* ===================================================
   RESPONSIVE
=================================================== */
@media (max-width: 1100px) {
}
@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero-btns {
    justify-content: center;
  }
  .hero-body {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-features {
    justify-content: center;
  }
  .hero-right {
    margin: 0 auto;
  }
  .vc-card {
    left: -10px;
    bottom: 14px;
  }
  .hero {
    padding: 90px 20px 50px;
  }
  .section {
    padding: 70px 20px;
  }
}
@media (max-width: 640px) {
  .stats-inner {
    grid-template-columns: 1fr 1fr;
  }
  .modal-box {
    border-radius: 16px;
  }
  .modal-hd,
  .modal-bd {
    padding: 20px;
  }
  .frow {
    flex-direction: column;
    gap: 0;
  }
  .mopts {
    grid-template-columns: 1fr;
  }
  .hero-photo-wrap {
    width: min(280px, 80vw);
  }
  .offcanvas {
    width: 280px;
  }
  .hfeat {
    min-width: calc(50% - 7px);
    max-width: calc(50% - 7px);
  }
}
main{
  overflow-x: hidden;
      overflow: hidden;
}
/******************************* Responsive ********************************/
/* =========================================================
   ULTRA WIDE SCREENS (2K / Large Desktop)
   ========================================================= */
@media (min-width: 1800px) {
  
}

/* =========================================================
   LAPTOP LARGE (1600px)
   ========================================================= */
@media (max-width: 1600px) {
 
}

/* =========================================================
   1920px @125% SCALING (1536px viewport)
   ========================================================= */
@media (max-width: 1536px) {
  
}


/* =========================================================
   LAPTOP STANDARD (1440px / 1366px)
   ========================================================= */
@media (max-width: 1366px) {
 
}

/* =========================================================
   1920px @150% SCALING (1280px viewport)
   ========================================================= */
@media (max-width: 1280px) {
 .nav-links {
    gap: 20px;
}
.login {
    margin-right: 20PX;
}
.hero-title {
    margin-bottom: 15px;
    font-size: 58px;
    line-height: 160.308%;
}
.hero-body {
    font-size: 20px;
}
.hfeat h5 {
    font-size: 24px;
}
.mode-card p {
    font-size: 15px;
}
.portal-left {
    .bc-title {
        font-size: 36px;
    }
    .bc-sub {
        font-size: 20px;
    }
}

}

/* =========================================================
   TABLET LANDSCAPE
   ========================================================= */
@media (max-width: 1199.98px) {
 .nav-brand {
    gap: 6px;
}
.nav-brand-text {
    font-size: 20px;
}
.nav-links {
        gap: 0px;
  }
  .nav-links a {
    font-size: 14px;
}
.btn-book-nav {
    font-size: 12.937px;
}
.hero {
    padding: 60px 40px 50px;
}
    .hero-title {
        margin-bottom: 10px;
        font-size: 46px;
        span {
        font-size: 53px;
        display: block;
    }
    }
  .hero-subtitle {
    font-size: 26.523px;
    margin-bottom: 10px;
}
    .hero-body {
        font-size: 15px;
    }
    .btn-hero-primary,.btn-hero-outline{
      font-size: 18px;
        padding: 11px 26px;
    }
    .hfeat {
    padding: 20px 10px;
    border-radius: 18px;
    height: 146px;
}
    .hfeat h5 {
        font-size: 18px;
    }
  .hfeat p {
    font-size: 10.871px;
}
.hfeat-icon {
    border-radius: 10px;
}
.bc-pill,.how-pill {
    padding: 12px 28px;
    font-size: 18px;
}
.bc-title,.how-main-title {
    font-size: 46px;
    line-height: 60.4px;
}
.bc-sub,.how-main-sub {
    font-size: 24px;
    line-height: 35px;
}
.mb-90 {
    margin-bottom: 50px;
}
.feat-card-big {
    padding: 16px 12px 18px;
}
.feat-card-big h4 {
    font-size: 24px;
    line-height: 24px;
}
.feat-card-big p {
    font-size: 14px;
    margin-bottom: 18px;
}
.hiw-card h4 {
    font-size: 26px;
    line-height: 20px;
}
.hiw-card p {
    font-size: 18px;
    line-height: 27px;
}
.svc-sec {
    background: #fff;
    padding: 60px 40px;
}
.svc-dot {
    aspect-ratio: unset;
    padding: 14px 10px;
    width: 100px;
    height: 100px;
}
.svc-grid {
  grid-template-columns: repeat(8, 1fr);
  max-width: 900px;
  gap: 12PX;
}
.svc-dot.light span {
    font-size: 12px;
}
.consult-sec {
    padding: 50px 40px;
}
.modes-row {
    gap: 20px;
}
.consult-header {
    text-align: center;
    margin-bottom: 35px;
}
.mode-card {
    padding: 15px;
    border-radius: 20px;
}
.mode-price-badge {
    font-size: 14px;
}
.mode-card p {
        font-size: 13px;
        line-height: normal;
    }
    .mode-features li {
    gap: 6px;
    font-size: 15px;
    line-height: 16px;
}
.testi-card-text {
    font-size: 14px;
}
.testi-author {
    font-size: 17px;
}
.gallery-header {
    padding: 0 60px;
    margin-bottom: 20px;
    text-align: center;
    width: 77%;
    margin-inline: auto;
}
    .portal-left {
        .bc-title {
            font-size: 28px;
        }
        .bc-sub {
            font-size: 16px;
        }
    }
.portal-feat-text h5 {
    font-size: 20px;
}
.btn-portal {
    padding: 14px 40px;
    font-size: 18px;
}
.about-sec{
  .gallery-header {
        padding: 0 0px;
    }
}
.about-inner {
    grid-template-columns: 370px 1fr;
    gap: 20px;
}
.about-note-card {
    padding: 12px 12px;
    border-radius: 16px;
}
.about-name-card {
    bottom: 15px;
    left: 16px;
    right: 16%;
    padding: 14px 10px;
    border-radius: 20px;
}
.about-name-card h3 {
    font-size: 24.974px;
}
.about-name-card .about-deg {
    font-size: 15px;
    margin-bottom: 8px;
}
.about-licensed {
    font-size: 20px;
}
.about-license-tags {
    gap: 8px;
}
.about-ltag {
    font-size: 10px;
}
.about-note-card p {
    margin-bottom: 10px;
    font-size: 13.896px;
    line-height: 134.565%;
}
.about-card-label {
    margin-bottom: 10px;
    font-size: 24px;
}
.about-interests-card {
    padding: 14px 14px;
    border-radius: 16px;
}
.about-interest-item {
    gap: 10px;
    font-size: 18px;
    line-height: 22px;
}
.about-int-icon {
    width: 20px;
    height: 20px;
    background: transparent;
}
.about-sec {
    background: #fff;
    padding: 60px 40px;
}
.hl-feat-body h3 {
    margin-bottom: 6px;
    font-size: 28px;
    line-height: 36px;
}
.hl-feat-body p {
    font-size: 16px;
}
.hl-grid {
    gap: 18px;
}
.hl-article {
    padding: 10px 10px;
    border-radius: 12px;
}
.hl-articles {
    gap: 14px;
}
.hl-article h4 {
    margin-bottom: 7px;
    font-size: 17px;
    line-height: 20px;
}
.hl-article p {
    font-size: 12px;
    line-height: 16px;
}
.health-sec,.faq-sec,.cta-sec {
    padding: 60px 40px;
}
.faq-q {
    padding: 10px 10px;
    gap: 11px;
}
.faq-q-text {
    font-size: 20px;
    line-height: 130%;
}
.faq-item {
    margin-bottom: 15px;
}
.faq-a {
    padding: 0 10px 15px 50px;
    line-height: 140%;
    font-size: 14px;
}
.cta-sec{
      .gallery-header {
        padding: 0;
        margin-bottom: 20px;
        text-align: center;
        width: 80%;
        margin-inline: auto;
    }
    .how-main-sub {
        font-size: 16px;
    }
}
.cta-contact-label {
    margin-bottom: 2px;
    font-size: 20px;
    line-height: 28px;
}
.cta-contact-value {
    font-size: 20px;
    line-height: 24px;
}
.cta-emergency {
    padding: 16px 17px;
    font-size: 15px;
}
.store-banner {
    border-radius: 30px;
    grid-template-columns: 3fr 2fr;
    gap: 30px;
    padding: 30px 30px;
}
.store-banner-title {
    font-size: 50px;
    line-height: 26px;
}
.store-banner-title span {
    font-size: 40px;
}
.modal-box{
    width: 100%;
    max-width: 660px;
}
}

/* =========================================================
   TABLET PORTRAIT
   ========================================================= */
@media (max-width: 991.98px) {
  .hero-title {
        margin-bottom: 10px;
        font-size: 30px;
    }
    .hero-features {
        margin-bottom: 40px;
    }
    .hfeat {
        text-align: left;
    }
        .vc-card {
        left: -32px;
        bottom: -32px;
    }
    .bc-title, .how-main-title {
        font-size: 38px;
        line-height: 60.4px;
    }
    .svc-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .gallery-photo {
    border-radius: 20px;
    margin: 6px;
}
.about-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .store-banner-title {
        font-size: 44px;
        line-height: 18px;
    }
        .store-banner-title span {
        font-size: 35px;
    }
    .oc-head{
          padding: 14px 12px 14px;
      .nav-brand-icon {
          border: 1px solid #fff;
          border-radius: 10px;
      }
      .nav-brand-text {
        font-size: 20px;
        color: #fff;
    }
    }
}

/* =========================================================
   MOBILE LARGE
   ========================================================= */
@media (max-width: 767.98px) {
 
}

/* =========================================================
   MOBILE SMALL
   ========================================================= */
@media (max-width: 575.98px) {
    .nav-brand-text {
        font-size: 11px;
    }
    .nav-brand-icon {
    width: 40px;
    height: 40px;
}
    .nav-inner {
        padding: 6px 10px;
    }
        .login {
        margin-right: 20PX;
        display: none;
    }
    .btn-book-nav {
        font-size: 10.937px;
        padding: 10px 20px;
    }
    .oc-foot{
      .login {
        margin-right: 20PX;
        display: block;
        text-align: center;
        margin-bottom: 20px;
    }
    }
    .oc-head{
          .nav-brand-icon {
        width: 40px;
        height: 40px;
        border: 1px solid #fff;
        border-radius: 10px;
    }
    .nav-brand-text {
        font-size: 11px;
        color: #fff;
    }
    }
    .hero {
        padding: 30px 15px 30px;
    }
    .hero-title {
        line-height: 130.308%;
        span {
            font-size: 38px;
            display: block;
        }
    }
        .hero-subtitle {
        font-size: 19.523px;
        margin-bottom: 10px;
    }
        .hero-body {
        font-size: 14px;
    }
        .btn-hero-primary, .btn-hero-outline {
        font-size: 15px;
        padding: 8px 26px;
    }
    .badge-247 strong {
    font-size: 30px;
    line-height: 41.111px;
    margin-bottom: 0px;
}
.badge-247 {
    width: 107.349px;
    height: 100.871px;
}
.badge-247 span {
    font-size: 16px;
}
.vc-card {
    padding: 14px 18px;
    gap: 8px;
}
.vc-text {
    text-align: left;
}
.vc-text strong {
    font-size: 18.976px;
    line-height: 93.169%;
}
.vc-text span {
    font-size: 13.858px;
    line-height: 102.321%;
}
    .bc-pill, .how-pill {
        padding: 9px 22px;
        font-size: 15px;
        margin-bottom: 15px;
    }
        .hero-features {
        margin-bottom: 15px;
    }
        .bc-title, .how-main-title {
        font-size: 26px;
        line-height: 32.4px;
        margin-bottom: 10px;
    }
        .best-choice-sec {
        padding: 30px 15px;
    }
        .bc-sub, .how-main-sub {
        font-size: 16px;
        line-height: 24px;
    }
    .feat-grid {
        grid-template-columns: 1fr;
    }
    .how-main-title span {
    display: block;
}
    .how-sec {
        padding: 30px 15px;
    }
    .hiw-step {
    gap: 4px;
        margin-bottom: 0px;
}
    .hiw-card h4 {
        font-size: 20px;
        line-height: 14px;
    }
    .hiw-card p {
        font-size: 14px;
        line-height: 20px;
    }
    .hiw-avail {
    margin-top: 15px;
    font-size: 14px;
}
.hiw-card {
    margin-bottom: 25px;
    border-radius: 12px;
}
.hiw-check {
    font-size: 12px;
}
.hiw-timeline::before {
    bottom: 0px;
}
.tick {
    margin-top: -50px;
    margin-left: 3px;
}
.hiw-num-badge.done-badge {
    padding: 6px;
}
    .svc-sec {
        background: #fff;
        padding: 30px 15px;
    }
        .svc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
        .mode-price-badge {
        font-size: 13px;
    }
    .mode-card h4 {
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 14px;
}
    .consult-sec {
        padding: 30px 15px;
    }
        .testi-sec {
        padding: 30px 15px 30px;
    }
    .testi-rev {
    float: unset;
    height: auto;
    margin-right: 0;
    margin-bottom: 10px;
}
.testi-card {
    border-radius: 16px;
    padding: 12px 12px;
    min-height: 190px;
    border-radius: 12px;
}
.gallery-sec {
    padding: 30px 0;
}
    .gallery-header {
        padding: 0 0px;
    }
        .portal-sec {
        padding: 30px 15px;
    }
    .portal-sec {
    .bc-pill {
        margin-bottom: 15px;
    }
}
    .portal-left {
        .bc-title {
            font-size: 24px;
            text-align: center;
        }
        .bc-sub {
            font-size: 15px;
            text-align: center;
        }
    }
    .portal-features {
    width: 100%;
}
.portal-mockup {
    padding: 15px 15px;
    border-radius: 12px;
}
    .about-sec {
        background: #fff;
        padding: 30px 15px;
    }
        .about-name-card {
        bottom: 15px;
        left: 12px;
        right: 6%;
        padding: 14px 10px;
        border-radius: 16px;
    }
        .health-sec, .faq-sec, .cta-sec {
        padding: 30px 15px;
    }
    .hl-topbar {
    text-align: center;
    margin-bottom: 0;
}
.hl-feat-body {
    padding: 10px 0;
}
.hl-feat-body h3 {
        margin-bottom: 6px;
        font-size: 20px;
        line-height: normal;
    }
        .hl-feat-body p {
        font-size: 14px;
    }
    .faq-q-text {
        font-size: 18px;
        line-height: 110%;
    }
    .faq-q {
        padding: 6px 6px;
        gap: 6px;
    }
    .faq-item {
    border-radius: 10px;
}
.faq-grid {
    gap: 0px;
}
    .cta-sec {
        .how-main-sub {
            font-size: 15px;
            line-height: normal;
        }
    }
    .cta-sec {
        .gallery-header {
            width: 100%;
        }
    }
    .cta-contact-card {
    padding: 15px 15px;
    gap: 14px;
}
.cta-contact-label {
        margin-bottom: 2px;
        font-size: 18px;
        line-height: 20px;
    }
    .cta-contact-value {
        font-size: 18px;
        line-height: 24px;
    }
        .cta-emergency {
        padding: 16px 17px;
        font-size: 15px;
        margin-top: 0;
        line-height: normal;
    }
        .store-banner {
        border-radius: 12px;
        gap: 30px;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .store-badge {
    margin-bottom: 20px;
    font-size: 18px;
}
    .store-banner-title {
        font-size: 32px;
        line-height: 9px;
    }
        .store-banner-title span {
        font-size: 26px;
    }
        footer {
        padding: 30px 15px 25px;
            .nav-brand {
        margin-bottom: 15px;
    }
        .nav-brand-text {
        font-size: 24px;
    }
    }
    .ft-brand-desc {
    max-width: 100%;
    font-size: 15.749px;
}
.ft-col h5 {
    margin-bottom: 12px;
    font-size: 18.623px;
    line-height: 28px;
}
.ft-col a {
    margin-bottom: 7px;
    font-size: 13.942px;
}
.ft-contact-item {
    gap: 4px;
}
    .navbar.scrolled .nav-inner {
        padding: 6px 10px;
    }
    .btn-book-nav {
        font-size: 10.937px;
        padding: 6px 11px;
    }
        .nav-brand-text {
        font-size: 15px;
    }
    .nav-right {
    gap: 7px;
}
.nav-inner {
    gap: 9px;
}
.oc-nav a {
    padding: 10px 15px;
    font-size: 16px;
}
    .oc-head {
        .nav-brand-text {
            font-size: 18px;
            color: #fff;
        }
    }
    .modal-hd, .modal-bd {
        padding: 15px;
    }
    .ms-card-desc {
    line-height: normal;
}
.ms-pay-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 6px;
    border-radius: 11px;
    text-align: center;
    position: relative;
}
.ms-pay-sel-dot {
    position: absolute;
    right: 7px;
}
}