:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
    --color-menu: #202629;
    --overlay-z-index: 1000;
    --size-border-radius-max: 9999px;
    --transition-duration-fast: 100ms;
    --transition-duration-slow: 300ms;
    --color-focus-background: rgb(255, 255, 255);
    --color-focus-foreground: rgb(28, 28, 28);
    --color-accent-background: rgb(229, 160, 13);
    --color-accent-foreground: rgb(28, 28, 28);
    --color-background-accent-focus: #f3b125;
    --color-primary-background-10: rgba(255, 255, 255, 0.1);
    --color-primary-background-5: rgba(255, 255, 255, 0.05);
    --color-primary-foreground-100: rgb(255, 255, 255);
    --color-primary-foreground-80: #fffc;
    --color-surface-background-100: rgb(0, 0, 0);
    --color-surface-background-60: rgba(0, 0, 0, 0.6);
    --color-surface-background-30: rgba(0, 0, 0, 0.3);
    --color-surface-background-20: rgba(0, 0, 0, 0.2);
    --color-surface-background-10: rgba(0, 0, 0, 0.1);
    --color-surface-foreground-100: rgb(255, 255, 255);
    --color-surface-foreground-80: rgba(255, 255, 255, 0.8);
    --color-surface-foreground-60: #fff9;
    --color-surface-foreground-50: rgba(255, 255, 255, 0.5);
    --color-surface-foreground-30: rgba(255, 255, 255, 0.3);
    --color-surface-foreground-20: rgba(255, 255, 255, 0.2);
    --color-surface-foreground-10: rgba(255, 255, 255, 0.1);
    --color-surface-foreground-5: rgba(255, 255, 255, 0.05);
    --font-heading-1-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-heading-2-font-size: 1.5rem;
    --font-heading-2-letter-spacing: 0;
    --font-heading-2-text-decoration: none;
    --font-heading-2-font-weight: 700;
    --font-heading-2-font-style: normal;
    --font-heading-2-font-stretch: normal;
    --font-heading-2-font-family: "Circular Bold", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-heading-2-line-height: clamp(1.5rem, 1.333vw + 0.999rem, 2rem);
    --font-heading-2-text-transform: none;
    --font-heading-6-font-size: 1rem;
    --font-heading-6-text-decoration: none;
    --font-heading-6-letter-spacing: 0;
    --font-heading-6-font-weight: 700;
    --font-heading-6-font-style: normal;
    --font-heading-6-font-stretch: normal;
    --font-heading-6-font-family: "Circular Bold", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-heading-6-line-height: 1.5rem;
    --font-heading-6-text-transform: none;
    --font-body-1-font-size: 0.813rem;
    --font-body-1-text-decoration: none;
    --font-body-1-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-body-1-font-weight: 700;
    --font-body-1-font-style: normal;
    --font-body-1-font-stretch: normal;
    --font-body-1-letter-spacing: 0;
    --font-body-1-line-height: 1rem;
    --font-body-1-text-case: uppercase;
    --font-body-2-font-size: 0.875rem;
    --font-body-2-text-decoration: none;
    --font-body-2-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-body-2-font-weight: 400;
    --font-body-2-font-style: normal;
    --font-body-2-font-stretch: normal;
    --font-body-2-letter-spacing: 0;
    --font-body-2-line-height: 1.25rem;
    --font-body-2-text-case: none;
    --font-body-6-font-size: 0.938rem;
    --font-body-6-text-decoration: none;
    --font-body-6-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-body-6-font-weight: 400;
    --font-body-6-font-style: normal;
    --font-body-6-font-stretch: normal;
    --font-body-6-letter-spacing: 0;
    --font-body-6-line-height: 1.5rem;
    --font-body-6-text-case: none;
    --font-label-1-font-size: 0.9375rem;
    --font-label-1-text-decoration: none;
    --font-label-1-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-label-1-font-weight: 700;
    --font-label-1-font-style: normal;
    --font-label-1-font-stretch: normal;
    --font-label-1-letter-spacing: 0;
    --font-label-1-line-height: 1rem;
    --font-label-1-text-case: uppercase;
    --font-label-2-font-size: 0.875rem;
    --font-label-2-text-decoration: none;
    --font-label-2-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-label-2-font-weight: 700;
    --font-label-2-font-style: normal;
    --font-label-2-font-stretch: normal;
    --font-label-2-letter-spacing: 0;
    --font-label-2-line-height: 1rem;
    --font-label-2-text-case: uppercase;
    --size-xxs: 0.25rem;
    --size-xs: 0.5rem;
    --size-s: 0.75rem;
    --size-m: 1rem;
    --size-l: 1.5rem;
    --size-xl: 2rem;
    --size-xxl: 3rem;
    --size-xxxl: 4rem;
    --size-border-radius-s: 0.25rem;
    --size-border-radius-m: 0.5rem;
    --img-placeholder-primary: #eeeeee;
    --img-placeholder-secondary: #cccccc;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    color: white;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    padding-bottom: 1rem;
}

/*======================== Landing Page ========================*/
.landing-1 {
    background-image: url(movie-bckground.png);
    background-size: cover; /* Added property */
    background-position: center;
    padding-top: 0.5rem;
    height: 38rem;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #3F4245;
    background: var(--color-surface-background-60);
    height: 3rem;
    padding-right: 2rem;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.3s ease-in;
}
.header-span {
    color: #fff;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #ffa500;
    margin-left: 1rem;
}

article .search {
    background: var(--color-primary-background-10);
    border: none;
    border-radius: 50px;
    width: 23rem;
    height: 2rem;
    padding-left: 8px;
    color: #fff;
}


/* ================================  I remove nav bar fom PC view wit d use of element of inspect=========================== */
/* .fa-bars:before, .fa-navicon:before {
    content: none;
}
.fa-x:before {
    content: none;
} */


nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    display: inline;
    padding-left: 1rem;
}

nav ul li a {
    text-decoration: none;
    color: white;
}

nav ul li .open-plex {
    background-color: #ff6600;
    border: none;
    width: 5.6rem;
    height: 1.8rem;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
}


/*======================= Landing Body ======================*/
.hero {
    margin-left: 6rem;
    margin-top: 7rem;
    transition: all 0.3s ease-in;
}
.hero h1 {
    font-size: 3rem;
    transition: all 0.3s ease-in;
}
.hero p {
     font-size: 28px;
     transition: all 0.3s ease-in;
}

.watch-free {
    background-color: #ffa500;
    border: none;
    padding: 12px 20px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
}


/*====================== landing 2 ==========================*/
section .landing-2 {
    background-color: #fff;
}
section .description-grid {
    color: black;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 4rem;
    column-gap: 2rem;
    place-items: center;
    padding-left: 2rem;
    padding-right: 1rem;
}
#desc-icon {
    font-size: 4rem;
}
article .icon-desc1 {
    color: rgb(218, 66, 91);
}
article .icon-desc2 {
    color: rgb(72, 120, 215);
}
article .icon-desc3 {
    color: rgb(238, 85, 240);
}
article .icon-desc4 {
    color: rgb(213, 204, 31);
}
.grid-h1 {
    font-size: 1.5rem;
    font-weight: bold;
}

/*====================== landing 3 ==========================*/
.landing-3-body {
    background-color: #7918F2;
    display: grid;
    grid-template-columns: 36rem 1fr;
    padding: 4rem;
    padding-bottom: 2rem;
}
.head-h1 {
    font-size: 2.4rem;
    font-weight: 700;
    color: white;
    transition: all 0.3s ease-in;
}
.head-p {
    font-size: 1.2rem;
    color: white;
    transition: all 0.3s ease-in;
}
.head-button {
    background-color: #E5A00D;
    border: none;
    padding: 12px 20px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease-in;
}
.watch-plex-img {
    width: 100%;
    height: 100%;
}
.watch-plex-img img {
    width: 100%;
    height: 100%;
}


/*====================== landing 4 ==========================*/
.landing-4 {
    background-color: #f9f9f9;
}
.landing-4-body {  
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  /* Assign the image to the 'image' grid area */
  .watch-plex-img-mobile {
    width: 30rem;
    height: 32rem;
  }
  
  /* Existing styles (unchanged) */
  .head-h1-4 {
    font-size: 2.3rem;
    font-weight: 700;
    color: #000;
    transition: all 0.3s ease-in;
  }
  .head-p-4 {
    font-size: 1.2rem;
    color: #4a4646;
    transition: all 0.3s ease-in;
  }
  .watch-plex-img-mobile img {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in;
  }
  

/*====================== landing 5 ==========================*/
.landing-5 {
    background-color: #ffffff;
}
.landing-5-body {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    padding-left: 2rem;
    column-gap: 1rem;
    overflow-x: scroll;
    scrollbar-width: none;
}
.head-text-5 {
    color: #000;
    font-size: 3rem;
    text-align: center;
}
.movie-card {
    width: 10rem;
    height: 22rem;
}
.movie-card img {
    width: 100%;
    height: 16rem;
    border-radius: 15px;
    transition: all 0.3s ease-in; 
}
.movie-card img:hover {
    border: 2px solid #E5A00D;
    cursor: pointer;
}
.movie-title {
    font-size: 1rem;
    font-weight: 200;
    color: #656363;
}
.movie-desc {
    font-size: 0.8rem;
    color: #8d8989;
}
.head-button-5 {
    background-color: #E5A00D;;
    border: none;
    padding: 15px 36px 17px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
}
/*====================== landing 6 ==========================*/
.landing-6 {
    background-color: #ffffff
}
.landing-6-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.landing-6-slide-1 {
    padding: 4rem;
    transition: all 0.3s ease-in;
}
.landing-6-h1 {
    color: #000;
    font-size: 2.6rem;
    transition: all 0.3s ease-in;
}
.landing-6-p {
    color: #686464;
    font-size: 1.2rem;
    transition: all 0.3s ease-in;
}
.device-icons {
    width: 19rem;
    cursor: pointer;
    padding-bottom: 3rem;
    padding-top: 3rem;
}
.john-wick-img {
    width: 45rem;
    height: 25rem;
    cursor: pointer;
    transition: all 0.3s ease-in;
    padding-top: 5rem;
    padding-right: 5rem;
}
.john-wick-img img {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in;
}
.head-button-6 {
    background-color: #E5A00D;;
    border: none;
    padding: 15px 36px 17px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease-in;
}






/* =================== mobile  =================== */
@media screen and (max-width: 1165px) {
    /* body {
        overflow-x: hidden;
    } */
    .logo {
        font-size: 33px;
        font-weight: bold;
        color: #ffa500;
    }
    
    article .search {
        background: var(--color-primary-background-10);
        border: none;
        border-radius: 50px;
        width: 15rem;
        height: 2rem;
        padding-left: 12px;
        color: #fff;
        z-index: 1;
    }
    /* =========================== Header =========================== */


    /* .fa-bars:before, .fa-navicon:before {
        content: "\f0c9";
    } */
    /* .fa-x:before {
        content: "\58";
    } */

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #0f0f0f;
        position: absolute;
        top: 3rem;
        left: 0;
        padding: 0;
        margin: 0;
        z-index: 1;
    }

    nav ul li {
        width: 100%;
        text-align: center;
        padding: 1rem 0;
        display: inline-block;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.5rem 0;
    }

    nav ul li a {
        width: 100%;
        display: block;
        padding: 1rem 0;
        text-decoration: none;
        color: greenyellow;
        text-align: center;
    }
    
    nav ul li a:hover {
        text-decoration: none;
        color: #c4c4c4;
        text-align: center;
        cursor: pointer;
    }
    
    nav ul li .open-plex {
        background-color: #ff6600;
        border: none;
        width: 5.6rem;
        height: 1.8rem;
        color: white;
        font-weight: bold;
        cursor: pointer;
        border-radius: 8px;
    }


    .toggle-menu {
        color: #fff;
        display: inline;
        font-size: 28px;
    }
    .toggle-menu .fa-bars {
        display: inline;
    }
    .toggle-menu .fa-x {
        display: inline;
    }


    /* =========================== landing body start =========================== */
    .hero {
        margin-left: 2rem;
        transition: all 0.3s ease-in;
    }
    .hero h1 {
        font-size: 3rem;
        transition: all 0.3s ease-in;
    }
    .hero p {
         font-size: 29px;
         transition: all 0.3s ease-in;
    }
    
    .watch-free {
        background-color: #ffa500;
        border: none;
        padding: 12px 20px;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 50px;
    }
    

    /* ==================== landing 2 ====================== */
    section .description-grid {
        color: black;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-items: center;
        padding-bottom: 2rem;
    }
    #desc-icon {
        font-size: 3rem;
    }
    article .icon-desc1 {
        color: rgb(218, 66, 91);
    }
    article .icon-desc2 {
        color: rgb(72, 120, 215);
    }
    article .icon-desc3 {
        color: rgb(238, 85, 240);
    }
    article .icon-desc4 {
        color: rgb(213, 204, 31);
    }
    .grid-h1 {
        font-size: 1rem;
        font-weight: 700;
    }
    .textAds {
    font-size: 1rem;
    color:rgb(131, 127, 127)
    }

    /* ==================== landing 3 ====================== */
    .landing-3-body {
        background-color: #7918F2;
        display: grid;
        grid-template-columns: 1fr;
        padding-top: 4rem;
        padding-bottom: 2rem;
        place-items: center;
    }
    .head-h1 {
        font-size: 2rem;
        font-weight: 700;
        color: white;
        transition: all 0.3s ease-in;
    }
    .head-p {
        font-size: 1rem;
        color: white;
        transition: all 0.3s ease-in;
    }
    .head-button {
        background-color: #E5A00D;
        border: none;
        padding: 12px 20px;
        color: white;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 50px;
        transition: all 0.3s ease-in;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }


    /* ==================== landing 4 ====================== */
      
      /* Assign the image to the 'image' grid area */
      .watch-plex-img-mobile {
        width: 28rem;
        height: 30rem;
      }
      
      /* Existing styles (unchanged) */
      .head-h1-4 {
        font-size: 2.1rem;
        font-weight: 700;
        color: #000;
        transition: all 0.3s ease-in;
      }
      .head-p-4 {
        font-size: 1.2rem;
        color: #4a4646;
        transition: all 0.3s ease-in;
      }
      .watch-plex-img-mobile img {
        width: 100%;
        height: 100%;
        transition: all 0.3s ease-in;
      }

    /* ==================== landing 5 ====================== */
    .landing-5-body {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        padding-left: 2rem;
        column-gap: 1rem;
        overflow-x: scroll;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .head-text-5 {
        color: #000;
        font-size: 2rem;
        text-align: center;
    }
    
    .movie-title {
        font-size: 1.3rem;
        font-weight: 500;
        color: #656363;
    }
    .movie-desc {
        font-size: 1rem;
        color: #8d8989;
    }

    /* ==================== landing 6 ====================== */
    .landing-6 {
        background-color: #fff;
    }
    .landing-6-body {
        display: grid;
        grid-template-columns: 1fr;
    }
    .landing-6-slide-1 {
        transition: all 0.3s ease-in;
    }
    .landing-6-h1 {
        color: #000;
        font-size: 1rem;
        transition: all 0.3s ease-in;
    }
    .landing-6-p {
        color: #686464;
        font-size: 1.2rem;
        transition: all 0.3s ease-in;
    }
    .device-icons {
        width: 15rem;
        cursor: pointer;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }
    .john-wick-img {
        width: 30rem;
        height: 20rem;
        padding-top: 3rem;
        padding-right: 3rem;
    }
    .john-wick-img img {
        width: 100%;
        height: 100%;
        transition: all 0.3s ease-in;
    }
}


/* ================================= mobile ===================================== */
@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    /* =========================== Heaer =========================== */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #3F4245;
        background: var(--color-surface-background-60);
        height: 3rem;
        padding-right: 2rem;
        font-size: 0.9rem;
        font-weight: 700;
        transition: all 0.3s ease-in;
    }
    .header-span {
        color: #fff;
    }
    
    .logo {
        font-size: 24px;
        font-weight: bold;
        color: #ffa500;
    }
    
    article .search {
        background: var(--color-primary-background-10);
        border: none;
        border-radius: 50px;
        width: 10rem;
        height: 2rem;
        padding-left: 8px;
        color: #fff;
        z-index: 1;
    }
    
    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #0f0f0f;
        position: absolute;
        top: 3rem;
        left: 0;
        padding: 0;
        margin: 0;
        z-index: 1;
    }

    nav ul li {
        width: 100%;
        text-align: center;
        padding: 1rem 0;
    }

    nav ul li a {
        width: 100%;
        display: block;
        padding: 1rem 0;
    }

    .toggle-menu {
        display: block;
    }

    #closeNav {
        display: none;
    }
    .toggle-menu #openNav {
        display: inline-block;
        cursor: pointer;
    } 

    .toggle-menu #closeNav {
        display: none;
        cursor: pointer;
    } 

    /* =========================== landing body start =========================== */
    .hero {
        margin-left: 2rem;
        transition: all 0.3s ease-in;
    }
    .hero h1 {
        font-size: 2.2rem;
        transition: all 0.3s ease-in;
        z-index: -1;
    }
    .hero p {
         font-size: 24px;
         transition: all 0.3s ease-in;
    }
    
    .watch-free {
        background-color: #ffa500;
        border: none;
        padding: 12px 20px;
        color: white;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 50px;
    }
    

    /* ==================== landing 2 ====================== */
    section .description-grid {
        color: black;
        display: grid;
        grid-template-columns: 1fr;
        padding-bottom: 2rem;
    }
    #desc-icon {
        font-size: 3.5rem;
    }
    article .icon-desc1 {
        color: rgb(218, 66, 91);
    }
    article .icon-desc2 {
        color: rgb(72, 120, 215);
    }
    article .icon-desc3 {
        color: rgb(238, 85, 240);
    }
    article .icon-desc4 {
        color: rgb(213, 204, 31);
    }
    .grid-h1 {
        font-size: 1.4rem;
        font-weight: 700;
    }
    .textAds {
        font-size: 1rem;
        color:rgb(131, 127, 127)
    }

    /* ==================== landing 3 ====================== */
    .landing-3-body {
        background-color: #7918F2;
        display: grid;
        grid-template-columns: 1fr;
        padding-top: 4rem;
        padding-bottom: 2rem;
        place-items: center;
    }
    .head-h1 {
        font-size: 2rem;
        font-weight: 700;
        color: white;
        transition: all 0.3s ease-in;
    }
    .head-p {
        font-size: 1rem;
        color: white;
        transition: all 0.3s ease-in;
    }
    .head-button {
        background-color: #E5A00D;
        border: none;
        padding: 12px 20px;
        color: white;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 50px;
        transition: all 0.3s ease-in;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }


    /* ==================== landing 4 ====================== */
    .landing-4 {
        background-color: #f9f9f9;
    }
    .landing-4-body {  
        display: grid;
        grid-template-columns: 1fr ;
        grid-template-rows: auto auto;
        /* Define grid areas in the order you want */
        grid-template-areas:
          "text"
          "image";
        padding-left: 1rem;
        padding-right: 2rem;
      }
      
      /* Assign the text to the 'text' grid area */
      .textDesc {
        grid-area: text;
      }
      
      /* Assign the image to the 'image' grid area */
      .watch-plex-img-mobile {
        grid-area: image;
        width: 20rem;
        height: 22rem;
      }
      
      /* Existing styles (unchanged) */
      .head-h1-4 {
        font-size: 1.6rem;
        font-weight: 700;
        color: #000;
        transition: all 0.3s ease-in;
      }
      .head-p-4 {
        font-size: 1rem;
        color: #4a4646;
        transition: all 0.3s ease-in;
      }
      .watch-plex-img-mobile img {
        width: 100%;
        height: 100%;
        transition: all 0.3s ease-in;
      }
    

    /* ==================== landing 5 ====================== */
    .landing-5-body {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        padding-left: 2rem;
        column-gap: 1rem;
        overflow-x: scroll;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .head-text-5 {
        color: #000;
        font-size: 2rem;
    }
    
    .movie-title {
        font-size: 1.3rem;
        font-weight: 500;
        color: #656363;
    }
    .movie-desc {
        font-size: 1rem;
        color: #8d8989;
    }
    .movie-card img {
        width: 100%;
        height: 14rem;
        border-radius: 15px;
        transition: all 0.3s ease-in; 
    }
    .movie-card img:hover {
        border: 2px solid #E5A00D;
        cursor: pointer;
    }

    /* ==================== landing 6 ====================== */
    .landing-6 {
        background-color: #fff;
    }
    .landing-6-body {
        display: grid;
        grid-template-columns: 1fr;
    }
    .landing-6-slide-1 {
        transition: all 0.3s ease-in;
    }
    .landing-6-h1 {
        color: #000;
        font-size: 2.6rem;
        transition: all 0.3s ease-in;
    }
    .landing-6-p {
        color: #686464;
        font-size: 1.2rem;
        transition: all 0.3s ease-in;
    }
    .device-icons {
        width: 15rem;
        cursor: pointer;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }
    .john-wick-img {
        width: 20rem;
        height: 15rem;
        padding-top: 2rem;
        padding-right: 2rem;
        padding-left: 2rem;
    }
    .john-wick-img img {
        width: 100%;
        height: 100%;
        transition: all 0.3s ease-in;
    }
}