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

html, body{
height:100%;
}

body{
font-family:'Poppins', sans-serif;
background:#F4F9FF;
color:#333;
display:flex;
flex-direction:column;
}

/* wrapper pushes footer down */
.page-wrapper{
flex:1;
}

/* ================= COLORS ================= */
:root{
--primary:#FF7A00;
--secondary:#00AEEF;
--yellow:#FFD93D;
--bg:#F4F9FF;
}

/* ================= NAVBAR ================= */

.header{
width:100%;
position:fixed;
top:0;
left:0;
z-index:999;
background:white;
box-shadow:0 2px 12px rgba(0,0,0,0.08);
}

.navbar{
background-color: #103669;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 6%;
}

.logo img{
height:52px;
}

/* nav links */
.nav-links{
display:flex;
list-style:none;
gap:28px;
align-items:center;
}

.nav-links li{
list-style:none;
}

.nav-links a{
text-decoration:none;
color:#333;
font-weight:500;
position:relative;
transition:0.3s;
}

/* Book button */
.book-btn{
background:var(--primary);
color:white;
padding:11px 24px;
border-radius:30px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.book-btn:hover{
background:#e66700;
transform:translateY(-2px);
}

/* hamburger */
.menu-toggle{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.menu-toggle span{
width:26px;
height:3px;
background:#333;
border-radius:3px;
}

/* hide mobile book button desktop */
.mobile-book{
display:none;
}

/* ================= HERO ================= */

.hero{
position:relative;
min-height:calc(100vh - 78px);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
margin-top:78px;
overflow:hidden;
}

.hero-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}

/* overlay */
.hero::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(rgba(0,174,239,0.45), rgba(255,122,0,0.45));
z-index:-1;
}

.hero-content{
position:relative;
max-width:700px;
padding:0 20px;
}

.hero h1{
font-family:'Fredoka', sans-serif;
font-size:48px;
margin-bottom:18px;
}

.hero h1 span{
color:var(--yellow);
}

.hero p{
font-size:18px;
line-height:1.7;
margin-bottom:28px;
}

/* buttons */
.hero-buttons{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}

.primary-btn{
background:var(--yellow);
color:#222;
padding:14px 28px;
border-radius:30px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.primary-btn:hover{
transform:scale(1.05);
}

.secondary-btn{
background:transparent;
border:2px solid white;
color:white;
padding:14px 28px;
border-radius:30px;
text-decoration:none;
font-weight:600;
}

.secondary-btn:hover{
background:white;
color:#333;
}

/* ================= HIGHLIGHTS ================= */

.highlights{
background:white;
padding:60px 6%;
display:flex;
justify-content:space-between;
gap:25px;
flex-wrap:wrap;
text-align:center;
}

.highlight-box{
flex:1;
min-width:150px;
}

.highlight-box img{
width:60px;
margin-bottom:12px;
}

.highlight-box h3{
font-size:18px;
font-weight:600;
}

/* ================= ABOUT SECTION ================= */

.about-preview{
padding:80px 6%;
display:flex;
align-items:center;
gap:50px;
background:var(--bg);
flex-wrap:wrap;
}

.about-text{
flex:1;
min-width:280px;
}

.about-text h2{
font-size:36px;
margin-bottom:18px;
font-family:'Fredoka', sans-serif;
}

.about-text p{
line-height:1.8;
margin-bottom:25px;
font-size: 25px;
}

.about-image{
flex:1;
min-width:280px;
}

.about-image img{
width:100%;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

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

.footer{
background:#0d3d7a;
color:#ccc;
text-align:center;
padding:40px 20px;
}

.footer p{
margin:10px 0;
font-size:14px;
}

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

@media(max-width:900px){

.menu-toggle{
display:flex;
}

.book-btn.desktop{
display:none;
}

.nav-links{
position:absolute;
top:78px;
right:-100%;
width:100%;
background:white;
flex-direction:column;
align-items:center;
padding:30px 0;
gap:22px;
box-shadow:0 10px 25px rgba(0,0,0,0.12);
transition:0.4s;
}

.nav-links.show{
right:0;
}

.mobile-book{
display:block;
}

.book-btn.mobile{
background:var(--secondary);
}

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

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

.about-preview{
flex-direction:column;
text-align:center;
}
}


/* ============ SERVICES SECTION ============ */

.section-title{
text-align:center;
font-size:36px;
margin-bottom:50px;
font-family:'Fredoka', sans-serif;
}

/* container grid */
.services{
padding:90px 6%;
background:#ffffff;
}

.services-container{
display:grid;
grid-template-columns:repeat(4, 2fr);
gap:30px;
}


/* cards */
.service-card{
width: 300px;
height: 350px;
background:#F4F9FF;
padding:35px 25px;
border-radius:18px;
text-align:center;
transition:0.35s;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.service-card img{
width:90px;
margin-bottom:18px;
}

.service-card h3{
font-size:22px;
margin-bottom:12px;
color:#222;
}

.service-card p{
font-size:15px;
line-height:1.6;
color:#555;
}

/* hover effect (this makes it premium) */
.service-card:hover{
transform:translateY(-10px);
box-shadow:0 16px 35px rgba(0,0,0,0.15);
}

/* ============ PROMO SECTIONS ============ */

.promo{
padding:90px 6%;
}

.promo-container{
display:flex;
align-items:center;
gap:60px;
flex-wrap:wrap;
}

/* reverse for second section */
.promo-container.reverse{
flex-direction:row-reverse;
}

/* image */
.promo-image{
flex:1;
min-width:300px;
}

.promo-image img{
width:100%;
border-radius:20px;
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

/* text */
.promo-text{
flex:1;
min-width:300px;
}

.promo-text h4{
color:#5e2ca5;
letter-spacing:1px;
margin-bottom:10px;
font-weight:600;
}

.promo-text h2{
font-size:60px;
margin-bottom:18px;
font-family:'Fredoka', sans-serif;
}

.promo-text p{
line-height:1.8;
font-size: 20px;
margin-bottom:25px;
color:#444;
}

/* timing box */
.promo-time{
margin-bottom:25px;
}

.promo-time span{
font-weight:600;
display:block;
}

/* button */
.promo-btn{
display:inline-block;
background:#5e2ca5;
color:white;
padding:14px 30px;
border-radius:30px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.promo-btn:hover{
transform:translateY(-3px);
background:#4b2190;
}

/* background colors */
.birthday{
background:#cee127;
}

.school{
background:#FFC62A;
}

/* mobile */
@media(max-width:900px){
.promo-container{
flex-direction:column;
text-align:center;
}

.promo-container.reverse{
flex-direction:column;
}

.promo-text h2{
font-size:28px;
}
}


/* ================= COLORFUL NAVBAR LINKS (FIXED) ================= */

.nav-links li{
list-style:none;
}

/* base style */
.nav-links li a{
text-decoration:none;
font-size: 25px;
font-weight:bolder;
padding:8px 14px;
border-radius:20px;
transition:0.3s ease;
display:inline-block;
}

/* each menu item different color */
.nav-links li:nth-child(1) a{ color:#ff4d6d; }   /* Home */
.nav-links li:nth-child(2) a{ color:#ff9f1c; }   /* About */
.nav-links li:nth-child(3) a{ color:#2ec4b6; }   /* Activities */
.nav-links li:nth-child(4) a{ color:#3a86ff; }   /* Parties */
.nav-links li:nth-child(5) a{ color:#8338ec; }   /* Gallery */
.nav-links li:nth-child(6) a{ color:#06d6a0; }   /* Contact */

/* hover rainbow */
.nav-links li a:hover{
background:linear-gradient(45deg,#ff4d6d,#ffbe0b,#3a86ff,#06d6a0);
color:#fff !important;
transform:translateY(-2px) scale(1.05);
box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

/* active page */
.nav-links li a.active{
background:#ccc;
color:#5e2ca5 !important;
}


/* ===== REMOVE NAVBAR UNDERLINE HOVER ===== */

/* normal */
.nav-links li a{
text-decoration: none !important;
}

/* hover */
.nav-links li a:hover{
text-decoration: none !important;
border-bottom: none !important;
}

/* focus / active (some browsers add underline here) */
.nav-links li a:focus,
.nav-links li a:active,
.nav-links li a:visited{
text-decoration: none !important;
}


/* ===== WHATSAPP FLOAT BUTTON ===== */

.whatsapp-float{
position:fixed;
width:60px;
height:60px;
background-color: #a1ed14;
bottom:25px;
right:25px;
z-index:9999;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 20px rgba(0,0,0,0.25);
transition:0.3s;
}

.whatsapp-float img{
width:60px;
height:60px;
}

/* hover animation */
.whatsapp-float:hover{
transform:scale(1.12);
box-shadow:0 12px 28px rgba(0,0,0,0.35);
}

/* mobile adjust */
@media(max-width:600px){
.whatsapp-float{
width:55px;
height:55px;
bottom:20px;
right:18px;
}
}

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap; /* 🔥 keeps all icons in one line */
}


.social-icons a {
  flex-shrink: 0;
  text-decoration: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
}

.social-icons img {
  width: 20px;
  height: 20px;
  transition: all 0.35s ease;
}

/* HOVER EFFECT */
.social-icons a:hover {
  background: linear-gradient(135deg, #70269e, #d94b7a); /* violet → pink */
  transform: translateY(-6px);
  box-shadow: 0 12px 2cqi rgba(106, 27, 154, 0.35);
}

.social-icons a:hover img {
  filter: brightness(0) invert(1); /* logo turns white */
}