/* 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);
}
body{
    overflow-x: hidden;
    width: 100vw;
}
/* .cursor,
.follower {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  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;
}

h2{
font-weight: 700;
letter-spacing: -0.05em;
font-size: 55px;
line-height: 60px;
}
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(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-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: 19px;
    font-weight: 700;
    color: #222;
    text-shadow: #ffffff95 0px 0px 30px;
}
.navigation-buttons-holder a.bolded{
    font-weight: 800;
}
.bolt-logo{
    height: 40px;
    width: auto;
    margin-left: 50px;
    margin-right: auto;
    flex: none;
}
.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;
}





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

.intro-section h1{
    position: absolute;
    bottom: 90px;
    left: 100px;
    font-size: 120px;
    line-height: 110px;
}
.intro-section h1.contact-header{
   left: 10%;
}

.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;
    scrollbar-width: none; 
    
    gap: 20px;
}
.reverse-image-scroller img{
    border-radius: 5px;
}
.reverse-image-scroller::-webkit-scrollbar {
    display: none; 
}

.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) 10%,        /* White up to 10% */
        transparent 10%,  /* Transparent from 10% */
        transparent 90%,  /* Transparent up to 90% */
        rgba(255, 255, 255, 0) 90%,        /* White from 90% */
        white 100%        /* White at the very bottom */
    );
}
.reverse-image-text-section h2{
    width: 100%;
    margin-left: 50px;
    margin-top:50px;
    font-size: 45px;
    font-weight: 700;
}
.revealed-text{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
}
.text-cover-reveal{
    width: 100%;
    height: 1000px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: #ffffffaa;
    transition: all 1s 0.5s ease-in-out;
}
.text-cover-reveal.shown{
    height: 0px;
}
.reverse-image-scroller img{
    width: 100%;
    height: auto;
}


.testimonial-brackets-section{
    width: 75%;
    margin-inline: auto;
    
    margin-top: 50px;
}
.testimonial-brackets-section.color-bg{
    background: url("/assets/images/color-bg.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.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: 20px;
    
    margin-inline: 50px;
    opacity: 1;
    transition: all 0.3s;
}
.testimonial-brackets-section span{
    font-weight: 800;
    margin-top: 20px;
}
.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: #E8E8E8; /* Gray color for the lines */
    border: 2px solid #E8E8E8; /* Add border around the whole grid */

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

}
.small-grid{
    grid-template-columns: repeat(4, 1fr);
    /* 2 equal rows */
    grid-template-rows: repeat(2, 1fr);
}

.grid-item {
    background-color: #ffffff; /* 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: #f1f1f1; */
}
.grid-item.grid-small{
    background-color: transparent; 
}
.grid-item.grid-small:hover{
    background-color: #ffffffaa;
}
.grid-item:hover img{
    filter: grayscale(0%);

}
.grid-logo{
    width: 80%;
    height: 80%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-logo img{
    width: 100%;
    height: auto;
    filter: grayscale(100%);
}



.team-section{
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
}
.team-box-row{
    display: flex;
    width: 100%;
    margin-top: 50px;
}
.team-box{
    width: 8vw;
    background: url("/assets/images/team1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
    flex: auto;
    margin-right: 15px;
    border-radius: 10px;
    filter: grayscale(100%);
    position: relative;
    cursor: pointer;
    transition: all 0.5s 0s linear;
}
#aya{
    background: url("/assets/images/1.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
#nicole{
    background: url("/assets/images/6.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
#Sarah{
    background: url("/assets/images/4.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
#emil{
    background: url("/assets/images/3.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
#lynn{
    background: url("/assets/images/5.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
#zeina{
    background: url("/assets/images/2.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
.team-box.active{
    width: 600px;
    flex: none;
    filter: grayscale(0%);
    transition: all 0.5s 0s linear;
}
.flipped-name{
    position: absolute;
    bottom: 30px;
    right: 10px;
    rotate: 270deg;
    font-size: 30px;
    color: white;
    font-weight: 700;
}
.team-box.active .flipped-name{
    opacity: 0;
}

.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(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: 90%;
    margin-right: auto;
    
}
.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;
    max-lines: 4;
}
.frosted-container h4{
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
}
.accreditation-container{
 width: unset;
 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);
    -webkit-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-perks-section{
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
    height: 1000px;
}
.scattered-perks-section h2{
    font-size: 120px;
    font-weight: 800;

}
.scattered-perks-container{
    position: absolute;
    display: grid; 
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 0px; /* Padding inside the container */
}
.scattered-perks-container .perk-grid-box:nth-child(1) { animation-delay: 2s; }
.scattered-perks-container .perk-grid-box:nth-child(2) { animation-delay: 3s; }
.scattered-perks-container .perk-grid-box:nth-child(3) { animation-delay: 6s; }
.scattered-perks-container .perk-grid-box:nth-child(4) { animation-delay: 8s; }
.scattered-perks-container .perk-grid-box:nth-child(5) { animation-delay: 9s; }
.scattered-perks-container .perk-grid-box:nth-child(6) { animation-delay: 5s; }
.scattered-perks-container .perk-grid-box:nth-child(7) { animation-delay: 1s; }
.scattered-perks-container .perk-grid-box:nth-child(8) { animation-delay: 2s; }
.scattered-perks-container .perk-grid-box:nth-child(9) { animation-delay: 7s; }
.scattered-perks-container .perk-grid-box:nth-child(10) { animation-delay: 4s; }
.scattered-perks-container .perk-grid-box:nth-child(11) { animation-delay: 4s; }
.scattered-perks-container .perk-grid-box:nth-child(12) { animation-delay: 6s; }
.scattered-perks-container .perk-grid-box:nth-child(13) { animation-delay: 8s; }
.scattered-perks-container .perk-grid-box:nth-child(14) { animation-delay: 9s; }
.scattered-perks-container .perk-grid-box:nth-child(15) { animation-delay: 5s; }
.scattered-perks-container .perk-grid-box:nth-child(16) { animation-delay: 1s; }
.scattered-perks-container .perk-grid-box:nth-child(17) { animation-delay: 3s; }
.scattered-perks-container .perk-grid-box:nth-child(18) { animation-delay: 7s; }
.scattered-perks-container .perk-grid-box:nth-child(19) { animation-delay: 0s; }
.scattered-perks-container .perk-grid-box:nth-child(20) { animation-delay: 2s; }
.scattered-perks-container .perk-grid-box:nth-child(21) { animation-delay: 7s; }
.scattered-perks-container .perk-grid-box:nth-child(22) { animation-delay: 6s; }
.scattered-perks-container .perk-grid-box:nth-child(23) { animation-delay: 4s; }
.scattered-perks-container .perk-grid-box:nth-child(24) { animation-delay: 3s; }
.scattered-perks-container .perk-grid-box:nth-child(25) { animation-delay: 9s; }
.scattered-perks-container .perk-grid-box:nth-child(26) { animation-delay: 4s; }
.scattered-perks-container .perk-grid-box:nth-child(27) { animation-delay: 6s; }
.scattered-perks-container .perk-grid-box:nth-child(28) { animation-delay: 8s; }
.scattered-perks-container .perk-grid-box:nth-child(29) { animation-delay: 2s; }
.scattered-perks-container .perk-grid-box:nth-child(30) { animation-delay: 5s; }
.scattered-perks-container .perk-grid-box:nth-child(31) { animation-delay: 1s; }
.scattered-perks-container .perk-grid-box:nth-child(32) { animation-delay: 7s; }
.scattered-perks-container .perk-grid-box:nth-child(33) { animation-delay: 1s; }
.scattered-perks-container .perk-grid-box:nth-child(34) { animation-delay: 9s; }
.scattered-perks-container .perk-grid-box:nth-child(35) { animation-delay: 3s; }
.scattered-perks-container .perk-grid-box:nth-child(36) { animation-delay: 1s; }
.scattered-perks-container .perk-grid-box:nth-child(37) { animation-delay: 8s; }
.scattered-perks-container .perk-grid-box:nth-child(38) { animation-delay: 2s; }
.scattered-perks-container .perk-grid-box:nth-child(39) { animation-delay: 5s; }
.scattered-perks-container .perk-grid-box:nth-child(40) { animation-delay: 3s; }
.perk-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;
    animation: floatDisappear 25s ease-in-out infinite;
}
.perk-image-box{
    background: #ffffffe9;
    
    border-radius: 15px;
    padding: 20px;
    height: 120px;
    width: 120px;
    border: 2px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;

   
}
.perk-image-box:nth-of-type(1){
    
}
.perk-image-box img
{
height: 100%;
width: 100%;
object-fit: contain;
opacity: 1;

}

.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;
    min-height: 230px;
    width: 200px;
    border: 2px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;

    animation: float 10s ease-in-out infinite;
}


#type2{
    background: #ffffff45;
    animation: float1 10s ease-in-out infinite;

}
#type2:first-child{
    background: #fff;

}
#type3{
    border: 2px solid rgba(222, 222, 222, 0.3);
    background-color: rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: float2 10s ease-in-out infinite;
}
    /* Custom positions */
    .perk-box:nth-child(1) {

        animation-delay: 0s;
      }
  
      .perk-box:nth-child(2) {

        animation-delay: 1s;
        
      }
  
      .perk-box:nth-child(3) {

        animation-delay: 2s;
      }
      .perk-box:nth-child(4) {

        animation-delay: 1.5s;
      }
  
      .perk-box:nth-child(5) {

        animation-delay: 2.5s;
      }


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

@keyframes floatDisappear {
    0% {
    transform: translate(0, 0);
    opacity: 1;
    }

    25% {
    transform: translate(5px, -5px);
    opacity: 0;
    }
    40% {
        opacity: 1;
    }
    50% {
    transform: translate(0px, -10px);
    
    }
    75% {
    transform: translate(-5px, -5px);
    opacity: 0;
    }
    80% {
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
    transform: translate(0, 0);
    opacity: 1;
    }
}

@keyframes float {
        0% {
        transform: translate(0, 0);
        }
        25% {
        transform: translate(5px, -5px);
        }
        50% {
        transform: translate(0px, -10px);
        }
        75% {
        transform: translate(-5px, -5px);
        }
        100% {
        transform: translate(0, 0);
        }
    }
    @keyframes float1 {
        0% {
        transform: translate(0, 0);
        }
        25% {
        transform: translate(-5px, -5px);
        }
        50% {
        transform: translate(2px, -5px);
        }
        75% {
        transform: translate(-1px, -5px);
        }
        100% {
        transform: translate(0, 0);
        }

    }
    @keyframes float2 {
        0% {
        transform: translate(0, 0);
        }
        25% {
        transform: translate(5px, 5px);
        }
        50% {
        transform: translate(-2px, 5px);
        }
        75% {
        transform: translate(-1px, -10px);
        }
        100% {
        transform: translate(0, 0);
        }
    }



.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;
    
}
.countdown-container {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 70px;
    height: 70px;
    opacity: 0;
  }

  svg {
    transform: rotate(-90deg);
  }

  .ring-bg {
    fill: #ffffff99;
    stroke: #eee;
    stroke-width: 0;
  }

  .ring {
    fill: none;
    stroke: #ffffffdd;
    stroke-width: 3;
    
    stroke-dasharray: 157; /* 2 * π * r (approx) */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
  }

  .countdown-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
  }
.points-column{
    width: 60%;
}
.point-container{
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: solid 10px #ececec;
    padding-inline: 20px;
    font-size: 28px;
    width: 100%;
    border-radius: 0px 12px 12px 0px;
    transition: all 300ms ease-in-out;
}
.point-container h3{
    font-weight: 600
}
.point-container p{
    display: none;
    font-size: 17px;
    margin-top: 5px;
}
.point-container.active-point{
    height: 180px;
    border-left: solid 10px #222;
    
    background: #e5e5e574;
    backdrop-filter: blur(5px);
    -webkit-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;
    opacity: 1;
    transition: all 400ms ease-in-out;
}
.hidden-image{

    opacity: 0;
    transition: all 600ms ease-in-out;
}

.point-image-container img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 7px;
}



.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: 150px;
    margin-bottom: 60px;
    margin-inline: auto;
    position: relative;
    max-width: 1200px;
    margin-inline: auto;
}

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

.network-images{
    position: absolute;
    width: 125px;
    height: 150px;
    background-color: #eee;
    border-radius: 10px;
    top: 0px;

    opacity: 0;
    
}
.network-images.appear{
    opacity: 1;
}
.floating-text{
    width: 50%;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    display: flex;
}
.network-section h2{
    
    font-size: 40px;
    text-align: center;
    line-height: 40px;

}
.floating-text b{
    

    text-align: center;


}
.network-images:nth-of-type(1){
    margin-left: 10px;
    margin-top: 60px;
    
    transition: all 700ms 000ms ease-in-out;
}
.network-images:nth-of-type(2){
    margin-left: 10px;
    margin-top: 220px;

    transition: all 700ms 100ms ease-in-out;
}
.network-images:nth-of-type(3){
    margin-left: 145px;
    margin-top: 10px;

    transition: all 700ms 200ms ease-in-out;
}
.network-images:nth-of-type(4){
    margin-left: 145px;
    margin-top: 170px;

    transition: all 700ms 300ms ease-in-out;
}
.network-images:nth-of-type(5){
    margin-left: 280px;
    margin-top: 70px;

    transition: all 700ms 400ms ease-in-out;
}
.network-images:nth-of-type(6){
    margin-left: 415px;
    margin-top: 20px;

    transition: all 700ms 500ms ease-in-out;
}
.network-images:nth-of-type(7){
    margin-left: 550px;
    margin-top: 50px;

    transition: all 700ms 600ms ease-in-out;
}
.network-images:nth-of-type(8){
    margin-left: 685px;
    margin-top: 20px;

    transition: all 700ms 700ms ease-in-out;
}
.network-images:nth-of-type(9){
    margin-left: 820px;
    margin-top: 85px;

    transition: all 700ms 800ms ease-in-out;
}
.network-images:nth-of-type(10){
    margin-left: 955px;
    margin-top: 10px;

    transition: all 700ms 900ms ease-in-out;
}
.network-images:nth-of-type(11){
    margin-left: 955px;
    margin-top: 170px;

    transition: all 700ms 1000ms ease-in-out;
}
.network-images:nth-of-type(12){
    margin-left: 1090px;
    margin-top: 70px;

    transition: all 700ms 1100ms ease-in-out;
}
.network-images:nth-of-type(13){
    margin-left: 1090px;
    margin-top: 230px;

    transition: all 700ms 1200ms ease-in-out;
}
.network-images img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    border-radius: 5px;
}



.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-new-section{
    width: 100%;
    position: relative;
}
.horizontal-timeline-section-new{
    width: 100%;
    position: relative;
    height: 100vh;
}
.horizontal-timeline-container-new{
    display: flex;
    height: 100vh;
    width: max-content;
    position: sticky;
    top: 0;
}
.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, white, transparent);
}
.gradient-right{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, white, 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;
}
.horizontal-timeline-container::-webkit-scrollbar{
    display: hidden;
}
.timeline-line{
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    background-color: #222;
    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: #222;
    
    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%;
    border-radius: 7px;
}





.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-inline: auto;
}
.right-text-and-images-section p{
    font-size: 20px;
    width: 70%;
    margin-inline: auto;
    margin-top: 20px;
}
.right-text-and-images-row{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* grid-auto-columns: max-content; */
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* grid-template-columns: repeat(auto-fit, min-content); */
    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;
    object-fit: cover;
}


.right-only-images-section{
    width: 100%;
    
    margin-top: 50px;
    overflow: hidden;
}
.right-only-images-section h2{
    margin-left: 100px;
}
.right-only-images-container{
    width: 100%;
    align-items: center;
    justify-content: start;
    display: flex;
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; 
    margin-top: 30px;
    }

.right-only-images-container::-webkit-scrollbar {
        width: 0;
        height: 0;
}

.right-only-images{
    flex: none;
    height: 23vw;
    width: 23%;
    background-color: #eee;
    border-radius: 20px;
    margin-right: 15px;
    position: relative;
}
.right-only-images img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.right-only-image-overlay{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 15px;
}
.right-bubble{
    width: fit-content;
    padding-inline: 15px;
    padding-block: 5px;
    border-radius: 20px;
    border: #fff solid 3px;
    color: #fff;
    box-shadow: #c3c3c344 0px 0px 20px;
}
.right-frosted-label{
    width: 100%;
    height: 90px;
    border-radius: 15px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    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(13.149999618530273px);
                color: #222;
                font-size: 20px;
                font-weight: 700;
                padding: 10px ;
                padding-block: 15px;
}
.right-only-images:nth-child(1){
    margin-left: 100px;
}
.right-only-images img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
}






.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;
    object-fit: cover;
    object-position: bottom;
    transition: all 0.3s ease-in-out;
    opacity: 1;
}
.team-member-image img.disappear{
    opacity: 0;

}



.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: 80%;
    position: relative;
    margin-inline: auto;
    height: unset;
    
    
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
}
.contact-form-section h2{
    margin-bottom: 50px;
}
.contact-form-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: unset;
    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{

    width: 100%;
}
.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 */
    }








.venues-section{
    width: 85%;
    margin-inline: auto;
    margin-top: 100px;
    position: relative;
}
.venue-image{
    width: 100%;
    height: 800px;
    background: url("/assets/images/color-bg.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    opacity: 1;
    transition: all 600ms ease-in-out;
}
.venue-image.fade-out{
    opacity: 0;
}


.venue-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.venues-container{
    position: absolute;
    top: 0px;
    left: 0px;
    
    width: 100%;
    height: 800px;
    border-radius: 20px;
    background-color: #ffffff40;

    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;
    text-shadow: #ffffffdf 0px 0px 100px;
}
.venues-container p{
    font-size: 22px;
    margin-top: 30px;
    text-shadow: #ffffffaa 0px 0px 20px;
}
.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: column;
    overflow-y: scroll;

    align-items: start;
    justify-content: start;

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

}
.moving-boxes-container::-webkit-scrollbar{
    display: none;
}
.venue-box-row{
    display: flex;
    height: 250px;
    width: 100%;
    margin-top: 12px;
    
}
.box-spacer{
    width: 12px;
    height: 1px;
    flex: none;
}
.vanue-item{
    width: 50%;
    height: 250px;
    background-color: #ffffff6f;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    margin-top: 15px;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease-in-out;
}
.vanue-item.active-venue{
    background-color:  #ffd9b595
}
.vanue-item.active-venue p{
    opacity: 1;
}
.vanue-item.active-venue b{
    opacity: 1;
}
.vanue-item b{
    font-weight: 700px;
    letter-spacing: -0.05em;
    font-size: 22px;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
}
.vanue-item p{
    font-weight: 700px;
    letter-spacing: -0.03em;
    font-size: 15px;
    margin-top: 10px;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
}
.vanue-item.active-venue .bubble-dark {
    opacity: 1;
  }
.bubble-dark{
    border: 2px solid #222;
    width: fit-content;
    padding: 15px;
    padding-block: 5px;
    border-radius: 20px;
    margin-top: auto;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
}
.vanue-item.right-vanue{
    margin-top: 100px;
}



.timeline-section-section{
    width: 100%;
    height: unset;
    position: relative;
    margin-top: 50px;
}
.timeline-line-moving{
    height: 500px;
    width: 45vw;
    background-color: #ffffffaa;
    border-right: 2px #222 solid;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    display: none;
}
.timeline-section{
    width: 95%;
    margin-inline: auto;
    
    background-color: #fff;
    overflow: hidden;
}
.timeline-container{
    width: 100%;
    min-height: 40px;
    height: auto;
    position: relative;
}
.timeline-cover{
    background-color: #ffffffaa;
    width: 15%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 22;
    transition: all 1000ms ease-in-out;
    border-right: #222 solid 3px;

}
.timeline-p{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: flex;
    z-index: 23;
    align-items: end;
    justify-content: end;
}
.timeline-arrow{
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: #222;
    position: absolute;
    right: -20px;
    top: 50%;
    padding: 10px;
}
.timeline-arrow img{
    height: 100%;
    width: 100%;
    margin-left: -1px;
}
.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);
    -webkit-backdrop-filter: blur(2px);
    font-size: 27px;
    border-radius: 12px;
    transition: all  600ms  ease-in-out;
}
.timeline-floating-box.activated-box{
    background-color: #222;
}
.timeline-floating-box.activated-box b{
   
    color: #fff;
}

.timeline-container b{
    margin-inline: 25px;
}
.timeline-container p{
    margin-right: 10%;
    margin-bottom: 10%;
    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: #e1e1e1;
    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: 10px;
}
.fame-box h3{
    font-size: 23px;
    margin-top: 15px;
    margin-inline: 10px;
}
.fame-box p{
    font-size: 18px;
    margin-top: -5px;
    margin-inline: 10px;
}
.fame-box h4{
    font-size: 40px;
    margin-top: 15px;
    margin-inline: 10px;
}
.fame-box span{
    font-size: 60px;
}


.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-top-two.program{
    background: url("/assets/images/golden-program.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.golden-bottom-three{
    width: 100%;
    height: 30%;
    background: url("/assets/images/bottom-3.png"), #222;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 15px;
    position: relative;
    
}
.golden-bottom-three:hover{
    opacity: 0.9;
}
@keyframes slideLeftRight {
    0% {
        transform: translateX(0); /* Start at original position */
    }
    50% {
        transform: translateX(10px); /* Move 200px to the right */
    }
    100% {
        transform: translateX(0); /* Return to original position */
    }
}
.golden-floating-arrow{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: absolute;
    right: 40px;
    top: 40px;
    animation: slideLeftRight 2s ease-in-out infinite alternate;
    animation-duration: 2s;                   /* How long one cycle of the animation takes */
    animation-timing-function: ease-in-out;   /* Speed curve of the animation */
    animation-iteration-count: infinite;      /* How many times the animation should play (infinite for endless loop) */
    animation-direction: alternate;
}
.golden-floating-arrow img{
    width: 100%;
    height: 100%;
   object-fit: contain;
    
}
.golden-top{
    width: 100%;
    height: 340px;
    background-color: #eee;
    background: url("/assets/images/golden-top.png");
    background-size: cover;
    background-position: top right;
    border-radius: 15px;
    display: flex;

}
.golden-top.event{
    background: url("/assets/images/event-golden.png");
    background-size: cover;
    background-position: top right;
}
.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);
    -webkit-backdrop-filter: blur(13px);
    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: 100px;
}
.numbers-box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}
.number-box{
    background-color: #F4F4F4;
    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;

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);
-webkit-backdrop-filter: blur(13px);
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-posts-page-container{
    display: flex;
    margin-top: 40px;
    padding-right: 20px;
    
    width: 90%;
    margin-inline:auto;
    }
.blog-box{

width: 100%;

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

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

}
.blog-background{
height: 300px;
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, #FFF 5.25%, rgba(255, 255, 255, 0.00) 60%);
}
.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: #222 solid 2px;
color: #222;
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: 29px;
line-height: 40px;
}
.blog-description-container p{
font-size: 18px;
font-weight: 600;
margin-top: 10px;
line-height: 22px
}
.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;
}
.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;
}

.footer{
background-color: #f5f5f5;
min-height: 400px;
display: flex;
flex-direction: column;
padding: 40px;
margin-top: 100px;
}
.footer-logo{
width: 180px;
height: 48px;
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: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.05em;
    
}
.footer-column a{
    font-size: 22px;
    opacity: 0.44;
    text-decoration: none;
}
.footer-column span{
    text-decoration: underline;
}
.footer b{
    margin-top: 100px;
    font-size: 18px;
    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: 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-box:hover{
    
    
    transition: all 0.2s linear;
    }
    .study-box:hover .study-box-overlay {
        opacity: 1;
    }
    .study-box:hover .study-box-hovered-overlay {
        opacity: 0;
        
    }
    .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(255, 255, 255, 0.60);

        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: #222;
        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;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(13px);
    box-shadow: #a6a6a6aa 0px 0px 10px;
    text-shadow: #a6a6a6aa 0px 0px 10px;
    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;
    
    }

.horizontal-scroll-section{
    /* overflow: hidden; */
}
    .spacer {
        height: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

      }
      
      .horizontal-scroll {
        position: relative;
        height: 100vh;
        width: 100%;
        
      }
      
      .scroll-track {
        display: flex;
        height: 100vh;
        width: max-content;
        position: sticky;
        top: 0;
      }
      .spaceholder-panel{
        width: 50px;
        height: 1px;
      }
      .spaceholder-timeline{
        width: 900px;
        height: 1px;
      }
      .panel {
        width: 700px;
        height: 100%;
        
        padding-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        
        
        margin-left: 30px;
      }
      .panel h3{
        font-size: 30px;
        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;
            box-shadow: #22222234 0px 0px 10px ;
            shadow: #22222242 0px 0px 10px;
            text-shadow: #22222242 0px 0px 10px ;
            }
        
            .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);
            -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;
            }
            .revealed-text{
                width: 90%;
            }
            .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;
                overflow: hidden;
                object-fit: cover;
                border-radius: 7px;
            }
            .image-cover{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 600px;
                height: 730px;
                transition: all 1.8s 1s ease-in-out;
                background-color: #fff;
                opacity: 1;
            }
            .image-cover.appear{
                opacity: 0;
            }
            .image-text-container img{
                width: 600px;
                height: 730px;
                object-fit: cover;
                border-radius: 7px;
            }

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

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

            .text-description b{
                margin-top: 200px;
                font-size: 27px;
                font-weight: 800;
            }
            .text-description p{
                font-size: 18px;
                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%;
                border-radius: 10px;
                object-fit: cover;
            }
            .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(13px);
                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;
                transform: translateX(0px);
            }
            .faq-category:hover{
                transform: translateX(20px);
            }
            .faq-category.active-category{
                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 #eee;
                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;

            }
            .faq-question-container b{
                height: 0px;
                color: white;
                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: #222;
                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;
            }
            .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;
}


.maps-section{
    
    width: 80%;
    margin-inline: auto;
    margin-top: 60px;
    margin-bottom: 100px;
}
.map-frame{
    width: 100%;
    height: 500px;
    margin-top: 50px;
}
/* mobile */
@media (max-width: 480px) {
    /* .cursor,
.follower {
    display: none;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; 
  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: #ffffff83;
    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;
    
}
.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(255, 255, 255, 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: #222;
    text-shadow: #ffffff95 0px 0px 30px;
}
.bolt-logo{
    height: 25px;
    width: auto;
    margin-left: 10px;
    margin-right: auto;
    flex: none;
}
.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.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;
    overflow-x: hidden;
}
.intro-section img{
    width: unset;
    height: 100%;
    margin-left: -80%;
}

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

.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;
}
.revealed-text{
    width: 90%;
}
.reverse-image-scroller img{
    width: 0%;
}


.testimonial-brackets-section{
    width: 95%;
    margin-inline: auto;
    
    margin-top: 10px;
}
.testimonial-brackets-section.color-bg{
    background: url("/assets/images/color-bg-vert.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.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: #E8E8E8; /* Gray color for the lines */
    border: 2px solid #E8E8E8; /* Add border around the whole grid */

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

}

.grid-item {
    background-color: #ffffff; /* 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: #f1f1f1; */
}
.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 10%;
    background-repeat: no-repeat;
    height: 100px;
    
    flex: auto;
    margin-right: 0px;
    margin-top: 7px;
    border-radius: 10px;
    filter: grayscale(100%);
    position: relative;
    cursor: pointer;
    transition: all 0.4s 0s linear;
}
.team-box.active{
    width: 100%;
    height: 90vw;
    aspect-ratio: 1;
    flex: none;
    filter: grayscale(0%);
    transition: all 0.4s 0s linear;
}
.flipped-name{
    position: absolute;
    bottom: 10px;
    right: 10px;
    rotate: 0deg;
    font-size: 22px;
    color: white;
    font-weight: 700;
}
.team-box.active .flipped-name{
    opacity: 0;
}

.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);
    -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: 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);
    -webkit-backdrop-filter: blur(13px);
}
.linkedin-logo{
    margin-top: 15px;
    height: 20px;
    width: 20px;
    background: url("/assets/images/linkedin.png");
    background-size: contain;
    opacity: 0.8;
}

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

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

.perk-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;
    flex: none;
}
.perk-image-box{
    background: #ffffffdd;
    
    border-radius: 15px;
    padding: 20px;
    height: 80px;
    width: 80px;
    flex: none;
    border: 2px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;

    animation: float 10s ease-in-out infinite;
}
.perk-image-box img
{
height: 100%;
width: 100%;
object-fit: contain;
opacity: 0.6;

}


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

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

.perk-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;
}





.scattered-boxes-section{
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 100px;
    height: 1000px;
}
.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: 0px;
    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;
    min-height: 160px;
    padding-block: 10px;
    width: 130px;
    border: 2px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity:1;
    transition: all 0.3s 0.7s;
}


#type2{
    background: #ffffff38;
    border: 2px solid rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

}
#type2:first-child{
    background: #fff;
    background: #ffffff38;

}
#type3{
    border: 2px solid rgba(222, 222, 222, 0.3);
    background-color: rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.perk-box b{
    font-size: 14px;
}
.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 #ececec;
    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;
}
.point-container.active-point{
    height: 180px;
    border-left: solid 5px #222;
    
    background: #e5e5e574;
    backdrop-filter: blur(5px);
    -webkit-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: 95%;
    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;
    opacity: 1;
}

.network-images{
    display: none;
}

.floating-text{
    display: none;
}


.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-new{
    width: 100%;
    margin-top: 30px;
    position: relative;
    height: 100vh;
}
.horizontal-timeline-container-new{
    display: flex;
    height: 100vh;
    width: max-content;
    position: sticky;
    top: 0;
}

.horizontal-timeline-section{
    width: 100%;
    margin-top: 20px;
    position: relative;
    height: 90vh;
}
.gradient-left{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, white, transparent);
}
.gradient-right{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 0px;
    height: 100%;
    background: linear-gradient(to left, white, transparent);
}
.timeline-header{
    margin-left: 20px;
    margin-top: 50px;
}
.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;
}
.horizontal-timeline-container::-webkit-scrollbar{
    display: hidden;
}
.timeline-line{
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;
    background-color: #222;
    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: #222;
    
    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-inline: auto;
}
.right-text-and-images-section p{
    font-size: 15px;
    width: 90%;
    margin-inline: 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: 50vw;
    width: 100%;
    background-color: #eee;
    border-radius: 5px;
}

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



.right-only-images-section{
    width: 100%;
    
    margin-top: 50px;
    overflow: hidden;
}
.right-only-images-section h2{
    margin-left: 30px;
}
.right-only-images-container{
    width: 100%;
    align-items: center;
    justify-content: start;
    display: flex;
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; 
    margin-top: 30px;
    }

.right-only-images-container::-webkit-scrollbar {
        width: 0;
        height: 0;
}
.right-only-images{
    flex: none;
    height: 45vw;
    width: 45%;
    background-color: #eee;
    border-radius: 10px;
}
.right-only-image-overlay{
    
    padding: 7px;
}
.right-bubble{
    width: fit-content;
    padding-inline: 15px;
    padding-block: 5px;
    border-radius: 20px;
    border: #fff solid 2px;
    color: #fff;
    box-shadow: #c3c3c344 0px 0px 20px;
    font-size: 12px
}
.right-frosted-label{
    width: 100%;
    height: 60px;
    border-radius: 15px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
                color: #222;
                font-size: 13px;
                font-weight: 700;
                padding: 10px ;
                padding-block: 15px;
}
.right-only-images:nth-child(1){
    margin-left: 30px;
}
.right-only-images img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}



.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: relative;
    margin-inline: auto;
    border-radius: 10px;
}
.contact-form-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: unset;
    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: 100%;
}
.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;

    position: relative;
}
.venue-image{
    width: 100%;
    height: 600px;
    background: url("/assets/images/color-bg.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    opacity: 1;
    transition: all 600ms ease-in-out;
}
.venue-image.fade-out{
    opacity: 0;
}


.venue-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.venues-container{
    position: absolute;
    top: 0px;
    left: 0px;
    
    
    width: 100%;
    height: 600px;
    padding-block: 20px;
    border-radius: 20px;
    background-color: #ffffff40;
    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: 40px;
    line-height: 40px;
    
}
.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: hidden;
    overflow-x: 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: column;
    height: 350px;
    width: 100%;
    margin-top: 12px;
    margin-left: 0px;
}
.box-spacer{
    width: 1px;
    height: 12px;
    flex: none;
}
.vanue-item{
    width: 200px;
    height: 160px;
    background-color: #ffffff6f;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    margin-top: 15px;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    
}
.vanue-item.active-venue p{
    opacity: 1;
}
.vanue-item.active-venue b{
    opacity: 1;
}
.vanue-item b{
    font-weight: 700px;
    letter-spacing: -0.05em;
    font-size: 16px;
    opacity: 0.1;
    transition: all 600ms ease-in-out;
}
.vanue-item p{
    font-weight: 700px;
    letter-spacing: -0.03em;
    font-size: 12px;
    margin-top: 10px;
    opacity: 0.1;
    transition: all 600ms ease-in-out;
}
.vanue-item.active-venue .bubble-dark {
    opacity: 1;
  }
.bubble-dark{
    border: 2px solid #222;
    width: fit-content;
    padding: 15px;
    padding-block: 5px;
    border-radius: 20px;
    margin-top: auto;
    opacity: 0.1;
    transition: all 600ms ease-in-out;
    display: none;
}

.vanue-item.right-vanue{
    margin-top: 0px;
    margin-left: 14px;
}

.timeline-section-section{
    height: 500px;
    margin-top: 50px;
    background: #222;
}
.timeline-line-moving{
    height: 500px;
    width: 45vw;
    background-color: #ffffffaa;
    border-right: 2px #222 solid;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    display: block;
}
.timeline-section{
    width: 100%;
    height: 500px;
    overflow-x: scroll;

    margin-inline: auto;

    background-color: #fff;
    position: relative;

    scrollbar-width: none; /* Hides the scrollbar */
}
    .timeline-section::-webkit-scrollbar {
        display: none; /* Hides the scrollbar */
}
.timeline-container{
    height: 500px;
    width: auto;
    min-height: 40px;
    
    position: relative;
}
.timeline-cover{
    display: none;

}
.timeline-p{
    width: 100%;
    height: 100%;
    position: absolute;
    display: hidden;
}
.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);
    -webkit-backdrop-filter: blur(3px);
    font-size: 15px;
    border-radius: 5px;
    width: max-content;
}
.timeline-container b{
    margin-inline: 10px;
    flex: none;
}
.timeline-container p{
    
}
#float0{
    left: 15%;
    top: 35%;
}
#float1{
    left: 40%;
    top: 45%;
}
#float2{
    left: 55%;
    top: 55%;
}
#float3{
    left: 80%;
    top:35%;
}
#float4{
    left: 100%;
    top: 45%;
}
.timeline-container img{
    width: auto;
    height: 500px;

}
.timeline-section p{
    margin-left: 10px;
    font-size: 14px;
    font-weight: 700;
    width: 90%;
    z-index: 99;
    display: none;
}




.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: #e1e1e1;
    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/bottom-3.png"), #222;
    background-position: bottom left;
    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: top right;
    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);
    -webkit-backdrop-filter: blur(13px);
    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: #F4F4F4;
    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);
-webkit-backdrop-filter: blur(13px);
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-posts-page-container{
    display: flex;
    margin-top: 20px;
    padding-right: 0px;
    margin-bottom: 30px;
    width: 95%;
    margin-inline:auto;
    flex-direction: column;
    margin-bottom: 0px; 
}
.blog-box{

width: 100%;

margin-left: 0px;
border-radius: 15px;
position: relative;
padding-bottom: 20px;
cursor: pointer;

}
.blog-box:hover{
background-color: #efefef;

}
.blog-box:hover .blog-image-overlay{
background: linear-gradient(0deg, #efefef 5.25%, rgba(224, 224, 224, 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, #FFF 5.25%, rgba(255, 255, 255, 0.00) 60%);
}
.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);
    -webkit-backdrop-filter: blur(13px);
    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: #222 solid 1.5px;
color: #222;
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: #f5f5f5;
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-box:hover{
    
    
    transition: all 0.2s linear;
    }
    .study-box:hover .study-box-overlay {
        opacity: 1;
    }
    .study-box:hover .study-box-hovered-overlay {
        opacity: 0;
        
    }
    .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(255, 255, 255, 0.60);

        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: #222;
        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-x: hidden; */
      }
      
      .scroll-track {
        display: flex;
        height: 100vh;
        width: max-content;
        position: sticky;
        top: 0;
      }
      .spaceholder-timeline{
        width: 100px;
        height: 1px;
      }
      
      .panel {
        width: 320px;
        
        
        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);
            -webkit-backdrop-filter: blur(13px);
            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;
                margin-top: 30px;
            }
            .image-text-container.reverse-column{
                flex-direction: column-reverse;
                margin-top: 60px;
            }
            .image-text-container:first-child{
                margin-top: 0px;
            }

            .image-container{
                width: 100%;
                height: 450px;
                position: relative;
            }
            .image-cover{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 730px;
                opacity: 1;
                background-color: #fff;
            }
            .image-cover.appear{
                opacity: 0;
            }
            .image-text-container img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                
            }

            .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;
            }
            .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);
                -webkit-backdrop-filter: blur(13px);
                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 #eee;
                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: white;
                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: #222;
                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;
}
.maps-section{
    
    width: 90%;
    margin-inline: auto;
    margin-top: 60px;
    margin-bottom: 100px;
}
.map-frame{
    width: 100%;
    height: 400px;
    margin-top: 50px;
}
}
/* large mobile */
@media (min-width: 481px) and (max-width: 767px) {
    /* .cursor,
    .follower {
        display: none;
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none; 
      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: #ffffff83;
        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;
        
    }
    .navigation-bar-mobile.hide-bar{    
        opacity: 0;
        display: none;
        transition: all 0.3s 0.3s ease-in-out;
    }
    .navigation-bar-mobile a{
        font-size: 27px;
        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(255, 255, 255, 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: #222;
        text-shadow: #ffffff95 0px 0px 30px;
    }
    .bolt-logo{
        height: 27px;
        width: auto;
        margin-left: 10px;
        margin-right: auto;
        flex: none;
    }
    .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.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%;
        object-fit: cover;
        
    }
    
    .intro-section h1{
        position: absolute;
        bottom: 100px;
        left: 20px;
        font-size: 60px;
        line-height: 50px;
    }
    .intro-section h1.contact-header{
        left: 5%;
     }
    
    .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: unset;
        width: 0%;
        
        position: relative;
    }
    .reverse-image-scroller{
        height: 100vh;
        width: 0%;
        
        overflow-y: scroll;
        display: flex;
        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;
        margin-bottom: 50px;
        font-size: 35px;
        font-weight: 700;
        line-height: 35px;

    }
    .revealed-text{
        width: 90%;
    }
    .reverse-image-scroller img{
        width: 0%;
    }
    
    
    .testimonial-brackets-section{
        width: 95%;
        margin-inline: auto;
        
        margin-top: 10px;
    }
    .testimonial-brackets-section.color-bg{
        background: url("/assets/images/color-bg-vert.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .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: #E8E8E8; /* Gray color for the lines */
        border: 2px solid #E8E8E8; /* Add border around the whole grid */
    
        width: 90%; /* Adjust as needed */
        margin-inline: auto;
    
    }
    
    .grid-item {
        background-color: #ffffff; /* 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: #f1f1f1; */
    }
    .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 10%;
        background-repeat: no-repeat;
        height: 100px;
        
        flex: auto;
        margin-right: 0px;
        margin-top: 7px;
        border-radius: 10px;
        filter: grayscale(100%);
        position: relative;
        cursor: pointer;
        transition: all 0.4s 0s linear;
    }
    .team-box.active{
        width: 100%;
        height: 90vw;
        aspect-ratio: 1;
        flex: none;
        filter: grayscale(0%);
        transition: all 0.4s 0s linear;
    }
    .flipped-name{
        position: absolute;
        bottom: 10px;
        right: 10px;
        rotate: 0deg;
        font-size: 22px;
        color: white;
        font-weight: 700;
    }
    .team-box.active .flipped-name{
        opacity: 0;
    }
    
    .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);
        -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: 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);
        -webkit-backdrop-filter: blur(13px);
    }
    .linkedin-logo{
        margin-top: 15px;
        height: 20px;
        width: 20px;
        background: url("/assets/images/linkedin.png");
        background-size: contain;
        opacity: 0.8;
    }
    
    .scattered-perks-section{
        width: 95%;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-top: 100px;
        margin-bottom: 50px;
        height: 1000px;
    }
    .scattered-perks-section h2{
        font-size: 120px;
        font-weight: 800;
    
    }
    .scattered-perks-container{
        position: absolute;
        display: grid; 
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 5px;
        min-height: 250px; /* Give it a minimum height */
        color: black;
        padding: 0px; /* Padding inside the container */
    }
    
    .perk-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-image-box{
        background: #ffffffdd;
        
        border-radius: 15px;
        padding: 20px;
        height: 90px;
        width: 90px;
        border: 2px solid #E3E3E3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 1;
    
        animation: float 10s ease-in-out infinite;
    }
    .perk-image-box img
    {
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.6;
    
    }
    
    .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: 1100px;
    }
    .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: 200px; /* 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;
        min-height: 160px;
        width: 130px;
        border: 2px solid #E3E3E3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 1;
        transition: all 0.3s 0.7s;
    }

    
    #type2{
        background: #fff;
        background: #ffffff38;

        border: 2px solid rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
        border: 2px solid rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(2px);
    }

    #type3{
        border: 2px solid rgba(222, 222, 222, 0.3);
    background-color: rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    .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 #ececec;
        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;
    }
    .point-container.active-point{
        height: 180px;
        border-left: solid 5px #222;
        
        background: #e5e5e574;
        backdrop-filter: blur(5px);
        -webkit-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;
        opacity: 1;
    }
    
    .network-images{
       display: none;
    }
    .floating-text{
        display: none;
    }
    
    
    .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-new{
        width: 100%;
        margin-top: 30px;
        position: relative;
        height: 100vh;
    }
    .horizontal-timeline-container-new{
        display: flex;
        height: 100vh;
        width: max-content;
        position: sticky;
        top: 0;
    }

    .horizontal-timeline-section{
        width: 100%;
        margin-top: 20px;
        position: relative;
        height: 90vh;
    }
    .gradient-left{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, white, transparent);
    }
    .gradient-right{
        position: absolute;
        right: 0px;
        top: 0px;
        width: 0px;
        height: 100%;
        background: linear-gradient(to left, white, 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;
        width: 100%;
    }
    .horizontal-timeline-container::-webkit-scrollbar{
        display: hidden;
    }
    .timeline-line{
        position: absolute;
        top: 50%;
        left: 0%;
        width: 100%;
        background-color: #222;
        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: #222;
        
        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-inline: auto;
    }
    .right-text-and-images-section p{
        font-size: 15px;
        width: 90%;
        margin-inline: 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: 50vw;
        width: 100%;
        background-color: #eee;
        border-radius: 5px;
    }
    
    .right-text-and-image img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    
    
    
    .right-only-images-section{
        width: 100%;
        
        margin-top: 50px;
        overflow: hidden;
    }
    .right-only-images-section h2{
        margin-left: 40px;
    }
    .right-only-images-container{
        width: 100%;
        align-items: center;
        justify-content: start;
        display: flex;
        overflow-x: scroll;
        margin-top: 30px;
        }
.right-only-images{
    flex: none;
    height: 40vw;
    width: 40%;
    background-color: #eee;
    border-radius: 10px;
}
.right-only-image-overlay{
    
    padding: 7px;
}
.right-bubble{
    width: fit-content;
    padding-inline: 15px;
    padding-block: 5px;
    border-radius: 20px;
    border: #fff solid 3px;
    color: #fff;
    box-shadow: #c3c3c344 0px 0px 20px;
}
.right-frosted-label{
    width: 100%;
    height: 90px;
    border-radius: 15px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
                color: #222;
                font-size: 16px;
                font-weight: 700;
                padding: 10px ;
                padding-block: 15px;
}
.right-only-images:nth-child(1){
    margin-left: 40px;
}
.right-only-images img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
}
    
    
    
    .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%;
    border-radius: 10px;
}
.contact-form-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    
    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{
    
    width: 100%;
}
.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;
    
        position: relative;
    }
    .venue-image{
        width: 100%;
        height: 600px;
        background: url("/assets/images/color-bg.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 20px;
        opacity: 1;
        transition: all 600ms ease-in-out;
    }
    .venue-image.fade-out{
        opacity: 0;
    }
    
    
    .venue-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }
    .venues-container{
        position: absolute;
        top: 0px;
        left: 0px;
        
        width: 100%;
        height: 600px;
        padding-block: 20px;
        border-radius: 20px;
        background-color: #ffffff40;
        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: 50px;
        line-height: 50px;
        
    }
    .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: hidden;
        overflow-x: 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: column;
        height: 350px;
        width: 100%;
        margin-top: 12px;
        margin-left: 0px;
    }
    .box-spacer{
        width: 1px;
        height: 12px;
        flex: none;
    }
    .vanue-item{
        width: 200px;
        height: 160px;
        background-color: #ffffff6f;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        margin-top: 15px;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        
    }
    .vanue-item.active-venue p{
        opacity: 1;
    }
    .vanue-item.active-venue b{
        opacity: 1;
    }
    .vanue-item b{
        font-weight: 700px;
        letter-spacing: -0.05em;
        font-size: 16px;
        opacity: 0.1;
        transition: all 600ms ease-in-out;
    }
    .vanue-item p{
        font-weight: 700px;
        letter-spacing: -0.03em;
        font-size: 12px;
        margin-top: 10px;
        opacity: 0.1;
        transition: all 600ms ease-in-out;
    }
    .vanue-item.active-venue .bubble-dark {
        opacity: 1;
      }
    .bubble-dark{
        border: 2px solid #222;
        width: fit-content;
        padding: 15px;
        padding-block: 5px;
        border-radius: 20px;
        margin-top: auto;
        opacity: 0;
        transition: all 600ms ease-in-out;
        display: none;
    }
    
    .vanue-item.right-vanue{
        margin-top: 0px;
        margin-left: 14px;
    }
    
    
    
    
    .timeline-section-section{
        height: 500px;
        margin-top: 50px;
        background: #222;
    }
    .timeline-line-moving{
        height: 500px;
        width: 45vw;
        background-color: #ffffffaa;
        border-right: 2px #222 solid;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 99;
        display: block;
    }
    .timeline-section{
        width: 100%;
        height: 500px;
        overflow-x: scroll;
        margin-inline: auto;

        background-color: #fff;
        position: relative;
    }
    .timeline-container{
        height: 500px;
        width: auto;
        min-height: 40px;
        
        position: relative;
    }
    .timeline-cover{
        display: none;
    }
    .timeline-p{
        width: 100%;
        height: 100%;
        position: absolute;
        display: hidden;
    }
    .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);
        -webkit-backdrop-filter: blur(2px);
        font-size: 17px;
        border-radius: 5px;
        width: max-content;
    }
    .timeline-container b{
        margin-inline: 10px;
        flex: none;
    }
    .timeline-container p{
        
    }
    #float0{
        left: 5%;
        top: 35%;
    }
    #float1{
        left: 22%;
        top: 45%;
    }
    #float2{
        left: 35%;
        top: 55%;
    }
    #float3{
        left: 65%;
        top:35%;
    }
    #float4{
        left: 75%;
        top: 45%;
    }
    .timeline-container img{
        width: auto;
        height: 500px;
    
    }
    .timeline-section p{
        
        margin-right: 10px;

        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: #e1e1e1;
        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/bottom-3.png"), #222;
        background-position: bottom left;
        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: top right;
        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);
        -webkit-backdrop-filter: blur(13px);
        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: #F4F4F4;
        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);
    -webkit-backdrop-filter: blur(13px);
    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-posts-page-container{
        display: flex;
        margin-top: 20px;
        padding-right: 0px;
        margin-bottom: 30px;
        width: 95%;
        margin-inline:auto;
        flex-direction: column;
        margin-bottom: 0px; 
    }
    .blog-box{
    
    width: 100%;
    
    margin-left: 0px;
    border-radius: 15px;
    position: relative;
    padding-bottom: 20px;
    cursor: pointer;
    }
    .blog-box:hover{
    background-color: #efefef;
    
    }
    .blog-box:hover .blog-image-overlay{
    background: linear-gradient(0deg, #efefef 5.25%, rgba(224, 224, 224, 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, #FFF 5.25%, rgba(255, 255, 255, 0.00) 60%);
    }
    .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);
        -webkit-backdrop-filter: blur(13px);
        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: #222 solid 1.5px;
    color: #222;
    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: #f5f5f5;
    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-box:hover{
        
        
        transition: all 0.2s linear;
        }
        .study-box:hover .study-box-overlay {
            opacity: 1;
        }
        .study-box:hover .study-box-hovered-overlay {
            opacity: 0;
            
        }
        .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(255, 255, 255, 0.60);
    
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(13px);
            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: #222;
            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-x: hidden; */
          }
          
          .scroll-track {
            display: flex;
            height: 100vh;
            width: max-content;
            position: sticky;
            top: 0;
          }
          .spaceholder-timeline{
            width: 200px;
            height: 1px;
          }
          .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: -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);
                -webkit-backdrop-filter: blur(13px);
                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: 500px;
                    position: relative;
                }
                .image-cover{
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 600px;
                    height: 730px;
                    opacity: 1;
                    background-color: #fff;
                }
                .image-cover.appear{
                    opacity: 0;
                }
                .image-text-container img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    
                }
    
                .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;
                }
                .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);
                    -webkit-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 #eee;
                    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: white;
                    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: #222;
                    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;
    }
    .maps-section{
    
        width:90%;
        margin-inline: auto;
        margin-top: 60px;
        margin-bottom: 100px;
    }
    .map-frame{
        width: 100%;
        height: 400px;
        margin-top: 50px;
    }
}
/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {

    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: #ffffff83;
    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: 80px;
    margin-bottom: 40px;
    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: 27px;
    margin-top: 25px;
    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(255, 255, 255, 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;
}
.navigation-buttons-holder a{
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    color: #222;
    display: none;
    text-shadow: #ffffff95 0px 0px 30px;
}
.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.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;
    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;
}
.revealed-text{
    width: 90%;
}
.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: 8vw;
    background: url("/assets/images/team1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 360px;
    flex: auto;
    margin-right: 5px;
    border-radius: 10px;
    filter: grayscale(100%);
    position: relative;
    cursor: pointer;
    transition: all 0.5s 0s linear;
}
.team-box.active{
    width: 300px;
    flex: none;
    filter: grayscale(0%);
    transition: all 0.5s 0s linear;
}
.flipped-name{
    position: absolute;
    bottom: 30px;
    right: 10px;
    rotate: 270deg;
    font-size: 25px;
    color: white;
    font-weight: 700;
}
.team-box.active .flipped-name{
    opacity: 0;
}
.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;
    min-height: 200px;
    width: 150px;
    border: 2px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 0.3s 0.7s;
}



.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 #ececec;
    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;
}
.point-container.active-point{
    height: 160px;
    border-left: solid 10px #222;
    
    background: #e5e5e574;
    backdrop-filter: blur(5px);
    -webkit-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: 868px;
    margin-top: 100px;
    margin-bottom: 60px;
    margin-inline: auto;
}
.network-section img{
    width: 100%;
    height: auto;
    opacity: 0;
}
.network-images{
    position: absolute;
    width: 85px;
    height: 110px;
    background-color: #eee;
    border-radius: 5px;
    top: 0px;

    
}
.network-images img{
    opacity: 1;
}
.network-images.appear{
    opacity: 1;
}
.floating-text{
    width: 50%;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    display: flex;
}
.network-section h2{
    font-size: 35px;
    text-align: center;
    line-height: 40px;
}
.floating-text b{
    text-align: center;
}
.network-images:nth-of-type(1){
    margin-left: 0px;
    margin-top: 60px;
}
.network-images:nth-of-type(2){
    margin-left: 0px;
    margin-top: 180px;
}
.network-images:nth-of-type(3){
    margin-left: 95px;
    margin-top: 10px;
}
.network-images:nth-of-type(4){
    margin-left: 95px;
    margin-top: 130px;
}
.network-images:nth-of-type(5){
    margin-left: 190px;
    margin-top: 50px;
}
.network-images:nth-of-type(6){
    margin-left: 285px;
    margin-top: 10px;
}
.network-images:nth-of-type(7){
    margin-left: 380px;
    margin-top: 50px;
}
.network-images:nth-of-type(8){
    margin-left: 475px;
    margin-top: 10px;
}
.network-images:nth-of-type(9){
    margin-left: 570px;
    margin-top: 75px;
}
.network-images:nth-of-type(10){
    margin-left: 665px;
    margin-top: 10px;
}
.network-images:nth-of-type(11){
    margin-left: 665px;
    margin-top: 130px;
}
.network-images:nth-of-type(12){
    margin-left: 760px;
    margin-top: 70px;
}
.network-images:nth-of-type(13){
    margin-left: 760px;
    margin-top: 190px;
}
.network-images img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
    





.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-inline: auto;
}
.right-text-and-images-section p{
    font-size: 17px;
    width: 70%;
    margin-inline: 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;
}



.right-only-images-section{
    width: 100%;
    
    margin-top: 50px;
    overflow: hidden;
}
.right-only-images-section h2{
    margin-left: 50px;
}
.right-only-images-container{
    width: 100%;
    align-items: center;
    justify-content: start;
    display: flex;
    overflow-x: scroll;
    margin-top: 30px;
    }
.right-only-images{
    flex: none;
    height: 25vw;
    width: 25%;
    background-color: #eee;
    border-radius: 10px;
}
.right-only-image-overlay{
    
    padding: 10px;
}
.right-bubble{
    width: fit-content;
    padding-inline: 15px;
    padding-block: 5px;
    border-radius: 20px;
    border: #fff solid 3px;
    color: #fff;
    box-shadow: #c3c3c344 0px 0px 20px;
}
.right-frosted-label{
    width: 100%;
    height: 90px;
    border-radius: 15px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
                color: #222;
                font-size: 17px;
                font-weight: 700;
                padding: 10px ;
                padding-block: 15px;
}
.right-only-images:nth-child(1){
    margin-left: 50px;
}
.right-only-images img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}



.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%;
    
    border-radius: 10px;
}
.contact-form-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    
    
    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{

    width: 100%;
}
.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;

    position: relative;
}
.venue-image{
    width: 100%;
    height: 800px;
    background: url("/assets/images/color-bg.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    opacity: 1;
    transition: all 600ms ease-in-out;
}
.venue-image.fade-out{
    opacity: 0;
}


.venue-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.venues-container{
    position: absolute;
    top: 0px;
    left: 0px;
    
    width: 100%;
    height: 800px;
    border-radius: 20px;
    background-color: #ffffff40;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.venue-description{
    width: 80%;
    
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    margin-bottom: 20px;
    margin-left: 70px;
}
.venues-container h3{
    font-size: 60px;
    line-height: 60px;
    
}
.venues-container p{
    font-size: 18px;
    margin-top: 30px;
}
.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: hidden;
    overflow-x: scroll;

    height: 400px;
    width: 100%;
    max-width: unset; /* Limit overall width */
     scrollbar-width: none;
    margin-bottom: 50px;
}
.moving-boxes-container::-webkit-scrollbar{
    display: none;
}
.venue-box-row{
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 100%;
    margin-top: 12px;
    margin-left: 0px;
}
.box-spacer{
    width: 1px;
    height: 12px;
    flex: none;
}
.vanue-item{
    width: 200px;
    height: 160px;
    background-color: #ffffff6f;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    margin-top: 15px;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    
}
.vanue-item.active-venue p{
    opacity: 1;
}
.vanue-item.active-venue b{
    opacity: 1;
}
.vanue-item b{
    font-weight: 700px;
    letter-spacing: -0.05em;
    font-size: 16px;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
}
.vanue-item p{
    font-weight: 700px;
    letter-spacing: -0.03em;
    font-size: 12px;
    margin-top: 10px;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
}
.vanue-item.active-venue .bubble-dark {
    opacity: 1;
  }
.bubble-dark{
    border: 2px solid #222;
    width: fit-content;
    padding: 15px;
    padding-block: 5px;
    border-radius: 20px;
    margin-top: auto;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
    display: none;
}

.vanue-item.right-vanue{
    margin-top: 0px;
    margin-left: 14px;
}




.timeline-line-moving{
    display: none;
}
.timeline-section{
    width: 100%;
    margin-inline: auto;
    margin-top: 50px;
    background-color: #fff;
}
.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);
    -webkit-backdrop-filter: blur(3px);
    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%;
}




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

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

.perk-grid-box{
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
}
.perk-image-box{
    background: #ffffffdd;
    
    border-radius: 15px;
    padding: 20px;
    height: 100px;
    width: 100px;
    border: 2px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;

    animation: float 10s ease-in-out infinite;
}
.perk-image-box img
{
height: 100%;
width: 100%;
object-fit: contain;
opacity: 0.6;

}



.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: #e1e1e1;
    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/bottom-3.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: top right;
    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);
    -webkit-backdrop-filter: blur(13px);
    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: #F4F4F4;
    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);
-webkit-backdrop-filter: blur(13px);
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-posts-page-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: #efefef;

}
.blog-box:hover .blog-image-overlay{
background: linear-gradient(0deg, #efefef 5.25%, rgba(224, 224, 224, 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, #FFF 5.25%, rgba(255, 255, 255, 0.00) 60%);
}
.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: 7px;
border-radius: 20px;
border: #222 solid 2px;
color: #222;
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: #f5f5f5;
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-box:hover{
    
    
    transition: all 0.2s linear;
    }
    .study-box:hover .study-box-overlay {
        opacity: 1;
    }
    .study-box:hover .study-box-hovered-overlay {
        opacity: 0;
        
    }
    .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(255, 255, 255, 0.60);

        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: 20px;
        color: #222;
        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);
    -webkit-backdrop-filter: blur(13px);
    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;
      }
      .spaceholder-timeline{
        width: 300px;
        height: 1px;
      }
      
      .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;
        margin-top: -50px;
        }


        .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);
            -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: 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;
                opacity: 1;
                transition: all 0.9s 0.5s ease-in-out;
                background-color: #fff;
            }
            .image-cover.appear{
                opacity: 0;
            }
            .image-text-container img{
                width: 320px;
                height: 400px;
                border-radius: 7px;
            }

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

            }
            .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;
                aspect-ratio: 1;
            }
            .faq-image-container img{
                width: 100%;
                height: 100%;
                
            }
            .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);
                -webkit-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 #eee;
                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: 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;
            }
            .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;
}
.maps-section{
    
    width: 85%;
    margin-inline: auto;
    margin-top: 60px;
    margin-bottom: 100px;
}
.map-frame{
    width: 100%;
    height: 500px;
    margin-top: 50px;
}
}
/* small desktop */
@media (min-width: 1024px) and (max-width: 1400px) 
{

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(255, 255, 255, 0.63);
        backdrop-filter: blur(13.149999618530273px);
        -webkit-backdrop-filter: blur(13px);
    }
    .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: #222;
        text-shadow: #ffffff95 0px 0px 30px;
    }
    .bolt-logo{
        height: 35px;
        width: auto;
        margin-left: 30px;
        margin-right: auto;
        flex: none;
    }
    .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;
    }
    
    
    
    
    
    .intro-section{
        width: 100%;
        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: 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;
        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: 100%;
        margin-left: 50px;
        margin-top:50px;
        font-size: 40px;
        line-height: 60px;
        font-weight: 700;
    }
    .reverse-image-scroller img{
        width: 100%;
    }
    .revealed-text{
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        
    }
    .text-cover-reveal{
        width: 100%;
        height: 1000px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        background-color: #ffffffaa;
        transition: all 2s 1s ease-in-out;
    }
    .text-cover-reveal.shown{
        height: 0px;
    }
    .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: #E8E8E8; /* Gray color for the lines */
        border: 2px solid #E8E8E8; /* Add border around the whole grid */
    
        width: 100%; /* Adjust as needed */
        margin-inline: auto;
    
    }
    .small-grid{
        grid-template-columns: repeat(4, 1fr);
        /* 2 equal rows */
        grid-template-rows: repeat(2, 1fr);
    }
    .grid-item {
        background-color: #ffffff; /* 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: #f1f1f1; */
    }
    .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{
        width: 8vw;
        height: 400px;
        margin-right: 10px;
    }
    .team-box.active{
        width: 400px;
    }
    .team-box-description{
        width: 90%;
    }
    .accreditation-container{
     width: 10%;

    }
    .acrid-bubble{
        display: none;
    }

    
    .scattered-perks-section{
        width: 95%;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-top: 100px;
        margin-bottom: 50px;
        height: 1000px;
    }
    .scattered-perks-section h2{
        font-size: 120px;
        font-weight: 800;
    
    }
    .scattered-perks-container{
        position: absolute;
        display: grid; 
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 5px;
        min-height: 250px; /* Give it a minimum height */
        color: black;
        padding: 0px; /* Padding inside the container */
    }
    
    .perk-grid-box{
        font-weight: bold;
        display: flex; /* Use flexbox to center content inside each item */
        justify-content: center;
        align-items: center;
        padding: 12px;
        border-radius: 5px;
    }
    .perk-image-box{
        background: #ffffffdd;
        
        border-radius: 15px;
        padding: 20px;
        height: 110px;
        width: 110px;
        border: 2px solid #E3E3E3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 1;
    
        animation: float 10s ease-in-out infinite;
    }
    .perk-image-box img
    {
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.6;
    
    }

    
    .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;
        min-height: 230px;
        width: 200px;
        border: 2px solid #E3E3E3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 1;
        transition: all 0.3s 0.7s;
    }

    #type2{
        background: #ffffff3e;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

    }
    #type2:first-child{
        background: #fff;

    }
    #type3{
        border: 2px solid rgba(222, 222, 222, 0.3);
    background-color: rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    .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 #ececec;
        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;
    }
    .point-container.active-point{
        height: 180px;
        border-left: solid 10px #222;
        
        background: #e5e5e574;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(13px);
        
    }
    .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: 1090px;
        margin-top: 100px;
        margin-bottom: 60px;
        margin-inline: auto;
        max-width: 1090px;
    }
    
    .network-section img{
        width: 100%;
        height: auto;
        opacity: 0;
    }
    
    
.network-section img{
    width: 100%;
    height: auto;
    
}

.network-images{
    position: absolute;
    width: 110px;
    height: 135px;
    background-color: #eee;
    border-radius: 10px;
    top: 0px;

    
}
.network-images img{
    opacity: 1;
}
.network-images.appear{
    opacity: 1;
}
.floating-text{
    width: 50%;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    display: flex;
}
.network-section h2{
    
    font-size: 40px;
    text-align: center;
    line-height: 40px;

}
.floating-text b{
    

    text-align: center;


}
.network-images:nth-of-type(1){
    margin-left: 0px;
    margin-top: 60px;
}
.network-images:nth-of-type(2){
    margin-left: 0px;
    margin-top: 205px;
}
.network-images:nth-of-type(3){
    margin-left: 120px;
    margin-top: 10px;
}
.network-images:nth-of-type(4){
    margin-left: 120px;
    margin-top: 155px;
}
.network-images:nth-of-type(5){
    margin-left: 240px;
    margin-top: 70px;
}
.network-images:nth-of-type(6){
    margin-left: 360px;
    margin-top: 20px;
}
.network-images:nth-of-type(7){
    margin-left: 480px;
    margin-top: 50px;
}
.network-images:nth-of-type(8){
    margin-left: 600px;
    margin-top: 20px;
}
.network-images:nth-of-type(9){
    margin-left: 720px;
    margin-top: 85px;
}
.network-images:nth-of-type(10){
    margin-left: 840px;
    margin-top: 10px;
}
.network-images:nth-of-type(11){
    margin-left: 840px;
    margin-top: 155px;
}
.network-images:nth-of-type(12){
    margin-left: 960px;
    margin-top: 70px;
}
.network-images:nth-of-type(13){
    margin-left: 960px;
    margin-top: 215px;
}
.network-images img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
    
    
    
    .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-new{
    width: 100%;
    margin-top: 30px;
    position: relative;
    height: 100vh;
    }
    .horizontal-timeline-container-new{
        display: flex;
        height: 100vh;
        width: max-content;
        position: sticky;
        top: 0;
    }
    
    .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, white, transparent);
    }
    .gradient-right{
        position: absolute;
        right: 0px;
        top: 0px;
        width: 200px;
        height: 100%;
        background: linear-gradient(to left, white, 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: #222;
        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: #222;
        
        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;
    }
    

    
    .right-only-images-section{
        width: 100%;
        
        margin-top: 50px;
        overflow: hidden;
    }
    .right-only-images-section h2{
        margin-left: 100px;
    }
    .right-only-images-container{
        width: 100%;
        align-items: center;
        justify-content: start;
        display: flex;
        overflow-x: scroll;
        margin-top: 30px;
        }
.right-only-images{
    flex: none;
    height: 23vw;
    width: 23%;
    background-color: #eee;
    border-radius: 10px;
}
.right-only-image-overlay{
    
    padding: 10px;
}
.right-bubble{
    width: fit-content;
    padding-inline: 15px;
    padding-block: 5px;
    border-radius: 20px;
    border: #fff solid 3px;
    color: #fff;
    box-shadow: #c3c3c344 0px 0px 20px;
}
.right-frosted-label{
    width: 100%;
    height: 90px;
    border-radius: 15px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
                color: #222;
                font-size: 17px;
                font-weight: 700;
                padding: 10px ;
                padding-block: 15px;
}
.right-only-images:nth-child(1){
    margin-left: 100px;
}
.right-only-images img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}
    
    
    
    
    
    .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;
        aspect-ratio: 1;
    }
    .team-member-image img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        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: 80%;
        
        border-radius: 10px;
    }
    .contact-form-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        
        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{

        width: 100%;
    }
    .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;
        position: relative;
    }
    .venue-image{
        width: 100%;
        height: 800px;
        background: url("/assets/images/color-bg.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 20px;
        opacity: 1;
        transition: all 600ms ease-in-out;
    }
    .venue-image.fade-out{
        opacity: 0;
    }
    
    
    .venue-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }
    .venues-container{
        position: absolute;
        top: 0px;
        left: 0px;
        
        width: 100%;
        height: 800px;
        border-radius: 20px;
        background-color: #ffffff40;
        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;
        display: none;
    }
    .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;
    
        align-items: start;
        justify-content: start;
    
        width: 50%;
        max-width: 800px; /* Limit overall width */
         scrollbar-width: none;
    
    }
    .moving-boxes-container::-webkit-scrollbar{
        display: none;
    }
    .venue-box-row{
        display: flex;
        height: 250px;
        width: 100%;
        margin-top: 12px;
        
    }
    .box-spacer{
        width: 12px;
        height: 1px;
        flex: none;
    }
    .vanue-item{
        width: 50%;
        height: 250px;
        background-color: #ffffff6f;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        margin-top: 15px;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        
    }
    .vanue-item.active-venue p{
        opacity: 1;
    }
    .vanue-item.active-venue b{
        opacity: 1;
    }
    .vanue-item b{
        font-weight: 700px;
        letter-spacing: -0.05em;
        font-size: 20px;
        opacity: 0.15;
        transition: all 600ms ease-in-out;
    }
    .vanue-item p{
        font-weight: 700px;
        letter-spacing: -0.03em;
        font-size: 14px;
        margin-top: 10px;
        opacity: 0.15;
        transition: all 600ms ease-in-out;
    }
    .vanue-item.active-venue .bubble-dark {
        opacity: 1;
      }
    .bubble-dark{
        border: 2px solid #222;
        width: fit-content;
        padding: 15px;
        padding-block: 5px;
        border-radius: 20px;
        margin-top: auto;
        opacity: 0.15;
        transition: all 600ms ease-in-out;
    }
    .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: #F4F4F4;
        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: 26px;
    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;
          }

          .spaceholder-timeline{
            width: 600px;
            height: 1px;
          }
          
          .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);
                -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: 420px;
                    height: 530px;

                }
                .image-cover{
                    position: absolute;
                    opacity: 1;
                    width: 420px;
                    height: 530px;

                }
                .image-cover.appear{
                    opacity: 0;
                }
                .image-text-container img{
                    width: 420px;
                    height: 530px;
                    
                }
    
                .text-description{
                    margin-inline: 80px;
                    max-width: 450px;
    
                }
                .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;
                }

                .maps-section{
    
                    width: 85%;
                    margin-inline: auto;
                    margin-top: 60px;
                    margin-bottom: 100px;
                }
                .map-frame{
                    width: 100%;
                    height: 500px;
                    margin-top: 50px;
                }
}