/* == CONTACT PAGE ONLY == */

.hero {background: linear-gradient(161deg, rgb(0, 14, 26) 50%, rgba(0, 75, 136,0.9) 90%);}
@media (min-width: 1200px) {
    .hero:before {content: '';  opacity: 0.1; 
    background: url('/wp-content/themes/pureflo-theme/assets/img/global/voltage-oscillirator.png') no-repeat fixed; background-size: cover; background-position: bottom right;
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
}

.contact:before {content:''; opacity: 0.3; background: url('/wp-content/themes/pureflo-theme/assets/img/global/hex-vertical-wide.png') no-repeat fixed; background-position: 120% 0%;  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index:-1;}

.contact-card { display: flex; align-items: center; gap: 15px;}
.contact-card .icon-box { width: 50px; height: 50px; flex-shrink: 0; background-color: color-mix(in srgb, var(--pureflo-blue), transparent 90%); border-radius: 10px; display: flex; justify-content: center; align-items: center; }
.contact-card .icon-box i { font-size: 22px; color: var(--pureflo-blue); }
.contact-card .contact-text h4 { font-weight: 600; margin-bottom: 3px; color: var(--hd-color); }
.contact-card .contact-text p { font-size: 14px; line-height: 1.5; color: var(--main-color); margin-bottom: 0; }

.contact .social-links { display: flex; gap: 12px; }
.contact .social-links a {  font-size: 1.5rem; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; transition: all 0.3s ease; }
.contact .social-links a:hover { background-color: var(--pureflo-blue); color:#ffffff; transform: translateY(-3px); }

.newsletter {margin-left:15px;}
.newsletter .sign-up-link {color:var(--ada-blue); font-weight:500; font-size:.85rem; letter-spacing: 1.5px; display:block; margin-top:0.7rem; cursor: hand; cursor: pointer;}
.newsletter.sign-up-link:hover {text-decoration: none; color:#ffffff;}
.newsletter .sign-up-link img {display:block; max-width: 275px;}

.contact .contact-form-container { background-color:#ffffff; padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.contact .contact-form-container>p { font-size: 15px; line-height: 1.6; margin-bottom: 25px; color: var(--main-color); }
.contact .contact-form-container .php-email-form .form-control { height: auto; padding: 14px 20px; border-radius: 10px; background-color: color-mix(in srgb, var(--background-color), #f5f8fd 30%); border: 1px solid color-mix(in srgb, var(--main-color), transparent 90%); color: var(--main-color); transition: all 0.3s ease; }
.contact .contact-form-container .php-email-form .form-control:focus { background-color:#ffffff; border-color: var(--pureflo-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pureflo-blue), transparent 85%); }
.contact .contact-form-container .php-email-form .form-control::placeholder { color: color-mix(in srgb, var(--main-color), transparent 60%); }
.contact .contact-form-container .php-email-form textarea.form-control { min-height: 140px; }
.contact .contact-form-container .php-email-form .form-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 10px; }

@media (max-width: 576px) { .contact .contact-form-container .php-email-form .form-submit { flex-direction: column; align-items: flex-start; }
}
.contact .contact-form-container .php-email-form button { background-color: var(--pureflo-blue); color:#ffffff; border: none; padding: 12px 28px; border-radius: 50px; font-weight: 600; font-size: 15px; letter-spacing: 0.5px; transition: all 0.3s ease; }
.contact .contact-form-container .php-email-form button:hover { background-color: color-mix(in srgb, var(--pureflo-blue), #000 15%); transform: translateY(-2px); box-shadow: 0 6px 15px color-mix(in srgb, var(--pureflo-blue), transparent 75%); }

@media (max-width: 768px) { .contact .contact-form-container { padding: 25px 20px; }}