/* General Styles */
body {
    font-family: Arial, sans-serif; /* Clean and modern font */
    background-color: #f0f8ff; /* Light background for a soothing effect */
    margin: 0; /* Remove default margin */
    padding: 20px; /* Space around the content */
}

/* Header Styles */
header {
    
    text-align: center; /* Center align header text */
    margin-bottom: 30px; /* Space below the header */
}

h1 {
    color: #007BFF; /* Primary color for the main title */
    font-size: 2.5em; /* Larger font size for emphasis */
    margin-bottom: 10px; /* Space below the title */
}

.intro-text {
    font-size: 1.1em; /* Slightly larger font size for introduction text */
    color: #333; /* Darker text color for better readability */
    line-height: 1.6; /* Increased line height for better spacing */
    max-width: 600px; /* Limit width for easier reading */
    margin: 0 auto; /* Center the paragraph */
    padding: 0 15px; /* Horizontal padding for small screens */
}

/* Section Styles */
#verses {
    margin-top: 20px; /* Space above the verses section */
}

/* Verse Styles */
.div-verse {
    border: 1px solid #ccc; /* Light border around each verse */
    border-radius: 5px; /* Rounded corners */
    padding: 15px; /* Padding inside the verse box */
    margin: 10px auto; /* Center the verse box with automatic margins */
    background-color: #ffffff; /* White background for verses */
    transition: background-color 0.3s; /* Smooth background transition */
    max-width: 800px; /* Set a maximum width for larger screens */
    width: 90%; /* Use 90% of the width for smaller screens */
}

.div-verse:hover {
    background-color: #f1f1f1; /* Change background on hover */
}

.verse-reference {
    font-weight: bold; /* Bold font for reference */
    margin-bottom: 10px; /* Space below the reference */
}

.verse-introduction {
    font-style: italic; /* Italics for introduction */
    color: #555; /* Darker color for the introduction */
    margin-bottom: 10px; /* Space below the introduction */
}

.verse-full {
    font-size: 1.1em; /* Slightly larger font for full verse */
    line-height: 1.5; /* More line spacing for readability */
}

/* Button Styles */
.verse-reference button {
    background-color: #007BFF; /* Primary button color */
    color: white; /* White text */
    border: none; /* No border */
    padding: 8px 12px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}

.verse-reference button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.read-more-container {
    text-align: center; /* Center the button */
    margin-top: 20px; /* Space above the button */
}

.read-more-button {
    background-color: #007BFF; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Padding inside the button */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 1em; /* Font size for button */
    transition: background-color 0.3s; /* Transition for hover effect */
}

.read-more-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}


/* Footer Styles */
footer {
    text-align: center; /* Center align footer text */
    margin-top: 40px; /* Space above the footer */
    font-size: 0.9em; /* Slightly smaller footer text */
    color: #555; /* Darker color for footer */
}

/* Media Queries for Responsiveness */
@media (max-width: 600px) {
    h1 {
        font-size: 2em; /* Adjust title size for small screens */
    }

    .intro-text {
        font-size: 1em; /* Smaller font for intro text on mobile */
    }

    .div-verse {
        padding: 10px; /* Less padding for verse boxes on mobile */
        width: 100%; /* Full width on small screens */
    }
}



header section .logo {
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}
header section {
    background-color: #4caf50;
    padding: 10px 20px;
    text-align: center;
}

.nav-links {
    list-style-type: none;
}
.topical ul li a {
    color: blue;
    text-decoration: none;
}
.nav-links li {
    display: inline;
    margin: 0 10px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
}

.hero {
    background-color: #f4f4f4;
    padding: 0;
    margin: 0;
    text-align: center;
}
@media(max-width:767px){
    .nav-toggle {
        display: flex;
        position: absolute;
        display: flex;
    flex-direction: column;
    justify-content: center;  /* Center vertically */
    align-items: center;      /* Center horizontally */
    width: 40px;              /* Width of the button */
    height: fit-content;             /* Height of the button */
    background-color:#4caf50;;  /*Visibility */
    border: none;             /* No border */
    cursor: pointer;  
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 0;
    }
    
    .bar {
        display: block;              /* Ensure block display */
    width: 30px;                 /* Set explicit width */
    height: 2px;                 /* Set height */
    background-color: white;     /* Make bars visible */
    margin: 3px 0; 
  
    
    }
    
    .nav-links {
        display: none;
        flex-direction: column;
        background-color: #4caf50;
        position: absolute;
        top: 60px; /* Adjust based on header height */
        left: 0;
        width: fit-content;
        text-align: left;
        height: fit-content;
    }
    
    .nav-links.active {
        display: flex; /* Shows the menu when active */
    }
    .topical {
        position: relative; /* Ensure the dropdown aligns with the parent */
        height: fit-content;
    }
    
    .topics {
        display: none; /* Hidden by default */
        flex-direction: column;
        background-color:#4caf50;
        top: 100%; /* Show dropdown directly below */
        left: 0;
        width: 100%;
        text-align: center;
        height: fit-content;
        z-index: 100; /* Ensure dropdown is above other content */
    }
    
    .topics.active {
        display: flex; /* Show the dropdown */
    }
    .topic li {
       margin-bottom: 30px;
       margin-top: 20px;
       
    }
    header section{
        background-color: #4caf50;
       
        width: 100%;
        text-align: center;
    }
    body{
        margin: 10px auto;
        max-width: 100%;
        overflow-x: hidden;
    }
    img{
        max-width: 100%;
    }
}
@media only screen and (min-width: 769px) {
    .nav-toggle {
        display: none;
    }
    
    .nav-links {
        display: flex;
        justify-content: center;
        list-style: none;
    }

    .nav-links li {
        display: inline-block;
        margin: 20px 15px;
        margin-bottom: 10px;
        font-size: 20px;
    }
    
   
    .topics{
        display: none;
    }

    .topical:hover .topics {
        display: block; /* Show sublist when hovering over Topical Verses */
    }
    
}