body {
    background: rgb(135, 205, 255); /* Adjusted light blue */
    background: linear-gradient(135deg, rgb(135, 205, 255) 0%, rgb(25, 97, 255) 100%); /* Adjusted darker blue */
    margin: 0;
    font-family: "Gotham", sans-serif;
    font-size: 1rem; /* Use rem for scalability */
    line-height: 1.5; /* Improved line height for readability */
}

p {
    margin: 0 10px; /* Simplified margin */
}

h1 {
    margin: 10px;
}

ul {
    margin: 10px;
    list-style-type: none;
}

input#website {
    display: none;
}

#cookielaw {
    position: fixed; /* Changed to fixed for better accessibility */
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    box-shadow: 0 0 5px black;
}

#title {
    text-align: center;
    color: white;
}

#article {
    background: beige;
    margin: 0 10%;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: 7px 7px 5px grey;
}

#article li,
#article a {
  color: #111; /* or darker like #111 or #000 to be safe */
}
.navbar {
    background: rgba(103, 128, 159, 1); /* Keep the navbar background */
}
.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
}
.navbar li a {
    line-height: 50px;
    text-decoration: none;
    color: #F0F0F0; /* Light gray text */
    padding: 5px;
    background-color: #566f8e; /* Updated background color for better contrast */
    transition: 0.5s;
}

.navbar li a:hover,
.navbar li a:focus {
    color: #FFFFFF; /* Keep white for hover/focus for visibility */
    outline: 2px solid #FFFFFF; /* Visible focus outline */
}

.article_box {
    display: block; /* Changed to block for better accessibility */
    border: groove;
    margin: 5% 7%;
}

.article_box ul {
    padding-right: 25px;
}

li > input {
    display: inline-block;
    width: 20px;
}

label {
    margin-bottom: 25px;
    display: inline-block;
    width: 235px;
}

#nav {
    list-style-type: none;
    display: inline-block;
    margin-bottom: 10px;
    border: solid 2px black;
    position: fixed; /* Changed to fixed for better accessibility */
    top: 0;
    bottom: 0;
    left: 0;
}

#footer {
    background-color: #060606; /* Improved contrast */
    color: #F0F0F0;
    text-align: center;
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

#footer a {
    color: #FFFFFF; /* Changed from #F0F0F0 to white for better contrast */
    text-decoration: none;
}

#footer a:hover,
#footer a:focus {
    color: #FFFFFF;
    outline: 2px solid #FFFFFF;
}

.header {
    background-image: url('images/header-background.jpg');
    background-size: cover;
    background-position: center;
}

.description {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.description h1,
.feature-title {
    color: #F0F0F0; /* Light gray for headings */
}


.description p,
.feature-description p {
    color: white;
    font-size: 1.3rem;
    line-height: 1.5;
}

.description button {
    border: 1px solid #A0C4E1; /* Adjusted button border */
    background: #A0C4E1; /* Adjusted button background */
    color: #333; /* Dark text for button */
}

.description button:hover,
.description button:focus {
    border: 1px solid #FFFFFF; /* White border on hover/focus */
    background: #FFFFFF; /* White background on hover/focus */
    color: #000; /* Black text on hover/focus */
}

.overlay {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    color: white;
    padding: auto;
}

.features {
    margin: 4em auto;
    padding: 1em;
    position: relative;
}

.feature-title {
    color: #333;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.features img {
    display: block;
    margin: 0 auto; /* Center images */
    object-fit: cover;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    margin-bottom: 16px;
}

.feature-description {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.feature-description h1 {
    color: #cedce7;
}

.feature-description p {
    color: #F0F0F0; /* Light gray for feature description text */
}

.feature-description p:hover,
.feature-description p:focus { /* Added focus state */
    visibility: visible;
}

.features .form-control,
.features input {
    border-radius: 0;
}

.features .btn {
    background-color: #589b37;
    border: 1px solid #589b37;
    color: #fff;
    margin-top: 20px;
}

.features .btn:hover,
.features .btn:focus { /* Added focus state */
    background-color: #333;
    border: 1px solid #333;
}

.page-footer {
    background-color: #222;
    color: #ccc;
    padding: 60px 0 30px;
}

.footer-copyright {
    color: #ffffff;
    padding: 40px 0;
}

.wowcontainer {
    height: auto;
    position: relative;
}

.wowoverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008297;
}

.wowcontainer:hover .wowoverlay {
    opacity: 1; /* Removed width and height changes for better accessibility */
}

.wowtext {
    color: white;
    font-size: 1rem; /* Use rem for scalability */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.help-block.with-errors {
    color: #ff5050;
    margin-top: 5px;
}

.small-heading {
    font-size: 0.89rem; /* typical size of an h6 */
    font-weight: 600; /* font-weight like h6 */
    line-height: 1.2; /* optional for spacing */
    margin-bottom: 0.67em; /* mimic h6 margin */
}

/* Phone query */
@media (max-width: 575.98px) {
    .description {
        left: 0;
        padding: 0 15px;
        position: absolute;
        top: 10%;
        transform: none;
        text-align: center;
    }

    .description h1 {
        font-size: 2em;
    }

    .description p {
        font-size: 1.2rem;
    }

    .features {
        margin: 0;
    }

    li.nav-item {
        text-align: center;
    }
}