body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .hero-container {
            position: relative;
            color: #fff;
            padding-bottom: 50px; /* Adjust padding as needed for content below the video */
        }
        .hero-background {

/*

      background-image: url('images/fabrica-de-forjas.png'); /* Cambia por tu imagen 
      background-size: cover;
      background-position: center;
      color: white;
      padding: 2rem 1rem;
 */

            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../images/proceso-de-forja-caliente.jpg);
            /*background: linear-gradient(to right, #007bff, #6610f2); /* Example gradient */
            background-size: cover;
            opacity: 0.9; /* Adjust transparency as needed */
            z-index: -1;
        }
        .header-top {
            padding: 5px 0;
            text-align: right;
            position: relative; /* Ensure it's above the background */
            z-index: 2;
        }
        .header-top span {
            margin-left: 15px;
            font-weight: bold;
            color: #fff; /* White color for phone numbers */
        }
        .navbar {
            background-color: transparent !important; /* Make navbar background transparent */
            position: relative;
            z-index: 2; /* Ensure navbar is above the background */
        }
        .navbar-brand img {
            height: 60px; /* Adjust logo height as needed */
            filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); /* Optional: Add shadow to logo for better visibility */
        }
        .navbar-nav .nav-link {
            color: #fff !important; /* White color for menu items */
            font-weight: bold;
        }
        .navbar-nav .nav-link:hover {
            color: #d0d0d0 !important;
        }
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; /* White hamburger icon */
        }
        .navbar-toggler {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            padding-top: 50px; /* Adjust to give space below the menu */
        }
        .hero-title {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Optional: Add text shadow for better readability */
        }
        .hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 30px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Optional: Add text shadow for better readability */
        }
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
            margin-top: 20px;
            border-radius: 8px; /* Optional: Rounded corners for video */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional: Shadow for video */
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .image-section {
            padding: 50px 0;
            background-color: #f8f9fa; /* Light background for the image section */
        }
        .image-section img {
            max-width: 100%;
            height: auto;
            margin-bottom: 20px;
            border-radius: 8px; /* Optional: Rounded corners for images */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Shadow for images */
        }
.historia{
    background-image: url(../images/bg-rojo.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
/*Inicia Acordeon*/
.accordion-item {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: white;
    }
    .circle-img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid white;
    }
    .img-title {
      text-align: center;
      margin-top: 5px;
      color: white;
    }
    .img-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 60px;
      justify-content: center;
      padding: 20px;
    }

    .automovil{
    background-image: url('../images/forja-automovil/CIRCULO-ARRIBA-AUTOMOVIL.png');
    background-repeat: no-repeat;
    background-size: cover;
    }

    .tractocamion{
    background-image: url('../images/forja-tracto-camion/forja-tractocamion.png');
    background-repeat: no-repeat;
    background-size: cover;
    }

    .energia{
    background-image: url('../images/forja-energia/forja-energia.png');
    background-repeat: no-repeat;
    background-size: cover;
    }

    .alimentos{
    background-image: url('../images/forja-alimentos/forja-alimentos.png');
    background-repeat: no-repeat;
    background-size: cover;
    }


    .tractor{
    background-image: url('../images/forja-tractor/tractor.png');
    background-repeat: no-repeat;
    background-size: cover;
    }

    .tractor{
    background-image: url('../images/forja-fotografia/fotografia.png');
    background-repeat: no-repeat;
    background-size: cover;
    }

    .valvula{
    background-image: url('../images/forja-valvulas/valvulas.png');
    background-repeat: no-repeat;
    background-size: cover;
    }


.fcaliente{
    background-image: url(../images/forja-caliente-fondo.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.fccaliente{
    background-image: url(../images/circulo-f-caliente.png);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

/*circulo*/
.circle-container {
      position: relative;
      width: 300px;
      height: 150px;
      margin: 50px auto;
    }

    .text-item {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-weight: bold;
      white-space: nowrap;
    }

    .text-item:nth-child(1) { top: 120px; left: -180px; }
    .text-item:nth-child(2) { top: 60px; left: -30px; }
    .text-item:nth-child(3) { top: 20px; left: 150px; }
    .text-item:nth-child(4) { top: 60px; left: 380px; }
    .text-item:nth-child(5) { top: 120px; left: 480px; }

/* Versión móvil: apilar verticalmente */
    @media (max-width: 576px) {
      .circle-container {
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        position: static;
      }

      .text-item {
        position: static;
        transform: none;
        top: auto;
        left: auto;
      }
    }



/*Termina acordeon*/

        /* Responsive adjustments */
        @media (min-width: 992px) {
            .hero-content .row {
                display: flex;
                align-items: center;
            }
        }