/* Section Transitions - Create seamless flow between sections */

/* General section spacing adjustments */
section {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    transition: all 0.5s ease;
}

/* Specific styling for the playground section */
.playground-section {
    padding-top: 100px;
    padding-bottom: 100px;
    margin-top: -20px; /* Create slight overlap with previous section */
    background: linear-gradient(180deg, #f9f9ff 0%, #ffffff 100%);
    border-radius: 30px 30px 0 0; /* Rounded top corners for smooth transition */
    position: relative;
    z-index: 1;
}

/* Enhanced playground title styling */
.playground-title {
    font-size: 48px;
    font-weight: 700;
    color: #7d3bed;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    display: block;
    width: 100%;
}

/* Add decorative elements to playground title */
.playground-title:after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #7d3bed;
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Enhanced background for better section transition */
.playground-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(125, 59, 237, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: -1;
}

/* Create better transition from form to playground section */
.contact-form + .playground-section {
    margin-top: 0;
    padding-top: 80px;
}

/* Better transitions for the footer after playground */
.playground-section + footer {
    margin-top: 0;
    padding-top: 50px;
    background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
}

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
    section {
        padding: 60px 0;
    }
    
    .playground-section {
        padding-top: 70px;
        padding-bottom: 70px;
        border-radius: 20px 20px 0 0;
    }
    
    .playground-title {
        font-size: 36px;
        margin-bottom: 25px;
    }
}