/*======================================================
    Tango2London Website
    Premium Event Website
======================================================*/


/*======================================================
    RESET
======================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Inter",sans-serif;

    background:#0B0B0D;

    color:#F7F5F2;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font:inherit;

}

ul{

    list-style:none;

}



/*======================================================
    VARIABLES
======================================================*/

:root{

    --background:#0B0B0D;

    --surface:#17181C;

    --gold:#C8A96B;

    --gold-light:#E7CF97;

    --white:#F7F5F2;

    --grey:#C9C9C9;

    --grey-light:#E5E5E5;

    --border:rgba(255,255,255,.08);

    --shadow:0 20px 60px rgba(0,0,0,.35);

    --radius:24px;

    --transition:.35s ease;

    --container:1200px;

}



/*======================================================
    GLOBAL
======================================================*/

body{

    background:var(--background);

    color:var(--white);

}

section{

    position:relative;

}

section{

  position:relative;

}

.container{

    width:min(var(--container),90%);

    margin:0 auto;

}



/*======================================================
    TYPOGRAPHY
======================================================*/

.section-tag{

    color:var(--gold);

    font-size:13px;

    font-weight:500;

    letter-spacing:.30em;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-title{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(42px,5vw,60px);

    font-weight:500;

    line-height:1.1;

    color:var(--white);

    margin-bottom:20px;

}

.section-subtitle{

    max-width:720px;

    color:var(--grey);

    font-size:18px;

    line-height:1.8;

}



/*======================================================
    BUTTONS
======================================================*/

.gold-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    background:var(--gold);

    color:#111;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.gold-button:hover{

    background:var(--gold-light);

    transform:translateY(-2px);

}

.outline-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    border:1px solid rgba(255,255,255,.28);

    color:var(--white);

    border-radius:999px;

    transition:var(--transition);

}

.outline-button:hover{

    border-color:var(--gold);

    color:var(--gold);

}
/*========================================
    HEADER
======================================================*/

.site-header{

  position:fixed;

  top:0;

  left:0;

  width:100%;

  z-index:1000;

  padding:22px 0;

  transition:all .35s ease;

}

.site-header.scrolled{

  background:rgba(10,10,10,.72);

  backdrop-filter:blur(18px);

  -webkit-backdrop-filter:blur(18px);

  border-bottom:1px solid rgba(255,255,255,.08);

}

.site-header .container{

  display:flex;

  align-items:center;

  justify-content:space-between;

}



/*==============================
  Logo
==============================*/

.nav-logo{

  display:flex;

  align-items:center;

}

.nav-logo img{

  height:74px;

  width:auto;

  transition:.35s ease;

}

.site-header.scrolled .nav-logo img{

  height:66px;

}



/*==============================
  Navigation
==============================*/

.desktop-nav{

  display:flex;

  align-items:center;

  gap:36px;

}

.desktop-nav a{

  font-size:14px;

  font-weight:500;

  letter-spacing:.08em;

  color:var(--white);

  transition:var(--transition);

}

.desktop-nav a:not(.gold-button):hover{

  color:var(--gold);

}



/*==============================
  Register Button
==============================*/

.desktop-nav .gold-button{

  margin-left:12px;

  padding:14px 30px;

}



/*==============================
  Mobile Menu
==============================*/

.mobile-menu{

  display:none;

  font-size:30px;

  color:var(--white);

  cursor:pointer;

  transition:var(--transition);

}

.mobile-menu:hover{

  color:var(--gold);

}
/*======================================================
    HERO
======================================================*/

.hero{

  position:relative;

  display:flex;

  justify-content:center;

  align-items:center;

  min-height:100vh;

  overflow:hidden;

  text-align:center;

  background:url("assets/hero/londonimage.png") center center/cover no-repeat;

  animation:heroZoom 22s ease-in-out infinite alternate;

}

/* Overlay */

.hero::before{

  content:"";

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.42);

  z-index:1;

}

.hero::after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(

      rgba(0,0,0,.12),

      rgba(0,0,0,.45),

      rgba(11,11,13,.92)

  );

  z-index:2;

}



/*==============================
  Hero Content
==============================*/

.hero-content{

  position:relative;

  z-index:5;

  width:min(900px,90%);

  margin:0 auto;

  padding-top:170px;

  animation:fadeUp 1.2s ease;

}



/*==============================
  Hero Logo
==============================*/

.hero-logo{

  position:absolute;

  top:95px;

  left:50%;

  transform:translateX(-50%);

  width:210px;

  z-index:6;

}



/*==============================
  Date
==============================*/

.hero-date{

  color:var(--gold);

  font-size:15px;

  letter-spacing:.35em;

  text-transform:uppercase;

  margin-bottom:32px;

}



/*==============================
  Title
==============================*/

.hero h1{

  font-family:"Cormorant Garamond",serif;

  font-size:clamp(56px,5vw,82px);

  font-weight:500;

  line-height:1.05;

  max-width:900px;

  margin:0 auto 30px;

}



/*==============================
  Description
==============================*/

.hero-description{

  max-width:680px;

  margin:0 auto 55px;

  color:#D8D8D8;

  font-size:20px;

  line-height:1.8;

  font-weight:300;

}



/*==============================
  Buttons
==============================*/

.hero-buttons{

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;

}



/*==============================
  Scroll Indicator
==============================*/

.scroll-indicator{

  position:absolute;

  left:50%;

  bottom:35px;

  transform:translateX(-50%);

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:8px;

  color:rgba(255,255,255,.70);

  font-size:12px;

  letter-spacing:.28em;

  text-transform:uppercase;

  z-index:8;

  animation:bounce 2.8s infinite;

}

.scroll-indicator span{

  color:var(--gold);

  font-size:22px;

}

/*======================================================
    STARS
======================================================*/

.stars{

  position:absolute;

  inset:0;

  overflow:hidden;

  pointer-events:none;

  z-index:3;

}

.star{

  position:absolute;

  border-radius:50%;

  background:var(--gold);

  box-shadow:

      0 0 6px rgba(200,169,107,.9),

      0 0 12px rgba(200,169,107,.45);

}

/*======================================================
Animation
========================================================*/
@keyframes drift{

  0%{

      transform:translateY(0);

  }

  50%{

      transform:translateY(-18px);

  }

  100%{

      transform:translateY(0);

  }

}

@keyframes twinkle{

  0%,100%{

      opacity:.2;

  }

  50%{

      opacity:1;

  }

}
/*==========Highlights======================================/
WHY TANGO2LONDON
======================================================*/
.why-section{

  padding:120px 0;

}

.why-grid{

  display:grid;

    grid-template-columns:420px 560px;

    justify-content:space-between;

    align-items:center;

    gap:80px;

}

.why-content{

  display:flex;

    flex-direction:column;

    max-width:420px;

}

.highlight-item{

  padding:32px 0;

  border-bottom:1px solid rgba(255,255,255,.08);

}

.highlight-item:first-child{

  padding-top:0;

}

.highlight-item:last-child{

  border-bottom:none;

}

.highlight-number{

  font-family:"Cormorant Garamond",serif;

  font-size:86px;

  color:var(--gold);

  line-height:.9;

  margin-bottom:18px;

}

.highlight-icon{

  display:flex;

  align-items:center;

  gap:8px;

  color:var(--gold);

  font-size:24px;

  margin-bottom:18px;

}

.highlight-title{

  font-size:17px;

  letter-spacing:.20em;

  text-transform:uppercase;

  line-height:1.7;

  color:var(--white);

  font-weight:500;

}

.why-gallery{

  position:relative;

    max-width:560px;

    width:100%;

    margin-left:auto;

}

.why-gallery img{

  width:100%;

  aspect-ratio:4/5;

  object-fit:cover;

  border-radius:24px;

  transition:opacity .8s ease;

}

/*======================================================
MEET THE ARTISTS
======================================================*/

.artists-section{

  padding:120px 40px;

}

.artists-section .container{

  max-width:1500px;

}

.section-heading{

  text-align:center;

  margin-bottom:90px;

}

.section-tag{

  color:var(--gold);

  letter-spacing:.35em;

  font-size:13px;

  text-transform:uppercase;

  margin-bottom:18px;

}

.section-title{

  font-family:"Cormorant Garamond",serif;

  font-size:64px;

  font-weight:500;

  color:var(--white);

}

.artists-grid{

  display:grid;

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

  gap:36px;

}

.artist-card{

  text-align:center;

}

.artist-card img{

  width:100%;

  aspect-ratio:3/4;

  object-fit:cover;

  display:block;

  border-radius:20px;

  transition:.45s;

}

.artist-card:hover img{

  transform:translateY(-8px);

  filter:brightness(1.05);

}

.artist-card h3{

  margin-top:22px;

  font-family:"Cormorant Garamond",serif;

  font-size:30px;

  font-weight:500;

  color:white;

  transition:.3s;

}

.artist-card:hover h3{

  color:var(--gold);

}

.artists-cta{

  text-align:center;

  margin-top:60px;

    margin-bottom:0;

}

.artists-cta-text{

  font-family:"Cormorant Garamond",serif;

  font-size:44px;

    margin-bottom:24px;

  color:white;

}

/*======================================================
COMPETITION
======================================================*/

.competition-section{

  background:#0b0b0d;

  padding:0;

}

.competition-poster{

  width:100%;

  margin:0;

}

.competition-poster img{

  display:block;

  width:100%;

  height:90vh;

  object-fit:cover;

  object-position:center;

  border-radius:0;

}

.competition-buttons{

  display:flex;

  justify-content:center;

  gap:24px;

  margin-top:50px;

  flex-wrap:wrap;

}
/*======================================================
    VENUE
======================================================*/

.venue-section{

  padding:130px 0;

}

.venue-grid{

  display:grid;

  grid-template-columns:1fr 360px;

  gap:90px;

  align-items:center;

}

/*==============================
Gallery
==============================*/

.venue-gallery{

  position:relative;

}

.venue-gallery img{

  width:100%;

  aspect-ratio:16/10;

  object-fit:cover;

  border-radius:24px;

  display:block;

  box-shadow:0 30px 70px rgba(0,0,0,.35);

  transition:opacity .8s ease;

}

/*==============================
Content
==============================*/

.venue-content{

  display:flex;

  flex-direction:column;

}

.venue-section .section-tag{

  margin-bottom:18px;

}

.venue-section .section-title{

  font-size:48px;

  line-height:1.08;

  margin-bottom:22px;

}

.venue-description{

  color:var(--grey);

  line-height:1.8;

  font-size:18px;

  margin-bottom:38px;

}

/*==============================
Features
==============================*/

.venue-item{

  display:flex;

  gap:16px;

  align-items:flex-start;

  padding:22px 0;

  border-bottom:1px solid rgba(255,255,255,.08);

}

.venue-item:last-child{

  border-bottom:none;

}

.venue-icon{

  color:var(--gold);

  font-size:16px;

  margin-top:5px;

  flex-shrink:0;

}

.venue-text{

  font-size:15px;

  color:white;

  text-transform:uppercase;

  letter-spacing:.16em;

  line-height:1.8;

  font-weight:500;

}

/*==============================
Address
==============================*/

.venue-address{

  margin-top:40px;

  color:#9B9B9B;

  font-size:14px;

  line-height:1.9;

}
/*======================================================
    SCHEDULE
======================================================*/

.schedule-section{

  padding:120px 0;

}

.schedule-grid{

  display:grid;

  grid-template-columns:340px 1fr;

  gap:90px;

  align-items:center;

}

/*==============================
Left
==============================*/

.schedule-content{

  display:flex;

  flex-direction:column;

}

.schedule-section .section-title{

  font-size:48px;

  line-height:1.08;

  margin-bottom:45px;

}

.schedule-note{

  margin-top:28px;

  color:#8D8D8D;

  font-size:13px;

  line-height:1.9;

}

/*==============================
Right
==============================*/

.schedule-wrapper{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:28px;

}

.schedule-image-wrapper{

  max-width:560px;

  cursor:pointer;

}

.schedule-image-wrapper img{

  width:100%;

  display:block;

  border-radius:22px;

  box-shadow:0 25px 60px rgba(0,0,0,.35);

  transition:.35s;

}

.schedule-image-wrapper:hover img{

  transform:scale(1.02);

}

.schedule-arrow{

  width:54px;

  height:54px;

  border-radius:50%;

  border:1px solid rgba(212,178,107,.45);

  background:transparent;

  color:var(--gold);

  font-size:28px;

  cursor:pointer;

  transition:.3s;

}

.schedule-arrow:hover{

  background:var(--gold);

  color:black;

}

/*==============================
Lightbox
==============================*/

.schedule-lightbox{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.92);

  display:none;

  justify-content:center;

  align-items:center;

  z-index:9999;

  padding:40px;

}

.schedule-lightbox img{

  max-width:90vw;

  max-height:90vh;

  border-radius:12px;

  box-shadow:0 20px 80px rgba(0,0,0,.6);

}

.schedule-lightbox.active{

  display:flex;

}

#closeSchedule{

  position:absolute;

  top:30px;

  right:40px;

  font-size:48px;

  color:white;

  cursor:pointer;

  transition:.3s;

}

#closeSchedule:hover{

  color:var(--gold);

}
/*======================================================
    FAQ
======================================================*/

.faq-section{

  padding:120px 0;

}

.faq-grid{

  display:grid;

  grid-template-columns:360px 1fr;

  gap:90px;

  align-items:start;

}

/*==============================
LEFT
==============================*/

.faq-heading{

  position:sticky;

  top:120px;

}

.faq-section .section-title{

  font-size:50px;

  line-height:1.08;

  margin-bottom:24px;

}

.faq-intro{

  color:var(--grey);

  font-size:17px;

  line-height:1.8;

  max-width:300px;

}

/*==============================
RIGHT
==============================*/

.faq-list{

  width:100%;

}

.faq-item{

  border-bottom:1px solid rgba(255,255,255,.08);

}

.faq-question{

  width:100%;

  background:none;

  border:none;

  color:white;

  padding:30px 0;

  display:flex;

  justify-content:space-between;

  align-items:center;

  cursor:pointer;

  text-align:left;

  font-size:20px;

  font-weight:500;

  transition:.3s;

}

.faq-question:hover{

  color:var(--gold);

}

.faq-icon{

  color:var(--gold);

  font-size:34px;

  transition:.35s;

  flex-shrink:0;

  margin-left:25px;

}

.faq-answer{

  max-height:0;

  overflow:hidden;

  transition:max-height .45s ease;

}

.faq-answer p{

  color:#B8B8B8;

  line-height:1.9;

  font-size:16px;

  padding:0 0 28px;

  max-width:90%;

}

.faq-item.active .faq-answer{

  max-height:350px;

}

.faq-item.active .faq-icon{

  transform:rotate(45deg);

}

/*==============================
CONTACT
==============================*/

.faq-contact{

  margin-top:120px;

  text-align:center;

}

.faq-contact h3{

  font-family:"Cormorant Garamond",serif;

  font-size:54px;

  font-weight:500;

  margin-bottom:12px;

}

.faq-contact p{

  color:var(--grey);

  margin-bottom:50px;

  font-size:18px;

}

.contact-cards{

  display:flex;

  justify-content:center;

  gap:32px;

  flex-wrap:wrap;

}

.contact-card{

  width:340px;

  padding:36px;

  border:1px solid rgba(212,178,107,.25);

  border-radius:20px;

  text-decoration:none;

  transition:.35s;

  background:rgba(255,255,255,.02);

}

.contact-card:hover{

  transform:translateY(-6px);

  border-color:var(--gold);

  box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.contact-card h4{

  color:var(--gold);

  font-size:18px;

  letter-spacing:.15em;

  text-transform:uppercase;

  margin-bottom:18px;

}

.contact-card span{

  color:white;

  font-size:17px;

  word-break:break-word;

}
/*======================================================
FOOTER
======================================================*/

.site-footer{

  margin-top:120px;

  padding-bottom:60px;

}

/*==============================
CTA
==============================*/

.footer-cta{

  text-align:center;

  max-width:820px;

  margin:0 auto;

  padding:0 20px;

}

.footer-small-title{

  color:var(--gold);

  letter-spacing:.35em;

  text-transform:uppercase;

  font-size:13px;

  margin-bottom:18px;

}

.footer-cta h2{

  font-family:"Cormorant Garamond",serif;

  font-size:68px;

  font-weight:500;

  line-height:1.05;

  margin-bottom:26px;

}

.footer-cta p{

  max-width:620px;

  margin:0 auto 45px;

  color:var(--grey);

  font-size:18px;

  line-height:1.9;

}

.footer-divider{

  width:100%;

  height:1px;

  background:rgba(255,255,255,.08);

  margin:120px 0 90px;

}

/*==============================
Logo
==============================*/

.footer-logo{

  width:230px;

  display:block;

  margin:0 auto;

}

.footer-tagline{

  margin:35px auto 80px;

  text-align:center;

  font-family:"Cormorant Garamond",serif;

  font-size:34px;

  line-height:1.35;

}

/*==============================
Links
==============================*/

.footer-links{

  display:grid;

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

  gap:70px;

  margin-bottom:90px;

}

.footer-links h4{

  color:var(--gold);

  text-transform:uppercase;

  letter-spacing:.18em;

  font-size:13px;

  margin-bottom:24px;

}

.footer-links a{

  display:block;

  text-decoration:none;

  color:#B8B8B8;

  margin-bottom:16px;

  transition:.3s;

}

.footer-links a:hover{

  color:var(--gold);

}

/*==============================
Bottom
==============================*/

.footer-bottom{

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

  padding-top:32px;

  text-align:center;

  color:#777;

  line-height:1.9;

  font-size:14px;

}
/*===========Responsive===========*/
/*======================================================
HEADER RESPONSIVE
======================================================*/

/* Desktop */

@media (min-width:1025px){

  .desktop-nav{

      display:flex;

  }

  .mobile-menu{

      display:none;

  }

}

/* Tablet + Mobile */

@media (max-width:1200px){

  .desktop-nav{

      display:none;

  }

  .mobile-menu{

      display:block;

  }

}





/*======================================================
TABLET
(768px - 1199px)
======================================================*/

@media (max-width:1199px) and (min-width:768px){

  /*======================================================
  GLOBAL
  ======================================================*/
  
  .container{
  
      width:min(92%,1100px);
  
  }
  
  section{
  
      overflow:hidden;
  
  }
  
  /*======================================================
  HERO
  ======================================================*/
  
  .hero{
  
      min-height:100vh;
  
  }
  
  .hero-logo{
  
      width:300px;
      margin-top:-100px;
  
  
  }
  
  .hero-date{
  
      font-size:16px;
  
      margin-top:28px;
  
  }
  
  .hero h1{
  
      font-size:64px;
  
      line-height:1.05;
  
      margin:26px 0;
  
  }
  
  .hero-description{
  
      font-size:18px;
  
      max-width:680px;
  
  }
  
  .hero-buttons{
  
    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:nowrap;
  
  }
  .hero-buttons .gold-button,

.hero-buttons .outline-button{

  padding:16px 34px;

  font-size:15px;

}
  
  /*======================================================
  WHY
  ======================================================*/
  
  .highlights-grid{
  
    grid-template-columns:1fr;

    gap:60px;
  
  }
  
  .highlights-content{
  
    max-width:680px;

    margin:auto;

    text-align:center;
  
  }
  
  .highlights-list{
  
      max-width:500px;
  
      margin:50px auto 0;
  
  }
  
  .highlights-carousel{
  
    max-width:680px;

    margin:auto;
  
  }
  
  /*======================================================
  ARTISTS
  ======================================================*/
  
  .artists-grid{
  
      grid-template-columns:repeat(2,1fr);
  
      gap:34px;
  
  }
  
  .artist-card h3{
  
      font-size:28px;
  
  }
  
  /*======================================================
  COMPETITION
  ======================================================*/
  
  .competition-poster img{
  
      height:auto;
  
      width:100%;
  
  }
  
  /*======================================================
  VENUE
  ======================================================*/
  
  .venue-grid{
  
      grid-template-columns:1fr;
  
      gap:70px;
  
  }
  
  .venue-gallery{
  
      order:1;
  
  }
  
  .venue-content{
  
      order:2;
  
      max-width:700px;
  
      margin:auto;
  
      text-align:center;
  
  }
  
  .venue-item{
  
      justify-content:center;
  
  }
  
  .venue-address{
  
      text-align:center;
  
  }
  
  /*======================================================
  SCHEDULE
  ======================================================*/
  
  .schedule-grid{
  
      grid-template-columns:1fr;
  
      gap:70px;
  
  }
  
  .schedule-content{
  
      text-align:center;
  
      max-width:700px;
  
      margin:auto;
  
  }
  
  .schedule-note{
  
      max-width:500px;
  
      margin:28px auto 0;
  
  }
  
  .schedule-wrapper{
  
      justify-content:center;
  
  }
  
  .schedule-image-wrapper{
  
      max-width:700px;
  
  }
  
  /*======================================================
  FAQ
  ======================================================*/
  
  .faq-grid{
  
      grid-template-columns:1fr;
  
      gap:70px;
  
  }
  
  .faq-heading{
  
      position:static;
  
      text-align:center;
  
      max-width:700px;
  
      margin:auto;
  
  }
  
  .faq-intro{
  
      max-width:none;
  
  }
  
  .faq-contact h3{
  
      font-size:48px;
  
  }
  
  /*======================================================
  FOOTER
  ======================================================*/
  
  .footer-links{
  
      grid-template-columns:repeat(3,1fr);
  
      gap:40px;
  
  }
  
  .footer-cta h2{
  
      font-size:56px;
  
  }
  
  .footer-tagline{
  
      font-size:30px;
  
  }
  
  }

  /*======================================================
MOBILE
(<768px)
======================================================*/

@media (max-width:767px){

  /*======================================================
  GLOBAL
  ======================================================*/
  
  .container{
  
      width:92%;
  
  }
  
  section{
  
      padding:20px 0 !important;
  
  }
  
  .section-title{
  
      font-size:42px !important;
  
      line-height:1.1;
  
  }
  
  .section-tag{
  
      font-size:12px;
  
      letter-spacing:.28em;
  
  }
  

  
  /*======================================================
  HERO
  ======================================================*/
  
  .hero{
  
      min-height:100vh;
  
      padding:120px 0 70px;
  
  }
  
  .hero-logo{
  
      width:220px;
  
  }
  
  .hero-date{
  
      margin-top: 60px;
  
      font-size:14px;
  
  }
  
  .hero h1{
  
      font-size:44px;
  
      line-height:1.08;
  
      margin:22px 0;
  
  }
  
  .hero-description{
  
      font-size:17px;
  
      line-height:1.8;
  
      max-width:100%;

  
  }
  
  .hero-buttons{
  
      flex-direction:row;
  
      gap:18px;
  
      margin-top:40px;
  
  }
  
  .hero-buttons .gold-button,
  
  .hero-buttons .outline-button{
  
      width:100%;
  
      max-width:320px;
  
  }
  
  /*======================================================
WHY TANGO2LONDON
======================================================*/

.why-section{

    padding:0px 0;

}

.why-grid{

    display:flex;

    flex-direction:column;

    gap:50px;

}

.why-content{

    order:1;

    width:100%;

    max-width:100%;

    text-align:center;

    align-items:center;

}

.highlight-item{

    padding:24px 0;

}

.highlight-number{

    font-size:64px;

    margin-bottom:14px;

}

.highlight-icon{

    justify-content:center;

    font-size:20px;

    margin-bottom:14px;

}

.highlight-title{

    font-size:15px;

    letter-spacing:.15em;

    line-height:1.6;

}

.why-gallery{

    order:2;

    width:100%;

    max-width:100%;

    margin:0 auto;

}

.why-gallery img{

    width:100%;

    max-width:420px;

    margin:0 auto;

    display:block;

    border-radius:20px;

}
  
  /*======================================================
  ARTISTS
  ======================================================*/
  
  .artists-grid{
  
      grid-template-columns:repeat(2,1fr);
  
      gap:18px;
  
  }
  
  .artist-card h3{
  
      font-size:22px;
  
      margin-top:16px;
  
  }
  
  .artists-cta-text{
  
      font-size:34px;
  
  }
  
  /*======================================================
  COMPETITION
  ======================================================*/
  
  .competition-section{
  
      padding:0;
  
  }
  
  .competition-poster img{
  
      width:100%;
  
      height:auto;
  
      object-fit:contain;
  
  }
  
  .competition-buttons{
  
      flex-direction:column;
  
      align-items:center;
  
      gap:18px;
  
  }
  
  .competition-buttons .gold-button,
  
  .competition-buttons .outline-button{
  
      width:90%;
  
      max-width:320px;
  
  }
  
  /*======================================================
  VENUE
  ======================================================*/
  
  .venue-grid{
  
      grid-template-columns:1fr;
  
      gap:50px;
  
  }
  
  .venue-gallery{
  
      order:2;
  
  }
  
  .venue-content{
  
      order:1;
  
      text-align:center;
  
  }
  
  .venue-item{
  
      justify-content:center;
  
      text-align:center;
  
  }
  
  .venue-address{
  
      text-align:center;
  
  }
  
  /*======================================================
  SCHEDULE
  ======================================================*/
  
  .schedule-grid{
  
      grid-template-columns:1fr;
  
      gap:55px;
  
  }
  
  .schedule-content{
  
      order:1;
  
      text-align:center;
  
  }
  
  .schedule-wrapper{
  
      order:2;
  
  }
  
  .schedule-image-wrapper{
  
      max-width:100%;
  
  }
  
  .schedule-arrow{
  
      width:42px;
  
      height:42px;
  
      font-size:22px;
  
  }
  
  .schedule-lightbox{
  
      padding:15px;
  
  }
  
  .schedule-lightbox img{
  
      max-width:100%;
  
      max-height:90vh;
  
  }
  
  /*======================================================
  FAQ
  ======================================================*/
  
  .faq-grid{
  
      grid-template-columns:1fr;
  
      gap:55px;
  
  }
  
  .faq-heading{
  
      position:static;
  
      text-align:center;
  
  }
  
  .faq-intro{
  
      max-width:100%;
  
  }
  
  .faq-question{
  
      font-size:18px;
  
      padding:24px 0;
  
  }
  
  .faq-answer p{
  
      font-size:15px;
  
  }
  
  .contact-cards{
  
      flex-direction:column;
  
      align-items:center;
  
  }
  
  .contact-card{
  
      width:100%;
  
  }
  
  /*======================================================
  FOOTER
  ======================================================*/
  
  .footer-cta h2{
  
      font-size:48px;
  
  }
  
  .footer-cta p{
  
      font-size:17px;
  
  }
  
  .footer-divider{
  
      margin:90px 0 70px;
  
  }
  
  .footer-logo{
  
      width:180px;
  
  }
  
  .footer-tagline{
  
      font-size:28px;
  
      margin-bottom:60px;
  
  }
  
  .footer-links{
  
      grid-template-columns:1fr;
  
      gap:45px;
  
      text-align:center;
  
  }
  
  .footer-bottom{
  
      font-size:13px;
  
  }
  
  }

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


.mobile-nav{

  position:fixed;

  inset:0;

  background:rgba(11,11,13,.96);

  backdrop-filter:blur(20px);

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:34px;

  z-index:9999;

  opacity:0;

  visibility:hidden;

  transition:.4s;

}

.mobile-nav.active{

  opacity:1;

  visibility:visible;

}

.mobile-nav a{

  color:white;

  text-decoration:none;

  font-family:"Cormorant Garamond", serif;

  font-size:40px;

  transition:.3s;

}

.mobile-nav a:hover{

  color:var(--gold);

}

.mobile-close{

  position:absolute;

  top:35px;

  right:30px;

  background:none;

  border:none;

  color:white;

  font-size:52px;

  cursor:pointer;

}

.mobile-close:hover{

  color:var(--gold);

}