/* icons-bootstrap */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
/* fonts */


@import url('https://fonts.googleapis.com/css2?family=Inter&family=Roboto+Mono:wght@500&family=Syne&display=swap');


/* font-family: 'Inter', sans-serif;
font-family: 'Roboto Mono', monospace;
font-family: 'Syne', sans-serif; */

/* ------------------------------------- */

/* class for text decoration - start -  */

/* animations */

/* .open-animation {
    animation: mobileMenuOpen 4s ease-in-out;
} */

@keyframes mobileMenuOpening {
    from {
        transform: translateY(-10%);
        opacity: 0.5;


    }

    to {
        transform: translateY(0);
        opacity: 1;

    }

}
@keyframes mobileMenuClosing {
    from {
        transform: translateY(0);
        opacity: 1;


    }

    to {
        transform: translateY(-30%);
        opacity: 0;


    }

}


/* animations-end */


.syne-96 {
    font-family: 'Syne', sans-serif;
    font-size: 6rem;
    line-height: 6rem;
    margin-left: -5px;
}

.syne-80 {
    font-family: 'Syne', sans-serif;
    font-family: Syne;
    font-size: 5rem;
    font-weight: 400;
    line-height: 5.5rem;
    /* 110% */
    text-transform: capitalize;
}

.syne-64 {
    font-family: 'Syne', sans-serif;
    font-size: 4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 4.8rem;
    /* 120% */
    text-transform: capitalize;
}

.syne-32 {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.4rem;
    /* 120% */
    text-transform: capitalize;
}

.syne-24 {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.95rem;
    /* 130% */
}


.inter-32 {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.625rem;
    /* 131.25% */
}


.inter-25 {
    font-family: 'Inter', sans-serif;
    font-size: 1.5625rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.625rem;
    /* 168% */

}


.inter-16 {
    font-family: 'Inter', sans-serif;
    font-size: 1.02831rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.9125rem;
    /* 185.983% */

}

.mono-15 {
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem;
    /* 140% */
    letter-spacing: 0.0625rem;
    text-transform: uppercase;


}

.logo-text{
    font-family: 'Glass Antiqua', cursive;
    font-size: 3rem;
    color: var(--black);
}

/* class for fonts - end -  */

/* --------------------------------- */

/* colors */
:root {
    --black: #191919;
    --white: #FDFBF5;
    /* --black: #FDFBF5;
    --white: #191919; */
    --black-overlay: rgba(25, 25, 25, 0.80);
    --white-overlay: rgba(253, 251, 245, 0.80);

}





/* colors end */

/* --------------------------------- */

/* local reset start */
* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

li {
    list-style: none;
    color: inherit;
}

/* local reset end */

/* --------------------------------- */

/* general query start */
body {
    background-color: var(--white);
}

#root {
    min-height: 100vh;
    border: 1px solid var(--black);
    margin: 2vw;
    color: var(--black);

}

/* general query end */

/* --------------------------------- */

/* layouts start */

/* divided-container-start */
.divided {
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    margin: 40px 1vw 0px 1vw;
    display: flex;
    gap: 1.4vw;
    padding: 40px 8vw 40px 8vw;
}

.divided>.half-side {
    min-height: 30vh;
    flex: 1 1 0;
}

/* divided-container-end */
/* -- */
/* wide-narrow-container-start */
.wide-narrow {
    margin: 40px 1vw 0px 1vw;
    display: flex;
    gap: 1.4vw;
    padding: 40px 8vw 40px 8vw;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
}

.wide-narrow> :first-child {
    border-right: 1px solid var(--black);
}

.wide-narrow>div {
    min-height: 30vh;
}

.wide-narrow>.small-side {
    flex: 1 1 0;
}

.wide-narrow>.large-side {
    flex: 2 1 0;
}

/* wide-narrow-container-end */
/* -- */
/* inner-column-start */
.inner-column {
    display: flex;

}

.inner-column>div {
    flex: 1 1 0;
}

/* inner-column-end */

/* heading-inner-column-start */
.section-heading > .heading-inner-column{
    display: flex;
}
.section-heading > .heading-inner-column > .big{
    flex: 3 1 0;
  
}
.section-heading > .heading-inner-column > .tiny{
    flex: 1 1 0;
   
}



/* -- */
/* film-card-start */
.film-card {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 0 12px 20px 12px;

}

.film-card .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--black);
    padding-bottom: 12px;
}

.film-card img {
    width: 100%;
}

/* film-card-end */

/* layouts end */

/* --------------------------------- */

/* buttons */

/* border-button-start */
.border-button {
    background-color: var(--white);
    border: 1px solid var(--black);
    color: var(--black);
    padding: 12px 24px;
    border-radius: 6px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem;
    /* 140% */
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: background-color 0.6s ease, color 0.6s ease;
    display: inline-block;
}

.border-button:hover {
    background-color: var(--black);
    border: 1px solid var(--black);
    color: var(--white);
}

/* border-button-end */
/* -- */
/* fill-button-start */
.fill-button {
    background-color: var(--black);
    border: 1px solid var(--black);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 6px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem;
    /* 140% */
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: background-color 0.6s ease, color 0.6s ease;
    display: inline-block;

}

.fill-button:hover {
    background-color: var(--white);
    border: 1px solid var(--black);
    color: var(--black);
}

/* fill-button-end */



/* section-heading-end */

.section-heading {
    padding: 40px 8vw 40px 8vw;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    margin: 40px 1vw 40px 1vw;
}

.section-heading h2 {
    text-align: left;
}

.section-heading .inner-column div:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;

}



/* section-heading-end */


/* --------------------------------- */

/* header-start */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3vh 5vw;
    border-bottom: 1px solid var(--black);

}

div.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

div.logo img {
    width: 60px;
}

header>div.menu {
    display: flex;
}

header>div.menu>nav>ul {
    display: flex;
    border-right: 1px solid var(--black);
    align-items: center;
    justify-content: space-evenly;
}

header>div.menu>nav>ul>a {
    flex: 1 1 auto;
    padding: 8px 12px;
    color: var(--black);
}

header>div.menu>nav>ul>a>li {
    font-size: 0.8375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3125rem;
    /* 140% */
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
    color: var(--black);


}



header>div.menu>nav>ul>a:hover {
    border-bottom: 1px solid var(--black);
}

header>div.menu>div.theme {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0px 1rem;
}

header>div.menu>div.theme>i {
    border: 1px solid var(--black);
    font-size: 1rem;
    padding: 4px;
    border-radius: 100px;
    color: var(--black);
}

header>div.menu>div.theme>i:hover {
    background-color: var(--black);
    color: var(--white);
}

.menu-button {
    display: none;
}

/* header end */


/* footer-start */

footer {
    display: flex;
    padding: 10vh 20vh;
    padding-bottom: 0px;

    border-top: 1px solid var(--black);
    margin-bottom: 10vh;


}

div.footer-info {
    flex: 1 1 0;
    padding: 0px 5vh;
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

div.footer-info>p {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    line-height: 1rem;

}

footer>div.site-map {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 0;
    padding: 0px 5vh;



}

footer>div.site-map>h2 {
    border-bottom: 1px solid var(--black);
    padding-bottom: 20px;
}

footer>div.site-map>ul {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto;
    row-gap: 8px;
    list-style: none;

}

footer>.sign {
    flex: 1 1 0;
    padding: 0px 5vh;
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

footer>.sign i {
    font-size: 1.5rem;
    margin-right: 1rem;
}

footer>.sign h3 {
    margin-bottom: 1rem;
}






/* footer-end */






























@media only screen and (max-width: 750px) {

    /* header-start */

    /* ------------notes for JS------------ */
    /* default : open the menu && "only" menu */
    /* click event after: close the menu && menu active*/

    .menu-button {
        display: unset;
    }

    header {
        position: relative;
    }



    nav ul {
        flex-direction: column;
        /* border: 1px solid var(--black); */




    }

    .menu .theme {
        align-self: center;
        padding-top: 12px;
    }

    header>div.menu>div.theme>i:hover {
        background-color: unset;
    }

    header>div.menu>nav>ul>a {
        border-bottom: 1px solid var(--black);
        border-left: none;
        border-right: none;
        width: 100%;
        text-align: center;
        padding: 20px 0px;



    }

    header>div.menu>nav>ul {
        border: none;
    }

    .menu-button i {
        font-size: 24px;
        padding: 16px;
        border: 1px solid var(--black);
        border-radius: 100px;
    }

    header>div.menu>div.theme>i:hover {
        background-color: unset;
        color: unset;
    }

    .open-the-menu .bi-x-lg {
        display: none;
    }

    .close-the-menu .bi-list {
        display: none;
    }



    header>div.menu {
        display: none;
        border: 1px solid var(--black);
        padding-bottom: 1rem;
        position: absolute;
        top: 102px;
        right: 1px;
        border-top: none;
        border-right: none;

        flex-direction: column;
        gap: 10px;
        background-color: var(--white);
        width: 50%;
    }

    header>div.deactive{
        transform: translateY(-10%);
        opacity: 0.5;
        animation: mobileMenuClosing 0.6s ease-in-out;
       

    }


    header>div.active{ 
        transform: translateY(0);
        opacity: 1;
        animation: mobileMenuOpening 0.6s ease-in-out;
      

    
    }

    /* header>div.active {
        position: absolute;
        top: 102px;
        right: 0px;
        border-top: none;
        display: flex;
        flex-direction: column;
        gap: 10px;



    } */

    header>div.active>div.theme>i {
        font-size: 24px;
        padding: 16px;
    }

    /* header-end */


    /* divided section start*/
    .divided {
        flex-direction: column-reverse;
    }

    /* divided section end */


    .syne-96 {

        font-size: 3rem;
        line-height: 4.2rem;
        margin-left: -5px;
    }

    .syne-80 {
        font-size: 3.25rem;
        line-height: 4rem;

    }

    .syne-64 {
        font-family: 'Syne', sans-serif;
        font-size: 3rem;
        font-style: normal;
        font-weight: 400;
        line-height: 4.8rem;
        /* 120% */
        text-transform: capitalize;
    }

    .syne-32 {

        font-size: 1.4rem;
        line-height: 1.6rem;
    }


    .syne-24 {
        font-family: 'Syne', sans-serif;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.95rem;
        /* 130% */
    }


    .inter-32 {
        font-family: 'Inter', sans-serif;
        font-size: 2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.6rem;
        /* 131.25% */
    }


    .inter-25 {

        font-size: 1.2rem;


    }


    .inter-16 {
        font-size: 1rem;
    }



    /* class for fonts - end -  */




    /* wide-narrow-container-start */
    .wide-narrow {
        margin: 40px 1vw 0px 1vw;
        display: flex;
        flex-direction: column;
        gap: 1.4vw;
        padding: 40px 8vw 40px 8vw;
        border-top: 1px solid var(--black);
        border-bottom: 1px solid var(--black);
    }

    .wide-narrow> :first-child {
        border-right: none;
        border-bottom: 1px solid var(--black);

    }

    .wide-narrow>div {
        min-height: unset;
    }

    .wide-narrow>.small-side {
        flex: 1 1 0;
    }

    .wide-narrow>.large-side {
        flex: 2 1 0;
    }

    /* wide-narrow-container-end */

    /* section-heading-start */


    .section-heading .inner-column {
        flex-direction: column;
        gap: 4vh;
    }

    .section-heading .inner-column div:last-child {
        justify-content: flex-start;
        gap: 5vh;
    }

    /* section-heading-end */

    /* footer-start */

    footer {
        flex-direction: column;
        padding: unset;
        gap: 10vh;
        padding-top: 80px;

    }

    footer div.footer-info {
        flex-direction: row;
    }

    /* footer-end */

 

    /* film-card-start */
    .film-card .card-content {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    /* film-card-start */



    .logo-text{

        font-size: 3.2rem;

    }






}