/*--------------------------------------------------------------
  Gallery Section Styles
--------------------------------------------------------------*/

/* Section container for the gallery */
.section.gallery {
    padding-bottom: 0; /* Removes default padding bottom from the section */
}
  
  /*--------------------------------------------------------------
    Page Title Styles
  --------------------------------------------------------------*/
  
/* Styles for the page title within the gallery section */
.gallery .page-title .lead {
    color: #000; /* Black text color for the gallery title */
    /* Font family is inherited from main.css or Bootstrap */
}
  
  /*--------------------------------------------------------------
    Popup Gallery Grid Styles
  --------------------------------------------------------------*/
  
/* Adjustments for the popup gallery grid to remove gutter spacing */
.popup-gallery {
    margin-right: -5px; /* Negative right margin to offset padding */
    margin-left: -5px;  /* Negative left margin to offset padding */
}
  
/* Padding for columns within the popup gallery to create spacing between images */
.popup-gallery .col-md-4,
.popup-gallery .col-sm-4,
.popup-gallery .col-xs-4 {
    padding-right: 5px; /* Right padding for column items */
    padding-left: 5px;  /* Left padding for column items */
}
  
  /*--------------------------------------------------------------
    Gallery Item (Image Container) Styles
  --------------------------------------------------------------*/



  


/* Styles for the wrapper of each gallery item */
.w-item {
    position: relative;      /* Position relative for overlay positioning */
    overflow: hidden;       /* Hide any content that overflows the container */
    width: 100%;            /* Full width of the parent container */
    height: 330px;          /* Fixed height for gallery items, adjust as needed */
    margin-bottom: 20px;     /* Spacing below each gallery item */
    border-radius: 1px;    /* Rounded corners for the gallery item */
    border: 4px groove;
    border-image: linear-gradient(180deg, #E41B23, #000) 1;
    box-shadow: #555 -3px 3px 8px 3px; /* Shadow effect for depth */
}
  
/* Styles for the link and image inside the gallery item */
.w-item a,
.w-item a img {
    display: block;         /* Make the link and image behave as block elements */
    width: 100%;        /* Ensure image doesn't exceed container width */
    height: 100%;           /* Ensure image fills the container height */
    object-fit: cover;      /* Cover the container, cropping if necessary to maintain aspect ratio */
    transition: transform 0.4s linear; /* Smooth transition for hover effect */
    cursor: pointer;        /* Change cursor to pointer on hover */
    object-fit: cover;
}
  
/* Hover effect to scale the image slightly on hover */
.w-item a:hover img {
    transform: scale(1.05); /* Scale image up by 5% on hover */
}
  
  /*--------------------------------------------------------------
    Project Info Overlay Styles
  --------------------------------------------------------------*/
  
/* Styles for the overlay that appears on image hover */
.w-item a .project-info {
    position: absolute;     /* Position overlay over the image */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 0, 0, 0.5); /* Semi-transparent red overlay background */
    padding-top: 50%;       /* Vertically center content within the overlay */
    text-align: center;      /* Center text horizontally within the overlay */
    opacity: 0;             /* Initially hidden */
    transition: opacity 0.25s ease; /* Fade in/out transition for overlay */
}
  
/* Show the overlay on hover of the gallery item link */
.w-item a:hover .project-info {
    opacity: 1;             /* Make overlay visible on hover */
}
  
  /*--------------------------------------------------------------
    Search Icon Styles within Project Info
  --------------------------------------------------------------*/
  
/* Styles for the search icon within the project info overlay */
.w-item a .project-info .project-icon {
    position: absolute;      /* Position icon within the overlay */
    left: 50%;              /* Center horizontally */
    top: 50%;               /* Center vertically */
    transform: translate(-50%, -50%) scale(0); /* Initially scaled down and centered */
    opacity: 0;              /* Initially hidden */
    transition: transform 0.25s ease, opacity 0.25s ease; /* Smooth transition for scaling and opacity */
    color: #fff;             /* White color for the search icon */
}
  
  /* Styles for the font awesome icon itself */
.w-item a .project-info .project-icon .fa {
    font-size: 40px;         /* Size of the search icon */
    opacity: 0.9;           /* Slightly transparent icon */
    display: inline-block;   /* Display as inline-block for spacing and layout */
    color: #fff;
}
  
/* Animate the search icon to scale up and become visible on hover */
.w-item a:hover .project-info .project-icon {
    transform: translate(-50%, -50%) scale(1); /* Scale icon to normal size on hover */
    opacity: 1;              /* Make icon visible on hover */
}
  
  /*--------------------------------------------------------------
    Category Buttons Styles
  --------------------------------------------------------------*/
  
/* Container for category buttons */
.category-buttons {
    display: flex;          /* Use flexbox for horizontal button layout */
    justify-content: flex-start; /* Align buttons to the start of the container */
    margin-bottom: 20px;     /* Spacing below the category buttons */
}
  
  /* Styles for each category button */
.category-buttons button {
    background-color: transparent; /* Transparent button background */
    border: none;             /* Remove default button border */
    padding: 10px 5px;        /* Padding around button text */
    margin: 0 5px;          /* Spacing between buttons */
    cursor: pointer;        /* Change cursor to pointer on hover */
    transition: color 0.3s;   /* Smooth color transition on hover/active */
    font-family: 'Oswald', sans-serif; /* Font family for buttons */
    font-weight: bold;        /* Bold font weight */
    text-transform: uppercase; /* Uppercase text transformation */
    color: #000;             /* Black text color for buttons */
    font-size: 20px;          /* Font size for buttons */
    position: relative;      /* Position relative for underline effect */
}
  
/* Styles for active and hover states of category buttons */
.category-buttons button.active,
.category-buttons button:hover {
    color: #f00;             /* Red text color for active/hover states */
}
  
  /* Double underline effect for active/hover buttons using pseudo-elements */
.category-buttons button.active::after,
.category-buttons button:hover::after {
    content: '';              /* Required for pseudo-element to display */
    position: absolute;       /* Position underline relative to button */
    left: 0;
    bottom: 0;
    width: 100%;             /* Underline full width of the button */
    height: 6px;              /* Total height of the double underline */
    background-image: linear-gradient(to bottom, #f00, #f00), /* First underline color and direction */
                       linear-gradient(to bottom, #f00, #f00); /* Second underline color and direction */
    background-repeat: no-repeat; /* Prevent background image repetition */
    background-size: 100% 1px, 100% 2px; /* Sizes of the two underlines */
    background-position: bottom left, bottom left; /* Initial position of underlines */
    background-position-y: calc(100% - 5px), 100%; /* Vertical positions to create spacing between underlines */
}
  
  /*--------------------------------------------------------------
    Load More Link Styles
  --------------------------------------------------------------*/
  
/* Styles for the "Load More" link */
.loadmore a {
    color: #fff;             /* White text color for the load more link */
    background-color: black;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 10px 20px;      /* Padding around the link */
    box-shadow: #555 0px 0px 5px; /* Shadow effect for depth */
}
  
  /*--------------------------------------------------------------
    Responsive Adjustments
  --------------------------------------------------------------*/
  
  /* Media query for screens smaller than 479px */
@media (max-width: 479px) {
    .category-buttons {
        justify-content: center; /* Center category buttons on smaller screens */
    }
}