﻿body {
    font-family: "Montserrat", sans-serif;
}

.barra-nav {
    border-bottom: 5px solid #f9a11b;
    background-image: -webkit-linear-gradient(0deg, #66b2ae 80%, #007c7b 100%);
    width: 100%;
    height: 35px;
}

.navbar {
    padding: 15px 80px;
}

    .navbar .navbar-brand img {
        width: 200px;
        padding-right: 30px;
    }

    .navbar .navbar-nav {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .navbar .btnVitroCalc {
        background: #0a5a7d;
        background: linear-gradient(90deg, #0a5a7d 50%, #1590a1 100%);
        border-radius: 30px;
        border: none;
        font-weight: bold;
        margin-right: 15px;
        font-size: 0.8rem;
    }

    .navbar .btnVitroSolarTest {
        background: rgb(217,134,61);
        background: linear-gradient(90deg, rgba(217,134,61,1) 33%, rgba(253,168,90,1) 66%);
        border-radius: 30px;
        border: none;
        font-weight: bold;
        margin-right: 15px;
        color: white;
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    .navbar .navbar-nav .nav-item {
        display: flex;
        align-items: center;
        text-align: center;
        margin-right: 5px;
    }

        .navbar .navbar-nav .nav-item a {
            color: #007c7a;
            font-weight: 700;
            font-size: 0.8rem;
        }

            .navbar .navbar-nav .nav-item a:hover {
                color: #f9a11b;
            }

    .navbar .btn-contacto {
        font-weight: 700;
        border-color: #13aeab;
        background-color: #13aeab;
        font-size: 0.9rem;
        border-radius: 35px;
        letter-spacing: 1px;
    }

section .titulo {
    color: #13aeab;
    margin-bottom: 3rem;
}

section .titulo-imagen {
    font-weight: 700;
    margin: 10px 0;
    color: #f78f20;
}

#top h1 {
    font-size: 2.7rem;
    font-weight: 700;
}

#top p {
    font-size: 2rem;
}

#top button {
    background-color: #ffc000;
    border-color: #ffc000;
    border-radius: 35px;
    padding: 5px 25px;
    margin-bottom: 15px;
}

#top .carousel-indicators {
    justify-content: start;
}

#top #grad1 {
    position: absolute;
    top: 30%;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to bottom, rgba(79, 155, 155, 0), #4f9b9b);
}

#queHayNuevo {
    padding: 45px 0;
}

    #queHayNuevo .div-imagen {
        box-shadow: 4px 5px 13px 0px #00000038;
        height: 100%;
    }

    #queHayNuevo img {
        width: 100%;
    }

#correo {
    background-image: url("../Media/img/img-mail.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    padding: 85px 0;
}

    #correo .padding-correo {
        padding-left: 85px;
    }

    #correo .input-correo {
        background-color: transparent;
        border: 5px solid white;
        border-top-left-radius: 35px;
        border-bottom-left-radius: 35px;
        height: auto;
        color: white;
    }

        #correo .input-correo::placeholder {
            color: white;
        }

    #correo .btn-correo {
        background-color: white;
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px;
        border: 5px solid white;
        border-left: 0;
        padding: 5px 10px;
        font-weight: 700;
        color: #0a8a8a;
    }

#nuestrosProductos {
    padding: 45px 0;
}

    #nuestrosProductos .div-imagen {
        position: relative;
        display: inline-block;
    }

        #nuestrosProductos .div-imagen .nombre {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: none;
        }

            #nuestrosProductos .div-imagen .nombre .color-azul {
                width: 100%;
                height: 100%;
                background-color: gray;
                transition: ease-in-out 0.3s;
                opacity: 0.5;
            }

            #nuestrosProductos .div-imagen .nombre .nombre-p {
                position: absolute;
                top: 50%;
                left: 0;
                color: white;
                transform: translate(0, -50%);
                width: 100%;
            }

            #nuestrosProductos .div-imagen .nombre p {
                font-size: 1rem;
                font-weight: 700;
            }

            #nuestrosProductos .div-imagen .nombre:hover .color-azul {
                background-color: #24a4a1;
            }

        #nuestrosProductos .div-imagen img {
            max-width: 100%;
        }

#cuentanosMas {
    padding: 45px 0;
    background-image: url("../Media/img/fondo-footer.jpg");
}

    #cuentanosMas .tienesProyectoBox {
        display: inline-block;
        background-color: white;
        padding: 15px 55px;
        border-radius: 65px;
        box-shadow: 4px 5px 13px 0px #00000038;
    }

    #cuentanosMas button {
        background-color: #0a8a8a;
        border-color: #0a8a8a;
        border-radius: 35px;
        padding: 5px 25px;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }

footer {
    color: white;
    font-size: 0.9rem;
}

    footer .redes a {
        color: #6dbcb8;
        transition: ease-in-out 0.3s;
        margin-left: 5px;
    }

        footer .redes a:hover {
            color: white;
        }

    footer a {
        color: white;
        transition: ease-in-out 0.3s;
    }

        footer a:hover {
            color: white;
        }

.navbar-light .navbar-nav .active > .nav-link {
    color: #007c7a;
    text-decoration: underline;
    text-decoration-color: #f9a11b;
    text-decoration-thickness: 3px;
}

.carousel-indicators li {
    height: 15px;
    width: 15px;
    border-radius: 35px;
    border-top: transparent;
    border-bottom: transparent;
}

    .carousel-indicators li.active {
        background-color: #13aeab;
    }

.carousel-caption {
    bottom: 180px;
    left: 100px;
}

.carousel-indicators {
    bottom: 155px;
    margin-left: 100px;
}

@media (max-width: 1500px) {
    #correo h3 {
        font-size: 2rem;
    }

    #correo p {
        font-size: 1.2rem;
    }

    #correo .input-correo::placeholder {
        font-size: 1.5rem;
    }

    #correo .btn-correo {
        font-size: 1.5rem;
    }

    .carousel-caption {
        bottom: 50px;
    }

    .carousel-indicators {
        bottom: 30px;
    }
}

@media (max-width: 1350px) {
    .new-vitromart-menu {
        position: relative !important;
    }

    .navbar {
        padding: 15px;
    }

        .navbar .navbar-brand img {
            padding: 0;
            max-width: 180px;
        }



        .navbar .navbar-nav .nav-item a {
            font-size: 0.8rem;
        }

    #top h1 {
        font-size: 2rem;
    }

    #top p {
        font-size: 1rem;
    }

    #top button {
        font-size: 0.9rem;
    }

    section .titulo-imagen {
        font-size: 1.5rem;
    }

    #correo h3 {
        font-size: 2rem;
    }

    #correo p {
        font-size: 1.2rem;
    }

    #correo .input-correo::placeholder {
        font-size: 1rem;
    }

    #correo .btn-correo {
        font-size: 1rem;
    }
}

@media (min-width: 1350px) {
    #nuestrosProductos {
        padding: 155px 0;
    }
}

@media (max-width: 922px) {

    #nuestrosProductos .div-imagen .nombre p {
        font-size: 0.8rem;
    }
}

@media (max-width: 767px) {
    #nuestrosProductos .div-imagen .nombre p {
        font-size: 1rem;
    }

    #correo {
        text-align: center;
    }

        #correo h3 {
            font-size: 2rem;
        }

        #correo p {
            font-size: 1.2rem;
        }

        #correo .input-correo::placeholder {
            font-size: 1.5rem;
        }

        #correo .btn-correo {
            font-size: 1.5rem;
        }

        #correo .padding-correo {
            padding-left: 0px;
        }

    #top .carousel-caption {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        padding: 35px 35px 45px;
        background-color: #007c7a;
        text-align: center !important;
    }

    #top .carousel-indicators {
        justify-content: center;
        bottom: 0px;
    }

    #top button {
        margin-bottom: 0;
    }

    .navbar .nav-item .nav-link {
        text-align: left;
    }

    #productos {
        padding: 1rem !important;
    }

    .carousel-indicators {
        margin-left: 15%;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 920px;
    }
}

@media (max-width: 576px) {
    .navbar {
        justify-content: center;
    }

        .navbar .navbar-brand img {
            width: 145px;
            padding-right: 10px;
        }
}
