html{
    font-size: 62.5%;
    scroll-snap-type: y mandatory;
}
h1,h2,h3{
    font-family: 'Playfair Display', serif;
}
p{
    font-size: 1.3rem;
}

h1{
    font-size: 3.8rem;
}

h2{
    font-size: 3rem;
}

h3{
    font-size: 4rem;
}

@media(min-width: 768px){
    h1{
        font-size: 5rem;
    }
}

a{
    text-decoration: none;
}

.simbolo {
    font-family: Arial, sans-serif; /* Ejemplo de fuente */
    color: orangered;
    
  }

.section{
    margin-top: 10rem;
}

.menu{
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);  
    transition:ease-out .5s;
    box-shadow: -3px 5px 12px -5px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: -3px 5px 12px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -3px 5px 12px -5px rgba(0, 0, 0, 0.75);
    border-bottom: rgb(250, 62, 5) solid 1px;
    z-index: 2;
}

.menu2{
    background-color: rgba(244, 243, 245, 0.8);
    transition:ease-out .5s;
    box-shadow: -3px 5px 12px -5px rgba(255, 254, 254, 0.75);
    -webkit-box-shadow: -3px 5px 12px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -3px 5px 12px -5px rgba(0, 0, 0, 0.75);

}

.navbar-brand{
    color:rgb(233, 67, 67) !important ;
   
   
}
.navbar-nav .nav-item{
    padding: 1.2rem;
    margin-left: 3rem;
    
}
.navbar-light .navbar-nav .nav-link{
    color: rgb(20, 3, 53);
    font-size: 2rem;
    
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link{
    color: white;
}
.dropdown-menu{
    font-size: 1.7rem;
    background-color: yellowgreen;
    border-radius: 5px;
}


.navbar-light .navbar-toggler-icon{
   background-image: none;
   color: rgb(20, 3, 53);
   padding:.7rem;
   line-height: 0;
   font-size: 3.5rem;
 
}
.navbar-nav .nav-item:hover {
   background-color: yellowgreen;
    border-radius: 5px;
    transition: ease-in .5s;
}

.navbar-nav .nav-item .nav-link:hover{
    color:rgb(0, 0, 0);
}

.sociales{
    border-bottom: solid 1px; 
    text-align: center;
    display: flex;
    justify-content: center;
    
}

.sociales a{
    padding: .6rem;
    font-size: 2.7rem;
    color: rgb(20, 3, 53);
}

.sociales a:first-child{
    color: rgb(37, 211, 102);
}

.sociales a:last-child{
    color: rgb(255, 94, 0);
}

.hero2{
    background-color: blue;
    height: 20rem;
    width: 20rem;
}

.covertura{
    background-image: url(../img/hero.jpg);
    height: 50rem;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
}

.covertura a{
    color: white;
    text-transform: uppercase;
}

.hero{
    background-image: url(../img/hero.jpg);
    height: 50rem;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
}
.hero p{
    color: #fff;
    font-size: 2rem;
}
.boton{
  
    background-color: orangered;
    font-size: 2rem;
    color: white;
    padding: 10px;
    border-radius: 3rem;
}

.boton:hover{
    background-color: black;
    color: white;
    transition: ease-in .3s;
}

.hero h2{
    
    font-size: 2.9rem;
    font-family: 'Raleway', sans-serif;
    z-index: 3;
}

.hero .card{
    z-index: 1;
    border-radius: 2rem;

}

.responsive-map-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.responsive-map-container iframe,   
.responsive-map-container object,  
.responsive-map-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bienvenidos{
    z-index: 1;
    font-size: 1rem;
}

.bienvenidos h3{
    height: 30rem;
}

.hero .card .card-header{
    border-radius: 2rem 2rem 0 0;
    background-color: rgb(20, 3, 53);
  
}


.hero form button{
    background-color: rgb(250, 62, 5);
}
@media(min-width: 768px){

    .hero{
        height: 66rem;
    }
    .hero::after{
        max-height: 66rem;
    }

    .hero h2{
        font-size: 6rem;
        padding: 2rem;
        
    }

}


.servicios{
   
   padding: 3rem;
}

.servicio{
    position: relative;
    margin-top: 5rem;
    border: solid 1px rgb(209, 208, 211);
    padding: 1rem;
}



.servicio .info h3{
  top: -35px;
  border-radius: 5px;
  left: 3px;
  background-color: rgb(250, 62, 5);
  position: absolute;
  font-size: 3rem;
  color: rgb(247, 243, 242);
  padding: 1rem;
}

.info p{
    font-size: 2rem;
}

.servicio ul li{
    text-align: left;
    font-size: 1.5rem;
    line-height: 4rem;
    list-style:circle;
    
}
.servicios .precio{
    border-top: 1px solid rgb(241, 236, 236);
    border-radius: 5px;
    line-height: 1;
   
}

.servicio .precio h3{
    font-size: 5rem;
    font-weight: bold;
    
}

.servicio .precio h3 span{
    font-size: 1.3rem;
    color: rgb(20, 3, 53);
}

.servicios button{
   border: solid 1px rgb(250, 62, 5);
   background-color: rgb(243, 239, 241);
    color: rgb(250, 62, 5);
    font-size: 1.5rem;
}

.inalambrico{
    background-image: url('../img/hero2.jpg');
    height: 50rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

.inalambrico h2{
    background-color: rgb(0, 0, 0,0.7);
    padding: 1.5rem;
    font-size: 1.5rem;
}
h2 span{
    color: rgb(250, 62, 5);
}

@media(min-width: 768px){

    
    .inalambrico h2{
        background-color: rgb(0, 0, 0,0.7);
        padding: 1.5rem;
        font-size: 3.2rem;
    }

}

.informacion{
    margin-top: 10rem;
}


.informacion .icon{
    font-size: 8rem;
    color: orangered;
}

.informacion h3{
 font-weight: bold;
}

.informacion p{
    font-size: 1.3rem;
    color: rgb(148, 149, 150);
}

.informacion a h4{
    color: orangered;
    border: solid 1px;
    padding: 5px;
}
.informacion a h4:hover{
    color: white;
    background-color: black;
   transition: ease .5s;
}

.pagos h3{
    margin-bottom: 3rem;
}

.tipo-pago p{
    font-size: 2rem;
    line-height: 20px;
}

.tipo-pago .cuenta{
    font-weight: bold;
    text-transform: uppercase;
}

.mystyle {
    display: block;
    --webkit-transition: transform 0.3s;
    --ms-transition: transform 0.3s;
    transition: transform 0.3s;
  }
  
  .arriba a {
    font-size: 2rem;
    color: #fff;
  }
  .arriba a:hover {
    color: rgb(54, 54, 53);
  }
  
  .arriba:hover {
    background-color: rgb(170, 170, 166);
  }

  .nav-footer{
  
    padding: 1rem;
  }

  .nav-footer a{
      text-decoration: none;
      font-size: 1.5rem;
      color:rgb(54, 54, 53);
     
    

  }
  

  .nav-footer a li{
     list-style: none;
     padding: 1.5rem;
     text-align: center;
  }

  .nav-footer a li:hover{
    background-color: orangered;
    color: white;
}

.redes-sociales{
    position: fixed;
    background-color: rgb(255, 253, 253);
    padding: 1rem;
    border-radius: 5px;
    bottom: 0;
    right: 0;
    
}

.redes-sociales a{
    font-size: 4rem;
    color: orangered;
}
.redes-sociales a:first-child{
    color: rgb(37, 211, 102);
}

.login{
    background-color: rgba(90, 88, 88, 0.5);
    display: none;
    margin-top: 2rem;
    width: 100%;
    
}

.info-cont p{
    font-size: 1.4rem;
    color: #949090;
}

.info-cont p span{
    font-size: 2.1rem;
    margin-right: 1rem;


}
.info-cont p span a{
    color: orangered;
}
.copry a{
    font-size: 1.5rem;
}
@media(min-width: 768px){

    .login{
        width: 25%;
    }

}