/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

main {
  padding-top: 6rem !important;
}

/* Sticky menu */
.custom-sticky {
  background-color: #1a2b4c; /* Ensure visibility if scrolling over other content */
}
/* Top hero */
.top-hero {
  background-color: #143156;
  /*background-image: url(../assets/group-12.png);*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 1000px;
}

.top-hero:after,
.hero-section .hero-slider .slick-slide:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
}

.top-hero .container,
.hero-section .hero-slider .slick-slide .container {
  position: relative;
  z-index: 1;
}

.top-hero .container {
  max-width: 100%;
}

.hero-section .hero-slider .slick-slide .container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
}

.hero-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.top-hero h1 {
  background: -webkit-linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 255);
  font-weight: 700;
  font-size: 100px;
  font-family: 'Montserrat', sans-serif;
  width: 100%;
}

.box1 {
  background-color: #000;
  color: #fff;
  opacity: 0.5;
}

header {
  background: #1a2b4c;
}

.hero-section h2 {
  font-size: 100px;
  font-weight: 700;
}

/* ADDED / START */
.hero-section .fs-2 {
  font-size: 32px !important; /* !important because Bootstrap CSS uses !important*/
}

@media (max-width: 1199px) {
  /* 80% */
  .hero-section h2 {
    font-size: 80px;
  }

  .hero-section .fs-2 {
    font-size: 25px !important; /* !important because Bootstrap CSS uses !important*/
  }
}

@media (max-width: 999px) {
  /* 60% */
  .hero-section h2 {
    font-size: 60px;
  }

  .hero-section .fs-2 {
    font-size: 20px !important; /* !important because Bootstrap CSS uses !important*/
  }
}

@media (max-width: 600px) {
  /* 40% */
  .hero-section h2 {
    font-size: 40px;
  }

  .hero-section .fs-2 {
    font-size: 13px !important; /* !important because Bootstrap CSS uses !important*/
  }
}

/* ADDED / END */

.hero-section {
  max-height: 110vh;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}

.hero-slider {
  overflow: hidden;
  max-height: 110vh;
  margin-bottom: 0 !important;
}

.hero-slider h2,
.hero-slider p {
  transform: translateY(-50%);
  opacity: 0;
  transition: all 1s ease;
}

.hero-slider .slick-current h2,
.hero-slider .slick-current p {
  transform: translateY(0);
  opacity: 1;
}

.hero-slider .slick-slide {
  max-height: 110vh;
}

.hero-slider .slick-next {
  right: 25px;
  z-index: 2;
}

.hero-slider .slick-prev {
  left: 25px;
  z-index: 2;
}

.hero-slider img,
.section-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-slider img {
  min-height: 70vh;
}

.hero-slider .slick-dots li button:before {
  font-size: 10px;
  color: #fff;
  opacity: 1;
}

.hero-slider .slick-dots li.slick-active button:before {
  font-size: 12px;
}

.hero-slider .slick-dots {
  bottom: 25px;
}

.values-icon {
  visibility: hidden;
}

.values-icon.values-icon--js {
  visibility: visible;
}

.values-icon svg {
  max-width: 80px;
}

figure img {
  transition: all 0.3s ease-in-out;
}

figure:hover img {
  transform: scale(1.1);
}

.mfp-figure figure:hover img {
  transform: none;
}

.approach {
  height: 100vh;
  max-height: 600px;
}

.bg-white-opacity {
  background: rgba(255, 255, 255, 0.94);
}

.fs-48 {
  font-size: 48px;
}

.fs-14 {
  font-size: 14px;
}

.fs-10 {
  font-size: 10px;
}

.testimonials-slider .slick-prev:before,
.testimonials-slider .slick-next:before {
  color: #000;
}

form textarea {
  resize: none;
}

.default-text {
  font-size: 14px;
  line-height: 1.88;
  color: #676767;
}

.our-services-cover {
  background-image: url(/images/our-services.jpeg);
  background-repeat: no-repeat;
  background-size: auto;
  background-size: 235%;
  background-position: 55% center;
}

.our-services-cover-2 {
  background-image: url(/images/machining_12.jpeg);
  background-repeat: no-repeat;
  background-size: auto;
  width: 22rem;
  background-size: 99%;
  background-position: 55% center;
}

.our-services-cover-3 {
  background-image: url(/images/machining_11.jpeg);
  background-repeat: no-repeat;
  background-size: auto;
  width: 22rem;
  background-size: 99%;
  background-position: 55% center;
}

.our-services-list {
  background-image: url(/images/machining_12.jpeg);
  background-repeat: no-repeat;
  background-size: auto;
  background-size: 100%;
  background-position: 100% center;
}

.quality-control-cover {
  background-image: url(/images/quality-control.jpeg);
  background-repeat: no-repeat;
  background-size: 110%;
  background-position: 50% center;
}

.quality-control-cover .cover-overlay {
  background-color: #bac7ce;
}

.about-us-cover {
  background-image: url(/images/about-us.jpeg);
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: 50% center;
}

.about-us-cover .cover-overlay {
  background-color: #c7c7c5;
}

.cover-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ffffff;
  opacity: 0.4;
}

.cover-overlay-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.4;
}

.particles-js {
  width: 100%;
  height: 100%;
}

.bg {
  max-height: 500px;
}

.bg .container {
  transform: translate(-50%, -50%);
}

@media (min-width: 900px) {
  .scroll-effect,
  .scroll-effect-text {
    transition: all 0.3s ease;
  }
}

.logo-on-slide {
  max-width: 375px;
}

/* ADDED / START */
@media (max-width: 600px) {
  .logo-on-slide {
    max-width: 240px;
  }
}

/* ADDED / END */

.fs-100,
.top-hero h1.fs-100 {
  font-size: 100px;
}

.gallery a {
  display: block;
}

.gallery a img {
  /*min-height: 220px;*/
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive style */
@media screen and (max-width: 992px) {
  h2,
  .fs-100,
  .top-hero h1 {
    font-size: 48px;
  }
}

@media (max-width: 767px) {
  .about-us-page .col-md-6 .default-text:first-child {
    margin-top: 1rem;
  }
}

/* ==================== */
/* page hero            */
/* ==================== */
.page-hero {
  position: relative;

  display: block;
  width: 100%;

  overflow: hidden;
}

.page-hero::after {
  content: '';
  display: block;
  width: 100%;
  padding-top: calc(1334 / 2000 * 100%);
}
.btn-contact-blue {
  @media (max-width: 992px) {
    display: none;
  }
}
.page-hero__title {
  display: block;
  width: 100%;

  z-index: 2;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  box-sizing: border-box;
  padding: 0 20px;

  text-align: center;
  color: #ffffff;
  font-size: 100px;
  font-weight: 700;
  user-select: none;
}

@media (max-width: 992px) {
  .page-hero__title {
    font-size: 48px;
  }
}

.page-hero img {
  position: absolute;
  left: 0;
  top: 0;

  z-index: 1;

  display: block;
  width: 100%;
  height: auto;
}

/* ==================== */
/* /page hero           */
/* ==================== */

/* ==================== */
/* override bootstrap layout for portfolio page */
/* ==================== */
.portfolio-grid-3 > * {
  width: 20%;
}

@media (max-width: 799px) {
  .portfolio-grid-3 > * {
    width: 100%;
  }
}
/* ==================== */
/* /override bootstrap layout for portfolio page */
/* ==================== */

.item-contact-mobile {
  @media (max-width: 990px) {
    display: none !important;
  }
}

.item-contact2-mobile {
  @media (min-width: 990px) {
    display: none !important;
  }
}
/* Estilos generales */
.card {
  padding: 1rem; /* p-4 */
  border-radius: 0.375rem; /* rounded-md */
  width: 10rem; /* w-[10rem] */
  @media (min-width: 990px) {
    position: absolute;
    top: 3.5rem; /* top-[3.5rem] */
    right: 0rem; /* left-[-4rem] */
    transition: all 0.2s ease; /* transition */
    margin: auto; /* margin-auto */
    opacity: 0; /* opacity-0 */
  }
}

/* Aparece en hover del grupo */
.group:hover .card {
  opacity: 1; /* group-hover:opacity-100 */
}

/* Fondo dinámico */
.card.bg-whitee {
  @media (min-width: 990px) {
    background-color: white; /* bg-white */
  }
}

.card.bg-blue {
  background-color: #036; /* bg-[#036] */
}

/* Texto general */
.text {
  font-weight: bold; /* font-bold */
}

/* Color de texto dinámico */
.text.text-blue {
  color: #036; /* text-[#036] */
}

.text.text-white {
  color: white; /* text-white */
}

/* Número de teléfono */
.phone-number {
  font-size: 13px; /* text-[13px] */
  transition: color 0.2s ease; /* transition */
}

.phone-number.text-slate-700 {
  color: #334155; /* text-slate-700 */
}

.phone-number.text-slate-700:hover {
  color: #64748b; /* hover:text-slate-500 */
}

.phone-number.text-slate-400 {
  color: #94a3b8; /* text-slate-400 */
}

.phone-number.text-slate-400:hover {
  color: white; /* hover:text-white */
}