:root{
  --green:#6e8f2f; --gold:#b68b2a; --bg:#f6f7fb;
  --background: linear-gradient( to right,#6e8f2f 0%,#8fa63a 15%, #8fa63a 45%,   /* extended light green area */
  #b68b2a 60%, #e3d6b5 75%, #f6f7fb 90%, #ffffff 100%
);
 /* --text:#111827;
  --muted:#6b7280;*/
  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --w: 100%;
  --maxw: 1450px;
    --font-sans: 'Inter', sans-serif;
  --font-heading: var(--font-sans);

  --text: #0f172a;         /* slate-900 */
  --muted: #475569;        /* slate-600 */
  --line: 1.6;
  --radius: 16px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: var(--font-sans); color:var(--text);
   background:var(--bg); font-size:16.5px; scroll-behavior: smooth; 
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.section-header{
  text-align: left;
}

h1,h2,h3{
font-family:'Poppins',sans-serif !important;
}
.container{
  width: min(var(--w), var(--maxw));
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
.container-fluid{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:0;
  padding-right:0;
}
.fullbleed{ width:100%; max-width:none; margin:0; padding:0; }

/* Top bar */
.topbar{
  background: #2f3a1a;
  color: #ecf4d4;
  font-size: 14.5px;
}
.topbar .container-fluid{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding: 10px 14px;
}
.topbar .left, .topbar .right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.08);
  padding: 8px 12px; border-radius: 999px;
}
.pill i{ color: #cfe59b; }
.social a{ display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:999px; background: rgba(255,255,255,.08); }
.social a:hover{ background: rgba(255,255,255,.14); }
.cta-top{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 16px; border-radius: 12px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  color:#0b1203; font-weight:800;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}
.cta-top:hover{ filter:brightness(1.03); transform: translateY(-1px); }

/* Header (grass green background) */
.header{
  background: var(--background);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.brand-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px; padding: 18px 14px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.logo{
  width:56px; height:56px; border-radius: 14px;
  background: radial-gradient(circle at 30% 25%, #ffffff, rgba(255,255,255,.2)), linear-gradient(135deg, var(--green), var(--gold));
  box-shadow: var(--shadow);
  display:grid; place-items:center;
  color:#0b1203;
}
.logo i{ font-size: 22px; }
.brand h1{ margin:0; font-size:19px; letter-spacing:.2px; color:#ffffff; }
.brand p{ margin:3px 0 0; font-size:13.5px; color: rgba(255,255,255,.85); }

.quick-contacts{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.qc{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
}
.qc i{ color: #ffffff; font-size: 18px; }
.qc .label{ font-size:12px; color: rgba(255,255,255,.85); }
.qc .value{ font-weight:800; font-size: 14.5px; color:#ffffff; }

.navbar{
  position:sticky; top:0; z-index: 50;
  background: var(--green);
}
.nav-wrap{
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
}
.nav-links{ display:flex; align-items:center; gap: 6px; flex-wrap:wrap; }
.nav-links a{
  padding: 10px 14px; border-radius: 999px;
  font-weight: 900; font-size: 15px;
  color: #f0f7dc;
}
.nav-links a.active, .nav-links a:hover{
  background: rgba(255,255,255,.18);
  color:#ffffff;
}
.nav-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:40px; height:40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color:#ffffff;
  display:grid; place-items:center;
}
.icon-btn:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); }
.hamburger{ display:none; }

@media (max-width: 920px){ .quick-contacts{ display:none; } }
@media (max-width: 760px){ .nav-links{ display:none; } .hamburger{ display:grid; } }

/* Mobile menu */
.mobile-menu{
  display:none;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 0;
  background: var(--green);
  padding: 10px 14px;
}
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; padding: 12px 12px; border-radius: 12px; font-weight:900; color:#f0f7dc; }
.mobile-menu a:hover{ background: rgba(255,255,255,.16); }

/* Sections */
.section{ padding: 22px 0; }
.section-title{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 12px; margin-bottom: 14px;
}
.section-title h3{ margin:0; font-size: 26px; }
.section-title p{ margin:0; color: var(--muted); font-size: 15.5px; }


/* Slider (new design: image stands out + floating text card) */
.slider{
  position:relative;
  width:100%;
  background: transparent;
  padding: 0;
  overflow:hidden;
}
.slides{ display:flex; transition: transform .65s ease; }
.slide{ min-width:100%; position:relative; }

.slide-inner{
  width:100%;
  margin:0;
  padding:0;
  position:relative;
}
.slide-media{
  width:100%;
  height:100%;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  border:none;
  background:transparent;
}
.slide-media img{
  width:100%;
  height:60vh;
  object-fit:cover;
  display:block;
}

.float-card{
  position:absolute;
  left: 34px;
  top: 34px;
  width: min(30%, 420px);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(24px);
  pointer-events:none;
}
.float-card.in{
  animation: floatIn 1.05s ease forwards;
}
@keyframes floatIn{
  to { opacity: 1; transform: translateY(0); }
}
.float-card .kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(110,143,47,.10);
  color:#274108;
  font-weight: 900;
  font-size: 13px;
}
.float-card h3{
  margin: 10px 0 8px;
  font-size: 22px;
  line-height: 1.15;
}
.float-card p{
  margin:0;
  color:#374151;
  font-size: 14.5px;
  line-height: 1.65;
}

@media (max-width: 980px){
  .slide-inner{ padding: 0 12px; }
  .slide-media img{ height: min(520px, 62vh); }
  .float-card{
    left: 12px;
    right: 12px;
    width: auto;
    top: auto;
    bottom: 18px;
    background: rgba(255,255,255,.92);
  }
}

/* Slider controls */
.slider-controls{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.slider-controls button{
  pointer-events:auto;
  margin: 0 12px;
  width:46px; height:46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(17,24,39,.35);
  color:#fff;
}
.slider-controls button:hover{ background: rgba(17,24,39,.5); }
.dots{
  position:absolute; left:0; right:0; bottom: 12px;
  display:flex; justify-content:center; gap:8px;
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(0,0,0,.05);
}
.dot.active{ background: linear-gradient(90deg, var(--green), var(--gold)); }

.ind-charter{
  position: relative;
  height: 40vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f8fc;
  border-radius: 12px;
}

/* Center image */
.ind-charter img{
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Name strip */
.nellyttle{
  position: absolute;
  bottom: 18px;
  left: -100%;
  background: #6e8f2f;
  color: #fff;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 0 8px 8px 0;
  font-weight: 500;
  letter-spacing: .4px;

  border-left: 4px solid rgb(252,199,56); /* bronze accent */

  animation: slideName 1s ease-out forwards;
  animation-delay: .20s;
}



/* Slide animation */
@keyframes slideName{
  from{
    left:-100%;
    opacity:0;
  }
  to{
    left:0;
    opacity:1;
  }
}

/* Optional hover polish */
.ind-charter:hover img{
  transform: scale(1.05);
  transition: transform .4s ease;
}

/* Feature strip under slider */
.feature-strip{ background:#3a471c; color:#f4f7ea; }
.feature-strip .strip-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
}
.feature-strip .strip-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding: 26px 24px;
  min-height: 112px;
  cursor: pointer;
}
.feature-strip .strip-item:hover{background-color: #b8c59b;}
.feature-strip .strip-item:nth-child(2){ background: rgba(255,255,255,.10); }
.feature-strip .strip-ic{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}
.feature-strip .strip-ic i{ font-size: 34px; color:#ffffff; }
.feature-strip h4{ margin:0 0 8px; font-size: 20px; line-height:1.15; }
.feature-strip p{ margin:0; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.7; max-width: 520px; }
@media (max-width: 980px){
  .feature-strip .strip-grid{ grid-template-columns: 1fr; }
  .feature-strip .strip-item:nth-child(2){ background: transparent; }
}

/* Content panels */
.two-col{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 18px; }
@media (max-width: 980px){ .two-col{ grid-template-columns: 1fr; } }

.panel{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel .pad{ padding: 22px; }
.panel h4{ margin:0 0 10px; font-size: 20px; }
.panel p{ margin:0; color: var(--muted); line-height: 1.7; font-size: 15.5px; }

.grid-4{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 560px){ .grid-4{ grid-template-columns: 1fr; } }

.icon-card{
  cursor: pointer;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border-radius: 18px;
  padding: 14px;
  transition: .2s ease;
}


.icon-card:hover{ transform: translateY(-2px); border-color: rgba(110,143,47,.35); }
.icon-card .ic{
  width:44px; height:44px; border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(110,143,47,.12);
  color: #274108;
}
.icon-card h5{ margin: 10px 0 6px; font-size: 15px; }
.icon-card p{ margin:0; font-size: 14px; }

.icon-card-right{
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  padding: 14px;
  transition: .2s ease;
}

.cards-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px){ .cards-row{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .cards-row{ grid-template-columns: 1fr; } }

.service-card{
  cursor: pointer;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .55s ease, border-color .25s ease;
}
.service-card:hover{ transform: rotateY(9deg) rotateX(4deg) translateY(-3px); border-color: rgba(182,139,42,.45); }
.service-card img{ width:100%; aspect-ratio: 16/10; object-fit:cover; }
.service-card .body{ padding: 16px; }
.service-card h5{ margin:0 0 6px; font-size: 16px; }
.service-card p{ margin:0; color: var(--muted); font-size: 14.3px; line-height: 1.6; }

.chat-why{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 980px){ .chat-why{ grid-template-columns: 1fr; } }

.value-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px){ .value-grid{ grid-template-columns: 1fr; } }

.value-card{
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  display:flex; gap: 12px;
}
.value-card i{ color: var(--green); font-size: 19px; margin-top: 3px; }
.value-card h5{ margin:0 0 4px; font-size: 15px; }
.value-card p{ margin:0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Icon spin on hover */
.icon-card .ic i, .value-card i{
  display:inline-block;
  transition: transform .55s ease;
  transform-origin: 50% 50%;
}
.icon-card:hover .ic i, .value-card:hover i{ transform: rotate(360deg); }

.media{
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow);
}
.media .pad{ padding: 16px; }
.media p{ margin:0; color: var(--muted); line-height: 1.7; font-size: 15.5px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid transparent;
  transition: .2s ease;
}
.btn-primary{ background: linear-gradient(90deg, var(--green), var(--gold)); color:#0b1203; }
.btn-outline{ border-color: rgba(110,143,47,.35); color:#0b1203; background:#fff; }
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }

.sep{ height: 1px; background: var(--border); margin: 12px 0; }


/* Footer */
.footer{
  margin-top: 28px;
  background: #0f1608;
  color:#eaf4d2;
  padding: 34px 0 18px;
}
.footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; }
@media (max-width: 980px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer h4{ margin:0 0 10px; font-size: 18px; }
.footer p{ margin:0; color:#cbd5b1; line-height: 1.7; font-size: 14.5px; }
.footer a{ color:#eaf4d2; }
.footer a:hover{ color:#fff; }
.footer .mini{
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  color:#b8c59b; font-size: 13.5px;
  display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap;
}


/* Floating booking button (left side) */
.cont-float-bar{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;

  min-width: 230px;
  padding: 12px 14px;

  background: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);

  text-decoration: none;
  cursor: pointer;
}

.cont-float-icon{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6e8f2f, #b68b2a);
  color: #fff;
  font-size: 22px;
}

.cont-float-status{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: "Inter", system-ui, sans-serif;
}

.cont-status-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
}

.cont-status-text{
  font-size: 12.5px;
  color: #475569;
  line-height: 1.2;
}

/* OPEN / CLOSED styles */
.cont-open{
  background: rgba(110,143,47,0.12);
  color: #39520b;
  border: 1px solid rgba(110,143,47,0.35);
}

.cont-closed{
  background: rgba(185,28,28,0.10);
  color: #7f1d1d;
  border: 1px solid rgba(185,28,28,0.25);
}

@media (max-width: 520px){
  .cont-float-bar{
    right: 12px;
    bottom: 12px;
    min-width: 200px;
    padding: 10px 12px;
  }
}

/* Ken Burns effect (slow zoom) on active slide image */
.slide-media img{
  transform: scale(1);
  transition: transform 6s ease;
  will-change: transform;
}
.slide.is-active .slide-media img{
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce){
  .slide-media img{ transition: none; }
  .slide.is-active .slide-media img{ transform: none; }
}

/*****Hero banner*************************/
/* ===================== HERO ===================== */
.about-hero-banner{
  width: 100%;  height: 62vh;
  background-image: url("http://localhost/ace5/assets/images/slide1.png");
  background-size: cover;  background-position: center;
  background-repeat: no-repeat;  position: relative;
  overflow: hidden;  font-family: "Inter", system-ui, sans-serif;
}
.about-hero-banner-training{
  width: 100%;  height: 62vh;
  background-image: url("http://localhost/ace5/assets/images/slide6.png");
  background-size: cover;  background-position: center;
  background-repeat: no-repeat;  position: relative;
  overflow: hidden;  font-family: "Inter", system-ui, sans-serif;
}

.page-title{ font-size: 30px; margin: 0 0 10px 0; }

.about-hero-inner{
  width: 100%;  height: 50%;  position: absolute;  top: 50%;
  transform: translateY(-50%);  display: flex;  align-items: center;
}

.about-hero-left{
  flex: 0 0 33.3333%;  height: 100%;  background: rgba(255,255,255,.7);
  padding: 0 3%;  display: flex;  align-items: center;  justify-content: flex-start;
  text-align: left;  color: #39520b; border-top-right-radius: 15px;  border-bottom-right-radius: 15px;
  overflow: hidden;  transform: translateX(-110%);  opacity: 0;
  animation: slideInOverlay 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.about-hero-right{
  flex: 1;  height: 100%;  background: transparent;
}

@keyframes slideInOverlay{
  to{ transform: translateX(0); opacity: 1; }
}

@media (max-width: 768px){
  .about-hero-banner{ height: 45vh; }

  .about-hero-inner{
    height: 60%;    padding: 0 4%;
  }

  .about-hero-left{
    flex: 0 0 90%;    border-top-left-radius: 15px;    border-bottom-left-radius: 15px;

    transform: translateY(25px);
    animation: slideInOverlayMobile 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
  }

  .about-hero-right{ display: none; }
}

@keyframes slideInOverlayMobile{
  to{ transform: translateY(0); opacity: 1; }
}
/**************End of hero banner***************************/