/*
Theme Name: AllroundWeb Child
Theme URI: http://www.allroundweb.nl
Description: Designed by <a href="http://allroundweb.nl">Allround Web</a>.
Author: Rob Abrahams
Version: 1.0.0
Template: hello-elementor

*/


    @media (max-width: 1825px) {
.usp h2.elementor-heading-title.elementor-size-default {
    font-size: 22px !important;
}		
}

    @media (max-width: 1500px) {
.usp h2.elementor-heading-title.elementor-size-default {
  font-size: 20px !important;
}		
}
		
    @media (max-width: 1450px) {
.usp h2.elementor-heading-title.elementor-size-default {
  font-size: 19px !important;
}
}

    @media (max-width: 1450px) and (min-width: 1368px) {
		.rond img {
    width: 575px !important ;
    height: 575px  !important;
}
}
	
    @media (max-width: 1367px) and (min-width: 768px) {
		.rond img {
    width: 475px !important ;
    height: 475px  !important;
}
}
		
    @media (max-width: 1180px) {
.usp h2.elementor-heading-title.elementor-size-default {
  font-size: 17px !important;
}		
}

   @media (min-width: 1366px) and (max-width: 1500px) {
.e-n-carousel.swiper.swiper-initialized.swiper-horizontal.swiper-pointer-events img {
    width: 550px !important;
    height: 550px !important;
}
}


	

.waves-container {
  position: absolute;
  bottom: -10px;
  width: 100% !important;
  height: 200px !important;
  background-color: white !important; /* Dark purple background */
  overflow: hidden !important;
  clip-path: polygon(100% 100%, 0% 100%, 0% 65.16%, 2% 69.61%, 4% 73.84%, 6% 77.83%, 8% 81.51%, 10% 84.87%, 12% 87.86%, 14% 90.46%, 16% 92.63%, 18% 94.37%, 20% 95.64%, 22% 96.44%, 24% 96.75%, 26% 96.58%, 28% 95.93%, 30% 94.80%, 32% 93.21%, 34% 91.17%, 36% 88.70%, 38% 85.82%, 40% 82.58%, 42% 78.99%, 44% 75.09%, 46% 70.93%, 48% 66.54%, 50% 61.98%, 52% 57.28%, 54% 52.49%, 56% 47.67%, 58% 42.85%, 60% 38.10%, 62% 33.46%, 64% 28.96%, 66% 24.67%, 68% 20.62%, 70% 16.86%, 72% 13.42%, 74% 10.33%, 76% 7.63%, 78% 5.35%, 80% 3.50%, 82% 2.11%, 84% 1.20%, 86% 0.76%, 88% 0.81%, 90% 1.34%, 92% 2.35%, 94% 3.83%, 96% 5.76%, 98% 8.12%, 100% 10.90%, 100% 100%) !important;
}

/* This is the container (your provided shape) */
.elementor-541 .elementor-element.elementor-element-a5968b6:not(.elementor-motion-effects-element-type-background),
.elementor-541 .elementor-element.elementor-element-a5968b6 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url(../../uploads/2024/12/image-8.png);
    background-repeat: no-repeat;
    background-size: cover;
}

/* The second image to clip into the wave shape */
.elementor-541 .elementor-element.elementor-element-clip-image {
    background-repeat: no-repeat;
    background-size: cover;
	background-position: middle bottom;

    /* Apply masking based on the wave shape */
    mask-image: url(../../uploads/2024/12/image-8.png);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;

    -webkit-mask-image: url(../../uploads/2024/12/image-8.png);
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Apply circular shape to the carousel container */
.circle-container {
  position: relative;
  width: 300px;   /* Set the width */
  height: 300px;  /* Ensure height is equal to width for a perfect circle */
  border-radius: 50%;  /* Create the circular shape */
  overflow: hidden;    /* Hide overflow to ensure content stays within the circle */
}

/* Ensure the images inside the carousel fill the circular container */
.circle-container .elementor-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Makes sure the image covers the entire circle */
  border-radius: 50%; /* Round the images to match the container */
}

/* Optionally, make sure any inner elements (like text) stay inside the circular bounds */
.circle-container .elementor-widget-container {
  border-radius: 50%;
  overflow: hidden;
}



  * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Neulis';
    }

    .accordion-container {
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }

    .accordion {
        display: flex;
        flex-direction: column;
        width: 270px; /* Initial width */
        transition: width 0.3s ease-in-out; /* Smooth transition for expanding width */
        overflow: hidden;
    }

.accordion-button {
    width: 100%;
    height: 360px;
    background-color: transparent;
    background-image: url('../../uploads/2024/12/image-12.png'); /* PNG for the center */
    background-size: auto; /* Ensure the PNG is displayed in its original size */
    background-position: center center; /* Center the PNG */
    background-repeat: no-repeat;
    background-size: cover;

    mask-image: url('../../uploads/2024/12/Fold-item.svg'); /* SVG Mask */
    -webkit-mask-image: url('../../uploads/2024/12/Fold-item.svg'); /* For Safari */
    mask-size: cover; /* Cover ensures the SVG fills the area */
    -webkit-mask-size: cover;
    mask-position: bottom center; /* Align SVG mask to the bottom */
    -webkit-mask-position: bottom center; /* Align SVG mask to the bottom */
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    cursor: pointer;
    font-size: 16px;
    position: relative;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
}

.accordion-button:hover {
    background-color: white; /* Optional background color for hover */
    background-image: url('../../uploads/2024/12/image-12.png');
    background-position: center center; /* Keep the PNG centered */
    
}

.accordion-button:active,
.accordion-button:focus {
    background-color: transparent;
    outline: none;
}




    .accordion-content {
        display: none; /* Hidden initially */
        padding: 30px;
        text-align: left; /* Center the content horizontally */
        color: white;
        position: absolute;
        bottom: 120px;
        width: 500px;
    }

    .accordion-content h2 {
        font-weight: 700;
		
    }

    .contact-button {
        border-radius: 20px;
        background-color: #DB5683; 
        border: none;
        color: white;
        font-weight: 700;
    }

    .accordion.active {
        width: 500px; /* Expand full width on smaller screens */
    }

    .accordion.active .accordion-content {
        display: block; /* Show content when expanded */
    }


    .titel-accordion {
        display: block; /* Show the title by default */
        font-size: 28px;
        font-weight: 700;
        color: white;
        transform: rotate(-90deg);
        position: relative;
        bottom: 220px;
        left: -80px;
    }

    .accordion.active .titel-accordion {
        display: none; /* Hide the title when the accordion is open */
    }

    /* Mobile and tablet styles */
    @media (max-width: 768px) {
        .accordion-container {
            flex-direction: row; /* Stack accordions vertically */
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .accordion {
            width: 100%; /* Full width for better use on smaller screens */
        }

        .accordion-content {
            width: 100%;
            position: static; /* Ensure it expands below the accordion */
            padding: 20px;
            color: black;
        }

        .titel-accordion {
            font-size: 28px; /* Adjust title size */
            bottom: 140px;
            left: 30px;
            transform: none; /* Remove rotation */
        }

        .accordion-button {
            height: 250px; /* Adjust height for mobile screens */
        }
              .accordion.active{
            width: 100%;
        }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .accordion-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .accordion {
            height: auto; /* Allow content to define height */
            width: 100%;
        }

        .accordion-button {
            height: 300px; /* Adjust for tablets */
        }

        .accordion-content {
            position: static; /* Ensure expansion happens below */
            width: 100%;
            color: black;
        }
        .titel-accordion {
            font-size: 28px; /* Adjust title size */
            bottom: 140px;
            left: 30px;
            transform: none; /* Remove rotation */
        }
              .accordion.active{
            width: 95%;
        }
    }
    @media (min-width: 1025px) and (max-width: 1366px) {
        .accordion-container {
            gap: 30px;
        }

        .accordion {
            width: 300px; /* Slightly larger width for laptop screens */
            height: auto;
        }

        .accordion-button {
            height: 340px;
        }

        .accordion-content {
            position: static; /* Adjust content to expand below */
            width: 35%;
        }
            .titel-accordion {
            font-size: 28px; /* Adjust title size */
            bottom: 180px;
            left: -60px;
            transform: none; /* Remove rotation */
            rotate: -90deg
        }
    }
    
    @media (min-width: 1025px) {
        .accordion-container {
            gap: 40px;
        }

        .accordion {
            width: 270px;
            height: auto;
        }

        .accordion-button {
            height: 360px;
        }

        .accordion-content {
            position: absolute; /* Allows expansion to the right */
        }
        .accordion.active{
            width: 550px;
        }
    }