.elementor-1322 .elementor-element.elementor-element-78f18b94{margin:-40px 0px 10px 0px;padding:0px 0px 0px 0px;}.elementor-1322 .elementor-element.elementor-element-69da5abc{margin:0px 0px 70px 0px;}.elementor-1322 .elementor-element.elementor-element-3545491b .promo-banner:not(.banner-content-background) .content-banner, .elementor-1322 .elementor-element.elementor-element-3545491b .promo-banner.banner-content-background .wrapper-content-banner{max-width:160px;}.elementor-1322 .elementor-element.elementor-element-57e25394 .promo-banner:not(.banner-content-background) .content-banner, .elementor-1322 .elementor-element.elementor-element-57e25394 .promo-banner.banner-content-background .wrapper-content-banner{max-width:150px;}.elementor-1322 .elementor-element.elementor-element-75d956b7 .promo-banner:not(.banner-content-background) .content-banner, .elementor-1322 .elementor-element.elementor-element-75d956b7 .promo-banner.banner-content-background .wrapper-content-banner{max-width:165px;}.elementor-1322 .elementor-element.elementor-element-400f8709{margin:0px 0px 65px 0px;}.elementor-1322 .elementor-element.elementor-element-5780266 > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-1322 .elementor-element.elementor-element-5780266 .title-subtitle{font-weight:600;}.elementor-1322 .elementor-element.elementor-element-76bbba83 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-1322 .elementor-element.elementor-element-76bbba83:not(.elementor-motion-effects-element-type-background), .elementor-1322 .elementor-element.elementor-element-76bbba83 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0a0a0a;}.elementor-1322 .elementor-element.elementor-element-76bbba83 > .elementor-background-overlay{background-color:#000000;opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1322 .elementor-element.elementor-element-76bbba83{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 0px 75px 0px;padding:140px 30px 140px 30px;}.elementor-1322 .elementor-element.elementor-element-5a9afcb5 > .elementor-element-populated{border-style:solid;border-width:5px 5px 5px 5px;border-color:rgba(255,255,255,0.15);padding:80px 15px 80px 15px;}.elementor-1322 .elementor-element.elementor-element-763b8cf0 > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-1322 .elementor-element.elementor-element-763b8cf0 .title-after_title, .elementor-1322 .elementor-element.elementor-element-763b8cf0 .title-subtitle, .elementor-1322 .elementor-element.elementor-element-763b8cf0 .woodmart-title-container{max-width:497px;}.elementor-1322 .elementor-element.elementor-element-763b8cf0 .title-subtitle{font-size:18px;font-weight:600;}.elementor-1322 .elementor-element.elementor-element-2583842f .mc4wp-form-fields{max-width:400px;}.elementor-1322 .elementor-element.elementor-element-2d52a2be > .elementor-container{max-width:552px;}.elementor-1322 .elementor-element.elementor-element-2d52a2be{margin:0px 0px -40px 0px;padding:0px 0px 0px 0px;}.elementor-1322 .elementor-element.elementor-element-5fbbc55 > .elementor-widget-container{margin:9px 0px 0px 0px;padding:-9px 0px 6px 0px;border-radius:33px 33px 33px 33px;}.elementor-1322 .elementor-element.elementor-element-08ee886 > .elementor-container{max-width:500px;}.elementor-1322 .elementor-element.elementor-element-9bf65cc{--iteration-count:infinite;--dynamic-text-color:var( --e-global-color-accent );}.elementor-1322 .elementor-element.elementor-element-9bf65cc > .elementor-widget-container{margin:70px 0px 0px 0px;}.elementor-1322 .elementor-element.elementor-element-9bf65cc .elementor-headline{text-align:center;}.elementor-1322 .elementor-element.elementor-element-9bf65cc .elementor-headline-plain-text{color:var( --e-global-color-secondary );}.elementor-1322 .elementor-element.elementor-element-9bf65cc .elementor-headline-dynamic-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-1322 .elementor-element.elementor-element-9bf65cc .elementor-headline .elementor-headline-dynamic-wrapper{-webkit-text-stroke-width:0px;stroke-width:0px;-webkit-text-stroke-color:#46952D;stroke:#46952D;text-shadow:0px 0px 10px rgba(31.468535500856344, 90.37626037597659, 15.52114036891772, 0.3);}.elementor-1322 .elementor-element.elementor-element-375978e.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-1322 .elementor-element.elementor-element-375978e.elementor-wc-products .attachment-woocommerce_thumbnail{margin-bottom:5px;}.elementor-1322 .elementor-element.elementor-element-375978e.elementor-wc-products ul.products li.product{border-radius:4px;}.elementor-1322 .elementor-element.elementor-element-375978e.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-1322 .elementor-element.elementor-element-9c4eb98{margin:0px 0px 70px 0px;}.elementor-1322 .elementor-element.elementor-element-604c2404 > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-1322 .elementor-element.elementor-element-18a005c3:not(.elementor-motion-effects-element-type-background), .elementor-1322 .elementor-element.elementor-element-18a005c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bizbeds.co.uk/wp-content/uploads/2025/01/faqs-page-title.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1322 .elementor-element.elementor-element-18a005c3 > .elementor-container{max-width:500px;}.elementor-1322 .elementor-element.elementor-element-18a005c3{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 0px 26px 0px;padding:270px 0px 191px 0px;}.elementor-1322 .elementor-element.elementor-element-18a005c3 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1322 .elementor-element.elementor-element-72ed4fb7.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-1322 .elementor-element.elementor-element-19d754 > .elementor-widget-container{margin:0px 0px 2px 0px;}.elementor-1322 .elementor-element.elementor-element-19d754 .title{font-size:52px;line-height:1.1em;}.elementor-1322 .elementor-element.elementor-element-19d754 .title-after_title{font-size:16px;}.elementor-1322 .elementor-element.elementor-element-59697a43{--divider-border-style:solid;--divider-color:rgba(255,255,255,0.15);--divider-border-width:1px;}.elementor-1322 .elementor-element.elementor-element-59697a43 .elementor-divider-separator{width:100%;}.elementor-1322 .elementor-element.elementor-element-59697a43 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1322 .elementor-element.elementor-element-2f0c8700{text-align:left;}@media(min-width:768px){.elementor-1322 .elementor-element.elementor-element-dfc99df{width:16%;}.elementor-1322 .elementor-element.elementor-element-5a9afcb5{width:67.332%;}.elementor-1322 .elementor-element.elementor-element-69c4e4c1{width:16%;}}@media(max-width:1024px) and (min-width:768px){.elementor-1322 .elementor-element.elementor-element-114e6b05{width:50%;}.elementor-1322 .elementor-element.elementor-element-4b2f53fb{width:50%;}.elementor-1322 .elementor-element.elementor-element-5a9afcb5{width:100%;}}@media(max-width:1024px){.elementor-1322 .elementor-element.elementor-element-3545491b .promo-banner:not(.banner-content-background) .content-banner, .elementor-1322 .elementor-element.elementor-element-3545491b .promo-banner.banner-content-background .wrapper-content-banner{max-width:150px;}.elementor-1322 .elementor-element.elementor-element-400f8709{margin:0px 0px 55px 0px;}.elementor-1322 .elementor-element.elementor-element-5a9afcb5 > .elementor-element-populated{margin:0% 10% 0% 10%;--e-column-margin-right:10%;--e-column-margin-left:10%;}.elementor-1322 .elementor-element.elementor-element-375978e.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-1322 .elementor-element.elementor-element-69da5abc{margin:0px 0px 60px 0px;}.elementor-1322 .elementor-element.elementor-element-400f8709{margin:0px 0px 50px 0px;}.elementor-1322 .elementor-element.elementor-element-5780266 .title-subtitle{font-size:12px;}.elementor-1322 .elementor-element.elementor-element-5780266 .title{font-size:20px;}.elementor-1322 .elementor-element.elementor-element-76bbba83{margin:0px 0px 60px 0px;padding:70px 15px 70px 15px;}.elementor-1322 .elementor-element.elementor-element-5a9afcb5 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-1322 .elementor-element.elementor-element-375978e.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-1322 .elementor-element.elementor-element-9c4eb98{margin:0px 0px 45px 0px;}.elementor-1322 .elementor-element.elementor-element-604c2404 .title-subtitle{font-size:12px;}.elementor-1322 .elementor-element.elementor-element-604c2404 .title{font-size:20px;}.elementor-1322 .elementor-element.elementor-element-18a005c3{margin:0px 0px 60px 0px;}}/* Start custom CSS for wd_banner, class: .elementor-element-57e25394 *//* --- CSS for The Beautiful & Animated "Living Canvas" Banner --- */

/* 1. THE MAIN CONTAINER (THE "STAGE") */
/* We target your container to apply the core effects */
.main-wrapp-img {
    position: relative; /* Essential for positioning all animated layers */
    border-radius: 20px; /* A beautiful, soft rounded corner */
    overflow: hidden; /* CRUCIAL! This contains the zooming image and reveal effect */
    
    /* Sets up the 3D space for the hover effect */
    transform-style: preserve-3d;
    perspective: 1500px;
    
    /* A soft, elegant shadow to lift the element off the page */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* The beautiful 3D tilt on hover */
.main-wrapp-img:hover {
    transform: rotateX(4deg) rotateY(-3deg) scale(1.02);
}


/* 2. THE IMAGE ITSELF (THE "KEN BURNS" EFFECT) */
.main-wrapp-img .banner-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image always fills the container */
    
    /* The perpetual, cinematic zoom and pan animation */
    animation: ken-burns-zoom 20s infinite alternate ease-in-out;
    
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* The image zooms in slightly more on hover for an extra layer of interaction */
.main-wrapp-img:hover .banner-image img {
    transform: scale(1.05);
}


/* 3. THE DRAMATIC "CURTAIN REVEAL" ENTRANCE */
/* We use a pseudo-element to create a solid overlay that wipes away */
.main-wrapp-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Position it on top of everything */
    
    background: #1c1c1c; /* The dark curtain color */
    
    /* The wipe animation */
    transform-origin: left;
    animation: reveal-wipe 1.2s cubic-bezier(0.83, 0, 0.17, 1) 0.3s forwards;
}


/* 4. THE SUBTLE "LIGHT PULSE" VIGNETTE */
/* A second pseudo-element creates a vignette overlay */
.main-wrapp-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Position it between the image and the curtain */
    
    /* A soft, dark radial gradient */
    background: radial-gradient(circle, 
        transparent 50%, 
        rgba(0,0,0,0.4) 100%
    );
    
    /* The perpetual pulsing animation */
    opacity: 0.8;
    animation: vignette-pulse 5s infinite alternate ease-in-out;
}


/* 5. ALL THE KEYFRAME ANIMATIONS */

/* The entrance animation where the curtain wipes away */
@keyframes reveal-wipe {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* The perpetual, slow zoom and pan for the image */
@keyframes ken-burns-zoom {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.15) translate(2%, -2%);
    }
}

/* The subtle pulsing of the dark vignette */
@keyframes vignette-pulse {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 0.5;
    }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-400f8709 *//*
=========================================================
★★ SPECTACULAR & INTERACTIVE BizBeds Product Categories ★★
=========================================================
This code transforms the WoodMart category carousel into
a modern, animated, and highly appealing element.
*/

/* --- 1. The Main Category Card Styling --- */
/* We target the widget's unique ID for precision */
.elementor-element-21c84d18 .category-grid-item {
    position: relative; /* Essential for positioning the overlay */
    border-radius: 18px !important; /* Beautifully rounded corners */
    overflow: hidden; /* CRITICAL: This crops the zooming image */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-backface-visibility: hidden; /* Prevents flicker on animations */
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0); /* GPU acceleration for smooth animations */
}

/* --- 2. The Interactive Image --- */
.elementor-element-21c84d18 .category-image-wrapp img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* --- 3. The Elegant Overlay ("hover-mask") --- */
.elementor-element-21c84d18 .hover-mask {
    /* Covers the entire card */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* A beautiful gradient from transparent to dark */
    background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.5) 50%, transparent 100%);

    /* Position the text at the bottom */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
    box-sizing: border-box; /* Ensures padding is included in the height/width */
    
    /* Start hidden and prepare for animation */
    opacity: 0;
    transform: translateY(30px); /* Starts slightly lower */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- 4. The Animated Title Text --- */
.elementor-element-21c84d18 .wd-entities-title {
    color: #FFFFFF !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    
    /* Prepare for animation */
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0.1s; /* Note the 0.1s delay */
}

/* --- 5. The Modern Product Count Badge --- */
.elementor-element-21c84d18 .wd-entities-title .count {
    background-color: #83B735 !important; /* Your brand green */
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    margin-left: 8px !important;
    display: inline-block;
    vertical-align: middle;
}

/*
=========================================================
★★ THE HOVER MAGIC - Bringing it all to life ★★
=========================================================
*/

/* --- When you hover over the entire card... --- */
.elementor-element-21c84d18 .category-grid-item:hover {
    transform: translateY(-10px); /* The card lifts up */
    box-shadow: 0 20px 45px rgba(23, 43, 77, 0.2); /* The shadow becomes more dramatic */
}

/* The image inside zooms in */
.elementor-element-21c84d18 .category-grid-item:hover .category-image-wrapp img {
    transform: scale(1.1);
}

/* The overlay and title fade & slide into view */
.elementor-element-21c84d18 .category-grid-item:hover .hover-mask,
.elementor-element-21c84d18 .category-grid-item:hover .wd-entities-title {
    opacity: 1;
    transform: translateY(0);
}/* End custom CSS */
/* Start custom CSS for wd_instagram, class: .elementor-element-5fbbc55 *//* --- CSS for The "Luminous Droplet" (Final, PERFECTLY ROUNDED Version) --- */

/* 1. THE SMALLER, MORE ROUNDED CONTAINER */
/* Using a more powerful .elementor-1322 .elementor-element.elementor-element-5fbbc55 to ensure styles are applied */
.elementor-widget-container .instagram-content-inner {
    max-width: 320px;
    min-height: 220px;
    margin: 0 auto 60px auto;
    padding: 30px;
    position: relative;
    overflow: hidden; /* This is CRUCIAL for rounding to work */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    
    background: #ffffff;
    border-radius: 30px; /* MORE ROUNDED corners */
    border: 1px solid #f0f0f0;
    
    opacity: 0;
    animation: luminous-container-load-in 0.5s ease-out 0.2s forwards;
    
    transition: all 0.4s ease;
}


/* 2. THE VIBRANT "CHASING LIGHT" BORDER */
.elementor-widget-container .instagram-content-inner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    
    background: conic-gradient(
        from 0deg, transparent 0%, transparent 70%, #83B735 95%, #a1e847
    );
    
    animation: spin-luminous-border 4s linear infinite;
}

/* THE MASK WITH THE CORRECTED, ROUNDED CORNERS */
.elementor-widget-container .instagram-content-inner::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: 28px; /* PERFECTLY ROUNDED inner mask */
    transition: background 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}


/* 3. THE HIGH-ENERGY HOVER EFFECTS */
.elementor-widget-container .instagram-content-inner:hover {
    box-shadow: 0 0 45px 0px rgba(131, 183, 53, 0.5);
    transform: translateY(-10px);
}

.elementor-widget-container .instagram-content-inner:hover::before {
    animation-duration: 1.2s;
}


/* 4. REFINED TEXT STYLING */
.elementor-widget-container .instagram-content-inner h4,
.elementor-widget-container .instagram-content-inner h6,
.elementor-widget-container .instagram-content-inner p {
    position: relative;
    z-index: 2;
}

.elementor-widget-container .instagram-content-inner h4 strong {
    font-size: 1.8em;
    font-weight: 700;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    
    position: relative;
    display: inline-block;
    
    opacity: 0;
    animation: luminous-text-flicker-in 1s ease-out 0.8s forwards;
    
    transition: all 0.3s ease;
}

.elementor-widget-container .instagram-content-inner h6 span {
    font-size: 1.1em;
    font-weight: 400;
    color: #5a677d !important;
    opacity: 0;
    animation: luminous-text-flicker-in 1s ease-out 1s forwards;
    transition: color 0.4s ease;
}

.elementor-widget-container .instagram-content-inner p { display: none; }

.elementor-widget-container .instagram-content-inner:hover h4 strong,
.elementor-widget-container .instagram-content-inner:hover h6 span {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}


/* 5. THE "INK DROPLET" HOVER EFFECT */
.elementor-widget-container .instagram-content-inner h4 strong::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    
    width: 1px;
    height: 1px;
    
    background: #83B735;
    border-radius: 50%;
    
    transform: translate(-50%, -50%) scale(0);
    
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.elementor-widget-container .instagram-content-inner:hover h4 strong::before {
    transform: translate(-50%, -50%) scale(500);
}


/* 6. KEYFRAME ANIMATIONS (UNCHANGED) */

@keyframes luminous-container-load-in {
    to { opacity: 1; }
}
@keyframes spin-luminous-border {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes luminous-text-flicker-in {
    0%   { opacity: 0; text-shadow: 0 0 5px rgba(131, 183, 53, 0.7); }
    70%  { opacity: 0.8; text-shadow: 0 0 10px rgba(131, 183, 53, 0.9); }
    80%  { opacity: 0.6; }
    90%  { opacity: 1; text-shadow: none; }
    100% { opacity: 1; }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-2d52a2be *//* --- CSS for The Flawless "Polished Trio" Layout --- */

/* 1. GENERAL SECTION & LAYOUT CONTAINER */
.elementor-section.elementor-element-2d52a2be {
    background-color: #f8f9fa;
    padding: 80px 0;
    overflow: hidden; /* Ensures nothing spills out */
}

/* The flex container for perfect alignment */
.elementor-widget-wrap .instagram-pics .row {
    display: flex;
    justify-content: center; /* Center the 3 boxes */
    align-items: stretch; /* Make boxes equal height */
    flex-wrap: nowrap; /* CRUCIAL: Prevents any wrapping */
    gap: 30px; /* Space between boxes */
    padding: 20px;
    margin: 0;
}


/* 2. STYLING FOR THE 2 SIDE IMAGE CARDS */
.instagram-picture {
    flex: 0 0 300px; /* Fixed width, no growing or shrinking */
    height: auto; /* Auto-adjust height */
    position: relative;
    border-radius: 16px;
    background-color: #fff; /* White background for loading */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.instagram-picture .wrapp-picture, .instagram-picture .wrapp-picture a {
    width: 100%;
    height: 100%;
}

.instagram-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.4s ease;
}

/* Image Card Hover Effect */
.instagram-picture:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}


/* 3. THE BEAUTIFUL, ANIMATED CENTRAL BOX */
/* Target the middle of the 3 boxes */
.instagram-picture:nth-child(2) {
    background: #83B735; /* Your Neon Green */
    display: flex; /* Enables flexbox for centering content */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: #ffffff;
    
    /* The "Breathing" Animation */
    animation: breathing-glow 4s infinite ease-in-out;
}

/* Hide the placeholder image/link in the central box */
.instagram-picture:nth-child(2) .wrapp-picture {
    display: none;
}

/* Keyframes for the refined, softer glow effect */
@keyframes breathing-glow {
    0% { box-shadow: 0 8px 30px rgba(131, 183, 53, 0.3); }
    50% { box-shadow: 0 14px 50px rgba(131, 183, 53, 0.6); }
    100% { box-shadow: 0 8px 30px rgba(131, 183, 53, 0.3); }
}

/* Hover effect for the central box - 3D Push */
.instagram-picture:nth-child(2):hover {
    transform: scale(0.98); /* Slightly shrink the box */
    box-shadow: 0 5px 20px rgba(131, 183, 53, 0.5); /* Bring shadow inwards */
}


/* 4. EXQUISITE DETAILS FOR THE CENTRAL BOX */
/* Elegant inset border appears on hover */
.instagram-picture:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(255, 255, 255, 0); /* Start transparent */
    border-radius: 8px;
    transition: all 0.4s ease;
}
.instagram-picture:nth-child(2):hover::before {
    border-color: rgba(255, 255, 255, 0.8); /* Fade in the border */
}

/* Styling the animated text content */
.center-box-content {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.instagram-picture:nth-child(2):hover .center-box-content {
    transform: scale(0.95); /* Push the content "in" */
}

.center-box-content .instagram-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}
.instagram-picture:nth-child(2):hover .instagram-icon {
    transform: rotate(-15deg) scale(1.1); /* Animate icon on hover */
}

.center-box-content h4 {
    font-size: 2em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    margin: 0;
}
.center-box-content h6 {
    font-size: 1.1em;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 8px;
}

/* Hide the default hover mask for ALL boxes as it's not needed */
.hover-mask {
    display: none !important;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-c375468 *//*
=========================================================
★★ SPECTACULAR & VIBRANT BizBeds Product Grid ★★
=========================================================
This code transforms the standard WooCommerce product grid
into a modern, interactive, and premium shopping experience.
*/

/* --- 1. The Main Product Card --- */
/* We use the unique widget ID to target only this section */
.elementor-element-375978e .product-grid-item {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 20px !important; /* Soft rounded corners */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden; /* CRITICAL for the animations to look clean */
    display: flex; /* Helps align content vertically */
    flex-direction: column;
}

/* --- 2. The Image & Top Section --- */
.elementor-element-375978e .product-element-top {
    border-bottom: 1px solid #f0f0f0;
    background-color: #fdfdfd;
}

.elementor-element-375978e .product-image-link img {
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* --- 3. Product Info Area (Title, Price, etc.) --- */
.elementor-element-375978e .product-wrapper {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Makes this area fill the remaining space */
}

/* --- 4. Beautiful & Vibrant Typography --- */
/* Product Title */
.elementor-element-375978e .wd-entities-title a {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important; /* Dark slate color */
    transition: color 0.3s ease;
}

/* Category Link */
.elementor-element-375978e .wd-product-cats {
    order: -1; /* Moves the category to the top of the text block */
    margin-bottom: 8px !important;
}
.elementor-element-375978e .wd-product-cats a {
    font-size: 11px !important;
    text-transform: uppercase;
    font-weight: 600;
    color: #95a5a6; /* Muted grey */
    letter-spacing: 0.5px;
}

/* Price */
.elementor-element-375978e span.price {
    margin-top: auto; /* Pushes the price to the bottom */
    padding-top: 10px;
}
.elementor-element-375978e .price,
.elementor-element-375978e .price .woocommerce-Price-amount.amount {
    color: #83B735 !important; /* Your brand green */
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* Star Rating */
.elementor-element-375978e .star-rating {
    margin-bottom: 15px !important;
}
.elementor-element-375978e .star-rating span::before {
    color: #fbbc05 !important; /* Vibrant gold color for stars */
}


/* --- 5. Hiding Buttons By Default for a Cleaner Look --- */
.elementor-element-375978e .wd-add-btn,
.elementor-element-375978e .wd-buttons {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease;
    z-index: 2;
}

/*
=========================================================
★★ THE SPECTACULAR HOVER INTERACTION ★★
=========================================================
*/

/* --- When you hover over the product card... --- */
.elementor-element-375978e .product-grid-item:hover {
    transform: translateY(-12px); /* Lift the card */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); /* Enhance the shadow */
    border-color: #e0e0e0;
}

/* Zoom the image and add a subtle brightness */
.elementor-element-375978e .product-grid-item:hover .product-image-link img {
    transform: scale(1.08);
    filter: brightness(1.03);
}

/* Make the product title turn green */
.elementor-element-375978e .product-grid-item:hover .wd-entities-title a {
    color: #83B735 !important;
}

/* --- Reveal the Action Buttons with style --- */
.elementor-element-375978e .product-grid-item:hover .wd-add-btn,
.elementor-element-375978e .product-grid-item:hover .wd-buttons {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger the animation of the top icons */
.elementor-element-375978e .product-grid-item:hover .quick-view { transition-delay: 0.1s; }
.elementor-element-375978e .product-grid-item:hover .wd-wishlist-btn { transition-delay: 0.2s; }

/* --- Style the main "Select Options" / "Add to Cart" Button --- */
.elementor-element-375978e .wd-add-btn a.button {
    background: #83B735 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(131, 183, 53, 0.4);
}

.elementor-element-375978e .wd-add-btn a.button:hover {
    background: #6f9f2c !important; /* Darker green on hover */
    box-shadow: 0 6px 20px rgba(131, 183, 53, 0.6);
    transform: scale(1.05);
}
@media (max-width: 767px) {
    /* 1. Force one column layout and remove gaps */
    .elementor-element-375978e .elementor-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .elementor-element-375978e .elementor-grid-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* 2. Force equal card height */
    .elementor-element-375978e .product-grid-item {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
        min-height: 460px !important; /* Set your desired consistent height */
        max-height: 100% !important;
        overflow: hidden;
    }

    /* 3. Image section should not expand card */
    .elementor-element-375978e .product-element-top {
        flex-shrink: 0 !important;
    }

    /* 4. Text block fills the rest */
    .elementor-element-375978e .product-wrapper {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start;
        padding: 20px !important;
        overflow: hidden;
    }

    /* 5. Prevent long titles from breaking layout */
    .elementor-element-375978e .wd-entities-title a {
        font-size: 16px !important;
        line-height: 1.3 !important;
        max-height: 3.9em; /* Limit to ~3 lines */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    /* 6. Force price & buttons at bottom */
    .elementor-element-375978e span.price {
        margin-top: auto !important;
        padding-top: 12px !important;
    }

    .elementor-element-375978e .wd-add-btn,
    .elementor-element-375978e .wd-buttons {
        opacity: 1 !important;
        transform: none !important;
        position: relative !important;
        margin-top: 15px !important;
    }

    /* Optional: uniform image sizing */
    .elementor-element-375978e .product-image-link img {
        max-height: 220px;
        width: auto;
        margin: 0 auto;
        display: block;
        object-fit: contain;
    }
}/* End custom CSS */