/* Root Canal Css **************************** Start*/

.service-hero{
	position:relative;
margin-top:80px; /* header height fix */
background:url('http://localhost/magnumdentalhospital/assets/img/root-canal.png') center/cover no-repeat;
padding:120px 20px;
text-align:center;
color:#fff;
}

.service-hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(10,35,66,0.6);
}

.service-hero *{
position:relative;
z-index:2;
}

.service-hero h1{
font-size:30px;
margin-bottom:10px;
}

.service-hero h2{
font-size:40px;
margin-bottom:20px;
}

.btn-primary{
background:#ff7a00;
color:#fff;
padding:12px 30px;
border-radius:30px;
text-decoration:none;
font-weight:600;
}


.service-about{
padding:20px 10px;
background:#f5f5f5;
}

.service-about h2{
margin-bottom:20px;
}

/* services benefit-box css */

.service-benefits{
padding:20px 10px;
background:#f6f8fb;
}

/* title */

.section-title{
text-align:center;
font-size:36px;
font-weight:700;
margin-bottom:50px;
color:#111;
}

/* grid */

.benefits-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
max-width:1100px;
margin:auto;
}

/* cards */

.benefit-box{

background:#0b2545;

color:#fff;

padding:35px;

border-radius:28px;

box-shadow:0 10px 35px rgba(0,0,0,0.2);

transition:0.4s ease;

}

/* hover effect */

.benefit-box:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0,0,0,0.3);
}

/* heading */

.benefit-box h3{
font-size:18px;
font-weight:700;
margin-bottom:12px;
}

/* text */

.benefit-box p{
font-size:15px;
line-height:1.6;
opacity:0.9;
}

/* mobile */

@media(max-width:768px){

.benefits-grid{
grid-template-columns:1fr;
}

.section-title{
font-size:28px;
}

}

/* service cta css start  *********************/

.service-cta{

padding:20px 10px;

background:linear-gradient(135deg,#eef2f7,#e4ebf4);

position:relative;

overflow:hidden;

}

/* decorative shapes */

.service-cta::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:#0a2342;
top:-200px;
left:-200px;
border-radius:50%;
opacity:0.08;
}

.service-cta::after{
content:"";
position:absolute;
width:350px;
height:350px;
background:#ff7a00;
bottom:-150px;
right:-120px;
border-radius:50%;
opacity:0.1;
}

/* layout */

.cta-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}

/* card */

.cta-card{

background:#ffffff;

padding:50px;

border-radius:20px;

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

max-width:520px;

}

.cta-card h2{
font-size:34px;
color:#0a2342;
margin-bottom:15px;
}

.cta-card p{
color:#555;
line-height:1.7;
margin-bottom:25px;
}

/* buttons */

.cta-buttons{
display:flex;
gap:15px;
}

.btn-main{

background:#ff7a00;

color:#fff;

padding:13px 30px;

border-radius:40px;

text-decoration:none;

font-weight:600;

transition:0.3s;
}

.btn-main:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(255,122,0,0.4);
}

.btn-outline{

border:2px solid #0a2342;

padding:11px 26px;

border-radius:40px;

text-decoration:none;

color:#0a2342;

font-weight:600;

}

/* tooth image */

.cta-image img{
width:380px;
animation:floatTooth 4s ease-in-out infinite;
}

/* floating animation */

@keyframes floatTooth{

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

}

/* responsive */

@media(max-width:768px){

.cta-container{
flex-direction:column;
text-align:center;
}

.cta-buttons{
justify-content:center;
}

.cta-image img{
width:250px;
}

}
/* service cta css End  *********************/

/* FAQ css Start  *********************/
.faq{
padding:80px 20px;
background:#f5f5f5;
}

.faq-item{
margin-bottom:20px;
}
.faq-alt{
padding:20px 10px;
background:#f7f9fc;
}

.faq-title{
text-align:center;
font-size:36px;
margin-bottom:30px;
color:#111;
}

.faq-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
max-width:1100px;
margin:auto;
}

/* card */

.faq-card{

background:#fff;

padding:15px;

border-radius:16px;

box-shadow:0 10px 40px rgba(0,0,0,0.08);

position:relative;

transition:0.3s;

}

/* hover */

.faq-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

/* number */

.faq-number{

position:absolute;

top:-18px;

left:25px;

background:#ff7a00;

color:#fff;

font-weight:700;

font-size:14px;

padding:8px 14px;

border-radius:30px;

}

/* heading */

.faq-card h3{
margin-top:10px;
margin-bottom:10px;
font-size:18px;
color:#0a2342;
}

/* text */

.faq-card p{
color:#555;
line-height:1.6;
font-size:15px;
}
/*FAQ css Start **************************** End*/


/*Implant css Start **************************** Start*/


.implant-hero{

margin-top:90px;

padding:20px 10px;

background:linear-gradient(135deg,#eaf4ff,#ffffff);

}

.implant-container{

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

gap:60px;

}

.implant-text{

flex:1;

}

.tagline{

color:#ffb400;

font-weight:600;

letter-spacing:1px;

}

.implant-text h1{

font-size:42px;

margin:10px 0;

color:#0a2342;

}

.implant-text p{

line-height:1.7;

color:#555;

margin-bottom:25px;

}

.btn-implant{

background:#0a2342;

color:#fff;

padding:14px 30px;

border-radius:40px;

text-decoration:none;

}

.implant-image img{

width:420px;

}

@media(max-width:768px){

.implant-container{

flex-direction:column;

text-align:center;

}

}

/* Implant about css *********start */
.implant-about{

padding:20px 10px;

background:#f7f9fc;

}

.implant-about h2{

text-align:center;

font-size:32px;

margin-bottom:50px;

}

.implant-about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

max-width:1100px;

margin:auto;

align-items:center;

}

.implant-img img{

width:100%;

border-radius:12px;

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

}

.implant-content h3{

color:#ffb400;

margin-bottom:15px;

}

.implant-content p{

line-height:1.7;

margin-bottom:15px;

color:#555;

}

.btn-implant2{

display:inline-block;

margin-top:10px;

background:#0a2342;

color:#fff;

padding:12px 26px;

border-radius:30px;

text-decoration:none;

}

@media(max-width:768px){

.implant-about-grid{

grid-template-columns:1fr;

}

}

/* Implant benefit-box css *********start */
.implant-benefits{

padding:20px 10px;

background:#ffffff;

}

.implant-benefits h2{

text-align:center;

font-size:34px;

margin-bottom:50px;

}

.implant-benefits-grid{

display:grid;

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

gap:30px;

max-width:1100px;

margin:auto;

}

.benefit-card{

background:#0a2342;

color:#fff;

padding:30px;

border-radius:20px;

transition:.3s;

}

.benefit-card:hover{

transform:translateY(-8px);

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

}

.benefit-card h4{

margin-bottom:10px;

font-size:18px;

}

/* Featuere Highlight css ***********Start */
/* ============================= */
/* Dental Implant Highlight Section */
/* ============================= */

.implant-highlights{

margin-top:90px; /* prevent going under fixed menu */

padding:80px 20px;

background:linear-gradient(135deg,#0a2342,#1e5c9a);

color:#fff;

position:relative;

overflow:hidden;

}


/* animated glow background */

.implant-highlights::before{

content:"";

position:absolute;

top:-50%;

left:-50%;

width:200%;

height:200%;

background:radial-gradient(circle,rgba(255,255,255,0.08),transparent 60%);

animation:implantBgMove 14s linear infinite;

}


/* background animation */

@keyframes implantBgMove{

0%{transform:rotate(0deg);}

100%{transform:rotate(360deg);}

}


/* container grid */

.highlight-grid{

display:grid;

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

gap:30px;

max-width:1100px;

margin:auto;

position:relative;

z-index:2;

}


/* highlight cards */

.highlight-box{

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

padding:30px;

border-radius:18px;

text-align:center;

transition:0.4s;

transform:translateY(40px);

opacity:0;

animation:highlightFadeUp 0.8s forwards;

}


/* stagger animation */

.highlight-box:nth-child(1){

animation-delay:0.2s;

}

.highlight-box:nth-child(2){

animation-delay:0.4s;

}

.highlight-box:nth-child(3){

animation-delay:0.6s;

}


/* card animation */

@keyframes highlightFadeUp{

to{

transform:translateY(0);

opacity:1;

}

}


/* hover effect */

.highlight-box:hover{

transform:translateY(-10px) scale(1.04);

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

box-shadow:0 20px 40px rgba(0,0,0,0.25);

}


/* icon style */

.highlight-icon{

font-size:36px;

margin-bottom:12px;

animation:implantIconFloat 3s ease-in-out infinite;

}


/* icon floating animation */

@keyframes implantIconFloat{

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

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

}


/* text */

.highlight-box h4{

font-size:18px;

margin-bottom:10px;

font-weight:600;

}

.highlight-box p{

font-size:14px;

line-height:1.6;

opacity:0.9;

}


/* mobile */

@media(max-width:768px){

.implant-highlights{

padding:60px 15px;

}

}

/* bg tools animated css ******start */
/* floating dental icons */

.floating-dental{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

}


/* icon base */

.floating-dental span{

position:absolute;

font-size:40px;

opacity:0.08;

animation:floatDental 12s linear infinite;

}


/* positions */

.tooth1{
top:20%;
left:10%;
animation-duration:10s;
}

.tooth2{
top:60%;
left:80%;
animation-duration:14s;
}

.tooth3{
top:70%;
left:20%;
animation-duration:12s;
}

.tooth4{
top:30%;
left:70%;
animation-duration:16s;
}


/* animation */

@keyframes floatDental{

0%{
transform:translateY(0) rotate(0deg);
}

50%{
transform:translateY(-40px) rotate(20deg);
}

100%{
transform:translateY(0) rotate(0deg);
}

}

/* dental-veneers css **********start */
.veneers-hero{

margin-top:90px;

padding:20px 10px;

background:linear-gradient(135deg,#eef7ff,#ffffff);

}

.veneers-container{

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

gap:60px;

}

.veneers-text{flex:1;}

.tag{
color:#ffb400;
font-weight:600;
}

.veneers-text h1{
font-size:42px;
margin:10px 0;
color:#0a2342;
}

.veneers-text p{
color:#555;
line-height:1.7;
margin-bottom:25px;
}

.veneers-btn{
background:#0a2342;
color:#fff;
padding:14px 28px;
border-radius:30px;
text-decoration:none;
}

/* veneers image wrapper */

.veneers-image{

display:flex;

justify-content:center;

align-items:center;

}


/* frame */

.veneers-img-frame{

position:relative;

border-radius:40px 10px 40px 10px;

padding:10px;

background:linear-gradient(135deg,#00aaff,#ff7a00);

box-shadow:0 30px 60px rgba(0,0,0,0.25);

transition:0.4s;

transform-style:preserve-3d;

}


/* image */

.veneers-img-frame img{

width:100%;

max-width:420px;

display:block;

border-radius:35px 8px 35px 8px;

}


/* hover 3D tilt */

.veneers-img-frame:hover{

transform:rotateY(8deg) rotateX(5deg) scale(1.03);

box-shadow:0 40px 80px rgba(0,0,0,0.35);

}


/* glowing border animation */

.veneers-img-frame::before{

content:"";

position:absolute;

inset:-3px;

border-radius:45px 12px 45px 12px;

background:linear-gradient(90deg,#00aaff,#ff7a00,#00aaff);

background-size:200%;

z-index:-1;

animation:borderGlow 6s linear infinite;

}

@keyframes borderGlow{

0%{background-position:0%}

100%{background-position:200%}

}

@keyframes floatSmile{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-10px);}
}

/* veneers highlights css *********Start */
.veneers-highlights{

padding:20px 10px;

background:linear-gradient(135deg,#0a2342,#1e5c9a);

color:#fff;

}

.highlight-grid{

display:grid;

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

gap:30px;

max-width:1100px;

margin:auto;

}

.highlight-box{

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

padding:30px;

border-radius:18px;

text-align:center;

transition:0.4s;

}

.highlight-box:hover{
transform:translateY(-8px);
background:rgba(255,255,255,0.15);
}

.highlight-icon{
font-size:34px;
margin-bottom:10px;
animation:floatIcon 3s infinite ease-in-out;
}

@keyframes floatIcon{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-6px);}
}
/* veneers about section css **********start */
.veneers-about{

padding:20px 10px;

background:#f7f9fc;

}

.veneers-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

max-width:1100px;

margin:auto;

}

.veneers-img img{
width:100%;
border-radius:15px;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.veneers-content p{
line-height:1.7;
margin-bottom:15px;
color:#555;
}

.btn-veneers{
background:#0a2342;
color:#fff;
padding:12px 26px;
border-radius:30px;
text-decoration:none;
}

/* veneers benefit-box section css ********Start */
/* ===== VENEERS BENEFITS MODERN ===== */

.veneers-benefits-modern{

padding:20px 10px;

background:linear-gradient(135deg,#f7fbff,#eef5ff);

position:relative;

overflow:hidden;

}

.section-title{

text-align:center;

font-size:36px;

margin-bottom:20px;

color:#0a2342;

}

/* grid */

.benefits-wrapper{

display:grid;

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

gap:35px;

max-width:1100px;

margin:auto;

}

/* card */

.benefit-card-modern{

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

backdrop-filter:blur(10px);

padding:35px;

border-radius:18px;

text-align:center;

position:relative;

transition:0.4s;

overflow:hidden;

}

/* gradient animated border */

.benefit-card-modern::before{

content:"";

position:absolute;

inset:-2px;

border-radius:20px;

background:linear-gradient(120deg,#ff7a00,#00aaff,#ff7a00);

background-size:300%;

z-index:-1;

animation:borderMove 6s linear infinite;

}

@keyframes borderMove{

0%{background-position:0%}

100%{background-position:300%}

}

/* hover effect */

.benefit-card-modern:hover{

transform:translateY(-10px) scale(1.04);

box-shadow:0 25px 50px rgba(0,0,0,0.15);

}

/* icon */

.icon{

font-size:38px;

margin-bottom:15px;

animation:iconPulse 2.5s infinite;

}

@keyframes iconPulse{

0%,100%{transform:scale(1)}

50%{transform:scale(1.15)}

}

.benefit-card-modern h4{

margin-bottom:10px;

font-size:18px;

color:#0a2342;

}

.benefit-card-modern p{

font-size:14px;

color:#555;

line-height:1.6;

}