/*=========================================
GENERAL
=========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:
    'Segoe UI',
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{
    background:#f4f8fc;
    color:#222;
}


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

header{
    width:100%;
    background:
    linear-gradient(
        135deg,
        #0056b3,
        #008cff
    );

    box-shadow:
    0 4px 10px
    rgba(0,0,0,0.20);

    position:sticky;

    top:0;

    z-index:1000;
}


.navbar{
    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:
    space-between;

    align-items:center;

    padding:15px 30px;

    flex-wrap:wrap;
}


.logo-section{
    display:flex;

    align-items:center;

    gap:12px;
}


.logo-section img{
    width:60px;

    height:60px;

    border-radius:50%;

    background:white;

    padding:5px;
}


.logo-section h1{
    color:white;

    font-size:28px;

    font-weight:bold;
}


.nav-links{
    display:flex;

    list-style:none;

    gap:10px;

    flex-wrap:wrap;
}


.nav-links li a{
    text-decoration:none;

    color:white;

    font-weight:bold;

    padding:12px 18px;

    border-radius:30px;

    transition:0.4s;

    display:flex;

    align-items:center;

    gap:8px;
}


.nav-links li a:hover{
    background:white;

    color:#0056b3;

    transform:
    translateY(-3px);
}


/*=========================================
WELCOME MARQUEE
=========================================*/

.welcome-container{
    margin:20px;

    background:white;

    border-radius:10px;

    padding:10px;

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


.marquee{
    overflow:hidden;

    white-space:nowrap;

    position:relative;

    height:50px;
}


.marquee span{
    position:absolute;

    font-size:25px;

    font-weight:bold;

    color:#0056b3;

    animation:
    moveText
    22s
    linear
    infinite;
}


@keyframes moveText{

from{

right:-100%;

}

to{

right:100%;

}

}


/*=========================================
HOME INTRODUCTION
=========================================*/

.home-introduction{
    width:92%;

    max-width:1100px;

    margin:
    30px auto;

    padding:30px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #0056b3,
        #008cff
    );

    color:white;

    box-shadow:
    0 10px 25px
    rgba(0,86,179,0.25);
}


.introduction-content{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;
}


.introduction-icon{
    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    background:
    rgba(255,255,255,0.20);
}


.introduction-content h2{
    font-size:30px;

    margin-bottom:10px;
}


.introduction-content p{
    font-size:17px;

    line-height:1.7;

    max-width:750px;
}


/*=========================================
SEARCH SECTIONS
=========================================*/

.search-section{
    width:90%;

    max-width:950px;

    margin:
    35px auto;

    padding:30px;

    background:white;

    border-radius:20px;

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


.doctor-search-section{
    border-top:
    5px solid
    #00a86b;
}


.search-title{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-bottom:20px;

    text-align:left;
}


.search-title > i{
    width:65px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#eaf4ff;

    color:#0056b3;

    font-size:30px;
}


.doctor-search-section
.search-title > i{

background:#e7fff5;

color:#00a86b;

}


.search-title h2{
    color:#0056b3;

    margin-bottom:5px;

    font-size:28px;
}


.doctor-search-section
.search-title h2{

color:#008a58;

}


.search-title p{
    color:#666;
}


.search-box{
    display:flex;

    justify-content:center;

    width:100%;
}


.search-box input{
    width:80%;

    padding:16px;

    border:
    2px solid
    #0056b3;

    border-radius:
    50px
    0
    0
    50px;

    outline:none;

    font-size:16px;
}


.doctor-search-section
.search-box input{

border-color:#00a86b;

}


.search-box input:focus{

box-shadow:
0 0 0 4px
rgba(0,86,179,0.10);

}


.search-box button{
    padding:
    16px
    25px;

    border:none;

    background:#0056b3;

    color:white;

    cursor:pointer;

    border-radius:
    0
    50px
    50px
    0;

    font-size:16px;

    font-weight:bold;

    transition:0.3s;
}


.doctor-search-section
.search-box button{

background:#00a86b;

}


.search-box button:hover{

background:#003f82;

}


.doctor-search-section
.search-box button:hover{

background:#007a4d;

}


/*=========================================
SECTION TITLES
=========================================*/

.section-title{
    text-align:center;

    color:#0056b3;

    margin-top:55px;

    margin-bottom:10px;

    font-size:35px;
}


.section-title i{

margin-right:10px;

}


.section-description{
    text-align:center;

    color:#666;

    font-size:16px;

    margin-bottom:25px;
}


/*=========================================
MEDICINE CARDS
=========================================*/

.medicine-container{
    width:95%;

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:25px;

    padding-bottom:50px;
}


.card{
    background:white;

    border-radius:15px;

    overflow:hidden;

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

    transition:0.35s;
}


.card:hover{

transform:
translateY(-8px);

box-shadow:
0 15px 30px
rgba(0,0,0,0.20);

}


.card img{
    width:100%;

    height:250px;

    object-fit:cover;
}


.card-body{
    padding:18px;

    text-align:center;
}


.card-body h3{
    color:#333;

    margin-bottom:12px;
}


.medicine-price{

font-size:17px;

color:#0056b3;

}


.card-buttons{
    display:flex;

    justify-content:
    space-between;

    gap:10px;

    margin-top:18px;
}


.btn-view,
.btn-buy{

flex:1;

padding:12px;

border:none;

cursor:pointer;

border-radius:7px;

font-weight:bold;

transition:0.3s;

text-decoration:none;

display:flex;

align-items:center;

justify-content:center;

gap:7px;

}


.btn-view{

background:#28a745;

color:white;

}


.btn-buy{

background:#0056b3;

color:white;

}


.btn-view:hover{

background:#1d7d34;

}


.btn-buy:hover{

background:#003f82;

}


/*=========================================
DOCTOR CARDS
=========================================*/

.doctor-container{

width:95%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(
280px,
1fr
)

);

gap:25px;

padding-bottom:50px;

}


.doctor-card{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:

0 6px 20px

rgba(
0,
0,
0,
0.12
);

transition:0.35s;

border:

1px solid

#e4edf5;

}


.doctor-card:hover{

transform:

translateY(-8px);

box-shadow:

0 16px 35px

rgba(
0,
86,
179,
0.18
);

}


.doctor-image-box{

height:240px;

position:relative;

background:

linear-gradient(

135deg,

#eaf4ff,

#d6f5ea

);

}


.doctor-image-box img{

width:100%;

height:100%;

object-fit:cover;

}


.default-doctor-image{

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

font-size:90px;

color:#0056b3;

}


.verified-badge{

position:absolute;

right:15px;

bottom:15px;

background:#00a86b;

color:white;

padding:

8px

13px;

border-radius:30px;

font-size:13px;

font-weight:bold;

box-shadow:

0 3px 10px

rgba(
0,
0,
0,
0.20
);

}


.doctor-body{

padding:20px;

}


.doctor-body h3{

color:#0056b3;

font-size:22px;

margin-bottom:10px;

}


.doctor-body p{

color:#555;

margin:

9px 0;

font-size:14px;

line-height:1.5;

}


.doctor-body p i{

color:#00a86b;

width:23px;

}


.doctor-specialization{

font-size:17px !important;

font-weight:bold;

color:#008a58 !important;

}


.doctor-fee{

margin-top:18px;

padding:15px;

border-radius:10px;

background:#f0f8ff;

display:flex;

justify-content:

space-between;

align-items:center;

}


.doctor-fee span{

color:#666;

font-size:13px;

}


.doctor-fee strong{

color:#0056b3;

font-size:18px;

}


.doctor-buttons{

display:grid;

grid-template-columns:

1fr

1fr;

gap:10px;

margin-top:18px;

}


.btn-doctor-details,

.btn-book-doctor{

padding:12px;

border-radius:7px;

font-weight:bold;

font-size:13px;

text-decoration:none;

display:flex;

align-items:center;

justify-content:center;

gap:6px;

transition:0.3s;

}


.btn-doctor-details{

background:#eaf4ff;

color:#0056b3;

}


.btn-book-doctor{

background:#00a86b;

color:white;

}


.btn-doctor-details:hover{

background:#d4eaff;

}


.btn-book-doctor:hover{

background:#007a4d;

}


/*=========================================
EMPTY SEARCH RESULTS
=========================================*/

.empty-result{

grid-column:

1 / -1;

background:white;

padding:50px;

text-align:center;

border-radius:15px;

box-shadow:

0 5px 15px

rgba(
0,
0,
0,
0.10
);

}


.empty-result i{

font-size:55px;

color:#0056b3;

margin-bottom:15px;

}


.empty-result h3{

font-size:24px;

margin-bottom:10px;

color:#333;

}


.empty-result p{

color:#777;

}


/*=========================================
HEALTH TIPS
=========================================*/

.health-section{

background:white;

padding:

30px

0

60px;

margin-top:20px;

}


.health-container{

width:95%;

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(
230px,
1fr
)

);

gap:25px;

}


.health-card{

background:#f5faff;

padding:30px;

border-radius:18px;

text-align:center;

border:

1px solid

#dcecf8;

transition:0.3s;

}


.health-card:hover{

transform:

translateY(-6px);

box-shadow:

0 12px 25px

rgba(
0,
86,
179,
0.12
);

}


.health-icon{

width:75px;

height:75px;

margin:

0 auto

18px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#0056b3;

color:white;

font-size:32px;

}


.health-card h3{

color:#0056b3;

margin-bottom:12px;

}


.health-card p{

color:#666;

line-height:1.7;

font-size:14px;

}


/*=========================================
RECENT ARTICLES
=========================================*/

.articles-section{

padding-bottom:65px;

}


.article-container{

width:95%;

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(
280px,
1fr
)

);

gap:25px;

}


.article-card{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:

0 5px 18px

rgba(
0,
0,
0,
0.12
);

transition:0.3s;

}


.article-card:hover{

transform:

translateY(-7px);

box-shadow:

0 15px 30px

rgba(
0,
0,
0,
0.18
);

}


.article-image{

height:180px;

background:

linear-gradient(

135deg,

#0056b3,

#00a86b

);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:70px;

}


.article-body{

padding:23px;

}


.article-date{

color:#00a86b;

font-weight:bold;

font-size:13px;

}


.article-body h3{

margin:

12px 0;

color:#0056b3;

font-size:21px;

}


.article-body p{

color:#666;

line-height:1.7;

margin-bottom:18px;

}


.article-body a{

color:#0056b3;

font-weight:bold;

text-decoration:none;

}


.article-body a:hover{

color:#00a86b;

}


/*=========================================
FOOTER
=========================================*/

footer{

background:#050505;

color:white;

padding:

40px

20px;

}


.footer-container{

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(
250px,
1fr
)

);

gap:30px;

max-width:1300px;

margin:auto;

}


.footer-logo img{

width:80px;

background:white;

border-radius:50%;

padding:5px;

margin-bottom:10px;

}


.footer-links a{

display:block;

color:white;

text-decoration:none;

margin:

8px

0;

}


.footer-links a:hover{

color:#00aaff;

}


.social-icons a{

color:white;

font-size:25px;

margin-right:15px;

transition:0.3s;

}


.social-icons a:hover{

color:#00aaff;

}


.copyright{

text-align:center;

margin-top:30px;

border-top:

1px solid

gray;

padding-top:15px;

}


/*=========================================
TABLET
=========================================*/

@media(

max-width:900px

){

.navbar{

flex-direction:

column;

gap:15px;

}


.nav-links{

justify-content:

center;

}


.introduction-content{

flex-direction:

column;

text-align:center;

}


}


/*=========================================
MOBILE
=========================================*/

@media(

max-width:768px

){


.logo-section h1{

font-size:18px;

}


.logo-section img{

width:50px;

height:50px;

}


.nav-links{

justify-content:center;

}


.nav-links li a{

padding:

9px

12px;

font-size:13px;

}


.marquee span{

font-size:17px;

}


.home-introduction{

padding:25px 18px;

}


.introduction-content h2{

font-size:24px;

}


.introduction-content p{

font-size:15px;

}


.search-section{

width:94%;

padding:22px 15px;

}


.search-title{

flex-direction:

column;

text-align:center;

}


.search-title h2{

font-size:24px;

}


.search-box{

flex-direction:

column;

gap:10px;

}


.search-box input{

width:100%;

border-radius:

50px;

}


.search-box button{

width:100%;

border-radius:

50px;

}


.section-title{

font-size:27px;

padding:

0

12px;

}


.medicine-container,

.doctor-container,

.health-container,

.article-container{

width:92%;

}


.card-buttons{

flex-direction:

column;

}


.doctor-buttons{

grid-template-columns:

1fr;

}


}


@media(

max-width:480px

){


.nav-links{

gap:5px;

}


.nav-links li a{

font-size:11px;

padding:

8px

9px;

}


.logo-section h1{

font-size:16px;

}


.section-title{

font-size:24px;

}


}