/*==================================================
            FIRAOF CONTACT PAGE
            PARTIE 1
            Hero + Contact Cards
==================================================*/

/*==============================
ROOT
===============================*/

:root{

    --firaof-primary:#0d7d53;
    --firaof-primary-dark:#086543;
    --firaof-primary-light:#18a96e;

    --firaof-gold:#d5b14b;
    --firaof-gold-dark:#c39824;

    --firaof-text:#23303d;
    --firaof-gray:#707d8b;

    --firaof-border:#e4ece7;

    --firaof-bg:#f6faf8;

    --firaof-white:#ffffff;

}

/*==============================
GLOBAL
===============================*/

.firaof-contact-hero,
.firaof-contact-cards,
.firaof-contact-section,
.firaof-faq-section,
.firaof-partners-section,
.firaof-contact-bottom{

    position:relative;

}

.firaof-contact-title,
.firaof-section-title h2,
.firaof-contact-header h2{

    margin:0;

    font-weight:700;

    color:var(--firaof-text);

}

.firaof-contact-description,
.firaof-section-title p{

    color:var(--firaof-gray);

    line-height:1.9;

}

.firaof-contact-cards a{

    text-decoration:none;

}

/*==============================
HERO
===============================*/

.firaof-contact-hero{

    padding:120px 0;

    background:

    linear-gradient(
    rgba(8,101,67,.85),
    rgba(13,125,83,.85)),

    url("../images/slide_01.jpg")
    center center / cover no-repeat;

}

.firaof-contact-hero-content{

    color:#fff;

}

.firaof-contact-subtitle{

    display:inline-block;

    padding:8px 24px;

    border-radius:30px;

    background:rgba(255,255,255,.15);

    color:#fff;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.firaof-contact-title{

    color:#fff;

    font-size:52px;

    margin-bottom:25px;

}

.firaof-contact-description{

    color:rgba(255,255,255,.90);

    font-size:18px;

    max-width:760px;

    margin:auto;

}

/*==============================
CONTACT SECTION
===============================*/

.firaof-contact-cards{

    padding:100px 0;

    background:var(--firaof-bg);

}

/*==============================
CARD
===============================*/

.firaof-contact-card{

    background:#fff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

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

    height:100%;

    transition:.35s;

    box-shadow:

    0 10px 35px rgba(0,0,0,.05);

}

.firaof-contact-card:hover{

    transform:translateY(-8px);

    border-color:var(--firaof-gold);

    box-shadow:

    0 25px 50px rgba(0,0,0,.10);

}

/*==============================
ICON
===============================*/

.firaof-contact-icon{

    width:85px;

    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
    135deg,
    var(--firaof-primary),
    var(--firaof-primary-light));

    color:#fff;

    font-size:30px;

    transition:.35s;

}

.firaof-contact-card:hover .firaof-contact-icon{

    transform:rotate(8deg) scale(1.08);

}

/*==============================
CARD TITLE
===============================*/

.firaof-contact-card h4{

    color:var(--firaof-primary-dark);

    font-size:24px;

    margin-bottom:20px;

    font-weight:700;

}

/*==============================
CARD TEXT
===============================*/

.firaof-contact-card p{

    color:var(--firaof-gray);

    line-height:1.9;

    margin-bottom:20px;

    font-size:15px;

}

/*==============================
LINK
===============================*/

.firaof-contact-card a{

    display:inline-block;

    color:var(--firaof-primary);

    font-weight:700;

    transition:.30s;

}

.firaof-contact-card span{

    display:inline-block;

    color:var(--firaof-primary);

    font-weight:700;

}

.firaof-contact-card a:hover{

    color:var(--firaof-gold-dark);

}

/*==============================
RESPONSIVE
===============================*/

@media(max-width:991px){

    .firaof-contact-card{

        margin-bottom:30px;

    }

    .firaof-contact-title{

        font-size:42px;

    }

}

@media(max-width:768px){

    .firaof-contact-hero{

        padding:90px 0;

    }

    .firaof-contact-title{

        font-size:34px;

    }

    .firaof-contact-description{

        font-size:16px;

    }

    .firaof-contact-cards{

        padding:70px 0;

    }

}
/*==================================================
            FIRAOF CONTACT PAGE
            PARTIE 2
            CONTACT FORM
==================================================*/

/*==============================
SECTION
===============================*/

.firaof-contact-section{

    padding:100px 0;

    background:#ffffff;

}

/*==============================
FORM BOX
===============================*/

.firaof-contact-box{

    background:#ffffff;

    border-radius:25px;

    overflow:hidden;

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

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

}

/*==============================
HEADER
===============================*/

.firaof-contact-header{

    padding:60px 60px 30px;

    text-align:center;

}

.firaof-contact-header span{

    display:inline-block;

    padding:8px 24px;

    background:rgba(13,125,83,.10);

    color:var(--firaof-primary);

    border-radius:30px;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.firaof-contact-header h2{

    font-size:42px;

    color:var(--firaof-text);

    margin-bottom:18px;

}

.firaof-contact-header p{

    max-width:650px;

    margin:auto;

    color:var(--firaof-gray);

    line-height:1.9;

}

/*==============================
FORM
===============================*/

.firaof-contact-form{

    padding:20px 60px 60px;

}

/*==============================
GROUP
===============================*/

.firaof-form-group{

    margin-bottom:28px;

}

.firaof-form-group label{

    display:block;

    margin-bottom:10px;

    color:var(--firaof-text);

    font-size:15px;

    font-weight:600;

}

/*==============================
INPUT
===============================*/

.firaof-input{

    width:100%;

    height:58px;

    border:2px solid var(--firaof-border);

    border-radius:14px;

    background:#fbfcfc;

    padding:0 20px;

    color:var(--firaof-text);

    font-size:15px;

    transition:.30s;

    outline:none;

}

.firaof-input::placeholder{

    color:#9aa6b2;

}

/*==============================
SELECT
===============================*/

.firaof-select{

    width:100%;

    height:58px;

    border:2px solid var(--firaof-border);

    border-radius:14px;

    background:#fbfcfc;

    padding:0 20px;

    color:var(--firaof-text);

    font-size:15px;

    cursor:pointer;

    transition:.30s;

    outline:none;

}

/*==============================
TEXTAREA
===============================*/

.firaof-textarea{

    width:100%;

    min-height:180px;

    border:2px solid var(--firaof-border);

    border-radius:14px;

    background:#fbfcfc;

    padding:18px 20px;

    resize:vertical;

    color:var(--firaof-text);

    font-size:15px;

    transition:.30s;

    outline:none;

}

.firaof-textarea::placeholder{

    color:#9aa6b2;

}

/*==============================
FOCUS
===============================*/

.firaof-input:focus,
.firaof-select:focus,
.firaof-textarea:focus{

    border-color:var(--firaof-primary);

    background:#ffffff;

    box-shadow:
    0 0 0 5px rgba(13,125,83,.12);

}

/*==============================
CHECKBOX
===============================*/

.firaof-checkbox-area{

    margin:10px 0 35px;

}

.firaof-checkbox{

    display:flex;

    align-items:flex-start;

    gap:15px;

    cursor:pointer;

}

.firaof-checkbox input{

    width:20px;

    height:20px;

    margin-top:2px;

    accent-color:var(--firaof-primary);

    flex-shrink:0;

}

.firaof-checkbox span{

    color:var(--firaof-gray);

    line-height:1.8;

    font-size:15px;

}

/*==============================
BUTTON
===============================*/

.firaof-submit-btn{

    border:none;

    padding:17px 50px;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    var(--firaof-primary),
    var(--firaof-primary-light));

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    letter-spacing:.5px;

    cursor:pointer;

    transition:.35s;

    box-shadow:
    0 15px 35px rgba(13,125,83,.25);

}

.firaof-submit-btn:hover{

    background:
    linear-gradient(
    135deg,
    var(--firaof-gold),
    var(--firaof-gold-dark));

    transform:translateY(-4px);

    box-shadow:
    0 20px 45px rgba(213,177,75,.35);

}

/*==============================
RESPONSIVE
===============================*/

@media(max-width:991px){

    .firaof-contact-header{

        padding:45px 35px 25px;

    }

    .firaof-contact-form{

        padding:15px 35px 40px;

    }

}

@media(max-width:768px){

    .firaof-contact-section{

        padding:70px 0;

    }

    .firaof-contact-header h2{

        font-size:30px;

    }

    .firaof-contact-header{

        padding:35px 25px 20px;

    }

    .firaof-contact-form{

        padding:10px 25px 30px;

    }

    .firaof-submit-btn{

        width:100%;

    }

}
/*==================================================
            FIRAOF CONTACT PAGE
            PARTIE 3
            MAP + FAQ + PARTNERS + FOOTER
==================================================*/

/*==============================
SECTION TITLE
===============================*/

.firaof-section-title{

    margin-bottom:60px;

}

.firaof-section-title span{

    display:inline-block;

    padding:8px 24px;

    background:rgba(13,125,83,.10);

    color:var(--firaof-primary);

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.firaof-section-title h2{

    font-size:42px;

    color:var(--firaof-text);

    margin-bottom:18px;

}

.firaof-section-title p{

    max-width:700px;

    margin:auto;

    color:var(--firaof-gray);

    line-height:1.9;

}

/*==============================
MAP
===============================*/

.firaof-map-section{

    width:100%;

    overflow:hidden;

    background:#ffffff;

}

.firaof-map-section iframe{

    display:block;

    width:100%;

    height:520px;

    border:none;

    filter:grayscale(15%);

}

/*==============================
FAQ
===============================*/

.firaof-faq-section{

    padding:100px 0;

    background:var(--firaof-bg);

}

.firaof-faq-card{

    background:#ffffff;

    border-radius:20px;

    padding:40px 35px;

    height:100%;

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

    transition:.35s;

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

}

.firaof-faq-card:hover{

    transform:translateY(-8px);

    border-color:var(--firaof-gold);

    box-shadow:0 25px 55px rgba(0,0,0,.10);

}

/*==============================
FAQ ICON
===============================*/

.firaof-faq-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    color:#ffffff;

    font-size:28px;

    background:

    linear-gradient(
    135deg,
    var(--firaof-primary),
    var(--firaof-primary-light));

}

.firaof-faq-card h4{

    color:var(--firaof-primary-dark);

    margin-bottom:18px;

    font-size:22px;

    font-weight:700;

}

.firaof-faq-card p{

    color:var(--firaof-gray);

    line-height:1.9;

    margin:0;

}

/*==============================
PARTNERS
===============================*/

.firaof-partners-section{

    padding:100px 0;

    background:#ffffff;

}

.firaof-partner-card{

    background:#ffffff;

    border-radius:18px;

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

    height:150px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

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

}

.firaof-partner-card:hover{

    transform:translateY(-6px);

    border-color:var(--firaof-gold);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.firaof-partner-card img{

    max-width:150px;

    max-height:70px;

    opacity:.70;

    transition:.35s;

}

.firaof-partner-card:hover img{

    opacity:1;

    transform:scale(1.08);

}

/*==============================
BOTTOM CONTACT
===============================*/

.firaof-contact-bottom{

    padding:80px 0;

    background:

    linear-gradient(
    135deg,
    var(--firaof-primary-dark),
    var(--firaof-primary));

}

.firaof-contact-bottom h2{

    color:#ffffff;

    font-size:34px;

    margin-bottom:20px;

    font-weight:700;

}

.firaof-contact-bottom p{

    color:rgba(255,255,255,.90);

    line-height:1.9;

    margin:0;

}

.firaof-contact-phone{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 35px;

    border-radius:60px;

    background:#ffffff;

    color:var(--firaof-primary);

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

    box-shadow:0 15px 40px rgba(0,0,0,.20);

}

.firaof-contact-phone i{

    font-size:20px;

}

.firaof-contact-phone:hover{

    background:var(--firaof-gold);

    color:#ffffff;

    transform:translateY(-4px);

    text-decoration:none;

}

/*==============================
ANIMATIONS
===============================*/

.firaof-contact-card,
.firaof-contact-box,
.firaof-faq-card,
.firaof-partner-card{

    animation:firaofFade .7s ease;

}

@keyframes firaofFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================
RESPONSIVE
===============================*/

@media(max-width:991px){

    .firaof-section-title{

        margin-bottom:45px;

    }

    .firaof-contact-bottom{

        text-align:center;

    }

    .firaof-contact-phone{

        margin-top:35px;

    }

}

@media(max-width:768px){

    .firaof-map-section iframe{

        height:380px;

    }

    .firaof-section-title h2{

        font-size:32px;

    }

    .firaof-faq-section,
    .firaof-partners-section{

        padding:70px 0;

    }

    .firaof-contact-bottom{

        padding:60px 0;

    }

    .firaof-contact-bottom h2{

        font-size:28px;

    }

    .firaof-contact-phone{

        width:100%;

        justify-content:center;

        font-size:17px;

    }

}

@media(max-width:576px){

    .firaof-partner-card{

        height:120px;

    }

    .firaof-partner-card img{

        max-width:120px;

    }

    .firaof-faq-card{

        padding:30px 25px;

    }

    .firaof-contact-bottom h2{

        font-size:24px;

    }

    .firaof-section-title h2{

        font-size:28px;

    }

}