body {
     overflow-x: hidden;
     background-color: rgb(147, 147, 147);
}
 body h1, h2 {
     color: #d1b371;
}
 body h2 {
     color: #d1b371;
}
 body h3 {
     color: #d1b371;
}
 body {
     color: #d1b371;
}
 body p {
     font-size: 16px !important;
}
/* ========================================== Header ========================================== */
 .nav-item:hover .dropdown-menu {
     display: block !important;
}
 .background-color {
     background-color: #ffffff !important;
}
/* Add a background color and some padding around the form */
 ::-webkit-scrollbar {
     width: 8px;
}
/* Track */
 ::-webkit-scrollbar-track {
     background: #f1f1f1;
}
/* Handle */
 ::-webkit-scrollbar-thumb {
     background: #888;
}
/* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
}
 body {
     background-color: rgb(147, 147, 147);
     overflow-x: hidden;
}
 .bg-white {
     background-color: #fff;
}
 .navbar-brand {
     padding: 23.5px 20px;
     font-size: 18px;
}
 .navbar-nav {
     width: 100%;
     justify-content: space-evenly !important;
     align-items: center;
     padding: 0px 10px;
}
 .logo {
     width: 150px;
}
 .nav-item {
     padding: 42px 8px;
     margin: 0px 3px;
     text-align: center;
     border-radius: 5px;
     font-size: 16px;
     color: grey;
     position: static;
}
 .nav-item.active {
     color: #383838;
}
 .nav-item:hover {
     color: #383838;
}
 a {
     color: inherit !important;
}
 .nav-link {
     padding: 5px;
}
 .navbar-collapse.collapse.in {
     display: block !important;
}
 .fa-angle-down {
     padding-left: 10px;
}
 .fa-icon {
     font-size: 20px;
     color: #fff;
     background-color: #c49c5d;
     margin: 2px 10px 5px 0px;
     border-radius: 10px;
     width: 30px;
     height: 30px;
}
 .dropdown-menu {
     margin: -0.1rem 0 0 !important;
     border: none;
     background-color: white;
     padding: 50px 50px 30px 50px;
}
 #dropdown-menu0 {
     position: absolute;
     left: 30px;
}
 #dropdown-menu1 {
     position: absolute;
     left: 165px;
}
 #dropdown-menu2 {
     position: absolute;
     left: 285px;
}
 #dropdown-menu3 {
     position: absolute;
     left: 740px;
}
 #dropdown-menu4 {
     position: absolute;
     left: 880px;
}
 .tab {
     margin-bottom: 12px;
     width: 240px !important;
}
 .tab:hover {
     color: #383838 !important;
}
 .dropdown-item {
     padding: 0px;
}
 .dropdown-item:hover {
     background-color: inherit;
}
/* footer css */
 .footer {
     position: relative;
     width: 100%;
     background: black;
     padding: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}
 .menu {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0px;
     flex-wrap: wrap;
}
 .menu__item {
     list-style: none;
}
 .menu__link {
     color: #fff;
     margin: 0 10px;
     display: inline-block;
     transition: 0.5s;
     text-decoration: none;
     font-weight: 300;
     font-size: 13px;
}
 .menu__item:not(:last-child)::after {
     content: "|";
     margin: 0 10px;
     color: #fff;
}
 img {
     max-width: 100%;
     height: auto;
     vertical-align: middle;
     display: inline-block;
}
/* Main CSS */
 .grid-wrapper > div {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .grid-wrapper > div > img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 0px;
}
 .grid-wrapper {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-auto-rows: 200px;
     grid-auto-flow: dense;
     background-color: #000;
     padding: 10px;
}
 .grid-wrapper .wide {
     grid-column: span 2;
}
 .grid-wrapper .tall {
     grid-row: span 2;
}
 .grid-wrapper .big {
     grid-column: span 2;
     grid-row: span 2;
}
 .grid__title {
     font-size: 28px;
     font-weight: bold;
     margin: 0px 0px 10px 0px;
}
 .gallery {
     background-color: #000;
}
 img {
     height: 100%;
     object-fit: cover;
}
 .grid-section {
     display: grid;
     width: 100%;
     padding: 20px;
     grid-template-rows: repeat(2, 310px);
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 10px;
     background-color: #383838;
     background-image: url("../img/2-1.webp");
}
 @media screen and (max-width: 768px) {
     .grid-section {
         display: grid;
         width: 98%;
         margin: 10px auto;
         grid-template-rows: repeat(4, 310px);
         grid-template-columns: repeat(1, 1fr);
         grid-gap: 10px;
    }
}
 .grid {
     overflow: hidden;
     border-radius: 0px;
     position: relative;
}
 .grid-img {
     width: 100%;
     height: 100%;
     transition: 0.5s;
     object-fit: cover;
     background-size: contain;
}
 .grid:nth-child(1) {
     grid-row: 1/3;
}
 .grid:nth-child(3) {
     grid-column: 3/5;
}
 .grid:nth-child(4) {
     grid-column: 2/4;
}
 .grid:nth-child(5) {
     grid-column: 4/4;
}
 .overlay {
     position: absolute;
     width: 100%;
     left: 0px;
     bottom: -150px;
     background-image: linear-gradient(to bottom, transparent, black);
     padding: 80px 25px 80px;
     transition: 0.5s;
}
 .grid:hover .overlay {
     bottom: 0px;
     transition: 0.5s;
}
 .overlay h2 {
     font-size: 28px;
     text-transform: uppercase;
     color: white;
     letter-spacing: 1px;
     font-weight: 700;
}
 .btn {
     display: inline-block;
     padding: 15px 5px;
     color: #ffffff;
     text-transform: capitalize;
     text-decoration: none;
     border-radius: 50px;
     line-height: 1;
     letter-spacing: 2px;
     font-size: 13px;
}
 .overlay p {
     color: #ffffff;
     font-weight: 400 !important;
     text-transform: capitalize;
     font-size: 16px !important;
}
 .singleul li {
     display: block;
}
 .singleul {
     padding-left: 0px;
}
 #border{
     border: solid #c49c5d 1px;
}
 .name {
     color: #c49c5d;
}
 .work {
     font-weight: bold;
     font-size: 15px;
}
 .about span {
     font-size: 13px;
}
 .v-profile {
     color: #c49c5d;
     cursor: pointer;
}
 .col-md-3 {
     margin-top: 10px;
}
 @media (min-width: 1200px) .container {
     max-width: 1200px !important;
}
 
#line{
  border-right: solid 1px;
  border-color: #c49c5d;
}

.only-mobile{display: none}
ul.menu{padding-left: 0}
.grid-section .grid:hover .overlay{bottom: 0 !important}
.logo img{height: auto;}

.nav-item .nav-link{display: inline-block;padding-right: 0;}
.nav-link + span{padding: 0;width: 25px;   height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width:1080px){
    .nav-item{padding:42px 0}
    .grid-section .grid .overlay{bottom: -170px}
}
@media only screen and (max-width:991px){
    nav.navbar{padding: 10px 0 !important}
    .logo{display: none;padding-left: 10px;}
    .nav-item{padding:0 10px;position: relative;display: block;width:100%;text-align: left;}
    .nav-item .nav-link{text-align: left;}
    .dropdown-menu .dropdown-item{padding: .25rem 0;}
    .navbar-nav{padding-right: 0}
    .navbar-nav .nav-item .dropdown-menu{position: static !important;display: none !important;}
    .navbar-nav .nav-item .dropdown-menu.show{display: block !important;}
    .navbar .navbar-toggler{margin-left: auto;margin-top: 10px}
    .navbar .navbar-collapse{position: absolute;top: 99%;left:0;width: 100%;background: rgb(255, 255, 255);z-index: 9999;}
    .navbar .navbar-collapse .navbar-nav{padding: 0 0 20px}
    .grid-section{grid-template-columns: auto auto;grid-template-rows: auto auto auto;}
    .grid-section .grid{grid-row: auto !important;grid-column: auto !important;height: 350px;}
    .grid-section .grid:last-child {grid-column: 1/3 !important;}
    .grid-section .grid .overlay{bottom: -150px}
    .grid-section .grid:nth-of-type(3) .overlay{bottom: -175px}
    .grid-section .grid:last-child .overlay{bottom: -125px}
    .grid-section .grid:last-child:hover .overlay{bottom: 0}
    .only-mobile{display: inline-block;}

}
@media only screen and (max-width:767px){
    .nav-item:after{content: "";display: block;clear: both;}
    .nav-item .nav-link + span{float: right;}
    .dropdown-menu .row .row{margin: 0;}
    .dropdown-menu .row .row > div{padding: 0;}

}
@media only screen and (max-width:692px){
    .grid-section .grid:nth-of-type(3) .overlay{bottom: -200px}

}
@media only screen and (max-width:658px){
    .grid-section .grid:first-child .overlay{bottom: -175px}

}
@media only screen and (max-width:600px){
    .grid-section{display: block;width: 100%;margin-top: 0}
    .grid-section .grid{display: block;width: 100%;margin-bottom: 20px}
    .grid-section .grid:nth-of-type(3) .overlay{bottom: -145px}
    .grid-section .grid .overlay,
    .grid-section .grid:first-child .overlay{bottom: -125px}
    .logo{width: 100px}
}
@media only screen and (max-width:564px){
    .grid-section .grid:nth-of-type(3) .overlay{bottom: -170px}
}
@media only screen and (max-width:519px){
    .grid-section .grid:first-child .overlay{bottom: -150px}

}
@media only screen and (max-width:500px){
    .grid-section .grid .overlay{bottom: -150px}

}
@media only screen and (max-width:453px){
    .grid-section .grid:last-child .overlay{bottom: -145px}

}
@media only screen and (max-width:354px){
    .grid-section .grid:nth-of-type(3) .overlay {bottom: -200px;}
}
@media only screen and (max-width:337px){
    .grid-section .grid:first-child .overlay {bottom: -175px;}
}