body {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
        width: 100%;
        height: auto;
        margin: 5px;

    }

    h1 {
        font-size: 46px !important;
        line-height: 50px !important;
        font-weight: 200 !important;
    }

    p {
        font-size: 1.25rem;
        color: rgb(63, 63, 63);
    }

    a {
        text-decoration: auto !important;
    }

    a:hover {
        color: #8a8a8a !important;
        text-decoration: auto !important;
    }

    .btn2 {
        padding: 20px;
        background: rgb(255, 255, 255);
        color: #07477A !important;
        border-radius: 65px 15px;
    }

    .btn2:hover {
        padding: 20px;
        background: rgb(255, 255, 255);
        color: #07477A !important;
        border-radius: 65px 15px;
        transition: 1s;
    }


    nav {
        font-size: 23px !important;
    }

    .p-36 {
        padding: 36px;

    }

    .bg-gray {
        background-image: url(../assets/home/Roofing.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-blend-mode: soft-light;
        background-color: rgb(0, 15, 27);
    }


    .nav-item {
        margin-right: 5px;
    }

    .pt-3 {
        padding-top: 15px;
    }

    .sub {
        background: rgb(7 71 122);
        box-shadow: 1px 0px 12px 0px #0000007d;
    }

    .bg-orangered {
        background: #07477A;
    }

    .text-orangered {
        color: #07477A !important;
    }

    span {
        font-size: 16px;
    }

    .bg-slide {
        width: 100%;
        height: 550px;
        background-image: url(../assets/slide.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: repeat-x;
        background-color: rgb(19 20 18);
    }

    #video {
        position: absolute;
        width: 100%;
        height: 550px;
        object-fit: cover;
        object-position: center;
        overflow: hidden;
        z-index: -1;
    }


    .slide-bg-text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding-top: 120px;
        text-align: center;
    }

    .slide-bg-text h1 {
        font-size: 80px;
        line-height: 90px;
        font-weight: 300;
        color: white;
    }

    .slide-bg-text h4 {
        color: white;
    }



    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: space-between !important;
    }


    .h5,
    h5 {
        font-size: 20px !important;
    }

    .poli {
        clip-path: polygon(0 0, 80% 0%, 100% 55%, 0% 400%);
        height: auto;
        background-image: url('../assets/home/home.jpg');
        background-size: cover;
        background-position: center;
    }

    .clip img {
        clip-path: polygon(0 0, 80% 0%, 100% 55%, 0% 400%);
    }



    .poli2 {
        clip-path: polygon(35% -60%, 0% 49%, 100% 390%, 100% 0%);
        height: auto;
        background-image: url('../assets/home/home2.jpg');
        background-size: cover;
        background-position: center;
    }


    .whychoose {
        background-color: rgb(7 71 122);
    }

    /* Swiper estilos base */
    .swiper {
        width: 100%;
    }

    .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }




    .video-section {
        background-color: white;
        position: relative;
        width: 100%;
        /* Ocupa toda la pantalla */
        overflow: hidden;
    }

    .video-container {
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        margin-bottom: -7px;
    }

    .video-container iframe {
        width: 100%;
        height: 82vh;
    }



    .join-our-team-button {
        display: inline-block;
        padding: 15px 35px;
        /* Ajusta el padding para controlar el tamaño del botón */
        background-color: rgb(255, 255, 255);
        /* Color naranja similar al de la imagen */
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        border-radius: 50px 0 0 50px;
        /* Redondeado solo en el lado izquierdo */
        position: relative;
        /* overflow: hidden; */
        /* No lo necesitamos aquí si el contenido no se sale */
        transition: background-color 0.3s ease;
        /* Transición suave al pasar el ratón */
        line-height: 1;
        /* Asegura que el texto esté centrado verticalmente */
        height: 50px;
        /* Altura fija para controlar la forma de la flecha */
        box-sizing: border-box;
        /* Incluye padding en el ancho/alto total */
        display: flex;
        /* Para centrar el texto con flexbox */
        align-items: center;
        /* Centrar verticalmente el texto */
        justify-content: center;
        /* Centrar horizontalmente el texto (inicialmente) */
        padding-right: 70px;
        /* Espacio extra para la flecha */
    }

    .join-our-team-button:hover {

        background-color: rgb(255, 255, 255);

    }



    /* Pseudo-elemento para el contorno exterior de la flecha (la línea blanca más externa) */
    .join-our-team-button::after {
        content: '';
        position: absolute;
        top: -2px;
        /* Ajusta para que la línea quede fuera del botón */
        right: -2px;
        /* Ajusta para que la línea quede fuera del botón */
        width: 64px;
        /* Un poco más grande que el ::before para el contorno */
        height: calc(100% + 4px);
        /* Altura un poco mayor para el contorno vertical */
        background-color: transparent;
        /* Fondo transparente */
        border: 2px solid rgb(0, 0, 0);
        /* El contorno blanco */
        /* Crea la forma de flecha para el contorno */
        clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    }

    .bbb {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .fr li {
        font-size: 18px;
        color: rgb(255, 255, 255);
        padding: 4px;
        text-decoration: none!important;
    }

    .boder {
        text-decoration: none!important;
        padding-top: 25px;
        color: #07477A;
    }


    

    

    

    @media (max-width:1200px) {
        .video-section {
            height: auto;
            /* Altura menor en pantallas pequeñas */


        }

        h1 {
            font-size: 36px !important;
            line-height: 40px !important;
            font-weight: 200 !important;
        }

        .video-container iframe {
            width: 100%;
            height: 44vh;
        }

        .poli {
            height: 450px;
        }

        .poli2 {
            height: 450px;
        }
    }

    @media (max-width: 600px) {

        .bg-slide {
            height: 350px !important;
        }

        .video-container iframe {
            width: 100%;
            height: 40vh;
        }
    }

    @media (max-width: 464px) {

        .video-container iframe {
            width: 100%;
            height: 32vh;
        }

        .mobile {
            display: none;
        }
    }

    @media (max-width: 380px) {

        .video-container iframe {
            width: 100%;
            height: 28vh;
        }

        .mobile {
            display: none;
        }
    }