@charset "UTF-8";
/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');*/
:root {
  --header-height: 3rem;
  /* =========COLOR============ */
  --azul-uno: #001B48;
  --azul-dos: #002447;
  --azul-tres: #155DB1;
  --azul-cuatro: #2196F3;
  --azul-cinco: #81C9FA;
  --azul-seis: #ebf6ff;
  --rojo-uno: #CC0001;
  --rojo-dos: #E60000;
  --rojo-tres: #FF1A1A;
  --rojo-cuatro: #FF3334;
  --rojo-cinco: #FF4D4D;
  --grey-one: rgb(29, 29, 29);
  --grey-two: #222;
  --grey-three: #808080;
  --grey-four: #B3B3B3;
  --grey-five: #E6E6E6;
  --grey-six: #f3f3f3be;
  --grey-seven: #fcfcfc;
  --white: white;
  --wrapper-background: #fff111;
  --black: #111111;
  --botton-color: #333222;
  --target-color: #ebf6ff;
  /*========== Fuente y tipografia ==========*/
  --body-font: "Poppins", sans-serif;
  --otro-font: sans-serif;
  --big-font-size: 2rem;
  --h1-font-size: 50px;
  --h2-font-size: 42px;
  --h3-font-size: 30px;
  --h4-font-size: 20px;
  --h5-font-size: 18px;
  --normal-font-size: 16px;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  /*========== Margenes Bottom ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
}

html {
  scroll-behavior: smooth;
}

body,
button,
input,
textarea {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  background: var(--grey-five);
}

h1 {
  font-size: var(--h1-font-size);
}

h2 {
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  font-size: var(--h5-font-size);
}

ul {
  list-style: none;
}

p {
  font-size: var(--normal-font-size);
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.section {
  padding: 4rem 0 2rem;
}

.section-title, .section-subtitle {
  text-align: center;
}

.section-title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  margin-bottom: var(--mb-3);
}

.section-subtitle {
  display: block;
  color: var(--first-color);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1);
}

/* BUTTON */
.button {
  display: inline-block;
  background-color: var(--azul-tres);
  color: #FFF;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: 0.3s;
}

.button:hover {
  background-color: var(--azul-uno);
}

/*========== ABOUT ==========*/
/* .about__data{
  text-align: center;
}

.about__description{
  margin-bottom: 1.5rem;
}

.about__img{
  width: 280px;
  border-radius: .5rem;
  justify-self: center;
} */
#inferior {
  width: 3%;
  height: 3%;
  position: fixed;
  left: 10px;
  right: 0px;
  bottom: 50px;
  z-index: 2;
}

@media screen and (max-width: 992px) {
  #inferior {
    width: 10%;
    height: 10%;
    left: 10px;
    bottom: -25px;
  }
}
/* Scroll top */
.scrolltop {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem;
  background: var(--rojo-cinco);
  border-radius: 0.4rem;
  z-index: var(--z-tooltip);
  transition: 0.4s;
  visibility: hidden;
}

.scrolltop:hover {
  background-color: var(--grey-five);
}

.scrolltop__icon {
  font-size: 1.8rem;
  color: var(--white);
}

.scrolltop__icon:hover {
  color: var(--azul-uno);
}

/* Show scrolltop */
.show-scroll {
  visibility: visible;
  bottom: 1.5rem;
}

/* ======MENU========== */
.navbar-default {
  width: 100%;
  background: var(--white);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
}

.navbar-collapse {
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.navbar-default .navbar-brand {
  color: #b12f2f;
  font-weight: 500;
}

.navbar-default .navbar-brand .fa {
  color: #a5c422;
}

.navbar-default .navbar-nav li.appointment-btn {
  margin: 3px 0 0 20px;
}

.navbar-default .navbar-nav li.appointment-btn a {
  background: #a5c422;
  border-radius: 3px;
  color: #000000;
  font-weight: 600;
  padding-top: 12px;
  padding-bottom: 12px;
}

.navbar-default .navbar-nav ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--white);
  padding: 0;
}

.navbar-default .navbar-nav ul li {
  float: none;
  width: 200px;
  padding: 10px;
  font-size: 16px;
}

.navbar-default .navbar-nav li ul li a {
  line-height: 120%;
  padding: 10px 15px;
  text-decoration: none;
}

.navbar-default .navbar-nav li:hover > ul {
  display: block;
}

/* .navbar-default .navbar-nav li ul li:hover {
    background-color: var(--g);

    a {
      background-color: var(--grey-five);

    }
  }
*/
.navbar-default .navbar-nav li.appointment-btn a:hover {
  background: #ff00dd;
  color: #020202 !important;
}

.navbar-default .navbar-nav li a {
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  padding-right: 20px;
  padding-left: 20px;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
}

.navbar-default .navbar-nav > li a:hover {
  color: var(--azul-tres);
  background: var(--white);
  text-decoration: underline;
}

.navbar-default .navbar-toggle {
  border: none;
  padding-top: 10px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}

.navbar .navbar-header img {
  width: 43%;
  margin-left: 1px;
  margin-top: 6px;
}

/*---------------------------------------
   RESPONSIVE STYLES              
-----------------------------------------*/
@media only screen and (max-width: 1200px) {
  .navbar-default .navbar-nav li a {
    padding-right: 15px;
    padding-left: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: transparent;
  }
  .navbar-default .navbar-nav li.appointment-btn {
    margin-left: 15px;
  }
  .navbar-default .navbar-nav li a {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .navbar .navbar-header img {
    width: 15%;
  }
  .navbar-default .navbar-nav ul {
    display: block;
    position: relative;
  }
}
@media only screen and (max-width: 540px) {
  .navbar .navbar-header img {
    width: 20%;
  }
}
.button-contact {
  padding: 5px;
}
.button-contact .button-nav {
  color: #000000;
  float: right;
  font-weight: 500;
  padding-inline-start: 12px;
  padding-inline-end: 12px;
  padding-block-start: 11px;
  padding-block-end: 11px;
  border-radius: 4px;
  text-transform: none;
  text-decoration: none;
  text-align: center;
}
.button-contact .button-nav:hover {
  background-color: var(--white);
}

.bar__header {
  display: flex;
  width: 100%;
  height: 50px;
  background-color: rgb(0, 88, 139);
  position: sticky;
  top: 50px;
  z-index: 2;
}
.bar__header .bar__bottom {
  margin: auto auto;
  color: white;
}

/* BANNER-DIRECTORIO */
.about__us {
  width: 100%;
  background: var(--grey-six);
  height: 380px;
  display: flex;
}

.about__us--container {
  width: 80%;
  margin: auto auto;
}

.about__us--title {
  text-align: center;
}
.about__us--title h2 {
  color: var(--azul-uno);
  padding-bottom: 16px;
}

.about__us--description {
  margin-bottom: 30px;
}

@media screen and (max-width: 576px) {
  .about__us--container {
    width: 90%;
  }
}
/* banner */
.call__now {
  width: 100%;
  background-color: var(--grey-six);
}

.call__now--container {
  text-align: center;
}

.call__now--title {
  display: flex;
}
.call__now--title h1 {
  font-size: 35px;
  color: var(--black);
  margin: 20px auto;
}

.call__now--telefono {
  display: flex;
}
.call__now--telefono .call__now--btn {
  border-radius: 50%;
  margin: 20px auto;
  background: rgb(0, 165, 0);
  font-family: var(--body-font);
  width: 60px;
  height: 60px;
}
.call__now--telefono .call__now--btn img {
  padding-top: 15px;
  width: 70%;
}
.call__now--telefono .call__now--btn:hover {
  background-color: rgb(2, 133, 2);
}
.call__now--telefono .btn__whatsapp {
  width: 4%;
  margin: 20px auto;
}

@media screen and (max-width: 1200px) {
  .call__now--container {
    width: 90%;
    margin: auto auto;
  }
  .call__now--telefono .btn__whatsapp {
    width: 7%;
    margin: 20px auto;
  }
}
@media screen and (max-width: 992px) {
  .call__now--container {
    width: 90%;
    margin: auto auto;
  }
  .call__now--telefono .btn__whatsapp {
    width: 8%;
    margin: 20px auto;
  }
}
@media screen and (max-width: 767px) {
  .call__now--container {
    width: 90%;
    margin: auto auto;
  }
  .call__now--telefono .btn__whatsapp {
    width: 10%;
    margin: 20px auto;
  }
}
/*para pantallas pequeñas*/
@media screen and (max-width: 361px) {
  .call__now--container {
    width: 90%;
    margin: auto auto;
  }
  .call__now--telefono .btn__whatsapp {
    width: 18%;
    margin: 20px auto;
  }
}
/* banner 2 */
.banner-two {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  background-image: url(../img/section-one.jpeg);
  background-repeat: no-repeat;
}

.full-witch-wrapper {
  position: relative;
  overflow: hidden;
  width: 80%;
}

.details {
  font-family: Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-left: 60px;
}

.details-right {
  font-family: Roboto, sans-serif;
  float: right;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-left: 60px;
}

.temperature {
  color: var(--black);
  font-weight: 200;
  font-size: 7em;
}

.summary {
  color: var(--black);
  font-weight: 300;
  width: 500px;
  margin-top: -16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--cayucos);
  margin-left: 8px;
}

.summaryText {
  margin: 0;
  /* margin-left: 56px; */
}

.precipitation, .wind {
  color: var(--black);
  font-weight: 300;
  margin-left: 8px;
}

.precipitation {
  margin-top: 16px;
}

.wind {
  margin-top: 4px;
}

@media screen and (max-width: 1200px) {
  .details {
    padding: 10px;
    margin-top: 0px;
    margin-left: 0px;
  }
  .details-right {
    display: flex;
    float: left;
    flex-direction: column;
    margin-top: 0px;
    margin-left: 0px;
  }
  .full-witch-wrapper {
    width: 95%;
    overflow: visible;
  }
}
/* banner-three */
.banner-three {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  background-image: url(../img/1626914098926.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.full-witch-wrapper-banner-three {
  position: relative;
  width: 100%;
}

.details-banner-three {
  float: right;
  font-family: Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

.temperature-banner-three {
  color: var(--black);
  font-weight: 200;
  font-size: 7em;
}

.summary-banner-three {
  color: var(--white);
  font-size: 3em;
  font-weight: 300;
  margin-top: -16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--cayucos);
  margin-left: 8px;
}

.precipitation-banner-three, .wind-banner-three {
  color: var(--white);
  font-weight: 300;
  margin-left: 8px;
}

.precipitation-banner-three {
  margin-top: 16px;
  width: 60%;
}

.wind-banner-three {
  margin-top: 4px;
}

@media screen and (max-width: 1200px) {
  .banner-three {
    background-image: linear-gradient(rgba(3, 9, 75, 0.568), rgba(5, 4, 66, 0.596)), url(../img/1626914098926.jpg);
  }
}
/* CARDS */
.cards {
  margin: 26px auto;
  max-width: 90%;
}

.title-cards {
  color: var(--azul-tres);
  margin: 0 auto;
  padding: 20px 0 30px 0;
  max-width: 60%;
  text-align: center;
}

.title-cards-servicios {
  color: var(--grey-two);
  margin: 0 auto;
  padding: 20px 0 30px 0;
  max-width: 80%;
}
.title-cards-servicios h2 {
  text-align: center;
}

.main-section-cards h1 {
  padding-bottom: 20px;
  text-align: center;
  color: var(--azul-tres);
}

.main-section-cards .section-cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.main-section-cards .section-cards .card {
  background: #fdfdfd;
  width: 280px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: 20px;
  text-align: center;
  transition: all 0.25s;
  padding: 1px;
}
.main-section-cards .section-cards .card h4,
.main-section-cards .section-cards .card p {
  padding-top: 20px;
}

.main-section-cards .section-cards .card:hover {
  transform: translateY(-15px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}

.main-section-cards .section-cards .card img {
  width: 280px;
  height: auto;
}

.section-cards-button {
  display: flex;
  /* border: 1px solid blue; */
}
.section-cards-button .card__button {
  margin: 20px auto;
  background: #00588b;
  color: var(--white);
  padding-inline-start: 15px;
  padding-inline-end: 15px;
  padding-block-start: 14px;
  padding-block-end: 14px;
  border-radius: 5px;
  text-transform: none;
  text-decoration: none;
  text-align: center;
}

/* end-cards */
/*
$base-duration: 500ms;

// Colors
$color-1: #2c3e50;
$color-2: #0258a8;
$color-3: #005186;

// Breakpoints
$sm: new-breakpoint(min-width 320px);
$med: new-breakpoint(min-width 768px);
$lg: new-breakpoint(min-width 1024px);

*,
*:before,
*:after {
  box-sizing: border-box;
  outline: none;
}

.image-block {
  margin: 10px;
}
figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 350px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(190, 6, 6, 0.8), 0 1px 2px rgba(10, 255, 51, 0.8);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  &:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    img {
      transform: scale(2.25);
    }
    figcaption {
      bottom: 0;
    }
  }

  img {
    height: 95%;
    transition: 0.25s;
  }
  figcaption {
    position: absolute;
    bottom: -45%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 10px;
    background-color: rgba(black, 0.85);
    box-shadow: 0 0 20px rgba(black, 0.4);
    color: white;
    line-height: 1;
    transition: 0.25s;
    h4 {
      margin: 0 0 20px;
      padding: 0;
    }
    p {
      font-size: 14px;
      line-height: 1.75;
    }
    button {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0 0;
      padding: 10px 30px;
      background-color: $color-2;
      border: none;
      border-radius: 5px;
      color: white;
      font-size: 14px;
    }
  }
}
*/
.section-list__nom {
  display: flex;
  justify-content: center;
}

.section-cards__two {
  max-width: 30%;
  background: rgba(240, 240, 240, 0.24);
  padding: 10px;
}
.section-cards__two .content-description-nom {
  padding: 10px;
}

.container__normas {
  margin: 10px;
  padding: 10px;
  width: 100%;
}
.container__normas #lista-normas-electronica {
  padding: 10px;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
}
.container__normas #lista-normas-electric {
  padding: 10px;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  border: 1px solid blue;
}
.container__normas #lista-normas-eficiency {
  padding: 10px;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
}
.container__normas #lista-normas-mecanic {
  padding: 10px;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
}
.container__normas .card__nom {
  margin: 10px;
  position: relative;
  width: 250px;
  height: 300px;
  border-radius: 10px;
  background-color: rgb(248, 248, 248);
  box-shadow: 0 1px 3px rgba(240, 240, 240, 0.8), 0 1px 2px rgba(243, 243, 243, 0.8);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  border: 1px solid var(--grey-four);
}
.container__normas .card__nom:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.container__normas .card__nom:hover .card-json {
  bottom: 0;
}
.container__normas .card__nom .img-json-card {
  height: 180px;
  overflow: hidden;
}
.container__normas .card__nom .card-tittle-json {
  margin-top: 10px;
  text-align: center;
}
.container__normas .card__nom .card-json {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 15px;
  background-color: rgba(5, 80, 192, 0.842);
  color: white;
  line-height: 2;
  transition: 0.25s;
}
.container__normas .card__nom .card-json h5 {
  margin: 0 0 20px;
  padding: 0;
}
.container__normas .card__nom .card-json p {
  font-size: 14px;
  line-height: 1.75;
}

/* parent */
.section-parent {
  width: 100%;
  background-image: url(../img/162691409891.jpg);
}

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

.one, .two {
  height: 600px;
  width: 65%;
}

.one {
  left: 0;
  top: 0;
  background: #043807;
  clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}

.two {
  right: 0;
  top: 0;
  background: #063a71;
  clip-path: polygon(0% 0, 50% 0%, 100% 100%, 0% 100%);
  opacity: 0.9;
}

.parent-text {
  padding-top: 100px;
  margin: 90px;
}

.summary-parent-two {
  color: var(--white);
  font-weight: 300;
}

.precipitation-parent-two {
  width: 50%;
  padding-top: 25px;
  color: var(--white);
  font-weight: 300;
  font-size: 20px;
}
.precipitation-parent-two span img {
  width: 5%;
  margin-right: 20px;
}

/* end parent */
/*para pantallas medianas*/
@media screen and (max-width: 576px) {
  .two {
    border: 1px solid white;
    width: 100%;
    background: rgb(3, 48, 121);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 0.8;
    height: auto;
  }
  .parent-text {
    margin: 0 auto;
    padding: 20px;
  }
  .summary-parent-two {
    text-align: center;
  }
  .precipitation-parent-two {
    margin: 0 auto;
    width: 90%;
  }
}
/* BANNER-DIRECTORIO */
.banner-directorio {
  width: 100%;
  background: var(--grey-six);
  display: flex;
  justify-content: center;
  align-items: center;
}

.directorio-section {
  margin: 30px;
  position: relative;
  overflow: hidden;
  width: 80%;
}

.title-directorio {
  color: var(--azul-tres);
  text-align: center;
}

.directorio-description {
  font-size: 25px;
  text-align: center;
  padding-bottom: 50px;
}

.details-directorio {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-direc-one {
  color: var(--azul-tres);
  border: 2px solid var(--azul-cuatro);
  max-width: 70%;
  padding: 10px;
  text-align: center;
}
.content-direc-one span img {
  width: 8%;
}

.content-direc-two {
  margin-left: 200px;
  max-width: 30%;
  margin-top: 25px;
}

@media only screen and (max-width: 720px) {
  .banner-directorio {
    width: 100%;
    background: var(--grey-six);
    display: flex;
    flex-direction: column;
  }
  .details-directorio {
    margin: 0 auto;
    display: block;
    text-align: center;
  }
  .content-direc-one {
    border: none;
    color: var(--azul-tres);
    padding-right: 0px;
    margin-left: 0px;
    max-width: 100%;
  }
  .content-direc-two {
    margin-left: 0px;
    max-width: 100%;
    margin-top: 0px;
  }
}
/* //banner dorectprop */
.content-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 1em;
  font-family: sans-serif;
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.content-table thead tr {
  background-color: var(--grey-two);
  color: #ffffff;
  text-align: middle;
}

.content-table th, .content-table td {
  padding: 12px 15px;
}

.content-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.content-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.content-table tbody tr:last-of-type {
  border-bottom: 2px solid var(--azul-dos);
}

.nosotros {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nosotros__section {
  width: 80%;
  margin: 35px auto;
}

.nosotros__about {
  padding-top: 20px;
}
.nosotros__about .hero-title {
  color: var(--azul-dos);
}
.nosotros__about .hero-title h1 {
  font-size: var(--h1-font-size);
}
.nosotros__about .descripcion {
  text-align: center;
}

.hero-descrip {
  padding: 30px;
  margin: 0;
  display: flex;
}

.hero-title {
  text-align: center;
}

.hero__title--contacto {
  text-align: center;
}
.hero__title--contacto h1 {
  color: var(--rojo-cuatro);
}

.container-quienes {
  margin: 5px;
  padding: 25px;
  border-radius: 8px;
  background: var(--grey-seven);
}

.container-quienes .title {
  color: var(--azul-uno);
  margin-bottom: 15px;
  text-align: center;
}

.valores {
  max-width: 100%;
  padding: 20px;
  background-color: var(--grey-six);
}
.valores__container {
  max-width: 80%;
  margin: 0 auto;
}
.valores__title {
  font-size: var(--normal-font-size);
  text-align: center;
  color: var(--azul-tres);
}
.valores__descripcion {
  display: flex;
}
.valores__descripcion .tarjet {
  width: 19%;
  border-radius: 10px;
  background-color: var(--grey-six);
  margin: 10px 10px;
  align-items: center;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.25s;
}
.valores__descripcion .tarjet:hover {
  transform: translateY(-15px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}
.valores__descripcion .tarjet__title {
  background-color: var(--azul-tres);
  border-radius: 15px 0;
  margin: 10px;
  text-align: center;
  font-size: var(--normal-font-size);
  color: var(--white);
}
.valores__descripcion .tarjet__imagen {
  text-align: center;
  padding: 40px;
}

.formatos {
  max-width: 100%;
  padding: 15px;
}
.formatos__container {
  max-width: 80%;
  margin: 0 auto;
  padding: 10px;
  color: var(--azul-tres);
  text-align: center;
}
.formatos__container h1 {
  color: var(--grey-two);
}
.formatos__contenedor {
  display: flex;
  justify-content: flex-start;
  padding: 30px;
}
.formatos__contenedor--section--one {
  width: 50%;
  padding: 20px;
  margin-left: 10px;
  font-size: 25px;
  border: 2px solid rgb(233, 233, 233);
}
.formatos__contenedor--section--one h5 {
  margin: 20px;
}
.formatos__contenedor .formatos__butn .form__btn {
  max-width: 100%;
  font-size: 15px;
  color: white;
  background-color: var(--azul-tres);
  border-radius: 15px;
  padding: 8px;
  text-decoration: none;
  transition: 5;
}
.formatos__contenedor .formatos__butn .form__btn:hover {
  background-color: var(--azul-dos);
}

@media screen and (max-width: 992px) {
  .nosotros__section {
    width: 100%;
  }
  .hero-descrip {
    display: block;
    padding: 5px;
  }
  .valores__container {
    width: 100%;
  }
  .valores__descripcion {
    display: block;
  }
  .valores__descripcion .tarjet {
    width: 80%;
    margin: 20px auto;
  }
  .valores__descripcion .tarjet__imagen {
    padding: 20px;
  }
  .formatos__container {
    max-width: 100%;
    height: auto;
  }
  .formatos__contenedor {
    display: block;
  }
  .formatos__contenedor--section--one {
    width: 100%;
    margin-top: 20px;
  }
}
.servicios {
  width: 100%;
  color: rgb(24, 24, 24);
  padding: 60px 0;
  background-color: var(--azul-seis);
}
.servicios__container {
  max-width: 80%;
  margin: 8px auto;
}
.servicios__container .serv__head {
  margin: 1px;
}
.servicios__container .serv__body {
  display: flex;
  margin: 20px;
  justify-content: center;
  align-items: center;
}
.servicios__container .serv__body .card-services {
  background: var(--white);
  width: 40%;
  height: 310px;
  border-radius: 8px;
  margin: 10px;
  padding: 12px;
  color: black;
  border: 2px solid var(--azul-cinco);
}
.servicios__container .serv__body .card-services__tittle {
  color: var(--grey-two);
  height: 15%;
}
.servicios__container .serv__body .card-services .contend-card {
  display: flex;
  height: 60%;
}
.servicios__container .serv__body .card-services .contend-card img {
  padding: 20px;
  width: 30%;
  margin: 5px;
  border-radius: 8px;
  background-color: var(--azul-seis);
}
.servicios__container .serv__body .card-services .menu__options .menu__servicios {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.servicios__container .serv__body .card-services .menu__options .menu__servicios .menu__option {
  text-align: center;
  margin: 10px 5px;
}
.servicios__container .serv__body .card-services .menu__options .menu__servicios .menu__option .button__option-services {
  border: 1px solid rgb(113, 175, 255);
  padding: 5px;
  text-decoration: none;
  border-radius: 5px;
}
.servicios__container .serv__body .card-services .menu__options .menu__servicios .menu__option .button__option-services:hover {
  background: rgb(1, 74, 170);
  color: white;
}

.servicios .servicios__container .content-table tbody tr td .btn__solicitud img {
  width: 10%;
}

.accordion .accordion-item {
  border-bottom: 1px solid var(--azul-dos);
}
.accordion .accordion-item button[aria-expanded=true] {
  border-bottom: 1px solid var(--azul-tres);
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: var(--azul-dos);
  font-size: var(--normal-font-size);
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}
.accordion button:hover, .accordion button:focus {
  cursor: pointer;
  color: var(--azul-tres);
}
.accordion button:hover::after, .accordion button:focus::after {
  cursor: pointer;
  color: var(--azul-tres);
  border: 1px solid var(--azul-tres);
}
.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}
.accordion button[aria-expanded=true] {
  color: var(--azul-tres);
}
.accordion button[aria-expanded=true] .icon::after {
  width: 0;
}
.accordion button[aria-expanded=true] + .accordion-content {
  opacity: 1;
  max-height: 150em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content li {
  font-size: var(--normal-font-size);
  font-weight: 300;
  margin: 0.3em 1em;
}
.accordion .accordion-content a {
  text-decoration: none;
}
.accordion .accordion-content a strong {
  color: var(--rojo-cuatro);
}

.noms-list {
  border: 1px solid rgb(238, 238, 238);
  margin: 0 auto;
  width: 90%;
}
.noms-list table tbody tr #nombreNorma {
  width: 30%;
}

/*para pantallas pequeñas*/
@media screen and (max-width: 1200px) {
  .servicios__container {
    display: block;
    max-width: 98%;
  }
  .servicios__container .card-services {
    height: 230px;
  }
  .servicios__container .card-services .contend-card img {
    width: 10%;
    height: 90px;
  }
  .servicios__normas {
    width: 100%;
    padding: 1px;
  }
  .formats {
    width: 100%;
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 576px) {
  .servicios__container {
    max-width: 98%;
  }
  .servicios__container .serv__body {
    display: block;
  }
  .servicios__container .serv__body .card-services {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  .servicios__container .serv__body .card-services .card-services__tittle {
    text-align: center;
  }
  .servicios__container .serv__body .card-services .contend-card img {
    display: none;
  }
  .noms-list {
    width: 100%;
  }
}
.contacto {
  max-width: 100%;
  background: var(--white);
}
.contacto__container {
  background-color: var(--grey-six);
  display: flex;
  margin: 0 auto;
  padding: 50px;
  max-width: 80%;
}
.contacto__container__one {
  text-align: center;
  width: 90%;
  height: 70vh;
  margin-top: 30px;
  background-size: 100%;
  background-image: linear-gradient(rgba(0, 89, 255, 0.2), rgba(0, 89, 255, 0.2)), url(../../assets/img/labteso-contacto.jpg);
}
.contacto__container__one-content {
  text-align: left;
  margin: 60px auto;
  width: 95%;
  font-weight: 600;
}
.contacto__container .boletin {
  max-width: 100%;
  margin-top: 240px;
}
.contacto__container .boletin .btn-boletin {
  color: var(--white);
  width: 50%;
  padding: 20px;
  text-decoration: none;
  background-color: var(--azul-cuatro);
}
.contacto__container .boletin .btn-boletin:hover {
  transition: 0.3s;
  background-color: #007cc4;
}
.contacto__container__two {
  width: 100%;
  margin: 20px 0;
  padding: 20px;
  background-color: var(--grey-six);
  border-radius: 3px;
}
.contacto__container__two h3 {
  color: var(--azul-tres);
}
.contacto__container__two p {
  text-align: center;
  font-size: 14px;
  margin: 20px;
}

.button-contacto {
  width: 30%;
  float: right;
  color: white;
  background-color: #00488b;
  border: 0;
  border-radius: 5px;
  margin-top: 10px;
  padding: 8px;
  transition: 5;
}
.button-contacto:hover {
  background-color: #003c5f;
}

@media screen and (max-width: 992px) {
  .contacto {
    max-width: 100%;
    background: var(--grey-six);
  }
  .contacto__container {
    max-width: 100%;
    display: block;
    padding: 0;
  }
  .contacto__container__one {
    padding: 0;
  }
  .contacto__container__one img {
    width: 100%;
    margin: 0 auto;
  }
  .contacto__container__two {
    padding: 20px;
  }
  .button-contacto {
    width: 100%;
  }
}
.login-main {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/banner-login.png);
  background-repeat: no-repeat;
  box-shadow: 0px 0px 25px -3px rgba(0, 18, 158, 0.57);
  height: 100vh;
  font-size: 18px;
}
.login-main .login_content {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dadce0;
  background-color: rgb(243, 243, 243);
  width: 400px;
  height: 500px;
  border-radius: 8px;
}
.login-main .login_form {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  width: 80%;
  height: 80%;
}
.login-main .login_form .login-tittle img {
  width: 50%;
}
.login-main .login_form .login-tittle {
  width: 100%;
  text-align: center;
  grid-row: 1;
  margin: auto 0;
  color: #0046a1;
}
.login-main .login_form .section-two-form {
  grid-row: 2;
}
.login-main .login_form .section-two-form .login-form-container {
  width: 90%;
  margin: 0 auto;
}
.login-main .login_form .section-two-form .login-form-container .group-form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 15px 0;
}
.login-main .login_form .section-two-form .login-form-container .group-form input {
  padding: 14px;
  outline: none;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
}
.login-main .login_form .section-two-form .login-form-container .login-footer-button {
  grid-row: 3;
}
.login-main .login_form .section-two-form .login-form-container .login-footer-button .login-footer-button-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 50%;
}
.login-main .login_form .section-two-form .login-form-container .login-footer-button .login-footer-button-container .button-login {
  padding: 8px;
  border: none;
  border-radius: 5px;
  color: white;
  background-color: #1a73e8;
}
.login-main .login_form .condiciones {
  padding: 10px;
}
.login-main .login_form .condiciones p {
  font-size: 12px;
  color: gray;
}

@media only screen and (max-width: 1200px) {
  .login-main {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    font-size: 18px;
  }
  .login-main .login_content {
    align-items: center;
    justify-content: center;
    border: none;
    height: auto;
  }
}
.solicitudes {
  max-width: 100%;
  background: var(--azul-tres);
  font-family: var(--otro-font);
}
.solicitudes__container {
  display: flex;
  margin: 0 auto;
  padding: 50px;
  max-width: 95%;
}
.solicitudes__container__one {
  width: 80%;
  margin-top: 80px;
  background-size: 100%;
}
.solicitudes__container__one-content {
  color: white;
  margin: 60px auto;
  width: 95%;
  font-weight: 600;
}
.solicitudes__container__one-content .content-description {
  margin-top: 30px;
}
.solicitudes__container__two {
  width: 100%;
  margin-top: 80px;
  padding: 40px;
  background-color: var(--white);
  border-radius: 50px;
}
.solicitudes__container__two form .formitem {
  margin-top: 10px;
  transition: 500ms;
}
.solicitudes__container__two form .inputtext {
  border: 0.5px solid #c4d0d4;
  border-radius: 5px;
  font-size: 18px;
  height: 60px;
  padding: 0 8px;
  width: 100%;
}
.solicitudes__container__two h3 {
  color: var(--azul-tres);
}
.solicitudes__container__two p {
  font-size: 14px;
  margin: 20px;
}
.solicitudes__container__two .button-solicitudes {
  background-color: #0071b3;
  border-color: #159dec;
  border-radius: 50px;
  width: 30%;
  color: #ffffff;
  font-size: 16px;
  margin-top: 16px;
  padding: 15px 48px;
  float: right;
}
.solicitudes__container__two .button-solicitudes:hover {
  background-color: #007dc5;
}

/* banner-three */
.banner__servicios {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 300px;
  margin-top: 50px;
  background-image: url(../img/banner-servicios.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.banner__servicios-electrica {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 300px;
  margin-top: 50px;
  background-image: url(../img/electrica/banner-electrica.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.banner__servicios-electronica {
  width: 100%;
  align-items: center;
  display: flex;
  height: 300px;
  margin-top: 50px;
  background-image: url(../img/electronica/banner-electronica.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.banner__servicios-eficiencia {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 300px;
  margin-top: 50px;
  background-image: url(../img/eficiencia/banner-eficiencia.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.banner__servicios-mecanic {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 300px;
  margin-top: 50px;
  background-image: url(../img/metalmecanic/baner-mecanic.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.banner__servicios-formatos {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 300px;
  margin-top: 50px;
  background-image: url(../img/tramites.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.banner__servicios--container {
  position: relative;
  margin: 0 auto;
  width: 80%;
}

.servicios__title {
  text-align: center;
  color: var(--white);
  font-size: 3em;
  font-weight: 300;
}

.servicios__descripcion {
  color: var(--white);
  font-weight: 100;
  text-align: center;
}

@media only screen and (max-width: 1200px) {
  .banner__servicios {
    height: auto;
  }
  .banner__servicios--container {
    width: 100%;
    padding: 20px;
  }
}
.banner__about {
  max-width: 100%;
  justify-content: end;
  display: flex;
  height: 300px;
  margin-top: 50px;
  background-image: url(../img/banner-nosotros.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.banner__about--container {
  position: relative;
  width: 60%;
  padding: 29px;
}

.about__title {
  color: var(--white);
  font-size: 3em;
  font-weight: 300;
}

.about__descripcion {
  max-width: 60%;
  color: var(--white);
  font-weight: 300;
}

@media only screen and (max-width: 1200px) {
  .banner__about {
    height: auto;
  }
  .banner__about--container {
    width: 100%;
    padding: 20px;
  }
}
@media only screen and (max-width: 720px) {
  .banner__about {
    background: rgb(0, 75, 150);
    background-image: none;
  }
  .about__descripcion {
    max-width: 90%;
  }
}
/* footer-contact */
.footer-contact {
  background: var(--grey-two);
}

.container-footer {
  width: 80%;
  margin: 0 auto;
  display: flex;
}
.container-footer .google-map {
  height: 300px;
  float: right;
  margin: auto 0;
  width: 50%;
}
.container-footer .google-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 2px;
}

.contact-form {
  width: 50%;
  height: 340px;
}

.contact-form h3 {
  text-align: center;
}

.direction {
  text-align: center;
  color: var(--white);
  padding: 10px;
  margin: 10px;
}

.direction-text {
  margin-top: 50px;
}
.direction-text p span img {
  width: 25px;
}

@media only screen and (max-width: 992px) {
  .container-footer {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 0 auto;
  }
  .container-footer .google-map {
    width: 90%;
    margin: 0 auto;
  }
  .contact-form {
    width: 100%;
    height: auto;
  }
}
/* footer */
.footer-container {
  padding: 20px;
  background: var(--grey-one);
  color: var(--white);
  text-align: center;
}

/*# sourceMappingURL=styles.css.map */