/*=========================================================
                CONTACT PAGE
        Manasadwip Ramakrishna Mission
==========================================================*/


/*=========================================================
                    PAGE BANNER
==========================================================*/

.page-banner{

    position:relative;

    height:360px;

    background:url("../images/contact-banner.jpg") center center/cover no-repeat;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(11,45,91,.78),
        rgba(11,45,91,.70)
    );

}

/* Main content */

.banner-content{

    position:relative;

    z-index:10;

    text-align:center;

}

/* Decorative PNG wrapper */

.banner-text-bg{

    position:relative;

    display:inline-block;

    padding:70px 100px;

}

/* PNG behind heading */

/*.banner-text-bg::before{*/

/*    content:"";*/

/*    position:absolute;*/

/*    inset:0;*/

/*    background:url("../images/banner-shape.png") center center no-repeat;*/

/*    background-size:contain;*/

/*    z-index:-1;*/

/*    opacity:1;*/

/*}*/

.banner-text-bg h1{

    color:#fff;

    font-family:'Cinzel',serif;

    font-size:56px;

    font-weight:700;

    margin-bottom:15px;

    text-shadow:0 4px 15px rgba(0,0,0,.35);

}

.banner-text-bg p{

    color:#fff;

    font-size:18px;

    line-height:1.8;

    max-width:600px;

    margin:auto;

}


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

.contact-section{

    background:#f7f9fc;

}


/*=========================================================
                CONTACT INFO CARD
==========================================================*/

.contact-info{

    background:#fff;

    border-radius:18px;

    padding:35px;

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

    height:100%;

    transition:.35s;

}

.contact-info:hover{

    transform:translateY(-5px);

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

}

.contact-info h3{

    color:var(--primary);

    margin-bottom:30px;

}


/*=========================================================
                    INFO BOX
==========================================================*/

.info-box{

    display:flex;

    gap:18px;

    margin-bottom:28px;

    align-items:flex-start;

}

.info-box:last-child{

    margin-bottom:0;

}

.info-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    flex-shrink:0;

}

.info-box h5{

    margin-bottom:6px;

    color:var(--primary);

    font-size:18px;

}

.info-box p{

    margin:0;

    color:#666;

    line-height:1.8;

}


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

.contact-form{

    background:#fff;

    padding:40px;

    border-radius:18px;

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

    transition:.35s;

}

.contact-form:hover{

    transform:translateY(-5px);

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

}

.contact-form h3{

    color:var(--primary);

    margin-bottom:30px;

}


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

.form-label{

    font-weight:600;

    color:#333;

}

.form-control{

    height:54px;

    border-radius:10px;

    border:1px solid #ddd;

    padding:12px 16px;

    font-size:15px;

    box-shadow:none;

    transition:.3s;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(11,45,91,.12);

}

textarea.form-control{

    height:auto;

    min-height:170px;

    resize:vertical;

}


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

.contact-form .btn{

    padding:14px 40px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.contact-form .btn:hover{

    transform:translateY(-3px);

}


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

.map-section{

    overflow:hidden;

}

.map-section iframe{

    display:block;

    width:100%;

    height:450px;

    border:none;

}


/*=========================================================
                    TABLET
==========================================================*/

@media(max-width:992px){

.page-banner{

    height:300px;

}

.banner-text-bg{

    padding:55px 70px;

}

.banner-text-bg h1{

    font-size:42px;

}

.banner-text-bg p{

    font-size:16px;

}

.contact-info{

    margin-bottom:30px;

}

}


/*=========================================================
                    MOBILE
==========================================================*/

@media(max-width:768px){

.page-banner{

    height:240px;

}

.banner-text-bg{

    padding:40px 25px;

}

.banner-text-bg::before{

    background-size:100% 100%;

}

.banner-text-bg h1{

    font-size:34px;

}

.banner-text-bg p{

    font-size:15px;

}

.contact-info,

.contact-form{

    padding:25px;

}

.info-box{

    gap:15px;

}

.info-icon{

    width:48px;

    height:48px;

    font-size:18px;

}

.form-control{

    height:50px;

}

.contact-form .btn{

    width:100%;

}

.map-section iframe{

    height:320px;

}

}


/*=========================================================
                EXTRA SMALL DEVICES
==========================================================*/

@media(max-width:576px){

.page-banner{

    height:200px;

}

.banner-text-bg{

    padding:28px 18px;

}

.banner-text-bg h1{

    font-size:28px;

}

.banner-text-bg p{

    font-size:14px;

}

.contact-info,

.contact-form{

    padding:20px;

    border-radius:15px;

}

.info-box{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.info-box h5{

    font-size:17px;

}

.info-box p{

    font-size:14px;

}

.contact-form h3{

    text-align:center;

}

.form-label{

    font-size:14px;

}

.form-control{

    font-size:14px;

}

.contact-form .btn{

    padding:14px 20px;

}

.map-section iframe{

    height:280px;

}

}