* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html  {
height: 100vh;
width:100%;
font-family: 'Verdana', sans-serif;
color: white;
font-size:16px;
line-height:1.6;
font-weight: 300;
background-color: #333333 ;
}

/*MOBILE FIRST LOAD */
.main-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-areas:
/* STACKED **/ 
"myHeader"
"top-intro"
"main"

}
/*MOBILE END */
/*LARGER SCREENS ONLY*/
@media  only screen and (min-width: 1481px){
.main-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-areas:
" myHeader              myHeader       myHeader       myHeader"
" top-intro   top-=intro   top-intro   top-intro   "
" .   main     main   . "



;
}
}

h1{
color: #333333;
font-size: 2vw;
padding-left: 40px;
margin-top: 60px;

}

a {
color: #3498db;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}


.top-intro{
grid-area: top-intro;
background-image:  url(../vacancies-hero.webp) ;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 500px;
background-attachment: fixed;
}


.main{
grid-area: main;
margin-top: 40px;
}



/* Container */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
box-shadow: 0 0 10px rgba(136, 136, 136, 0.574);
}



/* Content */
.content {
padding: 20px 0;
}

.content h2 {
margin-top: 30px;
font-size: 1.4em;
color: #98A869;
margin-bottom: 25px;
}

.content p {
font-size: 1.1rem;
}

.content ul {
padding-left: 20px;
}

.content ul li {
margin-bottom: 10px;
}

/* Call-to-Action */
.cta {
text-align: center;
margin: 30px 0;
padding: 20px;
background: #3498db;
color: #fff;
border-radius: 5px;
}

.cta a {
color: #fff;
background: #2c3e50;
padding: 10px 20px;
border-radius: 5px;
font-size: 1.1rem;
}

.cta a:hover {
background: #1a252f;
}

/* Footer */
footer {
text-align: center;
padding: 20px 0;
background: #2c3e50;
color: #fff;
margin-top: 30px;
}

footer p {
margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
header h1 {
font-size: 2rem;
}

.container {
padding: 10px;
}

.content h2 {
font-size: 1.5rem;
}

.content p {
font-size: 1rem;
}
}