html::before {
    background: url('img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
    filter: brightness(95%);
}

h1, h2, h3, p, a {
    color: #41c72b;
    -webkit-text-stroke-color: black;
}

h2 {
    -webkit-text-stroke-width: 2px;
}

h3 {
    -webkit-text-stroke-width: 1.5px;
}

main a {
    color: white;
    -webkit-text-stroke-width: 0.6px;
    text-decoration-color: white;
    text-decoration-thickness: 2px;
    transition: color 0.3s, text-decoration-color 0.3s;
}

a:hover {
    color: var(--bright-green);
    text-decoration-color: var(--bright-green);
}

p {
    color: white;
    -webkit-text-stroke-width: 0.6px;
}

.contact-title {
    text-align: center;
    padding-top: calc(40 / 1080 * 100vh);
    padding-bottom: calc(40 / 1080 * 100vh);
    font-size: calc(60 / 1920 * 100vw);
}

.contact-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: calc(50 / 1080 * 100vh); /* Spacing between rows */
}

.contact-item {
    padding-top: calc(18.75 / 1080 * 100vh);
    text-align: center; /* Center text inside the contact item */
    width: calc(375 / 1920 * 100vw);
    font-size: calc(30 / 1920 * 100vw);
}

.contact-item img {
    margin-bottom: calc(12.5 / 1080 * 100vh);
}

.fourth-contact-item {
    grid-column: 1 / -1; /* Will take full width */
}

.fourth-row {
    display: flex;
    justify-content: center;
}

/* Style for contact icons */
.contact-icon {
    width: calc(67.5 / 1920 * 100vw);
    height: auto;
    margin: 0 auto calc(12.5 / 1080 * 100vh); /* Center icon and add space below */
}

.fourth-contact-item {
    grid-column: 1 / -1; /* Makes it stretch across all columns */
}

footer {
    padding: calc(25 / 1080 * 100vh) calc(25 / 1920 * 100vw);
}

footer > p {
    color: #ffffff;
    text-align: center;
    -webkit-text-stroke-color: none;
    -webkit-text-stroke-width: 0px;
}