/* Video Carousel */
.carousel {
    width: 100%;
}

.carousel h1 {
    color: #FAFAFA;
    text-align: left;
    margin-top: 0px;
    margin-left: 5%;
}

.carousel h2 {
    color: #5e5a5a;
    text-align: left;
    margin-bottom: 2%;
    margin-left: 5%;
}

.carousel-title {
    width: 120%;
    overflow: hidden;
    margin-top: 8%;
}

.carousel-inner {
    display: flex;
    flex-wrap: wrap; /* Allow videos to wrap to the next line */
    transition: transform 0.5s ease-in-out;
    justify-content: center; /* Center align videos horizontally */
    align-items: center; /* Center align videos vertically */
}

.line-break {
    flex-basis: 100%; /* Force the line break to span the entire width */
    height: 0; /* Hide the line break element */
    margin: 20px 0; /* Add some space between rows */
}

.carousel-item {
    flex: 0 0 calc(20% - 20px); /* Adjust the width for 5 videos per row */
    height: 250px; /* Adjust the height based on the aspect ratio */
    font-size: 20px;
    transition: 0.45s all;
    transform-origin: center;
    position: relative;
    border-radius: 5%;
    margin-right:1%;
}

.carousel-item img {
    width: 130%;
    height: 130%;
    object-fit: cover;
    border-radius: 5%;
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out; /* Add filter transition */
}

.carousel-item .tile__details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    font-size: 60px;
    opacity: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    color: #FAFAFA; /* Change text color to white */
    transition: 0.45s opacity;
    border-radius: 5%;
}


/* Apply hover effects */
.carousel-item:hover {
    transform: scale(1.2); /* Increase the scale factor for a bigger zoom effect */
    opacity: 1;
}

.carousel-item:hover ~ .carousel-item {
    transform: translate3d(20px, 0, 0); /* Adjust the translation value */
}

/* Styles for .tile */
.tile {
    position: relative;
    display: inline-block;
    width: 325px;
    margin-left: -5%;
    height: calc(250px / (16/9));
    font-size: 20px;
    transition: 450ms all;
    transform-origin: center left;
  }
  
/* Styles for .tile__img */
.tile__img {
    width: 250px;
    height: calc(250px / (16/9));
    object-fit: cover;
}

/* Styles for .tile__details */
.tile__details {
    position: absolute;
    width: 100%; /* Same as the image width */
    height: 130%; /* Same as the image height */
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    font-size: 36px; /* Increase the font size */
    opacity: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    color: #FAFAFA;
    transition: 0.45s opacity;
    border-radius: 5%;
}
  
  /* Styles for .tile__details :after and :before */
.tile__details:after,
.tile__details:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    
}
  
.tile__details:after {
    margin-top: -25px;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    border: 3px solid #ecf0f1;
    line-height: 50px;
    text-align: center;
    border-radius: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}
  
.tile__details:before {
    content: '▶';
    left: 0;
    width: 100%;
    font-size: 30px;
    margin-left: 7px;
    margin-top: -15px;
    text-align: center;
    z-index: 2;
}
  
  /* Show details on tile hover */
.tile:hover .tile__details {
    opacity: 1;
}
  
  /* Styles for .tile__title */
.tile__title {
    position: absolute;
    bottom: -5%;
    left: -3%;
    padding: 20px;
    color: #FAFAFA;
    font-size: 15px; /* Increase the font size */
    font-family: 'Container', sans-serif;
}
  
/* Hover effects */
.row__inner:hover {
    transform: translate3d(-120px, 0, 0);
}

.row__inner:hover .tile {
    opacity: 0.3;
}

.row__inner:hover .tile:hover {
    transform: scale(1.5);
    opacity: 1;
}

.tile:hover ~ .tile {
    transform: translate3d(240px, 0, 0);
}

/* Films Container */

.film{
    margin-top: 0px;
    margin-left: 5%;
    margin-bottom: 2%;
}

.film h1 {
    color: #FAFAFA;
    text-align: left;

}

.film h2 {
    color: #5e5a5a;
    text-align: left;
}

.gallery-container {
    position: relative;
    overflow: hidden;
    width: 80vw;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
    margin-bottom: 4%;
    margin-left: 10%;
}

.gallery {
    width: 100%;
    height: 100%; /* Occupies full height of container */
    display: flex;
    align-items: center;
    flex-direction: column; /* Stacks images vertically */
    transition: transform 0.3s ease-in-out;
}

.gallery-image {
    flex: 0 0 100%; /* Occupies full width of the gallery */
    height: 0; /* Initially hidden */
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.gallery-image img {
    width: 100%; /* Occupies full width of the image container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 2.5%;
}

.scroll-dot-container {
    position: absolute;
    right: 2vw; /* Adjust using viewport units */
    top: 20vw;
    transform: translate(-50%, -50%); /* Center the overlay accurately */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 8%; /* Adjust using viewport units */
    width: auto; /* Let the width adapt */
    height: auto; /* Let the height adapt */
    z-index: 1; /* Add z-index */
}

.scroll-dot {
    width: 1.3vw; /* Adjust dot size using vw/vh units */
    height: 1.3vw; /* Adjust dot size using vw/vh units */
    background-color: transparent;
    border: 2px solid #888;
    border-radius: 50%;
    margin: 0.5vw 0; /* Adjust margin for smaller dots */
    cursor: pointer;
}

.scroll-dot.active {
    background-color: #888;
    border: none;
}
  

.gallery-image {
    position: relative;
    flex: 0 0 100%; /* Occupies full width of the gallery */
    height: auto; /* Adjusted height to fit content */
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    display: flex;
    align-items: flex-start;
}

.image-overlay {
    position: absolute;
    top: 20vw; /* Vertically center the overlay */
    left: 50%; /* Horizontally center the overlay */
    transform: translate(-50%, -50%); /* Center the overlay accurately */
    width: 80%; /* Adjust the width as needed */
    padding: 10px;
    font-size: 1.5vw; /* Adjust font size using viewport units */
    padding: 1.5vw;
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFF;
    border-radius: 2%;
    padding-left: 20px;
    padding-bottom: 20px;
    z-index: 1; /* Add z-index */
}

.gallery-image h1 {
    font-size: 3vw; /* Adjust the value as needed */
    margin: 0;
}

.gallery-image h3 {
    font-size: 1.3vw; /* Adjust the value as needed */
    margin: 2vw 0; /* Adjust the value as needed */
    margin-right: 4vw; 
    color: #FAFAFA;
}

/* Adjust padding for the watch button using vw units */
.watch-button {
    background-color: #535d56;
    color: #FFF;
    font-size: 1.3vw; /* Adjust the value as needed */
    border: 2px solid #fafafa;
    padding: 2vw 4vw; /* Adjust the values as needed */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.watch-button:hover {
    background-color: #949494;
}

.tag {
    display: inline-block;
    background-color: #d3e3cc;
    color: #394240;
    font-size: 1vw;
    padding: 0.6vw 1.2vw;
    border-radius: 20px;
    margin-right: 1%;
    margin-top: 1%;
    transition: background-color 0.3s, transfexorm 0.3s;
}

.tag:hover {
    background-color: #9bb2a2;
    color: #FAFAFA;
    transform: scale(1.05);
}