/* ===========================
   Medical Line
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Cairo',sans-serif;
scroll-behavior:smooth;
}

body{
background:#f6f8fb;
color:#222;
overflow-x:hidden;
line-height:1.8;
}

.container{
width:90%;
max-width:1250px;
margin:auto;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

ul{
list-style:none;
}

section{
padding:90px 0;
}

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title span{

display:inline-block;
background:#e63946;
color:#fff;
padding:8px 20px;
border-radius:50px;
font-size:14px;
margin-bottom:15px;

}

.section-title h2{

font-size:42px;
font-weight:800;
margin-bottom:15px;

}

.section-title p{

color:#666;
font-size:17px;
max-width:700px;
margin:auto;

}
.header{

position:fixed;
top:0;
right:0;
width:100%;
background:#fff;
z-index:999;
box-shadow:0 8px 30px rgba(0,0,0,.08);

}

.header .container{

display:flex;
justify-content:space-between;
align-items:center;
height:90px;

}

.logo img{

width:170px;

}

.navbar ul{

display:flex;
gap:35px;

}

.navbar a{

font-size:17px;
font-weight:700;
color:#222;
transition:.3s;

}

.navbar a:hover,
.navbar a.active{

color:#e63946;

}

.header-btn a{

background:#e63946;
color:#fff;
padding:14px 28px;
border-radius:40px;
font-weight:bold;
transition:.4s;

}

.header-btn a:hover{

background:#c1121f;
transform:translateY(-3px);

}

.menu-btn{

display:none;
font-size:28px;
cursor:pointer;

}
.hero{

background:linear-gradient(135deg,#fff,#f4f8fb);
padding-top:180px;
padding-bottom:100px;

}

.hero-container{

display:flex;
align-items:center;
justify-content:space-between;
gap:60px;

}

.hero-content{

flex:1;

}

.hero-top{

display:inline-block;
background:#ffe8ea;
color:#e63946;
padding:10px 20px;
border-radius:50px;
font-weight:bold;
margin-bottom:25px;

}

.hero h1{

font-size:65px;
font-weight:900;
line-height:1.2;
margin-bottom:25px;

}

.hero h1 span{

color:#e63946;

}

.hero p{

font-size:20px;
color:#666;
margin-bottom:35px;
max-width:600px;

}

.hero-buttons{

display:flex;
gap:20px;
margin-bottom:45px;

}

.btn-red{

background:#e63946;
color:#fff;
padding:17px 40px;
border-radius:50px;
font-weight:bold;
transition:.4s;

}

.btn-red:hover{

transform:translateY(-5px);

}

.btn-yellow{

background:#ffd166;
color:#222;
padding:17px 40px;
border-radius:50px;
font-weight:bold;

}

.hero-image{

flex:1;
text-align:center;

}

.hero-image img{

width:95%;
animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}

}
/* =======================
   Services
======================= */

.services{
background:#fff;
}

.services-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;

}

.service-card{

background:#fff;
padding:40px 30px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.4s;
border-top:5px solid transparent;

}

.service-card:hover{

transform:translateY(-10px);
border-color:#e63946;
box-shadow:0 25px 45px rgba(230,57,70,.2);

}

.service-card i{

font-size:55px;
color:#e63946;
margin-bottom:20px;

}

.service-card h3{

font-size:24px;
margin-bottom:15px;

}

.service-card p{

color:#666;
font-size:16px;
margin-bottom:25px;

}

.service-card a{

display:inline-block;
background:#e63946;
color:#fff;
padding:12px 30px;
border-radius:40px;
transition:.3s;

}

.service-card a:hover{

background:#c1121f;

}
/* =======================
Why Us
======================= */

.why-us{

background:#f8fafc;

}

.why-us .container{

display:flex;
align-items:center;
justify-content:space-between;
gap:70px;

}

.why-image{

flex:1;

}

.why-image img{

border-radius:25px;

}

.why-content{

flex:1;

}

.why-content span{

color:#e63946;
font-weight:bold;

}

.why-content h2{

font-size:45px;
margin:15px 0;

}

.why-content p{

color:#666;
margin-bottom:35px;

}

.why-box{

display:flex;
align-items:center;
gap:20px;
margin-bottom:25px;
padding:20px;
background:#fff;
border-radius:15px;
box-shadow:0 10px 20px rgba(0,0,0,.05);

}

.why-box i{

width:65px;
height:65px;
background:#e63946;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;

}

.why-box h3{

margin-bottom:5px;

}
/* =======================
Counter
======================= */

.counter{

background:#e63946;
color:#fff;

}

.counter .container{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
text-align:center;

}

.counter-box{

padding:30px;

}

.counter-box h2{

font-size:55px;
margin-bottom:10px;

}

.counter-box p{

font-size:18px;

}
/* =======================
Specialties
======================= */

.specialties{

background:#fff;

}

.specialties-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;

}

.specialty-card{

background:#f7f9fc;
padding:35px;
text-align:center;
border-radius:20px;
transition:.4s;
cursor:pointer;

}

.specialty-card:hover{

background:#e63946;
color:#fff;
transform:translateY(-8px);

}

.specialty-card i{

font-size:45px;
margin-bottom:20px;
color:#e63946;
transition:.3s;

}

.specialty-card:hover i{

color:#fff;

}

.specialty-card h3{

font-size:20px;

}
/*========================
Testimonials
========================*/

.testimonials{

background:#f7f9fc;

}

.testimonial-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;

}

.testimonial-card{

background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-card img{

width:100px;
height:100px;
border-radius:50%;
object-fit:cover;
margin:auto;
margin-bottom:20px;
border:5px solid #e63946;

}

.testimonial-card h3{

font-size:24px;
margin-bottom:5px;

}

.testimonial-card span{

color:#888;
display:block;
margin-bottom:20px;

}

.testimonial-card p{

color:#666;
line-height:1.8;
margin-bottom:20px;

}

.stars{

color:#FFD700;
font-size:20px;

}
/*========================
Doctors
========================*/

.doctors{

background:#fff;

}

.doctor-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
gap:35px;

}

.doctor-card{

background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.4s;

}

.doctor-card:hover{

transform:translateY(-12px);

}

.doctor-card img{

width:100%;
height:340px;
object-fit:cover;

}

.doctor-card h3{

margin-top:25px;
text-align:center;
font-size:24px;

}

.doctor-card span{

display:block;
text-align:center;
color:#e63946;
margin:10px 0 20px;

}

.doctor-social{

display:flex;
justify-content:center;
gap:15px;
padding-bottom:30px;

}

.doctor-social a{

width:45px;
height:45px;
background:#f1f1f1;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#e63946;
transition:.3s;

}

.doctor-social a:hover{

background:#e63946;
color:#fff;

}
/*========================
Booking
========================*/

.booking{

background:linear-gradient(135deg,#e63946,#c1121f);
color:#fff;

}

.booking-content{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;

}

.booking-text h2{

font-size:46px;
margin:15px 0;

}

.booking form{

background:#fff;
padding:40px;
border-radius:20px;

}

.booking input,
.booking select,
.booking textarea{

width:100%;
padding:18px;
margin-bottom:20px;
border:1px solid #ddd;
border-radius:12px;
font-size:16px;
outline:none;

}

.booking textarea{

height:150px;
resize:none;

}

.booking button{

width:100%;
padding:18px;
border:none;
background:#e63946;
color:#fff;
font-size:18px;
font-weight:bold;
border-radius:12px;
cursor:pointer;
transition:.3s;

}

.booking button:hover{

background:#c1121f;

}
/*========================
Contact
========================*/

.contact{

background:#fff;

}

.contact-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;

}

.contact-card{

padding:35px;
background:#f8f9fb;
text-align:center;
border-radius:20px;
transition:.4s;

}

.contact-card:hover{

background:#e63946;
color:#fff;

}

.contact-card i{

font-size:45px;
margin-bottom:20px;
color:#e63946;

}

.contact-card:hover i{

color:#fff;

}
/*========================
Footer
========================*/

footer{

background:#101820;
color:#fff;
padding:80px 0 20px;

}

.footer-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;

}

.footer-logo{

width:180px;
margin-bottom:20px;

}

footer p{

color:#ddd;
line-height:1.9;

}

footer h3{

font-size:24px;
margin-bottom:25px;
position:relative;

}

footer h3::after{

content:'';
position:absolute;
bottom:-10px;
right:0;
width:60px;
height:3px;
background:#e63946;

}

footer ul li{

margin-bottom:15px;

}

footer ul li a{

color:#ddd;
transition:.3s;

}

footer ul li a:hover{

color:#fff;
padding-right:8px;

}

.footer-social{

display:flex;
gap:15px;
margin-top:20px;

}

.footer-social a{

width:45px;
height:45px;
background:#fff;
color:#e63946;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:.3s;

}

.footer-social a:hover{

background:#e63946;
color:#fff;
transform:translateY(-5px);

}

footer hr{

margin:50px 0 25px;
border:none;
height:1px;
background:#333;

}

.copyright{

text-align:center;
font-size:15px;
color:#bbb;

}
.map iframe{

width:100%;
height:450px;
border:0;

}
#topBtn{

position:fixed;
bottom:30px;
left:30px;
width:60px;
height:60px;
border:none;
border-radius:50%;
background:#e63946;
color:#fff;
font-size:22px;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.25);
transition:.4s;
z-index:999;

}

#topBtn:hover{

transform:translateY(-8px);
background:#c1121f;

}
.service-card,
.specialty-card,
.doctor-card,
.testimonial-card,
.contact-card,
.why-box{

transition:.5s ease;

}

.service-card:hover,
.specialty-card:hover,
.doctor-card:hover,
.testimonial-card:hover{

transform:translateY(-12px);

}
@media(max-width:992px){

.hero-container,
.booking-content,
.why-us .container{

flex-direction:column;
display:flex;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;
flex-wrap:wrap;

}

.hero-info{

justify-content:center;
flex-wrap:wrap;

}

.navbar{

display:none;

}

.menu-btn{

display:block;

}

.counter .container{

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

}

}

@media(max-width:768px){

.hero h1{

font-size:42px;

}

.section-title h2{

font-size:32px;

}

.counter .container{

grid-template-columns:1fr;

}

.booking form{

padding:25px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

footer h3::after{

right:50%;
transform:translateX(50%);

}

.footer-social{

justify-content:center;

}

}
.navbar.show{

display:block;
position:absolute;
top:90px;
right:0;
width:100%;
background:#fff;
padding:25px;
box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.navbar.show ul{

display:flex;
flex-direction:column;
gap:20px;

}
.hidden{

opacity:0;
transform:translateY(60px);
transition:.8s ease;

}

.show{

opacity:1;
transform:translateY(0);

}
/* ============================
   FINAL FIX
============================ */

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
}

/* الصور */
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* جميع الأقسام */
section{
    padding:80px 0;
}

/* منع أي فراغ أبيض */
.hero,
.services,
.why-us,
.specialties,
.doctors,
.booking,
.contact,
footer{
    width:100%;
}

/* الحاوية */
.container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

/* Grid */
.services-grid,
.specialties-grid,
.doctor-grid,
.testimonial-grid,
.contact-grid{

    display:grid;
    gap:30px;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

}

/* Hover احترافي */

.service-card,
.specialty-card,
.doctor-card,
.testimonial-card,
.contact-card{

transition:.35s;

}

.service-card:hover,
.specialty-card:hover,
.doctor-card:hover,
.testimonial-card:hover,
.contact-card:hover{

transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,.15);

}

/* الأزرار */

button,
.btn-red,
.btn-yellow{

transition:.3s;

}

button:hover,
.btn-red:hover,
.btn-yellow:hover{

transform:translateY(-4px);

}

/* Responsive */

@media(max-width:992px){

.container{

width:95%;

}

.hero-container,
.booking-content,
.why-us .container{

display:flex;
flex-direction:column;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;
flex-wrap:wrap;

}

.hero-info{

justify-content:center;

}

.hero-image{

margin-bottom:30px;

}

.counter .container{

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

}

}

@media(max-width:768px){

.hero{

padding-top:140px;

}

.hero h1{

font-size:38px;

}

.section-title h2{

font-size:30px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;
align-items:center;

}

.hero-buttons a{

width:100%;
max-width:320px;
text-align:center;

}

.counter .container{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-social{

justify-content:center;

}

}
/* ===== HERO FIX ===== */

.hero{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:100vh !important;
}

.hero-container{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:center !important;
    gap:60px !important;
    width:90% !important;
    max-width:1300px !important;
    margin:auto !important;
}

.hero-content{
    width:100% !important;
    max-width:600px !important;
}

.hero-image{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}

.hero-image img{
    width:100% !important;
    max-width:600px !important;
    height:auto !important;
}

.hero-info{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(180px,1fr)) !important;
    gap:20px !important;
    margin-top:35px !important;
}

.hero-info div{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:15px !important;
    background:#fff !important;
    border-radius:15px !important;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.hero-info h3{
    font-size:18px !important;
    margin:0 0 5px !important;
}

.hero-info p{
    margin:0 !important;
    color:#666 !important;
    font-size:14px !important;
}

@media(max-width:992px){

.hero-container{
    grid-template-columns:1fr !important;
    text-align:center;
}

.hero-image{
    order:-1;
}

.hero-info{
    grid-template-columns:1fr !important;
}

}
/* ===== FIX HERO INFO ===== */

.hero-info{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:20px !important;
    margin-top:40px !important;
    width:100% !important;
}

.hero-info > div{
    display:flex !important;
    align-items:center !important;
    gap:15px !important;

    background:#fff !important;
    padding:20px !important;
    border-radius:18px !important;

    border:1px solid #eee !important;
    box-shadow:0 10px 25px rgba(0,0,0,.08) !important;

    transition:.3s;
}

.hero-info > div:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 35px rgba(230,57,70,.18);
}

.hero-info > div i{
    width:55px !important;
    height:55px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50%;
    background:#e63946;
    color:#fff;
    font-size:22px;
    flex-shrink:0;
}

.hero-info > div h3{
    margin:0 0 6px;
    font-size:20px;
    color:#222;
}

.hero-info > div p{
    margin:0;
    color:#666;
    font-size:15px;
}

@media(max-width:768px){

.hero-info{
    grid-template-columns:1fr !important;
}

}
/* ===== Hero Info ===== */

.hero-info{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
    flex-wrap:wrap;
    margin-top:40px;
}

.hero-info > div{
    width:260px;
    min-height:90px;

    background:#fff;
    border-radius:18px;

    display:flex;
    align-items:center;
    gap:15px;

    padding:20px;

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

    transition:.3s;
}

.hero-info > div:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(230,57,70,.18);
}

.hero-info i{
    width:55px;
    height:55px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#e63946;
    color:#fff;

    border-radius:50%;
    font-size:22px;
    flex-shrink:0;
}

.hero-info p{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#222;
    line-height:1.6;
}

@media(max-width:768px){

.hero-info{
    flex-direction:column;
}

.hero-info > div{
    width:100%;
}

}
/*==============================
 FEATURES SECTION
==============================*/

.features{
    margin-top:-70px;
    position:relative;
    z-index:10;
    padding:0 0 80px;
}

.features .container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.feature-box{
    background:#fff;
    padding:35px 25px;
    text-align:center;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
    border-top:5px solid transparent;
}

.feature-box:hover{
    transform:translateY(-10px);
    border-top:5px solid #e63946;
    box-shadow:0 20px 40px rgba(230,57,70,.18);
}

.feature-box i{
    width:75px;
    height:75px;
    background:#fff3f3;
    color:#e63946;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 20px;
    font-size:30px;
    transition:.3s;
}

.feature-box:hover i{
    background:#e63946;
    color:#fff;
}

.feature-box h3{
    font-size:23px;
    margin-bottom:12px;
    color:#222;
    font-weight:700;
}

.feature-box p{
    color:#666;
    font-size:16px;
    line-height:1.8;
    margin:0;
}

/*==============================
 Responsive
==============================*/

@media(max-width:992px){

.features .container{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.features .container{
    grid-template-columns:1fr;
}

.feature-box{
    padding:30px 20px;
}

}
/* ===== Hero Logo ===== */

.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image img{

    width:100%;
    max-width:480px;   /* حجم اللوجو */

    background:#fff;

    padding:25px;

    border-radius:25px;

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

    transition:.4s;

    object-fit:contain;

}

.hero-image img:hover{

    transform:scale(1.03);

    box-shadow:0 30px 60px rgba(230,57,70,.18);

}

@media(max-width:992px){

.hero-image img{

    max-width:330px;

    margin-bottom:40px;

}

}
/* ===== Navbar Logo ===== */

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    width:85px !important;
    height:auto !important;
    object-fit:contain;
    transition:.3s;
}

.logo img:hover{
    transform:scale(1.05);
}

@media(max-width:768px){

.logo img{
    width:110px !important;
}

}
/* ==========================
   Mobile Fix
========================== */

@media (max-width:768px){

.hero{
    padding-top:120px;
    padding-bottom:60px;
}

.hero-container{
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    text-align:center;
    gap:30px;
}

.hero-content{
    width:100%;
}

.hero h1{
    font-size:38px;
    line-height:1.4;
}

.hero p{
    font-size:17px;
    margin:20px auto;
    max-width:95%;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
    align-items:center;
}

.hero-buttons a{
    width:90%;
    max-width:320px;
}

.hero-image{
    width:100%;
    display:flex;
    justify-content:center;
}

.hero-image img{
    width:220px !important;
    max-width:220px !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
}

.hero-info{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.hero-info > div{
    width:100%;
}

.features .container,
.services-grid,
.specialties-grid,
.doctor-grid,
.testimonial-grid,
.contact-grid{
    grid-template-columns:1fr !important;
}

.header .container{
    height:75px;
}

.logo img{
    width:90px !important;
}

.header-btn a{
    padding:10px 18px;
    font-size:14px;
}

}
/* ===== Hero Background Ambulance ===== */

.hero{
    position:relative;
    overflow:hidden;
}

.hero-bg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:900px;
    z-index:0;
    pointer-events:none;
}

.hero-bg img{
    width:100%;
    opacity:.08;       /* شفافية */
    filter:grayscale(100%);
}

.hero-container{
    position:relative;
    z-index:2;
}