.img-cards{
    width: 200px;
    height: 200px;
}

.bg-white-banner{
    background-color: white;
    padding-top: 100px;
    padding-bottom: 100px;
    height: 550px;
}

.bg-green-banner{
    background-color: #b0f2ae;
    background: radial-gradient(circle 300px at 65% 50%, #dfff61, #b0f2ae);
}

.cardn1{
    height: 223px !important; 
    padding-top: 20px;
}

.cardn2{
    height: 223px !important; 
    padding-right: 20px;
}

.content-container{
    display: grid;
    align-items: center;
}

.content-container h5{
    font-family: "CIBFontSans Bold";
    font-size: 24px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.45px;
    padding-bottom: 20px;
}

.content-container span{
    display: block;
    line-height: 20px;
    font-family: 'Open Sans'; 
    letter-spacing: -0.3px; 
    font-size: 15.2px; 
    font-weight: 300;
    padding-top: 5px;
}

.btn-width{
    width: 155px;
}

.btn-width-1{
    width: 162px;
}

@media screen and (max-width:1000px) and (min-width: 700px) {
    .content-container{
        display: grid;
        align-items:start;
    }

    .cardn2{
        height: 223px !important; 
        padding: 0 30px 0 30px;
    }

    .cardn1{
        height: 223px !important; 
        padding-top: 0px;
    }

    .img-cards{
        width: 200px;
        height: 180px;
    }


    .card{
        display: flex;
        flex-flow: column;
    }

    .btn-width{
        width: 300px;
        transform: translateX(28%);
    }
    
    .btn-width-1{
        width: 100%;
    }
}

@media screen and (max-width:700px) {

    .content-container{
        display: grid;
        align-items:start;
    }

    .cardn2{
        height: 223px !important; 
        padding: 0 30px 0 30px;
    }

    .cardn1{
        height: 223px !important; 
        padding-top: 0px;
    }

    .img-cards{
        width: 200px;
        height: 180px;
    }

    .card{
        display: flex;
        flex-flow: column;
    }

    .btn-width{
        width: 300px;
        transform: translateX(0%);
    }
    
    .btn-width-1{
        width: 100%;
    }

    .text-btn{
        transform: translateY(-30%);
        width: 320px;
    }
}

.text-btn{
    font-style: "Open Sans";
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -0.3px;
}

.text-center-spacing p{
    text-align: center;
}

.title-main-banner{
    display: grid;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 0 210px 0 210px;
}

.datafonos-banner {
    padding: 0 150px 0 150px !important;
}

@media screen and (max-width: 1200px) and (min-width:1000px){
    .title-main-banner{
        padding: 0 120px 0 120px;
    }
    .datafonos-banner {
        padding: 0 50px 0 50px !important;
    }
}

.highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
    font-style: italic;
    font-weight: 400;
  }
  
  .highlight::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.05em;
    width: 100%;
    height: 1em;
    background-image: url('/assets/img/datafonos/high.png'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
    transform: rotate(-1deg);
  }

.datafono-link{
    color: #00825A;
    font-weight: bolder;
    font-family: 'CIBFontSans Bold';
    font-size: 24px;
}

.iframe-container iframe{
    min-height: 570px;
}

.title-main-banner a{
    font-family: "CIBFontSans Bold";
    font-weight: 700;
    font-size: 56px;
    line-height: 60px;
    letter-spacing: -0.47px;
    text-align: center;
    text-decoration: none;
}

.title-description a{
    font-family: "CIBFontSans Light";
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.38px;
    text-align: center;
    text-decoration: none;
}

.title-description span{
    font-family: "CIBFontSans Bold";
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.38px;
    text-align: center;
}

.title-main-banner span{
    font-family: "CIBFontSans Light";
    font-weight: 200;
    font-size: 56px;
    line-height: 60px;
    letter-spacing: -0.47px;
    text-align: center;
}

@media screen and (max-width:700px){
    .title-main-banner a{
        font-family: "CIBFontSans Bold";
        font-weight: 700;
        font-size: 32px;
        line-height: 34px;
        letter-spacing: -0.6px;
        text-align: center;
        text-decoration: none;
    }
    
    .title-description a{
        font-family: "CIBFontSans Light";
        font-weight: 200;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: center;
        text-decoration: none;
    }
    
    .title-description span{
        font-family: "CIBFontSans Bold";
        font-weight: 700;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.3px;
        text-align: center;
    }
    
    .title-main-banner span{
        font-family: "CIBFontSans Light";
        font-weight: 200;
        font-size: 32px;
        line-height: 34px;
        letter-spacing: -0.6px;
        text-align: center;
    }

    .title-description{
        padding: 20px 100px 0px 100px;
    }
}

@media screen and (max-width:700px) and (min-width:500px){
    .title-main-banner{
        padding: 0 90px 0 90px;
    }

    .datafonos-banner {
        padding: 0 10px 0 10px !important;
    }
}

.title-description{
    display: grid;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 15px 130px 20px 130px;
}

@media screen and (max-width:1000px) and (min-width:770px){
    .title-main-banner{
        padding: 0 80px 0 80px;
    }
    .datafonos-banner {
        padding: 0 10px 0 10px !important;
    }

    ..title-description
}

@media screen and (max-width:770px) and (min-width:700px){
    .title-main-banner{
        padding: 0 0 0 0;
    }

    .datafonos-banner{
        padding: 0 0 0 0 !important;
    }

    .title-description{
        padding: 30px 40px 0px 40px;
    }
}

@media screen and (max-width:500px){

    .title-main-banner{
        padding: 0 30px 0 30px;
    }
    .datafonos-banner {
        padding: 0 10px 0 10px !important;
    }

    .title-description{
        padding: 15px 30px 0px 30px;
    }

    .text-btn{
        transform: translateY(0%);
    }

    .bg-white-banner{
        background-color: white;
        padding-top: 0px;
        padding-bottom: 100px;
        height: 550px;
    }
}