/*=========================================
    STREAMFLIX - RESPONSIVE.CSS
==========================================*/

/*==============================
  1400px
==============================*/
@media (max-width:1400px){

.container{
    width:92%;
}

.hero h1{
    font-size:58px;
}

.section{
    padding:80px 0;
}

}

/*==============================
  1200px
==============================*/
@media (max-width:1200px){

.hero h1{
    font-size:52px;
}

.hero-content{
    max-width:600px;
}

.movie-grid{
    grid-template-columns:repeat(3,1fr);
}

.live-grid{
    grid-template-columns:repeat(2,1fr);
}

.footer-grid{
    grid-template-columns:repeat(2,1fr);
}

}

/*==============================
  992px
==============================*/
@media (max-width:992px){

.header .container{
    height:75px;
}

.navbar{
    position:fixed;
    top:75px;
    left:-100%;
    width:100%;
    height:calc(100vh - 75px);
    background:#111;
    transition:.4s;
    overflow-y:auto;
    z-index:999;
}

.navbar.active{
    left:0;
}

.navbar ul{
    flex-direction:column;
    padding:40px 20px;
    gap:25px;
}

.navbar ul li{
    width:100%;
}

.navbar ul li a{
    display:block;
    font-size:18px;
    padding:15px;
    border-bottom:1px solid #222;
}

.mobile-menu{
    display:block;
}

.nav-buttons{
    display:none;
}

.hero{
    height:85vh;
}

.hero-content{
    margin-left:5%;
    margin-right:5%;
}

.hero h1{
    font-size:46px;
}

.hero p{
    font-size:17px;
}

.section-title{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}

.movie-grid{
    grid-template-columns:repeat(2,1fr);
}

.live-grid{
    grid-template-columns:repeat(2,1fr);
}

.footer-grid{
    grid-template-columns:repeat(2,1fr);
}

}

/*==============================
  768px
==============================*/
@media (max-width:768px){

.hero{
    height:80vh;
}

.hero-content{
    text-align:center;
    margin:auto;
    padding:20px;
}

.hero h1{
    font-size:40px;
}

.hero p{
    font-size:16px;
}

.hero-buttons{
    justify-content:center;
}

.watch-btn,
.plan-btn{
    width:100%;
    justify-content:center;
}

.section{
    padding:60px 0;
}

.section-title h2{
    font-size:30px;
}

.movie-grid{
    grid-template-columns:1fr;
}

.live-grid{
    grid-template-columns:1fr;
}

.movie-card img{
    height:420px;
}

.footer-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.footer-column{
    margin-bottom:30px;
}

}

/*==============================
  576px
==============================*/
@media (max-width:576px){

.logo{
    font-size:24px;
}

.logo i{
    font-size:28px;
}

.hero{
    height:75vh;
}

.hero h1{
    font-size:32px;
    line-height:1.2;
}

.hero p{
    font-size:15px;
}

.section-title h2{
    font-size:26px;
}

.movie-card img{
    height:360px;
}

.live-card img{
    height:200px;
}

.watch-btn,
.plan-btn{
    padding:14px 20px;
    font-size:15px;
}

.card-btn{
    width:100%;
    text-align:center;
}

.footer{
    padding:40px 0 20px;
}

.footer-bottom{
    font-size:13px;
}

}

/*==============================
  480px
==============================*/
@media (max-width:480px){

.container{
    width:95%;
}

.header .container{
    height:70px;
}

.hero{
    padding-top:70px;
}

.hero h1{
    font-size:28px;
}

.hero p{
    font-size:14px;
}

.section{
    padding:50px 0;
}

.section-title h2{
    font-size:24px;
}

.movie-card img{
    height:320px;
}

.live-info h3{
    font-size:20px;
}

.live-badge{
    font-size:11px;
    padding:5px 10px;
}

.footer-column h3{
    font-size:18px;
}

}

/*==============================
  375px
==============================*/
@media (max-width:375px){

.hero h1{
    font-size:24px;
}

.hero p{
    font-size:13px;
}

.watch-btn,
.plan-btn{
    font-size:14px;
    padding:12px 18px;
}

.movie-card img{
    height:280px;
}

.section-title h2{
    font-size:22px;
}

.logo{
    font-size:22px;
}

}

/*==============================
  Landscape Phones
==============================*/
@media (max-height:500px) and (orientation:landscape){

.hero{
    height:120vh;
}

.hero-content{
    padding-top:80px;
}

}