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

@media(max-width:991px){

/* NAVBAR */

.navbar{
padding:15px 0;
}

.navbar-brand{
font-size:32px;
}

.navbar-collapse{
background:#0f172a;
padding:20px;
margin-top:15px;
border-radius:20px;
}

.nav-link{
padding:12px 0 !important;
}

.search-form{
width:100%;
margin-top:15px;
}

.search-input{
width:100%;
}

/* HERO */

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

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

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

/* SEARCH BOX */

.search-section{
margin-top:-40px;
padding:0 15px;
}

.search-box{
padding:25px;
gap:15px;
}

.search-item{
width:100%;
min-width:100%;
}

.search-btn-modern{
width:100%;
}

/* PLAN CARDS */

.plan-card img{
height:240px;
}

.plan-title{
font-size:24px;
}

.price{
font-size:24px;
}

/* CONTACT PAGE */

.big-title{
font-size:70px;
}

.contact-text{
font-size:18px;
line-height:1.7;
}

.contact-form-box{
padding:30px;
margin-top:40px;
}

.send-btn{
height:70px;
font-size:20px;
}

/* FOOTER */

.footer{
padding:60px 0 20px;
text-align:center;
}

.social-icons{
margin-bottom:30px;
}

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

}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:576px){

.container{
padding-left:20px;
padding-right:20px;
}

/* HERO */

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

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

.hero-btn{

height:60px;

padding:0 35px;

border-radius:16px;

display:inline-flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:18px;

font-weight:bold;

transition:0.3s;

}

.hero-btn-primary{

background:#2563eb;

color:white;

}

.hero-btn-primary:hover{

background:white;

color:#0f172a;

}

.hero-btn-outline{

border:2px solid white;

color:white;

}

.hero-btn-outline:hover{

background:white;

color:#0f172a;

}


/* SEARCH */

.search-box{
border-radius:25px;
padding:20px;
}

.search-item select{
height:55px;
font-size:16px;
}

.search-btn-modern{
height:55px;
font-size:18px;
}

/* PLAN */

.section-title{
font-size:34px;
}

.plan-content{
padding:20px;
}

/* CONTACT */

.big-title{
font-size:52px;
}

.info-box{
align-items:flex-start;
}

.icon-box{
width:60px;
height:60px;
font-size:22px;
}

.info-box p{
font-size:18px;
}

.social-links a{
width:50px;
height:50px;
font-size:18px;
}

.contact-form-box{
border-radius:30px;
padding:25px;
}

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

.contact-form-box .form-control{
height:55px;
font-size:16px;
}

.send-btn{
height:60px;
font-size:18px;
}

/* FOOTER */

.footer-title{
font-size:24px;
}

}

/* =========================
ADMIN PANEL MOBILE
========================= */

@media(max-width:991px){

.sidebar{
position:relative !important;
width:100% !important;
height:auto !important;
margin-bottom:30px;
border-radius:0 0 25px 25px;
}

.main-content{
margin-left:0 !important;
padding:25px !important;
}

.form-box{
padding:25px !important;
}

.page-title{
font-size:32px;
}

.card-box{
margin-bottom:20px;
}

table{
font-size:14px;
}

}

/* =========================
IMAGE FIX
========================= */

img{
max-width:100%;
height:auto;
}

/* =========================
BUTTON FIX
========================= */

button,
.btn{
white-space:nowrap;
}

/* =========================
OVERFLOW FIX
========================= */

body{
overflow-x:hidden;
}
.mobile-menu-btn{
    display:none;
}
@media(max-width:768px){

    .mobile-menu-btn{
        display:block;
        background:none;
        border:none;
        font-size:30px;
        color:#fff;
        cursor:pointer;
        z-index:10000;
    }

    .nav-menu{

        position:fixed;
        top:0;
        right:-100%;

        width:280px;
        height:100vh;

        background:#111827;

        display:flex;
        flex-direction:column;

        padding-top:100px;

        transition:.3s;

        z-index:9999;
    }

    .nav-menu li{
        width:100%;
    }

    .nav-menu a{

        display:block;

        padding:15px 25px;

        color:#fff;

        border-bottom:1px solid rgba(255,255,255,.1);

    }

    .nav-menu.active{
        right:0;
    }

}