.elementor-2271 .elementor-element.elementor-element-4078011{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2271 .elementor-element.elementor-element-8a6ba3f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}body.elementor-page-2271{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-36dad59 *//* IMPORT FONTS */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;600;700&display=swap');

.fbm-hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    background:
        radial-gradient(circle at center,
        #00336f 0%,
        #001e4d 45%,
        #000b1d 100%);
}

/* =========================
   BACKGROUND TEXT UPDATED
========================= */

.fbm-bg-text{
    position:absolute;
    font-family:'Anton',sans-serif;
    color:rgba(255,255,255,.055);
    line-height:1;
    user-select:none;
    pointer-events:none;
    z-index:1;
    white-space:nowrap;
}

/* FBM */

.fbm-top{
    top:-90px;
    left:50%;
    transform:translateX(-50%);
font-family: 'League Spartan', sans-serif;
font-weight: 900;
    font-size:30vw;
    letter-spacing:-35px;
}

/* ROOFING */

.fbm-bottom{
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
font-family: 'League Spartan', sans-serif;
font-weight: 900;
    font-size:20vw;
    letter-spacing:-8px;
}

/* TABLET */

@media (max-width:1024px){

    .fbm-top{
        top:-15px;
        font-size:38vw;
        letter-spacing:-15px;
        transform:translateX(-50%) scaleX(1.25);
    }

    .fbm-bottom{
        bottom:-15px;
        font-size:20vw;
        letter-spacing:14px;
        transform:translateX(-50%) scaleX(1.15);
    }
}

/* MOBILE */

@media (max-width:767px){

    .fbm-top{
        top:0;
        font-size:42vw;
        letter-spacing:-8px;
        transform:translateX(-50%) scaleX(1.08);
    }

    .fbm-bottom{
        bottom:0;
        font-size:24vw;
        letter-spacing:6px;
        transform:translateX(-50%) scaleX(1.05);
    }
}
/* DIAGONAL LINES */
.fbm-lines{
    position:absolute;
    inset:0;
    z-index:2;
    overflow:hidden;
}

.fbm-lines::before{
    content:'';
    position:absolute;
    left:-15%;
    right:-15%;
    top:50%;
    height:320px;
    transform:translateY(-50%);
    background:
        repeating-linear-gradient(
        -38deg,
        rgba(255,255,255,.12) 0,
        rgba(255,255,255,.12) 2px,
        transparent 2px,
        transparent 16px
    );
    opacity:.22;
}

/* CENTER WRAPPER */
.fbm-center{
    position:relative;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(1600px,95%);
}

/* RIBBONS */
.fbm-ribbon{
    position:relative;
    flex:1;
    height:120px;
    background:#0B2849
;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.35s ease;
    overflow:hidden;
}

.fbm-ribbon span{
    font-family:'Oswald',sans-serif;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.5px;
    font-size:clamp(24px,2vw,48px);
    font-weight:600;
    z-index:2;
}

/* LEFT RIBBON */
.fbm-left{
    clip-path:polygon(
        0 0,
        100% 0,
        95% 100%,
        8% 100%
    );
}

.fbm-left::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:65px;
    height:100%;
    background:#fff;
    clip-path:polygon(
        0 0,
        100% 0,
        70% 100%,
        0 100%
    );
}

/* RIGHT RIBBON */
.fbm-right{
    clip-path:polygon(
        5% 0,
        100% 0,
        92% 100%,
        0 100%
    );
}

.fbm-right::before{
    content:'';
    position:absolute;
    right:0;
    top:0;
    width:65px;
    height:100%;
    background:#fff;
    clip-path:polygon(
        30% 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

/* LOGO */
.fbm-logo-wrap{
    position:relative;
    z-index:20;
    margin:0 -35px;
}

.fbm-logo-circle{
    width:380px;
    height:380px;
    background:#fff;
    border-radius:50%;
    border:8px solid#7D8792;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 0 30px rgba(255,86,0,.45),
        0 18px 40px rgba(0,0,0,.45);
    animation:fbmFloat 5s ease-in-out infinite;
    transition:.35s ease;
}

.fbm-logo-circle img{
    width:72%;
    height:auto;
}

/* CONNECTOR LINES */
.fbm-logo-wrap::before,
.fbm-logo-wrap::after{
    content:'';
    position:absolute;
    top:50%;
    width:130px;
    height:2px;
    background:#ff5600;
    z-index:-1;
}

.fbm-logo-wrap::before{
    right:100%;
    transform:rotate(-18deg);
    transform-origin:right center;
}

.fbm-logo-wrap::after{
    left:100%;
    transform:rotate(18deg);
    transform-origin:left center;
}

/* HOVER */
.fbm-ribbon:hover{
    transform:translateY(-10px) scale(1.04);
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.fbm-logo-circle:hover{
    transform:translateY(-12px) scale(1.05);
    box-shadow:
        0 0 55px rgba(255,86,0,.75),
        0 25px 60px rgba(0,0,0,.5);
}

/* FLOAT */
@keyframes fbmFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

/* TABLET */
@media (max-width:1024px){

    .fbm-center{
        flex-direction:column;
        gap:25px;
    }

    .fbm-logo-wrap{
        order:2;
        margin:0;
    }

    .fbm-left{
        order:1;
    }

    .fbm-right{
        order:3;
    }

    .fbm-ribbon{
        width:90%;
        flex:none;
        height:90px;
    }

    .fbm-logo-circle{
        width:260px;
        height:260px;
    }

    .fbm-logo-wrap::before,
    .fbm-logo-wrap::after{
        display:none;
    }
}

/* MOBILE */
@media (max-width:767px){

    .fbm-top{
        font-size:28vw;
    }

    .fbm-bottom{
        font-size:22vw;
    }

    .fbm-ribbon span{
        font-size:22px;
    }

    .fbm-logo-circle{
        width:220px;
        height:220px;
        border-width:6px;
    }

    .fbm-ribbon{
        height:80px;
    }
}/* End custom CSS */