.hero {
min-height:0;
background:url(../image/contact_head_banner.png) center center / cover no-repeat;
align-items:flex-start;
padding-top:70px;
padding-bottom:30px
}

.hero .hero-content {
text-align:left;
margin-left:6%;
max-width:620px
}

.hero .hero-content h1{

color:#fff
}
.hero .hero-content h1 span {
    color: rgb(7, 75, 136);;
}
.hero .hero-content h1 {
font-size:32px
}

.hero .hero-content p {
color:#e6ecf2;
margin-left:0
}

.hero .hero-buttons {
justify-content:flex-start
}

.hero .secondary-btn {
border-color:#fff;
color:#fff
}

.contact-section {
width:100%;
max-width:1400px;
margin:24px auto;
padding:0 60px;
box-sizing:border-box;
display:flex;
justify-content:center;
gap:50px;
align-items:flex-start
}

.left-content {
flex:1
}



.tag {
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 15px;
border:1px solid #d7e4ee;
border-radius:30px;
background:#fff;
color:#1e4b69;
font-weight:500;
font-size:12px
}

.tag i {
color:#1e4b69;
font-size:14px
}

.left-content h2 {
font-size:30px;
line-height:1.15;
font-weight:500;
color:#111;
margin:12px 0
}

.left-content p {
font-size:14px;
color:#777;
line-height:1.55;
max-width:600px;
margin-bottom:18px
}

.contact-boxes {
display:flex;
gap:14px;
margin-bottom:18px
}

.card {
flex:1;
display:flex;
align-items:center;
gap:12px;
padding:14px;
border-radius:10px
}

.light {
background:#dff3ff
}

.dark {
background:#1e4b69;
color:#fff
}

.icon {
width:40px;
height:40px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:#1e4b69;
flex-shrink:0
}

.icon i {
color:#fff;
font-size:15px
}

.icon.white {
background:#dff3ff
}

.icon.white i {
color:#1e4b69
}

.white {
background:#d8f4ff
}

.card h4 {
font-size:14px;
margin-bottom:3px
}

.card span {
font-size:13px
}

.map {
width:100%;
height:220px;
border-radius:12px;
overflow:hidden;
margin-top:18px;
box-shadow:0 8px 20px #00000014
}

.map iframe {
width:100%;
height:100%;
border:0
}

.form-container {
width:520px;
background:#fff;
padding:30px 34px;
border-radius:18px;
border:1px solid #ECECEC;
box-shadow:0 2px 6px #00000008 0 10px 30px #0000000a
}

form {
display:flex;
flex-direction:column
}

label {
font-weight:600;
font-size:14px;
margin-bottom:6px;
color:#333
}

input,textarea {
width:100%;
padding:11px 14px;
border:none;
background:#f1f1f1;
border-radius:6px;
margin-bottom:16px;
outline:none;
font-size:14px
}

textarea {
resize:none
}

.form-messages {
font-size:14px;
font-weight:500;
margin-bottom:0
}

.form-messages:empty {
display:none
}

.form-messages.success {
color:#1a7f4b;
background:#e8f8ef;
border-radius:8px;
padding:10px 14px;
margin-bottom:16px
}

.form-messages.error {
color:#c0392b;
background:#fdecea;
border-radius:8px;
padding:10px 14px;
margin-bottom:16px
}

button {
width:100%;
height:46px;
border:none;
border-radius:8px;
background:#234F6D;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s
}

button:hover {
background:#1C445E
}

button:disabled {
opacity:.7;
cursor:not-allowed
}

@media(max-width:992px) {
.contact-section {
flex-direction:column;
padding:0 24px
}

.form-container {
width:100%
}

.left-content h2 {
font-size:30px
}

.contact-boxes {
flex-direction:column
}
}

@media(max-width:768px) {
.hero .hero-content {
margin-left:0;
text-align:center;
max-width:none
}

.hero .hero-content h1 {
font-size:32px
}

.hero .hero-buttons {
justify-content:center
}
}

@media(max-width:480px) {
.hero .hero-content h1 {
font-size:26px
}

.contact-section {
padding:0 16px;
margin:16px auto
}

.left-content h2 {
font-size:24px
}

.left-content p {
font-size:13px
}

.form-container {
padding:22px 20px
}

.map {
height:180px
}

.card h4 {
font-size:13px
}

.card span {
font-size:12px
}
}