/* ============================================
   RR Lunkad Responsive Styles
   Version 1
============================================ */


/**********************
GENERAL
**********************/

*{
    box-sizing:border-box;
}

html{
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
}

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


/**********************
TABLET
**********************/

@media only screen and (max-width:991px){

.container{
    width:100%;
    max-width:100%;
    padding-left:15px;
    padding-right:15px;
}

}


/**********************
MOBILE
**********************/

@media only screen and (max-width:767px){

/**********************
HEADER
**********************/

#main-header-1{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:99999;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.main-header{
    margin:0!important;
    padding:0!important;
}

.navbar{

    min-height:auto!important;
    padding:10px 15px!important;
}

.navbar-brand{

    margin:0;
    padding:0;
}

.logo-photo{

    height:45px!important;
    width:auto!important;
}

.navbar-toggler{

    border:none;
    padding:8px;
}

.navbar-toggler:focus{

    outline:none;
    box-shadow:none;
}


/**********************
MENU
**********************/

.navbar-collapse{

    background:#fff;
    margin-top:10px;
    padding:10px 0;
}

.navbar-nav{

    width:100%;
}

.navbar-nav .nav-item{

    width:100%;
}

.navbar-nav .nav-link{

    padding:12px 20px!important;
}


/**********************
SLIDER
**********************/

.banner,
.carousel,
.carousel-inner,
.carousel-item{

    margin:0!important;
    padding:0!important;
}

.banner{

    margin-top:72px!important;
}

.banner-image{

    width:100%;
    height:auto!important;
    display:block;
}

.carousel-caption{

    left:15px!important;
    right:15px!important;
    bottom:20px!important;
}

.carousel-caption h1{

    font-size:24px;
}

.carousel-caption h2{

    font-size:18px;
}

.carousel-caption p{

    font-size:14px;
}


/**********************
COMMON SECTIONS
**********************/

section{

    padding:40px 0!important;
}

.row{

    margin-left:0;
    margin-right:0;
}

[class*="col-"]{

    padding-left:10px;
    padding-right:10px;
}


/**********************
BUTTONS
**********************/

.btn{

    width:auto;
}


/**********************
CARDS
**********************/

.project-box,
.card{

    margin-bottom:20px;
}


/**********************
FOOTER
**********************/

.footer{

    text-align:center;
}

.footer .row>div{

    margin-bottom:25px;
}

}

@media (max-width:767px){

#main-header-1{
    position:relative !important;
}

.banner{
    margin-top:0 !important;
}

body{
    padding-top:0 !important;
}

}
/* Hide desktop header on phones */
@media (max-width:991px){

.desktop-header{
    display:none;
}

.mobile-header{
    display:block;
    position:sticky;
    top:0;
    z-index:9999;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.mobile-header-inner{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:10px 15px;
}

.mobile-logo img{

    height:45px;
}

#mobileMenuBtn{

    border:none;
    background:none;

    font-size:28px;

    cursor:pointer;
}

.mobile-menu{

    display:none;

    background:#fff;

    border-top:1px solid #eee;
}

.mobile-menu a{

    display:block;

    padding:14px 20px;

    text-decoration:none;

    color:#333;

    border-bottom:1px solid #f1f1f1;
}

.mobile-menu a:hover{

    background:#f7f7f7;
}

.mobile-menu.show{

    display:block;
}

.banner{

    margin-top:0!important;
}

}

/* Desktop */
@media (min-width:992px){

.mobile-header,
.mobile-menu{

    display:none;
}

}

@media (max-width:991px){

#sidebar{
    position:fixed;
    top:0;
    left:-300px;
    width:280px;
    height:100vh;
    background:#fff;
    z-index:99999;
    overflow-y:auto;
    transition:left .3s ease;
    box-shadow:2px 0 10px rgba(0,0,0,.2);
}

#sidebar.active{
    left:0;
}

}