*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    display: grid;
    color: #fff;
    background-color: #3C3C3C;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media (min-width: 50em) {
    .index-grid-container{
    max-width: 99.5%;
    margin: 0 .25% .25% .25%;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-areas:
        "box1   box1   box1   box1"
        "box2   box2   box2   box2"
        "box3   box3   box3   box3"
        "box4   box4   box4   box4"
        "box5   box5   box5   box5"
        "box6   box6   box6   box6"
        "box7   box7   box7   box7"
        "footer footer footer footer";
}
}

@media (max-width: 76.5em) {
    .index-grid-container{
    max-width: 99.5%;
    margin: 0 .25% .25% .25%;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-areas:
        "box1"  "box2"  "box3"  "box4"   "box5"
        "box6"   "box7"  "footer";
}
}

.grid-item{
    display: flex;
    flex-direction: column;
    place-content: center;
    text-align: center;
    background-color: #000;
    font-size: 1.8rem;
    z-index: 1;
}

.wrapper {
    width: 100%;
    max-width: 1512px;
    padding: 4rem;
    place-self: center;
}

.title-wrapper {
    width: 100%;
    place-items: center;
    text-align: left;
    gap: 2.5rem;
}
.content-wrapper {
    display: grid;
    width: 100%;
    place-items: start;
    text-align: left;
    gap: 2rem;
}

img {
    width: 100%;
}

a {
    color: #fff;
    text-decoration: none;
}
.buttons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
button {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: .8rem 2rem;
    border-radius: 8px;
    font-size: large;
    font-weight: 400;
    cursor: pointer;
}
button:hover {
    transform: translateY(-0.1rem);
    box-shadow: 1px 1px 25px 10px rgba(255, 255, 255, 0.4);
  }


.grid-item-1{
    grid-area: box1;
    background-color: #eeeeeeb8;
    padding-top: 6svh;
    filter: drop-shadow(0rem 0rem 1rem #0008);
}
.grid-item-1-wrapper{
    width: 100%;
    max-width: 1512px;
    padding: 13svh 4rem;
    place-self: center;
    text-align: left;
}
.grid-item-1 h1 {
    font-size: clamp(2.8rem, 4vw, 60rem);
    font-weight: 500;
    filter: drop-shadow(0rem 0rem 1rem #0008);
    color: #000;
}
.grid-item-1 p {
    font-size: clamp(1.3rem, 1.3vw, 60rem);
    filter: drop-shadow(0rem 0rem 1rem #0008);
    color: #000;
}

.grid-item-2{
    grid-area: box2;
    background: transparent;
    height: 100svh;
}

.grid-item-3{
    grid-area: box3;
    background: url(./banner-image1.png) no-repeat fixed center;
    background-size: cover;
    height: 100svh;
}

.grid-item-4{
    grid-area: box4;
    background: transparent;
    height: 100svh;
}

.grid-item-5{
    grid-area: box5;
    background: url(./banner-image1.png) no-repeat fixed center;
    background-size: cover;
    height: 100svh;
}

.grid-item-6{
    grid-area: box6;
    background: transparent;
    height: 100svh;
}

.grid-item-7{
    grid-area: box7;
    background: url(./banner-image1.png) no-repeat fixed center;
    background-size: cover;
    height: 100svh;
}

.grid-item-footer{
    grid-area: footer;
    border-radius: 0 0 8px 8px;
    background: url(./banner-image1.png) no-repeat fixed center;
    background-size: cover;
    height: 20svh;
}