h1,
h2,
h3,
h4,
h5 {
    font-family: 'Sura-Sans';
    color: #001E60;
}

h2 {
    font-size: 48px;
}

h3 {
    font-size: 40px;
}

h4 {
    font-size: 32px;
}

h2.line-top::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 4px;
    top: -8px;
    left: 0;
    right: 0;
    border-radius: 8px;
    background-color: var(--yellow);
    margin: auto;
}

p {
    line-height: 150%;
}

p,
a {
    font-family: 'Sura-Sans';
    font-size: 16px;
}

section {
    margin: 72px 0;
}


.btn {
    padding: 12px 24px;
    border-radius: 56px;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    background-color: transparent;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    width: max-content;
    cursor: pointer;
    letter-spacing: 0.25px;
}

.btn:hover {
    text-decoration: none;
}

i {
    font-size: 1.3rem;
}

.btn i {
    margin-left: 8px;
    font-size: 1.31rem;
}

.btn.btn--outline-turquoise {
    color: #001E60 !important;
    border: 1px solid #001E60;
}

.btn.btn--outline-turquoise:hover {
    background-color: #001E60 !important;
    color: white !important;
    text-decoration: none;
}

.btn.btn-white {
    background-color: white !important;
    color: #001E60 !important;
    border: 1px solid white;
}

.btn.btn-white:hover {
    background-color: rgb(223, 221, 221) !important;
    color: #001E60 !important;
    text-decoration: none;
}

.title {
    margin-bottom: 32px;
}

.title .subtitle {
    color: #001E60;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.title h2 {
    color: #001E60;
}


.hero-text-image{
    padding: 173px 0 113px 0;
    background-color: #001E60;
    margin: 0;
}
.hero-text-image .text{
    color: white;

}
.hero-text-image .text h1{
    color: white;
    font-size: 60px;
    margin-bottom: 16px;
    padding-top: 10px;
    position: relative;
}

.hero-text-image .text h1::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 4px;
    top: -8px;
    left: 19px;
    border-radius: 8px;
    background-color: #05C3DE;
    margin: auto;
}

.hero-text-image .text p{
    margin-bottom:24px;
}

.hero-text-image .image{
    border-radius: 8px;
    height:330px;
    overflow: hidden;
}
.hero-text-image .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.typography .grid-images {
    margin-top: 32px;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.typography .grid-images .content-image {
    border-radius: 8px;
    overflow: hidden;
}

.typography .grid-images .content-image:nth-child(1) {
    width: 100%;
    height: 400px;
}

.typography .grid-images .content-image:nth-child(2) {
    width: 65.8%;
}

.typography .grid-images .content-image:nth-child(3) {
    width: 31.3%;
}

.typography .grid-images .content-image {
    width: 31.4%;
    height: 364px;
}

.typography .grid-images .content-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.azul {
    background-color:#001E60;
    color: white;
}

.blanco {
    background-color: white;
    border: solid 1px #D0DADC;
    color: var(--blue);
}

.aqua {
    background-color: var(--turquoise);
    color: white;
}

.grisOscuro {
    background-color: var(--darkGray);
    color: white;
}

.grisClaro {
    background-color: var(--lightGray);
    color: var(--blue);
}
.colors .bg-colors {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.colors .bg-colors div {
    padding: 1rem;
    border-radius: 8px;
    height: 272px;
    width: 13%;
    display: flex;
    align-items: stretch;
    justify-content: end;
    transition: all 0.3s;
    box-shadow: 0px 0px 5px -3px #1c1c1c;
}

.colors .bg-colors p {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.colors .bg-colors p.codigo-hex {
    font-size: 15px;
}
.colors .bg-colors .info-second{
    font-size: 15px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0;
    padding: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.3s;
}
.colors .bg-colors .info-second li{
    list-style: none;
}
.colors .bg-colors div:hover .info-second{
    width: 64px;
}
.colors .bg-colors div:hover{
    width: 43%;
}



.mensaje-copiado {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background-color: var(--blue);
    color: white;
    font-size: 16px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.mensaje-copiado.visible {
    opacity: 1;
}


@media (max-width: 767px) {
    h2{
        font-size: 28px;
    }
    h3{
        font-size: 28px;
    }
    h4{
        font-size: 24px;
    }
    section{
        margin: 56px 0;
    }

    .typography .grid-images{
        gap: 1rem;
    }

    .typography .grid-images .content-image:nth-child(1){
        height: 180px;
    }
    .typography .grid-images .content-image:nth-child(2){
        width: 100%;
        height: 180px;
    }
    .typography .grid-images .content-image:nth-child(3){
        width: 47%;
        height: 124px;
    }
    .typography .grid-images .content-image{
        width: 47%;
        height: 124px;
    }
}



.fundacion-sura h1,
.fundacion-sura h2,
.fundacion-sura h3,
.fundacion-sura h4,
.fundacion-sura h5,
.mega-marca h1,
.mega-marca h2,
.mega-marca h3,
.mega-marca h3.subtitle,
.mega-marca h4,
.mega-marca h5 {
    color: #0033A0;
}
.fundacion-sura .title .subtitle, .mega-marca .title .subtitle{
    color: #0033A0;
}

.fundacion-sura .hero-text-image, .mega-marca .hero-text-image {
    background-color:#0033A0;
}

.fundacion-sura .hero-text-image .text h1::after, .mega-marca .hero-text-image .text h1::after{
    background-color:#E3E829;
}


.fundacion-sura .btn.btn--outline-turquoise, .mega-marca .btn.btn--outline-turquoise {
    color: #00AEC7 !important;
    border: 1px solid #00AEC7;
}

.fundacion-sura .btn.btn--outline-turquoise:hover, .mega-marca .btn.btn--outline-turquoise:hover {
    background-color: #00AEC7 !important;
    color: white !important;
    text-decoration: none;
}

.fundacion-sura .btn.btn-white, .mega-marca .btn.btn-white {
    color: #0033A0 !important;
}

.fundacion-sura .btn.btn-white:hover, .mega-marca .btn.btn-white:hover {
    color: #0033A0 !important;
}