:root {
  /* ===== BRAND COLORS (FROM LOGO) ===== */
  --primary: #253a5e;
  /* Navy Blue */
  --primary-dark: #1b2c46;

  --accent: #d4a93c;
  /* Construction Gold */
  --accent-dark: #b8932f;

  /* ===== NEUTRALS ===== */
  --dark: #0f172a;
  --gray: #64748b;
  --light: #f1f5f9;
  --off-white: #f9fafb;

  /* ===== LIGHT MODE ===== */
  --text-base: #1b2c46;
  --text-muted: #c1c7d1;
  --bg-base: #ffffff;
  --bg-card: #ffffff;
  --bg-section-light: #f1f5f9;

  /* ===== DARK MODE ===== */
  --text-base-dark: #e5e7eb;
  --text-muted-dark: #9ca3af;
  --bg-base-dark: #0b1220;
  --bg-card-dark: #111827;
  --bg-section-dark: #0f172a;
}

[data-bs-theme="light"] {
  --bs-primary: var(--primary);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-dark);

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

  --bg-body: var(--bg-base);
  --bg-card: var(--bg-card);
  --bg-light-section: var(--bg-section-light);
}

[data-bs-theme="dark"] {
  --bs-primary: var(--accent);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-dark);

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

  --bg-body: var(--bg-base-dark);
  --bg-card: var(--bg-card-dark);
  --bg-light-section: var(--bg-section-dark);
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: var(--bg-body);
  color: var(--text-color) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title {
  /*color: var(--primary) !important;*/
  color: var(--accent) !important;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: var(--accent) !important;
}

.text-muted,
small {
  color: var(--text-muted-color) !important;
}

.text-primary {
  color: var(--primary) !important;
}

[data-bs-theme="dark"] .text-primary {
  color: #93c5fd !important;
}

/* Muted & secondary text */
.text-muted,
small,
.card-text.text-muted,
small.text-muted {
  color: var(--text-muted-color) !important;
}

/* Cards - respect theme */
.card {
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

[data-bs-theme="dark"] .card {
  border-color: #444 !important;
}

/* Light sections */
.bg-light {
  background-color: var(--bg-light-section) !important;
}

/* Navbar - better handling */
#main-navbar {
  background-color: rgba(37, 58, 94, 0.95) !important;
  backdrop-filter: blur(10px);
}

#main-navbar .nav-link {
  color: #ffffff !important;
}

#main-navbar .nav-link:hover,
#main-navbar .nav-link.active {
  color: var(--accent) !important;
}

[data-bs-theme="dark"] #main-navbar {
  background-color: rgba(15, 23, 42, 0.96) !important;
}

[data-bs-theme="dark"] #main-navbar .nav-link {
  color: #f8f9fa !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

[data-bs-theme="dark"] .btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #1b2c46;
}


a:not(.btn) {
  color: var(--primary);
  text-decoration: none;
}

a:not(.btn):hover {
  color: var(--accent);
}

/* Hero & overlays */
.hero,
#service-hero,
#projects-hero,
#contact-hero,
#about-hero {
  color: white !important;
}

/* Remove conflicting blanket overrides */
/* .card,
.bg-light,
section:not(.bg-dark):not(.bg-primary) {
  background-color: unset !important;
  color: unset !important;
} */

/* Force readable text in cards & sections */
.card-body,
.card-text,
p,
li,
.lead {
  color: var(--text-color) !important;
}

.card {
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.bg-light {
  background-color: var(--bg-light-section) !important;
}

/* Dark mode specific */
[data-bs-theme="dark"] .text-white {
  color: #f8f9fa !important;
}

[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .bg-dark,
[data-bs-theme="dark"] .bg-info {
  color: white !important;
}

/* Hover effects - keep as-is but ensure shadow contrast */
.service-card:hover,
.project-card:hover,
.service-overview-card:hover,
.testimonial-card:hover,
.stat-box:hover {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
}

/* Keep your existing animation/transitions as they are good */
.service-card,
.project-card,
.service-overview-card,
.testimonial-card,
.stat-box,
.btn-primary.btn-lg {
  transition: all 0.4s ease, transform 0.3s ease;
}

/* Remove this problematic line completely (it was causing issues) */
ul.dropdown-menu.mega-menu.shadow-lg.border-0.show {
  position: fixed;
  right: 0;
}

/* ↑ इसे हटा दो, क्योंकि इससे mega menu की positioning गड़बड़ हो रही थी */
/* ============================================== */
/* HERO SLIDER - केवल index.php के लिए (selective) */
/* ============================================== */
#hero {
  height: 100vh;
  min-height: 700px;
  position: relative;
  overflow: hidden;
}

/* Slider only on index page - don't apply globally */
#hero .slider-image {
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1.5s ease-in-out;
}

/* Overlay for hero slider only */
#hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.65),
      rgba(0, 0, 0, 0.45));
  z-index: 1;
}

/* Carousel fade only on hero */
#hero .carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

#hero .carousel-fade .carousel-item.active {
  opacity: 1;
}

/* Hero content styling (only inside #hero) */
#hero .hero-content {
  max-width: 900px;
  z-index: 2;
}

#hero .hero-content h1 {
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  color: white;
}

#hero .hero-content p {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Controls subtle only on hero */
#hero .carousel-control-prev,
#hero .carousel-control-next {
  opacity: 0.4;
  width: 5%;
  transition: opacity 0.4s;
}

#hero .carousel-control-prev:hover,
#hero .carousel-control-next:hover {
  opacity: 0.9;
}

/* Mobile adjustment only for hero slider */
@media (max-width: 768px) {
  #hero {
    min-height: 80vh;
  }

  #hero .hero-content h1 {
    font-size: 2.5rem;
  }

  #hero .hero-content p {
    font-size: 1.2rem;
  }
}

/* ============================================== */
/* REMOVE THIS COMPLETELY (mega menu fix) */
/* ============================================== */
/* No need for this rule anymore - Bootstrap handles positioning */
/* ul.dropdown-menu.mega-menu.shadow-lg.border-0.show { position: fixed; right: 0; } */

/* ============================================== */
/* Mega Menu Positioning Fix - Better Approach */
/* ============================================== */
.mega-dropdown .dropdown-menu.mega-menu {
  width: 100%;
  max-width: 1140px;
  left: 50% !important;
  transform: translateX(-50%);
  margin-top: 0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Fix for mobile - prevent fixed positioning issues */
@media (max-width: 991px) {
  .mega-dropdown .dropdown-menu.mega-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    left: 0 !important;
    box-shadow: none;
  }
}

footer {
  background-color: var(--primary) !important;
  color: #ffffff;
}

footer h5,
footer h6 {
  color: var(--accent) !important;
}

small.d-block.text-muted.small.mt-1.ms-2l {
  color: var(--accent) !important;
}

footer a,
footer p,
footer li,
span,
small {
  color: #e5e7eb !important;
}

footer a:hover {
  color: var(--accent) !important;
}

footer .text-muted {
  color: #cbd5f5 !important;
}


/* ===================================== */
/* SMALL SCREEN FIX (Mobile Only) */
/* ===================================== */

/* ===================================== */
/* HEADER RESPONSIVE FIX - SMALL DEVICES */
/* ===================================== */

@media (max-width: 576px) {

  /* STOP horizontal scroll */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Navbar full width without overflow */
  #main-navbar {
    width: 100% !important;
    left: 0;
    right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #main-navbar .container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Fix brand alignment */
  .navbar-brand {
    margin-right: 0 !important;
  }

  .navbar-brand img {
    height: 45px !important;
  }

  .navbar-brand small {
    font-size: 11px;
    margin-left: 4px !important;
  }

  /* Collapse menu full width */
  .navbar-collapse {
    width: 100%;
    background-color: #101a2c;
    padding: 15px;
    margin-top: 8px;
    border-radius: 0 !important;
  }

  /* Nav links center + no overflow */
  .navbar-nav {
    width: 100%;
  }

  .navbar-nav .nav-link {
    padding: 12px 0 !important;
    text-align: center;
  }

  /* Button full width */
  .navbar-nav .btn {
    width: 100%;
    margin-top: 10px;
  }

  /* Mega menu mobile safe */
  .mega-dropdown .dropdown-menu.mega-menu {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none;
    border-radius: 0 !important;
  }

  .mega-dropdown .dropdown-menu .row {
    margin: 0 !important;
  }

}

@media (max-width: 576px) {

  /* Stop horizontal scroll */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Global Font Adjustments */
  body {
    font-size: 14px;
    line-height: 1.6;
  }

  h1 {
    font-size: 1.6rem !important;
  }

  h2 {
    font-size: 1.4rem !important;
  }

  h3 {
    font-size: 1.2rem !important;
  }

  h4,
  h5 {
    font-size: 1.1rem !important;
  }

  p,
  li,
  small {
    font-size: 0.9rem !important;
  }

  /* HERO SECTION */
  #hero {
    height: auto;
    min-height: 85vh;
    padding-top: 80px;
  }

  #hero .slider-image {
    height: 85vh;
    background-position: center center;
  }

  #hero .hero-content {
    padding: 0 20px;
    text-align: center;
  }

  #hero .hero-content h1 {
    font-size: 1.7rem !important;
    line-height: 1.3;
  }

  #hero .hero-content p {
    font-size: 1rem !important;
  }

  /* Navbar Links */
  #main-navbar .nav-link {
    padding: 12px 0 !important;
    font-size: 0.95rem;
  }

  /* Buttons */
  .btn-lg {
    width: 100%;
    padding: 8px !important;
    font-size: 0.95rem;
  }

  /* Cards */
  .card {
    margin-bottom: 1.2rem;
  }

  .card-title {
    font-size: 1.1rem !important;
  }

  .card-text {
    font-size: 0.9rem !important;
  }

  /* Sections spacing */
  section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  /* Footer */
  footer {
    text-align: center;
  }

}


@media (max-width: 576px) {
  #about-hero {
    margin-top: 2rem !important;
    font-size: smaller !important;
  }

  /* Remove vertical center line */
  .timeline-line {
    display: none !important;
  }

  /* Force single column layout */
  .timeline-item {
    flex-direction: column !important;
    text-align: center;
  }

  /* Remove reverse row effect */
  .timeline-item.flex-row-reverse {
    flex-direction: column !important;
  }

  /* Year circle centered */
  .timeline-item .col-3,
  .timeline-item .col-md-2 {
    width: 100% !important;
    margin-bottom: 15px;
  }

  .year-circle {
    width: 80px !important;
    height: 80px !important;
    font-size: 1.3rem !important;
  }

  /* Content full width */
  .timeline-item .col-9,
  .timeline-item .col-md-10 {
    width: 100% !important;
  }

  /* Remove side margins */
  .timeline-item .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Card spacing */
  .timeline-item {
    margin-bottom: 2rem !important;
  }

  /* Reduce padding inside card */
  .timeline-item .card {
    padding: 1.2rem !important;
  }

  /* Title font size adjust */
  .timeline-item h4 {
    font-size: 1.2rem !important;
  }

  /* Description text */
  .timeline-item p {
    font-size: 0.95rem !important;
  }

  .card {
    width: 100% !important;
    margin-bottom: 1.2rem;
    border-radius: 12px;
  }

  /* Remove equal height issues */
  .card.h-100 {
    height: auto !important;
  }

  /* Card image fix */
  .card img,
  .card-img-top {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  /* Card body spacing */
  .card-body {
    padding: 1rem;
    text-align: center;
  }

  /* Card title size */
  .card-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem;
  }

  /* Card text readable */
  .card-text {
    font-size: 0.9rem !important;
    line-height: 1.6;
  }

  /* Buttons inside card full width */
  .card .btn {
    width: 100%;
    margin-top: 10px;
  }
}


@media (max-width: 576px) {

  /* Stop horizontal scroll completely */
  html,
  body {
    overflow-x: hidden !important;
  }

  #projects-hero {
    margin-top: 2.5rem !important;
    font-size: smaller !important;
  }

  /* Container full width but controlled padding */
  .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Remove Bootstrap negative row overflow */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Force columns stack clean */
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Typography scaling */
  h1 {
    font-size: 1.7rem !important;
    line-height: 1.3;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.3rem !important;
  }

  h4 {
    font-size: 1.1rem !important;
  }

  p,
  li {
    font-size: 0.95rem !important;
    line-height: 1.6;
  }

  /* Cards */
  .card {
    width: 100% !important;
    margin-bottom: 1.5rem;
    border-radius: 14px;
  }

  .card-body {
    padding: 1.25rem !important;
  }

  .card img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Buttons thumb friendly */
  .btn,
  .btn-lg {
    width: 100%;
    padding: 12px;
  }

  /* Images safe everywhere */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Sections spacing */
  section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

}


@media (max-width: 576px) {

  /* Stop horizontal scroll */
  html, body {
    overflow-x: hidden !important;
  }

  /* HERO SECTION */
  #contact-hero {
    padding-top: 110px !important; /* fixed navbar offset */
    padding-bottom: 60px !important;
  }

  #contact-hero h1 {
    font-size: 1.8rem !important;
    line-height: 1.3;
  }

  #contact-hero p {
    font-size: 1rem !important;
    padding: 0 10px;
  }

  /* Main Section spacing */
  #contact-main {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Cards */
  #contact-main .card {
    border-radius: 16px;
    margin-bottom: 1.5rem;
  }

  #contact-main .card-body {
    padding: 1.5rem !important;
  }

  /* Headings */
  #contact-main h3 {
    font-size: 1.4rem !important;
  }

  #contact-main h5 {
    font-size: 1.1rem !important;
  }

  /* Form Fields */
  #contact-main .form-control,
  #contact-main .form-select {
    font-size: 0.95rem;
    padding: 12px;
  }

  #contact-main label {
    font-size: 0.9rem;
  }

  /* Make button full width */
  #contact-main .btn-lg {
    width: 100% !important;
    padding: 12px;
    font-size: 1rem;
  }

  /* Contact Details list stack */
  .contact-details {
    font-size: 0.95rem;
  }

  .contact-details li {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
  }

  .contact-details i {
    margin-bottom: 8px;
  }

  /* Map spacing */
  #contact-main .ratio {
    margin-top: 1rem;
  }

  /* Small text */
  #contact-main small {
    font-size: 0.8rem !important;
  }

}

/* ===================================== */
/* FOOTER MOBILE FIX (≤576px only) */
/* ===================================== */

@media (max-width: 576px) {

  footer {
    text-align: center;
    padding-top: 3rem !important;
  }

  footer img {
    height: 60px !important;
  }

  footer h4 {
    font-size: 1.3rem;
  }

  footer h5,
  footer h6 {
    margin-top: 0.5rem;
  }

  footer .row>div {
    margin-bottom: 0.5rem;
  }

  footer ul {
    padding-left: 0;
  }

  footer ul li {
    margin-bottom: 0.5rem;
  }

  footer p,
  footer small {
    font-size: 14px;
  }

  /* Newsletter form full width */
  footer form {
    flex-direction: column !important;
  }

  footer form input {
    width: 100% !important;
  }

  footer form button {
    width: 100% !important;
  }

  /* Bottom bar spacing */
  footer .border-top {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
  }

}