/* 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;
}



/* THIS IS USED TO STYLE p tag text on my pages NOVEMER 15 2024*/
.styled-text {
    font-family: 'Arial', sans-serif; /* Clean, readable font */
    font-size: 1.2rem; /* Slightly larger text for readability */
    color: #333333; /* Dark gray text for better contrast */
    line-height: 1.6; /* Increase line spacing for readability */
    text-align: justify; /* Align text for a professional look */
    padding: 10px 15px; /* Add spacing inside the text box */
    border-left: 4px solid #007bff; /* Add a left border for emphasis */
    background-color: #f9f9f9; /* Subtle background color */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a soft shadow */
    max-width: 750px; /* Limit the width of the text box */
    margin: 20px auto; /* Center the text block with spacing */
}

@media (max-width: 768px) {
    .styled-text {
        font-size: 1rem;
        padding: 8px 10px;
    }
}
/* THIS IS USED TO STYLE p tag text on my pages NOVEMER 15 2024*/







/* THIS IS TO FIX TEXT ON MY PAGES NOVEMBER 22 2024 */


/* General Styling for Section Text - November 22, 2024 */
.custom-home-section__text p {
    font-family: 'Arial', sans-serif; /* Clean and modern font */
    font-size: 1.1rem; /* Medium font size for readability */
    line-height: 1.6; /* Space between lines for better readability */
    color: #333; /* Neutral dark color for text */
    margin: 10px 0; /* Spacing between paragraphs */
    text-align: justify; /* Align text neatly on both sides */
}

/* Styling for Section Headings (h2) */
.custom-home-section__text h2 {
    font-family: 'Georgia', serif; /* Elegant serif font for headings */
    font-size: 1.8rem; /* Slightly larger than body text */
    color: #444; /* Slightly lighter than text color */
    margin-bottom: 15px; /* Space below the heading */
    border-bottom: 2px solid #ddd; /* Light underline for emphasis */
    padding-bottom: 5px; /* Space between text and underline */
}

/* Ensure the section content fits neatly in the container */
.custom-home-section__text {
    max-width: 800px; /* Limit width for better readability */
    margin: 0 auto; /* Center align the text */
    padding: 15px; /* Add inner spacing */
    box-sizing: border-box; /* Include padding in total width */
}

/* Button Styling */
.custom-home-section__buttons .custom-btn {
    display: inline-block;
    font-size: 1rem; /* Standard font size */
    color: #fff; /* White text color */
    /* background-color: #007bff; Primary button color */
    padding: 10px 20px; /* Spacing inside the button */
    margin: 5px; /* Spacing between buttons */
    border: none; /* Remove borders */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    text-align: center;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.custom-home-section__buttons .custom-btn:hover {
    /* background-color: #0056b3; Darker blue on hover */
}

/* Section Layout */
.custom-home-section {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    align-items: center; /* Center content vertically */
    gap: 20px; /* Space between elements */
    padding: 20px; /* Space around the section */
    margin: 20px 0; /* Space between sections */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 10px; /* Rounded corners for the section */
    background-color: #f9f9f9; /* Light background color for contrast */
}

.custom-home-section--reverse {
    flex-direction: row-reverse; /* Reverse layout for alternating styles */
}

/* Image Styling */
.custom-home-section__image img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for images */
}

/* Responsive Design */
@media (max-width: 768px) {
    .custom-home-section {
        flex-direction: column; /* Stack elements on smaller screens */
        text-align: center; /* Center-align text for mobile */
    }

    .custom-home-section--reverse {
        flex-direction: column; /* Reverse doesn't matter on stacked layout */
    }

    .custom-home-section__text {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .custom-home-section__text p {
        font-size: 1rem; /* Adjust font size for mobile */
        line-height: 1.5; /* Adjust line spacing for mobile */
    }

    .custom-home-section__text h2 {
        font-size: 1.5rem; /* Slightly smaller heading size for mobile */
    }
}


/* THIS IS TO FIX TEXT ON MY PAGES NOVEMBER 22 2024 */