/*
Theme Name: Divi Hubert Bricole
Theme URI: https://hubert-bricole.fr
Description: Theme enfant Divi pour Hubert Bricole
Author: Hubert
Template: Divi
Version: 1.0
*/

:root{
    --hb-yellow:#FDB008;
    --hb-black:#0A0A0A;
    --hb-dark:#1A1A1A;
    --hb-light:#F5F5F5;
}

/* TYPO */

body{
    font-family:'Open Sans',sans-serif;
    color:#222;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    text-transform:uppercase;
}

/* HEADER */

#main-header{
    background:#0A0A0A!important;
    box-shadow:none;
}

#top-menu li a{
    color:white!important;
    font-weight:600;
}

#top-menu li.current-menu-item a{
    color:var(--hb-yellow)!important;
}

/* BOUTONS */

.et_pb_button{
    background:var(--hb-yellow);
    color:black!important;
    border:none!important;
    border-radius:8px;
    font-weight:700;
    text-transform:uppercase;
    transition:all .3s ease;
}

.et_pb_button:hover{
    transform:translateY(-3px);
    background:#ffca3a!important;
}

/* HERO */

.hero-hubert{
    min-height:75vh;
    display:flex;
    align-items:center;
    position:relative;
}

.hero-hubert::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.hero-content{
    position:relative;
    z-index:2;
}

.hero-title{
    font-size:72px;
    color:white;
    line-height:1;
}

.hero-title span{
    color:var(--hb-yellow);
}

/* TITRES BRUSH */

.hb-title{
    display:inline-block;
    position:relative;
    z-index:1;
}

.hb-title::after{
    content:'';
    position:absolute;
    left:-15px;
    right:-15px;
    bottom:6px;
    height:16px;
    background:var(--hb-yellow);
    z-index:-1;
    transform:rotate(-1deg);
}

/* CARTES */

.hb-card{
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.hb-card:hover{
    transform:translateY(-8px);
}

/* SECTIONS */

.hb-dark{
    background:#111;
    color:white;
}

.hb-dark h2{
    color:var(--hb-yellow);
}

/* FOOTER */

#main-footer{
    background:#111;
}

#footer-bottom{
    background:#000;
}

/* MOBILE */

@media(max-width:980px){

.hero-title{
    font-size:42px;
}

}