:root{
  --green-900:#0e3b2e;
  --green-700:#146a47;
  --green-500:#1c8a5d;
  --green-300:#45b07f;

  --brown-900:#3b2416;
  --brown-700:#6b3f22;
  --brown-500:#8a5a3a;

  --cream:#f7f4ef;
  --ink:#0b1220;
  --muted:#5b6475;

  --card:#ffffff;
  --line:rgba(15, 35, 25, 0.12);

  --shadow: 0 18px 40px rgba(10, 30, 20, .10);
  --shadow2: 0 10px 30px rgba(20, 20, 20, .10);

  --radius: 18px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}

a{ text-decoration:none; }
img{ object-fit:cover; }

.section{
  padding: 70px 0;
}
.section-soft{
  background: linear-gradient(180deg, rgba(28,138,93,0.06), rgba(138,90,58,0.05));
}

.section-head .section-kicker{
  color: var(--brown-700);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: .85rem;
}
.section-title{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.section-text{
  color: var(--muted);
  line-height: 1.75;
}

/* Topbar */
.topbar{
  background: linear-gradient(90deg, var(--green-900), var(--brown-900));
  color: rgba(255,255,255,.92);
}
.topbar-item{
  opacity: .95;
}
.topbar-link{
  color: rgba(255,255,255,.95);
}
.topbar-link:hover{ color: #fff; text-decoration: underline; }

.social-btn{
  width: 34px; height: 34px;
  display: inline-flex;
  align-items:center; justify-content:center;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  color: #fff;
  transition: transform .2s ease, background .2s ease;
}
.social-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.18);
}

/* Header/Navbar */
.header{
  background: rgba(14,59,46,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar-brand .brand-mark{
  width: 42px; height: 42px;
  display: inline-flex;
  align-items:center; justify-content:center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--green-500), var(--brown-500));
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  color: #fff;
  font-size: 1.2rem;
}
.brand-title{
  display:block;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.1;
}
.brand-sub{
  display:block;
  font-size: .85rem;
  opacity: .85;
  margin-top: -2px;
}

.navbar .nav-link{
  color: rgba(255,255,255,.85);
  font-weight: 700;
  border-radius: 12px;
  padding: .55rem .9rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.navbar .nav-link:hover{
  background: rgba(255,255,255,.10);
  color: #fff;
  transform: translateY(-1px);
}
.navbar .nav-link.active{
  background: rgba(255,255,255,.14);
  color: #fff;
}



/* Navbar Logo Styling */
.site-logo{
  height: 70px;          /* desktop size */
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* Mobile view */
@media (max-width: 768px){
  .site-logo{
    height: 44px;
    max-width: 150px;
  }
}

/* Very small screens */
@media (max-width: 480px){
  .site-logo{
    height: 40px;
    max-width: 130px;
  }
}


/* Buttons */
.btn-brand{
  --bs-btn-bg: linear-gradient(135deg, var(--green-500), var(--brown-500));
  --bs-btn-border-color: transparent;
  --bs-btn-color: #fff;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-bg: linear-gradient(135deg, var(--green-700), var(--brown-700));
  border: 0;
  box-shadow: 0 12px 26px rgba(28,138,93,.20);
  border-radius: 14px;
  font-weight: 800;
}

.btn-outline-brand{
  border-radius: 14px;
  font-weight: 800;
  border: 2px solid rgba(255,255,255,.18);
  color: #fff;
}
.btn-outline-brand:hover{
  border-color: transparent;
  color:#fff;
  background: linear-gradient(135deg, rgba(28,138,93,.65), rgba(138,90,58,.65));
}

@media (max-width: 991px){
  .btn-outline-brand{
    border: 2px solid rgba(255,255,255,.22);
  }
}

/* Hero */
.hero{
  position: relative;
  background: #0f2f22;
}
.hero-img{
  height: 70vh;
  min-height: 520px;
  filter: saturate(1.05) contrast(1.05);
}
.carousel-caption{
  left: 0; right: 0;
  bottom: 18%;
  text-align: left;
}
.hero-card{
  max-width: 820px;
  background: rgba(10, 20, 14, .55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  border-radius: 22px;
  padding: 22px 22px;
  backdrop-filter: blur(10px);
}
.hero-kicker{
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  margin-bottom: 8px;
  font-size: .85rem;
}
.hero-title{
  font-family: "Playfair Display", serif;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 10px;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
}
.hero-subtitle{
  color: rgba(255,255,255,.82);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 700px;
}

/* Hero badges */
.hero-badges{
  margin-top: -44px;
  position: relative;
  z-index: 4;
  padding-bottom: 10px;
}
.badge-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px;
  display:flex;
  gap: 12px;
  box-shadow: var(--shadow2);
}
.badge-card i{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(28,138,93,.16), rgba(138,90,58,.16));
  color: var(--green-700);
  font-size: 1.25rem;
}
.badge-card h6{ margin: 0 0 2px; font-weight: 900; }
.badge-card p{ margin: 0; color: var(--muted); font-size: .92rem; }

/* About */
.about-points .point{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(20,80,55,.25);
  background: rgba(28,138,93,.05);
  margin-bottom: 10px;
}
.about-points i{
  color: var(--green-700);
  margin-top: 2px;
}
.about-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.about-card-top{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mini-card{
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 14px;
  background: linear-gradient(135deg, rgba(28,138,93,.06), rgba(138,90,58,.05));
}
.mini-card i{
  color: var(--brown-700);
  font-size: 1.25rem;
}
.mini-card h6{ font-weight: 900; margin: 8px 0 2px; }
.mini-card p{ color: var(--muted); margin: 0; font-size: .92rem; }

.about-banner{
  margin-top: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--green-900), var(--brown-900));
  color: #fff;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.about-banner::after{
  content:"";
  position:absolute; inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%);
  transform: rotate(12deg);
}
.about-banner-overlay{ position: relative; z-index:1; }
.about-banner-actions{
  position: relative; z-index:1;
  display:flex; gap:10px; margin-top: 12px;
  flex-wrap: wrap;
}

.about-card-bottom{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.trust-pill{
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 12px;
  display:flex; gap: 10px;
  align-items:center;
}
.trust-pill i{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(28,138,93,.14), rgba(138,90,58,.12));
  color: var(--green-700);
  font-size: 1.2rem;
}
.trust-pill p{ color: var(--muted); }

/* About Image Block */
.about-image-wrap{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
}

.about-image{
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .5s ease;
}

.about-image-wrap:hover .about-image{
  transform: scale(1.07);
}

.about-image-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(10,20,14,.55));
  pointer-events: none;
}

/* floating badges */
.about-badge{
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.about-badge i{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(28,138,93,.18), rgba(138,90,58,.16));
  color: var(--green-700);
  font-size: 1.2rem;
}

.about-badge strong{
  display:block;
  font-weight: 900;
  line-height: 1.1;
}
.about-badge small{
  display:block;
  color: var(--muted);
  font-weight: 700;
}

.about-badge-1{ top: 16px; left: 16px; }
.about-badge-2{ top: 16px; right: 16px; }

/* Make About section buttons visible on light background */
#about .btn-outline-brand{
  color: var(--green-900);
  border: 2px solid var(--green-700);
  background: transparent;
}

#about .btn-outline-brand:hover{
  color: #fff;
  background: linear-gradient(135deg, var(--green-700), var(--brown-700));
  border-color: transparent;
}

#about .btn-brand{
  color: #000; /* safety */
}



/* bottom CTA overlay */
.about-cta{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  border-radius: 18px;
  padding: 14px;
  background: rgba(14,59,46,.88);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  backdrop-filter: blur(10px);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.about-cta p{
  opacity: .85;
}

.about-cta-actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

/* responsive */
@media (max-width: 991px){
  .about-image{ height: 420px; }
}
@media (max-width: 576px){
  .about-image{ height: 320px; }
  .about-badge-2{ display:none; } /* cleaner on small screens */
}



/* Services */
.service-card{
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow2);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.service-card::before{
  content:"";
  position:absolute;
  inset: -40px -60px auto auto;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(28,138,93,.18), transparent 60%);
  transform: rotate(20deg);
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(10,30,20,.14);
}
.service-icon{
  width: 54px; height: 54px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(28,138,93,.16), rgba(138,90,58,.14));
  color: var(--brown-700);
  font-size: 1.35rem;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.service-card h5{
  font-weight: 900;
  position: relative;
  z-index: 1;
}
.service-card p{
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* =========================
   Services with images + icon rotation
   ========================= */

.service-card-img{
  padding: 0; /* remove old padding so image fits nicely */
  overflow: hidden;
}

.service-media{
  position: relative;
  height: 200px;
  overflow: hidden;
}

.service-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .45s ease;
}

/* soft overlay for premium look */
.service-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(10,20,14,.55));
  opacity: .9;
  pointer-events:none;
}

/* icon position on image */
.service-card-img .service-icon{
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  margin: 0;
  transition: transform .6s ease;
  transform-origin: center;
}

/* important: animate icon (the i tag) smoothly */
.service-card-img .service-icon i{
  transition: transform .6s ease;
  display: inline-block;
}

/* hover effects */
.service-card-img:hover .service-thumb{
  transform: scale(1.10);
}

/* 360 degree rotation on hover */
.service-card-img:hover .service-icon i{
  transform: rotate(360deg);
}

/* content padding under image */
.service-body{
  padding: 18px;
}

.service-body h5{
  margin-bottom: 6px;
}

/* mobile tweaks */
@media (max-width: 576px){
  .service-media{ height: 180px; }
}



/* Why */
.why-list .why-item{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  margin-bottom: 10px;
}
.why-icon{
  width: 50px; height: 50px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(28,138,93,.16), rgba(138,90,58,.14));
  color: var(--green-700);
  font-size: 1.25rem;
}
.why-item h6{ font-weight: 900; margin: 0 0 2px; }
.why-item p{ margin: 0; color: var(--muted); }

.why-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.feature-tile{
  height: 100%;
  border-radius: 20px;
  border: 1px solid var(--line);
  padding: 16px;
  background: linear-gradient(135deg, rgba(28,138,93,.06), rgba(138,90,58,.05));
}
.feature-tile i{
  font-size: 1.4rem;
  color: var(--brown-700);
}
.feature-tile h6{ margin: 10px 0 4px; font-weight: 900; }
.feature-tile p{ margin: 0; color: var(--muted); line-height: 1.7; }

.cta-strip{
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, var(--green-900), var(--brown-900));
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-strip p{ opacity: .85; }

/* Counters */
.counter-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  text-align:center;
  box-shadow: var(--shadow2);
}
.counter-card i{
  font-size: 1.6rem;
  color: var(--green-700);
}
.counter{
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  margin: 6px 0 0;
  font-family: "Playfair Display", serif;
}
.counter-card p{
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

/* Gallery */
.gallery-item{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
  background: #fff;
}
.gallery-thumb{
  width: 100%;
  height: 240px;
  transition: transform .35s ease;
}
.gallery-item:hover .gallery-thumb{
  transform: scale(1.05);
}
.gallery-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(10,20,14,.62));
  opacity: 0;
  transition: opacity .25s ease;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding: 12px;
}
.gallery-item:hover .gallery-overlay{ opacity: 1; }
.gallery-overlay span{
  color:#fff;
  font-weight: 900;
}
.gallery-overlay i{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.14);
  color:#fff;
}

/* Contact */
.contact-cards .contact-card{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.8);
  margin-bottom: 10px;
}
.contact-card i{
  width: 50px; height: 50px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(28,138,93,.16), rgba(138,90,58,.14));
  color: var(--green-700);
  font-size: 1.2rem;
}
.contact-card h6{ margin:0 0 2px; font-weight: 900; }
.contact-card p{ margin:0; color: var(--muted); line-height: 1.6; }
.contact-card a{ color: var(--green-900); font-weight: 900; }

.form-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.form-control, .form-select{
  border-radius: 14px;
  border: 1px solid rgba(15,35,25,.18);
  padding: .72rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(28,138,93,.45);
  box-shadow: 0 0 0 .2rem rgba(28,138,93,.14);
}
.note-strip{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(28,138,93,.10), rgba(138,90,58,.08));
  border: 1px dashed rgba(20,80,55,.25);
  color: var(--green-900);
  font-weight: 800;
}
.note-strip i{ color: var(--brown-700); }

/* Map */
.map-wrap{
  padding: 0 0 70px;
  background: linear-gradient(180deg, rgba(138,90,58,0.04), transparent);
}
.map-card{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
}
.map-head{
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Footer */
.footer{
  background: linear-gradient(135deg, #0b261c, #2b170e);
  color: rgba(255,255,255,.90);
  padding: 60px 0 20px;
}
.footer-logo{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--green-500), var(--brown-500));
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.footer-brand{
  display:flex;
  gap: 12px;
  align-items:center;
}
.footer-text{
  color: rgba(255,255,255,.75);
  line-height: 1.75;
}
.footer-title{
  font-weight: 900;
  margin-bottom: 12px;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{ margin-bottom: 8px; }
.footer-links a{
  color: rgba(255,255,255,.80);
  font-weight: 700;
}
.footer-links a:hover{ color:#fff; text-decoration: underline; }

.footer-contact{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-contact li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-bottom: 10px;
  color: rgba(255,255,255,.80);
}
.footer-contact i{ margin-top: 2px; color: rgba(255,255,255,.95); }
.footer-contact a{ color:#fff; font-weight: 800; }

.footer-social{
  display:flex;
  gap: 10px;
}
.footer-social-btn{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.10);
  color:#fff;
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .2s ease, background .2s ease;
}
.footer-social-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
}
.footer-line{
  border-color: rgba(255,255,255,.12);
}

/* Floating buttons */
.floating-actions{
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 999;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.float-btn{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  color:#fff;
  font-weight: 900;
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.float-btn i{
  width: 40px; height: 40px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.14);
  font-size: 1.2rem;
}
.float-btn span{ font-size: .95rem; }

.float-call{
  background: linear-gradient(135deg, var(--brown-700), var(--green-700));
}
.float-whatsapp{
  background: linear-gradient(135deg, #1da851, #0f5e3a);
}

/* glowing ring */
.float-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  opacity: .45;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(1); opacity: .35; }
  50%{ transform: scale(1.03); opacity: .65; }
  100%{ transform: scale(1); opacity: .35; }
}

/* Back to top */
.back-to-top{
  position: fixed;
  left: 16px;
  bottom: 18px;
  width: 48px; height: 48px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(14,59,46,.92);
  color:#fff;
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
  display:none;
  z-index: 999;
}
.back-to-top i{ font-size: 1.6rem; }

/* Responsive tweaks */
@media (max-width: 991px){
  .carousel-caption{ bottom: 12%; }
  .hero-img{ height: 64vh; min-height: 520px; }
  .about-card-top{ grid-template-columns: 1fr; }
  .about-card-bottom{ grid-template-columns: 1fr; }
}
@media (max-width: 576px){
  .hero-card{ padding: 16px; border-radius: 18px; }
  .badge-card{ padding: 14px; }
  .gallery-thumb{ height: 210px; }
  .floating-actions{ right: 12px; bottom: 12px; }
  .float-btn span{ display:none; } /* icons only on very small screens */
}



/* ===== Fix floating buttons causing extra space / overflow ===== */
html, body{
  overflow-x: hidden; /* prevents unwanted horizontal scroll */
}

/* keep fixed buttons inside viewport */
.floating-actions{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* prevents layout overflow issues in some browsers */
  max-width: calc(100vw - 16px);
}

/* default button */
.float-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  position: relative;

  /* Important: stops pseudo element from affecting scroll width */
  overflow: hidden;
}

/* pulse ring stays inside button */
.float-btn::after{
  content:"";
  position:absolute;
  inset: 0;                 /* was -2px before (can cause overflow) */
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.22);
  opacity: .45;
  animation: pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* icon bubble */
.float-btn i{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.14);
  font-size: 1.2rem;
}

/* Mobile: Make them circular (no text) */
@media (max-width: 576px){
  .floating-actions{
    right: 10px;
    bottom: 10px;
    gap: 10px;
  }

  .float-btn{
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  .float-btn i{
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  .float-btn span{
    display: none !important; /* ensure text never takes space */
  }

  /* keep pulse ring perfectly circular */
  .float-btn::after{
    border-radius: 50%;
  }
}

/* ===== Pulse animation ===== */
@keyframes pulse{
  0%{ transform: scale(1); opacity: .35; }
  50%{ transform: scale(1.05); opacity: .65; }
  100%{ transform: scale(1); opacity: .35; }
}





/* =========================
   Clean Video Cards (No Text)
   ========================= */

.video-card-clean{
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}

/* subtle border glow */
.video-card-clean::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.18);
  pointer-events:none;
}

/* video */
.video-card-clean video{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background: #000;
}

/* hover lift */
.video-card-clean:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 22px 55px rgba(0,0,0,.28);
}

/* pause glow effect */
.video-card-clean:hover::after{
  border-color: rgba(28,138,93,.45);
}

/* Mobile */
@media(max-width:767px)
{
	.cu-mb-dss-nn{
		Display:none!important
	}
	.cu-jf-cntr{
		justify-content:center!important
	}
}
@media (max-width: 576px){
  .video-card-clean video{
    height: 160px;
  }
}