@charset "UTF-8";

/* View Transitons */
@view-transition {
  navigation: auto;
}

:root {
  --main-font: "Fira Sans Extra Condensed", sans-serif;
  --secondary-font: "Tektur", sans-serif;
  --numbers-font: "Pinyon Script", cursive;
  --main-transition: 0.6s ease-in-out;
  --primary-color: #1E666B;
  --highlight-color: #B2D455;
  --secondary-color: #D6E4E5;
  --main-radius: clamp(0.5rem, 1vw, 1rem);
  --main-gradient: linear-gradient(135deg, var(--secondary-color), white);
}


/* Body Stylings */

body {
  font-family: var(--main-font);
  color: var(--primary-color);
  margin: 0;
  padding: 0;
  background: #fff;
}

/* typography utilities */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--main-font);
  color: var(--primary-color);
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.h1 {
  font-size: 2.5rem;
}

.h2 {
  font-size: 2rem;
}

.h3 {
  font-size: 1.75rem;
}

.h4 {
  font-size: 1.5rem;
}

.h5 {
  font-size: 1.25rem;
}

.h6 {
  font-size: 1rem;
}

p {
  margin: 0 0 1rem 0;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

/* offset for smooth scroll / anchored headings */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.page-section {
  scroll-margin-top: 6rem;
}

/* link styles */
a {       
  color: white;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

a:hover,
a:focus {
  color: var(--highlight-color);
  text-decoration: none;
}

/* simple text‑color helpers */
.text-primary {
  color: var(--primary-color) !important;
}

.text-highlight {
  color: var(--highlight-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-MainFont {
  font-family: var(--main-font) !important;
}

.text-altFont {
  font-family: var(--secondary-font) !important;
}

/* Page sections initial state for reveal animation */
.page-section {
  opacity: 0;
}

/* main button styling */
.btn-main {
  padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
  background-color: var(--primary-color);
  color: white;
  font-family: var(--main-font);
  font-weight: 400;
  padding: 0.75rem 1.5rem;
  border-radius: var(--main-radius);
  border: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn-main:hover {
  background-color: var(--highlight-color);
  color: black;
}

/* Menu Styling */

#mainNav {
  padding: 1rem
}

/* Allow navbar items to wrap when navbar is expanded (desktop / lg+) */
@media (min-width: 992px) {
  #mainNav .navbar-nav {
    flex-wrap: wrap;
  }
}

#mainNav .navbar-toggler {
  color: var(--highlight-color);
  padding: 0.75rem;
  font-size: 1.75rem;
  font-family: var(--main-font);
  text-transform: none;
  font-weight: 700;
}

/* Mobile menu background */
@media (max-width: 991px) {

  /* Keep collapsed nav vertical on mobile — prevent horizontal wrapping */
  #mainNav .navbar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
  }

  #navbarResponsive {
    background: white;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--main-radius);
  }

  #mainNav.navbar-shrink {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

#mainNav .navbar-brand {
  color: white;
  font-family: var(--main-font);
  font-weight: 700;
  letter-spacing: 0.0625em;
  text-transform: none;
}

#mainNav .navbar-brand img {
  height: 5rem;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu.mainDropdown {
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border: none;
  margin-top: 0.3rem;
  border-radius: 0 var(--main-radius) 0 var(--main-radius);
}

.dropdown-item {
  font-family: var(--main-font);
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary-color);
  padding: 0.5rem 1rem;
  transition: var(--main-transition);
}

.dropdown-item:hover {
  background-color: var(--primary-color);
  color: black;
  transition: var(--main-transition);
}

#mainNav .navbar-nav .nav-item .nav-link {
  font-family: var(--main-font);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
  letter-spacing: 0.0625em;
}

#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover {
  color: var(--highlight-color);
  transition: 0.3s ease-in-out;
}

/* Laptop-friendly nav sizing */
@media (min-width: 992px) and (max-width: 1399px) {
  #mainNav .navbar-nav .nav-item .nav-link {
    font-size: 0.95rem;
    letter-spacing: 0.03em;
  }
}

#mainNav .navbar-nav .nav-item:after {
  content: "";
  display: block;
  margin: auto;
  height: 4px;
  width: 0px;
  background: transparent;
  transition: width 0.5s ease, background-color 0.5s ease;
}

#mainNav .navbar-nav .nav-item:hover:after {
  width: 100%;
  background: var(--primary-color);
  transition: 0.3s ease-in-out;
}

#mainNav.navbar-shrink .navbar-nav .nav-item:hover:after {
  width: 100%;
  background: var(--primary-color);
  transition: 0.3s ease-in-out;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: none;
    background-color: transparent;
    transition: 0.3s ease-in-out;
  }

  #mainNav .navbar-brand {
    font-size: 1.5em;
    transition: font-size 0.3s ease-in-out;
  }

  #mainNav .navbar-brand img {
    height: 6rem;
    transition: height 0.3s ease-in-out;
  }

  #mainNav.navbar-shrink {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease-in-out;
  }

  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.25em;
  }

  #mainNav.navbar-shrink .navbar-brand svg,
  #mainNav.navbar-shrink .navbar-brand img {
    height: 4rem;
  }

  #mainNav .navbar-nav .nav-item {
    margin-right: 1.2rem;
  }

  #mainNav .navbar-nav .nav-item:last-child {
    margin-right: 0;
  }
}

#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link,
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link.active,
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover {
  color: var(--primary-color) !important;
  transition: 0.3s ease-in-out;
}

/* Masthead Animated Background */
.masthead {
  position: relative;
  min-height: 100dvh;
  margin-top: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: white;
}

.masthead-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: url('../assets/img/dot-pattern.webp') center center /contain no-repeat;
  animation: rotate-bg 60s linear infinite;
  opacity: 0.25;
}

@media (max-width: 768px) {
  .masthead {
    min-height: 40vh;
  }
}

@keyframes rotate-bg {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Optional: fallback for browsers not supporting webp */
.masthead-bg {
  background-image: url('../assets/img/dot-pattern.webp');
}

.no-webp .masthead-bg {
  background-image: url('../assets/img/dot-pattern.png');
}

.main-logo {
  width: 100%;
  max-width: 500px;
}

.puzzle-logo {
  width: 100%;
  max-width: 80%;
}

.page-section,
.countdown-section {
  padding: 4rem 2rem;
  margin: 0 auto 4rem auto;
}

@media (max-width: 768px) {

  .page-section,
  .countdown-section {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
  }
}

.section-title {
  font-family: var(--secondary-font);
  font-size: clamp(1.5rem, 8vw, 8rem);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.countdown-section {
  background: var(--main-gradient);
  border-radius: var(--main-radius);
  padding: 3rem 2rem;
  margin: 0 auto;
}

.welcome-section,
.footer {
  background-image: url('../assets/img/abstract-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  background-blend-mode: multiply;
  background-color: var(--primary-color);
  border-radius: var(--main-radius);
  padding: 3rem 2rem;
  margin: 0 auto;
}

/* Countdown Container Styling */
.countdown-heading {
  font-family: var(--secondary-font);
  font-size: clamp(1.2rem, 8vw, 10rem);
  font-weight: 700;
  color: var(--main-color);
  text-transform: uppercase;
}

.countdown-subheading {
  font-family: var(--main-font);
  font-size: clamp(0.8rem, 3vw, 4rem);
  font-weight: 500;
  color: var(--main-color);
  text-transform: uppercase;
}

.countdown-container {
  display: flex;
  width: 100%;
  max-width: 70%;
  justify-content: space-between;
  margin: -3rem auto 0 auto;
}

.days-container,
.hours-container,
.minutes-container,
.seconds-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--highlight-color);
  width: clamp(80px, 15vw, 170px);
  height: clamp(80px, 15vw, 170px);
}

.days,
.hours,
.minutes,
.seconds {
  font-family: var(--numbers-font);
  font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1;
  margin: 2rem 0 0.5rem 0;
}

.days-label,
.hours-label,
.minutes-label,
.seconds-label {
  font-family: var(--main-font);
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 5px;
}

@media (min-width: 1920px) {
  .countdown-container {
    max-width: 50%;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .countdown-container {
    max-width: 100%;
  }
}

@media (max-width: 920px) {

  .countdown-container {
    max-width: 90%;
    justify-content: space-around;
    gap: 0.5rem;
  }

  .days-container,
  .hours-container,
  .minutes-container,
  .seconds-container {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 576px) {
  .countdown-heading {
    font-size: clamp(4rem, 5vw, 8rem);
    margin-bottom: 1rem !important;
  }

  .countdown-container {
    max-width: 95%;
    gap: 0.25rem;
    margin-top: -1rem;
  }

  .days-container,
  .hours-container,
  .minutes-container,
  .seconds-container {
    width: 60px;
    height: 60px;
  }
}

.map {
  filter: grayscale(0.7) brightness(0.9);
}

.map iframe {
  border: none;
  width: 100%;
  height: 550px;
  border-radius: var(--main-radius);
}

/* Slow Reveal Animation */
@keyframes slowReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.slowReveal {
  animation: slowReveal 0.6s linear forwards;
}

.contentPageMargin {
  margin: 8rem auto 2rem auto;
}

.topics-section {
  position: relative;
  background-image: url('../assets/img/content/topics-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-color: var(--primary-color);
  border-radius: var(--main-radius);
  color: var(--primary-color);
  font-family: var(--secondary-font);
}

.topics-list {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  border-radius: var(--main-radius);
  background-color: rgba(178, 212, 85, 0.8);
  color: white;
  font-weight: 500;
  padding: clamp(0.3rem, 2vw, 1rem);
  margin: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.topics-list:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.topics-list p {
  color:white;
}

.committees-section {
  position: relative;
  background-image: url('../assets/img/content/committee-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-color: var(--primary-color);
  border-radius: var(--main-radius);
  color: white;
  font-family: var(--secondary-font);
}

.contact-section {
  position: relative;
  background-image: url('../assets/img/content/contact-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-color: var(--primary-color);
  border-radius: var(--main-radius);
  color: white;
  font-family: var(--secondary-font);
}

.registration-section {
  position: relative;
  background-image: url('../assets/img/content/registration-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-color: var(--primary-color);
  border-radius: var(--main-radius);
  color: white;
  font-family: var(--secondary-font);
}

.card {
  background-color: transparent !important;
  border-radius: var(--main-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-body {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--main-radius);
  padding: 0;
}

.card-title {
  background-color: var(--highlight-color);
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: white;
  border-radius: var(--main-radius) var(--main-radius) 0 0;
  padding: 2rem;
}

.card-price {
  font-family: var(--numbers-font);
  font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: var(--primary-color);
  margin: clamp(1rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1rem);
}

.card-inclusions {
  margin: 1rem 2rem;
}

.card-inclusions li {
  color: var(--primary-color);
  font-family: var(--main-font);
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

.card-inclusions .fas {
  color: var(--primary-color);
  margin-right: clamp(0.5rem, 1vw, 1rem);
}

.program-section {
  position: relative;
  background-image: url('../assets/img/content/program-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-color: var(--primary-color);
  border-radius: var(--main-radius);
  color: white;
  font-family: var(--secondary-font);
}

.abstracts-section {
  position: relative;
  background-image: url('../assets/img/content/abstracts-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-color: var(--primary-color);
  border-radius: var(--main-radius);
  color: white;
  font-family: var(--secondary-font);
}