* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.1rem;
    font-weight:300;
   
}

html {
  scroll-padding-top: 5rem;
}

h1{font-weight:200;
    font-size: 3rem;
}

h2{font-weight:200;
    font-size: 3rem;
    
}
h3 {font-weight:200;
    font-size: 2.2rem;
    color:#007bff;
}

h4{
    font-weight: 200;
    color:#007bff;
}

/* -----------------  ICONO VISTO  --------------------: */
h4:before{ 

    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='dodgerblue' class='bi bi-check-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") no-repeat center center;
  
}

/* -----------------  ENCABEZADO  --------------------: */  

 /*header{
    position:relative;
    height: 125px;
    border-bottom: 3px solid black;
    background-color: whitesmoke;
}
header img{
    max-height: 125
    
}*/
/*header h1 {
    font-size: 60px;
    margin-bottom: 0;
    text-shadow: 2px 2px #000;
}*/

/* Forma recomendada de poner el logo y que el buscador lea el nombre de la empresa: 

#logo{
    background-image: url("../imagenes/Ranquel_Technologies_logo.png");
    background-repeat: no-repeat;
    width: 208px;
    height: 89px;
    font-size: 0px;
    position: absolute;
    top: 1rem;
    left: 2rem;
    z-index: 1;


@media screen and (max-width: 991px){
    #logo {
        left: calc(50% - (208px/2));
    }
}}*/

/* -----------------BARRA DE NAV--------------------: */

nav ul li{
    font-size: 1.1rem;
    font-weight: 400;
}
  
@media screen and (max-width: 991px) {
    .navbar-brand{
    left: calc(50% - (208px/2));
    }
}

a{
    font-style: normal;
    /*font-variant: small-caps;*/
  }
  /*<!--a:visited{
      color:grey;
  }
-->*/
/* -----------------  BANNER  --------------------: */

#banner {
    height: 550px;
    background-image: url("../images/ranquel-office.webp");
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    background-position: center center;
    
    }

@media (max-width: 768px) {
    #banner {
        background-image: url("../images/ranquel-office-770px.webp");
        background-position: center center;
    }
}
#banner-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
#banner h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #fff;
    font-weight: lighter;
    font-size: 2rem;
    margin: 0;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px #000;
}

/* -----------------  FOTO 1  --------------------: */

#foto1 {
    height: 300px;
    background-image: url("../images/encryption.jpg");
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    background-position: center center;

    }

#foto1-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
#foto1 h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #fff;
    font-weight: lighter;
    font-size: 2rem;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px #000;
}

/* -----------------  CLIENTES  --------------------: */

#clients .card {
    background-color: #e0f0f4;
}
#clients ul{
    list-style-type:square;
    line-height: 2.5rem;
}

/* -----------------  CARDS  --------------------: */

.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.8s;
border-radius: 5px;
}

.card:hover {
box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2);
}

.card-img-top {
height: 300px;
object-fit: cover;
}

.card-title {
font-size: 1.5rem;
margin-top: 1rem;
font-weight: 300;
}

.card-text {
font-size: 1.1rem;
font-weight: 200;
margin-bottom: 1rem;
}

.btn-primary {
background-color: #007bff;
border-color: #007bff;
font-size: 1.2rem;
padding: 0.5rem 1.5rem;
}

.btn-primary:hover {
background-color: #0069d9;
border-color: #0062cc;
}

/* -----------------  FOTO 2  --------------------: */

#foto2 {
    height: 300px;
    background-image: url("../images/software-development.webp");
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    background-position: center center;

    }

#foto2-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
#foto2 h3 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #fff;
    font-weight: lighter;
    font-size: 2rem;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px #000;
}

/* -----------------  FOTO 3  --------------------: */

#foto3 {
    height: 300px;
    background-image: url("../images/programming.webp");
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    background-position: center center;

    }

#foto3-overlay {
    background-color: barg(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
#foto3 h3 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #fff;
    font-weight: lighter;
    font-size: 2rem;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px #000;
}

/* -----------------  FOTO 4  --------------------: */

#foto4 {
    height: 300px;
    background-image: url("../images/program-software.webp");
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    background-position: center center;

    }

#foto4-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
#foto4 h3 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #fff;
    font-weight: lighter;
    font-size: 2rem;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px #000;
}

/* -----------------  CONTACTO  --------------------: */
#contact{
    border-top: 5px solid rgb(212, 212, 212) ;
}

#contact p{
    font-weight: 300;
}

/* -----------------  FOOTER  --------------------: */

footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    }

    footer a {
        color: white;

    }
    footer a:hover {
    color: skyblue;
}
footer li a:hover svg {
    fill: whitesmoke;
  }