/*
Theme Name: WOW
 
 */
 @media only screen and (max-width: 500px) {
         .fs-xs-30 {
        font-size: 25px;
    }
    .tp-service-area.tp-bg-common-black.height-fixed-100.pt-80 {
    padding-bottom: 37px;
}
.tp-service-area.tp-bg-common-black.height-fixed-100.pt-80 .row.pt-30 .col-xxl-4.col-xl-4.col-lg-4.col-md-4 {
    display: none;
}
.tp-service-area.tp-bg-common-black.pt-60.pb-60.height-fixed-100 .container-fluid.container-1524 .row.align-items-center .col-sm-6 {
    display: none;
}
.tp-product-hero.pre-header.tp-bg-common-sugar h2 {
    font-size: 28px;
}
}

/* =========================================
   WORDPRESS GALLERY + SIMPLE LIGHTBOX
   RESPONSIVE + HD POPUP
========================================= */

/* ===== Gallery Grid Layout ===== */
.gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.gallery-item {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.gallery-item dt {
    margin: 0 !important;
}

/* ===== Thumbnail Images ===== */
.gallery-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    transition: all 0.3s ease;
    image-rendering: auto;
}

/* Hover Effect */
.gallery-item img:hover {
    transform: scale(1.03);
}

/* ===== Tablet View ===== */
@media (max-width: 991px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Mobile View (SINGLE COLUMN) ===== */
@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr);
        gap: 14px;
    }
}

/* =========================================
   SIMPLE LIGHTBOX POPUP STYLING
========================================= */

/* Overlay */
.sl-overlay {
    background: rgba(0, 0, 0, 0.96) !important;
}

/* Popup Image */
.sl-wrapper .sl-image img {
    max-width: 96vw !important;
    max-height: 96vh !important;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.7);
}

/* Close Button */
.sl-wrapper .sl-close {
    color: #fff !important;
    font-size: 32px !important;
    opacity: 0.9;
}

.sl-wrapper .sl-close:hover {
    opacity: 1;
}

/* Next / Prev Buttons */
.sl-wrapper .sl-navigation button {
    color: #fff !important;
    font-size: 40px !important;
    opacity: 0.85;
}

.sl-wrapper .sl-navigation button:hover {
    opacity: 1;
}

/* Caption */
.sl-wrapper .sl-caption {
    color: #fff !important;
    font-size: 16px;
    opacity: 0.9;
    text-align: center;
}

/* Prevent background scroll */
body.sl-open {
    overflow: hidden !important;
}

/* =========================================
   MOBILE POPUP OPTIMIZATION
========================================= */
@media (max-width: 600px) {

    .sl-wrapper .sl-image img {
        max-width: 98vw !important;
        max-height: 92vh !important;
        border-radius: 6px;
    }

    .sl-wrapper .sl-close {
        font-size: 28px !important;
    }

    .sl-wrapper .sl-navigation button {
        font-size: 32px !important;
    }
}
.gallery br {
    display: none !important;
}
/* Fix SiteOrigin self-hosted video height */
.so-widget-sow-video video {
    width: 100% !important;
    height: 400px !important;   /* change this to your desired height */
    object-fit: cover;
}
.so-widget-sow-video,
.so-widget-sow-video .sow-video-wrapper {
    height: 400px !important;
}

.so-widget-sow-video video,
.so-widget-sow-video iframe {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
}
/* Force consistent height for SiteOrigin / WordPress videos */
.wp-video,
.mejs-container,
.wp-video video {
    width: 100% !important;
    height: 300px !important;   /* 🔥 CHANGE THIS HEIGHT AS YOU LIKE */
    max-height: 300px !important;
}

/* Crop video nicely inside box */
.wp-video video {
    object-fit: cover !important;
}

.wp-video,
.mejs-container,
.wp-video video {
    width: 100% !important;
    height: 400px !important;
    max-height: 400px !important;
}

.wp-video video {
    object-fit: cover !important;
}

@media (max-width: 768px) {
    .wp-video,
    .mejs-container,
    .wp-video video {
        height: 400px !important;
        max-height: 400px !important;
    }
}