/*=====================================
 NOVA Diagnostics - Premium CSS
 Part 1
======================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#f7f9fc;
color:#222;
line-height:1.6;
overflow-x:hidden;
}

.container{
width:92%;
max-width:1300px;
margin:auto;
}

/*======================
TOP BAR
=======================*/

.topbar{
background:#0b4ea2;
color:#fff;
padding:10px 0;
font-size:14px;
}

.topbar .container{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}

.topbar a{
color:#fff;
text-decoration:none;
margin-left:18px;
}

.topbar i{
margin-right:6px;
}

/*======================
HEADER
=======================*/

header{
background:#fff;
position:sticky;
top:0;
z-index:999;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

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

.logo img{
height:80px;
width:auto;
display:block;
transition:.3s;
}

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

nav ul{
display:flex;
gap:30px;
list-style:none;
}

nav ul li a{
text-decoration:none;
font-weight:600;
color:#222;
transition:.3s;
}

nav ul li a:hover{
color:#0b4ea2;
}

.nav-btn{
display:flex;
gap:15px;
}

.btn-primary{

background:#0b4ea2;
color:#fff;
padding:14px 28px;
border-radius:40px;
text-decoration:none;
font-weight:600;
transition:.3s;
display:inline-block;

}

.btn-primary:hover{

background:#083b79;

}

.btn-outline{

border:2px solid #0b4ea2;
padding:13px 28px;
border-radius:40px;
text-decoration:none;
font-weight:600;
color:#0b4ea2;
transition:.3s;

}

.btn-outline:hover{

background:#0b4ea2;
color:#fff;

}

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

.hero{

background:linear-gradient(135deg,#0b4ea2,#4f86d9);

padding:90px 0;

color:#fff;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr 420px;

align-items:center;

gap:50px;

}

.hero-image{

text-align:center;

}

.hero-image img{

width:100%;
max-width:420px;

animation:float 4s ease-in-out infinite;

filter:drop-shadow(0 25px 35px rgba(0,0,0,.25));

}

.hero-content span{

color:#7ee4ff;

font-weight:600;

letter-spacing:2px;

font-size:14px;

}

.hero-content h1{

font-size:62px;

font-weight:800;

line-height:1.08;

margin:18px 0;

}

.hero-content p{

font-size:18px;

color:#e9f3ff;

max-width:650px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

}

.btn-outline-light{

border:2px solid #fff;

padding:14px 28px;

border-radius:40px;

text-decoration:none;

color:#fff;

font-weight:600;

transition:.3s;

}

.btn-outline-light:hover{

background:#fff;

color:#0b4ea2;

}

.hero-stats{

display:grid;

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

gap:20px;

margin-top:25px;

}

.hero-stats div{

background:rgba(255,255,255,.12);

backdrop-filter:blur(10px);

padding:25px;

border-radius:18px;

text-align:center;

transition:.3s;

}

.hero-stats div:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.2);

}

.hero-stats h3{

font-size:34px;

font-weight:800;

margin-bottom:6px;

}

.hero-stats p{

margin:0;

font-size:15px;

}

/*======================
BOOKING CARD
=======================*/

.appointment-box{

background:#fff;

padding:35px;

border-radius:24px;

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

}

.appointment-box h2{

color:#0b4ea2;

margin-bottom:25px;

font-size:34px;

}

.appointment-box input,

.appointment-box select{

width:100%;

padding:16px;

border:1px solid #ddd;

border-radius:12px;

margin-bottom:18px;

font-size:15px;

font-family:Poppins;

}

.appointment-box input:focus,

.appointment-box select:focus{

outline:none;

border-color:#0b4ea2;

}

.appointment-box button{

width:100%;

padding:18px;

border:none;

background:#0b4ea2;

color:#fff;

font-size:18px;

border-radius:12px;

cursor:pointer;

font-weight:700;

transition:.3s;

}

.appointment-box button:hover{

background:#083b79;

}

/*======================
ANIMATION
=======================*/

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/*======================
RESPONSIVE
=======================*/

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

}

.hero-image{

order:2;

}

.appointment-box{

order:3;

}

.hero-content{

order:1;

}

.hero-stats{

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

}

}

@media(max-width:768px){

nav{

display:none;

}

.nav-btn{

display:none;

}

.hero-content h1{

font-size:42px;

}

.hero-stats{

grid-template-columns:1fr;

}

.topbar .container{

flex-direction:column;

gap:10px;

}

}