/* General styles for the body */
body {
    /* Sets the height of the viewport, ensuring it fills the screen */
    height: 100vh;
    /* Defines the font family */
    font-family: 'Inter', sans-serif !important;
    /* Uses flexbox to center the content horizontally */
    display: flex;
    justify-content: center;
    /* Sets a light gray background color */
    background-color: #f0f2f5; 
    /* Adds a smooth transition for background color changes */
    transition: background-color 0.3s ease;
}

/* Styles for the hero section */
.hero {
    /* Centers all text within the container */
    text-align: center;
    /* Adds internal padding for spacing */
    padding: 3rem;
    /* Sets the text color to a dark gray */
    color: #333;
}

/* Styles for the image inside the hero section */
.hero img {
    /* Adds space below the image */
    margin-bottom: 1rem;
}

/* Styles for the main heading in the hero section */
.hero h1 {
    /* Sets a large font size for the main title */
    font-size: 2.5rem; 
    /* Adds space below the heading */
    margin-bottom: 1rem;
    /* Sets a darker text color */
    color: #2c3e50;
}

/* Styles for the paragraph text in the hero section */
.hero p {
    /* Sets a smaller font size for the description */
    font-size: 1.2rem;
    /* Adds padding below the paragraph */
    padding-bottom: 1rem;
    /* Sets a slightly lighter text color */
    color: #555;
}

/* Styles for the main FAQ container */
.faq {
    /* Limits the maximum width of the container for better readability on large screens */
    max-width: 800px;
    /* Centers the container horizontally and adds top/bottom margins */
    margin: 2rem auto;
    /* Adds internal padding */
    padding: 1rem;
    /* Sets a white background color */
    background-color: #ffffff;
    /* Rounds the corners of the container */
    border-radius: 12px;
    /* Adds a subtle box shadow for a "lifted" effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Adds a smooth transition for the box shadow effect */
    transition: box-shadow 0.3s ease;
}

/* Hover effect for the FAQ container */
.faq:hover {
    /* Increases the box shadow on hover for a more interactive effect */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Styles for each individual question section */
.question {
    /* Adds space below each question */
    margin-bottom: 1.5rem;
    /* Adds internal padding */
    padding: 1.5rem;
    /* Adds a light gray border */
    border: 1px solid #e0e0e0; 
    /* Rounds the corners */
    border-radius: 8px; 
    /* Sets a slightly different background color for each question card */
    background-color: #f9f9f9;
}

/* Styles for the question titles */
.question h2 {
    /* Sets the font size */
    font-size: 1.5rem;
    /* Adds space below the heading */
    margin-bottom: 0.5rem;
    /* Sets a dark text color */
    color: #34495e;
    /* Adds a solid blue border on the left side for emphasis */
    border-left: 4px solid #3498db; 
    /* Adds padding to the left of the text to separate it from the border */
    padding-left: 1rem;
}

/* Styles for the paragraphs within a question */
.question p {
    /* Adds space below the paragraph */
    margin-bottom: 0.5rem;
    /* Sets the text color to a medium gray */
    color: #666;
    /* Increases line height for better readability */
    line-height: 1.6; 
}

/* Styles for ordered and unordered lists */
.question ol,
.question ul {
    /* Adds a left margin to indent the lists */
    margin-left: 2rem; 
    /* Adds space below the list */
    margin-bottom: 1rem;
    /* Sets the text color */
    color: #555;
}

/* Styles for list items */
.question li {
    /* Adds space below each list item */
    margin-bottom: 0.5rem;
}

/* Styles for hyperlinks */
.question a {
    /* Sets the link color */
    color: #3498db;
    /* Removes the default underline from the link */
    text-decoration: none;
    /* Adds a smooth transition for color changes */
    transition: color 0.3s ease;
}

/* Hover effect for hyperlinks */
.question a:hover {
    /* Changes the color of the link on hover */
    color: #236a9a;
}

/* List styles (specific types) */
.question ol {
    /* Sets the list style to decimal numbers (1, 2, 3) */
    list-style-type: decimal; 
}

.question ul {
    /* Sets the list style to disc (bullet points) */
    list-style-type: disc; 
}

/* Styles for bold text */
strong {
    /* Sets a darker color for bolded text to make it stand out */
    color: #2c3e50;
}

/* Styles for the author information footer */
.author-info {
    /* Centers the text */
    text-align: center;
    /* Adds a top margin */
    margin-top: 2rem;
    /* Adds internal padding */
    padding: 1rem;
    /* Sets a smaller font size */
    font-size: 0.9rem;
    /* Sets a light gray text color */
    color: #888;
}

/* Styles for links in the author information section */
.author-info a {
    /* Sets the link color */
    color: #3498db;
    /* Removes the default underline */
    text-decoration: none;
    /* Adds a smooth transition for color changes */
    transition: color 0.3s ease;
}

/* Hover effect for author info links */
.author-info a:hover {
    /* Changes the link color on hover */
    color: #236a9a;
}

/* Media queries for responsive design */

@media (max-width: 1024px) {
    /* Styles applied to screens with a maximum width of 1024px (tablets and small laptops) */
    .hero h1 {
        /* Reduces font size for the title */
        font-size: 2rem; 
    }

    .hero p {
        /* Reduces font size for the description */
        font-size: 1rem; 
    }

    .faq {
        /* Reduces the max width of the FAQ container */
        max-width: 700px; 
    }

    .question h2 {
        /* Reduces font size for question titles */
        font-size: 1.3rem; 
    }
}

@media (max-width: 640px) {
    /* Styles applied to screens with a maximum width of 640px (mobile devices) */
    body {
        /* Allows the body height to adjust to its content */
        height: auto; 
        /* Adds padding to the body to prevent content from touching the screen edges */
        padding: 1rem; 
    }

    .hero {
        /* Reduces padding for the hero section */
        padding: 1rem;
    }

    .hero h1 {
        /* Further reduces the title font size */
        font-size: 1.8rem;
    }

    .hero p {
        /* Further reduces the description font size */
        font-size: 1rem;
    }

    .faq {
        /* Makes the FAQ container take up the full width */
        max-width: 100%; 
        /* Removes side margins */
        margin: 1rem 0; 
        /* Removes border radius for a full-width look */
        border-radius: 0; 
        /* Removes the box shadow for a simpler design */
        box-shadow: none; 
    }

    .question {
        /* Reduces padding and margins for a more compact layout */
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .question h2 {
        /* Reduces the font size of question titles for smaller screens */
        font-size: 1.2rem;
    }

    .author-info {
        /* Adds bottom padding for better spacing at the end of the page */
        padding-bottom: 2rem; 
    }
}