/* ===========================================
   RESPONSIVE CSS
   EduConnect CRM Website
===========================================*/

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

/* ---------- TOPBAR ---------- */
.topbar{
    padding:8px 0;
}
.topbar .row{
    text-align:right;
}
.topbar .col-lg-8,
.topbar .col-md-8{
    display:none !important;
}
.topbar .col-lg-4,
.topbar .col-md-4{
    width:100%;
    text-align:right !important;
}

.topbar a{
    display:inline-block;
    margin:0 6px;
}


/* ---------- NAVBAR ---------- */

.navbar{
    padding:10px 0;
}

.logo{
    max-height:55px;
    width:auto;
}

.navbar-toggler{
    border:none;
    box-shadow:none !important;
}

#mainMenu{
    margin-top:15px;
    background:#fff;
    padding:15px;
    border-radius:10px;
}

#mainMenu .nav-item{
    margin-bottom:5px;
}

#mainMenu .nav-link{
    padding:12px 10px;
    border-bottom:1px solid #eee;
}

#mainMenu .btn{
    width:100%;
    margin-top:10px;
}


/* ---------- SLIDER ---------- */

.hero-image{
    height:500px;
    object-fit:cover;
}

.carousel-caption{
    bottom:80px;
    left:6%;
    right:6%;
    text-align:left;
}

.hero-subtitle{
    font-size:14px;
    padding:6px 12px;
}

.carousel-caption h1{
    font-size:42px;
    line-height:1.2;
    margin-bottom:15px;
}

.carousel-caption p{
    font-size:17px;
}

.carousel-caption .btn{
    padding:12px 28px;
}

}


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

@media(max-width:991px){

#heroSlider .carousel-item{
    height:500px;
}

.hero-image{
    height:500px;
}

.carousel-caption{
    width:90%;
    left:5%;
    top:52%;
}

.carousel-caption h1{
    font-size:34px;
}

.carousel-caption p{
    font-size:16px;
}

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

}

@media(max-width:576px){

#heroSlider .carousel-item{
    height:420px;
}

.hero-image{
    height:420px;
}

.carousel-caption{
    width:92%;
    left:4%;
    top:55%;
}

.carousel-caption h1{
    font-size:28px;
    line-height:1.2;
}

.carousel-caption p{
    display:none;
}

.carousel-caption .btn{
    padding:10px 22px;
    font-size:14px;
}

}

/* ---------- LOGO ---------- */

.logo{
    max-height:45px;
}


/* ---------- MENU ---------- */

.navbar{
    padding:10px 0;
}

#mainMenu{
    margin-top:15px;
    background:#fff;
    border-radius:10px;
    padding:10px;
}

#mainMenu .nav-link{
    font-size:16px;
    padding:12px;
    border-bottom:1px solid #f1f1f1;
}

#mainMenu .btn{
    width:100%;
    margin-top:12px;
}


/* ---------- HERO ---------- */

.hero-section{
    margin-top:0;
}

.hero-image{
    height:320px;
    object-fit:cover;
}


/* Dark Overlay */

.carousel-item::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.45);
    z-index:1;
}

.carousel-caption{
    z-index:2;
    bottom:35px;
    left:5%;
    right:5%;
    text-align:left;
}

.hero-subtitle{
    display:inline-block;
    font-size:11px;
    padding:4px 10px;
    margin-bottom:8px;
}

.carousel-caption h1{
    font-size:26px;
    line-height:1.25;
    margin-bottom:10px;
}

.carousel-caption p{
    font-size:13px;
    line-height:1.5;
    margin-bottom:12px;
}

.carousel-caption .btn{
    font-size:13px;
    padding:9px 18px;
}

.carousel-control-prev,
.carousel-control-next{
    width:8%;
}


/* ---------- Footer ---------- */

.footer{
    text-align:center;
}

.footer h4,
.footer h5{
    margin-top:20px;
}

.footer .social-icons a{
    margin:0 8px;
}


/* ---------- WhatsApp ---------- */

.whatsapp-btn{
    width:52px;
    height:52px;
    right:15px;
    bottom:80px;
}

#topBtn{
    right:15px;
    bottom:15px;
}

}


/* ===============================
 Extra Small
=================================*/

@media (max-width:480px){

.logo{
    max-height:40px;
}

.hero-image{
    height:260px;
}

.carousel-caption{
    bottom:25px;
}

.carousel-caption h1{
    font-size:22px;
}

.carousel-caption p{
    display:none;
}

.hero-subtitle{
    font-size:10px;
}

.carousel-caption .btn{
    font-size:12px;
    padding:8px 16px;
}

.top-login-btn{
    padding:7px 15px;
    font-size:13px;
}

}


/* ===============================
 Large Desktop
=================================*/

@media (min-width:1200px){

.hero-image{
    height:650px;
}

.carousel-caption{
    bottom:120px;
}

.carousel-caption h1{
    font-size:62px;
}

.carousel-caption p{
    font-size:20px;
}

}