/* ============================= */
/*          HTML       */
/* ============================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*=============== VARIABLES ===============*/
:root {
    /*Colors*/
    --header-height: 5rem;
    --first-color: hsl(151, 61%, 18%);
    --first-color-alt: hsl(123, 50%, 33%);
    --title-color: hsl(0, 0%, 0%);
    --text-color: hsl(0, 0%, 50%);
    --text-color-light: hsl(0, 0%, 100%);
    --body-color: hsl(0, 0%, 100%);
    --container-color: hsl(126, 63%, 45%);
    --container-color-alt: hsl(150, 10%, 96%);
    /*Fonts & Typography*/
    --body-font: Poppins, sans-serif;
    --biggest-font-size: 2.3rem;
    --bigg-font-size: 2rem;
    --h1-font-size: 1.8rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    /*Font weight*/
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-black: 800;
    /*Margin bottom*/
    --mb-0-25: .25rem;
    --mb-0-5: 0.5rem;
    --mb-0-75: 0.75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;
    --mb-3-5: 3.5rem;
    /*Z-index*/
    --z-tooltip: 10;
    --z-fixed: 100;
    /*Border radious*/
    --br-0-5: 0.5rem;
}

/*Responsive typography*/

@media screen and (max-width: 320px) {
    :root {
        --biggest-font-size: 2rem;
        --bigg-font-size: 1.75rem;
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: 1rem;
    }
}

@media screen and (min-width: 992px) {
    :root {
        --biggest-font-size: 3.5rem;
        --bigg-font-size: 3rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.1rem;
        --normal-font-size: 0.9rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

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

html {
    scroll-behavior: smooth; /*Scroll suave*/
}

body {
    width: 100%;
    margin: 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
}

.no-scroll {
    overflow: hidden;
}

h1, h2, h3, h4 {
    color: var(--first-color);
    font-weight: var(--font-semi-bold);
}

    h1 .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: none;
}

label {
    color: var(--first-color);
    font-size: var(--small-font-size);
}

img {
    width: 100%;
    height: auto;
    filter: brightness(0.75) contrast(1.2);
}

button, input {
    border: none;
    outline: none;
}

button {
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}

/*=============== BUTTONS ===============*/
.button {
    display: inline-block;
    background-color: var(--container-color);
    color: var(--body-color);
    padding: 0.5rem 0.75rem;
    border-radius: 1.25rem;
    font-weight: var(--font-medium);
    transition: background-color 400ms ease;
    will-change: background-color;
}

    .button:hover {
        background-color: var(--body-color);
        color: var(--first-color-alt);
    }

.button__alt {
    display: inline-block;
    background-color: var(--container-color-alt);
    color: var(--first-color);
    padding: 0.5rem 0.75rem;
    border-radius: 1.25rem;
    font-weight: var(--font-medium);
    transition: background-color 400ms ease;
    will-change: background-color;
}

    .button__alt:hover {
        background-color: var(--first-color-alt);
        color: var(--body-color);
    }

.button__icon {
    font-size: 1rem;
    border-radius: 50%;
    padding: 0.5rem .75rem;
}

.button--ghost {
    background-color: transparent;
    color: var(--text-color-light);
    transition: transform 400ms ease;
    will-change: transform;
}

    .button--ghost:hover {
        transform: scale(1.5);
    }

.button--link {
    color: var(--title-color);
}

.button--flex {
    display: none;
    align-items: center;
    column-gap: .5rem;
}


/*=============== REUSABLE CSS CLASSES ===============*/
.section {
    padding: 3rem 0rem;
}

.section__title {
    font-size: var(--biggest-font-size);
    font-weight: 700;
    margin: var(--mb-1-5);
    text-align: center;
    color: var(--first-color);
}

.section__title__white {
    font-size: var(--biggest-font-size);
    font-weight: var(--font-black);
    margin-bottom: var(--mb-1-5);
    text-align: center;
    color: var(--text-color-light);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.section__description {
    font-size: var(--normal-font-size);
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-color);
    text-align: center;
    max-width: 600px;
    margin: var(--mb-1-5) auto;
}

.section__description__white {
    margin-bottom: var(--mb-1-5);
    color: var(--text-color-light);
    font-size: var(--normal-font-size);
    line-height: 200%;
    text-align: center;
    margin: var(--mb-1-5) auto;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    max-width: 600px;
}

.section__points {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .section__points .point {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: 5px;
        background-color: var(--container-color);
    }

/*Layout*/
.container {
    max-width: 968px;
    margin-left: var(--mb-1-5);
    margin-right: var(--mb-1-5);
}

.grid {
    display: grid;
    align-content: center;
    justify-items: center;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    overflow: hidden; /*For animation*/
}

/*=============== PAGE LOADER ===============*/
.page-loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--body-color);
    z-index: 99999999999 !important;
}

    .page-loader .spinner {
        position: relative;
        top: 35%;
        width: 80px;
        height: 80px;
        margin: 0 auto;
        background-color: var(--first-color-alt);
        border-radius: 50%;
        animation: sk-scaleout 1s infinite ease-in-out;
    }

/*=============== HEADER ===============*/
.header {
    width: 100%;
    z-index: var(--z-fixed);
    background-color: var(--body-color);
}

/*=============== NAV MENU ===============*/
.nav__menu {
    justify-content: space-around;
}

.nav__list {
    margin: 1.5rem;
}

.nav {
    max-height: var(--header-height);
    justify-content: space-between;
    transition: max-height 1200ms ease-in-out;
    will-change: max-height;
}

.nav-expand {
    max-height: 6rem;
}

.nav__logo {
    font-weight: var(--font-medium);
    font-size: var(--h3-font-size);
}

.nav__logo-img {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: space-around;
}

.nav__img-span {
    font-weight: 600;
}

.nav__img {
    width: 70px;
    transition: width 400ms ease;
    will-change: width;
}

.nav__img-expand {
    width: 90px;
}

.nav__link,
.nav__logo,
.nav__close {
    color: var(--first-color);
}

.nav__toggle {
    padding: 1rem;
    font-size: 1.25rem;
    cursor: pointer;
    background-color: var(--first-color-alt);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    color: var(--body-color);
    transition-delay: 0.5s;
    transition: opacity 1s ease;
    will-change: opacity;
}

.nav__close {
    position: absolute;
    right: 1rem;
    opacity: 0;
    visibility: hidden;
    padding: 1rem;
    font-size: 1.25rem;
    cursor: pointer;
    background-color: var(--first-color-alt);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    color: var(--body-color);
    z-index: var(--z-fixed);
    transition-delay: 0.5s;
    transition: opacity 1s ease;
    will-change: opacity;
}

.nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1.5rem;
}

.nav__link, a {
    font-weight: var(--body-font);
    transition: .4s;
    font-size: var(--normal-font-size);
}

    .nav__link:hover {
        color: var(--first-color-alt);
    }

/*Small devices */
@media screen and (max-width: 991.5px) {
    .nav__logo {
        font-size: var(--h2-font-size);
    }

    .nav__logo-img {
        gap: 1rem;
    }

    .nav__menu {
        position: fixed;
        transform: translateX(0px);
        width: 100%;
        height: 100vh;
        background: var(--body-color);
        top: -200%;
        left: 0;
        padding: 1.5rem;
        z-index: var(--z-fixed);
        box-shadow: 0 0 0.5px var(--text-color-light);
        flex-flow: column nowrap;
        transition: top ease 0.5s;
        will-change: top;
    }

    .nav__link, a {
        color: var(--first-color);
    }

    .nav__item {
        margin: var(--mb-2);
    }
}

/* Show menu */
.show-menu {
    top: 0;
}

.show {
    transform: translateX(0vw);
    position: fixed;
    opacity: 1;
    visibility: visible;
    z-index: var(--z-fixed);
}

.hidden {
    visibility: hidden;
    opacity: 0;
}

/* Change background header */
.scroll-header {
    background: var(--container-color);
}

/* Active link */
.active-link {
    position: relative;
}

    .active-link::before {
        content: '';
        position: absolute;
        bottom: -.75rem;
        left: 45%;
        width: 5px;
        height: 5px;
        background-color: var(--first-color-alt);
        border-radius: 50%;
    }

/* ============================= */
/*              HOME             */
/* ============================= */


/*=============== HOME ===============*/
.home {
    flex-flow: column nowrap;
    overflow: hidden;
}

.home-swiper {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.home__content {
    position: relative;
    height: 100%;
    width: 100vw;
}

.home__img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    position: absolute;
}

.home__group {
    position: absolute;
    padding: 3rem 2rem;
    place-items: center;
    height: 100%;
    row-gap: var(--mb-1);
}


.home__details-grid {
    background-color: var(--body-color);
    border-radius: var(--br-0-5);
    overflow: hidden;
    grid-template-columns: 1fr;
    width: 80%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-5%);
    grid-gap: 0;
    z-index: 1;
    margin-bottom: -2rem;
}

.home__details-item {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
}

.home__details {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 0.5rem;
    padding: 0.5rem;
}

.home__details-img {
    width: 80px;
    will-change: transform;
    transition: transform 400ms ease;
}

.home__details-title {
    text-align: center;
}

.home__details-item:hover .home__details-img {
    transform: scale(1.1);
}

.home__details-description {
    text-align: center;
    padding: 0.5rem;
    width: 100%;
    color: var(--first-color);
    font-size: var(--normal-font-size);
}


/* Swiper Class */
.swiper-slide {
    will-change: transform;
}

.swiper-pagination {
    position: initial;
}

    .swiper-pagination .swiper-pagination-bullet {
        width: 5px;
        height: 5px;
        background-color: var(--container-color);
        opacity: 1;
        color: black;
    }

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0.5rem;
}

.swiper-pagination .swiper-pagination-bullet-active {
    width: 1.5rem;
    height: 5px;
    border-radius: .5rem;
}

.swiper-button-prev::after, .swiper-button-next::after {
    color: var(--body-color);
    opacity: 1;
    font-size: 1.5rem !important;
}

.swiper-button-prev::after {
    transform: translateX(-50px);
}

.swiper:hover > .swiper-button-prev::after {
    transform: translateX(0);
    transition: 0.5s;
}

.swiper-button-next::after {
    transform: translateX(+50px);
}

.swiper:hover > .swiper-button-next::after {
    transform: translateX(0);
    transition: 0.5s;
}

/*=============== STATISTIC ===============*/
.statistic__container {
    z-index: var(--z-tooltip);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: var(--mb-3);
}

.statistic__data {
    text-align: center;
}

.statistic__description-title {
}

.statistic__description {
    text-align: center;
    margin: auto;
    color: var(--first-color);
    font-size: var(--h3-font-size);
}

.statistic__title {
    color: var(--first-color);
    font-size: 4rem;
    font-weight: var(--font-medium);
}

/*=============== SERVICES ===============*/
.main__services-flex {
    display: flex;
    flex-flow: column wrap;
    position: relative;
    height: 600px;
    overflow: hidden;
    border-radius: var(--br-0-5);
    margin-bottom: -5rem;
    z-index: 1;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
}

.main__service {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    flex: 1;
    transition: all 800ms;
    background-color: var(--first-color-alt);
    will-change: flex;
}

    .main__service:hover {
        flex: 3;
        transition: ease 400ms;
    }

        .main__service:hover .main__service-img {
            opacity: 0.4;
            transition: ease 400ms;
            transform: scale(1.5);
        }

        .main__service:hover .main__service-data {
            top: 0;
            opacity: 1;
            transition: ease 400ms;
            transition-delay: 400ms;
        }

    .main__service:nth-child(1):hover ~ .main__service:nth-child(2),
    .main__service:nth-child(1):hover ~ .main__service:nth-child(3) {
        flex: 1;
    }

.main__service-img {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: opacity, transform;
    transition: opacity 400ms ease, transform 400ms ease;
}

.main__service-data {
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    position: absolute;
    top: 10%;
    height: 100%;
    opacity: 0;
    padding: 2.5rem;
    will-change: top, opacity;
}

.main__service-title {
    color: var(--body-color);
    font-size: var(--bigg-font-size);
}

.main__service-description {
    color: var(--body-color);
    text-align: center;
    line-height: 2;
    display: block;
}

.services {
    width: 100%;
}

.services__container {
    padding: 6rem 0rem;
    max-width: 95%;
    margin: auto;
    background-color: var(--container-color-alt);
    border-radius: var(--br-0-5);
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.services__content {
    position: relative;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: var(--mb-3-5);
}


.services__img-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    opacity: 0.1;
}



.services__data {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    width: 100%;
    padding: var(--mb-1-5);
    cursor: pointer;
    will-change: background-color, box-shadow;
    transition: background-color 400ms ease, box-shadow 400ms ease;
}

    .services__data:hover {
        background-color: var(--body-color);
        box-shadow: 0 4px 8px hsla(209, 14%, 50%, 0.3);
    }

.services__img {
    width: 75px;
    transition: .3s;
    color: var(--first-color-alt);
    will-change: transform;
    transition: transform ease 400ms;
}

.services__description {
    text-align: left;
    color: var(--text-color);
    line-height: 1.5;
    font-size: var(--normal-font-size);
}

.services__description-title {
}

.services__title {
    margin: 1rem 0rem;
    font-size: var(--h2-font-size);
    font-weight: var(--font-semi-bold)
}

.services__data:hover .services__img {
    transform: translateY(-.5rem);
}

.quote__container {
    padding: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
    width: 80%;
    height: 700px;
    background-color: var(--first-color);
    border-radius: var(--br-0-5);
    justify-items: start;
    grid-gap: 0;
    z-index: var(--z-tooltip);
}

.quote__img {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin: 0;
    border-radius: var(--br-0-5);
}

.quote__content {
    padding: var(--mb-1-5);
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
}

.quote__title {
    font-size: var(--h3-font-size);
    color: var(--body-color);
    font-weight: var(--font-black);
    text-align: center;
    justify-self: center;
    align-self: center;
    margin: var(--mb-0-25);
}

.quote__description__list {
    padding: var(--mb-0-75);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    list-style-type: none;
    gap: var(--mb-1);
}

.quote__subtitle {
    font-weight: var(--font-semi-bold);
}

.quote__description {
    font-size: var(--normal-font-size);
    color: var(--body-color);
    line-height: 1.5;
    text-align: left;
    position: relative;
    padding-left: var(--mb-1);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: baseline;
}

    .quote__description i {
        margin: 0 var(--mb-0-5);
    }


.quote__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    gap: 1rem;
    padding: var(--mb-0-5);
}

/*=============== INSPIRATION ===============*/
.inspo__container {
    width: 100%;
    height: auto;
}

.inspo-swiper {
    width: 100%;
    height: 350px;
    position: relative;
}

.inspo__details-item {
    margin: auto;
    width: 450px;
    height: 300px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to top, hsl(151, 61%, 18%) 0%, rgba(151, 61, 18, 0) 100%);
}


    .inspo__details-item:hover .inspo__img {
        opacity: 1;
    }

    .inspo__details-item:hover .inspo__data {
        top: 0;
    }

    .inspo__details-item:hover .inspo__details-button {
        right: 0;
    }

.inspo__img {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    will-change: opacity;
    transition: opacity 400ms ease;
}

.inspo__data {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 100%;
    left: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    padding: 2rem;
    will-change: top;
    transition: top 400ms ease;
}

.inspo__details-subtitle {
    color: var(--text-color-light);
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-1-5);
}

.inspo__details-button {
    width: 60px;
    height: 60px;
    background-color: var(--container-color);
    position: absolute;
    top: 0;
    right: -100%;
    padding: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    gap: 0.5rem;
    font-size: 1.5rem;
    color: var(--text-color-light);
    will-change: right, background-color;
    transition: right, background 400ms ease;
}

    .inspo__details-button:hover {
        background-color: transparent;
    }

/*=============== WORKING AREAS ===============*/
.working__areas-map {
    width: 100vw;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    margin: 0;
    border: none;
}

    .working__areas-map iframe {
        width: 100%;
        height: 100%;
    }
/*=============== TESTIMONIALS ===============*/
.testimonials__container {
    width: 100%;
    flex-flow: row wrap;
}

.testimonials__sumary {
    position: relative;
    background-color: var(--first-color);
    width: 100%;
}

.testimonials__img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonials__info {
    flex-flow: column nowrap;
    align-items: flex-start;
    padding: 3em;
    height: auto;
    gap: 1.5rem;
}

.testimonials__title {
    color: var(--body-color);
    text-align: left;
}

.testimonials__description {
    color: var(--body-color);
    line-height: 2;
    font-size: var(--normal-font-size);
}

.testimonials__data {
    background-color: var(--container-color-alt);
    position: relative;
    width: 100%;
}

.testimonials__data-title {
    text-align: left;
    font-size: var(--bigg-font-size);
}

.testimonials__description-data {
    line-height: 2;
    color: var(--text-color);
    margin-bottom: var(--mb-1-5);
}

.testimonials__description-data-title {
    color: var(--first-color-alt);
    font-size: var(--h3-font-size);
    text-align: left;
}

.testimonials__img-background {
    position: absolute;
    width: 100%;
    object-fit: cover;
    opacity: 0.2;
}

/*=============== FOOTER ===============*/
.footer {
    overflow: hidden;
}

.footer__content {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
}

.footer__logo {
    display: flex;
    align-items: center;
    font-weight: var(--font-medium);
    color: var(--first-color);
}

.footer__logo-img {
    width: 100px;
}

.footer__img-span {
    font-size: var(--h2-font-size);
}

.footer__buttons {
}

.footer__description {
    font-size: var(--normal-font-size);
    text-align: center;
}

.footer__social {
    display: flex;
    column-gap: .75rem;
}

.footer__social-link {
    display: inline-flex;
    background: var(--container-color-alt);
    padding: .25rem;
    border-radius: .25rem;
    color: var(--first-color);
    font-size: 1.5rem;
}

    .footer__social-link:hover {
        background: var(--body-color);
    }

.footer__title {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-1);
}

.footer__links {
    display: grid;
    row-gap: .35rem;
}

.footer__link {
    font-size: var(--small-font-size);
    color: var(--text-color);
    transition: .3s;
}

    .footer__link:hover {
        color: var(--title-color);
    }

.footer__copy {
    display: block;
    text-align: center;
    font-size: var(--smaller-font-size);
    margin-top: 4.5rem;
}


/*=============== SCROLL UP ===============*/
.scrollup {
    position: fixed;
    background: var(--container-color);
    right: 1rem;
    bottom: -20%;
    display: inline-flex;
    padding: .3rem;
    border-radius: .25rem;
    z-index: var(--z-fixed);
    opacity: .7;
    transition: .4s;
}

.scrollup__icon {
    font-size: 2rem;
    color: var(--body-color);
}

.scrollup:hover {
    background: var(--container-color);
    opacity: 1;
}

/* Show Scroll Up*/
.show-scroll {
    bottom: 3rem;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
    width: 0.6rem;
    background: #413e3e;
}

::-webkit-scrollbar-thumb {
    background: #272525;
    border-radius: .5rem;
}

/*===============  BREAKPOINTS ===============*/
/* For small devices */
@media screen and (min-width: 320px) {
    .container {
        margin: var(--mb-1);
    }

    .nav__img-span {
        font-size: var(--h3-font-size);
    }

    .home__details-grid {
        transform: translateY(-3%);
    }

    .quote__container {
        width: 90%;
    }


    .statistic__container,
    .services__content {
        grid-template-columns: .8fr;
        justify-content: center;
    }

    .inspo__details-item {
        width: 300px;
        height: 250px;
    }

    .working__areas-map {
    }
}

/* For medium devices */
@media screen and (min-width: 480px) {

    .home__details-grid {
        grid-template-columns: 1fr 1fr;
        transform: translateY(-10%);
    }

    .home__details-description {
        font-size: 13px;
    }

    .statistic__container, .services__content {
        grid-template-columns: repeat(2, 1fr);
    }

    .quote__container {
        width: 70%;
        height: 800px;
    }

    .working__areas-map {
    }
}

@media screen and (min-width: 768px) {
    body {
        margin: 0;
        font-size: var(--normal-font-size);
    }

    .section__description, .section__description__white {
        font-size: var(--h3-font-size);
    }

    .home__group {
        padding: 6rem;
    }

    .home__title {
        font-weight: 700;
        line-height: 1.5;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .home__details-grid {
        transform: translateY(-10%);
        grid-template-columns: 1fr 1fr 1fr;
    }

    .statistic__container {
        grid-template-columns: repeat(3, 200px);
        justify-content: center;
        column-gap: 0;
    }

    .main__services-flex {
        flex-direction: row;
        height: 400px;
        width: 80%;
        margin: auto;
        margin-bottom: -5rem;
    }

    .services__content {
        grid-template-columns: 1fr;
        padding: 3rem
    }

    .quote__container {
        grid-template-columns: 2fr 3fr;
        grid-template-rows: 1fr;
        height: 350px;
        width: 80%;
        padding: 0;
    }

    .quote__content {
        grid-row: 1;
        grid-column: 2;
        transform: scale(0.8);
        padding: var(--mb-0-5);
    }

    .quote__img {
        grid-column: 1;
        grid-row: 1;
        height: 350px;
        align-self: center;
    }

    .quote__content {
        grid-column: 2;
        grid-row: 1;
    }

    .quote__buttons {
        justify-self: flex-start;
    }

    .process__img {
        position: relative;
    }
}

/* For large devices */
@media screen and (min-width: 992px) {
    header {
        position: sticky;
        top: 0;
    }

    .nav__close,
    .nav__toggle {
        display: none;
    }

    .nav__list {
        flex-direction: row;
        column-gap: 1rem;
    }

    .container {
        margin-left: auto;
        margin-right: auto;
    }

    .section__title {
        font-size: var(--bigg-font-size);
        margin-bottom: 3rem;
    }

    .home__description {
        margin-bottom: 1.5rem;
    }

    .home__details-grid {
        grid-template-columns: repeat(6,1fr);
        width: 90%;
        margin-bottom: -1rem;
        transform: translateY(-15%);
    }

    .home__details-item {
        height: 200px;
    }

        .home__details-item:hover .home__details-description {
            top: 0;
        }

    .home__details-img {
        width: 100px;
    }

    .home__details-description {
        background-color: var(--first-color-alt);
        top: 100%;
        position: absolute;
        transition: top 400ms ease;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        will-change: top;
    }

    .home__details-title {
        color: var(--body-color);
    }

    .statistic__container, .services__container {
        grid-template-columns: repeat(3, 300px);
    }

    .services__content {
        grid-template-columns: repeat(3,1fr);
        padding: 3rem;
        grid-gap: 3rem;
    }

    .inspo__details-item {
        width: 350px;
    }

    .trick__container {
        gap: 3.5rem;
    }

    .working__areas-map {
    }
}

@media screen and (min-width: 1200px) {
}

/*=============== KEYFRAMES ===============*/
@keyframes floating {
    0% {
        transform: translate(0, 0px);
    }

    50% {
        transform: translate(0, 15px);
    }

    100% {
        transform: translate(0, -0px);
    }
}

@keyframes sk-scaleout {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}


/* ============================= */
/*   SERVICES & SINGLE-SERVICE   */
/* ============================= */

/*=============== SERVICE ===============*/
.service__container {
    display: grid;
}

.service__container__services {
    padding-bottom: 0;
}

.service__content {
    padding: var(--mb-1-5);
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}

.service__content-collage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 300px;
    height: 300px;
    margin: 1.5rem;
    justify-self: center;
}

.service__content-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.service__content-img-first {
    position: absolute;
    bottom: 20px;
    left: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid;
    border-color: var(--body-color);
    animation: floating 5s ease-in-out infinite;
    will-change: transform;
    filter: none;
}

.service__content-img-second {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid;
    border-color: var(--body-color);
    animation: floating 5s ease-in-out infinite;
    animation-delay: 1s;
    will-change: transform;
    filter: none;
}

.service__content-img-third {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid;
    border-color: var(--body-color);
    background-color: var(--body-color);
    padding: 0.25rem;
    filter: none;
}

.service__list {
    padding: var(--mb-1-5);
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
}

.service__img-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    opacity: 0.1;
    z-index: -1;
}

.service__item {
    width: 300px;
    height: 300px;
    background-color: var(--first-color);
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    margin-bottom: var(--mb-1);
}

    .service__item:hover .service__item-img,
    .service__item:hover .service__item-overlay,
    .service__item:hover .service__description {
        visibility: hidden;
        opacity: 0;
    }

    .service__item:hover .service__item-details {
        z-index: var(--z-fixed);
    }

.service__item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: brightness(0.6) contrast(1.1);
    background: radial-gradient(circle, rgba(0, 80, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to top, rgba(0, 80, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    overflow: hidden;
    border-radius: 1.5rem;
    transition: opacity 450ms ease, visibility 450ms ease;
    will-change: opacity, visibility;
}

.service__item-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.01);
    object-fit: cover;
    transition: opacity 450ms ease, visibility 450ms ease;
    will-change: opacity, visibility;
    overflow: hidden;
    border-radius: 1.5rem;
}

.service__description {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: var(--mb-1-5);
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    transition: opacity 450ms ease, visibility 450ms ease;
    will-change: opacity, visibility;
}

.service__item-icon {
    width: 75px;
    height: auto;
    color: var(--body-color);
    margin-bottom: var(--mb-1-5);
}

.service__item-title {
    font-size: var(--h3-font-size) !important;
}

.service__item-details {
    width: 100%;
    height: 100%;
    display: flex;
    padding: var(--mb-1-5);
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.service__item-description {
    color: var(--body-color);
    text-align: center;
    line-height: 1.5;
    margin-bottom: var(--mb-0-5);
}

/*=============== FREQUENTLY ASKED QUESTIONS ===============*/

.frequently__asked__questions-container {
    position: relative;
    padding: 0;
    height: auto;
    overflow: hidden;
}

.faq {
    display: grid;
    padding: var(--mb-1-5);
    height: auto;
}

.faq-container {
    height: auto;
}

.faq-img {
    width: 300px;
    height: auto;
    margin: var(--mb-0-5);
    align-self: center;
}

.frequently__asked__questions {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.asked__question {
    background-color: var(--body-color);
    padding: var(--mb-1);
    width: 95%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    margin-bottom: var(--mb-1-5);
    will-change: background-color;
    transition: background-color 400ms ease;
}

.asked__question-active {
    background-color: var(--first-color);
}

.question__title-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: var(--mb-0-25);
}

.question__title-active {
    color: var(--body-color);
    transition: color ease-in-out 800ms;
}

.faq__button {
    width: 40px;
    height: 40px;
    aspect-ratio: 1;
    margin: var(--mb-5);
    background-color: var(--container-color);
    color: var(--body-color);
    font-size: var(--h3-font-size);
    padding: 0;
    cursor: pointer;
}

.question__answer__description {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    will-change: max-height, opacity;
    transition: max-height 800ms ease-in-out, opacity ease-in-out 800ms;
}

.question__answer__description-expand {
    max-height: 150px;
    color: var(--body-color);
    opacity: 1;
}
/*=============== SINGLE SERVICE BANNER ===============*/
.single-service__banner {
    grid-template-columns: 1fr;
    gap: 3rem;
    position: relative;
    width: 100%;
    height: 100vh;
    margin-bottom: 0;
    will-change: top;
}

.single-service__img-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-service__group {
    position: absolute;
    padding: 3rem 2rem;
    place-items: center;
    height: 100%;
    row-gap: var(--mb-1);
}


.single-service__description {
    font-style: italic;
}

.single-service-button {
    font-size: var(--biggest-font-size);
    animation: floating 2s ease-in-out infinite;
    transition: animation-play-state 0.5s ease;
    cursor: pointer;
}

    .single-service-button:hover {
        animation-play-state: paused;
    }

/*=============== SINGLE SERVICE SWIPPER ===============*/
.single-service__container {
    padding-top: var(--mb-2-5);
}


.single-service-swipper {
    width: 90%;
    height: auto;
    position: relative;
}

.single-service__details-item {
    margin: auto;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
}

    .single-service__details-item:hover .single-service__details-data {
        opacity: 0;
    }

    .single-service__details-item:hover .single-service__img {
        opacity: 1;
    }

.single-service__img {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    will-change: opacity;
    transition: opacity 400ms ease;
}

.single-service__details-data {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-flow: column nowrap;
    color: var(--body-color);
    padding-bottom: var(--mb-2-5);
    opacity: 1;
    will-change: opacity;
    transition: opacity 400ms ease;
}

.single-service__details-subtitle, .single-service__details-title {
    color: var(--text-color-light);
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-1-5);
    text-align: center;
}

/*=============== SINGLE SERVICE FEATURE ===============*/
.single-service__data {
    width: 100%;
    padding: 2rem 1rem;
    border-bottom: 2px dotted var(--container-color-alt);
}

.single-service__data-title, .service__data-title {
    font-size: var(--bigg-font-size);
    margin: 0;
    text-align: left;
    margin-bottom: var(--mb-1);
}

.single-service__data-description, .service__data-description {
    text-align: left;
    line-height: 1.5;
    margin: var(--mb-1-5) 0;
    font-size: var(--normal-font-size);
}

.single-service__data-list li {
    margin-bottom: var(--mb-1);
    padding: 0.5rem;
}

/*=============== WORKING PROCESS ===============*/
.process__container {
    grid-template-columns: 1fr;
    gap: 3rem;
}

.process__data {
    flex-flow: column nowrap;
    justify-content: center;
    height: auto;
}

.process__img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--container-color);
    color: var(--body-color);
    transition: transform 400ms ease;
    font-size: 1.5rem;
    will-change: transform;
}

.process__description {
    text-align: center;
    color: var(--text-color);
    line-height: 1.5;
    font-size: var(--normal-font-size);
}

.process__title {
    margin: var(--mb-1-5);
    font-size: var(--h2-font-size);
    font-weight: var(--font-semi-bold);
    text-align: center;
}

.process__data:hover .process__img {
    transform: scale(1.1);
}

/*=============== SERVICES GALLERY ===============*/
.services-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto;
    grid-gap: .5rem;
}

.services-gallery-item {
    width: 100%;
    height: auto;
    cursor: pointer;
    position: relative;
    transition: opacity 400ms ease, transform 400ms ease;
    will-change: opacity, transform;
}

.services-gallery-img {
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    object-fit: cover;
    will-change: width, height;
}

.services-gallery-item:nth-child(even) {
    grid-row: span 2;
}

/*=============== SERVICES MENU ===============*/
.single-service__aside {
    padding: 1rem;
}

.single-service-menu {
    width: 100%;
    height: auto;
    background-color: var(--container-color-alt);
    border-radius: 1rem;
    padding-bottom: var(--mb-1-5);
}

.single-service-menu__title {
    width: 100%;
    height: auto;
    background-color: var(--first-color);
    border-radius: 1rem 1rem 0 0;
    padding: 1rem;
    color: var(--body-color);
    text-align: center;
}

.single-service-menu__container {
    padding: 1rem;
}

.single-service-menu-item {
    background-color: var(--body-color);
    border-radius: 1rem;
    padding: .5rem 1rem;
    margin-bottom: var(--mb-1-5);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 400ms;
    will-change: padding-left;
}


    .single-service-menu-item:hover {
        padding-left: 2rem;
    }

.single-service-menu__img {
    width: 50px;
    height: 50px;
}

.single-service-menu__subtitle {
    width: 70%;
}

.single-service-card {
    width: 90%;
    margin: auto;
    position: relative;
    height: 500px;
    border-radius: 1rem;
}

.single-service-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1rem;
}

.single-service-card__data {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    padding: 1.5rem;
}

.single-service-card__icon {
    font-size: var(--biggest-font-size);
    color: var(--body-color);
}

.single-service-card__title {
    font-size: var(--h2-font-size);
    margin-bottom: var(--mb-0-5);
}

.single-service-card__description {
    font-size: var(--small-font-size);
    line-height: 1.5;
    margin: 0;
    padding: var(--mb-0-5);
}

/*=============== MIDDLE BANNER ===============*/
.single-service__middle-banner {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.single-service__middle-banner__img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    will-change: top, bottom;
}

.single-service__middle-banner__title {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    transition: all 400ms ease;
    opacity: 1;
}

/*===============  BREAKPOINTS ===============*/

/* For small devices */
@media screen and (min-width: 320px) {
    .single-service__data-description {
        line-height: 2;
    }

    .service__content-collage {
        width: 250px;
        height: 250px;
    }

    .faq-img {
        width: 200px;
    }
}

/* For medium devices */
@media screen and (min-width: 480px) {

    .process__content {
        width: 80%;
    }

    .process__data {
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: flex-start;
    }

    .process__description {
        text-align: start;
    }

    .process__title {
        text-align: start;
        margin: 0;
    }

    .process__img {
        margin: 0.75rem;
    }

    .service__content-collage {
        width: 350px;
        height: 350px;
    }

    .service__item {
        width: 350px;
        height: 350px;
    }

    .faq-img {
        width: 300px;
    }
}

@media screen and (min-width: 768px) {
    .single-service__data-description {
        line-height: 1.5;
    }

    .single-service__aside {
        padding: 1.5rem;
    }

    .service__content-collage {
        width: 400px;
        height: 400px;
    }

    .service__list {
        grid-template-columns: 1fr 1fr;
    }

    .service__item {
        width: 300px;
        height: 300px;
    }

    .faq {
        padding: var(--mb-2-5);
    }
}

/* For large devices */
@media screen and (min-width: 992px) {
    .single-service__banner {
        height: 500px;
    }

    .single-service__container {
        display: flex;
        flex-flow: row-reverse nowrap;
        justify-content: space-around;
    }

    .single-service__content {
        width: 70%;
    }

    .single__service-content .single-service__content {
        width: 100%;
    }

    .single-service__aside {
        padding: 0;
        width: 30%;
    }

    .single-service__data-title {
        font-size: var(--h1-font-size);
    }

    .service__container {
        grid-template-columns: 1fr 1fr;
    }

    .service__list {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .faq {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1200px) {
}

/* ============================= */
/*   GALLERY SECTION   */
/* ============================= */

/*=============== GALLERY ===============*/
.gallery {
    padding: var(--mb-1);
}

.gallery-grid-active {
    position: relative;
}


.item-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 40, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-fixed);
}

    .item-active img {
        width: 80%;
        height: auto;
        aspect-ratio: 16/9;
    }

@media screen and (min-width: 320px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

        .gallery-grid li, .gallery-grid li img {
            border-radius: 0%;
        }
}

@media screen and (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
}

@media screen and (min-width: 992px) {
    .single-service-card__description {
        font-size: var(--smaller-font-size);
    }

    .gallery-grid li img {
        border-radius: 1rem;
    }
}


/* ============================= */
/*              ABOUT            */
/* ============================= */

/*=============== ABOUT ===============*/
.about__data-content {
    display: grid;
    padding: var(--mb-1-5);
}

.about__data-title {
    font-size: var(--h1-font-size);
    margin: 0;
    text-align: left;
    margin-bottom: var(--mb-1);
}

.about__data-description {
    text-align: left;
    line-height: 1.5;
    margin: var(--mb-1-5) 0;
    font-size: var(--normal-font-size);
}

/*=============== FEATURED PROYECTS ===============*/

.featured__proyects {
    padding: 0;
    position: relative;
    height: auto;
    margin: var(--mb-1-5);
    border-radius: 0.5rem;
    overflow: hidden;
}

.featured__proyects-title {
    font-size: var(--h1-font-size);
    margin: 1.5rem 0 0 0;
}

.featured__proyects-description {
    max-width: 600px;
    justify-self: center;
    margin: var(--mb-1-5);
}

.featured__proyects-grid {
    margin: auto;
    grid-gap: 1.5rem;
    padding: 1.5rem 0;
}

.proyect__item {
    width: 300px;
    height: 400px;
    position: relative;
    padding: 0;
    overflow: hidden;
    border-radius: 0.5rem;
}

    .proyect__item:hover .proyect-description {
        top: 0;
    }

.proyect__item-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.proyect-description {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 40, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    transition: top ease-out 400ms;
    will-change: top;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-flow: column;
    padding-bottom: var(--mb-2-5);
}

.proyect-description-title {
    font-size: var(--h3-font-size);
    text-shadow: none;
    margin-bottom: var(--mb-0-5);
}

.proyect-description-subtitle {
    color: var(--body-color);
    font-weight: 200;
    margin: 0;
}

/*=============== WHY CHOOSE US ===============*/
.why__choose__us {
    display: grid;
}

.why__choose__us-summary {
    padding: var(--mb-1-5);
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}

.why__choose__us-title {
    font-size: var(--h1-font-size);
    margin: var(--mb-1-5) 0;
}

.why__choose-us-description {
    text-align: left;
    margin: var(--mb-1-5) 0;
}

.why__choose__us-list {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: flex-start;
    gap: 1.5rem;
}

.why__choose__us-item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.why__choose__us-item-title {
    margin: 0;
    font-size: var(--h3-font-size);
    text-align: left;
}

.why__choose__us-item-description {
    margin: 0;
    text-align: left;
}

.why__choose__us-check {
    color: var(--first-color-alt);
    font-size: var(--biggest-font-size);
    margin: 0 var(--mb-1);
    align-self: flex-start;
}

.why__choose__us-img {
    filter: none;
    width: 100%;
    height: auto;
    align-self: center;
}

@media screen and (max-width: 320px) {
    .proyect__item {
        width: 200px;
        height: 250px;
    }
}

@media screen and (min-width: 768px) {
    .about__data-content {
        padding: var(--mb-3-5);
    }

    .about__data-title, .featured__proyects-title, .why__choose__us-title {
        font-size: var(--biggest-font-size);
    }

    .about__data-description, .why__choose-us-description {
        font-size: var(--h3-font-size);
    }

    .proyect__item {
        width: 500px;
        height: 650px;
    }

    .why__choose__us-item-title {
        font-size: var(--h2-font-size);
    }

    .why__choose__us-check {
        font-size: 3rem;
    }
}


@media screen and (min-width: 992px) {
    .about__data-content {
        grid-template-columns: 1fr 1fr;
    }

    .about__data-title, .featured__proyects-title, .why__choose__us-title {
        font-size: var(--bigg-font-size);
    }

    .featured__proyects {
        margin: 0 var(--mb-3-5);
    }

    .featured__proyects-grid {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 1.5rem;
    }

    .proyect__item {
        width: 100%;
        height: 500px;
    }

    .why__choose__us {
        grid-template-columns: 1fr 1fr;
    }

    .why__choose__us-img {
        align-self: center;
        justify-self: flex-end;
    }
}

@media screen and (min-width: 1200px) {
}

/* ============================= */
/*              CONTACT US            */
/* ============================= */

/*=============== CONTACT US GRID ===============*/
.contact__us-container {
    width: 100%;
}

.contact__us-grid {
    width: 100%;
    margin: auto;
    padding-top: var(--mb-1-5);
    grid-template-columns: 1fr;
    gap: 3rem;
    align-content: center;
    justify-items: center;
}

.contact__us-data {
    flex-flow: column nowrap;
    justify-content: center;
    height: auto;
}

.contact__us-img {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--container-color);
    color: var(--body-color);
    transition: transform 400ms ease;
    font-size: 2rem;
    will-change: transform;
}

.contact__us-data-description {
    text-align: center;
    color: var(--text-color);
    line-height: 1.5;
    font-size: var(--normal-font-size);
}

.contact__us-data-title {
    margin: var(--mb-1-5);
    font-size: var(--h2-font-size);
    font-weight: var(--font-semi-bold);
    text-align: center;
}

.contact__us-data:hover .contact__us-img {
    transform: scale(1.1);
}

.working__areas-map-container {
    display: grid;
    background-color: var(--container-color-alt);
}

.working__areas-form-container {
    transform: translateY(-1.5rem);
    border-radius: var(--br-0-5);
    padding: var(--mb-1-5) 0;
    background-color: var(--body-color);
    width: 80%;
    max-width: 600px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    align-self: flex-end;
    justify-self: center;
}

.working__areas-form {
    margin-top: 0;
    width: 100%;
    height: 100%;
    padding: var(--mb-0-5);
    display: grid;
    justify-items: center;
}

.form-title {
    font-size: var(--h3-font-size);
    margin: 0;
}

.form-item {
    display: grid;
    grid-gap: var(--mb-0-5);
}

    .form-item .form-span {
        color: var(--first-color);
    }

    .form-item textarea {
        resize: none;
    }

    .form-item input,
    .form-item select,
    .form-item textarea {
        background-color: var(--container-color-alt);
        border-radius: var(--mb-0-5);
        width: 200px;
        padding: var(--mb-1);
        border: none;
    }

.form-input,
.form-text {
    font-family: var(--body-font);
    color: var(--first-color);
}

.form-item input::placeholder,
.form-item select option:disabled,
.form-item textarea::placeholder {
    font-family: var(--body-font);
    color: var(--first-color-alt);
}

.form-select {
    width: 100%;
    padding: 10px 14px;
    color: var(--first-color-alt);
    appearance: none; /* Oculta la flechita predeterminada */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg fill="gray" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}

    .form-select:focus,
    .form-text:focus {
        border-color: var(--first-color-alt);
        outline: none;
        box-shadow: 0 0 3px var(--first-color-alt);
    }

.form-captcha {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    margin-bottom: var(--mb-0-5);
    padding: var(--mb-1);
}

    .form-captcha input {
        max-width: 80px;
    }

.form-buttom {
    width: 100px;
    border-radius: 0.5rem;
    justify-self: center;
}

.success-span {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 350px;
    margin-left: calc(-350px / 2);
    margin-top: calc(-350px / 2);
    background-color: var(--body-color);
    border-radius: var(--br-0-5);
    padding: var(--mb-1-5);
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
}

.success-span h3{
    margin: 0;
}
.success-span a{
    width: 80px;
    text-align: center;
    align-self: center;
}

.success-span img{
    background-color: transparent;
    border-radius: 0;
}

@media screen and (min-width: 480px) {
    .form-item input, .form-item select, .form-item textarea {
        width: 300px;
    }
}

@media screen and (min-width: 768px) {
    .working__areas-form-container {
        transform: translateY(-3rem);
    }

    .contact__us-grid {
        grid-template-columns: 1fr 1fr;
        align-content: initial;
        justify-items: initial;
    }

    .working__areas-form {
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--mb-1-5);
        padding: var(--mb-1-5);
        align-content: center;
        justify-items: center;
    }

    .form-item input,
    .form-item select,
    .form-item textarea {
        width: 100%;
    }

    .form.item {
        width: 100%;
    }

    .form-text {
        grid-column: span 2;
        width: 100%;
        padding: var(--mb-2);
    }

    .form-captcha {
        grid-column: 2;
        justify-self: center;
    }
}

@media screen and (min-width: 992px) {

    .contact__us-grid {
        grid-template-columns: repeat(4,1fr);
        padding: var(--mb-1-5);
        grid-gap: 0;
        align-content: start;
    }

    .contact__us-data {
        justify-content: flex-start;
        position: relative;
    }

        .contact__us-data::before {
            content: "";
            width: 100%;
            position: absolute;
            top: 40px;
            height: 2px;
            z-index: -1;
            border-top: 2px dashed var(--text-color);
        }

    .contact__us-data-description {
        padding: 0 var(--mb-1-5);
    }
}