:root {
    --mycol: #ff003c;
    --gcol: linear-gradient(to right, red, blue);
}

span {
    color: var(--mycol);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
    font-family: 'Josefin Sans', sans-serif;
    scroll-behavior: smooth;
    text-transform: capitalize;
}

*::-webkit-scrollbar {
    display: none;
}

html,
body {
    height: 100%;
    width: 100%;
    /* background-image: url(back_image); */
    background-color: #141313;
}


nav {
    height: 80px;
    width: 100vw;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0px;
    z-index: 100;
    background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.016));
    backdrop-filter: blur(5px);
    font-weight: 700;
}



.nleft {
    left: 5%;
    position: absolute;
}

.nryt {
    gap: 20px;
    right: 5%;
    position: absolute;
    display: flex;
    align-items: center;
}

a {
    text-decoration: none;
}

.nryt a {
    margin: 0 3px;
    text-decoration: none;
    position: relative;
    cursor: pointer;
}

.nryt a::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 0%;
    background-color: var(--mycol);
    bottom: -5px;
    left: 0%;
    border-radius: 30px;
    transition: all 0.4s ease;
}

.nryt a.active::after {
    width: 90%;
}



.outer {
    width: 100vw;
    padding-top: 80px;
    overflow: hidden;
}

.inner {
    width: 200vw;
    display: flex;
}

.main {
    padding: 30px;
    background-size: cover;
    width: 100vw;

}

.file-name {
    margin-top: 20px;
    width: auto;
    height: auto;
    padding: 20px;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgba(52, 52, 52, 0.301), rgba(153, 153, 153, 0.075));
}

.file-name h4 {
    color: var(--mycol);
}

.downloadBtn {
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 20px;

}

.downloadBtn button {
    opacity: 0;
    border-radius: 6px;
    background: linear-gradient(to bottom, rgba(247, 247, 247, 0.187), rgba(240, 240, 240, 0.105));
    height: 50px;
    width: 300px;
    display: flex;
    align-items: center;
    font-weight: 700;
    gap: 10px;
    padding-left: 50px;
    border: none;
    text-transform: uppercase;
}

.downloadBtn img {
    height: 20px;
}

.abt {
    overflow: hidden;
}

.about {
    width: 100vw;
    background-size: cover;
    backdrop-filter: blur(1px);
    height: 100vh;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
}

.about::-webkit-scrollbar {
    display: none;
}

.about-nav {
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    backdrop-filter: blur(1px);
    position: fixed;
    left: 0%;
    z-index: 200;
    font-size: 14px;
    top: 12%;
    display: none;
}

.about-nav a {
    position: relative;
    margin: 0 7px;
}

.about-nav a::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 0%;
    background-color: var(--mycol);
    bottom: -5px;
    left: 1px;
    border-radius: 30px;
    transition: all 0.4s ease;

}

.about-nav a.active::after {
    width: 90%;
}

.about-dets {
    height: 100vh;
    width: 400vw;
    position: absolute;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: all 0.4s ease;
}

.abt-sec {
    height: 100%;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    z-index: 100;
    gap: 10%;
    padding-top: 130px;
    backdrop-filter: blur(5px);
    overflow: hidden;

}

#sec4 {
    gap: 22px;
    padding-left: 20px;
    padding-right: 20px;
}

#sec4 h1 {
    margin-bottom: 30px;
}

.abt-sec h1 {
    text-align: center;
    transform: translateY(20px);
    font-weight: 700;
}

.abt-sec p {
    text-align: center;
    font-weight: 700;
    text-transform: capitalize;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}



.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.links button {
    width: 350px;
    height: 50px;
    border-radius: 6px;
    border: none;
    background: linear-gradient(to top, rgba(46, 46, 46, 0.365), rgba(46, 46, 46, 0.443));
    font-size: 15px;
    font-weight: 550;
    transition: all 0.4s ease;
    /* opacity: 0; */
}

.links a {
    opacity: 0;
}

button {
    transition: all 1s ease;
    /* opacity: 0; */
    /* animation: linksBtnAn 2s ease 0.3s infinite, strtLoad 4s ease 0.5s forwards; */
    position: relative;
    overflow: hidden;
}

.links button::before,
.downloadBtn button::before {
    opacity: 0;
    left: -10px;
    top: -20px;
    content: "";
    width: 20%;
    height: 200%;
    position: absolute;
    background-color: #ffffff18;
    box-shadow: 2px 2px 30px 30px #ffffff18;
    rotate: 20deg;
    animation: var(--beforestyl);
    filter: contrast(100);
}

.links button:hover {
    scale: 1.05;
}

button:active {
    scale: 0.7;
}

.box {
    margin-bottom: 60px;
}

.box h3 {
    margin-bottom: 15px;
    position: relative;
}

.box a {
    margin-top: 15px;
}

.box p {
    margin-top: 5px;
}

.box h3::after {
    content: "";
    position: absolute;
    height: 1.5px;
    width: 90%;
    background-color: var(--mycol);
    bottom: -3px;
    left: 0%;
    border-radius: 30px;
    transition: all 0.4s ease;
}

/* middle part  */
.mid {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    padding: 10%;
}

.last-text {
    text-align: center;
    padding: 10%;
}

.movie-cont {
    height: fit-content;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.movieSug {
    height: 500px;
    width: 95vw;
    border-radius: 2%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around; 
    background-size: cover;
    background-position: center;
    overflow: hidden;

}

.movieSug::before {
    content: '';
    height: 110%;
    width: 110%;
    position: absolute;
    background: linear-gradient(to right, black 20%, rgba(0, 0, 0, 0.322) 75%, rgba(0, 0, 0, 0));
    top: 0%;
    left: -10px;
}

.movieDets {
    padding: 5%;
    height: 100%;
    width: 45vw;
    display: flex;
    flex-direction: column;
    text-align: start;
    justify-content: center;
    gap: 10px;
    z-index: 100;
}

.movieDets h3:first-child {
    font-size: 32px;
    font-weight: 600;
}

.movieimg {
    width: 45vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.movieimg img {
    max-height: 400px;
    box-shadow: 2px 2px 100px 70px rgba(0, 0, 0, 0.566);
    border-radius: 10px;
}

.movieDets span {
    font-weight: 700;
    font-size: 20px;
}

.movieDets h4:nth-child(2) {
    margin-top: 20px;
    font-size: 23px;
    font-weight: 700;
}

.movieDets h4:nth-child(3) {

    font-size: 15px;
    font-weight: 700;
}

.movieStsBar {
    display: none;
}

.ranMovBtn {
    border-radius: 6px;
    background: linear-gradient(to bottom, rgba(247, 247, 247, 0.187), rgba(240, 240, 240, 0.105));
    height: 50px;
    width: 300px;
    display: flex;
    align-items: center;
    font-weight: 700;
    gap: 10px;
    padding-left: 50px;
    border: none;
}

.copyright {
    margin: 30px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.copyright h5 {
    font-size: 13px;
}

@keyframes linksBtnAn {

    from {
        scale: 1;
    }

    50% {
        scale: 1.02;
    }

    to {
        scale: 1;
    }
}

@keyframes strtLoad {
    from {
        opacity: 0;
        transform: translateX(-200px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }

}

@keyframes button_shine {
    from {
        opacity: .9;
        left: -100px;
    }

    to {
        opacity: 1;
        left: 400px;
    }
}

@media (max-width : 1029px) {

    .movieDets h3:first-child {
        font-size: 25px;
    }
}

@media (max-width : 992px) {
    .movieSug {
        scale: 0.9;
    }

    .movie-cont {
        scale: 0.9;
    }

}

@media (max-width : 800px) {
    .movie-cont {
        scale: 0.9;
    }

    .movieSug {
        height: 400px;
    }

    .movieimg img {
        max-height: 300px;

    }

    .movieDets {
        scale: 0.8;
    }

}

@media (max-width : 637px) {
    .movieSug {
        background-position: right;
        padding: 5%;
        scale: 1;
        width: 90vw;
    }

    .movie-cont {
        width: 90vw;
        padding: 5%;
        scale: 1;
    }

    .movieDets {
        display: none;
    }

    .movieStsBar {
        display: block;
        border-radius: 6%;
    }

    .movieDets-mini {
        position: absolute;
        display: flex;
        flex-direction: column;
        text-align: start;
        width: 80%;
        left: 50px;
        transform: translate(-35px, -120px);

    }

    .movieSug::before {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        background: linear-gradient(to top, black 20%, rgba(0, 0, 0, 0.322) 75%, rgba(0, 0, 0, 0));
        top: 10%;
        left: 0px;
    }

    .movieimg img {
        transform: translate(75px, -40px);

    }
}