*{
         margin:0;
         padding:0;
         box-sizing:border-box;
         text-decoration: none;
         font-family:'Lucida Sans', 'Lucida Sans Regular',
         'Lucida Grande', 'Lucida Sans Unicode', 
         Geneva, Verdana, sans-serif;
    }

    h2{
        color: white;
    }

    .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* border: 1px solid black; */
    }

    .cinema-image{
        width: 270px;
        height: 100px;
        margin: 10px auto;
    }

    .cinema-name{
         /*background-color: yellow;*/
         color: black;
         margin-right: 40px;
    }

    .social-media-logos{
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }

    .logos{
        /*background-color: black;*/
        margin: 10px;
    }

    .navgation-bars{
        display: flex;
        background-color: black;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        height: 50px;
        color: white;
    }

    .nav-menu{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .hamburger{
        display: none;
        width: 44px;
        height: 44px;
        margin-left: auto;
        background-color: black;
        border: 1px solid white;
        cursor: pointer;
        padding: 9px;
    }

    .hamburger span{
        display: block;
        width: 100%;
        height: 3px;
        margin: 5px 0;
        background-color: white;
    }

    .nav-bars a{
        color: white;
        margin: 0 40px 0 40px;
    }

    .nav-bars a:hover{
        border: 2px solid white;
        padding: 12px 15px 12px 15px;;
        background-color: white;
        color: black;
        /* border-radius: 40px; */
        margin: 0 40px 0 40px;
    }

    .movie-header{
        background-color: white;
        display: flex;
        flex-direction: row;
        height: 60px;
        justify-content: end;
        align-items: center;
        /* border: 1px solid black; */
    }

    .movie-text{
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
    }



/* HERO SECTION */

.hero{
    min-height:400px;
    height:auto;
    background-image:url("../images/okanjuwa.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px 20px;
    box-sizing: border-box;
}

.hero h2{
    font-size:50px;
    color: white;
    margin:5px 0;
}

.hero p{
    font-size:30px;
    color:white;
}

#currentDateTime{
    font-size: 30px;
    font-weight: 500;
}


/* SHOWTIME SECTION */

.showtime-container{
    width:100%;
    margin: 20px auto;
    padding:50px 20px;
    background-color:  black;
    display:grid;
    
    /* grid-template-columns:1fr 1fr 1fr; */
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:30px;
}


/* MOVIE CARD */

.movie-card{
    background: rgba(20, 19, 19, 0.81);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(20, 19, 19, 0.81);
    transition:0.3s;
}

.movie-card:hover{
    transform:translateY(-10px);
}

.movie-card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.movie-info{
    padding:20px;
}

.movie-info h2{
    margin-bottom:10px;
}

.movie-info p{
    color:#bbb;
    margin-bottom:20px;
}


/* SHOWTIMES */

.times{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
    color: white;
}

.times span{
    background: rgba(20, 19, 19, 0.81);
    padding:10px 15px;
    border-radius:5px;
    border:1px solid white;
}


/* BUTTON */

.movie-info button{
    width:100%;
    padding:12px;
    background: white;
    color:black;
    border:none;
    border-radius:5px;
    font-size:16px;
    transition:0.3s;
}

.movie-info button:hover{
    transform:translateY(-8px);
}

.footer-section{
    display: flex;
    flex: 1;
    flex-direction: row;
    text-align: center;
    background-color: black;
    color: white;
    height:60px;
    justify-content: center;
    align-items: center;
}




/* RESPONSIVE */

        @media(max-width:1024px){
            .header{
                padding: 0 20px;
                gap: 20px;
            }

            .cinema-image{
                width: 220px;
                height: auto;
            }

            .cinema-name{
                margin-right: 0;
                text-align: center;
            }

            .navgation-bars{
                justify-content: center;
                height: auto;
            }

            .nav-menu{
                justify-content: center;
                gap: 12px;
                padding: 12px;
                flex-wrap: wrap;
            }

            .nav-bars a,
            .nav-bars a:hover{
                display: inline-block;
                margin: 0;
                padding: 10px 14px;
            }

            .video-slide{
                height: auto;
                padding: 24px 16px;
            }

            .video-slide > div{
                width: 100%;
            }

            .video{
                display: block;
                width: 100%;
                max-width: 900px;
                height: auto;
                margin: 0 auto;
            }

            .movies-div{
                flex-wrap: wrap;
                gap: 24px;
                padding: 30px 20px;
            }

            .flex-items,
            .flex-item{
                margin: 0;
            }

            .top-rated{
                position: static;
                width: fit-content;
                margin: 20px auto 0;
                background-color: black;
            }

            .partner-logos{
                gap: 28px;
            }
        }


            @media (max-width:768px){
            .header{
                display:flex;
                justify-content:space-between;
                align-items:center;
                flex-direction:row;
                padding:10px 15px;
            }

            .header > div:first-child{
                flex:1;
                display:flex;
                justify-content:flex-start;
            }

            .header > div:last-child{
                flex:1;
                display:flex;
                justify-content:flex-end;
            }

            .cinema-image{
                width:130px;
                height:auto;
                margin:0;
            }

            .cinema-name{
                display:none;
            }

            .logos{
                display:flex;
                gap:8px;
                margin:0;
            }

            .social-media-logos{
                width:30px;
                height:30px;
            }

            .navgation-bars{
                flex-direction: column;
                align-items: stretch;
                padding: 0;
            }

            .hamburger{
                display: block;
                margin: 8px 12px 8px auto;
            }

            .nav-menu{
                display: none;
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                padding: 0;
            }

            .nav-menu.active{
                display: flex;
            }

            .nav-bars{
                width: 100%;
                text-align: center;
                border-bottom: 1px solid rgba(255,255,255,0.2);
            }

            .nav-bars a,
            .nav-bars a:hover{
                width: 100%;
                padding: 14px 10px;
                border: 0;
            }

            .discount{
                height: auto;
                min-height: 50px;
                margin-top: 10px;
                padding: 8px 12px;
            }

            .discount-text{
                margin: 0;
            }

            .discount-text h1{
                font-size:20px;
            }

            .top-rated-movie h3,
            .block-busters-text,
            .partners-section h2{
                font-size:28px;
            }

            .movies-div{
                flex-direction: column;
                padding: 25px 16px;
            }

            .flex-items,
            .flex-item{
                width: min(100%, 320px);
                padding: 16px;
            }

            .movies-picture{
                display: block;
                width: 100%;
                max-width: 240px;
                height: auto;
                margin: 0 auto 15px;
            }

            .buy-ticket-btn,
            audio{
                display: block;
                width: 100%;
                max-width: 260px;
                margin: 15px auto 0;
            }

            .partners-section{
                padding: 35px 16px;
            }

            .partner-logos img{
                width: 95px;
            }

            .newsletter{
                padding: 0 16px 25px;
            }

            .newsletter h2{
                font-size: 24px;
            }

            .newsletter h3{
                font-size: 16px;
            }

            .enter-email,
            .newsletter input,
            .subscribe{
                display: block;
                width: 100%;
                max-width: 320px;
                margin: 12px auto;
            }

            .footer-section{
                height: auto;
                min-height: 60px;
                padding: 16px;
                font-size: 15px;
            }
        }

        @media(max-width:480px){
            .cinema-image{
                width: 110px;
            }

            .cinema-name h1{
                font-size: 26px;
            }

            .discount-text h1{
                font-size: 16px;
            }

            .top-rated-movie h3,
            .block-busters-text,
            .partners-section h2{
                font-size: 22px;
            }

            .flex-items,
            .flex-item{
                width: 100%;
            }

            .movie-text-color,
            .price-tag{
                font-size: 15px;
            }
        }