/* =====================================
   TABLET (991px and below)
===================================== */

@media (max-width:991px){

    .container{
        width:95%;
    }

    .dme-navbar{
        padding:15px 20px;
        border-radius:20px;
    }

    .logo{
        height:45px;
    }

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

    .navbar-collapse{
        background:#fff;
        margin-top:20px;
        padding:20px;
        border-radius:20px;
        box-shadow:0 15px 40px rgba(0,0,0,.08);
    }

    .navbar-nav{
        text-align:center;
    }

    .navbar-nav .nav-item{
        margin:10px 0;
    }

    .nav-btn{
        width:100%;
        margin-top:15px;
        text-align:center;
    }

}
/* =====================================
   MOBILE
===================================== */

@media (max-width:767px){

.hero-section{

padding-top:60px;

}

.hero-badge{

margin:auto;

}

.hero-section .row{

flex-direction:column;

}

.hero-left{

text-align:center;

}

.hero-title{

font-size:48px;

line-height:1.1;

}

.hero-description{

font-size:17px;

margin:auto;

}

.hero-tags{

justify-content:center;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-clients{

justify-content:center;

margin-bottom:50px;

}

.dashboard-card{

margin-top:40px;

}

}
@media(max-width:767px){

.services-section{

padding:70px 0;

}

.service-card{

margin-bottom:25px;

}

}
@media(max-width:767px){

.why-section .row{

flex-direction:column;

}

.why-left{

text-align:center;

margin-bottom:40px;

}

.why-grid{

margin-top:20px;

}

}
@media(max-width:767px){

.pricing-card{

margin-bottom:30px;

}

}
@media(max-width:767px){

.portfolio-filter{

justify-content:center;

flex-wrap:wrap;

gap:10px;

}

.project-card{

margin-bottom:30px;

}

}
@media(max-width:767px){

.footer{

text-align:center;

}

.footer .row>div{

margin-bottom:40px;

}

}