.hero-section {
    position: relative;
    background-image: url(../images/victor-freitas-hOuJYX2K5DA-unsplash.jpg);
    padding-top: 25dvh;
    padding-bottom: 15dvh;
    height: 70dvh;
}

.hero-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40%;
    background-image: linear-gradient(0deg,
        rgba(var(--R), var(--G), var(--B), 1) 0%,
        rgba(var(--R), var(--G), var(--B), 0.738) 19%,
        rgba(var(--R), var(--G), var(--B), 0.541) 34%,
        rgba(var(--R), var(--G), var(--B), 0.382) 47%,
        rgba(var(--R), var(--G), var(--B), 0.278) 56.5%,
        rgba(var(--R), var(--G), var(--B), 0.194) 65%,
        rgba(var(--R), var(--G), var(--B), 0.126) 73%,
        rgba(var(--R), var(--G), var(--B), 0.075) 80.2%,
        rgba(var(--R), var(--G), var(--B), 0.042) 86.1%,
        rgba(var(--R), var(--G), var(--B), 0.021) 91%,
        rgba(var(--R), var(--G), var(--B), 0.008) 95.2%,
        rgba(var(--R), var(--G), var(--B), 0.002) 98.2%,
        rgba(var(--R), var(--G), var(--B), 0) 100%
    );
}

.contact-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    color: white;
    background-color: var(--color);
    gap: clamp(20px, 5%, 100px);
}

.contact-map {
    width: 100%;
    height: 500px;
    border-radius: 10px;
}

.contact-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(250px, calc(100%/2 - 20px)), 1fr));
    width: 100%;
    gap: 20px;
}

.contact-form > input,
.contact-form > textarea,
.contact-form > button {
    border-radius: 30px;
    padding: 20px 25px;
    transition: color 0.3s ease, background 0.3s ease;
}

.contact-form > textarea,
.contact-form > button {
    grid-column: 1 / -1;
}

.contact-form > button {
    background-color: white;
    color: black;
}

.contact-form > input:focus::placeholder,
.contact-form > textarea:focus::placeholder {
    color: var(--color);
}

.contact-form > button:hover,
.contact-form > button:focus {
    background-color: white;
    color: var(--color);
}

.info-section {
    color: white;
    background-color: var(--color);
}

.info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 15px 0;
    gap: 20px;
}

.info-list > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    min-width: 280px;
}

.info-list > li > span {
    display: block;
    font-size: 1.2rem;
    padding: 5px 0;
}

.info-list > li > a {
    display: block;
    width: fit-content;
    font-size: 1.2rem;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.info-list > li > a:hover {
    color: black;
}

.social-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 3%, 50px);
    padding: 15px 0;
}

.social-list > li {
    width: clamp(75px, 5%, 300px);
    transition: transform 0.2s ease-in-out;
}

.social-list > li:hover{
    transform: translateY(-10%);
}

.social-list > li > a > svg {
    fill: white;
    transition: fill 0.3s ease;
}

.social-list > li > a > svg:hover {
    fill: black;
}