/* header start  */

/* Hover Button */
.hover-red-top {
  position: relative;
  overflow: hidden;
  background: white;
  color: black;
  transition: color 0.3s ease;
}
.hover-red-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #FF6A58;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: -1;
}
.hover-red-top:hover::before {
  transform: translateY(0);
}

/* Tablet Mode (ONLY phone button visible on right) */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Hide desktop menu */
  header .md\:flex {
    display: none !important;
  }

  /* Hide hamburger button */
  header .md\:hidden {
    display: none !important;
  }

  /* Show phone number only */
  header .tablet-phone {
    display: block !important;
  }
}

/* END  */
/* =========================  */

/* 1 SECTION START  */

@keyframes fadeInLeft {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

.fade-left {
  animation: fadeInLeft 1s ease-out forwards;
}

.fade-right {
  animation: fadeInRight 1s ease-out forwards;
}
/* END  */
/* =============================  */
/* <!-- ANIMATIONS --> */

    /* ---------- Clean White Cards ---------- */
    .glass {
      background: #ffffff;
      border: 1px solid #e5e5e5;
    }
    .glass-dark {
      background: #ffffff;
      border: 1px solid #e5e5e5;
    }

    /* ---------- 3D floating icons ---------- */
    .float-wrap { position: absolute; pointer-events: none; z-index: 0; }
    .float {
      width: 60px; height: 60px;
      display: grid; place-items: center;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 10px 30px rgba(255,255,255,0.2);
      transform-style: preserve-3d;
      transition: transform .4s ease;
      opacity: .95;
    }

    @keyframes floatA {
      0%   { transform: translate3d(0, 0, 0); }
      50%  { transform: translate3d(0, -14px, 8px); }
      100% { transform: translate3d(0, 0, 0); }
    }
    @keyframes floatB {
      0%   { transform: translate3d(0, 0, 0); }
      50%  { transform: translate3d(8px, -18px, 6px); }
      100% { transform: translate3d(0, 0, 0); }
    }
    @keyframes floatC {
      0%   { transform: translate3d(0, 0, 0); }
      50%  { transform: translate3d(-10px, -10px, 10px); }
      100% { transform: translate3d(0, 0, 0); }
    }
    .fa { animation: floatA 5.8s ease-in-out infinite; }
    .fb { animation: floatB 6.6s ease-in-out infinite; }
    .fc { animation: floatC 7.2s ease-in-out infinite; }

    /* ---------- Card hover ---------- */
    .grad-card {
      background: #ffffff;
      border-radius: 18px;
      padding: 18px;
      border: 1px solid #e5e5e5;
      transition: transform .35s, box-shadow .35s;
    }
    .grad-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 30px 60px rgba(255,255,255,0.15);
    }

    /* ---------- Reveal animations ---------- */
    .reveal { opacity: 0; transform: translateY(18px); transition: .6s; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

   

    @media (max-width: 768px) {
      .float { width: 46px; height: 46px; }
    }