/* Define CSS styles for jcs studio productions x jcs future*/
                
                body {
                    background-color: black;
                    color: white;
                    font-family: Arial, sans-serif;
                    margin: 0;
                    padding: 0;
                    scroll-behavior: smooth;
                    /* Smooth scrolling behavior */
                }

                #waves-canvas {
                    display: flex;
                    width: 100vw;
                    height: 200px;
                }

                header {
                    justify-content: center;
                    background-size: 500% auto;
                    background-color: #000;
                }
                
                
                .menu {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 0;
                    padding-left: .5vw;
                }
                
                .desktop-logo {
                    text-decoration: none;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    position: relative;
                    font-family: sans-serif;
                    font-size: clamp(3rem, 11vmin, 6vw);
                    background: linear-gradient(to right, #ffc3c3 0%, #FCC8C8 10%, #FFBAFF 25%, #B3B3FF 35%, #BDF7BD 50%, #FFFFBD 65%, #FFECC9 75%, #FCC8C8 85%, #ffc3c3 100%);
                    background-size: 400% auto;
                    background-clip: text;
                    color: transparent;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    animation: shine 22s linear infinite;
                    transition: color 0.3s ease-in-out;
                }
                
                .mobile-logo {
                    text-decoration: none;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    position: relative;
                    font-family: sans-serif;
                    font-size: clamp(3rem, 11vmin, 6vw);
                    background: linear-gradient(to right, #ffc3c3 0%, #FCC8C8 10%, #FFBAFF 25%, #B3B3FF 35%, #BDF7BD 50%, #FFFFBD 65%, #FFECC9 75%, #FCC8C8 85%, #ffc3c3 100%);
                    background-size: 400% auto;
                    background-clip: text;
                    color: transparent;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    animation: shine 22s linear infinite;
                    transition: color 0.3s ease-in-out;
                }
                
                @keyframes shine {
                    to {
                        background-position: 400% center;
                    }
                }
                
                .desktop-logo:hover {
                    margin: 0;
                    padding: 0;
                    color: rgb(255, 193, 193);
                    -webkit-animation: glow 0.8s ease-in-out infinite alternate;
                    -moz-animation: glow 0.8s ease-in-out infinite alternate;
                    animation: glow 0.8s ease-in-out infinite alternate;
                }
                
                .mobile-logo:hover {
                    margin: 0;
                    padding: 0;
                    color: rgb(255, 193, 193);
                    -webkit-animation: glow 0.8s ease-in-out infinite alternate;
                    -moz-animation: glow 0.8s ease-in-out infinite alternate;
                    animation: glow 0.8s ease-in-out infinite alternate;
                }
                
                .desktop-logo {
                    display: block;
                    /* Show the desktop logo */
                }
                
                .mobile-logo {
                    display: none;
                    /* Hide the mobile logo by default */
                }
                
                nav ul {
                    list-style-type: none;
                    font-size: 2.25vw;
                    margin: 0;
                    padding: 0;
                    display: flex;
                }
                
                nav li {
                    margin: 0 1vw;
                }
                
                nav a {
                    text-decoration: none;
                    transition: color 0.3s ease-in-out;
                }

                nav a.reels {
                    color: rgb(255, 220, 220);
                }
                
                nav a.about {
                    color: rgb(220, 255, 220);
                }
                
                nav a.contact {
                    color: rgb(220, 209, 220);
                }
                
                nav a:hover {
                    text-align: center;
                    -webkit-animation: glow 0.8s ease-in-out infinite alternate;
                    -moz-animation: glow 0.8s ease-in-out infinite alternate;
                    animation: glow 0.8s ease-in-out infinite alternate;
                }
                
                @-webkit-keyframes glow {
                    from {
                        text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #ffcfe7, 0 0 12px #ffa2d1, 0 0 15px #ff9ccd, 0 0 18px #ff70b7, 0 0 21px #ff67b3;
                    }
                    to {
                        text-shadow: 0 0 3px #fff, 0 0 6px #ff9dce, 0 0 9px #ff96ca, 0 0 12px #ff86c3, 0 0 15px #ff76bb, 0 0 18px #ff6db6, 0 0 21px #ff68b4;
                    }
                }
                
                @keyframes glow {
                    from {
                        text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 9px #ffcfe7, 0 0 12px #ffa2d1, 0 0 15px #ff9ccd, 0 0 18px #ff70b7, 0 0 21px #ff67b3;
                    }
                    to {
                        text-shadow: 0 0 3px #fff, 0 0 6px #ff9dce, 0 0 9px #ff96ca, 0 0 12px #ff86c3, 0 0 15px #ff76bb, 0 0 18px #ff6db6, 0 0 21px #ff68b4;
                    }
                }
                
                .container {
                    background-color: black;
                    opacity: 0.9;
                    background-size: auto;
                    background-position: center;
                    position: relative;
                    width: auto;
                    height: 100vh;
                    overflow: hidden;
                    display: flex;
                    margin: 0;
                    padding: 0;
                    align-items: center;
                    justify-content: center;
                }
                
                .container h1 {
                    font-size: 22vw;
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    -webkit-text-stroke: 0.9px black;
                }

                /*.bg-video-overlay {
                    background-color: black;
                    opacity: 0.9;
                }*/

                .background-video {
                    position: absolute;
                    align-items: center;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    min-width: 100vw;
                    width: auto;
                    min-height: 100vh;
                    height: auto;
                    overflow: hidden;
                }

                .main-video {
                    position: absolute;
                    align-items: center;
                    top: 50%;
                    left:50%;
                    transform: translate(-50%, -50%);
                    min-width: 100vw;
                    width: auto;
                    min-height: 100vh;
                    height: auto;
                    overflow: hidden;
                }
                
                .video-cont {
                    position: relative;
                }
                
                .container-header {
                    text-align: center;
                    position: relative;
                    z-index: 1;
                    margin: 0;
                    padding: 0;
                }
                
                .section-container {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    overflow: hidden;
                }
                
                .section-content-reels {/*R*/
                    position: relative;
                    z-index: 1;
                    width: 60vw;
                    margin-left: auto;
                    margin-right: auto;
                    padding: 2vw;
                    background-color: rgb(15, 0, 0);
                }

                .reels-video-section {
                    position: relative;
                    width: 100%;
                    height: 0;
                    padding-bottom: 56.25%;
                }
                
                .other-reels {
                    position:absolute;
                    background-color: transparent;
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    padding-bottom: 50px;
                }
                
                .emptybuff {
                    padding-top: 25px;
                    padding-bottom: 25px;
                }

                .section-content-about {/*G*/
                    position: relative;
                    z-index: 1;
                    width: 60vw;
                    margin-left: auto;
                    margin-right: auto;
                    padding: 2vw;
                    background-color: rgb(0, 15, 0);
                }
                
                .section-content-contact {/*B*/
                    position: relative;
                    z-index: 1;
                    width: 60vw;
                    margin-left: auto;
                    margin-right: auto;
                    padding: 2vw;
                    background-color: rgb(0, 0, 15);
                }
                
                /*.section-content-blank {
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    z-index: 1;
                    width: 60vw;
                    height: 20vh;
                    margin-left: auto;
                    margin-right: auto;
                    padding: 2vw;
                    background-color: rgb(0, 0, 15);
                }*/
                
                /*.section-blank-paragraph {
                    font-size: 2vw;
                    color: rgb(0, 0, 15);
                    text-align: justify;
                    text-indent: 1.5em;
                }*/
                
                section h2 {
                    font-size: 3vw;
                    text-align: left;
                }
                
                .section-paragraph {
                    font-size: 1.5vw;
                    text-align: justify;
                    text-indent: 1.5em;
                }
                
                .section-paragraph a {
                    text-decoration: none;
                    color: rgb(163, 163, 255);
                }
                
                .section-paragraph a:hover {
                    color: rgb(163, 255, 204);
                }
                
                footer {
                    background-color: black;
                    text-align: center;
                    padding: 2vh;
                    color: #fff;
                    font-size: 2vw;
                }


                /* Responsive for tablet */
                @media only screen and (max-width: 1360px) {
                    /* Container padding adjustment*/
                    .container {
                        padding: 10px;
                        height: 80vh;
                    }
                    .desktop-logo {
                        display: none;
                        /* Hide the desktop logo on tablet and mobile */
                    }
                    .mobile-logo {
                        display: block;
                        /* Show the mobile logo on tablet and mobile */
                    }
                    nav ul {
                        font-size: 3vw;
                    }
                    section h2 {
                        font-size: 4vw;
                        text-align: left;
                    }
                    .section-paragraph {
                        font-size: 1.85vw;
                    }
                    footer {
                        font-size: 2.5vw;
                    }
                }
                
                /*Responsive 1002 for reels*/
                @media only screen and (max-width: 1002px) {
                    /*.other-reels {
                        width: 600px;
                        height: ;
                    }*/
                }

                /* Responsive for mobile */
                @media only screen and (max-width: 800px) {
                    /* Container padding adjustment */
                    .container {
                        padding: 5px;
                        height: 75vh;
                    }
                    section h2 {
                        font-size: 4vw;
                        text-align: left;
                    }
                    .section-paragraph {
                        font-size: 2.5vw;
                    }
                    footer {
                        font-size: 4vw;
                    }
                }
                
                @media only screen and (max-width: 540px) {
                    .container {
                        height: 50vh;
                    }
                    .mobile-logo {
                         font-size: clamp(2rem, 7vmin, 4vw);
                    }
                    section h2 {
                        font-size: 5vw;
                        text-align: left;
                    }
                    .section-paragraph {
                        font-size: 3vw;
                    }
                }