@import "https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap";

/* ======= PALETA DE COLORES E INFO =======

    Tipografía: Manrope


   ================================= */

/* ESTILOS GENERALES */
body{
    font-family: 'manrope' !important;
}

.bg-primary{
    background: #0e6cb9 !important;
}

.gs-center{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/* Navbar */
#logo-nav{
    width: 7rem;
    object-fit: contain;
}

#logo-foo{
    width: 7rem;
    object-fit: contain;
}

.navbar{
    position: fixed;
    width: 100% !important;
    border-radius: 0px !important;
}

#img-tlfn{
    display: flex;
    justify-content: center !important;
}

#img-tlfn>img{
    width: 300px;
    height: 400px;
    object-fit: contain;
}

.nav-link{
    color: #ffffff;
    width: 100%;
    text-align: center;
}

.nav-link:hover{
    color: #e6e6e6;
}


.navbar-nav{
    width: 100% !important;
}

.navbar-scrolled{
    z-index: 999;
    border: none;
    padding: 5px 0px;
    background: #0e6cb9 !important;
}

.bg-dark{
    background: #0e0e0e !important;
}

/* Header creo */
.ud-hero{
    background:linear-gradient(to right, #0e6cb9d2, #0e6cb9d2), url("../img/nissi-bg.png");
    background-size: cover;
    background-attachment: fixed;
}

.ud-hero-title{
    font-weight: 300 !important;
}

.sistem-cont>.row:nth-child(even){
    background: #d4d4d4;
}

.color-primary{
    color: #0e6cb9 !important;
}

.color-secondary{
    color:#dbdbdb !important;
}

.bg-primary-outline{
    background: none !important;
    border: 1px solid #0e6cb9 !important;
    padding: 8px 15px !important;
    color: #0e6cb9 !important;
}

#contact>.container{
    /* box-shadow: 0 0 35px #7c7c7c; */
    border-radius: 7px;  
}

.ud-form-group>input, .ud-form-group>textarea{
    border: 1px solid #a8a7a7 !important;
    padding: 8px 16px!important;
    border-radius: 7px;
}

.bg-primary-outline:hover{
    transition: 0.3s;
    background: #0e6cb9 !important;
    color: #fff !important;
    opacity: 100% !important;
    box-shadow: 0 0 35px #0e6cb9;
}

.bg-secondary-outline{
    background: none !important;
    border: 1px solid #ffffff !important;
    padding: 8px 15px !important;
    color: #ffffff !important;
}

/* .img-cont{
    display: flex;
    justify-content: center;
    vertical-align: top;
} */

.img-cont>img{
    width: 350px;
}

.bg-secondary-outline:hover{
    transition: 0.3s;
    background: #ffffff !important;
    color: #0e6cb9 !important;
    opacity: 100% !important;
}

.ud-single-feature .ud-feature-icon{
    background: #0e6cb9;
}

span.tag{
    background: #0e6cb9 !important;
    color: white !important;
}

span{
    color: #0e6cb9 !important;
}

.ud-contact-info-wrapper .ud-info-icon{
    color: #0e6cb9;
}

.ud-single-pricing.active {
    background: #0e6cb9 !important;
    border: none;
    padding: 55px 30px;
}


.ud-single-pricing.first-item::after{
    background: #0e6cb9 !important;
}

.ud-single-pricing.last-item::after{
    background: #0e6cb9;
}

h4{
    color: #0e6cb9 !important;
}
/* ================ */

/* ============ RESPONSIVE ============ */

@media screen and (max-width:991px) {
    .nav-link{
        color: #0e0e0e !important;
    }
}

@media screen and (max-width:720px) {
    .sistem-cont>.row{
        display: flex;
        flex-direction: column;
        justify-content: center;
        --bs-gutter-x: 0rem;
        padding: 10px 3px !important;
        margin: 10px 0px !important;
    }
  
    .sistem-cont>.row:nth-child(odd){
        flex-direction: column-reverse;
    }
  
    .sistem-cont>.row>*{
        width: 100% !important;
    }

    .sistem-cont{
        padding: 10px 5px !important;
    }

    .img-cont{
        margin:5px 0px;
    }

    .ud-single-faq .ud-faq-body {
        padding: 0px 16px 20px 16px;
    }
    
}

@media screen and (max-width:400px) {
    .sistem-cont>.row>*{
        padding: 2rem 10px !important;
    }
}

@media screen and (max-width:300px){
    .ud-main-btn{
        font-size: 12px !important;
        color: #0e6cb9 !important;
    }

}