/* ===== Page Banner ===== */
.page-banner{
    position: relative;
    background: url('http://localhost/magnumdentalhospital/assets/img/slider1.png') center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: 480px;
    margin-top: 0;
    padding-top: 80px; /* header height */

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

/* ===== About Sections ===== */
.section {
    padding: 20px 0;
}
.section h3 {
    font-weight: 700;
    margin-bottom: 20px;
}
.section p {
    color: #444;
}

/* ===== Feature Icons ===== */
.feature-box {
    text-align: center;
    padding: 25px;
}
.feature-box i {
    font-size: 36px;
    color: #ff6b00;
    margin-bottom: 12px;
}

/* ===== Reveal Animation ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 0.9s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== APPOINTMENT SECTION ===== */

/* ===== APPOINTMENT SECTION ===== */

.appointment-section{
background:#f2f2f2;
padding:20px 10px;
text-align:left;
animation:fadeUp 1s ease;
}

.appointment-section .container{
max-width:1100px;
margin:auto;
}

.appointment-section h2{
font-size:24px;
margin-bottom:15px;
color:#111;
}

.appointment-section p{
color:#444;
line-height:1.6;
margin-bottom:15px;
}

.highlight{
margin-top:20px;
}

/* BUTTON ANIMATION */

.appointment-btn{
display:block;
width:220px;
margin:40px auto 0;
text-align:center;
background:#0a2342;
color:#fff;
padding:14px 25px;
border-radius:10px;
text-decoration:none;
font-weight:600;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
transition:all 0.3s ease;
}

.appointment-btn:hover{
background:#ff7a00;
transform:translateY(-5px) scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}


/* ===== FEATURES SECTION ===== */

.features-section{
background:#fff;
padding:50px 20px;
}

.features-container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:20px;
text-align:center;
}

.feature-box{
flex:1;
min-width:180px;
transition:0.3s;
}

.feature-box:hover{
transform:translateY(-8px);
}

/* ICON FLOAT ANIMATION */

.icon{
font-size:40px;
color:#0a2342;
margin-bottom:10px;
animation:floatIcon 3s ease-in-out infinite;
}

.feature-box p{
font-size:15px;
color:#333;
}


/* ===== ANIMATIONS ===== */

@keyframes floatIcon{

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

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0px);
}

}


@keyframes fadeUp{

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

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

}