/* ==========================================================
L'HABITAT IMMOBILIER
Bootstrap 4 - Desktop First
========================================================== */

.main{

    --primary:#F36F23;
    --primary-light:#FFF4EE;

    --dark:#1F2937;
    --text:#606C80;
    --border:#ECECEC;

    --radius:18px;
    --shadow:
            0 2px 5px rgba(0,0,0,.04),
            0 18px 40px rgba(0,0,0,.06);

    padding:70px 0;
}

/***************************************************
TYPOGRAPHIE
****************************************************/

.main h1,
.main h2,
.main h3,
.main h4{

    color:var(--dark);
    font-weight:700;
    line-height:1.25;

}

.main h1{

    font-size:42px;
    margin-bottom:25px;

}

.main h2{

    font-size:34px;
    margin-bottom:20px;

}

.main h3{

    font-size:22px;
    margin-bottom:18px;

}

.main p{

    color:var(--text);
    line-height:1.9;
    font-size:16px;

}

/***************************************************
TAG
****************************************************/

.section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(243,111,35,.10);

    color:var(--primary);

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:600;

}

/***************************************************
SECTIONS
****************************************************/

.section-block{

    margin-top:90px;

}

.section-header{

    margin-bottom:45px;

}

.section-header.text-center{

    text-align:center;

}

/***************************************************
CARDS
****************************************************/

.card-premium{

    background:#FFF;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:40px;

    box-shadow:var(--shadow);

    transition:.30s;

    position:relative;

    overflow:hidden;

}

.card-premium:hover{

    transform:translateY(-5px);

    box-shadow:
            0 8px 25px rgba(0,0,0,.08),
            0 25px 50px rgba(0,0,0,.08);

}

.card-premium::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--primary);

}

/***************************************************
HERO
****************************************************/

.hero{

    margin-bottom:80px;

}

.hero-image{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.hero-card{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    height: fit-content;

}

.hero .btn-orange {
    width: fit-content;
}

/***************************************************
SERVICES
****************************************************/

.section-services {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    gap: 10px;
}

.w-33 {
    width:33.33%;
}

.service-card{
    height:100%;

}

.service-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    background:rgba(243,111,35,.10);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    margin-bottom:25px;

}

.service-card h3{

    min-height:55px;

}

/***************************************************
CHECKLIST
****************************************************/

.why-us {
    display:flex;
    gap : 10px;
}
.check-list{

    list-style:none;

    padding:0;

    margin:30px 0 0;

}

.check-list li{

    position:relative;

    padding-left:35px;

    margin-bottom:18px;

    color:var(--text);

    font-size:16px;

}

.check-list li:before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:var(--primary);

    font-size:20px;

    font-weight:bold;

}

/***************************************************
MARKET
****************************************************/

.market-box{

    background:linear-gradient(
            135deg,
            #FFFFFF,
            #FCF8F5
    );

}

/***************************************************
FEATURES
****************************************************/

.feature-row{

    margin-top:35px;

    padding-top:35px;

    border-top:1px solid #EEE;

}

.feature{

    text-align:center;

}

.feature i{

    color:var(--primary);

    font-size:34px;

    margin-bottom:12px;

}

.feature strong{

    display:block;

    color:var(--dark);

    margin-bottom:6px;

}

/***************************************************
CONTACT
****************************************************/

.contact-box{

    background:var(--primary-light);

    border-left:5px solid var(--primary);

}

.contact-box.card-premium::before{
    background : none;
}
.contact-item{

    display:flex;

    align-items:flex-start;

    margin-bottom:30px;

}

.contact-row {
    display:flex;
    gap: 20px;
}

.contact-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#FFF;

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-right:18px;

    flex-shrink:0;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

    font-size:20px;

}

.contact-item h4{

    margin-bottom:6px;

    font-size:18px;

}

.contact-item p{

    margin:0;

}

.contact-form{

    background:#FFF;

    border-radius:16px;

    padding:30px;

    box-shadow:
            0 2px 10px rgba(0,0,0,.05);

    height:100%;

}

.contact-form h3{

    font-size:24px;

    margin-bottom:10px;

}

.contact-form p{

    margin-bottom:25px;

}

.contact-form .form-control{

    border-radius:10px;

    border:1px solid #DDD;

    padding:12px 15px;

    height:auto;

    box-shadow:none;

    transition:.25s;

}

.contact-form textarea.form-control{

    resize:none;

}

.contact-form .form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(243,111,35,.12);

}

.btn-orange{

    display:block;

    width:100%;

    height:54px;

    line-height:54px;

    text-align:center;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    border:none;

    box-shadow:
            0 10px 25px rgba(243,111,35,.25);

    transition:.25s;

}

.btn-orange:hover{

    transform:translateY(-2px);

    box-shadow:
            0 15px 35px rgba(243,111,35,.35);

}
/***************************************************
BOUTONS
****************************************************/

.btn-orange{

    display:inline-block;

    padding:14px 30px;

    border-radius:50px;

    background:var(--primary);

    color:#FFF;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

    line-height: 28px;

}

.btn-orange:hover{

    background:#DB5C15;

    color:#FFF;

    text-decoration:none;

}

/***************************************************
IMAGES
****************************************************/

.img-rounded{

    width:100%;

    border-radius:var(--radius);

    object-fit:cover;

    box-shadow:var(--shadow);

}

.img-420{

    height:420px;

}

.img-500{

    height:500px;

}

/***************************************************
ESPACEMENTS
****************************************************/

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}

.mt-60{

    margin-top:60px;

}

/***************************************************
RESPONSIVE
****************************************************/

@media (max-width:991px){

    .main{

        padding:50px 0;

    }

    .hero-image{

        height:350px;

        margin-bottom:30px;

    }

    .card-premium{

        padding:30px;

    }

    .section-block{

        margin-top:60px;

    }

    .main h1{

        font-size:34px;

    }

    .main h2{

        font-size:28px;

    }

}

@media (max-width:767px){

    .main{

        padding:35px 0;

    }

    .hero-image{

        height:260px;

    }

    .card-premium{

        padding:25px;

    }

    .section-block{

        margin-top:45px;

    }

}