/* ================================

GLOBAL BODY

================================ */

body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Arial, sans-serif;

  color: #374151;

  background:

    radial-gradient(1200px 600px at 10% -10%, rgb(0 161 255 / 14%), transparent 60%),

    radial-gradient(1000px 500px at 90% 10%, rgb(41 27 154 / 12%), transparent 55%),

    linear-gradient(180deg, #f7fbff 0%, #eaf4ff 100%);

}



/* ================================

GLOBAL HEADING

================================ */

h1.is-size-2 {

  font-size: 2.4rem;

  font-weight: 700;

  color: #1e3a8a;

  text-align: center;

  margin: 20px 0 25px;

  letter-spacing: -0.4px;

  text-transform: capitalize;

  line-height: 1.2;

}



/* ================================

GLOBAL MAIN CARD

================================ */

.row.row-no-margin {

  max-width: 1050px;

  margin: 0 auto;

  background: #ffffff;

  padding: 36px 30px;

  border-radius: 20px;

  border: 1px solid #dbeafe;

  box-shadow: 0 12px 35px rgba(37, 99, 235, 0.08);

  animation: fadeUp 0.7s ease;

}



/* ================================

GLOBAL TEXT

================================ */

.row.row-no-margin p,

.row.row-no-margin li,

.row.row-no-margin td,

.row.row-no-margin th {

  font-size: 1.03rem;

  line-height: 1.9;

  color: #374151;

}



.row.row-no-margin p {

  margin-bottom: 14px;

}



.row.row-no-margin strong {

  color: #1e3a8a;

  font-weight: 700;

}



.row.row-no-margin a {

  color: #2563eb;

  font-weight: 600;

  text-decoration: none;

  transition: all 0.25s ease;

}



.row.row-no-margin a:hover {

  text-decoration: underline;

  color: #1d4ed8;

}



.row.row-no-margin hr {

  border: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, #cfe2ff, transparent);

  margin: 16px 0 22px;

}



/* ================================

GLOBAL LIST STYLE

================================ */

.row.row-no-margin ul {

  list-style: none;

  padding: 0;

  margin: 15px 0;

}



.row.row-no-margin ul li {

  background: #f8fbff;

  border: 1px solid #e0ecff;

  border-radius: 12px;

  padding: 14px 18px 14px 42px;

  margin-bottom: 10px;

  position: relative;

  transition: 0.3s;

}



.row.row-no-margin ul li::before {

  content: "•";

  position: absolute;

  left: 15px;

  top: 12px;

  font-size: 20px;

  color: #2563eb;

}



.row.row-no-margin ul li:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.12);

}



/* ================================

GLOBAL TABLE STYLE

================================ */

.row.row-no-margin table {

  width: 100%;

  border-collapse: separate;

  border-spacing: 0;

  margin: 20px 0;

  border-radius: 16px;

  overflow: hidden;

  border: 1px solid #dbeafe;

  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.08);

}



.row.row-no-margin table td,

.row.row-no-margin table th {

  padding: 16px;

  border: 1px solid #e5efff;

  text-align: center;

  vertical-align: middle;

}



.row.row-no-margin table tr:first-child td,

.row.row-no-margin table tr:first-child th,

.row.row-no-margin table tr:nth-child(2) td,

.row.row-no-margin table tr:nth-child(2) th {

  background: #eaf2ff;

}



.row.row-no-margin table tr:nth-child(odd):not(:first-child):not(:nth-child(2)) td {

  background: #f8fbff;

}



.row.row-no-margin table tr:hover td {

  background: #eef5ff;

}



.row.row-no-margin table p {

  margin: 0;

  text-align: center;

}



/* ================================

GLOBAL BUTTON LINK

================================ */

.row.row-no-margin h2 a {

  display: inline-block;

  padding: 14px 30px;

  background: linear-gradient(135deg, #2563eb, #1d4ed8);

  color: #fff !important;

  border-radius: 12px;

  font-weight: 700;

  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);

  transition: 0.3s;

}



.row.row-no-margin h2 a:hover {

  transform: translateY(-3px);

  box-shadow: 0 15px 35px rgba(37, 99, 235, 0.3);

  text-decoration: none;

}



/* ================================

ABOUT INSTITUTE

================================ */

.institute-container {

  max-width: 1100px;

  margin: 0 auto;

  padding: 30px 0;

}



.institute-image {

  border-radius: 18px;

  overflow: hidden;

  margin-bottom: 25px;

  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);

}



.institute-image img {

  width: 100%;

  display: block;

  transition: 0.4s;

}



.institute-image:hover img {

  transform: scale(1.03);

}



.institute-content {

  padding: 30px;

  background: #fff;

  border-left: 5px solid #2563eb;

  border-radius: 18px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);

}



.institute-content p {

  font-size: 1.04rem;

  line-height: 1.9;

  color: #374151;

  text-align: justify;

}



.highlight {

  color: #2563eb;

  font-weight: 700;

}



/* ================================

VENUE PAGE

================================ */

.venue-section {

  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

  padding: 30px;

  border-radius: 18px;

  margin-bottom: 35px;

  border: 1px solid #dbeafe;

  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);

}



.venue-section h1 {

  font-size: 1.6rem;

  color: #1e3a8a;

  margin-bottom: 16px;

  font-weight: 700;

}



.address {

  font-size: 1.08rem;

  color: #111827;

  margin-bottom: 12px;

  line-height: 1.85;

}



.email {

  font-size: 1.05rem;

  margin-bottom: 18px;

  color: #111827;

}



.email strong {

  color: #111827;

}



.email a {

  color: #2563eb;

  text-decoration: none;

}



.email a:hover {

  text-decoration: underline;

}



.online-platform {

  font-size: 1.15rem;

  font-weight: 700;

  margin-bottom: 18px;

}



.online-platform .red {

  color: #dc2626;

}



.online-platform .blue {

  color: #1d4ed8;

}



.map-container {

  width: 100%;

  margin: 25px 0 10px;

}



.map-container iframe {

  width: 100%;

  height: 320px;

  border: 1px solid #dbeafe;

  border-radius: 14px;

  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);

}



.destinations-section {

  margin-top: 45px;

}



.section-title {

  font-size: 2rem;

  color: #1e3a8a;

  text-align: center;

  margin-bottom: 32px;

  font-weight: 700;

  line-height: 1.3;

}



.destinations-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 24px;

  margin-bottom: 10px;

}



.destination-card {

  background: #ffffff;

  border-radius: 16px;

  overflow: hidden;

  border: 1px solid #e0ecff;

  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.08);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.destination-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.14);

}



.destination-image {

  width: 100%;

  height: 220px;

  object-fit: cover;

  display: block;

}



.destination-content {

  padding: 20px;

}



.destination-name {

  font-size: 1.3rem;

  font-weight: 700;

  color: #1f2937;

  margin-bottom: 10px;

}



.destination-description {

  font-size: 0.98rem;

  color: #4b5563;

  line-height: 1.75;

  margin: 0;

}



/* ================================

FOOTER

================================ */

.footer {

  position: relative;

  background: #07122e;

  color: #fff;

  padding: 90px 0 20px;

  overflow: hidden;

}



.footer::before {

  content: "";

  position: absolute;

  inset: 0 0 auto 0;

  height: 3px;

  background: linear-gradient(90deg, transparent, #ffc107, transparent);

}



.wave {

  position: absolute;

  left: 0;

  width: 200%;

  height: 120px;

  background: rgba(255, 255, 255, 0.03);

  border-radius: 100%;

  animation: waveMove 10s infinite linear;

}



.wave1 {

  bottom: 0;

  animation-duration: 12s;

}



.wave2 {

  bottom: 20px;

  animation-duration: 9s;

  opacity: 0.5;

}



.wave3 {

  bottom: 40px;

  animation-duration: 14s;

  opacity: 0.3;

}



.footer a {

  color: #fff;

  text-decoration: none;

}



.footer-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 30px;

  position: relative;

  z-index: 2;

}



.footer-col h3 {

  font-size: 18px;

  margin-bottom: 15px;

  color: #ffc107;

}



.footer-col ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-col ul li {

  margin-bottom: 10px;

  font-size: 14px;

  opacity: 0.85;

  transition: 0.25s ease;

}



.footer-col ul li:hover {

  color: #ffc107;

  transform: translateX(4px);

}



.footer-col p {

  font-size: 14px;

  margin-bottom: 10px;

  opacity: 0.88;

}



.footer-col img {

  width: 120px;

  margin-bottom: 10px;

}



.social-icons a {

  display: inline-block;

  margin-right: 10px;

  padding: 8px 12px;

  border-radius: 6px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  transition: all 0.25s ease;

}



.social-icons a:hover {

  background: #ffc107;

  color: #000;

  border-color: #ffc107;

  transform: translateY(-3px);

}



.footer-bottom {

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

  margin-top: 45px;

  padding-top: 15px;

  text-align: center;

  font-size: 13px;

  opacity: 0.72;

  position: relative;

  z-index: 2;

}



/* ================================

ANIMATIONS

================================ */

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(25px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes waveMove {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}



/* ================================

RESPONSIVE

================================ */

@media (max-width: 991px) {

  h1.is-size-2 {

    font-size: 2rem;

  }



  .row.row-no-margin {

    padding: 28px 20px;

  }



  .row.row-no-margin table td,

  .row.row-no-margin table th {

    padding: 13px 10px;

  }



  .footer-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .section-title {

    font-size: 1.7rem;

  }

}



@media (max-width: 768px) {

  .venue-section {

    padding: 22px 18px;

  }



  .destinations-grid {

    grid-template-columns: 1fr;

  }



  .destination-image {

    height: 210px;

  }



  .map-container iframe {

    height: 260px;

  }

}



@media (max-width: 767px) {

  h1.is-size-2 {

    font-size: 1.7rem;

    margin-bottom: 22px;

  }



  .row.row-no-margin {

    padding: 22px 14px;

    border-radius: 16px;

  }



  .row.row-no-margin p,

  .row.row-no-margin li,

  .row.row-no-margin td,

  .row.row-no-margin th,

  .institute-content p,

  .destination-description,

  .address,

  .email {

    font-size: 0.96rem;

    line-height: 1.75;

  }



  .row.row-no-margin table {

    display: block;

    overflow-x: auto;

  }



  .row.row-no-margin ul li {

    padding: 12px 14px 12px 38px;

  }



  .institute-content {

    padding: 24px 18px;

  }



  .section-title {

    font-size: 1.45rem;

    margin-bottom: 24px;

  }



  .destination-name {

    font-size: 1.15rem;

  }



  .footer-grid {

    grid-template-columns: 1fr;

    text-align: center;

  }

}



:root {

  --navy: #050e2d;

  --royal: #0a2472;

  --cobalt: #1338be;

  --sky: #2e86de;

  --ice: #a8d8ea;

  --cyan: #00d4ff;

  --gold: #ffd166;

  --light: #eef4ff;

  --muted: #5a6ea1;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

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

  background: var(--light);

  color: var(--navy);

  overflow-x: hidden;

  

}



img {

  max-width: 100%;

  display: block;

}



/* ════════════════════════════════════════════

   NAVBAR

════════════════════════════════════════════ */

/* ===== NAVBAR ===== */



nav {

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 3000;

  background: rgba(5, 14, 45, 0.96);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(0, 212, 255, 0.15);

  transition: background 0.3s;

}



/* ===== NAV INNER ===== */

.nav-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 20px; /* reduced for mobile */

  height: 64px;

  max-width: 1300px;

  margin: 0 auto;

}



/* ===== LOGO ===== */

.nav-logo {

  font-family: "Playfair Display", serif;

  color: var(--cyan);

  font-size: 1.2rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-decoration: none;

}



.nav-logo span {

  color: var(--gold);

}



/* ===== DESKTOP MENU ===== */

.nav-links {

  display: flex;

  gap: 17px;

  list-style: none;

  align-items: center;

}



.nav-links a {

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

  text-decoration: none;

  font-size: 0.78rem;

  font-weight: 500;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  transition: color 0.25s;

}



.nav-links a:hover {

  color: var(--cyan);

}



.nav-cta {

  background: linear-gradient(135deg, var(--cobalt), var(--sky)) !important;

  color: #fff !important;

  padding: 8px 20px !important;

  border-radius: 4px;

  font-weight: 600 !important;

  box-shadow: 0 4px 16px rgba(46, 134, 222, 0.35);

}



/* ===== HAMBURGER ===== */

.hamburger {

  display: none;

  flex-direction: column;

  gap: 5px;

  cursor: pointer;

  background: none;

  border: none;

}



.hamburger span {

  width: 24px;

  height: 2px;

  background: #fff;

  display: block;

  border-radius: 2px;

  transition: all 0.3s;

}



/* animation */

.hamburger.open span:nth-child(1) {

  transform: rotate(45deg) translate(5px, 5px);

}

.hamburger.open span:nth-child(2) {

  opacity: 0;

}

.hamburger.open span:nth-child(3) {

  transform: rotate(-45deg) translate(5px, -5px);

}



/* ===== MOBILE MENU ===== */

.mobile-menu {

  position: fixed;

  top: 64px;

  left: 0;

  width: 100%;

  background: rgba(5, 14, 45, 0.98);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(0, 212, 255, 0.15);

  padding: 20px 24px 28px;



  /* FIX */

  transform: translateY(-20px);

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease;

  z-index: 2999;

}



/* active state */

.mobile-menu.open {

  transform: translateY(0);

  opacity: 1;

  visibility: visible;

}



/* menu items */

.mobile-menu ul {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.mobile-menu a {

  display: block;

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

  text-decoration: none;

  font-size: 0.95rem;

  font-weight: 500;

  padding: 12px 14px;

  border-radius: 6px;

  transition: all 0.25s;

}



/* hover */

.mobile-menu a:hover {

  background: rgba(0, 212, 255, 0.1);

  color: var(--cyan);

}



/* CTA */

.mobile-menu .mob-cta {

  margin-top: 16px;

  background: linear-gradient(135deg, var(--cobalt), var(--sky));

  color: #fff !important;

  text-align: center;

  font-weight: 700;

  border-radius: 6px;

  padding: 14px !important;

  box-shadow: 0 6px 20px rgba(19, 56, 190, 0.4);

}



/* ===== RESPONSIVE FIX ===== */

@media (max-width: 992px) {



  .nav-links {

    display: none;

  }



  .hamburger {

    display: flex;

  }



  .nav-inner {

    padding: 0 16px;

  }

}





/* ════════════════════════════════════════════

   HERO SLIDER

════════════════════════════════════════════ */

 .hero-graph {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

}



.scroll-bg {

  width: 300%;

  height: 100%;

  background: url("./slide.webp") repeat-x;

  background-size: auto 100%;

  animation: scrollLeft 35s linear infinite;

  opacity: 0.35;

  will-change: transform;

  transform: translateZ(0);

}



@keyframes scrollLeft {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(-33.33%);

  }

}



.header-logos {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  text-align: center;

}



/* Logo Styling */

.logo {

  max-width: 200px;

  height: auto;

  object-fit: contain;

}



/* Left & Right Logo Optional Fine-tuning */

.left-logo {

  text-align: left;

}



.right-logo {

  text-align: right;

}



/* Title Styling */

.main-title {

  font-size: 42px;

  font-weight: 700;

  margin: 0;

  line-height: 1.2;

}



.year {

  font-size: 28px;

  color: #007bff;

  /* you can change color */

}



/* Responsive (Mobile) */

@media (max-width: 768px) {

  .header-logos {

    flex-direction: column;

    gap: 15px;

  }



  .logo {

    max-width: 90px;

  }



  .main-title {

    font-size: 32px;

  }

}



.hero {

  position: relative;

  width: 100%;

  height: 100vh;

  min-height: 600px;

  overflow: hidden;

  background: var(--navy);

}



/* Animated bg */

.hero-bg {

  position: absolute;

  inset: 0;

  z-index: 0;

  background:

    radial-gradient(ellipse 120% 80% at 50% 40%, rgba(19, 56, 190, 0.55), transparent 60%),

    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(0, 100, 200, 0.3), transparent 50%),

    linear-gradient(180deg, #050e2d 0%, #0a2472 50%, #050e2d 100%);

  animation: bgPulse 8s ease-in-out infinite alternate;

}



@keyframes bgPulse {

  from {

    filter: brightness(1);

  }



  to {

    filter: brightness(1.15) hue-rotate(10deg);

  }

}



.hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(180deg, rgba(5, 14, 45, 0.8) 0%, rgba(10, 36, 114, 0.45) 40%, rgba(5, 14, 45, 0.92) 100%);

}



.hero-grid {

  position: absolute;

  inset: 0;

  z-index: 2;

  background-image:

    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),

    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);

  background-size: 60px 60px;

  animation: gridMove 20s linear infinite;

}



/* @keyframes gridMove {

  from {

    background-position: 0 0;

  }



  to {

    background-position: 60px 60px;

  } */

/* } */



.stars {

  position: absolute;

  inset: 0;

  z-index: 2;

  overflow: hidden;

}



.star {

  position: absolute;

  border-radius: 50%;

  background: #fff;

  animation: twinkle var(--t, 3s) ease-in-out infinite;

  opacity: 0;

}



@keyframes twinkle {

  0%,

  100% {

    opacity: 0;

    transform: scale(0.5);

  }



  50% {

    opacity: var(--op, 0.8);

    transform: scale(1);

  }

}



/* Slider */

.slider {

  position: absolute;

  inset: 0;

  z-index: 3;

}



.slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity 1.2s ease;

  pointer-events: none;

}



.slide.active {

  opacity: 1;

  pointer-events: auto;

}



/* Skyline */

.skyline {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: clamp(100px, 20vw, 220px);

  z-index: 4;

}



.skyline svg {

  width: 100%;

  height: 100%;

}



/* Clouds */

.cloud {

  position: absolute;

  z-index: 5;

  background: rgba(255, 255, 255, 0.07);

  border-radius: 50px;

  filter: blur(2px);

  animation: cloudDrift var(--dur, 40s) linear infinite;

}



@keyframes cloudDrift {

  from {

    transform: translateX(-250px);

  }



  to {

    transform: translateX(110vw);

  }

}



/* Taxi */

.taxi {

  position: absolute;

  bottom: clamp(60px, 10vw, 100px);

  z-index: 6;

  font-size: clamp(24px, 4vw, 52px);

  animation: taxiDrive 18s linear infinite;

  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));

}



@keyframes taxiDrive {

  from {

    left: -100px;

  }



  to {

    left: 110%;

  }

}



/* Birds */

.bird {

  position: absolute;

  z-index: 7;

  font-size: 13px;

  color: var(--ice);

  animation: birdFly var(--bd, 12s) linear infinite;

  opacity: 0.7;

}



@keyframes birdFly {

  from {

    transform: translate(0, 0);

  }



  to {

    transform: translate(110vw, -60px);

  }

}



/* GIF slot */

.gif-slot {

  position: absolute;

  z-index: 6;

  animation: heroFloat 4s ease-in-out infinite;

}



@keyframes heroFloat {

  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(-12px);

  }

}



/* Hero Content */

.hero-content {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 10;

  text-align: center;

  width: 92%;

  max-width: 860px;

  padding: 200px 12px;

}



.hero-badge {

  display: inline-block;

  background: rgba(0, 212, 255, 0.12);

  border: 1px solid rgba(0, 212, 255, 0.35);

  color: var(--cyan);

  font-size: 0.68rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  padding: 7px 18px;

  border-radius: 100px;

  margin-bottom: 20px;

  animation: fadeUp 1s 0.2s both;

}



.hero h1 {

  font-family: "Playfair Display", serif;

  font-size: clamp(2.6rem, 9vw, 7rem);

  font-weight: 900;

  color: #fff;

  line-height: 0.95;

  letter-spacing: -0.02em;

  animation: fadeUp 1s 0.35s both;

}



.hero h1 .year {

  color: var(--cyan);

  font-style: italic;

  text-shadow: 0 0 50px rgba(0, 212, 255, 0.5);

  font-size: 100px !important;

}



.hero-tagline {

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(1rem, 2.8vw, 1.6rem);

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

  margin-top: 12px;

  font-style: italic;

  animation: fadeUp 1s 0.5s both;

}



@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(22px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Date strip */

.hero-date-strip {

  display: inline-flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 0;

  margin-top: 24px;

  background: rgb(13 41 102 / 81%);

  border: 1px solid rgba(0, 212, 255, 0.2);

  border-radius: 8px;

  overflow: hidden;

  animation: fadeUp 1s 0.65s both;

}



.hds-item {

  padding: 12px 20px;

  text-align: center;

  border-right: 1px solid rgba(0, 212, 255, 0.15);

}



.hds-item:last-child {

  border-right: none;

}



.hds-val {

  font-family: "Playfair Display", serif;

  font-size: clamp(1.1rem, 3vw, 1.6rem);

  color: var(--gold);

  font-weight: 700;

  line-height: 1;

}



.hds-key {

  font-size: 0.6rem;

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

  letter-spacing: 0.12em;

  text-transform: uppercase;

  margin-top: 3px;

}



.hds-loc {

  padding: 12px 20px;

  display: flex;

  align-items: center;

  gap: 7px;

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

  font-size: 0.82rem;

}



.hds-loc svg {

  color: var(--cyan);

  flex-shrink: 0;

}



/* Buttons */

.hero-btns {

  margin-top: 28px;

  display: flex;

  gap: 12px;

  justify-content: center;

  flex-wrap: wrap;

  animation: fadeUp 1s 0.8s both;

}



.btn-glow {

  background: linear-gradient(135deg, var(--cobalt), var(--sky));

  color: #fff;

  text-decoration: none;

  padding: 13px 32px;

  font-weight: 700;

  font-size: 0.84rem;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  border-radius: 5px;

  border: none;

  cursor: pointer;

  box-shadow: 0 6px 24px rgba(19, 56, 190, 0.45);

  transition: all 0.3s;

  display: inline-block;

  animation: pulseGlow 3s ease-in-out infinite;

}



@keyframes pulseGlow {

  0%,

  100% {

    box-shadow:

      0 6px 24px rgba(19, 56, 190, 0.45),

      0 0 0 0 rgba(0, 212, 255, 0);

  }



  50% {

    box-shadow:

      0 6px 24px rgba(19, 56, 190, 0.45),

      0 0 0 10px rgba(0, 212, 255, 0.1);

  }

}



.btn-glow:hover {

  transform: translateY(-2px);

  opacity: 0.92;

}



.btn-ghost {

  background: transparent;

  color: var(--cyan);

  text-decoration: none;

  padding: 13px 32px;

  font-weight: 600;

  font-size: 0.84rem;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  border-radius: 5px;

  border: 1px solid rgba(0, 212, 255, 0.4);

  transition: all 0.3s;

  display: inline-block;

}



.btn-ghost:hover {

  background: rgba(0, 212, 255, 0.08);

  border-color: var(--cyan);

}



/* Slider controls */

.slide-dots {

  position: absolute;

  bottom: 24px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 20;

  display: flex;

  gap: 8px;

}



.dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.3);

  border: 1px solid rgba(0, 212, 255, 0.3);

  cursor: pointer;

  transition: all 0.3s;

}



.dot.active {

  background: var(--cyan);

  width: 26px;

  border-radius: 4px;

  box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);

}



.slide-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 20;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(0, 212, 255, 0.2);

  color: #fff;

  font-size: 1.1rem;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.3s;

}



.slide-arrow:hover {

  background: rgba(0, 212, 255, 0.15);

  border-color: var(--cyan);

}



.slide-arrow.prev {

  left: 14px;

}



.slide-arrow.next {

  right: 14px;

}



.scroll-hint {

  position: absolute;

  bottom: 52px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 20;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 5px;

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

  font-size: 0.6rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

}



.scroll-line {

  width: 1px;

  height: 34px;

  background: linear-gradient(to bottom, rgba(0, 212, 255, 0.6), transparent);

  animation: scrollAnim 2s ease-in-out infinite;

}



@keyframes scrollAnim {

  0% {

    transform: scaleY(0);

    transform-origin: top;

  }



  50% {

    transform: scaleY(1);

    transform-origin: top;

  }



  51% {

    transform: scaleY(1);

    transform-origin: bottom;

  }



  100% {

    transform: scaleY(0);

    transform-origin: bottom;

  }

}



/* ════════════════════════════════════════════

   TICKER

════════════════════════════════════════════ */

.ticker {

  background: linear-gradient(135deg, var(--cobalt), var(--royal));

  overflow: hidden;

  border-bottom: 1px solid rgba(0, 212, 255, 0.15);

}



.ticker-track {

  display: flex;

  width: max-content;

  animation: ticker 30s linear infinite;

}



@keyframes ticker {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(-50%);

  }

}



.ticker-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 13px 40px;

  white-space: nowrap;

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

  font-size: 0.8rem;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  border-right: 1px solid rgba(255, 255, 255, 0.08);

}



.ti-val {

  color: var(--cyan);

  font-weight: 700;

  font-size: 0.95rem;

}



/* ════════════════════════════════════════════

   COUNTDOWN

════════════════════════════════════════════ */

.countdown-sec {

  background: var(--navy);

  padding: 52px 20px;

  text-align: center;

  position: relative;

  overflow: hidden;

}



.countdown-sec::before {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(19, 56, 190, 0.28), transparent);

}



.cd-label {

  font-size: 0.7rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--cyan);

  margin-bottom: 22px;

  position: relative;

}



.cd-units {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  position: relative;

}



.cd-unit {

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(0, 212, 255, 0.2);

  border-radius: 8px;

  padding: 18px 22px;

  min-width: 88px;

  text-align: center;

  position: relative;

  overflow: hidden;

}



.cd-unit::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--cyan), transparent);

  animation: shimmer 2s linear infinite;

}



@keyframes shimmer {

  from {

    transform: translateX(-100%);

  }



  to {

    transform: translateX(100%);

  }

}



.cd-num {

  font-family: "Playfair Display", serif;

  font-size: 2.6rem;

  color: #fff;

  font-weight: 700;

  line-height: 1;

}



.cd-lbl {

  font-size: 0.6rem;

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

  letter-spacing: 0.14em;

  text-transform: uppercase;

  margin-top: 5px;

}



.cd-colon {

  font-family: "Playfair Display", serif;

  font-size: 2.2rem;

  color: var(--cyan);

  opacity: 0.6;

}



/* ════════════════════════════════════════════

   SECTION BASE

════════════════════════════════════════════ */

section {

  padding: 80px 24px;

}



.container {

  max-width: 1160px;

  margin: 0 auto;

}



.sec-label {

  font-size: 0.68rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--sky);

  font-weight: 600;

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

}



.sec-label::before {

  content: "";

  width: 26px;

  height: 2px;

  background: var(--cyan);

}



.sec-title {

  font-family: "Playfair Display", serif;

  font-size: clamp(1.8rem, 4vw, 3.2rem);

  font-weight: 700;

  color: var(--navy);

  line-height: 1.1;

}



.sec-white {

  color: #fff;

}



.sec-sub {

  color: var(--muted);

  margin-top: 12px;

  font-size: 0.95rem;

  line-height: 1.7;

  max-width: 520px;

}



/* ════════════════════════════════════════════

   TAGLINE BAND

════════════════════════════════════════════ */

.tagline-band {

  background: linear-gradient(135deg, var(--cobalt) 0%, var(--navy) 50%, var(--royal) 100%);

  padding: 60px 24px;

  text-align: center;

}



.tagline-band h2 {

  font-family: "Playfair Display", serif;

  font-size: clamp(1.7rem, 4.5vw, 3.8rem);

  color: #fff;

  font-weight: 300;

  font-style: italic;

}



.tagline-band h2 strong {

  color: var(--gold);

  font-style: normal;

  font-weight: 800;

}



.tb-dots {

  display: flex;

  justify-content: center;

  gap: 14px;

  margin-top: 18px;

}



.tb-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

}



.tb-dot:nth-child(1) {

  background: var(--cyan);

}



.tb-dot:nth-child(2) {

  background: var(--gold);

}



.tb-dot:nth-child(3) {

  background: var(--ice);

}



/* ════════════════════════════════════════════

   CITY SECTION

════════════════════════════════════════════ */

.city-section {

  background: linear-gradient(160deg, var(--royal) 0%, var(--navy) 65%, #020818 100%);

  padding: 80px 24px;

  text-align: center;

  position: relative;

  overflow: hidden;

}



.city-bg-text {

  position: absolute;

  font-family: "Playfair Display", serif;

  font-size: 28vw;

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

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  white-space: nowrap;

  pointer-events: none;

  font-style: italic;

}



.city-section h2 {

  font-family: "Playfair Display", serif;

  font-size: clamp(2rem, 5vw, 4.2rem);

  color: #fff;

  font-weight: 300;

  position: relative;

}



.city-section h2 em {

  font-style: italic;

  color: var(--cyan);

}



.city-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  max-width: 960px;

  margin: 50px auto 0;

  position: relative;

}



.city-card {

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(0, 212, 255, 0.12);

  border-radius: 10px;

  padding: 32px 20px;

  transition: all 0.3s;

}



.city-card:hover {

  background: rgba(0, 212, 255, 0.07);

  border-color: rgba(0, 212, 255, 0.3);

  transform: translateY(-5px);

}



.city-icon {

  font-size: 2.5rem;

  margin-bottom: 12px;

}



.city-title {

  font-family: "Playfair Display", serif;

  font-size: 1.18rem;

  color: #fff;

  margin-bottom: 8px;

}



.city-text {

  font-size: 0.86rem;

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

  line-height: 1.7;

}

/* ===============================================

cards

============================================== */

.card-color {

  background-color: #042381;

}

.news-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);

  transition: all 0.8s ease;

  z-index: 1;

}



.news-card:hover::before {

  left: 100%;

}



.news-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 20px 45px rgba(13, 110, 253, 0.15) !important;

}



.news-card .card-body {

  z-index: 2;

}



@keyframes floatCard {

  0% {

    transform: translateY(0px);

  }



  50% {

    transform: translateY(-6px);

  }



  100% {

    transform: translateY(0px);

  }

}



.news-card {

  animation: floatCard 4s ease-in-out infinite;

}



.news-card:nth-child(2) {

  animation-delay: 0.5s;

}



.news-card:nth-child(3) {

  animation-delay: 1s;

}



@media (max-width: 767px) {

  .news-card {

    animation: none;

  }

}



/* ════════════════════════════════════════════

   ABSTRACT

════════════════════════════════════════════ */

.abs-section {

  background: linear-gradient(160deg, var(--navy) 0%, var(--royal) 100%);

  position: relative;

  overflow: hidden;

}



.abs-section::after {

  content: "";

  position: absolute;

  top: -100px;

  right: -100px;

  width: 450px;

  height: 450px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(0, 212, 255, 0.07), transparent 70%);

}



.abs-inner {

  display: grid;

  grid-template-columns: 4fr 1fr;

  gap: 70px;

  align-items: center;

  position: relative;

  z-index: 1;

}



.abs-section .sec-label {

  color: var(--cyan);

}



.abs-section .sec-label::before {

  background: var(--cyan);

}



.abs-text {

  font-size: 0.98rem;

  line-height: 1.85;

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

  margin-top: 16px;

}



.abs-dates {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-top: 32px;

}



.abs-date {

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(0, 212, 255, 0.2);

  border-radius: 8px;

  padding: 18px;

}



.abs-date .dlbl {

  font-size: 0.65rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--cyan);

  margin-bottom: 6px;

}



.abs-date .dval {

  font-family: "Playfair Display", serif;

  font-size: 1.3rem;

  color: #fff;

  font-weight: 700;

}



.abs-visual {

  display: flex;

  align-items: center;

  justify-content: center;

}



.abs-ring {

  width: 320px;

  height: 320px;

  border-radius: 50%;

  border: 1px solid rgba(0, 212, 255, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



@keyframes rotate {

  from {

    transform: rotate(0);

  }



  to {

    transform: rotate(360deg);

  }

}

.abs-rotating-img {

  position: absolute;

  width: 420px;

  height: 420px;

  animation: rotateCircle 35s linear infinite;

  pointer-events: none;

}



.abs-rotating-img img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



/* rotation animation */

@keyframes rotateCircle {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}



.abs-ring-inner {

  text-align: center;

  position: relative;

  z-index: 2;

}



.abs-big {

  font-family: "Playfair Display", serif;

  font-size: 4rem;

  color: var(--cyan);

  font-weight: 700;

  text-shadow: 0 0 40px rgba(0, 212, 255, 0.5);

}



.abs-sm {

  font-size: 0.7rem;

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

  letter-spacing: 0.1em;

  text-transform: uppercase;

}



/* ════════════════════════════════════════════

   VENUE

════════════════════════════════════════════ */

/* ══════════ VENUE SECTION ══════════ */



.venue-section {

  padding: 100px 0;

  background: #f4f8fc;

}



.venue-inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  align-items: center;

}



/* content */



.venue-text {

  background: linear-gradient(135deg, #ffffff, #f7fbff);

  padding: 30px;

  border-radius: 14px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

  border-left: 4px solid #05227a;

  margin-top: 18px;

}



.venue-text p {

  font-size: 1.05rem;

  line-height: 1.9;

  color: #5a6473;

  margin-bottom: 18px;

}



/* highlight text */



.highlight {

  color: #042381;

  font-weight: 600;

  position: relative;

}



.highlight::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -3px;

  width: 100%;

  height: 6px;

  background: rgba(0, 119, 255, 0.18);

  border-radius: 4px;

}



/* image */



.venue-image {

  position: relative;

  overflow: hidden;

  padding-top: 10px;

}



.venue-image img {

  width: 100%;

  display: block;

}



/* hover zoom */



/* responsive */



@media (max-width: 992px) {

  .venue-inner {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .venue-section {

    padding: 70px 0;

  }

}

/* ════════════════════════════════════════════

   COMMITTEE

════════════════════════════════════════════ */

.com-section {

  background: linear-gradient(180deg, var(--navy), #030b28);

}



.com-section .sec-label {

  color: var(--cyan);

}



.com-section .sec-label::before {

  background: var(--cyan);

}



.com-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 18px;

  margin-top: 50px;

}



.com-card {

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(0, 212, 255, 0.1);

  border-radius: 10px;

  overflow: hidden;

  text-align: center;

  padding-bottom: 20px;

  transition: all 0.3s;

}



.com-card:hover {

  background: rgba(0, 212, 255, 0.08);

  border-color: rgba(0, 212, 255, 0.3);

  transform: translateY(-5px);

}



.com-img {

  /* height: 120px; */

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: "Playfair Display", serif;

  font-size: 2.2rem;

  color: #fff;

  font-weight: 700;

  background: linear-gradient(135deg, var(--royal), var(--cobalt));

}



.com-card h4 {

  font-family: "Playfair Display", serif;

  font-size: 0.88rem;

  color: #fff;

  margin-top: 12px;

  padding: 0 12px;

  font-weight: 600;

}



.com-card p {

  font-size: 0.62rem;

  color: var(--cyan);

  letter-spacing: 0.1em;

  text-transform: uppercase;

  margin-top: 4px;

  font-weight: 600;

}



/* ════════════════════════════════════════════

   CONTACT

════════════════════════════════════════════ */

.contact-section {

  background: var(--light);

  text-align: center;

}



.con-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

  margin-top: 50px;

}



.con-card {

  background: #fff;

  border: 1px solid rgba(19, 56, 190, 0.1);

  border-radius: 10px;

  padding: 32px 24px;

  transition: all 0.3s;

  box-shadow: 0 4px 18px rgba(10, 36, 114, 0.06);

}



.con-card:hover {

  border-color: var(--sky);

  transform: translateY(-4px);

  box-shadow: 0 10px 36px rgba(10, 36, 114, 0.11);

}



.con-icon {

  font-size: 2rem;

  margin-bottom: 12px;

}



.con-card h4 {

  color: var(--sky);

  font-size: 0.68rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  margin-bottom: 7px;

  font-weight: 600;

}



.con-card a,

.con-card p {

  color: var(--navy);

  font-size: 0.9rem;

  text-decoration: none;

  line-height: 1.6;

}



.con-card a:hover {

  color: var(--cobalt);

}



.socials {

  display: flex;

  justify-content: center;

  gap: 12px;

  margin-top: 40px;

  flex-wrap: wrap;

}



.soc-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #fff;

  border: 1px solid rgba(19, 56, 190, 0.15);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--cobalt);

  text-decoration: none;

  font-size: 0.78rem;

  font-weight: 700;

  transition: all 0.3s;

  box-shadow: 0 2px 10px rgba(10, 36, 114, 0.07);

}



.soc-btn:hover {

  background: linear-gradient(135deg, var(--cobalt), var(--sky));

  color: #fff;

  border-color: transparent;

  transform: translateY(-3px);

}



/* ════════════════════════════════════════════

   FOOTER

════════════════════════════════════════════ */

/* ══════════ FOOTER ══════════ */



.footer {

  background: linear-gradient(160deg, #020818, #071a3a);

  padding: 90px 0 35px;

  position: relative;

  overflow: hidden;

}



/* glow background effect */

.footer::before {

  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  background: radial-gradient(circle, rgba(0, 212, 255, 0.08), transparent 70%);

  top: -120px;

  right: -120px;

}



.footer-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 60px;

}



/* headings */



.footer-col h3 {

  font-size: 1.1rem;

  color: #fff;

  margin-bottom: 10px;

  position: relative;

}



.footer-col h3::after {

  content: "";

  position: absolute;

  width: 45px;

  height: 2px;

  background: #00d4ff;

  bottom: -6px;

  left: 0;

}



.footer-col h4 {

  color: #00d4ff;

  margin-top: 16px;

  margin-bottom: 8px;

  font-size: 0.95rem;

}



/* text */



.footer-col p {

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

  font-size: 0.9rem;

  margin-bottom: 10px;

  line-height: 1.7;

}



.foot-sub {

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

  font-size: 0.85rem;

}



/* socials */



/* bottom */



.footer-bottom {

  margin-top: 60px;

  padding-top: 20px;

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

  text-align: center;

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

  font-size: 0.85rem;

}



.footer-bottom span {

  display: block;

  margin-top: 6px;

}



.footer-bottom a {

  color: #00d4ff;

  text-decoration: none;

}



/* responsive */



@media (max-width: 992px) {

  .footer-grid {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .footer {

    padding: 70px 0 30px;

  }

}



/* ════════════════════════════════════════════

   RESPONSIVE BREAKPOINTS

════════════════════════════════════════════ */



/* Tablet & smaller desktop */

@media (max-width: 1100px) {

  .reg-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .com-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



/* Tablet */

@media (max-width: 900px) {

  .nav-inner {

    padding: 0 24px;

  }



  .nav-links {

    display: none;

  }



  .hamburger {

    display: flex;

  }



  .mobile-menu {

    display: block;

  }



  section {

    padding: 64px 20px;

  }



  /* Hero */

  .hero {

    min-height: 580px;

  }



  .hds-loc {

    display: none;

  }



  .slide-arrow {

    display: none;

  }



  .scroll-hint {

    display: none;

  }



  .hero h1 {

    font-size: clamp(2.2rem, 8vw, 4.5rem);

  }



  /* Grids → single column or 2 col */

  .msg-grid {

    grid-template-columns: 1fr;

  }



  .abs-inner {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .abs-visual {

    display: none;

  }



  .venue-inner {

    grid-template-columns: 1fr;

    gap: 36px;

  }



  .city-grid {

    grid-template-columns: 1fr 1fr;

  }



  .con-grid {

    grid-template-columns: 1fr 1fr;

  }



  .com-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .reg-grid {

    grid-template-columns: 1fr 1fr;

  }



  .abs-dates {

    grid-template-columns: 1fr 1fr;

  }



  .venue-stats {

    grid-template-columns: 1fr 1fr;

  }



  /* Countdown */

  .cd-units {

    gap: 6px;

  }



  .cd-unit {

    padding: 14px 16px;

    min-width: 72px;

  }



  .cd-num {

    font-size: 2rem;

  }



  .cd-colon {

    font-size: 1.8rem;

  }

}



/* Mobile */

@media (max-width: 600px) {

  .nav-inner {

    padding: 0 16px;

  }



  /* Hero */

  .hero {

    min-height: 100svh;

  }



  .hero-content {

    width: 96%;

    padding: 0 8px;

  }



  .hero-badge {

    font-size: 0.6rem;

    padding: 6px 14px;

    margin-bottom: 16px;

  }



  .hero h1 {

    font-size: clamp(2rem, 9vw, 3rem);

  }



  .hero-tagline {

    font-size: 0.95rem;

  }



  .hero-date-strip {

    flex-direction: row;

    flex-wrap: wrap;

  }



  .hds-item {

    padding: 10px 16px;

  }



  .hds-val {

    font-size: 1.2rem;

  }



  .hero-btns {

    gap: 10px;

  }



  .btn-glow,

  .btn-ghost {

    padding: 12px 24px;

    font-size: 0.8rem;

    width: 100%;

    text-align: center;

  }



  /* Skyline smaller */

  .skyline {

    height: 100px;

  }



  .taxi {

    bottom: 50px;

    font-size: 24px;

  }



  /* Sections */

  section {

    padding: 52px 16px;

  }



  .sec-title {

    font-size: 1.75rem;

  }



  /* Countdown */

  .cd-unit {

    padding: 12px 12px;

    min-width: 64px;

  }



  .cd-num {

    font-size: 1.7rem;

  }



  .cd-lbl {

    font-size: 0.55rem;

  }



  .cd-colon {

    font-size: 1.5rem;

  }



  /* Message */

  .msg-top {

    height: 200px;

  }



  .msg-avatar {

    width: 86px;

    height: 86px;

    font-size: 1.7rem;

  }



  .msg-body {

    padding: 18px;

    font-size: 1rem;

  }



  /* City */

  .city-grid {

    grid-template-columns: 1fr;

  }



  .city-card {

    padding: 24px 18px;

  }



  /* Registration */

  .reg-grid {

    grid-template-columns: 1fr;

  }



  .reg-card.featured {

    transform: none;

  }



  .reg-card.featured:hover {

    transform: translateY(-7px);

  }



  /* Abstract */

  .abs-dates {

    grid-template-columns: 1fr;

  }



  /* Venue */

  .venue-vis {

    height: 260px;

  }



  .venue-stats {

    grid-template-columns: 1fr 1fr;

  }



  /* Committee */

  .com-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  /* Contact */

  .con-grid {

    grid-template-columns: 1fr;

  }



  /* Inclusions */

  .inclusions {

    gap: 8px;

  }



  .incl-chip {

    font-size: 0.78rem;

    padding: 8px 14px;

  }



  /* Ticker */

  .ticker-item {

    padding: 11px 28px;

    font-size: 0.74rem;

  }



  /* Footer */

  .foot-links {

    gap: 14px;

  }



  .foot-links a {

    font-size: 0.7rem;

  }



  /* Tagline */

  .tagline-band h2 {

    font-size: 1.5rem;

  }



  /* WhatsApp */

  .wa-fab {

    bottom: 16px;

    right: 16px;

    width: 48px;

    height: 48px;

    font-size: 1.3rem;

  }

}



/* Very small phones */

@media (max-width: 360px) {

  .hero h1 {

    font-size: 1.9rem;

  }



  .cd-unit {

    min-width: 56px;

    padding: 10px 10px;

  }



  .cd-num {

    font-size: 1.5rem;

  }



  .venue-stats {

    grid-template-columns: 1fr;

  }



  .com-grid {

    grid-template-columns: 1fr 1fr;

  }

}

/* =====================================media query css start ==================================== */

/* Small phones */

@media (max-width: 480px) {

  .hero {

    height: 70vh;

  }

}



/* Large phones */

@media (max-width: 576px) {

  .hero {

    height: 70vh;

  }

}



/* Tablets */

@media (max-width: 768px) {

  .hero {

    height: 70vh;

  }

}



/* Small laptops */

@media (max-width: 992px) {

  .hero {

    height: 70vh;

  }

}