@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");

/* ****************** Custom Properties (Colores a Usar) ****************** */

:root {
  --first-color: rgb(241, 188, 83);
  --first-alpha-color: rgba(241, 188, 83, 0.75);

  --second-color: rgb(245, 116, 23);
  --second-alpha-color: rgba(245, 116, 23, 0.75);

  --third-color: rgb(248, 248, 248);
  --third-alpha-color: rgba(248, 248, 248, 0.75);

  --link-color: rgb(47, 72, 88);
  --link-alpha-color: rgba(47, 72, 88, 0.75);
}

/* ****************** Reset Styles ****************** */

body {
  font-family: "Poppins", sans-serif;
  background-color: #fff6ef;
}

a {
  color: var(--link-color);
  transition: all 0.2s ease-out;
}

a:hover {
  color: var(--link-color);
}
.utn {
  color: #212226;
  text-decoration: none;
}

.dropdown-item {
  color: #ff6000;
  font-weight: bold;
  transition: all 0.2s ease-out;
}

.dropdown-item:hover {
  color: var(--link-alpha-color);
}

.navbar-dark .navbar-toggler {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28248, 248, 248, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  transition: all 0.2s ease-out;
}

/* ****************** Bootstrap Styles ****************** */

.bg-dark {
  background-color: var(--second-color) !important;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.navbar-brand img {
  width: auto;
  height: 60px;
}

.nav-item {
  transition: all 0.2s ease-out;
}

.nav-item:hover {
  background-color: var(--link-alpha-color);
}

.nav-link {
  color: var(--link-color);
  font-size: 1.1rem;
  font-weight: bold;
  margin-left: 0.5rem;
}

.nav-link:hover {
  color: var(--third-color);
}

/* ****************** My Styles **************** */

.bg-gradient-blue-orange {
  width: 100%;
  height: 100vh;
  background: linear-gradient(45deg, #ff724e, #ff6000, #bca79c);
  background-size: 400% 400%;
  position: relative;
  animation: faminado 10s ease infinite;
}

.bg-hero-image {
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.btn-wsp {
  position: fixed;
  width: 55px;
  height: 55px;
  line-height: 55px;
  bottom: 40px;
  right: 20px;
  background: #0df053;
  color: #fff;
  border-radius: 60px;
  text-align: center;
  font-size: 35px;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 99;
}

.btn-wsp:hover {
  text-decoration: none;
  color: #0df053;
  background: #fff;
}

.boton {
  width: 100%;
  height: auto;
  border: 0.5rem solid #e8e8e8;
  padding: 0.5rem;
  font-size: 32px;
  margin-bottom: 3rem;
}

.container-all {
  max-width: 1800px;
  margin: auto;
  margin-top: 15px;
}

.container-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container-box a {
  text-decoration: none;
  color: black;
}

.box {
  width: 280px;
  height: 200px;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 400ms;
  box-shadow: 2px 3px 2px 3px rgba(0, 0, 0, 0.5);
}

.box:hover {
  transform: translate(5px, -5px);
  box-shadow: -10px 10px 20px -10px rgba(0, 0, 0, 0.5);
}

.box .icon,
.box h4,
.box p {
  position: relative;
  z-index: 1;
  transition: all 600ms;
}

.box .icon {
  font-size: 50px;
  color: rgb(24, 211, 124);
  transform: translateY(30px);
}

.box:hover .icon {
  color: white;
  font-size: 20px;
  transform: translateY(0);
}

.box h4,
.box p {
  margin-top: 10px;
  margin-bottom: 10px;
}

.box h4 {
  font-size: 20px;
  transform: translateY(30px);
}

.box:hover h4 {
  transform: translateY(0);
  color: white;
}

.box p {
  font-size: 14px;
  transform: translateY(100px);
  opacity: 0;
}

.box:hover p {
  transform: translateY(0);
  opacity: 1;
  color: white;
}

.box .background-hover {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 450px;
  left: -250px;
  border-radius: 100%;
  transition: all 300ms;
}

.box:hover .background-hover {
  width: 450px;
  height: 450px;
  top: -100px;
  left: -50px;
}

/*  Box1 */

.box1 .icon {
  color: #e9a319;
}

.box1 .background-hover {
  background: linear-gradient(to bottom, #e9a319, #657c6a);
}

/*  Box2 */

.box2 .icon {
  color: #003b52;
}

.box2 .background-hover {
  background: linear-gradient(to bottom, #003b52, #4a2647);
  top: 100px;
  left: 200;
}

/*  Box3 */

.box3 .icon {
  color: #f2f23c;
}

.box3 .background-hover {
  background: linear-gradient(
    180deg,
    #847757 0,
    #786d45 16.67%,
    #696332 33.33%,
    #59591f 50%,
    #484f09 66.67%,
    #364600 83.33%,
    #253e00 100%
  );
  top: -170px;
  left: -250;
}

/*  Box4 */

.box4 .icon {
  color: #f23c3c;
}

.box4 .background-hover {
  background: radial-gradient(
    circle at 50% -20.71%,
    #de9c2c 0,
    #e5922a 8.33%,
    #ea852b 16.67%,
    #ee772d 25%,
    #f16731 33.33%,
    #f35436 41.67%,
    #f23c3c 50%,
    #f01843 58.33%,
    #ed004c 66.67%,
    #e90057 75%,
    #e30064 83.33%,
    #db0071 91.67%,
    #d10080 100%
  );
  top: -170px;
  left: 500px;
}

/* BOX 5 */

.box5 .icon {
  color: #991b56;
}

.box5 .background-hover {
  background: linear-gradient(to bottom, #991b56, #ffab33);
  top: 170px;
  left: 500px;
}

.button {
  text-decoration: none;
  border: 0;
  background-image: linear-gradient(150deg, #f57417, #54433a, #bca79c);
  border-radius: 8px;
  color: #fff;
  display: flex;
  text-align: center;
  font-size: 18px;
  padding: 4px;
  margin: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.button:hover {
  font-weight: bold;
  color: #fff;
}

.button-servicio {
  text-decoration: none;
  border: 0;
  background: linear-gradient(40deg, #f57417, #bca79c, #f57417);
  background-size: 400% 400%;
  position: relative;
  animation: faminado 5s infinite ease;
  border-radius: 8px;
  color: #2f1e1a;
  font-weight: bold;
  display: flex;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  margin: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.button-servicio:hover {
  font-weight: bold;
  color: #fff;
}

.scroll-top-btn {
  position: fixed;
  z-index: 999;
  bottom: 25px;
  left: 15px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 60px;
  font-size: 35px;
  font-weight: bold;
  background-color: gray;
  color: var(--second-color);
  cursor: pointer;
  outline: 0;
  border: 0;
  transition: all 0.3s ease-out;
}

.scroll-top-btn:hover {
  background-color: var(--second-color);
  color: gray;
}

.hidden {
  visibility: hidden;
  opacity: 1;
}

.container-slider {
  width: 100%;
  height: 400px;
  background-color: red;
  margin: 0;
  overflow: hidden;
}

.subrayado {
  display: flex;
  position: relative;
}

.subrayado::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: var(--second-alpha-color);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.6s ease-out;
}

.subrayado:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.text-color {
  color: black;
}

.slider {
  display: grid;
  grid-template-columns: 100% 100% 100% 100%;
  width: 100%;
  margin-left: -100%;
}

.color:hover {
  color: whitesmoke !important;
}

#imagen1 {
  position: relative;
  background-image: url(../image/imagen1.jpg);
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#imagen2 {
  position: relative;
  background-image: url(../image/imagen2.png);
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#imagen3 {
  position: relative;
  background-image: url(../image/imagen3.png);
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#imagen4 {
  position: relative;
  background-image: url(../image/imagen4.jpg);
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fondo-slider {
  position: absolute;
  background: linear-gradient(#212226, #31304d);
  width: 100%;
  height: 400px;
  opacity: 85%;
}

.text-image {
  position: relative;
  width: 45%;
  margin: left;
  margin-left: 1rem;
  margin-top: 5%;
  font-family: Arial, Helvetica, sans-serif;
  color: #ff6000;
  font-size: 38px;
  text-align: center;
}

.third-alpha-color {
  background-color: var(--third-alpha-color);
}

.p-image {
  position: relative;
  width: 45%;
  margin: left;
  margin-left: 1rem;
  margin-top: 1rem;
  color: white;
  font-size: 18px;
  text-align: center;
}

.p-mod {
  font-size: 20px;
}

.slider__btn {
  position: absolute;
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.25);
  top: 40%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: bold;
  font-family: monospace;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}

.slider__btn:hover {
  background: var(--second-color);
}

.slider__btn--left {
  left: 10px;
}

.slider__btn--right {
  right: 10px;
}

@keyframes faminado {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .nav-item:hover {
    background-color: transparent;
  }
}

@media (max-width: 900px) {
  .slider__btn {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 35%;
  }
}

@media (max-width: 668px) {
  .navbar-brand img {
    height: 65px;
  }
  .box {
    width: 250px;
    height: 200px;
  }

  .text-image {
    font-size: 24px;
    width: 60%;
  }

  .p-image {
    font-size: 15px;
    width: 60%;
  }

  .p-mod {
    font-size: 16px;
  }

  .btn-wsp {
    width: 50px;
    height: 50px;
    line-height: 50px;
    bottom: 20px;
    right: 8px;
    border-radius: 50px;
    text-align: center;
    font-size: 25px;
  }

  .slider__btn {
    position: absolute;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.25);
    top: 40%;
  }
}

@media (max-width: 400px) {
  .slider__btn {
    position: absolute;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.25);
    top: 50%;
  }
}