/*
 * ============================================================
 *  STYLE.CSS — Main Stylesheet
 *  All colours/fonts come from config.css variables.
 * ============================================================
 */

/* ── IMPORT FONTS ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Lato:wght@300;400;700&display=swap');

/* ── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: var(--font-size-base); }

body {
    font-family: var(--font-body);
    color: var(--color-text-body);
    line-height: var(--line-height-body);
    background: var(--color-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    color: var(--color-text-dark);
    line-height: 1.25;
}

a { text-decoration: none; transition: color var(--transition-fast); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }

/* ── SECTION HELPERS ────────────────────────────────────────── */
.section-py   { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section-py-sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.section-label.teal {
    background: var(--color-primary);
}

.section-title {
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 800;
    color: var(--color-text-dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-title span { color: var(--color-primary); }

.section-desc {
    font-size: 15px;
    color: var(--color-text-body);
    line-height: 1.8;
    max-width: 600px;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    border: 2px solid var(--btn-primary-bg);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary-custom::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--btn-primary-hover-bg);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-base);
    z-index: -1;
    border-radius: inherit;
}

.btn-primary-custom:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-primary-custom:hover { color: #fff; border-color: var(--btn-primary-hover-bg); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline-custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    border: 2px solid var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}
.btn-outline-custom:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    border: 2px solid var(--color-white);
    cursor: pointer;
    transition: all var(--transition-base);
}
.btn-white:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); transform: translateY(-2px); }

/* ── TOP BAR ────────────────────────────────────────────────── */
#topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    font-size: 13px;
    position: relative;
    z-index: 1000;
}

#topbar .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    flex-wrap: nowrap;
}

#topbar .topbar-left {
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
    font-size: 12.5px;
}

#topbar .topbar-left a {
    color: var(--topbar-text);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}
#topbar .topbar-left a:hover { opacity: 1; }
#topbar .topbar-left a i { font-size: 12px; color: var(--color-accent-light); }

#topbar .topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

#topbar .topbar-right a {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--topbar-text);
    font-size: 12px;
    transition: all var(--transition-fast);
}
#topbar .topbar-right a:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
}

/* ── NAVBAR ─────────────────────────────────────────────────── */
#mainNav {
    background: var(--navbar-bg);
    box-shadow: var(--navbar-shadow);
    padding: 0;
    transition: all var(--transition-base);
    position: sticky;
    top: 0;
    z-index: 999;
}

#mainNav.scrolled {
    box-shadow: var(--navbar-sticky-shadow);
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
}

#mainNav .navbar-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
}

#mainNav .navbar-brand .brand-icon {
    width: 75px;
    height: 45px;
    background: var(--color-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: white;
    font-family: var(--font-heading);
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.5px;
}

#mainNav .navbar-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

#mainNav .navbar-brand .brand-name {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-dark);
}

#mainNav .navbar-brand .brand-sub {
    font-size: 10.5px;
    color: var(--color-primary);
    font-weight: 500;
    letter-spacing: 0.5px;
}

#mainNav .navbar-nav .nav-link {
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--navbar-link-color);
    padding: 26px 16px !important;
    position: relative;
    transition: color var(--transition-base);
}

#mainNav .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-base);
    border-radius: 2px;
}

#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link.active { color: var(--navbar-link-hover); }
#mainNav .navbar-nav .nav-link:hover::after,
#mainNav .navbar-nav .nav-link.active::after { transform: scaleX(1); }

/* Dropdown */
#mainNav .dropdown-menu {
    border: none;
    border-top: 3px solid var(--color-primary);
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    padding: 8px 0;
    min-width: 220px;
    animation: dropIn 0.2s ease;
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#mainNav .dropdown-item {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--color-text-dark);
    padding: 10px 20px;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}
#mainNav .dropdown-item:hover {
    background: var(--color-primary-xlight);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    padding-left: 26px;
}

/* Mobile toggler */
#mainNav .navbar-toggler {
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 6px 10px;
}
#mainNav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23009688' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── HERO SECTION ────────────────────────────────────────────── */
#hero {
    background: var(--hero-bg);
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
    min-height: 490px;
}

#hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -80px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, var(--color-primary-xlight) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: floatBg 8s ease-in-out infinite;
}

@keyframes floatBg {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

#hero .hero-pretitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hero-pretitle-color);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 16px;
    opacity: 0;
    animation: slideUp 0.6s ease 0.1s forwards;
}

#hero .hero-pretitle::before {
    content: '';
    width: 30px; height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
}

#hero .hero-title {
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800;
    color: var(--hero-title-color);
    line-height: 1.12;
    margin-bottom: 22px;
    opacity: 0;
    animation: slideUp 0.6s ease 0.25s forwards;
}

#hero .hero-title span { color: var(--hero-title-accent); }

#hero .hero-desc {
    font-size: 16px;
    color: var(--color-text-body);
    line-height: 1.75;
    max-width: 480px;
    margin-bottom: 36px;
    opacity: 0;
    animation: slideUp 0.6s ease 0.4s forwards;
}

#hero .hero-cta-wrap {
    opacity: 0;
    animation: slideUp 0.6s ease 0.55s forwards;
}

#hero .hero-image-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    animation: slideRight 0.8s ease 0.3s forwards;
}

#hero .hero-image-wrap img {
    width: 100%;
    max-width: 420px;
    filter: drop-shadow(0 10px 40px rgba(0,150,136,0.2));
    position: relative;
    z-index: 2;
}

#hero .hero-badge-sebi {
    position: absolute;
    top: 18px; right: -10px;
    background: var(--hero-badge-bg);
    color: var(--hero-badge-text);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--border-radius-sm);
    text-align: center;
    line-height: 1.4;
    box-shadow: var(--shadow-md);
    z-index: 3;
    animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: var(--shadow-md); }
    50% { box-shadow: 0 8px 30px rgba(0,105,92,0.35); }
}

#hero .hero-exp-badge {
    position: absolute;
    bottom: 20px; left: -15px;
    background: var(--hero-exp-bg);
    color: var(--hero-exp-text);
    font-family: var(--font-heading);
    font-weight: 800;
    padding: 14px 20px;
    border-radius: var(--border-radius-sm);
    text-align: center;
    box-shadow: 0 8px 25px rgba(255,143,0,0.4);
    z-index: 3;
    animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

#hero .hero-exp-badge .num {
    display: block;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

#hero .hero-exp-badge .lbl {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.95;
    white-space: nowrap;
}

#hero .hero-bg-circle {
    position: absolute;
    border-radius: 50%;
    background: var(--color-primary-xlight);
    bottom: -40px; right: -40px;
    width: 340px; height: 340px;
    z-index: 1;
}

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* AOS-like scroll reveal classes */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="up"]    { transform: translateY(30px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ── ABOUT SECTION ───────────────────────────────────────────── */
#about {
    background: var(--about-bg);
    padding: var(--section-py) 0;
    position: relative;
    overflow: hidden;
}

#about::before {
    content: '';
    position: absolute;
    bottom: -100px; left: -100px;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

#about .section-label { background: var(--color-accent); }

#about .section-title { color: var(--color-white); }

#about .about-desc {
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 28px;
}

#about .about-points {
    margin-bottom: 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}

#about .about-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    line-height: 1.5;
}

#about .about-point i {
    color: var(--color-accent-light);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

#about .about-image-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#about .about-image-wrap img {
    width: 100%;
    max-width: 420px;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

#about .about-exp-badge {
    position: absolute;
    bottom: 24px; right: -10px;
    background: var(--about-exp-bg);
    color: var(--about-exp-text);
    font-family: var(--font-heading);
    font-weight: 800;
    padding: 16px 22px;
    border-radius: var(--border-radius-sm);
    text-align: center;
    box-shadow: 0 8px 30px rgba(255,143,0,0.45);
    z-index: 3;
    animation: floatBadge 3s ease-in-out 1s infinite;
}

#about .about-exp-badge .num {
    display: block;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

#about .about-exp-badge .lbl {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── SERVICES SECTION ────────────────────────────────────────── */
#services {
    background: var(--services-bg);
    padding: var(--section-py) 0;
}

#services .services-image-col img {
    width: 100%;
    border-radius: var(--border-radius-lg);
    object-fit: cover;
    box-shadow: var(--shadow-lg);
    height: 100%;
    min-height: 300px;
}

.service-card {
    background: var(--services-card-bg);
    border: 1.5px solid var(--services-card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    transition: all var(--transition-base);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

.service-card:hover::before { transform: scaleX(1); }

.service-card .service-icon {
    width: 58px; height: 58px;
    background: var(--color-primary-xlight);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    color: var(--color-primary);
    margin-bottom: 18px;
    transition: all var(--transition-base);
}

.service-card:hover .service-icon {
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
}

.service-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 12px;
    transition: color var(--transition-fast);
}

.service-card:hover h4 { color: var(--color-primary); }

.service-card p {
    font-size: 14.5px;
    color: var(--color-text-body);
    line-height: 1.75;
    margin-bottom: 20px;
}

.service-card .card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--services-cta-bg);
    color: var(--services-cta-text);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 24px;
    border-radius: 50px;
    transition: all var(--transition-base);
}

.service-card .card-cta i { font-size: 12px; transition: transform var(--transition-fast); }
.service-card .card-cta:hover { background: var(--color-accent-dark); transform: translateX(4px); }
.service-card .card-cta:hover i { transform: translateX(4px); }

/* Service page */
.services-pricing-section{
  padding:110px 0;
  background:var(--color-bg-light);
}

.services-heading{
  margin-bottom:60px;
}

.services-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.45rem 1rem;

  border-radius:999px;

  background:rgba(0,167,181,.08);

  color:var(--color-primary);

  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.services-title{
  margin-top:1rem;

  font-size:clamp(2.2rem,4vw,3.5rem);
  font-weight:800;

  color:var(--color-text-dark);
}

.services-title span{
  color:var(--color-primary);
}

.services-subtitle{
  max-width:650px;
  margin:1rem auto 0;

  font-size:1rem;
  line-height:1.8;

  color:var(--color-text-muted);
}

.pricing-card{
  position:relative;

  display:flex;
  flex-direction:column;

  height:100%;

  border-radius:28px;

  overflow:hidden;

  transition:.35s ease;

  padding:2.6rem;
}

.pricing-card:hover{
  transform:translateY(-8px);
}

.pricing-light{
  background:var(--color-white);

  border:1px solid var(--color-border);

  box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.pricing-dark{
  background:linear-gradient(145deg,#03191c,#071f23);

  border:1px solid rgba(255,255,255,.06);

  box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.pricing-top{
  text-align:center;

  margin-bottom:2rem;
}

.pricing-top h3{
  font-size:2rem;
  font-weight:800;

  margin-bottom:1rem;
}

.pricing-light .pricing-top h3{
  color:var(--color-text-dark);
}

.pricing-dark .pricing-top h3{
  color:#fff;
}

.pricing-price{
  font-size:3rem;
  font-weight:900;

  line-height:1;

  margin-bottom:.8rem;
}

.pricing-light .pricing-price{
  color:var(--color-primary);
}

.pricing-dark .pricing-price{
  color:#fff;
}

.pricing-price span{
  font-size:1rem;
  font-weight:600;

  opacity:.7;
}

.pricing-top p{
  margin:0;

  font-size:.95rem;
}

.pricing-light .pricing-top p{
  color:var(--color-text-muted);
}

.pricing-dark .pricing-top p{
  color:rgba(255,255,255,.7);
}

.pricing-features{
  list-style:none;

  padding:0;
  margin:0;

  flex:1;
}

.pricing-features li{
  /* display:flex; */
  align-items:flex-start;
  gap:.9rem;

  padding:1rem 0;

  border-bottom:1px solid rgba(255,255,255,.08);

  font-size:.95rem;
  line-height:1.7;
}

.pricing-light .pricing-features li{
  color:var(--color-text-body);

  border-color:rgba(0,0,0,.08);
}

.pricing-dark .pricing-features li{
  color:rgba(255,255,255,.92);
}

.pricing-features li i{
  flex-shrink:0;

  margin-top:3px;

  color:var(--color-accent);

  font-size:1rem;
}

.pricing-features li strong{
  font-weight:700;
}

.pricing-btn-wrap{
  margin-top:2.2rem;

  text-align:center;
}

.pricing-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:190px;

  padding:1rem 2rem;

  border-radius:999px;

  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));

  color:#fff;

  font-weight:700;

  text-decoration:none;

  transition:.3s ease;

  box-shadow:0 10px 30px rgba(0,167,181,.22);
}

.pricing-btn:hover{
  transform:translateY(-3px) scale(1.03);

  color:#fff;

  box-shadow:0 18px 40px rgba(0,167,181,.32);
}

.pricing-btn-light{
  background:#fff;

  color:var(--color-primary);

  box-shadow:0 10px 30px rgba(255,255,255,.12);
}

.pricing-btn-light:hover{
  background:var(--color-primary);

  color:#fff;
}

@media(max-width:991px){

  .services-pricing-section{
    padding:80px 0;
  }

  .pricing-card{
    padding:2rem;
  }

}

@media(max-width:768px){

  .services-heading{
    margin-bottom:40px;
  }

  .pricing-card{
    padding:1.6rem;

    border-radius:24px;
  }

  .pricing-top h3{
    font-size:1.6rem;
  }

  .pricing-price{
    font-size:2.4rem;
  }

  .pricing-features li{
    font-size:.9rem;
    line-height:1.6;
  }

  .pricing-btn{
    width:100%;
  }

}

/* ── WHY CHOOSE US ───────────────────────────────────────────── */
#why {
    background: var(--why-bg);
    padding: var(--section-py) 0;
}

.why-card {
    background: var(--why-card-bg);
    border-radius: var(--card-radius);
    padding: 36px 28px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.why-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--why-card-hover-bg);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 0;
    border-radius: inherit;
}

.why-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.why-card:hover::after { opacity: 1; }

.why-card > * { position: relative; z-index: 1; }

.why-card .why-icon {
    width: 72px; height: 72px;
    background: var(--why-icon-bg);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    color: var(--why-icon-color);
    margin: 0 auto 20px;
    transition: all var(--transition-base);
}

.why-card:hover .why-icon {
    background: rgba(255,255,255,0.15);
    color: #fff;
    transform: rotate(10deg) scale(1.1);
}

.why-card h4 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 12px;
    transition: color var(--transition-fast);
}

.why-card:hover h4 { color: var(--why-card-hover-text); }

.why-card p {
    font-size: 14px;
    color: var(--color-text-body);
    line-height: 1.75;
    transition: color var(--transition-fast);
}

.why-card:hover p { color: rgba(255,255,255,0.85); }

/* ── TESTIMONIALS ────────────────────────────────────────────── */
/* #testimonials {
    background: var(--testimonials-bg);
    padding: var(--section-py) 0;
}

#testimonials .section-title { color: var(--testimonials-text); }
#testimonials .section-label { background: var(--color-accent); }

#testimonials .testimonial-disclaimer {
    color: rgba(255,255,255,0.6);
    font-size: 12.5px;
    font-style: italic;
    border-left: 3px solid var(--color-accent);
    padding-left: 14px;
    margin-bottom: 36px;
    line-height: 1.7;
}

#testimonials .section-subtitle {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    margin-bottom: 10px;
    font-style: italic;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.video-thumb {
    position: relative;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    aspect-ratio: 9/16;
    background: #0a1e1c;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.video-thumb:hover { transform: scale(1.03); box-shadow: var(--shadow-xl); }

.video-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-thumb .play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,150,136,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.video-thumb:hover .play-overlay { opacity: 1; }
.play-overlay i { font-size: 36px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }


.video-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.video-modal-overlay.open { display: flex; animation: fadeIn 0.25s ease; }

.video-modal-inner {
    position: relative;
    width: min(90vw, 420px);
    max-height: 90vh;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.video-modal-inner video { width: 100%; display: block; border-radius: inherit; }
.video-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    z-index: 10;
}
.video-modal-close:hover { background: var(--color-accent); } */

/* Contact us */
.contact-detail-section{
  padding:var(--section-py)
  /* background:var(--color-bg-light); */
}

.contact-detail-card{
   max-width:950px;
  padding:2.5rem;
  margin:auto;
  border-radius:32px;
  background:#dff6f2;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.contact-detail-head{
  margin-bottom:1.8rem;
}

.contact-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.45rem 1rem;

  border-radius:999px;

  background:rgba(0,167,181,.12);

  color:var(--color-primary);

  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-detail-head h2{
  margin-top:.8rem;
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight:800;
  color:#08305c;
}

.contact-detail-desc{
  max-width:760px;
  margin-top:1rem;
  color:var(--color-text-muted);
  font-size:.98rem;
  line-height:1.8;
}

.contact-detail-item{
  display:flex;
  align-items:flex-start;
  gap:1.1rem;

  padding:1.4rem 0;

  border-bottom:1px solid rgba(0,0,0,.12);
}

.contact-detail-icon{
  width:58px;
  height:58px;
  font-size:1.2rem;
  border-width:3px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#004f5c;
  border:4px solid #ff9800;
  color:#ff9800;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.contact-detail-content{
  flex:1;
}

.contact-detail-content span{
  display:block;
  margin-bottom:.35rem;
  font-size:.72rem;
  color:#004f5c;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-detail-content h4{
  margin:0;
  color:#08305c;
    font-size:1.05rem;
  line-height:1.6;
  font-weight:700;
 
}

.contact-detail-content a{
  color:#08305c;
  text-decoration:none;
  transition:.25s ease;
}

.contact-detail-content a:hover{
  color:var(--color-primary);
}

@media(max-width:991px){

  .contact-detail-section{
    padding:80px 0;
  }

  .contact-detail-card{
    padding:2.5rem;
  }

  .contact-detail-content h4{
    font-size:1.5rem;
  }

}

@media(max-width:768px){

  .contact-detail-card{
    padding:1.5rem;

    border-radius:24px;
  }

  .contact-detail-item{
    gap:1rem;

    padding:1.4rem 0;
  }

  .contact-detail-icon{
    width:58px;
    height:58px;

    font-size:1.25rem;

    border-width:3px;
  }

  .contact-detail-head h2{
    font-size:2rem;
  }

  .contact-detail-content h4{
    font-size:1.05rem;
    line-height:1.7;
  }

}

/* Compliance */
.compliance-doc{
  max-width:1200px;
  margin:auto;
  padding:calc(var(--navbar-height)) 15px var(--section-py);
}

.doc-title{
  margin-bottom:2.5rem;

  font-size:clamp(2.1rem,4vw,3.5rem);
  font-weight:800;
  line-height:1.2;

  color:var(--color-text-dark);

  text-align:center;
}

.doc-content{
  padding:2rem;

  border-radius:var(--border-radius-xl);

  background:var(--color-white);

  border:1px solid var(--color-border);

  box-shadow:var(--shadow-md);
}

.page-section{
  margin-bottom:3rem;
}

.page-section:last-child{
  margin-bottom:0;
}

.page-section h2,
.doc-content h2{
  margin-bottom:1.4rem;

  font-size:clamp(1.5rem,3vw,2.3rem);
  font-weight:800;
  line-height:1.3;

  color:var(--color-text-dark);
}

.page-section h3,
.doc-content h3{
  margin:2rem 0 1rem;

  font-size:1.2rem;
  font-weight:700;

  color:var(--color-primary);
}

.page-section p,
.doc-content p,
.doc-content li{
  color:var(--color-text-body);

  font-size:1rem;
  line-height:1.9;
}

.page-subtitle{
  margin-bottom:1.3rem;

  color:var(--color-primary);

  font-size:.92rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.page-note{
  margin-top:1rem;

  color:var(--color-text-muted);

  font-size:.92rem;
  font-style:italic;
}

.doc-content strong{
  color:var(--color-text-dark);
  font-weight:700;
}

.doc-content a{
  color:var(--color-primary);
  text-decoration:none;
  transition:var(--transition-fast);
}

.doc-content a:hover{
  color:var(--color-accent);
}

.doc-content ul,
.doc-content ol{
  padding-left:1.2rem;
  margin:1rem 0;
}

.doc-content li{
  margin-bottom:.8rem;
}

.page-card{
  background:var(--color-white);

  border:1px solid var(--color-border);

  border-radius:var(--border-radius-lg);

  overflow:hidden;
}

.complaint-table-wrap{
  overflow:auto;
  border-radius:var(--border-radius-lg);
}

.complaint-table-wrap table{
  width:100%;
  min-width:900px;

  margin:0;

  border-collapse:collapse;
}

.complaint-table-wrap thead{
  background:var(--color-primary);
}

.complaint-table-wrap th{
  padding:1rem;
  /* color:var(--color-text-light); */
  font-size:.95rem;
  font-weight:700;
  border:1px solid var(--color-border);
  white-space:nowrap;
  background-color: var(--color-primary-xlight);
}

.complaint-table-wrap td{
  padding:1rem;

  color:var(--color-text-body);

  font-size:.95rem;

  border:1px solid var(--color-border);

  background:var(--color-white);
}

.complaint-table-wrap tbody tr{
  transition:var(--transition-fast);
}

.complaint-table-wrap tbody tr:hover td{
  background:var(--color-primary-xlight);
}

.complaint-table-wrap .fw-bold td{
  font-weight:700;
  color:var(--color-text-dark);
}

@media(max-width:991px){

  .compliance-doc{
    /* padding:calc(var(--navbar-height) + 60px) 12px 70px; */
    padding: 30px 10px;
  }

  .doc-content{
    padding:1.3rem;
    border-radius:var(--border-radius-lg);
  }

  .page-section{
    margin-bottom:2.2rem;
  }

  .page-section h2,
  .doc-content h2{
    font-size:1.45rem;
  }

  .page-section h3,
  .doc-content h3{
    font-size:1.08rem;
  }

  .page-section p,
  .doc-content p,
  .doc-content li{
    font-size:.94rem;
    line-height:1.8;
  }

  .complaint-table-wrap th,
  .complaint-table-wrap td{
    padding:.85rem;
    font-size:.88rem;
  }

}

@media(max-width:576px){

  .doc-title{
    margin-bottom:1.8rem;
  }

  .doc-content{
    padding:1rem;
  }

  .page-section h2,
  .doc-content h2{
    font-size:1.3rem;
  }

  .page-section p,
  .doc-content p,
  .doc-content li{
    font-size:.9rem;
  }

}

/* ── FOOTER ──────────────────────────────────────────────────── */
#footer {
    background: var(--footer-bg);
    padding: 70px 0 0;
    color: var(--footer-text);
}

#footer .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

#footer .footer-logo .brand-icon {
    width: 75px; height: 45px;
    background: var(--color-primary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: white;
    font-family: var(--font-heading);
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

#footer .footer-logo .footer-brand-name {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--footer-heading);
    line-height: 1;
}

#footer .footer-logo .footer-brand-sub {
    font-size: 11px;
    color: var(--color-primary-light);
    font-weight: 500;
}

#footer .footer-desc {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--footer-text);
    margin-bottom: 22px;
    max-width: 320px;
}

#footer .footer-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#footer .footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--footer-link-color);
    font-size: 14px;
    transition: all var(--transition-base);
}

#footer .footer-social a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: translateY(-3px);
}

#footer h5 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--footer-heading);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

#footer h5::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 36px; height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
}

#footer .footer-links { display: flex; flex-direction: column; gap: 10px; }
#footer .footer-links a {
    color: var(--footer-link-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}
#footer .footer-links a::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    color: var(--color-accent);
    flex-shrink: 0;
}
#footer .footer-links a:hover { color: var(--footer-link-hover); padding-left: 4px; }

#footer .footer-contact-list { display: flex; flex-direction: column; gap: 14px; }
#footer .footer-contact-list li {
    display: flex; gap: 12px; font-size: 13.5px; color: var(--footer-text); line-height: 1.6;
}
#footer .footer-contact-list li i {
    width: 18px; flex-shrink: 0; margin-top: 3px; color: var(--color-accent-light);
}
#footer .footer-contact-list a { color: var(--footer-link-color); }
#footer .footer-contact-list a:hover { color: var(--footer-link-hover); }

.sebi-info-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--footer-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    padding: 18px 20px;
    margin-top: 28px;
    font-size: 13px;
    color: var(--footer-text);
    line-height: 1.7;
}

.sebi-info-box strong { color: var(--footer-heading); }

.footer-disclaimer {
    margin-top: 28px;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    line-height: 1.7;
    padding-top: 20px;
    border-top: 1px solid var(--footer-border);
}

#footer .footer-bottom {
    background: var(--footer-bottom-bg);
    margin-top: 50px;
    padding: 18px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    border-top: 1px solid var(--footer-border);
}

#footer .footer-bottom a {
    color: var(--color-primary-light);
    transition: color var(--transition-fast);
}
#footer .footer-bottom a:hover { color: var(--color-accent); }

/* ── WHATSAPP FLOAT ───────────────────────────────────────────── */
.whatsapp-float {
    position: fixed;
    bottom: 110px; right: 33px;
    width: 56px; height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37,211,102,0.45);
    z-index: 9998;
    transition: all var(--transition-base);
    animation: wpPop 0.5s ease 1.5s both;
}

.uw-widget-custom-trigger {
    background-color: var(--services-cta-bg) !important;
}

@keyframes wpPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.whatsapp-float:hover {
    transform: scale(1.12) translateY(-3px);
    box-shadow: 0 8px 30px rgba(37,211,102,0.6);
    color: #fff;
}

.whatsapp-float .wp-tooltip {
    position: absolute;
    right: 66px;
    top: 50%; transform: translateY(-50%);
    background: #fff;
    color: var(--color-text-dark);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}
.whatsapp-float:hover .wp-tooltip { opacity: 1; }

/* ── BACK TO TOP ─────────────────────────────────────────────── */
#backToTop {
    position: fixed;
    bottom: 33px; right: 109px;
    width: 44px; height: 44px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-base);
    z-index: 9997;
}
#backToTop.visible { opacity: 1; transform: translateY(0); }
#backToTop:hover { background: var(--color-accent); transform: translateY(-3px); }

/* ── COUNTER ANIMATION ───────────────────────────────────────── */
.counter-num { display: inline-block; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    :root {
        --section-py: 60px;
        --section-py-sm: 40px;
    }

    #topbar .topbar-left span.reg-label { display: none; }

    #mainNav .navbar-nav .nav-link { padding: 12px 16px !important; }
    #mainNav .navbar-nav .nav-link::after { display: none; }
    #mainNav .dropdown-menu { box-shadow: none; border-top: none; border-left: 3px solid var(--color-primary); background: var(--color-bg-light); }

    #hero { padding: 50px 0 40px; min-height: auto; }
    #hero .hero-image-wrap { margin-top: 40px; }
    #hero .hero-badge-sebi { right: 0; top: 10px; font-size: 11px; }
    #hero .hero-exp-badge { left: 0; bottom: 10px; }

    #about .about-image-wrap { margin-bottom: 40px; }
    #about .about-points { grid-template-columns: 1fr; }

    .video-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    :root {
        --section-py: 48px;
        --card-padding: 22px;
    }

    #topbar { display: none; }

    #hero .hero-title { font-size: 30px; }

    .video-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    #footer .footer-desc { max-width: 100%; }
    .sebi-info-box { font-size: 12px; }
}

@media (max-width: 480px) {
    .video-grid { grid-template-columns: 1fr 1fr; }
    #hero .hero-badge-sebi { position: static; display: inline-block; margin-top: 12px; font-size: 11px; }
    #hero .hero-exp-badge { position: static; display: inline-block; margin-top: 8px; }
}

/* ── DIVIDER ─────────────────────────────────────────────────── */
.wave-divider { line-height: 0; }
.wave-divider svg { display: block; width: 100%; }


/* ==================================================
   HERO MOBILE REDESIGN
================================================== */

@media (max-width: 768px){

    /* SECTION */
    #hero{
        padding:20px 0 35px;
        min-height:auto;
        text-align:center;
    }

    #hero::before{
        width:280px;
        height:280px;
        top:20px;
        right:-120px;
    }

    /* ROW SPACING */
    #hero .row{
        row-gap:20px;
    }

    /* IMAGE COLUMN FIRST */
    #hero .hero-image-wrap{
        justify-content:center;
        align-items:center;
        margin-bottom:10px;
        min-height:auto;
    }

    /* IMAGE */
    #hero .hero-image-wrap img{
        width:100%;
        max-width:360px;
        margin:0 auto;
        display:block;
        filter:drop-shadow(0 10px 25px rgba(0,150,136,.15));
    }

    /* BG CIRCLE */
    #hero .hero-bg-circle{
        width:220px;
        height:220px;
        right:50%;
        bottom:-15px;
        transform:translateX(50%);
    }

    /* HIDE FLOATING BADGES */
    #hero .hero-badge-sebi,
    #hero .hero-exp-badge{
        display:none;
    }

    /* PRETITLE */
    #hero .hero-pretitle{
        justify-content:center;
        font-size:13px;
        margin-bottom:12px;
    }

    #hero .hero-pretitle::before{
        width:24px;
    }

    /* TITLE */
    #hero .hero-title{
        font-size:2rem;
        line-height:1.1;
        margin-bottom:14px;
    }

    /* DESCRIPTION */
    #hero .hero-desc{
        max-width:100%;
        margin:0 auto 24px;
        font-size:15px;
        line-height:1.7;
    }

    /* CTA */
    #hero .hero-cta-wrap{
        margin-bottom:18px;
    }

    .btn-primary-custom{
        min-width:190px;
        justify-content:center;
    }

    /* MOBILE STATS */
    .hero-mobile-stats{
        display:flex;
        justify-content:center;
        gap:12px;
        margin-top:18px;
    }

    .hero-stat{
        flex:1;
        max-width:140px;

        background:#fff;

        border:1px solid rgba(0,150,136,.12);

        border-radius:14px;

        padding:12px;

        box-shadow:0 6px 18px rgba(0,0,0,.04);
    }

    .hero-stat strong{
        display:block;
        font-size:16px;
        font-weight:700;
        color:var(--color-primary);
        margin-bottom:4px;
    }

    .hero-stat span{
        display:block;
        font-size:11px;
        line-height:1.4;
        color:var(--color-text-body);
    }

}

/* EXTRA SMALL DEVICES */

@media (max-width:480px){

    #hero{
        padding:15px 0 30px;
    }

    #hero .hero-image-wrap img{
        max-width:360px;
    }

    #hero .hero-title{
        font-size:1.8rem;
    }

    #hero .hero-desc{
        font-size:14px;
    }

    .hero-mobile-stats{
        gap:8px;
    }

    .hero-stat{
        padding:10px;
    }

}


/* =========================================
   NOTICE MODAL
========================================= */

.notice-modal{
    border:none;
    border-radius:24px;
    overflow:hidden;

    background:#fff;

    box-shadow:
    0 20px 60px rgba(0,0,0,.12);
}

/* HEADER */
.notice-modal .modal-header{
    border:none;

    padding:22px 26px;

    background:linear-gradient(
        135deg,
        rgba(0,179,134,.10),
        rgba(23,212,156,.10)
    );

    border-bottom:1px solid rgba(0,179,134,.12);
}

.notice-modal .modal-title{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:1.25rem;
    font-weight:700;

    color:#00a97b;
}

.notice-modal .modal-title i{
    font-size:1.3rem;
}

/* BODY */
.notice-modal .modal-body{
    padding:26px;
}

/* LIST */
.notice-list{
    margin:0;
    padding:0;
    list-style:none;
}

.notice-list li{
    position:relative;

    padding-left:28px;
    margin-bottom:16px;

    color:#475569;

    line-height:1.8;
    font-size:15px;
}

.notice-list li:last-child{
    margin-bottom:0;
}

.notice-list li::before{
    content:"✓";

    position:absolute;
    left:0;
    top:0;

    color:#00b386;
    font-weight:700;
}

/* FOOTER */
.notice-modal .modal-footer{
    border:none;

    padding:10px 26px;

    background:#fafdfc;
}

/* BUTTON */
.notice-btn{
    border:none;

    height:52px;

    padding:0 26px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #00a97b,
        #17d49c
    );

    color:#fff;

    font-weight:600;

    display:flex;
    align-items:center;
    gap:8px;

    transition:.25s ease;
}

.notice-btn:hover{
    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(0,179,134,.25);
}

/* MOBILE */
@media(max-width:767px){

    .notice-modal{
        border-radius:18px;
    }

    .notice-modal .modal-header,
    .notice-modal .modal-body,
    .notice-modal .modal-footer{
        padding:18px;
    }

    .notice-modal .modal-title{
        font-size:1.05rem;
    }

    .notice-list li{
        font-size:14px;
        line-height:1.7;
    }

}