/* skin.css */
/* body styles */
body {
    font-family: 'Poppins', 'Jost', 'Arial', sans-serif; /* Ensure fallback fonts are applied */
    color: #333;
    background: url('assets/images/background.jpg') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
}

/* Header Styles */
.header-content {
    margin-top: 20px;
}

/* Section Styles */
.section, .top-section {
    padding: 60px 0;
    text-align: center; /* Center text in the section */
}

/* Reset margin and padding for headers */
h1, h4, h5 {
    margin: 0;
    padding: 0;
}

/* Title Styles */
h1.title {
    color: #990000; /* Updated color for h1 */
    font-size: 2.7em; /* Size for h1 */
    font-weight: bold; /* Make h1 bold */
    margin-bottom: 0; /* Remove space below h1 */
}

h4.title {
    color: #2e5686;
    font-size: 1.5em; /* Smaller than h1 */
    text-transform: uppercase; /* All caps */
    margin-top: 0; /* Remove space above h4 */
    margin-bottom: 0; /* Remove space below h4 */
}

h5.sub-title {
    color: #2e5686;
    font-size: 1.4em; /* Smaller than h4 */
    margin-top: 0; /* Remove space above h5 */
    margin-bottom: 0; /* Remove space below h5 */
}

/* Ensure h3 elements are left-aligned */
h3.left-align {
    text-align: left;
    margin-left: 0; /* Remove any default margin if needed */
}

/* Top Section Styles */
.left--text-container {
    text-align: left;
    padding-right: 15px; /* Adjust padding to reduce space */
}

.right--text-container {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cover-temp {
    max-width: 100%;
    height: auto;
}

.content--container .row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally */
}

.text_block {
    padding-left: 10px; /* Reduced padding */
    text-align: center; /* Center text within the text block */
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .left--text-container, .right--text-container {
        text-align: center;
    }

    .content--container .row {
        flex-direction: column;
    }

    .text_block {
        padding-left: 0;
    }

    .left--text-container img {
        width: 100%;
    }
}

/* Button Styles */
.btn {
    padding: 10px 20px;
    font-size: 1em;
}

.light-green {
    background-color: #FE8D1D; /* Orange color */
    color: white;
}

.light-green:hover {
    background-color: #6abf4b; /* Green color on hover */
}

/* Image Container Styles */
.left--text-container img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
}

/* Wrapper Styles */
.o-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* List Styles */
.list-items {
    list-style: none; /* Remove default bullets */
    padding-left: 0; /* Remove default padding */
}

.list-items li {
    position: relative; /* Positioning for absolute children */
    padding-left: 30px; /* Space for custom bullet */
    font-size: 1.2em;
    margin-bottom: 10px;
    line-height: 1.5; /* Adjust line-height if needed */
    text-align: left; /* Align text to the left */
}

.list-items li::before {
    content: ""; /* Ensure no text content */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    width: 16px; /* Size of the SVG */
    height: 16px; /* Size of the SVG */
    background-image: url('assets/images/check-circle.svg'); /* Ensure SVG path is correct */
    background-size: 16px 16px; /* Ensure the SVG scales to 16x16 */
    background-repeat: no-repeat; /* Prevent repeating */
}

/* Footer Styles */
.footer-section {
    background-color: #2e5686;
    color: white;
    padding: 20px 0;
    text-align: center; /* Center text in the footer */
}

.footer-menu {
    list-style: none;
    padding: 0;
    text-align: center; /* Center the footer menu items */
}

.footer-menu li {
    display: inline;
    margin-right: 15px;
}

.footer-menu a {
    color: white;
    text-decoration: none;
}

.copyright {
    margin-top: 10px;
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black background with opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Button Trigger */
.open-modal {
    cursor: pointer;
    background-color: #FE8D1D; /* Orange color for the button */
    color: white;
    padding: 10px 20px;
    border: none;
    font-size: 1em;
    border-radius: 5px;
}

.open-modal:hover {
    background-color: #6abf4b; /* Green color on hover */
}

/* Modal on Hover Styles */
.open-modal:hover + .modal {
    display: block;
}