/* fonts */

@font-face {
    font-family: 'Lora';
    src: url(../fonts/Lora-Regular.ttf);
}

@font-face {
    font-family: 'Lora Bold';
    src: url(../fonts/Lora-Bold.ttf);
}

@font-face {
    font-family: 'Lora Italic';
    src: url(../fonts/Lora-Italic.ttf);
}

@font-face {
    font-family: 'Lora Semi Bold';
    src: url(../fonts/Lora-SemiBold.ttf);
}

.lora{
    font-family: 'Lora';
}

.lora_semibold{
    font-family: 'Lora Semi Bold';
}

.lora_bold{
    font-family: 'Lora Bold';
}

.lora_italic{
    font-family: 'Lora Italic';
}

/* colors */

.bg_blue{
    background-color: #0f4c5c !important;
}

.bg_orange{
    background-color: #DCB233 !important;
}

/* btn */

.btn_orange{
    background-color: #DCB233;
    border: 1px solid #DCB233;
    color: #000000;
    font-family: 'Lora Semi Bold';
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 18px;
    text-decoration: none;
    transition: 0.3s;
}

.btn_orange:hover, .btn_orange:active, .btn_orange:focus{
    background-color: #b49129;
    border: 1px solid #b49129;
    color: #000000;
    font-family: 'Lora Semi Bold';
    transition: 0.3s;
}

/* text color */

.text-black{
    color: #000000;
}

/* custom classes */

.border_radius_none{
    border-radius: 0 !important;
}

/* btn */

.btn{
    border-radius: 0%;
}

/* general */

body{
    font-family: 'Lora';
}

/* dropdown */

.dropdown-menu{
    border-radius: 0%;
}

/* offcanvas */

.offcanvas{
    max-width: 100vw !important;
}

/* home */

#home_hero{
    background: url(../img/home_wp.png);
    background-position: center;
    background-size: cover;
}

#home_parquet{
    background: url(../img/parquet.png);
    background-position: center;
    background-size: cover;
    filter: brightness(70%);
}

#home_paint{
    background: url(../img/inside_paint.png);
    background-position: center;
    background-size: cover;
    /* filter: brightness(70%); */
}

#home_water_damage{
    background: url(../img/water_damage.png);
    background-position: center;
    background-size: cover;
    /* filter: brightness(70%); */
}

#home_me_img{
    width: 18rem;
}

.grid-item {
    margin-bottom: 10px;
}

.home_article_grid_container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 3rem;
    justify-content: center;
}

.home_article_card{
    border: none;
    border-radius: 0 !important;
}

.home_article_img{
    border-radius: 0 !important;
}

.home_text_align_right_link{
    display: inline-block;
    width: 100%;
    text-align: right;
}

.home_galery_image{
    width: 24rem;
}

/* inside paint */

#inside_paint_hero{
    background: url(../img/inside_paint.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 7%;
    padding-bottom: 7%;
}

.inside_paint_article_grid_container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    justify-content: center;
}

/* wooden floor */

#wooden_floor_hero{
    background: url(../img/wooden_floor/hero.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 7%;
    padding-bottom: 7%;
}

/* wall paint article */

#wall_paint_hero{
    background: url(../img/thumbnail/mur_blanc.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* remove wallpaper article */

#remove_wallpaper_hero{
    background: url(../img/thumbnail/detapisser-papier-peint.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* water damage article */

#water_damage_hero{
    background: url(../img/thumbnail/degat_des_eaux.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* contact */

#contact_hero{
    background: url(../img/home_wp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 7%;
    padding-bottom: 7%;
}

/* Google captcha badge */

.grecaptcha-badge { 
    visibility: hidden !important;
}


/* media queries */

/* 768px */

@media screen and (max-width: 768px){ 
    .contact_alert{
        position: absolute;
        top: 200px;
        left: 50%;
        transform: translate(-50%);
    }

    #top_infos_desktop{
        display: none;
    }

    #top_infos_mobile{
        display: block;
    }

    #home_hero{
        height: calc(65vh - 110px);
    }

    .home_card{
        width: 100%;
        text-align: center;
    }

    .service_description{
        display: block;
    }

    #home_carousel{
        display: none;
    }
}

@media screen and (min-width: 768px){ 
    .contact_alert{
        position: absolute;
        top: 200px;
        right: 10px;
    }

    #top_infos_desktop{
        display: block;
    }

    #top_infos_mobile{
        display: none;
    }

    #home_hero{
        height: calc(100vh - 110px);
    }

    .service_description{
        display: none;
    }

    #home_carousel{
        display: block;
    }
}

/* 992px */

@media screen and (max-width: 992px){ 

    #navbar_logo{
        width: 70px;
    }
    
    #who_we_are_mobile{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #who_we_are_desktop{
        display: none;
    }
}

@media screen and (min-width: 992px){ 

    #navbar_logo{
        width: 100px;
    }

    #who_we_are{
        margin-top: 125px;
    }

    #who_we_are_mobile{
        display: none;
    }

    #who_we_are_desktop{
        display: flex;
        align-items: start;
    }
}
