/*-----------------------------------*\
 * #style.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */





/*-----------------------------------*\
 * #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  --united-nations-blue: hsl(214, 56%, 58%);
  --bright-navy-blue: hsl(214, 57%, 51%);
  --spanish-gray: hsl(0, 0%, 60%);
  --black-coral: hsl(225, 8%, 42%);
  --oxford-blue: hsl(208, 97%, 12%);
  --yale-blue: hsl(214, 72%, 33%);
  --blue-ncs: hsl(197, 100%, 36%);
  --gunmetal: hsl(206, 34%, 20%);
  --gainsboro: hsl(0, 0%, 88%);
  --cultured: hsl(0, 0%, 98%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --onyx: hsl(0, 0%, 25%);
  --jet: hsl(0, 0%, 20%);

  /**
   * typography
   */

  --ff-poppins: "Poppins", sans-serif;
  --ff-montserrat: "Montserrat", sans-serif;

  --fs-1: calc(20px + 3.5vw);
  --fs-2: calc(18px + 1.6vw);
  --fs-3: calc(16px + 0.45vw);
  --fs-4: 15px;
  --fs-5: 14px;
  --fs-6: 13px;
  --fs-7: 12px;
  --fs-8: 11px;

  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  /**
   * transition
   */

  --transition: 0.25s ease-in-out;

  /**
   * spacing
   */

  --section-padding: 60px;

  /**
   * border-radius
   */

  --radius-15: 15px;
  --radius-25: 25px;

}





/*-----------------------------------*\
 * #RESET
\*-----------------------------------*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a { text-decoration: none; }

a,
img,
span,
input,
label,
button,
ion-icon { display: block; }

input,
button {
  background: none;
  border: none;
  font: inherit;
}

button { cursor: pointer; }

input { width: 100%; }

ion-icon { pointer-events: none; }

html {
  font-family: var(--ff-poppins);
  scroll-behavior: smooth;
}

body { background: var(--white); }





/*-----------------------------------*\
 * #REUSED STYLE
\*-----------------------------------*/

.container { padding-inline: 15px; }

.btn {
  color: var(--white);
  text-transform: uppercase;
  font-size: var(--fs-5);
  border-radius: 100px;
  padding: var(--padding, 8px 18px);
  border: var(--border-width, 2px) solid transparent;
  transition: var(--transition);
}

.btn-primary {
  background: var(--bright-navy-blue);
  border-color: var(--bright-navy-blue);
}

.btn-primary:is(:hover, :focus) {
  background: var(--yale-blue);
  border-color: var(--yale-blue);
}

.btn-secondary { border-color: var(--white); }

.btn-secondary:is(:hover, :focus) { background: hsla(0, 0%, 100%, 0.1); }

/* First section under the nav bar: keep the gap moderate */
main > article > section:first-child:not(.hero) {
  padding-top: 40px !important;
}

.region-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.region-filter .btn-filter,
.popular .region-filter .btn-filter {
  color: var(--bright-navy-blue);
  background: var(--white);
  border-color: var(--bright-navy-blue);
  margin-inline: 0;
}

.region-filter .btn-filter.active,
.region-filter .btn-filter:is(:hover, :focus) {
  color: var(--white);
  background: var(--bright-navy-blue);
}

.h1,
.h2,
.h3 {
  font-weight: var(--fw-800);
  font-family: var(--ff-montserrat);
  text-transform: uppercase;
}

.h1 {
  color: var(--white);
  font-size: var(--fs-1);
}

.h2,
.h3 { color: var(--gunmetal); }

.h2 { font-size: var(--fs-2); }

.h3 {
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
}

.section-subtitle {
  color: var(--bright-navy-blue);
  font-size: var(--fs-5);
  text-transform: uppercase;
  font-family: var(--ff-montserrat);
  margin-bottom: 8px;
}

.section-title { margin-bottom: 15px; }

.section-text {
  color: var(--black-coral);
  margin-bottom: 30px;
}

.card-text {
  color: var(--black-coral);
  font-size: var(--fs-5);
}





/*-----------------------------------*\
 * #HEADER
\*-----------------------------------*/

.header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}

.header-main {
  background: var(--bright-navy-blue);
  height: 86px;
  transition: var(--transition);
}

.header.active .header-main {
  box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.2);
}

.header-main .container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.header-main .logo img {
  max-height: 62px;
  object-fit: contain;
}

.header-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
}

.nav-open-btn {
  font-size: 32px;
  color: var(--white);
}

.header .navbar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 100%;
  max-width: 300px;
  height: 100%;
  background: var(--white);
  visibility: hidden;
  pointer-events: none;
  transition: 0.15s ease-in;
  z-index: 3;
}

.navbar.active {
  right: 0;
  visibility: visible;
  pointer-events: all;
  transition: 0.25s ease-out;
}

.navbar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 15px;
}

.navbar-top .logo img { width: 150px; }

.nav-close-btn {
  font-size: 20px;
  color: var(--bright-navy-blue);
}

.nav-close-btn ion-icon { --ionicon-stroke-width: 80px; }

.navbar-list { border-top: 1px solid hsla(0, 0%, 0%, 0.1); }

.navbar-list li { border-bottom: 1px solid hsla(0, 0%, 0%, 0.1); }

.navbar-link {
  padding: 15px 20px;
  color: var(--jet);
  font-weight: var(--fw-500);
  font-size: var(--fs-4);
  transition: var(--transition);
  text-transform: capitalize;
}

.navbar-link:is(:hover, :focus) { color: var(--bright-navy-blue); }

.navbar-link.active {
  color: var(--bright-navy-blue);
  font-weight: var(--fw-600);
}

.overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: var(--transition);
}

.overlay.active {
  opacity: 0.7;
  pointer-events: all;
}





/*-----------------------------------*\
 * #HERO
\*-----------------------------------*/

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--gunmetal);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  min-height: calc(100vh - 86px);
  min-height: calc(100svh - 86px);
  text-align: center;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: hsla(0, 0%, 0%, 0.45);
  background-blend-mode: overlay;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

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

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.15);
  border: 1px solid hsla(0, 0%, 100%, 0.4);
  color: var(--white);
  font-size: 24px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.25s ease;
}

.hero-nav:is(:hover, :focus) { background: hsla(0, 0%, 100%, 0.35); }

.hero-nav-prev { left: 20px; }

.hero-nav-next { right: 20px; }

.hero-dots {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.4);
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.hero-dot:is(:hover, :focus) { background: hsla(0, 0%, 100%, 0.7); }

.hero-dot.active {
  background: var(--white);
  transform: scale(1.25);
}

@media (max-width: 579px) {
  .hero-nav { display: none; }
}

.hero-title { margin-bottom: 20px; }

.hero-text {
  color: var(--white);
  font-size: var(--fs-5);
  margin-bottom: 40px;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}


/*-----------------------------------*\
 * #PAGE HERO
\*-----------------------------------*/

.page-hero {
  background-image: url("../images/hero-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: hsla(0, 0%, 0%, 0.7);
  background-blend-mode: overlay;
  display: grid;
  place-items: center;
  min-height: 300px;
  text-align: center;
  padding-top: 125px;
  padding-bottom: 40px;
}

.page-hero-title {
  color: var(--white);
  margin-bottom: 10px;
  margin-top: 40px;
}

.page-hero-text {
  color: var(--white);
  font-size: var(--fs-5);
  max-width: 600px;
  margin-inline: auto;
}


/*-----------------------------------*\
 * #TOUR SEARCH
\*-----------------------------------*/

.tour-search {
  background: var(--bright-navy-blue);
  padding-block: var(--section-padding);
}

.tour-search-form .input-label {
  color: var(--white);
  font-size: var(--fs-4);
  margin-left: 20px;
  margin-bottom: 10px;
}

.tour-search-form .input-field {
  background: var(--white);
  padding: 10px 15px;
  font-size: var(--fs-5);
  border-radius: 50px;
}

.tour-search-form .input-field::placeholder { color: var(--spanish-gray); }

.tour-search-form .input-field::-webkit-datetime-edit {
  color: var(--spanish-gray);
  text-transform: uppercase;
}

.tour-search-form .input-wrapper { margin-bottom: 15px; }

.tour-search .btn {
  width: 100%;
  --border-width: 1px;
  font-weight: var(--fw-600);
  margin-top: 35px;
}





/*-----------------------------------*\
 * #POPULAR
\*-----------------------------------*/

.popular { padding-block: var(--section-padding); }

.popular-list,
.popular-list > li:not(:last-child) { margin-bottom: 30px; }

.popular-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-25);
  height: 430px;
}

.popular-card .card-img { height: 100%; }

.popular-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popular-card .card-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-25);
  padding: 20px;
}


.popular-card .card-rating {
  background: var(--bright-navy-blue);
  color: var(--white);
  position: absolute;
  top: 0;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 1px;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 14px;
}

.popular-card .card-subtitle {
  color: var(--blue-ncs);
  font-size: var(--fs-6);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.popular-card .card-title { margin-bottom: 5px; }

.popular-card :is(.card-subtitle, .card-title) > a { color: inherit; }

.popular .btn { margin-inline: auto; }





/*-----------------------------------*\
 * #PACKAGE
\*-----------------------------------*/

.package { padding-block: var(--section-padding); }

.package-list { margin-bottom: 40px; }

.package-list > li:not(:last-child) { margin-bottom: 30px; }

.package-card {
  background: var(--cultured);
  overflow: hidden;
  border-radius: 15px;
}

.package-card .card-banner { height: 250px; }

.package-card .card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.package-card .card-content { padding: 30px 20px; }

.package-card .card-title { margin-bottom: 15px; }

.package-card .card-text {
  line-height: 1.6;
  margin-bottom: 20px;
}

.card-meta-list {
  background: var(--white);
  max-width: max-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 8px;
  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.15);
  border-radius: 50px;
}

.card-meta-item { position: relative; }

.card-meta-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 4px;
  right: -1px;
  bottom: 4px;
  width: 1px;
  background: hsla(0, 0%, 0%, 0.3);
}

.meta-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding-inline: 9px;
  color: var(--black-coral);
  font-size: var(--fs-8);
}

.meta-box > ion-icon {
  color: var(--bright-navy-blue);
  font-size: 13px;
}

.package-card .card-price {
  background: var(--united-nations-blue);
  color: var(--white);
  padding: 25px 20px;
  text-align: center;
}

.package-card .card-price .wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px 15px;
  margin-bottom: 10px;
}

.package-card .card-price .reviews { font-size: var(--fs-5); }

.package-card .card-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  font-size: 14px;
}

.package-card .card-rating ion-icon:last-child { color: hsl(0, 0%, 80%); }

.package-card .price {
  font-size: var(--fs-2);
  font-family: var(--ff-montserrat);
  font-weight: var(--fw-800);
  margin-bottom: 20px;
}

.package-card .price span {
  font-size: var(--fs-7);
  font-weight: initial;
}

.package .btn { margin-inline: auto; }





/*-----------------------------------*\
 * #GALLERY
\*-----------------------------------*/

.gallery { padding-block: var(--section-padding); }

.gallery-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gallery-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-15);
  overflow: hidden;
}

.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


* #SPONSORS
\*-----------------------------------*/

.sponsors-carousel-wrapper {
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

.sponsors-carousel {
  display: flex;
  gap: 60px;
  animation: scroll 30s linear infinite;
  width: max-content;
}

.sponsors-carousel:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.sponsor-item {
  flex-shrink: 0;
  width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.sponsor-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.15);
}

.sponsor-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.sponsor-item:hover img {
  filter: grayscale(0%);
}

.sponsor-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}


/*-----------------------------------*\
 * #CTA
\*-----------------------------------*/

.cta {
  background: var(--bright-navy-blue);
  padding-block: var(--section-padding);
}

.cta :is(.section-subtitle, .section-title, .section-text) { color: var(--white); }

.cta .section-text { font-size: var(--fs-5); }





/*-----------------------------------*\
 * #FOOTER
\*-----------------------------------*/

.footer {
  background: var(--gunmetal);
  color: var(--gainsboro);
}

.footer-top { padding-block: 60px; }

.footer-top .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.footer-logo { margin-bottom: 25px; }

.footer-logo img { width: 140px; }

.social-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.social-link {
  color: var(--white);
  padding: 10px;
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  border-radius: 50%;
  font-size: 18px;
  transition: var(--transition);
}

.social-link:is(:hover, :focus) {
  background: var(--bright-navy-blue);
  border-color: var(--bright-navy-blue);
}

.footer-text {
  font-size: var(--fs-5);
  line-height: 1.7;
  max-width: 340px;
}

.contact-title {
  position: relative;
  font-family: var(--ff-montserrat);
  font-weight: var(--fw-500);
  margin-bottom: 30px;
}

.contact-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--bright-navy-blue);
}

.contact-text {
  font-size: var(--fs-5);
  margin-bottom: 15px;
  max-width: 200px;
}

.contact-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.contact-item ion-icon { --ionicon-stroke-width: 40px; }

.contact-link,
address {
  font-style: normal;
  color: var(--gainsboro);
  font-size: var(--fs-5);
}

.contact-link:is(:hover, :focus) { color: var(--white); }

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.footer-link {
  color: var(--white);
  font-size: var(--fs-5);
  font-family: var(--ff-poppins);
  transition: var(--transition);
  display: inline-block;
}

.footer-link:is(:hover, :focus) {
  color: var(--bright-navy-blue);
  transform: translateX(5px);
}

.footer-bottom {
  background: hsl(205, 36%, 15%);
  padding-block: 18px;
  text-align: center;
}

.copyright {
  color: var(--gainsboro);
  font-size: var(--fs-6);
}

.copyright a {
  color: inherit;
  display: inline-block;
}

.copyright a:is(:hover, :focus) { color: var(--white); }





/*-----------------------------------*\
 * #GO TO TOP
\*-----------------------------------*/

.go-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 35px;
  height: 35px;
  background: var(--bright-navy-blue);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 18px;
  border-radius: 6px;
  box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.5);
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: var(--transition);
}

.go-top.active {
  opacity: 0.8;
  transform: translateY(0);
  visibility: visible;
}

.go-top:is(:hover, :focus) { opacity: 1; }





/*-----------------------------------*\
 * #GALLERY
\*-----------------------------------*/

.gallery-section {
  padding: var(--section-padding) 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-top: 40px;
}

.gallery-item {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-item:nth-child(5) { animation-delay: 0.5s; }
.gallery-item:nth-child(6) { animation-delay: 0.6s; }
.gallery-item:nth-child(n+7) { animation-delay: 0.7s; }

.gallery-card {
  position: relative;
  border-radius: var(--radius-15);
  overflow: hidden;
  box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.1);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  aspect-ratio: 1 / 1;
}

.gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px hsla(0, 0%, 0%, 0.2);
}

.gallery-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-card:hover .gallery-img {
  transform: scale(1.1);
}

.no-images-text {
  color: var(--spanish-gray);
  font-size: var(--fs-4);
  text-align: center;
  padding: 40px 0;
}

.gallery-pagination {
  margin-top: 50px;
}

.gallery-pagination .pagination {
  display: flex;
  gap: 10px;
  list-style: none;
}

.gallery-pagination .page-item {
  display: inline-block;
}

.gallery-pagination .page-link {
  display: inline-block;
  padding: 12px 20px;
  background: var(--cultured);
  color: var(--oxford-blue);
  font-family: var(--ff-poppins);
  font-size: var(--fs-5);
  font-weight: var(--fw-600);
  border-radius: var(--radius-15);
  transition: var(--transition);
  border: 2px solid transparent;
}

.gallery-pagination .page-link:hover {
  background: var(--bright-navy-blue);
  color: var(--white);
  transform: translateY(-2px);
}

.gallery-pagination .page-item.active .page-link {
  background: var(--bright-navy-blue);
  color: var(--white);
  border-color: var(--bright-navy-blue);
}




/*-----------------------------------*\
 * #PAGINATION
\*-----------------------------------*/

.pagination {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.page-item {
  display: inline-block;
}


/*-----------------------------------*\
 * #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for larger than 580px screen
 */

@media (min-width: 580px) {

  /**
   * REUSED STYLE
   */

  .container {
    max-width: 580px;
    margin-inline: auto;
  }

  .btn {
    --fs-5: 16px;
    --padding: 12px 30px;
  }

  section:not(.cta) :is(.section-subtitle, .section-title, .section-text) {
    text-align: center;
  }

  .section-text { margin-bottom: 40px; }

  .card-text { --fs-5: 15px; }

  /**
   * GALLERY
   */

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }



  /**
   * HEADER
   */

  .nav-open-btn { font-size: 36px; }



  /**
   * HERO
   */



  .hero-text { --fs-5: 15px; }

  .btn-group { gap: 20px; }



  /**
   * TOUR SEARCH
   */

  .tour-search-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
    gap: 15px;
  }

  .tour-search-form .input-wrapper { margin-bottom: 0; }

  .tour-search-form .input-field { padding: 16px 20px; }

  .tour-search .btn {
    grid-column: span 2;
    margin-top: 20px;
  }



  /**
   * POPULAR
   */

  .popular-card .card-content { right: auto; }



  /**
   * FOOTER
   */

  .footer-top .container { grid-template-columns: 1fr auto auto; gap: 60px; }

  .copyright { margin-bottom: 0; }

}





/**
 * responsive for larger than 768px screen
 */

@media (min-width: 768px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-5: 15px;

  }



  /**
   * REUSED STYLE
   */

  .container { max-width: 800px; }

  .section-text {
    max-width: 60ch;
    margin-inline: auto;
  }



  /**
   * HEADER
   */

  .header-main { height: 96px; }

  .header-main .logo img { max-height: 72px; }

  .hero {
    min-height: calc(100vh - 96px);
    min-height: calc(100svh - 96px);
  }



  /**
   * POPULAR
   */

  .popular-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
  }

  .popular-list > li:not(:last-child) { margin-bottom: 0; }

  .popular-card .card-content { right: 20px; }



  /**
   * PACKAGE
   */

  .package-list { margin-bottom: 50px; }

  .package-list > li:not(:last-child) { margin-bottom: 40px; }

  .package-card {
    display: grid;
    grid-template-columns: 1.3fr 1.5fr 1fr;
  }

  .package-card .card-banner { height: 100%; }

  .package-card .card-content { padding: 40px; }

  .package-card .card-price {
    display: grid;
    place-content: center;
  }

  .package-card .card-price .wrapper { margin-bottom: 15px; }



  /**
   * GALLERY
   */

  .gallery { padding-bottom: calc(var(--section-padding * 2)); }

  .gallery-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .gallery-image { border-radius: var(--radius-25); }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
  }


/**
   * SPONSORS
   */

  .sponsor-item {
    width: 200px;
    height: 110px;
  }

  /**
   * CTA
   */

  .cta .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cta-content { width: calc(100% - 225px); }

  .cta .section-text { margin-inline: 0; }



  /**
   * FOOTER
   */





  /**
   * GALLERY
   */

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

}





/**
 * responsive for larger than 992px screen
 */

@media (min-width: 992px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 1050px; }



  /**
   * HEADER
   */

  .nav-open-btn,
  .navbar-top { display: none; }

  .header .navbar {
    all: unset;
    margin-left: auto;
  }

  .navbar-list {
    border-top: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .navbar-list li { border-bottom: none; }

  .navbar-link {
    color: var(--white);
    --fs-4: 15px;
    font-weight: unset;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 18px 10px;
  }

  @media (max-width: 1250px) {
    .navbar-link {
      --fs-4: 14px;
      padding: 18px 7px;
    }

    .header-main .logo img { max-height: 58px; }

    .lang-btn { padding: 7px 10px; }
  }

  .navbar-link:is(:hover, :focus) { color: hsla(0, 0%, 100%, 0.7); }

  .navbar-link {
    position: relative;
  }

  .navbar-link.active {
    color: var(--white);
    font-weight: var(--fw-600);
  }

  .navbar-link.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
  }

  .overlay { display: none; }



  /**
   * HERO
   */

  .hero .container { max-width: 740px; }



  /**
   * TOUR SEARCH
   */

  .tour-search-form { grid-template-columns: repeat(5, 1fr); }

  .tour-search .btn {
    --padding: 15px;
    grid-column: unset;
    margin-top: 0;
  }



  /**
   * POPULAR
   */

  .popular-list { grid-template-columns: repeat(3, 1fr); }



  /**
   * PACKAGE
   */

  .meta-box { --fs-8: 13px; }

  .meta-box > ion-icon { font-size: 15px; }



  /**
   * CTA
   */

  .cta .section-title { max-width: 25ch; }



  /**
   * FOOTER
   */

  .footer-top .container { gap: 90px; }



  /**
   * GALLERY
   */

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

}



/**
 * LANGUAGE SWITCHER
 */

.language-switcher {
  position: relative;
  display: inline-block;
}

.lang-btn {
  background: transparent;
  border: 2px solid hsla(0, 0%, 100%, 0.6);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.lang-btn:hover {
  background: hsla(0, 0%, 100%, 0.15);
  border-color: var(--white);
  color: var(--white);
}

.lang-btn ion-icon {
  font-size: 20px;
}

.lang-code {
  font-size: 12px;
  letter-spacing: 0.5px;
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  min-width: 200px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  border: 1px solid rgba(0, 136, 204, 0.1);
}

.lang-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-form {
  margin: 0;
}

.lang-form:not(:last-child) .lang-dropdown-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.lang-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: white;
  color: #333333;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  font-family: inherit;
}

.lang-dropdown-item:hover {
  background: var(--alice-blue);
  padding-left: 20px;
  transform: translateX(4px);
}

.lang-dropdown-item.active {
  background: linear-gradient(135deg, #e3f2fd 0%, #d4ebf7 100%);
  color: #0088cc;
  font-weight: 600;
  border-left: 3px solid #0088cc;
  padding-left: 13px;
}

.lang-dropdown-item.active:hover {
  background: linear-gradient(135deg, #d4e9f7 0%, #cfe9fc 100%);
  padding-left: 17px;
}

.lang-flag {
  font-size: 20px;
  line-height: 1;
}

.lang-name {
  flex: 1;
  text-align: left;
  color: inherit;
  font-weight: inherit;
}

.lang-check {
  color: #0088cc;
  font-size: 18px;
}

/* Animation for dropdown items */
.lang-dropdown-menu.show .lang-dropdown-item {
  animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive styles */
@media (max-width: 768px) {
  .lang-btn {
    padding: 6px 12px;
  }

  .lang-code {
    display: none;
  }

  .lang-dropdown-menu {
    right: -10px;
  }
}



/**
 * responsive for larger than 1200px screen
 */

@media (min-width: 1200px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * spacing
     */

    --section-padding: 100px;

  }



  /**
   * REUSED STYLE
   */

  .container { max-width: 1180px; }



  /**
   * GALLERY
   */

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
  }

}



/*-----------------------------------*\
 * #PAGINATION
\*-----------------------------------*/

.pagination-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 60px;
  padding: 20px 0;
}

.pagination-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination-item {
  display: inline-block;
}

.pagination-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  height: 45px;
  padding: 0 12px;
  background-color: var(--white);
  border: 2px solid var(--gainsboro);
  border-radius: 8px;
  color: var(--oxford-blue);
  font-family: var(--ff-poppins);
  font-size: var(--fs-5);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pagination-link:hover:not(.pagination-link-disabled):not(.pagination-link-active) {
  background-color: var(--bright-navy-blue);
  border-color: var(--bright-navy-blue);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px hsla(214, 57%, 51%, 0.3);
}

.pagination-link-active {
  background-color: var(--bright-navy-blue);
  border-color: var(--bright-navy-blue);
  color: var(--white);
  cursor: default;
  box-shadow: 0 4px 12px hsla(214, 57%, 51%, 0.3);
}

.pagination-link-disabled {
  background-color: var(--cultured);
  border-color: var(--gainsboro);
  color: var(--spanish-gray);
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-link-arrow {
  min-width: 45px;
  padding: 0;
}

.pagination-link-arrow ion-icon {
  font-size: 18px;
  --ionicon-stroke-width: 60px;
}

.pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  height: 45px;
  color: var(--spanish-gray);
  font-family: var(--ff-poppins);
  font-size: var(--fs-4);
  font-weight: 600;
}

.pagination-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: var(--cultured);
  border-radius: 8px;
}

.pagination-info p {
  margin: 0;
  color: var(--oxford-blue);
  font-family: var(--ff-poppins);
  font-size: var(--fs-5);
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .pagination-wrapper {
    margin-top: 40px;
    gap: 15px;
  }

  .pagination-list {
    gap: 6px;
  }

  .pagination-link,
  .pagination-link-arrow,
  .pagination-ellipsis {
    min-width: 38px;
    height: 38px;
    font-size: var(--fs-6);
  }

  .pagination-link-arrow ion-icon {
    font-size: 16px;
  }

  .pagination-info {
    padding: 10px 20px;
    font-size: var(--fs-6);
  }
}

@media (max-width: 480px) {
  .pagination-link,
  .pagination-link-arrow,
  .pagination-ellipsis {
    min-width: 35px;
    height: 35px;
    font-size: 12px;
  }

  .pagination-link-arrow ion-icon {
    font-size: 14px;
  }

  .pagination-info {
    padding: 8px 16px;
    font-size: 12px;
  }
}


/*-----------------------------------*\
 * #PACKAGE DETAIL SIDEBAR
\*-----------------------------------*/

.package-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 50px;
  align-items: start;
}

.sidebar-dest-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-dest-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--black-coral);
  font-size: var(--fs-5);
  padding: 10px 12px;
  border-radius: 8px;
  transition: var(--transition);
}

.sidebar-dest-list a:is(:hover, :focus) {
  background: var(--cultured);
  color: var(--bright-navy-blue);
}

.sidebar-dest-list ion-icon {
  color: var(--bright-navy-blue);
  font-size: 18px;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .package-detail-layout { grid-template-columns: 2.5fr 1fr; }

  .package-sidebar {
    position: sticky;
    top: 116px;
  }
}

/*-----------------------------------*\
 * #LIGHTBOX
\*-----------------------------------*/

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: hsla(0, 0%, 0%, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[hidden] { display: none; }

.lightbox-content {
  max-width: min(1100px, 92vw);
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-media {
  max-width: min(1100px, 92vw);
  max-height: 85vh;
  border-radius: 10px;
}

.lightbox-frame {
  width: min(1100px, 92vw);
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 10px;
}

.lightbox-btn {
  position: absolute;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.12);
  border: 1px solid hsla(0, 0%, 100%, 0.35);
  color: var(--white);
  font-size: 26px;
  display: grid;
  place-items: center;
  transition: var(--transition);
}

.lightbox-btn:is(:hover, :focus) { background: hsla(0, 0%, 100%, 0.3); }

.lightbox-close { top: 20px; right: 20px; }

.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }

.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }

.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: hsla(0, 0%, 0%, 0.55);
  border: 2px solid hsla(0, 0%, 100%, 0.8);
  color: var(--white);
  font-size: 26px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.gallery-image {
  position: relative;
}

.gallery-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-card video.gallery-img { object-fit: cover; }

/*-----------------------------------*\
 * #SUMMIT PAGE
\*-----------------------------------*/

.summit-info-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.summit-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.summit-info-list ion-icon {
  color: var(--bright-navy-blue);
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.summit-info-list span {
  display: block;
  font-size: var(--fs-8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--spanish-gray);
  margin-bottom: 2px;
}

.summit-info-list p {
  color: var(--gunmetal);
  font-size: var(--fs-5);
  font-weight: var(--fw-500);
}

.summit-files {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summit-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-transform: none;
  --padding: 12px 18px;
}

.summit-file-btn ion-icon { font-size: 18px; }

.form-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--gainsboro);
  border-radius: 8px;
  background: var(--white);
  color: var(--gunmetal);
  font-family: inherit;
  font-size: var(--fs-5);
}

.form-input:focus {
  outline: none;
  border-color: var(--bright-navy-blue);
}

textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

/*-----------------------------------*\
 * #SUMMIT MICROSITE
\*-----------------------------------*/

.summit-brand { color: var(--white); }

.summit-brand-logo {
  max-height: 60px;
  max-width: 220px;
  object-fit: contain;
}

.summit-brand-name {
  font-family: var(--ff-montserrat);
  font-weight: var(--fw-700);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summit-brand-sub {
  font-size: var(--fs-8);
  opacity: 0.75;
  letter-spacing: 1px;
}

.summit-nav-links {
  display: none;
  align-items: center;
}

@media (min-width: 768px) {
  .summit-nav-links { display: flex; }
}

.summit-register-btn {
  background: var(--white);
  color: var(--bright-navy-blue);
  border-color: var(--white);
  font-weight: var(--fw-600);
  white-space: nowrap;
}

.summit-register-btn:is(:hover, :focus) {
  background: hsla(0, 0%, 100%, 0.85);
}

.summit-countdown {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: -10px 0 35px;
}

.summit-countdown div {
  min-width: 74px;
  background: var(--cultured);
  border: 1px solid var(--gainsboro);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}

.summit-countdown b {
  display: block;
  font-family: var(--ff-montserrat);
  font-size: 24px;
  color: var(--bright-navy-blue);
}

.summit-countdown span {
  font-size: var(--fs-8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--spanish-gray);
}

.summit-closed-note {
  color: #b3261e;
  font-size: var(--fs-5);
  text-align: center;
}

.summit-archive-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 760px;
  margin-inline: auto;
}

.summit-archive-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 22px 26px;
}

.summit-archive-card h3 { font-size: var(--fs-4); margin-bottom: 4px; }

.summit-archive-card p { color: var(--spanish-gray); font-size: var(--fs-5); }

.summit-archive-card ion-icon { color: var(--bright-navy-blue); font-size: 22px; flex-shrink: 0; }

.summit-footer .copyright a { display: inline; color: inherit; }

.summit-footer .copyright a:is(:hover, :focus) { color: var(--white); }

/*-----------------------------------*\
 * #SUMMIT HERO & SECTIONS
\*-----------------------------------*/

.summit-strip {
  background: linear-gradient(90deg, var(--yale-blue), var(--bright-navy-blue));
  color: var(--white);
  padding: 10px 0;
}

.summit-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.summit-strip-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
}

.summit-strip-label ion-icon { font-size: 17px; }

.summit-strip-timer {
  display: flex;
  gap: 8px;
}

.summit-strip-timer div {
  min-width: 52px;
  background: hsla(0, 0%, 100%, 0.16);
  border-radius: 8px;
  padding: 4px 7px;
  text-align: center;
}

.summit-strip-timer b {
  display: block;
  font-family: var(--ff-montserrat);
  font-size: 15px;
  line-height: 1.2;
  color: var(--white);
}

.summit-strip-timer span {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.summit-hero {
  position: relative;
  background: linear-gradient(135deg, var(--yale-blue), var(--united-nations-blue));
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  text-align: center;
  color: var(--white);
}

.summit-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(hsla(211, 60%, 15%, 0.55), hsla(211, 60%, 15%, 0.75));
}

.summit-hero .container { position: relative; }

.summit-hero--compact { padding: 60px 0; }

.summit-hero-sub {
  font-size: var(--fs-6);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
  opacity: 0.9;
}

.summit-hero-title {
  font-family: var(--ff-montserrat);
  font-size: var(--fs-2);
  font-weight: var(--fw-800);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.summit-hero-dates {
  font-size: var(--fs-4);
  opacity: 0.9;
}

.summit-hero-btn {
  margin: 25px auto 0;
}

.summit-deadline-band {
  background: hsl(214, 57%, 94%);
  padding: 50px 0;
}

.summit-deadline-band .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.summit-deadline-text h2 {
  color: var(--gunmetal);
  font-family: var(--ff-montserrat);
  margin-bottom: 10px;
}

.summit-deadline-text p { color: var(--black-coral); }

.summit-deadline-card {
  background: var(--white);
  border-radius: var(--radius-15);
  box-shadow: 0 10px 30px hsla(214, 57%, 30%, 0.12);
  padding: 25px 30px;
}

.summit-deadline-label {
  font-size: var(--fs-8);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--bright-navy-blue);
  font-weight: var(--fw-600);
  margin-bottom: 15px;
  text-align: center;
}

.summit-deadline-card .summit-countdown { margin: 0 0 12px; }

.summit-deadline-note {
  font-size: var(--fs-7);
  color: var(--spanish-gray);
  text-align: center;
  max-width: 320px;
  margin-inline: auto;
}

@media (min-width: 992px) {
  .summit-deadline-band .container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.summit-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .summit-cards-grid { grid-template-columns: 1fr 1fr; }
}

.summit-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: var(--white);
  border: 1px solid var(--gainsboro);
  border-radius: var(--radius-15);
  padding: 24px 26px;
  box-shadow: 0 6px 18px hsla(0, 0%, 0%, 0.05);
}

.summit-card ion-icon {
  color: var(--bright-navy-blue);
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.summit-card h3 {
  color: var(--gunmetal);
  font-size: var(--fs-4);
  font-weight: var(--fw-600);
  margin-bottom: 6px;
}

.summit-card p {
  color: var(--black-coral);
  font-size: var(--fs-5);
  line-height: 1.6;
}

.summit-sticky-bar {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  background: hsla(211, 60%, 15%, 0.92);
  backdrop-filter: blur(6px);
  border-radius: 50px;
  padding: 8px 10px 8px 16px;
  box-shadow: 0 10px 30px hsla(0, 0%, 0%, 0.3);
  max-width: calc(100% - 30px);
}

.summit-sticky-btn {
  border-radius: 50px;
  --padding: 10px 22px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .summit-sticky-bar .summit-strip-timer div { min-width: 44px; padding: 3px 5px; }
}

.summit-hero-btn {
  display: inline-block;
  width: auto;
  margin: 25px 0 0;
}

@media (max-width: 560px) {
  .summit-brand-logo { max-height: 44px; max-width: 150px; }

  .summit-header .lang-btn { padding: 6px 10px; }

  .summit-register-btn {
    font-size: 11px;
    --padding: 8px 12px;
  }

  .summit-sticky-bar { gap: 8px; padding: 6px 8px 6px 12px; }

  .summit-sticky-bar .summit-strip-timer div:last-child { display: none; }

  .summit-sticky-btn {
    font-size: 12px;
    --padding: 9px 14px;
  }
}

/*-----------------------------------*\
 * #SUMMIT FEES
\*-----------------------------------*/

.summit-fees-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  justify-content: center;
}

@media (min-width: 850px) {
  .summit-fees-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 480px));
  }
}

.summit-fee-card {
  background: var(--white);
  border: 1px solid var(--gainsboro);
  border-radius: var(--radius-15);
  padding: 30px;
  box-shadow: 0 6px 18px hsla(0, 0%, 0%, 0.05);
}

.summit-fee-card h3 {
  color: var(--gunmetal);
  font-size: var(--fs-4);
  font-weight: var(--fw-600);
  margin-bottom: 6px;
}

.summit-fee-amount {
  font-family: var(--ff-montserrat);
  font-size: 26px;
  font-weight: var(--fw-800);
  color: var(--bright-navy-blue);
  margin-bottom: 10px;
}

.summit-fee-desc {
  color: var(--black-coral);
  font-size: var(--fs-5);
  line-height: 1.6;
  margin-bottom: 18px;
}

.summit-fee-stages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summit-fee-stages li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--cultured);
  border: 1px solid var(--gainsboro);
  border-radius: 10px;
  padding: 12px 16px;
}

.summit-fee-stages li.current {
  border: 2px solid var(--bright-navy-blue);
  background: hsl(214, 57%, 96%);
}

.summit-fee-stages li.past { opacity: 0.55; }

.summit-stage-label {
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bright-navy-blue);
  white-space: nowrap;
}

.summit-stage-dates {
  color: var(--gunmetal);
  font-size: var(--fs-6);
  flex-grow: 1;
}

.summit-stage-amount {
  color: var(--gunmetal);
  font-size: var(--fs-5);
  white-space: nowrap;
}

.summit-stage-badge {
  font-size: 10px;
  font-weight: var(--fw-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--bright-navy-blue);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.summit-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summit-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

@media (max-width: 560px) {
  .summit-brand { gap: 8px; }
  .summit-brand-logo { max-width: 120px; }
  .summit-brand-name { font-size: 13px; }
  .summit-brand-sub { display: none; }
}

@media (max-width: 560px) {
  .summit-brand-logo { max-height: 40px; max-width: 84px; }
  .summit-brand-name { font-size: 12px; }
  .summit-header .container { gap: 8px; }
  .summit-header .header-btn-group { gap: 8px; flex-shrink: 0; }
  .summit-register-btn { font-size: 10px; --padding: 7px 10px; }
}

.summit-file-btn { white-space: nowrap; }

.summit-file-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.package-detail-layout > * { min-width: 0; }

.summit-file-btn { min-width: 0; }

.summit-file-btn { width: 100%; }

/*-----------------------------------*\
 * #SUMMIT ATTACHMENTS
\*-----------------------------------*/

.summit-attachments { margin-bottom: 10px; }

.summit-attachments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .summit-attachments-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

.summit-attachment-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--white);
  border: 1px solid var(--gainsboro);
  border-radius: var(--radius-15);
  padding: 18px 22px;
  box-shadow: 0 6px 18px hsla(0, 0%, 0%, 0.05);
  transition: var(--transition);
}

.summit-attachment-card:is(:hover, :focus) {
  border-color: var(--bright-navy-blue);
  box-shadow: 0 10px 25px hsla(214, 57%, 40%, 0.18);
  transform: translateY(-2px);
}

.summit-attachment-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: hsl(214, 57%, 95%);
  border-radius: 12px;
}

.summit-attachment-icon ion-icon {
  font-size: 22px;
  color: var(--bright-navy-blue);
}

.summit-attachment-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex-grow: 1;
}

.summit-attachment-info b {
  color: var(--gunmetal);
  font-size: var(--fs-5);
  font-weight: var(--fw-600);
  line-height: 1.4;
}

.summit-attachment-info > span {
  color: var(--spanish-gray);
  font-size: var(--fs-7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summit-attachment-dl {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--bright-navy-blue);
}

.summit-main-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.summit-attachments .card-title { margin-bottom: 18px; }

.summit-attachments-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/*-----------------------------------*\
 * #SUMMIT REGISTRATION FORM
\*-----------------------------------*/

.summit-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-bottom: 20px;
  align-items: start;
}

@media (min-width: 640px) {
  .summit-form-grid { grid-template-columns: 1fr 1fr; }

  .summit-form-grid .summit-form-full { grid-column: 1 / -1; }
}

.summit-form-label {
  display: block;
  font-size: var(--fs-7);
  color: var(--spanish-gray);
  margin-bottom: 4px;
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23808080' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  color: var(--gunmetal);
}

select.form-input:invalid,
select.form-input option[value=""] { color: var(--spanish-gray); }

.form-error {
  color: #b3261e;
  font-size: var(--fs-7);
  margin-top: 5px;
}

.summit-success .card-content {
  text-align: center;
  padding: 45px 35px;
}

.summit-success-icon ion-icon {
  font-size: 64px;
  color: #1e7a36;
  margin-bottom: 12px;
}

.summit-success h2 {
  color: var(--gunmetal);
  margin-bottom: 10px;
}

.summit-success p {
  color: var(--black-coral);
  font-size: var(--fs-5);
  margin-bottom: 25px;
}

.summit-success .btn { margin-inline: auto; }

.summit-success-icon ion-icon { display: block; margin: 0 auto 12px; }

.summit-apply-fees {
  max-width: 760px;
  margin: 0 auto 25px;
  background: hsl(214, 57%, 96%);
  border: 1px solid hsl(214, 57%, 88%);
  border-radius: var(--radius-15);
  padding: 20px 26px;
}

.summit-apply-fees-title {
  font-size: var(--fs-8);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bright-navy-blue);
  margin-bottom: 12px;
}

.summit-apply-fees li:not(:last-child) {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid hsl(214, 57%, 88%);
}

.summit-apply-fee-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.summit-apply-fee-name {
  color: var(--gunmetal);
  font-size: var(--fs-5);
  font-weight: var(--fw-500);
}

.summit-apply-fee-amount {
  font-family: var(--ff-montserrat);
  color: var(--bright-navy-blue);
  font-size: var(--fs-4);
  font-weight: var(--fw-700);
  white-space: nowrap;
}

.summit-apply-fee-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: var(--fs-7);
  color: var(--spanish-gray);
}

.summit-form-section {
  font-family: var(--ff-montserrat);
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bright-navy-blue);
  border-bottom: 1px solid var(--gainsboro);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.summit-form-grid + .summit-form-section { margin-top: 10px; }

.summit-form-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 25px;
}

.summit-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.summit-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--bright-navy-blue);
  cursor: pointer;
}

.summit-check span {
  color: var(--black-coral);
  font-size: var(--fs-5);
  line-height: 1.5;
}

/*-----------------------------------*\
 * #SUMMIT PAYMENT INSTRUCTIONS
\*-----------------------------------*/

.summit-pay-details {
  color: var(--black-coral);
  font-size: var(--fs-5);
  line-height: 1.7;
  margin-bottom: 20px;
}

.summit-pay-details ul,
.summit-pay-details ol { padding-left: 20px; margin: 8px 0; }

.summit-pay-details b,
.summit-pay-details strong { color: var(--gunmetal); }

.summit-pay-purpose-label {
  font-size: var(--fs-6);
  color: var(--gunmetal);
  font-weight: var(--fw-500);
  margin-bottom: 8px;
}

.summit-pay-purpose {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--cultured);
  border: 1px dashed var(--bright-navy-blue);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
}

.summit-pay-purpose code {
  font-family: var(--ff-montserrat);
  font-size: var(--fs-5);
  font-weight: var(--fw-600);
  color: var(--gunmetal);
  flex-grow: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.summit-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bright-navy-blue);
  color: var(--white);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
  cursor: pointer;
  flex-shrink: 0;
}

.summit-copy-btn ion-icon { font-size: 15px; }

.summit-pay-note {
  font-size: var(--fs-6);
  color: var(--spanish-gray);
}

.summit-receipt-input { padding: 11px 14px; }

.summit-receipt-input::file-selector-button {
  background: var(--bright-navy-blue);
  color: var(--white);
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  margin-right: 12px;
  font-family: inherit;
  font-size: var(--fs-7);
  cursor: pointer;
}

/*-----------------------------------*\
 * #SUMMIT VERIFY
\*-----------------------------------*/

.summit-verify-warn ion-icon { color: #b26a00; }

.summit-verify-bad ion-icon { color: #b3261e; }

.summit-verify-list {
  margin-top: 10px;
  text-align: left;
}

.summit-verify-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gainsboro);
  font-size: var(--fs-5);
}

.summit-verify-list li:last-child { border-bottom: none; }

.summit-verify-list span { color: var(--spanish-gray); }

.summit-verify-list b { color: var(--gunmetal); text-align: right; }

.summit-verify-status.accepted { color: #1e7a36; }

.summit-verify-status.rejected { color: #b3261e; }

/* Summit microsite header on portrait tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .summit-header .container { gap: 12px; }

  .summit-brand { gap: 9px; }

  .summit-brand-logo { max-height: 44px; max-width: 110px; }

  .summit-brand-name { font-size: 13px; line-height: 1.25; }

  .summit-brand-sub { font-size: 9px; }

  .summit-nav-links .navbar-link {
    font-size: 13px;
    padding: 15px 8px;
    white-space: nowrap;
  }

  .summit-header .header-btn-group { gap: 10px; flex-shrink: 0; }

  .summit-register-btn {
    font-size: 11px;
    --padding: 8px 12px;
    white-space: nowrap;
  }
}

/* Big countdown card on phones */
@media (max-width: 480px) {
  .summit-deadline-card {
    width: 100%;
    padding: 20px 14px;
  }

  .summit-countdown { gap: 8px; }

  .summit-countdown div {
    min-width: 0;
    flex: 1;
    padding: 8px 4px;
  }

  .summit-countdown b { font-size: 20px; }
}

/* Very narrow phones: the logo alone carries the summit branding */
@media (max-width: 430px) {
  .summit-brand-logo + .summit-brand-text { display: none; }

  .summit-brand-logo { max-height: 48px; max-width: 150px; }
}

/* Back-to-main-site button: icon on phones, text link in the tablet/desktop nav */
.summit-home-btn {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.summit-home-btn ion-icon { font-size: 18px; }

@media (max-width: 767px) {
  .summit-home-btn { display: flex; }
}

.package .region-filter .btn { margin-inline: 0; }

/*-----------------------------------*\
 * #SUMMIT MOBILE DRAWER
\*-----------------------------------*/

.summit-drawer-title {
  font-family: var(--ff-montserrat);
  font-weight: var(--fw-700);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gunmetal);
  padding-right: 10px;
}

.summit-drawer-btn {
  display: block;
  margin: 20px 15px;
  text-align: center;
  text-transform: none;
  font-weight: var(--fw-600);
}

.summit-menu-btn { font-size: 28px; }

@media (min-width: 768px) {
  .summit-menu-btn,
  .header .navbar.summit-mobile-nav { display: none; }
}

@media (max-width: 767px) {
  .summit-header .summit-register-btn { display: none; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .summit-nav-links .navbar-link { color: var(--white); }

  .summit-nav-links .navbar-link:is(:hover, :focus) {
    color: hsla(0, 0%, 100%, 0.75);
  }
}

.summit-drawer-langs {
  display: flex;
  gap: 8px;
  padding: 5px 15px 20px;
}

.summit-drawer-langs form { flex: 1; }

.summit-drawer-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 0;
  background: var(--white);
  border: 1px solid var(--gainsboro);
  border-radius: 8px;
  color: var(--black-coral);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-500);
  cursor: pointer;
  transition: var(--transition);
}

.summit-drawer-lang.active {
  border-color: var(--bright-navy-blue);
  background: hsl(214, 57%, 96%);
  color: var(--bright-navy-blue);
  font-weight: var(--fw-600);
}

@media (max-width: 767px) {
  .summit-header .language-switcher { display: none; }
}

/*-----------------------------------*\
 * #WHITE MAIN HEADER
\*-----------------------------------*/

.header-main {
  background: var(--white);
  box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.08);
}

.header-main .navbar-link { color: var(--gunmetal); }

.header-main .navbar-link:is(:hover, :focus) {
  color: var(--bright-navy-blue);
}

.header-main .navbar-link.active {
  color: var(--bright-navy-blue);
}

@media (min-width: 992px) {
  .header-main .navbar-link.active::after {
    background: var(--bright-navy-blue);
  }
}

.header-main .lang-btn {
  border-color: hsla(214, 57%, 51%, 0.35);
  color: var(--gunmetal);
}

.header-main .lang-btn:hover {
  background: hsl(214, 57%, 96%);
  border-color: var(--bright-navy-blue);
  color: var(--gunmetal);
}

.header-main .nav-open-btn { color: var(--gunmetal); }

/* Summit header on white */
.summit-brand { color: var(--gunmetal); }

.summit-brand-sub { opacity: 1; color: var(--spanish-gray); }

.header-main .summit-nav-links .navbar-link { color: var(--gunmetal); }

.header-main .summit-nav-links .navbar-link:is(:hover, :focus) {
  color: var(--bright-navy-blue);
}

.summit-register-btn {
  background: var(--bright-navy-blue);
  color: var(--white);
  border-color: var(--bright-navy-blue);
}

.summit-register-btn:is(:hover, :focus) {
  background: var(--yale-blue);
  border-color: var(--yale-blue);
  color: var(--white);
}

/* Two-tier summit fee amounts */
.summit-fee-tiers {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.summit-fee-tier-label {
  display: block;
  font-size: var(--fs-8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--spanish-gray);
  margin-bottom: 2px;
}

.summit-fee-tiers .summit-fee-amount { margin-bottom: 0; }

.summit-apply-fee-amounts {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: end;
  column-gap: 8px;
  row-gap: 2px;
  text-align: right;
}

.summit-apply-fee-amounts small {
  color: var(--spanish-gray);
  font-size: var(--fs-8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}