/*==================================================
    CONTACT PAGE - DIGITAL PEHAL
    Version : 1.0
==================================================*/


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

.contact-hero{

    background:#ffffff;

    padding:20px 0;

}

.contact-hero-content{

    max-width:760px;

    margin:auto;

    text-align:center;

}

.contact-hero h1{

    font-size:46px;

    color:#222;

    line-height:1.3;

    margin:20px 0;

}

.contact-hero p{

    max-width:700px;

    margin:auto;

    color:#555;

    font-size:17px;

    line-height:1.8;

}


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

.contact-section{

    background:#F8F9FA;

    padding:30px 0;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:40px;

    align-items:start;

}


/*==================================================
    LEFT & RIGHT CARDS
==================================================*/

.contact-info,
.contact-form{

    background:#ffffff;

    border-radius:20px;

    padding:40px;

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

}

.contact-info h2,
.contact-form h2{

    margin:18px 0 15px;

    color:#222;

    font-size:30px;

}

.contact-info>p,
.contact-form>p{

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

}


/*==================================================
    CONTACT INFORMATION
==================================================*/

.contact-card{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:18px 0;

    border-bottom:1px solid #ECECEC;

}

.contact-card:last-child{

    border-bottom:none;

}

.contact-icon{

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:50%;

    background:#FFF4E8;

    display:flex;

    align-items:center;

    justify-content:center;

}

.contact-icon i{

    font-size:22px;

    color:#FF8C00;

}

.contact-text h4{

    margin:0 0 8px;

    color:#222;

    font-size:18px;

}

.contact-text a{

    color:#0D4C92;

    font-weight:500;

    transition:.3s;

}

.contact-text a:hover{

    color:#FF8C00;

}

.contact-text p{

    margin:0;

    color:#666;

    line-height:1.7;

}


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

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#333;

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid #D8D8D8;

    border-radius:12px;

    font-size:15px;

    transition:.3s;

    outline:none;

    background:#fff;

}

.form-group textarea{

    resize:vertical;

    min-height:150px;

}

.form-group input:focus,
.form-group textarea:focus{

    border-color:#0D4C92;

    box-shadow:0 0 0 4px rgba(13,76,146,.10);

}

.contact-form .btn{

    width:100%;

    margin-top:10px;

}


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

@media(max-width:992px){

.contact-wrapper{

    grid-template-columns:1fr;

}

.contact-info,
.contact-form{

    padding:35px;

}

}


@media(max-width:768px){

.contact-hero{

    padding:50px 0;

}

.contact-section{

    padding:60px 0;

}

.contact-hero h1{

    font-size:34px;

}

.contact-info h2,
.contact-form h2{

    font-size:26px;

}

.contact-info,
.contact-form{

    padding:30px;

}

}


@media(max-width:576px){

.contact-hero h1{

    font-size:28px;

}

.contact-hero p{

    font-size:16px;

}

.contact-info,
.contact-form{

    padding:25px;

}

.contact-icon{

    width:50px;

    height:50px;

}

.contact-icon i{

    font-size:20px;

}

}