@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');:root {
    --brand-color-1: #371B70;
    --brand-color-2: #8316B9;
    --brand-color-3: #C711E0;
    --brand-color-4: #282842;
    --brand-color-5: #131120;
    --brand-color-6: #fff;
}
body {
    background-color: #131120;
    font-family: "Montserrat", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.bg-nav {
    background-color: var(--brand-color-1);
}
h1, h2, h3, h4 {
    font-family: "Montserrat", system-ui;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
h1 {
    font-size: 80px;
}
h2 {
    font-size: 40px;
}
h3 {
    font-size: 30px;
}
.navbar-toggler {
    border: 0;
}
.nav-link {
    text-decoration: none;
    background-color: transparent;
    position: relative;
    width: 100%;
    background-image: -o-linear-gradient(transparent calc(100% - 2px), var(--brand-color-6) 10px), -o-linear-gradient(transparent calc(100% - 2px), var(--brand-color-1) 10px);
    background-image: linear-gradient(transparent calc(100% - 2px), var(--brand-color-6) 10px), linear-gradient(transparent calc(100% - 2px), var(--brand-color-1) 10px);
    background-repeat: no-repeat;
    background-size: 0 100%, 100% 100%;
    -webkit-transition: background-size .3s;
    -o-transition: background-size .3s;
    transition: background-size .3s;
    will-change: background-size;
}

.nav-link:hover {
    background-size: 100% 100%, 100% 100%;
    color: var(--brand-color-6)
}

@keyframes bannerImgs{
    0%, 100%  {background-image: url("../img/carousel-img-1.jpg");}
    20% {background-image: url("../img/carousel-img-2.jpg");}
    40% {background-image: url("../img/carousel-img-3.jpg");}
}

.banner {
    animation: bannerImgs 5s infinite;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

.color-sponsor-title {
    color: var(--brand-color-3);
}

.media-logos > .logos-box {
    height: 200px;
}

.logos-box {
    height: 300px;
    border: 5px solid var(--brand-color-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logos-box:hover {
    border: 5px solid var(--brand-color-3);
}

hr {
    color: var(--brand-color-3);
    opacity: 1;
    border-top-width: 4px;
}

hr.hr-footer {
    color: var(--brand-color-6);
    opacity: 1;
    border-top-width: 1px;
}

footer {
    background-color: var(--brand-color-1);
}

@media screen and (max-width: 1240px) {
    .logos-box {
        height: 250px;
    }
    h1 {
        font-size: 60px;
    }
    h2 {
        font-size: 30px;
    }
    h3 {
        font-size: 20px;
    }
}

@media screen and (max-width: 764px) {
    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 25px;
    }
    h3 {
        font-size: 20px;
    }
}

.substitulo {
    font-weight: 600;
    font-size: 1.2rem;
}

.btn-primary{
    --bs-btn-bg: var(--brand-color-1);
    --bs-btn-border-color: var(--brand-color-2);
    --bs-btn-hover-border-color: var(--brand-color-2);
    --bs-btn-active-border-color: var(--brand-color-2);
    --bs-btn-active-bg: var(--brand-color-5);
    --bs-btn-hover-bg: var(--brand-color-4);
}

.btn-primary{
    height: 5rem;
    font-size: 1.5rem;
    font-weight: 600;
}