* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* padding and border width & height */
}

/* Body styles */
body {
    font-family: 'Archivo', Arial, sans-serif; /* font */
    display: flex; /* flex container */
    flex-direction: column; /*  vertically children */
    min-height: 100vh; /* viewport height */
}

/* Header styles */
header {
    position: relative;
}

/* Horizontal navigation bar */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center; /* Center items  */
    background-color: #ffffff;
    z-index: 999;
}

nav li {
    margin: 0 10px; /* margin between list item */
}

nav li:first-child a {
    background-color: #ffffff; /* background color for the first nav*/
    color: #2E69A0; /* text color for the first nav*/
}

nav li a {
    display: block;
    padding: 14px 16px; /*padding to link text */
    text-decoration: none;
    color: #2E69A0; /*  link text color */
    background-color: transparent; /* background color for each link */
}

/* color on hover */
nav li a:hover {
    background-color: #ebebebd0; /*  background color on hover */
}

/* Main content container */
.main-content {
    flex: 1; /* fill remaining space */
    display: flex;
    flex-wrap: wrap; /* wrap within container */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

/* Grid layout */
.grid-wrapper {
    display: flex;
    flex-wrap: wrap; /* grid item to wrap */
    gap: 10px; /* gap between grid items */
    padding-top: 50px; /* padding to navigation bar */
}

.column {
    flex: 1; /*  column takes up equal space */
    background-color: #ffffff;
    padding: 20px;
    text-align: center; /* Center text horizontally */
    position: relative;
}

img {
    max-width: 100%; /* image retains its original width */
    height: auto; /*  aspect ratio */
}

.overlay-text {
    position: absolute;
    top: 100px; /* y-axis position */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /*  width */
    width: 177px; /* width of the text */
    height: 80px; /* height of the text */
    text-align: center; /* Center text horizontally */
    font-family: 'Archivo', sans-serif;
    font-size: 24px;
    letter-spacing: 7px;
    color: #ffffff; /* Set the color to black */
}

#company-name {
    position: absolute;
    top: 140px; /* Y-axis position */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    width: 177px; /* Width of the text */
    text-align: center; /* Center text horizontally */
    font-family: 'Archivo', sans-serif;
    font-size: 26px; 
    letter-spacing: 2px;
    color: #ffffff;
}

.welcome-message {
    position: absolute;
    top: 30px; /* Y-axis position */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    color: #2E69A0; 
    font-size: 75px; 
    z-index: 1; /* text  positioned */
}

.line-under-welcome {
    position: absolute;
    top: 200px; /* istance from the top */
    left: 50%;
    transform: translateX(-50%);
    width: 600px; /*width of the line */
    height: 3px;
    background-color: #bdbdbd;
    z-index: 3;
}

.paragraph {
    position: relative;
    top: 300px; /* distance from the top */
    left: 50%;
    transform: translateX(-50%);
    color: black;
    font-size: 32px;
    text-align: justify;
    line-height: 1.2;
    width: 50%;
    margin-left: 0;
    margin-right: 20%;
}


#request-consultant {
    position: absolute;
    bottom: -850px; /* distance from bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
}

#request-consultant a {
    margin: 0; /*  default margin */
    padding: 14px 16px; /*  padding for links */
    text-decoration: none; /*  underline */
    color: #2E69A0; 
    font-weight: bold;
    font-size: 26px;
}

#request-consultant a:hover {
    background-color: #ebebebd0; /*background color on hover */
}


/* Footer styles */
footer {
    top: 700px; /* distance from the top */
    position: relative;
    text-align: center; /* Center the text horizontally */
    margin-top: auto; 
    margin-bottom: 20px; /* space above the footer */
    font-size: 18px; 
    color: #2d679d; 
    font-weight: bold; 
}