body{
    font-family:Arial;
    margin:0;
    color: #000b22;
    background: linear-gradient(90deg, rgba(148, 163, 231, 0.548)0%, hsl(0, 0%, 100%))50%;
}

.header{
    background: linear-gradient(90deg, hsl(0, 0%, 100%)0%, rgba(155, 155, 155, 0.548))50%;
    color:#020079;
    text-align:center;
    padding:15px;
    height: 150px;
    
}
.logo-title{
    font-family: 'Cinzel', serif;
    font-size: 70px;
    font-weight: 800;
    color: #163d63;
    letter-spacing: 3px;
    margin-top: -10px;
    opacity:0;
    transform:scale(0.8);
    animation:logoAppear 1.5s ease forwards;
}
.line{
    width:0;
    height:3px;
    background:#163d63;
    margin:-55px auto 0px auto;
    animation:lineGrow 1.2s ease forwards;
    animation-delay:1s;
}
.logo-subtitle{
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 600;
    color: #163d63;
    margin-top: 8px;
    letter-spacing: 1px;
    opacity:0;
    transform:translateY(20px);
    animation:subtitleAppear 1.5s ease forwards;
    animation-delay:1.6s;
}
.reseaux a img{
    border-radius: 70%;
    margin:0 15px 0 15px;
    width: 30px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.459);
}
.reseaux a img:hover{
    background: #0200798f;
    border: 1px solid #0004ff;
}

.line1{
    width:50px;
    height:3px;
    background:#163d63;
    margin:30px auto 0 auto;
    animation:lineGrow 1.2s ease forwards;
    animation-delay:1s;
}

/* animations */

@keyframes logoAppear{

    0%{
        opacity:0;
        transform:scale(0.7);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}

@keyframes lineGrow{

    0%{
        width:0;
    }

    100%{
        width:300px;
    }

}

@keyframes subtitleAppear{

    0%{
        opacity:0;
        transform:translateY(20px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }

}
.nav{
    background:#163d63;
    text-align:center;
    padding:15px;
}

.nav a{
    color:rgb(253, 253, 253);
    margin:10px;
    text-decoration:none;
    font-weight:bold;
}
.nav a:hover{
    color: aqua;
}

/* HERO */

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    background:linear-gradient(90deg, hsl(0, 0%, 100%)0%, rgba(0, 0, 0, 0.356))50%, url('../img/hero.png') no-repeat center/cover;
    flex-wrap:wrap;
    height: 250px;
    width: auto;

}

/* TEXTE */

.hero-text{
    max-width:550px;
}

.hero-text h2{
    font-size:34px;
    margin-bottom:15px;
    color: #163d63;
}

.hero-text p{
    margin-bottom:20px;
    background: #163c6381;
}
/* BTN HERO */
.btn{
  background:#163c63;
  color:white;
  padding:10px 20px;
  text-decoration:none;
  border-radius:5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.568);
}
.btn:hover{
    background: #ddd;
    color: #163c63;
    border: 1px solid #163c63;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.568);
}

/* INTRODUCTION */

.intro{
  display:grid;
}
.intro-img{
    padding: 10px;
    
}
.intro-img img{
    padding: 2px;
    height: auto;
    max-width: 580px;
    border-radius: 10%;
    box-shadow:0 5px 15px rgba(0, 0, 0, 0.534);
    background: #163c63af;
}
.intro-text{
    
    padding-left: 550px;
    margin-top: -350px;
    margin-right: 20px;
    color: white;
}
.intro-tex-contain{
background: #163c63bd;
padding: 40px;
border-radius: 10%;
box-shadow:0 5px 15px rgba(0, 0, 0, 0.534);
}

/* SERVICES */

.services{
    padding:15px 60px 60px 40px;
    text-align:center;
    
}

.services h2{
    margin-bottom:40px;
    font-size:30px;    
}

.service-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.service{
  background:#163c6381;
  padding:25px;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0, 0, 0, 0.349);
  transition:0.3s;

}

.service:hover{
transform:translateY(-5px);
}

.service h3{
  color:#020079;
  margin-bottom:10px;
}
.service P{
  color:#231651;
  margin-bottom:10px;
}

.service img{
    height: 150px;
}

/* MISSION */

.mission{
    background: #163d63;
    background-size: 30px 30px;
    color:white;
    text-align:center;
    padding: 10px 60px 60px 20px;
    clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
}

.mission p{
    max-width:700px;
    margin:auto;
    margin-top:15px;
}


/* STATS */

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    background:linear-gradient(90deg, rgba(0, 0, 0, 0.733)0%)50%, url('../img/mobile.jpg') no-repeat center/cover;
    padding:40px;
    text-align:center;
}

.stat h3{
    font-size:45px;
    color:#0a6ebd;
}

.stat p{
    font-weight:500;
    color: #ffffff;
    
}


/* TEMOIGNAGES */

.temoignages{
    padding:10px 20px;
    text-align:center;
}

.temoignage{
    background:white;
    padding:25px;
    margin:20px auto;
    max-width:600px;
    border-radius:10px;
    box-shadow:0 5px 10px rgba(0,0,0,0.1);
    color: #231651;
}
/* PARTENAIRES */

.partenaires{
    padding: 15px 60px 60px 20px;
    text-align:center;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.partenaires h2{
    margin-bottom:40px;
    font-size:30px;
    color: #231651;
}
.partenaire p{
    color: #231651;
}

.partenaire-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    max-width:1000px;
    margin:auto;
}

.partenaire{
    
    padding:25px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0, 0, 0, 0.596);
    transition:0.3s;
}

.partenaire:hover{
    transform:translateY(-5px);
}

.partenaire img{
width:120px;
margin-bottom:15px;
}

.partenaire h3{
margin-bottom:10px;
color:#0a6ebd;
}

.btn-partenaire{
display:inline-block;
margin-top:10px;
padding:10px 20px;
background:#0a6ebd;
color:white;
text-decoration:none;
border-radius:5px;
transition:0.3s;
}

.btn-partenaire:hover{
background:#094f8c;
}

/* --- SECTION ACTUALITÉS (SLIDER) --- */
.news-slider {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin-top: 20px;
}

.slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Le dégradé sur l'image */
.slide::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(22, 61, 99, 0.9));
}

.slide-content {
    position: absolute;
    bottom: 50px;
    left: 50px;
    color: white;
    z-index: 10;
    max-width: 600px;
}

/* GALERRIE */
.galerie{
padding:60px 20px;
text-align:center;
background:#f5f7fa;
}

.galerie-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
max-width:1200px;
margin:auto;
}

.galerie-container img{
width:100%;
height:200px;
object-fit:cover;
border-radius:10px;
transition:0.4s;
}

.galerie-container img:hover{
transform:scale(1.05);
}

/* SERVICES */

.team{

padding:10px 20px;

text-align:center;


}

.team-container{

display:grid;

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

gap:40px;

max-width:1100px;

margin:auto;

}


.doctor{


padding:20px;

border-radius:2px;

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

transition:0.3s;

}

.doctor:hover{

transform:translateY(-10px);

}

.doctor img{

width:100%;

border-radius:1px;

height:320px;

object-fit:cover;

}

/* --- SECTION CONTACT --- */

.contact-section {
    padding: 60px 20px;
    text-align: center;
}

.contact-container {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input, .contact-form textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.contact-form button {
    cursor: pointer;
    border: none;
}


/* FOOTER */

.footer{
background:linear-gradient(#163c63,#000000);
color:white;
padding:40px 20px;
}

.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-bottom:20px;
}

.footer a{
color:#ddd;
text-decoration:none;
}

.footer a:hover{
color:white;
}

.copyright{
text-align:center;
font-size:14px;
opacity:0.7;
}


/* RESPONSIVE */
@media(max-width:1030px){


.intro-text{
    
    padding-left: 30px;
    margin-top: -50px;
    margin-right: 80px;
    
}

.intro-img{
    padding-left: 20%;
    padding-right: 20%;
    width: 700px;
}

.intro-img img{
    height: 100%;
    width: 99%;
}

}
@media(max-width:860px){
.intro-img{
    padding-left: 10%;
}

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

.nav{
flex-direction:column;
align-items:center;
}
.hero h2{
font-size:28px;
}
.intro-img{
    padding-left: 5%;
}
.intro-text{
    
    padding-left: 30px;
    margin-right: 150px;
    
}

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

    .intro-img{
    padding-left: 12%;
}
    .intro-img img{
    height: 100%;
    width: 70%;
}

    .intro-text{
    
    padding-left: 60px;
    
    margin-right: 100px;
    
}
}
@media(max-width:694px){

    .intro-img{
    padding-left: 12%;
}
    .intro-img img{
    height: 100%;
    width: 60%;
}

    .intro-text{
    
    padding-left: 30px;
    
    margin-right: 130px;
    
}
}