html {
    background-color: #f4f4f4;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: white;
}

.outer-div {
    margin: 0 !important;
    padding: 0 !important;
}

/* header */
header {
    background-color: #f4f4f4;
}

.header {
    height: 100px;
}

/* content */
.nosotros {
    background-color: #23357d;
}

/* icons */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2323357d' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E");
}

.navbar-toggler-icon:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='grey' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E");
}

.nav-button .svg {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='50px' height='50px' viewBox='0,0,256,256'%3E%3Cg fill='%2323357d' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'%3E%3Cg transform='scale(5.12,5.12)'%3E%3Cpath d='M25,1c-8.82031,0 -16,7.17969 -16,16c0,14.11328 14.62891,30.94531 15.25,31.65625c0.19141,0.21875 0.46094,0.34375 0.75,0.34375c0.30859,-0.01953 0.55859,-0.125 0.75,-0.34375c0.62109,-0.72266 15.25,-17.84375 15.25,-31.65625c0,-8.82031 -7.17969,-16 -16,-16zM25,12c3.3125,0 6,2.6875 6,6c0,3.3125 -2.6875,6 -6,6c-3.3125,0 -6,-2.6875 -6,-6c0,-3.3125 2.6875,-6 6,-6z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.nav-button:hover .svg {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='50px' height='50px' viewBox='0,0,256,256'%3E%3Cg fill='grey' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'%3E%3Cg transform='scale(5.12,5.12)'%3E%3Cpath d='M25,1c-8.82031,0 -16,7.17969 -16,16c0,14.11328 14.62891,30.94531 15.25,31.65625c0.19141,0.21875 0.46094,0.34375 0.75,0.34375c0.30859,-0.01953 0.55859,-0.125 0.75,-0.34375c0.62109,-0.72266 15.25,-17.84375 15.25,-31.65625c0,-8.82031 -7.17969,-16 -16,-16zM25,12c3.3125,0 6,2.6875 6,6c0,3.3125 -2.6875,6 -6,6c-3.3125,0 -6,-2.6875 -6,-6c0,-3.3125 2.6875,-6 6,-6z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* navbar */
.navbar {
    background-color: #f4f4f4 !important;
}

.nav-button {
    color: #23357d !important;
    font-weight: 700;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.nav-button:hover {
    transform: translateY(-3px);
    color: grey !important;
}

.rounded-pill {
    font-weight: 700;
    font-size: 18px;
    border: none;
    background-color: #23357d !important;
}

.rounded-pill:hover {
    background-color: grey !important;
}

/* video */
.video
{
    width: 100%;
    height: 100%;
}

.video video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* footer */
footer {
    background-color: #f4f4f4 !important;
}

.footer {
    justify-content: space-between;
}

.footer-header {
    display: flex;
    height: 50px;
}

.footer-title {
    color: #23357d;
    font-weight: 700;
    font-size: 18px;
}

.footer-subtitle {
    color: grey;
    font-weight: 500;
    font-size: 16px;
}

.copyright {
    color: grey;
}

/* distribuidor */
.distribuidor img {
    filter: grayscale(1);
    width: 150px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.distribuidor img:hover {
    filter: grayscale(0);
}

.content-image {
    width: 400px;
    height: auto;
}

.content-title {
    font-size: 40px;
    font-weight: 800;
    color: #23357d;
}

.content-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: grey;
}