.footer-area p {
    font-size: 14px;
    margin-top: -11px;
    text-align: justify;
    letter-spacing: 0px;
    color: #9BA2AD;
}

.footer-up {
    padding: 3px 0;
}

.single-contact-info {
    border: 1px solid #eee;
    text-align: center;
    padding: 60px 70px;
    margin-bottom: 30px;
    height: 23rem;
}
/* 
.section-padding {
    padding: 44px 0;
} */

.pb-60 {
    padding-bottom: 0px;
}

.single-portfolio-wrapper {
    margin-bottom: -3px;
}

.section-title {
    position: relative;
    margin-bottom: -17px;
}

.contact-form-wrap h3 {
    font-size: 26px;
    line-height: 45px;
    padding-bottom: 17px;
}

#img {
    height: 16.3rem;
    padding: 3px;
    width: 100% !important;
}

.port-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.port-menu li {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    
    position: relative;
}

.port-menu li.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    /* Change this to your desired underline color */
}
/* .portfolio-img {
    filter: grayscale(100%); /* Initially set image to black and white */
    /* transition: filter 1s ease; /* Transition effect for grayscale */
/* }

.portfolio-img.colored {
    filter: grayscale(0%); /* Set image to full color */
/* } */


.project-info-wrap {
    margin-top: -5px;
}
.section-padding {
    padding: 44px 0;
    padding-bottom: 7px;
}


ul.port-menu {
    list-style: none;
    padding: 0;
    margin-right: 10px;
    margin-left: -29rem;
}


.section-padding1 {
    padding: 56px 0;
}
/* .single-blog-wrap .blog-content {
    padding: 35px;
    border: 1px solid #eee;
    border-top: none;
    height: 30rem;
} */
.single-blog-wrap .blog-content {
    padding: 35px;
    border: 1px solid #eee;
    border-top: none;
    height: 27rem;
}

#home-2 .single-slide-item, #home-3 .single-slide-item {
    /* background-image: url(../img/slider/slider1.jpeg); */
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    color: #fff;
    width: 100%;
    height: 852px;
    display: table;
    position: relative;
    z-index: 1;
}


#home-2 .single-slide-item1, #home-3 .single-slide-item {
    /* background-image: url(../img/slider/slider2.jpeg); */
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    color: #fff;
    width: 100%;
    height: 852px;
    display: table;
    position: relative;
    z-index: 1;
}
#breadcruproject{
    background-image: url(../img/breadcrumb/b2.jpeg);

}
.port-gallery {
    background-image: url(../img/breadcrumb/portfolio-gallery.jpeg);
    background-position: center;
}
.service-bg {
    background-image: url(../img/breadcrumb/service.jpeg);
}


.single-blog-wrap {
    background: #fff;
    margin-bottom: 2px;
}
#breadcrubblog {
    background-image: url(../img/project/Exterior/ext5.jpeg);
}

.port-menu-mobile {
    display: none;
}


/* mobile view css */
@media (max-width: 991px) {
    .port-menu-mobile {
        display: block;
    }
    .port-menu {
        display: none;
    }
    .section-title {
        text-align: right;
    }
}

/* gallry effect */
/* #port-gallery .single-portfolio-item img {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

#port-gallery .single-portfolio-item:hover img {
    filter: grayscale(0%);
} */
/* gallry effect */
@media (min-width: 768px) {
    #port-gallery .single-portfolio-item img {
        filter: grayscale(100%);
        transition: filter 0.5s ease;
    }
  
    #port-gallery .single-portfolio-item:hover img {
        filter: grayscale(0%);
    }
  }

/* Hide the mobile menu by default */
.mobile-nav {
    display: none;
}

/* Set the mobile menu to display: block when the screen width is less than or equal to 992 pixels */
@media (max-width: 992px) {
    .mobile-nav {
        display: block;
    }
}

/* Hide the mobile menu by default */
.mobile-nav {
    display: none;
}

/* Set the mobile menu to display: block when the screen width is less than or equal to 992 pixels */
@media (max-width: 992px) {
    .mobile-nav {
        display: block;
    }
}

/* Style the mobile nav bar */
.mobile-nav-bar {
    background-color: #333;
    height: 41px;
    width: 41px;
}

/* Style the hamburger button */
#hamburger {
    color: #fff;
    float: right;
    line-height: 50px;
    padding: 0 10px;
    cursor: pointer;
}

/* Style the close button */
.close-nav {
    color: #fff
}



.single-blog-wrap1 .blog-content {
    padding: 35px;
    border: 1px solid #eee;
    border-top: none;
    /* height: 27rem; */
}
.project-info-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .project-info {
    margin-bottom: 0;
  }
  
  .project-info h6 {
    margin-bottom: 5px;
    display: inline-block;
  }
  
  .project-info p {
    display: inline-block;
    margin-bottom: 0;
  }

  .project-info-wrap {
    margin-top: 7px!important;
}
@media only screen and (max-width: 600px) {
    #bgVideo {
      width: 100%;
      height: auto;
    }
  }
  @media only screen and (max-width: 600px){ .main-header .header-top .info-list {
    left: 3%!important;
    position: relative;
}}

#bgVideo1 {
    /* height: 21rem !important; */
    width: 100%;
}






  
  /* IMAGE GRID STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .image-grid figure {
    margin-bottom: 0;
  }
  
  .image-grid img {
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.2s;
  }
  
  .image-grid a:hover img {
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
  }
  
  
  /* LIGHTBOX STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .lightbox-modal .modal-content {
    background: var(--lightbox);
  }
  
  .lightbox-modal .btn-close {
    position: absolute;
    top: 20px;
    right: 18px;
    font-size: 1.2rem;
    z-index: 10;
  }
  
  .lightbox-modal .modal-body {
    display: flex;
    align-items: center;
    padding: 0;
    text-align: center;
  }
  
  .lightbox-modal img {
    width: auto;
    max-height: 100vh;
    max-width: 100%;
  }
  
  .lightbox-modal .carousel-caption {
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(36, 36, 36, 0.75);
  }
  
  .lightbox-modal .carousel-control-prev,
  .lightbox-modal .carousel-control-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
  }
  
  .lightbox-modal .carousel-control-prev {
    left: 10px;
  }
  
  .lightbox-modal .carousel-control-next {
    right: 10px;
  }