/* New Gallery carousel fix */
/* Required for slidesPerView: "auto" to work — without it the slides have no
   width and Swiper can't compute a translate, so the carousel stays static.
   This rule exists in the original theme's style.css but was missing here. */
.swiper-width-auto .swiper-slide {
    width: auto;
}
/* Swiper's own container clips overflow (needed so off-screen slides stay
   hidden while sliding). That also clips the gallery-image box-shadow at the
   top/bottom since the slides fill the container's height exactly — this
   padding gives the shadow room to render inside that clipped box. */
.image-gallery-style-01 {
    padding: 20px 0;
}
/* Space + bullet styling for the pagination dots used by the
   "image-gallery-style-01" carousel (section starting at index.html:561). */
.slider-four-slide-pagination {
    position: relative;
    margin-top: 25px;
    text-align: center;
}
.slider-four-slide-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #cbcbcb;
    opacity: 1;
    margin: 0 5px;
}
.slider-four-slide-pagination .swiper-pagination-bullet-active {
    background-color: #252523;
}

/* --- Utility/component classes used by the New Gallery markup (index.html)
   that don't exist anywhere in main.css/spacing.css in this project. Pulled
   only for the classes this section actually uses, from the original theme
   (style.css) plus the barber.css override the user provided. --- */

/* smooth hover transitions on gallery-box children, e.g. .gallery-hover, img */
.transition-inner-all * {
    -webkit-transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1);
    transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1);
}

/* gallery box + reveal-on-hover overlay */
/* no overflow:hidden here — .gallery-image already clips its own zoomed img
   (it has its own overflow-hidden class), and keeping it off .gallery-box
   lets the box-shadow below render outside instead of being clipped. */
.gallery-box {
    will-change: transform;
    cursor: pointer;
}
.gallery-box .move-bottom-top {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    opacity: 0;
}
.gallery-box:hover .move-bottom-top {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
.image-gallery-style-01 .gallery-box .gallery-image {
    will-change: transform;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.image-gallery-style-01 .gallery-box:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /* barber.css override: keep the zoomed image crisp, no blur on hover */
    -webkit-filter: blur(0px);
    filter: blur(0px);
}

/* color / background utilities */
.bg-dark-gray {
    background-color: #252523;
}
.text-dark-gray {
    color: #252523;
}

/* size / position utilities */
.border-radius-6px {
    border-radius: 6px !important;
}
.h-480px {
    height: 480px !important;
}
.w-80px {
    width: 80px !important;
}
.h-80px {
    height: 80px !important;
}
.top-0px {
    top: 0px;
}
.left-0px {
    left: 0px;
}
.icon-extra-medium {
    font-size: 24px;
}
@media (max-width: 767px) {
    .sm-h-250px {
        height: 250px !important;
    }
}

/* --- Video slides at the start of the gallery carousel: play button with a
   "sonar" pulse ring, pulled from the original theme (style.css) since these
   classes don't exist in main.css either. Only the "extra-large" size is used
   here (the size the markup requests). --- */
.absolute-middle-center {
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.video-icon-box {
    z-index: 1;
}
.video-icon-box > span {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}
.video-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.video-icon i {
    margin-left: 5px;
}
.video-icon .video-icon-sonar {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    z-index: -10;
    -webkit-animation: video-icon-sonar 2s linear infinite;
    animation: video-icon-sonar 2s linear infinite;
}
.video-icon .video-icon-sonar .video-icon-sonar-bfr {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: -25px;
    left: -25px;
    z-index: -100;
}
.video-icon-extra-large.video-icon-box .video-icon i {
    margin-left: 10px;
}
.video-icon-extra-large .video-icon {
    width: 120px;
    height: 120px;
    font-size: 30px;
}
.video-icon-extra-large .video-icon .video-icon-sonar .video-icon-sonar-bfr {
    width: 170px;
    height: 170px;
}
@keyframes video-icon-sonar {
    0% {
        opacity: 1;
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}
@media (max-width: 767px) {
    .video-icon-extra-large .video-icon {
        width: 80px;
        height: 80px;
        font-size: 22px;
    }
    .video-icon-extra-large .video-icon .video-icon-sonar .video-icon-sonar-bfr {
        width: 115px;
        height: 115px;
    }
}

/* Reserve extra space above the image so the close button (fixed top-right)
   never overlaps tall images — matches the dark gutter the plugin already
   draws via .mfp-figure:after, just made taller. */
.mfp-image-holder img.mfp-img {
    padding-top: 90px;
}
.mfp-image-holder .mfp-figure:after {
    top: 90px;
}

/* Lightbox (Magnific Popup) close button — round white button with an X icon
   instead of the plugin's default full-width "x" bar. Covers both the image
   lightbox (.popup-image) and the video popup (.popup-video, iframe type) —
   the only two Magnific Popup uses on this page. */
.mfp-image-holder button.mfp-close,
.mfp-image-holder button.mfp-close:active,
.mfp-iframe-holder button.mfp-close,
.mfp-iframe-holder button.mfp-close:active {
    width: 44px;
    height: 44px;
    position: fixed;
    right: 20px;
    top: 20px;
    background-color: #ffffff;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    opacity: 1;
    padding: 0;
    text-align: center;
}
.mfp-image-holder button.mfp-close:before,
.mfp-image-holder button.mfp-close:active:before,
.mfp-iframe-holder button.mfp-close:before,
.mfp-iframe-holder button.mfp-close:active:before {
    content: "\f00d";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    color: #252523;
    font-size: 18px;
}
@media (max-width: 767px) {
    .mfp-image-holder button.mfp-close,
    .mfp-image-holder button.mfp-close:active,
    .mfp-iframe-holder button.mfp-close,
    .mfp-iframe-holder button.mfp-close:active {
        right: 10px;
        top: 10px;
    }
}