@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

/* Brand Colors and Global Vars */

/* hero carousel-slide---------- */
.hero-carousel {
  position: relative;
  width: 100%;
}

.hero-carousel-viewport {
  position: relative;
  overflow: hidden;
}
.hero-side-layout{
  display: flex;
  justify-content: space-between;
}

/* SLIDES */
.hero-slide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: row-reverse;
  /* text on side */
  justify-content: flex-end;
  align-items: center;
}

/* Image scaling */

.hero-slide * {
  pointer-events: auto;
}

/* IMAGE */
.slider_hero_carosel {
  width: 100%;
  height: 100%;
}

.prev-slide,
.next-slide {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(229, 229, 229, 0.8);
  /* default semi-transparent */
  border-radius: 8px;
  transition:
    background-color 0.3s ease,
    opacity 0.3s ease;
  display: none;
}

.hero-carousel:hover .prev-slide,
.hero-carousel:hover .next-slide {
  display: block;
}

/* DOTS OUTSIDE IMAGE */
.dots-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(52, 51, 51, 0.5);
  cursor: pointer;
  transition: 0.3s;
}

.dot.active {
  background: #1167a6;
  transform: scale(1.2);
}

/* Hover directly on button */
.prev-slide:hover,
.next-slide:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* General styling for all hero buttons */
[class^="hero-button-"] {
  padding: 0.5rem 1.5rem;
  /* px-6 py-2 */
  border: 1px solid #1167a6;
  background-color: #1167a6;
  color: #ffffff;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 600;
  border-radius: 0.25rem;
  z-index: 50;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 1rem);
  white-space: nowrap;
}

/* Hover effect for all buttons */
[class^="hero-button-"]:hover {
  background-color: #ffffff;
  color: #1167a6;
  text-decoration: none;
}

/* Individual button positions */
.hero-button-2 {
  position: absolute;
  bottom: 60px;
  bottom: 2.5rem;
  left: 82%;
  transform: translateX(-50%);
}

.hero-button-1 {
  position: absolute;
  bottom: 1.5rem;
  right: 2.2rem;
  background-color: #1167a6;
  color: white;
  border: 1px solid #1167a6;
}

.hero-button-1:hover {
  background-color: white;
  color: #1167a6;
}

/* Bottom center button for "Find Out More" (hero-button-3) */
.hero-button-3 {
  position: absolute;
  bottom: 2.5rem;
  left: 60%;
  transform: translateX(-50%);
}

.hero-button-side-caption {
  position: static;
  transform: none;
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  border: 1px solid #1167a6;
  background-color: #1167a6;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-button-side-caption:hover {
  background-color: #ffffff;
  color: #1167a6;
}

.hero-button-hidden {
  display: none !important;
}
.hero-slide {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.hero-slide.opacity-100 {
  opacity: 1;
}

.hero-slide.opacity-0 {
  opacity: 0;
}

/* Make the two dot buttons look like small slider dots (with hover preview). */
.home-main-slider-container .main-preview-btn {
  width: 12px !important;
  height: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
}

.home-main-slider-container .main-preview-btn svg {
  display: none !important;
}

.home-main-slider-container .main-preview-btn::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: transparent;
  display: block;
}

/* Active dot = filled (synced with rotator .is-blueprint-active). */
.home-main-slider-container [data-bg-rotator]:not(.is-blueprint-active) [data-main-color-btn]::before {
  background: rgba(255, 255, 255, 0.95);
}
.home-main-slider-container [data-bg-rotator].is-blueprint-active [data-main-blueprint-btn]::before {
  background: rgba(255, 255, 255, 0.95);
}

/* Play / Pause as small glyphs (no white circle). */
.home-main-slider-container [data-bg-play],
.home-main-slider-container [data-bg-pause] {
  width: auto !important;
  height: auto !important;
  padding: 0 2px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

@media (max-width: 1024px) {
  .hero-side-caption {
    right: 16px;
    width: min(50vw, 460px);
  }
}

@media (max-width: 768px) {
  .hero-slide {
    flex-direction: column;
    /* stack image and text */
    justify-content: flex-start;
    align-items: center;
    pointer-events: auto;
    text-align: center;
    height: auto;
    /* allow height to shrink naturally */
  }

  .hero-slide img {
    height: auto;
    /* max-height: 250px; */
    /* adjust for mobile screen */
    width: 100%;
    object-fit: cover;
    height:100%;
  }

  .hero-side-caption {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    margin-top: 16px;
    /* spacing below image */
    right: auto;
    left: auto;
    width: 90%;
    /* fit small screen */
  }

  .hero-button-side-caption {
    margin: 12px auto 0;
  }

  /* Buttons reposition */
  [class^="hero-button-"] {
    bottom: 1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .dots-container {
    margin-top: 15px;
  }

  .hero-side-caption {
    left: 12px;
    right: 12px;
    width: auto;
    top: auto !important;
    bottom: 34px;
    transform: none !important;
    text-align: center;
  }

  .hero-button-side-caption {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 1024px) {
  [class^="hero-button-"] {
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
  }

  .hero-button-1,
  .hero-button-2 {
    left: auto;
    right: 1rem;
    transform: none;
    bottom: 1.1rem;
  }

  .hero-button-3 {
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
  }
}

@media (max-width: 640px) {
  [class^="hero-button-"] {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    min-height: 30px;
    max-width: calc(100% - 0.75rem);
  }

  .hero-button-1,
  .hero-button-2 {
    right: 0.5rem;
    bottom: 0.6rem;
  }

  .hero-button-3 {
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
  }
}

/* Buttons */
.slider-font {
  font-size: 1.1rem;
  padding: 6px 30px;
}

/* Slider title/subtitle */
.carousel .slider-text-size {
  font-size: 32px;
}

/* Extra text (italic) */
.carousel .text-size-italic {
  font-size: 32px;
}

/* -------------------- slider text responsive-------------------- */
.web-editor-content .layout-footer, /* adjust class */
.footer-section {
  pointer-events: auto;
  overflow: visible; /* allow children to extend */
}

.footer-links-grid .listof-content {
  pointer-events: auto; 
}

@media (min-width: 1600px) {
  .carousel .slider-text-size {
    font-size: 32px;
  }

  .carousel .text-size-italic {
    font-size: 32px;
  }
}

@media (max-width: 1280px) {
  .carousel .slider-text-size {
    font-size: 26px;
  }

  .carousel .text-size-italic {
    font-size: 28px;
  }
}

/* -------------------- Large devices (≤ 1024px) -------------------- */
@media (max-width: 1024px) {
  .carousel .slider-text-size {
    font-size: 19px;
  }

  .carousel .text-size-italic {
    font-size: 20px;
  }
}

/* -------------------- Medium devices (≤ 768px) -------------------- */
@media (max-width: 768px) {
  
  .carousel .slider-text-size {
    font-size: 18px;
  }

  .carousel .text-size-italic {
    font-size: 18px;
  }
  .email-phone {
    display: none;
  }
  .menu-right-topbar {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

/* -------------------- Small devices (≤ 640px) -------------------- */
@media (max-width: 640px) {
  .carousel .slider-text-size {
    font-size: 12px;
  }

  .carousel .text-size-italic {
    font-size: 12px;
  }
}

/* -------------------- Extra Small / Mobile (≤ 480px) -------------------- */
@media (max-width: 480px) {
  .carousel .slider-text-size {
    font-size: 6px;
  }

  .carousel .text-size-italic {
    font-size: 6px;
  }
}