@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap');

:root{
    --verde:#008000;
    --verde2: #065006;
    --opacidad-negro: 0.5;
    
}

*{
    font-family: 'Raleway', sans-serif!important;
}

nav a.texto-verde{
    color: #fefefe !important;
    font-weight: 500!important;
}

.boton-verde{
    background-color: var(--verde);
    border: none;
}

.boton-verde:hover{
    background-color: var(--verde2);
}
.btn-bar{
    color:#fefefe;
}

header.masthead .masthead-heading{
    font-size: 2rem;
    font-weight: 700!important;
    margin-bottom: 10px;
    line-height: 0.9em;
}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
    color:var(--verde) ;
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: var(--verde2);
    border-color: var(--verde);
    box-shadow: 0 0 0 0.25rem var(--verde2);
}

header.masthead{
    
    background-image: linear-gradient(rgba(0, 0, 0, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/assets/img/header-bg.jpg");
}

.izquierda{
    text-align: left;
}

hr {
    opacity: 1;
    background-color: var(--verde);
    height: 10px!important;
    
}

.carousel{
    max-width: 500px;
}


.abajo{
    margin-bottom: 50px;
}

.byn{
    filter: grayscale(100%);
    
}

#services img{
    max-width: 128px;
}

#services{
    background-image: url("/assets/img/servicios/fondo.jpg");
    color: #fefefe;
}

section#contact {   
    background-image: linear-gradient(rgba(0, 0, 0, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("/assets/img/contacto/fondo.jpg");
    background-position: top;
    backdrop-filter: url(../assets/img/contacto/fondo.jpg) blur(4px);
}

.derecha{
    text-align: end;
}

.blanco{
    color:#fefefe
}

 @media (min-width: 768px) {
        
        header.masthead .masthead-heading{
        font-size: 3rem;
        } 

        hr{
            width:100%;
        }
              
        #line2{
            align-items: center;
            
        }

        #line3{
            width: 100%;
            align-items: center;
        }
   }

   a {
    color: #fefefe;
    font-weight: bold;
    text-decoration: none;
}
a:hover{
    color: var(--verde);
}


@media (min-width: 992px) { 
        
}

@media (min-width: 1200px) { 
    header.masthead .masthead-heading{
        font-size: 4.8rem;
    }       
}