/* =========================================================
   Samtara Desert Camps — Theme layer on top of Bootstrap 5
   Palette: warm dune sand + rust sun + espresso night
   Type: Fraunces (display) / Jost (body)
   ========================================================= */

:root{
  --sand:        #F6EFDD;
  --sand-deep:   #ECDFBE;
  --paper:       #FFFDF8;
  --ink:         #2B2118;
  --ink-soft:    #6B5B47;
  --rust:        #C1622B;
  --rust-dark:   #A34F21;
  --gold:        #A9762F;
  --espresso:    #1B140D;
  --line:        rgba(43,33,24,0.12);
  --shadow:      0 18px 40px -20px rgba(27,20,13,0.35);
}

body{
  font-family:'Jost', Arial, sans-serif;
  color:var(--ink);
  background:var(--sand);
}
h1,h2,h3,h4{ font-family:'Fraunces', Georgia, serif; font-weight:600; }
.italic{ font-style:italic; color:var(--rust); }
a{ color:var(--rust-dark); }
a:hover{ color:var(--rust); }

section{ padding:88px 0; }
.bg-sand-deep{ background:var(--sand-deep); }
.bg-espresso{ background:var(--espresso); color:#e9ddc8; }

.kicker{
  display:inline-block; font-size:13px; letter-spacing:.14em;
  color:var(--gold); margin-bottom:14px; padding-bottom:6px;
  border-bottom:1px solid var(--gold);
}
.section-head{ max-width:640px; }
.section-head.mx-auto{ text-align:center; }
.section-head p{ color:var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn-rust{ background:var(--rust); border-color:var(--rust); color:#fff; }
.btn-rust:hover{ background:var(--rust-dark); border-color:var(--rust-dark); color:#fff; }
.btn-outline-ink{ border-color:var(--ink); color:var(--ink); }
.btn-outline-ink:hover{ background:var(--ink); color:var(--sand); }
.btn-outline-cream{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn-outline-cream:hover{ background:#fff; color:var(--espresso); }
.btn-whatsapp{ background:#3CA55C; border-color:#3CA55C; color:#fff; }
.btn-whatsapp:hover{ background:#2f8a49; border-color:#2f8a49; color:#fff; }

/* ---------- Top bar ---------- */
.topbar{ background:var(--espresso); color:#e9ddc8; font-size:13px; }
.topbar a{ color:#e9ddc8; }

/* ---------- Navbar ---------- */
.navbar-brand img{ height:68px; }
.navbar-brand .brand-text{ font-family:'Fraunces',serif; line-height:1.1; margin-left:10px; }
.navbar-brand .brand-text .name{ font-size:20px; font-weight:600; color:var(--ink); display:block; }
.navbar-brand .brand-text .place{ font-size:11px; letter-spacing:.16em; color:var(--gold); }
.navbar .nav-link{ font-weight:500; color:var(--ink) !important; }
.navbar .nav-link.active, .navbar .nav-link:hover{ color:var(--rust-dark) !important; }
.navbar .dropdown-menu{ border:none; box-shadow:var(--shadow); border-radius:4px; }

/* ---------- Hero carousel ---------- */

/* .hero-carousel .carousel-item{ height:82vh; min-height:520px; background-size:cover; background-position:center; }
.hero-carousel .carousel-item::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,20,13,.55) 0%, rgba(27,20,13,.3) 45%, rgba(27,20,13,.78) 100%);
}
.hero-carousel .carousel-caption-custom{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center;
  color:#fff; text-align:left;
}
.hero-carousel .carousel-caption-custom .kicker{ color:#E7C88B; border-color:#E7C88B; }
.hero-carousel h1{ color:#fff; font-size:clamp(34px,5.5vw,58px); }
.hero-carousel p.lead{ color:#f1e8d6; max-width:560px; }
.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next{ width:56px; }
.hero-carousel .carousel-indicators{ margin-bottom:0; } */

.hero-carousel {
    position: relative;
    background-color: #0d0d0d;
  }
  
  .hero-carousel .carousel-item {
    height: 85vh;
    min-height: 580px;
    max-height: 850px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out;
  }

  /* Dark Vignette Overlay for Crisp Contrast */
  .hero-carousel .carousel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg, 
      rgba(0, 0, 0, 0.45) 0%, 
      rgba(0, 0, 0, 0.65) 60%, 
      rgba(0, 0, 0, 0.85) 100%
    );
    z-index: 1;
  }

  .carousel-caption-custom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    z-index: 2;
  }

  /* Text & Button Animations */
  .carousel-item.active .hero-animate-1 {
    animation: fadeInUp 0.8s ease forwards 0.2s;
  }
  .carousel-item.active .hero-animate-2 {
    animation: fadeInUp 0.8s ease forwards 0.4s;
  }
  .carousel-item.active .hero-animate-3 {
    animation: fadeInUp 0.8s ease forwards 0.6s;
  }
  .carousel-item.active .hero-animate-4 {
    animation: fadeInUp 0.8s ease forwards 0.8s;
  }

  .hero-opacity-0 {
    opacity: 0;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Modern Glass Indicators */
  .hero-carousel .carousel-indicators {
    bottom: 30px;
    z-index: 3;
    margin-bottom: 0;
  }
  .hero-carousel .carousel-indicators [data-bs-target] {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    border: none;
    background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.4s ease;
  }
  .hero-carousel .carousel-indicators .active {
    width: 60px;
    background-color: #c8963e !important; /* Luxury Gold Accent */
  }

  /* Custom Modern Navigation Arrows */
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    width: 60px;
    height: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    z-index: 3;
    opacity: 0.8;
    transition: all 0.3s ease;
  }
  .hero-carousel .carousel-control-prev { left: 30px; }
  .hero-carousel .carousel-control-next { right: 30px; }

  .hero-carousel .carousel-control-prev:hover,
  .hero-carousel .carousel-control-next:hover {
    background: #c8963e;
    border-color: #c8963e;
    opacity: 1;
  }

  /* Custom Buttons */
  .btn-gold-hero {
    background-color: #c8963e;
    color: #ffffff;
    border: 2px solid #c8963e;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
  }
  .btn-gold-hero:hover {
    background-color: #b58330;
    border-color: #b58330;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(200, 150, 62, 0.3);
  }

  .btn-outline-glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
  }
  .btn-outline-glass:hover {
    background: #ffffff;
    color: #1a1a1a;
    border-color: #ffffff;
    transform: translateY(-2px);
  }

  @media (max-width: 767.98px) {
    .hero-carousel .carousel-item {
      height: 75vh;
      min-height: 500px;
    }
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
      display: none; /* Hide arrows on small screens for cleaner mobile view */
    }
  }

/* Availability bar */
.availability-bar{
  background:linear-gradient(160deg, var(--gold), var(--rust-dark));
  position:relative; z-index:3; margin-top:-56px;
  border-radius:6px; box-shadow:var(--shadow);
}
.availability-bar label{ font-size:12px; color:#fff2df; margin-bottom:4px; display:block; }
.availability-bar .form-control, .availability-bar .form-select{ border:none; }
@media(max-width:767px){ .availability-bar{ margin-top:0; border-radius:0; } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ position:relative; color:#fff; padding:150px 0 80px; background-size:cover; background-position:center; }
.page-hero::before{ content:""; position:absolute; inset:0; background:rgba(27,20,13,.62); }
.page-hero .container{ position:relative; }
.page-hero .kicker{ color:#E7C88B; border-color:#E7C88B; }
.page-hero h1{ color:#fff; }
.page-hero .breadcrumb a{ color:#E7C88B; }
.page-hero .breadcrumb, .page-hero .breadcrumb a{ font-size:13px; }

/* ---------- Cards ---------- */
.card{ border:none; border-radius:4px; box-shadow:0 10px 28px -18px rgba(27,20,13,.35); transition:transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card img{ aspect-ratio:4/3; object-fit:cover; }
.card .badge-tag{ font-size:12px; font-weight:400; color:var(--ink-soft); border:1px solid var(--line); padding:4px 10px; border-radius:20px; }

.checklist{ list-style:none; padding:0; margin:0; }
.checklist li{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:15px; }
.checklist li:last-child{ border-bottom:none; }
.checklist li::before{ content:"—"; color:var(--rust); flex-shrink:0; }

/* Placeholder tile for facilities without a photo yet */
.tile-placeholder{
  aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:20px;
  background:radial-gradient(circle at 30% 20%, rgba(193,98,43,0.16), transparent 55%), linear-gradient(160deg, #E9DBB8, #D9C79A);
  color:var(--ink-soft);
}
.tile-placeholder svg{ width:32px; height:32px; stroke:var(--rust-dark); }
.tile-placeholder .name{ font-family:'Fraunces',serif; color:var(--ink); font-size:16px; }
.tile-placeholder .note{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; }

/* Experience cards (home page) */
.experience-card{ position:relative; border-radius:4px; overflow:hidden; aspect-ratio:3/4; }
.experience-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.experience-card:hover img{ transform:scale(1.06); }
.experience-card .overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,14,8,.85) 0%, rgba(20,14,8,.05) 55%); display:flex; align-items:flex-end; padding:18px; color:#fff; }
.experience-card h3{ color:#fff; font-size:18px; margin-bottom:2px; }
.experience-card .sub{ font-size:11px; letter-spacing:.08em; color:#E7C88B; text-transform:uppercase; }

/* Attraction cards */
.attraction-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px 4px 0 0; }

/* CTA band */
.band{ background:linear-gradient(160deg, var(--espresso) 0%, #3a2a17 100%); color:#f1e8d6; text-align:center; }
.band .kicker{ color:#E7C88B; border-color:#E7C88B; }
.band h2{ color:#fff; }
.band p{ color:#d9cbb0; max-width:560px; margin:0 auto; }

/* Gallery masonry */
.masonry{ column-count:3; column-gap:20px; }
.masonry img, .masonry .tile-placeholder{ margin-bottom:20px; border-radius:4px; break-inside:avoid; box-shadow:var(--shadow); width:100%; }
@media(max-width:860px){ .masonry{ column-count:2; } }
@media(max-width:560px){ .masonry{ column-count:1; } }

/* Contact */
.info-card{ background:var(--paper); border-radius:4px; padding:26px; box-shadow:var(--shadow); height:100%; }
.info-row{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.info-row:last-child{ border-bottom:none; }
.info-row .ic{ color:var(--rust); flex-shrink:0; }
.map-embed{ border-radius:4px; overflow:hidden; box-shadow:var(--shadow); }
.map-embed iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* ---------- Footer ---------- */
/* .site-footer{ background:var(--espresso); color:#cfc0a4; padding:70px 0 0; }
.site-footer h4{ color:#E7C88B; font-family:'Fraunces',serif; font-size:18px; margin-bottom:18px; }
.site-footer a{ color:#cfc0a4; }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ padding:5px 0; font-size:14px; }
.footer-brand img{ height:100px; margin-bottom:14px; }
.footer-map{ border-radius:4px; overflow:hidden; height:170px; }
.footer-map iframe{ width:100%; height:100%; border:0; }
.social-row a{
  width:34px; height:34px; border:1px solid rgba(231,200,139,.4); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:#E7C88B; margin-right:8px;
}
.social-row a:hover{ background:#E7C88B; color:var(--espresso); }
.footer-bottom{ margin-top:50px; border-top:1px solid rgba(231,200,139,.15); padding:18px 0; text-align:center; font-size:13px; color:#a9987c; } */

/* ---------- Floating contact buttons ---------- */
.float-btns{ position:fixed; right:20px; bottom:20px; z-index:1040; display:flex; flex-direction:column; gap:12px; }
.float-btns a{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 10px 24px -8px rgba(0,0,0,.45); font-size:20px; }
.float-btns .wa{ background:#25D366; }
.float-btns .call{ background:var(--rust); }

.badge-strip .item{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:14px; }
.badge-strip .item svg{ width:22px; height:22px; stroke:var(--rust-dark); flex-shrink:0; }






/* Card Elevation & Glass Overlay Enhancements */
.premium-service-card {
  height: 400px;
  background-color: #0d0d0d;
  border: 1px solid rgba(212, 160, 23, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.premium-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 160, 23, 0.75);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4) !important;
}

.service-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.service-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.premium-service-card:hover .service-bg-img {
  transform: scale(1.1);
}

/* Dark Gradient Overlay for Maximum Legibility */
.service-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top, 
    rgba(10, 10, 10, 0.95) 20%, 
    rgba(10, 10, 10, 0.5) 60%, 
    rgba(0, 0, 0, 0.15) 100%
  );
  z-index: 2;
  transition: background 0.4s ease;
}

.premium-service-card:hover .service-overlay {
  background: linear-gradient(
    to top, 
    rgba(10, 10, 10, 0.98) 25%, 
    rgba(10, 10, 10, 0.6) 65%, 
    rgba(0, 0, 0, 0.25) 100%
  );
}

/* Button & Badge Polish */
.bg-gold {
  background-color: #a9762f !important;
}

.btn-gold {
  background-color: #a9762f;
  color: #0b0b0b;
  border: none;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background-color: #a9762f;
  color: #000;
  box-shadow: 0 4px 12px rgba(212, 160, 23, 0.3);
}






/*faq*/

.faq-section {
    background-color: #f7f4ee; /* Soft sand background */
  }
  .faq-card {
    border: 1px solid rgba(200, 150, 62, 0.18) !important;
    transition: all 0.3s ease;
    border-radius: 12px !important;
  }
  .faq-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07) !important;
    transform: translateY(-2px);
  }
  .faq-button {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 1.25rem 1.5rem !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  .faq-button:not(.collapsed) {
    color: #be8a2e !important; /* Desert Gold highlight on open */
    border-bottom: 1px solid rgba(200, 150, 62, 0.15);
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  /* Custom accordion icon styling */
  .faq-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transition: transform 0.3s ease;
    width: 1.2rem;
    height: 1.2rem;
    background-size: 1.2rem;
  }
  .faq-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23be8a2e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  }
  .faq-body {
    line-height: 1.7;
    color: #555555;
    font-size: 0.96rem;
    background-color: #ffffff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }




 /* room section */
  .room-card {
    border: 1px solid rgba(200, 150, 62, 0.2) !important;
    border-radius: 16px !important;
    overflow: hidden;
    transition: all 0.4s ease;
    background: #ffffff;
  }
  
  .room-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12) !important;
    border-color: #c8963e !important;
  }
  
  .room-card-img-wrapper {
    position: relative;
    overflow: hidden;
    height: 260px;
  }

  .room-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
  }

  .room-card:hover .room-card-img-wrapper img {
    transform: scale(1.06);
  }

  .room-badge-pill {
    background-color: #f7f3eb;
    color: #8c6827;
    border: 1px solid rgba(200, 150, 62, 0.3);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: 50px;
    letter-spacing: 0.3px;
  }

  .room-card-title {
    font-family: inherit;
    font-weight: 700;
    color: #1a1a1a;
    font-size: 1.35rem;
  }

  .btn-room-details {
    background-color: transparent;
    border: 1.5px solid #1a1a1a;
    color: #1a1a1a;
    font-weight: 600;
    border-radius: 50px;
    padding: 0.6rem 1.4rem;
    transition: all 0.3s ease;
  }

  .btn-room-details:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .room-featured-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #141414;
    color: #d4a017;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 50px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }




/* footer */

  /* Base Dark Footer */
  .site-footer {
    background-color: #121212;
    color: #b0b0b0;
    font-family: 'Jost', system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    padding-top: 3.5rem;
    padding-bottom: 2rem;
    border-top: 1px solid #222222;
  }

  /* Fix Heading Font Stack */
  .site-footer h4 {
    color: #ffffff;
    font-family: 'Jost', sans-serif !important;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
    letter-spacing: 0.3px;
  }

  /* Make Dark Logo Visible on Dark Background */
  .footer-brand img {
    height: 68px;
    width: auto;
    filter: brightness(0) invert(1); /* Turns dark logo white for contrast */
  }

  .footer-brand p {
    color: #a0a0a0;
    font-size: 0.90rem;
    line-height: 1.6;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
  }

  /* Social Icons */
  .social-row {
    display: flex;
    gap: 0.6rem;
  }

  .social-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.25s ease;
  }

  .social-row a:hover {
    background-color: #be8a2e;
    color: #ffffff;
    transform: translateY(-2px);
  }

  /* Navigation Links & Contact Details */
  .site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .site-footer ul li {
    margin-bottom: 0.5rem; /* Cleaned up spacing */
  }

  .site-footer ul li a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .site-footer ul li a:hover {
    color: #be8a2e;
  }

  /* Contact List Fix */
  .footer-contact li {
    margin-bottom: 0.85rem !important;
  }
  .footer-contact i {
    color: #be8a2e;
  }

  /* Embedded Map Styling */
  .footer-map iframe {
    width: 100%;
    height: 160px;
    border: 0;
    border-radius: 8px;
  }

  /* Footer Bottom Bar */
  .footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.84rem;
    color: #888888;
  }

  .footer-bottom a {
    color: #be8a2e;
    text-decoration: none;
  }

  .footer-bottom a:hover {
    text-decoration: underline;
  }

  /* Floating Buttons */
  .float-btns {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
  }

  .float-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-size: 1.25rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .float-btn.wa { background-color: #25d366; }
  .float-btn.call { 
    background-color: #121212; 
    border: 1px solid rgba(255, 255, 255, 0.2); 
  }

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