From 908f8429d5464ca52ca845c9f8cdab76870d5ca3 Mon Sep 17 00:00:00 2001
From: M0RPH3US <MakD@users.noreply.github.com>
Date: Thu, 20 Mar 2025 00:50:03 +0530
Subject: [PATCH] Cleanup CSS

---
 slideshowpure.css | 4604 ++++-----------------------------------------
 1 file changed, 403 insertions(+), 4201 deletions(-)

diff --git a/slideshowpure.css b/slideshowpure.css
index d0ea06a..73bbfa0 100644
--- a/slideshowpure.css
+++ b/slideshowpure.css
@@ -1,6 +1,7 @@
 @import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap);
+
 .bar-loading {
-  z-index: 99999999;
+  z-index: 99999999 !important;
   position: fixed;
   top: 0;
   left: 0;
@@ -12,12 +13,14 @@
   justify-content: center;
   flex-direction: column;
 }
+
 .bar-loading h1 img {
   opacity: 1;
   display: block;
   z-index: 999999999 !important;
   visibility: visible;
 }
+
 .docspinner-loader {
   width: 10px;
   height: 10px;
@@ -29,151 +32,373 @@
   animation: spin 1s linear infinite;
   z-index: 999999999 !important;
 }
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
 
 .backdrop.low-quality {
-  filter: blur(5px);
-  transform: scale(1.05);
-  transition: filter 0.3s ease, transform 0.3s ease;
+  filter: blur(0.5px);
+  transform: scale(1.01);
+  transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
 }
 
 .backdrop.high-quality {
   filter: blur(0);
   transform: scale(1);
+  transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
 }
 
-/*Mobiles S*/
-@media only screen and (max-width: 320px) and (orientation: portrait) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px;
-    cursor: pointer;
-    color: rgb(255 255 255 / 0.6);
-    z-index: 4;
-    -webkit-tap-highlight-color: #fff0;
+.logo.low-quality {
+  filter: brightness(1) blur(0.5px);
+  transition: filter 0.3s ease-in-out;
+}
+
+.logo.high-quality {
+  filter: brightness(1.1) blur(0);
+  transition: filter 0.3s ease-in-out;
+}
+
+.homeSectionsContainer {
+  position: relative;
+  top: 65vh;
+  z-index: 6;
+}
+
+#slides-container {
+  position: relative;
+  width: 100vw;
+  height: 90%;
+  overflow: hidden;
+  margin: 0 auto;
+}
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  cursor: pointer;
+  color: #fff;
+  z-index: 5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.left-arrow {
+  left: 20px;
+  font-size: 12px;
+}
+
+.right-arrow {
+  right: 20px;
+  font-size: 12px;
+}
+
+.dots-container {
+  position: absolute;
+  top: calc(50% + 21vh);
+  right: 3%;
+  z-index: 5;
+  display: flex;
+  gap: 5px;
+  background-color: #ffffff3d;
+  border-radius: 50px;
+  justify-content: center;
+  align-items: center;
+  width: 140px;
+  height: 22px;
+  transition: opacity 0.5s ease-in-out;
+  scale: 0.8;
+}
+
+.dot {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  margin: 0 5px;
+  background-color: #cecece;
+  border-radius: 50%;
+  transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+    height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
+}
+
+.dot.active {
+  width: 22px;
+  height: 12px;
+  background-color: #fff;
+  border-radius: 6px;
+}
+
+.slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.backdrop-container {
+  position: absolute;
+  top: 0%;
+  right: 0%;
+  width: 70%;
+  height: 100%;
+}
+
+.backdrop {
+  right: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 20%;
+  border-radius: 5px;
+  z-index: 3;
+  mask-image: linear-gradient(to top,
+      #fff0 2%,
+      rgb(0 0 0 / 0.5) 6%,
+      #000000 8%);
+  -webkit-mask-image: linear-gradient(to top,
+      #fff0 2%,
+      rgb(0 0 0 / 0.5) 6%,
+      #000000 8%);
+}
+
+.backdrop-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(0 0 0 / 0.6);
+  border-radius: 5px;
+  z-index: 4;
+  mask-image: linear-gradient(to top,
+      #fff0 2%,
+      rgb(0 0 0 / 0.5) 6%,
+      #000000 8%);
+  -webkit-mask-image: linear-gradient(to top,
+      #fff0 2%,
+      rgb(0 0 0 / 0.5) 6%,
+      #000000 8%);
+}
+
+.gradient-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 70%;
+  height: 100%;
+  background: linear-gradient(to right, #000 49%, #fff0 70%);
+  z-index: 4;
+  mask-image: linear-gradient(to top,
+      #fff0 2%,
+      rgb(0 0 0 / 0.5) 6%,
+      #000000 8%);
+  -webkit-mask-image: linear-gradient(to top,
+      #fff0 2%,
+      rgb(0 0 0 / 0.5) 6%,
+      #000000 8%);
+}
+
+.logo-container {
+  width: 65%;
+  height: 40%;
+  position: relative;
+  display: flex;
+  align-items: start;
+  z-index: 5;
+  top: 15vh;
+  left: 4vw;
+}
+
+.logo {
+  max-height: 70%;
+  max-width: 100%;
+  height: auto;
+  width: auto;
+  object-fit: contain;
+  filter: brightness(1.5);
+}
+
+.plot-container {
+  position: absolute;
+  bottom: 20vh;
+  color: #fff;
+  height: 15%;
+  width: 90%;
+  left: 4vw;
+  z-index: 5;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  text-align: justify;
+  box-sizing: border-box;
+}
+
+.plot {
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.genre {
+  position: absolute;
+  top: calc(50% + 50px);
+  left: 4vw;
+  text-align: center;
+  color: #fff;
+  font-family: "Archivo Narrow", sans-serif;
+  z-index: 5;
+}
+
+.button-container {
+  position: absolute;
+  top: calc(50% + 20vh);
+  left: 4vw;
+  display: flex;
+  z-index: 5;
+  justify-content: space-between;
+  gap: 15px;
+}
+
+.play-button,
+.detail-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border: solid 2px rgb(12 109 162 / 0.7);
+  border-radius: 25px;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: 700;
+  gap: 6px;
+  -webkit-tap-highlight-color: #fff0;
+}
+
+.play-button {
+  background-color: #0c6da2;
+  color: #fff;
+}
+
+.detail-button {
+  background-color: rgb(12 109 162 / 0.5);
+  color: #fff;
+}
+
+.play-button:hover,
+.detail-button:hover {
+  opacity: 0.8;
+}
+
+.play-icon,
+.detail-icon {
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+}
+
+.info-container {
+  position: absolute;
+  top: calc(50% + 0px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 4vw;
+  color: #fff;
+  z-index: 5;
+}
+
+.rating-value {
+  font-family: "Archivo Narrow", sans-serif;
+  display: flex;
+  align-items: center;
+  z-index: 5;
+  position: relative;
+}
+
+.runTime {
+  font-family: "Archivo Narrow", sans-serif;
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.rating-value img {
+  margin-right: 5px;
+}
+
+.tomato-rating {
+  display: flex;
+  align-items: center;
+  margin-left: 0;
+}
+
+.tomato-rating img {
+  margin-left: 5px;
+}
+
+.age-rating {
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
+  margin-right: 5px;
+  border-radius: 5px;
+  background: rgb(255 255 255 / 0.8);
+  color: #000;
+  border: none;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 0 0.6em;
+}
+
+.date {
+  font-family: "Archivo Narrow", sans-serif;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.separator-icon {
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 10px;
+  color: aquamarine;
+}
+
+.featured-content {
+  display: none;
+}
+
+/*Portrait-Modes Phone*/
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+
+  .plot-container {
     display: none;
   }
-  .left-arrow {
-    left: 10px;
-  }
-  .right-arrow {
-    right: 10px;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
 
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 71vh;
-  }
-  .dots-container {
+  .backdrop-container {
     position: absolute;
-    bottom: 20%;
-    left: 50%;
-    transform: translateX(-50%) scale(0.6);
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff13;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 27px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 10px;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 800px;
-    overflow: hidden;
-    margin: 0;
-    padding: 0%;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
+    right: 0%;
     width: 100%;
     height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-  .logo {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    max-height: 50%;
-    max-width: 70%;
-    width: auto;
-    z-index: 4;
-    filter: brightness(1.5);
-    transform: translate(-50%, -50%);
-    transition: filter 0.3s ease;
   }
 
-  .logo.low-quality {
-    filter: brightness(1.5) blur(5px);
-  }
-
-  .logo.high-quality {
-    filter: brightness(1.5);
-  }
   .backdrop {
     position: absolute;
     top: 0;
@@ -181,4140 +406,117 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
+    z-index: 3;
+    mask-image: linear-gradient(to top,
+        #fff0 2%,
+        rgb(0 0 0 / 0.5) 6%,
+        #000000 8%);
+    -webkit-mask-image: linear-gradient(to top,
+        #fff0 2%,
+        rgb(0 0 0 / 0.5) 6%,
+        #000000 8%);
   }
+
   .gradient-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgb(0 0 0 / 0.65);
-    z-index: 2;
+    background: rgb(0 0 0 / 0.45);
+    z-index: 4;
     pointer-events: none;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    bottom: 30%;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    color: #fff;
-    width: 90%;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 1.1em;
-    font-weight: 500;
-    z-index: 4;
-    box-sizing: border-box;
-  }
-  .info-container {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    bottom: 25%;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 1.1em;
-    color: #fff;
-    z-index: 5;
-    width: 100%;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-left: 2px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-  }
-  .tomato-logo {
-    margin-right: 3px;
-  }
-  .critic-logo {
-    margin-left: 3px;
-  }
-  .imdb-logo {
-    margin-right: 3px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.4em;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 1px;
-    color: aquamarine;
-  }
-  .featured-content,
-  .plot {
-    display: none;
-  }
-  .button-container {
-    position: absolute;
-    bottom: 13%;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 15px;
-    z-index: 4;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: none;
-    border-radius: 20px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    border: solid 1.5px rgb(12 109 162 / 0.8);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-@media only screen and (max-width: 320px) and (orientation: landscape) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    cursor: pointer;
-    color: #fff;
-    z-index: 3;
-    justify-content: center;
-    align-items: center;
+    mask-image: linear-gradient(to top,
+        #fff0 2%,
+        rgb(0 0 0 / 0.5) 6%,
+        #000000 8%);
+    -webkit-mask-image: linear-gradient(to top,
+        #fff0 2%,
+        rgb(0 0 0 / 0.5) 6%,
+        #000000 8%);
   }
 
-  .left-arrow {
-    left: 20px;
-    font-size: 12px;
-  }
-  .right-arrow {
-    right: 20px;
-    font-size: 12px;
-  }
   .dots-container {
-    position: absolute;
+    left: 50%;
+    transform: translateX(-50%) scale(0.55);
+    background-color: #ffffff13;
+    scale: 1;
+  }
+
+  .genre {
     top: calc(50% + 11em);
-    right: 3%;
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff3d;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-    scale: 0.8;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 22px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 6px;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 190vh;
-    overflow: hidden;
-    margin: 0 auto;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 125vh;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
+    left: 50%;
     width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-  .backdrop-container {
-    position: relative;
-    top: -40%;
-    right: -35%;
-    width: 70%;
-    height: 100%;
-  }
-  .backdrop {
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center 20%;
-    border-radius: 5px;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .backdrop-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 0.6);
-    border-radius: 5px;
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .logo-container {
-    width: 45%;
-    height: 40%;
-    position: relative;
-    display: flex;
-    justify-content: left;
-    align-items: left;
-  }
-  .logo {
-    position: relative;
-    max-height: 70%;
-    max-width: 100%;
-    height: auto;
-    width: auto;
-    object-fit: contain;
-    z-index: 4;
-    top: 8vh;
-    left: 5vw;
-    filter: brightness(1.5);
-  }
-  .featured-content {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 50px;
-    background-color: #fff0;
-    color: #d3d3d3;
-    font-size: 22px;
-    display: none;
-    align-items: center;
-    justify-content: flex-start;
-    z-index: 2;
-  }
-  .plot-container {
-    position: absolute;
-    bottom: 0;
-    color: #fff;
-    width: 90%;
-    height: 60%;
-    font-size: 15px;
-    padding: 10px 0 25px 15px;
-    border-radius: 5px;
-    z-index: 3;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: justify;
-  }
-  .plot {
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    left: 5vw;
-    position: absolute;
-    top: 8.5em;
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 70%;
-    height: 100%;
-    background: linear-gradient(to right, #000 49%, #fff0 70%);
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    top: calc(50% + 35px);
-    left: 5vw;
-    text-align: center;
-    color: #fff;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 14px;
-    z-index: 4;
+    transform: translateX(-50%);
   }
+
   .info-container {
-    position: absolute;
-    top: calc(50% + 0px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: -1em !important;
-    color: #fff;
-    z-index: 4;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    display: flex;
-    align-items: center;
-    z-index: 5;
-    position: relative;
-  }
-  .runTime {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin: 0 8px;
-    margin-right: -3px;
-  }
-  .rating-value img {
-    margin-right: 6px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 0;
-  }
-  .tomato-rating img {
-    margin-left: 5px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.6em;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-    margin-left: 2px;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 10px;
-    color: aquamarine;
-  }
-  .button-container {
-    position: absolute;
-    top: calc(50% + 10em);
-    left: 4.5em;
-    display: flex;
-    z-index: 5;
-    justify-content: space-between;
-    width: 16em;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: solid 2px rgb(12 109 162 / 0.7);
-    border-radius: 25px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-/*Mobiles M*/
-@media only screen and (min-width: 321px) and (max-width: 375px) and (orientation: portrait) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px;
-    cursor: pointer;
-    color: rgb(255 255 255 / 0.6);
-    z-index: 4;
-    -webkit-tap-highlight-color: #fff0;
-    display: none;
-  }
-  .left-arrow {
-    left: 10px;
-  }
-  .right-arrow {
-    right: 10px;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 91vh;
-  }
-  .dots-container {
-    position: absolute;
-    bottom: 20%;
+    top: calc(50% + 8em);
     left: 50%;
-    transform: translateX(-50%) scale(0.6);
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff13;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
+    transform: translateX(-50%);
+    width: 95%;
   }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 27px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 10px;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 120vh;
-    overflow: hidden;
-    margin: 0;
-    padding: 0%;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
+
+  .button-container {
+    top: calc(50% + 25vh);
+    left: 50%;
+    transform: translateX(-50%);
   }
 
   .logo {
     position: absolute;
     top: 50%;
     left: 50%;
-    max-height: 50%;
-    max-width: 70%;
+    max-height: 60%;
+    max-width: 100%;
     width: auto;
-    z-index: 4;
+    z-index: 5;
     filter: brightness(1.5);
     transform: translate(-50%, -50%);
     transition: filter 0.3s ease;
   }
 
-  .logo.low-quality {
-    filter: brightness(1.5) blur(5px);
-  }
-
-  .logo.high-quality {
-    filter: brightness(1.5);
-  }
-  .backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(0 0 0 / 0.65);
-    z-index: 2;
-    pointer-events: none;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    bottom: 30%;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    color: #fff;
-    width: 90%;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 1.1em;
-    font-weight: 500;
-    z-index: 4;
-    box-sizing: border-box;
-  }
-  .info-container {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    bottom: 25%;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 1.1em;
-    color: #fff;
-    z-index: 5;
-    width: 100%;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-left: 2px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-  }
-  .tomato-logo {
-    margin-right: 3px;
-  }
-  .critic-logo {
-    margin-left: 3px;
-  }
-  .imdb-logo {
-    margin-right: 3px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.4em;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 1px;
-    color: aquamarine;
-  }
-  .featured-content,
-  .plot {
-    display: none;
-  }
-  .button-container {
-    position: absolute;
-    bottom: 13%;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 15px;
-    z-index: 4;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: none;
-    border-radius: 20px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    border: solid 1.5px rgb(12 109 162 / 0.8);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width: 321px) and (max-width: 375px) and (orientation: landscape) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    cursor: pointer;
-    color: #fff;
-    z-index: 3;
-    justify-content: center;
-    align-items: center;
-  }
-  .left-arrow {
-    left: 20px;
-    font-size: 12px;
-  }
-  .right-arrow {
-    right: 20px;
-    font-size: 12px;
-  }
-  .dots-container {
-    position: absolute;
-    top: calc(50% + 22vh);
-    right: 3%;
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff3d;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-    scale: 0.6;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 22px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 6px;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 135vh;
-    overflow: hidden;
-    margin: 0 auto;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 75vh;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-  .backdrop-container {
-    position: relative;
-    top: -40%;
-    right: -35%;
-    width: 70%;
-    height: 100%;
-  }
-  .backdrop {
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center 20%;
-    border-radius: 5px;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .backdrop-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 0.6);
-    border-radius: 5px;
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
   .logo-container {
-    width: 45%;
-    height: 40%;
+    width: 75%;
+    height: 25%;
     position: relative;
     display: flex;
-    justify-content: left;
-    align-items: left;
-  }
-  .logo {
-    position: relative;
-    max-height: 50%;
-    max-width: 70%;
-    height: auto;
-    width: auto;
-    object-fit: contain;
-    z-index: 4;
-    top: 25vh;
-    left: 5vw;
-    filter: brightness(1.5);
-  }
-  .featured-content {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 50px;
-    background-color: #fff0;
-    color: #d3d3d3;
-    font-size: 22px;
-    display: none;
-    align-items: center;
-    justify-content: flex-start;
-    z-index: 2;
-  }
-  .plot-container {
-    position: absolute;
-    bottom: 0;
-    color: #fff;
-    width: 90%;
-    height: 60%;
-    font-size: 15px;
-    padding: 10px 0 25px 15px;
-    border-radius: 5px;
-    z-index: 3;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: justify;
-  }
-  .plot {
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    left: 5vw;
-    position: absolute;
-    top: calc(50% + -20vh);
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 70%;
-    height: 100%;
-    background: linear-gradient(to right, #000 49%, #fff0 70%);
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    top: calc(50% + 0vh);
-    left: 5vw;
-    text-align: center;
-    color: #fff;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 14px;
-    z-index: 4;
-  }
-  .info-container {
-    position: absolute;
-    top: calc(50% + -10vh);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: 5vw;
-    color: #fff;
-    z-index: 4;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    display: flex;
-    align-items: center;
+    align-items: start;
     z-index: 5;
-    position: relative;
-  }
-  .runTime {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin: 0 8px;
-    margin-right: -3px;
-  }
-  .rating-value img {
-    margin-right: 6px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 0;
-  }
-  .tomato-rating img {
-    margin-left: 5px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.6em;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-    margin-left: 2px;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 10px;
-    color: aquamarine;
-  }
-  .button-container {
-    position: absolute;
-    top: calc(50% + 20vh);
-    left: 2vw;
-    display: flex;
-    z-index: 5;
-    justify-content: space-between;
-    width: 16em;
-    scale: 0.8;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: solid 2px rgb(12 109 162 / 0.7);
-    border-radius: 25px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-/*Mobiles L*/
-@media only screen and (min-width: 376px) and (max-width: 425px) and (orientation: portrait) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px;
-    cursor: pointer;
-    color: rgb(255 255 255 / 0.6);
-    z-index: 4;
-    -webkit-tap-highlight-color: #fff0;
-    display: none;
-  }
-  .left-arrow {
-    left: 10px;
-  }
-  .right-arrow {
-    right: 10px;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 73vh;
-  }
-  .dots-container {
-    position: absolute;
-    bottom: 20%;
-    left: 50%;
-    transform: translateX(-50%) scale(0.6);
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff13;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 27px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 10px;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 95vh;
-    overflow: hidden;
-    margin: 0;
-    padding: 0%;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-
-  .logo {
-    position: absolute;
     top: 50%;
     left: 50%;
-    max-height: 50%;
-    max-width: 70%;
-    width: auto;
-    z-index: 4;
-    filter: brightness(1.5);
     transform: translate(-50%, -50%);
-    transition: filter 0.3s ease;
-  }
-
-  .logo.low-quality {
-    filter: brightness(1.5) blur(5px);
-  }
-
-  .logo.high-quality {
-    filter: brightness(1.5);
-  }
-  .backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(0 0 0 / 0.65);
-    z-index: 2;
-    pointer-events: none;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    bottom: 30%;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    color: #fff;
-    width: 90%;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 1.1em;
-    font-weight: 500;
-    z-index: 4;
-    box-sizing: border-box;
-  }
-  .info-container {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    bottom: 25%;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 1.1em;
-    color: #fff;
-    z-index: 5;
-    width: 100%;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-left: 2px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-  }
-  .tomato-logo {
-    margin-right: 3px;
-  }
-  .critic-logo {
-    margin-left: 3px;
-  }
-  .imdb-logo {
-    margin-right: 3px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.4em;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 1px;
-    color: aquamarine;
-  }
-  .featured-content,
-  .plot {
-    display: none;
-  }
-  .button-container {
-    position: absolute;
-    bottom: 13%;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 15px;
-    z-index: 4;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: none;
-    border-radius: 20px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    border: solid 1.5px rgb(12 109 162 / 0.8);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
   }
 }
 
-@media only screen and (min-width: 376px) and (max-width: 425px) and (orientation: landscape) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    cursor: pointer;
-    color: #fff;
-    z-index: 3;
-    justify-content: center;
-    align-items: center;
-  }
-  .left-arrow {
-    left: 20px;
-    font-size: 12px;
-  }
-  .right-arrow {
-    right: 20px;
-    font-size: 12px;
-  }
-  .dots-container {
-    position: absolute;
-    top: calc(50% + 11em);
-    right: 3%;
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff3d;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-    scale: 0.8;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 22px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 6px;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
+/*Landscape Mode Phones*/
+@media only screen and (max-height: 767px) and (orientation: landscape) {
   #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 190vh;
-    overflow: hidden;
-    margin: 0 auto;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 125vh;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-  .backdrop-container {
-    position: relative;
-    top: -40%;
-    right: -35%;
-    width: 70%;
-    height: 100%;
-  }
-  .backdrop {
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center 20%;
-    border-radius: 5px;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .backdrop-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 0.6);
-    border-radius: 5px;
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .logo-container {
-    width: 45%;
-    height: 40%;
-    position: relative;
-    display: flex;
-    justify-content: left;
-    align-items: left;
-  }
-  .logo {
-    position: relative;
-    max-height: 70%;
-    max-width: 100%;
-    height: auto;
-    width: auto;
-    object-fit: contain;
-    z-index: 4;
-    top: 8em;
-    left: 5em;
-    filter: brightness(1.5);
-  }
-  .featured-content {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 50px;
-    background-color: #fff0;
-    color: #d3d3d3;
-    font-size: 22px;
-    display: none;
-    align-items: center;
-    justify-content: flex-start;
-    z-index: 2;
-  }
-  .plot-container {
-    position: absolute;
-    bottom: 0;
-    color: #fff;
-    width: 90%;
-    height: 60%;
-    font-size: 15px;
-    padding: 10px 0 25px 15px;
-    border-radius: 5px;
-    z-index: 3;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: justify;
-  }
-  .plot {
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    left: 4.5em;
-    position: absolute;
-    top: 35vh;
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 70%;
-    height: 100%;
-    background: linear-gradient(to right, #000 49%, #fff0 70%);
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    top: calc(50% + 35px);
-    left: 4.8em;
-    text-align: center;
-    color: #fff;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 14px;
-    z-index: 4;
-  }
-  .info-container {
-    position: absolute;
-    top: calc(50% + 0px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: -1em !important;
-    color: #fff;
-    z-index: 4;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    display: flex;
-    align-items: center;
-    z-index: 5;
-    position: relative;
-  }
-  .runTime {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin: 0 8px;
-    margin-right: -3px;
-  }
-  .rating-value img {
-    margin-right: 6px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 0;
-  }
-  .tomato-rating img {
-    margin-left: 5px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.6em;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-    margin-left: 2px;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 10px;
-    color: aquamarine;
-  }
-  .button-container {
-    position: absolute;
-    top: calc(50% + 10em);
-    left: 4.5em;
-    display: flex;
-    z-index: 5;
-    justify-content: space-between;
-    width: 16em;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: solid 2px rgb(12 109 162 / 0.7);
-    border-radius: 25px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-/*Mobiles UL*/
-@media only screen and (min-width: 426px) and (max-width: 768px) and (orientation: portrait) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px;
-    cursor: pointer;
-    color: rgb(255 255 255 / 0.6);
-    z-index: 4;
-    -webkit-tap-highlight-color: #fff0;
-    display: none;
-  }
-  .left-arrow {
-    left: 10px;
-  }
-  .right-arrow {
-    right: 10px;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 73vh;
-  }
-  .dots-container {
-    position: absolute;
-    bottom: 24%;
-    left: 50%;
-    transform: translateX(-50%) scale(0.6);
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff13;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 27px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 10px;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    margin: 0;
-    padding: 0%;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
+    height: 115%;
   }
 
-  .logo {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    max-height: 50%;
-    max-width: 70%;
-    width: auto;
-    z-index: 4;
-    filter: brightness(1.5);
-    transform: translate(-50%, -50%);
-    transition: filter 0.3s ease;
-  }
-
-  .logo.low-quality {
-    filter: brightness(1.5) blur(5px);
-  }
-
-  .logo.high-quality {
-    filter: brightness(1.5);
-  }
-  .backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(0 0 0 / 0.65);
-    z-index: 2;
-    pointer-events: none;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    bottom: 33%;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    color: #fff;
-    width: 90%;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 1.1em;
-    font-weight: 500;
-    z-index: 4;
-    box-sizing: border-box;
-  }
-  .info-container {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    bottom: 28%;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 1.1em;
-    color: #fff;
-    z-index: 5;
-    width: 100%;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-left: 2px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-  }
-  .tomato-logo {
-    margin-right: 3px;
-  }
-  .critic-logo {
-    margin-left: 3px;
-  }
-  .imdb-logo {
-    margin-right: 3px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.4em;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 1px;
-    color: aquamarine;
-  }
-  .featured-content,
-  .plot {
-    display: none;
-  }
-  .button-container {
-    position: absolute;
-    bottom: 18vh;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 15px;
-    z-index: 4;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: none;
-    border-radius: 20px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    border: solid 1.5px rgb(12 109 162 / 0.8);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width: 426px) and (max-width: 768px) and (orientation: landscape) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    cursor: pointer;
-    color: #fff;
-    z-index: 3;
-    justify-content: center;
-    align-items: center;
-  }
-  .left-arrow {
-    left: 20px;
-    font-size: 12px;
-  }
-  .right-arrow {
-    right: 20px;
-    font-size: 12px;
-  }
-  .dots-container {
-    position: absolute;
-    top: calc(50% + 34vh);
-    right: 3%;
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff3d;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-    scale: 0.6;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 22px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 6px;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 145vh;
-    overflow: hidden;
-    margin: 0 auto;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 90vh;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-  .backdrop-container {
-    position: relative;
-    top: -40%;
-    right: -35%;
-    width: 70%;
-    height: 100%;
-  }
-  .backdrop {
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center 20%;
-    border-radius: 5px;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .backdrop-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 0.6);
-    border-radius: 5px;
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .logo-container {
-    width: 45%;
-    height: 40%;
-    position: relative;
-    display: flex;
-    justify-content: left;
-    align-items: left;
-  }
-  .logo {
-    position: relative;
-    max-height: 70%;
-    max-width: 100%;
-    height: auto;
-    width: auto;
-    object-fit: contain;
-    z-index: 4;
-    top: 8em;
-    left: 4vw;
-    filter: brightness(1.5);
-  }
-  .featured-content {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 50px;
-    background-color: #fff0;
-    color: #d3d3d3;
-    font-size: 22px;
-    display: none;
-    align-items: center;
-    justify-content: flex-start;
-    z-index: 2;
-  }
-  .plot-container {
-    position: absolute;
-    bottom: 0;
-    color: #fff;
-    width: 90%;
-    height: 60%;
-    font-size: 15px;
-    padding: 10px 0 25px 15px;
-    border-radius: 5px;
-    z-index: 3;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: justify;
-  }
-  .plot {
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    left: 4vw;
-    position: absolute;
-    top: 33vh;
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 70%;
-    height: 100%;
-    background: linear-gradient(to right, #000 49%, #fff0 70%);
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    top: calc(50% + 10vh);
-    left: 4vw;
-    text-align: center;
-    color: #fff;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 14px;
-    z-index: 4;
-  }
-  .info-container {
-    position: absolute;
-    top: calc(50% + 0px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: 4vw;
-    color: #fff;
-    z-index: 4;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    display: flex;
-    align-items: center;
-    z-index: 5;
-    position: relative;
-  }
-  .runTime {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin: 0 8px;
-    margin-right: -3px;
-  }
-  .rating-value img {
-    margin-right: 6px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 0;
-  }
-  .tomato-rating img {
-    margin-left: 5px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.6em;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-    margin-left: 2px;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 10px;
-    color: aquamarine;
-  }
-  .button-container {
-    position: absolute;
-    top: calc(50% + 32vh);
-    left: 0.5vw;
-    display: flex;
-    z-index: 5;
-    justify-content: space-between;
-    width: 16em;
-    scale: 0.8;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: solid 2px rgb(12 109 162 / 0.7);
-    border-radius: 25px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px;
-    cursor: pointer;
-    color: rgb(255 255 255 / 0.6);
-    z-index: 4;
-    -webkit-tap-highlight-color: #fff0;
-    display: none;
-  }
-  .left-arrow {
-    left: 10px;
-  }
-  .right-arrow {
-    right: 10px;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 73vh;
-  }
-
-  .dots-container {
-    position: absolute;
-    bottom: 20%;
-    left: 50%;
-    transform: translateX(-50%) scale(0.6);
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff13;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-  }
-
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-
-  .dot.active {
-    width: 27px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 10px;
-  }
-
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 95vh;
-    overflow: hidden;
-    margin: 0;
-    padding: 0%;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-
-  .logo {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    max-height: 50%;
-    max-width: 70%;
-    width: auto;
-    z-index: 4;
-    filter: brightness(1.5);
-    transform: translate(-50%, -50%);
-    transition: filter 0.3s ease;
-  }
-
-  .logo.low-quality {
-    filter: brightness(1.5) blur(5px);
-  }
-
-  .logo.high-quality {
-    filter: brightness(1.5);
-  }
-  .backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(0 0 0 / 0.65);
-    z-index: 2;
-    pointer-events: none;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    bottom: 30%;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    color: #fff;
-    width: 90%;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 1.1em;
-    font-weight: 500;
-    z-index: 4;
-    box-sizing: border-box;
-  }
-  .info-container {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    bottom: 25%;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 1.1em;
-    color: #fff;
-    z-index: 5;
-    width: 100%;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-left: 2px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-  }
-  .tomato-logo {
-    margin-right: 3px;
-  }
-  .critic-logo {
-    margin-left: 3px;
-  }
-  .imdb-logo {
-    margin-right: 3px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.4em;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 1px;
-    color: aquamarine;
-  }
-  .featured-content,
-  .plot {
-    display: none;
-  }
-  .button-container {
-    position: absolute;
-    bottom: 13%;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 15px;
-    z-index: 4;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: none;
-    border-radius: 20px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    border: solid 1.5px rgb(12 109 162 / 0.8);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    cursor: pointer;
-    color: #fff;
-    z-index: 3;
-    justify-content: center;
-    align-items: center;
-  }
-  .left-arrow {
-    left: 20px;
-    font-size: 12px;
-  }
-  .right-arrow {
-    right: 20px;
-    font-size: 12px;
-  }
-  .dots-container {
-    position: absolute;
-    top: calc(50% + 9em);
-    right: 3%;
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff3d;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-    scale: 0.6;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 22px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 6px;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 135vh;
-    overflow: hidden;
-    margin: 0 auto;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 83vh;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-  .backdrop-container {
-    position: relative;
-    top: -40%;
-    right: -35%;
-    width: 70%;
-    height: 100%;
-  }
-  .backdrop {
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center 20%;
-    border-radius: 5px;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .backdrop-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 0.6);
-    border-radius: 5px;
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .logo-container {
-    width: 45%;
-    height: 40%;
-    position: relative;
-    display: flex;
-    justify-content: left;
-    align-items: left;
-  }
-  .logo {
-    position: relative;
-    max-height: 70%;
-    max-width: 100%;
-    height: auto;
-    width: auto;
-    object-fit: contain;
-    z-index: 4;
-    top: 20vh;
-    left: 5vw;
-    filter: brightness(1.5);
-  }
-  .featured-content {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 50px;
-    background-color: #fff0;
-    color: #d3d3d3;
-    font-size: 22px;
-    display: none;
-    align-items: center;
-    justify-content: flex-start;
-    z-index: 2;
-  }
-  .plot-container {
-    position: absolute;
-    bottom: 0;
-    color: #fff;
-    width: 90%;
-    height: 60%;
-    font-size: 15px;
-    padding: 10px 0 25px 15px;
-    border-radius: 5px;
-    z-index: 3;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: justify;
-  }
-  .plot {
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    left: 5vw;
-    position: absolute;
-    top: 25vh;
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 70%;
-    height: 100%;
-    background: linear-gradient(to right, #000 49%, #fff0 70%);
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    top: calc(50% + 3.5vh);
-    left: 5vw;
-    text-align: center;
-    color: #fff;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 14px;
-    z-index: 4;
-  }
-  .info-container {
-    position: absolute;
-    top: calc(50% + -6vh);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: 5vw !important;
-    color: #fff;
-    z-index: 4;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    display: flex;
-    align-items: center;
-    z-index: 5;
-    position: relative;
-  }
-  .runTime {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin: 0 8px;
-    margin-right: -3px;
-  }
-  .rating-value img {
-    margin-right: 6px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 0;
-  }
-  .tomato-rating img {
-    margin-left: 5px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.6em;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-    margin-left: 2px;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 10px;
-    color: aquamarine;
-  }
-  .button-container {
-    position: absolute;
-    top: calc(50% + 7.5em);
-    left: 5vw;
-    display: flex;
-    z-index: 5;
-    justify-content: space-between;
-    width: 15em;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: solid 2px rgb(12 109 162 / 0.7);
-    border-radius: 25px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width: 1025px) and (max-width: 1440px) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    cursor: pointer;
-    color: #fff;
-    z-index: 3;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .left-arrow {
-    left: 20px;
-    font-size: 12px;
-  }
-  .right-arrow {
-    right: 20px;
-    font-size: 12px;
-  }
-  .dots-container {
-    position: absolute;
-    top: calc(50% + 21vh);
-    right: 3%;
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff3d;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-    scale: 0.8;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 22px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 6px;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 95vh;
-    overflow: hidden;
-    margin: 0 auto;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
+  .homeSectionsContainer {
     top: 65vh;
   }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-  .backdrop-container {
-    position: relative;
-    top: -40%;
-    right: -35%;
-    width: 70%;
-    height: 100%;
-  }
-  .backdrop {
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center 20%;
-    border-radius: 5px;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .backdrop-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 0.6);
-    border-radius: 5px;
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .logo-container {
-    width: 45%;
-    height: 40%;
-    position: relative;
-    display: flex;
-    justify-content: left;
-    align-items: left;
-  }
-  .logo {
-    position: relative;
-    max-height: 70%;
-    max-width: 100%;
-    height: auto;
-    width: auto;
-    object-fit: contain;
-    z-index: 4;
-    top: 10em;
-    left: 6vw;
-    filter: brightness(1.5);
-  }
-  .featured-content {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 50px;
-    background-color: #fff0;
-    color: #d3d3d3;
-    font-size: 22px;
-    display: none;
-    align-items: center;
-    justify-content: flex-start;
-    z-index: 2;
-  }
-  .plot-container {
-    position: absolute;
-    bottom: 0;
-    color: #fff;
-    width: 90%;
-    height: 60%;
-    font-size: 15px;
-    padding: 10px 0 25px 15px;
-    border-radius: 5px;
-    z-index: 3;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: justify;
-  }
-  .plot {
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    left: 6vw;
-    position: absolute;
-    top: 20vh;
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 70%;
-    height: 100%;
-    background: linear-gradient(to right, #000 49%, #fff0 70%);
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    top: calc(50% + 50px);
-    left: 6vw;
-    text-align: center;
-    color: #fff;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 14px;
-    z-index: 4;
-  }
-  .info-container {
-    position: absolute;
-    top: calc(50% + 0px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: 6vw !important;
-    color: #fff;
-    z-index: 4;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    display: flex;
-    align-items: center;
-    z-index: 5;
-    position: relative;
-  }
-  .runTime {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin: 0 8px;
-    margin-right: -3px;
-  }
-  .rating-value img {
-    margin-right: 6px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 0;
-  }
-  .tomato-rating img {
-    margin-left: 5px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.6em;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-    margin-left: 2px;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 10px;
-    color: aquamarine;
-  }
+
   .button-container {
-    position: absolute;
-    top: calc(50% + 20vh);
-    left: 5vw;
-    display: flex;
-    z-index: 5;
-    justify-content: space-between;
-    width: 15em;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: solid 2px rgb(12 109 162 / 0.7);
-    border-radius: 25px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-@media only screen and (min-width: 1441px) and (max-width: 2560px) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    cursor: pointer;
-    color: #fff;
-    z-index: 3;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .left-arrow {
-    left: 20px;
-    font-size: 12px;
-  }
-  .right-arrow {
-    right: 20px;
-    font-size: 12px;
+    left: 3vw;
+    scale: 0.95;
   }
 
   .dots-container {
-    position: absolute;
-    top: calc(50% + 20vh);
-    right: 3%;
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff3d;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-    scale: 0.8;
+    scale: 0.6;
   }
 
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-
-  .dot.active {
-    width: 22px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 6px;
-  }
-
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 98vh;
-    overflow: hidden;
-    margin: 0 auto;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 65vh;
-  }
-  .slide {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  .backdrop-container {
-    position: relative;
-    top: -40%;
-    right: -35%;
-    width: 70%;
-    height: 100%;
-  }
-  .backdrop {
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center 20%;
-    border-radius: 5px;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .backdrop-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 0.6);
-    border-radius: 5px;
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .logo-container {
-    width: 45%;
-    height: 40%;
-    position: relative;
-    display: flex;
-    justify-content: left;
-    align-items: left;
-  }
-  .logo {
-    position: relative;
-    max-height: 70%;
-    max-width: 100%;
-    height: auto;
-    width: auto;
-    object-fit: contain;
-    z-index: 4;
-    top: 15vh;
-    left: 5vw;
-    filter: brightness(1.5);
-  }
-  .featured-content {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 50px;
-    background-color: #fff0;
-    color: #d3d3d3;
-    font-size: 22px;
-    display: none;
-    align-items: center;
-    justify-content: flex-start;
-    z-index: 2;
-  }
-  .plot-container {
-    position: absolute;
-    bottom: 0;
-    color: #fff;
-    width: 90%;
-    height: 60%;
-    font-size: 15px;
-    padding: 10px 0 25px 15px;
-    border-radius: 5px;
-    z-index: 3;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: justify;
-  }
-  .plot {
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    left: 5vw;
-    position: absolute;
-    top: 20vh;
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 70%;
-    height: 100%;
-    background: linear-gradient(to right, #000 49%, #fff0 70%);
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .genre {
-    position: absolute;
-    top: calc(50% + 4.5vh);
-    left: 5vw;
-    text-align: center;
-    color: #fff;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: 14px;
-    z-index: 4;
-  }
   .info-container {
-    position: absolute;
-    top: calc(50% + -2vh);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: 5vw !important;
-    color: #fff;
-    z-index: 4;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    display: flex;
-    align-items: center;
-    z-index: 5;
-    position: relative;
-  }
-  .runTime {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin: 0 8px;
-    margin-right: -3px;
-  }
-  .rating-value img {
-    margin-right: 6px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 0;
-  }
-  .tomato-rating img {
-    margin-left: 5px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.6em;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-    margin-left: 2px;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 10px;
-    color: aquamarine;
-  }
-  .button-container {
-    position: absolute;
-    top: calc(50% + 19vh);
-    left: 5vw;
-    display: flex;
-    z-index: 5;
-    justify-content: space-between;
-    width: 14em;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: solid 2px rgb(12 109 162 / 0.7);
-    border-radius: 25px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
-}
-@media only screen and (min-width: 2561px) {
-  .backdrop,
-  .slide {
-    position: absolute;
-  }
-  .featured-content,
-  .plot-container {
-    font-family: "Archivo Narrow", sans-serif;
-    left: 0;
-  }
-  .plot,
-  body {
-    overflow: hidden;
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    cursor: pointer;
-    color: #fff;
-    z-index: 3;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    top: calc(50% + -35px);
   }
 
-  .left-arrow {
-    left: 20px;
-    font-size: 12px;
-  }
-  .right-arrow {
-    right: 20px;
-    font-size: 12px;
-  }
-  .dots-container {
-    position: absolute;
-    top: calc(50% + 21vh);
-    right: 3%;
-    z-index: 3;
-    display: flex;
-    gap: 5px;
-    background-color: #ffffff3d;
-    border-radius: 50px;
-    justify-content: center;
-    align-items: center;
-    width: 140px;
-    height: 22px;
-    transition: opacity 0.5s ease-in-out;
-    scale: 0.8;
-  }
-  .dot {
-    display: inline-block;
-    width: 9px;
-    height: 9px;
-    margin: 0 5px;
-    background-color: #cecece;
-    border-radius: 50%;
-    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
-      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
-  }
-  .dot.active {
-    width: 22px;
-    height: 12px;
-    background-color: #fff;
-    border-radius: 6px;
-  }
-  body {
-    margin: 0;
-    padding: 0;
-  }
-  .fade-in {
-    opacity: 1 !important;
-  }
-  .fade-out {
-    opacity: 0 !important;
-  }
-  #slides-container {
-    position: relative;
-    width: 100vw;
-    height: 95vh;
-    overflow: hidden;
-    margin: 0 auto;
-  }
-  .sections.homeSectionsContainer {
-    position: relative;
-    z-index: 8;
-    top: 65vh;
-  }
-  .slide {
-    transition: opacity 0.5s ease-in-out;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
-  .backdrop-container {
-    position: relative;
-    top: -40%;
-    right: -35%;
-    width: 70%;
-    height: 100%;
-  }
-  .backdrop {
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center 20%;
-    border-radius: 5px;
-    z-index: 1;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .backdrop-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0 0 0 / 0.6);
-    border-radius: 5px;
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-  }
-  .logo-container {
-    width: 45%;
-    height: 40%;
-    position: relative;
-    display: flex;
-    justify-content: left;
-    align-items: left;
-  }
-  .logo {
-    position: relative;
-    max-height: 70%;
-    max-width: 100%;
-    height: auto;
-    width: auto;
-    object-fit: contain;
-    z-index: 4;
-    top: 10em;
-    left: 5vw;
-    filter: brightness(1.5);
-  }
-  .featured-content {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 50px;
-    background-color: #fff0;
-    color: #d3d3d3;
-    font-size: 22px;
-    display: none;
-    align-items: center;
-    justify-content: flex-start;
-    z-index: 2;
-  }
   .plot-container {
-    position: absolute;
-    bottom: 0;
-    color: #fff;
-    width: 90%;
-    height: 60%;
-    font-size: 15px;
-    padding: 10px 0 25px 15px;
-    border-radius: 5px;
-    z-index: 3;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: justify;
-  }
-  .plot {
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    font-size: x-large;
-    -webkit-box-orient: vertical;
-    left: 5vw;
-    position: absolute;
-    top: 20vh;
-  }
-  .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 70%;
-    height: 100%;
-    background: linear-gradient(to right, #000 49%, #fff0 70%);
-    z-index: 2;
-    mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
-    -webkit-mask-image: linear-gradient(
-      to top,
-      #fff0 2%,
-      rgb(0 0 0 / 0.5) 6%,
-      #000000 8%
-    );
+    bottom: 30vh;
   }
+
   .genre {
-    position: absolute;
-    top: calc(50% + 5vh);
-    left: 5vw;
-    text-align: center;
-    color: #fff;
-    font-family: "Archivo Narrow", sans-serif;
-    font-size: x-large;
-    z-index: 4;
-  }
-  .info-container {
-    position: absolute;
-    top: calc(50% + 0vh);
-    font-size: x-large;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: 5vw !important;
-    color: #fff;
-    z-index: 4;
-  }
-  .rating-value {
-    font-family: "Archivo Narrow", sans-serif;
-    display: flex;
-    align-items: center;
-    z-index: 5;
-    position: relative;
-  }
-  .runTime {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin: 0 8px;
-    margin-right: -3px;
-  }
-  .rating-value img {
-    margin-right: 6px;
-  }
-  .tomato-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 0;
-  }
-  .tomato-rating img {
-    margin-left: 5px;
-  }
-  .age-rating {
-    display: flex;
-    align-items: center;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 5px;
-    background: rgb(255 255 255 / 0.8);
-    color: #000;
-    border: none;
-    font-weight: 600;
-    white-space: nowrap;
-    padding: 0 0.6em;
-  }
-  .date {
-    font-family: "Archivo Narrow", sans-serif;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-    margin-left: 2px;
-  }
-  .separator-icon {
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 10px;
-    color: aquamarine;
-  }
-  .button-container {
-    position: absolute;
-    top: calc(50% + 20vh);
-    left: 12vh;
-    display: flex;
-    z-index: 5;
-    justify-content: space-between;
-    width: 15em;
-    scale: 1.3;
-  }
-  .play-button,
-  .detail-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    border: solid 2px rgb(12 109 162 / 0.7);
-    border-radius: 25px;
-    font-size: 14px;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 700;
-    gap: 6px;
-    -webkit-tap-highlight-color: #fff0;
-  }
-  .play-button {
-    background-color: #0c6da2;
-    color: #fff;
-  }
-  .detail-button {
-    background-color: rgb(12 109 162 / 0.5);
-    color: #fff;
-  }
-  .play-button:hover,
-  .detail-button:hover {
-    opacity: 0.8;
-  }
-  .play-icon,
-  .detail-icon {
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-  }
+    top: calc(50% + 5px);
+}
 }