/*
Theme Name: Best Doctors Bangladesh
Author: Your Name
Version: 1.0
*/

/* General body styles */
html,body{
overflow-x:hidden;
}


.container,
.wrapper,
section{
max-width:100%;
overflow:hidden;
}


*{
box-sizing:border-box;
}

body {
    font-family: "Roboto", sans-serif;
    background:#e9eff6;
    margin:0;
    line-height: 1.6; /* Adds spacing between lines in paragraphs */
}

/* body {
  user-select: none;
}

input, textarea {
  user-select: auto;
} */

/* h1 styling */
h1 {
    font-size: 2.5em; /* Larger font size */
    font-weight: bold;
    margin-top: 0; /* Remove default top margin for the main title */
    margin-bottom: 20px;
    padding-bottom: 10px;
    line-height: 1;
    color: #222;
}

/* h2 styling */
h2 {
    font-size: 2em;
    line-height: 1.3; /* Adds spacing between lines in paragraphs */   
    margin: 0px;
    padding: 0px;
    color: #222;
}

/* h3 styling */
h3 {
    font-size: 1.2em;
    line-height: 1.4;
    margin: 0px;
    padding: 0px;
        color: #222;
}

/* h4 styling */
h4 {
    font-size: 1.1em;
    font-weight: bold; /* Make h4 less bold */
    line-height: 1.5;
    margin: 0px;
    padding: 0px;
    color: #222;
}

/* Paragraph styling */
p {
    font-size: 1em; /* Default font size */
    line-height: 1.6; /* Adds spacing between lines in paragraphs */
    color: #555;
    margin: 0;
}
.mb5{
    margin-bottom: 5px;
}
.mb7{
    margin-bottom: 7px;
}
.mb3{
    margin-bottom: 3px;
}
.mb9{
    margin-bottom: 9px;
}

@media (max-width:480px) {

    h1 {
        font-size: 1.4em !important;
    }

    h2 {
        font-size: 1.1em;
    }
    h3 {
        font-size: 1.1em;
    }
    
}



.container{
width:95%;
max-width:1200px;
margin:auto;
}
/* header css  */
.main-header{

background:#e9eff6;

padding:2px 0;

border-bottom:1px solid #ddd;

}


.container{

width:95%;

max-width:1150px;

margin:auto;

}


.header-flex{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

}


.logo-img{

height:55px;

}


.search-area{

flex:1;

display:flex;

justify-content:flex-end;

}


.search-area form{

display:flex;

width:100%;

max-width:420px;

background:white;

border-radius:8px;

overflow:hidden;

box-shadow:0 2px 6px rgba(0,0,0,0.05);

}


.search-input{

flex:1;

border:none;

padding:12px 15px;

font-size:14px;

outline:none;

}


.search-btn{

background:#1976d2;

color:white;

border:none;

padding:0 18px;

cursor:pointer;

font-size:16px;

}


.search-btn:hover{

background:#125bb5;

}



@media(max-width:768px){

.header-flex{

flex-direction:column;

/* align-items:flex-start; */
align-items: center;

}


.search-area{

width:100%;

}


.search-area form{

max-width:100%;

}


.logo-img{

height:48px;

}

}


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

.specialist-card{
background:white;
padding:20px;
border-radius:8px;
text-decoration:none;
color:black;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.doctor-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:20px;
}

.doctor-card{
background:white;
padding:15px;
border-radius:8px;
text-align:center;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.doctor-card img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
}


.hospital-card h1{
    font-size: 1.5em;
}

.hospital-card h2{
    font-size: 1.2em;
}

.main-footer{

background:linear-gradient(180deg,#2c3e50,#243447);

color:white;

padding:50px 0 20px;

margin-top:40px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

}

.footer-logo{

height:55px;

margin-bottom:15px;

}

.footer-col h3{

margin-bottom:15px;

font-size:18px;

color: white;

}

.footer-col ul{

list-style:none;

padding:0;

margin:0;

}

.footer-col ul li{

margin-bottom:8px;

}

.footer-col a{

color:#cfe6ff;

text-decoration:none;

font-size:14px;

}

.footer-col a:hover{

color:white;

}

.footer-contact{

font-size:14px;

color:#cbd5e1;

line-height:1.8;

}

.doctor-btn{

background:#2d8cff;

color:white;

padding:12px 18px;

border-radius:6px;

display:inline-block;

margin-top:10px;

font-size:14px;

}

.doctor-btn:hover{

background:#1f6fd1;

}

.footer-bottom{

text-align:center;

margin-top:30px;

font-size:13px;

color:#9fb3c8;

border-top:1px solid rgba(255,255,255,0.08);

padding-top:15px;

}



@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}


@media(max-width:600px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:auto;

}

}


.doctor-profile{
display:flex;
gap:30px;
background:white;
padding:20px;
border-radius:8px;
margin-top:20px;
}

.doctor-left img{
width:180px;
height:180px;
border-radius:50%;
object-fit:cover;
}

.doctor-right{
flex:1;
}

.about-doctor{
background:white;
padding:20px;
margin-top:20px;
border-radius:8px;
}

.appointment-form{
background:white;
padding:20px;
margin-top:20px;
border-radius:8px;
}

.appointment-form input,
.appointment-form textarea{

width:100%;

padding:12px;

margin-bottom:12px;

border-radius:6px;

border:1px solid #ddd;

font-size:14px;

}

.appointment-form button{

background:#0d6efd;

color:white;

padding:12px;

border:none;

border-radius:6px;

width:100%;

font-size:15px;

cursor:pointer;

}


.modal{

display:none;

position:fixed;

z-index:9999;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.6);

}


.modal-content{

background:white;

width:90%;

max-width:420px;

margin:8% auto;

padding:25px;

border-radius:10px;

box-shadow:0 5px 20px rgba(0,0,0,0.2);

}


.close{

float:right;

font-size:22px;

cursor:pointer;

}


.appointment-form input,
.appointment-form textarea{

width:100%;

padding:12px;

margin-bottom:12px;

border-radius:6px;

border:1px solid #ddd;

}


.appointment-form button{

background:#0d6efd;

color:white;

padding:12px;

border:none;

border-radius:6px;

width:100%;

font-weight:600;

}


.book-btn{

background:#0d6efd;

color:white;

padding:10px 18px;

border-radius:6px;

display:inline-block;

cursor:pointer;

}



.specialist-card{

background:white;

padding:18px;

border-radius:8px;

display:block;

text-decoration:none;

color:#333;

font-weight:600;

box-shadow:0 2px 8px rgba(0,0,0,0.08);

transition:0.3s;

}

.specialist-card:hover{

transform:translateY(-3px);

box-shadow:0 5px 15px rgba(0,0,0,0.12);

}


.view-btn{

display:inline-block;

margin-top:10px;

padding:8px 15px;

background:#0d6efd;

color:white;

border-radius:5px;

text-decoration:none;

font-size:14px;

}

.hospital-profile{

background:white;
padding:20px;
border-radius:8px;
margin-top:20px;

}

.hospital-profile img{

width:100%;
max-width:400px;
border-radius:8px;
margin-top:10px;

}
.Hospital_wise{
	text-align: center;
	margin-top: 20px;
}

.star-rating{

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

}



.specialist-list{

margin-top:20px;

}

.specialist-item{

display:flex;

align-items:center;

gap:15px;

background:white;

padding:6px 10px;

margin-bottom:15px;

border-radius:10px;

text-decoration:none;

color:#222;

box-shadow:0 2px 8px rgba(0,0,0,0.08);

transition:0.3s;

}

.specialist-item:hover{

transform:translateY(-2px);

box-shadow:0 5px 18px rgba(0,0,0,0.12);

}

.spec-icon{

font-size:28px;

background:#f1f5ff;

padding:12px;

border-radius:50%;

}

.spec-box h2 {
    font-size: 1.2em;
    margin: 0px;
}


.spec-box p {
    margin: 0px;
}

.specialist-item:hover .spec-box h2{
    text-decoration: underline;
}

.specialist-item:hover .spec-box p{
    text-decoration: underline;
}

.doctor-box{

display:flex;
gap:30px;
background:white;
padding:25px;
border-radius:10px;
margin-top:20px;

}

.doctor-img img{

width:150px;
height:150px;
border-radius:50%;

}

.spec{

color:red;
font-size:14px;

}

.btn-book{

background:#0d6efd;
color:white;
padding:10px 18px;
border-radius:6px;
display:inline-block;
margin-top:10px;

}

.chamber-box{

background:white;
padding:20px;
border-radius:10px;
margin-top:20px;

}

.about-box{

background:white;
padding:20px;
border-radius:10px;
margin-top:20px;

}

.doctor-img img{

border-radius:50%;

width:160px;

height:160px;

object-fit:cover;

}

.chamber-box{

background:#f5f6f7;

padding:18px;

border-radius:8px;

margin-bottom:15px;

box-shadow:0 2px 6px rgba(0,0,0,0.05);

}

.call-btn{

background:#0d6efd;

color:#fff;

padding:7px 14px;

border-radius:6px;

text-decoration:none;

font-size:14px;

}

.call-btn:hover{

background:#0b5ed7;

}

.modal{

display:none;

position:fixed;

z-index:999;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.5);

}


.modal-content{

background:white;

width:90%;

max-width:420px;

margin:8% auto;

padding:25px;

border-radius:8px;

}


.close{

float:right;

font-size:22px;

cursor:pointer;

}


.book-btn{

background:#0d6efd;

color:white;

padding:8px 15px;

border:none;

border-radius:5px;

}


.success-msg{

background:#d1f7dc;

color:#0f5132;

padding:14px 18px;

border-radius:6px;

margin:15px 0;

font-size:15px;

position:relative;

border:1px solid #badbcc;
width: 70%;

}

.close-msg{

position:absolute;

right:10px;

top:5px;

cursor:pointer;

font-size:18px;

}

.delete-btn{

color:white;

background:#dc3545;

padding:5px 10px;

border-radius:5px;

text-decoration:none;

font-size:13px;

}

.delete-btn:hover{

background:#bb2d3b;

}

/* single doctor css  */
.container{

max-width:1100px;

margin:auto;

padding:6px;

}



/* doctor top box */

.doctor-box{

background:#fff;

border-radius:12px;

padding:25px;

display:flex;

gap:25px;

align-items:center;

box-shadow:0 2px 8px rgba(0,0,0,0.05);

margin-bottom:20px;

}



.doctor-img img{

border-radius:50%;

width:150px;

height:150px;

object-fit:cover;

border:6px solid #e6e6e6;

}



.spec{

color:red;

font-size:14px;

margin-bottom:5px;

}



.doctor-info h1{

font-size:26px;

margin:5px 0;

}

.doctor-info p:nth-child(4){
    font-weight: bold;
}
.doctor-info p:nth-child(5){
    color: red;
}


.degree{

color:#555;

margin:8px 0;

line-height:1.6;

}



.rating{

margin:10px 0;

color:#ff9800;

font-size:16px;

}



/* button */

.book-btn{

background:#1e73be;

color:white;

border:none;

padding:10px 18px;

border-radius:6px;

cursor:pointer;

font-size:15px;

}



.book-btn:hover{

background:#155fa0;

}



/* success message */

.success-msg{

background:#d4edda;

color:#155724;

padding:12px 15px;

border-radius:6px;

margin-bottom:15px;

position:relative;

}



.close-msg{

position:absolute;

right:10px;

top:5px;

cursor:pointer;

font-size:18px;

}



/* chamber */

.chamber-box{

background:#fff;

border-radius:10px;

padding:15px;

margin-bottom:12px;

text-align: center;

border:1px solid #eee;

}



.chamber-box p:nth-child(4) {
    font-weight: bold;
}

.chamber-box h4{

margin:0 0 5px 0;

}



.chamber-box p{

margin:10px 0;

color:#000000;

font-size:14px;

}

.top-tabs{

background:#1976d2;

padding:10px 0px;

}


.tabs-flex{

display:flex;

justify-content:center;

gap:40px;

}


.tab-link{

color:white;

text-decoration:none;

font-size:16px;

font-weight:600;

padding:6px 10px;

border-radius:6px;

}


.tab-link:hover{

background:rgba(255,255,255,0.15);

}




/* mobile */

@media(max-width:600px){

.tabs-flex{

gap:20px;

}


.tab-link{

font-size:15px;

}

}



/* call button */

.call-btn{

background:#1e73be;

color:white;

padding:8px 16px;

border-radius:6px;

text-decoration:none;

font-size:14px;

}



.call-btn:hover{

background:#155fa0;

}



/* about */

.about-box{

background:#fff;

padding:20px;

border-radius:10px;

margin:20px 0;

border:1px solid #eee;

}



/* related doctor */

.doctor-grid{

display:grid;

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

gap:15px;

}



.doctor-card{

background:#fff;

border-radius:10px;

padding:15px;

text-align:center;

border:1px solid #eee;

}



.doctor-card img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

margin-bottom:10px;

}



/* .doctor-card a{

display:inline-block;

margin-top:8px;

background:#1e73be;

color:white;

padding:6px 12px;

border-radius:5px;

text-decoration:none;

font-size:13px;

} */



/* modal */

.modal{

display:none;

position:fixed;

z-index:999;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.5);

}



.modal-content{

background:white;

max-width:450px;

margin:80px auto;

padding:20px;

border-radius:8px;

position:relative;

}



.close{

position:absolute;

right:10px;

top:5px;

cursor:pointer;

font-size:20px;

}



/* form */

.appointment-form input,

.appointment-form textarea{

width:100%;

padding:10px;

margin-bottom:10px;

border:1px solid #ddd;

border-radius:5px;

}



.appointment-form button{

width:100%;

background:#1e73be;

color:white;

border:none;

padding:10px;

border-radius:5px;

}


/* responsive */

@media(max-width:768px){

.doctor-box{

flex-direction:column;

text-align:center;

}



.chamber-box{

flex-direction:column;

align-items:flex-start;

gap:10px;

}


.doctor-grid{

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

}

}

@media(max-width:480px){

.doctor-grid{

grid-template-columns:1fr;

}



.doctor-img img{

width:120px;

height:120px;

}

}

/* single hospitla page css  */
.hospital-page{

max-width:1100px;

margin:auto;

}



.hospital-card{

background:#fff;

padding:12px;
 
border-radius:10px;

text-align:center;

margin-bottom:16px;
margin-top: 16px;

border:1px solid #eee;

}
.hospital-card h2 a {
    color: #222;
    text-decoration: none;
}
.hospital-card h2 a:hover {
    color:red;
    text-decoration: underline;
}

.doctor-title{
margin-bottom:15px;
font-size: 22px;
}



.doctor-list-box{

display:flex;

gap:20px;

background:#fff;

padding:15px;

border-radius:10px;

margin-bottom:15px;

border:1px solid #eee;

align-items:center;

}



.doctor-category{

color:#e53935;

font-size:13px;

margin-bottom:5px;
font-weight: bold;

}
.doctor-middle h3{
    margin: 0px;
}
.doctor-middle h3 a {
    color: #222;
    text-decoration: none ;
}
.doctor-middle h3 a:hover{
      text-decoration: underline;  
}
/* 
.profile-btn{

display:inline-block;

margin-top:8px;

background:#1976d2;

color:white;

padding:6px 12px;

border-radius:5px;

text-decoration:none;

font-size:13px;

} */

.profile-btn:hover{
    background: red;
    text-decoration: underline;
}


.rating{

color:#ff9800;

margin-top:5px;

}



/* responsive */

@media(max-width:768px){

.doctor-list-box{

flex-direction:column;

text-align:center;

}

}

/* mobile */

@media(max-width:768px){

.doctor-list-box{

flex-direction:column;

text-align:center;

}

}

.homepage{

max-width:1100px;

margin:auto;

padding:8px;

}



.section-title{

margin:20px 0;

}



.specialist-grid{

display:grid;

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

gap:15px;

margin-bottom:30px;

}



.specialist-card{

background:white;

padding:15px;

text-align:center;

border-radius:8px;

border:1px solid #eee;

text-decoration:none;

color:#333;

font-weight:600;

}



.specialist-card:hover{

background:#1976d2;

color:white;

}



.doctor-grid{

display:grid;

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

gap:15px;

}



.doctor-card{

background:white;

padding:15px;

text-align:center;

border-radius:10px;

border:1px solid #eee;

}



.doctor-card img{

margin-bottom:10px;

}



.doctor-category{

color:#e53935;

font-size:13px;

}

.doctor-middle h4 a {
    text-decoration: none;
}

.doctor-middle h4 a:hover {
    text-decoration: underline;
}

.profile-btn{

display:inline-block;

margin-top:8px;

background:#1976d2;

color:white;

padding:6px 12px;

border-radius:5px;

text-decoration:none;

}



.rating{

color:#ff9800;

}



.pagination{

margin-top:25px;

text-align:center;

}



.pagination a{

padding:6px 12px;

border:1px solid #ddd;

margin:2px;

text-decoration:none;

color:#333;

}



.pagination span.current{

background:#1976d2;

color:white;

padding:6px 12px;

}



/* responsive */

@media(max-width:900px){

.specialist-grid{

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

}



.doctor-grid{

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

}

}



@media(max-width:500px){

.specialist-grid{

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

}



.doctor-grid{

grid-template-columns:1fr;

}

}

.doctor-category a{

color:#e53935;

text-decoration:none;

}

.doctor-category a:hover{
   text-decoration:underline; 
}

.doctor-name a{

color:#111;

text-decoration:none;

}


.doctor-name a:hover{

color:#1976d2;
text-decoration:underline;
}

.error-page{

text-align:center;

padding:80px 20px;

}


.error-title{

font-size:80px;

color:#1976d2;

margin-bottom:10px;

}


.error-search{

margin:20px 0;

}


.error-search input{

padding:12px;

width:260px;

max-width:80%;

border:1px solid #ddd;

border-radius:6px;

}


.error-search button{

padding:12px 18px;

background:#1976d2;

color:white;

border:none;

border-radius:6px;

margin-left:5px;

}


.error-links{

margin-top:20px;

}


.home-btn{

display:inline-block;

margin:5px;

background:#1976d2;

color:white;

padding:10px 16px;

border-radius:6px;

text-decoration:none;

}


.home-btn:hover{

background:#145ea8;

}


/* mobile */

@media(max-width:600px){

.error-title{

font-size:60px;

}

}


/* responsive css hospital page  */
/* .hospital-card:hover{

transform:translateY(-3px);

box-shadow:0 6px 20px rgba(0,0,0,0.08);

}
 */

/* tablet */

@media (max-width:768px){

.hospital-title{

font-size:32px;

}


.hospital-card a{

font-size:20px;

}

}


/* mobile */

@media (max-width:480px){

/* .hospital-page{

padding:15px;

} */

.hospital-card{

padding:18px;

border-radius:12px;

}
.hospital-card h3 {
    margin: 0px;
}

.hospital-card h3 a{

font-size:18px;

line-height:1.4;

}

.spec-box h3 {
	font-size: 1em;
}

.Hospital_wise {
    font-size: 1.3em;
}

.error-search button {
	margin-top: 10px;
}

}

.treatment-box{

background:#fff;

border-radius:12px;

box-shadow:0 2px 10px rgba(0,0,0,0.05);

margin:25px 0;

overflow:hidden;

}


.treatment-box h3, .chamber_lists{

background:#1976d2;

color:white;

padding:14px;

font-size:18px;

text-align:center;

}


.treatment-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

padding:18px;

}


.t-item{

font-size:15px;

padding:6px 0;

}


/* mobile */

@media(max-width:600px){

.treatment-grid{

grid-template-columns:1fr;

}

}

.fee-btn{

background:#2b78c5;

color:white;

border:none;

padding:10px 16px;

border-radius:6px;

cursor:pointer;

margin-left:8px;

}


.fee-modal{

max-width:420px;

}


.fee-box{

background:white;

border-radius:8px;

overflow:hidden;

border: 1px solid #222;

}


.fee-title{

background:#0b5ed7;

color:white;

text-align:center;

padding:14px;

font-size:18px;

font-weight:600;

}
.close-fee{
    cursor: pointer;
}

.fee-grid{

display:flex;

justify-content:space-between;

padding:20px;

gap:20px;

}


.fee-item{

font-size:18px;

text-align:center;

width:100%;

}


@media(max-width:600px){

.fee-grid{

flex-direction:column;

gap:10px;

}

}

.appointment-form select{

width:100%;

padding:12px;

border:1px solid #ddd;

border-radius:6px;

margin-bottom:12px;

}

.specialist-title {
	font-size: 22px;
	margin-top: 20px;
}