/* public/css/home-section.css */



/* General styles for the custom home section */

.custom-home-section {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    background-color: #ffffff;

    margin-top: 20px;

}



/* Flex container for content */

.custom-home-section__content {

    display: flex;

    max-width: 1200px;

    width: 100%;

}



/* Styles for the image */

.custom-home-section__image {

    flex: 1 1 50%;

    padding: 10px;

}



/* Ensuring the image is responsive */

.custom-home-section__image img {

    max-width: 100%;

    height: auto;

    border-radius: 8px;

}



/* Styles for the text */

.custom-home-section__text {

    flex: 1 1 50%;

    padding: 10px;

}



/* Heading styling */

.custom-home-section__text h2 {

    font-size: 2rem;

    margin-bottom: 10px;

}



/* Paragraph styling */

.custom-home-section__text p {

    font-size: 1rem;

    margin-bottom: 20px;

}



/* Styling for the buttons */

.custom-home-section__buttons {

    display: flex;

    gap: 10px;

}



/* Button styles */

.custom-btn {

    display: inline-block;

    padding: 10px 20px;

    color: #fff;

    background-color: #007bff;

    text-decoration: none;

    border-radius: 5px;

    transition: background-color 0.3s ease;

}



/* Button hover effect */

.custom-btn:hover {

    background-color: #0056b3;

}



/* Responsive styles for smaller screens */

@media (max-width: 768px) {

    .custom-home-section__content {

        flex-direction: column;

        align-items: center;

    }



    .custom-home-section__image, .custom-home-section__text {

        flex: 1 1 100%;

    }



    .custom-home-section__text h2 {

        text-align: center;

    }



    .custom-home-section__buttons {

        flex-direction: column;

        align-items: center;

    }



    .custom-btn {

        width: 100%;

        text-align: center;

    }

}



/* Styles for the reverse section */

.custom-home-section--reverse .custom-home-section__content2 {

    flex-direction: row-reverse;

}