/*=========================================
BILIN FRAMEWORK
Contact
Homepage Contact Section + Contact Page
=========================================*/


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

.bilin-contact{

    padding:120px 0;

    background:#ffffff;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    align-items:start;

}

.contact-box{

    background:#F8FBFD;

    border-radius:20px;

    padding:30px;

    margin-bottom:25px;

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

}

.contact-box h3{

    color:#0F8FB5;

    margin-bottom:12px;

}

.contact-box p{

    color:#666;

    line-height:2;

}

.contact-form{

    background:#F8FBFD;

    padding:40px;

    border-radius:24px;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px;

    border:1px solid #ddd;

    border-radius:12px;

    font-family:inherit;

    font-size:16px;

}

.contact-form textarea{

    resize:vertical;

}

.contact-form button{

    border:none;

    background:#0F8FB5;

    color:#fff;

    padding:16px;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

    font-size:16px;

}

.contact-form button:hover{

    background:#0b7898;

}


/*==================================================
CONTACT PAGE
==================================================*/

.bilin-contact-page{

    background:#ffffff;

}


/*==================================================
Contact Page Hero
==================================================*/

.contact-page-hero{

    padding:90px 0 80px;

    background:

        linear-gradient(
            135deg,
            #F4FBFD 0%,
            #FFFFFF 65%
        );

    border-bottom:1px solid #EEF3F6;

}

.contact-page-hero-content{

    max-width:820px;

    margin:0 auto;

    text-align:center;

}

.contact-eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    color:#0F8FB5;

    font-size:15px;

    font-weight:700;

}

.contact-page-hero h1{

    margin:0 0 22px;

    color:#12394A;

    font-size:clamp(34px,4vw,52px);

    line-height:1.35;

    font-weight:800;

}

.contact-page-hero p{

    max-width:760px;

    margin:0 auto;

    color:#5E6E76;

    font-size:18px;

    line-height:2.1;

}


/*==================================================
General Contact Page Sections
==================================================*/

.contact-page-section{

    padding:100px 0;

}

.contact-section-heading{

    max-width:760px;

    margin:0 auto 55px;

    text-align:center;

}

.contact-section-heading h2{

    margin:0 0 18px;

    color:#12394A;

    font-size:clamp(28px,3vw,38px);

    line-height:1.45;

    font-weight:800;

}

.contact-section-heading p{

    margin:0;

    color:#68777F;

    font-size:16px;

    line-height:2;

}


/*==================================================
Contact Information
==================================================*/

.contact-information{

    background:#ffffff;

}

.contact-info-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.contact-info-card{

    min-height:250px;

    padding:34px 30px;

    background:#F8FBFD;

    border:1px solid #EAF1F4;

    border-radius:22px;

    box-shadow:0 12px 35px rgba(18,57,74,.05);

    text-align:center;

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        border-color .3s ease;

}

.contact-info-card:hover{

    transform:translateY(-5px);

    border-color:#D9EAF0;

    box-shadow:0 18px 45px rgba(18,57,74,.09);

}

.contact-info-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    border-radius:16px;

    background:#E9F8FC;

    color:#0F8FB5;

    font-size:25px;

}

.contact-info-card h3{

    margin:0 0 18px;

    color:#12394A;

    font-size:20px;

    font-weight:800;

}

.contact-info-card p{

    margin:7px 0;

    color:#52646D;

    line-height:1.9;

}

.contact-info-card a{

    color:#0F8FB5;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.contact-info-card a:hover{

    color:#E45535;

}

.contact-info-card span{

    display:block;

    margin-top:15px;

    color:#7A878D;

    font-size:14px;

    line-height:1.9;

}


/*==================================================
Locations
==================================================*/

.contact-locations{

    background:#F8FBFD;

}

.contact-location-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

    margin-bottom:45px;

}

.contact-location-card{

    padding:36px;

    background:#ffffff;

    border:1px solid #E8EFF2;

    border-radius:22px;

    box-shadow:0 12px 35px rgba(18,57,74,.05);

}

.contact-location-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    border-radius:15px;

    background:#FFF4EF;

    font-size:23px;

}

.contact-location-card h3{

    margin:0 0 16px;

    color:#12394A;

    font-size:21px;

    font-weight:800;

}

.contact-location-card p{

    margin:0;

    color:#5E6E76;

    font-size:15px;

    line-height:2.2;

}


/*==================================================
Map
==================================================*/

.contact-map{

    width:100%;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #E3ECEF;

    border-radius:24px;

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

}

.contact-map iframe{

    display:block;

    width:100%;

    min-height:420px;

    border:0;

}


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

.contact-form-section{

    background:#ffffff;

}

.contact-form-layout{

    display:grid;

    grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);

    gap:70px;

    align-items:start;

}

.contact-form-intro{

    padding-top:15px;

}

.contact-form-intro h2{

    margin:0 0 20px;

    color:#12394A;

    font-size:clamp(28px,3vw,38px);

    line-height:1.45;

    font-weight:800;

}

.contact-form-intro > p{

    margin:0;

    color:#61727A;

    font-size:16px;

    line-height:2.15;

}

.contact-form-note{

    display:flex;

    flex-direction:column;

    gap:5px;

    margin-top:30px;

    padding:20px 22px;

    background:#F4FAFC;

    border-right:4px solid #0F8FB5;

    border-radius:12px;

}

.contact-form-note strong{

    color:#12394A;

    font-size:15px;

}

.contact-form-note span{

    color:#0F8FB5;

    font-size:15px;

    font-weight:700;

}


/*==================================================
Form Card
==================================================*/

.contact-form-card{

    padding:40px;

    background:#F8FBFD;

    border:1px solid #E8EFF2;

    border-radius:24px;

    box-shadow:0 15px 40px rgba(18,57,74,.06);

}

.bilin-contact-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-form-field{

    display:flex;

    flex-direction:column;

    gap:9px;

}

.contact-form-field label{

    color:#12394A;

    font-size:15px;

    font-weight:700;

}

.contact-form-field input,

.contact-form-field textarea{

    width:100%;

    box-sizing:border-box;

    padding:15px 17px;

    border:1px solid #D9E3E7;

    border-radius:12px;

    background:#ffffff;

    color:#12394A;

    font-family:inherit;

    font-size:15px;

    line-height:1.8;

    outline:none;

    transition:

        border-color .25s ease,

        box-shadow .25s ease;

}

.contact-form-field input{

    min-height:52px;

}

.contact-form-field textarea{

    min-height:170px;

    resize:vertical;

}

.contact-form-field input:focus,

.contact-form-field textarea:focus{

    border-color:#0F8FB5;

    box-shadow:0 0 0 3px rgba(15,143,181,.10);

}

.contact-form-field input::placeholder,

.contact-form-field textarea::placeholder{

    color:#9AA7AC;

}

.contact-form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.contact-submit-button{

    width:100%;

    min-height:54px;

    border:0;

    border-radius:13px;

    background:#E45535;

    color:#ffffff;

    font-family:inherit;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

    transition:

        background .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

.contact-submit-button:hover{

    background:#CF482D;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(228,85,53,.18);

}


/*==================================================
Final CTA
==================================================*/

.contact-final-cta{

    padding:90px 0;

    background:

        linear-gradient(
            135deg,
            #12394A 0%,
            #164B60 100%
        );

    text-align:center;

}

.contact-final-cta h2{

    margin:0 0 16px;

    color:#ffffff;

    font-size:clamp(28px,3vw,38px);

    line-height:1.45;

    font-weight:800;

}

.contact-final-cta p{

    max-width:650px;

    margin:0 auto 28px;

    color:#DCEBF0;

    font-size:16px;

    line-height:2;

}

.contact-cta-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:170px;

    padding:14px 26px;

    border-radius:12px;

    background:#E45535;

    color:#ffffff;

    font-size:15px;

    font-weight:800;

    text-decoration:none;

    transition:

        background .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

.contact-cta-button:hover{

    background:#F05A28;

    color:#ffffff;

    transform:translateY(-2px);

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

}


/*==================================================
Tablet
==================================================*/

@media(max-width:992px){

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .contact-info-grid{

        grid-template-columns:1fr 1fr;

    }

    .contact-form-layout{

        grid-template-columns:1fr;

        gap:45px;

    }

    .contact-form-intro{

        padding-top:0;

    }

}


/*==================================================
Mobile
==================================================*/

@media(max-width:700px){

    .bilin-contact{

        padding:80px 0;

    }

    .contact-page-section{

        padding:75px 0;

    }

    .contact-page-hero{

        padding:70px 0 60px;

    }

    .contact-page-hero p{

        font-size:16px;

        line-height:2;

    }

    .contact-info-grid,

    .contact-location-grid{

        grid-template-columns:1fr;

    }

    .contact-info-card,

    .contact-location-card{

        padding:28px 24px;

    }

    .contact-form-card{

        padding:26px 20px;

    }

    .contact-form-row{

        grid-template-columns:1fr;

        gap:22px;

    }

    .contact-map iframe{

        min-height:350px;

    }

    .contact-final-cta{

        padding:70px 0;

    }

}


/*==================================================
Small Mobile
==================================================*/

@media(max-width:480px){

    .contact-page-hero{

        padding:55px 0 50px;

    }

    .contact-page-section{

        padding:60px 0;

    }

    .contact-info-card{

        min-height:auto;

    }

    .contact-form-card{

        padding:22px 16px;

    }

    .contact-map iframe{

        min-height:300px;

    }

}

/*==================================================
Homepage Contact CTA
==================================================*/

.contact-home-cta{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:35px;

}

.contact-home-cta-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    padding:14px 30px;

    border-radius:13px;

    background:#E45535;

    color:#ffffff;

    font-size:16px;

    font-weight:800;

    text-decoration:none;

    box-shadow:0 10px 25px rgba(228,85,53,.16);

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}

.contact-home-cta-button:hover{

    background:#F05A28;

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:0 14px 30px rgba(228,85,53,.22);

}

@media(max-width:576px){

    .contact-home-cta{

        margin-top:28px;

    }

    .contact-home-cta-button{

        width:100%;

        max-width:260px;

    }

}

/* =========================================================
   BILIN CONTACT FORM NOTICE
========================================================= */

.bilin-contact-form-notice {
	width: min(760px, 100%);
	box-sizing: border-box;
	margin: 0 auto 40px;
	padding: 22px 28px;

	background: #fffaf2;
	border: 1px solid #f0c36a;
	border-radius: 16px;

	color: #16324f;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 2;

	text-align: center;

	box-shadow: 0 8px 24px rgba(22, 50, 79, 0.08);
}

.bilin-contact-form-notice::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;
	margin: 0 auto 10px;

	background: #f05a28;
	border-radius: 50%;

	color: #ffffff;
	font-size: 19px;
	font-weight: 800;
	line-height: 1;
}