@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

    body {
      font-family: 'Oswald', sans-serif !important;
      
    }

    [id] {
      scroll-margin-top: 80px;
    }



    .bg-primary { background-color: #1e40af; }
    .border-primary { border-color: #1e40af; }
    .text-primary { color: #1e40af; }
    .text-primary:hover { color: #1e3a8a; }

    .btn-primary {
      background-color: #1e40af;
      color: white;
      box-shadow: 0px 0px 0px 0px;
      transition: all 0.3s ease;
    }
    .btn-primary:hover {
      background-color: #1e3a8a;
      box-shadow: 3px 3px 10px 0px #0008;
      color: white;

    }

    .btn-bar{
      transition: all 0.3s ease;
    }
    .btn-bar:hover {
      color: rgba(224, 0, 0, 0.819);
    }


 /* animaciones navbar */
/* animaciones navbar */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  5.88% { /* 2s de 34s totales */
    opacity: 1;
  }
  94.12% { /* 32s de 34s totales (2s + 30s) */
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-fade-in {
  animation: fadeInOut 34s ease-in-out infinite;
}

.fade-loop {
  animation: fadeInOut 34s ease-in-out infinite;
}


    .service-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }

    .main {
        background-image: url('../img/nissenEmpresa.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: white;
        position: relative; 
    }

    .main::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.45); 
        z-index: 0; 
    }

    .main > * {
      position: relative;
      z-index: 1; /
    }

      .gradient-line {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #3b82f6 50%, transparent 100%);
    margin: 2rem 0;
  }


    .slide-enter {
      animation: slideIn 0.5s ease-out;
    }
    
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }


.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 100;
  font-size: 100px; 
}