:root {
    --sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif: Georgia, Times, "Times New Roman", serif;
    font-size: 12px;

    /* Primary Colors: */
    --red: #e3120b;
    --white: #fafafa;
    --dark-gray: #4a4a4a;

    /* Secondary Colors:  */
    --mid-green: #91b8bd;
    --light-grey: #d4dddd;
    --dark-green: #244747;
    --green: #336666;
    --mid-blue: #8abbd0;
    --beige: #efe8d1;
}

@media (min-width: 400px) and (max-width: 800px) {
    :root {
        font-size: calc(12px + 12 * ((100vw - 400px) / 400));
    }
}

@media (min-width: 800px) {
    :root {
        font-size: 24px;
    }
}


*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 100%;
}

body {
    font-family: var(--sans-serif);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    background-color: var(--white);
}

::selection {
    background-color: var(--red);
    color: var(--white);
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.wrapper,
.container,
main {
    overflow: visible !important;
}


@media (min-width: 901px) {
    div.lang {
        position: fixed;
        top: 40px;
        right: 40px;
        border: 3px solid var(--custom-black);
    }

    .lang-link-img {
        width: 150px;
        height: auto;
    }
}

@media (min-width: 600px) {
    div.lang {
        position: fixed;
        top: 20px;
        right: 20px;
        border: 2px solid var(--custom-black);
    }

    .lang-link-img {
        width: 100px;
        height: auto;
    }
}

@media (max-width: 599px) {
    div.lang {
        position: fixed;
        top: 10px;
        right: 10px;
        border: 1px solid var(--custom-black);
    }

    .lang-link-img {
        width: 50px;
        height: auto;
    }
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

h1:first-child {
    visibility: hidden;
}

h2 {
    margin: 2em 0 1em 0;
}

h3 {
    margin: 1em 0 0.5em 0;
}

p {
    margin-bottom: 2em;
}

p:last-child {
    margin-bottom: 2em;
}

a {
    color: var(--dark-green);
    transition: color 0.3s;
}

/* paragraphs columns */
.p-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: normal;
    align-items: left;
    align-content: normal;
}

.p-item:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

.p-item:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

@media (min-width: 968px) {
    .p-container {
        flex-direction: row;
    }

}

/* Form styling */
.contact-form {
    margin: 2rem 0;
    width: 100%;
    align-items: stretch;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-column {
    flex: 1;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--beige);
    border-radius: 4px;
    font-family: var(--sans-serif);
}

.form-group textarea {
    min-height: auto;
    resize: none;
}

.form-actions {
    text-align: right;
}

.btn {
    padding: 0.75rem 1.5rem;
    background-color: var(--dark-green);
    color: var(--white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: var(--green);
}

/* Responsive layout - Desktop */
@media (min-width: 968px) {
    .form-container {
        flex-direction: row;
    }

    .form-details {
        flex: 1;
        padding-right: 1.5rem;
    }

    .form-message {
        flex: 1;
    }

    .form-message textarea {
        height: 100%;
        min-height: 700px;
        /* Taller on desktop */
    }
}

/* Error states */
.form-group.error input,
.form-group.error textarea {
    border-color: var(--red);
}

.error-message {
    color: var(--red);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}


/* CARDS */


.cards-container {
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
}

.cards-col {
    flex: 1 1 calc(33.333% - 1.5rem);
    /* min-width: 250px; */
}

.card {
    background-color: var(--light-grey);
    border: 1px solid var(--mid-grey);
    border-radius: 4px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s;
}

@media (min-width: 968px) {
    .cards-container {
        flex-direction: row;
    }

    .cards-col {
        flex: 1 1 calc(33.333% - 1.5rem);
    }
}