:root {
  --brand-blue: #0F158D;
  --brand-light-blue: #EEF4FF;
  --brand-yellow: #E5B42C;
  --red-800: rgb(153, 27, 27); /* Tailwind's `text-red-800` class */
  --animation-duration: 400ms;
  --button-transition: all var(--animation-duration) ease-out;
  --ff-main: "Annapurna SIL", serif;
  --ff-secondary: "Onest", sans-serif;
  --bs-3xl: 0 0 60px -15px rgba(15, 21, 141, 0.3); /* Custom Tailwind class defined in `tailwind.config.js` */
  --font-scale: 1vw;
}

h1 {
  font-size: clamp(2.5rem, 2.5rem + var(--font-scale), 3.25rem) !important;
}

h2 {
  font-size: clamp(2.25rem, 2.25rem + var(--font-scale), 2.75rem) !important;
}

h1, h2 {
  line-height: 1.25;
}

/* For mobile nav dropdown arrows */
details[open] svg {
  transform: rotate(180deg);
}

.announcement {
  text-align: center;
  color: var(--brand-blue);
  background-color: var(--brand-light-blue);
}

/* For SwiperJS carousel navigation */
.previous-button[aria-disabled="true"], .next-button[aria-disabled="true"] {
  opacity: 60%;
}

/*
 * Native CSS doesn't have support for using `var()` in media queries yet
 * `1280px` is Tailwind's `xl` media query class
 */
@media (min-width: 1280px) {
  #hero:not(.hero-full) {
    --navigation-height: 145px;

    margin-top: var(--navigation-height);
  }
}

@media (min-width: 1280px) {
  .navigation-padding {
    --navigation-height: 145px;

    margin-top: var(--navigation-height);
  }
}

/*
 * This is only going to be used on desktop (Tailwind's `xl` media query) since
 * the desktop navigation scrolls with the viewport
 */

@media (min-width: 1280px) {
  .scroll-margin-top {
    --navigation-height: 145px;

    scroll-margin-top: calc(var(--navigation-height) + 75px);
  }
}

@media (max-width: 1279px) {
  .scroll-margin-top {
    scroll-margin-top: 25px;
  }
}

.stop-scrolling {
  overflow: hidden;
}

/* This is to add the yellow divider line for header navigation dropdown menus */

#navigation ul.columns-2 {
  position: relative;
}

#navigation ul.columns-2::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 2px;
  background-color: var(--brand-yellow);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* =-------------------------------------------------------------------------= */

.sticky-navigation {
  position: fixed;
  z-index: 100;
  background-color: white;
  box-shadow: var(--bs-3xl);
  transform: translateY(20%); /* Give some space to the navigation */
}

#hero.hero-full {
  display: flex;
  height: 100vh;
}

#hero.hero-full .container {
  position: relative;
  z-index: 10;
  display: flex;
  margin-inline: auto;
  padding-inline: 1rem; /* Tailwind `px-4` class */
  padding-bottom: 3rem; /* Tailwind `pb-12` class */
}

#hero.hero-full img {
  max-height: 100vh;
}

#hero.hero-full .text-container {
  align-self: flex-end;
}

#hero.hero-full h1 {
  color: white;
  text-transform: capitalize;
}

#hero.hero-full p {
  font-size: clamp(1.5rem, 1.5rem + var(--font-scale), 2.25rem);
  color: white;
}

.hero-image {
  box-shadow: inset 9999px 0px rgb(0, 0, 0, 0.35);
}

.hero-image-full {
  position: relative;
}

.hero-image-full::before {
  position: absolute;
  content: "";
  inset: 0;
  background-color: rgb(0, 0, 0, 0.35);
}

.freeform-errors {
  color: var(--red-800);
}

details summary::marker,
details summary::-webkit-details-marker {
  content: "";
  display: none;
}

.swiper {
  overflow: visible !important; /* Default is `overflow: hidden` from the Swiper css files */
}

.nav-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, white 50%, var(--brand-yellow) 50%);
  background-size: 250% 100%;
  background-position: left bottom;
  transition: var(--button-transition);
}

.nav-button::before {
  content: "";
  position: absolute;
  display: block;
  z-index: 1;
  top: 0;
  right: 0;
  width: 0%;
  height: 100%;
  border-radius: 9999px; /* Tailwind's `.rounded-full` class */
  background-color: var(--brand-yellow);
  transition: var(--button-transition);
}

.nav-button:hover::before {
  width: 100%;
}

/* Text */
.nav-button > span {
  position: relative;
  z-index: 2;
}

.btn-learn-more {
  position: relative;
  overflow: hidden; /* Pseudo-element transition overflows */
  transition: var(--button-transition);
  font-family: var(--ff-secondary);
}

.btn-learn-more::before {
  content: "";
  position: absolute;
  display: block;
  z-index: 1;
  top: 0;
  right: 0;
  width: 0%;
  height: 100%;
  border-radius: 9999px; /* Tailwind's `.rounded-full` class */
  background-color: var(--brand-light-blue);
  transition: var(--button-transition);
}

.btn-learn-more div {
  z-index: 2; /* The button text and arrow icon */
}

.btn-learn-more:hover {
  color: var(--brand-blue);
}

.btn-learn-more:hover::before {
  width: 100%;
}

.hero-services-more {
  background: linear-gradient(to top, var(--brand-light-blue) 50%, var(--brand-yellow) 50%);
  background-size: 100% 200%;
  background-position: right bottom;
  transition: var(--button-transition);
}

.hero-services-more:hover {
  background-position: left top;
}

.newsletter-subscribe {
  background: linear-gradient(to right, var(--brand-blue) 50%, var(--brand-yellow) 50%);
  background-size: 250% 100%;
  background-position: left bottom;
  transition: var(--button-transition);
}
.newsletter-subscribe:hover {
  background-position: right bottom;
  color: var(--brand-blue);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-field-container {
  display: flex;
  flex: 1;
}

.form-field-container div {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-label {
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.form-input {
  font-size: 0.875rem;
  border-radius: 10px;
  border: 1.5px solid var(--brand-blue);
}

.service-page-heading {
    display: flex;
}