/* ===========================
   Zeik Labs — style.css
   Clear comments included so you can edit easily.
   Put images used by HTML into the assets/ folder (service-1.png, team1.png, etc.)
=========================== */

/* ---------------------------
   Variables (edit colors here)
   --------------------------- */
:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --accent: #e42b50;
  --accent-2: #ff6f61;
  --nav-height: 72px;
  --container: 1100px;
  --radius: 12px;
  --glass: rgba(255,255,255,0.6);
}

/* Dark mode variables (applied by .dark on <html>) */

/* ---------------------------
   Base styles
   --------------------------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg);transition:background .35s,color .35s}
a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* ---------------------------
   Header / Nav
   --------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:1200;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(0,0,0,0.06);
  transition:background .3s, transform .3s;
}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:40px;width:auto;border-radius:8px;cursor:pointer}
.brand{font-weight:700;font-size:1.5rem}
nav.main-nav{display:flex;gap:22px;align-items:center}
nav.main-nav a{font-weight:600;padding:10px 8px;font-size:1.15rem;border-radius:8px;transition:color .2s, transform .15s}
nav.main-nav a:hover{color:var(--accent);transform:translateY(-2px)}
.nav-right{display:flex;align-items:center;gap:12px}
.btn-ghost{padding:8px 14px;border-radius:28px;border:2px solid var(--accent);background:transparent;color:var(--accent);font-weight:700;cursor:pointer}
.btn-primary{padding:10px 16px;border-radius:28px;border:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;cursor:pointer}

/* mobile button (hidden on desktop) */
.mobile-menu-btn{display:none;font-size:28px;cursor:pointer}

/* MOBILE MENU FIX */
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 18px;
  background: #ffffff;
  text-align: center;
  padding: 20px 0;
  position: fixed;
  top: 72px;
  left: 0;
  width: 100%;
  z-index: 9999;
  border-top: 1px solid #e6e6e6;
}

/* Show when toggled */
.mobile-nav.open {
  display: flex;
}

/* Style mobile nav links */
.mobile-nav a {
  font-size: 1.3rem;
  font-weight: 600;
  padding: 10px;
  border-radius: 8px;
}

.mobile-nav a:hover {
  background: #f7f7f7;
  color: #e42b50;
}


/* ---------------------------
   HERO (animated)
   --------------------------- */
.hero{padding-top:var(--nav-height);min-height:calc(100vh - var(--nav-height));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height: 100vh;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: var(--gradient-bg);}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.wave{position:absolute;left:-10%;width:120%;height:40vh;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0.06;border-radius:50%;filter:blur(40px);animation:wobble 12s linear infinite}
.wave1{top:-10%;transform:rotate(10deg)}
.wave2{bottom:-8%;transform:rotate(-8deg);animation-duration:18s}
@keyframes wobble{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(6%) rotate(6deg)}100%{transform:translateX(0) rotate(0)}}

/* floating shapes */
.hero-shapes{position:absolute;inset:0;z-index:1;pointer-events:none}
.shape{position:absolute;border-radius:16px;opacity:0.95;mix-blend-mode:screen;filter:blur(0.5px)}
.s1{width:140px;height:140px;background:linear-gradient(180deg,#ffd1da,#ff9aa2);top:12%;left:8%;animation:float 6s ease-in-out infinite}
.s2{width:100px;height:100px;background:linear-gradient(180deg,#ffe5b4,#ffd1a8);top:28%;right:12%;animation:float 8s ease-in-out infinite}
.s3{width:80px;height:80px;background:linear-gradient(180deg,#cbe8ff,#9fd3ff);bottom:22%;left:18%;animation:float 7s ease-in-out infinite}
.s4{width:60px;height:60px;background:linear-gradient(180deg,#d7f5e4,#aef0c7);bottom:10%;right:8%;animation:float 5s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-16px)}100%{transform:translateY(0)}}

/* hero content */
.hero-inner{position:relative;z-index:2;text-align:center;padding:60px 20px}
.hero h1{font-size:3.6rem;line-height:1.02;margin:0 0 18px;font-weight:800}
.hero .lead{color:var(--muted);font-size:1.25rem;margin:0 0 20px}
.hero-ctas{display:flex;gap:12px;justify-content:center;margin-top:18px}
.hint{margin-top:14px;color:var(--muted);font-size:13px}

/* ---------------------------
   Section general
   --------------------------- */
section{padding:80px 0;background:var(--bg);position:relative;transition:background 0.6s ease-in-out}
.section-title{text-align:center;margin-bottom:36px}
.section-title h2{font-size:2.2rem;margin:6px 0}
.section-title p{color:var(--muted)}


/* ---------------------------
   ABOUT: horizontal, bigger cards
   --------------------------- */
/* ===== ABOUT SECTION NEW STYLE ===== */

#about {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-wrapper {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  width: 100%;
  padding: 20px;
}

/* Left Side Images */
.about-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-img {
  width: 400px;
  height: 400px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.841);
}

.img-stack {
  display: flex;
  gap: 20px;
}

.top1-img {
  width: 140px;
  height: 150px;
  margin-left: 350px;
  display:flex;
}


.med1-img{
  width: 300px;
  height: 230px;
  object-position: center-top;
}
.med2-img {
  width: 300px;
  height: 230px;
}

.top2-img {
  width: 140px;
  height: 150px;
  margin-left: 135px;
}


/* Right Side Content */
.about-content {
  max-width: 450px;
}

.about-content .tag {
  font-size: 19px;
  letter-spacing: 3px;
  margin-left: 10px; 
  color:#e1284d;
}

.about-content h2 {
  font-size: 48px;
  margin: 10px 0 20px;
}

.about-content p {
  font-size: 17px;
  line-height: 1.6;
  color: #000000;
}

/* Button Style */
.about-btn {
  background: #e42b50de;
  color: white;
  padding: 14px 32px;
  display: inline-block;
  border-radius: 10px;
  margin-top: 24px;
  font-weight: 600;
  transition: 0.3s;
  text-decoration: none;
  box-shadow:0 8px 20px #e42b501f;
}

.about-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0px 8px 22px rgba(255, 110, 195, 0.688);
}

/* card content */
.card .icon{width:72px;height:72px;border-radius:12px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 8px 20px rgba(228,43,80,0.12)}
.card h3{margin:8px 0;font-size:1.15rem}
.card p{color:var(--muted)}

/* ---------------------------
   SERVICES (alternating + text box)
   --------------------------- */
/* Base layout for each services row */
.services-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  margin-bottom:80px;
  flex-wrap:wrap;
  opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease;
}
/* When visible we add .reveal via JS */
.services-row.reveal{opacity:1;transform:translateY(0)}

/* image size */
.services-row img{width:420px;max-width:100%;border-radius:16px;box-shadow:0 10px 35px rgba(0,0,0,0.12);transition:transform .25s}
.services-row img:hover{transform:translateY(-6px)}

/* semi-transparent rounded text box (glass style) */
.services-text-box{
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(8px);
  padding:28px;
  border-radius:18px;
  max-width:520px;
  border:3px solid  #e1284d80 ;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
  transition:transform .3s, max-height .4s, padding .3s;
}
.services-text-box:hover{transform:translateY(-6px)}
.services-text-box h3{margin-bottom:12px;font-size:1.5rem}
.services-text-box p, .services-text-box li{font-size:1.05rem;color:var(--muted)}

/* Alternate rows: every even .services-row flips order */
.services-row:nth-child(even){flex-direction:row-reverse}

/* ---------------------------
   reveal animations (cards etc)
   --------------------------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{padding:22px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.98),#fff);box-shadow:0 10px 30px rgba(2,6,23,0.06);border:1px solid rgba(0,0,0,0.04);text-align:center;transition:transform .25s}
.card:hover{transform:translateY(-8px)}
.card .icon{width:72px;height:72px;border-radius:14px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 8px 20px rgba(228,43,80,0.12)}
.card h3{margin:8px 0;font-size:1.1rem}


.projects-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px;
  transition: 0.3s ease;
  max-width: 1400px;
  margin: auto;
}

/* Project Card */
.project-card {
  background: #ffffff;
  padding: 22px;
  width: 260px;
  min-width: 260px;
  border-radius: 14px;
  text-align: center;
  border: 3px solid #e1284d80;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  transition: 0.3s ease;
}

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


/* ---- MAKE IT AUTO-SCROLLABLE WHEN 5+ CARDS EXIST ---- */

.projects-wrapper.scroll {
  overflow-x: auto;
  flex-wrap: nowrap;
  scroll-snap-type: x mandatory;
}

.project-card {
  scroll-snap-align: start;
}

/* Hide scrollbar */
.projects-wrapper::-webkit-scrollbar { display: none; }
.projects-wrapper { scrollbar-width: none; }

/* ---------------------------
   TEAM
   --------------------------- */
   .team-grid {
  display: flex;
  flex-wrap: nowrap; /* 👈 forces a single horizontal line */
  gap: 25px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar */
.team-grid::-webkit-scrollbar { display: none; }
.team-grid { scrollbar-width: none; }

/* ==== TEAM CARD FIX (fits 4 per screen) ==== */
.member {
  flex: 0 0 23%; /* 👈 THIS ensures exactly 4 per row */
  max-width: 300px;
  min-width: 240px;
  background: var(--glass);
  padding: 22px;
  border-radius: 14px;
  text-align: center;
  backdrop-filter: blur(6px);
  border: 3px solid #e1284d80;
  transition: transform .25s ease-in-out;
  scroll-snap-align: start;
}

.member:hover {
  transform: translateY(-6px);
}

/* Clean typography */
.member h4 {
  font-size: 18px;
  margin-bottom: 6px;
}

.member p.role {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
}
.member:hover {
  transform: translateY(-6px);
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  margin: 0 auto 12px;
  overflow: hidden;
  border: 4px solid rgba(228,43,80,0.08);
}

.avatar img {
  width: 100%;
  max-width: 1000px;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  image-rendering: auto;
}

/* Text Styles */
.member h4 {
  margin: 6px 0;
}

.member p.role {
  color: var(--muted);
  margin: 0;
}

/* socials */
.team-socials{margin-top:12px;display:flex;justify-content:center;gap:12px}
.team-socials a{font-size:16px;color:var(--accent);background:#fff;width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.06);transition:all .2s}
.team-socials a:hover{background:var(--accent);color:#fff;transform:translateY(-4px)}

.blogs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 20px;
}

.blog-card {
  background: var(--glass);
  padding: 20px;
  border-radius: 12px;
  border: 3px solid #e1284d80 ;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  transition: transform .25s ease;
  min-height: 170px;
}

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

.blog-card small {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

.blog-card h4 {
  margin: 10px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.blog-card a {
  text-decoration: none;
  font-weight: bold;
  color: var(--accent);
}

/* Mobile responsive */
@media(max-width:768px) {
  .blogs {
    grid-template-columns: 1fr;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }

  .blog-card {
    flex: 0 0 90%;
    scroll-snap-align: center;
  }
}

/* faq */
.faq-list{max-width:900px;margin:0 auto}
.faq-item{border-radius:10px;margin-bottom:10px;border:3px solid #e1284d80;overflow:hidden}
.faq-item button{width:100%;text-align:left;padding:16px;background:transparent;border:0;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.answer{padding:14px;border-top:2px solid #e1284d80;display:none;color:var(--muted)}

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

.footer {
  background: #ffffff;
  padding: 60px 0;
  border-top: 1px solid #ececec;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 0 20px;
}

.footer-col h3,
.footer-col h4 {
  margin-bottom: 12px;
  font-weight: 700;
  color:#111827;
}

.footer-col p {
  color: #555;
  line-height: 1.5;
}

/* INPUT */
.address-input {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.address-input input {
  padding: 10px;
  width: 200px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.save-btn {
  background: #e42b50;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

/* Social Icons */
.footer-socials {
  display: flex;
  gap: 14px;
  margin-top: 15px;
}

.footer-socials img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e42b50;
  padding: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.footer-socials img:hover {
  background: #e42b50;
  filter: brightness(10);
}

/* ------- CONTACT COLUMN ------- */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

/* Phone numbers styling */
.footer-col .phone {
  font-size: 1rem;
  margin: 0;
  padding: 0;
  font-weight: 500;
}

/* Social icons container */
.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}

/* Circle icons */
.footer-social a {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #e1284d0c;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.3s ease;
}

.footer-social i {
  color: #e1284d;
  font-size: 16px;
}

/* Hover Effect */
.footer-social a:hover {
  background: #e1284d;
}

.footer-social a:hover i {
  color: white;
}

/* 🔧 Mobile Fix */
@media(max-width: 768px) {
  .footer-col {
    align-items: center;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
}


/* Bottom Text */
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  color: #777;
  font-size: 14px;
}

.footer-socials {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.footer-socials a {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #e1284d1a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e1284d;
  font-size: 17px;
  transition: 0.3s ease-in-out;
}

/* Hover animation */
.footer-socials a:hover {
  background: #e1284d;
  border-color: #e1284d;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0px 6px 14px rgba(0,0,0,0.15);
}

/* Mobile center alignment */
@media (max-width:768px){
  .footer-socials {
    justify-content: center;
  }
}


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

@media (max-width: 768px) {
  .footer-container {
    text-align: center;
    flex-direction: column;
    gap: 30px;
  }

  .address-input {
    justify-content: center;
  }

  .footer-socials {
    justify-content: center;
  }
}


/* editable outline */
[contenteditable="true"]{outline:1px dashed rgba(0,0,0,0.06);padding:2px;border-radius:4px}

/* ---------------------------
   Mobile / Responsive tweaks
   --------------------------- */
@media(max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:2.8rem}
}

/* ---- MOBILE OPTIMIZATION & FIX BLOG CUT-OFF ---- */
@media(max-width:900px){
  .about-wrapper{flex-direction:column;text-align:center}
  .about-img{width:90vw;height:auto}
  .img-stack{flex-direction:column}
  .services-row{flex-direction:column}
  .services-row img{width:85vw}
}

@media(max-width:768px){

  .mobile-menu-btn{display:block}
  nav.main-nav{display:none}

  /* Keep layout edge-to-edge */
  body, html, .container {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .hero h1 {
  font-size: 1.8rem;
}

.hero .lead {
  font-size: 0.9rem;
}


  .about-images {
    display: none !important;
  }

  /* Center text nicely after images disappear */
  .about-wrapper {
    justify-content: center;
    text-align: center;
  }

  .about-content .tag {
    text-align: center !important;
    width: 100%;
    display: block;
    margin-left: 0; /* remove desktop offset */
  }

  /* Center heading "About Us" */
  .about-content h2 {
    text-align: center !important;
    font-size: 1.9rem; /* reduced for mobile */
  }


  .about-content {
    width: 100%;
    max-width: 90vw;
    margin: auto;
  }


  .services-text-box h3 {
    text-align: center;
    font-size: 1.4rem; /* optional mobile scale */
  }

  /* Optional: center the bullet text but keep bullets aligned */
  .services-text-box p,
  .services-text-box li {
    text-align: center;
  }

  /* Fix bullet indent for centered text */
  .services-text-box ul {
    padding-left: 0;
    list-style-position: inside;
  }

  section{padding:60px 18px}  /* adds breathing room */

  /* Font resizing */
  .section-title h2{font-size:1.9rem}
  .section-title p{font-size:1rem}
  .about-content h2{font-size:2.2rem}
  .about-content p{font-size:1rem}
  .services-text-box p,
  .project-card,
  .blog-card,
  .member p{font-size:0.95rem}

  /* Projects, Members & Blogs full width centered */
  .project-card,.member,.blog-card{
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }

  /* ---- Blog scroll fix ---- */
  .blogs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    overflow-x: visible;
  }

  .blog-card {
    width: 100%;
    max-width: 100%;
    padding: 18px;
    box-sizing: border-box;
  }
}

@media(max-width:420px){
  .section-title h2{font-size:1.6rem}
  .about-content p,
  .services-text-box p{font-size:0.9rem}
}