/* ==========================================================
   VIJAY ENTERPRISES
   HOMEPAGE HERO CSS

   DESIGN:
   - Full-width hero
   - No cards
   - No outer rounded corners
   - Editorial typography
   - Dark image overlay
   - Gold brand accents
   - SEO-focused content
   - Responsive mobile layout
========================================================== */


/* ==========================================================
   01. HERO ROOT
========================================================== */

.ve-hero {
  --hero-navy: #112b48;
  --hero-blue: #203f83;
  --hero-gold: #e5bc83;
  --hero-white: #ffffff;

  position: relative;

  width: 100%;

  padding: 0;

  margin: 0;

  background: var(--hero-navy);

  scroll-margin-top: 80px;

  overflow: hidden;
}

.ve-hero *,
.ve-hero *::before,
.ve-hero *::after {
  box-sizing: border-box;
}


/* ==========================================================
   02. FULL WIDTH CONTAINER
========================================================== */

.ve-hero .ve-hero-container {
  width: 100%;
  max-width: none;

  padding: 0;
  margin: 0;
}

.ve-hero-carousel {
  position: relative;

  width: 100%;
  margin: 0;
  padding: 0;
}


/* ==========================================================
   03. HERO VIEWPORT
========================================================== */

.ve-hero-viewport {
  position: relative;

  width: 100%;
  min-height: 660px;

  margin: 0;

  overflow: hidden;

  border-radius: 0;

  background: var(--hero-navy);

  isolation: isolate;
}


/* ==========================================================
   04. SINGLE SLIDE
========================================================== */

.ve-hero-slide,
.ve-hero-slide.is-active {
  position: relative;

  display: block;

  width: 100%;
  min-height: 660px;

  margin: 0;

  opacity: 1;
  visibility: visible;

  transform: none;

  background: var(--hero-navy);
}

.ve-hero-slide.is-hidden,
.ve-hero-slide.is-prev,
.ve-hero-slide.is-next {
  opacity: 1;
  visibility: visible;

  transform: none;
}


/* ==========================================================
   05. FULL-BLEED BACKGROUND IMAGE
========================================================== */

.ve-hero-image {
  position: absolute;

  inset: 0;
  z-index: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 52%;

  transform: none !important;

  user-select: none;
  -webkit-user-drag: none;
}


/* ==========================================================
   06. PREMIUM DARK OVERLAY
========================================================== */

.ve-hero-shade {
  position: absolute;

  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(7, 20, 35, 0.93) 0%,
      rgba(7, 20, 35, 0.84) 29%,
      rgba(7, 20, 35, 0.56) 57%,
      rgba(7, 20, 35, 0.16) 100%
    );

  pointer-events: none;
}


/* ==========================================================
   07. CONTENT SHELL
========================================================== */

.ve-hero-slide-content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  width: 100%;
  min-height: 660px;

  padding:
    100px max(6%, calc((100vw - 1280px) / 2))
    31px;

  color: #ffffff;

  opacity: 1;
  visibility: visible;
}

.ve-hero-inner {
  width: 100%;
  max-width: 820px;
}


/* ==========================================================
   08. TOP EYEBROW
========================================================== */

.ve-hero-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 15px;

  margin-bottom: 27px;

  color: var(--hero-gold);

  font-family: "Inter", sans-serif;

  font-size: 11px;
  font-weight: 750;

  line-height: 1.6;
  letter-spacing: 2px;

  text-transform: uppercase;
}

.ve-hero-eyebrow-line {
  display: block;

  width: 37px;
  height: 2px;

  flex-shrink: 0;

  background: var(--hero-gold);
}


/* ==========================================================
   09. PRIMARY SEO HEADING
========================================================== */

.ve-hero-heading {
  max-width: 800px;

  margin: 0;

  color: var(--hero-white);

  font-family:
    "Plus Jakarta Sans", sans-serif;

  font-size: clamp(46px, 4.5vw, 70px);
  font-weight: 800;

  line-height: 1.12;

  letter-spacing: -2.7px;

  text-wrap: balance;

  overflow-wrap: normal;
}

.ve-hero-heading span {
  display: block;

  color: var(--hero-gold);
}


/* ==========================================================
   10. DECORATIVE GOLD DIVIDER
========================================================== */

.ve-hero-divider {
  width: 52px;
  height: 3px;

  margin: 29px 0 23px;

  background: var(--hero-gold);
}


/* ==========================================================
   11. HERO DESCRIPTION
========================================================== */

.ve-hero-description {
  max-width: 640px;

  margin: 0;

  color: rgba(255, 255, 255, 0.9);

  font-family: "Inter", sans-serif;

  font-size: 16px;
  font-weight: 400;

  line-height: 1.9;

  text-wrap: pretty;
}


/* ==========================================================
   12. CTA CONTAINER
========================================================== */

.ve-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 15px;

  margin-top: 35px;
}


/* ==========================================================
   13. SHARED BUTTONS
========================================================== */

.ve-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  min-height: 52px;

  padding: 14px 22px;

  border: 1px solid transparent;
  border-radius: 5px;

  font-family: "Inter", sans-serif;

  font-size: 13.5px;
  font-weight: 750;

  line-height: 1.5;

  text-decoration: none;
  text-align: center;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.ve-hero-btn svg {
  width: 18px;
  height: 18px;

  flex-shrink: 0;

  stroke-width: 1.8;
}


/* ==========================================================
   14. PRIMARY CTA
========================================================== */

.ve-hero-btn-primary {
  color: var(--hero-navy);
  background: #ffffff;

  border-color: #ffffff;
}

.ve-hero-btn-primary:hover {
  color: var(--hero-navy);
  background: #ebeff4;

  border-color: #ebeff4;

  transform: translateY(-2px);
}


/* ==========================================================
   15. SECONDARY CTA
========================================================== */

.ve-hero-btn-outline {
  color: #ffffff;
  background: transparent;

  border-color: rgba(255, 255, 255, 0.7);
}

.ve-hero-btn-outline:hover {
  color: var(--hero-navy);
  background: #ffffff;

  border-color: #ffffff;

  transform: translateY(-2px);
}


/* ==========================================================
   16. BOTTOM INFORMATION LINE
========================================================== */

.ve-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  width: 100%;

  padding-top: 24px;

  border-top:
    1px solid rgba(255, 255, 255, 0.25);
}

.ve-hero-bottom-left {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  color: rgba(255, 255, 255, 0.86);

  font-family: "Inter", sans-serif;

  font-size: 10px;
  font-weight: 650;

  line-height: 1.5;
  letter-spacing: 1.2px;
}

.ve-hero-bottom-dot {
  display: inline-block;

  width: 6px;
  height: 6px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--hero-gold);
}


/* ==========================================================
   17. SCROLL LINK
========================================================== */

.ve-hero-scroll-link {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: #ffffff;

  font-family: "Inter", sans-serif;

  font-size: 10px;
  font-weight: 750;

  line-height: 1.5;
  letter-spacing: 1.15px;

  text-decoration: none;

  transition: color 180ms ease;
}

.ve-hero-scroll-link:hover {
  color: var(--hero-gold);
}

.ve-hero-scroll-link svg {
  width: 17px;
  height: 17px;

  stroke-width: 1.8;
}


/* ==========================================================
   18. REMOVE OLD CAROUSEL UI
========================================================== */

.ve-hero-pagination,
.ve-hero-prev,
.ve-hero-next,
.ve-hero-controls {
  display: none !important;
}


/* ==========================================================
   19. ACCESSIBILITY
========================================================== */

.ve-hero a:focus-visible {
  outline: 3px solid var(--hero-gold);
  outline-offset: 4px;
}


/* ==========================================================
   20. LARGE DESKTOP
========================================================== */

@media (min-width: 1600px) {

  .ve-hero-viewport,
  .ve-hero-slide,
  .ve-hero-slide-content {
    min-height: 730px;
  }

  .ve-hero-slide-content {
    padding-top: 120px;
  }

  .ve-hero-heading {
    font-size: 74px;
  }

}


/* ==========================================================
   21. LAPTOP
========================================================== */

@media (max-width: 1199.98px) {

  .ve-hero-slide-content {
    padding-left: 6%;
    padding-right: 6%;
  }

  .ve-hero-heading {
    max-width: 750px;

    font-size: clamp(43px, 5vw, 61px);
  }

  .ve-hero-description {
    max-width: 590px;
  }

}


/* ==========================================================
   22. TABLET
========================================================== */

@media (max-width: 991.98px) {

  .ve-hero-viewport,
  .ve-hero-slide,
  .ve-hero-slide-content {
    min-height: 610px;
  }

  .ve-hero-slide-content {
    padding: 77px 6% 28px;
  }

  .ve-hero-heading {
    max-width: 710px;

    font-size: clamp(39px, 5.8vw, 54px);

    letter-spacing: -1.8px;
  }

  .ve-hero-description {
    max-width: 590px;

    font-size: 15px;
  }

  .ve-hero-shade {
    background:
      linear-gradient(
        90deg,
        rgba(7, 20, 35, 0.94) 0%,
        rgba(7, 20, 35, 0.83) 48%,
        rgba(7, 20, 35, 0.44) 100%
      );
  }

}


/* ==========================================================
   23. MOBILE
========================================================== */

@media (max-width: 767.98px) {

  .ve-hero {
    scroll-margin-top: 68px;
  }

  .ve-hero-viewport,
  .ve-hero-slide,
  .ve-hero-slide-content {
    min-height: 640px;
  }

  .ve-hero-slide-content {
    padding: 68px 24px 25px;
  }

  .ve-hero-image {
    object-position: 62% center;
  }

  .ve-hero-shade {
    background:
      linear-gradient(
        90deg,
        rgba(7, 20, 35, 0.94) 0%,
        rgba(7, 20, 35, 0.89) 60%,
        rgba(7, 20, 35, 0.64) 100%
      );
  }

  .ve-hero-eyebrow {
    gap: 10px;

    margin-bottom: 22px;

    font-size: 10px;

    letter-spacing: 1.3px;
  }

  .ve-hero-eyebrow-line {
    width: 24px;
  }

  .ve-hero-heading {
    max-width: 100%;

    font-size: clamp(33px, 7vw, 45px);

    line-height: 1.18;
    letter-spacing: -1.25px;
  }

  .ve-hero-divider {
    margin: 23px 0 19px;
  }

  .ve-hero-description {
    font-size: 14.5px;

    line-height: 1.8;
  }

  .ve-hero-actions {
    margin-top: 28px;

    gap: 11px;
  }

  .ve-hero-btn {
    min-height: 49px;

    padding: 12px 16px;

    font-size: 13px;
  }

  .ve-hero-bottom-left {
    font-size: 9px;
    letter-spacing: 0.75px;
  }

  .ve-hero-scroll-link {
    font-size: 9px;
    letter-spacing: 0.7px;
  }

}


/* ==========================================================
   24. SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

  .ve-hero-viewport,
  .ve-hero-slide,
  .ve-hero-slide-content {
    min-height: max(670px, 84svh);
  }

  .ve-hero-slide-content {
    padding: 53px 21px 23px;
  }

  .ve-hero-heading {
    font-size: clamp(31px, 8.5vw, 39px);

    letter-spacing: -1.15px;

    line-height: 1.18;
  }

  .ve-hero-description {
    font-size: 14px;
    line-height: 1.75;
  }

  .ve-hero-actions {
    flex-direction: column;
    align-items: stretch;

    width: 100%;
  }

  .ve-hero-btn {
    justify-content: space-between;

    width: 100%;
    min-height: 49px;
  }

  .ve-hero-btn-outline {
    flex-direction: row-reverse;
  }

  .ve-hero-bottom {
    gap: 10px;

    padding-top: 17px;
  }

  .ve-hero-bottom-left {
    max-width: 55%;

    font-size: 8.5px;
    letter-spacing: 0.45px;
  }

  .ve-hero-scroll-link {
    max-width: 45%;

    font-size: 8.5px;
    letter-spacing: 0.4px;
  }

}


/* ==========================================================
   25. EXTRA SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

  .ve-hero-viewport,
  .ve-hero-slide,
  .ve-hero-slide-content {
    min-height: 740px;
  }

  .ve-hero-slide-content {
    padding: 45px 17px 20px;
  }

  .ve-hero-heading {
    font-size: 30px;
    line-height: 1.2;
  }

  .ve-hero-description {
    font-size: 13.5px;
    line-height: 1.7;
  }

  .ve-hero-eyebrow {
    font-size: 9px;
    letter-spacing: 0.85px;
  }

  .ve-hero-btn {
    font-size: 12.5px;
  }

}


/* ==========================================================
   26. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .ve-hero *,
  .ve-hero *::before,
  .ve-hero *::after {
    animation: none !important;
    transition: none !important;
  }

  .ve-hero-btn:hover {
    transform: none;
  }

}


/* ==========================================================
   27. PRINT STYLES
========================================================== */

@media print {

  .ve-hero {
    background: #ffffff;
  }

  .ve-hero-viewport,
  .ve-hero-slide,
  .ve-hero-slide-content {
    min-height: auto;
  }

  .ve-hero-slide-content {
    padding: 35px 20px;

    color: #111111;
  }

  .ve-hero-image,
  .ve-hero-shade,
  .ve-hero-actions,
  .ve-hero-bottom {
    display: none !important;
  }

  .ve-hero-heading,
  .ve-hero-heading span,
  .ve-hero-description {
    color: #111111;
  }

}


/* ==========================================================
   END OF HERO CSS
========================================================== */