/* -------------------------
  Global / Layout
   ------------------------- */
:root{
  --brand-green: #3d5534;
  --accent-gold: #d4af37;
  --whatsapp: #25D366;
  --cream: #fffdf5;
}

*{box-sizing:border-box}
body{
  font-family: "Poppins", sans-serif;
  margin:0;
  background:#fffdf8;
  padding-top:130px; /* ensures topbar + nav space on desktop */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* -------------------------
  Topbar
   ------------------------- */
.topbar{
  background: var(--brand-green);
  color:#fff;
  font-size:14px;
  padding:6px 0;
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9999;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.topbar .socials a{
  border:2px solid #fff;
  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  transition:all .25s;
}
.topbar .socials a:hover{ background:#fff; color:var(--brand-green); transform:scale(1.08); }

/* -------------------------
  Main Navbar
   ------------------------- */
.main-nav {
    position: fixed;
    top: 38px;              /* desktop under topbar */
    width: 100%;
    z-index: 9990;
    background: #fffdf5;
    border-bottom: 1px solid #eee;
    padding: 15px 0;       /* increased navbar height */
}

/* Center logo */
.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Desktop menu stays right side */
.main-nav .navbar-nav {
    margin-left: auto;
}
.navbar-brand img{ height:70px; }
.main-nav .nav-link{ color:var(--brand-green); font-weight:600; }
.main-nav .nav-link:hover,
.main-nav .nav-link.active{ color:var(--accent-gold) !important; }

/* Desktop menu stays right */
@media (min-width: 992px) {
    .navbar-brand {
        margin-right: auto !important;
        position: relative;
        left: 0;
        transform: none;
    }
}



/* -------------------------
  Hero
   ------------------------- */
.services-hero{
  background-position:center;
  background-size:cover;
  height:45vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  position:relative;
}
.services-hero::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,0.45);
}
.services-hero h1{ position:relative; z-index:2; font-size:40px; font-weight:700; margin:0; }

/* -------------------------
  Breadcrumb
   ------------------------- */
.breadcrumb-section{ background:var(--cream); padding:10px 0; border-bottom:1px solid #eee; }
.breadcrumb a{ color:var(--brand-green); font-weight:600; }

/* -------------------------
  Filter buttons (horizontal scroll)
   ------------------------- */
.filter-buttons{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:10px;
  -webkit-overflow-scrolling:touch;
}
.filter-btn{
  white-space:nowrap;
  border-radius:30px;
  border:2px solid var(--brand-green);
  padding:6px 18px;
  font-weight:600;
  color:var(--brand-green);
  background:#fff;
  cursor:pointer;
  transition:all .22s;
}
.filter-btn.active,
.filter-btn:hover{ background:var(--brand-green); color:#fff; transform:scale(1.03); }

/* -------------------------
  Service cards
   ------------------------- */
.service-box{
  background:#fff;
  border-radius:15px;
  overflow:hidden;
  transition:all .28s;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
}
.service-box:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,0.18);
}
.service-img{ width:100%; height:220px; object-fit:cover; display:block; }

.price-tag{
  position:absolute; top:10px; left:10px;
  background:var(--brand-green); color:#fff;
  padding:6px 14px; border-radius:50px; font-weight:600; font-size:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}

/* -------------------------
  Sidebar drawer (mobile)
   ------------------------- */
.mobile-sidebar{
  position:fixed; top:0; left:-260px; width:260px; height:100%;
  background:var(--cream); z-index:10000; padding:20px; transition:left .38s;
  box-shadow:3px 0 18px rgba(0,0,0,0.22);
}
.mobile-sidebar a:hover {
  background: #d4af37;
  color: #fff !important;
}

.mobile-sidebar a.active {
  background: #3d5534;
  color: #fff !important;
  border-radius: 5px;
}


.mobile-sidebar.open{ left:0; }
.mobile-sidebar h4{ margin-top:0; }
.mobile-sidebar a{ display:block; padding:10px 0; color:var(--brand-green); font-weight:700; text-decoration:none; border-bottom:1px solid rgba(0,0,0,0.04); }
.sidebar-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.5); display:none; z-index:9000; }
.sidebar-overlay.show{ display:block; }



/* -------------------------
  Floating WhatsApp button
   ------------------------- */
.whatsapp-float{
  position:fixed; right:25px; bottom:25px;
  width:62px; height:62px; border-radius:50%;
  background:var(--whatsapp); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; z-index:99999; box-shadow:0 8px 20px rgba(0,0,0,0.2);
  animation:pulse 1.5s infinite;
}
@keyframes pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* -------------------------
  Utilities & Responsive
   ------------------------- */
.section-title{ font-size:28px; font-weight:700; color:var(--brand-green); margin-bottom:18px; }

/* HIDE TOPBAR ON MOBILE (user requested) and adjust padding */
@media (max-width:768px){
  .topbar{ display:none !important; }
  body{ padding-top:110px; } /* less top spacing when topbar hidden */
  .services-hero{ height:35vh; }
  .services-hero h1{ font-size:28px; padding:0 14px; }
  .service-img{ height:180px; }
  .mobile-only{ display:block; }
  .desktop-only{ display:none; }

  /* Move navbar to very top (no gap) */
    .main-nav {
        top: 0 !important;
        padding: 18px 0;       /* slightly bigger mobile height */
    }

    /* Reduce body top padding because topbar is hidden */
    body {
        padding-top: 90px !important;
    }

    /* Hide desktop menu on mobile */
    .navbar-nav {
        display: none !important;
    }

    /* Mobile toggle button should align well */
    #openSidebar {
        margin-left: 5px;
    }
}

/* smaller screens */
@media (max-width:576px){
  body{ padding-top:100px; }
  .service-img{ height:160px; }
  .mobile-sidebar{ width:85%; }
  .mobile-sidebar.open{ left:0; }
}

/* Sidebar hidden by default */
.mobile-sidebar {
  position: fixed;
  top: 0;
  left: -260px;
  width: 260px;
  height: 100%;
  background: #fffdf5;
  z-index: 10000;
  padding: 20px;
  transition: left .35s;
  box-shadow: 3px 0 15px rgba(0,0,0,0.25);
}
.mobile-sidebar.open {
  left: 0;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9000;
  display: none;
}
.sidebar-overlay.show {
  display: block;
}

/* Hide Topbar on Mobile */
@media(max-width: 768px) {
  .topbar {
    display: none !important;
  }
  body {
    padding-top: 110px !important;
  }
}

/* GALLERY GRID */
.gallery-box {
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  border: 3px solid #fff;
  box-shadow: 0 3px 15px rgba(0,0,0,0.15);
  transition: .3s ease-in-out;
}

.gallery-box:hover {
  transform: scale(1.05);
}

.gallery-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: .3s;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  overflow-x: auto;
}
.filter-btn {
  border: 2px solid #3d5534;
  border-radius: 30px;
  padding: 6px 18px;
  font-weight: 600;
  background: white;
  color: #3d5534;
}
.filter-btn.active,
.filter-btn:hover {
  background: #3d5534;
  color: white;
}

/* LIGHTBOX */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}

.close-lightbox {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}
/* FACEBOOK STYLE COLLAGE */
.collage-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 40px;
}

.collage-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}

.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s ease;
}

.collage-item:hover img {
  transform: scale(1.1);
}

/* Tall Image */
.collage-item.tall {
  grid-row: span 2;
  grid-column: span 1;
  min-height: 350px;
}

/* Last image with +More overlay */
.collage-item.more {
  position: relative;
}

.more-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: 700;
  color: white;
  border-radius: 10px;
}

/* Responsive */
@media(max-width: 992px){
   body { padding-top: 0 !important; }
      .topbar .top-left { flex-direction: column; text-align: center; }
  .collage-gallery {
    grid-template-columns: repeat(3,1fr);
  }
}



@media(max-width: 576px){
  .collage-gallery {
    grid-template-columns: repeat(2,1fr);
  }
  .collage-item.tall {
    grid-row: span 1;
  }
}
/* COURSE IMAGE WRAPPER (Perfect Circle) */
.course-img-wrapper {
  width: 180px;              /* control circle size */
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 5px solid #3d5534;
}

/* COURSE IMAGE INSIDE CIRCLE */
.course-img-wrapper .course-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PRICE TAG ON IMAGE */
.course-img-wrapper .price-tag {
  position:absolute; top:10px; left:10px;
  background:var(--brand-green); color:#fff;
  padding:6px 14px; border-radius:50px; font-weight:600; font-size:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}
/* Course Card */
  .course-card {
    background: #ffffff;
    transition: 0.3s ease;
  }
  .course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.15);
  }

  /* Course List */
  .course-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }
  .course-list li {
    padding: 4px 0;
    border-bottom: 1px solid #eee;
  }
  /* Circle Image Wrapper */


/* Circle Image */
.course-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ABOUT IMAGE STYLING */
  .about-img-wrapper {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.18);
  }

  .about-img {
    width: 100%;
    height: 420px;          /* Bigger Image */
    object-fit: cover;      /* Prevents stretching */
    border-radius: 18px;
    transition: transform 0.5s ease;
  }

  .about-img:hover {
    transform: scale(1.05); /* Smooth Zoom Animation */
  }

  .package-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  height: 100%; /* ensures all cards equal height */
}

.package-card .p-4 {
  flex: 1; /* content expands */
  display: flex;
  flex-direction: column;
}

.package-card .package-list {
  flex: 1; /* pushes button to bottom */
}

.package-card .btn-whatsapp {
  margin-top: auto !important; /* forces button to bottom */
}


.package-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.22);
}

.package-img-wrap {
  position: relative;
  height: 260px;
  overflow: hidden;
}
.package-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s ease-in-out;
}
.package-card:hover .package-img {
  transform: scale(1.1);
}

/* Bigger premium price tag */
.price-tag.big {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #3d5534;
  color: #fff;
  padding: 8px 20px;
  font-size: 18px;
  border-radius: 40px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

/* List */
.package-list {
  padding-left: 0;
  list-style: none;
}
.package-list li {
  font-size: 15px;
  margin-bottom: 6px;
  padding-left: 22px;
  position: relative;
}
.package-list li::before {
  content: "✔";
  color: var(--brand-green);
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* WhatsApp Button */
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  font-weight: 600;
  padding: 10px 0;
}
.btn-whatsapp:hover {
  background: #1da851;
  color: #fff;
}