/*====================================================
 BLOG.CSS
 IntelligenceSoft
====================================================*/

/*==============================
VARIABLES
==============================*/

:root{

    --primary:#0095e5;
    --secondary:#0b3b60;
    --dark:#1d1d1d;
    --light:#f8f9fa;
    --border:#ececec;

    --shadow:0 10px 30px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s ease;

}

/*==============================
GENERAL
==============================*/

body{

    background:#fafafa;

}

section{

    position:relative;

}

img{

    transition:var(--transition);

}

a{

    transition:var(--transition);

}

.card{

    border:none;
    border-radius:var(--radius);
    overflow:hidden;
    transition:.35s;
    box-shadow:var(--shadow);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.15);

}

.card img{

    transition:.45s;

}

.card:hover img{

    transform:scale(1.05);

}

/*==============================
HERO BLOG
==============================*/

.banner{

    position:relative;

    overflow:hidden;

}

.banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    rgba(0,32,60,.75),
    rgba(0,32,60,.75));

}

.banner .container{

    position:relative;

    z-index:2;

}

.banner__titulo{

    font-size:3.5rem;

    font-weight:700;

    line-height:1.2;

}

.banner p{

    max-width:850px;

    margin:auto;

}

.banner .badge{

    letter-spacing:1px;

    border-radius:50px;

    padding:10px 25px;

}

/*==============================
BUSCADOR
==============================*/

.input-group{

    border-radius:50px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.input-group input{

    border:none;

    padding:18px;

}

.input-group input:focus{

    box-shadow:none;

}

.input-group-text{

    border:none;

}

.input-group button{

    border-radius:0;

    padding-left:35px;

    padding-right:35px;

}

/*==============================
TITULOS
==============================*/

h2{

    font-weight:700;

}

.texto--azul{

    position:relative;

}

.texto--azul::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:#0095e5;

    margin:15px auto 0;

    border-radius:10px;

}

/*==============================
CATEGORIAS
==============================*/

.card i{

    transition:.4s;

}

.card:hover i{

    transform:rotate(-8deg)
    scale(1.15);

}

.card h4{

    margin-top:15px;

    font-weight:700;

}

.card p{

    color:#666;

}

/*==============================
ARTICULO DESTACADO
==============================*/

.badge{

    border-radius:30px;

    padding:10px 18px;

    font-weight:500;

}

img.rounded-4{

    border-radius:25px!important;

}

.btn-primary{

    background:#0095e5;

    border:none;

}

.btn-primary:hover{

    background:#0081c7;

}

.btn-outline-primary{

    border:2px solid #0095e5;

}

.btn-outline-primary:hover{

    background:#0095e5;

}

/*==============================
ULTIMOS ARTICULOS
==============================*/

.card-title{

    font-weight:700;

}

.card-footer{

    background:white;

}

.card-footer a{

    border-radius:30px;

}

.card:hover .btn-outline-primary{

    background:#0095e5;

    color:white;

}

/*==============================
IMAGENES
==============================*/

.card img{

    height:230px;

    object-fit:cover;

}

/*==============================
BADGES
==============================*/

.badge{

    font-size:.8rem;

}

.badge.bg-light{

    border:1px solid #ddd;

}

/*==============================
BOTONES
==============================*/

.btn{

    transition:.3s;

}

.btn:hover{

    transform:translateY(-3px);

}

/*==============================
HOVER LINKS
==============================*/

a:hover{

    text-decoration:none;

}

/*==============================
SEPARADORES
==============================*/

.py-5{

    padding-top:6rem!important;

    padding-bottom:6rem!important;

}

/*==============================
ANIMACION ENTRADA
==============================*/

.fade-card{

    opacity:0;

    transform:translateY(40px);

    transition:.6s;

}

.fade-card.show{

    opacity:1;

    transform:none;

}
/*====================================================
PARTE 2
IntelligenceSoft Premium
====================================================*/

/*==============================
NEWSLETTER
==============================*/

.fondo--azul{

    background:linear-gradient(135deg,#0095e5,#006bb3);

    position:relative;

    overflow:hidden;

}

.fondo--azul::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    top:-220px;
    right:-120px;

}

.fondo--azul::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    bottom:-170px;
    left:-120px;

}

.fondo--azul .container{

    position:relative;
    z-index:2;

}

.fondo--azul h2{

    color:white;
    font-weight:700;

}

.fondo--azul p{

    color:#f5f5f5;

}

.fondo--azul .form-control{

    border:none;

    padding:18px;

    border-radius:40px 0 0 40px;

}

.fondo--azul .btn{

    border-radius:0 40px 40px 0;

    font-weight:bold;

}

/*==============================
CTA
==============================*/

.shadow-lg{

    transition:.35s;

}

.shadow-lg:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,149,229,.20)!important;

}

.card-body h2{

    color:#0b3b60;

}

.card-body p{

    font-size:1.05rem;

}

/*==============================
FOOTER
==============================*/

.contenedor__footer{

    background:#111827;

}

.contenedor__footer h4{

    color:white;

    margin-bottom:20px;

}

.contenedor__footer p,
.contenedor__footer li{

    color:#d8d8d8;

}

.contenedor__footer a{

    color:#d8d8d8;

    transition:.3s;

}

.contenedor__footer a:hover{

    color:#00b7ff;

    padding-left:6px;

}

.contenedor__footer i{

    transition:.3s;

}

.contenedor__footer i:hover{

    transform:scale(1.25);

    color:#00b7ff;

}

.footer__copy{

    font-size:.95rem;

    letter-spacing:.5px;

}

/*==============================
BOTON SUBIR
==============================*/

#btnTop{

    width:55px;

    height:55px;

    border:none;

    box-shadow:0 10px 25px rgba(0,149,229,.35);

    transition:.35s;

}

#btnTop:hover{

    transform:translateY(-8px)
    scale(1.08);

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ececec;

}

::-webkit-scrollbar-thumb{

    background:#0095e5;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0078bb;

}

/*==============================
SELECCION TEXTO
==============================*/

::selection{

    background:#0095e5;

    color:white;

}

/*==============================
EFECTOS IMAGEN
==============================*/

.card img{

    filter:saturate(105%);

}

.card:hover img{

    filter:saturate(130%)
    brightness(1.03);

}

/*==============================
ANIMACION BADGES
==============================*/

.badge{

    transition:.3s;

}

.badge:hover{

    transform:scale(1.08);

}

/*==============================
HOVER LINKS
==============================*/

.footer a,
.card a{

    transition:.3s;

}

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

@media(max-width:991px){

.banner__titulo{

    font-size:2.5rem;

}

.banner{

    text-align:center;

}

}

@media(max-width:768px){

.banner{

    min-height:520px;

}

.banner__titulo{

    font-size:2rem;

}

.banner p{

    font-size:1rem;

}

.py-5{

    padding-top:4rem!important;
    padding-bottom:4rem!important;

}

.card img{

    height:210px;

}

}

@media(max-width:576px){

.banner{

    min-height:460px;

}

.banner__titulo{

    font-size:1.7rem;

}

.input-group{

    flex-direction:column;

    box-shadow:none;

}

.input-group input{

    border-radius:15px!important;

    margin-bottom:10px;

}

.input-group button{

    border-radius:15px!important;

    width:100%;

}

#btnTop{

    width:48px;

    height:48px;

}

}

/*==============================
GLASS EFFECT
==============================*/

.glass{

    backdrop-filter:blur(12px);

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.20);

}

/*==============================
FLOAT
==============================*/

.float{

    animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/*==============================
GRADIENT TEXT
==============================*/

.gradient-text{
    background: linear-gradient(90deg,#0095e5,#00c6ff);

    background-clip: text;          /* Estándar */
    -webkit-background-clip: text;  /* Chrome, Edge, Safari */

    color: transparent;
    -webkit-text-fill-color: transparent;
}

/*==============================
PREMIUM BORDER
==============================*/

.border-premium{

    border:1px solid rgba(0,149,229,.15);

}

/*==============================
FIN
==============================*/