/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

/*===== VARIABLES CSS =====*/
:root {
    --header-height: 3rem;

    /*===== Colores =====*/
    --blue-color: #00015e;
    --first-color: #329CD7;
    --dark-color: #f1f1f1;
    --dark-color-alt: #282b3a;
    /* --white-color: #E6E7E9; */
    --white-color: #fff;
    --black-color: #000000;
    --white-color: #ffffff;
    --shadow-dark-color: #d3dae7;


    /*===== Fuente y tipografia =====*/
    --body-font: "Poppins", sans-serif;
    --normal-font-size: 0.938rem;
    --small-font-size: 0.813rem;

    /*===== z index =====*/
    --z-fixed: 100;
}

@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --normal-font-size: 1rem;
        --small-font-size: 0.875rem;
    }
}

/*===== BASE =====*/
*,
::before,
::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: var(--header-height) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: 500;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

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

.bd-grid {
    max-width: 1024px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/* ============== Footer Style ================= */
.footer {
    min-height: 65vh;
    width: 100%;
    background-image: url(/footer/images/footer-cover.png);
    background-size: cover;
    background-position: center;
    margin-bottom: -5rem;
    background-color: var(--first-color);
    display: flex;
    gap: 2rem;
    padding: 5rem;
}

.footer:nth-child(1) {
    grid-area: one;
}

.footer:nth-child(2) {
    grid-area: two;
}

.footer:nth-child(3) {
    grid-area: three;
}

.footer-info {
  width: 40%;
  margin-top: -20px;
  padding: 30px;
  --grid-gap: 2rem;
}

.footer-info img {
  width: 50%;
  margin-left: 27px;
  height: 12%;
  margin-bottom:65px;
}

.footer-info p {
  font-size: 16px;
  padding: 25px;
  color: var(--white-color);
  font-weight: 400;
}

.footer-menu {
    width: 15%;
    padding: 20px;
    margin-bottom: 15px;
    --grid-gap: 2rem;
}

.footer-menu h3 {
    font-size: 2rem;
    margin-top: 10px;
    color: var(--white-color);
    font-weight: 700;
}

.footer-menu a {
    text-decoration: none;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 400;
}

.footer-menu ul {
    margin-top: 5.2rem;
}

.footer-category {
    width: 25%;
    padding: 20px;
    margin-bottom: 10px;
    --grid-gap: 2rem;
}

.footer-category h3 {
    font-size: 2rem;
    margin-top: 10px;
    font-weight: 700;
    color: var(--white-color);
}

.footer-category a {
    text-decoration: none;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 400;
}

.footer-category ul {
    margin-top: 5.2rem;
}

.footer-contact {
    width: 30%;
    padding: 20px;
    margin-bottom: 10px;
    --grid-gap: 2rem;
}

.footer-contact h3 {
    font-size: 2rem;
    margin-top: 10px;
    color: var(--white-color);
    font-weight: 700;
}

.footer-contact span {
    margin-left: 22px;
}

.footer-contact a {
    text-decoration: none;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
}

.footer-contact ul {
    margin-top: 5.2rem;
}

.footer li {
    margin-top: 0.5rem;
}

.footer .fa-location-dot {
    color: var(--white-color);
}

.footer .fa-phone {
    color: var(--white-color);
}

.footer .fa-square-whatsapp {
    color: var(--white-color);
}

.footer .fa-linkedin {
    color: var(--white-color);
}

.footer .fa-facebook {
    color: var(--white-color);
}

.footer .fa-envelope {
    color: var(--white-color);
}
.footer .fa-earth-europe {
  color: var(--white-color);
}

.footer .fa-square-instagram {
    color: var(--white-color);
}

@media (max-width: 768px) {
    .footer {
        display: grid;
        width: 100%;
        padding: 1rem;
        --grid-gap: 0.5rem;
        grid-template-columns: 1fr;
        grid-template-areas:
            'one two'
            'three four';
    }

    .footer-info {
        width: 100%;
        padding: 20px;
        margin-top: 65px;
        --grid-gap: 2rem;
    }

    .footer-info img {
        width: 40%;
        margin-left: 0px;
        height: 17%;
        margin-bottom: 40px;
    }

    .footer-info p {
        font-size: 16px;
        padding: 20px 20px 20px 0;
        color: var(--white-color);
        font-weight: 400;
    }

    .footer-menu {
        width: 100%;
        margin-top: 63px;
        padding: 20px;
        margin-bottom: 10px;
        --grid-gap: 2rem;
    }

    .footer-menu h3 {
        font-size: 2rem;
        color: var(--white-color);
        font-weight: 700;
    }

    .footer-menu a {
        text-decoration: none;
        color: var(--white-color);
        font-size: 16px;
        font-weight: 400;
    }

    .footer-menu ul {
        margin-top: 4.5rem;
    }

    .footer-category {
        width: 100%;
        padding: 20px;
        margin-bottom: 20%;
        --grid-gap: 2rem;
    }

    .footer-category h3 {
        font-size: 2rem;
        color: var(--white-color);
        font-weight: 700;
    }

    .footer-category a {
        text-decoration: none;
        color: var(--white-color);
        font-size: 16px;
        font-weight: 400;
    }

    .footer-contact {
        width: 100%;
        padding: 20px;
        margin-bottom: 10px;
        --grid-gap: 2rem;
    }

    .footer-contact h3 {
        font-size: 2rem;
        color: var(--white-color);
        font-weight: 700;
    }

    .footer-contact span {
        margin-left: 22px;
    }

    .footer-contact a {
        text-decoration: none;
        color: var(--white-color);
        font-size: 16px;
        font-weight: 400;
        margin-left: 10px;
    }

    .footer li {
        margin-top: 0.5rem;
    }

    .footer .fa-location-dot {
        color: var(--white-color);
    }

    .footer .fa-phone {
        color: var(--white-color);
    }

    .footer .fa-square-whatsapp {
        color: var(--white-color);
    }

    .footer .fa-linkedin {
        color: var(--white-color);
    }
    .footer .fa-earth-europe {
  color: var(--white-color);
}

    .footer .fa-facebook {
        color: var(--white-color);
    }

    .footer .fa-envelope {
        color: var(--white-color);
    }

    .footer .fa-square-instagram {
        color: var(--white-color);
    }
}

@media(max-width:425px) {
    .footer {
        display: block;
        width: 100%;
        padding: 1rem;
    }
    .footer-info img {
        width: 40%;
        height: 18%;
        margin-bottom: 40px;
    }

    .footer-menu {
        width: 100%;
        padding: 20px;
        margin-bottom: 10px;
    }

    .footer-menu h3 {
        font-size: 2rem;
        color: var(--white-color);
        font-weight: 700;
    }

    .footer-menu a {
        text-decoration: none;
        color: var(--white-color);
        font-size: 16px;
        font-weight: 400;
    }

    .footer-category {
        width: 100%;
        padding: 20px;
        margin-bottom: 10px;
    }

    .footer-category h3 {
        font-size: 2rem;
        color: var(--white-color);
        font-weight: 700;
    }

    .footer-category a {
        text-decoration: none;
        color: var(--white-color);
        font-size: 16px;
        font-weight: 400;
    }

    .footer-contact {
        width: 100%;
        padding: 20px;
        margin-bottom: 20%;
    }

    .footer-contact h3 {
        font-size: 2rem;
        color: var(--white-color);
        font-weight: 700;
    }

    .footer-contact span {
        margin-left: 22px;
    }

    .footer-contact a {
        text-decoration: none;
        color: var(--white-color);
        font-size: 16px;
        font-weight: 400;
        margin-left: 10px;
    }

    .footer li {
        margin-top: 0.5rem;
    }

    .footer .fa-location-dot {
        color: var(--white-color);
    }

    .footer .fa-phone {
        color: var(--white-color);
    }

    .footer .fa-square-whatsapp {
        color: var(--white-color);
    }

    .footer .fa-linkedin {
        color: var(--white-color);
    }
    .footer .fa-earth-europe {
        color: var(--white-color);
    }

    .footer .fa-facebook {
        color: var(--white-color);
    }

    .footer .fa-envelope {
        color: var(--white-color);
    }

    .footer .fa-square-instagram {
        color: var(--white-color);
    }
}