/* ===========================
   ОБЩИ НАСТРОЙКИ
=========================== */

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

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#f4f6f9;

    color:#333;

}

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

.hero{

    background:url("https://images.unsplash.com/photo-1521295121783-8a321d551ad2?w=1600") center center;

    background-size:cover;

    height:500px;

    position:relative;

}

.overlay{

    position:absolute;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero h1{

    color:white;

    font-size:55px;

    font-weight:bold;

}

.hero p{

    color:white;

    font-size:22px;

    margin:20px 0;

}

/* ===========================
   НАВИГАЦИЯ
=========================== */

.navbar{

    padding:15px;

}

.navbar-brand{

    font-size:28px;

}

/* ===========================
   СТАТИСТИКА
=========================== */

.stat-box{

    background:white;

    border-radius:12px;

    padding:30px;

    margin-bottom:20px;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

    transition:.3s;

}

.stat-box:hover{

    transform:translateY(-5px);

}

.stat-box i{

    font-size:45px;

    color:#ffc107;

}

.stat-box h2{

    margin-top:15px;

    font-size:40px;

}

/* ===========================
   ТЪРСЕНЕ
=========================== */

#search{

    height:55px;

    border-radius:30px;

    font-size:18px;

    padding-left:25px;

}

/* ===========================
   КАРТИ
=========================== */

.card{

    border:none;

    border-radius:15px;

    overflow:hidden;

    transition:.3s;

    margin-bottom:30px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.card:hover{

    transform:translateY(-10px);

}

.card img{

    height:230px;

    object-fit:cover;

}

.card-title{

    font-weight:bold;

    font-size:24px;

}

.card-text{

    font-size:15px;

}

/* ===========================
   БУТОНИ
=========================== */

.btn{

    border-radius:30px;

    padding:10px 25px;

}

.btn-warning{

    color:black;

    font-weight:bold;

}

/* ===========================
   ФОРМА
=========================== */

label{

    font-weight:bold;

    margin-bottom:8px;

}

.form-control{

    border-radius:10px;

    padding:12px;

}

textarea{

    resize:none;

}

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

footer{

    background:#212529;

    color:white;

    padding:30px;

    margin-top:60px;

}

/* ===========================
   АНИМАЦИИ
=========================== */

.card{

    animation:fadeUp .6s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

.hero{

height:420px;

}

.hero h1{

font-size:40px;

}

}

@media(max-width:768px){

.hero{

height:360px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:18px;

}

.stat-box{

margin-bottom:20px;

}

}

@media(max-width:576px){

.hero{

height:320px;

}

.hero h1{

font-size:24px;

}

.hero p{

font-size:16px;

}

.navbar-brand{

font-size:20px;

}

.card-title{

font-size:20px;

}

}