/* Nav */
.nav{display:flex;gap:18px;align-items:center}
.nav a, .dropbtn { /* ADDED .dropbtn HERE */
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
}
/* NEW: Hover effect for nav links */
.nav a:hover, .dropbtn:hover { /* ADDED .dropbtn:hover HERE */
  color:var(--accent1);
  transform:translateY(-2px);
}
/* ... rest of your code ... */



/* Modern Colorful Theme - style.css */
:root{
  --bg:#fbfbff;
  --accent1:#ff8a80;
  --accent2:#7c4dff;
  --accent3:#00bfa5;
  --muted:#6b6b7a;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.72);
  /* New Variable for subtle shadow on elements */
  --shadow-subtle: 0 4px 12px rgba(0,0,0,0.05);
  /* New Variable for main text color */
  --text-main: #2b2b3a; 
}

/* GLOBAL RESET & BASE STYLES */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  /* UPDATED: Animated background gradient */
  background: linear-gradient(-45deg, var(--bg), #f6f8ff, var(--accent2)20%, #f6f8ff, var(--bg));
  background-size: 400% 400%; 
  animation: gradientShift 15s ease infinite; 
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* NEW: Global Transition for smoother interactions */
a, button, .card, .gallery-grid img {
  transition: all 0.3s ease-out; 
}


/* Header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 28px;
  gap:16px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.7)); 
  backdrop-filter: blur(8px); 
  z-index:30;
  border-bottom:1px solid rgba(0,0,0,0.04);
  box-shadow: var(--shadow-subtle); 
}

.brand h1{margin:0;font-size:1.1rem;letter-spacing:0.6px;color: var(--text-main)} 
.brand .tag{font-size:0.78rem;color:var(--muted);margin-top:2px}

/* Nav */
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:600}
/* NEW: Hover effect for nav links */
.nav a:hover{color:var(--accent1);transform:translateY(-2px);}
.nav a.active{color:var(--accent2)}
.nav a.active:hover{color:var(--accent2);transform:none;}


/* Hero */
.hero{
  margin-top:78px;
  position:relative;
  height:62vh;
  max-height:620px;
  overflow:hidden;
  border-radius:18px;
  margin-left:28px;
  margin-right:28px;
  box-shadow: 0 20px 50px rgba(124,77,255,0.12); 
}

.slides{
  display:flex;
  width:150%;
  height:90%;
  animation: slide 40s infinite;
}

.slides img{width:100%;height:100%;object-fit:cover}

/* overlay */
.hero-overlay{
  position:absolute;
  left:40px;
  top:30%;
  transform:translateY(-10%);
  color:#fff;
  max-width:560px;
  padding:24px; 
  background: linear-gradient(135deg, rgba(124,77,255,0.9), rgba(0,191,165,0.9)); 
  border-radius:12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25); 
}
.hero-overlay h2{margin:0 0 8px 0;font-size:2.2rem} 
.hero-overlay p{margin:0 0 14px 0;opacity:0.95}
.cta, .secondary{display:inline-block;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:700}
.cta{background:var(--accent1);color:#fff;} 
/* NEW: Hover effect for CTAs */
.cta:hover{background:var(--accent2);box-shadow:0 6px 15px rgba(0,0,0,0.15);transform:translateY(-1px);}
.secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.4);} 
.secondary:hover{border-color:#fff;background:rgba(255,255,255,0.1);transform:translateY(-1px);}


/* Sections */
.section{padding:60px 28px;max-width:1100px;margin:0 auto}
.section h2{font-size:1.8rem;color:var(--text-main);margin-bottom:20px;position:relative;} 

/* NEW: Scroll Reveal Effect Class */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* Service grid */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{
  background:var(--card);
  padding:20px; 
  border-radius:16px; 
  box-shadow:0 10px 30px rgba(112,98,255,0.08); 
  position:relative;
  overflow:hidden;
  z-index:1;
}

/* NEW: Shimmer Hover Effect for Cards */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
  transition: all 0.5s ease-in-out;
  z-index: 2;
}
.card:hover::before {
  left: 125%;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow:0 15px 40px rgba(124,77,255,0.15);
}

.card h3{color:var(--accent1);margin-bottom:8px}
.card p{color:var(--muted)}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px;margin-top:15px}
.gallery-grid img{
  width:100%;
  border-radius:12px; 
  display:block;
  aspect-ratio:4/3;
  object-fit:cover;
  box-shadow: var(--shadow-subtle);
}
.gallery-grid img:hover{
  transform:scale(1.05); 
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.person{text-align:center;padding:15px;border-radius:10px;background:var(--card);box-shadow:var(--shadow-subtle)}
.person img{width:100%;height:200px;object-fit:cover;border-radius:8px;margin-bottom:10px}

/* Contact */
.contact form{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:15px}
input,textarea{
  padding:14px; 
  border-radius:10px; 
  border:1px solid rgba(10,10,20,0.1);
  background:rgba(255,255,255,0.7); 
}
/* NEW: Focus state for inputs */
input:focus, textarea:focus {
  outline: 2px solid var(--accent2);
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.2);
}

button.cta{background:var(--accent2);color:#fff;border:none;padding:14px;border-radius:10px;cursor:pointer;font-size:1.1rem}
button.cta:hover{background:var(--accent3);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}


/* Footer */
.site-footer{padding:30px 28px;text-align:center;color:var(--muted);margin-top:50px;border-top:1px solid rgba(0,0,0,0.04)}

/* Animations */
@keyframes slide{
  0%{transform:translateX(0)}
  33%{transform:translateX(-100%)}
  66%{transform:translateX(-200%)}
  100%{transform:translateX(0)}
}

/* NEW: Animation for body background gradient */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Responsive */
@media (max-width:900px){
  .hero-overlay{left:20px;right:20px;top:40%}
}
@media (max-width:600px){
  .nav{display:none}
  .menu-toggle{display:block}
  .hero{height:46vh}
  .hero-overlay h2{font-size:1.2rem}
}


.banner {
  white-space: nowrap;
  overflow: hidden;
}

.banner-text {
  display: inline-block;
  animation: scrollBanner 5s linear infinite; 
}

@keyframes scrollBanner {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

/* --- NEW: Dropdown Styling --- */

/* Dropdown container - required for positioning the content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* The button/link that opens the dropdown */
.dropbtn {
  /* Inherits styles from .nav a, but we ensure it looks active/clickable */
  cursor: pointer;
}

/* Dropdown Content (Hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--card); /* Use card background for the menu */
  min-width: 160px;
  box-shadow: 0 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 40; /* Higher than header z-index (30) to sit above other content */
  top: 100%; /* Position right below the "Services" link */
  left: 0;
  border-radius: 8px;
  padding: 8px 0;
  /* NEW: Add a subtle transition for the opening effect (optional) */
  opacity: 0; 
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: var(--muted);
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, padding 0.2s;
}

/* Hover effect for dropdown links */
.dropdown-content a:hover {
  background-color: var(--bg); /* Light background on hover */
  color: var(--accent2); /* Accent color text on hover */
  padding-left: 20px; /* Slight indentation for visual feedback */
  transform: none; /* Override the nav link hover transform */
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1; 
  transform: translateY(0);
}

/* Ensure the 'Services' link itself gets a hover style when the menu is open */
.dropdown:hover .dropbtn {
    color: var(--accent2); 
    transform: translateY(0); /* Ensure this link stays in place */
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav {
    display: none;
  }

  .nav.open {
    display: flex;
    flex-direction: column;
  }
}