/* ==========================================================================
   modernize.css — additive visual layer for velmatrictpm.
   Site colors only (blue #1f80fd, orange #f6732e, navy #0e2b5c) — no theme
   or layout changes, purely animation/notice/hero polish loaded on top of
   the existing main.css.
   ========================================================================== */

/* ---------- Loading placeholders: a neutral background shows in the reserved
   image box before the file downloads, instead of a blank white gap (reduces
   perceived layout shift for gallery thumbnails, hero slides, event photos) ---------- */
.gbox img.thumbnail,
.event-cover-img,
.hero-slide-bg {
  background-color: #eef1f5;
}
.event-cover-img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Header nav row: vertically align the hamburger icon with the nav links (it had a fixed 32px top margin that no longer matches this row's height) ---------- */
#sticky-header .row > .col-xl-9.col-lg-9 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#sticky-header .main-menu.text { flex: 1 1 auto; min-width: 0; order: 1; }
#sticky-header .menu-bar { margin-top: 0; margin-left: 30px; flex-shrink: 0; order: 2; }

/* ---------- "Mission Statement" heading: the theme's default .area-title h1 (45px) is oversized for this long title ---------- */
.services-area .area-title h1 { font-size: 26px; padding-bottom: 16px; margin-bottom: 24px; }

/* ---------- "Mission Statement" text-slider boxes: reduce their padding/height ---------- */
.services-area .services-wrapper { padding: 10px; }
.services-area .services-text { margin: 12px 0; }
.services-area .services-text p { font-size: 14px; line-height: 22px; }

/* ---------- Homepage "Welcome to..." intro banner: the theme's 45px heading + wide spacing is oversized for a short intro ---------- */
.features-area .section-title h1 { font-size: 26px; margin-bottom: 14px; }
.features-area .section-title p { font-size: 14px; line-height: 22px; }
.features-area { padding-top: 30px; padding-bottom: 10px; }

/* ---------- Homepage stat-counter ("number scroll") row ---------- */
.counter-area .counter-wrapper { text-align: center; padding: 10px 0; }
.counter-area .counter-icon i { font-size: 26px; color: #f6732e; }
.counter-area .counter-text h1 { font-size: 30px; margin-top: 8px; color: #fff; }
.counter-area .counter-text .plus-icon { font-size: 20px; top: -14px; }
.counter-area .counter-text p { font-size: 13px; letter-spacing: .03em; text-transform: uppercase; opacity: .85; }

/* ---------- Homepage "about us" leader photo: cap an oversized portrait image so the section isn't taller than the hero ---------- */
.about-us-area .about-img img { max-height: 320px; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }

/* ---------- Homepage MOTTO / VISION headings + leader bio: reduce oversized theme heading and tighten spacing ---------- */
.about-us-wrapper .section-title h1 { font-size: 22px; margin-bottom: 10px; }
.about-us-wrapper .section-title p { font-size: 14px; line-height: 22px; }
.about-right-wrapper .about-info h3 { font-size: 20px; }
.about-right-wrapper .about-info p { font-size: 14px; line-height: 22px; }

/* ---------- Notice ticker (replaces the old <marquee>) ---------- */
.notice-ticker {
  display: flex;
  align-items: stretch;
  background: #0e2b5c;
  position: relative;
  z-index: 2; /* stay below the nav dropdown (.sub-menu, z-index:9) so open menus render above the ticker, not behind it */
  overflow: hidden;
}
.notice-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #f6732e;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .6rem 1.6rem .6rem 1.1rem;
  white-space: nowrap;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}
.notice-track-wrap { flex: 1; overflow: hidden; position: relative; min-width: 0; }
.notice-track { display: flex; align-items: center; width: max-content; animation: noticeScroll 30s linear infinite; }
.notice-ticker:hover .notice-track { animation-play-state: paused; }
.notice-item {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; text-decoration: none; white-space: nowrap;
  padding: .65rem 0; font-size: .85rem; font-weight: 500;
  transition: color .25s ease;
}
.notice-item i { color: #f6732e; }
.notice-item:hover { color: #ffd7bd; }
.notice-sep { color: rgba(255,255,255,.3); margin: 0 1.25rem; flex-shrink: 0; }
@keyframes noticeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .notice-track { animation: none; }
  .notice-track-wrap { overflow-x: auto; }
}
@media (max-width: 575.98px) {
  .notice-label { font-size: .7rem; padding: .5rem 1.1rem .5rem .8rem; }
  .notice-item { font-size: .78rem; }
}

/* ---------- Hero slider (Slick-powered, replaces Revolution Slider) ---------- */
.hero-slider-modern { position: relative; overflow: hidden; height: 60vh; min-height: 440px; max-height: 620px; }
.hero-slick, .hero-slick .slick-list, .hero-slick .slick-track { height: 100%; }
.hero-slide { position: relative; height: 100%; overflow: hidden; display: flex; align-items: center; }
.hero-slick .slick-track { display: flex; }
.hero-slick .slick-slide { height: auto; }
.hero-slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  transform: scale(1);
  animation: heroKenBurns 8s ease-in-out infinite alternate;
}
.hero-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,43,92,.35) 0%, rgba(14,43,92,.15) 45%, rgba(14,43,92,.55) 100%);
}
@keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }

.hero-pattern-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: .18;
}

.hero-slide-caption {
  position: relative; z-index: 3;
  color: #fff;
  max-width: 720px;
}
.hero-slide-sub {
  display: inline-block;
  background: #f6732e;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 30px;
  margin-bottom: 1rem;
}
.hero-slide-caption h1 {
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.hero-slick-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.85); color: #0e2b5c;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.hero-slick-arrow:hover { background: #f6732e; color: #fff; }
.hero-slick-arrow.prev { left: 24px; }
.hero-slick-arrow.next { right: 24px; }
.hero-slick .slick-dots { bottom: 22px; z-index: 5; }
.hero-slick .slick-dots li button:before { color: #fff; opacity: .6; font-size: 10px; }
.hero-slick .slick-dots li.slick-active button:before { opacity: 1; color: #f6732e; }

@media (max-width: 768px) {
  /* A definite height (not auto+min-height) so .hero-slick/.slick-list/.slick-track's
     height:100% still resolves — with only min-height set, percentage heights don't
     cascade, leaving slick's slide auto-sized to just the caption text and a big gap
     below it up to the enforced minimum. */
  .hero-slider-modern { height: 420px; max-height: none; }
  .hero-slide-caption { padding: 0 44px; }
  .hero-slide-caption h1 { font-size: 1.6rem; line-height: 1.25; }
  /* The prev/next buttons sit vertically centered and collide with the centered
     caption text at this width — swipe gestures (native to Slick) plus the dots
     below are enough to navigate, so hide the arrows instead of the text. */
  .hero-slick-arrow { display: none !important; } /* Slick sets an inline style="display:inline-block" on these — !important is required to override it */
}

/* ---------- Floating "bouncing" decorative icons ---------- */
.hero-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.hero-shape {
  position: absolute; color: rgba(255,255,255,.5);
  animation: iconFloat ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
}
.hero-shape.accent { color: rgba(246,115,46,.75); }
.hero-shape.s1 { top: 16%; left: 6%; font-size: 2.6rem; animation-duration: 6s; }
.hero-shape.s2 { top: 68%; left: 11%; font-size: 2rem; animation-name: iconFloatX; animation-duration: 5s; animation-delay: .4s; }
.hero-shape.s3 { top: 22%; right: 9%; font-size: 2.2rem; animation-duration: 7s; animation-delay: .8s; }
.hero-shape.s4 { top: 62%; right: 16%; font-size: 3rem; animation-name: iconFloatX; animation-duration: 5.5s; animation-delay: .2s; }
.hero-shape.s5 { top: 40%; left: 46%; font-size: 1.6rem; animation-duration: 4.5s; animation-delay: 1s; }
.hero-shape.s6 { bottom: 12%; right: 40%; font-size: 2.1rem; animation-duration: 6.5s; animation-delay: .6s; }
.hero-shape.s7 { top: 10%; left: 40%; font-size: 1.5rem; animation-name: iconFloatX; animation-duration: 6.2s; animation-delay: .3s; }
.hero-shape.s8 { bottom: 20%; left: 4%; font-size: 1.9rem; animation-duration: 5.8s; animation-delay: 1.2s; }
@keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes iconFloatX { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(10px) translateY(-12px); } }
@media (max-width: 991.98px) { .hero-shape.s5, .hero-shape.s6 { display: none; } }
@media (max-width: 575.98px) { .hero-shape { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-shape, .hero-slide-bg { animation: none; }
}

/* ---------- Reusable bouncing-icon utility (feature/specialities icon boxes) ---------- */
.icon-bounce { display: inline-block; animation: iconBounce 2.6s ease-in-out infinite; }
.icon-bounce.delay-1 { animation-delay: .2s; }
.icon-bounce.delay-2 { animation-delay: .4s; }
.icon-bounce.delay-3 { animation-delay: .6s; }
@keyframes iconBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .icon-bounce { animation: none; } }