:root {

    /**
     * COLORS
     */
  
    /** Background colors */
    --bg-wild-blue-yonder: #A5B6CF;
    --bg-carolina-blue: #00FFF6;
    --bg-prussian-blue: #14181C;
    --bg-oxford-blue: #0F1317;
    --bg-oxford-blue-2: #0A0E12;
  
    /** Text colors */
    --text-white: #ffffff;
    --text-alice-blue: #f0f8ff;
    --text-columbia-blue: #b9d9eb;
    --text-wild-blue-yonder: #8ea8c9;
    --text-carolina-blue: #00a3e1;
    --text-shadow-blue: #5e7b95;
    --text-slate-gray: #4a5d7a;
  
    /** Gradient colors */
    --gradient-1: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%);
    --gradient-2: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea);
    --gradient-3: linear-gradient(0deg, #000d1a, transparent);
   
    /** Border colors */
    --border-wild-blue-yonder: hsla(216, 33%, 68%, 1);
    --border-prussian-blue: hsla(216, 33%, 20%, 1);
    --border-white: hsl(0, 0%, 100%);
    --border-white-alpha-15: hsla(0, 0%, 100%, 0.15);
  
    /** Default colors */
    --white: hsl(0, 0%, 100%, 1);
    --black: hsl(0, 0%, 0%, 1);
  
    /**
     * TYPOGRAPHY
     */
  
    /** Font family */
    --fontFamily-noto_sans: 'Noto Sans', sans-serif;
  
    /** Font size */
    --fontSize-1: 2.9rem;
    --fontSize-2: 2.0rem;
    --fontSize-3: 1.8rem;
    --fontSize-4: 1.6rem;
    --fontSize-5: 1.5rem;
    --fontSize-6: 1.4rem;
    --fontSize-7: 1.2rem;
    --fontSize-8: 1.3rem;
  
    /** Font weight */
    --weight-medium: 500;
    --weight-semiBold: 600;
    --weight-bold: 700;
    --weight-extraBold: 800;
  
    /** Line height */
    --lineHeight-1: 1.3;
    --lineHeight-2: 1.5;
    --lineHeight-4: 1.5;
  
    /**
     * BOX SHADOW
     */
  
    --shadow-1: 0 8px 20px 0 hsla(0, 0%, 0%, 0.05);
    --shadow-2: 0px 3px 20px hsla(180, 90%, 43%, 0.2);
  
    /**
     * BORDER RADIUS
     */
  
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-48: 48px;
    --radius-circle: 50%;
    --radius-pill: 200px;
  
    /**
     * SPACING
     */
  
    --section-padding: 70px;
  
    /**
     * TRANSITION
     */
  
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
    --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);
  
}


*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



.container {        
    position: relative;     
  }
  
.neurokup-section {
    position: relative;    
}


.neurokup-section{
    padding-block-start: calc(var(--section-padding) + 20px); 
    position: relative;   
}

.topics{
    padding-block-start: calc(var(--section-padding));
    padding-block: 50px;
}


.background-image{
    display: block;    
    height: auto;
    width: 100%;
    border-radius: var(--radius-16);    
}


/* Estilo para left-elements y right-elements */
.left-elements,
.right-elements {
  position: absolute;
  z-index: 2; /* Asegurarse de que esté encima de la imagen */
  bottom: 5%;
}

.left-elements {
    left: 5%; /* Ajuste desde el borde izquierdo */
}

.right-elements {
    display: flex;
    right: 8%; /* Ajuste desde el borde derecho */
    flex-direction: column; /* Coloca los elementos uno debajo del otro */
    align-items: center; /* Centra horizontalmente los elementos */    
}

.button-list .neuro-button {
    display: block; /* Asegura que los botones ocupen toda la línea en diseños verticales */
    margin-bottom: 30px; /* Ajusta el espacio inferior entre los botones */
}
  
/* Opcional: Elimina el margen inferior en el último botón */
.button-list .neuro-button:last-child {
    margin-bottom: 0;
}


/* BUTTON*/

.neuro-button {
    padding: 0.5rem 1rem;
    background-image: var(--gradient-2);
    color: var(--bg-oxford-blue-2);
    border: none;
    border-radius: var(--radius-48);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    font-size: var(--fontSize-8);
    font-weight: var(--weight-bold);
    margin: 1rem;
}
  
.neuro-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}
  
.neuro-button:active {
    background-color: #004494;
    transform: scale(1);
}



/* Estilo para el enlace */
.image-link {
    display: inline-block;
}

/* Efecto hover en la imagen */
.image-link .image {
    transition: transform 0.3s ease, opacity 0.3s ease; /* Animación para suavizar el efecto */
}
  
.image-link:hover .image {
    transform: scale(1.1); /* Aumenta el tamaño de la imagen al hacer hover */
    opacity: 0.8; /* Cambia la opacidad al hacer hover */
}

.filter-image{
    filter: blur(0px);
    border: var(--bg-carolina-blue) 1px solid;
}


/*gallery cards*/

.gallery-card {
    padding: 24px;
    border-radius: var(--radius-8);
}
  
.gallery-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente el contenido */
    justify-content: center; /* Centra verticalmente el contenido */    
    gap: 10px;
  }

.gallery-card .card-content { margin-block-end: 15px; }
  
.gallery-card .card-text {
    color: var(--text-wild-blue-yonder);
    font-size: var(--fontSize-6);
    margin-block: 15px 20px;
}

.w-100{
    width: 200px;
    height: auto;
}

