/*--------------------------------------
Contact Hero
--------------------------------------*/

.contact-header{

    margin-bottom:60px;

}

.contact-card{

    background:#fff;

    border:none;

    border-radius:20px;

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

    transition:.30s;

}

.contact-card:hover{

    transform:translateY(-5px);

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

}

/*--------------------------------------
Contact Form
--------------------------------------*/

.contact-card .form-control{

    height:52px;

    border-radius:12px;

    border:1px solid #dee2e6;

}

.contact-card textarea.form-control{

    height:auto;

    resize:none;

}

.contact-card .form-control:focus{

    border-color:#dc3545;

    box-shadow:none;

}

/*--------------------------------------
Contact Info
--------------------------------------*/

.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:30px;

}

.contact-info-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#fff4f5;

    color:#dc3545;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.contact-info-title{

    font-weight:700;

    margin-bottom:5px;

}

.contact-info-text{

    color:#6c757d;

    line-height:1.7;

}

/*--------------------------------------
Map
--------------------------------------*/

.contact-map{

    border-radius:20px;

    overflow:hidden;

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

}

/*--------------------------------------
Responsive
--------------------------------------*/

@media (max-width:991px){

    .contact-header{

        margin-bottom:45px;

    }

}

/*--------------------------------------
Contact Header
--------------------------------------*/

.contact-header{

    margin-bottom:55px;

}

/*--------------------------------------
Contact Card
--------------------------------------*/

.contact-card{

    background:#fff;

    border:none;

    border-radius:20px;

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

    transition:.30s;

}

.contact-card:hover{

    transform:translateY(-5px);

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

}

/*--------------------------------------
Section Title
--------------------------------------*/

.contact-card-title{

    font-size:24px;

    font-weight:700;

    margin-bottom:30px;

}

/*--------------------------------------
Form
--------------------------------------*/

.contact-card .form-label{

    font-weight:600;

    margin-bottom:8px;

    color:#212529;

}

.contact-card .form-control{

    height:52px;

    border-radius:12px;

    border:1px solid #dee2e6;

    transition:.25s;

}

.contact-card textarea.form-control{

    height:auto;

    min-height:170px;

    resize:vertical;

}

.contact-card .form-control:focus{

    border-color:#dc3545;

    box-shadow:none;

}

.contact-card .btn-danger{

    height:52px;

    border-radius:50px;

    font-weight:700;

    padding:0 35px;

}

/*--------------------------------------
Contact Information
--------------------------------------*/

.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:30px;

}

.contact-info-item > div:last-child{

    flex:1;

}

.contact-info-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#fff4f5;

    color:#dc3545;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.contact-info-title{

    font-size:16px;

    font-weight:700;

    margin-bottom:6px;

}

.contact-info-text{

    color:#6c757d;

    line-height:1.8;

}

/*--------------------------------------
Business Hours
--------------------------------------*/

.business-hours{

    list-style:none;

    padding:0;

    margin:0;

}

.business-hours li{

    display:flex;

    justify-content:space-between;

    padding:8px 0;

    border-bottom:1px solid #f1f1f1;

}

.business-hours li:last-child{

    border-bottom:none;

}

/*--------------------------------------
Map
--------------------------------------*/

.contact-map{

    margin-top:60px;

    border-radius:20px;

    overflow:hidden;

    background:#fff;

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

}

.contact-map iframe{

    width:100%;

    height:380px;

    border:0;

    display:block;

}

/*--------------------------------------
Responsive
--------------------------------------*/

@media (max-width:991px){

    .contact-header{

        margin-bottom:45px;

    }

    .contact-card{

        margin-bottom:30px;

    }

}

@media (max-width:767px){

    .contact-card{

        border-radius:16px;

    }

    .contact-card-title{

        font-size:22px;

    }

    .contact-info-item{

        gap:15px;

    }

    .contact-info-icon{

        width:50px;

        height:50px;

        font-size:20px;

    }

    .contact-map iframe{

        height:320px;

    }

}

.contact-card hr{

    margin:25px 0;

    border-color:#ececec;

}