@import url('https://fonts.googleapis.com/css2?family=Quicksand&family=Raleway&display=swap');
:root {
  --primary-color: #000000;
  --secondary-color: #d2b511;
  --tercer-color: #2e2d2d;
  --primary-font: 'Quicksand', sans-serif;
  --secondary-font: 'Raleway', sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

ul {
  list-style-type: none;
}



a {
  text-decoration: none;
}

body {
  background-color: var(--primary-color);
  color: white;
}

/* Comienzo de seccion header  */

.cont-logo img {
  width: 210px;


}

header {
  position: fixed;
  z-index: 1;
  width: 100%;
  transition: top 1.5s;
  background-color: rgb(0, 0, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 15px;
  border-bottom: 1px solid #ffd50096;
}
#btn-cotizar{
  background-color: #d2b511;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
}
#btn-cotizar:hover{
  background-color: #ffd818;
  transition: 0.6s;
}
#btn-cotizar a{
  color: black;
  font-weight: bold;
}

.cont-logo {
  padding: 0px 2px;
  display: inline-block;
}

.cont-cerrar {
  display: none;
  padding: 20px 14px;
  font-size: 5.4em;
}

.cont-icon-bar {
  display: none;
  font-size: 3.1em;
  padding-right: 10px;
}

.menu-nav-bar {
  display: flex;
  gap: 1.2rem;
  font-family: var(--primary-font);
}

.menu-nav-bar li a {
  font-size: 1.8rem;
  color: white;
  padding: 0px 5px;
}
.menu-nav-bar li a:hover {
  font-size: 1.8rem;
  color: #d2b511;
  transition: 1s;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.671);
}

.wp-fixed {
  font-size: 1.8em;
}

/* Comienzo de seccion principal .cont-slider {
  min-height: 100vh;
}

.carousel {
  background-color: #e6e6e6;
  position: relative;
  border-bottom: 3px solid var(--secondary-color);
}

.mySlides {
  display: none;
  height: 100vh;
 
  width: 100%;
  padding: 12rem 3.5rem;
  background-image: linear-gradient(rgba(16, 16, 16, 0.908),
      rgba(28, 28, 29, 0.817)),
    url(../img/imgcamarasopt.webp);
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mySlides.two {
  background-image: linear-gradient(rgba(21, 20, 20, 0.88),
      rgba(15, 15, 16, 0.819)),
    url(../img/imagseguridad.wep.webp);
  background-size: cover;
  background-position: center;
  padding: 12rem 3.5rem;
}
.mySlides.three {
  background-image: linear-gradient(rgba(24, 23, 23, 0.808),
      rgba(18, 18, 19, 0.888)),
    url(../img/camaras1.webp);
  background-size: cover;
  background-position: center;
  padding: 12rem 3.5rem;
}

.slideshow-container {
  position: relative;
  margin: 0 auto;
}

.carousel .prev,
.carousel .next {
  background-color: rgba(0, 0, 0, 0.13);
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 1.55rem;
  transition: 0.6s ease;
  border: none;
  user-select: none;
  border-radius: 10px;
}

.carousel .prev {
  left: 8px;
}

.carousel .next {
  left: unset;
  right: 8px;
}

.carousel .prev:hover,
.carousel .next:hover {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
}

.carousel .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

.body-slider {
  padding: 150px 5px;
  margin: 0px 40px;
  font-family: var(--secondary-font);
}

.body-slider a {
  color: white;
  font-size: 1.5em;
  padding: 12px 8px;
  border-radius: 15px;
  margin: 12px 0px;
  display: inline-block;
  border: 1px solid var(--secondary-color);
 
  
}
.body-slider a:hover{
  background-color: #d2b511;
  color: black;
  transition: 1s;
  font-weight: 800;
}

.body-slider h1,
.body-slider h2 {
  font-size: 3.4em;
  padding: 10px 0px;
  font-weight: 900;
  color: #d2b511;
  text-shadow: 3px 2px 6px rgba(0, 0, 0, 0.68);

}

.body-slider h3 {
  font-size: 1.8em;
  font-weight: 100;

}

.mySlides.one .body-slider,
.mySlides.mySlides.three .body-slider {
  text-align: end;
} */


.hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url(../img/heroinicio.jpg);
  background-position: left;
}
.cont-gral-hero{
  font-family: var(--primary-font);
  font-size: 1.4rem;
  padding: 15px;

}
.cont-gral-hero h1{
  font-weight: bold;
  text-shadow:1px 3px 3px rgb(0, 0, 0);
}
.cont-gral-hero h2{
  font-weight: 100;
}
#btn-ConoceMas{
  color: black;
  background-color: #d2b511;
  padding: 5px 10px;
  border-radius: 10px;
  margin:15px 0px;
  cursor: pointer;
  font-size: 1.7rem;
  font-weight: 700;
  font-family: var(--primary-font);
  border: 1px solid black;
}
#btn-ConoceMas:hover{
  background-color: #fffb00;
  transition: 0.5s;
}
/* Seccion nosotros */
.cont-img img {
  width: 340px;
  border-radius: 4px;
}
.section-Nosotros {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  margin: 80px 20px; 

}
.cont-historia {
  font-family: var(--secondary-font);
  padding: 20px;
  margin: 0px 0px;
}
.cont-historia p {
  font-size: 1.6rem;
  font-weight: 100;
  padding:8px 0px;
}
.cont-historia h3 {
  font-size: 3.2rem;
  padding: 8px 0px;
  color: transparent;
  -webkit-text-stroke: 0.5px rgb(224, 221, 0);

}
.cont-historia h4{
  font-size: 2.1rem;
  padding: 10px 0px;
}
.lista-nosotros li{
  font-size: 1.6rem;
  list-style: circle;
  padding: 5px;
}
.lista-nosotros{
  padding:2px 20px;
}
.section-Nosotros {
 display: flex;
  justify-content: space-around;
  padding: 20px;
  margin: 80px 20px;

}

/* Parte de servicios  */

.card-servicio>figure img {
  width: 110px;
  color: white;
  background-color: var(--secondary-color);
  border-radius: 20px;
  border: 2px solid rgb(143, 141, 3);
  padding: 15px;
  margin: 18px 0px;
}

.container-card-servicio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.card-servicio {
  text-align: center;
  padding: 80px 0px;
  font-family: var(--primary-font);
}

.card-servicio h3 {
  font-size: 1.8em;
  padding: 8px 0px;
  width: 50%;
  margin: 0 auto;
  color: #d2b511;
 
}

.card-servicio>figure {
  display: flex;
  justify-content: center;
}
.card-servicio-body a:hover{
  background-color: #cebb5d;
  transition: .5s;
}

.card-servicio-body a {
  display: inline-block;
  background-color: var(--secondary-color);
  padding: 9px 35px;
  border: 2px solid rgb(120, 104, 2);
  margin: 6px 0px;
  font-size: 1.4em;
  border-radius: 15px;
  color: black;
  font-family: var(--secondary-font);
  font-weight: bold;
}


.card-servicio-body p {
  font-size: 1.4em;
  font-weight: 100;
  padding: 8px 0px;
}

.cont-card-prod {
  display: flex;
  padding: 8px;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.card-prod1 {
  background: linear-gradient(rgba(20, 20, 20, 0.751), rgba(21, 21, 21, 0.801)),
    url(../img/camaras1.webp);
}

.card-prod2 {
  background: linear-gradient(rgba(20, 20, 20, 0.751), rgba(21, 21, 21, 0.801)),
    url(../img/alarma_1.webp);
}

.card-prod3 {
  background: linear-gradient(rgba(20, 20, 20, 0.751), rgba(21, 21, 21, 0.801)),
    url(../img/cercos-zc.webp);
}

.card-prod4 {
  background: linear-gradient(rgba(20, 20, 20, 0.751), rgba(21, 21, 21, 0.801)),
    url(../img/domotica-zc.webp);
    background-position: 70% !important;
}

.card-prod {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #d2b511;

  border-bottom: 6px solid var(--secondary-color);
}

.card-prod:hover {
  filter: brightness(0.7);
  transition: 1.1s;
}

.body-card-prod {
  padding: 10px 8px;
  font-family: var(--secondary-font);
}

.body-card-prod h3 {
  font-size: 2.5em;
}

.body-card-prod h5 {
  font-size: 1.4rem;
  font-weight: 200;
  padding: 8px 0px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgb(0, 151, 30);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
  box-shadow: 2px 4px 2px rgba(18, 18, 19, 0.308);
}

#myBtn:hover {
  background-color: rgb(0, 81, 16);
  transition: 1.2s;
}

.servicios_title{
  font-size: 2.7em;
  padding: 24px 0px;
  margin: 30px 0px;
  color: #d2b511;
 
}
.servicios_title{
  font-family: var(--primary-font);
  padding: 0px 30px;
}

.card-cursos-body {
  padding: 15px;
  font-family: var(--primary-font);

}

.card-cursos-body h3 {
  font-size: 1.7em;
  padding: 8px 0px;

}

.card-cursos-body p {
  font-size: 1.2em;
  padding: 2px 0px;
  font-weight: 200;
}

.precio-curso {
  grid-column: 5/6;
  font-size: 1.4em;
  font-family: var(--primary-font);
  padding: 5px 0px;
  text-align: center;
}

.precio-curso a {
  display: inline-block;
  padding: 8px 12px;
  margin: 9px 0px;
  background-color: #d2b511;
  color: black;
  border-radius: 4px;
  font-weight: 600;

}

/* Seccion de contacto  */

textarea {
  resize: none;
  display: block;
  background-color: transparent;
  width: 100%;
  border: 2px solid #d2b511;
  color: white;
  font-family: var(--secondary-font);
  font-size: 1.5rem;
  margin: 5px 0px;
}

fieldset {
  border: none;
}

input {
  background-color: transparent;
  border: 0px;
  border-bottom: 2px solid #d2b511;
  width: 100%;
  color: white;
  padding: 8px 1px;
  margin: 0px 0px 18px;
  font-family: var(--secondary-font);
}


input:focus,
textarea:focus {
  border: 0px;
  outline: unset;
  border: 1px solid #d2b51163;
}

fieldset label,
label {
  display: block;
  font-size: 1.4em;
  padding: 6px 0px;

}

.cont-contacto {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

}
.contacto{
  padding: 40px 0px;
  font-family: var(--secondary-font);
}
.contacto h3 {
  padding: 40px;
  font-size: 2.7em;
  color: #d2b511;
  
}

.card-contacto h4 {
  padding: 16px 0px;
  font-size: 2.3em;
  letter-spacing: 3px;
  font-weight: 300;
}

.art-telefono {
  text-align: center;
  padding: 50px;
}


.cont-contact-rrss a,
.cont-contact-tel a {
  font-size: 1.5em;
  padding: 0px 10px;
  color: white;
}
.ico-ig i{
  background: radial-gradient(circle at 30% 110%, #ffdb8b 0%,#ee653d 25%,#d42e81 50%,#a237b6 75%,#3e5fbc 100%);
  border-radius: 25px;
  transition: 0.4s;


}

.ico-ig i:hover{
  color: rgb(236, 203, 229);
}
.ico-fb{
  color: #2c56b1 !important;
}
.ico-fb i:hover{
  color: #4d77e3;
}
.cont-contact-rrss a>i,
.cont-contact-tel a>i {
  padding: 2px;
  font-size: 2em;
  margin: 0px 4px;

}

.cont-contact-tel a>.fa-whatsapp {
  color: white;
  background-color: rgb(0, 151, 30);
  border-radius: 8px;

}

.cont-contact-tel a>i {
  color: #d2b511;
  font-size: 1.5em;
}

.submit-form {
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  border: none;
  background: #d2b511;
  padding: 10px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  margin: 18px 0px;
}

.submit-form:hover {
  background-color: #cebb5d;
  transition: 0.5s;
}

.cont-button-submit {
  display: flex;
  justify-content: center;
}

/* Seccion de footer */

footer {
  text-align: center;
  padding: 30px 0px 35px;
  font-family: var(--secondary-font);
  font-size: 1.4rem;
  margin: 50px 0px 0px;
}

.copy-footer a {
  color: #d2b511;
}
.logo-footer img{
  width: 240px;
}
.logo-footer{
  display: inline-block;
  margin: 30px 0px;
}