/* =============================================
   CUSTOM.CSS - VERSION COMPLÈTE & IDENTIQUE
   (Style + Responsive + Font Awesome minimal)
   ============================================= */

/* ==================== FONT AWESOME MINIMAL ==================== */
@font-face {
	font-family: 'FontAwesome';
	src: url('../font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
	src: url('../font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
	     url('../font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
	     url('../font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
	     url('../font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
	     url('../font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* --- Style pour l'icône dans un cercle bleu --- */
.icon {
    width: 130px;
    height: 130px;
    background-color: #009bdb; /* Ton bleu */
    border-radius: 50%;
    margin: 0 auto 20px; /* Centre le bloc */

    /* Centrage de ce qui est à l'intérieur */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Important pour que l'image ne dépasse pas du cercle */
}

/* On force l'image à se centrer sans déformation */
.icon img {
    width: 50px;       /* Taille de l'image (ajuste si besoin) */
    height: 50px;
    object-fit: contain; /* Garde les proportions */
}

.btn-rdv {
    background-color: #009bdb; /* Ton bleu officiel */
    color: #ffffff;            /* Texte blanc */
    border: 2px solid #009bdb; /* Bordure bleue */
    padding: 12px 25px;        /* Espacement interne */
    font-weight: 700;          /* Texte gras */
    text-transform: uppercase; /* Texte en majuscules */
    text-decoration: none;     /* Supprime le soulignement */
    transition: all 0.3s ease; /* Animation fluide au survol */
    display: inline-block;
    border-radius: 4px;        /* Bords légèrement arrondis */
}

/* Effet au survol (quand on passe la souris dessus) */
.btn-rdv:hover {
    background-color: #ffffff; /* Fond devient blanc */
    color: #009bdb;            /* Texte devient bleu */
    border-color: #009bdb;     /* Bordure reste bleue */
    text-decoration: none;
}

.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.fa-bars:before { content: "\f0c9"; }
.fa-heartbeat:before { content: "\f21e"; }
.fa-home:before { content: "\f015"; }
.fa-phone:before { content: "\f095"; }
.fa-user-md:before { content: "\f0f0"; }
.fa-stethoscope:before { content: "\f0f1"; }
.fa-flask:before { content: "\f0c3"; }
.fa-comments-o:before { content: "\f0e6"; }
.fa-plus-square:before { content: "\f0fe"; }
.fa-phone-square:before { content: "\f098"; }
.fa-plus:before { content: "\f067"; }
.fa-minus:before { content: "\f068"; }

/* ==================== STYLE PRINCIPAL ==================== */
body { font: 14px/24px 'Roboto', Arial, Helvetica, sans-serif; color: #232323; background: #fff; }
a { color: #009bdb; } a:hover, a:focus { color: #057cad; }

h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; }
h1 { font-size: 45px; } h2 { font-size: 42px; } h3 { font-size: 36px; } h4 { font-size: 24px; } h5 { font-size: 18px; }

.main-heading1 { color: #323232; }
.main-heading2 { padding-bottom: 15px; position: relative; color: #009bdb; }
.main-heading2:after { content: ""; position: absolute; width: 170px; height: 2px; left: 0; bottom: 0; background-color: #009bdb; }
.main-heading2.text-center:after { left: 0; right: 0; margin: 0 auto; }
.lite { font-weight: 300; }

/* Top Bar & Navbar */
.top-bar { padding: 15px 0; border-bottom: 1px solid #d3d3d3; }
.top-bar, .top-bar a { color: #8d8d8d; }
.top-bar span { color: #313131; }
.top-bar ul { text-align: right; }
.top-bar li { padding: 0 15px; border-right: 1px solid #d3d3d3; }
.top-bar li:last-child { border: none; }

#nav { padding-bottom: 20px; text-transform: uppercase; }
#nav .navbar-brand { padding-top: 33px; color: #009bdb; font-size: 30px; font-weight: 500; }
#nav .navbar-brand .fa { margin-right: 10px; font-size: 42px; }
#nav .nav-link { color: #313131; font-size: 15px; }
#nav .nav-item:hover > .nav-link,
#nav .nav-item.active > .nav-link { color: #009bdb; }

/* Notification Boxes */
.notification-boxes .box { padding: 30px; color: #fff; background-color: #009bdb; text-align: center; }
.notification-boxes .box .fa { font-size: 72px; margin-bottom: 5px; }

/* Welcome Area */
.welcome-area { margin-top: 40px; color: #8d8d8d; }

/* Main Banner (IMPORTANT pour faqs.html) */
.main-banner { padding: 130px 0 70px; }
.main-banner.four { background: url(../images/banners/banner-img4.jpg) center top no-repeat; background-size: cover; }
.main-banner h2 { color: #323232; }
.main-banner h2 span { padding: 20px 50px 16px 30px; background: rgba(255,255,255,0.8); letter-spacing: 0.3px; }

/* Breadcrumb */
.breadcrumb { padding: 25px 0 20px; background-color: #f1f1f1; }

/* Featured Doctors */
.featured-doctors { padding: 70px 0; background-color: #009bdb; text-align: center; }
.featured-doctors h2 { color: #fff; }
.featured-doctors .bio-box { margin-top: 40px; background: #fff; }
.featured-doctors .bio-box .profile-img { position: relative; }
.featured-doctors .bio-box .inner { padding: 30px 20px 10px; }
.featured-doctors .bio-box h5 { font-weight: bold; color: #323232; }
.featured-doctors .bio-box .designation { color: #323232; }
.featured-doctors .bio-box p { color: #8d8d8d; font-size: 13px; line-height: 22px; }
.featured-doctors .bio-box .divider { margin: 5px 0 10px; position: relative; }
.featured-doctors .bio-box .divider:before { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: #009bdb; top: 50%; }

/* Medical Services */
.medical-services .icon img { width: 130; height: 130;}

/* Book Appointment */
.book-appointment-box { background: #009bdb; padding: 30px; color: #fff;}

/* Accordion FAQ */
#accordion-faqs .card-header { padding: 15px; }
#accordion-faqs .card-title a { color: #323232; font-weight: normal; }

/* Footer */
.footer-area { padding: 50px 0; background: #313131; color: #8d8d8d; }
.footer-area h4 { color: #fff; position: relative; padding-bottom: 20px; }
.footer-area h4:after { content: ""; position: absolute; width: 69px; height: 2px; left: 0; bottom: 0; background: #009bdb; }

/* Generic */
.img-style1 { border: 1px solid #e6e6e6; }
.img-center-sm, .img-center-xs, .img-center-md, .img-center-lg { margin-left: auto; margin-right: auto; }
.justify-content-centre { justify-content: center; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 575px) {
	#nav .navbar-brand { font-size: 15px; }
	.main-banner h2 { display: none; }
	.book-appointment-box { margin-top: 20px; padding: 20px 15px; }
}

@media (min-width: 576px) and (max-width: 767px) {
	.book-appointment-box { margin-top: 30px; }
}

@media (min-width: 992px) {
	#nav .container-fluid { padding-right: 0; }
}

/* Force le bouton du menu à droite sur mobile */
@media (max-width: 991px) {
    .navbar {
        display: flex;
        justify-content: space-between; /* Espace le logo à gauche et le bouton à droite */
        align-items: center;
    }

    .navbar-toggler {
        margin-left: auto; /* Pousse le bouton vers la droite */
        margin-right: 0;

    }
}

/* Personnalisation du bouton menu hamburger */
.navbar-toggler {
    padding: 10px 15px; /* Augmente la zone cliquable du bouton */
    border: 1px solid #009bdb; /* Ajoute une bordure pour bien le voir */
    border-radius: 4px;
}

/* Agrandissement de l'icône elle-même */
.navbar-toggler .fa-bars {
    font-size: 28px; /* Augmente la taille de l'icône (ajuste selon ton goût) */
    color: #009bdb; /* Assure-toi qu'elle garde la couleur bleue du cabinet */
}