/* =========================
       COLOR SYSTEM (VERSION 2)
       ========================= */
    :root {
      /* Brand / Backgrounds */
      --bg-main: #fffcfa;          /* Porcelain White */
      --bg-section-soft: #f2ede7;  /* Soft Sand */
      --bg-card: #fbf7f3;          /* Ivory Tint */
      --bg-chip: #f7dde2;          /* Blush Pink Accent */

      /* Brand Accents */
      --brand-champagne: #f5e9da;  /* Champagne Beige */
      --brand-nude: #e8d3c5;       /* Warm Nude / Skin Tone */
      --brand-rose: #eb8a82;       /* Dusty Rose (Primary Button) */
      --brand-rose-hover: #c48c86; /* Deeper Rose */

      /* Text */
      --text-main: #3e2f2f;        /* Charcoal Brown */
      --text-muted: #7a6a63;       /* Taupe */
      --text-soft: #9b8a81;        /* Softer secondary */
      --text-hero: #6e5e55;        /* Hero Section text */

      /* Borders & Lines */
      --border-soft: #e3dad3;      /* Warm grey soft border */

      /* Misc */
      --transition: 0.3s ease;
    }

    /* Reset + base */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
      background: var(--bg-main);
      color: var(--text-main);
    }

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

    a {
      text-decoration: none;
      color: inherit;
    }

    .container {
      width: 100%;
      max-width: 1220px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    section {
      padding: 4.5rem 0;
    }

    h2.section-title {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: var(--text-main);
      letter-spacing: 0.03em;
       
    }

    p.section-intro {
      max-width: 740px;
      color: var(--text-muted);
      margin-bottom: 2.5rem;
      line-height: 1.7;
    }

    /* =========================
       NAVBAR
       ========================= */

    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 252, 250, 0.96);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border-soft);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 5.3rem;
    }
    
    .logo-image{
     width:260px;
     height: auto;         
    }

    @media (max-width:360px) {
      .logo-image{
        width: 240px;
      }      
    }

    @media (max-width:320px) {
    .logo-image{
      width: 220px;
    }      
  }  

    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.75rem;
      font-size: 0.92rem;
      font-weight: 500;
    }

    .nav-links a {
      position: relative;
      color: var(--text-soft);
      transition: color var(--transition);
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -0.4rem;
      width: 0;
      height: 2px;
      background: var(--brand-rose);
      transition: width var(--transition);
    }

    .nav-links a:hover {
      color: var(--text-main);
    }

    .nav-links a.active {
      color: var(--text-main);
    }

    .nav-links a.active::after {
      width: 100%;
    }

    .nav-cta {
      padding: 0.55rem 1.2rem;
      border-radius: 999px;
      border: 1px solid var(--brand-rose);
      color: var(--brand-rose);
      font-size: 0.85rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      transition: background var(--transition), color var(--transition), box-shadow var(--transition);
      background: rgba(249, 243, 238, 0.7);
    }

    .nav-cta:hover {
      background: var(--brand-rose);
      color: #fffcfa;
      box-shadow: 0 10px 30px rgba(201, 135, 128, 0.45);
    }

    .nav-toggle {
      display: none;
      border: none;
      background: transparent;
      cursor: pointer;
      padding:10px 1px 10px 1px;
    }

    .nav-toggle-bar {
      width: 22px;
      height: 2px;
      background: var(--text-main);
      border-radius: 999px;
      position: relative;
      transition: var(--transition);
    }

    .nav-toggle-bar::before,
    .nav-toggle-bar::after {
      content: "";
      position: absolute;
      left: 0;
      width: 22px;
      height: 2px;
      background: var(--text-main);
      border-radius: 999px;
      transition: var(--transition);
    }

    .nav-toggle-bar::before {
      top: -6px;
    }

    .nav-toggle-bar::after {
      top: 6px;
    }

    .nav-toggle.open .nav-toggle-bar {
      background: transparent;
    }

    .nav-toggle.open .nav-toggle-bar::before {
      transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle.open .nav-toggle-bar::after {
      transform: translateY(-6px) rotate(-45deg);
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 1.75rem;
    }

    @media (max-width: 1010px) {
      .nav-menu {
        position: fixed;        
        inset: 5.3rem 0 auto 0;
        background: #fffcfa;
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.5rem 1.5rem;
        border-bottom: 1px solid var(--border-soft);
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--transition), opacity var(--transition);
      }

      .nav-menu.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }

      .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
      }

      .nav-cta {
        width: 100%;
        text-align: center;
      }

      .nav-toggle {
        display: block;
      }
    }

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

    .hero {
      min-height: calc(100vh - 5.3rem);
      display: flex;
      align-items:flex-start; 
      background-image: url("../images/hero-background-girl.webp");    
      /* 5.3rem is nav height */  
      background-size: auto calc(99% - 5.3rem);      
      background-position-x: right;
      background-position-y: bottom;
      background-repeat: no-repeat;
      background-attachment: fixed;
      padding-top:3rem;
    }

    @media (max-width:1000px) {
      .hero {
        background-position-x: right -50px;
      }
    }

    @media (max-width:800px) {
      .hero {
        background-position-x: right -100px;
      }
    }

    @media (max-width:600px) {
      .hero {
        background-position-x: right -150px;        
      }     

    }

    @media (max-width:450px) {
      .hero {
        background-position-x: right -200px;
      }
    }
    /* for long phones */
    @media (max-width:450px) and (max-aspect-ratio:0.55) and (orientation: portrait) {
      .hero {
        background-position-x: right -270px;
      }
    }
    /* for very Long Phones */
    @media (max-width:450px) and (max-aspect-ratio:0.45) and (orientation: portrait) {
      .hero {
        background-position-x: right -320px;
      }
    }

    @media (max-width:375px) {
      .hero {
        background-position-x: right -240px;
      }
    }

    @media (max-width:350px) {
      .hero {
        background-position-x: right -230px;
      }
    }

    @media (max-width:320px) {
      .hero {
        background-position-x: right -250px;
      }
    }
   
    .hero-grid {
      display: grid;
      grid-template-columns: 0.7fr;
      align-items: center;
      justify-items: left;
      justify-content: left;

    }
  
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.25rem 0.75rem;
      border-radius: 999px;
      background: rgba(247, 221, 226, 0.7);
      color: var(--text-main);
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 1.1rem;

      background:rgb(242 242 242 / 80%);
      border:solid 1px #d5d8e0ab;
    }

    .hero-heading {
      font-size: clamp(3rem, 4vw, 3.5rem);
      line-height: 1.1;
      margin-bottom: 1rem;
      color: var(--text-main);
      text-shadow:0px 1px 2px #e9e9e9;
      color:#524343;
    }

    .hero-highlight {
      color: var(--brand-rose);
      text-shadow: 0px 1px 1px #6f5e5e;      

    }

    .hero-meta {
      display: grid;      
      gap: 1rem;
      margin-bottom: 2rem;
      margin-top:2rem ;
      font-size: 1rem;
      color: var(--text-soft);
      font-weight: 600;
    }

    .hero-meta-item {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .hero-meta-item::before{
      content:"\2713";
      color:#475546;
      align-self: flex-start;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .btn-primary {
      background: var(--brand-rose);
      color: #fffcfa;
      padding: 0.8rem 1.6rem;
      border-radius: 999px;
      border: none;
      font-size: 0.92rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background var(--transition), transform var(--transition),
        box-shadow var(--transition);
      box-shadow: 0 14px 40px rgba(201, 135, 128, 0.4);
    }

    .btn-primary:hover {
      background: var(--brand-rose-hover);
      transform: translateY(-1px);
      box-shadow: 0 18px 50px rgba(196, 140, 134, 0.5);
    }

    .btn-ghost {
      border-radius: 999px;
      padding: 0.8rem 1.4rem;
      border: 1px solid var(--border-soft);
      background: rgba(255, 252, 250, 0.9);
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      color: var(--text-main);
      transition: background var(--transition), border-color var(--transition);
    }

    .btn-ghost:hover {
      background: #f5e9da;
      border-color: #ddc9b8;
    } 

    @media (max-width: 900px) {
      .hero-grid {
        grid-template-columns: minmax(0, 0.85fr);
      }
      .hero {
        padding-top: 1.4rem;
      }     
    } 
      /* For TABLETS  in potrait */
     @media (min-width:600px) and (max-aspect-ratio:1.4) {          
        .hero {
          min-height: fit-content;
          background-attachment: scroll;
      } 
      .hero-grid {
          grid-template-columns: 0.8fr;
      }                   
    }

    @media (max-width:600px){      
      .hero{
        background-image: url("../images/hero-background-girl.webp");
        background-color: #f6efe8f1;
        background-blend-mode: overlay;
        padding-top: 1rem;
      }
      .hero-grid{
        grid-template-columns: minmax(0, 1fr);
      }
      .hero-badge{
        letter-spacing:0.08em ;
        font-size:0.70rem;
      }
           
      .hero-text{
        color: var(--text-hero);
      }      
      .hero-meta{
        color:var(--text-hero);
        gap: 0.9rem;
      }
      
    }

    @media(max-width:400px){
      .hero-meta-item {
        font-size: 0.9rem;
      }
    }

    /* =========================
       ABOUT SECTION 
       ========================= */
    #about {
      background: var(--bg-main);
    }

    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: stretch;
      justify-items: center;
    }

    .about-text-block {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .about-text-block p {
      color: var(--text-muted);
      line-height: 1.8;
    }

    .about-text-block strong {
      color: var(--text-main);
    }

    /* Doctor card (right side) */
    .about-doctor-card {
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 1.2rem;
      padding: 1.4rem 1.4rem 1.6rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      box-shadow: 0 16px 40px rgba(164, 132, 113, 0.18);
      max-width: 510px;
    }

    .about-doctor-photo-wrap {
      border-radius: 1rem;
      overflow: hidden;
      background:inherit;     
    }

    .about-doctor-photo {
      width: 100%;
      height:auto;      
    }

    .about-doctor-info {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .about-doctor-name {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-main);
      text-transform: capitalize;      
    }

    .about-doctor-title {
      font-size: 0.8rem;
      text-transform: capitalize;
      letter-spacing: 0.12em;
      color: var(--text-soft);       
    }
       .about-doctor-tag {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      background: var(--bg-chip);
      color: var(--text-main);
      margin-top: 1.2rem;      
      }
      
      .about-doctor-quals {
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.2;
      }
      
      .quals-item {
        margin-bottom: 0.9rem;
      }
      
      .quals-item strong {
        display: block;
        font-size: 0.9rem;        
      }
      
      .quals-item p {        
        font-size: 0.80rem;       
      }


      @media (max-width: 900px) {
        .about-grid {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      @media (max-width:350px) {
        .about-doctor-tag{
          font-size: 0.55rem;
        }        
      }  

     /*==========================
        TREATMENTS 
       ========================= */

    #treatments {
      background: var(--bg-section-soft);
    }
    
    .treatments-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2.2rem;
      align-items: flex-start;
    }
    
    .treatment-card {
      border-radius: 1rem;
      background: var(--bg-main);
      border: 1px solid var(--border-soft);
      overflow: hidden;
      display: flex;
      flex-direction: column;          
      transition: transform var(--transition), 
                  box-shadow var(--transition),
                  background var(--transition), 
                  border-color var(--transition);
      cursor: pointer;
    }
    
    .treatment-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 40px rgba(172, 143, 124, 0.2);
      background: #fffaf6;
      border-color: #e1cfc0;
    }
    
    /* Refined Image – Smaller, Elegant */
    .treatment-image-wrapper {
      width: 100%;
      padding-bottom: 65%;
      position: relative;
      overflow: hidden;
      background: #f2ede7;
    }
    
    .treatment-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform 0.3s ease;
    }
    
    .treatment-card:hover .treatment-image {
      transform: scale(1.03);
    }
    
    /* Title – No Margin Bottom (No Padding Below) */
    .treatment-card-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--brand-rose);
      padding: 1rem 1rem 0.4rem 1rem;
      text-transform: capitalize;
      line-height: 1.25;
    }
    
    /* Description Paragraph – No Extra Padding */
    .treatment-card > p {
      padding: 0 1rem 0.6rem 1rem;
      color: var(--text-muted);
      font-size: 0.9rem;
      line-height: 1.5;      
    }
    
    /* Body Items – Tight, Minimal Spacing */
    .treatment-card-body {
      padding: 0 1rem 1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .treatment-body-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    
    .treatment-body-item h4 {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: capitalize;
    }
    
    .treatment-body-item p {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.4;
    }
    
    /* Desktop – 3 columns */
    @media (max-width: 1024px) {
      .treatments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
      }
    }
    
    /* Tablet – 2 columns */
    @media (max-width: 768px) {
      .treatments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.3rem;
      }
    
      .treatment-card-title {
        font-size: 1.1rem;
        padding: 0.9rem 0.9rem 0.35rem 0.9rem;
      }
    
      .treatment-card > p {
        padding: 0 0.9rem 0.55rem 0.9rem;
        font-size: 0.88rem;
      }
    
      .treatment-card-body {
        padding: 0 0.9rem 0.9rem 0.9rem;
        gap: 0.45rem;
      }
    
      .treatment-body-item h4 {
        font-size: 0.85rem;
      }
    
      .treatment-body-item p {
        font-size: 0.8rem;
      }
    }
    
    /* Mobile – 1 column */
    @media (max-width: 480px) {
      .treatments-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
      }
    
      .treatment-image-wrapper {
        padding-bottom: 62%;
      }
    
      .treatment-card-title {
        font-size: 1.05rem;
        padding: 0.85rem 0.85rem 0.3rem 0.85rem;
      }
    
      .treatment-card > p {
        padding: 0 0.85rem 0.5rem 0.85rem;
        font-size: 0.87rem;
      }
    
      .treatment-card-body {
        padding: 0 0.85rem 0.85rem 0.85rem;
        gap: 0.4rem;
      }
    
      .treatment-body-item h4 {
        font-size: 0.83rem;
      }
    
      .treatment-body-item p {
        font-size: 0.78rem;
      }
    }
    
    /* Very small phones */
    @media (max-width: 360px) {
      .treatments-grid {
        gap: 1rem;
      }
    
      .treatment-card-title {
        font-size: 0.98rem;
        padding: 0.75rem 0.75rem 0.25rem 0.75rem;
      }
    
      .treatment-card > p {
        padding: 0 0.75rem 0.45rem 0.75rem;
        font-size: 0.85rem;
      }
    
      .treatment-card-body {
        padding: 0 0.75rem 0.75rem 0.75rem;
      }
    }

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

    #gallery {
      background: var(--bg-main);
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 1.2rem;
      align-items: center;
      justify-items: center;
      justify-content: center;
      align-content: center;
    }
    .gallery-item {
      border-radius: 1rem;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }
    .gallery-item img {
      height: auto;
      width: auto;      
      transition: transform var(--transition), filter var(--transition);
      border-style: solid;
      border-width: 3px;
      border-radius: inherit;
      border-color: var(--brand-nude);
    }
    .gallery-item:hover img {
      transform: scale(0.90);      
      outline: 2px solid rgb(255, 155, 169);
      outline-offset: 4px;      
    }
    @media (max-width: 900px) {
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 640px) {
      .gallery-grid {
        grid-template-columns:1fr;
        gap:0.5rem;
      }      
    }
    .sub-section-divider{
     margin-top: 50px;  
    }
   


    /* Lightbox for gallery */
    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(18, 11, 8, 0.9);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;      
    }

    .lightbox.open {
      display: flex;
    }

    .lightbox-inner {
      position: static;      
      display: flex;
      align-items: center;
      justify-content: center;      
    }

    .lightbox-img {
      max-width: 98vw;
      max-height:98vh;      
      border-radius: 0.75rem;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
      position: absolute;
      background: rgba(144, 144, 144, 0.5);
      color: #fdf6f2;
      border: none;
      border-radius:50%;
      width:50px;
      height:50px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 2rem;
      font-weight: bolder;
      transition: background var(--transition), transform var(--transition);
    }

    .lightbox-close {
      top: 4vh;
      right:3vw;
    }

    .lightbox-prev {
      left: 1vw;
      top: 50%;
      transform: translateY(-50%);
    }

    .lightbox-next {
      right: 1vw;
      top: 50%;
      transform: translateY(-50%);
    }

    .lightbox-close:hover,
    .lightbox-prev:hover,
    .lightbox-next:hover {
      background: rgba(144, 144, 144, 0.8);
      transform: translateY(-50%) scale(1.3) ;
      
    }
    .lightbox-close:hover{
      transform: scale(1.3);
    }   

@media (max-width:800px) {

  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}
@media (max-width:320px) {

  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
}

@media (max-aspect-ratio:0.55) and (orientation: portrait) {
  .lightbox-close {
      top: 8vh;
      right:3vw;
    }
}

    /* =========================
       FAQ
       ========================= */
    #faq {
      background: var(--bg-section-soft);
    }

    .faq-list {
      display: grid;
      gap: 1rem;
      max-width: 900px;
    }

    .faq-item {
      border-radius: 0.9rem;
      border: 1px solid var(--border-soft);
      background: #fffcfa;
      padding: 0.9rem 1.1rem;
      cursor: pointer;
      transition: box-shadow var(--transition), border-color var(--transition),
        background var(--transition);
    }

    .faq-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .faq-question {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-main);
    }

    .faq-icon {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 1px solid var(--border-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      color: var(--text-soft);
      flex-shrink: 0;
      transition: background var(--transition), color var(--transition),
        transform var(--transition), border-color var(--transition);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.7;
      padding-top: 0;
      transition: max-height 0.22s ease, padding-top 0.22s ease;
    }

    .faq-item.open {
      box-shadow: 0 14px 40px rgba(148, 118, 101, 0.22);
      border-color: #e1cfc0;
      background: #fffaf6;
    }

    .faq-item.open .faq-answer {
      max-height: fit-content;
      padding-top: 0.45rem;
    }

    .faq-item.open .faq-icon {
      background: var(--brand-rose);
      color: #fffcfa;
      border-color: var(--brand-rose);
      transform: rotate(90deg);
    }

    /* =========================
       CONTACT SECTION
       ========================= */
        #contact {
          background: var(--bg-main);
        }
    
        .contact-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
          gap: 2rem;
          align-items: center;
        }
    
        .contact-card {
          border-radius: 1.1rem;
          padding: 1.6rem 1.7rem;
          background: var(--bg-card);
          border: 1px solid var(--border-soft);
          font-size: 0.9rem;
          color: var(--text-muted);
    
          display: grid;
          grid-template-columns: 1fr;
          row-gap: 2.5rem;
          justify-items: left;
          box-shadow: 0px 0px 40px rgba(217, 165, 160, 0.3);
        }
    
        .contact-card .section a {
          transition: all 0.1s ease-in-out;
          display: inline-block;
        }
         .contact-card .section a:hover {
          transform: scale(1.03);
          font-weight: 700;
        }
    
        .contact-card .section h3 {
          line-height: 1.8;
        }
    
        .contact-card .section p {
          line-height: 1.3;
        }
    
        .contact-card .section .fa-whatsapp,
        .contact-card .section .fa-phone {
          color: rgb(52, 101, 60);
        }         
    
        .contact-card .section p:nth-of-type(4) {
          margin-top: 0.3rem;
        }
    
        .contact-map-wrap {
          border-radius: 1.1rem;
          overflow: hidden;
          border: 1px solid var(--border-soft);
          box-shadow: 0 14px 40px rgba(164, 132, 113, 0.18);
          background: #ffffff;
        }
    
        .contact-map {
          width: 100%;
          height: 450px;
          border: 0;
          display: block;
        }
    
        .map-link {
          display: block;
          padding: 0.7rem 1rem;
          font-size: 0.85rem;
          background: #fffaf6;
          color: var(--brand-rose);
          text-align: right;
          border-top: 1px solid var(--border-soft);
        }
    
        .map-link:hover {
          background: #f5e9da;
        }
    
        @media (max-width: 900px) {
          .contact-grid {
            grid-template-columns: 1fr;
          }
    
          .contact-card {
            justify-self: center;
          }
    
          .contact-map-wrap {
            justify-self: stretch;
          }
        }
    
        @media(min-width:1400px) {
          .contact-grid {
            gap: 4rem;
          }
        }
    

    /* =========================
       FOOTER
       ========================= */
    footer {
      padding: 2.5rem 0 2.2rem;
      border-top: 1px solid var(--border-soft);
      font-size: 0.85rem;
      color: #a79285;
      background: #f6efe8;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 2rem;
      margin-bottom: 1.5rem;
    }

    .footer-title {
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 0.6rem;
      color: var(--text-main);
    }

    .footer-text {
      color: #7f6c60;
      line-height: 1.6;
    }

    .footer-links a {
      display: block;
      margin-bottom: 0.4rem;
      color: #7f6c60;
    }

    .footer-links a:hover {
      color: var(--brand-rose);
    }

    .footer-contact-item + .footer-contact-item {
      margin-top: 0.4rem;
    }

    .footer-socials {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.6rem;
    }

    .footer-social-btn {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid var(--border-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      cursor: pointer;
      background: #fffcfa;
      color: #7f6c60;
      transition: background var(--transition), border-color var(--transition),
        color var(--transition), transform var(--transition);
      touch-action: manipulation;
    }

    .footer-social-btn:hover {
      background: var(--brand-rose);
      color: #fffcfa;
      border-color: var(--brand-rose);
      transform: translateY(-1px);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      border-top: 1px solid var(--border-soft);
      padding-top: 0.9rem;
      color: #a79285;
    }

    .footer-bottom a {
      color: #7f6c60;
    }

    .footer-bottom a:hover {
      color: var(--brand-rose);
    }

    @media (max-width: 900px) {
      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .footer-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* =========================
       ENTRANCE ANIMATIONS
       ========================= */
    @keyframes fadeUp {
      0% { opacity: 0; transform: translateY(18px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeRight {
      0% { opacity: 0; transform: translateX(-16px); }
      100% { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeLeft {
      0% { opacity: 0; transform: translateX(16px); }
      100% { opacity: 1; transform: translateX(0); }
    }

    .animate {
      opacity: 0;
    }
    .fade-up {
      animation: fadeUp 0.7s ease forwards;
    }
    .fade-right {
      animation: fadeRight 0.7s ease forwards;
    }
    .fade-left {
      animation: fadeLeft 0.7s ease forwards;
    }

    .delay-1 { animation-delay: 0.15s; }
    .delay-2 { animation-delay: 0.3s; }
    .delay-3 { animation-delay: 0.45s; }
    .delay-4 { animation-delay: 0.6s; }
    .delay-5 { animation-delay: 0.75s; }
    .delay-6 { animation-delay: 0.9s; }
 
    
/* ================================
   FLOATING CONTACT SYSTEM
================================ */

.floating-contact {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 1900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Main Trigger Button */

.floating-trigger {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  
  background: #477b8a; 
  color: #ffffff;
  font-size: 20px;

  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  position: relative;
  transition: transform 0.25s ease;
}

/* Gentle soft pulse outline */
.floating-trigger::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(169, 166, 216, 0.55);
  animation: softPulse 3.8s ease-in-out infinite;
}

@keyframes softPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.15;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

.floating-trigger:hover {
  transform: translateY(-3px);
}

/* Expand Panel */

.floating-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: all 0.25s ease;
}

.floating-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Action Buttons */

.floating-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 40px;
  text-decoration: none;
  font-size: 14px;
  background: #ffffff;
  color: #444;

  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}

.floating-action:hover {
  transform: translateX(-4px);
}

.floating-action.call {
  border-left: 3px solid #2e69ea;
}

.floating-action.whatsapp {
  border-left: 3px solid #24d172;
}

.floating-action.map-location {
  border-left: 3px solid #ed3244;
}

/* Mobile refinement */

@media (max-width: 768px) {
  .floating-trigger {
    width: 48px;
    height: 48px;
  }

  .floating-action span {
    display: none;
  }

  .floating-action {
    padding: 14px;
    border-radius: 50%;
    justify-content: center;
  }
}
/*==========================
   FONTS 
  ========================== */  
  /* NOTE: Fonts are limited to latin ,latin-extension characters only */

  /* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/Inter/Inter-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/Inter/Inter-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}