/* ==========================================
   SEMIBOLA
   responsive.css
   ========================================== */

/* ==============================
   Large Desktop (≤1400px)
============================== */

@media (max-width:1400px){

.hero h1{
    font-size:3.2rem;
}

.container{
    max-width:1140px;
}

}

/* ==============================
   Laptop (≤1200px)
============================== */

@media (max-width:1200px){

.hero h1{
    font-size:2.8rem;
}

.section-title h2{
    font-size:2rem;
}

.card-img-top{
    height:220px;
}

.navbar-brand{
    font-size:1.8rem;
}

}

/* ==============================
   Tablet Landscape (≤992px)
============================== */

@media (max-width:992px){

.navbar{
    padding:15px 0;
}

.navbar-nav{
    margin-top:20px;
}

.navbar-nav .nav-link{
    margin-left:0;
    padding:12px 0;
}

.hero{
    text-align:center;
    padding:80px 0;
}

.hero img{
    margin-top:40px;
}

.hero h1{
    font-size:2.5rem;
}

.hero p{
    margin:auto;
}

.stat-box{
    margin-bottom:25px;
}

.sidebar-widget{
    margin-top:40px;
}

.transfer-section{
    text-align:center;
}

.transfer-section img{
    margin-top:40px;
}

.footer{
    text-align:center;
}

}

/* ==============================
   Tablet Portrait (≤768px)
============================== */

@media (max-width:768px){

section{
    padding:60px 0;
}

.hero h1{
    font-size:2rem;
}

.hero p{
    font-size:1rem;
}

.display-4{
    font-size:2rem;
}

.btn{
    width:100%;
    margin-bottom:10px;
}

.card{
    margin-bottom:25px;
}

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

.table{
    font-size:.9rem;
}

.newsletter{
    text-align:center;
}

.newsletter input{
    margin-bottom:15px;
}

.category-card{
    margin-bottom:25px;
}

footer .col-lg-4,
footer .col-lg-3,
footer .col-lg-2{
    margin-bottom:30px;
}

}

/* ==============================
   Mobile (≤576px)
============================== */

@media (max-width:576px){

body{
    font-size:15px;
}

.hero{
    min-height:auto;
}

.hero h1{
    font-size:1.8rem;
}

.hero p{
    font-size:.95rem;
}

.section-title h2{
    font-size:1.7rem;
}

.navbar-brand{
    font-size:1.5rem;
}

.card-body{
    padding:18px;
}

.card-title{
    font-size:1.1rem;
}

.stat-box{
    padding:25px;
}

.stat-box h2{
    font-size:2rem;
}

.category-card{
    padding:30px 20px;
}

.category-card i{
    font-size:45px;
}

.table th,
.table td{
    padding:10px;
    font-size:13px;
}

#backToTop{
    width:45px;
    height:45px;
    right:15px;
    bottom:15px;
}

footer{
    font-size:14px;
}

}

/* ==============================
   Small Mobile (≤400px)
============================== */

@media (max-width:400px){

.hero h1{
    font-size:1.5rem;
}

.hero p{
    font-size:.9rem;
}

.navbar-brand{
    font-size:1.3rem;
}

.btn{
    font-size:14px;
}

.card-title{
    font-size:1rem;
}

.section-title h2{
    font-size:1.5rem;
}

}

/* ==============================
   Landscape Mobile
============================== */

@media (max-height:500px){

.hero{
    padding:50px 0;
    min-height:auto;
}

.hero img{
    max-width:300px;
}

}

/* ==============================
   Print
============================== */

@media print{

.navbar,
footer,
.btn,
#backToTop{
    display:none!important;
}

body{
    background:#fff;
    color:#000;
}

.card{
    box-shadow:none;
    border:1px solid #ddd;
}

}