:root {
        --bg-color: #050505;
        --bg--charcoal: #111111;
        --text-dark: #050505;
        --text-light: #fff;
        --accent-yellow: #e5b400;
        --font-main: "Inter", sans-serif;
      }

body{
    background-color: var(--bg-color);
    font-family: var(--font-main);
    color: var(--text-light);
    overflow-x: hidden;
    margin: 0;
    color: #fff;
}
/* *{
    border: 2px solid rgb(235, 17, 17);
} */

#hero-section{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("/assets/img/studio/studio1100bg.jpeg");
    background-size: cover;
    background-position: center;
    height: 60vh;
    color: #fff;
}
/* -----------------------------trusted by brands---------------- */
.podcast .slider-wrapper {
  overflow: hidden;
  margin-top: 9px;
  width: 100%;
}


#gallery {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important; 
  animation: scroll 155s linear infinite; /* Adjusted to a comfortable reading speed */
}

.podcast .box2 {
  width: 200px;
  height: 200px;
  background-image: url("../img/PNG.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0 5px; 
}

.podcast .box2 img {
  width: 190px;
  height: 150px;
  border-radius: 15px;
  object-fit: cover;
  object-position: top center;
}


.podcast .slider-wrapper:hover #gallery {
  animation-play-state: paused;
}

@keyframes scroll {
  0% { 
    transform: translateX(0); 
  }
  100% { 
   
    transform: translateX(-50%); 
  }
}
/* ------------portfolio section------------------ */

.bg-overlay {
    background-color:#050505;
    z-index: 1;
    transition: background-color 0.3s ease;
}
.logo-container {
    z-index: 2;
}
.portfolio-text-fallback {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.35s ease;
}


.portfolio-item:hover .bg-overlay {
    background-color: rgba(0, 0, 0, 0.2); 
}
.portfolio-item:hover .portfolio-text-fallback {
    color: #ffffff;
    transform: scale(1.1);
}


.mobile-clone {
    display: none !important;
}


@media (max-width: 767.98px) {

  .bg-overlay {
    background-color: transparent;
   
}
    .mobile-clone {
        display: block !important; 
    }
    
  
    .portfolio-wrapper {
        position: relative;
        height: 400px; 
        overflow: hidden;
        mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    }

    .portfolio-track {
        display: flex !important;
        flex-direction: column !important;
        animation: smoothVerticalScroll 22s linear infinite;
    }


    .portfolio-item-col {
        width: 100% !important;
        padding-bottom: 8px;
    }

   
    @keyframes smoothVerticalScroll {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-50%); /* Moves exactly halfway down for a flawless infinite restart */
        }
    }

    /* Pause sliding animation when a finger holds down/hovers over a card */
    .portfolio-wrapper:hover .portfolio-track {
        animation-play-state: paused;
    }
}

/* -----------trusted by celebs end---------- */

 
footer{
    color: var(--text-light);
}
/* ----------------services section------------------ */
.custom-service-card {
    min-height: 290px;
    border-radius: 4px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-overlay {
    background-color: rgba(0, 0, 0, 0.35);
    transition: background-color 0.35s ease;
    z-index: 1;
}

.arrow-action {
    transform: translateX(0);
    transition: transform 0.3s ease;
    margin-top: 10px;
}


@media (min-width: 768px) {
    .custom-service-card:hover {
        transform: translateY(-6px);
    }
    .custom-service-card:hover .card-overlay {
        background-color: rgba(0, 0, 0, 0.35);
    }
    .custom-service-card:hover .arrow-action {
        transform: translateX(6px);
    }
}


@media (max-width: 767.98px) {
    .cinematic-filmstrip {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; 
    }
    
    .cinematic-filmstrip::-webkit-scrollbar {
        display: none;
    }
    .cinematic-filmstrip {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Sets column boxes to cleanly snap into place */
    .cinematic-filmstrip .col-10 {
        scroll-snap-align: center;
    }
}