body { padding-top: 40px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #34568b !important; }
.bg-hero { background-color: #f8cece; color: #25336b; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:0cqb solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }

html, body { width: 100%; overflow-x: hidden; font-family: 'Avenir', 'Century Gothic', sans-serif; background-color: #fad8d8; }


/* Global text color for all elements except footer and menu */
body {
    color: #25336b; /* Default text color */
    font-family: 'Avenir', 'Century Gothic', sans-serif; /* Your existing font family */
}

/* Override color for links within the footer */
footer {
    color: #FAD8D8; /* Text color for footer elements */
}

footer a {
    color: #FAD8D8; /* Link color in the footer */
    text-decoration: underline; /* Ensure links have an underline */
}

footer a:hover, footer a:focus {
    color: #FAD8D8; /* Color on hover/focus in footer */
}

/* Override color for the menu */
.menu {
    color: #25336b; /* Text color for menu items */
}

/* If menu items include links */
.menu a {
    color: #25336b; /* Link color in the menu */
    text-decoration: none; /* Remove underline if desired */
}

.menu a:hover, .menu a:focus {
    color: #25336b; /* Color on hover/focus in menu */
    text-decoration: underline; /* Add underline on hover/focus if desired */
}

/* Apply the color and underline to all hyperlinks */
a {
    color: #25336b; /* Default link color */
    text-decoration: underline; /* Always show underline */
}

a:hover, a:focus {
    color: #25336b; /* Ensure color remains the same on hover/focus */
    text-decoration: underline; /* Always show underline on hover/focus */
}

/* Style for the back to top button */
#backToTopBtn {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px; /* Default position */
    right: 10px; /* Default position */
    z-index: 99; /* Ensure it is on top of other elements */
    border: none;
    outline: none;
    background-color: transparent; /* Transparent background */
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease; /* Smooth transition for visibility */
}

#backToTopBtn img {
    width: auto; /* Adjust the width as needed */
    height: 120px; /* Set a height that fits well */
    border-radius: 0%; /* Optional: make the image circular */
    transition: transform 0.2s; /* Smooth transition for hover effect */
}

#backToTopBtn:hover img {
    transform: scale(1.1); /* Slightly enlarge the image on hover */
}

/* Media query for tablets */
@media (max-width: 1024px) and (min-width: 600px) {
    #backToTopBtn img {
        height: 95px; /* Adjust the height for tablets */
    }
}

/* Style for the next page button */ 
#nextPageBtn { 
    position: fixed; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%); /* Center horizontally */ 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: transparent; /* Transparent background */ 
    cursor: pointer; 
    padding: 0; 
} 


#nextPageBtn img { 
    width: 50px; /* Adjust the size of the image */ 
    height: 50px; 
    border-radius: 50%; /* Optional: Make the image circular */ 
    transition: transform 0.2s; /* Add a transition for hover effect */ 
} 

#nextPageBtn img:hover { 
    transform: scale(1.1); /* Slightly enlarge the image on hover */ 
}