.clickable-text {
    cursor: pointer;
  }

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/*.container-prod-spot {
    /*margin-left: 20px; /* Move container 20px to the right */
    /*width: calc(100% - 20px); /* Adjust width to account for the margin */
/*}*/

/*.container-prod-spot {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
    /*text-align: left; /* Ensure text is left-aligned */
    /*padding: 20px;
}*/

.container-prod-spot {
    margin-left: auto; /* Center container horizontally */
    margin-right: auto; /* Center container horizontally */
    width: 100%; /* Ensure full width */
    max-width: 1200px; /* Limit maximum width */
    padding: 20px;
    text-align: center; /* Center text within the container */
}

.header {
    position: relative;
    text-align: left;
    width: 100%;
}

.watermark-audi {
    font-family: 'Arial Black', sans-serif;
    font-size: 5em; /* Adjusted for visibility */
    color: hsla(0, 11%, 95%, 0.993); /* Very light gray, almost white */
    position: relative;
    z-index: 1;
}

.watermark-above-audi {
    position: absolute;
    top: 65%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -100%); /* Move up by 100% of its height */
    width: 100%;
    font-size: 12px; /* Smaller than 'Academy' */
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #000; /* Slightly transparent black */
    z-index: 2; /* On top of 'watermark-audi' */
}

.contact-info {
    font-size: 1em;
    color: #00f;
    margin: 20px 10px;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
}

.main-content-prod-spot {
    display: flex;
    justify-content: flex-start; /* Align content to the left */
    align-items: center;
    width: 100%;
    max-width: 1200px;
    position: relative;
}

.main-image {
    position: relative;
    z-index: 1;
    display: flex; /* Added to ensure it sizes correctly */
}

.main-image img {
    width: 100%; /* Ensure the image takes up the full width of its container */
    max-width: 450px; /* Ensure the image doesn't exceed a specific size */
    height: auto;
    display: block; /* Ensure the image does not have any inline spacing issues */
}

.side-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Aligns content vertically in the middle */
    margin-left: 0px;
}

.lesson-info {
    display: flex;
    align-items: center; /* Align items vertically in the center */
    margin-left: -30px; /* Adjust to overlap the main image by 30px */
    position: relative;
    z-index: 2;
}

.lesson-image {
    position: relative;
    z-index: 3;
}

.lesson-image img {
    width: 100px;
    height: auto;
    margin-left: 0px;
}

.lesson-details {
    margin-left: 10px;
    text-align: left;
}

.lesson-title {
    font-size: 1.2em;
    font-weight: bold;
}

.lesson-participants {
    font-size: 1em;
    margin: 5px 0;
}

.lesson-price-button {
    font-size: 1em;
    color: #fff;
    background-color: #ffa500;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin-left: 10px; /* Align button with the text */
}

@media (max-width: 768px) {

    .container-prod-spot {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center all items horizontally */
        text-align: center; /* Center text */
        padding: 0; 
        margin: 0 auto; /* Center the container itself */
    }

    .header {
        text-align: center; /* Center text */
        display: flex;
        flex-direction: column;
        align-items: center; /* Center items horizontally */
    }


    .main-content-prod-spot {
        flex-direction: column;
        align-items: center; /* Align items to the center on mobile */
        justify-content: center; /* Center the content horizontally */
        width: 100%; /* Ensure full width on mobile */
    }

   
    .lesson-info {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Align items to the center */
        margin-left: 0; /* Reset margin for mobile */
        margin-top: 20px;
        text-align: center; /* Center text */
    }

    .lesson-image {
        margin-bottom: 10px;
    }

    .lesson-details {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .lesson-price-button {
        margin-left: 0;
        margin-top: 10px;
    }

    .main-image {
        width: 100%; /* Ensure full width on mobile */
        display: flex; /* Ensure proper display */
        justify-content: center; /* Center the content horizontally */
        text-align: center; /* Center content */
    }

    .main-image img {
        max-width: 100%; /* Ensure image doesn't exceed container width */
        height: auto;
    }
}