/* ==========================================================
   FEATURED VIDEO
========================================================== */

#featured-video{

    background: var(--color-bg);

    padding: 85px 0;

}

.video-thumbnail{

    max-width: 770px;

    margin: 0 auto;

    cursor: pointer;

}

.video-thumbnail img{

    width: 100%;

    display: block;

    transition: .35s ease;

}

.video-thumbnail:hover img{

    opacity: .92;

}

.video-content{

    text-align: center;

    margin-top: 22px;

}

.video-content h2{

    color: var(--color-primary);

    font-family: var(--font-heading);

    font-size: 2.2rem;

    margin-bottom: 10px;

    letter-spacing: .02em;

}

.video-content button{

    background: none;

    border: none;

    color: #d8e8ff;

    font-family: var(--font-heading);

    font-size: .9rem;

    cursor: pointer;

    transition: var(--transition);

}

.video-content button:hover{

    color: var(--color-primary);

}

/* ==========================================================
   VIDEO MODAL
========================================================== */

.video-modal{

    position:fixed;

    inset:0;

    background:#343839;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    flex-direction:column;

    padding:80px 0 40px;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:99999;

    overflow-y:auto;

}

.video-modal.active{

    opacity:1;

    visibility:visible;

}

.video-wrapper{

    position:relative;

    width:1140px;

    max-width:92%;

    aspect-ratio:16/9;

}

.video-wrapper iframe{

    width:100%;

    height:100%;

    border:none;

}

/* ==========================================================
   CLOSE
========================================================== */

.close-video{

    position:fixed;

    right:28px;

    top:18px;

    width:40px;

    height:40px;

    background:none;

    color:#fff;

    font-size:2rem;

    cursor:pointer;

    z-index:100000;

}

/* ==========================================================
   OVERLAY
========================================================== */

.video-overlay{

    display:none;

}






/* ==========================================================
   TOUR
========================================================== */

#tour {
    width: 100%;
    padding: 90px 0 110px;
    background: var(--color-bg);
}

/* ==========================================================
   TITLE
========================================================== */

.section-title {
    text-align: center;
    margin-bottom: 65px;
}

.section-title h2 {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 400;
    color: var(--color-primary);
    line-height: .9;
    letter-spacing: .02em;
}

/* ==========================================================
   TOUR CARD
========================================================== */

.tour-card {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 22px 12px;

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

}

.tour-card:last-child{

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

}

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

.tour-date{

    width:420px;

    flex-shrink:0;

}

.tour-date h3{

    font-family:var(--font-heading);

    font-size:1.65rem;

    color:#fff;

    margin-bottom:8px;

    line-height:1;

}

.tour-date p{

    font-size:1.18rem;

    color:var(--color-primary);

    margin-bottom:4px;

    line-height:1.3;

}

.tour-date small{

    display:block;

    font-size:.95rem;

    color:#9c9c9c;

    line-height:1.4;

}

/* ==========================================================
   CENTER
========================================================== */

.tour-location{

    flex:1;

}

.tour-location h3{

    font-family:var(--font-heading);

    font-size:1.25rem;

    font-weight:400;

    color:var(--color-primary);

}


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

.tour-actions{

    display:flex;

    align-items:center;

    gap:10px;

}

.tour-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:120px;

    height:30px;

    text-decoration:none;

    text-transform:uppercase;

    font-family:var(--font-heading);

    font-size:.78rem;

    line-height:1;

    letter-spacing:.06em;

    cursor:pointer;

    user-select:none;

    transition:
        background-color .12s linear,
        color .12s linear,
        border-color .12s linear;

}

/* ==========================
   VIP
========================== */

.vip-btn{

    background:transparent;

    color:var(--color-primary);

    border:1px solid var(--color-primary);

}

.vip-btn:hover{

    background:var(--color-primary);

    color:#2d3132;

    border-color:var(--color-primary);

}

/* ==========================
   TICKETS
========================== */

.ticket-btn{

    background:#ffffff;

    color:#1f1f1f;

    border:1px solid #ffffff;

}

.ticket-btn:hover{

    background:var(--color-primary);

    border-color:var(--color-primary);

    color:#2d3132;

}

/* ==========================
   ACTIVE / CLICK
========================== */

.tour-btn:active{

    transform:translateY(1px);

}


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

@media(max-width:991px){

    .tour-card{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .tour-date{

        width:100%;

    }

    .tour-location{

        width:100%;

    }

    .tour-actions{

        width:100%;

    }

}


/*==========================================================
  FOLLOW ALONG
==========================================================*/

#follow-along{

    padding:140px 0;

    background:var(--color-bg);

}

.follow-content{

    max-width:720px;

    margin:auto;

    text-align:center;

}

.follow-content h2{

    font-family:var(--font-heading);

    font-size:5rem;

    font-weight:400;

    color:var(--color-primary);

    line-height:.9;

    margin-bottom:25px;

}

.follow-content p{

    max-width:560px;

    margin:0 auto 50px;

    color:#c8c2b6;

    line-height:1.8;

    font-size:1rem;

}

.social-icons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:38px;

}

.social-icons a{

    color:#ffffff;

    font-size:1.8rem;

    transition:all .25s ease;

}

.social-icons a:hover{

    color:var(--color-primary);

    transform:translateY(-4px);

}

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

@media(max-width:768px){

    #follow-along{

        padding:100px 0;

    }

    .follow-content h2{

        font-size:3.5rem;

    }

    .social-icons{

        gap:24px;

    }

    .social-icons a{

        font-size:1.5rem;

    }

}


/*=====================================
GET IN TOUCH
======================================*/

#contact-options{

    padding:120px 0;

    background:var(--color-bg);

}

.contact-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.contact-header h2{

    margin-bottom:20px;

}

.contact-header p{

    color:var(--color-text-muted);

    line-height:1.8;

}

.contact-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:80px;

}

.contact-card{

    background:#111;

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

    padding:35px 28px;

    cursor:pointer;

    transition:.35s;

    display:flex;

    flex-direction:column;

    height:100%;

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:var(--color-accent);

}

.contact-icon{

    width:58px;

    height:58px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

}

.contact-icon i{

    font-size:1.35rem;

}

.contact-card h3{

    margin-bottom:15px;

    font-size:1.35rem;

}

.contact-card p{

    color:var(--color-text-muted);

    line-height:1.8;

    margin-bottom:35px;

    flex:1;

}

.contact-card span{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:.9rem;

    letter-spacing:1px;

    text-transform:uppercase;

    font-weight:600;

}

.contact-card span i{

    transition:.3s;

}

.contact-card:hover span i{

    transform:translateX(8px);

}

.contact-footer{

    max-width:700px;

    margin:auto;

    text-align:center;

}

.contact-footer p{

    color:var(--color-text-muted);

    margin-bottom:30px;

    line-height:1.8;

}

.contact-btn{

    display:inline-block;

    padding:16px 42px;

    border:1px solid #fff;

    color:#fff;

    text-decoration:none;

    transition:.3s;

    letter-spacing:1px;

    margin-bottom:22px;

}

.contact-btn:hover{

    background:#fff;

    color:#111;

}

.contact-email{

    display:block;

    text-decoration:none;

    color:var(--color-accent);

}

.contact-email:hover{

    text-decoration:underline;

}

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

@media(max-width:1100px){

    .contact-grid{

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

    }

}

@media(max-width:650px){

    .contact-grid{

        grid-template-columns:1fr;

    }

}