
#nuestros {
    background-image: url('../Imagenes/-Servicios/grupo8@2x.png');
    background-size: cover;
    height: fit-content;
}


#nuestros>div {
    background: rgba(255, 255, 255, .3);
    display: flex;
    flex-direction: column;
}

#nuestros .encabezado {
    padding: 1rem 0rem 1rem 5rem;
}

#nuestros .encabezado h2 {
    font-size: 3rem;
    font-family: 'Montserrat', serif;
    font-weight: bold;
    width: min-content;
    color: #022585;
}

#nuestros .encabezado hr {
    border-radius: 2rem;
    padding: .25rem;
    background: linear-gradient(to right, #38B6FF, #004AD0, #00249C, #001766);
}

#nuestros .serv {
    height: fit-content;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem 4rem;
}

#nuestros .serv a {
    text-decoration: none;
}

#nuestros .serv .circ {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0061d0, #00249C);
    padding: 2rem;
    cursor: pointer;
    transition: all ease .2s;
}

#nuestros .serv .circ:hover {
    background: linear-gradient(to left, #0061d0, #00249C);
    transform: scale(1.05);
}

#nuestros .serv .circ img {
    width: 8rem;
}

#nuestros .serv .circ h3 {
    text-decoration: none;
    color: #f2f2f2;
    text-align: center;
}

#Barra {
    background: linear-gradient(to right, #38B6FF, #004AD0, #00249C, #001766);
    height: 2rem;
}

#Servicios {
    background-image: url('../Imagenes/-Servicios/grupo10@2x.png');
    background-size: cover;
    height: fit-content;
}

#Servicios > div {
    background: rgba(255, 255, 255, .3);
    height: 100%;
    width: 100%;
}

#Servicios .encabezado {
    padding: 1rem 0rem 1rem 5rem;
}

#Servicios .encabezado h2 {
    font-size: 3rem;
    font-family: 'Montserrat', serif;
    font-weight: bold;
    width: min-content;
    color: #022585;
}

#Servicios .encabezado hr {
    border-radius: 2rem;
    padding: .25rem;
    background: linear-gradient(to right, #38B6FF, #004AD0, #00249C, #001766);
}

#Servicios .serv2 {
    height: fit-content;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem 4rem;
}

#Servicios .serv2 a {
    text-decoration: none;
}

#Servicios .serv2 .circ {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: linear-gradient(to right, #0061d0, #00249C);
    padding: 2rem;
    cursor: pointer;
    transition: all ease .2s;
}

#Servicios .serv2 .circ:hover {
    background: linear-gradient(to left, #0061d0, #00249C);
    transform: scale(1.05);
}

#Servicios .serv2 .circ img {
    width: 8rem;
}

#Servicios .serv2 .circ h3 {
    text-decoration: none;
    color: #f2f2f2;
    text-align: center;
}

/*

.serv2 a {
    letter-spacing: 0.01vw;
}

.serv2 a:nth-child(1) {
    top: 81vw;
    left: 15vw;
}

.serv2 a:nth-child(2) {
    top: 81vw;
    left: 41vw;
}

.serv2 a:nth-child(2) img{
    width: 7vw;
    height: 7vw;
    position: relative;
    top: -1vw;
}

.serv2 a:nth-child(2) h3 {
    position: relative;
    top: -1.3vw;
}

.serv2 a:nth-child(3) {
    top: 81vw;
    left: 66.5vw;
}

.serv2 a:nth-child(3) img {
    width: 8vw;
    height: 8vw;
    position: relative;
    top: -0.6vw;
}

.serv2 a:nth-child(3) h3 {
    position: relative;
    top: -0.8vw;
}

.serv2 a {
    text-decoration: none;
}

@media screen and (orientation: portrait) {
    #nuestros {
        background-image: url('../Imagenes/-Servicios/grupo8@2x.png');
        background-size: cover;
        height: 115vw;
    }

    #nuestros>div {
        background: rgba(255, 255, 255, .3);
        height: 115vw;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 25% 75%;
        overflow: hidden;
    }

    .encabezado {
        align-self: end;
        padding-bottom: 2vw;
    }

    .encabezado h2 {
        font-size: 7vw;
        font-family: Bebas Neue;
        color: #022585;
        line-height: 6vw;
        width: 30%;
        margin-left: 10vw;
        line-height: 8.5vw;
    }

    .encabezado span {
        font-family: Bebas Neue;
        letter-spacing: 0.03vw;
        font-size: 10vw;
    }

    .encabezado hr {
        position: relative;
        left: 9vw;
        border: 0;
        border-radius: 1vw;
        padding: 0.5vw;
        background: linear-gradient(to right, #38B6FF, #004AD0, #00249C, #001766);
    }

    .serv {
        height: 100%;
    }

    .serv a {
        text-decoration: none;
    }

    .circ {
        width: 18vw;
        height: 18vw;
        border-radius: 100%;
        background: linear-gradient(to right, #0061d0, #00249C);
        position: absolute;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 65% 35%;
        transition: all ease .3s;
        transform: scale(1.4);
    }

    .circ:hover {
        transform: scale(1.5);
        box-shadow: 0.1vw 0.1vw 0.3vw 0.3vw rgba(0, 0, 0, .1);
    }

    .circ img {
        width: 8vw;
        height: 8vw;
        justify-self: center;
        align-self: flex-end;
        padding-bottom: 1vw;
    }

    .circ h3 {
        color: #f2f2f2;
        font-family: Bebas Neue;
        font-size: 2vw;
        text-align: center;
        width: 75%;
        justify-self: center;
        letter-spacing: 0.05vw;
    }

    #serv-circ {
        position: relative;
        top: -47vw;
    }

    .serv a:nth-child(1) {
        left: 21vw;
        top: 52vw;
    }

    .serv a:nth-child(2) {
        left: 21vw;
        top: 82vw;
    }

    .serv a:nth-child(2) img {
        width: 10vw;
        height: 10vw;
        position: relative;
        top: 1vw;
    }

    .serv a:nth-child(2) h3 {
        position: relative;
        bottom: 1.5vw;
    }

    .serv a:nth-child(3) {
        left: 60vw;
        top: 52vw;
    }

    .serv a:nth-child(4) {
        left: 60vw;
        top: 82vw;
    }

    .serv a:nth-child(4) h3 {
        position: relative;
        top: -0.5vw;
    }

    .serv a:nth-child(5) {
        left: 40vw;
        top: 107vw;
    }

    #Barra {
        height: 3vw;
        background: linear-gradient(to right, #38B6FF, #004AD0, #00249C, #001766);
    }

    #Servicios {
        height: 87vw;
        background-image: url('../Imagenes/-Servicios/grupo10@2x.png');
        background-size: cover;
    }

    #serv-circ1 {
        position: relative;
        top: -157vw;
    }

    #Servicios>div {
        background: rgba(255, 255, 255, .3);
        height: 100%;
        overflow: hidden;
    }

    #Servicios>div>div:nth-child(1) {
        padding-top: 1vw;
    }

    #Servicios>div>div:nth-child(1) h2 {
        width: 100%;
        text-align: end;
        position: relative;
        right: 20vw;
    }

    #Servicios>div>div:nth-child(1) hr {
        background: linear-gradient(to left, #38B6FF, #004AD0, #00249C, #001766);
    }

    .serv2 a {
        letter-spacing: 0.01vw;
    }

    .serv2 a:nth-child(1) {
        top: 165vw;
        left: 21vw;
    }

    .serv2 a:nth-child(2) {
        top: 165vw;
        left: 60vw;
    }

    .serv2 a:nth-child(2) img {
        width: 7vw;
        height: 7vw;
        position: relative;
        top: -1vw;
    }

    .serv2 a:nth-child(2) h3 {
        position: relative;
        top: -1.3vw;
    }

    .serv2 a:nth-child(3) {
        top: 195vw;
        left: 40vw;
    }

    .serv2 a:nth-child(3) img {
        width: 8vw;
        height: 8vw;
        position: relative;
        top: -0.6vw;
    }

    .serv2 a:nth-child(3) h3 {
        position: relative;
        top: -0.8vw;
    }

    .serv2 a {
        text-decoration: none;
    }
} */