body {
  background-image: url("../Images/Background.jpg");
  background-size: cover;        /* Makes the image cover the whole screen */
  background-repeat: no-repeat;  /* Prevents tiling */
  background-position: center;   /* Centers the image */
  background-attachment: fixed;  /* Optional: makes it stay fixed when scrolling */
}

header {
    background-color: #B4C1D1;
    width: 95%;
    height: 200px;
    margin: 0 auto; /* centers it */

    display: flex;
    align-items: center; /* vertically centers the content */
    justify-content: left; /* horizontally centers the content */
}

header h1{
    text-align: center;
    margin: 0;
}

nav {
    background-color: #ffb08b;
    width: 95%;
    height: 30px;
    margin: 0 auto; /* centers it */
    
    display: flex;
    align-items: center;
    justify-content: center;
}

nav ul {
    list-style: none;      /* removes bullets */
    margin: 0;
    padding: 0;

    display: flex;         /* makes items horizontal */
    justify-content: center; /* centers the menu */
    gap: 30px;             /* spacing between items */
}

nav li {
    display: inline-block; /* optional, flex already handles it */
}

nav a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

nav a:hover {
    background-color: #ffb08b;
    color: white;
}

#main{
    background-color: #28354C;
    width: 95%;
    height: auto;
    margin: 0 auto; /* centers it */
    padding-bottom: 20px;
}

#cover {
    width: 100%;
    height: 500px;
}

#main #cover img {
    width: 100%;
    height: 100%;
}

#hero{
    background-color: #28354C;
    width: 100%;
    height: 600px;
}

#welcome{
    background-color: lightblue;
    width: 40%;
    margin: 20px ; /* centers it and adds vertical spacing */
    height: 530px;
    text-align: center;
    border-radius: 10px;
    float: left;
    margin-left: 100px;
}

#welcome img {
    width: 55%;
    height: auto;
    border-radius: 25px;

}

#support{
    background-color: lightblue;
    width: 40%;
    margin: 20px ; /* centers it and adds vertical spacing */
    height: 530px;
    text-align: center;
    border-radius: 10px;
    float: right;
    margin-right: 100px;
}

#support img {
    width: 70%;
    height: 400px;
    border-radius: 50px;
}

#news{
    background-color: lightblue;
    width: 70%;
    margin-top: 20px ; /* centers it and adds vertical spacing */
    height: auto;
    text-align: center;
    border-radius: 10px;
    margin-left: 15%;
    padding-bottom: 20px;
}

.hover-img {
    transition: transform 0.3s ease;
}

.hover-img:hover {
    transform: scale(1.03);
}

footer{
    background-color: #B4C1D1;
    width: 95%;
    height: 30px;
    margin: 0 auto; /* centers it */
    text-align: center;
    margin: 0 auto;
    
    display: flex;
    align-items: center;
    justify-content: center;
}