.row {
    margin: 0;   
}

/* --- navbar --- */
.navbar {
    margin-top: 40px; 
    min-height:64px !important;
    background-color: #9F9C98 !important;
}

.nav-brand-img {
    margin-left: 20px;
    margin-right: 20px;
}

.nav-link {
    color: #fff !important;
    font-size: 18px !important;
    
}

@media (max-width: 1200px) {
    .nav-brand-img {
        margin-left: 5px;
        margin-right: 10px;
    }
    .nav-link {
        color: #fff !important;
        font-size: 15px !important;
    }
}
@media (max-width: 992px) {
    .nav-brand-img {
        margin-left: 10px;
        margin-right: 10px;
    }
    .h3 {
        font-size: 1.5rem !important;
    }

}
@media (max-width: 768px) {
    .nav-brand-img {
        margin-left: 10px;
        margin-right: 10px;
    }
    .navbar {
        margin-top: 25px; 
        min-height:42px !important;
        background-color: #9F9C98 !important;
    }
    .h1 {
        font-size: 1.55rem !important;
    }
    .h2 {
        font-size: 1.7rem !important;
    }
    .h3 {
        font-size: 1.4rem !important;
    }
    .h5 {
        font-size: 1.1rem !important;
    }
}
@media (max-width: 576px) {
    .h1 {
        font-size: 1.2rem !important;
    }    
    .h2 {
        font-size: 1.8rem !important;
    }
    .h5 {
        font-size: 0.9rem !important;
    }
    .h6 {
        font-size: 0.9rem !important;
    }

}

/* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation : landscape)  {
    .nav-brand-img {
        margin-left: 30px;
        margin-right: 10px;
    }
    .navbar {
        margin-top: 25px; 
        min-height:42px !important;
        background-color: #9F9C98 !important;
    }
    .h1 {
        font-size: 1.55rem !important;
    }
 }

/* --- dropdown --- */
.dropdown-menu,
.dropdown-menu {
    background-color: #9F9C98;
}
.nav a{
    color: white !important;
    font-size: 10px ;
}

.navbar-nav > li > .dropdown-menu a { 
    color: #fff;
  
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: rgb(194,190,184);
    color:#6C193F !important;
}

ul.nav a:hover {
    background-color: rgb(194,190,184) !important;
    color:#6C193F !important;
}

/* --- others --- */
.btn-success:hover, .btn-success:active, .btn-success:focus, .btn-primary, .btn-primary:hover{
    background: #6C193F !important;
    border-color: #6C193F !important;
    font-family: "open sans", sans-serif;
    font-size: 14px;
}

.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
color:  #6C193F !important; /* <—– change your color here*/

}