/*TECHVIEW - styles.css
   Unique IDs/classes to avoid conflict
   ============================ */

:root{
  --accent: #ffd54a; /* yellow */
  --white: #ffffff;
  --black: #0b0b0b;
  --muted: #6b7280;
  --green: #10b981;
  --red: #ef4444;
  --max-width: 1200px;
}

/* Reset-ish */
*{box-sizing:border-box}
body{ margin:0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial; color:#111; line-height:1.5; background:#fff }

/* ------------------------------
   TOP TEXT SWAPPER (content in CSS)
   Black text on white background
   ------------------------------ */
.top-swapper{
  width:100%;
  background: #000;
  color: white;
  text-align:center;
  padding:10px 12px;
  font-weight:700;
  font-size:16px;
  border-bottom:1px solid white;
  position:relative;
  overflow:hidden;
}
.top-swapper::after{
  content: "Digital ads that convert.";
  display:block;
  animation: tvSwap 30s linear infinite;
  padding:4px 0;
}

/* 10 texts: adjust timings if desired */
@keyframes tvSwap {
  0% { content: "We cover East Africa & beyond."; }
  9% { content: "Beautiful responsive websites."; }
  18%{ content: "Targeted Google Search campaigns."; }
  27%{ content: "High-performing Facebook ads."; }
  36%{ content: "WhatsApp message marketing."; }
  45%{ content: "Old website redesign."; }
  54%{ content: "Conversion tracking & analytics."; }
  63%{ content: "SEO to boost organic traffic."; }
  72%{ content: "Digital ads that convert."; }
  81%{ content: "We help businesses grow."; }
  90%{ content: "Contact us for a free quote."; }
  100%{ content: "Websites that increase customers."; }
}

/* ------------------------------
   HEADER
   ------------------------------ */
.tv-header{
  width:100%;
  background:#000;
  color:var(--white);
  position:sticky;
  top:0;
  z-index:70;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.tv-header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0px;
  gap:10px;
}

/* Brand */
.tv-brand{ display:flex; align-items:center; gap:12px }
#tvLogo{ width:75px; height:75px; object-fit:contain; border-radius:6px; margin-left: -15px; }
.tv-name{ font-weight:800; font-size:25px; margin-left: -30px; }
.tv-tech{ color:#fff; font-size: 25px; }
.tv-view{ color: yellow; margin-left: 2px; font-size: 25px; }

/* Desktop nav */
.tv-nav .tv-menu{ display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center }
.tv-menu a{ color:#fff; text-decoration:none; font-weight:600; padding:8px 10px; display:inline-flex; gap:8px; align-items:center; border-radius:6px; transition: background .2s, color .2s }
.tv-menu a .icon{ opacity:.9; font-size:14px }
.tv-menu a .icon i { color: gold; font-size:14px }

/* hover & active */
.tv-menu a:hover{ background:rgba(255,255,255,0.06) }
.tv-menu a:active, .tv-menu a.active { background:var(--accent); color:#000 }

/* hamburger */
.tv-hamburger{ display:none; background:transparent; border:0; padding:20px; cursor:pointer; color:#fff }
.hamburger-lines{ width:30px; height:2px; background:#fff; display:block; position:relative }
.hamburger-lines::before, .hamburger-lines::after{ content:""; position:absolute; left:0; width:30px; height:2px; background:#fff }
.hamburger-lines::before{ top:-8px } .hamburger-lines::after{ top:8px }

/* MOBILE MENU (slide) */
.mobile-menu{
  position:fixed; top:0; right:-380px; width:360px; height:100vh; background:#000; color:#fff; z-index:90; transition:right .35s cubic-bezier(.2,.9,.2,1); display:flex; flex-direction:column;
}
.mobile-menu.open{ right:0 }
.mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; padding:18px; background:#000; border-bottom:1px solid rgba(255,255,255,.06) }
.mobile-menu-title{ font-weight:800; color:#fff; font-size:18px }
.mobile-close{ background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer }
.mobile-menu-list{ padding:18px; display:flex; flex-direction:column; gap:12px; background:#0f1720; flex:1; overflow:auto }
.mobile-menu-list a{ display:flex; align-items:center; gap:12px; background:#fff; color:#111; padding:12px; border-radius:10px; text-decoration:none; font-weight:700 }

/* menu end */
.mobile-menu-end{ padding:16px; background:#000; color:#fff; text-align:center; font-weight:800 }

/* layout responsiveness */
@media (max-width:1200px){
    .tv-menu a{
        font-size: 15px;
    }
}
@media (max-width:1020px){
    .tv-menu a{
        font-size: 13px;
    }
}
@media (max-width:980px){
  .tv-nav{ display:none }
  .tv-hamburger{ display:block }
}

/* HERO (centered, visible white margin around) */
.hero-tv{ background:#000; color:#fff; padding:80px 16px; margin:20px; /* visible white margin as requested */ }
.hero-inner{ max-width:var(--max-width); margin:0 auto; display:flex; justify-content:center; align-items:center }
.hero-center{ width:100%; max-width:900px; text-align:center }

/* WELCOME big, blink and color change */
.hero-welcome{ font-size:clamp(48px, 10vw, 96px); font-weight:900; font-family: serif; margin:0; line-height:0.9; animation: blinkColor 1.5s infinite, colorShift 4s infinite }
@keyframes blinkColor { 0%, 60% { opacity:1 } 30% { opacity:0.15 } 100% { opacity:1 } }
@keyframes colorShift { 0% { color: lawngreen } 50% { color: lawngreen } 100% { color: lawngreen } }

.hero-h1{ font-size:clamp(22px, 4vw, 42px); margin:12px 0 6px; font-weight:800 }
.hero-sub{ font-size:clamp(14px, 2.5vw, 18px); color:#ddd; margin-bottom:14px }

/* HERO SWIPER single-line vertical */
.hero-swiper{ width:100%; max-width:560px; height:40px; margin:12px auto 0; overflow:hidden; position:relative }
.swiper-list{ display:flex; flex-direction:column; transform:translateY(0); transition:transform .45s ease }
.swiper-item{ height:40px; display:flex; align-items:center; justify-content:center; color:#00ff66; font-weight:800; font-size:1rem }

 /* MEDIA SECTION (carousel + video) */
 .media-section{ padding:30px 16px; background: black }
 .media-flex{ max-width:var(--max-width); margin:0 auto; display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap }
 
 /* Carousel: each slide = 100% of carousel width; image inside constrained to banner size */
 .carousel{ flex:1 1 640px; min-width:300px; overflow:hidden; background:#fff; display:block; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.06) }
 .carousel-track{ display:flex; transition:transform .8s cubic-bezier(.2,.9,.2,1) }
 .carousel-slide{ min-width:100%; display:flex; align-items:center; justify-content:center; padding:12px 0; box-sizing:border-box }
 .carousel-slide img{ width:85%; max-width:900px; max-height: 500px; object-fit:contain; border-radius:6px }
 
 /* dots (optional) */
 .carousel-dots{ display:flex; justify-content:center; gap:8px; padding:8px 0; }
 
 /* VIDEO */
 .media-video-1{ flex:1 1 420px; min-width:260px; display:flex; align-items:center; justify-content:center }
 .promo-video-1{ width:100%; max-width:620px; height:auto; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.06) }


  /* WEBSITE DESIGN red textbox */
.website-design {
    padding: 36px 16px;
    background: transparent;
  }
  .web-design-box {
    background: linear-gradient(180deg, red, purple, darkblue, green);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
  
    color: #fff;
    max-width: 900px;
    margin: 0 auto;
    padding: 34px;
    border-radius: 8px;
    text-align: center;
  }
  
  /* Gradient animation */
  @keyframes gradientShift {
    0% {
      background-position: 50% 0%;
    }
    50% {
      background-position: 50% 100%;
    }
    100% {
      background-position: 50% 0%;
    }
  }
  
  .web-design-title {
    font-size: 28px;
    margin-bottom: 12px;
    font-weight: 900;
    overflow: hidden;
  }
  .wd-web,
  .wd-design {
    display: inline-block;
    opacity: 0;
    transform: translateX(0);
    transition: all 0.9s ease;
  }
  .wd-web {
    color: #fff;
    background: transparent;
    padding: 4px 8px;
    border-radius: 6px;
    transform: translateX(-80px);
  }
  .wd-design {
    color: #000;
    background: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 8px;
    transform: translateX(80px);
  }
  
  .web-design-paragraph p {
    color: #fff;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
    max-width: 820px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
    margin-bottom: 20px;
  }
  
  /* Active animation class */
  .animate .wd-web {
    transform: translateX(0);
    opacity: 1;
  }
  .animate .wd-design {
    transform: translateX(0);
    opacity: 1;
  }
  .animate .web-design-paragraph p {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* On mobile the red box goes full width (no margins) */
  @media (max-width: 600px) {
    .web-design-box {
      margin: 0;
      border-radius: 0;
      width: 100%;
      padding: 28px;
    }
    .web-design-paragraph p {
      text-align: left;
    }
    

  }
  

/* ------------------------------
   BOTTOM BAR (fixed)
   ------------------------------ */
.bottom-bar{ 
    position:fixed;
    left:0;
    right:0;
    bottom: 0; 
    height:72px;
    background:#000;
    display:flex; z-index:100;
    box-shadow:0 -6px 20px rgba(0,0,0,.2);
    border-left:2px solid #fff;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff 
}

.bar-item{ 
    flex:1; 
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    gap:6px;
    padding:6px 8px;
    transition:transform .4s ease }
.bar-item img{ width:28px; height:28px; object-fit:contain }
.bar-item span{ font-size:13px }
.icon-div{ flex:1; text-align:center; padding:8px 0; border-left:0; border-right:1px solid #fff; border-top: 1px solid white; } /* vertical divider */
.icon-div:first-child{ border-left:none }
.icon-div:last-child{ border-right:none }

/* flipping animation at intervals (applied via JS) */
.flip { transform: rotateY(180deg); transition: transform .6s ease }

/* ------------------------------
   POPUP MODAL (bottom)
   ------------------------------ */
.welcome-modal{ 
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:-200px;
    width:calc(100% - 32px);
    max-width:420px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    z-index: 999;
    transition:bottom .45s cubic-bezier(.2,.9,.2,1); }
    
.welcome-modal.open{ bottom:18px }
.welcome-inner{ padding:14px; position:relative }
.welcome-close{ position:absolute; right:8px; top:6px; background:transparent; border:0; font-size:18px; cursor:pointer }
.welcome-text{ font-size:16px; margin:8px 0 }
.welcome-actions{ display:flex; gap:10px; margin-top:8px }
.modal-cta{ background: blue; color:white; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:700 }
.modal-cta-2{ background: maroon; color: white; padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:700 }

/* ------------------------------
   FOOTER
   ------------------------------ */
.site-footer{ background:#000; color:#fff; padding:36px 16px; margin-top:40px }
.footer-top{ max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:1fr 240px; gap:24px; align-items:start }
.newsletter{ background:transparent; }
.newsletter h3{ color:#fff; margin:0 0 10px }
.newsletter-form{ display:flex; gap:8px; align-items:center }
.newsletter-form input{ padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.12); color:#fff; min-width:220px }
.newsletter-btn{ background: red; color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer }
.newsletter-msg{ margin-top:8px; color:#aee8c8; }

/* socials row */
.connect{ margin-top:18px }
.socials{ display:flex; gap:12px }
.socials a{ color:#fff; text-decoration:none; font-size:18px }
.socials a img{
    height: 30px;
    width: 30px;
}

/* footer columns */
.footer-cols{ display:flex; gap:20px; flex-wrap:wrap; margin-top:18px }
.footer-cols .col{ flex:1 1 220px }
.footer-cols h5{ color:#ffd54a; margin-bottom:8px; font-size: medium; font-family: sans-serif; }
.footer-cols ul{ list-style:none; padding:0; margin:0 }
.footer-cols li{ display:flex; align-items:center; gap:8px; color:#fff; margin:8px 0 }
.footer-cols a{ color:#fff; text-decoration:none }
.col img{
    height: 20px;
    width: 20px
}
/* payments logos */
.payments{ margin-top:20px }
.payments-logos{ display:flex; gap:12px; align-items:center }
.payments-logos img{ height:32px; object-fit:contain }

  /* Copyright — different background + scales down on mobile and visible above bottom bar */
.footer-bottom  { margin-top:18px; margin-bottom: 20px; text-align:center; padding-top:12px }

.site-footer .copy-right{ 
    display:inline-block; 
    background-color: rgb(70, 68, 68);
    color: gold;
    padding:8px 12px;
    border-radius:6px;
    font-weight:700 }

  @media (max-width:600px){
    #copyright{ font-size:12px; padding:6px 10px }
    .site-footer{ padding-bottom:120px } /* ensure not covered by bottom bar */
    .footer-cols{ flex-direction:column; align-items:center }
    .footer-cols .col{ text-align:center }
    .connect .socials{ justify-content:center }
    .connect h4, a {justify-content: center; text-align: center;}
    .payments h5, .payments-logos {justify-content: center; text-align: center;}
    .footer-bottom  { margin-top:18px; margin-bottom: 0px; }
    .site-footer .copy-right{font-size: smaller;}
  }

/* responsive */
@media (max-width:980px){
  .footer-top{ grid-template-columns:1fr; }
  .hero-h1{ font-size:28px }
  .hero-inner{ gap:14px }
  .carousel-item{ height:200px }
  .carousel-slide img{ height: 400px }
  .promo-video{ height:200px; object-fit:cover }
  .bottom-bar{ position:fixed; left:0; right:0; bottom: 0%;  height:72px;}
}
@media (max-width:768px){
    .bottom-bar {
        height: 64px;
    }

    .bar-item{ 
        flex:1; 
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        color:#fff;
        text-decoration:none;
        gap:6px;
        padding:6px 8px;
        transition:transform .4s ease }

    .bar-item img{ width:24px; height:24px; object-fit:contain }
    .icon-div{ flex:1; text-align:center; padding:4px 0; border-left:0; border-right:1px solid #fff; border-top: 1px solid white; } 
}
@media (max-width:600px){
  .hero-h1{ font-size:22px }
  .tv-name{ font-size:16px }
  .carousel-item{ height:160px }
  .carousel-slide {
    padding: 0px 0px;
  }
  
  .media-section{ padding:15px 8px;  }
}



/* BACK TO TOP button positioned above bottom bar; image replaceable */
.back-to-top{ position:fixed; right:18px; bottom:86px; z-index:300; background:transparent; border:0; padding:6px; display:block }
.back-to-top img{ width:44px; height:44px; object-fit:contain }


/* MEDIA SHOWCASE SECTION */
.media-showcase {
    width: 100%;
    background: #000;
    padding: 0;
    overflow: hidden;
  }
  
  .media-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Image Div */
  .media-image,
  .media-video {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    transition: transform 1s ease, opacity 1s ease;
    opacity: 0;
    gap: 5px;
  }
  
  /* Image styles */
  .media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Video styles */
  .media-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Slide-in animations */
  .media-showcase.animate .media-image {
    transform: translateX(0);
    opacity: 1;
  }
  .media-showcase.animate .media-video {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* Initial off-screen positions */
  .media-image {
    transform: translateX(80px);
  }
  .media-video {
    transform: translateX(-80px);
  }
  
  /* Mobile responsiveness */
  @media (max-width: 768px) {
    .media-container {
      flex-direction: column;
    }
  
    .media-image,
    .media-video {
      flex: 1 1 100%;
      transform: translateX(0); /* Prevent jump on stacked layout */
    }
  
    .media-image img,
    .media-video video {
      width: 100vw;
      height: auto;
    }
  
    .media-showcase.animate .media-image,
    .media-showcase.animate .media-video {
      opacity: 1;
    }
  }


/* OUR SERVICES SECTION */
.services-section {
    padding: 40px 20px;
    background: rgb(27, 27, 27);
    color: white;
    overflow: hidden;
  }
  
  .services-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
  }
  
  .services-title {
    font-size: 34px;
    font-weight: 900;
    color: black;
    margin-bottom: 20px;
    background-color: gold;
    border-radius: 10px;
    padding: 20px;
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s ease;
  }
  
  .services-intro {
    font-size: 1rem;
    color: white;
    line-height: 1.7;
  }
  
  /* Services Grid */
  .services-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .service-card {
    flex: 1 1 calc(33.333% - 24px);
    background: darkblue;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translate(0,0);
    transition: all 0.8s cubic-bezier(0.25, 1.25, 0.5, 1.2);
  }
  
  .service-card h3 {
    color: yellow;
    font-size: 1.3rem;
    margin-bottom: 10px;
  }
  .service-card h3 i {
    color: white;
    margin-left: 8px;
    font-size: 1.2rem;
  }
  
  .service-card p {
    color: white;
    line-height: 1.6;
    font-size: 0.95rem;
  }
  
  .read-more {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 16px;
    color: #fff;
    background: red;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease;
  }
  
  .read-more:hover {
    background: #c20000;
  }
  
  /* Animation directions */
  .from-left { transform: translateX(-50px); }
  .from-right { transform: translateX(50px); }
  .from-top { transform: translateY(-50px); }
  .from-bottom { transform: translateY(50px); }
  
  /* Active animation */
  .animate .services-title {
    transform: translateY(0);
    opacity: 1;
    animation: wiggle 1.3s ease-in-out forwards;
  }
  
  /* Staggered animation for cards */
  .animate .service-card {
    opacity: 1;
    transform: translate(0);
    animation: bounceIn 1.1s ease-in-out forwards;
  }
  
  .animate .service-card:nth-child(1) { animation-delay: 0.1s; }
  .animate .service-card:nth-child(2) { animation-delay: 0.2s; }
  .animate .service-card:nth-child(3) { animation-delay: 0.3s; }
  .animate .service-card:nth-child(4) { animation-delay: 0.4s; }
  .animate .service-card:nth-child(5) { animation-delay: 0.5s; }
  .animate .service-card:nth-child(6) { animation-delay: 0.6s; }
  
  /* Keyframes */
  @keyframes wiggle {
    0%, 100% { transform: translateY(0); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(-2deg); }
    75% { transform: rotate(1deg); }
  }
  
  @keyframes bounceIn {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
  }
  
  /* Responsive */
  @media (max-width: 992px) {
    .service-card { flex: 1 1 calc(50% - 24px); transform: translateY(30px); }
  }
  
  @media (max-width: 600px) {
    .service-card { flex: 1 1 100%; transform: translateY(20px); }
    .services-title { font-size: 28px; }
  }
  

  /* TECHNOLOGIES WE USE SECTION */
.technologies-section {
    width: 100%;
    background: rgb(15, 15, 15);
    padding: 40px 20px;
    padding-top: 10px;
    overflow: hidden;
    text-align: center;
  }
  
  .technologies-content {
    max-width: 800px;
    margin: 0 auto 30px auto;
  }
  
  .tech-title {
    font-size: 32px;
    font-weight: 900;
    color:#00ff66;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(-60px);
    transition: all 1s ease;
  }
  
  .tech-intro {
    font-size: 1rem;
    color: white;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(-40px);
    transition: all 1s ease;
  }
  
  .technologies-image {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(-60px);
    transition: all 1.2s ease;
  }
  
  .technologies-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
  }
  
  /* Animation active state */
  .animate .tech-title,
  .animate .tech-intro,
  .animate .technologies-image {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Ensure it's always visible on mobile */
  @media (max-width: 768px) {
    .technologies-section {
      padding: 40px 10px;
    }
  
    .technologies-image img {
      object-fit: cover;
      border-radius: 0;
    }

    .tech-intro{
        font-size: 0.9rem;
    }
  
    .tech-title,
    .tech-intro,
    .technologies-image {
      opacity: 1;
      transform: none;
    }

    .back-to-top img{ width:35px; height:35px; }
  }


/* WHY YOU NEED A WEBSITE + FACTS SECTION */
.website-need-section {
    width: 100%;
    background: black;
    padding: 60px 20px;
    overflow: hidden;
  }
  
  .website-need-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s ease;
  }
  
  /* TEXT BOX */
  .text-box {
    flex: 1 1 45%;
    background: #50004b;
    color: white;
    font-weight: 600;
    padding: 30px;
    border-radius: 10px;
  } 
  
  
  .text-box-title {
    color: yellow;
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  .text-box p {
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.6;
  }
  
  /* STATISTICS BOX */
  .stats-box {
    flex: 1 1 45%;
    background: white;
    padding: 30px;
    border-radius: 10px;
  }
  
  .stats-title {
    font-size: 28px;
    font-weight: 900;
    color: maroon;
    margin-bottom: 14px;
  }
  
  .stats-intro {
    font-size: 1rem;
    margin-bottom: 20px;
    color: maroon;
    font-weight: bold;
  }
  
  .stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .stat-item {
    flex: 1 1 calc(33.333% - 20px);
    background: maroon;
    padding: 24px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
  }
  
  .stat-item .stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: aqua;
    margin-bottom: 10px;
  }
  
  .stat-item .stat-text {
    font-size: 1rem;
    color: white;
    line-height: 1.4;
  }
  
  /* hover/tap color change */
  .stat-item:hover,
  .stat-item:active {
    background: black;
    color: #fff;
  }
  
  .stat-item:hover .stat-number,
  .stat-item:active .stat-number {
    color: #fff;
  }
  
  @media (max-width: 992px) {
    .stat-item {
      flex: 1 1 calc(50% - 20px);
    }
  }
  
  @media (max-width: 600px) {
    .stat-item {
      flex: 1 1 100%;
    }

    .text-box p {
        font-size: 0.9rem;
      }
}
  
  /* Animation active state */
  .animate-website-need .website-need-container {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Responsive */
  @media (max-width: 992px) {
    .text-box, .stats-box {
      flex: 1 1 100%;
    }
  }
  
  @media (max-width: 600px) {
    .website-need-section {
      padding: 40px 10px;
    }
  
    .text-box, .stats-box {
      padding: 20px;
    }
  }  
  


/* AFFORDABLE PRICING SECTION */
/* Section */
.pricing-section {
    width: 100%;
    background: black;
    padding: 60px 20px;
    text-align: center;
    overflow: hidden;
    border: 1px solid white;
  }
  
  /* Header */
  .pricing-header {
    max-width: 800px;
    margin: 0 auto 40px auto;
  }
  .pricing-title {
    font-size: 34px;
    font-weight: 900;
    color: yellow;
    background: rgb(26, 25, 25);
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
  }
  .pricing-intro {
    font-size: 1rem;
    color: white;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
  }
  
  /* Cards */
  .pricing-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .pricing-card {
    flex: 1 1 calc(33.333% - 24px);
    background: #f8f8f8;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px red;
    border: 3px solid red;
    position: relative;
    opacity: 0;
    transform: translateX(80px);
    transition: all 1s ease;
  }
  .card-title {
    background: #000;
    color: #fff;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
  }
  .price {
    font-size: 32px;
    font-weight: 900;
    color: red;
    margin-bottom: 20px;
  }
  
  /* List with single checkmark */
  .pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
    line-height: 1.5;
  }
  .pricing-card ul li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
  }
  .pricing-card ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: green;
    font-weight: bold;
  }
  
  /* Most Popular Badge */
  .pricing-card.most-popular .badge {
    position: absolute;
    top: -12px;
    right: 0;
    background: red;
    color: #fff;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 0 0 0 8px;
    text-transform: uppercase;
  }
  
  /* Wave Button */
  .btn {
    display: inline-block;
    padding: 12px 24px;
    background: red;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }
  .wave-button::before {
    content: "";
    position: absolute;
    border: 5px solid white;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: wave 2s infinite;
  }
  @keyframes wave {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3.0); opacity: 0; }
  }
  
  /* Animation Trigger */
  .animate-pricing .pricing-title {
    transform: translateY(0);
    opacity: 1;
  }
  .animate-pricing .pricing-intro {
    transform: translateY(0);
    opacity: 1;
  }
  .animate-pricing .pricing-card {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* Delay classes */
  .delay-1 { transition-delay: 0.3s; }
  .delay-2 { transition-delay: 0.6s; }
  .delay-3 { transition-delay: 0.9s; }
  
  /* Responsive */
  @media (max-width: 992px) { .pricing-card { flex: 1 1 calc(50% - 24px); } }
  @media (max-width: 600px) { .pricing-card { flex: 1 1 100%; padding: 20px; } }
  
  

/* INDUSTRIES WE SERVE SECTION */
.industries-section {
    width: 100%;
    background: black;
    padding: 60px 20px;
    overflow: hidden;
  }
  
  .industries-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s ease;
  }
  
  .industries-title {
    font-size: 32px;
    font-weight: 900;
    color:aqua;
    margin-bottom: 14px;
  }
  
  .industries-intro {
    font-size: 1rem;
    color: white;
    line-height: 1.6;
  }
  
  /* Grid layout */
  .industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s ease;
  }
  
  /* Card styles */
  .industry-card {
    perspective: 1000px;
    cursor: pointer;
  }
  
  .card-inner {
    position: relative;
    width: 100%;
    min-height: 200px;
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }
  
  .industry-card:hover .card-inner,
  .industry-card.flipped .card-inner {
    transform: rotateY(180deg);
  }
  
  .card-front,
  .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    font-size: 1.05rem;
  }
  
  .card-front {
    background: yellow;
    color: black;
  }
  
  .card-front .icon {
    font-size: 32px;
    margin-bottom: 12px;
    color: #00796b;
  }
  .card-front .icon i{
    font-size: 1rem;
    color: black;
  }
  
  .card-back {
    background: maroon;
    color: #fff;
    transform: rotateY(180deg);
  }
  
  /* Slide-in active state */
  .animate-industries .industries-header,
  .animate-industries .industries-grid {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Responsive adjustments */
  @media (max-width: 600px) {
    .industries-section {
      padding: 40px 10px;
    }
    .card-front,
    .card-back {
      min-height: 160px;
      font-size: 1rem;
      padding: 14px;
    }
    .card-front .icon {
      font-size: 26px;
    }
  }
 
  
/* IMAGE & TEXT SWAPPER SECTION */
.image-text-swapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 60px 20px;
    background: #000;
    color: #fff;
    overflow: hidden;
    flex-wrap: wrap;
  }
  
  .image-div {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .image-div img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
  }
  
  .text-div {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 250px;
  }
  
  .text-swapper {
    position: relative;
    width: 100%;
    text-align: center;
  }
  
  /* Colors moved to CSS */
  .text-white { color: white; }
  .text-yellow { color:#ffd54a; }
  .text-blue { color: #00bfff; }
  .text-green { color: #00ff99; }
  .text-gold { color: magenta; }
  
  .swap-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%) scale(0.95);
    opacity: 0;
    font-size: 1.6rem;
    line-height: 1.6;
    transition: opacity 0.8s ease, transform 0.8s ease;
    white-space: normal;
    font-style: italic;
    font-family: serif;
    font-weight: bold;
  }
  
  /* Active state + slide in */
  .swap-text.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: slideInUp 1s ease forwards;
  }
  
  /* Slide in from below */
  @keyframes slideInUp {
    0% {
      transform: translate(-50%, 20%) scale(0.95);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .image-text-swapper {
      flex-direction: column;
      padding: 40px 10px;
    }
  
    .text-div {
      width: 100%;
      min-height: 200px;
      margin-top: 20px;
    }
  
    .swap-text {
      font-size: 1.0rem;
      line-height: 1.4;
      transform: translate(-50%, -50%) scale(1);
    }
  }



 /* WORLD CLASS WEB DEVELOPMENT SECTION */
.world-class-section {
    display: flex;
    flex-wrap: wrap;
    background: #111; /* light black */
    color: #fff;
    padding: 60px 20px;
    overflow: hidden;
  }
  
  .wc-image-div {
    flex: 1 1 50%;
  }
  
  .wc-image-div img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }
  
  .wc-text-div {
    flex: 1 1 50%;
    background: #111;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;              /* for animation */
    transform: translateY(60px); /* start below */
    transition: all 1s ease;
  }
  
  .wc-title {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.2;
  }
  
  .title-line {
    display: block;
    opacity: 0;             /* start invisible for staggered fade-in */
    transform: translateY(20px);
    transition: all 0.6s ease;
  }
  
  .title-white { color: #fff; }
  .title-yellow { color: #ffeb3b; }
  .title-blue { color: #2196f3; }
  
  .wc-text-div p {
    color: #fff;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  
  /* Animation active classes */
  .animate-wc .wc-text-div {
    opacity: 1;
    transform: translateY(0);
  }
  
  .animate-wc .title-line:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }
  .animate-wc .title-line:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
  }
  .animate-wc .title-line:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
  }
  
  /* Responsive */
  @media (max-width: 850px) {
    .carousel-slide img{ height: 300px }
  }

  @media (max-width: 600px) {
    .carousel-slide img{ height: 200px }
  }

  @media (max-width: 400px) {
    .carousel-slide img{ height: 180px }
  }

  @media (max-width: 768px) {
    .world-class-section {
      flex-direction: column;
      padding: 40px 10px;
    }
  
    .wc-image-div img {
      width: 100vw;
      height: auto;
      border-radius: 0;
    }
  
    .wc-text-div {
      padding: 20px;
    }
  
    .wc-title {
      font-size: 28px;
    }
  
    .wc-text-div p {
      font-size: 0.95rem;
    }
  }
  


/* OUR PROCESS SECTION */
.process-section {
    width: 100%;
    padding: 60px 20px;
    padding-top: 30px;
    background: rgb(14, 13, 13);
    overflow: hidden;
  }
  
  .process-header {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .process-title {
    font-size: 32px;
    font-weight: 900;
    color: white;
    opacity: 0;
    transform: translateX(-60px);
    transition: all 1s ease;
  }
  
  /* Grid layout */
  .process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }
  
  .process-step {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    position: relative;
  }
  
  .process-step h3 {
    font-size: 20px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, red, blue, black, purple);
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
  }


  
  /* Typing animation */
  .typing-text {
    font-size: 1rem;
    line-height: 1.6;
    color: black;
    font-weight: 500;
    overflow: hidden;
    border-right: 2px solid #ff0000;
    width: 100%;
    opacity: 0;
  }
  
  /* Animation active classes */
  .animate-process .process-title {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* Visible and animated */
  .typing-active {
    opacity: 1;
    animation: typing 3s steps(60, end) forwards;
  }
  
  @keyframes typing {
    from { width: 0; }
    to { width: 100%; }
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .process-section {
      padding: 40px 10px;
    }
  
    .process-title {
      font-size: 28px;
    }
  
    .process-step h3 {
      font-size: 18px;
    }
  
    .typing-text {
      font-size: 0.95rem;
      border-right: 1.5px solid #ff0000;
    }
  }


/* WHY YOU NEED A WEBSITE DESIGN COMPANY SECTION */
.why-website-section {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    padding: 60px 20px;
    background: #000;
    flex-wrap: wrap;
    overflow: hidden;
  }
  
  /* TEXT DIV */
  .why-text-div {
    flex: 1 1 50%;
    background: rgba(20, 20, 20, 0.9);
    color: #fff;
    padding: 40px;
    border-radius: 8px;
    transform: translateX(-80px);
    opacity: 0;
    transition: all 1s ease;
  }
  
  .why-text-div.visible {
    transform: translateX(0);
    opacity: 1;
  }
  
  .why-title {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
  }
  
  .white-text { color: #fff; }
  .green-text { color:#00bfff; }
  .red-text { color: lawngreen; }
  
  .why-text-div p {
    font-size: 1rem;
    color: #fff;
    line-height: 1.6;
  }
  
  /* STATS DIV */
  .why-stats-div {
    flex: 1 1 50%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: center;
    justify-items: center;
    background: #111;
    padding: 40px;
    border-radius: 8px;
  }
  
  .stat-box {
    text-align: center;
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, background 0.3s ease;
  }
  
  .stat-box:hover {
    transform: translateY(-5px);
    background: #222;
  }
  
  .stat-box h3 {
    font-size: 42px;
    color: yellow;
    margin-bottom: 8px;
  }
  
  .stat-box p {
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .why-website-section {
      flex-direction: column;
      padding: 40px 10px;
    }
  
    .why-text-div, .why-stats-div {
      flex: 1 1 100%;
      border-radius: 0;
      padding: 30px 20px;
    }
  
    .why-title {
      font-size: 28px;
    }
  
    .stat-box h3 {
      font-size: 32px;
    }

    .modal-cta{  font-size: small; }
    .modal-cta-2{  font-size: small;  }
  }



  /* WHY CHOOSE US SECTION */
.why-choose-section {
    border: 1px solid rgba(255,255,255,0.2);
    padding: 60px 20px;
    padding-top: 30px;
    background: #000;
    overflow: hidden;
    transform: translateX(0px);
    opacity: 0;
    transition: all 1s ease;
  }
  
  .why-choose-section.visible {
    transform: translateX(0);
    opacity: 1;
  }
  
  .why-choose-title {
    text-align: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 40px;
  }
  
  .why-choose-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  /* IMAGE GRID */
  .why-images {
    flex: 1 1 50%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
  }
  
  .img-box {
    background: #111;
    aspect-ratio: 1 / 1; /* ensures square shape */
    overflow: hidden;
    border-radius: 8px;
  }
  
  .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
  }
  
  .img-box:hover img {
    transform: scale(1.05);
  }
  
  /* TEXT BOXES */
  .why-text-boxes {
    flex: 1 1 50%;
    display: flex;
    overflow-x: auto;
    gap: 15px;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
  }
  
  .reason-box {
    min-width: 260px;
    background: rgba(25, 25, 25, 0.9);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    scroll-snap-align: start;
    transition: transform .3s ease;
  }
  
  .reason-box:hover {
    transform: translateY(-5px);
  }
  
  .reason-box h3 {
    color: gold;
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  
  .reason-box p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  /* Scrollbar style */
  .why-text-boxes::-webkit-scrollbar {
    height: 6px;
  }
  
  .why-text-boxes::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
  }
  
  .why-text-boxes::-webkit-scrollbar-track {
    background: #111;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    
    .why-text-boxes {
        overflow-x: scroll;
      }
    
  
    .why-text-boxes {
      flex-direction: row;
      padding-bottom: 10px;
    }
  
    .why-choose-title {
      font-size: 1.8rem;
    }
  }
  


 /* ===== FIXED CTA DUAL SECTION CSS ===== */
.cta-dual-section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: #000;
    overflow: visible; /* allow absolute children to show */
  }
  
  /* container for first image + texts */
  .cta-image-with-text {
    position: relative;       /* establishes containing block for absolute text */
    flex: 1 1 50%;
    min-height: 320px;
    z-index: 0;               /* image layer base */
    overflow: visible;
  }
  
  /* the image sits at z-index:0 (behind overlay & text) */
  .cta-image-with-text img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    z-index: 0;
    position: relative;
  }
  
  /* subtle overlay (optional). KEEP under text. */
  .cta-image-with-text .cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35); /* tweak opacity if needed */
    z-index: 1;
    pointer-events: none;
  }
  
  /* text container centered exactly above image */
  .cta-texts {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 90%;
    transform: translate(-50%, -50%);
    display: block;
    height: 4.5em;             /* enough height to hold animated lines */
    z-index: 3;                /* above overlay */
    pointer-events: none;      /* don't block clicks */
    text-align: center;
    overflow: visible;         /* must allow animated spans to show */
  }
  
  /* individual animated lines: center them explicitly */
  .cta-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -150%); /* start just above center */
    opacity: 0;
    white-space: nowrap;
    font-weight: 700;
    font-size: clamp(20px, 4vw, 36px);
    line-height: 1;
    text-transform: none;
    text-align: center;
    z-index: 4;
    mix-blend-mode: normal;    /* avoid blending modes that make text vanish */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 3px 10px rgba(0,0,0,0.6);
  }
  
  /* explicit colours per line (you had these before) */
  .cta-text-1 { color: #ffffff; }
  .cta-text-2 { color: #ffeb3b; }
  .cta-text-3 { color: #00bfff; }
  
  /* keyframes: slide in, hold, slide out */
  @keyframes ctaSlide {
    0%   { opacity: 0; transform: translate(-50%, -180%); }
    8%   { opacity: 1; transform: translate(-50%, -50%); }  /* drop in */
    30%  { opacity: 1; transform: translate(-50%, -50%); }  /* stay */
    38%  { opacity: 0; transform: translate(-50%, 20%); }   /* slide down and hide */
    100% { opacity: 0; transform: translate(-50%, -180%); } /* reset above */
  }
  
  /* give each line a time slot (3 lines, total 9s loop). Adjust timing if needed */
  .cta-text-1 { animation: ctaSlide 9s infinite; animation-delay: 0s; }
  .cta-text-2 { animation: ctaSlide 9s infinite; animation-delay: 3s; }
  .cta-text-3 { animation: ctaSlide 9s infinite; animation-delay: 6s; }
  
  /* When section not yet in view, avoid running heavy animations on some devices:
     only run when .in-view added (observer script above). This prevents conflicts. */
  #ctaDualSection:not(.in-view) .cta-text { animation-play-state: paused; opacity: 0; transform: translate(-50%,-180%); }
  
  /* SECOND DIV - static image */
  .cta-static-image {
    flex: 1 1 50%;
    min-height: 320px;
    overflow: hidden;
    position: relative;
  }
  
  .cta-static-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
  }
  
  /* MOBILE: stacked and full-screen */
  @media (max-width: 768px) {
    .cta-dual-section { flex-direction: column; }
    .cta-image-with-text,
    .cta-static-image {
      flex: 1 1 100%;
      height: 100vh;     /* full-screen on mobile */
      min-height: auto;
    }
  
    /* increase text size slightly on mobile */
    .cta-text { font-size: clamp(22px, 6vw, 36px); }
  }
  

  /* OUR CLIENTS SECTION */
.our-clients-section {
    background: #111;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  
  .clients-title {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 40px;
    color: gold;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
  }
  
  /* Slide-in animation for title */
  .our-clients-section.in-view .clients-title {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Slider container */
  .clients-logo-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  /* Track containing all logos */
  .clients-slide-track {
    display: flex;
    width: calc(250px * 16); /* Adjust based on number of logos */
    animation: scrollLogos 30s linear infinite;
    background-color: white;
  }
  
  /* Individual logo box */
  .client-logo {
    height: 100px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }
  
  .client-logo img {
    max-height: 80px;
    max-width: 180px;
    object-fit: contain;
    filter: none;
    transition: transform 0.3s ease;
  }
  
  .client-logo img:hover {
    transform: scale(1.1);
  }
  
  /* Animation keyframes */
  @keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 8)); } /* Moves half the track */
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .clients-title {
      font-size: 26px;
    }
  
    .client-logo {
      width: 180px;
      height: 80px;
    }
  
    .clients-slide-track {
      width: calc(180px * 16);
      animation: scrollLogosMobile 25s linear infinite;
    }
  
    @keyframes scrollLogosMobile {
      0% { transform: translateX(0); }
      100% { transform: translateX(calc(-180px * 8)); }
    }
  }
  /* OUR CLIENTS SECTION 2 */
.countries-section {
    background: #111;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  
  .countries-title {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 40px;
    color: gold;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
  }
  
  /* Slide-in animation for title */
  .countries-section.in-view .countries-title {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Slider container */
  .countries-flag-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  /* Track containing all logos */
  .countries-slide-track {
    display: flex;
    width: calc(250px * 16); /* Adjust based on number of logos */
    animation: scrollLogos 30s linear infinite;
    background-color: white;
  }
  
  /* Individual logo box */
  .country-flag {
    height: 100px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }
  
  .country-flag img {
    max-height: 80px;
    max-width: 180px;
    object-fit: contain;
    filter: none;
    transition: transform 0.3s ease;
  }
  
  .country-flag img:hover {
    transform: scale(1.1);
  }
  
  /* Animation keyframes */
  @keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 8)); } /* Moves half the track */
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .countries-title {
      font-size: 26px;
    }
  
    .country-flag {
      width: 180px;
      height: 80px;
    }
  
    .countries-slide-track {
      width: calc(180px * 16);
      animation: scrollLogosMobile 25s linear infinite;
    }
  
    @keyframes scrollLogosMobile {
      0% { transform: translateX(0); }
      100% { transform: translateX(calc(-180px * 8)); }
    }
  }
  


  /* TYPES OF WEBSITES SECTION */
.types-websites-section {
    background: #111;
    color: #fff;
    padding: 60px 20px;
    padding-top: 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  
  .types-title {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 40px;
  }
  
  .types-title .white { color: #fff; }
  .types-title .red { color: magenta; margin: 0 5px; }
  .types-title .blue { color: yellow; }
  
  /* SLIDER CONTAINER */
  .types-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  .types-slider-track {
    display: flex;
    animation: slideBoxes 40s linear infinite;
    width: max-content;
  }
  
  /* INDIVIDUAL BOX */
  .type-box {
    background: #0b1e39;
    color: #fff;
    border-radius: 10px;
    min-width: 300px;
    max-width: 320px;
    padding: 20px;
    margin: 0 15px;
    text-align: left;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }
  
  .type-box h3 {
    color: gold;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .type-box h3 i {
    color: white;
    margin-left: 8px;
    font-size: 0.7rem;
  }
    
  
  .type-box p {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  /* SLIDING ANIMATION */
  @keyframes slideBoxes {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  
  /* RESPONSIVE */
  @media (max-width: 768px) {
    .types-title {
      font-size: 26px;
    }
  
    .type-box {
      min-width: 260px;
      margin: 0 10px;
    }
  
    .types-slider-track {
      animation: slideBoxesMobile 35s linear infinite;
    }
  
    @keyframes slideBoxesMobile {
      0% { transform: translateX(0); }
      100% { transform: translateX(-60%); }
    }
  }
  


  /* Portfolio Section */
.portfolio-section {
    background-color: #111;
    padding: 80px 20px;
    padding-top: 0px;
    text-align: center;
    color: white;
    overflow: hidden;
  }
  
  .portfolio-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: white;
  }
  
  .portfolio-title span {
    color: orange;
  }
  
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .portfolio-item {
    background-color: #1b1b1b;
    border: 3px solid lawngreen;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  @keyframes slideRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .slide-in-right {
    animation: slideRight 0.8s ease forwards;
  }
  
  .portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px lawngreen;
  }
  
  .portfolio-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
  }
  
  .portfolio-info {
    padding: 20px;
  }
  
  .portfolio-info h3 {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 10px;
  }

  .portfolio-info button {
    background-color: lawngreen;
    padding: 10px;
    border-radius: 10px;
  }
  
  .view-site {
    color: black;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
  }
  
  .view-site span {
    margin-left: 5px;
    transition: transform 0.3s ease;
  }
  
  .view-site:hover {
    color: white;
  }
  
  .view-site:hover span {
    transform: translateX(5px);
  }
  
  /* Button */
  .view-all-container {
    margin-top: 40px;
  }
  
  .view-all-btn {
    background-color: transparent;
    border: 2px solid lawngreen;
    color: lawngreen;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .view-all-btn:hover {
    background-color: lawngreen;
    color: #111;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .portfolio-title {
      font-size: 2rem;
    }
  
    .portfolio-grid {
      gap: 20px;
    }
  
    .portfolio-image img {
      height: 180px;
    }
  }


  
  /* Image with Text Section */
.image-text-section {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: #111;
  }
  
  .image-text-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
  }
  
  .image-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .text-overlay {
    position: absolute;
    color: white;
    font-size: 1.2rem;
    max-width: 700px;
    padding: 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.9s ease;
  }
  
  /* Animation class */
  .text-overlay.show {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .text-overlay {
      font-size: 1rem;
      padding: 15px;
      max-width: 90%;
    }
  
    .image-text-content {
      min-height: 300px;
    }
  }
  

/* Testimonials Section */
.testimonials-section {
    background: #111;
    color: white;
    padding: 60px 20px;
    text-align: center;
    overflow: hidden;
  }
  
  .testimonials-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 40px;
  }
  
  .testimonials-title .white {
    color: #fff;
  }
  
  .testimonials-title .green {
    color: #00ff99;
  }
  
  /* Container for cards */
  .testimonials-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
  }
  
  .testimonials-container::-webkit-scrollbar {
    height: 8px;
  }
  .testimonials-container::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
  }
  
  /* Individual testimonial card */
  .testimonial-card {
    min-width: 300px;
    background: #1c1c1c;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    border: 1px solid #00ff99;
    transition: transform 0.4s ease;
  }
  
  .testimonial-card:hover {
    transform: scale(1.05);
  }
  
  .stars {
    color: gold;
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  
  .client-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
  }
  
  .client-info {
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
  
  .client-comment {
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  /* Responsive layout */
  @media (max-width: 768px) {
    .testimonials-title {
      font-size: 1.6rem;
    }
  
    .testimonial-card {
      min-width: 90%;
      margin-right: 10px;
    }
  }
  

  /* CONTACT & LOCATION SECTION */
.contact-location-section {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 60px 20px;
    background: rgb(17, 17, 17);
    
  }
  
  .contact-form-div,
  .map-div {
    flex: 1 1 45%;
    min-width: 280px;
  }
  
  .contact-form-div {
    border: 5px solid magenta; /* black border around form box */
    box-shadow: 0 8px 20px magenta;
    padding: 30px;
    border-radius: 8px;
    background-color: yellow;
  }
  
  .contact-form-div h2 {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 900;
    color: #000;
    background: linear-gradient(90deg, red, blue, black, purple);
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
  }
  
  .contact-form label {
    display: block;
    margin-top: 16px;
    font-weight: 800;
    color: black;
  }
  
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border: 1px solid #a19696;
    border-radius: 4px;
    font-size: 1rem;
  }
  
  .contact-form textarea {
    resize: vertical;
  }
  
  .submit-btn {
    display: inline-block;
    margin-top: 24px;
    padding: 14px 28px;
    background-color: magenta; /* button color changed to black */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .submit-btn:hover {
    background-color: #333;
  }
  
  .map-div h2 {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 900;
    color: lawngreen;
  }
  
  .map-container {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  .map-container-2 {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .map-container-2 iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  
  @media (max-width: 768px) {
    .contact-location-section {
      flex-direction: column;
      padding: 30px 10px;
      
    }

    .contact-form-div {
        padding: 15px;
      }
  
    .contact-form-div,
    .map-div {
      flex: 1 1 100%;
    }
  
    .map-container {
      height: 300px;
    }
    .map-container-2 {
      height: 300px;
    }

    .contact-form-div h2 {
        font-size: 25px;
      }
     
      .contact-form label {
        margin-top: 10px;
        font-size: small;
      }
  }
  

  /* Success/Error Messages for Contact Form */
#form-message {
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 6px;
    display: none; /* Hidden by default */
  }
  
  #form-message.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    display: block;
  }
  
  #form-message.error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    display: block;
  }
  


  /* ARTICLES SECTION */
.articles-section {
    padding: 40px 20px;
    padding-top: 20px;
    background: rgb(14, 13, 13);
  }
  
  .articles-section .section-title {
    font-size: 32px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 40px;
    color: white;
  }
  
  /* Container for horizontal scrolling */
  .articles-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth; /* smooth horizontal scroll */
  }
  
  /* Individual article box */
  .article-box {
    flex: 0 0 350px; /* fixed width for horizontal scroll */
    background-color: lawngreen; /* milky color */
    border: 1px solid #000; /* black border */
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
  }
  
  .article-box img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 12px;
    max-height: 200px;
  }
  
  .article-box h3 {
    font-size: 18px;
    font-weight: 800;
    color: #000;
    margin-bottom: 8px;
  }
  
  .article-box p {
    font-size: 0.8rem;
    line-height: 1.5;
    color: black;
    font-weight: 600;
    flex-grow: 1;
  }
  
  .read-more-btn {
    display: inline-block;
    padding: 10px 16px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 12px;
    transition: background-color 0.3s ease;
  }
  
  .read-more-btn:hover {
    background-color: #333;
  }
  
  /* Hide scrollbar on some browsers */
  .articles-container::-webkit-scrollbar {
    display: none;
  }
  .articles-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .article-box {
      flex: 0 0 260px; /* smaller width on mobile */
      padding: 12px;
    }
  
    .article-box h3 {
      font-size: 16px;
    }
  
    .article-box p {
      font-size: 0.9rem;
    }
  
    .read-more-btn {
      padding: 8px 12px;
      font-size: 0.9rem;
    }

    .article-box img {
        max-height: 160px;
      }
      .article-box h3 {
        margin-bottom: -10px;
      }
    
      .read-more-btn {
        margin-top: -5px;
      }
  }
  

  /* FAQ SECTION */
.faq-section {
    padding: 60px 20px;
    padding-top: 25px;
    background: black;
  }
  
  .faq-section .section-title {
    font-size: 32px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 40px;
    color: yellow;
  }
  
  /* FAQ container */
  .faq-container {
    max-width: 900px;
    margin: 0 auto;
  }
  
  /* Individual FAQ item */
  .faq-item {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }
  
  /* Question button */
  .faq-question {
    width: 100%;
    padding: 16px 20px;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 700;
    background-color:#ffeb3b;
    border: 1px solid #000;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .faq-question:hover {
    background-color: #f0f0f0;
  }
  
  /* Answer content */
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background-color: #fff;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 0 20px;
  }
  
  .faq-answer p {
    margin: 12px 0;
    color: #000;
    line-height: 1.6;
  }
  
  /* Open FAQ */
  .faq-item.active .faq-answer {
    max-height: 500px; /* sufficient to display content */
    padding: 12px 20px;
  }
  
  /* Icon rotate on open */
  .faq-item.active .faq-icon {
    transform: rotate(45deg);
    transition: transform 0.3s ease;
  }
  
  /* FAQ icon */
  .faq-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .faq-question {
      font-size: 1rem;
      padding: 14px 16px;
    }
  
    .faq-answer p {
      font-size: 0.95rem;
    }

    .faq-question {
        padding: 12px 20px;
        font-size: 0.9rem;
      }
  }
  

  /* ========== WORK HOURS SECTION ========== */
.work-hours {
    background: #1b1b1b;
    padding: 10px 20px;
    text-align: center;
    color: white;
  }
  
  .work-hours-container {
    max-width: 1100px;
    margin: 0 auto;
  }
  
  .section-title-1 {
    font-size: 2.2rem;
    margin-bottom: 40px;
    font-weight: 700;
    color: white;
  }
  
  .section-title-1 span {
    color: #00b894; /* green accent */
  }
  
  .hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    justify-content: center;
  }
  
  .hours-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 25px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .hours-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  }
  
  .hours-card h3 {
    font-size: 1.3rem;
    color: #00b894;
    margin-bottom: 10px;
  }
  
  .hours-card p {
    font-size: 1.1rem;
    color: #333;
  }
  
  .hours-card.closed {
    background: #f8f8f8;
    border-color: #ccc;
    color: #888;
  }
  
  .hours-card.closed h3 {
    color: #999;
  }
  
  .note {
    margin-top: 40px;
    font-size: 1rem;
    color: white;
    line-height: 1.6;
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 768px) {
    .section-title-1 {
      font-size: 1.8rem;
    }
  
    .hours-card {
      padding: 20px 15px;
    }
  
    .hours-card h3 {
      font-size: 1.2rem;
    }
  
    .hours-card p {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 480px) {
    .section-title-1 {
      font-size: 1.6rem;
    }
  
    .note {
      font-size: 0.95rem;
    }
  }
  
  

  /* ========== OUR LOCATION SECTION ========== */
.our-location {
    background: #1b1b1b;
    padding: 10px 20px;
    color: white;
  }
  
  .location-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .section-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: white;
  }
  
  .section-title span {
    color: #00b894; /* Green accent */
  }
  
  .location-content {
    display: flex;
    gap: 40px;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .location-info {
    flex: 1 1 350px;
    background: #fff;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }
  
  .location-info h3 {
    font-size: 1.5rem;
    color: #00b894;
    margin-bottom: 15px;
  }
  
  .location-info h4 {
    margin-top: 20px;
    font-size: 1.1rem;
    color: #00b894;
  }
  
  .location-info p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-top: 5px;
  }
  
  .map-container {
    flex: 2 1 500px;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .location-content {
      flex-direction: column;
    }
  
    .map-container {
      height: 350px;
    }
  }
  
  @media (max-width: 768px) {
    .section-title {
      font-size: 1.8rem;
    }
  
    .location-info {
      padding: 25px 20px;
    }
  
    .location-info h3 {
      font-size: 1.3rem;
    }
  }
  
  @media (max-width: 480px) {
    .section-title {
      font-size: 1.6rem;
    }
  
    .map-container {
      height: 300px;
    }
  }
  
  

  /* ========== CONTACT US SECTION ========== */
.contact-us {
    background: #1b1b1b;
    padding: 10px 20px;
    color: white;
  }
  
  .contact-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .section-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: #111;
  }
  
  .section-title span {
    color: #00b894; /* Green accent */
  }
  
  .contact-content {
    display: flex;
    gap: 50px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .contact-info {
    flex: 1 1 350px;
    background:#007a63;
    border-radius: 12px;
    padding: 10px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }

  .contact-info p{
    color: white;
  }
  
  .contact-info h3 {
    font-size: 1.5rem;
    color: white;
  }
  
  .info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
  }
  
  .info-item i {
    font-size: 1.5rem;
    color: white;
    margin-top: 3px;
    min-width: 25px;
  }
  
  .info-item h4 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 5px;
  }
  
  .info-item p {
    font-size: 0.95rem;
    color: white;
    line-height: 1.6;
  }
  
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .contact-content {
      flex-direction: column;
    }
  }
  
  @media (max-width: 768px) {
    .section-title {
      font-size: 1.8rem;
    }
  

  
    .info-item i {
      font-size: 1.3rem;
    }
  }
  
  @media (max-width: 480px) {
    .section-title {
      font-size: 1.6rem;
    }
  
  }


  /* ========== ABOUT TECHVIEW SECTION ========== */
.about-techview {
    background: #1b1b1b;
    padding: 10px 20px;
    color: white;
    text-align: center;
  }
  
  .about-container {
    max-width: 1100px;
    margin: 0 auto;
  }
  
  .section-title {
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: white;
  }
  
  .section-title span {
    color: #00b894; /* Green accent */
  }
  
  .about-intro {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.7;
    color: white;
  }
  
  /* ========== GOAL SECTION ========== */
  .goal-section {
    background: indigo;
    padding: 10px 20px;
    color: white;
    text-align: center;
  }
  
  .goal-container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .goal-section h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 20px;
  }
  
  .goal-section p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: white;
  }
  
  /* ========== MISSION SECTION ========== */
  .mission-section {
    background:#c20000;
    padding: 10px 20px;
    color: white;
    text-align: center;
  }
  
  .mission-container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .mission-section h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 20px;
  }
  
  .mission-section p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: white;
  }
  
  /* ========== VALUES SECTION ========== */
  .values-section {
    background: darkblue;
    padding: 10px 20px;
    color: white;
    text-align: center;
  }
  
  .values-container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .values-section h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 20px;
  }
  
  .values-section ul {
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
  }
  
  .values-section li {
    font-size: 1rem;
    color: white;
    line-height: 1.8;
    margin-bottom: 10px;
    position: relative;
  }
  
  .values-section li::before {
    content: "✔";
    color: white;
    position: absolute;
    left: -25px;
  }
  
  /* ========== ANIMATIONS ========== */
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.2s ease forwards;
  }
  
  .slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInLeft 1.2s ease forwards;
  }
  
  .slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    animation: slideInRight 1.2s ease forwards;
  }
  
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInLeft {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInRight {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* ========== RESPONSIVE DESIGN ========== */
  @media (max-width: 992px) {
    .section-title {
      font-size: 2rem;
    }
  
    .about-intro, 
    .goal-section p, 
    .mission-section p {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 768px) {
    .section-title {
      font-size: 1.8rem;
    }
  
    .values-section ul {
      padding-left: 30px;
    }
  }
  
  @media (max-width: 480px) {
    .section-title {
      font-size: 1.6rem;
    }
  
    .about-intro, 
    .goal-section p, 
    .mission-section p, 
    .values-section li {
      font-size: 0.95rem;
    }
  }
  
  

  /* ========== SERVICES SECTION ========== */
.services-section-2 {
    background: #1b1b1b;
    padding: 10px 20px;
    text-align: center;
    color: white;
    padding-bottom: 80px;
  }
  
  .services-container-2 {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .section-title-2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 50px;
  }
  
  .section-title-2 span {
    color: #00b894; /* Green accent */
  }
  
  /* ========== SERVICES GRID ========== */
  .services-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    justify-content: center;
    align-items: stretch;
  }
  
  .service-card-2 {
    background: darkblue;
    padding: 40px 20px;
    border-radius: 14px;
    text-decoration: none;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .service-card-2 i {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 15px;
    transition: color 0.3s ease;
  }
  
  .service-card-2 h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-top: 10px;
    transition: color 0.3s ease;
  }
  
  /* Hover Effects */
  .service-card-2:hover {
    background: #00b894;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  
  .service-card-2:hover i,
  .service-card:hover h3 {
    color: #fff;
  }
  
  /* Click (Active) Effect */
  .service-card-2:active {
    transform: scale(0.98);
    border-color: #007a63;
    background: #019d7a;
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .section-title-2 {
      font-size: 2rem;
    }
  }
  
  @media (max-width: 768px) {
    .section-title-2 {
      font-size: 1.8rem;
    }
  
    .service-card-2 {
      padding: 30px 15px;
    }
  
    .service-card-2 i {
      font-size: 1.2rem;
    }
  }
  
  @media (max-width: 480px) {
    .section-title-2 {
      font-size: 1.6rem;
    }
  
    .service-card-2 h3 {
      font-size: 1rem;
    }
  
    .service-card-2 {
      padding: 25px 10px;
    }
  }
  
 
  
  /* ========== ARTICLE PAGE ========== */
.article-page {
    background:rgb(235, 229, 229);
    padding: 80px 20px;
    color: #222;
    line-height: 1.8;
  }
  
  .article-container {
    max-width: 900px;
    margin: 0 auto;
  }
  
  .article-title {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    color: #111;
    margin-bottom: 10px;
  }
  
  .article-meta {
    text-align: center;
    color: #636262;
    font-size: 0.95rem;
    margin-bottom: 30px;
  }
  
  .article-hero {
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
  }
  
  .article-hero img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
  }
  
  .article-hero:hover img {
    transform: scale(1.05);
  }
  
  .article-content h2 {
    color: #00b894;
    font-size: 1.5rem;
    margin-top: 40px;
    margin-bottom: 15px;
  }
  
  .article-content p {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.05rem;
  }
  
  .article-content strong {
    color: #00b894;
  }
  
  /* Add subtle animation on scroll */
  .article-content {
    animation: fadeInUp 1.2s ease forwards;
    opacity: 0;
    transform: translateY(20px);
  }
  
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .article-title {
      font-size: 2rem;
    }
  
    .article-content h2 {
      font-size: 1.4rem;
    }
  }
  
  @media (max-width: 768px) {
    .article-title {
      font-size: 1.8rem;
    }
  
    .article-content p {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 480px) {
    .article-title {
      font-size: 1.6rem;
    }
  
    .article-content h2 {
      font-size: 1.2rem;
    }
  
    .article-content p {
      font-size: 0.95rem;
    }
  }


  /* ===== TERMS PAGE ===== */
.terms-page {
    background-color: rgb(114, 110, 110);
    padding: 20px 10px;
    color: white;
    line-height: 1.8;
  }
  
  .terms-container {
    max-width: 900px;
    margin: 0 auto;
    background: rgb(26, 25, 25);
    padding: 50px 40px;
    border-radius: 14px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    animation: fadeIn 1.2s ease forwards;
    opacity: 0;
  }
  
  .terms-title {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: aqua;
    margin-bottom: 10px;
  }
  
  .terms-updated {
    text-align: center;
    color:white;
    margin-bottom: 40px;
    font-size: 0.95rem;
  }
  
  .terms-content h3 {
    color:#ffeb3b;
  }
  .terms-content h2 {
    color:#ffeb3b;
    font-size: 1.4rem;
    margin-top: 35px;
    margin-bottom: 12px;
    position: relative;
  }
  
  .terms-content h2::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 20px;
    background: #00b894;
    left: -15px;
    top: 4px;
    border-radius: 2px;
  }
  
  .terms-content p,
  .terms-content ul {
    color: white;
    font-size: 1.05rem;
    margin-bottom: 20px;
  }
  
  .terms-content ul {
    padding-left: 25px;
    list-style: disc;
  }
  
  .terms-content a.terms-link {
    color: #00b894;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed #00b894;
    transition: color 0.3s ease;
  }
  
  .terms-content a.terms-link:hover {
    color: #007f68;
  }
  
  /* Fade-in Animation */
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 992px) {
    .terms-container {
      padding: 40px 30px;
    }
  
    .terms-title {
      font-size: 2rem;
    }
  
    .terms-content h2 {
      font-size: 1.3rem;
    }
  }
  
  @media (max-width: 768px) {
    .terms-container {
      padding: 35px 25px;
    }
  
    .terms-title {
      font-size: 1.8rem;
    }
  
    .terms-content p {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 480px) {
    .terms-container {
      padding: 25px 20px;
    }
  
    .terms-title {
      font-size: 1.6rem;
    }
  
    .terms-content h2 {
      font-size: 1.2rem;
    }
  
    .terms-content p {
      font-size: 0.95rem;
    }
  }
  


  /* ===== WEB DEVELOPMENT PAGE ===== */
.webdev-page {
    background: #1b1b1b;
    padding: 10px 20px;
    color: white;
    font-family: Arial, sans-serif;
  }
  
  .webdev-container {
    max-width: 900px;
    margin: 0 auto;
  }
  
  .webdev-title {
    font-size: 2.4rem;
    font-weight: 700;
    color:#ffd54a;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .webdev-intro {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 50px;
    color: white;
  }
  
  .webdev-section {
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
  }
  
  .webdev-section h2 {
    font-size: 1.8rem;
    color:aqua;
    margin-bottom: 15px;
  }
  
  .webdev-section p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: white;
    margin-bottom: 15px;
  }
  
  .webdev-section ul {
    list-style: disc inside;
    margin-left: 0;
    color: white;
    margin-bottom: 15px;
  }
  
  .webdev-section ul li {
    margin-bottom: 8px;
  }
  
  /* Call to Action */
  .webdev-cta {
    text-align: center;
    padding: 50px 20px;
    background: darkblue;
    color: #fff;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
  }
  
  .webdev-cta h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  .webdev-cta p {
    font-size: 1.1rem;
    margin-bottom: 25px;
  }
  
  .cta-button {
    display: inline-block;
    background: #fff;
    color: black;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .cta-button:hover {
    background: #f1f1f1;
    color: #007a63;
  }
  
  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 768px) {
    .webdev-title {
      font-size: 2rem;
    }
  
    .webdev-section h2 {
      font-size: 1.5rem;
    }
    
    .webdev-cta h2 {
      font-size: 1.6rem;
    }
  }
  
  @media (max-width: 480px) {
    .webdev-title {
      font-size: 1.8rem;
    }
  
    .webdev-section h2 {
      font-size: 1.3rem;
    }
  
    .webdev-cta h2 {
      font-size: 1.4rem;
    }
  }


  /* TRIPLE IMAGES Section Background */
#media-slide-section {
    background: #111; /* light black */
    padding: 40px 20px;
  }
  
  /* Layout */
  .media-slide-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
  }
  
  /* Each Image Box */
  .media-slide-item {
    width: 100%;
    max-width: 350px;
    overflow: hidden;
    opacity: 0; /* Hidden before animation */
    transform: translateY(40px);
  }
  
  /* Images */
  .media-slide-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
  }
  
  /* Mobile layout */
  @media (max-width: 1000px) {
    .top-swapper{
        padding: 0px 0px;
    }
  }
  @media (max-width: 768px) {
    .media-slide-container {
      flex-direction: column;
    }

    .website-design {
        padding: 36px 16px;
      }
      .web-design-box {
        padding: 34px;
      }

  }
  
  /* Animation */
  @keyframes slide-in-left {
    from { transform: translateX(-80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  
  @keyframes slide-in-bottom {
    from { transform: translateY(80px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes slide-in-right {
    from { transform: translateX(80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  
  /* Classes triggered by JS */
  .slide-from-left.animate-now { animation: slide-in-left 0.8s ease forwards; }
  .slide-from-bottom.animate-now { animation: slide-in-bottom 0.8s ease forwards; }
  .slide-from-right.animate-now { animation: slide-in-right 0.8s ease forwards; }
  

  @media (max-width: 1000px) {
  .hero-tv{ 
    background:#000;
    color:#fff;
    padding:25px 16px;
    margin:20px; /* visible white margin as requested */ 
    }}


  @media (max-width: 600px) {
    .website-design {
        padding: 0px 0px;
      }
      .web-design-box {
        padding: 15px;
      }

}


  @media (max-width: 500px) {
  .hero-tv{ 
    background:#000;
    color:#fff;
    padding:25px 16px;
    margin:5px; /* visible white margin as requested */ 
    }

    .tv-header-inner{
        padding:0px 0px;
      }
}


/* SECTION with horizontal animated gradient background */
.auto-text-section {
    width: 100%;
    height: 150px;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, red, blue, green);
    background-size: 300% 300%;
    animation: gradientMove 12s ease infinite;
  }
  
  /* Gradient animation */
  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* Text area */
  .text-box-2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
  }
  
  /* Cursor blinking animation */
  #cursor {
    display: inline-block;
    color: #fff;
    margin-left: 3px;
    animation: blink 0.7s infinite;
  }
  
  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  /* Style for the final button message */
  .typing-button {
    background: red;
    color: white;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 1.2rem;
    display: inline-block;
  }
  
  /* Responsive */
  @media (max-width: 900px) {
    .text-box-2 {
      font-size: 1.3rem;
    }

    .auto-text-section {
        padding: 40px 20px;
        height: 120px;
       
  }

  .typing-button {
    font-size: 1.0rem;
  }
}
  @media (max-width: 600px) {
    .text-box-2 {
      font-size: 1.0rem;
    }

    .auto-text-section {
        padding: 40px 20px;
        height: 100px;
       
  }

  .typing-button {
    font-size: 1.0rem;
  }
}




/* ==============================
   BLOG PAGE STYLING
============================== */

.blog-page {
    background-color: #1b1b1b;
    padding: 80px 20px;
    padding-top: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #1f2937;
    min-height: 100vh;
  }
  
  /* Title */
  .blog-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    margin-bottom: 50px;
    position: relative;
  }
  
  .blog-title::after {
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    background-color: #1e3a8a;
    margin: 10px auto 0;
    border-radius: 2px;
  }
  
  /* Blog Container */
  .blog-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Blog Card */
  .blog-card {
    background: darkgreen;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid  lawngreen;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    flex: 1 1 calc(33.333% - 30px);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }
  
  /* Blog Image */
  .blog-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
  }
  
  /* Blog Text Content */
  .blog-heading {
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    margin: 18px 20px 8px;
  }
  
  .blog-snippet {
    font-size: 1rem;
    color: white;
    margin: 0 20px 20px;
    line-height: 1.6;
    flex-grow: 1;
  }
  
  /* Read More Button */
  .read-btn {
    align-self: flex-start;
    margin: 0 20px 20px;
    padding: 10px 18px;
    background-color: darkblue;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.3s ease;
  }
  
  .read-btn:hover {
    background-color: #334ea3;
  }
  
  /* Responsive Layouts */
  @media (max-width: 992px) {
    .blog-card {
      flex: 1 1 calc(45% - 30px);
    }
  
    .blog-img {
      height: 200px;
    }
  }
  
  @media (max-width: 600px) {
    .blog-card {
      flex: 1 1 100%;
    }
  
    .blog-img {
      height: 180px;
    }
  
    .blog-heading {
      font-size: 1.1rem;
    }
  
    .blog-snippet {
      font-size: 0.95rem;
    }
  }
  

  /* ==============================
   AUTO SIDE-SCROLLING SECTION
   ============================== */
#tv-auto-scroll-section {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    background: linear-gradient(90deg, red, darkblue, darkgreen, black);
    background-size: 400% 400%;
    animation: tv-bg-shift 12s ease infinite;
  }
  
  /* Background animation */
  @keyframes tv-bg-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* Scroll wrapper */
  .tv-scroll-wrapper {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    position: relative;
  }
  
  /* Scroll track */
  .tv-scroll-track {
    display: inline-block;
    white-space: nowrap;
    animation: tv-scroll-left 40s linear infinite;
  }
  
  /* Infinite scroll animation */
  @keyframes tv-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  
  /* Text style */
  .tv-scroll-text {
    display: inline-block;
    margin: 0 40px;
    font-size: 1.6rem;
    font-weight: 900;
    font-family: sans-serif;
    color: white;
    letter-spacing: 2px;
    -webkit-text-stroke: .5px aqua;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .tv-scroll-text {
      font-size: 1.0rem;
      margin: 0 25px;
      -webkit-text-stroke: .25px aqua;
    }
  }
  
  
  .sub-title-image {
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
  }
  
  .sub-title-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
  }
  
  .sub-title-image:hover img {
    transform: scale(1.05);
  }