:root {
  --vizyon-blue: #083f9f;
  --vizyon-blue-dark: #05245e;
  --vizyon-green: #15a538;
  --vizyon-soft: #f4f8fb;
  --vizyon-ink: #162033;
}

body { color: var(--vizyon-ink); }
.vizyon-topbar { background: var(--vizyon-blue); }
.vizyon-header { background: #fff; box-shadow: 0 8px 30px rgba(5, 36, 94, .08); }
.header_logo img { width: 230px; max-height: 84px; object-fit: contain; }
.navbar-light .navbar-nav .nav-link { color: var(--vizyon-blue-dark); }
.navbar-light .navbar-nav .nav-item:hover .nav-link,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .active > .nav-link,
.quote-link { background: var(--vizyon-green); color: #fff !important; }
.submenu > li:hover > a, .readmore a, .service-price span { background: var(--vizyon-green); color: #fff; }
.readmore a:hover { background: var(--vizyon-blue); }
.title p { color: var(--vizyon-green); font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.title:after { background: var(--vizyon-blue); }
.vizyon-hero { position: relative; background: var(--vizyon-blue-dark); }
.vizyon-hero .carousel,
.vizyon-hero .carousel-inner,
.vizyon-hero .carousel-item,
.hero-slide { min-height: 620px; }
.hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center right;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 18, 48, .88) 0%, rgba(5, 36, 94, .72) 34%, rgba(5, 36, 94, .24) 66%, rgba(5, 36, 94, .05) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .06));
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: 92px 0;
  color: #fff;
}
.hero-content span {
  display: block;
  color: #8ee49c;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero-content h1 {
  color: #fff;
  font-size: 56px;
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 22px;
  text-shadow: 0 5px 22px rgba(0,0,0,.24);
}
.hero-content p {
  color: #eef6ff;
  font-size: 19px;
  line-height: 1.65;
  max-width: 610px;
  margin-bottom: 30px;
  white-space: normal;
  overflow-wrap: break-word;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  min-height: 54px;
  border-radius: 6px;
  padding: 14px 24px;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--vizyon-green);
}
.hero-actions a:first-child { background: #fff; color: var(--vizyon-blue-dark); }
.vizyon-hero .carousel-indicators { bottom: 24px; }
.vizyon-hero .carousel-indicators li { width: 34px; height: 4px; border: 0; background: rgba(255,255,255,.55); }
.vizyon-hero .carousel-indicators .active { background: var(--vizyon-green); }
.vizyon-hero .carousel-control-prev,
.vizyon-hero .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  opacity: 1;
  transform: translateY(-50%);
  margin: 0 22px;
}
.vizyon-hero .carousel-control-prev:hover,
.vizyon-hero .carousel-control-next:hover { background: var(--vizyon-green); }
.intro-band, .corporate-page, .contact-page, .gallery-page, .service-detail { padding: 80px 0; }
.vizyon-services { background: var(--vizyon-soft); }
.services_box { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 34px rgba(5,36,94,.08); height: calc(100% - 30px); margin-bottom: 30px; }
.services_box h3 { min-height: 64px; padding: 0 22px; }
.services_box p { padding: 0 22px 26px; }
.servicesImg { aspect-ratio: 4 / 3; overflow: hidden; }
.servicesImg img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.services_box:hover .servicesImg img { transform: scale(1.05); }
.service-price { position: relative; margin-top: -22px; padding-left: 22px; }
.service-price span { display: inline-block; border-radius: 4px; padding: 10px 16px; font-weight: 700; }
.cta-band { background: var(--vizyon-blue-dark); color: #fff; padding: 42px 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band span { color: #8ee49c; font-weight: 800; text-transform: uppercase; }
.cta-band h2 { color: #fff; margin: 8px 0 0; font-size: 28px; }
.cta-button, .primary-action, .secondary-action { display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; padding: 14px 22px; font-weight: 800; text-decoration: none; }
.cta-button, .primary-action { background: var(--vizyon-green); color: #fff; }
.secondary-action { background: var(--vizyon-blue); color: #fff; }
.vizyon-inner { background-image: linear-gradient(90deg, rgba(5,36,94,.78), rgba(21,165,56,.45)), url('../images/innerHeading.jpg'); }
.vizyon-inner h1 { color: #fff; }
.detail-main-image { width: 100%; max-height: 470px; object-fit: cover; border-radius: 8px; margin-bottom: 28px; }
.lead { font-size: 18px; line-height: 30px; color: var(--vizyon-blue-dark); font-weight: 600; }
.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 36px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 20px 0 38px; }
.media-grid img, .media-grid video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #edf2f7; }
.faq-item { border: 1px solid #e5edf5; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.faq-item button { width: 100%; border: 0; background: #fff; padding: 16px 18px; text-align: left; font-weight: 800; color: var(--vizyon-blue-dark); display: flex; justify-content: space-between; }
.faq-item p { padding: 0 18px 18px; margin: 0; }
.side-box { border: 1px solid #e5edf5; border-radius: 8px; padding: 24px; margin-bottom: 22px; background: #fff; }
.side-box h4 { color: var(--vizyon-blue-dark); font-weight: 800; }
.side-box li { border-bottom: 1px solid #edf2f7; }
.side-box li a { display: block; padding: 11px 0; color: var(--vizyon-ink); text-decoration: none; font-weight: 700; }
.side-box.accent { background: var(--vizyon-blue-dark); color: #fff; border: 0; }
.side-box.accent h4, .side-box.accent p, .side-box.accent a { color: #fff; }
.contact-page iframe { width: 100%; height: 420px; border: 0; border-radius: 8px; }
.vizyon-footer { background: #071b43; color: #dbe8f7; padding: 56px 0 20px; }
.vizyon-footer p, .vizyon-footer a { color: #dbe8f7; }
.vizyon-footer h4 { color: #fff; font-weight: 800; margin-bottom: 18px; }
.footer-logo { max-width: 240px; background: #fff; border-radius: 6px; padding: 8px; margin-bottom: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 18px; font-size: 14px; }
.floating-whatsapp { position: fixed; right: 18px; bottom: 18px; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 30px; z-index: 9999; box-shadow: 0 12px 30px rgba(0,0,0,.22); }

@media (max-width: 991px) {
  .cta-band .container { display: block; }
  .cta-button { margin-top: 20px; }
  .header_logo img { width: 190px; }
  .services_box h3 { min-height: auto; }
  .vizyon-header .navbar-collapse {
    width: 82%;
    background: rgba(5, 36, 94, .96);
    padding: 70px 22px 26px;
  }
  .vizyon-header .navbar-light .navbar-nav .nav-link {
    color: #fff !important;
    font-size: 16px;
    padding: 15px 24px;
  }
  .vizyon-header .navbar-light .navbar-nav .active > .nav-link,
  .vizyon-header .navbar-light .navbar-nav .nav-link:hover,
  .vizyon-header .navbar-light .navbar-nav .nav-item:hover .nav-link {
    background: var(--vizyon-green);
    color: #fff !important;
  }
  .vizyon-header .navbar-nav > li > ul > li > a {
    color: var(--vizyon-blue-dark) !important;
    background: #fff;
    font-weight: 800;
  }
  .vizyon-header .navbar-nav > li > ul > li > a:hover {
    color: #fff !important;
    background: var(--vizyon-green);
  }
  .vizyon-header .navbar-nav li a + i,
  .vizyon-header .navbar-nav > li > a + i {
    color: var(--vizyon-blue-dark);
    background: #fff;
  }
  .vizyon-header .topbar_phone a,
  .vizyon-header .topbar_phone i { color: #fff; }
  .vizyon-header .close-toggler {
    color: #fff;
    position: absolute;
    top: 8px;
    right: 20px;
  }
  .vizyon-hero .carousel,
  .vizyon-hero .carousel-inner,
  .vizyon-hero .carousel-item,
  .hero-slide { min-height: 560px; }
  .hero-slide { background-position: center; }
  .hero-overlay { background: linear-gradient(90deg, rgba(2,18,48,.9), rgba(5,36,94,.64)); }
  .hero-content { max-width: 100%; padding: 74px 0 92px; }
  .hero-content h1 { font-size: 38px; line-height: 1.14; }
  .hero-content p { font-size: 16px; line-height: 1.55; max-width: min(330px, calc(100vw - 48px)); }
  .vizyon-hero .carousel-control-prev,
  .vizyon-hero .carousel-control-next {
    width: 38px;
    height: 38px;
    margin: 0 8px;
    top: auto;
    bottom: 22px;
    transform: none;
  }
  .vizyon-hero .carousel-control-prev { left: 10px; }
  .vizyon-hero .carousel-control-next { right: 10px; }
  .vizyon-hero .carousel-indicators { bottom: 28px; }
}

@media (max-width: 575px) {
  .vizyon-hero .carousel,
  .vizyon-hero .carousel-inner,
  .vizyon-hero .carousel-item,
  .hero-slide { min-height: 520px; }
  .hero-content h1 { font-size: 31px; }
  .hero-content span { font-size: 13px; }
  .hero-actions a { min-width: 132px; min-height: 50px; padding: 12px 18px; }
}