.text-justify {
    text-align: justify;
}

.read-more {
    color: #777777;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
}

.read-more::after {
    content: '\f138';
    display: inline-block;
    font-family: 'bootstrap-icons';
    font-size: 1.2rem;
    margin-left: 10px;
    transform: translateY(5px);
    font-weight: 600;
}

.red-tie {
    width: 340px;
}
.bg-oxford-gary {
    background-color: #2e2e2e;
}

.bg-theme-gray {
    background-color: #ebeff3;
}

.main-header {
    margin-top: 40px;
}

.main-header .logo {
    z-index: 22;
    margin-left: 54px;
    margin-top: 18px;
}

.main-header .logo img {
    width: 170px;
    height: auto;
}

.main-header a {
    color: #979797;
    text-decoration: none;
}

.main-menu ul li a {
    padding: 30px 10px;
}

.main-menu ul li a.active {
    background-color: #221f20;
    color: #fff;
}

.video-wrapper {
    min-height: 660px;
    height: 100vh;
}

.video-wrapper video {
        position: absolute;
        top: 0;
        left: 50%;
        min-width: 100%;
        min-height: 100vh;
        width: 100%;
        height: 100vh;
        z-index: -2;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        object-fit: cover;
        margin-left: -1px;
}

.bg-main-footer {
    background-image: url(../media/bg-footer.png);
    background-size: cover;
}

.sevices-list ul {
    list-style: none; /* Elimina la viñeta predeterminada */
    padding-left: 0; /* Asegura que el padding inicial sea 0 */
}

.sevices-list ul li {
    position: relative; /* Necesario para posicionar la imagen ::before */
    padding-left: 125px; /* Aumenta este padding para dar espacio a tu imagen de 40px + un margen */
    margin-bottom: 50px; /* Espacio entre los elementos de la lista para mayor claridad */
    /* Asegúrate de que tu texto dentro del li no se solape con la imagen */
}

.sevices-list ul li::before {
    content: ''; /* Obligatorio para que ::before funcione */
    display: block; /* O 'inline-block'. 'block' puede darte más control sobre el posicionamiento si la imagen es el único contenido. */
    width: 110px; /* Aquí es donde controlas el ANCHO de tu imagen */
    height: 110px; /* Aquí es donde controlas el ALTO de tu imagen */
    background-image: none; /* ¡La ruta a tu imagen para la viñeta! */
    background-size: contain; /* O 'cover'. 'contain' asegura que la imagen se vea completa dentro de 40x40px. */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center left; /* Alinea la imagen a la izquierda y centrada verticalmente */
    position: absolute; /* Posiciona la imagen con respecto al <li> */
    left: 12px; /* Coloca la imagen en el borde izquierdo del padding-left del li */
    top: 0; /* Intenta centrar la imagen verticalmente con respecto al <li> */
    transform: translateY(0%); /* Ajuste fino para el centrado vertical */
}

.sevices-list li.service-item-01::before {
    background-image: url(../media/icon-001.png);
} 

.sevices-list li.service-item-02::before {
    background-image: url(../media/icon-002.png);
}

.sevices-list li.service-item-03::before {
    background-image: url(../media/icon-003.png);
}

.sevices-list li.service-item-04::before {
    background-image: url(../media/icon-004.png);
}

footer {
    color: #777777;
}

footer ul {
    padding-left: 0;
    min-width: 160px;
}

footer ul li {
    list-style: none; /* Elimina la viñeta predeterminada */
    line-height: 2.3rem;
}

footer ul li a {
    color: #777777;
    text-decoration: none;
}

footer a {
    color: #777777;
    text-decoration: none;
}

.offcanvas-navigation ul {
    padding-left: 15px;
    min-width: 160px;
}

.offcanvas-navigation ul li {
    list-style: none; /* Elimina la viñeta predeterminada */
    line-height: 2.3rem;
}

.offcanvas-navigation ul li a {
    color: #777777;
    text-decoration: none;
}

.offcanvas-navigation ul li ul {
    padding-left: 15px;
    min-width: 160px;
}

.offcanvas-navigation ul li ul li {
    list-style: none; /* Elimina la viñeta predeterminada */
    line-height: 2.3rem;
}

.services-list li {
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.services-list li a {
    text-decoration: none;
    color: #777777;
}

@media (max-width: 768px) {
    .video-wrapper video {
        min-width: 100vw;
        min-height: 100vh;
        width: 100vw;
        height: 100vh;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 576px) {
    .main-header .logo {
        margin-left: 0px;
    }

    .red-tie {
        width: 340px;
        transform: translateX(-40px);
    }

    .sevices-list ul li {
        position: relative; /* Necesario para posicionar la imagen ::before */
        padding-left: 85px; /* Aumenta este padding para dar espacio a tu imagen de 40px + un margen */
        margin-bottom: 50px; /* Espacio entre los elementos de la lista para mayor claridad */
        /* Asegúrate de que tu texto dentro del li no se solape con la imagen */
    }

    .sevices-list ul li::before {
        width: 80px; /* Aquí es donde controlas el ANCHO de tu imagen */
        height: 80px; /* Aquí es donde controlas el ALTO de tu imagen */
        left: 0; /* Coloca la imagen en el borde izquierdo del padding-left del li */
        top: 0; /* Intenta centrar la imagen verticalmente con respecto al <li> */
        transform: translateY(0%); /* Ajuste fino para el centrado vertical */
    }
}