/* ================================
   🎨 DESIGN TOKENS
================================ */
:root{
  --primary:#044bce;
  --primary-dark:#070566;
  --accent:#6bd0ff;
  --light-bg:#f8fafc;
  --text-dark:#1a1a1a;
  --text-light:#f1f5f9;

  --radius-md:.75rem;
  --radius-lg:1.25rem;

  --shadow-soft:0 6px 20px rgba(0,0,0,.06);
  --shadow-hover:0 12px 30px rgba(0,0,0,.1);

  --transition:all .3s ease;
  --container-max:1200px;
  --spacing-section:6rem;
}

/* ================================
   🌐 GLOBAL
================================ */
body{
  font-family:"Poppins",sans-serif;
  color:var(--text-dark);
  background:var(--light-bg);
  line-height:1.6;
  scroll-behavior:smooth;
  font-size:1rem;
}
.container{max-width:var(--container-max);margin:0 auto;padding:0 1.25rem;}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;}

/* ================================
   🧭 NAVBAR
================================ */
.glass-nav{
  background:rgba(7,5,102,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  padding:.85rem 1.5rem;
}
.glass-nav .navbar-brand{font-weight:700;font-size:1.35rem;color:#fff;}
.glass-nav .nav-link{
  color:#fff!important;font-weight:500;margin:0 .5rem;padding:.5rem .75rem;border-radius:var(--radius-md);transition:var(--transition);
}
.glass-nav .nav-link:hover,.glass-nav .nav-link.active{color:var(--accent)!important;background:rgba(255,255,255,.1);}

/* ================================
   🦸 HERO (centered text + floating image)
================================ */
.hero{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:#fff;text-align:center;padding:7rem 1rem 6rem;
}
.hero h1{font-size:clamp(2.5rem,5vw,3.25rem);font-weight:800;margin-bottom:1rem;}
.hero p{font-size:1.1rem;max-width:700px;margin:0 auto 2rem;opacity:.9;}
.btn-pill{border-radius:50px;padding:.65rem 1.5rem;}
.hero-art{max-width:380px;margin:2.5rem auto 0;animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.gradient-text{
  background:linear-gradient(90deg,var(--accent),#fff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* ================================
   📦 SECTIONS (linear rhythm)
================================ */
.section-pad{padding:var(--spacing-section) 0;}
.section-title{font-size:2.25rem;font-weight:700;margin-bottom:.75rem;}
.section-subtext{font-size:1.05rem;color:#000000ad;margin-bottom:2.5rem;}
#services{background:#fff;


}
#team {
  background: linear-gradient(135deg, var(--light-bg) 0%, rgba(255, 255, 255, 0.438) 100%);
  
  
}
#faqs{background:#fff;}
#testimonials{background:var(--light-bg);


}
#clients{background:#fff;}
#contact{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;}

/* ================================
   🪟 CARD SYSTEM
================================ */
.card-clean{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
  padding:2rem 1.5rem;transition:var(--transition);text-align:center;
}
.card-clean:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}

/* ================================
   🛠️ SERVICES
================================ */
.service-card i{font-size:2.5rem;color:var(--primary);margin-bottom:1rem;}
.service-card h5{margin-bottom:.5rem; 
}
.service-card p{font-size:.95rem;color:#555;}

.service-card {
  border: 1px solid #01102c34; /* light gray border */
  border-radius: var(--radius-lg);
  background: #ffffff9f;
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.5rem;
  transition: var(--transition);
  text-align: center;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent); /* subtle highlight on hover */
}



/* green gradient buttons (CTA small) */
.btn-cta-sm{
  display:inline-block;border:none;border-radius:50px;padding:.5rem 1.25rem;font-weight:600;
  color:#fff;background:linear-gradient(135deg,#22c55e,#15803d);box-shadow:0 6px 18px rgba(34,197,94,.35);
  transition:var(--transition);text-decoration:none;
}
.btn-cta-sm:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(34,197,94,.45);}

/* ================================
   👥 TEAM
================================ */
/* ================================
   👥 TEAM
================================ */
.team-card {
  border: 1px solid #01102c34; /* subtle border */
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: var(--transition);
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent); /* accent highlight on hover */
}

.team-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: .75rem;
  object-fit: cover;
  border: 3px solid var(--accent);
}

.team-card h6 {
  margin-bottom: .25rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.team-card small {
  color: #666;
}

/* ================================
   ❓ FAQs (Accordion)
================================ */
.faq-item {
  background: #fff;
  border: 1px solid #01102c34; /* subtle border */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  margin-bottom: 1rem;
}

.accordion-button{
  font-weight:600;padding:1rem 1.25rem;color:#0b1020;background:#fff;
}
.accordion-button:not(.collapsed){
  color:#0b1020;background:linear-gradient(90deg,#f7fbff,#eef7ff);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,0.05);
}
.accordion-button:focus{box-shadow:none;}
.accordion-body{color:#333;padding:1rem 1.25rem;}

/* ================================
   💬 TESTIMONIALS
================================ */
.testimonial-card {
  border: 1px solid #01102c34;     /* subtle border */
  border-radius: var(--radius-lg); /* rounded corners */
  background: #fff;
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: var(--transition);
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);     /* accent highlight on hover */
}

.testimonial-card img {
  width: 70px;
  height: 70px;
  border-radius: 50%;              /* round avatar */
  margin-bottom: .75rem;
  object-fit: cover;
  border: 2px solid var(--accent); /* accent ring */
}

.testimonial-card p {
  font-style: italic;
  font-size: .95rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 1rem;
}
/* ================================
   🏢 CLIENTS (seamless auto scroll)
================================ */
.clients-carousel{position:relative;overflow:hidden;width:100%;}
.clients-track{
  display:flex;gap:4rem;width:max-content;animation:scrollClients 12s linear infinite;
}
.client-logo{height:70px;flex:0 0 auto;transition:transform .3s ease;}
.client-logo:hover{transform:scale(1.1);}
@keyframes scrollClients{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ================================
   📣 CTA (Get Free Advice)
================================ */
.cta-section{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:4rem 1rem;}
.cta-title{font-size:2rem;font-weight:700;margin-bottom:.75rem;}
.cta-subtext{font-size:1.1rem;margin-bottom:1.5rem;opacity:.9;}
.btn-cta{
  border-radius:50px;padding:.75rem 2rem;font-weight:700;font-size:1.1rem;
  background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;box-shadow:0 6px 18px rgba(34,197,94,.35);
  transition:var(--transition);text-decoration:none;display:inline-block;
}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(34,197,94,.45);}

/* ================================
   🦶 FOOTER (multi-column)
================================ */
.footer{background:#070566;color:#ccc;padding:3rem 1rem 1rem;font-size:.95rem;}
.footer h5,.footer h6{color:#fff;}
.footer a{color:#ccc;text-decoration:none;transition:var(--transition);}
.footer a:hover{color:var(--accent);}
.footer-links li{margin-bottom:.5rem;}
.footer .socials a{color:#fff;margin-right:.75rem;font-size:1.25rem;transition:var(--transition);}
.footer .socials a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);color:#aaa;}

/* ================================
   🔝 BACK TO TOP
================================ */
.back-to-top{
  position:fixed;bottom:20px;right:20px;display:none;z-index:1030;box-shadow:var(--shadow-soft);
}

/* ================================
   📱 RESPONSIVE
================================ */
@media (max-width:768px){
  .hero{padding:5rem 1rem;}
  .hero-art{margin-top:2rem;}
}
/* About Us */
#about {
  background: #fff;
}

.about-list li {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: #333;
}
.about-list i {
  color: #22c55e; /* green check icon */
  font-size: 1.1rem;
}
/* Video Section */
#video {
  background: var(--light-bg);
}

.video-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  max-width: 860px;
  margin: 0 auto;
}

.video-wrap iframe {
  width: 100%;
  height: 480px;
}
.stars {
  font-size: 1.2rem; /* adjust size */
  color: #f5c518;   /* golden yellow */
}

.stars i {
  margin-right: 2px; /* little spacing */
}


/* ================================
   📝 BLOG SECTION
================================ */
#blog {
  background: #fff;
}

.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.blog-card {
  background: #fff;
  border: 1px solid #01102c34;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-card .content {
  padding: 1.5rem;
}

.blog-card h5 {
  font-size: 1.2rem;
  margin-bottom: .5rem;
  font-weight: 600;
}

.blog-card p {
  font-size: .95rem;
  color: #555;
  margin-bottom: 1rem;
}

.blog-meta {
  font-size: .8rem;
  color: #777;
  margin-bottom: .75rem;
}

.blog-card a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.blog-card a:hover {
  color: var(--accent);
}

/* ================================
   📝 BLOG CARDS
================================ */
.blog-card {
  background: #fff;
  border: 1px solid #01102c34;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-card .content {
  padding: 1rem 1.25rem 1.5rem;
  flex-grow: 1;
}

.blog-card h5 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
  font-weight: 600;
}

.blog-card p {
  font-size: .95rem;
  color: #555;
  margin-bottom: 1rem;
}

.blog-meta {
  font-size: .8rem;
  color: #777;
}
/* ================================
   🖼️ BLOG SIDEBAR IMAGE
================================ */
.blog-sidebar img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  margin-top: 1rem;
}