/* ===========================================================
FLIKMA - CONTACT PAGE
Builds on style.css / responsive.css design tokens
=========================================================== */

/*==========================================================
Page Header (shared pattern with pricing.css)
==========================================================*/

.page-header{

    padding:100px 0 60px;
    text-align:center;
    position:relative;
    overflow:hidden;

}

.page-header::before{

    content:'';
    position:absolute;
    width:800px;
    height:800px;
    right:-300px;
    top:-350px;
    border-radius:50%;
    background:#f3f8ff;
    z-index:-1;

}

.page-header h1{

    font-size:38px;
    font-weight:800;
    line-height:1.25;
    color:var(--secondary);
    margin-bottom:20px;

}

.page-header-desc{

    color:var(--text);
    font-size:16px;
    max-width:600px;

}

/*==========================================================
Contact Section
==========================================================*/

.contact-section{

    padding:20px 0 110px;
    background:#ffffff;

}

.contact-info-card{

    background:#f7faff;
    border-radius:var(--radius);
    padding:30px;
    border:1px solid var(--border);

}

.contact-info-icon{

    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:18px;

}

.contact-info-card h5{

    font-size:17px;
    font-weight:800;
    color:var(--secondary);
    margin-bottom:8px;

}

.contact-info-card p{

    margin-bottom:2px;
    color:#404554;
    font-weight:600;
    font-size:14px;

}

.text-muted-sm{

    color:#8a94a7!important;
    font-size:12px!important;
    font-weight:500!important;

}

.contact-form-card{

    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:45px;
    box-shadow:0 20px 50px rgba(0,0,0,.05);

}

.contact-form-card .form-label{

    font-weight:700;
    font-size:13px;
    color:var(--secondary);
    margin-bottom:8px;

}

.contact-form-card .form-control,
.contact-form-card .form-select{

    border-radius:12px;
    border:1px solid var(--border);
    padding:12px 16px;
    font-size:14px;

}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus{

    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(13,110,253,.1);

}

.contact-form-card .alert{

    border-radius:14px;
    margin-bottom:28px;

}

/*==========================================================
Responsive
==========================================================*/

@media (max-width:767px){

    .page-header{

        padding:70px 0 40px;

    }

    .page-header h1{

        font-size:28px;

    }

    .page-header-desc{

        font-size:14px;

    }

    .contact-form-card{

        padding:28px;

    }

}