.gallery-navbar{
    margin-top: 0px;
}

.gallery-section{
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("../Assets/workbg.jpg");
background-repeat: no-repeat !important;
background-position: center !important ;
background-size: cover !important;
padding: 40px 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

/*.gallery-item img {
max-width: 100%;
object-fit: cover;
width: 300px;
height: 300px;

cursor: pointer;
padding-bottom: 60px;

}
*/
/*
.modal {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 50%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;

}

.modal-content {
margin: auto;
display: block;
max-width: 50%;
max-height: 50%;
}

.close {
color: #fff;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 20px;
right: 30px;
cursor: pointer;
}*/


/* Slideshow controls */
/*.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.prev {
    left: 15px;
}

.next {
    right: 15px;
}

@media screen and (max-width: 400px) {

    .gallery-item img{
       width: 200px;
height: 300px;
    }
    
}*/





.btn:focus, .btn:active, button:focus, button:active {
   outline: none !important;
   box-shadow: none !important;
   }
   #image-gallery .modal-footer{
   display: block;
   }
/*   .thumb{
   margin-top: 15px;
   margin-bottom: 15px;
   }
   .img-thumbnail{
   height: 200px;
   width: 200px;

   }*/
   /*FOTER STYLE*/
   .footer-right a {
   color: #444444;
   }
   .footer-right a p:hover {
   color: #fa360a;
   padding-left: 5px;
   }
   .copyright-area a{
   color: #444444;
   }
   .copyright-area a:hover{
   color: #fa360a;
   padding-left: 5px;
   }
   .filter-button{
      background-color: #2f3191;
   }


.modal {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 50%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;

}

.modal-content {
margin: auto;
display: block;
min-width: 100%;
min-height: 100%;
width: 600px;
}

/* Modal header */
.modal-header {
    border-bottom: none; /* No bottom border for header */
    padding: 0.5rem 1rem; /* Padding for header */
    background-color: #2f3191; /* Your modal header background color */
   
    color: white;
    text-align: center; /* Center align header content */
    position: relative; /* Ensure relative position for header */
}

/* Modal body */
.modal-body {
    padding: 0; /* No padding inside body */
   
}
.modal-title{
    color: white;
}

.modal-body img{
    margin-left: 10px;
    align-items: center;
    width: 750px;
    justify-content: center;
    object-fit: cover;
}

/* Modal footer */
.modal-footer {
    border-top: none; /* No top border for footer */
    padding: 1rem 2rem; /* Padding for footer */
    background-color: #ffffff; /* Your modal footer background color */
    text-align: center; /* Center align footer content */
}

/* Close button */
.btn-close {
    color: #fff; /* Text color for close button */
    font-size: 1.5rem; /* Font size for close button */
    font-weight: bold; /* Bold text for close button */
    position: absolute; /* Position the close button */
    top: 10px; /* Adjust top position */
    right: 10px; /* Adjust right position */
    background: none; /* Remove background */
    border: none; /* Remove border */
    cursor: pointer; /* Add pointer cursor */
    z-index: 1070; /* Ensure close button is above other elements */
}

.btn-close:focus {
    outline: none; /* Remove outline on focus */
}

/* Navigation buttons */
.btn-secondary {
    background-color: #2f3191; /* Button background color */
    color: #ffffff; /* Button text color */
    border: none; /* Remove border */
}

.btn-secondary:hover {
    background-color: #1e1f6b; /* Darker background color on hover */
}

/*.thumb {
    margin-top: 15px;
    margin-bottom: 15px;
}


.btn:focus, .btn:active, button:focus, button:active {
    outline: none !important;
    box-shadow: none !important;
}*/