/* | HERO SECTION [START] */
.hero .h1 {
    font-size: 5rem;
    line-height: 5rem;
}
/* | HERO SECTION [END] */

/* | CONTACT FORM [START] */
.contact .form {
    width: 50%;
    background-color: var(--board-1);
    padding: 20px;
    border-radius: 15px;
    border: 2px solid var(--board-2);
}

.contact .form-elem.row {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}

.contact .form-elem.row .input {
    width: 100%;
    padding: 5px;
    border: none;
}

.contact .form .btn {justify-content: center;}

.contact .form .divider {
    width: 100%;
    border-color: var(--secondary);
}

.contact .form .link {
    justify-content: center;
    background-color: #059669;
}
/* | CONTACT FORM [END] */

/* | CONTENT SECTION [START] */
.content {width: 100%;}
/* | CONTENT SECTION [END] */

/* | LOCATION SECTION [START] */
.location {
    background-color: var(--surface);
    height: 100%;
    border-radius: 15px;
}

.location .map {height: 100%;}

.location .map iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 15px 15px 0 0;
}

.cords {
    padding: 20px;
    box-shadow: 0px 0px 20px 20px var(--background);
}

.cords .loc {
    background-color: var(--board-1);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 2px var(--primary);
}

.cords .loc .fl-icon {
    background-color: var(--surface);
    color: var(--primary);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 2px var(--primary);
}
/* | LOCATION SECTION [END] */

/* | SOCIAL SECTION [START] */
.social .link {
    background-color: var(--surface);
    box-shadow: 0 0 2px var(--primary);
    padding: 10px 15px;
    border-radius: 8px;
}

.social .link .icon {
    background-color: var(--background);
    padding: 10px;
    border-radius: 8px;
}
/* | SOCIAL SECTIONS [END] */

/* & RESPONSIVE VERSIONS */
@media (max-width: 1024px) {
    .content {width: 50%;}
}

@media (max-width: 768px) {
    .main {gap: 0;}
    .contact .section {flex-direction: column;}
    
    .contact .form,
    .contact .content {width: 100%;}
}