/* ============================================================
   CENTAL MEDICAL — THEME CSS
   Web Elite Infotech Color Scheme Applied
   ─────────────────────────────────────────
   Background  : #0A1628  (Deep Navy)
   Card/Nav bg : #0D1B38 / #112040
   Primary     : #F5A800  (Golden Yellow)
   Hover Gold  : #FFB800
   White text  : #FFFFFF
   Muted text  : rgba(255,255,255,0.6)
   Border      : rgba(245,168,0,0.2)
   ============================================================ */

/* ── Bootstrap CSS Variable Override ── */
:root {
  --bs-primary:        #F5A800;
  --bs-secondary:      #0D1B38;
  --bs-info:           #FFB800;
  --bs-light:          #112040;
  --bs-dark:           #0A1628;
  --bs-white:          #ffffff;
  --bs-body-color:     rgba(255, 255, 255, 0.65);
  --bs-body-bg:        #0A1628;

  /* Custom Web Elite Variables */
  --navy:              #0A1628;
  --navy-mid:          #0D1B38;
  --navy-card:         #112040;
  --navy-light:        #1A2F55;
  --gold:              #F5A800;
  --gold-light:        #FFB800;
  --gold-border:       rgba(245, 168, 0, 0.2);
  --gold-glow:         rgba(245, 168, 0, 0.35);
  --white:             #ffffff;
  --muted:             rgba(255, 255, 255, 0.6);
}

/* ── Base Body ── */
body {
  background-color: #ffffff !important;
  color: var(--white) !important;
  font-family: "Nunito", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #000c21;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

p { color: #6e7684; }
a { color: var(--gold); }
a:hover { color: var(--gold-light); }

/* ============================================================
   Spinner
   ============================================================ */
#spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-out, visibility 0s linear .5s;
  z-index: 99999;
}
#spinner.show {
  transition: opacity .5s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}

/* ============================================================
   Back to Top
   ============================================================ */
.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy) !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px var(--gold-glow);
  transition: 0.3s;
  z-index: 99;
  text-decoration: none;
}
.back-to-top:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px var(--gold-glow);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  font-weight: 700;
  transition: .3s;
  border-radius: 50px;
}
.btn-square    { width: 32px; height: 32px; border-radius: 8px !important; }
.btn-sm-square { width: 34px; height: 34px; border-radius: 8px !important; }
.btn-md-square { width: 44px; height: 44px; border-radius: 10px !important; }
.btn-lg-square { width: 56px; height: 56px; border-radius: 12px !important; }
.btn-xl-square { width: 66px; height: 66px; border-radius: 14px !important; }

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}

/* Primary Button — Gold filled */
.btn.btn-primary {
  color: var(--navy);
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 6px 20px var(--gold-glow);
}
.btn.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--gold-glow);
}

/* Secondary Button — Navy outline */
.btn.btn-secondary {
  color: var(--white);
  background: var(--navy-card);
  border-color: var(--gold-border);
}
.btn.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245, 168, 0, 0.08);
}

/* Light Button */
.btn.btn-light {
  color: var(--navy);
  background: var(--gold);
  border-color: var(--gold);
}
.btn.btn-light:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* Outline Primary */
.btn.btn-outline-primary {
  color: var(--gold);
  border-color: var(--gold);
  background: transparent;
}
.btn.btn-outline-primary:hover {
  color: var(--navy);
  background: var(--gold);
  border-color: var(--gold);
}

/* ============================================================
   Icon Animation
   ============================================================ */
@keyframes icon-animat {
  0%   { border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%; }
  25%  { border-radius: 69% 31% 19% 81% / 43% 37% 63% 57%; }
  50%  { border-radius: 67% 33% 16% 84% / 57% 37% 63% 43%; }
  75%  { border-radius: 77% 23% 61% 39% / 36% 61% 39% 64%; }
  100% { border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%; }
}

/* ============================================================
   Top Bar
   ============================================================ */
.topbar,
.top-bar {
  background: var(--navy-mid);
  border-bottom: 1px solid var(--gold-border);
  padding: 9px 0;
  font-size: 13px;
  color: var(--muted);
}
.topbar i,
.top-bar i { color: var(--gold); }

/* ============================================================
   Navbar
   ============================================================ */
.nav-bar,
.navbar {
  background: var(--navy-mid) !important;
  border-bottom: 1px solid var(--gold-border);
}
.sticky-top { transition: 0.5s; }

.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
  position: relative;
  margin-right: 4px;
  padding: 8px 14px;
  letter-spacing: 0.5px;
  color:#fff!important;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  outline: none;
  transition: .25s;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--gold) !important;
  background: rgba(245, 168, 0, 0.08);
}

.navbar-brand img { max-height: 50px; transition: .3s; }
.sticky-top .navbar-brand img { max-height: 44px; }

/* Navbar toggler */
.navbar-toggler {
  border-color: var(--gold-border) !important;
  color: var(--gold) !important;
}
.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='rgba%28245%2C168%2C0%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dropdown */
.navbar .dropdown-toggle::after {
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  vertical-align: middle;
  margin-left: 6px;
}
.dropdown-menu {
  background: var(--navy-card) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: 10px !important;
}
.dropdown-item { color: var(--muted) !important; }
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--gold) !important;
  background: rgba(245, 168, 0, 0.08) !important;
}
.navbar .nav-item:hover .dropdown-menu {
  transform: rotateX(0deg);
  visibility: visible;
  margin-top: 8px !important;
  transition: .3s;
  opacity: 1;
}
@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: block;
    visibility: hidden;
    top: 100%;
    transform: rotateX(-75deg);
    transform-origin: 0% 0%;
    border: 0;
    border-radius: 10px;
    margin-top: 8px !important;
    transition: .3s;
    opacity: 0;
  }
}
@media (max-width: 991px) {
  .navbar.navbar-expand-lg .navbar-toggler {
    padding: 6px 14px;
    border: 1px solid var(--gold-border);
  }
}

/* Social Icons in Navbar */
.navbar-social a {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--gold-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  text-decoration: none;
  transition: .25s;
  margin-left: 6px;
}
.navbar-social a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(245, 168, 0, 0.08);
}

/* ============================================================
   Hero / Carousel
   ============================================================ */
.carousel .carousel-item img { object-fit: cover; }
.carousel .carousel-item,
.carousel .carousel-item img { height: 700px; }

.carousel-item .carousel-caption {
  position: absolute;
  width: 100%; height: 100%;
  left: 0; bottom: 0;
  background: rgba(10, 22, 40, 0.75);
  display: flex;
  align-items: center;
}
.carousel .carousel-indicators {
  left: 75%; top: 50%;
  margin-right: 25%;
  transform: translateY(-50%);
  flex-direction: column;
}
.carousel-indicators [data-bs-target] {
  display: flex;
  width: 14px; height: 14px;
  border: 3px solid rgba(245, 168, 0, 0.4);
  border-radius: 50%;
  padding: 0;
  margin-top: 10px; margin-bottom: 10px;
  background-color: transparent;
  opacity: 1;
  transition: 0.3s;
}
.carousel-indicators [data-bs-target].active {
  background-color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow);
}
@media (max-width: 992px) {
  .carousel-indicators [data-bs-target] { display: none; }
}

/* ============================================================
   Breadcrumb Hero
   ============================================================ */
.bg-breadcrumb {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(10, 22, 40, 0.92), rgba(13, 27, 56, 0.88)),
              url(../img/fact-bg.jpg) center top / cover no-repeat;
  padding: 60px 0;
  transition: 0.5s;
}
.bg-breadcrumb .breadcrumb-item a { color: var(--gold); }
.bg-breadcrumb .breadcrumb-item.active { color: var(--muted); }
.bg-breadcrumb h1 { color: var(--white); }

/* ============================================================
   Features
   ============================================================ */
.feature { background: #fff; border-top: 1px solid var(--gold-border); }
.feature .feature-item {
  display: flex; border-radius: 14px;
  background: var(--navy-card);
  border: 1px solid var(--gold-border);
  transition: .3s;
}
.feature .feature-item:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 28px rgba(245, 168, 0, 0.12);
  transform: translateY(-3px);
}
.feature .feature-item .feature-icon span {
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  background: var(--gold);
  border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%;
  animation: icon-animat 5s 1s alternate infinite;
  transition: 0.5s;
  font-size: 32px;
}

/* ============================================================
   About
   ============================================================ */
.about { background: #fff; }
.about .about-item .about-item-inner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  border-radius: 14px;
  background: var(--navy-card);
  border: 1px solid var(--gold-border);
  transition: 0.5s;
}
.about .about-item .about-item-inner:hover {
  border-color: var(--gold);
}
.about .about-icon {
  width: 90px; height: 90px;
  border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  background: var(--gold);
  animation: icon-animat 5s 1s alternate infinite;
  transition: 0.5s;
}
.about .about-img { position: relative; overflow: hidden; width: 100%; height: 100%; }
.about .about-img .img-1 { height: 85%; margin-right: 50px; }
.about .about-img .img-2 { position: absolute; width: 100%; bottom: 0; right: 0; padding-left: 50px; border-radius: 10px; }
.about .about-img::after {
  content: "";
  position: absolute; width: 10px; height: 98%; top: 0; right: 0;
  border-radius: 10px;
  background: var(--gold);
  z-index: -1;
}
.about .text-item { position: relative; padding-left: 25px; }
.about .text-item::after {
  content: "";
  position: absolute; width: 5px; height: 100%; top: 0; left: 0;
  border-radius: 10px;
  background: var(--gold);
}

/* ============================================================
   Counter / Fact
   ============================================================ */
.counter {
  background: linear-gradient(rgba(10, 22, 40, 0.92), rgba(13, 27, 56, 0.92)),
              url(../img/d6.jpg) center / cover no-repeat;
}
.counter .counter-item-icon {
  width: 90px; height: 90px;
  border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  background: var(--gold);
  animation: icon-animat 5s 1s alternate infinite;
}
.counter h2 { color: var(--gold) !important; }

/* ============================================================
   Services Section — Updated Design
   Matches screenshot: navy cards, gold animated icon, white text
   ============================================================ */

.service {
  background: #fff;
}

/* ── Section Heading ── */
.service .display-5 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: #000c21;
}

.service .display-5 .text-primary {
  color: var(--gold) !important;
}

.service > .container > .text-center p {
  color: #6e7684;
  font-size: 1rem;
}

/* ── Service Card ── */
.service .service-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  border-radius: 18px;
  background: var(--navy-card);          /* #112040 */
  border: 1px solid var(--gold-border);  /* rgba(245,168,0,0.2) */
  padding: 40px 28px 32px;
  transition: 0.4s ease;
  overflow: hidden;
  min-height: 340px;
}

/* Subtle gold shimmer top border on hover */
.service .service-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--gold);
  border-radius: 18px 18px 0 0;
  transition: width 0.4s ease;
}
.service .service-item:hover::before {
  width: 100%;
}

.service .service-item:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 40px rgba(245, 168, 0, 0.18);
  transform: translateY(-6px);
}

/* ── Service Icon ── */
.service .service-icon {
  width: 90px;
  height: 90px;
  border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);                    /* #0A1628 — dark icon on gold */
  background: var(--gold);              /* #F5A800 */
  animation: icon-animat 5s 1s alternate infinite;
  transition: 0.5s;
  font-size: 32px;
  margin-bottom: 24px;
  flex-shrink: 0;
  box-shadow: 0 6px 20px var(--gold-glow);
}

.service .service-item:hover .service-icon {
  background: var(--gold-light);        /* #FFB800 on hover */
  box-shadow: 0 10px 30px var(--gold-glow);
}

/* ── Title ── */
.service .service-item h5 {
  font-family: "Poppins", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white) !important;       /* #ffffff */
  margin-bottom: 14px;
  line-height: 1.3;
}

/* ── Description ── */
.service .service-item p {
  font-size: 0.92rem;
  color: var(--muted) !important;       /* rgba(255,255,255,0.6) */
  line-height: 1.75;
  margin-bottom: 24px;
  flex: 1;
}

/* ── Learn More Button ── */
.service .service-item .btn.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 9px 24px;
  border-radius: 50px;
  box-shadow: 0 4px 16px var(--gold-glow);
  transition: 0.3s;
  text-decoration: none;
}

.service .service-item .btn.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--gold-glow);
}

/* ── Icon Animation (keep same as style.css) ── */
@keyframes icon-animat {
  0%   { border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%; }
  25%  { border-radius: 69% 31% 19% 81% / 43% 37% 63% 57%; }
  50%  { border-radius: 67% 33% 16% 84% / 57% 37% 63% 43%; }
  75%  { border-radius: 77% 23% 61% 39% / 36% 61% 39% 64%; }
  100% { border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%; }
}
/* ============================================================
   Appointment / Booking Form — Updated Design
   Matches screenshot: deep blue gradient bg, gold/cyan accents
   ============================================================ */

.appointment {
  background: linear-gradient(160deg, #000c21 0%, #040535 60%, #0a1628 100%);
  border-top: 1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
  position: relative;
  overflow: hidden;
}

/* ── Radial glow background effect (matches screenshot blue glow) ── */
.appointment::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 120, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.appointment::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 216, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── All inner content above bg effects ── */
.appointment .container,
.appointment .row,
.appointment form {
  position: relative;
  z-index: 1;
}

/* ── Form Icon Wrap (calendar icon top center) ── */
.appointment .form-icon-wrap {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: rgba(0, 180, 216, 0.15);
  border: 2px solid rgba(0, 180, 216, 0.4);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 24px;
  color: #00B4D8;
  box-shadow: 0 0 20px rgba(0, 180, 216, 0.2);
}

/* ── Form Title ── */
.appointment .appt-title {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 28px;
}

/* ── Field Wrapper ── */
.appointment .appt-field {
  position: relative;
  margin-bottom: 14px;
}

/* ── Field Icon ── */
.appointment .appt-field i,
.appointment .appt-field .field-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 13px;
  pointer-events: none;
  z-index: 2;
}
.appointment .appt-field textarea ~ i,
.appointment .appt-field textarea ~ .field-icon {
  top: 17px;
  transform: none;
}

/* ── Inputs / Select / Textarea ── */
.appointment .appt-field input,
.appointment .appt-field select,
.appointment .appt-field textarea {
  width: 100%;
  padding: 14px 14px 14px 40px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(0, 120, 255, 0.25);
  border-radius: 12px;
  color: var(--white);
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  transition: .25s;
  outline: none;
  backdrop-filter: blur(4px);
}

.appointment .appt-field textarea {
  min-height: 90px;
  resize: none;
  padding-top: 14px;
}

.appointment .appt-field input::placeholder,
.appointment .appt-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.appointment .appt-field select option {
  background: #0a1628;
  color: var(--white);
}

/* ── Focus State ── */
.appointment .appt-field input:focus,
.appointment .appt-field select:focus,
.appointment .appt-field textarea:focus {
  border-color: #00B4D8;
  background: rgba(0, 180, 216, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15);
  color: var(--white);
}

/* ── Date & Time input color fix ── */
.appointment .appt-field input[type="date"],
.appointment .appt-field input[type="time"] {
  color-scheme: dark;
}

/* ── Confirm / Book Button ── */
.btn-book {
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 15px 32px;
  font-size: 15px;
  font-weight: 800;
  width: 100%;
  cursor: pointer;
  transition: .3s;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Poppins", sans-serif;
  border: 1px solid rgba(255,255,255,0.08);
}

.btn-book i {
  font-size: 16px;
  color: var(--gold);
}

.btn-book:hover {
  background: #0d2a55;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  border-color: var(--gold-border);
  color: var(--white);
}

/* ── Section heading (if any) ── */
.appointment h1,
.appointment h2,
.appointment h3 {
  color: var(--white);
  font-family: "Poppins", sans-serif;
}

.appointment p {
  color: var(--muted);
}
/* ============================================================
   Team
   ============================================================ */
.team { background: var(--navy); }
.team .team-item {
  position: relative; text-align: center; border-radius: 14px;
  margin-top: 100px;
  background: var(--navy-card);
  border: 1px solid var(--gold-border);
  transition: 0.4s; z-index: 1;
}
.team .team-item::after {
  content: "";
  position: absolute; width: 100%; height: 0;
  bottom: 0; left: 0; border-radius: 14px;
  background: var(--gold); z-index: 2; transition: 0.4s;
}
.team .team-item:hover::after { height: 100%; }
.team .team-item .team-content { position: relative; z-index: 5; }
.team .team-item:hover .team-content h4,
.team .team-item:hover .team-content p { color: var(--navy) !important; transition: 0.4s; }
.team .team-img {
  position: relative; overflow: hidden;
  top: -100px; margin-bottom: -100px; border-radius: 10px; z-index: 3;
}
.team .team-img img { transition: 0.4s; }
.team .team-item:hover .team-img img { transform: scale(1.1); }

/* ============================================================
   Testimonial
   ============================================================ */
.testimonial { background: #fff; }
.testimonial .testimonial-item {
  position: relative; margin-top: 35px;
  border: 1px solid var(--gold-border); border-radius: 14px;
  background: var(--navy-card);
  transition: .3s;
}
.testimonial .testimonial-item:hover { border-color: var(--gold); }
.testimonial .testimonial-quote {
  position: absolute; width: 70px; height: 70px;
  top: 0; right: 25px; transform: translateY(-50%);
  border-radius: 70px; color: var(--navy); background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.testimonial .testimonial-inner {
  display: flex; align-items: center;
  background: rgba(245, 168, 0, 0.06);
  border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.testimonial .testimonial-inner img {
  width: 100px; height: 100px;
  border-radius: 100px; border: 3px solid var(--gold);
}

/* ============================================================
   Blog
   ============================================================ */
.blog { background: #fff; }
.blog .blog-item { border-radius: 14px; transition: 0.4s; background: var(--navy-card); border: 1px solid var(--gold-border); }
.blog .blog-item:hover { border-color: var(--gold); box-shadow: 0 10px 35px rgba(245, 168, 0, 0.12); }
.blog .blog-img {
  position: relative; overflow: hidden;
  border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.blog .blog-img img { transition: 0.4s; }
.blog .blog-item:hover .blog-img img { transform: scale(1.08); }
.blog .blog-content { background: var(--navy-card); padding: 20px; }
.blog .blog-date {
  position: absolute; top: 0; left: 25px;
  transform: translateY(-50%);
  padding: 10px 22px; border-radius: 50px;
  color: var(--navy); background: var(--gold);
  font-weight: 700; font-size: 13px;
}

/* ============================================================
   Contact
   ============================================================ */
.contact { background:#fff; }
.contact .contact-add-item {
  border-radius: 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: var(--navy-card);
  border: 1px solid var(--gold-border);
  transition: .3s;
}
.contact .contact-add-item:hover { border-color: var(--gold); }
.contact .contact-icon {
  width: 90px; height: 90px;
  border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  background: var(--gold);
  animation: icon-animat 5s 1s alternate infinite;
  transition: 0.5s;
}

/* ============================================================
   Steps / Process
   ============================================================ */
.steps {
  background: linear-gradient(rgba(10, 22, 40, 0.94), rgba(10, 22, 40, 0.94)),
              url(../img/d6.jpg) center / cover no-repeat;
}
.steps .steps-item {
  position: relative;
  background: var(--navy-card);
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  transition: .3s;
}
.steps .steps-item:hover { border-color: var(--gold); }
.steps .setps-number {
  position: absolute;
  width: 64px; height: 64px;
  bottom: 0; right: 40px;
  font-weight: 900;
  border: 2px solid var(--gold);
  border-radius: 50%;
  transform: translateY(50%);
  color: var(--navy);
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--navy-mid); border-top: 1px solid var(--gold-border); }
.footer .footer-item a { line-height: 35px; color: var(--muted); transition: 0.3s; }
.footer .footer-item p { line-height: 35px; color: var(--muted); }
.footer .footer-item a:hover { color: var(--gold); letter-spacing: 1px; }
.footer .footer-item .footer-btn a {
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1px solid var(--gold-border);
  display: inline-flex; align-items: center; justify-content: center;
  transition: 0.3s;
}
.footer .footer-item .footer-btn a:hover {
  background: var(--gold);
  border-color: var(--gold);
}
.footer .footer-item .footer-btn a:hover i { color: var(--navy) !important; }

/* ============================================================
   Copyright
   ============================================================ */
.copyright {
  border-top: 1px solid var(--gold-border);
  background: var(--navy);
  padding: 18px 0;
  color: var(--muted);
  font-size: 13px;
}
.copyright a { color: var(--gold); }

/* ============================================================
   Cards / Sections — Generic
   ============================================================ */
.card {
  background: var(--navy-card) !important;
  border: 1px solid var(--gold-border) !important;
  color: var(--white) !important;
}
.card:hover { border-color: var(--gold) !important; }

section { background: var(--navy); }
.bg-light { background: var(--navy-mid) !important; }
.bg-dark  { background: var(--navy) !important; }

/* ============================================================
   Text & Color Utilities
   ============================================================ */
.text-primary   { color: var(--gold) !important; }
.text-secondary { color: var(--muted) !important; }
.text-muted     { color: var(--muted) !important; }
.text-white     { color: var(--white) !important; }
.text-dark      { color: var(--white) !important; }
.text-body      { color: var(--muted) !important; }

.bg-primary     { background-color: var(--gold) !important; color: var(--navy) !important; }
.bg-secondary   { background-color: var(--navy-mid) !important; }
.bg-dark        { background-color: var(--navy) !important; }
.bg-light       { background-color: var(--navy-card) !important; }

.border-primary { border-color: var(--gold) !important; }
.border-secondary { border-color: var(--gold-border) !important; }

/* ============================================================
   Forms — Dark Theme
   ============================================================ */
.form-control,
.form-select {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--gold-border) !important;
  color: var(--white) !important;
  border-radius: 10px !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--gold) !important;
  background: rgba(245,168,0,.06) !important;
  box-shadow: 0 0 0 3px rgba(245,168,0,.12) !important;
  color: var(--white) !important;
}
.form-control::placeholder { color: rgba(255,255,255,.3) !important; }
.form-select option { background: var(--navy-card); color: var(--white); }

/* ============================================================
   Pagination
   ============================================================ */
.page-link {
  background: var(--navy-card) !important;
  border-color: var(--gold-border) !important;
  color: var(--muted) !important;
}
.page-link:hover { color: var(--gold) !important; border-color: var(--gold) !important; }
.page-item.active .page-link {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--navy) !important;
}

/* ============================================================
   Gold Accent Line / Divider
   ============================================================ */
.gold-line,
.section-divider {
  width: 56px; height: 3px;
  background: var(--gold);
  border-radius: 3px;
  margin: 14px 0;
}

/* ============================================================
   Section Title Style
   ============================================================ */
.section-title { color: var(--gold) !important; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.section-heading { color: var(--white) !important; font-family: 'Poppins', sans-serif; font-weight: 800; }

/* ============================================================
   Color Reference
   ─────────────────────────────────────────
   --gold       #F5A800  →  Primary Gold     (buttons, icons, accents)
   --gold-light #FFB800  →  Hover Gold       (hover states)
   --navy       #0A1628  →  Deep Navy        (page background)
   --navy-mid   #0D1B38  →  Mid Navy         (topbar, navbar, footer)
   --navy-card  #112040  →  Card Navy        (cards, form bg)
   --white      #FFFFFF  →  White            (headings, text on dark)
   --muted      rgba(255,255,255,0.6)        (body text, secondary info)
   --gold-border rgba(245,168,0,0.2)         (borders, dividers)
   ============================================================ */

   .text-white {
    color: #f4f6f9 !important;
}

.hero-form-panel {
    flex: 0 0 40%;
    max-width: 40%;
    background: linear-gradient(160deg, #000c21 0%, #040535 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    position: relative;
    overflow: hidden;
}
.counter .text-white {
    color: #fff !important;
}
h5 {
    color: #fff !important;
}
.steps .text-white {
    color: #fff !important;
}

h4 {
    color: #ffc107 !important;
}

.feature .h1 {
    color: #ffffff !important;
}

.footer .text-white {
    color: #ffc107 !important;
}

.team h1{
    color: #fff !important;
}

.service-icon .text-primary {
    color: #1f2e4e !important;
}

/* .moving-bar */

.feature-scroll{
    width:100%;
    background:#0d2a55;
    overflow:hidden;
    padding:8px 0;
}

.feature-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation:scrollFeature 25s linear infinite;
}

.feature-item{
    display:flex;
    align-items:center;
    margin:0 40px;
}

.feature-item i{
    font-size:22px;
    color:#ffc107;
    background:#1d3b6d;
    padding:15px;
    border-radius:12px;
    margin-right:15px;
}

.feature-item h6{
    color:#fff;
    margin:0;
    font-size:16px;
    font-weight:600;
}

.feature-item p{
    color:#cfd6e4;
    margin:0;
    font-size:13px;
}

.dot{
    width:6px;
    height:6px;
    background:#ffc107;
    border-radius:50%;
}

@keyframes scrollFeature{
    0%{
        transform:translateX(100%);
    }
    100%{
        transform:translateX(-100%);
    }
}

.appt-field .field-icon {
   
    color: #ffc107 !important;
   
}

.categories-content h4{
    color:#000c21 !important;
}

/* =========================================================
   ✅ MOBILE RESPONSIVE FIX (FINAL)
   ========================================================= */
@media (max-width: 991px) {

    /* ── Navbar Collapse Fix ── */
    .navbar-collapse {
        background: #0D1B38 !important;
        padding: 15px;
        border-radius: 12px;
        margin-top: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    }

    /* Full width nav items */
    .navbar-nav {
        width: 100%;
        gap: 6px;
    }

    .navbar-nav .nav-link {
        width: 100%;
        padding: 12px 15px !important;
        border-radius: 8px;
    }

    /* Active + hover */
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background: rgba(245,168,0,0.12);
        color: #F5A800 !important;
    }

    /* ── Courses Button ── */
    .nav-courses-btn {
        width: 100%;
        justify-content: center;
        margin: 6px 0;
    }

    /* ── Icons (cart / phone) ── */
    .navbar-nav .nav-link i {
        margin-right: 8px;
    }

    /* ── Account Button ── */
    #accountWrapper {
        width: 100%;
        margin-top: 10px;
    }

    .nav-account-btn {
        width: 100%;
        border-radius: 10px;
    }

    /* Dropdown fix */
    .account-dropdown {
        position: static;
        width: 100%;
        margin-top: 8px;
        background: #112040;
        border: 1px solid rgba(245,168,0,0.2);
    }

    /* ── Hero Section Fix ── */
    .carousel .carousel-item,
    .carousel .carousel-item img {
        height: 420px;
    }

    .carousel-caption {
        padding: 20px !important;
        text-align: left;
    }

    /* ── Appointment Form ── */
    .appointment {
        padding: 40px 0;
    }

    .appointment .row {
        flex-direction: column;
    }

    .appt-field input,
    .appt-field select,
    .appt-field textarea {
        font-size: 13px;
        padding: 12px 12px 12px 38px;
    }

    /* ── Buttons Fix ── */
    .btn,
    .btn-book {
        width: 100%;
    }

    /* ── Section spacing ── */
    section {
        padding: 40px 0 !important;
    }

    /* ── Service Cards ── */
    .service .service-item {
        padding: 25px 18px;
        min-height: auto;
    }

    /* ── Feature scroll fix ── */
    .feature-item {
        margin: 0 20px;
    }

    /* ── Footer ── */
    .footer .row > div {
        margin-bottom: 20px;
    }
}