/*
Theme Name: Divi Child Theme
Description: Divi Child Theme
Author:  Shekhar Suman
Author URI:  http://www.brandshark.in
Template: Divi
Version:  1.0.0
*/

 
/* =Theme customizations
------------------------------------------------------- */

.page-id-4115 .collectionl {
    display: none !important;
}

.page-id-4115 .wpgb-grid-22 .wpgb-area.wpgb-area-bottom-1 {
    width: auto !important;
    display: block !important;
}

.page-id-4115 .wpgb-facet.wpgb-facet-8 {
    width: 100vw;
    text-align: center;
}



  
      
        label {
            cursor: pointer;
        }


        .download {
            background-color: transparent;
            color: #fff;
            border: 1px solid #fff;
            padding: 10px 20px;
            cursor: pointer;
            transition: 0.3s;
        }

        .download:hover {
            background-color: #fff;
            color: #000;
        }

        .labe1 {
            display: flex;
            gap: 30px;
            align-items: center;
            justify-content: space-evenly;
        }

        .labe1 img {
            width: 50px;
            height: 50px;
            object-fit: cover;
        }

        .chip_size label {
            background: #a7a4a4;
            padding: 10px;
            border-radius: 5px;
        }

        input[type="radio"] {
            display: none;
        }

        .image-container {
            position: relative;
        }

     

        .terrazzo-preview {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
            / Stack layers /
        }

        .terrazzo-preview img {
            display: none;
           
        }


        
        .chip_size label.active {
            background: brown;
        }
      
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            display: flex;
            width: 80%;
            margin: 0 auto;
            padding: 0;
            position: relative;
        }

        .filters {
            display: flex;
            flex-direction: column;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
            border: 1px solid #fff;
            padding: 20px;
        }

        .filter-group h3 {
            color: #fff;
            font-size: 1.5rem !important;
        }

        .preview {
            position: relative;
            width: 60%;
        }

        .image-container {
            position: relative;
            width: 100%;
            height: 600px;
        }

        .mobile-btn {
            color: white;
            position: absolute;
            top: 1%;
            left: 6%;
            display: none;
        }
        .btn {
            margin-top: 10px;
        }

   
        @media (max-width: 1025px) {
            .kaling-box {
                gap: 50px;
                width: 95%;
            }
        }

        @media (max-width: 769px) {
            .kaling-box {
                width: 100%;
            }

            .image-container {
                height: 500px;
            }
        }

        @media(max-width: 450px) {
            .kaling-box {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            .filters {
                width: 85%;
                margin-top: 50px;
                transform: translateX(-150%);
                background-color: white;
                z-index: 9;
                transition: all 0.4s ease-in-out;
            }

            .filter-group {
                align-items: baseline;
                margin-top: 10px;
                border: 1px solid #000;
            }
            .filter-group h3 {
                color: #000;
            }

            .preview {
                position: relative;
                width: 90%;
                position: absolute;
                top: 5%;
            }

            .preview .heading h2 {
                color: #fff;
                font-size: 2rem;
            }

            .mobile-btn {
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                gap: 10px;
            }
    
            .active {
                transform: translateX(-10%);
            }
        }

.wp-grid-builder .wpgb-card-28 .wpgb-block-1 {
    width: auto !important;
}

.largemag {
    width: 300px !important;  /* Increased size */
    height: 300px !important; /* Increased size */
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    pointer-events: none;
    position: absolute;
    z-index: 9999;
    display: none;
}