@font-face {
    font-family: "monse-b";
    src: url(fonts/ArchivoBlack-Regular.ttf) format("truetype");
}
@font-face {
    font-family: "monse-l";
    src: url(fonts/Montserrat-Light.otf) format("truetype");
}
@font-face {
    font-family: "monse-r";
    src: url(fonts/Montserrat-Regular.otf) format("truetype");
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
html{margin-top: 0 !important;}
body{font-size: 12px;font-family: monse-l;-webkit-font-smoothing: antialiased;position: relative;overflow-x: hidden;height: auto;margin: 0px}
body *{outline: none}
input{outline: none;}
input:focus::-webkit-input-placeholder{color: transparent;}
input:focus:-moz-placeholder{color: transparent;}
input:focus::-moz-placeholder{color: transparent;}
input:focus:-ms-input-placeholder {color: transparent;}
input:focus{outline: none}
textarea:focus::-webkit-input-placeholder{color: transparent;}
textarea:focus:-moz-placeholder{color: transparent;}
textarea:focus::-moz-placeholder{color: transparent;}
textarea:focus:-ms-input-placeholder {color: transparent;}
textarea:focus{outline: none}
a{color: initial;text-decoration: none;cursor: pointer!important;}
a:focus{outline: none;color: none;}
a{text-decoration: none!important;outline: none;}
a:hover{text-decoration: none;outline: none;color: inherit;}
h1,h2,h3,h4,h5,h6,p{margin:0px;line-height:normal;}
h1,h2,h3,h4,h5,h6{;font-weight: normal;font-family: monse-b;text-transform: uppercase;}
button{border: none;outline: none}

.title-head{padding: 10px ;background: #000;text-align: center;color: #F9AC07;font-size: 30px;position: absolute;top: 15%;left: 15%;z-index: 1000}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #fff;
            color: #333;
            line-height: 1.6;
        }

        /* Header Styles */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #000;
            color: #fff;
            padding: 10px 20px;
        }

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

        header .logo img {
            width: 150px;object-fit: cover;
        }
.video-container {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.table-medidas{ display: flex;flex-direction: row;justify-content: center;align-items: center;;padding: 20px 0;
}

table {
  width: 90%;;max-width: 800px;border-radius: 15px;
  border-collapse: collapse;
  font-family: Arial, sans-serif;border: 1px solid #000;
}

thead {
  background-color: #F9AC07;
  color: black;
}

th, td {
  padding: 12px;
  text-align: left;
}

td {
  background-color: white;
  color: black;
}

tr:nth-child(even) td {
  background-color: #F9AC07;
  color: black;
}

tr:nth-child(odd) td {
  background-color: white;
  color: black;
}

/* Responsividad */
@media (max-width: 768px) {
  table {
    
    font-size: 14px;
  }

  th, td {
    padding: 8px;
  }
}

        header nav ul {
            list-style-type: none;
            display: flex;
        }

        header nav ul li {
            margin-left: 20px;
            list-style-type: none;
        }

        li{list-style: none}

        header nav ul li a {
            color: #F9AC07;
            text-decoration: none;
            font-family: 'monse-l', sans-serif;
            padding: 2px 3px;border-bottom: 2px solid transparent;
        }

        header nav ul li a:hover {
            border-bottom: 2px solid #F9AC07
        }

        .hamburger-menu {
            display: none;
        }

        header .redes{display: flex;flex-direction: row;justify-content: center;align-items: center;}
        header .redes a{margin: 0 5px;border-radius: 50%;width: 25px;height: 25px;border: 1px solid #F9AC07;display: flex;flex-direction: row;justify-content: center;align-items: center;;transition: all ease-in-out .5s}
        header .redes a i{color: #F9AC07;transition: all ease-in-out .5s}

        header .redes a:hover{background: #F9AC07}
        header .redes a:hover i{color: #000}

        .hamburger-menu i{font-size: 50px; color:  #F9AC07}


        /* Slider */
        .slide-inicio {
            display: flex;
            overflow: hidden;
            width: 100%;
            height: 80vh;
        }

        .slide-inicio .slide {
            min-width: 100%;
            transition: transform 0.5s ease;
        }

        .slide-inicio img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Secciones */
        .section {
            padding: 50px;
            text-align: center;
            background-color: #f4f4f4;
            
            
        }

         h2 {
            font-family: 'monse-b', sans-serif;
            margin-bottom: 20px;
            font-size: 28px;
        }

        #recomendaciones{background: #000;margin-bottom: 0}
        #recomendaciones h2{color: #F9AC07}
        #recomendaciones li{color: #F9AC07;font-size: 15px}

        #nosotros img, #medidas img{width: 90%;margin: 0 auto}
        #nosotros p, #medidas p{width: 90%;margin: 0 auto;margin-bottom: 20px;max-width: 1000px}

        #nosotros{background: #F9AC07;margin-top: 0;margin-bottom: 0}

        #medidas{background: #000;margin:0px}
        #medidas h2,#medidas p{color: white}

        .section p {
            font-family: 'monse-r', sans-serif;
            font-size: 18px;
            margin-bottom: 20px;
        }

        .servicio-item {
            display: inline-block;
            width: 30%;
            margin: 20px;
            transition: transform 0.3s ease;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .servicio-item:hover {
            transform: scale(1.05);
        }

        #contacto{background: #F9AC07;margin-bottom: 0}
        #contacto h2{color: white}

        .servicio-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
        }

        .servicio-item .service-title {
            font-family: 'monse-b', sans-serif;
            font-size: 22px;
            margin-top: 10px;
        }

        .servicio-item .service-description {
            font-family: 'monse-r', sans-serif;
            font-size: 16px;
            color: #555;
            margin-top: 10px;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
            text-align: left;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        form input, form textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        form button {
            background-color: #F9AC07;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        form button:hover {
            background-color: #000;
        }

        .social-media a {
            margin: 0 10px;
            font-size: 30px;
            color: #333;
            text-decoration: none;
        }

        .social-media a:hover {
            color: #00BFFF;
        }

        footer {
            background-color: #000;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        footer .info p {
            margin: 10px 0;
        }

        .icon-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        /* Section Styles */
.info-bod {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  background-color: #606A74;margin-top: 0px;
}

.info-bod h2{color: white}

.info-header h1 {
  color: #F9AC07;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
}



.info-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.info-text {
  flex: 1;
  max-width: 50%;
  padding: 1rem;
}

.info-text p {
  margin-bottom: 1rem;
  color: #333;font-size: 15px;
  color: white
}

.info-image {
  flex: 1;
  max-width: 50%;
  background-size: cover;
  background-position: center;
  
}

.features {
  background-color: #f4f4f4;
  padding: 2rem;
  width: 100%;
}

.feature h3 {
  color: white;
  margin-bottom: 1rem;
}

.feature ul {
  list-style: none;
}

.feature li {
  margin-bottom: 0.5rem;
}

.uses {
  padding: 2rem;
  width: 100%;
}

.uses h2 {
  color: white;
  margin-bottom: 1rem;
}

.uses-container {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.use h3 {
  color: white;
  margin-bottom: 1rem;
}

.use ul {
  list-style: none;
}

.use li {
  margin-bottom: 0.5rem;color: white;font-size: 14px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .info-content {
    flex-direction: column;
    align-items: center;
  }

  .info-text {
    max-width: 100%;
    padding: 1rem;
  }

  .info-image {
    max-width: 100%;
    height: 200px;
  }

  .uses-container {
    flex-direction: column;
  }

  .use {
    margin-bottom: 2rem;
  }
}



        /* Responsive Design */
        @media (max-width: 768px) {
            header nav ul {
                display: none;
            }

            .hamburger-menu {
                display: block;
                cursor: pointer;
            }

            .hamburger-menu.open + nav ul {
                display: block;
            }

            .slide-inicio {
                height: 40vh;
            }

            .section {
                padding: 30px;
                display: flex;flex-direction: column;justify-content: center;align-items: center;align-content: center;
            }

            .servicio-item {
                width: 100%;
            }

            .title-head{font-size: 26px}
        }

@media (max-width: 480px) {
  .info-header h1 {
    font-size: 1.8rem;
  }

  .info-text p {
    font-size: 0.9rem;
  }

  .feature h3,
  .use h3 {
    font-size: 1.2rem;
  }

  .title-head{font-size: 22px;left: 0;right: 0;margin: 0px auto}
}