:root {
    --main-color          : #072D60;
    --secondary-color     : #6889B5;
    --font-color-main     : var(--main-color);
    --font-color-secondary: #FFFFFF;
    --border-color        : var(--secondary-color);
    --width-logo          : 13.384rem;
    --height-logo         : 13.8rem;
    --width-isologo       : 58.3rem;
    --heigth-isologo      : 8rem;
    --font-size-h1        : 5.2rem;
    --font-size-h2        : 5rem;
    --font-size-h3        : 3.2rem;
    --font-size-banner    : 2.5rem;
    --font-size-text      : 1.8rem;
    --font-size-textsnd   : 1.6rem;
    --font-weight-regular : 400;
    --font-weight-medium  : 500;
    --font-weight-bold    : 700;
    --background-footer   : #202020;
}

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

html {
    font-family    : 'Poppins', sans-serif;
    font-size      : 62.5%;
    overflow-x     : hidden;
    scroll-behavior: smooth;
}

img {
    width     : 100%;
    object-fit: cover;
}

header,
main,
footer {
    width: 100%;
}

header {
    position: fixed;
    z-index : 1000;
}

h1 {
    font-weight   : var(--font-weight-bold);
    text-transform: uppercase;
}

h2 {
    font-size     : var(--font-size-h2);
    font-weight   : var(--font-weight-medium);
    text-transform: uppercase;
}

h3 {
    font-size     : var(--font-size-h3);
    font-weight   : var(--font-weight-medium);
    text-transform: uppercase;
}

a {
    text-transform: uppercase;
}

p,
a {
    font-size  : var(--font-size-text);
    font-weight: var(--font-weight-medium);
    color      : var(--font-color-main)
}

.container {
    width  : 80%;
    padding: 2rem 0;
    margin : 0 auto;
}

.d-flex {
    display: flex;
}

.btn {
    width        : 32rem;
    padding      : 1.5rem;
    border       : 2px solid var(--main-color);
    border-radius: 5rem;
    line-height  : 2rem;
    text-align   : center;
    transition   : .5s all ease-in-out;
}

.btn:focus,
.btn:hover {
    background-color: var(--main-color);
    color           : var(--font-color-secondary)
}

/**** Navbar ****/

.navbar {
    justify-content: space-between;
    align-items    : center;
    transition     : 0.5s linear;
}

/* .navbar__brand, */
.navbar__social-icon,
.navbar__menu {
    font-size: var(--font-size-banner);
    cursor   : pointer;
}

/* .navbar__brand {
    font-weight: var(--font-weight-bold);
} */

.navbar__brand{
    width: 6rem;
    height: auto;
    object-fit: contain;
}

.navbar__links-link {
    margin-left  : 3rem;
    margin-bottom: .7rem;
}

.navbar__social-icon {
    margin-left: 2rem;
}

.navbar__social-icon:hover {
    color     : var(--border-color);
    transition: 0.5s all linear;
}

.navbar__links-link:focus,
.navbar__links-link:hover {
    border-bottom: 2px solid var(--main-color);
    margin-bottom: .5rem;
}

#menu-icon {
    display: none;
}

.scroll {
    background: rgba(255, 255, 255, 0.418);
}

/**** Footer ****/

footer {
    background: var(--background-footer);
    margin    : 10rem 0 0;
}

.footer p,
.footer a {
    color: var(--font-color-secondary);

}

.footer {
    justify-content: space-evenly;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 2rem;

}

.footer__copyright,
.footer__contact {
    width          : 49%;
    flex-direction : column;
    justify-content: start;
    align-items    : center;
}

.footer__copyright-logo {
    display        : flex;
    justify-content: center;
    align-items    : center;
    padding        : 5rem;
}

.footer__copyright-logo img {
    display: inline-block;
    width  : 100%;
    padding: .5rem;
}

.footer__copyright-logo .logo {
    width: 70%;

}

.footer__copyright-text {
    text-align: center;
    padding   : 3rem;
}

.footer__contact-navbar {
    width          : 100%;
    display        : flex;
    justify-content: space-evenly;
    gap            : 6rem;

}

.navbar-group {
    display       : flex;
    flex-direction: column;
}

.footer-link {
    padding        : 0 2rem;
    margin         : 1rem;
    border-left    : 2px solid var(--border-color);
    background     : linear-gradient(to left, transparent 50%, var(--border-color) 50%) right;
    background-size: 200%;
    transition     : .5s ease-out;
}

.footer-link:hover {
    background-position: left;
    transition         : .3s all ease;
}

.footer__contact-phone {
    width        : 80%;
    margin       : 5rem 3rem .5rem;
    border-bottom: 2px solid var(--border-color);
}

.footer__contact-phone p span {
    font-weight : var(--font-weight-bold);
    margin-right: 1.5rem;
}

.footer__social{
    width: 80%;
}