/* montserrat-600 - latin */
@font-face {
font-family: 'Satoshi';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/Satoshi-Regular.otf'), 
}

/* montserrat-700 - latin */
@font-face {
font-family: 'Satoshi';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/Satoshi-Medium.otf'), 
}

/* montserrat-800 - latin */
@font-face {
font-family: 'Satoshi';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/assets/fonts/Satoshi-Bold.otf'), 
}

/* montserrat-900 - latin */
@font-face {
font-family: 'Satoshi';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('/assets/fonts/Satoshi-Black.otf'), 
}
:root {
--bolt-black: #222;
--white: #ffffff;
--sol-black: #454545;
--background-grey: #FBFBFB;
--button-grey: #f5f5f5;
--inactive-text: #A3A3A3;
--booked-red: #FFE6E6;
}
* {
box-sizing: border-box;
margin: 0px;
font-family: 'Satoshi', serif;
letter-spacing: -0.03em;
color: var(--bolt-black);
scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
    width: 100vw;
    /* overflow-x: hidden; */
    background-color: #222;
    color: white;
}
.cursor,
.follower {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* So it doesn’t block clicks */
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.cursor {
  width: 33px;
  height: 33px;
  background: url('/assets/images/cursor.png') no-repeat center center;
  background-size: contain;
}

.follower {
  width: 36.5px;
  height: 32px;
  background: url('/assets/images/follower.png') no-repeat center center;
  background-size: contain;
  transition: transform 0.15s ease-out;
}
h1{
font-weight: 700;
letter-spacing: -0.05em;
font-size: 80px;
line-height: 75px;
color: white;
}

h2{
font-weight: 700;
letter-spacing: -0.05em;
font-size: 60px;
line-height: 65px;
color: white;
}
h3{
letter-spacing: -0.05em;
color: white;
}

.navigation-bar-mobile{
    display: none;
    height: 0px;
    width: 0px;
    overflow: hidden;
}
.navigation-bar-mobile a{
    color: white;
}
.navigation-bar{
    height: 80px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
}
.navigation-bar.opaque{
    background: rgba(58, 58, 58, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
}
.navigation-buttons-holder{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    color: white;
}
.navigation-buttons-holder a{
    text-decoration: none;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    
}
.navigation-buttons-holder a.bolded{
    font-weight: 800;
}
.bolt-logo{
    height: 40px;
    width: auto;
    margin-left: 50px;
    margin-right: auto;
    flex: none;
    -webkit-filter: invert(1);
}
.bolt-logo img{
    height: 100%;
    width: auto;
}

.bolt-cameleon{
    height: 40px;
    width: auto;
    margin-right: 50px;
    margin-left: auto;
    flex: none;
}
.bolt-cameleon img{
    height: 100%;
    width: auto;
    -webkit-filter: invert(1);
}





.intro-section{
    width: 100%;
    height: 110vh;
    margin-top: -90px;
    position: relative;

}
.intro-section img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.intro-section h1{
    position: absolute;
    bottom: 100px;
    left: 100px;
    font-size: 120px;
    line-height: 110px;
    color: white;
}


.side-text{
font-size: 18px;
width: 40%;
line-height: 18px;
}
.heading-side-text-row-column{
display: flex;
width: 90%;
margin-inline: auto;
align-items: start;
justify-content: space-between;

margin-top: 100px
}

.reverse-image-text-section{
    width: 95%;
    margin-inline:auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow-y: hidden;
    margin-top: 50px;
}
.reverse-container{
    height: 100vh;
    width: 40%;
    
    position: relative;
}
.reverse-image-scroller{
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column-reverse;
    scrollbar-width: none; /* Hides the scrollbar */
}
.reverse-image-scroller::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}

.reverse-image-gradient{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        to bottom,
        white 0%,         /* White at the very top */
        rgba(255, 255, 255, 0) 15%,        /* White up to 10% */
        transparent 10%,  /* Transparent from 10% */
        transparent 90%,  /* Transparent up to 90% */
        rgba(255, 255, 255, 0) 85%,        /* White from 90% */
        white 100%        /* White at the very bottom */
    );
}
.reverse-image-text-section h2{
    width: 50%;
    margin-left: 50px;
    margin-top:50px;
    font-size: 50px;
    font-weight: 700;
}
.reverse-image-scroller img{
    width: 100%;
}


.testimonial-brackets-section{
    width: 75%;
    margin-inline: auto;
    
    margin-top: 50px;
}
.testimonial-bracket-container{
    display: flex;
    margin-top: 50px;
}
.up-bracket{
    width: 100px;
    height: 200px;
    background: url("/assets/images/bracket-up.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 20px;
    flex: none;
}
#up-fade{
    background: url("/assets/images/bracket-up-fade.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.testimonial-brackets-section p{
    font-size: 25px;
    color: white;
    margin-inline: 50px;
    opacity: 1;
    transition: all 0.3s;
}
.testimonial-brackets-section p.hide{
    opacity: 0;
}
.down-bracket{
    width: 100px;
    height: 200px;
    background: url("/assets/images/bracket-down.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 20px;
    flex: none;
}
#down-fade{
    background: url("/assets/images/bracket-down-fade.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.grid-container {
    margin-top: 50px;
    display: grid;
    /* 5 equal columns */
    grid-template-columns: repeat(5, 1fr);
    /* 2 equal rows */
    grid-template-rows: repeat(2, 1fr);

    /* This creates the lines between cells */
    gap: 2px; /* 2px stroke */
    background-color: #313131; /* Gray color for the lines */
    border: 2px solid #313131; /* Add border around the whole grid */

    width: 90%; /* Adjust as needed */
    margin-inline: auto;

}

.grid-item {
    background-color: #222; /* White background for the cells */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 1.2em;
    color: #333;
    box-sizing: border-box; /* Include padding in element's total width/height */
    aspect-ratio: 1;
    transition: all 0.3s;
}
.grid-item:hover{
    background-color: #313131;
}
.grid-logo{
    width: 80%;
    height: 80%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-logo img{
    width: 100%;
    height: auto;
}



.team-section{
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
}
.team-box-row{
    display: flex;
    width: 100%;
    margin-top: 50px;
}
.team-box{
    width: 100%;
    
    height: 600px;
    flex: auto;
    margin-right: 15px;
    border-radius: 10px;
    filter: grayscale(100%);
    position: relative;
    cursor: pointer;
    transition: all 0.3s 0s linear;
}

.team-box.active{
    width: 600px;
    flex: none;
    filter: grayscale(0%);
    transition: all 0.8s 0s linear;
}
.flipped-name{
    position: absolute;
    bottom: 30px;
    right: 10px;
    rotate: 270deg;
    font-size: 30px;
    color: white;
    font-weight: 700;
}


.frosted-container{
    position: absolute;
    right: 15px;
    bottom: 15px;
    border-radius: 7px;
    padding: 15px;
    width: 75%;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    opacity: 1;
    transition: all 0.5s 0.6s;
}
.frosted-container.inactive{
    opacity: 0;
    transition: all 0.2s 0s;
}
.team-box-description{
    display: flex;
    flex-direction: column;
    width: 70%;
    
}
.frosted-container h3{
    font-size: 22px;
    font-weight: 700;
}
.frosted-container b{
    font-size: 13px;
    font-weight: 700;
    line-height: 0.9;
}
.frosted-container p{
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}
.frosted-container h4{
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
}
.accreditation-container{
 width: 30%;
 display: flex;
 flex-direction: column;
 align-items: end;
 justify-content: start;
}
.acrid-bubble{
    width: 90%;
    margin-bottom: 5px;
    padding-block: 5px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
}
.linkedin-logo{
    margin-top: 15px;
    height: 23px;
    width: 23px;
    background: url("/assets/images/linkedin.png");
    background-size: contain;
    opacity: 0.8;
}



.scattered-boxes-section{
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
    height: 600px;
}
.scattered-boxes-section h2{
    font-size: 120px;
    font-weight: 800;

}
.scattered-boxes-container{
    position: absolute;
    display: grid; 
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 10px; /* Padding inside the container */
}

.grid-box{
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 5px;
}
.perk-box{
    background: #f6f6f6;
    border-radius: 15px;
    padding: 20px;
    height: 250px;
    width: 200px;
    border: 2px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s 0.7s;
}
.perk-box.visible{
    opacity: 1;
}

#type2{
    background: #fff;
    transition: all 0.3s 1.3s;
}
#type2:first-child{
    background: #fff;
    transition: all 0.3s 0.9s;
}
#type3{
    border: 2px solid rgba(222, 222, 222, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(5px);
    transition: all 0.3s 1.8s;
}

.perk-box b{
    font-size: 20px;
}
.perk-box p{
    margin-top: 5px;
    font-size: 16px;
}




.points-and-images-section{
    width: 90%;
    margin-inline: auto;
    margin-block: 50px;
    margin-top: 70px;
    margin-bottom: 150px;
    overflow-x: hidden;
    overflow-y: visible;
    height: auto;
}
.points-and-images-row{
    position: relative;
    display: flex;
    margin-top: 50px;
    
}
.points-column{
    width: 60%;
}
.point-container{
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: solid 10px #313131;
    padding-inline: 20px;
    font-size: 30px;
    width: 100%;
    border-radius: 0px 12px 12px 0px;

}
.point-container h3{
    font-weight: 600
}
.point-container p{
    display: none;
    font-size: 18px;
    margin-top: 5px;
    color: white;
}
.point-container.active-point{
    height: 180px;
    border-left: solid 10px #fff;
    
    background: #313131b0;
    backdrop-filter: blur(5px);
    
}
.point-container.active-point p{
    display: block;
    
}
.point-image-container{
    width: 40%;
    height: 100%;
    position: absolute;
    right: 10%;
    top: -20px;
    z-index: -1;
}

.point-image-container img{
    height: 100%;
    width: auto;
    
}



.image-collection-section{
    width: 85%;
    margin-top: 50px;
    margin-inline: auto;

}
.image-collection-section img{
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}




.network-section{
    width: 85%;
    margin-top: 100px;
    margin-bottom: 60px;
    margin-inline: auto;
}

.network-section img{
    width: 100%;
    height: auto;
}





.stagered-boxes{
    width: 85%;
    margin-top: 10px;
    margin-inline: auto;
    
}

.stagered-container{
    width: 100%;
    display: flex;
    margin-top: 40px;
    gap: 15px;
}
.stagered-column{
    width: 100%;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.stagered-boxes img{
    width: 100%;
    height: auto;
    border-radius: 15px;
}
.large-stagered{
    width: 100%;
    border-radius: 20px;
    opacity: 0;
    
}
.small-stagered{
    width: 100%;
    border-radius: 20px;
    opacity: 0;
}
.large-stagered.appear{
    opacity: 1;
}
.small-stagered.appear{
    opacity: 1;
}

#small0{
    transition: all 0.8s 0.5s ease-out;
}
#small1{
    transition: all 0.8s 0.8s ease-out;
}
#big0{
    transition: all 0.8s 0s ease-out;
}
#big1{
    transition: all 0.8s 0.3s ease-out;
}



.horizontal-timeline-section{
    width: 100%;
    margin-top: 30px;
    position: relative;
    overflow: hidden;
    
}
.gradient-left{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, #222, transparent);
}
.gradient-right{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, #222, transparent);
}
.timeline-header{
    margin-left: 100px;
    margin-top: 100px;
}
.horizontal-timeline-container{
    height: 100%;
    display: flex;
    overflow-x: scroll;
    position: relative;
    scrollbar-width: none;
    flex: none;
    transition: transform 0.1s ease;
    width: max-content;
    margin-top: 50px;
}
.horizontal-timeline-container::-webkit-scrollbar{
    display: hidden;
}
.timeline-line{
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    background-color: #fff;
    height: 7px;
    transform: translateY(-50%);
}
.timeline-image-text-pair{
    width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 100px;
}
.timeline-text-container{
    height: 300px;
    width: 450px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-block: 70px;
    flex: none;
}
.timeline-dot{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    
    flex: none;
}
.timeline-text-container.under{
    justify-content: start;
}
.timeline-image-text-pair:first-child{
    margin-left: 20vw;
}
.timeline-image-text-pair h3{
    width: 90%;
    font-size: 30px;
}
.timeline-image-text-pair p{
    width: 90%;
    font-size: 18px;
    color: white;
}
.timeline-image-container{
    height: 300px;
    width: 450px;
    margin-block: 70px;
}
.timeline-image-container img{
    height: 300px;
    width: 450px;
    border-radius: 7px;
    object-fit: cover;
    flex: none;
}





.right-text-and-images-section{
    width: 85%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}
.right-text-and-images-section h3{
    width: 70%;
    font-size: 40px;
    margin-left: auto;
}
.right-text-and-images-section p{
    font-size: 20px;
    width: 70%;
    margin-left: auto;
    margin-top: 20px;
}
.right-text-and-images-row{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    gap: 20px;
}
.right-text-and-image{
    flex: none;
    height: 320px;
    width: 320px;
    background-color: #eee;
    border-radius: 20px;
}

.right-text-and-image img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
}






.team-information-section{
    width: 80%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    gap: 100px;
}
.team-information-text-column{
    width: 70%;
    opacity: 1;
    transition: 0.3s ease-in-out;
}
.team-information-text-column.disappear{
    width: 70%;
    opacity: 0;
}
.team-information-section h2{
    font-size: 50px;
    font-weight: 800;
}
.team-information-section b{
    font-size: 23px;
    font-weight: 800;
}
.team-information-section p{
    font-size: 19px;
    font-weight: 700;
    margin-top: 25px;
}
.team-information-section h3{
    font-size: 23px;
    font-weight: 800;
    margin-top: 20px;
}
.skills-bubbles-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
}
.skill-bubble{
    height: 40px;
    padding-inline: 20px;
    border-radius: 20px;
    border: solid 2.5px #222;
    flex: none;
    font-size: 21px;
    font-weight: 700;
    margin-right: 13px;
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-member-image {
    width: 80%;
    height: auto;
    margin-top: 20px;
    aspect-ratio: 1;
}
.team-member-image img{
    height: 100%;
    width: 100%;
    border-radius: 20px;
}



.career-section{
    width: 85%;
    margin-inline: auto;
    margin-top: 100px;
    margin-bottom: 100px;
}
.career-section h2{
    margin-left: 20px;
    margin-bottom: 30px;
}
.career-option{
    display: flex;
    align-items: center;
    padding: 20px;
    padding-block: 30px;
    border-bottom: solid 2px #DCDCDC;
}
.career-option:last-child
{
    border-bottom: none;
}
.career-description-container{
    width: 80%;
    margin-right: auto;

}
.career-description-container h3{
    font-size: 30px;
}
.career-description-container p{
    font-size: 17px;
}
.career-option b{
    font-size: 30px;
}
.apply-row{
    display: flex;
}


.contact-form-section{
    width: 40%;
    position: absolute;
    top: 150px;
    right: 80px;
    padding: 50px;
    padding-bottom: 30px;
    padding-right: 40px;
    border: 2px solid rgba(222, 222, 222, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(5px);
    border-radius: 10px;
}
.contact-form-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 550px;
    scrollbar-width: none;
    position: relative;
}
.contact-form-container::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}
.contact-form-line{
    height: 550px;
    width: 8px;
    background:  linear-gradient(
        to bottom,
        #22222200 0%,         /* Transparent at the very top */
        #222 10%,        /* Transparent up to 10% */
        #222 10%,               /* Black from 10% */
        #222 90%,               /* Black up to 90% */
        #222 90%,        /* Transparent from 90% */
        #22222200 100%         /* Transparent at the very bottom */
    );
    position: absolute;
    top: 50px;
    left: 56.5px;
}

.contact-form-question-container{
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: start;
    margin-top: 20px;
}
.contact-point{
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: #222;
    flex: none;
    margin-top: 7px;
}
.contact-question{
    margin-left: 15px;
    width: 90%;
}
.contact-form-question-container h3{
    font-size: 25px;
}


.question-bubbles-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
}
.question-bubble{
    height: 36px;
    padding-inline: 15px;
    border-radius: 18px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.5s ease-in-out;
}
.question-bubble.selected{
    background-color: #222;
    color: white;
}
.next-button{
    height: 40px;
    padding-inline:20px;
    border-radius: 20px;
    background-color: #222;
    color: white;
    width: min-content;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin-left: auto;
    margin-top: 20px;
}

.input-group {
    position: relative;
    width: 100%; /* Adjust width as needed */
    margin-bottom: 25px; /* Space for the floating label */
}
.input-field {
    width: 100%;
    padding: 10px 0; /* Vertical padding */
    border: none; /* Remove all borders */
    border-bottom: 2px solid #222; /* Only the bottom line */
    background-color: transparent; /* No background */
    font-size: 1rem;
    color: #222;
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    margin-top: 20px;
}

/* Change bottom line color on focus */
.input-field:focus {
    border-bottom-color: #222; /* Blue bottom line on focus */
}

/* Hide placeholder on focus for better floating label experience */
.input-field:focus::placeholder {
    color: transparent;
}

/* The Label for Floating Effect */
.input-label {
    position: absolute;
    left: 0;
    top: 20px; /* Aligns with input text */
    color: #222;
    font-size: 18px;
    pointer-events: none; /* Allows clicks to pass through to the input */
    transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.input-field:focus + .input-label,
    .input-field:not(:placeholder-shown) + .input-label {
        top: 0px; /* Move label up */
        font-size: 0.8rem; /* Make label smaller */
        color: #222; /* Change label color */
    }

    /* Prevent autocomplete background from interfering with transparency */
    .input-field:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
        -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
        transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
    }




.youtube-video-section{
    width: 80%;
    margin-inline: auto;
    border-radius: 20px;
    padding: 20px;
    padding-top: 40px;
    background-color: #313131;
    aspect-ratio: 1.77;
    margin-top: 50px;
}
.youtube-video-section h2{
    margin-left: 10px;
    margin-right: auto;
    margin-bottom: 10px;
}
.youtube-video{
    width: 100%;
    
    height: 100%;
    margin-top: 20px;
}
.youtube-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }
  
  .youtube-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

.venues-section{
    width: 85%;
    margin-inline: auto;
    margin-top: 20px;
}
.venues-container{
    margin-top: 40px;
    width: 100%;
    height: 800px;
    border-radius: 20px;
    background: url("/assets/images/venue.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}
.venue-description{
    width: 40%;
    
    display: flex;
    flex-direction: column;
    margin-block: 80px;
    margin-right: 70px;
}
.venues-container h3{
    font-size: 80px;
    line-height: 80px;
    
}
.venues-container p{
    font-size: 22px;
    margin-top: 30px;
}
.venue-bubbles{
    display: flex;
    margin-top: auto;
}
.venue-bubble{
    height: 45px;
    border: solid 2.5px #222;
    border-radius: 22.5px;
    padding-inline: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 10px;
}
.moving-boxes-container{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;


    width: 40%;
    max-width: 800px; /* Limit overall width */
     scrollbar-width: none;

}
.moving-boxes-container::-webkit-scrollbar{
    display: none;
}
.venue-box-row{
    display: flex;
    height: 350px;
    width: 100%;
    margin-top: 12px;
    
}
.box-spacer{
    width: 12px;
    height: 1px;
    flex: none;
}
.vanue-item{
    width: 50%;
    height: 350px;
    background-color: #ffffff79;
    
    margin-top: 15px;
    border-radius: 10px;

}
.vanue-item.right-vanue{
    margin-top: 100px;
}





.timeline-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
    background-color: #222;
}
.timeline-container{
    width: 100%;
    min-height: 40px;
    height: auto;
    position: relative;
}
.timeline-floating-box{
    position: absolute;
    padding-inline: auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff63;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);

    font-size: 30px;
    border-radius: 12px;
}
.timeline-container b{
    margin-inline: 25px;
}
.timeline-container p{
    position: absolute;
    right: 7%;
    bottom: 15%;
    font-size: 24px;
    font-weight: 700;
    width: 50%;
}
#float0{
    left: 10%;
    top: 40%;
}
#float1{
    left: 25%;
    top: 50%;
}
#float2{
    left: 40%;
    top: 60%;
}
#float3{
    left: 55%;
    top:40%;
}
#float4{
    left: 70%;
    top: 50%;
}
.timeline-container img{
    width: 100%;
    height: auto;

}




.hall-of-fame-section{
    width: 85%;
    margin-inline: auto;
    margin-top: 50px;
}
.fame-container{
    width: 100%;
    display: flex;
    margin-top: 40px;
}
.fame-line{
    width: 1px;
    height: 600px;
    background-color: #313131;
    margin-inline: 5px;
    flex: none;
}
.fame-box{
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fame-description{
    width: 90%;

}
.fame-image{
    width: 90%;
    height: auto;
}

.fame-image img{
    width: 100%;
    height: auto;
    border-radius: 7px;
}
.fame-box h3{
    font-size: 23px;
    margin-top: 15px;
    margin-inline: 10px;
    color: white;
}
.fame-box p{
    font-size: 18px;
    margin-top: -5px;
    margin-inline: 10px;
    color: white;
}
.fame-box h4{
    font-size: 40px;
    margin-top: 15px;
    margin-inline: 10px;
    color: white;
}
.fame-box span{
    font-size: 60px;
    color: white;
}


.golden-ratio-section{
    width: 70%;
    margin-inline: auto;
    margin-top: 50px;
}
.golden-ratio-container{
    display: flex;
    margin-top: 40px;
    gap: 15px;
}
.golden-ratio-column{
    width: 66%;
    
    height: 350px;
    gap: 15px;
}
.golden-column-two{
    width: 33%;
    
    
    height: 700px;
    gap: 15px;
}
.golden-top-two{
    width: 100%;
    height: 68%;
    background: url("/assets/images/golden-top1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    border: solid 2px #eee;

}
.golden-bottom-three{
    width: 100%;
    height: 30%;
    background: url("/assets/images/golden-bottom2.png"), #222;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 15px;
}
.golden-top{
    width: 100%;
    height: 340px;
    background-color: #eee;
    background: url("/assets/images/golden-top.png");
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    display: flex;
}
.golden-frosted-label{
    height: 70px;
    width: 95%;
    margin-inline: auto;
    margin-top: auto;
    margin-bottom: 20px;    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    font-size: 30px;
    border-radius: 20px;
}
.golden-row{
    height: 345px;
    display: flex;
    gap: 15px;
    margin-top: 15px;
}
.golden-bottom-one{
    width: 55%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
    border: solid 2px #eee;
    background: url("/assets/images/golden-bottom0.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}
.golden-bottom-two{
    width: 45%;
    height: 100%;
    background-color: #E8E8E8;
    background:  url('/assets/images/golden-bottom1.png'), #E8E8E8;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
}










.numbers-section{
    width: 85%;
    margin-inline: auto;
    margin-top: 50px;
}
.numbers-box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}
.number-box{
    background-color: #313131;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 270px;
    width: 200px;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.number-box h3{
    font-size: 20px;
    color: white;
}
.number-box b{
    font-size: 60px;
    font-weight: 600;
    color: white;
}



.service-boxes-container{
display: flex;
margin-top: 50px;

width: 95%;
margin-inline: auto;
}
.service-box{
height: 360px;
width: 100%;
background-color: #A3A3A3;
margin-left: 20px;
border-radius: 40px;
position: relative;
cursor: pointer;
transition: all 0.3s linear;
}
.service-box:hover{
width: 150%;

transition: all 0.3s linear;
}
.service-box:hover .service-label-container {
width: 50%;
margin-left: 20px;
margin-right: auto;
padding-inline: 30px;
transition: all 0.3s linear;
}
.service-background{
height: 360px;
width: 100%;

}
.service-background img{
height: 100%;
object-fit: cover;
width: 100%;
border-radius: 40px;
}
.service-box-overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.service-bubbles-arrow-row{
display: flex;
margin-top: 20px;
margin-inline: 20px;
margin-bottom: auto;
}
.service-bubble{
height: 40px;
width: auto;
padding: 10px;
padding-inline: 15px;
border-radius: 20px;
border: #fff solid 3px;
color: white;
font-weight: 700;


display: flex;
align-items: center;
justify-content: center;
}
.arrow-NE{
height: 32px;
width: 35px;
background-image: url("/assets/images/arrow.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: 5px;
margin-top: 10px;
}
.service-label-container{

height: 75px;
border-radius: 20px;
width: 90%;
margin-inline: auto;
margin-bottom: 20px;
margin-top: auto;
border: 2px solid rgba(255, 255, 255, 0.30);
background: rgba(255, 255, 255, 0.63);
backdrop-filter: blur(13.149999618530273px);
display: flex;
align-items: center;
justify-content: center;
font-size: 27px;
font-weight: 700;
transition: all 0.2s linear;

}

.blog-posts-footer-container{
display: flex;
margin-top: 40px;
padding-right: 20px;
margin-bottom: 120px;
width: 90%;
margin-inline:auto;
}
.blog-box{

width: 100%;

margin-left: 20px;
border-radius: 15px;
position: relative;
padding-bottom: 20px;
cursor: pointer;
}
.blog-box:hover{
background-color: #000;

}
.blog-box:hover .blog-image-overlay{
background: linear-gradient(0deg, #000 5.25%, rgba(0, 0, 0, 0) 100%);
}
.blog-image-container{
height: 250px;
width: 100%;
background-color: #222;
border-radius: 15px 15px 0px 0px;
position: relative;

}
.blog-background{
height: 250px;
width: 100%;
}
.blog-background img{
height: 100%;
object-fit: cover;
width: 100%;
border-radius: 15px;
}
.blog-image-overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
padding: 20px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(0deg, #222222 5.25%, rgba(34, 34, 34, 0.00) 100%);
}
.glass-tag{
    height: 40px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 8px;
    border: #ffffffa1 solid 2px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(13px);
    color: #222;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    }

.dark-bubble{
height: 40px;
width: auto;
padding: 10px;
padding-inline: 15px;
border-radius: 20px;
border: #fff solid 2px;
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.blog-description-container{
margin-top: 20px;
width: 95%;
margin-inline: auto;
}
.blog-description-container h3{
font-size: 32px;
line-height: 40px;
color: #fff;
}
.blog-description-container p{
font-size: 18px;
font-weight: 600;
margin-top: 10px;
line-height: 22px;
color: #fff;
}
.blog-tags-arrow-row{
display: flex;
margin-top: 30px;
}
.arrow-NE{
height: 32px;
width: 35px;
background-image: url("/assets/images/arrow.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: 5px;
margin-top: 10px;
-webkit-filter: invert(1);
}
.arrow-NE-dark{
height: 32px;
width: 35px;
background-image: url("/assets/images/arrow-dark.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: 5px;
margin-top: 10px;
-webkit-filter: invert(1);
}

.footer{
background-color: #000;
min-height: 400px;
display: flex;
flex-direction: column;
padding: 40px;
color: white;
}
.footer-logo{
width: 180px;
height: 48px;
background: url("/assets/images/logo-large.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
-webkit-filter: invert(1);

}
.footer-columns-row{
    display: flex;
    
}
.footer-column{
    display: flex;
    flex-direction: column;
    width: 100%;
    
}
.footer-column h4{
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.05em;
    color: white;

}
.footer-column a{
    font-size: 22px;
    opacity: 0.44;
    text-decoration: none;
    color: white;

}
.footer-column span{
    text-decoration: underline;
    color: white;
}
.footer b{
    margin-top: 100px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    opacity: 0.4;
    color: white;

}
.text-logo-row{
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.footer-logo-small{
    width: 53px;
    height: 45px;
    background: url("/assets/images/footer-logo-small.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}





.study-boxes-container{
    display: flex;
    margin-top: 40px;
    padding-right: 20px;
    width: 90%;
    margin-inline: auto;
    }
    .study-box{
    height: 360px;
    width: 100%;
    background-color: #A3A3A3;
    margin-left: 20px;
    border-radius: 40px;
    position: relative;
    cursor: pointer;
    }
    
    
    
    .study-background{
    height: 360px;
    width: 100%;
    
    }
    .study-background img{
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 40px;
    }
    .study-box-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.05s linear;
    }
    .study-box-hovered-overlay{
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(13px);
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 40px;
        transition: all 0.2s linear;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        color: #fff;
        font-weight: 700;
        font-size: 20px;
        opacity: 0;
        transition: all 0.3s 0.05s linear;
    }
    .study-bubbles-arrow-row{
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
    }
    .study-bubble{
    height: 40px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 3px;
    color: white;
    font-weight: 700;
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .study-label-container{
    
    height: 90px;
    border-radius: 30px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
    
    }


    .spacer {
        height: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

      }
      
      .horizontal-scroll {
        position: relative;
        height: 100vh;
        width: 100%;
        
        /* overflow-x: hidden; */
      }
      
      .scroll-track {
        display: flex;
        height: 100vh;
        width: max-content;
        position: sticky;
        top: 0;
      }
      
      .panel {
        width: 700px;
        height: 100%;


        
        padding-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        
       
        margin-left: 30px;
      }
      .panel h3{
        font-size: 25px;
        font-weight: 700;
        margin-inline: 20px;
        margin-top: 20px;
        letter-spacing: -0.03em;
      }

        .scrolling-boxes-image-container{
        height: 500px;
        width:700px;
        background-color: #A3A3A3;
        margin-left: 20px;
        border-radius: 40px;
        position: relative;
        cursor: pointer;
        }


        .scrolling-boxes-image-container img{
        height: 100%;
        object-fit: cover;
        width: 100%;
        border-radius: 40px;
        }
        .scrolling-boxes-image-overlay{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        opacity: 1;
        transition: all 0.05s linear;
        }
        .scrolling-box-bubbles-row{
            display: flex;
            margin-top: 20px;
            margin-inline: 20px;
            margin-bottom: auto;
            }
        .scrolling-box-bubble{
            height: 40px;
            width: auto;
            padding: 10px;
            padding-inline: 15px;
            border-radius: 20px;
            border: #fff solid 3px;
            color: white;
            font-weight: 700;
            font-size: 20px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            }
        
            .scrolling-box-label-container{
            
            height: 90px;
            border-radius: 30px;
            width: 90%;
            margin-inline: auto;
            margin-bottom: 20px;
            margin-top: auto;
            border: 2px solid rgba(255, 255, 255, 0.30);
            background: rgba(255, 255, 255, 0.346);
            backdrop-filter: blur(13.149999618530273px);
            -webkit-backdrop-filter: blur(13px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            font-weight: 700;
            transition: all 0.2s linear;
            padding: 20px;
            
            }


            .image-text-section{
                width: 90%;
                margin-inline: auto;
                margin-top: 70px;
            }
            .image-text-section h2{
                margin-bottom: 40px;
                margin-left: 100px;
            }

            .image-text-container{
                display: flex;
                width: 100%;
                
                align-items: center;
                justify-content: center;
                margin-bottom: 30px;
            }
            .image-text-container:first-child{
                margin-top: 40px;
            }

            .image-container{
                width: 600px;
                height: 730px;
                position: relative;
            }
            .image-cover{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 600px;
                height: 730px;
                transition: all 0.9s 1s ease-in-out;
                background-color: #fff;
            }
            .image-cover.appear{
                height: 0px;
            }
            .image-text-container img{
                width: 600px;
                height: 730px;
                
            }

            .text-description{
                margin-inline: 80px;
                max-width: 600px;

            }
            .text-description h4{
                font-size: 40px;
                line-height: 45px;
            }

            .text-description b{
                margin-top: 200px;
                font-size: 30px;
                font-weight: 800;
            }
            .text-description p{
                font-size: 20px;
                font-weight: 700;
                color: #A3A3A3;
            }

            .faq-section{
                display: flex;
                margin-inline: 30px;
                margin-top: 40px;
                width: 90%;
                margin-inline: auto;
            }
            .faq-image-container{
                width: 40%;
                height: 35vw;
                position: relative;
                margin-left: auto;
                margin-right: 50px;
            }
            .faq-image-container img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 7px;
            }
            .faq-categories-container{
                position: absolute;
                top: 20px;
                right: -40px;
                display: flex;
                flex-direction: column;
            }
            .faq-category{
                width: 350px;
                height: auto;
                padding: 15px;
                padding-inline: 20px;
                border: 2px solid rgba(255, 255, 255, 0.30);
                background: #d9d3d34f;
                backdrop-filter: blur(30px);
                -webkit-backdrop-filter: blur(30px);
                border-radius: 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 28px;
                margin-top: 10px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s;
               
            }
            .faq-category:hover{
                transform: translateX(20px);
            }
            .right-arrow{
                height: 30px;
                width: 30px;
                background: url("/assets/images/arrow-right.png");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }
            .faq-questions-section{
                width: 55%;
                margin-inline: auto;
                padding-top: 40px;
                transition: all 600ms ease-in-out;
                opacity: 1;
            }
            .faq-questions-section.blink{
                opacity: 0;
            } 
            .faq-question-container{
                border-bottom: solid 2px #313131;
                width: 100%;
                padding-inline: 30px;
                padding-block: 15px;
                display: flex;
                flex-direction: column;
                align-items: start;
                
                cursor: pointer;
            }
            .faq-q-arrow-row{
                display: flex;
                margin-block: 5px;
                width: 100%;
                justify-content: space-between;
            }
            .faq-question-container p{
                font-size: 22px;
                font-weight: 600;
                color: white;
            }
            .faq-question-container b{
                height: 0px;
                color: #222;
                width: 100%;
                font-size: 18px;
                font-weight: 600;
                overflow-y: hidden;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 300ms ease-in-out,
                color 300ms 0ms ease-in-out;
            }
            .faq-question-container.clicked b{
                height: 100px;
                color: #fff;
                transition: all 600ms ease-in-out,
                color 600ms 400ms ease-in-out;
            }
            .downwards-arrow{
                width: 20px;
                height: 20px;
                background: url("/assets/images/arrow-dark.png");
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                rotate: 180deg;
                transition: all 600ms;
                -webkit-filter: invert(1);
            }
            .faq-question-container.clicked .downwards-arrow{
                rotate: 0deg;
            }

.blog-page{
    width: 90%;
    margin-inline: auto;
    max-width: 1400px; 
    display: flex;
    flex-direction: column;
    margin-top: -50px;
}
.blog-header{
    width: 90%;
    margin-inline: auto;
    max-width: 1400px;
    display: flex;
    align-items: start;
    justify-content: start;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -00%);
    
}
.blog-header h1{
    position: relative;
    font-size: 80px;
    line-height: 80px;
    bottom: unset;
    left: unset;
    width: 90%;
    margin-left: 5%;
    margin-right: auto;
    
}
.blog-page p{
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    font-size: 20px;
}
.blog-page h2{
    width: 90%;
    padding-left: 5%;
    margin-right: auto;
    margin-top: 50px;
    font-size:40px;
    margin-bottom: -25px;
}
.blog-page img{
    width: 95%;
    margin-inline: auto;
    height: auto;
    margin-top: 50px;
}

/* mobile */
@media (max-width: 480px) {

    .youtube-video-section{
        width: 95%;
        
        height: unset;
        margin-inline: auto;
        border-radius: 10px;
        padding: 10px;
        padding-top: 20px;
        background-color: #313131;
        
    }
    .youtube-video{
        flex: none;
        width: 100%;
        
        height: 300px;
        margin-top: 10px;
    }

    .cursor,
.follower {
    display: none;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* So it doesn’t block clicks */
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.cursor {
    display: none;
  width: 33px;
  height: 33px;
  background: url('/assets/images/cursor.png') no-repeat center center;
  background-size: contain;
}

.follower {
  width: 36.5px;
  height: 32px;
  background: url('/assets/images/follower.png') no-repeat center center;
  background-size: contain;
  transition: transform 0.15s ease-out;
}
h1{
font-weight: 700;
letter-spacing: -0.05em;
font-size: 40px;
line-height: 75px;
}

h2{
font-weight: 700;
letter-spacing: -0.05em;
font-size: 30px;
line-height: 28px;
}
h3{
letter-spacing: -0.05em;
}

.navigation-bar-mobile{
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
    width: 100%;
    height: 100vh;
    z-index: 8000;
    background-color: #1b1b1b83;
    backdrop-filter: blur(13.1px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    opacity: 1;
    transition: all 0.3s 0s ease-in-out;
}
.navigation-bar-mobile .bolt-logo{
    margin-right: 10px;
    margin-left: -10px;
    margin-top: 40px;
    margin-bottom: 20px;
    height: 30px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-filter: invert(1);
    
}
.navigation-bar-mobile.hide-bar{    
    display: none;
    opacity: 0;
    transition: all 0.3s 0.3s ease-in-out;
}
.navigation-bar-mobile a{
    font-size: 25px;
    margin-top: 20px;
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s 0.3s ease-in-out;
}
.navigation-bar-mobile a:nth-child(1) {
  transition-delay: 0s;
}

.navigation-bar-mobile a:nth-child(2) {
    transition-delay: 0.1s;
}

.navigation-bar-mobile a:nth-child(3) {
    transition-delay: 0.2s;
}
.navigation-bar-mobile a:nth-child(4) {
    transition-delay: 0.3s;
}
.navigation-bar-mobile a:nth-child(5) {
    transition-delay: 0.4s;
}
.navigation-bar-mobile a:nth-child(6) {
    transition-delay: 0.5s;
}
.navigation-bar-mobile a:nth-child(7) {
    transition-delay: 0.6s;
}
.navigation-bar-mobile a:nth-child(8) {
    transition-delay: 0.7s;
}
.navigation-bar-mobile a:nth-child(9) {
    transition-delay: 0.8s;
}
.navigation-bar-mobile a:nth-child(10) {
    transition-delay: 0.9s;
}
.navigation-bar-mobile.hide-bar a{
    opacity: 0;

    transition: all 0.3s 0s ease-in-out;
}
.navigation-bar{
    height: 50px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
}
.navigation-bar.opaque{
    background: rgba(58, 58, 58, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
}
.navigation-buttons-holder{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.navigation-buttons-holder a{
    display: none;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    color: #fff;

}
.bolt-logo{
    height: 25px;
    width: auto;
    margin-left: 10px;
    margin-right: auto;
    flex: none;
    -webkit-filter: invert(1);
}
.bolt-logo img{
    height: 100%;
    width: auto;
}

.bolt-cameleon{
    height: 25px;
    width: auto;
    width: 23px;
    margin-right: 10px;
    margin-left: auto;
    flex: none;
    background: url("/assets/images/burger-white.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}
.bolt-cameleon img{
    height: 100%;
    width: auto;
    opacity: 0;
}






.intro-section{
    width: 100%;
    height: 110vh;
    margin-top: -90px;
    position: relative;
    overflow-x: hidden;
}
.intro-section img{
    width: 100%;
    height: 100%;
    
}

.intro-section h1{
    position: absolute;
    bottom: 70px;
    left: 20px;
    font-size: 50px;
    line-height: 45px;
}


.side-text{
font-size: 14px;
width: 95%;
line-height: 18px;
}
.heading-side-text-row-column{
display: flex;
flex-direction: column;
width: 90%;
margin-inline: auto;
align-items: start;
justify-content: space-between;

margin-top: 50px
}

.reverse-image-text-section{
    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow-y: hidden;
    margin-top: 0px;
}
.reverse-container{
    height: unset;
    width: 0%;
    
    position: relative;
}
.reverse-image-scroller{
    
    height: 100vh;
    width: 0%;
    
    overflow-y: scroll;
    display: none;
    flex-direction: column-reverse;
    scrollbar-width: none; /* Hides the scrollbar */
}
.reverse-image-scroller::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}

.reverse-image-gradient{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(
        to bottom,
        white 0%,         /* White at the very top */
        rgba(255, 255, 255, 0) 15%,        /* White up to 10% */
        transparent 10%,  /* Transparent from 10% */
        transparent 90%,  /* Transparent up to 90% */
        rgba(255, 255, 255, 0) 85%,        /* White from 90% */
        white 100%        /* White at the very bottom */
    );
}
.reverse-image-text-section h2{
    width: 100%;
    margin-left: 0px;
    margin-top:50px;
    font-size: 30px;
    line-height: 33px;
    font-weight: 700;
}
.reverse-image-scroller img{
    width: 0%;
}


.testimonial-brackets-section{
    width: 95%;
    margin-inline: auto;
    
    margin-top: 10px;
}
.testimonial-bracket-container{
    display: flex;
    margin-top: 50px;
}
.up-bracket{
    width: 20px;
    height: 200px;
    background: url("/assets/images/bracket-up.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
    flex: none;
}
#up-fade{
    background: url("/assets/images/bracket-up-fade.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.testimonial-brackets-section p{
    font-size: 12px;
    
    margin-inline: 10px;
    opacity: 1;
    transition: all 0.3s;
    
}
.testimonial-brackets-section p.hide{
    opacity: 0;
}
.down-bracket{
    width: 20px;
    height: 200px;
    background: url("/assets/images/bracket-down.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
    flex: none;
}
#down-fade{
    background: url("/assets/images/bracket-down-fade.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.grid-container {
    margin-top: 20px;
    display: grid;
    /* 5 equal columns */
    grid-template-columns: repeat(2, 1fr);
    /* 2 equal rows */
    grid-template-rows: repeat(5, 1fr);

    /* This creates the lines between cells */
    gap: 2px; /* 2px stroke */
    background-color: #313131; /* Gray color for the lines */
    border: 2px solid #313131; /* Add border around the whole grid */

    width: 90%; /* Adjust as needed */
    margin-inline: auto;

}

.grid-item {
    background-color: #222; /* White background for the cells */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 1.2em;
    color: #333;
    box-sizing: border-box; /* Include padding in element's total width/height */
    aspect-ratio: 1;
    transition: all 0.3s;
}
.grid-item:hover{
    background-color: #313131;
}
.grid-logo{
    width: 80%;
    height: 80%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-logo img{
    width: 100%;
    height: auto;
}



.team-section{
    width: 90%;
    margin-inline: auto;
    margin-top: 20px;
}
.team-box-row{
    display: flex;
    width: 100%;
    margin-top: 20px;
    flex-direction: column;
}
.team-box{
    width: 100%;
    background: url("/assets/images/team1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 60;
    
    flex: auto;
    margin-right: 0px;
    margin-top: 7px;
    border-radius: 10px;
    filter: grayscale(100%);
    position: relative;
    cursor: pointer;
    transition: all 0.3s 0s linear;
}
.team-box.active{
    width: 100%;
    height: unset;
    aspect-ratio: 1;
    flex: none;
    filter: grayscale(0%);
    transition: all 0.8s 0s linear;
}
.flipped-name{
    position: absolute;
    bottom: 10px;
    right: 10px;
    rotate: 0deg;
    font-size: 22px;
    color: white;
    font-weight: 700;
}


.frosted-container{
    position: absolute;
    right: 15px;
    bottom: 15px;
    border-radius: 7px;
    padding: 15px;
    width: 80%;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    display: flex;
    opacity: 1;
    transition: all 0.5s 0.6s;
}
.frosted-container.inactive{
    opacity: 0;
    transition: all 0.2s 0s;
}
.team-box-description{
    display: flex;
    flex-direction: column;
    width: 100%;
    
}
.frosted-container h3{
    font-size: 18px;
    font-weight: 700;
}
.frosted-container b{
    font-size: 12px;
    font-weight: 700;
    line-height: 0.9;
}
.frosted-container p{
    font-size: 10px;
    font-weight: 600;
    margin-top: 10px;
}
.frosted-container h4{
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
}
.accreditation-container{
 width: 20px;
 display: flex;
 flex-direction: column;
 align-items: end;
 justify-content: start;
}
.acrid-bubble{
    width: 20px;
    
    margin-bottom: 5px;
    padding-block: 5px;
    font-size: 13px;
    display: flex;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
}
.linkedin-logo{
    margin-top: 15px;
    height: 20px;
    width: 20px;
    background: url("/assets/images/linkedin.png");
    background-size: contain;
    opacity: 0.8;
}



.scattered-boxes-section{
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 50px;
    margin-bottom: 20px;
    height: 800px;
}
.scattered-boxes-section h2{
    font-size: 70px;
    font-weight: 800;

}
.scattered-boxes-container{
    position: absolute;
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    column-gap: 30px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 10px; /* Padding inside the container */
}

.grid-box{
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 0px;
    border-radius: 5px;
}
.perk-box{
    background: #f6f6f6;
    border-radius: 15px;
    padding: 10px;
    height: 160px;
    width: 130px;
    border: 2px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s 0.7s;
}
.perk-box.visible{
    opacity: 1;
}

#type2{
    background: #fff;
    transition: all 0.3s 1.3s;
}
#type2:first-child{
    background: #fff;
    transition: all 0.3s 0.9s;
}
#type3{
    border: 2px solid rgba(222, 222, 222, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(5px);
    transition: all 0.3s 1.8s;
}

.perk-box b{
    font-size: 14px;
    display: none;
}
.perk-box p{
    margin-top: 5px;
    font-size: 11px;
}




.points-and-images-section{
    width: 95%;
    margin-inline: auto;
    margin-block: 50px;
    margin-top: 70px;
    margin-bottom: 50px
}
.points-column{
    width: 100%;
}
.points-and-images-row{
    position: relative;
    display: flex;
    margin-top: 50px;
}
.point-container{
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: solid 5px #313131;
    padding-inline: 10px;
    font-size: 30px;
    width: 100%;
    border-radius: 0px 12px 12px 0px;

}
.point-container h3{
    font-weight: 600;
    font-size: 20px;
}
.point-container p{
    display: none;
    font-size: 14px;
    margin-top: 5px;
    color: #fff;
}
.point-container.active-point{
    height: 180px;
    border-left: solid 5px #fff;
    
    background: #32323274;
    backdrop-filter: blur(5px);
    
}
.point-container.active-point p{
    display: block;
}
.point-image-container{
    display: none;
    width: 50%;
    height: 120%;
    position: absolute;
    right: 0;
    top: -20px;
    z-index: -1;
}

.point-image-container img{
    height: 100%;
    width: auto;
    
}



.image-collection-section{
    width: 85%;
    margin-top: 50px;
    margin-inline: auto;

}
.image-collection-section img{
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}




.network-section{
    width: 85%;
    margin-top: 100px;
    margin-bottom: 60px;
    margin-inline: auto;
}

.network-section img{
    width: 100%;
    height: auto;
}





.stagered-boxes{
    width: 95%;
    margin-top: 10px;
    margin-inline: auto;
    
}

.stagered-container{
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    margin-top: 40px;
    gap: 5px;
}
.stagered-column{
    width: 100%;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.stagered-boxes img{
    width: 100%;
    height: auto;
    border-radius: 5px;
}
.large-stagered{
    width: 100%;
    border-radius: 20px;
    opacity: 0;
    
}
.small-stagered{
    width: 100%;
    border-radius: 20px;
    opacity: 0;
}
.large-stagered.appear{
    opacity: 1;
}
.small-stagered.appear{
    opacity: 1;
}

#small0{
    transition: all 0.8s 0.5s ease-out;
}
#small1{
    transition: all 0.8s 0.8s ease-out;
}
#big0{
    transition: all 0.8s 0s ease-out;
}
#big1{
    transition: all 0.8s 0.3s ease-out;
}



.horizontal-timeline-section{
    width: 100%;
    margin-top: 20px;
    position: relative;
   
}
.gradient-left{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, #222, transparent);
}
.gradient-right{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 0px;
    height: 100%;
    background: linear-gradient(to left, #222, transparent);
}
.timeline-header{
    margin-left: 20px;
    margin-top: 50px;
}
.horizontal-timeline-container{
    height: unset;
    display: flex;
    overflow-x: scroll;
    position: relative;
    scrollbar-width: none;
    flex: none;
}
.horizontal-timeline-container::-webkit-scrollbar{
    display: hidden;
}
.timeline-line{
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    background-color: #fff;
    height: 7px;
    transform: translateY(-50%);
}
.timeline-image-text-pair{
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 100px;
}
.timeline-text-container{
    height: 220px;
    width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-block: 30px;
    flex: none;
}
.timeline-dot{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    
    flex: none;
}
.timeline-text-container.under{
    justify-content: start;
}
.timeline-image-text-pair:first-child{
    margin-left: 5vw;
}
.timeline-image-text-pair h3{
    width: 90%;
    font-size: 20px;
}
.timeline-image-text-pair p{
    width: 90%;
    font-size: 14px;
}
.timeline-image-container{
    height: 220px;
    width: 280px;
    margin-block: 30px;
}
.timeline-image-container img{
    height: 100%;
    width: 100%;
}





.right-text-and-images-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}
.right-text-and-images-section h3{
    width: 90%;
    font-size: 22px;
    margin-left: auto;
}
.right-text-and-images-section p{
    font-size: 15px;
    width: 90%;
    margin-left: auto;
    margin-top: 10px;
}
.right-text-and-images-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    gap: 5px;
}
.right-text-and-image{
    flex: none;
    height: unset;
    width: 100%;
    background-color: #eee;
    border-radius: 5px;
}

.right-text-and-image img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
}






.team-information-section{
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    gap: 100px;
}
.team-information-text-column{
    width: 100%;
    opacity: 1;
    transition: 0.3s ease-in-out;
}
.team-information-text-column.disappear{
    width: 100%;
    opacity: 0;
}
.team-information-section h2{
    font-size: 27px;
    font-weight: 800;
}
.team-information-section b{
    font-size: 15px;
    font-weight: 800;
}
.team-information-section p{
    font-size: 15px;
    font-weight: 700;
    margin-top: 25px;
}
.team-information-section h3{
    font-size: 18px;
    font-weight: 800;
    margin-top: 20px;
}
.skills-bubbles-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
}
.skill-bubble{
    height: 30px;
    padding-inline: 10px;
    border-radius: 20px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 7px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-member-image {
    width: 80%;
    height: auto;
    margin-top: 20px;
    display: none;
}
.team-member-image img{
    height: auto;
    width: 100%;
    border-radius: 20px;
}



.career-section{
    width: 90%;
    margin-inline: auto;
    margin-top: 100px;
    margin-bottom: 100px;
}
.career-section h2{
    margin-left: 0px;
    margin-bottom: 30px;
}
.career-option{
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 5px;
    padding-block: 30px;
    border-bottom: solid 2px #DCDCDC;
}
.career-option:last-child
{
    border-bottom: none;
}
.career-description-container{
    width: 100%;
    margin-right: auto;

}
.career-description-container h3{
    font-size: 22px;
}
.career-description-container p{
    font-size: 15px;
    margin-top: 10px;
}
.career-option b{
    font-size: 20px;
    margin-top: 5px;
    margin-right: auto;

}
.apply-row{
    margin-top: 30px;
}




.contact-form-section{
    width: 90%;
    position: absolute;
    top: 150px;
    right: 5%;
    padding: 20px;
    padding-bottom: 30px;
    padding-right: 20px;
    padding-left: 13px;
    border: 2px solid rgba(222, 222, 222, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(5px);
    border-radius: 10px;
}
.contact-form-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 450px;
    scrollbar-width: none;
    position: relative;
}
.contact-form-container::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}
.contact-form-line{
    height: 450px;
    width: 8px;
    background:  linear-gradient(
        to bottom,
        #22222200 0%,         /* Transparent at the very top */
        #222 10%,        /* Transparent up to 10% */
        #222 10%,               /* Black from 10% */
        #222 90%,               /* Black up to 90% */
        #222 90%,        /* Transparent from 90% */
        #22222200 100%         /* Transparent at the very bottom */
    );
    position: absolute;
    top: 30px;
    left: 20px;
}

.contact-form-question-container{
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: start;
    margin-top: 10px;
}
.contact-point{
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: #222;
    flex: none;
    margin-top: 7px;
}
.contact-question{
    margin-left: 15px;
    width: 90%;
}
.contact-form-question-container h3{
    font-size: 18px;
}


.question-bubbles-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
}
.question-bubble{
    height: 36px;
    padding-inline: 15px;
    border-radius: 18px;
    border: solid 2px #222;
    flex: none;
    font-size: 14px;
    font-weight: 700;
    margin-right: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.5s ease-in-out;
}
.question-bubble.selected{
    background-color: #222;
    color: white;
}
.next-button{
    height: 40px;
    padding-inline:20px;
    border-radius: 20px;
    background-color: #222;
    color: white;
    width: min-content;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin-left: auto;
    margin-top: 20px;
}

.input-group {
    position: relative;
    width: 100%; /* Adjust width as needed */
    margin-bottom: 25px; /* Space for the floating label */
}
.input-field {
    width: 100%;
    padding: 10px 0; /* Vertical padding */
    border: none; /* Remove all borders */
    border-bottom: 2px solid #222; /* Only the bottom line */
    background-color: transparent; /* No background */
    font-size: 1rem;
    color: #222;
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    margin-top: 10px;
}

/* Change bottom line color on focus */
.input-field:focus {
    border-bottom-color: #222; /* Blue bottom line on focus */
}

/* Hide placeholder on focus for better floating label experience */
.input-field:focus::placeholder {
    color: transparent;
}

/* The Label for Floating Effect */
.input-label {
    position: absolute;
    left: 0;
    top: 20px; /* Aligns with input text */
    color: #222;
    font-size: 18px;
    pointer-events: none; /* Allows clicks to pass through to the input */
    transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.input-field:focus + .input-label,
    .input-field:not(:placeholder-shown) + .input-label {
        top: 0px; /* Move label up */
        font-size: 0.8rem; /* Make label smaller */
        color: #222; /* Change label color */
    }

    /* Prevent autocomplete background from interfering with transparency */
    .input-field:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
        -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
        transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
    }








.venues-section{
    width: 95%;
    margin-inline: auto;

}
.venues-container{
    margin-top:30px;
    width: 100%;
    height: unset;
    padding-block: 20px;
    border-radius: 20px;
    background: url("/assets/images/venue.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.venue-description{
    width: 90%;
    
    display: flex;
    flex-direction: column;
    margin-block: 20px;
    margin-inline: auto;
}
.venues-container h3{
    font-size: 26px;
    line-height: 24px;
    
}
.venues-container p{
    font-size: 16px;
    margin-top: 15px;
}
.venue-bubbles{
    display: flex;
    margin-top: auto;
    display: none;
}
.venue-bubble{
    height: 45px;
    border: solid 2.5px #222;
    border-radius: 22.5px;
    padding-inline: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 10px;
}
.moving-boxes-container{
    display: flex;
    flex-direction: row;
    overflow-y: scroll;


    width: 100%;
    max-width: 800px; /* Limit overall width */
     scrollbar-width: none;

}
.moving-boxes-container::-webkit-scrollbar{
    display: none;
}
.venue-box-row{
    display: flex;
    flex-direction: row;
    height: 330px;
    width: 100%;
    margin-top: 12px;
    
}
.box-spacer{
    width: 12px;
    height: 1px;
    flex: none;
}
.vanue-item{
    width: 200px;
    height: 300px;
    background-color: #ffffff79;
    flex: none;
    margin-top: 5px;
    margin-right: 5px;
    border-radius: 10px;

}
.vanue-item.right-vanue{
    margin-top: 0px;
    margin-top: 20px;
    display: none;
}





.timeline-section{
    width: 100%;
    height: 500px;
    overflow-x: scroll;
    margin-inline: auto;
    margin-top: 50px;
    background-color: #fff;
    position: relative;
}
.timeline-container{
    height: 500px;
    width: auto;
    min-height: 40px;
    
    position: relative;
}
.timeline-floating-box{
    position: absolute;
    padding-inline: 10px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff63;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    font-size: 20px;
    border-radius: 5px;
    width: max-content;
}
.timeline-container b{
    margin-inline: 10px;
    flex: none;
}
.timeline-container p{
    
}
#float0{
    left: 10%;
    top: 35%;
}
#float1{
    left: 50%;
    top: 45%;
}
#float2{
    left: 250px;
    top: 60%;
}
#float3{
    left: 500px;
    top:35%;
}
#float4{
    left: 400px;
    top: 45%;
}
.timeline-container img{
    width: auto;
    height: 500px;

}
.timeline-section p{
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 14px;
    font-weight: 700;
    width: 90%;
    z-index: 99;
}




.hall-of-fame-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
}
.fame-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}
.fame-line{
    width: 90%;
    height: 1px;
    background-color: #313131;
    margin-inline: 5px;
    margin-block: 10px;
    flex: none;
}
.fame-box{
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.fame-description{
    width: 50%;
    margin-left: 10px;
}
.fame-image{
    width: 40%;
    height: auto;
}

.fame-image img{
    width: 100%;
    height: auto;

}
.fame-box h3{
    font-size: 18px;
    margin-top: 15px;
    margin-inline: 10px;
}
.fame-box p{
    font-size: 16px;
    margin-top: -5px;
    margin-inline: 10px;
}
.fame-box h4{
    font-size: 23px;
    margin-top: 15px;
    margin-inline: 10px;
}
.fame-box span{
    font-size: 30px;
}


.golden-ratio-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
}
.golden-ratio-container{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 10px;
}
.golden-ratio-column{
    width: 100%;
    
    height: auto;
    gap: 10px;
}
.golden-column-two{
    width: 100%;
    display: flex;
    
    height: auto;
    gap: 10px;
}
.golden-top-two{
    width: 100%;
    height: 200px;
    background: url("/assets/images/golden-top1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    border: solid 2px #eee;

}
.golden-bottom-three{
    width: 100%;
    height: 200px;
    background: url("/assets/images/golden-bottom2.png"), #222;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 0px;
}
.golden-top{
    width: 100%;
    height: 200px;
    background-color: #eee;
    background: url("/assets/images/golden-top.png");
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    display: flex;
}
.golden-frosted-label{
    height: 45px;
    width: 95%;
    margin-inline: auto;
    margin-top: auto;
    margin-bottom: 20px;    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    font-size: 20px;
    border-radius: 10px;
}
.golden-row{
    height: 170px;
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.golden-bottom-one{
    width: 50%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
    border: solid 2px #eee;
    background: url("/assets/images/golden-bottom0.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}
.golden-bottom-two{
    width: 50%;
    height: 100%;
    background-color: #E8E8E8;
    background:  url('/assets/images/golden-bottom1.png'), #E8E8E8;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
}










.numbers-section{
    width: 90%;
    margin-inline: auto;
    margin-top: 100px;
}
.numbers-box-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.number-box{
    background-color: #313131;
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 170px;
    width: 130px;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.number-box h3{
    font-size: 15px;

}
.number-box b{
    font-size: 40px;
    font-weight: 600;
}

.number-stack{
    display: flex;
}



.service-boxes-container{
display: flex;
margin-top: 50px;
flex-direction: column;
width: 95%;
margin-inline: auto;
}
.service-box{
height: 260px;
width: 100%;
background-color: #A3A3A3;
margin-left: 0px;
border-radius: 40px;
position: relative;
cursor: pointer;
transition: all 0.3s linear;
margin-bottom: 15px;
}
.service-box:hover{
width: 150%;

transition: all 0.3s linear;
}
.service-box:hover .service-label-container {
width: 50%;
margin-left: 0px;
margin-right: auto;
padding-inline: 30px;
transition: all 0.3s linear;
}
.service-background{
height: 260px;
width: 100%;

}
.service-background img{
height: 100%;
object-fit: cover;
width: 100%;
border-radius: 40px;
}
.service-box-overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.service-bubbles-arrow-row{
display: flex;
margin-top: 20px;
margin-inline: 20px;
margin-bottom: auto;
}
.service-bubble{
height: 32px;
width: auto;
padding: 10px;
padding-inline: 10px;
border-radius: 20px;
border: #fff solid 2.5px;
color: white;
font-weight: 700;

font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.arrow-NE{
height: 24px;
width: 24px;
background-image: url("/assets/images/arrow.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: 5px;
margin-top: 10px;
}
.service-label-container{

height: 60px;
border-radius: 20px;
width: 90%;
margin-inline: auto;
margin-bottom: 20px;
margin-top: auto;
border: 2px solid rgba(255, 255, 255, 0.30);
background: rgba(255, 255, 255, 0.63);
backdrop-filter: blur(13.149999618530273px);
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
font-weight: 700;
transition: all 0.2s linear;

}

.blog-posts-footer-container{
display: flex;
margin-top: 20px;
padding-right: 0px;
margin-bottom: 30px;
width: 95%;
margin-inline:auto;
flex-direction: column;
}
.blog-box{

width: 100%;

margin-left: 0px;
margin-top: 10px;
border-radius: 15px;
position: relative;
padding-bottom: 20px;
cursor: pointer;
}
.blog-box:hover{
background-color: #000000;

}
.blog-box:hover .blog-image-overlay{
background: linear-gradient(0deg, #000000 5.25%, rgba(0, 0, 0, 0) 100%);
}
.blog-image-container{
height: 180px;
width: 100%;
background-color: #222;
border-radius: 15px 15px 0px 0px;
position: relative;

}
.blog-background{
height: 180px;
width: 100%;
}
.blog-background img{
height: 100%;
object-fit: cover;
width: 100%;
border-radius: 15px;
}
.blog-image-overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
padding: 20px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(0deg, #222 5.25%, #22222200 100%);
}
.glass-tag{
    height: 35px;
    width: auto;
    padding: 10px;
    padding-inline: 10px;
    border-radius: 8px;
    border: #ffffffa1 solid 2px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(15px);
    color: #222;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 12px;
    }

.dark-bubble{
height: 35px;
width: auto;
padding: 10px;
padding-inline: 10px;
border-radius: 20px;
border: #fff solid 1.5px;
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-size: 10px;
}
.blog-description-container{
margin-top: 20px;
width: 95%;
margin-inline: auto;
}
.blog-description-container h3{
font-size: 20px;
line-height: 22px;
}
.blog-description-container p{
font-size: 12px;
font-weight: 600;
margin-top: 10px;
line-height: 14px
}
.blog-tags-arrow-row{
display: flex;
margin-top: 30px;
}
.arrow-NE{
    height: 20px;
    width: 20px;
background-image: url("/assets/images/arrow.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: 5px;
margin-top: 10px;
}
.arrow-NE-dark{
    height: 24px;
    width: 24px;
background-image: url("/assets/images/arrow-dark.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: 5px;
margin-top: 10px;
}

.footer{
background-color: #000;
min-height: 400px;
display: flex;
flex-direction: column;
padding: 20px;
}
.footer-logo{
width: 120px;
height: 48px;
background: url("/assets/images/logo-large.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;

}
.footer-columns-row{
    display: flex;
    flex-direction: column;
}
.footer-column{
    display: flex;
    flex-direction: column;
    width: 100%;
    
}
.footer-column h4{
    margin-top: 20;
    margin-bottom: 10px;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.05em;
    
}
.footer-column a{
    font-size: 16px;
    opacity: 0.44;
    text-decoration: none;
}
.footer-column span{
    text-decoration: underline;
}
.footer b{
    margin-top: 100px;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    opacity: 0.4;
}
.text-logo-row{
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.footer-logo-small{
    width: 53px;
    height: 45px;
    background: url("/assets/images/footer-logo-small.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}





.study-boxes-container{
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    padding-right: 0px;
    width: 90%;
    margin-inline: auto;
    }
    .study-box{
    height: 220px;
    width: 100%;
    background-color: #A3A3A3;
    margin-left: 0px;
    margin-bottom: 15px;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    }

    .study-background{
    height: 220px;
    width: 100%;
    
    }
    .study-background img{
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 20px;
    }
    .study-box-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.05s linear;
    border-radius: 20px;
    }
    .study-box-hovered-overlay{
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);

        backdrop-filter: blur(10px);
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 40px;
        transition: all 0.2s linear;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        color: #fff;
        font-weight: 700;
        font-size: 20px;
        opacity: 0;
        transition: all 0.3s 0.05s linear;
        border-radius: 20px;
    }
    .study-bubbles-arrow-row{
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
    }
    .study-bubble{
    height: 32px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;
    font-size: 12px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .study-label-container{
    
    height: 60px;
    border-radius: 20px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
    
    }


    .spacer {
        height: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

      }
      
      .horizontal-scroll {
        position: relative;
        height: 100vh;
        width: 100%;
        /* overflow: hidden; */
      }
      
      .scroll-track {
        display: flex;
        height: 100vh;
        width: max-content;
        position: sticky;
        top: 0;
        
      }
      
      .panel {
        width: 320px;
        height: 100%;
        
        padding-top: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        
        
        margin-left: 10px;
      }
      .panel h3{
        font-size: 20px;
        font-weight: 700;
        margin-inline: 20px;
        margin-top: 20px;
        letter-spacing: -0.03em;
      }

        .scrolling-boxes-image-container{
        height: 300px;
        width:320px;
        background-color: #A3A3A3;
        margin-left: 20px;
        border-radius: 25px;
        position: relative;
        cursor: pointer;
        margin-top: -50px;
        }


        .scrolling-boxes-image-container img{
        height: 100%;
        object-fit: cover;
        width: 100%;
        border-radius: 25px;
        }
        .scrolling-boxes-image-overlay{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        opacity: 1;
        transition: all 0.05s linear;
        }
        .scrolling-box-bubbles-row{
            display: flex;
            margin-top: 20px;
            margin-inline: 20px;
            margin-bottom: auto;
            }
        .scrolling-box-bubble{
            height: 33px;
            width: auto;
            padding: 10px;
            padding-inline: 15px;
            border-radius: 20px;
            border: #fff solid 2.5px;
            color: white;
            font-weight: 700;
            font-size: 13px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            }
        
            .scrolling-box-label-container{
            
            height: 60px;
            border-radius: 15px;
            width: 90%;
            margin-inline: auto;
            margin-bottom: 20px;
            margin-top: auto;
            border: 2px solid rgba(255, 255, 255, 0.30);
            background: rgba(255, 255, 255, 0.63);
            backdrop-filter: blur(13.149999618530273px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            line-height: 20px;
            font-weight: 700;
            transition: all 0.2s linear;
            padding: 20px;
            
            }


            .image-text-section{
                width: 90%;
                margin-inline: auto;
                margin-top: 70px;
            }
            .image-text-section h2{
                margin-bottom: 30px;
                width: 90%;
                margin-inline: auto;
                
            }

            .image-text-container{
                display: flex;
                width: 100%;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-bottom: 30px;
            }
            .image-text-container.reverse-column{
                flex-direction: column-reverse;
            }
            .image-text-container:first-child{
                margin-top: 0px;
            }

            .image-container{
                width: 100%;
                height: auto;
                position: relative;
            }
            .image-cover{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 600px;
                height: 730px;
                transition: all 0.9s 1s ease-in-out;
                background-color: #fff;
            }
            .image-cover.appear{
                height: 0px;
            }
            .image-text-container img{
                width: 100%;
                height: auto;
                
            }

            .text-description{
                margin-inline: 80px;
                width: 100%;
                margin-top: 20px;
                min-height: unset;
                
            }
            .text-description h4{
                font-size: 20px;
                line-height: 22px;
            }

            .text-description b{
                margin-top: 20px;
                font-size: 20px;
                font-weight: 800;
            }
            .text-description p{
                font-size: 16px;
                font-weight: 700;
                color: #A3A3A3;
            }

            .faq-section{
                display: flex;
                flex-direction: column;
                margin-inline: 30px;
                margin-top: 40px;
                width: 90%;
                margin-inline: auto;
            }
            .faq-image-container{
                width: 100%;
                height: 90vw;
                position: relative;
                margin-left: auto;
                margin-right: 0px;
            }
            .faq-image-container img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 7px;
            }
            .faq-categories-container{
                position: absolute;
                bottom: 20px;
                right: 10px;
                display: flex;
                flex-direction: column;
            }
            .faq-category{
                width: 180px;
                height: auto;
                padding: 10px;
                padding-inline: 20px;
                border: 2px solid rgba(255, 255, 255, 0.30);
                background: #d9d3d34f;
                backdrop-filter: blur(30px);
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                margin-top: 10px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s;
            }
            .faq-category:hover{
                transform: translateX(20px);
            }
            .right-arrow{
                height: 20px;
                width: 20px;
                background: url("/assets/images/arrow-right.png");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }
            .faq-questions-section{
                width: 100%;
                margin-inline: auto;
                margin-top: 10px;
            } 
            .faq-question-container{
                border-bottom: solid 2px #313131;
                width: 100%;
                padding-inline: 5px;
                padding-block: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
            }
            .faq-question-container p{
                font-size: 14px;
                font-weight: 700;

            }
            .faq-question-container b{
                height: 0px;
                color: #222;
                width: 100%;
                font-size: 12px;
                font-weight: 600;
                overflow-y: hidden;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 300ms ease-in-out,
                color 300ms 0ms ease-in-out;
            }
            .faq-question-container.clicked b{
                height: 100px;
                color: #fff;
                transition: all 600ms ease-in-out,
                color 600ms 400ms ease-in-out;
            }
            .downwards-arrow{
                width: 15px;
                height: 15px;
                background: url("/assets/images/arrow-dark.png");
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                rotate: 180deg;
                margin-left: auto;
            }


.blog-page{
    width: 100%;
    margin-inline: auto;
    max-width: 1400px; 
    display: flex;
    flex-direction: column;
    margin-top: -50px;
}
.blog-header{
    width: 90%;
    margin-inline: auto;
    max-width: 1400px;
    display: flex;
    align-items: start;
    justify-content: start;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -00%);
    
}
.blog-header h1{
    position: relative;
    font-size: 30px;
    line-height: 30px;
    bottom: unset;
    left: unset;
    width: 90%;
    margin-left: 2.5%;
    margin-right: auto;
    
}
.blog-page p{
    width: 90%;
    margin-inline: auto;
    margin-top: 20px;
    font-size: 17px;
}
.blog-page h2{
    width: 90%;
    padding-left: 5%;
    margin-right: auto;
    margin-top: 40px;
    font-size:22px;
    margin-bottom: -5px;
}
.blog-page img{
    width: 95%;
    margin-inline: auto;
    height: auto;
    margin-top: 50px;
}
}
/* large mobile */
@media (min-width: 481px) and (max-width: 767px) {
    .youtube-video-section{
        width: 90%;
        margin-inline: auto;
        border-radius: 10px;
        padding: 10px;
        padding-top: 20px;
        background-color: #313131;
        margin-top: 50px;
        height: unset;
    }
    .youtube-video{
        width: 100%;
        
        height: 100%;
        margin-top: 10px;
    }
    .cursor,
    .follower {
        display: none;
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none; /* So it doesn’t block clicks */
      z-index: 9999;
      transform: translate(-50%, -50%);
    }
    
    .cursor {
        display: none;
      width: 33px;
      height: 33px;
      background: url('/assets/images/cursor.png') no-repeat center center;
      background-size: contain;
    }
    
    .follower {
      width: 36.5px;
      height: 32px;
      background: url('/assets/images/follower.png') no-repeat center center;
      background-size: contain;
      transition: transform 0.15s ease-out;
    }
    h1{
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 50px;
    line-height: 75px;
    }
    
    h2{
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 32px;
    line-height: 35px;
    }
    h3{
    letter-spacing: -0.05em;
    }
    
    .navigation-bar-mobile{
        position: fixed;
        top: 0px;
        left: 0px;
        display: none;
        width: 100%;
        height: 100vh;
        z-index: 8000;
        background-color: #1b1b1b83;
        backdrop-filter: blur(13.1px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        opacity: 1;
        transition: all 0.3s 0s ease-in-out;
    }
    .navigation-bar-mobile .bolt-logo{
        margin-right: 10px;
        margin-left: -10px;
        margin-top: 40px;
        margin-bottom: 20px;
        height: 30px;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-filter: invert(1);
        
    }
    .navigation-bar-mobile.hide-bar{    
        opacity: 0;
        display: none;
        transition: all 0.3s 0.3s ease-in-out;
    }
    .navigation-bar-mobile a{
        font-size: 25px;
        margin-top: 20px;
        text-decoration: none;
        opacity: 1;
        transition: all 0.3s 0.3s ease-in-out;
        color: white;
    }
    .navigation-bar-mobile a:nth-child(1) {
      transition-delay: 0s;
    }
    
    .navigation-bar-mobile a:nth-child(2) {
        transition-delay: 0.1s;
    }
    
    .navigation-bar-mobile a:nth-child(3) {
        transition-delay: 0.2s;
    }
    .navigation-bar-mobile a:nth-child(4) {
        transition-delay: 0.3s;
    }
    .navigation-bar-mobile a:nth-child(5) {
        transition-delay: 0.4s;
    }
    .navigation-bar-mobile a:nth-child(6) {
        transition-delay: 0.5s;
    }
    .navigation-bar-mobile a:nth-child(7) {
        transition-delay: 0.6s;
    }
    .navigation-bar-mobile a:nth-child(8) {
        transition-delay: 0.7s;
    }
    .navigation-bar-mobile a:nth-child(9) {
        transition-delay: 0.8s;
    }
    .navigation-bar-mobile a:nth-child(10) {
        transition-delay: 0.9s;
    }
    .navigation-bar-mobile.hide-bar a{
        opacity: 0;
        transition: all 0.3s 0s ease-in-out;
    }
    .navigation-bar{
        height: 60px;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.6s ease-in-out;
    }
    .navigation-bar.opaque{
        background: rgba(58, 58, 58, 0.63);
        backdrop-filter: blur(13.149999618530273px);
    }
    .navigation-buttons-holder{
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .navigation-buttons-holder a{
        display: none;
        text-decoration: none;
        font-size: 20px;
        font-weight: 700;
        color: #fff;

    }
    .bolt-logo{
        height: 27px;
        width: auto;
        margin-left: 10px;
        margin-right: auto;
        flex: none;
        -webkit-filter: invert(1);
    }
    .bolt-logo img{
        height: 100%;
        width: auto;
    }
    
    .bolt-cameleon{
        height: 25px;
        width: auto;
        width: 23px;
        margin-right: 10px;
        margin-left: auto;
        flex: none;
        background: url("/assets/images/burger-white.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .bolt-cameleon img{
        height: 100%;
        width: auto;
        opacity: 0;
    }
    
    
    
    
    
    .intro-section{
        width: 100%;
        height: 100vh;
        margin-top: -90px;
        position: relative;
    }
    .intro-section img{
        width: 100%;
        height: 100%;
    }
    
    .intro-section h1{
        position: absolute;
        bottom: 100px;
        left: 20px;
        font-size: 70px;
        line-height: 60px;
    }
    
    
    .side-text{
    font-size: 16px;
    width: 95%;
    line-height: 18px;
    }
    .heading-side-text-row-column{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-inline: auto;
    align-items: start;
    justify-content: space-between;
    
    margin-top: 50px
    }
    
    .reverse-image-text-section{
        width: 90%;
        margin-inline:auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        overflow-y: hidden;
        margin-top: 0px;
    }
    .reverse-container{
        height: 100vh;
        width: 0%;
        
        position: relative;
    }
    .reverse-image-scroller{
        height: 100vh;
        width: 0%;
        
        overflow-y: scroll;
        display: flex;
        flex-direction: column-reverse;
        scrollbar-width: none; /* Hides the scrollbar */
    }
    .reverse-image-scroller::-webkit-scrollbar {
        display: none; /* Hides the scrollbar */
    }
    
    .reverse-image-gradient{
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        background: linear-gradient(
            to bottom,
            white 0%,         /* White at the very top */
            rgba(255, 255, 255, 0) 15%,        /* White up to 10% */
            transparent 10%,  /* Transparent from 10% */
            transparent 90%,  /* Transparent up to 90% */
            rgba(255, 255, 255, 0) 85%,        /* White from 90% */
            white 100%        /* White at the very bottom */
        );
    }
    .reverse-image-text-section h2{
        width: 100%;
        margin-left: 0px;
        margin-top:50px;
        font-size: 35px;
        font-weight: 700;
        line-height: 35px;
    }
    .reverse-image-scroller img{
        width: 0%;
    }
    
    
    .testimonial-brackets-section{
        width: 95%;
        margin-inline: auto;
        
        margin-top: 10px;
    }
    .testimonial-bracket-container{
        display: flex;
        margin-top: 50px;
    }
    .up-bracket{
        width: 20px;
        height: 200px;
        background: url("/assets/images/bracket-up.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin-right: 5px;
        flex: none;
    }
    #up-fade{
        background: url("/assets/images/bracket-up-fade.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .testimonial-brackets-section p{
        font-size: 14px;
        
        margin-inline: 10px;
        opacity: 1;
        transition: all 0.3s;
    }
    .testimonial-brackets-section p.hide{
        opacity: 0;
    }
    .down-bracket{
        width: 20px;
        height: 200px;
        background: url("/assets/images/bracket-down.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin-right: 5px;
        flex: none;
    }
    #down-fade{
        background: url("/assets/images/bracket-down-fade.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .grid-container {
        margin-top: 20px;
        display: grid;
        /* 5 equal columns */
        grid-template-columns: repeat(2, 1fr);
        /* 2 equal rows */
        grid-template-rows: repeat(5, 1fr);
    
        /* This creates the lines between cells */
        gap: 2px; /* 2px stroke */
        background-color: #313131; /* Gray color for the lines */
        border: 2px solid #313131; /* Add border around the whole grid */
    
        width: 90%; /* Adjust as needed */
        margin-inline: auto;
    
    }
    
    .grid-item {
        background-color: #222; /* White background for the cells */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        font-size: 1.2em;
        color: #333;
        box-sizing: border-box; /* Include padding in element's total width/height */
        aspect-ratio: 1;
        transition: all 0.3s;
    }
    .grid-item:hover{
        background-color: #313131;
    }
    .grid-logo{
        width: 80%;
        height: 80%;
        flex: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .grid-logo img{
        width: 100%;
        height: auto;
    }
    
    
    
    .team-section{
        width: 90%;
        margin-inline: auto;
        margin-top: 20px;
    }
    .team-box-row{
        display: flex;
        width: 100%;
        margin-top: 20px;
        flex-direction: column;
    }
    .team-box{
        width: 100%;
        background: url("/assets/images/team1.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 60;
        
        flex: auto;
        margin-right: 0px;
        margin-top: 7px;
        border-radius: 10px;
        filter: grayscale(100%);
        position: relative;
        cursor: pointer;
        transition: all 0.3s 0s linear;
    }
    .team-box.active{
        width: 100%;
        height: unset;
        aspect-ratio: 1;
        flex: none;
        filter: grayscale(0%);
        transition: all 0.8s 0s linear;
    }
    .flipped-name{
        position: absolute;
        bottom: 10px;
        right: 10px;
        rotate: 0deg;
        font-size: 22px;
        color: white;
        font-weight: 700;
    }
    
    
    .frosted-container{
        position: absolute;
        right: 15px;
        bottom: 15px;
        border-radius: 7px;
        padding: 15px;
        width: 80%;
        border: 2px solid rgba(255, 255, 255, 0.30);
        background: rgba(255, 255, 255, 0.63);
        backdrop-filter: blur(13.149999618530273px);
        display: flex;
        opacity: 1;
        transition: all 0.5s 0.6s;
    }
    .frosted-container.inactive{
        opacity: 0;
        transition: all 0.2s 0s;
    }
    .team-box-description{
        display: flex;
        flex-direction: column;
        width: 100%;
        
    }
    .frosted-container h3{
        font-size: 18px;
        font-weight: 700;
    }
    .frosted-container b{
        font-size: 12px;
        font-weight: 700;
        line-height: 0.9;
    }
    .frosted-container p{
        font-size: 10px;
        font-weight: 600;
        margin-top: 10px;
    }
    .frosted-container h4{
        font-size: 13px;
        font-weight: 700;
        margin-top: auto;
    }
    .accreditation-container{
     width: 20px;
     display: flex;
     flex-direction: column;
     align-items: end;
     justify-content: start;
    }
    .acrid-bubble{
        width: 20px;
        
        margin-bottom: 5px;
        padding-block: 5px;
        font-size: 13px;
        display: flex;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        border: 2px solid rgba(255, 255, 255, 0.30);
        background: rgba(255, 255, 255, 0.63);
        backdrop-filter: blur(13.149999618530273px);
    }
    .linkedin-logo{
        margin-top: 15px;
        height: 20px;
        width: 20px;
        background: url("/assets/images/linkedin.png");
        background-size: contain;
        opacity: 0.8;
    }
    
    
    
    .scattered-boxes-section{
        width: 95%;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-top: 50px;
        margin-bottom: 20px;
        height: 800px;
    }
    .scattered-boxes-section h2{
        font-size: 70px;
        font-weight: 800;
    
    }
    .scattered-boxes-container{
        position: absolute;
        display: grid; 
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 10px;
        column-gap: 50px;
        min-height: 250px; /* Give it a minimum height */
        color: black;
        padding: 10px; /* Padding inside the container */
    }
    
    .grid-box{
        font-weight: bold;
        display: flex; /* Use flexbox to center content inside each item */
        justify-content: center;
        align-items: center;
        padding: 0px;
        border-radius: 5px;
    }
    .perk-box{
        background: #f6f6f6;
        border-radius: 15px;
        padding: 10px;
        height: 160px;
        width: 130px;
        border: 2px solid #E3E3E3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.3s 0.7s;
    }
    .perk-box.visible{
        opacity: 1;
    }
    
    #type2{
        background: #fff;
        transition: all 0.3s 1.3s;
    }
    #type2:first-child{
        background: #fff;
        transition: all 0.3s 0.9s;
    }
    #type3{
        border: 2px solid rgba(222, 222, 222, 0.3);
        background: rgba(255, 255, 255, 0.63);
        backdrop-filter: blur(5px);
        transition: all 0.3s 1.8s;
    }
    
    .perk-box b{
        font-size: 14px;
        display: none;
    }
    .perk-box p{
        margin-top: 5px;
        font-size: 11px;
    }
    
    
    
    
    .points-and-images-section{
        width: 85%;
        margin-inline: auto;
        margin-block: 50px;
        margin-top: 70px;
        margin-bottom: 50px
    }
    .points-and-images-row{
        position: relative;
        display: flex;
        margin-top: 50px;
    }
    .points-column{
        width: 100%;
    }
    .point-container{
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-left: solid 5px #313131;
        padding-inline: 20px;
        font-size: 30px;
        width: 100%;
        border-radius: 0px 12px 12px 0px;
    
    }
    .point-container h3{
        font-weight: 600;
        font-size: 23px;
    }
    .point-container p{
        display: none;
        font-size: 15px;
        margin-top: 5px;
        color: white;
    }
    .point-container.active-point{
        height: 180px;
        border-left: solid 5px #fff;
        
        background: #32323274;
        backdrop-filter: blur(5px);
        
    }
    .point-container.active-point p{
        display: block;
    }
    .point-image-container{
        width: 45%;
        display: none;
        height: 120%;
        position: absolute;
        right: 0;
        top: -20px;
        z-index: -1;
    }
    
    .point-image-container img{
        height: 100%;
        width: auto;
        
    }
    
    
    
    .image-collection-section{
        width: 85%;
        margin-top: 50px;
        margin-inline: auto;
    
    }
    .image-collection-section img{
        width: 100%;
        height: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    
    
    
    .network-section{
        width: 90%;
        margin-top: 100px;
        margin-bottom: 60px;
        margin-inline: auto;
    }
    
    .network-section img{
        width: 100%;
        height: auto;
    }
    
    
    
    
    
    .stagered-boxes{
        width: 90%;
        margin-top: 10px;
        margin-inline: auto;
        
    }
    
    .stagered-container{
        width: 100%;
        display: flex;
        /* flex-direction: column; */
        margin-top: 40px;
        gap: 5px;
    }
    .stagered-column{
        width: 100%;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .stagered-boxes img{
        width: 100%;
        height: auto;
        border-radius: 5px;
    }
    .large-stagered{
        width: 100%;
        border-radius: 20px;
        opacity: 0;
        
    }
    .small-stagered{
        width: 100%;
        border-radius: 20px;
        opacity: 0;
    }
    .large-stagered.appear{
        opacity: 1;
    }
    .small-stagered.appear{
        opacity: 1;
    }
    
    #small0{
        transition: all 0.8s 0.5s ease-out;
    }
    #small1{
        transition: all 0.8s 0.8s ease-out;
    }
    #big0{
        transition: all 0.8s 0s ease-out;
    }
    #big1{
        transition: all 0.8s 0.3s ease-out;
    }
    
    
    
    .horizontal-timeline-section{
        width: 100%;
        margin-top: 20px;
        position: relative;
    }
    .gradient-left{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, #222, transparent);
    }
    .gradient-right{
        position: absolute;
        right: 0px;
        top: 0px;
        width: 0px;
        height: 100%;
        background: linear-gradient(to left, #222, transparent);
    }
    .timeline-header{
        margin-left: 30px;
        margin-top: 50px;
    }
    .horizontal-timeline-container{
        height: unset;
        display: flex;
        overflow-x: scroll;
        position: relative;
        scrollbar-width: none;
        flex: none;
    }
    .horizontal-timeline-container::-webkit-scrollbar{
        display: hidden;
    }
    .timeline-line{
        position: absolute;
        top: 50%;
        left: 0%;
        width: 100%;
        background-color: #fff;
        height: 7px;
        transform: translateY(-50%);
    }
    .timeline-image-text-pair{
        width: 280px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: none;
        margin-right: 100px;
    }
    .timeline-text-container{
        height: 220px;
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        margin-block: 30px;
        flex: none;
    }
    .timeline-dot{
        width: 30px;
        height: 30px;
        border-radius: 15px;
        background-color: #fff;
        
        flex: none;
    }
    .timeline-text-container.under{
        justify-content: start;
    }
    .timeline-image-text-pair:first-child{
        margin-left: 20vw;
    }
    .timeline-image-text-pair h3{
        width: 90%;
        font-size: 23px;
    }
    .timeline-image-text-pair p{
        width: 90%;
        font-size: 16px;
    }
    .timeline-image-container{
        height: 220px;
        width: 320px;
        margin-block: 30px;
    }
    .timeline-image-container img{
        height: 100%;
        width: 100%;
    }
    
    
    
    
    
    .right-text-and-images-section{
        width: 95%;
        margin-inline: auto;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
    }
    .right-text-and-images-section h3{
        width: 90%;
        font-size: 22px;
        margin-left: auto;
    }
    .right-text-and-images-section p{
        font-size: 15px;
        width: 90%;
        margin-left: auto;
        margin-top: 10px;
    }
    .right-text-and-images-row{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        gap: 5px;
    }
    .right-text-and-image{
        flex: none;
        height: unset;
        width: 100%;
        background-color: #eee;
        border-radius: 5px;
    }
    
    .right-text-and-image img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    
    
    
    
    
    
    .team-information-section{
        width: 90%;
        margin-inline: auto;
        margin-top: 50px;
        display: flex;
        gap: 100px;
    }
    .team-information-text-column{
        width: 100%;
        opacity: 1;
        transition: 0.3s ease-in-out;
    }
    .team-information-text-column.disappear{
        width: 100%;
        opacity: 0;
    }
    .team-information-section h2{
        font-size: 27px;
        font-weight: 800;
    }
    .team-information-section b{
        font-size: 15px;
        font-weight: 800;
    }
    .team-information-section p{
        font-size: 15px;
        font-weight: 700;
        margin-top: 25px;
    }
    .team-information-section h3{
        font-size: 18px;
        font-weight: 800;
        margin-top: 20px;
    }
    .skills-bubbles-container{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 13px;
    }
    .skill-bubble{
        height: 30px;
        padding-inline: 10px;
        border-radius: 20px;
        border: solid 2px #222;
        flex: none;
        font-size: 16px;
        font-weight: 700;
        margin-right: 7px;
        margin-bottom: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .team-member-image {
        width: 80%;
        height: auto;
        margin-top: 20px;
        display: none;
    }
    .team-member-image img{
        height: auto;
        width: 100%;
        border-radius: 20px;
    }
    
    
    
    .career-section{
        width: 90%;
        margin-inline: auto;
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .career-section h2{
        margin-left: 0px;
        margin-bottom: 30px;
    }
    .career-option{
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 5px;
        padding-block: 30px;
        border-bottom: solid 2px #DCDCDC;
    }
    .career-option:last-child
    {
        border-bottom: none;
    }
    .career-description-container{
        width: 100%;
        margin-right: auto;
    
    }
    .career-description-container h3{
        font-size: 22px;
    }
    .career-description-container p{
        font-size: 15px;
        margin-top: 10px;
    }
    .career-option b{
        font-size: 20px;
        margin-top: 5px;
        margin-right: auto;
    
    }

   .apply-row{
    margin-top: 20px;
   }
    
    
   .contact-form-section{
    width: 90%;
    position: absolute;
    top: 150px;
    right: 5%;
    padding: 20px;
    padding-bottom: 30px;
    padding-right: 20px;
    padding-left: 13px;
    border: 2px solid rgba(222, 222, 222, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(5px);
    border-radius: 10px;
}
.contact-form-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 450px;
    scrollbar-width: none;
    position: relative;
}
.contact-form-container::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}
.contact-form-line{
    height: 450px;
    width: 8px;
    background:  linear-gradient(
        to bottom,
        #22222200 0%,         /* Transparent at the very top */
        #222 10%,        /* Transparent up to 10% */
        #222 10%,               /* Black from 10% */
        #222 90%,               /* Black up to 90% */
        #222 90%,        /* Transparent from 90% */
        #22222200 100%         /* Transparent at the very bottom */
    );
    position: absolute;
    top: 30px;
    left: 20px;
}

.contact-form-question-container{
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: start;
    margin-top: 10px;
}
.contact-point{
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: #222;
    flex: none;
    margin-top: 7px;
}
.contact-question{
    margin-left: 15px;
    width: 90%;
}
.contact-form-question-container h3{
    font-size: 18px;
}
    
    
    .question-bubbles-container{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 13px;
    }
    .question-bubble{
        height: 36px;
        padding-inline: 15px;
        border-radius: 18px;
        border: solid 2px #222;
        flex: none;
        font-size: 16px;
        font-weight: 700;
        margin-right: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        transition: all 0.5s ease-in-out;
    }
    .question-bubble.selected{
        background-color: #222;
        color: white;
    }
    .next-button{
        height: 40px;
        padding-inline:20px;
        border-radius: 20px;
        background-color: #222;
        color: white;
        width: min-content;
        flex: none;
        font-size: 16px;
        font-weight: 700;
        margin-right: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center; 
        margin-left: auto;
        margin-top: 20px;
    }
    
    .input-group {
        position: relative;
        width: 100%; /* Adjust width as needed */
        margin-bottom: 25px; /* Space for the floating label */
    }
    .input-field {
        width: 100%;
        padding: 10px 0; /* Vertical padding */
        border: none; /* Remove all borders */
        border-bottom: 2px solid #222; /* Only the bottom line */
        background-color: transparent; /* No background */
        font-size: 1rem;
        color: #222;
        outline: none; /* Remove outline on focus */
        transition: border-color 0.3s ease; /* Smooth transition for border color */
        margin-top: 20px;
    }
    
    /* Change bottom line color on focus */
    .input-field:focus {
        border-bottom-color: #222; /* Blue bottom line on focus */
    }
    
    /* Hide placeholder on focus for better floating label experience */
    .input-field:focus::placeholder {
        color: transparent;
    }
    
    /* The Label for Floating Effect */
    .input-label {
        position: absolute;
        left: 0;
        top: 20px; /* Aligns with input text */
        color: #222;
        font-size: 18px;
        pointer-events: none; /* Allows clicks to pass through to the input */
        transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease; /* Smooth transition */
    }
    
    .input-field:focus + .input-label,
        .input-field:not(:placeholder-shown) + .input-label {
            top: 0px; /* Move label up */
            font-size: 0.8rem; /* Make label smaller */
            color: #222; /* Change label color */
        }
    
        /* Prevent autocomplete background from interfering with transparency */
        .input-field:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
            -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
            transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
        }
    
    
    
    
    
    
    
    
    .venues-section{
        width: 95%;
        margin-inline: auto;
    
    }
    .venues-container{
        margin-top:30px;
        width: 100%;
        height: unset;
        padding-block: 20px;
        border-radius: 20px;
        background: url("/assets/images/venue.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .venue-description{
        width: 90%;
        
        display: flex;
        flex-direction: column;
        margin-block: 20px;
        margin-inline: auto;
    }
    .venues-container h3{
        font-size: 26px;
        line-height: 24px;
        
    }
    .venues-container p{
        font-size: 16px;
        margin-top: 15px;
    }
    .venue-bubbles{
        display: flex;
        margin-top: auto;
        display: none;
    }
    .venue-bubble{
        height: 45px;
        border: solid 2.5px #222;
        border-radius: 22.5px;
        padding-inline: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 10px;
    }
    .moving-boxes-container{
        display: flex;
        flex-direction: row;
        overflow-y: scroll;
    
    
        width: 100%;
        max-width: 800px; /* Limit overall width */
         scrollbar-width: none;
    
    }
    .moving-boxes-container::-webkit-scrollbar{
        display: none;
    }
    .venue-box-row{
        display: flex;
        flex-direction: row;
        height: 330px;
        width: 100%;
        margin-top: 12px;
        
    }
    .box-spacer{
        width: 12px;
        height: 1px;
        flex: none;
    }
    .vanue-item{
        width: 200px;
        height: 300px;
        background-color: #ffffff79;
        flex: none;
        margin-top: 5px;
        margin-right: 5px;
        border-radius: 10px;
    
    }
    .vanue-item.right-vanue{
        margin-top: 0px;
        margin-top: 20px;
        display: none;
    }
    
    
    
    
    
    .timeline-section{
        width: 100%;
        height: 500px;
        overflow-x: scroll;
        margin-inline: auto;
        margin-top: 50px;
        background-color: #fff;
        position: relative;
    }
    .timeline-container{
        height: 500px;
        width: auto;
        min-height: 40px;
        
        position: relative;
    }
    .timeline-floating-box{
        position: absolute;
        padding-inline: 10px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff63;
        box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(2px);
        font-size: 20px;
        border-radius: 5px;
        width: max-content;
    }
    .timeline-container b{
        margin-inline: 10px;
        flex: none;
    }
    .timeline-container p{
        
    }
    #float0{
        left: 10%;
        top: 35%;
    }
    #float1{
        left: 50%;
        top: 45%;
    }
    #float2{
        left: 250px;
        top: 60%;
    }
    #float3{
        left: 500px;
        top:35%;
    }
    #float4{
        left: 400px;
        top: 45%;
    }
    .timeline-container img{
        width: auto;
        height: 500px;
    
    }
    .timeline-section p{
        position: absolute;
        right: 20px;
        bottom: 20px;
        font-size: 14px;
        font-weight: 700;
        width: 90%;
        z-index: 99;
    }
    
    
    
    
    .hall-of-fame-section{
        width: 90%;
        margin-inline: auto;
        margin-top: 50px;
        
    }
    .fame-container{
        width: 100%;
        display: flex;
        margin-top: 40px;
        flex-direction: column;
    }
    .fame-line{
        width: 90%;
        height: 1px;
        background-color: #313131;
        margin-inline: 5px;
        flex: none;
        margin-block: 10px;
    }
    .fame-box{
        width: 100%;
        margin-inline: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .fame-description{
        width: 90%;
    
    }
    .fame-image{
        width: 200px;
        height: 200px;
        height: auto;
    }
    
    .fame-image img{
        width: 100%;
        height: auto;
    
    }
    .fame-box h3{
        font-size: 20px;
        margin-top: 15px;
        margin-inline: 10px;
    }
    .fame-box p{
        font-size: 16px;
        margin-top: -5px;
        margin-inline: 10px;
    }
    .fame-box h4{
        font-size: 25px;
        margin-top: 15px;
        margin-inline: 10px;
    }
    .fame-box span{
        font-size: 40px;
    }
    
    
    .golden-ratio-section{
        width: 95%;
        margin-inline: auto;
        margin-top: 50px;
    }
    .golden-ratio-container{
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        gap: 10px;
    }
    .golden-ratio-column{
        width: 100%;
        
        height: auto;
        gap: 10px;
    }
    .golden-column-two{
        width: 100%;
        display: flex;
        
        height: auto;
        gap: 10px;
    }
    .golden-top-two{
        width: 100%;
        height: 200px;
        background: url("/assets/images/golden-top1.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 15px;
        border: solid 2px #eee;
    
    }
    .golden-bottom-three{
        width: 100%;
        height: 200px;
        background: url("/assets/images/golden-bottom2.png"), #222;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        border-radius: 15px;
        margin-top: 0px;
    }
    .golden-top{
        width: 100%;
        height: 200px;
        background-color: #eee;
        background: url("/assets/images/golden-top.png");
        background-size: cover;
        background-position: center;
        border-radius: 15px;
        display: flex;
    }
    .golden-frosted-label{
        height: 45px;
        width: 95%;
        margin-inline: auto;
        margin-top: auto;
        margin-bottom: 20px;    
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border: 2px solid rgba(255, 255, 255, 0.30);
        background: rgba(255, 255, 255, 0.63);
        backdrop-filter: blur(13.149999618530273px);
        font-size: 20px;
        border-radius: 10px;
    }
    .golden-row{
        height: 170px;
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }
    .golden-bottom-one{
        width: 50%;
        height: 100%;
        background-color: #fff;
        border-radius: 15px;
        border: solid 2px #eee;
        background: url("/assets/images/golden-bottom0.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left;
    }
    .golden-bottom-two{
        width: 50%;
        height: 100%;
        background-color: #E8E8E8;
        background:  url('/assets/images/golden-bottom1.png'), #E8E8E8;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        border-radius: 15px;
    }
    
    
    
    
    
    
    
    
    
    
    .numbers-section{
        width: 90%;
        margin-inline: auto;
        margin-top: 50px;
    }
    .numbers-box-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
    .number-box{
        background-color: #313131;
        display: flex;
        padding: 15px;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        height: 200px;
        width: 150px;
        border-radius: 15px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .number-box h3{
        font-size: 18px;
    
    }
    .number-box b{
        font-size: 50px;
        font-weight: 600;
    }
    
    .number-stack{
        display: flex;
    }
    
    
    
    .service-boxes-container{
    display: flex;
    margin-top: 50px;
    flex-direction: column;
    width: 95%;
    margin-inline: auto;
    }
    .service-box{
    height: 280px;
    width: 100%;
    background-color: #A3A3A3;
    margin-left: 0px;
    border-radius: 40px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s linear;
    margin-bottom: 15px;
    }
    .service-box:hover{
    width: 150%;
    
    transition: all 0.3s linear;
    }
    .service-box:hover .service-label-container {
    width: 50%;
    margin-left: 0px;
    margin-right: auto;
    padding-inline: 30px;
    transition: all 0.3s linear;
    }
    .service-background{
    height: 280px;
    width: 100%;
    
    }
    .service-background img{
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 40px;
    }
    .service-box-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    }
    .service-bubbles-arrow-row{
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
    }
    .service-bubble{
    height: 32px;
    width: auto;
    padding: 10px;
    padding-inline: 10px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;
    
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .arrow-NE{
    height: 24px;
    width: 24px;
    background-image: url("/assets/images/arrow.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
    }
    .service-label-container{
    
    height: 70px;
    border-radius: 20px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    transition: all 0.2s linear;
    
    }
    
    .blog-posts-footer-container{
    display: flex;
    margin-top: 20px;
    padding-right: 0px;
    margin-bottom: 30px;
    width: 95%;
    margin-inline:auto;
    flex-direction: column;
    }
    .blog-box{
    
    width: 100%;
    
    margin-left: 0px;
    margin-top: 10px;
    border-radius: 15px;
    position: relative;
    padding-bottom: 20px;
    cursor: pointer;
    }
    .blog-box:hover{
    background-color: #000000;
    
    }
    .blog-box:hover .blog-image-overlay{
    background: linear-gradient(0deg, #000000 5.25%, rgba(0, 0, 0, 0) 100%);
    }
    .blog-image-container{
    height: 180px;
    width: 100%;
    background-color: #222;
    border-radius: 15px 15px 0px 0px;
    position: relative;
    
    }
    .blog-background{
    height: 180px;
    width: 100%;
    }
    .blog-background img{
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 15px;
    }
    .blog-image-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    padding: 20px;
    border-radius: 5px 5px 0px 0px;
    background: linear-gradient(0deg, #222 5.25%, #22222200 100%);
    }
    .glass-tag{
        height: 35px;
        width: auto;
        padding: 10px;
        padding-inline: 10px;
        border-radius: 8px;
        border: #ffffffa1 solid 2px;
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(15px);
        color: #222;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        font-size: 12px;
        }
    
    .dark-bubble{
    height: 35px;
    width: auto;
    padding: 10px;
    padding-inline: 10px;
    border-radius: 20px;
    border: #fff solid 1.5px;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 10px;
    }
    .blog-description-container{
    margin-top: 20px;
    width: 95%;
    margin-inline: auto;
    }
    .blog-description-container h3{
    font-size: 20px;
    line-height: 22px;
    }
    .blog-description-container p{
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
    line-height: 14px
    }
    .blog-tags-arrow-row{
    display: flex;
    margin-top: 30px;
    }
    .arrow-NE{
        height: 20px;
        width: 20px;
    background-image: url("/assets/images/arrow.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
    }
    .arrow-NE-dark{
        height: 24px;
        width: 24px;
    background-image: url("/assets/images/arrow-dark.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
    }
    
    .footer{
    background-color: #000;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    }
    .footer-logo{
    width: 120px;
    height: 48px;
    background: url("/assets/images/logo-large.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    }
    .footer-columns-row{
        display: flex;
        flex-direction: column;
    }
    .footer-column{
        display: flex;
        flex-direction: column;
        width: 100%;
        
    }
    .footer-column h4{
        margin-top: 20;
        margin-bottom: 10px;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px;
        letter-spacing: -0.05em;
        
    }
    .footer-column a{
        font-size: 16px;
        opacity: 0.44;
        text-decoration: none;
    }
    .footer-column span{
        text-decoration: underline;
    }
    .footer b{
        margin-top: 100px;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        opacity: 0.4;
    }
    .text-logo-row{
        display: flex;
        justify-content: space-between;
        align-items: end;
    }
    
    .footer-logo-small{
        width: 53px;
        height: 45px;
        background: url("/assets/images/footer-logo-small.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    
    
    
    
    .study-boxes-container{
        display: flex;
        flex-direction: column;
        margin-top: 40px;
        padding-right: 0px;
        width: 90%;
        margin-inline: auto;
        }
        .study-box{
        height: 240px;
        width: 100%;
        background-color: #A3A3A3;
        margin-left: 0px;
        margin-bottom: 15px;
        border-radius: 20px;
        position: relative;
        cursor: pointer;
        }
        .study-box:last-child{
            display: none;
        }

        .study-background{
        height: 240px;
        width: 100%;
        
        }
        .study-background img{
        height: 100%;
        object-fit: cover;
        width: 100%;
        border-radius: 20px;
        }
        .study-box-overlay{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        opacity: 1;
        transition: all 0.05s linear;
        border-radius: 20px;
        }
        .study-box-hovered-overlay{
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.6);
    
            backdrop-filter: blur(10px);
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            border-radius: 20px;
            transition: all 0.2s linear;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
            color: #fff;
            font-weight: 700;
            font-size: 20px;
            opacity: 0;
            transition: all 0.3s 0.05s linear;
            border-radius: 20px;
        }
        .study-bubbles-arrow-row{
        display: flex;
        margin-top: 20px;
        margin-inline: 20px;
        margin-bottom: auto;
        }
        .study-bubble{
        height: 32px;
        width: auto;
        padding: 10px;
        padding-inline: 15px;
        border-radius: 20px;
        border: #fff solid 2.5px;
        color: white;
        font-weight: 700;
        font-size: 12px;
        
        display: flex;
        align-items: center;
        justify-content: center;
        }
    
        .study-label-container{
        
        height: 60px;
        border-radius: 20px;
        width: 90%;
        margin-inline: auto;
        margin-bottom: 20px;
        margin-top: auto;
        border: 2px solid rgba(255, 255, 255, 0.30);
        background: rgba(255, 255, 255, 0.63);
        backdrop-filter: blur(13.149999618530273px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        transition: all 0.2s linear;
        padding: 20px;
        
        }
    
    
        .spacer {
            height: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
    
          }
          
          .horizontal-scroll {
            position: relative;
            height: 100vh;
            width: 100%;
            /* overflow-x: hidden; */
          }
          
          .scroll-track {
            display: flex;
            height: 100vh;
            width: max-content;
            position: sticky;
            top: 0;
          }
          
          .panel {
            width: 350px;
            
            
            padding-top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            
            
            margin-left: 10px;
          }
          .panel h3{
            font-size: 20px;
            font-weight: 700;
            margin-inline: 20px;
            margin-top: 20px;
            letter-spacing: -0.03em;
          }
    
            .scrolling-boxes-image-container{
            height: 300px;
            width:350px;
            background-color: #A3A3A3;
            margin-left: 20px;
            border-radius: 25px;
            position: relative;
            cursor: pointer;
            margin-top: -40px;
            }
    
    
            .scrolling-boxes-image-container img{
            height: 100%;
            object-fit: cover;
            width: 100%;
            border-radius: 25px;
            }
            .scrolling-boxes-image-overlay{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            opacity: 1;
            transition: all 0.05s linear;
            }
            .scrolling-box-bubbles-row{
                display: flex;
                margin-top: 20px;
                margin-inline: 20px;
                margin-bottom: auto;
                }
            .scrolling-box-bubble{
                height: 33px;
                width: auto;
                padding: 10px;
                padding-inline: 15px;
                border-radius: 20px;
                border: #fff solid 2.5px;
                color: white;
                font-weight: 700;
                font-size: 13px;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                }
            
                .scrolling-box-label-container{
                
                height: 60px;
                border-radius: 15px;
                width: 90%;
                margin-inline: auto;
                margin-bottom: 20px;
                margin-top: auto;
                border: 2px solid rgba(255, 255, 255, 0.30);
                background: rgba(255, 255, 255, 0.63);
                backdrop-filter: blur(13.149999618530273px);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                line-height: 20px;
                font-weight: 700;
                transition: all 0.2s linear;
                padding: 20px;
                
                }
    
    
                .image-text-section{
                    width: 90%;
                    margin-inline: auto;
                    margin-top: 70px;
                }
                .image-text-section h2{
                    margin-bottom: 30px;
                    width: 90%;
                    margin-inline: auto;
                    
                }
    
                .image-text-container{
                    display: flex;
                    width: 100%;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 30px;
                }
                .image-text-container.reverse-column{
                    flex-direction: column-reverse;
                }
                .image-text-container:first-child{
                    margin-top: 0px;
                }
    
                .image-container{
                    width: 100%;
                    height: auto;
                    position: relative;
                }
                .image-cover{
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 600px;
                    height: 730px;
                    transition: all 0.9s 1s ease-in-out;
                    background-color: #fff;
                }
                .image-cover.appear{
                    height: 0px;
                }
                .image-text-container img{
                    width: 100%;
                    height: auto;
                    
                }
    
                .text-description{
                    margin-inline: 80px;
                    width: 100%;
                    margin-top: 20px;
                    min-height: unset;
                    
                }
                .text-description h4{
                    font-size: 20px;
                    line-height: 22px;
                }
    
                .text-description b{
                    margin-top: 20px;
                    font-size: 20px;
                    font-weight: 800;
                }
                .text-description p{
                    font-size: 16px;
                    font-weight: 700;
                    color: #A3A3A3;
                }
    
                .faq-section{
                    display: flex;
                    flex-direction: column;
                    margin-inline: 30px;
                    margin-top: 40px;
                    width: 90%;
                    margin-inline: auto;
                }
                .faq-image-container{
                    width: 100%;
                    height: 90vw;
                    position: relative;
                    margin-left: auto;
                    margin-right: 0px;
                }
                .faq-image-container img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 7px;
                }
                .faq-categories-container{
                    position: absolute;
                    bottom: 20px;
                    right: 10px;
                    display: flex;
                    flex-direction: column;
                }
                .faq-category{
                    width: 210px;
                    height: auto;
                    padding: 15px;
                    padding-inline: 20px;
                    border: 2px solid rgba(255, 255, 255, 0.30);
                    background: #d9d3d34f;
                    backdrop-filter: blur(30px);
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 18px;
                    margin-top: 10px;
                    font-weight: 700;
                    cursor: pointer;
                    transition: all 0.3s;
                }
                .faq-category:hover{
                    transform: translateX(20px);
                }
                .right-arrow{
                    height: 20px;
                    width: 20px;
                    background: url("/assets/images/arrow-right.png");
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                }
                .faq-questions-section{
                    width: 100%;
                    margin-inline: auto;
                    margin-top: 10px;
                } 
                .faq-question-container{
                    border-bottom: solid 2px #313131;
                    width: 100%;
                    padding-inline: 5px;
                    padding-block: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                }
                .faq-question-container p{
                    font-size: 14px;
                    font-weight: 600;
    
                }
                .faq-question-container b{
                    height: 0px;
                    color: #222;
                    width: 100%;
                    font-size: 12px;
                    font-weight: 600;
                    overflow-y: hidden;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    transition: all 300ms ease-in-out,
                    color 300ms 0ms ease-in-out;
                }
                .faq-question-container.clicked b{
                    height: 100px;
                    color: #fff;
                    transition: all 600ms ease-in-out,
                    color 600ms 400ms ease-in-out;
                }
                .downwards-arrow{
                    width: 15px;
                    height: 15px;
                    background: url("/assets/images/arrow-dark.png");
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                    rotate: 180deg;
                    margin-left: auto;
                }
    
    
    .blog-page{
        width: 100%;
        margin-inline: auto;
        max-width: 1400px; 
        display: flex;
        flex-direction: column;
        margin-top: -50px;
    }
    .blog-header{
        width: 90%;
        margin-inline: auto;
        max-width: 1400px;
        display: flex;
        align-items: start;
        justify-content: start;
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, -00%);
        
    }
    .blog-header h1{
        position: relative;
        font-size: 30px;
        line-height: 30px;
        bottom: unset;
        left: unset;
        width: 90%;
        margin-left: 2.5%;
        margin-right: auto;
        
    }
    .blog-page p{
        width: 90%;
        margin-inline: auto;
        margin-top: 20px;
        font-size: 17px;
    }
    .blog-page h2{
        width: 90%;
        padding-left: 5%;
        margin-right: auto;
        margin-top: 40px;
        font-size:22px;
        margin-bottom: -5px;
    }
    .blog-page img{
        width: 95%;
        margin-inline: auto;
        height: auto;
        margin-top: 50px;
    }
}
/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {

    .youtube-video-section{
        width: 85%;
        margin-inline: auto;
        border-radius: 10px;
        padding: 10px;
        padding-top: 20px;
        background-color: #313131;
        aspect-ratio: 1.77;
        margin-top: 50px;
    }
    .youtube-video{
        width: 100%;
        
        height: 100%;
        margin-top: 10px;
    }

    h1{
font-weight: 700;
letter-spacing: -0.05em;
font-size: 80px;
line-height: 75px;
}

h2{
font-weight: 700;
letter-spacing: -0.05em;
font-size: 40px;
line-height: 45px;
}
h3{
letter-spacing: -0.05em;
}

.navigation-bar-mobile{
    position: fixed;
    top: 0px;
    left: unset;
    right: 0px;
    display: none;
    width: 50%;
    height: 100vh;
    z-index: 8000;
    background-color: #1b1b1b83;
    backdrop-filter: blur(13.1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    opacity: 1;
    transition: all 0.3s 0s ease-in-out;
}
.navigation-bar-mobile .bolt-logo{
    margin-right: 10px;
    margin-left: -10px;
    margin-top: 40px;
    margin-bottom: 20px;
    height: 30px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.navigation-bar-mobile.hide-bar{    
    opacity: 0;
    width: 0%;
    display: none;
    transition: all 0.3s 0.3s ease-in-out;
}
.navigation-bar-mobile a{
    font-size: 25px;
    margin-top: 20px;
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s 0.3s ease-in-out;
}
.navigation-bar-mobile a:nth-child(1) {
  transition-delay: 0s;
}

.navigation-bar-mobile a:nth-child(2) {
    transition-delay: 0.1s;
}

.navigation-bar-mobile a:nth-child(3) {
    transition-delay: 0.2s;
}
.navigation-bar-mobile a:nth-child(4) {
    transition-delay: 0.3s;
}
.navigation-bar-mobile a:nth-child(5) {
    transition-delay: 0.4s;
}
.navigation-bar-mobile a:nth-child(6) {
    transition-delay: 0.5s;
}
.navigation-bar-mobile a:nth-child(7) {
    transition-delay: 0.6s;
}
.navigation-bar-mobile a:nth-child(8) {
    transition-delay: 0.7s;
}
.navigation-bar-mobile a:nth-child(9) {
    transition-delay: 0.8s;
}
.navigation-bar-mobile a:nth-child(10) {
    transition-delay: 0.9s;
}
.navigation-bar-mobile.hide-bar a{
    opacity: 0;
    
    transition: all 0.3s 0s ease-in-out;
}
.navigation-bar{
    height: 60px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
}
.navigation-bar.opaque{
    background: rgba(58, 58, 58, 0.63);
    backdrop-filter: blur(13.149999618530273px);
}
.navigation-buttons-holder{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}
.navigation-buttons-holder a{
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    display: none;

}
.bolt-logo{
    height: 30px;
    width: auto;
    margin-left: 30px;
    margin-right: auto;
    flex: none;
}


.bolt-cameleon{
    height: 30px;
    width: 23px;
    margin-right: 30px;
    margin-left: auto;
    flex: none;
    background: url("/assets/images/burger-white.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.bolt-cameleon img{
    opacity: 0;
}





.intro-section{
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    margin-top: -90px;
    position: relative;
}
.intro-section img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-section h1{
    position: absolute;
    bottom: 50px;
    left: 50px;
    font-size: 90px;
    line-height: 80px;
}


.side-text{
font-size: 15px;
width: 60%;
margin-left: auto;
line-height: 18px;
}
.heading-side-text-row-column{
display: flex;
width: 90%;
flex-direction: column;
margin-inline: auto;
align-items: start;
justify-content: space-between;

margin-top: 100px
}

.reverse-image-text-section{
    width: 90%;
    margin-inline:auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow-y: hidden;
    margin-top: 50px;
}
.reverse-container{
    height: unset;
    width: 0%;
    
    position: relative;
}
.reverse-image-scroller{
    
    height: unset;
    width: 100%;
    overflow-y: scroll;
    display: flex;
    display: none;
    width: 0%;
    flex-direction: column-reverse;
    scrollbar-width: none; /* Hides the scrollbar */
}
.reverse-image-scroller::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}

.reverse-image-gradient{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(
        to bottom,
        white 0%,         /* White at the very top */
        rgba(255, 255, 255, 0) 15%,        /* White up to 10% */
        transparent 10%,  /* Transparent from 10% */
        transparent 90%,  /* Transparent up to 90% */
        rgba(255, 255, 255, 0) 85%,        /* White from 90% */
        white 100%        /* White at the very bottom */
    );
}
.reverse-image-text-section h2{
    width: 100%;
    margin-left: 0px;
    margin-top:50px;
    font-size: 45px;
    font-weight: 700;
}
.reverse-image-scroller img{
    width: 100%;
}


.testimonial-brackets-section{
    width: 90%;
    margin-inline: auto;
    
    margin-top: 50px;
}
.testimonial-bracket-container{
    display: flex;
    margin-top: 50px;
}
.up-bracket{
    width: 50px;
    height: 200px;
    background: url("/assets/images/bracket-up.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
    flex: none;
}

.testimonial-brackets-section p{
    font-size: 17px;
    
    margin-inline: 50px;
    opacity: 1;
    transition: all 0.3s;
}

.down-bracket{
    width: 50px;
    height: 200px;
    background: url("/assets/images/bracket-down.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
    flex: none;
}

.grid-container {
    width: 100%; /* Adjust as needed */
}





.team-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
}
.team-box-row{
    display: flex;
    width: 100%;
    margin-top: 50px;
}
.team-box{
    width: 100%;
    background: url("/assets/images/team1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 360px;
    flex: auto;
    margin-right: 15px;
    border-radius: 10px;
    filter: grayscale(100%);
    position: relative;
    cursor: pointer;
    transition: all 0.3s 0s linear;
}
.team-box.active{
    width: 300px;
    flex: none;
    filter: grayscale(0%);
    transition: all 0.8s 0s linear;
}
.flipped-name{
    position: absolute;
    bottom: 30px;
    right: 10px;
    rotate: 270deg;
    font-size: 25px;
    color: white;
    font-weight: 700;
}

.team-box-description{
    display: flex;
    flex-direction: column;
    width: 100%;
    
}

.accreditation-container{
 width: 23px;
 
}
.acrid-bubble{

    display: none;
}





.scattered-boxes-section h2{
    font-size: 80px;
    font-weight: 800;

}


.grid-box{
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
}
.perk-box{
    background: #f6f6f6;
    border-radius: 15px;
    padding: 15px;
    height: 200px;
    width: 150px;
    border: 2px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s 0.7s;
}
.perk-box.visible{
    opacity: 1;
}



.perk-box b{
    font-size: 15px;
}
.perk-box p{
    margin-top: 5px;
    font-size: 13px;
}




.points-and-images-section{
    width: 95%;
    margin-inline: auto;
    margin-block: 50px;
    margin-top: 70px;
    margin-bottom: 100px
}
.points-and-images-row{
    position: relative;
    display: flex;
    margin-top: 50px;
}
.point-container{
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: solid 10px #313131;
    padding-inline: 20px;
    font-size: 30px;
    width: 100%;
    border-radius: 0px 12px 12px 0px;

}
.point-container h3{
    font-weight: 600;
    font-size: 24px;
}
.point-container p{
    display: none;
    font-size: 15px;
    margin-top: 5px;
    color: white;
}
.point-container.active-point{
    height: 160px;
    border-left: solid 10px #fff;
    
    background: #31313186;
    backdrop-filter: blur(5px);
    
}
.point-container.active-point p{
    display: block;
}
.point-image-container{
    
    width: 40%;
    height: 100%;
    position: absolute;
    right: 10%;
    top: -20px;
    z-index: -1;
}

.point-image-container img{
    height: 100%;
    width: auto;
    
}



.image-collection-section{
    width: 95%;
    margin-top: 50px;
    margin-inline: auto;

}
.image-collection-section img{
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}




.network-section{
    width: 95%;
    margin-top: 100px;
    margin-bottom: 60px;
    margin-inline: auto;
}






.stagered-boxes{
    width: 95%;
    margin-top: 10px;
    margin-inline: auto;
    
}





.timeline-image-text-pair{
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 100px;
}
.timeline-text-container{
    height: 300px;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-block: 70px;
    flex: none;
}






.right-text-and-images-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}
.right-text-and-images-section h3{
    width: 70%;
    font-size:30px;
    margin-left: auto;
}
.right-text-and-images-section p{
    font-size: 17px;
    width: 70%;
    margin-left: auto;
    margin-top: 20px;
}
.right-text-and-images-row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
    gap: 15px;
}
.right-text-and-image{
    flex: none;
    height: 300px;
    width: 300px;
    background-color: #eee;
    border-radius: 20px;
}

.right-text-and-image img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
}






.team-information-section{
    width:90%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    gap: 30px;
}
.team-information-text-column{
    width: 100%;
    opacity: 1;
    transition: 0.3s ease-in-out;
}
.team-information-text-column.disappear{
    width: 100%;
    opacity: 0;
}
.team-information-section h2{
    font-size: 35px;
    font-weight: 800;
}
.team-information-section b{
    font-size: 20px;
    font-weight: 800;
}
.team-information-section p{
    font-size: 16px;
    font-weight: 700;
    margin-top: 25px;
}
.team-information-section h3{
    font-size: 20px;
    font-weight: 800;
    margin-top: 20px;
}
.skills-bubbles-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
}
.skill-bubble{
    height: 30px;
    padding-inline: 15px;
    border-radius: 20px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}





.career-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 100px;
    margin-bottom: 100px;
}
.career-section h2{
    margin-left: 20px;
    margin-bottom: 30px;
}
.career-option{
    display: flex;
    align-items: center;
    padding: 20px;
    padding-block: 30px;
    border-bottom: solid 2px #DCDCDC;
}
.career-option:last-child
{
    border-bottom: none;
}
.career-description-container{
    width: 80%;
    margin-right: auto;

}
.career-description-container h3{
    font-size: 27px;
}
.career-description-container p{
    font-size: 15px;
}
.career-option b{
    font-size: 20px;
}



.contact-form-section{
    width: 90%;
    position: absolute;
    top: 150px;
    right: 5%;
    padding: 20px;
    padding-bottom: 30px;
    padding-right: 20px;
    padding-left: 13px;
    border: 2px solid rgba(222, 222, 222, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(5px);
    border-radius: 10px;
}
.contact-form-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 450px;
    scrollbar-width: none;
    position: relative;
}
.contact-form-container::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}
.contact-form-line{
    height: 450px;
    width: 8px;
    background:  linear-gradient(
        to bottom,
        #22222200 0%,         /* Transparent at the very top */
        #222 10%,        /* Transparent up to 10% */
        #222 10%,               /* Black from 10% */
        #222 90%,               /* Black up to 90% */
        #222 90%,        /* Transparent from 90% */
        #22222200 100%         /* Transparent at the very bottom */
    );
    position: absolute;
    top: 30px;
    left: 20px;
}

.contact-form-question-container{
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: start;
    margin-top: 20px;
}
.contact-point{
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: #222;
    flex: none;
    margin-top: 7px;
}
.contact-question{
    margin-left: 15px;
    width: 90%;
}
.contact-form-question-container h3{
    font-size: 22px;
}


.question-bubbles-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
}
.question-bubble{
    height: 36px;
    padding-inline: 15px;
    border-radius: 18px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.5s ease-in-out;
}
.question-bubble.selected{
    background-color: #222;
    color: white;
}
.next-button{
    height: 40px;
    padding-inline:20px;
    border-radius: 20px;
    background-color: #222;
    color: white;
    width: min-content;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin-left: auto;
    margin-top: 20px;
}

.input-group {
    position: relative;
    width: 100%; /* Adjust width as needed */
    margin-bottom: 25px; /* Space for the floating label */
}
.input-field {
    width: 100%;
    padding: 10px 0; /* Vertical padding */
    border: none; /* Remove all borders */
    border-bottom: 2px solid #222; /* Only the bottom line */
    background-color: transparent; /* No background */
    font-size: 1rem;
    color: #222;
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    margin-top: 20px;
}

/* Change bottom line color on focus */
.input-field:focus {
    border-bottom-color: #222; /* Blue bottom line on focus */
}

/* Hide placeholder on focus for better floating label experience */
.input-field:focus::placeholder {
    color: transparent;
}

/* The Label for Floating Effect */
.input-label {
    position: absolute;
    left: 0;
    top: 20px; /* Aligns with input text */
    color: #222;
    font-size: 18px;
    pointer-events: none; /* Allows clicks to pass through to the input */
    transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.input-field:focus + .input-label,
    .input-field:not(:placeholder-shown) + .input-label {
        top: 0px; /* Move label up */
        font-size: 0.8rem; /* Make label smaller */
        color: #222; /* Change label color */
    }

    /* Prevent autocomplete background from interfering with transparency */
    .input-field:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
        -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
        transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
    }








.venues-section{
    width: 85%;
    margin-inline: auto;

}
.venues-container{
    margin-top: 40px;
    width: 100%;
    height: 800px;
    border-radius: 20px;
    background: url("/assets/images/venue.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}
.venue-description{
    width: 40%;
    
    display: flex;
    flex-direction: column;
    margin-block: 80px;
    margin-right: 70px;
}
.venues-container h3{
    font-size: 80px;
    line-height: 80px;
    
}
.venues-container p{
    font-size: 22px;
    margin-top: 30px;
}
.venue-bubbles{
    display: flex;
    margin-top: auto;
}
.venue-bubble{
    height: 45px;
    border: solid 2.5px #222;
    border-radius: 22.5px;
    padding-inline: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 10px;
}
.moving-boxes-container{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;


    width: 40%;
    max-width: 800px; /* Limit overall width */
     scrollbar-width: none;

}
.moving-boxes-container::-webkit-scrollbar{
    display: none;
}
.venue-box-row{
    display: flex;
    height: 350px;
    width: 100%;
    margin-top: 12px;
    
}
.box-spacer{
    width: 12px;
    height: 1px;
    flex: none;
}
.vanue-item{
    width: 50%;
    height: 350px;
    background-color: #ffffff79;
    
    margin-top: 15px;
    border-radius: 10px;

}
.vanue-item.right-vanue{
    margin-top: 100px;
}





.timeline-section{
    width: 100%;
    margin-inline: auto;
    margin-top: 50px;
    background-color: #222;
}
.timeline-container{
    width: 100%;
    min-height: 40px;
    height: auto;
    position: relative;
}
.timeline-floating-box{
    position: absolute;
    padding-inline: auto;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff63;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    font-size: 20px;
    border-radius: 9px;
}
.timeline-container b{
    margin-inline: 18px;
}
.timeline-container p{
    position: absolute;
    right: 7%;
    bottom: 0%;
    font-size: 18px;
    font-weight: 700;
    width: 50%;
}





.hall-of-fame-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
}
.fame-container{
    width: 100%;
    display: flex;
    margin-top: 40px;
}
.fame-line{
    width: 1px;
    height: 350px;
    background-color: #313131;
    margin-inline: 5px;
    flex: none;
}
.fame-box{
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fame-description{
    width: 90%;

}
.fame-image{
    width: 90%;
    height: auto;
}

.fame-image img{
    width: 100%;
    height: auto;

}
.fame-box h3{
    font-size: 18px;
    margin-top: 15px;
    margin-inline: 10px;
}
.fame-box p{
    font-size: 13px;
    margin-top: -5px;
    margin-inline: 10px;
}
.fame-box h4{
    font-size: 25px;
    margin-top: 15px;
    margin-inline: 10px;
}
.fame-box span{
    font-size: 30px;
}


.golden-ratio-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
}
.golden-ratio-container{
    display: flex;
    margin-top: 40px;
    gap: 10px;
}
.golden-ratio-column{
    width: 66%;
    
    height: 280px;
    gap: 15px;
}
.golden-column-two{
    width: 33%;
    
    
    height: 575px;
    gap: 15px;
}
.golden-top-two{
    width: 100%;
    height: 68%;
    background: url("/assets/images/golden-top1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    border: solid 2px #eee;

}
.golden-bottom-three{
    width: 100%;
    height: 30%;
    background: url("/assets/images/golden-bottom2.png"), #222;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 15px;
}
.golden-top{
    width: 100%;
    height: 280px;
    background-color: #eee;
    background: url("/assets/images/golden-top.png");
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    display: flex;
}
.golden-frosted-label{
    height: 70px;
    width: 95%;
    margin-inline: auto;
    margin-top: auto;
    margin-bottom: 20px;    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    font-size: 30px;
    border-radius: 20px;
}
.golden-row{
    height: 285px;
    display: flex;
    gap: 15px;
    margin-top: 15px;
}
.golden-bottom-one{
    width: 55%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
    border: solid 2px #eee;
    background: url("/assets/images/golden-bottom0.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}
.golden-bottom-two{
    width: 45%;
    height: 100%;
    background-color: #E8E8E8;
    background:  url('/assets/images/golden-bottom1.png'), #E8E8E8;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
}










.numbers-section{
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
}
.numbers-box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}
.number-box{
    background-color: #313131;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 180px;
    width: 140px;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.number-box h3{

    font-size: 16px;
}
.number-box b{
    font-size: 40px;
    font-weight: 600;
}



.service-boxes-container{
display: flex;
margin-top: 50px;

width: 95%;
margin-inline: auto;
}
.service-box{
height: 300px;
width: 100%;
background-color: #A3A3A3;
margin-left: 15px;
border-radius: 40px;
position: relative;
cursor: pointer;
transition: all 0.3s linear;
}
.service-box:hover{
width: 150%;

transition: all 0.3s linear;
}
.service-box:hover .service-label-container {
width: 50%;
margin-left: 20px;
margin-right: auto;
padding-inline: 30px;
transition: all 0.3s linear;
}
.service-background{
height: 300px;
width: 100%;

}
.service-background img{
height: 100%;
object-fit: cover;
width: 100%;
border-radius: 40px;
}
.service-box-overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.service-bubbles-arrow-row{
display: flex;
margin-top: 20px;
margin-inline: 20px;
margin-bottom: auto;
}
.service-bubble{
height: 35px;
width: auto;
padding: 10px;
padding-inline: 15px;
border-radius: 20px;
border: #fff solid 2px;
color: white;
font-weight: 700;
font-size: 13px;

display: flex;
align-items: center;
justify-content: center;
}
.arrow-NE{
height: 25px;
width: 25px;
background-image: url("/assets/images/arrow.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: 5px;
margin-top: 10px;
}
.service-label-container{

height: 60px;
border-radius: 20px;
width: 90%;
margin-inline: auto;
margin-bottom: 20px;
margin-top: auto;
border: 2px solid rgba(255, 255, 255, 0.30);
background: rgba(255, 255, 255, 0.63);
backdrop-filter: blur(13.149999618530273px);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
transition: all 0.2s linear;

}

.blog-posts-footer-container{
display: flex;
/* flex-direction: column; */
margin-top: 40px;
padding-right: 20px;
margin-bottom: 50px;
width: 100%;
margin-inline:auto;
}
.blog-box{

width: 100%;

margin-left: 12px;
border-radius: 15px;
position: relative;
padding-bottom: 20px;
cursor: pointer;
margin-bottom: 30px;
}
.blog-box:hover{
background-color: #000000;

}
.blog-box:hover .blog-image-overlay{
background: linear-gradient(0deg, #000000 5.25%, rgba(0, 0, 0, 0) 100%);
}
.blog-image-container{
height: 250px;
width: 100%;
background-color: #222;
border-radius: 15px 15px 0px 0px;
position: relative;

}
.blog-background{
height: 250px;
width: 100%;
}
.blog-background img{
height: 100%;
object-fit: cover;
width: 100%;
border-radius: 15px;
}
.blog-image-overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
padding: 20px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(0deg, #222 5.25%, #22222200 100%);
}
.glass-tag{
    height: 40px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 8px;
    border: #ffffffa1 solid 2px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(15px);
    color: #222;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    }

.dark-bubble{
height: 40px;
width: auto;
padding: 10px;
padding-inline: 7px;
border-radius: 20px;
border: #fff solid 2px;
color: #fff;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-size: 12px;
}
.blog-description-container{
margin-top: 20px;
width: 95%;
margin-inline: auto;
}
.blog-description-container h3{
font-size: 22px;
line-height: 25px;
}
.blog-description-container p{
font-size: 13px;
font-weight: 600;
margin-top: 10px;
line-height: 14px
}
.blog-tags-arrow-row{
display: flex;
margin-top: 30px;
}
.arrow-NE{
height: 23px;
width: 23px;
background-image: url("/assets/images/arrow.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: 5px;
margin-top: 10px;
}
.arrow-NE-dark{
height: 23px;
width: 23px;
background-image: url("/assets/images/arrow-dark.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
margin-right: 5px;
margin-top: 10px;
}

.footer{
background-color: #000;
min-height: 400px;
display: flex;
flex-direction: column;
padding: 40px;
}
.footer-logo{
width: 120px;
height: 40px;
background: url("/assets/images/logo-large.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;

}
.footer-columns-row{
    display: flex;
    
    
}
.footer-column{
    display: flex;
    flex-direction: column;
    width: 100%;
    
}
.footer-column h4{
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.05em;
    
}
.footer-column a{
    font-size: 18px;
    opacity: 0.44;
    text-decoration: none;
}
.footer-column span{
    text-decoration: underline;
}
.footer b{
    margin-top: 100px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    opacity: 0.4;
}
.text-logo-row{
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.footer-logo-small{
    width: 53px;
    height: 45px;
    background: url("/assets/images/footer-logo-small.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}





.study-boxes-container{
    display: flex;
    margin-top: 40px;
    padding-right: 0px;
    width: 100%;
    margin-inline: auto;
    }
    .study-box:nth-child(4){
        display: none;
    }
    .study-box{
    height: 300px;
    width: 100%;
    background-color: #A3A3A3;
    margin-left: 10px;
    border-radius: 40px;
    position: relative;
    cursor: pointer;
    }

    .study-background{
    height: 300px;
    width: 100%;
    
    }
    .study-background img{
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 40px;
    }
    .study-box-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.05s linear;
    }
    .study-box-hovered-overlay{
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);

        backdrop-filter: blur(10px);
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 40px;
        transition: all 0.2s linear;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        opacity: 0;
        transition: all 0.3s 0.05s linear;
    }
    .study-bubbles-arrow-row{
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
    }
    .study-bubble{
    height: 40px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .study-label-container{
    
    height: 90px;
    border-radius: 30px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
    
    }


    .spacer {
        height: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

      }
      
      .horizontal-scroll {
        position: relative;
        height: 100vh;
        width: 100%;
        /* overflow-x: hidden; */
      }
      
      .scroll-track {
        display: flex;
        height: 100vh;
        width: max-content;
        position: sticky;
        top: 0;
      }
      
      .panel {
        width: 500px;
        
        
        padding-top: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        
       
        margin-left: 20px;
      }
      .panel h3{
        font-size: 24px;
        font-weight: 700;
        margin-inline: 20px;
        margin-top: 20px;
        letter-spacing: -0.03em;
      }

        .scrolling-boxes-image-container{
        height: 400px;
        width:500px;
        background-color: #A3A3A3;
        margin-left: 20px;
        border-radius: 40px;
        position: relative;
        cursor: pointer;
        }


        .scrolling-boxes-image-container img{
        height: 100%;
        object-fit: cover;
        width: 100%;
        border-radius: 40px;
        }
        .scrolling-boxes-image-overlay{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        opacity: 1;
        transition: all 0.05s linear;
        }
        .scrolling-box-bubbles-row{
            display: flex;
            margin-top: 20px;
            margin-inline: 20px;
            margin-bottom: auto;
            }
        .scrolling-box-bubble{
            height: 40px;
            width: auto;
            padding: 10px;
            padding-inline: 15px;
            border-radius: 20px;
            border: #fff solid 3px;
            color: white;
            font-weight: 700;
            font-size: 20px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            }
        
            .scrolling-box-label-container{
            
            height: 90px;
            border-radius: 30px;
            width: 90%;
            margin-inline: auto;
            margin-bottom: 20px;
            margin-top: auto;
            border: 2px solid rgba(255, 255, 255, 0.30);
            background: rgba(255, 255, 255, 0.63);
            backdrop-filter: blur(13.149999618530273px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            font-weight: 700;
            transition: all 0.2s linear;
            padding: 20px;
            
            }


            .image-text-section{
                width: 95%;
                margin-inline: auto;
                margin-top: 70px;
            }
            .image-text-section h2{
                margin-bottom: 40px;
                margin-left: 100px;
            }

            .image-text-container{
                display: flex;
                width: 100%;
                
                align-items: center;
                justify-content: center;
                margin-bottom: 30px;
            }
            .image-text-container:first-child{
                margin-top: 40px;
            }

            .image-container{
                width: 320px;
                height: 400px;
                position: relative;
            }
            .image-cover{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 320px;
                height: 400px;
                transition: all 0.9s 1s ease-in-out;
                background-color: #fff;
            }
            .image-cover.appear{
                height: 0px;
            }
            .image-text-container img{
                width: 320px;
                height: 400px;
                
            }

            .text-description{
                margin-inline: 40px;
                max-width: 600px;

            }
            .text-description h4{
                font-size: 23px;
                line-height: 26px;
            }

            .text-description b{
                margin-top: 0px;
                font-size: 23px;
                font-weight: 800;
            }
            .text-description p{
                font-size: 17px;
                font-weight: 700;
                color: #A3A3A3;
            }

            .faq-section{
                display: flex;
                margin-inline: 30px;
                margin-top: 40px;
                width: 95%;
                margin-inline: auto;
            }
            .faq-image-container{
                width: 40%;
                height: 35vw;
                position: relative;
                margin-left: auto;
                margin-right: 50px;
            }
            .faq-image-container img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 7px;
            }
            .faq-categories-container{
                position: absolute;
                top: 20px;
                right: -40px;
                display: flex;
                flex-direction: column;
            }
            .faq-category{
                width: 230px;
                height: auto;
                padding: 15px;
                padding-inline: 20px;
                border: 2px solid rgba(255, 255, 255, 0.30);
                background: #d9d3d34f;
                backdrop-filter: blur(30px);
                border-radius: 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 20px;
                margin-top: 10px;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.3s;
            }
            .faq-category:hover{
                transform: translateX(20px);
            }
            .right-arrow{
                height: 30px;
                width: 30px;
                background: url("/assets/images/arrow-right.png");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }
            .faq-questions-section{
                width: 55%;
                margin-inline: auto;
                padding-top: 40px;
            } 
            .faq-question-container{
                border-bottom: solid 2px #313131;
                width: 100%;
                padding-inline: 30px;
                padding-block: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
            }
            .faq-question-container p{
                font-size: 17px;
                font-weight: 700;

            }
            .faq-question-container b{
                height: 0px;
                color: #222;
                width: 100%;
                font-size: 15px;
                font-weight: 600;
                overflow-y: hidden;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: all 300ms ease-in-out,
                color 300ms 0ms ease-in-out;
            }
            .faq-question-container.clicked b{
                height: 100px;
                color: #fff;
                transition: all 600ms ease-in-out,
                color 600ms 400ms ease-in-out;
            }
            .downwards-arrow{
                width: 17px;
                height: 17px;
                background: url("/assets/images/arrow-dark.png");
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                rotate: 180deg;
            }


.blog-page{
    width: 90%;
    margin-inline: auto;
    max-width: 1400px; 
    display: flex;
    flex-direction: column;
    margin-top: -50px;
}
.blog-header{
    width: 90%;
    margin-inline: auto;
    max-width: 1400px;
    display: flex;
    align-items: start;
    justify-content: start;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -00%);
    
}
.blog-header h1{
    position: relative;
    font-size: 80px;
    line-height: 80px;
    bottom: unset;
    left: unset;
    width: 90%;
    margin-left: 5%;
    margin-right: auto;
    
}
.blog-page p{
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    font-size: 20px;
}
.blog-page h2{
    width: 90%;
    padding-left: 5%;
    margin-right: auto;
    margin-top: 50px;
    font-size:40px;
    margin-bottom: -25px;
}
.blog-page img{
    width: 95%;
    margin-inline: auto;
    height: auto;
    margin-top: 50px;
}

}
/* small desktop */
@media (min-width: 1024px) and (max-width: 1400px) 
{

    .youtube-video-section{
        width: 80%;
        margin-inline: auto;
        border-radius: 10px;
        padding: 10px;
        padding-top: 20px;
        background-color: #313131;
        aspect-ratio: 1.77;
    }
    .youtube-video{
        width: 100%;
        
        height: 100%;
        margin-top: 10px;
    }

h1{
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 60px;
    line-height: 75px;
    }
    
    h2{
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 45px;
    line-height: 65px;
    }
    h3{
    letter-spacing: -0.05em;
    }
    
    .navigation-bar-mobile{

        display: none;
        height: 0px;
        width: 0px;
        overflow: hidden;
    }
    .navigation-bar{
        height: 80px;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.6s ease-in-out;
    }
    .navigation-bar.opaque{
        background: rgba(58, 58, 58, 0.63);
        backdrop-filter: blur(13.149999618530273px);
    }
    .navigation-buttons-holder{
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    .navigation-buttons-holder a{
        text-decoration: none;
        font-size: 18px;
        font-weight: 700;
        color: #fff;

    }
    .bolt-logo{
        height: 35px;
        width: auto;
        margin-left: 30px;
        margin-right: auto;
        flex: none;
        -webkit-filter: invert(1);
    }
    .bolt-logo img{
        height: 100%;
        width: auto;
    }
    
    .bolt-cameleon{
        height: 35px;
        width: auto;
        margin-right: 30px;
        margin-left: auto;
        flex: none;
    }
    .bolt-cameleon img{
        height: 100%;
        width: auto;
        -webkit-filter: invert(1);
    }
    
    
    
    
    
    .intro-section{
        width: 100%;
        height: 110vh;
        margin-top: -90px;
        position: relative;
    }
    .intro-section img{
        width: 100%;
        height: 100%;
    }
    
    .intro-section h1{
        position: absolute;
        bottom: 50px;
        left: 100px;
        font-size: 90px;
        line-height: 80px;
    }
    
    
    .side-text{
    font-size: 16px;
    width: 40%;
    line-height: 18px;
    }
    .heading-side-text-row-column{
    display: flex;
    width: 90%;
    margin-inline: auto;
    align-items: start;
    justify-content: space-between;
    
    margin-top: 100px
    }
    
    .reverse-image-text-section{
        width: 95%;
        margin-inline:auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        overflow-y: hidden;
        margin-top: 50px;
    }
    .reverse-container{
        height: 100vh;
        width: 40%;
        
        position: relative;
    }
    .reverse-image-scroller{
        height: 100vh;
        width: 100%;
        overflow-y: scroll;
        display: flex;
        flex-direction: column-reverse;
        scrollbar-width: none; /* Hides the scrollbar */
    }
    .reverse-image-scroller::-webkit-scrollbar {
        display: none; /* Hides the scrollbar */
    }
    
    .reverse-image-gradient{
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(
            to bottom,
            white 0%,         /* White at the very top */
            rgba(255, 255, 255, 0) 15%,        /* White up to 10% */
            transparent 10%,  /* Transparent from 10% */
            transparent 90%,  /* Transparent up to 90% */
            rgba(255, 255, 255, 0) 85%,        /* White from 90% */
            white 100%        /* White at the very bottom */
        );
    }
    .reverse-image-text-section h2{
        width: 50%;
        margin-left: 50px;
        margin-top:50px;
        font-size: 35px;

        font-weight: 700;
    }
    .reverse-image-scroller img{
        width: 100%;
    }
    
    
    .testimonial-brackets-section{
        width: 90%;

    }
    .testimonial-bracket-container{
        display: flex;
        margin-top: 50px;
    }
    .up-bracket{
        width: 60px;
        height: 200px;

    }

    .testimonial-brackets-section p{
        font-size: 22px;
        
        margin-inline: 50px;
        opacity: 1;
        transition: all 0.3s;
    }
    .testimonial-brackets-section p.hide{
        opacity: 0;
    }
    .down-bracket{
        width: 60px;
        height: 200px;

    }

    .grid-container {
        margin-top: 50px;
        display: grid;
        /* 5 equal columns */
        grid-template-columns: repeat(5, 1fr);
        /* 2 equal rows */
        grid-template-rows: repeat(2, 1fr);
    
        /* This creates the lines between cells */
        gap: 2px; /* 2px stroke */
        background-color: #313131; /* Gray color for the lines */
        border: 2px solid #313131; /* Add border around the whole grid */
    
        width: 100%; /* Adjust as needed */
        margin-inline: auto;
    
    }
    
    .grid-item {
        background-color: #222; /* White background for the cells */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        font-size: 1.2em;
        color: #333;
        box-sizing: border-box; /* Include padding in element's total width/height */
        aspect-ratio: 1;
        transition: all 0.3s;
    }
    .grid-item:hover{
        background-color: #313131;
    }
    .grid-logo{
        width: 80%;
        height: 80%;
        flex: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .grid-logo img{
        width: 100%;
        height: auto;
    }
    
    
    
    .team-section{
        width: 95%;
    }
    .team-box-row{
        display: flex;
        width: 100%;
        margin-top: 50px;
    }
    .team-box{
        height: 400px;
    }
    .team-box.active{
        width: 400px;
    }
    .team-box-description{
        width: 90%;
    }
    .accreditation-container{
     width: 10%;

    }
    .acrid-bubble{
        display: none;
    }

    
    
    
    .scattered-boxes-section{
        width: 95%;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-top: 100px;
        margin-bottom: 50px;
        height: 600px;
    }
    .scattered-boxes-section h2{
        font-size: 120px;
        font-weight: 800;
    
    }
    .scattered-boxes-container{
        position: absolute;
        display: grid; 
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        min-height: 250px; /* Give it a minimum height */
        color: black;
        padding: 10px; /* Padding inside the container */
    }
    
    .grid-box{
        font-weight: bold;
        display: flex; /* Use flexbox to center content inside each item */
        justify-content: center;
        align-items: center;
        padding: 15px;
        border-radius: 5px;
    }
    .perk-box{
        background: #f6f6f6;
        border-radius: 15px;
        padding: 20px;
        height: 250px;
        width: 200px;
        border: 2px solid #E3E3E3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.3s 0.7s;
    }
    .perk-box.visible{
        opacity: 1;
    }
    
    #type2{
        background: #fff;
        transition: all 0.3s 1.3s;
    }
    #type2:first-child{
        background: #fff;
        transition: all 0.3s 0.9s;
    }
    #type3{
        border: 2px solid rgba(222, 222, 222, 0.3);
        background: rgba(255, 255, 255, 0.63);
        backdrop-filter: blur(5px);
        transition: all 0.3s 1.8s;
    }
    
    .perk-box b{
        font-size: 20px;
    }
    .perk-box p{
        margin-top: 5px;
        font-size: 16px;
    }
    
    
    
    
    .points-and-images-section{
        width: 95%;
        margin-inline: auto;
        margin-block: 50px;
        margin-top: 70px;
        margin-bottom: 150px
    }
    .points-and-images-row{
        position: relative;
        display: flex;
        margin-top: 50px;
    }
    .point-container{
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-left: solid 10px #313131;
        padding-inline: 20px;
        font-size: 30px;
        width: 100%;
        border-radius: 0px 12px 12px 0px;
    
    }
    .point-container h3{
        font-weight: 600
    }
    .point-container p{
        display: none;
        font-size: 18px;
        margin-top: 5px;
        color: white;
    }
    .point-container.active-point{
        height: 180px;
        border-left: solid 10px #fff;
        
        background: #31313174;
        backdrop-filter: blur(5px);
        
    }
    .point-container.active-point p{
        display: block;
    }
    .point-image-container{
        width: 40%;
        height: 100%;
        position: absolute;
        right: 10%;
        top: -20px;
        z-index: -1;
    }
    
    .point-image-container img{
        height: 100%;
        width: auto;
        
    }
    
    
    
    .image-collection-section{
        width: 85%;
        margin-top: 50px;
        margin-inline: auto;
    
    }
    .image-collection-section img{
        width: 100%;
        height: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    
    
    
    .network-section{
        width: 85%;
        margin-top: 100px;
        margin-bottom: 60px;
        margin-inline: auto;
    }
    
    .network-section img{
        width: 100%;
        height: auto;
    }
    
    
    
    
    
    .stagered-boxes{
        width: 85%;
        margin-top: 10px;
        margin-inline: auto;
        
    }
    
    .stagered-container{
        width: 100%;
        display: flex;
        margin-top: 40px;
        gap: 15px;
    }
    .stagered-column{
        width: 100%;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .stagered-boxes img{
        width: 100%;
        height: auto;
        border-radius: 15px;
    }
    .large-stagered{
        width: 100%;
        border-radius: 20px;
        opacity: 0;
        
    }
    .small-stagered{
        width: 100%;
        border-radius: 20px;
        opacity: 0;
    }
    .large-stagered.appear{
        opacity: 1;
    }
    .small-stagered.appear{
        opacity: 1;
    }
    
    #small0{
        transition: all 0.8s 0.5s ease-out;
    }
    #small1{
        transition: all 0.8s 0.8s ease-out;
    }
    #big0{
        transition: all 0.8s 0s ease-out;
    }
    #big1{
        transition: all 0.8s 0.3s ease-out;
    }
    
    
    
    .horizontal-timeline-section{
        width: 100%;
        margin-top: 30px;
        position: relative;
    }
    .gradient-left{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 200px;
        height: 100%;
        background: linear-gradient(to right, #222, transparent);
    }
    .gradient-right{
        position: absolute;
        right: 0px;
        top: 0px;
        width: 200px;
        height: 100%;
        background: linear-gradient(to left, #222, transparent);
    }
    .timeline-header{
        margin-left: 100px;
        margin-top: 100px;
    }
    .horizontal-timeline-container{
        height: 100%;
        display: flex;
        overflow-x: scroll;
        position: relative;
        scrollbar-width: none;
        flex: none;
    }
    .horizontal-timeline-container::-webkit-scrollbar{
        display: hidden;
    }
    .timeline-line{
        position: absolute;
        top: 50%;
        left: 0%;
        width: 100%;
        background-color: #fff;
        height: 7px;
        transform: translateY(-50%);
    }
    .timeline-image-text-pair{
        width: 450px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: none;
        margin-right: 100px;
    }
    .timeline-text-container{
        height: 300px;
        width: 450px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        margin-block: 70px;
        flex: none;
    }
    .timeline-dot{
        width: 30px;
        height: 30px;
        border-radius: 15px;
        background-color: #fff;
        
        flex: none;
    }
    .timeline-text-container.under{
        justify-content: start;
    }
    .timeline-image-text-pair:first-child{
        margin-left: 20vw;
    }
    .timeline-image-text-pair h3{
        width: 90%;
        font-size: 30px;
    }
    .timeline-image-text-pair p{
        width: 90%;
        font-size: 18px;
    }
    .timeline-image-container{
        height: 300px;
        width: 450px;
        margin-block: 70px;
    }
    .timeline-image-container img{
        height: 100%;
        width: 100%;
    }
    
    
    
    
    
    .right-text-and-images-section{
        width: 90%;

    }
    .right-text-and-images-section h3{

        font-size: 30px;

    }
    .right-text-and-images-section p{
        font-size: 18px;

    }
    .right-text-and-images-row{

        flex-wrap: wrap;
        margin-top: 30px;
        gap: 20px;
    }
    .right-text-and-image{
        flex: none;
        height: 240px;
        width: 240px;
        background-color: #eee;
        border-radius: 20px;
    }
    

    
    
    
    
    
    
    .team-information-section{
        width: 90%;
        
        gap: 50px;
    }
    
    
    .team-information-section h2{
        font-size: 40px;
        font-weight: 800;
    }
    .team-information-section b{
        font-size: 20px;
        font-weight: 800;
    }
    .team-information-section p{
        font-size: 17px;
        font-weight: 700;
        margin-top: 25px;
    }
    .team-information-section h3{
        font-size: 21px;
        font-weight: 800;
        margin-top: 20px;
    }

    .skill-bubble{
        height: 37px;
        padding-inline: 20px;
        border-radius: 20px;
        border: solid 2.5px #222;
        flex: none;
        font-size: 18px;
        font-weight: 700;
        margin-right: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .team-member-image {
        width: 70%;
        height: auto;
        margin-top: 20px;
    }
    .team-member-image img{
        height: auto;
        width: 100%;
        border-radius: 20px;
    }
    
    
    
    .career-section{
        width: 90%;
        margin-inline: auto;
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .career-section h2{
        margin-left: 20px;
        margin-bottom: 30px;
    }
    .career-option{
        display: flex;
        align-items: center;
        padding: 20px;
        padding-block: 30px;
        border-bottom: solid 2px #DCDCDC;
    }
    .career-option:last-child
    {
        border-bottom: none;
    }
    .career-description-container{
        width: 80%;
        margin-right: auto;
    
    }
    .career-description-container h3{
        font-size: 30px;
    }
    .career-description-container p{
        font-size: 17px;
    }
    .career-option b{
        font-size: 30px;
    }
    
    
    
    .contact-form-section{
        width: 55%;
        position: absolute;
        top: 100px;
        right: 80px;
        padding: 50px;
        padding-bottom: 30px;
        padding-right: 40px;
        border: 2px solid rgba(222, 222, 222, 0.3);
        background: rgba(255, 255, 255, 0.63);
        backdrop-filter: blur(5px);
        border-radius: 10px;
    }
    .contact-form-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        height: 550px;
        scrollbar-width: none;
        position: relative;
    }
    .contact-form-container::-webkit-scrollbar {
        display: none; /* Hides the scrollbar */
    }
    .contact-form-line{
        height: 550px;
        width: 8px;
        background:  linear-gradient(
            to bottom,
            #22222200 0%,         /* Transparent at the very top */
            #222 10%,        /* Transparent up to 10% */
            #222 10%,               /* Black from 10% */
            #222 90%,               /* Black up to 90% */
            #222 90%,        /* Transparent from 90% */
            #22222200 100%         /* Transparent at the very bottom */
        );
        position: absolute;
        top: 50px;
        left: 56.5px;
    }
    
    .contact-form-question-container{
        display: flex;
        width: 100%;
        align-items: start;
        justify-content: start;
        margin-top: 20px;
    }
    .contact-point{
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background-color: #222;
        flex: none;
        margin-top: 7px;
    }
    .contact-question{
        margin-left: 15px;
        width: 90%;
    }
    .contact-form-question-container h3{
        font-size: 25px;
    }
    
    
    .question-bubbles-container{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 13px;
    }
    .question-bubble{
        height: 30px;
        padding-inline: 15px;
        border-radius: 18px;
        border: solid 2px #222;
        flex: none;
        font-size: 16px;
        font-weight: 700;
        margin-right: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        transition: all 0.5s ease-in-out;
    }
    .question-bubble.selected{
        background-color: #222;
        color: white;
    }
    .next-button{
        height: 40px;
        padding-inline:20px;
        border-radius: 20px;
        background-color: #222;
        color: white;
        width: min-content;
        flex: none;
        font-size: 16px;
        font-weight: 700;
        margin-right: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center; 
        margin-left: auto;
        margin-top: 20px;
    }
    
    .input-group {
        position: relative;
        width: 100%; /* Adjust width as needed */
        margin-bottom: 25px; /* Space for the floating label */
    }
    .input-field {
        width: 100%;
        padding: 10px 0; /* Vertical padding */
        border: none; /* Remove all borders */
        border-bottom: 2px solid #222; /* Only the bottom line */
        background-color: transparent; /* No background */
        font-size: 1rem;
        color: #222;
        outline: none; /* Remove outline on focus */
        transition: border-color 0.3s ease; /* Smooth transition for border color */
        margin-top: 20px;
    }
    
    /* Change bottom line color on focus */
    .input-field:focus {
        border-bottom-color: #222; /* Blue bottom line on focus */
    }
    
    /* Hide placeholder on focus for better floating label experience */
    .input-field:focus::placeholder {
        color: transparent;
    }
    
    /* The Label for Floating Effect */
    .input-label {
        position: absolute;
        left: 0;
        top: 20px; /* Aligns with input text */
        color: #222;
        font-size: 18px;
        pointer-events: none; /* Allows clicks to pass through to the input */
        transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease; /* Smooth transition */
    }
    
    .input-field:focus + .input-label,
        .input-field:not(:placeholder-shown) + .input-label {
            top: 0px; /* Move label up */
            font-size: 0.8rem; /* Make label smaller */
            color: #222; /* Change label color */
        }
    
        /* Prevent autocomplete background from interfering with transparency */
        .input-field:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
            -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
            transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
        }
    
    
    
    
    
    
    
    
    .venues-section{
        width: 90%;
        margin-inline: auto;
    
    }
    .venues-container{
        margin-top: 40px;
        width: 100%;
        height: 700px;
        border-radius: 20px;
        background: url("/assets/images/venue.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
    }
    .venue-description{
        width: 35%;
        
        display: flex;
        flex-direction: column;
        margin-block: 80px;
        margin-right: 70px;
    }
    .venues-container h3{
        font-size: 60px;
        line-height: 60px;
        
    }
    .venues-container p{
        font-size: 19px;
        margin-top: 30px;
    }
    .venue-bubbles{
        display: flex;
        margin-top: auto;
    }
    .venue-bubble{
        height: 40px;
        border: solid 2px #222;
        border-radius: 22.5px;
        padding-inline: 12px;
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 10px;
    }
    .moving-boxes-container{
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
    
    
        width: 50%;
        max-width: 800px; /* Limit overall width */
         scrollbar-width: none;
    
    }
    .moving-boxes-container::-webkit-scrollbar{
        display: none;
    }
    .venue-box-row{
        display: flex;
        height: 320px;
        width: 100%;
        margin-top: 12px;
        
    }
    .box-spacer{
        width: 12px;
        height: 1px;
        flex: none;
    }
    .vanue-item{
        width: 50%;
        height: 320px;
        background-color: #ffffff79;
        
        margin-top: 15px;
        border-radius: 10px;
    
    }
    .vanue-item.right-vanue{
        margin-top: 100px;
    }
    
    
    
    
    

    .timeline-floating-box{

        height: 50px;

        font-size: 23px;

    }

    .timeline-container p{
        position: absolute;
        right: 7%;
        bottom: 0%;
        font-size: 19px;
        font-weight: 700;
        width: 50%;
    }

    
    
    
    
    .hall-of-fame-section{
        width: 90%;

    }

    .fame-line{
        height: 450px;
    }
    .fame-box h3{
        font-size: 21px;

    }
    .fame-box p{
        font-size: 16px;

    }
    .fame-box h4{
        font-size: 30px;

    }
    .fame-box span{
        font-size: 45px;
    }
    
    
    .golden-ratio-section{
        width: 90%;
        max-width: 1100px;
    }

    
    
    
    
    
    
    
    
    
    .numbers-section{
        width: 85%;
        margin-inline: auto;
        margin-top: 50px;
    }
    .numbers-box-container{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
    }
    .number-box{
        background-color: #313131;
        display: flex;
        padding: 20px;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        height: 270px;
        width: 200px;
        border-radius: 15px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .number-box h3{
        font-size: 20px;
    }
    .number-box b{
        font-size: 60px;
        font-weight: 600;
    }
    
    
    
    .service-boxes-container{
    display: flex;
    margin-top: 50px;
    
    }
    .service-box{
    height: 330px;
    width: 100%;

    }

    .service-box:hover .service-label-container {
    width: 70%;
    }
    .service-background{
    height: 330px;
    }

    .service-label-container{
    font-size: 23px;
    }
    



    .blog-posts-footer-container{
    width: 95%;
    }

    .blog-description-container h3{
    font-size: 28px;
    line-height: 40px;
    }
    .blog-description-container p{
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    line-height: 18px
    }
    .dark-bubble{
        font-size: 14px;
    }
    .arrow-NE{
    height: 28px;
    width: 28px;

    }
    .arrow-NE-dark{
    height: 28px;
    width: 28px;

    }
    


    .footer-column h4{
        font-size: 22px;
    }
    .footer-column a{
        font-size: 19px;
    }

    .footer b{
        margin-top: 100px;
        font-size: 16px;
    }

    
    
    
    
    .study-boxes-container{
        width: 95%;
        }
        .study-box{
        height: 340px;

        }
        .study-box:nth-child(4){
            display: none;
            }

        .study-background{
        height: 340px;
        width: 100%;
        }

        .study-box-hovered-overlay{
            font-size: 18px;
        }


    
        .study-label-container{
        font-size: 20px;
        }
    
    








        .spacer {
            height: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
    
          }
          
          .horizontal-scroll {
            position: relative;
            height: 100vh;
            width: 100%;
            /* overflow-x: hidden; */
          }
          
          .scroll-track {
            display: flex;
            height: 100vh;
            width: max-content;
            position: sticky;
            top: 0;
          }
          
          .panel {
            width: 600px;
          }
          .panel h3{
            font-size: 26px;
            margin-top: 20px;
          }
    
            .scrolling-boxes-image-container{
            height: 450px;
            width:600px;

            }
            .scrolling-box-bubble{
                height: 35px;
                font-size: 20px;

                }
            
                .scrolling-box-label-container{
                
                height: 90px;
                border-radius: 30px;
                width: 90%;
                margin-inline: auto;
                margin-bottom: 20px;
                margin-top: auto;
                border: 2px solid rgba(255, 255, 255, 0.30);
                background: rgba(255, 255, 255, 0.63);
                backdrop-filter: blur(13.149999618530273px);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                font-weight: 700;
                transition: all 0.2s linear;
                padding: 20px;
                
                }
    
    
                .image-text-section{
                    width: 90%;
                    margin-inline: auto;
                    margin-top: 70px;
                }
                .image-text-section h2{
                    margin-bottom: 40px;
                    margin-left: 100px;
                }
    
                .image-text-container{
                    display: flex;
                    width: 100%;
                    
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 30px;
                }
                .image-text-container:first-child{
                    margin-top: 40px;
                }
    
                .image-container{
                    width: 420px;
                    height: 530px;

                }
                .image-cover{
                    position: absolute;

                    width: 420px;
                    height: 530px;

                }
                .image-cover.appear{
                    height: 0px;
                }
                .image-text-container img{
                    width: 420px;
                    height: 530px;
                    
                }
    
                .text-description{
                    margin-inline: 80px;
                    max-width: 600px;
    
                }
                .text-description h4{
                    font-size: 28px;
                    line-height: 32px;
                }
    
                .text-description b{
                    margin-top: 5px;
                    font-size: 25px;

                }
                .text-description p{
                    font-size: 18px;
                    font-weight: 700;
                }
                .faq-question-container b{
                    height: 0px;
                    color: white;
                    width: 100%;
                    font-size: 15px;
                    font-weight: 600;
                    overflow-y: hidden;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    transition: all 300ms ease-in-out,
                    color 300ms 0ms ease-in-out;
                }
                .faq-question-container.clicked b{
                    height: 100px;
                    color: #222;
                    transition: all 600ms ease-in-out,
                    color 600ms 400ms ease-in-out;
                }

                .faq-category{
                    width: 280px;
                    font-size: 22px;
                }


}