/*==================================================
CONTACT.CSS
Islamabad ENT Center
PART 1
Hero • Contact Cards • Contact Form
==================================================*/

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

.contact-hero{

padding:170px 0 100px;

background:linear-gradient(135deg,#08172F,#0D2345);

position:relative;

overflow:hidden;

}

.contact-hero::before{

content:"";

position:absolute;

width:550px;

height:550px;

background:rgba(46,168,255,.08);

border-radius:50%;

right:-220px;

top:-220px;

filter:blur(90px);

}

.contact-hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:70px;

align-items:center;

position:relative;

z-index:2;

}

.contact-left span{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:40px;

background:rgba(46,168,255,.10);

border:1px solid rgba(46,168,255,.20);

color:#68C8FF;

font-weight:600;

margin-bottom:22px;

}

.contact-left h1{

font-size:64px;

line-height:1.1;

color:#fff;

margin-bottom:20px;

}

.contact-left h1 span{

background:linear-gradient(135deg,#89DBFF,#2EA8FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.contact-left p{

font-size:18px;

line-height:1.9;

color:#C7D6EB;

margin-bottom:30px;

}

.contact-notice{

background:#122B53;

padding:28px;

border-radius:22px;

border:1px solid rgba(255,255,255,.08);

margin-bottom:35px;

}

.contact-notice h3{

font-size:24px;

margin-bottom:12px;

color:#fff;

}

.contact-notice p{

margin:0;

font-size:16px;

line-height:1.8;

color:#D8E5F7;

}

.contact-right{

display:flex;

justify-content:center;

}

.contact-right img{

width:100%;

max-width:520px;

border-radius:30px;

box-shadow:0 30px 70px rgba(0,0,0,.35);

object-fit:cover;

}

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

.contact-info-section{

padding:100px 0;

background:#08172F;

}

.contact-info-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.contact-card{

background:#132B53;

padding:40px 30px;

border-radius:25px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.contact-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.25);

border-color:#2EA8FF;

}

.contact-icon{

width:80px;

height:80px;

border-radius:50%;

background:linear-gradient(135deg,#2EA8FF,#1976FF);

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#fff;

margin-bottom:25px;

}

.contact-card h3{

font-size:24px;

margin-bottom:20px;

color:#fff;

}

.contact-card p{

font-size:16px;

line-height:1.9;

color:#C8D7EB;

margin-bottom:8px;

}

.location-btn{

display:inline-block;

margin-top:18px;

padding:12px 22px;

border-radius:40px;

background:#2EA8FF;

color:#fff;

font-weight:600;

transition:.3s;

}

.location-btn:hover{

background:#1A8CFF;

}

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

.contact-form-section{

padding:100px 0;

background:#0A1C38;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:stretch;

}

.form-box{

background:#132B53;

padding:45px;

border-radius:30px;

border:1px solid rgba(255,255,255,.08);

}

.form-box h2{

font-size:42px;

color:#fff;

margin-bottom:15px;

}

.form-box p{

color:#C6D5E9;

margin-bottom:35px;

}

.input-group{

margin-bottom:22px;

}

.input-group input,

.input-group textarea{

width:100%;

padding:18px 20px;

border:none;

outline:none;

background:#0C1F3D;

border:1px solid rgba(255,255,255,.08);

border-radius:15px;

font-size:16px;

color:#fff;

transition:.3s;

}

.input-group input:focus,

.input-group textarea:focus{

border-color:#2EA8FF;

}

.input-group textarea{

resize:none;

min-height:180px;

}

.map-box{

overflow:hidden;

border-radius:30px;

border:1px solid rgba(255,255,255,.08);

}

.map-box iframe{

width:100%;

height:100%;

min-height:720px;

border:none;

}
/*==================================================
CONTACT.CSS
PART 2
Help • Footer • Floating Buttons • Responsive
==================================================*/

/*==============================
HELP SECTION
==============================*/

.contact-help{

padding:100px 0;

background:#08172F;

}

.help-box{

max-width:950px;

margin:auto;

background:linear-gradient(135deg,#132B53,#0E2343);

padding:60px;

border-radius:30px;

text-align:center;

border:1px solid rgba(255,255,255,.08);

box-shadow:0 20px 60px rgba(0,0,0,.25);

}

.help-icon{

width:95px;

height:95px;

margin:0 auto 30px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,#2EA8FF,#1976FF);

font-size:38px;

color:#fff;

box-shadow:0 20px 45px rgba(46,168,255,.35);

}

.help-box h2{

font-size:42px;

color:#fff;

margin-bottom:18px;

}

.help-box p{

font-size:17px;

line-height:1.9;

color:#D0DDF1;

max-width:760px;

margin:auto auto 35px;

}

.help-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

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

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 34px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn-secondary{

border:2px solid rgba(255,255,255,.15);

color:#fff;

}

.btn-secondary:hover{

background:#2EA8FF;

border-color:#2EA8FF;

}

/*==============================
FLOATING BUTTONS
==============================*/

.floating-buttons{

position:fixed;

right:25px;

bottom:25px;

display:flex;

flex-direction:column;

gap:15px;

z-index:999;

}

.float-call,
.float-whatsapp{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:24px;

color:#fff;

box-shadow:0 12px 30px rgba(0,0,0,.25);

transition:.35s;

}

.float-call{

background:#2EA8FF;

}

.float-whatsapp{

background:#25D366;

}

.float-call:hover,
.float-whatsapp:hover{

transform:translateY(-6px) scale(1.08);

}

/*==============================
FOOTER IMPROVEMENTS
==============================*/

footer{

margin-top:0;

}

.footer-grid{

gap:45px;

}

.footer-grid h3{

margin-bottom:20px;

}

.footer-grid ul li{

margin-bottom:12px;

}

.footer-grid p{

line-height:1.8;

}

.footer-bottom{

margin-top:50px;

padding-top:30px;

border-top:1px solid rgba(255,255,255,.08);

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

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

@media(max-width:992px){

.contact-hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.contact-right{

margin-top:40px;

}

.contact-info-grid{

grid-template-columns:1fr;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.map-box iframe{

min-height:450px;

}

}

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

@media(max-width:768px){

.contact-hero{

padding:140px 0 80px;

}

.contact-left h1{

font-size:46px;

}

.contact-left p{

font-size:16px;

}

.contact-right img{

max-width:100%;

}

.form-box{

padding:30px;

}

.form-box h2{

font-size:34px;

}

.help-box{

padding:35px 25px;

}

.help-box h2{

font-size:30px;

}

.help-box p{

font-size:15px;

}

.hero-buttons,

.help-buttons{

flex-direction:column;

}

.hero-buttons a,

.help-buttons a{

width:100%;

}

}

/*==============================
SMALL PHONES
==============================*/

@media(max-width:480px){

.contact-left h1{

font-size:38px;

}

.section-title h2{

font-size:34px;

}

.contact-card{

padding:30px 22px;

}

.contact-icon{

width:70px;

height:70px;

font-size:28px;

}

.form-box{

padding:25px;

}

.map-box iframe{

min-height:350px;

}

.floating-buttons{

right:15px;

bottom:15px;

}

.float-call,
.float-whatsapp{

width:55px;

height:55px;

font-size:22px;

}

.footer-bottom{

text-align:center;

justify-content:center;

}

}