/* ══ RESET & ROOT ══ */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --sky:#00c8f0;
    --sky2:#00b0d8;
    --sky3:#0090b8;
    --sky4:#006f90;
    --sky5:#005070;
    --pink:#ff1a8c;
    --pink2:#e0007a;
    --pink3:#b8006a;
    --nav-h:65px;
  }
  html{scroll-behavior:smooth}
  body{font-family:'Poppins',sans-serif;background:var(--sky4);color:#fff;overflow-x:hidden}
  ::-webkit-scrollbar{width:6px}
  ::-webkit-scrollbar-track{background:var(--sky5)}
  ::-webkit-scrollbar-thumb{background:var(--pink);border-radius:3px}

  /* ══ DESKTOP NAV & HOVER FIX ══ */
  nav{
    position:fixed;top:0;left:0;right:0;height:var(--nav-h);
    background:var(--sky);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 5%;z-index:1000;
    box-shadow:0 3px 20px rgba(0,0,0,0.3);
  }
 .brand{text-decoration:none;font-size:1.5rem;font-weight:800;letter-spacing:1px}
.brand .m{color:#fff}.brand .t{color:var(--pink)}

.nav-links{display:flex;gap:2.2rem;list-style:none}
.nav-links a{
  color:#fff;text-decoration:none;
  font-size:1rem;font-weight:600;
  position:relative;padding:6px 12px;
  border-radius:6px;
  border-top:2px solid transparent;
  transition:color .25s, background .25s, font-size .25s, border-color .25s;
}
.nav-links a:hover, .nav-links a.active{
  color:var(--pink);
  background:#fff;
  font-size:1.08rem;
  border-top:2px solid var(--pink);
}

/* Hamburger with bg */
.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:var(--pink);
  padding:8px 10px;border-radius:7px;
  transition:background .3s,transform .2s;
}
.hamburger:hover{background:var(--pink2);transform:scale(1.08)}
.hamburger span{width:22px;height:2px;background:#fff;border-radius:2px;display:block}
@media(max-width:768px){
  .nav-links{display:flex}
  .hamburger{display:none}
}
  /* ══ HERO & WELCOME ══ */
  #inner-hero { 
    position:relative; height:40vh; display:flex; align-items:center; justify-content:center; 
    background:url('img/mc.jpeg') center/cover no-repeat; margin-top:var(--nav-h); 
  }
  .hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); }
  #inner-hero h1 { position:relative; z-index:2; font-size:clamp(2rem, 5vw, 3.5rem); font-weight:800; }

  .hero-bottom{
    position:relative; z-index:10; padding:0 5%; background:var(--sky3);
    display:grid; grid-template-columns:1fr 420px; gap:2.5rem; align-items:start;
  }
  .welcome-content{padding:2.5rem 0;}
  .welcome-content h2{font-size:1.8rem; margin-bottom:1rem; color:#fff;}
  .welcome-content p{margin-bottom:1.2rem; line-height:1.8; color:rgba(255,255,255,0.9); text-align:justify;}
  .welcome-content .sec-label{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--pink);font-weight:700;margin-bottom:.4rem}

  .booking-box{
    margin-top:-70px; background:var(--sky2); border:3px solid var(--pink);
    border-radius:14px; padding:1.6rem 1.8rem; box-shadow:0 10px 40px rgba(0,0,0,0.35);
  }
  .booking-box h3{color:var(--pink); margin-bottom:1rem; font-size:1.1rem;}
  .booking-box input, .booking-box select {
      width:100%; padding:0.8rem; margin-bottom:0.8rem; border-radius:8px; 
      border:1px solid var(--sky); background:var(--sky3); color:#fff; outline:none;
  }
  .btn-pink{width:100%; padding:.78rem; background:var(--pink); color:#fff; font-weight:700; border:none; border-radius:8px; cursor:pointer; transition: 0.3s;}
  .btn-pink:hover{background:var(--pink2); transform:translateY(-2px);}

  /* ══ WHY CHOOSE ══ */
  #why{background:var(--sky3); padding:4rem 6%}
  .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
 .why-item{
  display:flex;align-items:flex-start;gap:.9rem;
  background:var(--sky2);border-radius:10px;
  padding:1.1rem 1.2rem;
  border-left:4px solid var(--pink);
  transition:transform .3s,box-shadow .3s;
}
.why-item:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,0.25)}
.why-item .wi-icon{
  font-size:1.5rem;min-width:38px;height:38px;
  background:var(--pink);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.why-item h4{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:.15rem}
.why-item p{font-size:.8rem;color:rgba(255,255,255,.75);line-height:1.5}

  /* ══ SERVICES ══ */
  #services{background:#ffffff; padding:4.5rem 6%; color:#333;}
  .sec-title{text-align:center; font-size:2rem; font-weight:800; margin-bottom:3rem; color:var(--sky5);}
  .services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem;}
  .s-card{
    background:var(--pink3); border-radius:12px; padding:2rem; text-align:center; color:#fff;
    transition:0.3s;
  }
  .s-card:hover{background:var(--sky2); transform:translateY(-5px);}
  .s-icon{width:60px; height:60px; background:var(--sky); border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size:1.5rem;}

  /* ══ TARIFF ══ */
  #tariff{background:var(--sky5); padding:4.5rem 6%; text-align:center;}
  .tariff-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem;}
  .t-card{background:var(--sky3); border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.1);}
  .t-img-wrap img{width:100%; height:200px; object-fit:cover;}
  .t-body{padding:1.5rem;}
  .t-body .rate{font-size:1.8rem; font-weight:800; color:var(--pink); margin:10px 0;}

  /* ══ CONTACT ══ */
  #contact{background:var(--pink3); padding:4.5rem 6%;}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem;}
  .contact-form-box{background:var(--sky); padding:2rem; border-radius:15px;}
  .contact-form-box textarea{width:100%; height:100px; padding:0.8rem; border-radius:8px; background:var(--sky2); color:#fff; border:none; margin-bottom:1rem;}

  /* ══ FOOTER & FLOATS ══ */
  footer {
    flex-shrink: 0;
    background: var(--sky5);
    border-top: 2px solid var(--pink);
    text-align: center;
    padding: 1.5rem 1rem; /* Balanced padding */
    font-size: .85rem;
    color: rgba(255,255,255,.7);
  }
  .float-wa{position:fixed; bottom:100px; left:20px; background:#25d366; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:900;}

  /* ══ MOBILE MENU SYSTEM (BOTTOM-UP) ══ */
  @media (max-width: 768px) {
      nav .nav-links { display: none; }
      nav { justify-content: center; }
      .hero-bottom { grid-template-columns: 1fr; }
      .booking-box { order: -1; margin-top: -30px; }
      .contact-grid { grid-template-columns: 1fr; }

      .mobile-menu-sheet {
          position: fixed; bottom: -100%; left: 0; right: 0;
          background: #ffffff; border-radius: 25px 25px 0 0;
          padding: 30px 20px 100px 20px; z-index: 10001;
          transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
          box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
      }
      .mobile-menu-sheet.active { bottom: 0; }
      .sheet-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
      .sheet-links li a {
          display: block; padding: 15px; color: var(--sky5); text-decoration: none;
          font-weight: 700; background: #f8f9fa; border-radius: 12px; text-align: center;
      }
      .sheet-links li a:hover { background: var(--pink); color: #fff; }
       
      .sheet-links li a.active { background: var(--pink); color: #fff; }

      .menu-blur-bg {
          position: fixed; inset: 0; background: rgba(0,0,0,0.6);
          backdrop-filter: blur(4px); z-index: 10000;
          opacity: 0; visibility: hidden; transition: 0.3s;
      }
      .menu-blur-bg.active { opacity: 1; visibility: visible; }

      .mobile-footer-nav {
          position: fixed; bottom: 0; left: 0; right: 0; height: 70px;
          background: var(--sky); display: flex; justify-content: space-between;
          align-items: center; padding: 0 1.5rem; z-index: 10002; border-top: 3px solid var(--pink);
      }
      .m-nav-item.menu-trigger-btn {
          background: #fff; color: var(--pink); font-weight: 800;
          padding: 8px 20px; border-radius: 50px; cursor: pointer;
      }
  }

  @media (min-width: 769px) {
      .mobile-footer-nav, .mobile-menu-sheet, .menu-blur-bg { display: none; }
  }

  /* ══ CHANGE 6: FLOATING BUTTONS — fade by default, hover script effect ══ */
.float-wa,.float-ph{
  position:fixed;bottom:1.6rem;z-index:999;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;text-decoration:none;
  opacity:0.45; /* fade by default */
  transition:opacity .4s,transform .3s,box-shadow .3s;
}
.float-wa{left:1.6rem;background:#25d366;box-shadow:0 4px 14px rgba(37,211,102,.5)}
.float-ph{right:1.6rem;background:var(--sky);box-shadow:0 4px 14px rgba(0,200,240,.5)}
.float-wa:hover,.float-ph:hover{
  opacity:1;
  transform:scale(1.18) rotate(-8deg);
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
/* pulse ring on float buttons */
.float-wa::after,.float-ph::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid currentColor;
  animation:pulseRing 2s ease-out infinite;
}
.float-wa::after{border-color:#25d366}
.float-ph::after{border-color:var(--sky)}
@keyframes pulseRing{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}
/* ══ FLOATING BUTTONS (SPLIT LAYOUT) ══ */
body.entry-locked {
    overflow: hidden;
}

.entry-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,.12), transparent 32%),
        linear-gradient(rgba(0, 80, 112, 0.38), rgba(0, 80, 112, 0.58));
    backdrop-filter: blur(5px) saturate(115%);
    opacity: 1;
    visibility: visible;
    transition: opacity .7s ease, visibility .7s ease;
}

.entry-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.entry-grid,
.entry-grid::before,
.entry-grid::after {
    position: absolute;
    inset: 0;
}

.entry-grid {
    overflow: hidden;
}

.entry-grid::before,
.entry-grid::after {
    content: "";
}

.entry-grid::before {
    background-image:
        linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .24;
    transform: perspective(900px) rotateX(72deg) scale(1.45);
    transform-origin: center top;
    animation: entryGridMove 14s linear infinite;
}

.entry-grid::after {
    background:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,.2), transparent 18%),
        radial-gradient(circle at 80% 18%, rgba(255, 26, 140, .22), transparent 20%),
        radial-gradient(circle at 50% 80%, rgba(255, 210, 170, .25), transparent 26%);
    filter: blur(18px);
    animation: entryGlowDrift 8s ease-in-out infinite;
}

.entry-glow {
    position: absolute;
    width: min(72vw, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255, 182, 120, .2) 35%, rgba(255, 26, 140, .12) 58%, transparent 74%);
    filter: blur(12px);
    animation: entryGlowPulse 4.8s ease-in-out infinite;
}

.entry-card {
    position: relative;
    width: min(760px, 100%);
    padding: 52px 24px;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    transform-style: preserve-3d;
    transition: transform .32s ease, opacity .55s ease;
}

.entry-logo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(400px, 82vw);
    aspect-ratio: 1;
    margin: 0 auto 26px;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    background: transparent;
    box-shadow: 0 0 52px rgba(255, 184, 122, .26);
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
    animation: entryLogoFloat 2.8s ease-in-out infinite;
}

.entry-logo-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 0 56px rgba(255, 26, 140, .28);
}

.entry-logo-btn img {
    display: block;
    width: 96%;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(255,255,255,.24)) drop-shadow(0 0 30px rgba(255, 184, 122, .42));
}

.entry-title {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.entry-title .m { color: #fff; }
.entry-title .t { color: var(--pink); }

.entry-copy {
    max-width: 36ch;
    margin: 0 auto 16px;
    color: rgba(255,255,255,.9);
    line-height: 1.75;
    font-size: 1rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

.entry-hint {
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .9;
}

.entry-overlay.exiting .entry-card {
    transform: translateY(-26px) scale(.92) rotateX(16deg) rotateZ(-7deg);
    opacity: 0;
}

.entry-overlay.exiting .entry-logo-btn {
    transform: scale(1.12) rotateY(28deg) rotateZ(-12deg);
    filter: saturate(1.15);
}

@keyframes entryGridMove {
    from { transform: perspective(900px) rotateX(72deg) translateY(0) scale(1.45); }
    to { transform: perspective(900px) rotateX(72deg) translateY(46px) scale(1.45); }
}

@keyframes entryGlowDrift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(10px, -14px, 0); }
}

@keyframes entryGlowPulse {
    0%, 100% { transform: scale(.94); opacity: .75; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes entryLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (max-width: 640px) {
    .entry-card {
        padding: 28px 18px;
    }

    .entry-logo-btn {
        width: min(320px, 88vw);
    }

    .entry-copy {
        font-size: .94rem;
    }
}

.float-btn {
    position: fixed;
    bottom: 30px; /* Desktop height */
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    z-index: 10005;
}

/* Position Phone on Left */
.ph-btn { 
    left: 20px; 
    background: var(--sky);
    color: #fff;
    animation: pulse-phone 2s infinite; 
}

.ph-btn span {
    display: none;
}

.ph-btn::before {
    content: "";
    width: 24px;
    height: 24px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 4.5a.75.75 0 0 1 .75-.75h2.175c.414 0 .771.287.86.69l.547 2.46a.75.75 0 0 1-.271.76l-1.08.864a11.035 11.035 0 0 0 5.516 5.516l.864-1.08a.75.75 0 0 1 .76-.271l2.46.547a.75.75 0 0 1 .69.86V17a.75.75 0 0 1-.75.75h-1.5C7.28 17.75 2.25 12.72 2.25 6.75V4.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 4.5a.75.75 0 0 1 .75-.75h2.175c.414 0 .771.287.86.69l.547 2.46a.75.75 0 0 1-.271.76l-1.08.864a11.035 11.035 0 0 0 5.516 5.516l.864-1.08a.75.75 0 0 1 .76-.271l2.46.547a.75.75 0 0 1 .69.86V17a.75.75 0 0 1-.75.75h-1.5C7.28 17.75 2.25 12.72 2.25 6.75V4.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ph-btn .phone-glyph {
    color: #fff;
    font-size: 1.65rem;
    line-height: 1;
}

.ph-btn:hover {
    background: var(--sky2);
    box-shadow: 0 0 0 10px rgba(255, 26, 140, 0), 0 0 24px rgba(255, 26, 140, 0.55);
}

/* Position WhatsApp on Right */
.wa-btn { 
    right: 20px; 
    background: #25d366; 
}

.float-btn:hover { transform: scale(1.1); }

@keyframes pulse-phone {
  0% { box-shadow: 0 0 0 0 rgba(0, 200, 240, 0.55); }
  70% { box-shadow: 0 0 0 15px rgba(0, 200, 240, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 200, 240, 0); }
}

/* ══ MOBILE OVERRIDE ══ */
@media (max-width: 768px) {
    .float-btn {
        bottom: 90px; /* Clear the 75px mobile footer */
    }
    .ph-btn { left: 15px; }
    .wa-btn { right: 15px; }
    
    footer {
        padding-bottom: 130px; /* Ensure footer text is visible behind buttons */
    }
}