/*==================================================
CLINIQUE BIR MOURAD RAIS
COMING SOON
SRTCOM
==================================================*/

:root{

--primary:#1E4F9B;
--secondary:#4F86D9;
--light:#F6F9FF;
--white:#ffffff;
--text:#263238;
--shadow:0 20px 60px rgba(0,0,0,.12);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#eef5ff;
color:var(--text);
overflow-x:hidden;

}

/******************************************
HEADER
******************************************/

.header{

position:absolute;
top:0;
left:0;
width:100%;
z-index:999;

padding:20px 0;

}

.navbar{

padding:0;

}

.navbar-brand img{

height:90px;
transition:.4s;

}

.navbar-brand img:hover{

transform:scale(1.05);

}

/******************************************
SOCIAL
******************************************/

.social-icons{

display:flex;
gap:15px;

}

.social-icons a{

width:48px;
height:48px;

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

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

backdrop-filter:blur(20px);

border-radius:50%;

color:#fff;

font-size:18px;

transition:.35s;

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

}

.social-icons a:hover{

background:white;

color:var(--primary);

transform:translateY(-5px);

}

/******************************************
HERO
******************************************/

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

background:url("../assets/hero.jpg") center center;

background-size:cover;

background-repeat:no-repeat;

overflow:hidden;

}

.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

rgba(14,51,112,.90),

rgba(14,51,112,.55),

rgba(14,51,112,.25)

);

}

/******************************************
TEXT
******************************************/

.hero .container{

position:relative;
z-index:5;

}

.subtitle{

color:#b6d3ff;

font-weight:600;

letter-spacing:4px;

margin-bottom:20px;

}

.hero h1{

font-size:64px;

font-weight:700;

line-height:1.15;

color:white;

margin-bottom:25px;

max-width:700px;

}

.hero p{

font-size:20px;

line-height:34px;

max-width:650px;

color:#d9e8ff;

margin-bottom:45px;

}

/******************************************
COUNTDOWN
******************************************/

#countdown{

display:flex;

gap:20px;

margin-bottom:45px;

flex-wrap:wrap;

}

.time-box{

width:120px;

height:120px;

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

backdrop-filter:blur(25px);

border-radius:24px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:white;

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

box-shadow:var(--shadow);

transition:.35s;

}

.time-box:hover{

transform:translateY(-8px);

}

.time-box span{

font-size:42px;

font-weight:700;

}

.time-box small{

font-size:14px;

letter-spacing:1px;

text-transform:uppercase;

opacity:.85;

}

/******************************************
BUTTONS
******************************************/

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-whatsapp{

background:#25D366;

color:white;

padding:18px 40px;

border-radius:50px;

font-weight:600;

text-decoration:none;

transition:.3s;

box-shadow:0 15px 35px rgba(37,211,102,.35);

}

.btn-whatsapp:hover{

transform:translateY(-4px);

color:white;

}

.btn-call{

background:white;

color:var(--primary);

padding:18px 40px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.btn-call:hover{

background:#dfefff;

}

/******************************************
CONTACT
******************************************/

.contact{

padding:110px 0;

background:var(--light);

}

.contact-card{

background:white;

padding:45px;

border-radius:30px;

text-align:center;

box-shadow:var(--shadow);

transition:.4s;

height:100%;

}

.contact-card:hover{

transform:translateY(-12px);

}

.contact-card i{

font-size:48px;

color:var(--primary);

margin-bottom:20px;

}

.contact-card h4{

font-weight:700;

margin-bottom:15px;

}

.contact-card p{

font-size:17px;

line-height:30px;

margin:0;

}

/******************************************
FOOTER
******************************************/

footer{

background:#16396d;

padding:45px 0;

color:white;

}

.footer-logo{

height:80px;

margin-bottom:20px;

}

/******************************************
RESPONSIVE
******************************************/

@media(max-width:991px){

.hero{

text-align:center;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

#countdown{

justify-content:center;

}

.hero-buttons{

justify-content:center;

}

.navbar{

justify-content:center;

}

.social-icons{

margin-top:20px;

justify-content:center;

}

}

@media(max-width:768px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:34px;

}

.time-box{

width:90px;

height:90px;

}

.time-box span{

font-size:30px;

}

.contact{

padding:70px 0;

}

.contact-card{

margin-bottom:25px;

}

}

/*==========================================
ANIMATION DU COMPTEUR
==========================================*/

.flip{

animation:flip .4s ease;

}

@keyframes flip{

0%{

transform:scale(.7);
opacity:.4;

}

100%{

transform:scale(1);
opacity:1;

}

}

/****************************************/

.launch-message{

padding:30px 50px;

border-radius:25px;

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

backdrop-filter:blur(20px);

color:white;

font-size:28px;

font-weight:600;

}