/* 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;
} */

.banner-popup{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    z-index: 10000;


}
.popup-background-blur{
    width: 100%;
    height: 100%;
    background-color: #ffffff80;
    backdrop-filter: blur(10px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup-image{
    width: 60%;
    height: auto;
    position: relative;
}
.popup-image img{
    width: 100%;
    height: 100%;
}
.banner-close-button{
    position: absolute;
    right: 20px;
    top: 20px;

    width: 4vw;
    height: 4vw;
    background-color: #ffffffb0;
    border-radius: 2vw;
    border: solid 2px #ffffff40;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 21px;
    font-weight: 700;
}

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: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;


}
.navigation-buttons-holder a{
    text-decoration: none;
    font-size: 19px;
    font-weight: 700;
    color: #222;
    text-shadow: #ffffff95 0px 0px 30px;
    border: #ffffff00 solid 1px;
    padding-inline: 18px;
    padding-block: 7px;
    border-radius: 20px;
    transition: all 600ms ease-in-out;
}

.navigation-buttons-holder a:hover{
    background-color: #ffffff34;
    border: #ffffff7e solid 1px;
    backdrop-filter: blur(5px);
}
.navigation-buttons-holder a.active-nav{
    background-color: #ffffff34;
    border: #ffffff7e solid 1px;
    backdrop-filter: blur(5px);
}

.navigation-buttons-holder a.bolded{
    font-weight: 700;
}
.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;

}
.grid-container.three-grid{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
}
.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/1.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/5.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
#mohammad{
    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/4.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;
    left: 35px;


}
.flipped-name p{
    rotate: 270deg;
    font-size: 30px;
    color: white;
    font-weight: 700;
    transform-origin: left;
}
.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);
}


/* about our projects */
.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;
    margin-bottom: 50px;
    }

.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;
    background-color: #ffffff00;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.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;
}




@media(max-width:768px){

    .horizontal-scroll-section{
        width:100%;
        overflow:hidden;
    }


    .horizontal-scroll{
        height:auto !important;
        position:static !important;
        width:100%;
    }


    .scroll-track{

        display:flex !important;
        flex-direction:column !important;

        width:100% !important;
        height:auto !important;

        position:static !important;
        transform:none !important;

    }


    .timeline-line,
    .timeline-dot,
    .spaceholder-timeline{

        display:none !important;

    }


    .timeline-image-text-pair{

        width:100% !important;

        display:flex !important;

        flex-direction:column !important;

        margin:0 0 45px 0 !important;

    }


    .timeline-image-text-pair:first-child{

        margin-left:0 !important;

    }


    .timeline-text-container,
    .timeline-text-container.under{

        width:90% !important;

        height:auto !important;

        margin:0 auto 20px !important;

        order:1;

        display:block !important;

    }


    .timeline-image-container{

        width:90% !important;

        height:240px !important;

        margin:0 auto !important;

        order:2;

    }


    .timeline-image-container img{

        width:100% !important;

        height:100% !important;

        object-fit:cover !important;

        border-radius:20px;

    }


    .timeline-image-text-pair h3{

        font-size:22px !important;

        line-height:28px;

        width:100% !important;

        margin:0 0 12px !important;

    }


    .timeline-image-text-pair p{

        font-size:16px !important;

        line-height:25px;

        width:100% !important;

        margin:0 !important;

    }

}

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

 */










 .numbers-section {
    width: 85%;
    margin-inline: auto;
    margin-top: 140px;
}

/* heading upgrade */
.numbers-section h2 {
    font-size: 42px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: -1px;
    background: linear-gradient(90deg, #000, #666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* container */
.numbers-box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
    gap: 25px;
    flex-wrap: wrap;
}

/* stack */
.number-stack {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* card */
.number-box {
    position: relative;
    height: 270px;
    width: 200px;
    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-radius: 20px;

    /* GLASS STYLE */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

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

    /* DEPTH */
    box-shadow:
        0 10px 30px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);

    overflow: hidden;
    transition: all 0.4s ease;
}

/* animated glow line */
.number-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #6a5cff, transparent);
    transition: 0.6s;
}

/* hover */
.number-box:hover {
    transform: translateY(-12px) scale(1.04);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.15),
        0 0 25px rgba(106,92,255,0.15);
}

.number-box:hover::after {
    left: 100%;
}

/* title */
.number-box h3 {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    font-weight: 500;
}

/* BIG NUMBER */
.number-box b {
    font-size: 62px;
    font-weight: 800;
    letter-spacing: -2px;

    background: linear-gradient(135deg, #6a5cff, #00c6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* subtle floating animation */
.number-box {
    animation: floatCard 6s ease-in-out infinite;
}

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

@keyframes floatCard {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

/* hover overrides float */
.number-box:hover {
    animation: none;
}

/* responsive touch (safe) */
@media (max-width: 768px) {
    .numbers-section h2 {
        font-size: 30px;
    }
}
.numbers-section {
    width: 85%;
    margin-inline: auto;
    margin-top: 140px;
    position: relative;
    overflow: hidden;
}

/* BIG ROTATED BACKGROUND TEXT */
.numbers-section::before {
    content: "SCALESET";
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);

    font-size: 220px;
    font-weight: 900;
    letter-spacing: 10px;

    white-space: nowrap;

    color: #000;
    opacity: 0.03; /* super subtle */

    pointer-events: none;
    user-select: none;
}




/* numers set */
.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/Scaleset_Logo.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;

} */
 .footer-logo {
    width: 180px;
    height: 48px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.footer-logo-small {
    width: 53px;
    height: 45px;
    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;
            }



            /* mobile stragic events */




/* stragic events in */
.eventsShowcaseSection {
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
}

.eventsShowcaseWrapper {
    width: min(1200px, 90%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.eventCardNew {
    display: block;
    text-decoration: none;
    color: inherit;
}

.eventImageBoxNew {
    width: 100%;
    height: 430px;
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: #ddd;
}

.eventImageBoxNew img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eventTitleBadgeNew {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    min-height: 76px;
    padding: 16px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #111;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
}

.eventCardNew h3 {
    margin: 22px 0 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

@media (max-width: 768px) {
    .eventsShowcaseSection {
        padding: 40px 0;
    }

    .eventsShowcaseWrapper {
        width: 92%;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .eventImageBoxNew {
        height: 300px;
        border-radius: 22px;
    }

    .eventTitleBadgeNew {
        left: 14px;
        right: 14px;
        bottom: 14px;
        min-height: auto;
        padding: 12px 16px;
        border-radius: 16px;
        font-size: 18px;
        line-height: 22px;
    }

    .eventCardNew h3 {
        margin-top: 16px;
        font-size: 20px;
        line-height: 27px;
    }
}

@media (max-width: 420px) {
    .eventsShowcaseWrapper {
        width: 90%;
    }

    .eventImageBoxNew {
        height: 260px;
    }

    .eventCardNew h3 {
        font-size: 18px;
        line-height: 25px;
    }
}


            .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 h1{
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    font-size: 70px;
    line-height: 70px;
    margin-bottom: 30px;
}
.blog-page p{
    width: 90%;

    margin-inline: auto;
    margin-top: 50px;
    font-size: 20px;
}
.blog-page li{
    width: 90%;
    margin-inline: auto;
    margin-top: 10px;
    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;
}
.popup-section{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: #ffffffaa;
    backdrop-filter: blur(13px);
    transition: all 0.3s 0.3s ease-in-out;
    opacity: 0;
    display: none;
}
.popup-section.active-popup{
    transition: all 0.6s ease-in-out;
    opacity: 1;
}
.popup-container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px;
    opacity: 1;

}

.popup-title-x-row{
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.3s 0s ease-in-out;
}
.popup-title-x-row.active-popup{
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
}
#popup-title{
    width: 90%;
}


.popup-title-x-row b{
    cursor: pointer;
    font-size: 50px;
}
.popup-images-description{
    display: flex;
    align-items: center;
    margin-top: 50px;
}

.popup-images{
    height: 70vh;

    width: 0%;
    flex: none;
    margin-right: 0px;
    opacity: 0;
    transition: all 0.3s 0s ease-in-out;
}
.popup-images img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.popup-images.active-popup{
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
}
.popup-description{
    opacity: 0;
    width: 48%;
    transition: all 0.3s 0s ease-in-out;
}
.popup-description.active-popup{
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
}
.popup-description p{
    font-size: 25px;
}

.policy-page{
    width: 90%;
    margin-top: 50px;
    margin-inline: auto;
}
.policy-page h1{
    font-size: 50px;
}
.policy-page h2{
    font-size: 30px;
    margin-top: 20px;
}
.policy-page h3{
    font-size: 25px;
    margin-top: 10px;
}
.policy-page h4{
    margin-top: 10px;
}
.policy-page ul{
    margin-top: 10px;
}
/* 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;
} */

.banner-popup{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    z-index: 10000;


}
.popup-background-blur{
    width: 100%;
    height: 100%;
    background-color: #ffffff80;
    backdrop-filter: blur(10px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup-image{
    width: 90%;
    height: auto;
    position: relative;
}
.popup-image img{
    width: 100%;
    height: 100%;
}
.banner-close-button{
    position: absolute;
    right: 20px;
    top: 20px;

    width: 4vw;
    height: 4vw;
    background-color: #ffffffb0;
    border-radius: 2vw;
    border: solid 2px #ffffff40;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 21px;
    font-weight: 700;
}


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

/* @media (max-width: 1400px) {
    .navigation-buttons-holder {

        padding: 0px;
    }
} */
.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 img.prog-intro{
    margin-left: -150%;
}

.intro-section img.team-intro{

    margin-left: -150%;
}
.intro-section img.event-intro{
    margin-left: -200%;
}
.intro-section h1{
    position: absolute;
    bottom: 50px;
    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;
}




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



/* testimonials */
 .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
}





/* .testimonial-brackets-section {
    position: relative;
    width: min(95%, 1180px);
    margin-inline: auto;
    margin-top: 30px;
    padding: 50px 28px 20px;
}

.testimonial-brackets-section.color-bg {
    background:
        radial-gradient(circle at top left, rgba(215, 179, 121, 0.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.06), transparent 25%),
        url("/assets/images/color-bg-vert.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 34px;
}

.testimonial-brackets-section h2 {
    margin: 0;
    font-size: clamp(32px, 5vw, 60px);
    line-height: 1.08;
    letter-spacing: -1px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}

.testimonial-bracket-container {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 45px;
    padding: 20px 0;
} */

.up-bracket,
.down-bracket {
    width: 24px;
    min-height: 260px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex: none;
    opacity: 0.95;
}

.up-bracket {
    background-image: url("/assets/images/bracket-up.png");
}

#up-fade {
    background-image: url("/assets/images/bracket-up-fade.png");
    opacity: 0.65;
}

.down-bracket {
    background-image: url("/assets/images/bracket-down.png");
}

#down-fade {
    background-image: url("/assets/images/bracket-down-fade.png");
    opacity: 0.65;
}

.testimonial-brackets-section p {
    position: relative;
    flex: 1;
    margin: 0;
    padding: 42px 42px 34px;
    font-size: 20px;
    line-height: 1.95;
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.07);
    backdrop-filter: blur(16px);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
    overflow: hidden;
}

.testimonial-brackets-section p::before {
    content: "“";
    position: absolute;
    top: 14px;
    left: 22px;
    font-size: 86px;
    line-height: 1;
    font-weight: 700;
    color: rgba(215, 179, 121, 0.16);
    pointer-events: none;
}

.testimonial-brackets-section p.hide {
    opacity: 0;
    transform: translateY(10px);
}

.testimonial-brackets-section p span {
    display: block;
    margin-top: 18px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.testimonial-brackets-section p br + br {
    display: block;
    content: "";
    margin-bottom: 8px;
}

.testimonial-brackets-section p {
    text-wrap: pretty;
}

.testimonial-brackets-section p strong,
.testimonial-brackets-section p b {
    color: #d7b379;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .testimonial-brackets-section {
        padding: 40px 18px 10px;
    }

    .testimonial-brackets-section p {
        font-size: 18px;
        line-height: 1.85;
        padding: 34px 28px 28px;
    }

    .up-bracket,
    .down-bracket {
        min-height: 220px;
    }
}

@media (max-width: 768px) {
    .testimonial-brackets-section {
        width: 94%;
        margin-top: 20px;
        padding: 28px 10px 10px;
    }

    .testimonial-brackets-section h2 {
        text-align: center;
        font-size: 30px;
    }

    .testimonial-bracket-container {
        gap: 4px;
        margin-top: 28px;
        padding: 0;
    }

    .up-bracket,
    .down-bracket {
        width: 12px;
        min-height: auto;
        background-size: 100% 100%;
    }

    .testimonial-brackets-section p {
        padding: 26px 18px 22px;
        font-size: 15px;
        line-height: 1.8;
        border-radius: 20px;
    }

    .testimonial-brackets-section p::before {
        top: 10px;
        left: 14px;
        font-size: 56px;
    }

    .testimonial-brackets-section p span {
        font-size: 16px;
        margin-top: 16px;
    }
}

@media (max-width: 480px) {
    .testimonial-brackets-section p {
        font-size: 14px;
        line-height: 1.75;
        padding: 24px 16px 20px;
    }

    .up-bracket,
    .down-bracket {
        width: 10px;
    }
}

/* .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;
} */


/* testimonil */


.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/1.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: 30px;
    left: 35px;


    }
.flipped-name p{
    rotate: 0deg;
    font-size: 22px;
    color: white;
    font-weight: 700;
    transform-origin: left;
}
.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;
    color: black;
    padding: 10px; }

.grid-box{
    font-weight: bold;
    display: flex;
    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: 90%;
    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;
    margin-bottom: 0px;
    }

.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/Scaleset_Logo.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: 30px;
    height: 40px;
    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 h1{
    width: 90%;
    margin-inline: auto;
    margin-top: 30px;
    font-size: 30px;
    line-height: 30px;
    margin-bottom: 20px;
}
.blog-page p{
    width: 90%;
    margin-inline: auto;
    margin-top: 20px;
    font-size: 17px;
}
.blog-page li{
    width: 90%;
    margin-inline: auto;
    margin-top: 5px;
    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;
}
.popup-section{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: #ffffffaa;
    backdrop-filter: blur(13px);
    transition: all 0.3s 0.6s ease-in-out;
    opacity: 0;
    display: none;
    overflow-y: scroll;
}
.popup-section.active-popup{
    transition: all 0.6s ease-in-out;
    opacity: 1;
}
.popup-container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    padding: 30px;
    opacity: 1;

}

.popup-title-x-row{
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.3s 0.6s ease-in-out;
}
.popup-title-x-row.active-popup{
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
}
#popup-title{
    width: 90%;
}


.popup-title-x-row b{
    font-size: 35px;
}
.popup-images-description{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
}

.popup-images{
    height: 40vh;
    height: 0px;
    background-color: #ffffffaa;
    width: 100%;
    flex: none;
    margin-right: 0px;
    /* margin-bottom: 30px; */
    opacity: 0;
    transition: all 0.3s 0.3s ease-in-out;
}
.popup-images.active-popup{
    opacity: 1;
    transition: all 0.6s 1.2s ease-in-out;
}
.popup-description{
    opacity: 0;
    width: 100%;
    transition: all 0.3s 0s ease-in-out;
}
.popup-description.active-popup{
    opacity: 1;
    transition: all 0.6s 1.8s ease-in-out;
}
.popup-description p{
    font-size: 16px;
}
}
/* 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;
    } */
     .banner-popup{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    z-index: 10000;


}
.popup-background-blur{
    width: 100%;
    height: 100%;
    background-color: #ffffff80;
    backdrop-filter: blur(10px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup-image{
    width: 90%;
    height: auto;
    position: relative;
}
.popup-image img{
    width: 100%;
    height: 100%;
}
.banner-close-button{
    position: absolute;
    right: 20px;
    top: 20px;

    width: 36px;
    height: 36px;
    background-color: #ffffffb0;
    border-radius: 18px;
    border: solid 2px #ffffff40;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 17px;
    font-weight: 700;
}
    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;
    }

 */
.navigation-bar-mobile {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    z-index: 8000;
    background-color: #ffffff83;
    backdrop-filter: blur(13.1px);
    -webkit-backdrop-filter: blur(13px);
    flex-direction: column;
    align-items: center;
    justify-content: start;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

.navigation-bar-mobile.hide-bar {
    opacity: 0;
    display: none;
}

.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 a {
    font-size: 27px;
    margin-top: 20px;
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    color: #222;
}

.navigation-bar-mobile.hide-bar a {
    opacity: 0;
}

.close-button {
    cursor: pointer;
}

.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: 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;
    cursor: pointer;
}

.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/1.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: 30px;
    left: 35px;


    }
    .flipped-name p{
        rotate: 0deg;
        font-size: 25px;
        color: white;
        font-weight: 700;
        transform-origin: left;
    }
    .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;
    }

    .perk-grid-box{
        font-weight: bold;
        display: flex;
        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;
        color: black;
        padding: 10px;
    }

    .grid-box{
        font-weight: bold;
        display: flex;
        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;
        margin-bottom: 00px;
        }
.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 h1{
        width: 90%;
        margin-inline: auto;
        margin-top: 30px;
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 20px;
    }
    .blog-page p{
        width: 90%;
        margin-inline: auto;
        margin-top: 20px;
        font-size: 17px;
    }
    .blog-page li{
        width: 90%;
        margin-inline: auto;
        margin-top: 5px;
        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;
    }

.popup-section{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: #ffffffaa;
    backdrop-filter: blur(13px);
    transition: all 0.3s 0.6s ease-in-out;
    opacity: 0;
    display: none;
    overflow-y: scroll;
}
.popup-section.active-popup{
    transition: all 0.6s ease-in-out;
    opacity: 1;
}
.popup-container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 1;

}

.popup-title-x-row{
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.3s 0.6s ease-in-out;
}
.popup-title-x-row.active-popup{
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
}
#popup-title{
    width: 90%;
}


.popup-title-x-row b{
    font-size: 35px;
}
.popup-images-description{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
}

.popup-images{
    height: 40vh;
    height: 0px;
    background-color: #ffffffaa;
    width: 100%;
    flex: none;
    margin-right: 0px;
    /* margin-bottom: 30px; */
    opacity: 0;
    transition: all 0.3s 0.3s ease-in-out;
}
.popup-images.active-popup{
    opacity: 1;
    transition: all 0.6s 1.2s ease-in-out;
}
.popup-description{
    opacity: 0;
    width: 100%;
    transition: all 0.3s 0s ease-in-out;
}
.popup-description.active-popup{
    opacity: 1;
    transition: all 0.6s 1.8s ease-in-out;
}
.popup-description p{
    font-size: 16px;
}
}

/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {

.banner-popup{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    z-index: 10000;


}
.popup-background-blur{
    width: 100%;
    height: 100%;
    background-color: #ffffff80;
    backdrop-filter: blur(10px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup-image{
    width: 80%;
    height: auto;
    position: relative;
}
.popup-image img{
    width: 100%;
    height: 100%;
}
.banner-close-button{
    position: absolute;
    right: 20px;
    top: 20px;

    width: 4vw;
    height: 4vw;
    background-color: #ffffffb0;
    border-radius: 2vw;
    border: solid 2px #ffffff40;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 17px;
    font-weight: 700;
}

    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/1.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;
    left: 35px;


}
.flipped-name p{
    rotate: 270deg;
    font-size: 25px;
    color: white;
    font-weight: 700;
    transform-origin: left;
}
.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: 90%;
    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;
    margin-bottom: 20px;
    }
.right-only-images{
    flex: none;
    height: 30vw;
    width: 30%;
    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: 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: 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 h1{
    width: 90%;
    margin-inline: auto;
    margin-top: 40px;
    font-size: 60px;
    line-height: 60px;
    margin-bottom: 20px;
}
.blog-page p{
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    font-size: 20px;
}
.blog-page li{
    width: 90%;
    margin-inline: auto;
    margin-top: 10px;
    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;
}
.popup-section{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: #ffffffaa;
    backdrop-filter: blur(13px);
    transition: all 0.3s 0.6s ease-in-out;
    opacity: 0;
    display: none;
    overflow-y: scroll;
}
.popup-section.active-popup{
    transition: all 0.6s ease-in-out;
    opacity: 1;
}
.popup-container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 1;

}

.popup-title-x-row{
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.3s 0.6s ease-in-out;
}
.popup-title-x-row.active-popup{
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
}
#popup-title{
    width: 90%;
}


.popup-title-x-row b{
    font-size: 35px;
}
.popup-images-description{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
}

.popup-images{
    height: 40vh;
    height: 0px;
    background-color: #ffffffaa;
    width: 100%;
    flex: none;
    margin-right: 0px;
    /* margin-bottom: 30px; */
    opacity: 0;
    transition: all 0.3s 0.3s ease-in-out;
}
.popup-images.active-popup{
    opacity: 1;
    transition: all 0.6s 1.2s ease-in-out;
}
.popup-description{
    opacity: 0;
    width: 100%;
    transition: all 0.3s 0s ease-in-out;
}
.popup-description.active-popup{
    opacity: 1;
    transition: all 0.6s 1.8s ease-in-out;
}
.popup-description p{
    font-size: 20px;
}
}
/* small desktop */
@media (min-width: 1024px) and (max-width: 1400px)
{

    .banner-popup{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    z-index: 10000;


}
.popup-background-blur{
    width: 100%;
    height: 100%;
    background-color: #ffffff80;
    backdrop-filter: blur(10px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup-image{
    width: 80%;
    height: auto;
    position: relative;
}
.popup-image img{
    width: 100%;
    height: 100%;
}
.banner-close-button{
    position: absolute;
    right: 20px;
    top: 20px;

    width: 4vw;
    height: 4vw;
    background-color: #ffffffb0;
    border-radius: 2vw;
    border: solid 2px #ffffff40;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 17px;
    font-weight: 700;
}

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: 80%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 10px;
                padding: 98px !important;

    }
    .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;
        margin-bottom: 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;
                }
                .popup-section{
                    position: fixed;
                    top: 0px;
                    left: 0px;
                    z-index: 9999;
                    height: 100%;
                    width: 100%;
                    background-color: #ffffffaa;
                    backdrop-filter: blur(13px);
                    transition: all 0.3s 0.6s ease-in-out;
                    opacity: 0;
                    display: none;
                }
                .popup-section.active-popup{
                    transition: all 0.6s ease-in-out;
                    opacity: 1;
                }
                .popup-container{
                    height: 100%;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 50px;
                    opacity: 1;

                }

                .popup-title-x-row{
                    width: 100%;
                    display: flex;
                    align-items: start;
                    justify-content: space-between;
                    opacity: 0;
                    transition: all 0.3s 0.6s ease-in-out;
                }
                .popup-title-x-row.active-popup{
                    opacity: 1;
                    transition: all 0.6s 0.6s ease-in-out;
                }
                #popup-title{
                    width: 90%;
                }


                .popup-title-x-row b{
                    font-size: 40px;
                }
                .popup-images-description{
                    display: flex;
                    align-items: center;
                    margin-top: 50px;
                }

                .popup-images{
                    height: 48vw;
                    background-color: #ffffffaa;
                    width: 48%;
                    width: 0px;
                    flex: none;
                    margin-right: 30px;
                    margin-right: 0px;
                    opacity: 0;
                    transition: all 0.3s 0.3s ease-in-out;
                }
                .popup-images.active-popup{
                    opacity: 1;
                    transition: all 0.6s 1.2s ease-in-out;
                }
                .popup-description{
                    opacity: 0;
                    width: 48%;
                    transition: all 0.3s 0s ease-in-out;
                }
                .popup-description.active-popup{
                    opacity: 1;
                    transition: all 0.6s 1.8s ease-in-out;
                }
                .popup-description p{
                    font-size: 20px;
                }
}


/* contact us */
/* Container & Section Setup */
.callback-section {
    padding: 80px 0;
    background-color: transparent;
    overflow: hidden;
}

.callback-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.callback-grid {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

/* Form Card Styling */
.callback-card {
    flex: 1;
    min-width: 350px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* Professional Soft Shadow */
    overflow: hidden;
    z-index: 10;
}

.callback-header {
    background-color: #2563eb; /* Primary Brand Blue */
    padding: 25px 35px;
}

.callback-header h2 {
    color: #ffffff;
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.callback-form {
    padding: 40px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
    font-size: 15px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    outline: none;
}

/* Input Focus Effect */
.form-group input:focus,
.form-group textarea:focus {
    border-color: #2563eb;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Professional Button */
.callback-btn {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    width: auto;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.callback-btn:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

/* Image/Visual Styling */
.callback-visual {
    flex: 1.2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.visual-wrapper {
    position: relative;
    width: 100%;
    text-align: right;
}

.expert-img {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
    /* Image ko thora bottom se bahar nikalne ke liye (optional) */
    margin-bottom: -20px;
}

.shape-img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    max-width: 110%;
    opacity: 0.9;
}

/* Responsive for Mobile */
@media (max-width: 992px) {
    .callback-grid {
        flex-direction: column;
        text-align: center;
    }

    .callback-card {
        width: 100%;
    }

    .callback-visual {
        margin-top: 50px;
    }
}



/* foooter */
.bolt-v2-footer {
    background-color: #000000; /* Deep Black background */
    color: #ffffff;
    padding: 100px 0 40px 0;
    border-top: 1px solid #222; /* Minimal top border */
}

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 0.8fr;
    gap: 40px;
    padding-bottom: 60px;
}

/* Brand Styling */
.footer-logo h2 {
    font-size: 35px;
    font-weight: 900;
    margin: 0 0 20px 0;
    letter-spacing: -1.5px;
}

.footer-desc {
    color: #888;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 15px;
}

/* Titles */
.col-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #444; /* Darker title for professional look */
    margin-bottom: 30px;
}

/* Links & Nav */
.footer-nav a, .contact-link, .social-link {
    display: block;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 12px;
    font-size: 15px;
    transition: opacity 0.3s ease;
    opacity: 0.7;
}

.footer-nav a:hover, .contact-link:hover, .social-link:hover {
    opacity: 1;
}

.social-box {
    display: flex;
    gap: 15px;
}

.social-link {
    border: 1px solid #333;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Credit Column */
.credit-col p {
    margin: 0;
    color: #555;
    font-size: 14px;
}

.recast-tag {
    color: #2563eb; /* Blue pop for the developer */
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
}

/* Contact Details */
.contact-info p {
    color: #888;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Bottom Bar */
.footer-bottom-bar {
    border-top: 1px solid #111;
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright-text, .legal-links a {
    color: #444;
    font-size: 13px;
    text-decoration: none;
}

.legal-links a {
    margin-left: 20px;
}

.legal-links a:hover {
    color: #888;
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-top-grid {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
}

@media (max-width: 600px) {
    .footer-top-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom-bar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}




.question-bubble {
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 30px;
    border: 1px solid #ccc;
    transition: 0.3s ease;
}

/* IMPORTANT */
.active-bubble {
    background-color: black !important;
    color: white !important;
    border-color: black !important;
}




/* success */
.success-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.success-modal.show {
    display: flex;
}

.success-modal-content {
    background: #fff;
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    padding: 35px 28px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.success-check {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-modal-content h3 {
    margin: 0 0 10px;
    font-size: 28px;
    color: #111;
}

.success-modal-content p {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

.success-modal-content button {
    background: #111;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}




/* points 4 se */
/* --- ScaleSet Approach Section Styling --- */

:root {
    --brand-blue: #0052cc;
    --dark-text: #1a1a1a;
    --body-text: #555555;
    --gray-bg: #fdfdfd;
    --card-white: #ffffff;
    --border-soft: #f0f0f0;
}

.business-flow-section {
    padding: 120px 0;
    background: var(--gray-bg);
}

.flow-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
    padding: 0 20px;
    align-items: flex-start;
}

/* Left Side: Sticky Content */
.flow-sticky-content {
    flex: 1;
    position: sticky;
    top: 120px;
    height: fit-content;
}

.flow-sticky-content .tag {
    color: var(--brand-blue);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    display: block;
    margin-bottom: 15px;
}

.flow-sticky-content h2 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--dark-text);
    letter-spacing: -1px;
}

.flow-sticky-content p {
    font-size: 18px;
    color: var(--body-text);
    line-height: 1.8;
    margin-bottom: 35px;
}

.flow-btn {
    display: inline-block;
    padding: 16px 36px;
    background: var(--dark-text);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.flow-btn:hover {
    background: var(--brand-blue);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 82, 204, 0.15);
}

/* Right Side: Cards Stack */
.flow-cards-stack {
    flex: 1.3;
}

.f-card {
    background: var(--card-white);
    padding: 45px;
    border-radius: 28px;
    margin-bottom: 35px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.02);
    border: 1px solid var(--border-soft);
    position: relative;
}

.f-card-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

.f-content {
    flex: 1;
}

.f-num {
    font-size: 14px;
    font-weight: 800;
    color: var(--brand-blue);
    background: rgba(0, 82, 204, 0.08);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 25px;
}

.f-card h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--dark-text);
}

.f-card p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.7;
    margin: 0;
}

/* Right Side Icon/Image Shape */
.f-icon-container {
    flex: 0 0 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.f-icon-shape {
    width: 110px;
    height: 110px;
    background: #f8faff;
    border: 1px solid rgba(0, 82, 204, 0.06);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Internal glass decorative circle */
.f-icon-shape::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    background: rgba(0, 82, 204, 0.04);
    border-radius: 50%;
    z-index: 1;
}

.f-icon-shape img {
    width: 55px; /* Adjust based on your Flaticon size */
    height: 55px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    /* transition: transform 0.4s ease; (Optional: if you want icon to move slightly) */
}

/* Responsive Tablet & Mobile */
@media (max-width: 1024px) {
    .flow-container {
        gap: 40px;
    }
    .flow-sticky-content h2 {
        font-size: 42px;
    }
}


/* business new change 2026 */

@media (max-width: 992px){
    .business-flow-section {
   padding:0px;
    background: var(--gray-bg);
}

}
@media (max-width: 992px) {
    .flow-container {
        flex-direction: column;
    }
    .flow-sticky-content {
        position: relative;
        top: 0;
        text-align: center;
        margin-bottom: 60px;
    }
    .f-card-inner {
        flex-direction: column-reverse; /* Icons top par aa jayenge mobile pe */
        text-align: center;
        gap: 30px;
    }
    .f-num {
        margin: 0 auto 20px;
    }
    .f-icon-container {
        width: 100%;
    }
}




/* teams */


/* Bolt Consultancy Premium Testimonial Style */
.pxn-h1-testimonial-section {
    position: relative;
    background-color: #000000; /* Pure Black Background */
    padding: 100px 0;
    z-index: 1;
    color: #ffffff;
}

/* Hiding the Rovix yellow shapes */
.pxn-h1-testimonial-section .bg_shape {
    display: none !important;
}

.pxn-h1_testimonial_wrap .sec_sub {
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.pxn-h1_testimonial_wrap .sec_title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
}

/* Testimonial Card Styling */
.pxn_testimonial_inner {
    background: #111111; /* Dark Gray Card */
    border: 1px solid #222; /* Subtle border */
    border-radius: 20px;
    padding: 40px;
    transition: all 0.3s ease;
}

.pxn_testimonial_inner:hover {
    border-color: #ffffff; /* Hover effect like Apple sites */
}

/* Removing the beige background from Rovix */
.pxn_testimonial .testimonial_text {
    background-color: transparent !important;
    color: #cccccc !important;
    font-size: 20px !important;
    line-height: 1.6;
    padding: 0 !important;
    margin-bottom: 30px;
    font-weight: 400;
}

.pxn_testimonial .testimonial_header {
    margin-bottom: 30px;
}

/* Stars Color - White/Silver instead of Yellow */
.pxn-rating-wrapper .r-icon-wrapper.r-icon-marked {
    --r-rating-icon-color: #ffffff !important;
}

.pxn-rating-wrapper .rating-label {
    color: #666 !important;
}

/* Quote Icon */
.pxn_testimonial .testimonial_quote {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

/* Author Info */
.pxn_testimonial .testimonial_author {
    background-color: transparent !important;
    padding: 0 !important;
    margin-top: 30px;
    border: none !important;
    display: flex;
    align-items: center;
}

.pxn_testimonial .testimonial_author .author_img {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Circular images look more premium */
    border: 1px solid #333;
}

.pxn_testimonial .testimonial_author .name {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 600;
}

.pxn_testimonial .testimonial_author .designation {
    color: #666 !important;
}

/* Pagination Dots */
.pxn_slider-pagination .swiper-pagination-bullet {
    background: #333 !important;
    opacity: 1;
}

.pxn_slider-pagination .swiper-pagination-bullet-active {
    background: #ffffff !important;
}

/* Adjusting layout for Bolt style */
@media (max-width: 991px) {
    .pxn-h1_testimonial_wrap .testimonial_content_wrapper {
        flex-direction: column;
        gap: 40px;
    }
}














/* events */
 /* Reset & Container */
    .events-section { padding: 80px 20px; background-color: #fff; }
    .container { max-width: 1150px; margin: 0 auto; }

    .section-title {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 30px;
        margin-top:40px;
        color: #111;
    }

    /* Grid Setup */
    .events-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
    }

    /* Card Styling */
    .event-card {
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .image-wrapper {
        width: 100%;
        height: 240px;
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 15px;
    }

    .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    /* Professional Interaction */
    .event-card:hover .image-wrapper img {
        transform: scale(1.05);
    }

    /* Text Styling */
    .event-name {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        color: #222;
    }

    .event-type {
        font-size: 15px;
        color: #777;
        margin: 5px 0 0 0;
    }

    /* Responsive */
    @media (max-width: 600px) {
        .section-title {
            font-size: 28px;
             margin-top: -48px;
            /* margin-top:0px; */
}
        .events-grid { grid-template-columns: 1fr; }
    }




    /* servoces css */
    .ss_services_section{
    padding:70px 0;
    background:#fff;
}

.ss_services_heading{
    max-width:1200px;
    margin:0 auto 35px;
    padding:0 20px;
}

.ss_services_heading h2{
font-size: 45px;    line-height:1.2;
    font-weight:700;
    color:#111;
    margin:0;
}

.ss_services_grid{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
}

.ss_service_card{
    min-height:280px;
    border-radius:28px;
    padding:34px 28px;
    background:#fff;
    border:1px solid rgba(0,59,99,.12);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.ss_icon_wrap{
    width:74px;
    height:74px;
    border-radius:22px;
    background:rgba(0,59,99,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:26px;
}

.ss_icon_wrap i{
    font-size:34px;
    color:#003B63;
}

.ss_service_card h3{
    font-size:25px;
    line-height:1.25;
    font-weight:600;
    color:#111;
    margin:0 0 14px;
}

.ss_service_card p{
    font-size:15px;
    line-height:1.65;
    color:#444;
    margin:0;
}

@media(max-width:992px){
    .ss_services_grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:576px){
    .ss_services_section{
        padding:50px 0;
    }

    .ss_services_heading h2{
        font-size:32px;
    }

    .ss_services_grid{
        grid-template-columns:1fr;
    }

    .ss_service_card{
        min-height:auto;
    }
}


/* faqs */

.ss_testimonial_section{
    padding:80px 0;
    background:#f7fbfd;
}

.ss_testimonial_head{
    max-width:760px;
    margin:0 auto 42px;
    padding:0 20px;
    text-align:center;
}

.ss_testimonial_head span{
    color:#003B63;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.ss_testimonial_head h2{
    font-size:45px;
    line-height:1.2;
    font-weight:700;
    color:#111;
    margin:12px 0 14px;
}

.ss_testimonial_head p{
    font-size:16px;f
    line-height:1.7;
    color:#555;
    margin:0;
}

.ss_testimonial_grid{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
}

.ss_testimonial_card{
    background:#fff;
    border:1px solid rgba(0,59,99,.12);
    border-radius:28px;
    padding:34px 28px;
    box-shadow:0 18px 45px rgba(0,0,0,.07);
}

.ss_quote_icon{
    width:58px;
    height:58px;
    border-radius:18px;
    background:rgba(0,59,99,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
}

.ss_quote_icon i{
    color:#003B63;
    font-size:24px;
}

.ss_testimonial_card p{
    font-size:16px;
    line-height:1.75;
    color:#333;
    margin:0 0 28px;
}

.ss_client_info{
    border-top:1px solid rgba(0,59,99,.12);
    padding-top:18px;
}

.ss_client_info h4{
    font-size:18px;
    color:#111;
    margin:0 0 5px;
}

.ss_client_info span{
    font-size:14px;
    color:#666;
}

@media(max-width:992px){
    .ss_testimonial_grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:576px){
    .ss_testimonial_section{
        padding:55px 0;
    }

    .ss_testimonial_head h2{
        font-size:32px;
    }

    .ss_testimonial_grid{
        grid-template-columns:1fr;
    }
}



/* welcome page css */
.desktop-banner-img{
    display:block;
}

.mobile-banner-img{
    display:none;
}

@media(max-width:768px){
    .intro-section{
        height:100vh;
        margin-top:-90px;
    }

    .desktop-banner-img{
        display:none !important;
    }

    .mobile-banner-img{
        display:block !important;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
    }

    .intro-section h1{
        left:24px;
        bottom:70px;
        font-size:52px;
        line-height:52px;
    }
}



/* step by the numbers */






@media (max-width: 768px) {
    /* Container ko pura width de dein */
    .numbers-box-container {
        flex-direction: column;
        gap: 20px;
        margin-top: 40px;
    }

    /* Stack ko normal block mein badlein */
    .number-stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    /* Boxes ki width mobile par adjust karein */
    .number-box {
        width: 100% !important; /* Mobile par pura width le */
        height: auto;           /* Height auto taake content cut na ho */
        min-height: 200px;
        padding: 25px;
    }

    /* Mobile par background text ko hide ya scale down karein */
    .numbers-section::before {
        font-size: 100px; /* Text chota karein */
        opacity: 0.02;
    }

    .numbers-section {
        margin-top: 60px;
        width: 90%;
    }
}



/* Achievements */
@media (max-width: 768px) {
    /* Container ko flex mein badlein taake items stack ho jayein */
    .scattered-boxes-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important; /* Gap ko kam karein */
    }

    /* Empty boxes ko completely hata dein */
    .grid-box:empty {
        display: none !important;
    }

    /* Boxes ki width aur margin set karein */
    .grid-box {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Perk box styling for mobile */
    .perk-box {
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
        margin: 0 !important;
    }
}



/* mobile menu */
.scale_mobile_header,
.scale_mobile_backdrop,
.scale_mobile_drawer {
    display: none;
}

@media (max-width: 768px) {
    .navigation-bar {
        display: none !important;
    }

    .scale_mobile_header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 64px !important;
        padding: 0 18px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        z-index: 999999 !important;
        box-sizing: border-box !important;
    }

    .scale_mobile_logo {
        display: flex !important;
        align-items: center !important;
        height: 34px !important;
        text-decoration: none !important;
    }

    .scale_mobile_logo img {
        height: 100% !important;
        width: auto !important;
        display: block !important;
    }

    .scale_mobile_toggle {
        width: 44px !important;
        height: 44px !important;
        border: 0 !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 1000000 !important;
    }

    .scale_mobile_toggle span {
        width: 28px !important;
        height: 2px !important;
        background: #111 !important;
        display: block !important;
        border-radius: 20px !important;
    }

    .scale_mobile_backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.32) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 1000001 !important;
        transition: 0.3s ease !important;
    }

    .scale_mobile_backdrop.is_open {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .scale_mobile_drawer {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 86% !important;
        max-width: 340px !important;
        height: 100vh !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        z-index: 1000002 !important;
        flex-direction: column !important;
        padding: 28px 24px !important;
        box-sizing: border-box !important;
        transform: translateX(110%) !important;
        transition: 0.35s ease !important;
    }

    .scale_mobile_drawer.is_open {
        transform: translateX(0) !important;
    }

    .scale_mobile_drawer_top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 35px !important;
    }

    .scale_mobile_drawer_logo {
        height: 34px !important;
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }

    .scale_mobile_drawer_logo img {
        height: 100% !important;
        width: auto !important;
        display: block !important;
    }

    .scale_mobile_close {
        border: 0 !important;
        background: transparent !important;
        font-size: 38px !important;
        line-height: 1 !important;
        color: #111 !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    .scale_mobile_nav_links {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
    }

    .scale_mobile_nav_links a {
        color: #111 !important;
        text-decoration: none !important;
        font-size: 24px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
    }

 body.scale_menu_active {
    overflow-y: hidden !important;
}

    body {
        padding-top: 64px !important;
    }
}




@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
        scroll-behavior: auto !important;
    }




}



/* how to scale */