/* ⚡ COMBINED OPTIMIZED CSS – ADDAXWORLD */

/* ===== GOOGLE FONT ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(135deg, #e8edf3, #fefefe);
  color: #222;
  line-height: 1.6;
  overflow-x: hidden;
  transition: all 0.3s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.5rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  z-index: 1000;
  transition: background .3s, color .3s;
}

.logo {
  height: 50px;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.logo:hover { transform: scale(1.1); }

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  transition: transform 0.3s;
}

.nav-links a {
  text-decoration: none;
  color: #111;
  font-weight: 600;
  position: relative;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: "";
  width: 0;
  height: 3px;
  background: #007bff;
  position: absolute;
  bottom: -5px;
  left: 0;
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: #007bff;
}
.nav-links a:hover::after { width: 100%; }

/* Hamburger Menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.menu-toggle div {
  width: 25px;
  height: 3px;
  background: #000;
  transition: 0.4s;
}
.menu-toggle.active .bar1 { transform: rotate(45deg) translate(5px,5px); }
.menu-toggle.active .bar2 { opacity: 0; }
.menu-toggle.active .bar3 { transform: rotate(-45deg) translate(5px,-5px); }

@media(max-width:768px){
  .menu-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 65px;
    right: 0;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.636);
    width: 220px;
    height: calc(100vh - 65px);
    align-items: center;
    padding-top: 1rem;
    transform: translateX(100%);
    box-shadow: -2px 0 8px rgba(0,0,0,.15);
  }
  .nav-links.active { transform: translateX(0); }
}

/* ===== DARK MODE BUTTON ===== */
#modeToggle {
  border:none;
  background:#222;
  color:#fff;
  border-radius:50%;
  padding:8px 10px;
  font-size:1rem;
  cursor:pointer;
  transition: background .2s;
}
#modeToggle:hover { background:#007bff; }

/* ===== HERO / SLIDER ===== */
.hero-content { padding-top: 8rem; text-align: center; }
.hero-title { 
  font-size: 3rem; 
  background: linear-gradient(to right, #007bff, #00c6ff); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; /* FIXED */
  background-clip: text; 
  color: transparent; 
}
.hero-subtitle { font-size:1.3rem; color:#555; margin-top:1rem; }

.slider {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  margin-top: 70px;
}
.fade-slides img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.fade-slides img.active { opacity:1; z-index:1; }
.arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.3); color: #fff; border: none;
  font-size:2rem; padding:8px 14px; border-radius:50%;
  cursor:pointer; z-index:10; transition: background .3s, transform .3s;
}
.arrow:hover { background: rgba(0,0,0,.6); transform: translateY(-50%) scale(1.1); }
.arrow.prev { left:20px; } .arrow.next { right:20px; }

.cta-button {
  position: absolute; bottom:70px; left:50%; transform: translateX(-50%);
  background:#ff7b00; color:#fff; padding:12px 30px; border-radius:30px;
  font-size:1.1rem; text-decoration:none; transition:all .3s; z-index:10;
}
.cta-button:hover { background:#ffa94d; transform: translateX(-50%) scale(1.05); }

@media(max-width:768px){ .slider{height:65vh} .cta-button{bottom:40px;font-size:1rem} }
@media(max-width:480px){ .slider{height:55vh} .cta-button{bottom:35px;font-size:.9rem} }

/* ===== SECTIONS ===== */
.intro-section, .testimonial-section, .portfolio-section, .gallery-section, .stats-section, footer {
  background: #fff; color: #222; transition: background .3s, color .3s;
}

.intro-section { text-align:center; padding:3rem 1rem; }
.intro-section h1 { font-size:2rem; color:#1a2980; margin-bottom:1rem; }
.intro-section p { max-width:800px; margin:auto; color:#555; line-height:1.6; }

/* ===== STATS ===== */
.stats-section { display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; padding:2rem 1rem; background:#f1f3f8; }
.stat { text-align:center; }
.stat h2 { font-size:2.3rem; color:#1a2980; }
.stat p { font-weight:600; color:#555; }

/* ===== PORTFOLIO ===== */
.portfolio-section { padding:3rem 2rem; text-align:center; background:#fafafa; }
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; max-width:1200px; margin:auto; }
.portfolio-item {
  background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.1); transition:transform .3s;
}
.portfolio-item:hover { transform:translateY(-8px); }
.portfolio-item img { width:100%; height:200px; object-fit:cover; }

/* ===== GALLERY SECTION ===== */
.gallery-section {
  padding: 70px 5%;
  background: #f9fafb;
  text-align: center;
}

.gallery-section h2 {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #222;
}

/* Carousel container */
.gallery-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* Image track */
.gallery-track {
  display: flex;
  gap: 20px;
  animation: galleryScroll 35s linear infinite;
}

.gallery-item {
  min-width: 220px;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform .3s ease;
}

.gallery-item:hover {
  transform: scale(1.05);
}

.gallery-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* Desktop scroll animation */
@keyframes galleryScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== MOBILE VIEW ===== */
@media (max-width: 768px) {
  .gallery-section {
    padding: 40px 3%;
  }

  .gallery-section h2 {
    font-size: 1.3rem;
    margin-bottom: 20px;
  }

  .gallery-track {
    animation: none; /* Stop auto-scroll on small screens */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 10px;
  }

  .gallery-item {
    min-width: 100px;  /* smaller thumbnails */
    max-width: 110px;
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .gallery-item img {
    height: 80px;
    width: 100%;
    border-radius: 6px;
    object-fit: cover;
  }
}


/* ===== SERVICES ===== */
.service-horizontal { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2rem; margin:5rem 0; background:#fff; padding:2rem; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); transform:translateY(50px); opacity:0; transition:all .7s ease; }
.service-horizontal.visible { opacity:1; transform:translateY(0); }
.service-horizontal img { max-width:400px; border-radius:15px; box-shadow:0 8px 20px rgba(0,0,0,.2); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.service-horizontal img:hover { transform: scale(1.05) rotate(1deg); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.service-horizontal .content { max-width:600px; }
.service-horizontal h3 { font-size:2rem; color:#007bff; margin-bottom:1rem; }
.service-horizontal p { font-size:1.1rem; color:#666; }

@media (max-width:768px){ .service-horizontal{flex-direction:column;text-align:center;} }

/* ===== PRICING ===== */
.pricing { text-align:center; margin:5rem 0; }
.pricing h2 { font-size:2.5rem; margin-bottom:2rem; }
.pricing-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; }
.pricing-card {
  background:#fff; border-radius:20px; padding:2rem; width:300px;
  box-shadow:0 8px 25px rgba(0,0,0,.1); transition:transform .3s;
}
.pricing-card:hover { transform: translateY(-10px); }
.pricing-card.featured { border:3px solid #007bff; }
.pricing-card h3 { font-size:2rem; margin-bottom:1rem; }
.pricing-card p { font-size:1.5rem; color:#007bff; margin-bottom:1rem; }
.pricing-card ul { list-style:none; padding:0; color:#555; }

/* TESTIMONIAL */
.testimonials {
  background: #f8f8f8;
  padding: 4rem 2rem;
  text-align: center;
}

.testimonials h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.testimonials-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.testimonial-card {
  background: #fff;
  border-radius: 15px;
  padding: 2rem;
  max-width: 400px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-10px);
}


.center-text {
  text-align: center;
}


/* ===== CTA ===== */
.cta-section { background: linear-gradient(135deg, #007bff, #00c6ff); color:#fff; text-align:center; padding:4rem 2rem; border-radius:20px; margin:5rem 0; }
.cta-section h2 { font-size:2.5rem; margin-bottom:1rem; }
.cta-section .cta-button { background:#fff; color:#007bff; padding:1rem 2rem; border-radius:50px; font-weight:bold; text-decoration:none; transition:all .4s ease; }
.cta-section .cta-button:hover { background:#f1f1f1; color:#0056b3; }


/* ===== FOOTER ===== */
/* footer, .footer { background:#111; color:#fff; text-align:center; padding:2rem; }
.footer-container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:2rem; } */
/* ===== FOOTER SOCIAL MEDIA ICONS ===== */
.footer-container img {
  width: 24px;   /* Medium size
  height: 24px;  Square
  object-fit: cover; /* Keeps proportions */
  transition: transform 0.3s;
}

.footer-container img:hover {
  transform: scale(1.2); /* Slight zoom on hover */
}

/* Ensure responsive layout doesn't affect icon size */
@media(max-width:3px){
  .footer-container img {
    width: 24px;
    height: 24px;
  }
} 
/* ===== FOOTER ===== */
footer{
  background:#111;color:#fff;text-align:center;padding:1.2rem;
}
.social-media{
  margin-top:1rem;display:flex;justify-content:center;gap:1rem;
}
.social-media img{
  width:24px;height:24px;border-radius:50%;object-fit:cover;
  transition:transform .3s,box-shadow .3s;
}
.social-media img:hover{
  transform:scale(1.2);box-shadow:0 0 8px rgba(255,255,255,.5);
}

/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float {
  position:fixed; bottom:25px; right:25px; width:55px; height:55px;
  background:#25d366; border-radius:50%; display:flex; justify-content:center; align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.3); transition:transform .3s; z-index:999;
}
.whatsapp-float:hover { transform:scale(1.1); }
.whatsapp-float img { width:35px; }

/* ===== DARK MODE ===== */
body.dark-mode {
  background:#111; color:#eaeaea;
}
body.dark-mode .navbar { background:rgba(20,20,20,.9); }
body.dark-mode .nav-links a { color:#1b1a1aca; }
body.dark-mode .nav-links a:hover { color:#1e90ff; }
body.dark-mode #modeToggle { background:#007bff; }
body.dark-mode .intro-section,
body.dark-mode .portfolio-section,
body.dark-mode .gallery-section,
body.dark-mode .stats-section,
body.dark-mode .testimonial-section,
body.dark-mode footer { background:#1a1a1a; color:#f1f1f1; }
body.dark-mode .portfolio-item { background:#222; }
body.dark-mode .stat h2 { color:#1e90ff; }