/* ==========================================================================
   HOMEPAGE STYLESHEET
   index.html only. Loaded after common.css and content.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero carousel
   -------------------------------------------------------------------------- */
.modern-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  max-width: 100%;
  margin: 0 auto;
  /* Sits above the fixed-position AdSense sidebar blocks (z-index: 500),
     which otherwise visually overlap the carousel's edges on wide
     screens since the carousel itself isn't width-constrained. */
  z-index: 600;
}

.modern-img {
  border-radius: 10px;
  transition: transform 0.5s;
}

.modern-img:hover {
  transform: scale(1.05);
}

.modern-caption {
  background: var(--glass-bg);
  backdrop-filter: blur(5px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: clamp(8px, 1.8vw, 13px);
  font-size: clamp(0.9rem, 2.5vw, 1.3rem);
  font-weight: 600;
  text-transform: uppercase;
}

.carousel-control-next,
.carousel-control-prev,
.modern-control {
  border-radius: 50%;
  transition: transform 0.3s, background 0.3s;
  display: flex;
  background: var(--primary);
  width: 50px;
  height: 50px;
  /* Sits above the fixed-position AdSense sidebar blocks (z-index: 500)
     that otherwise sit on top of the carousel's left/right edges and
     swallow clicks meant for these buttons. */
  z-index: 900;
  /* Bootstrap's base .carousel-control-prev/-next use top:0; bottom:0 to
     stretch across the full carousel height (which is how it centers the
     icon inside). Giving this button an explicit height fights that, so
     it must also take over the vertical positioning itself: center it at
     the midpoint instead of trying to stretch to a fixed height. */
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
}

.modern-control:hover {
  transform: translateY(-50%) scale(1.1);
  background: var(--secondary);

}

/* --------------------------------------------------------------------------
   News ticker (replaces the old <marquee>)
   -------------------------------------------------------------------------- */
.news-ticker {
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
}

.news-ticker-track {
  display: inline-flex;
  gap: 4rem;
  animation: tickerScroll 22s linear infinite;
  padding-left: 100%;
}

.news-ticker:hover .news-ticker-track {
  animation-play-state: paused;
}

.news-ticker-track span {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.3px;
}

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

/* --------------------------------------------------------------------------
   Hero CTA bar over the carousel
   -------------------------------------------------------------------------- */
.hero-cta-bar {
  position: absolute;
  left: 50%;
  bottom: clamp(40px, 8vw, 80px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-cta-btn {
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-default);
  letter-spacing: 0.3px;
}

.hero-cta-btn--primary {
  background: var(--secondary);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.hero-cta-btn--primary:hover {
  background: var(--hover);
  transform: translateY(-3px);
  color: #fff;
}

.hero-cta-btn--outline {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 2px solid #fff;
  backdrop-filter: blur(4px);
}

.hero-cta-btn--outline:hover {
  background: #fff;
  color: var(--primary);
  transform: translateY(-3px);
}

@media (max-width: 576px) {
  .hero-cta-btn { padding: 10px 18px; font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   About section: feature grid
   -------------------------------------------------------------------------- */
.about-tagline { margin: 20px 0; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.feature-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  transition: var(--transition-default);
}

.feature-card:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}

.feature-icon {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 12px;
  display: block;
}

.feature-card p { font-size: 0.9rem; color: var(--dark); margin: 0; }

/* --------------------------------------------------------------------------
   About section 2 (image + copy block, below the feature grid)
   -------------------------------------------------------------------------- */
.about-section-2 {
  display: block;
}

.about-section-2 img {
  max-width: 100%;
  width: clamp(200px, 70%, 70%);
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Stat counters
   -------------------------------------------------------------------------- */
.counter-section {
  padding: clamp(40px, 6vw, 60px) clamp(15px, 2vw, 20px);
  background: linear-gradient(135deg, #eef2ff 0%, #e6f0ff 50%, #fff5f5 100%);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 48, 135, 0.15);
  margin: clamp(25px, 4vw, 40px) 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.counter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(0, 48, 135, 0.15), rgba(227, 6, 19, 0.15), rgba(205, 127, 50, 0.15));
  opacity: 0.3;
  z-index: -1;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 30px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 15px);
  position: relative;
  z-index: 2;
}

.counter-item {
  text-align: center;
  padding: clamp(25px, 4vw, 35px);
  background: linear-gradient(160deg, #fff 40%, #f9faff 100%);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 4px rgba(205, 127, 50, 0.25);
  animation: fadeSlide 0.8s ease-out;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

.counter-item:nth-child(1) { animation-delay: 0.2s; }
.counter-item:nth-child(2) { animation-delay: 0.4s; }
.counter-item:nth-child(3) { animation-delay: 0.6s; }
.counter-item:nth-child(4) { animation-delay: 0.8s; }

.counter-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 48, 135, 0.25), inset 0 1px 4px rgba(205, 127, 50, 0.3);
}

.counter-number {
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 700;
  display: inline-block;
  margin-bottom: clamp(10px, 1.5vw, 15px);
  line-height: 1;
  background: linear-gradient(90deg, #003087, #cd7f32);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 4;
  min-width: 180px;
}

.counter-label {
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  color: #1a2b5b;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (max-width: 900px) {
  .counter-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(15px, 2vw, 20px); }
}

@media (max-width: 480px) {
  .counter-grid { grid-template-columns: 1fr; gap: clamp(12px, 2vw, 15px); }
  .counter-item { padding: clamp(15px, 3vw, 20px); min-height: 120px; }
  .counter-number { font-size: clamp(2rem, 5vw, 3rem); min-width: 120px; }
}

/* --------------------------------------------------------------------------
   Section titles shared with content.css get their homepage color accent
   -------------------------------------------------------------------------- */
.modern-subheading {
  color: var(--primary);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 600;
  margin-bottom: 1rem;
  position: relative;
  cursor: pointer;
}

.modern-subheading::before {
  content: '';
  position: absolute;
  background: var(--secondary);
  left: 0;
  bottom: -5px;
  width: 30px;
  height: 2px;
  transition: width 0.3s ease-in-out;
}

.modern-subheading:hover::before { width: 60px; }

/* --------------------------------------------------------------------------
   Services grid
   -------------------------------------------------------------------------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 30px auto 0;
  padding: 0 15px;
}

.service-card {
  display: block;
  text-align: center;
  padding: 30px 20px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-default);
}

.service-card:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}

.service-icon {
  font-size: 2.2rem;
  color: var(--secondary);
  margin-bottom: 14px;
  display: block;
}

.service-card p { font-size: 0.9rem; color: var(--dark); margin: 0; }

/* --------------------------------------------------------------------------
   Latest news bar
   -------------------------------------------------------------------------- */
.latest-news {
  text-align: center;
  font-weight: 600;
  font-size: clamp(0.75rem, 2vw, 1rem);
  color: var(--white);
  padding: clamp(8px, 2vw, 10px) 0;
  /* NOTE: this used to carry a large margin-top (50-74px) to manually
     push the ticker below the fixed navbar, back before body's own
     padding-top handled that site-wide (see common.css). Left in place,
     it just added a second, redundant gap under the navbar. */
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Team preview cards
   -------------------------------------------------------------------------- */
.team-item {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.07);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.team-item p a,
.team-item a {
  text-decoration: none;
}

.team-item:hover img {
  transform: scale(1.1);
}

.team-item img {
  transition: transform 0.5s;
  width: 100%;
  height: auto;
}

.team-item div.btn-slide {
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-size: 0;
}

.team-item div.btn-slide i,
.team-item div.btn-slide span {
  position: relative;
  height: clamp(35px, 5vw, 40px);
  padding: 0 clamp(10px, 2vw, 15px);
  display: inline-flex;
  align-items: center;
  font-size: clamp(14px, 2vw, 16px);
  color: var(--white);
  background: var(--primary);
  border-radius: 0 35px 35px 0;
  transition: 0.5s;
  z-index: 2;
}

.team-item div.btn-slide span a i { padding: 0 10px; }
.team-item div.btn-slide span a:hover i { background: var(--secondary); }

.team-item div.btn-slide span {
  padding-left: 0;
  left: -100%;
  z-index: 1;
}

.team-item:hover div.btn-slide i { border-radius: 0; }
.team-item:hover div.btn-slide span { left: 0; }

/* --------------------------------------------------------------------------
   Branches grid
   -------------------------------------------------------------------------- */
.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 30px auto 0;
  padding: 0 15px;
}

.branch-card {
  padding: 24px 20px;
  border-radius: 14px;
  transition: var(--transition-default);
}

.branch-card:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}

.branch-card h6 i { color: var(--secondary); margin-right: 6px; }
.branch-card p { font-size: 0.88rem; margin-bottom: 6px; }
.branch-phone { color: var(--primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   Fade/slide entrance animation helpers (used on several homepage sections)
   -------------------------------------------------------------------------- */
.fade-slide { animation: fadeSlide 1s ease-out; }
.fade-slide--left { --slide-x: -50px; }
.fade-slide--right { --slide-x: 50px; }
.fade-slide--down { --slide-y: -30px; }
.fade-slide--up { --slide-y: 30px; }
.fade-slide--scale { --scale-start: 0.95; }