#hero-section {
    position: relative;
    background: #F8F6EE;
}
#hero-section video,
#hero-section img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
#hero-scrolling-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9vw;
    font-style: normal;
    font-weight: 500;
    line-height: 108%;
    color: #090B0D;
    position: relative;
    z-index: 20;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#hero-scrolling-text::-webkit-scrollbar {
    display: none;
}
#hero-scrolling-text p em {
    font-family: Playfair Display,serif
    font-style: italic;
}
@media (min-width: 768px) {
    #hero-scrolling-text p {
        font-size: 5.8vw;
        width: 80%;
    }
}
@media (max-width: 767px) {
    #hero-scrolling-text p {
        font-size: 9vw;
    }
}


.header-clouds {
    display: block;
}

#hero-video-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.06) 100%);
}



#hero-scrolling-text p::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

#hero-section img:first-child {
    position:relative;
    top: -2vw;
    left: -.6vw;
    width: 2vw;
}

#hero-section img:nth-child(2) {
    position:relative;
    left: -0.8vw;
    top: -0.5vw;
    width: 4vw;
    display: inline-block;
}


#hero-section img:nth-child(3) {
    position:relative;
    left: -0.5vw;
    top: -0.5vw;
    width: 4vw;
    display: none;
}

#hero-scrolling-text img{
    display: inline-block;
}

#hero-scrolling-text em{
    font-family: 'Playfair Display',serif;
    font-style: italic;
}

#hero-scrolling-text-inner-wrapper {
    height: 100px;
}

#hero-start-a-project {
    margin-bottom:32px;
    position: absolute;
    width: 100%;
    bottom:0px;
}

.hero-start-project p{
    border-radius: 7.89px;
    font-family: 'Playfair Display';
    font-size: 24.312px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -.243px;
    line-height: 37.224px;
    text-align: center;
    width: calc(100% - 40px);
    color: #090B0D;
}

.hero-start-project:after {
    background-color: #e5fa00;
    background-image: url(https://smakkstudios.com/wp-content/uploads/2025/09/arrow-1-1.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 21px;
    border-radius: 7.89px;
    content: "";
    display: block;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}

@media (min-width: 768px) {
    #hero-scrolling-text {
    font-size: 5.8vw;
    width:90%;
    }
}

@media (max-width: 767px) {

#hero-scrolling-text img:nth-child(2) {
    left: .8vw;
    }
}

@keyframes logoSmall {
 0% { max-width:100vw; }
 100% { max-width:200px; } 
}

@keyframes logoBig {
 0% { max-width:200px; }
 100% { max-width:100vw; } 
}


@media (min-width: 768px) {
 #hero-scrolling-text img:nth-child(3) {
    display: inline-block;
}


.bigLogo {
  animation: logoBig .5s linear forwards;
}

.smallLogo {
  animation: logoSmall .5s linear forwards;
}

.altLogo {
    display: none;
}

.header__logo {
    display: flex !important;
}
}

.hero-hover-img {
    display: none;
    position: absolute;
    z-index: 1000;
    width: 200px;
    pointer-events: none;
}

/* Update hero css files. */