:root {
  --primero: #00366a;
  --segundo: #9c9b9b;
  --tercero: #edf0ef;
  --primero-rgb: 0,54,106;
  --segundo-rgb: 156,155,155;
  --tercero-rbg: 267,240,239;
}

* {
    transition: all ease-in-out .2s;
}

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

body{
    font-family: "DM Sans", sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--tercero);
}

.btn-custom{
    border-color: var(--primero);
    border-width: 2px;
    color: var(--primero);
    border-radius: 0px;
    text-transform: uppercase;
    font-weight: 700;
    &:hover{
        background: var(--primero);
        color: var(--tercero);
        border-color: var(--primero);
    }
    &:focus{
        background: var(--primero) !important;
        color: var(--tercero) !important;
        border-color: var(--primero) !important;
    }
}

.banner{
    width: 100%;
    aspect-ratio: 17 / 8;
    /* background-color: var(--primero); */
    display: inline-flex;
    overflow: hidden;
    position: relative;
    align-items: center;
}

.overlay{
    background: #00366A;
    background: linear-gradient(180deg,rgba(0, 54, 106, 1) 0%, rgba(255, 255, 255, 1) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    mix-blend-mode: multiply;
    opacity: .9;
    top: 0;
    z-index: 9;
}

.frase-home{
    color: var(--tercero);
    position: relative;
    z-index: 99;
    overflow: hidden;
    & h2{
        font-size: 3rem;
        letter-spacing: .4rem;
        line-height: 3rem;
        font-weight: bold;
    }
}

.bg-1{
    background-image: url("../img/bg/bg-1.webp");
    background-size: cover;
    background-position: top center;
}

.col-texto{
    & h2{
        color: var(--primero);
        font-weight: bold;
        font-size: 2.2rem;
        line-height: 2.2rem;
    }
    & p{
        color: var(--segundo);
        font-size: 1.2rem;
        font-weight: 600;
    }
}

.linea-after{
    &::after{
        content: " ";
        width: 140px;
        height: 3px;
        background-color: var(--primero);
        display: inline-block;
    }
}

.lista-custom li{
    color: #333;
}

.lista-custom li::marker {
  color: var(--primero);
  content: "❯  ";
  font-weight: bold;
}

.col-puntos{
    & .bull{
        background-color: var(--segundo);
        color: var(--tercero) !important;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        width: 30px;
        height: 30px;
        text-align: center;
        justify-content: center;
        font-weight: bold;
    }
    & p{
        font-size: 1rem;
        font-weight: 600;
    }
}

.w-70{
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.footer{
    background-color: var(--segundo);
    color: var(--tercero);
    & ul{
        list-style-type: none;
    }
    & ul li{
        padding: 0;
    }
    & ul li a{
        color: var(--tercero);
        text-decoration: none;
        font-size: .8rem;
        &:hover{
            color: var(--primero);
        }
    }
}

.v-center{
    display: inline-flex;
    align-items: center;
}