/* ======================================
   GLOBAL RESPONSIVE FIXES
====================================== */
img, video, iframe {
  max-width: 100%;
  height: auto;
}
body { overflow-x: hidden; }
p, h1, h2, h3, h4, h5 { 
  word-wrap: break-word; 
  overflow-wrap: anywhere; 
}

/* ======================================
   TABLETS (≤ 991px)
====================================== */
@media (max-width: 991px) {
  .logo-light { height: 70px; }
  .logo-dark  { height: 35px; }

  /* About */
  .about { padding: 60px 0; }
  .about .top-text h1 { font-size: 2rem; }
  .about .top-text h4 { font-size: 1rem; }
  .about-content h3.title-about { font-size: 1.3rem; }
  .about-content p { font-size: 0.95rem; }
  .full-image-overlay { padding: 20px; }
  .full-image-overlay h3 { font-size: 1.1rem; }
  .full-image-overlay ul li { font-size: 0.9rem; }

  /* Mobile navbar overrides */
  .navbar .dropdown-menu {
    position: static !important;
    float: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding-left: 0;
  }
  .navbar .dropdown-menu .dropdown-item {
    padding-left: 1.25rem;
    color: #333;
    background: #fff;
    margin: 0.15rem 0;
    border-radius: 6px;
  }
}

/* ======================================
   PHONES (≤ 767px)
====================================== */
@media (max-width: 767px) {
  .logo-light { height: 70px; }
  .logo-dark  { height: 30px; }

  /* Slider captions scale down */
  #noventra-slider h2 { font-size: 1.5rem; margin-bottom: 10px; }
  #noventra-slider p  { font-size: 0.9rem; max-width: 90%; }

  /* Services in 1 column */
  .services-container { grid-template-columns: 1fr; padding: 2rem 1rem; }

  /* Why Noventra */
  .why-noventra { padding: 40px 0; }
  .why-noventra .top-text h1 { font-size: 1.8rem; }
  .why-noventra .top-text h4 { font-size: 1rem; }

  /* Contact */
  .info-map-boxes { flex-direction: column; gap: 15px; }
  .info-map-boxes-item { flex: 1 1 100%; }

  /* Footer stacked */
  .footer .row { flex-direction: column; text-align: center; }
  .footer [class*="col-"] { width: 100%; margin-bottom: 20px; }
}

/* ======================================
   TABLET GRID LAYOUTS (≥768px)
====================================== */
@media (min-width: 768px) {
  .why-noventra .why-content { grid-template-columns: 1fr 1fr; }
}

/* ======================================
   SAFARI HEIGHT FIX
====================================== */
@supports (height: 100dvh) {
  #noventra-slider,
  #noventra-slider .carousel-item {
    height: 100dvh;
    min-height: 100dvh;
  }
}

/* ======================================
   MOBILE NAV TOGGLER
====================================== */
.mobile-toggler {
  background: transparent;
  border: none;
  width: 40px;
  height: 36px;
  position: relative;
  cursor: pointer;
  z-index: 2100;
}
.mobile-toggler-icon,
.mobile-toggler-icon::before,
.mobile-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: transform 0.35s ease, top 0.35s ease;
}
.mobile-toggler-icon { top: 50%; transform: translateY(-50%); }
.mobile-toggler-icon::before { top: -10px; }
.mobile-toggler-icon::after  { top: 10px; }
.mobile-toggler.open .mobile-toggler-icon { background: transparent; }
.mobile-toggler.open .mobile-toggler-icon::before {
  top: 0; transform: rotate(45deg);
}
.mobile-toggler.open .mobile-toggler-icon::after {
  top: 0; transform: rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .service-card-inner {
    transform: rotateY(180deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-card-inner,
  .service-card-inner.flip,
  .service-card:hover .service-card-inner {
    transition: none !important;
    transform: none !important;
  }
}
/* --- Offcanvas navbar base --- */
.offcanvas.offcanvas-top {
  height: 50vh;          /* Full height */
  background-color: #fff;  /* White background */
  padding: 1rem 0;
  overflow-y: auto;
  z-index: 1050;          /* Above main content */
}

/* --- Offcanvas header --- */
.offcanvas-header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eaeaea;
}

.offcanvas-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.btn-close {
  font-size: 1.2rem;
}

/* --- Offcanvas body nav --- */
.offcanvas-body {
  padding: 1rem;
}

.offcanvas-body .nav {
  flex-direction: column;
}

.offcanvas-body .nav-item {
  margin-bottom: 0.5rem;
}

.offcanvas-body .nav-link {
  font-size: 1.1rem;
  color: #333;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

.offcanvas-body .nav-link i {
  margin-right: 0.5rem;
}

/* --- Buttons inside offcanvas --- */
.offcanvas-body .btn {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

/* --- Mobile dropdown menu --- */
.offcanvas .dropdown-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid #28a745; /* Green accent */
  background-color: #f9f9f9;
  border-radius: 0.25rem;
}

.offcanvas .dropdown-menu.show {
  /* max-height set dynamically via JS */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* --- Dropdown items --- */
.offcanvas .dropdown-item {
  font-size: 1rem;
  color: #333;
  padding: 0.25rem 0.5rem;
}

.offcanvas .dropdown-item:hover {
  background-color: #e6f4ea; /* Light green hover */
}

/* --- Responsive tweaks --- */
@media (max-width: 991px) {
  .offcanvas .nav-link {
    font-size: 1.2rem;
  }

  .offcanvas .btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 480px) {
  .offcanvas-title {
    font-size: 1.25rem;
  }

  .offcanvas .nav-link {
    font-size: 1rem;
  }
}