/* Add CSS styles for the popup form */
 

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    font-size: 28px;
}

#popupForm h2 {
    text-align: center;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.topgap{
    padding-top: 20px;
}
button[type="submit"] {
    background-color: white;
    color: black; /* Set text color to black */
border: 1px solid #685c58;
    padding: 10px 20px;
   
    border-radius: 5px;
    cursor: pointer;
}
.custom-btn {
background: none; /* Remove the background color */
color: black; /* Set text color to black */
border: 1px solid #685c58; /* Add a border */
transition: background-color 0.3s ease; /* Add transition effect with 0.3s delay */
}

/* Apply the background color on hover */
.custom-btn:hover {
background-color: #ea5822; /* Change the background color on hover */
color: white; /* Change the text color to white on hover */
border: 1px solid #ea5822;
}
.elementor-heading-title {

font-size: 40px;
font-weight: 800;
}
.success-message {
    color: green;
    text-align: center;
    margin-top: 10px;
}
#popupForm {
/* Existing styles */
background-color: rgba(255, 255, 255, 1); /* Change alpha value to 1 for full opacity */
/* Existing styles */
}
/* Add CSS styles for the popup form */
/* Add CSS styles for the popup form */
#popupForm {
position: fixed;
top: 50%; /* Center the form vertically at 50% from the top */
left: 50%; /* Center the form horizontally at 50% from the left */
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(255, 255, 255, 1); /* Change alpha value to 1 for full opacity */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 9999; /* Ensure the form appears on top of other elements */
display: none;
width: 700px; /* Set the width to your desired value, e.g., 400px */
height: 486px; /* Set the height to your desired value, e.g., 422px */
border-radius: 11px;
}

/* Media queries for different screen sizes */
@media only screen and (max-width: 600px) {
/* Styles for screens with a maximum width of 600px */
#popupForm {
width: 90%; /* Reduce width for smaller screens */
}
.topgap{
    padding-top: 5px;
}
}

@media only screen and (max-width: 400px) {
/* Styles for screens with a maximum width of 400px */
#popupForm {
width: 80%; /* Reduce width further for very small screens */
padding: 10px; /* Adjust padding for smaller screens */
}
}
/* General styles for the overlay and popup form */
#overlay {
    /* ... Existing styles ... */
}

.close-button {
    /* ... Existing styles ... */
}

#popupForm {
    /* ... Existing styles ... */
    /* Update the width and height for responsiveness */
    width: 90%; /* Adjust the width to your desired value */
    height: auto; /* Allow height to adjust based on content */
    max-width: 650px; /* Set a maximum width for the form container */
}

/* Styles for input fields and textarea */
.form-group input,
.form-group textarea {
    /* ... Existing styles ... */
    /* Adjust the font size and padding for smaller screens */
    font-size: 16px; /* Adjust the font size as needed */
    padding: 8px; /* Adjust the padding as needed */
    width: 100%; /* Ensure input fields take full width inside the form */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

/* Styles for the image in the form */
#popupForm img {
    /* Adjust the image size for smaller screens */
    max-width: 100%; /* Make the image responsive and fit the container width */
    height: auto; /* Allow the image height to adjust based on the width */
    /* Add any additional styles for the image as needed */
}

/* Media queries for different screen sizes */
@media only screen and (max-width: 600px) {
    /* Styles for screens with a maximum width of 600px */
    #popupForm {
        width: 90%; /* Reduce width for smaller screens */
        padding: 20px; /* Adjust padding for smaller screens */
        height: 633px
    }

    /* Adjust input field and textarea styles for smaller screens */
    .form-group input,
    .form-group textarea {
        font-size: 14px; /* Adjust the font size for smaller screens */
        padding: 6px; /* Adjust the padding for smaller screens */
    }

    /* Adjust the image size for smaller screens */
    #popupForm img {
        max-width: 100%; /* Make the image responsive and fit the container width */
        height: 150px; /* Allow the image height to adjust based on the width */
        
    }
}

@media only screen and (max-width: 400px) {
    /* Styles for screens with a maximum width of 400px */
    #popupForm {
        width: 80%; /* Reduce width further for very small screens */
        padding: 10px; /* Adjust padding for very small screens */
        height: 620px
    }

    /* Adjust input field and textarea styles for very small screens */
    .form-group input,
    .form-group textarea {
        font-size: 12px; /* Adjust the font size for very small screens */
        padding: 4px; /* Adjust the padding for very small screens */
    }

    /* Adjust the image size for very small screens */
   
    #popupForm img {
        max-width: 100%; /* Make the image responsive and fit the container width */
        height: 125px; /* Allow the image height to adjust based on the width */
        
    }
}
/* ... Existing styles ... */

/* Styles for the image in the form */
#popupForm img {
    max-width: 100%; /* Make the image responsive and fit the container width */
    height: auto; /* Allow the image height to adjust based on the width */
    /* Add any additional styles for the image as needed */
}

/* Media queries for different screen sizes */
@media only screen and (max-width: 992px) {
    /* Styles for screens with a maximum width of 992px (and smaller) */
    #popupForm {
        padding: 10px; /* Adjust padding for smaller screens */
    }
    
    .col-md-6 {
        text-align: center; /* Center the image and form fields in smaller screens */
    }
    
    #popupForm img {
        margin: 0 auto; /* Center the image */
    }
}

@media only screen and (max-width: 768px) {
    /* Styles for screens with a maximum width of 768px (and smaller) */
    #popupForm {
        width: 80%; /* Reduce width for smaller screens */
        
    }
}


/* .popup-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-slider {
    width: 40%; 
    position: relative;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    transition: opacity 0.5s ease-in-out;
}


@media only screen and (max-width: 768px) {
    .popup-content {
        flex-direction: column;
    }

    .image-slider {
        width: 100%;
        margin-bottom: 20px;
    }
}
 */


 .popup-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.image-slider {
    width: 50%; /* Set 50% for image slider */
    position: relative;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    transition: opacity 0.5s ease-in-out;
}

.popup-form-content {
    width: 45%; /* Set 50% for the form */
}

/* Make the slider and form responsive */
@media only screen and (max-width: 768px) {
    .popup-content {
        flex-direction: column;
    }

    .image-slider,
    .popup-form-content {
        width: 100%;
        margin-bottom: 20px;
    }
}



/* Hide the image slider on screens 768px or smaller */
@media only screen and (max-width: 768px) {
    .image-slider {
        display: none; /* Hide the slider */
    }

    /* Make the popup form full screen on small screens */
    .popup-form {
        width: 100vw; /* Full width of the viewport */
        height: 100vh; /* Full height of the viewport */
        padding: 20px; /* Add some padding */
    }

    /* Adjust the popup content for better appearance */
    .popup-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%; /* Full height */
    }

    /* Adjust the form styles */
    .popup-form-content {
        width: 100%; /* Full width */
    }

    .form-group {
        width: 100%; /* Make input fields full width */
        margin-bottom: 15px;
    }

    .form-group input, .form-group textarea {
        width: 100%; /* Input and textarea full width */
        padding: 10px;
        font-size: 18px;
    }

    .text-center input[type="submit"] {
        width: 100%; /* Full width for the submit button */
        padding: 15px; /* Increase padding for larger touch areas */
    }
}