body {
    background-color: var(--black);
    color: var(--white);
    
}
/* Styling Playground */
#heroSection{
    height: 96dvh;
    background-color: rgba(0,0,0,0.6);
    transition: padding 0.4s ease;
}
.hero-video{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}
#heroSection .hero-tag{
    position: absolute;
    bottom: var(--spacing-4);
}
h1{
    text-transform: uppercase;
    max-width: 1144px;
}
.headline p{
    max-width: 480px;
}
.cta-wrap{
    margin-top: var(--spacing-6);
}

#aboutSection, #testimonialSection{
    padding-top: var(--spacing-32);
    padding-bottom: var(--spacing-32);
}
#aboutSection p, #serviceSection h2, .service-list li{
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 500;
    color: var(--white);
    line-height: var(--leading-md);
    letter-spacing: var(--tracking-tighter);
}

#collabSection{
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
}
.collab-carrousel{
    overflow-x: auto;
}
.collab-carrousel::-webkit-scrollbar{
    display: none;
}
.collab-carrousel::before,
.collab-carrousel::after{
  content: "";
  position: absolute;
  top: 0;
  width: 64px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.collab-carrousel::before{
  left: 0;
  background: linear-gradient(
    to right,
    var(--black),
    transparent
  );
}
.collab-carrousel::after{
  right: 0;
  background: linear-gradient(
    to left,
    var(--black),
    transparent
  );
}
.carrousel-wrap{
    animation: slideLeft 8s linear infinite;
    padding-right: var(--spacing-20);
}
.carrousel-logo{
    flex: 0 0 3em;
    height: 8vw;
    min-height: 3.5rem;
    max-height: 5rem;
}
@keyframes slideLeft{
    from {translate: 0;}
    to {translate: -100%;}
}
#workSection{
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
}
.work-grid{
    display: grid;
    gap: var(--spacing-5);
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.project-container{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-7);
}
.project-banner{
    aspect-ratio: 16 / 9;
    background-color: var(--neutral-800);
    overflow: hidden;
}
.project-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-container span{
    width: 100%;
    display: flex;
    gap: var(--spacing-6);
    text-transform: uppercase;
    p{
        color: var(--white);
        
    }
}
#serviceSection{
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}
#serviceSection{
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-40);
}
.service-roulette{
    height: clamp(2rem, 6vw, 4rem);
    overflow: hidden;
    margin-bottom: var(--spacing-12);
}
.service-list li{
    height: var(--leading-md);
    width: 100%;
    animation: wordRoulette 8s ease-in-out infinite;
}
@keyframes wordRoulette{
    20%,
    30%{
        translate: 0 -110%;
    }
    40%,
    50%{
        translate: 0 -210%;
    }
    60%,
    70%{
        translate: 0 -310%;
    }
    80%,
    90%{
        translate: 0 -410%;
    }
    100%,
    0%{
        translate: 0 0%;
    }
}
.service-content{
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-16);
}
.service-content figure{
    overflow: hidden;
    min-width: 320px;
    max-width: 480px;
    width: 100%;
    aspect-ratio: 1 / 1.2;
    background-color: var(--neutral-900);
}
.service-content .text-block{
    max-width: 640px;
}
.testimonial-content{
    max-width: 800px;
}
.testimonial-img{
    overflow: hidden;
    width: 48px;
    height: 48px;
    background: var(--neutral-800);
    border-radius: var(--radius-full);
}
.testimonial-info p{
    font-size: 1rem;
}
.testimonial-text{
    font-size: clamp(1.25rem, 6vw, 2rem);
    color: var(--white);
}
.testimonial-name{
    font-weight: 600;
    color: var(--white);
}
.testimonial-role{
    color: var(--neutral-100);
}

.project-header{
    padding-top: var(--spacing-12);
}
/* Responsiveness */
@media screen and (max-width: 920px){
    .work-grid{
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    }
}
@media screen and (max-width: 768px){
    .service-content{
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-8);
    }
    .service-content figure{
        order: 1;
    }
}
@media screen and (max-width: 500px){
    #aboutSection, #serviceSection, #testimonialSection{
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
    }
    .work-grid{
        grid-template-columns: 1fr;
    }
}