/*          Variables           */

:root {
    --primary-color: #006ca9;
    --primary-color-light: #23b2ec;
    --primary-color-super-light: #eaf9fd;


    --white-color: #fff;

    --gray-color-100: #F5F4F6;
    --gray-color-200: #7f7f7f;
}


/*          Estilos generales           */

html, body {
    overflow-x: hidden; /* Esto previene que el contenido se salga horizontalmente */
}

li {
    list-style: none;
}
ul  {
    margin-bottom: 0px;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: var(--primary-color);
}



/* Hero images */
.hero_index {
    height: 60vh;
    min-height: 400px;
    background: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), /* Capa negra semitransparente */
        url('../img/steel_hero.webp'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 80px;
}

.product_hero_index {
    height: 34vh;
    background: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), /* Capa negra semitransparente */
        url('../img/steel.webp'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 80px;
}

.contact_hero_index {
    height: 34vh;
    background: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), /* Capa negra semitransparente */
        url('../img/contact.jpg'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 80px;
}








.product_hero_product {
    height: 34vh;
    background: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), /* Capa negra semitransparente */
        url('../img/steel_product_hero.jpg'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}








.position_text_product_hero {
    position: absolute;
    margin-top: 10%;  
}

.position_text_contact_hero {
    position: absolute;
    top: 42%; /* Cambia el margen superior por top */
    left: 50%; /* Coloca el elemento en el centro horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta la posición para centrar */
    text-align: center; /* Centra el texto dentro del contenedor */
}



.position_text_hero {
    position: absolute;
    margin-top: 20%;  
}


.card_image {
    max-width: 100%;
    height: auto;
}

.card_product_image {
    max-width: 100%;
    height: auto;
}

.img-desk {
    display: none;
}





 /* Contenedor principal */
 .custom-card-container {
    text-align: center;
    width: fit-content;
    margin: auto;
}

/* Enlace que envuelve toda la tarjeta */
.custom-card-link {
    text-decoration: none;
    display: inline-block;
    border: 1px solid #ddd;
    width: 340px;
    color: inherit;
    transition: 0.3s;
}

/* Contenedor de la imagen */
.custom-card-image-container {
    position: relative;
    overflow: hidden;
    height: 200px;
}

/* Imagen dentro de la tarjeta */
.custom-card-image {
    width: 100%;
    display: block;
    transition: 0.3s;
}

/* Contenedor del texto */
.custom-card-text-container {
    background-color: #2196F3;
    color: white;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    transition: 0.3s;
}

/* Texto dentro del contenedor */
.custom-card-text {
    margin: 0;
    font-size: 18px;
}

/* Efecto hover */
.custom-card-link:hover .custom-card-image {
    filter: brightness(1.2); /* Aclara la imagen */
}

.custom-card-link:hover .custom-card-text-container {
    filter: brightness(1.2); /* Aclara el fondo azul */
}






/*           Flexbox           */
.flex-row {
    display: flex;
    flex-direction: row;
}


.flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center ;
    align-items: center;
}



.flex-row-sb {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-row-sb-ac {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.m-product {
    margin-top: 80px;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-col-sb {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.flex-row-center-navbar {
    display: none;
}



.slider_desktop {
    display: none;
}
.slider_mobile {
    display: block;
}


.separated-list li {
    margin-bottom: 24px;
}

.card_slider_mobile {
    margin: 0 auto;
    padding-bottom: 24px;
}

.card_slider_inner_mobile {
    margin: 0 auto;
    background-color: var(--primary-color-light);
    width: 140px;
    margin-top: -40px;
    padding-top: 6px;
    padding-bottom: 1px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;    position: relative; /* O absolute, según tu diseño */
    z-index: 1;
   
}

.product_card_style {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.card_slider_title_mobile {
    flex-grow: 1;
    text-align: center;
}

.f-margin {
    margin-top: 120px;
}



/* Estilos para el formulario */
.form-control {
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0, 108, 169, 0.5);
}

.btn-primary {
    background-color: var(--primary-color);
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-color-light);
    box-shadow: 0 4px 10px rgba(0, 108, 169, 0.4);
}

/* Contact section */
.contact-section h1, h2 {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 20px;
}

.contact-section .contact-info i {
    color: var(--primary-color);
    margin-right: 10px;
}









/*           Buttons           */

.btn-filter {
    background-color: var(--white-color);
    border: 1px var(--primary-color) solid;
    border-radius: 12px;
    padding: 15px;
    font-size: 18px;
    color: var(--primary-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    width: 350px;
    margin-top: 20px;
}

.btn-filter:hover {
    background-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 108, 169, 0.4);
    color: var(--primary-color-super-light);
    cursor: pointer;
}

.btn-filter:active {
    background-color: var(--primary-color);
    color: #EEF7FC;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset;
}

.btn-filter:disabled,
.btn-filter:focus:disabled {
    color: #fff;
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}



/*           backgrounds           */

.bg-gray {
    background-color: var(--gray-color-100);
}

/*          hr           */
hr {
    width: 50%;
}
/*          colors           */

.cw {
    color: var(--white-color)
}

.cp {
    color:  var(--primary-color);
}

.cp-l {
    color: #37b6ff;
}

.cg-200 {
    color: var(--gray-color-200);
}

.bcp {
    background-color: var(--primary-color);
}

.bcp-linear {
 background: linear-gradient(0deg, #006ca9 0%, #64c6ff 100%);
    
}


.bcg {
    background-color: var(--gray-color-100);
}
.bsl {
    background-color: var(--primary-color-super-light);
}

/*          Navbars           */
/* Estilo para la barra de navegación cuando se fija */
header {
    position: fixed; /* Fija la barra de navegación */
    top: 0; /* La coloca en la parte superior */
    left: 0; /* Alinea a la izquierda */
    right: 0; /* Alinea a la derecha */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    transition: background-color 0.3s, box-shadow 0.3s; /* Efecto suave para el fondo y la sombra */
    background-color: white; /* Cambia el color de fondo para destacar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Añade una sombra */
}

/* Para evitar que la barra de navegación cubra contenido al fijarse */
body {
    padding-top: 60px; /* Ajusta el tamaño según la altura de tu barra de navegación */
}



nav {
    border-bottom: 1px solid rgb(224, 224, 224);
    background-color: var(--white-color);
}
.nav-desktop {
    display: none;
}

.nav-mobile {
    display: block;
}

.close-nav-mobile {
    display: none;
}


.nav-content {
    position: absolute; /* o 'fixed' si quieres que se quede fijo al hacer scroll */
    top: 146px; /* Ajusta según dónde quieres que aparezca */
    left: 0;
    width: 100%; /* Para que ocupe todo el ancho de la pantalla */
    z-index: 1000; /* Un valor alto para que esté encima de los demás elementos */
    display: none;
    background-color: #fff;
    border-bottom: 1px solid rgb(224, 224, 224);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.dropdown-menu-mobile {
    display: none; /* Initially hidden */

  }
  
  .dropdown-menu-mobile.show {
    display: block; /* Make the dropdown visible */
  }
  


/*          text           */

.p-margin-b0 {
    margin-bottom: 0;
}

.text_big {
    font-size: 48px ;
}

.text-s {
    font-size: 14px;
}
.text-m {
    font-size: 16px;
}

.text-l {
    font-size: 18px;
}

.text-xl {
    font-size: 20px;
}


.text-b {
    font-size: 38px;
}


.ls-2 {
    letter-spacing: 2px;
}

.fw-400 {
    font-weight: 600;
}

/*          img           */
.logo {
    height: 74px;
    width: auto;
}




/*          DESKTOP           */

@media (min-width: 800px) {

    .flex-col-sb {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

  /* Estilo general de la navbar */
.flex-row-center-navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Ocultar el dropdown-menu por defecto */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Mostrar el dropdown cuando el usuario hace hover sobre el padre */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* Estilo para los items del dropdown */
.dropdown-menu li {
    padding: 10px 20px;
}

.dropdown-menu li a {
    text-decoration: none;
    color: #333;
    display: block;
}

.dropdown-menu li a:hover {
    background-color: #f0f0f0;
}

    
    
    .nav-mobile {
        display: none;
    }

    .nav-content {
        display: none;
    }
    
    .position_text_hero {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding-left: 0; /* Removed padding to fully center the content */
        text-align: center; /* Center text inside the container */
        position: absolute;
        margin-top: 10%;  
    }

    .position_text_product_hero {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding-left: 0; /* Removed padding to fully center the content */
        text-align: center; /* Center text inside the container */
        position: absolute;
        margin-top: 7%; 
    }

    .hero_index {
        height: 60vh;
        background: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), /* Capa negra semitransparente */
        url('../img/steel_hero.webp'); /* Imagen de fondo */
    }

    .product_hero_index {
        height: 38vh;
        background: 
            linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), /* Capa negra semitransparente */
            url('../img/steel.webp'); /* Imagen de fondo */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

    }

    .contact_hero_index {
        height: 38vh;
        background: 
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), /* Capa negra semitransparente */
            url('../img/contact.jpg'); /* Imagen de fondo */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }


    .text_big {
        font-size: 60px;
    }

    .card_image {
        height: 350px;
        width: auto;
    }

    .card_slider_desktop {
        margin: 0 auto;
        padding-bottom: 24px;
    }
    
    .card_slider_inner {
        background-color: var(--primary-color-light);
        width: 290px;
        margin-top: -50px;
        padding-top: 8px;
        padding-bottom: 4px;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
        }
    
    .card_slider_title {
        flex-grow: 1;
        text-align: center;
    }
    
    .slider_desktop {
        display: block;
    }

    .slider_mobile {
        display: none;
    }

    .logo {
        height: 94px;
        width: auto;
        padding-left: 14px;
    }
    
    .text-m {
        font-size: 18px;
    }

    .text-b {
        font-size: 48px;
    }
    
    .img-mob {
        display: none;
    }   
    
    .img-desk {
        display: block;
    }

    .btn-filter {
        padding: 12px 32px;
    }

    .custom-card-image-container {
        height: 100%;
    }

   .width-card {
    width: 15rem;
   }
}