/* =========================
   Sri Hanuman Astrology Centre
   Premium CSS
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#fff8ef;
color:#333;
line-height:1.7;
}

/* Navigation */

header{
position:fixed;
top:0;
width:100%;
background:rgba(90,20,0,.92);
backdrop-filter:blur(12px);
z-index:999;
}

.navbar{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:4px 14px;
}

.logo{
font-family:'Cinzel',serif;
font-size:20px;
font-weight:bold;
color:#FFD700;
white-space:nowrap;
display:flex;
align-items:center;
}

.logo i{
margin-right:6px;
flex-shrink:0;
}

.navbar ul{
display:flex;
list-style:none;
gap:30px;
}

.navbar a{
text-decoration:none;
color:white;
font-weight:500;
transition:.3s;
}

.navbar a:hover{
color:#FFD700;
}

/* Buttons */

.btn{
background:#FFD700;
color:#5b2200;
padding:11px;22px;
border-radius:50px;
font-weight:600;
text-decoration:none;
display:inline-block;
transition:.4s;s
}

.btn:hover{
transform:translateY(-4px);
background:white;
}

.btn2{
background:white;
color:#5b2200;
padding:11px;22px;
border-radius:50px;
margin-left:15px;
text-decoration:none;
font-weight:600;
display:inline-block;
}

.btn2:hover{
background:#FFD700;
}

/* Hero */

.hero{
height:100vh;
background:url('images/hanuman2.jpg') center center/cover no-repeat;
position:relative;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:180px;20px;100px;
}

.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
}

.hero-content{
position:relative;
z-index:2;
max-width:900px;
color:white;
}

.hero h1{
font-family:'Cinzel',serif;
font-size:60px;
margin-bottom:20px;
color:#FFD700;
}

.hero p{
font-size:20px;
margin-bottom:20px;
}

.hero h3{
font-size:28px;
margin-bottom:15px;
}

/* Sections */

section{
padding:90px 20px;
}

h2{
text-align:center;
font-family:'Cinzel',serif;
font-size:40px;
margin-bottom:45px;
color:#6a2200;
}

/* Services */

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

.card{
background:white;
padding:35px;
border-radius:18px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.4s;
}

.card:hover{
transform:translateY(-10px);
}

.card i{
font-size:45px;
color:#cc8b00;
margin-bottom:20px;
}

.card h3{
margin-bottom:15px;
color:#5b2200;
}

/* About */

.container{
max-width:1200px;
margin:auto;
display:flex;
gap:50px;
align-items:center;
flex-wrap:wrap;
}

.about-text{
flex:1;
}

.about-image{
flex:1;
}

.about-image img{
width:100%;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.2);
}

/* Features */

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

.feature{
background:white;
padding:30px;
border-radius:18px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.feature i{
font-size:42px;
color:#d88b00;
margin-bottom:18px;
}

/* Testimonials */

.testimonial-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:25px;
max-width:1200px;
margin:auto;
}

.testimonial{
background:white;
padding:30px;
border-radius:18px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* FAQ */

.faq{
max-width:900px;
margin:auto;
}

.faq-item{
background:white;
padding:25px;
margin-bottom:20px;
border-left:5px solid #FFD700;
border-radius:12px;
}

/* Contact */

.contact-box{
background:white;
max-width:650px;
margin:auto;
padding:40px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.contact-box p{
margin:15px 0;
font-size:18px;
}

/* Floating Button */

.floating-call{
position:fixed;
bottom:25px;
right:25px;
width:65px;
height:65px;
background:#FFD700;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
text-decoration:none;
color:#5b2200;
box-shadow:0 10px 25px rgba(0,0,0,.25);
transition:.3s;
z-index:999;
}

.floating-call:hover{
transform:scale(1.1);
}

/* Footer */

footer{
background:#4a1800;
color:white;
text-align:center;
padding:45px 20px;
}

footer h3{
font-family:'Cinzel',serif;
color:#FFD700;
margin-bottom:15px;
}

footer .small{
font-size:14px;
opacity:.85;
margin-top:20px;
}

/* Responsive */

@media(max-width:768px){

.hero h1{
font-size:38px;
}

.hero p{
font-size:17px;
}

.navbar{
flex-direction:column;
gap:15px;
}

.navbar ul{
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

.container{
flex-direction:column;
}

.btn,.btn2{
display:block;
margin:10px auto;
}

}

/* Animation */

.hidden{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

/* Back To Top Button */

#topButton{

position:fixed;

bottom:120px;

right:35px;

width:55px;

height:55px;

border:none;

border-radius:50%;

font-size:24px;

background:#5b2200;

color:white;

cursor:pointer;

box-shadow:0 8px 20px rgba(0,0,0,.25);

z-index:999;

transition:.3s;

}

#topButton:hover{

transform:scale(1.1);

background:#FFD700;

color:#5b2200;

}

/* ================================
   Premium Floating Viber Button
================================ */

.viber-float{
    position:fixed;
    right:30px;
    bottom:30px;
    width:75px;
    height:75px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 10px 35px rgba(115,96,242,.45),
        0 0 25px rgba(115,96,242,.35);
    z-index:9999;
    text-decoration:none;
    animation:pulseGlow 2s infinite;
    transition:all .35s ease;
}

.viber-float img{
    width: 80px;
    height: 80px;
    border-radius:50%;
    transition:.35s;
}

.viber-float:hover{
    transform:translateY(-6px) scale(1.12) rotate(8deg);
    box-shadow:
        0 20px 45px rgba(115,96,242,.6),
        0 0 35px rgba(115,96,242,.6);
}

.viber-float:hover img{
    transform:scale(1.08);
}

/* Tooltip */

.viber-tooltip{
    position:absolute;
    right:90px;
    background:#4A148C;
    color:#fff;
    padding:12px 18px;
    border-radius:40px;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.viber-tooltip::after{
    content:"";
    position:absolute;
    top:50%;
    right:-8px;
    transform:translateY(-50%);
    border-width:8px;
    border-style:solid;
    border-color:transparent transparent transparent #4A148C;
}

.viber-float:hover .viber-tooltip{
    opacity:1;
    visibility:visible;
    right:95px;
}

/* Pulse Animation */

@keyframes pulseGlow{

    0%{
        box-shadow:
        0 0 0 0 rgba(115,96,242,.55);
    }

    70%{
        box-shadow:
        0 0 0 18px rgba(115,96,242,0);
    }

    100%{
        box-shadow:
        0 0 0 0 rgba(115,96,242,0);
    }
}

/* Mobile */

@media(max-width:768px){

.viber-float{
    width:68px;
    height:68px;
    right:20px;
    bottom:20px;
}

.viber-float img{
    width:54px;
    height:54px;
}

.viber-tooltip{
    display:none;
}

}

/* Premium Dark Brown Call Button */

.call-float{
    position:fixed;
    left:30px;
    bottom:30px;
    width:75px;
    height:75px;
    background:linear-gradient(145deg,#2F1B14,#4E342E);
    border:2px solid #C8A165;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    z-index:9999;
    box-shadow:
        0 12px 35px rgba(47,27,20,.65),
        0 0 20px rgba(200,161,101,.35);
    animation:callPulse 2.5s infinite;
    transition:all .35s ease;
}

.call-float:hover{
    transform:translateY(-6px) scale(1.1);
    box-shadow:
        0 18px 40px rgba(47,27,20,.75),
        0 0 28px rgba(200,161,101,.5);
}

/* Classic Phone Icon */

.call-icon{
    font-size:36px;
    color:#FFFFFF;
    animation:ring 1.2s infinite;
}

/* Tooltip */

.call-tooltip{
    position:absolute;
    left:92px;
    background:#2F1B14;
    color:#FFF8E1;
    padding:12px 18px;
    border-radius:30px;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    border:1px solid #C8A165;
}

.call-tooltip::after{
    content:"";
    position:absolute;
    top:50%;
    left:-8px;
    transform:translateY(-50%);
    border-width:8px;
    border-style:solid;
    border-color:transparent transparent transparent #2F1B14;
}

.call-float:hover .call-tooltip{
    opacity:1;
    visibility:visible;
}

/* Gold Pulse */

@keyframes callPulse{
    0%{
        box-shadow:0 0 0 0 rgba(200,161,101,.55);
    }
    70%{
        box-shadow:0 0 0 18px rgba(200,161,101,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(200,161,101,0);
    }
}

/* Ring Animation */

@keyframes ring{
    0%,100%{transform:rotate(0deg);}
    20%{transform:rotate(-18deg);}
    40%{transform:rotate(18deg);}
    60%{transform:rotate(-12deg);}
    80%{transform:rotate(12deg);}
}