/* ==============================
   GOOGLE FONT
================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ==============================
   GLOBAL
================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#0d1117;
    color:#ffffff;
    overflow-x:hidden;

}

/* ==============================
   NAVBAR
================================= */

.custom-navbar{

    background:rgba(13,17,23,.85);
    backdrop-filter:blur(10px);
    transition:.3s;

}

.navbar-brand{

    font-size:1.7rem;
    color:#58a6ff !important;

}

.nav-link{

    color:#ffffff !important;
    margin-left:15px;
    transition:.3s;

}

.nav-link:hover{

    color:#58a6ff !important;

}

/* ==============================
   HERO
================================= */

.hero-section{

    background:url("../assets/hero-bg.jpg") center center/cover no-repeat;
    position:relative;

}

.hero-overlay{

    background:rgba(0,0,0,.72);
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;

}

.hero-section h1{

    font-weight:700;
    line-height:1.2;

}

.hero-section p{

    font-size:1.15rem;
    color:#d0d7de;

}

.hero-section .btn{

    padding:12px 30px;
    border-radius:50px;
    transition:.3s;

}

.hero-section .btn-primary{

    background:#238636;
    border:none;

}

.hero-section .btn-primary:hover{

    background:#2ea043;
    transform:translateY(-3px);

}

.hero-section .btn-outline-light:hover{

    transform:translateY(-3px);

}

/* ==============================
   SECTION TITLE
================================= */

section{

    padding-top:90px;
    padding-bottom:90px;

}

section h2{

    font-weight:700;
    margin-bottom:10px;

}

.text-muted{

    color:#9ca3af !important;

}

/* ==============================
   ANIME CARD
================================= */

.anime-card{

    background:#161b22;
    border:none;
    border-radius:18px;
    overflow:hidden;
    transition:.35s;
    height:100%;

}

.anime-card:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.45);

}

.anime-card img{

    width:100%;
    height:340px;
    object-fit:cover;

}

.anime-card .card-body{

    padding:20px;

}

.anime-card h5{

    font-weight:600;
    min-height:55px;

}

.anime-card p{

    color:#c9d1d9;
    font-size:.95rem;

}

.score{

    color:#ffd43b;
    font-weight:600;

}

.genre-badge{

    display:inline-block;
    background:#238636;
    padding:4px 12px;
    border-radius:30px;
    margin-top:10px;
    font-size:.8rem;

}

/* ==============================
   SEARCH
================================= */

#searchInput{

    background:#161b22;
    border:none;
    color:#ffffff;

}

#searchInput:focus{

    background:#161b22;
    color:#ffffff;
    box-shadow:none;

}

#searchBtn{

    background:#238636;
    border:none;

}

#searchBtn:hover{

    background:#2ea043;

}

/* ==============================
   CONTACT
================================= */

.card{

    background:#161b22;
    color:#ffffff;
    border-radius:20px;

}

.form-control{

    background:#0d1117;
    border:1px solid #30363d;
    color:#ffffff;

}

.form-control:focus{

    background:#0d1117;
    color:#ffffff;
    border-color:#58a6ff;
    box-shadow:none;

}

textarea{

    resize:none;

}

/* ==============================
   BUTTONS
================================= */

.btn-primary{

    background:#238636;
    border:none;

}

.btn-primary:hover{

    background:#2ea043;

}

/* ==============================
   FOOTER
================================= */

footer{

    background:#010409;
    color:#9ca3af;

}

footer p{

    margin-bottom:5px;

}

/* ==============================
   LOADING
================================= */

.loading{

    text-align:center;
    padding:50px;
    font-size:1.2rem;

}

/* ==============================
   SCROLLBAR
================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0d1117;

}

::-webkit-scrollbar-thumb{

    background:#238636;
    border-radius:50px;

}

/* ==============================
   RESPONSIVE
================================= */

@media(max-width:991px){

    .hero-section h1{

        font-size:2.6rem;

    }

    .hero-section{

        text-align:center;

    }

}

@media(max-width:768px){

    .hero-section h1{

        font-size:2.1rem;

    }

    .hero-section p{

        font-size:1rem;

    }

    .anime-card img{

        height:280px;

    }

}

@media(max-width:576px){

    .navbar-brand{

        font-size:1.4rem;

    }

    .hero-section h1{

        font-size:1.8rem;

    }

    section{

        padding-top:70px;
        padding-bottom:70px;

    }

}