/* ---------- Base / Reset ---------- */
:root{
  --brand-dark: #0b5a63;       /* deep teal */
  --brand-mid: #12a0a7;        /* turquoise */
  --brand-accent: #ff6b61;     /* coral */
  --muted: #6c757d;
  --card-radius: 16px;
  --shadow-sm: 0 6px 18px rgba(16,24,40,0.06);
  --shadow-md: 0 12px 30px rgba(16,24,40,0.08);
}

html,body{
  height:100%;
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:#212529;
  background:#f6fbff; /* very pale blue background like the reference */
}

/* ensure container spacing looks similar to screenshot */
.container { max-width:1140px; }

/* ---------- NAVBAR ---------- */
.navbar{
  background: transparent;
  padding: .75rem 0;
  z-index: 1100;
}
.navbar .navbar-brand img.logo{
  height:40px;
  display:block;
}
.navbar .navbar-toggler{
  border: none;
}
.navbar .navbar-toggler-icon{
  width:28px;
  height:2px;
  background: #fff;
  display:block;
  position:relative;
}
.navbar .navbar-toggler-icon::before,
.navbar .navbar-toggler-icon::after{
  content:"";
  width:28px;
  height:2px;
  background:#fff;
  position:absolute;
  left:0;
}
.navbar .navbar-toggler-icon::before{ top:-8px; }
.navbar .navbar-toggler-icon::after{ top:8px; }

.navbar .nav-link{
  color: #fff !important;
  font-weight:600;
  padding:.5rem 0.75rem;
  transition: color .18s ease, opacity .18s ease;
}
.navbar .nav-link.active{
  color: #000 !important;
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: .45rem .9rem;
}

/* ---------- DISCOUNT BANNER ---------- */
.discount-banner{
  background: linear-gradient(90deg, rgba(255,107,97,0.95) 0%, rgba(255,140,116,0.95) 100%);
  color: #fff;
  padding:.5rem 0;
  z-index:1090;
}
.discount-banner .discount-content{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding: .25rem 0;
}
.discount-banner .discount-badge{
  background: rgba(255,255,255,0.14);
  padding: .25rem .6rem;
  border-radius: 10px;
  font-weight:700;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.discount-banner .discount-message h3{
  margin:0;
  font-size:0.95rem;
  letter-spacing:.6px;
  font-weight:700;
}
.discount-banner .discount-message p{ margin:0; opacity: .95; color:#fff; }
.discount-banner .discount-button{
  background:rgba(0,0,0,0.06);
  color:#fff;
  padding:.45rem .85rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  border: 1px solid rgba(255,255,255,0.12);
}
.discount-banner.fixed-banner{
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index:1200;
  box-shadow: 0 6px 18px rgba(16,24,40,0.12);
}

/* close button appended by script */
.discount-close-btn{
  position:absolute;
  right:10px;
  top:6px;
  background:transparent;
  color:#fff;
  border:none;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

/* ---------- FLOATING CTA ---------- */
.floating-cta{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1205;
  transition: transform .25s ease, opacity .2s ease;
}
.floating-cta.hidden{ opacity:0; transform: translateY(20px) scale(.95); pointer-events:none; }

.floating-cta .cta-button{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background: linear-gradient(90deg, var(--brand-mid), var(--brand-dark));
  color:white;
  padding:.9rem 1rem;
  border-radius:999px;
  box-shadow: var(--shadow-md);
  text-decoration:none;
  font-weight:700;
  font-size:.94rem;
}

/* ---------- HERO SECTION ---------- */
.hero-section{
  position:relative;
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(18,160,167,0.08), transparent 15%),
    radial-gradient(600px 300px at 90% 80%, rgba(255,107,97,0.06), transparent 15%),
    linear-gradient(180deg, rgba(8,40,63,0.86), rgba(11,90,99,0.84));
  color:#fff;
  min-height: 88vh;
  display:flex;
  align-items:center;
}

/* overlay for subtle darkness */
.hero-overlay{
  top:0; left:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(3,21,34,0.18), rgba(0,0,0,0.18));
  z-index:0;
}

/* animated shapes (decorative) */
.animated-shapes .shape{
  position:absolute;
  border-radius:50%;
  opacity:.12;
  filter: blur(26px);
  transform: translateZ(0);
}
.animated-shapes .shape-1{ width:320px; height:320px; top:-10%; right:-5%; background: linear-gradient(45deg, #ff7a6b, #ffd3c9); }
.animated-shapes .shape-2{ width:240px; height:240px; bottom:-8%; left:-6%; background: linear-gradient(45deg,#12a0a7,#0b5a63); }
.animated-shapes .shape-3{ width:160px; height:160px; top:10%; left:25%; background: linear-gradient(45deg,#7ee0dd,#12a0a7); }

/* hero content */
.hero-section .display-3{
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height:1.03;
  font-weight:800;
  color:#fff;
  z-index:2;
}
.hero-section .lead{
  font-size:1.05rem;
  color: rgba(255,255,255,0.92);
  z-index:2;
}
.cta-buttons a.btn{
  min-width: 180px;
}

/* trust indicators box */
.trust-indicators .bg-white.bg-opacity-10{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.06);
}

/* hero image column */
.hero-image img{
  max-width:420px;
  width:100%;
  z-index:2;
  transform: translateZ(0);
}

/* small screen tweaks */
@media (max-width:991.98px){
  .animated-shapes .shape-1, .animated-shapes .shape-2 { display:none; }
  .hero-section{ min-height:70vh; padding-top:2.25rem; padding-bottom:2.25rem; }
  .hero-image img{ max-width:320px; margin: 0 auto; }
  .navbar .nav-link{ color: #fff !important; }
}

/* ---------- FEATURES / CARDS ---------- */
.features-section{
  background: transparent;
  padding-top:3.5rem;
  padding-bottom:3.5rem;
}

.feature-card{
  border-radius: var(--card-radius);
  transition: transform .22s cubic-bezier(.2,.9,.25,1), box-shadow .22s;
  overflow:hidden;
}
.feature-card .feature-icon{
  width:64px;
  height:64px;
  background: linear-gradient(180deg,var(--brand-mid),var(--brand-dark));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  box-shadow: 0 6px 18px rgba(11,90,99,0.12);
}

/* hover effect */
.hover-lift:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

/* timeline list (course structure) */
.course-year{
  background:#fff;
  border-radius: var(--card-radius);
}
.year-badge{
  background: linear-gradient(90deg, var(--brand-dark), var(--brand-mid));
  font-weight:700;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .95rem;
}
.timeline-list i.fas{ color: var(--brand-mid); font-size:1.1rem; }

/* pricing cards */
.pricing-card{
  border-radius: var(--card-radius);
  transition: transform .22s ease, box-shadow .22s ease;
  overflow:visible;
}
.pricing-card .price-tag .display-4{ font-size:2.1rem; color:var(--brand-dark); }
.pricing-card .pricing-header p{ margin-bottom:0; color:var(--muted); }

.pricing-card.self-paced-card{
  border: 1px solid rgba(18,160,167,0.06);
}
.pricing-card .btn{
  background: linear-gradient(90deg,var(--brand-mid),var(--brand-dark));
  border:none;
  color:#fff;
  font-weight:700;
}

/* popular badge */
.popular-badge{
  transform: translateY(-18px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  font-weight:700;
}

/* progress/progbar */
.slots-counter .progress{ height:12px; background: rgba(9,30,37,0.06); border-radius:999px; }
.slots-counter .progress-bar{ background: linear-gradient(90deg,var(--brand-mid),var(--brand-dark)); border-radius:999px; }

/* testimonial cards */
.testimonial-card{ border-radius: var(--card-radius); }
.avatar-placeholder{
  width:56px;
  height:56px;
  background: linear-gradient(90deg,var(--brand-mid),var(--brand-dark));
  font-size:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.testimonial-card .rating i{ color:#f6c85a; }

/* video container responsive */
.video-container{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:12px;
}
.video-container iframe{
  position:absolute;
  width:100%;
  height:100%;
  left:0; top:0;
  border-radius:12px;
}

/* testimonial CTA */
.testimonial-cta-button{
  background: linear-gradient(90deg,var(--brand-mid),var(--brand-dark));
  border:none;
  box-shadow: 0 10px 30px rgba(11,90,99,0.12);
}

/* myth / FAQ cards */
.myth-card{ border-radius: var(--card-radius); border-top-color: var(--brand-mid); border-top-style: solid; border-top-width:6px; }
.badge.rounded-pill{ background: rgba(18,160,167,0.08); color: var(--brand-dark); font-weight:700; }

/* FAQ accordion look */
.accordion-button{
  background: linear-gradient(90deg,#fff,#fff);
  border-radius: 12px;
  font-weight:700;
  color:var(--brand-dark);
}
.accordion-body{ color:var(--muted); }

/* registration form card */
.form-card{ border-radius: var(--card-radius); }

/* CTA styles used across page */
.btn-lg{
  border-radius: 12px;
  padding: .75rem 1.25rem;
}

/* ---------- COMMUNITY / IMAGES ---------- */
.feature-card .image-container img{ object-fit:cover; height:160px; }

/* ---------- FOOTER ---------- */
.footer{
  background: linear-gradient(180deg, #072033 0%, rgba(3,21,34,0.95) 100%);
  color: #fff;
  padding-top: 3rem;
}
.footer img{ max-width:160px; }
.footer a{ color: rgba(255,255,255,0.75); text-decoration:none; }
.footer a:hover{ color:#fff; text-decoration:underline; }

/* small footer divider */
.border-white-50{ border-color: rgba(255,255,255,0.12) !important; }

/* ---------- UTILITIES & RESPONSIVENESS ---------- */
.text-muted{ color:var(--muted) !important; }

@media (max-width:767.98px){
  .discount-banner .discount-content{ flex-direction:column; gap:.5rem; align-items:flex-start; }
  .discount-banner .discount-button{ align-self:stretch; text-align:center; }
  .hero-section .container{ padding-top:1.25rem; padding-bottom:1.25rem; }
  .hero-section .display-3{ font-size:1.6rem; }
  .navbar .nav-link{ padding:.35rem .5rem; }
  .floating-cta .cta-button{ padding:.6rem .9rem; font-size:.92rem; }
}

/* make sure many white cards sit on pale background and keep strong contrast */
section.bg-light{ background: #f6fbff; }
section.bg-white{ background: #ffffff; }

/* ---------- SMALL VISUAL TWEAKS ---------- */
.lead.fst-italic { font-style: italic; color: rgba(0,0,0,0.55); }
.rounded-top-4{ border-top-left-radius: 12px; border-top-right-radius:12px; }

/* ensure hero text and nav are above shapes */
.hero-section, .navbar, .discount-banner { position: relative; z-index: 2; }

/* accessibility: focus outlines */
a:focus, button:focus { outline: 3px solid rgba(18,160,167,0.18); outline-offset:2px; }

/* ---------- End of stylesheet ---------- */