/* ====== BASE ====== */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: #ffffff; /* Pure white background */
    color: #1a1a1a; /* Smooth dark text for readability */
  }
  
  /* Navbar */
/* Navbar */
.navbar {
    display: flex;
    font-family: 'Montserrat', sans-serif;
    justify-content: space-between;
    align-items: center;
    padding: 15px 8%;
    background: #ffffff; /* light background */
    color: #1a1a1a;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111;
  }
  .logo img {
    height: 50px; /* adjust as needed */
    width: auto;  /* maintain aspect ratio */
    display: block;
}
  /* Desktop menu */
  .nav-desktop ul {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0;
    padding: 0;
  }
  
  .nav-desktop a {
    position: relative;
    text-decoration: none;
    color: #111; /* default text */
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 5px;
    transition: all 0.3s ease; /* smooth hover */
  }
  
  /* Gradient underline */
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(135deg, #3b82f6, #8e24aa);
    transition: width 0.3s ease;
  }
  
  /* Hover effect */
  .nav-desktop a:hover {
    color: #8e24aa; /* purple text */
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(142,36,170,0.1)); /* subtle glow */
  }
  
  .nav-desktop a:hover::after {
    width: 100%; /* underline expands */
  }
  
  /* Hamburger (hidden on desktop) */
  .hamburger {
    display: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #111;
  }
  
  /* Sidebar */
  .sidebar {
    position: fixed;
    font-family: 'Montserrat', sans-serif;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background: #f9f9f9; /* light sidebar */
    padding-top: 60px;
    transition: 0.3s ease;
    z-index: 300;       
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
  }
  
  .sidebar ul {
    list-style: none;
    padding: 0 20px;
  }
  
  .sidebar ul li {
    margin: 20px 0;
  }
  
  .sidebar ul li a {
    color: #111;
    text-decoration: none;
    font-size: 1.1rem;
    display: block;
    padding: 8px 10px;
    border-radius: 5px;
    transition: 0.3s;
  }
  
  .sidebar ul li a:hover {
    background: rgba(0,0,0,0.05);
  }
  
  /* Show sidebar */
  .sidebar.active {
    left: 0;
  }
  
  /* Mobile Styles */
  @media (max-width: 768px) {
    .nav-desktop {
      display: none; /* hide desktop menu */
    }
  
    .hamburger {
      display: block; /* show hamburger */
    }
  }
/* Close button */
.sidebar .close-btn {
    font-size: 2rem;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 20px;
    cursor: pointer;
    color: #111; /* dark color for light theme */
    transition: color 0.3s;
  }
  
  .sidebar .close-btn:hover {
    color: #ff0000; /* red on hover */
  }
  /*beech ki hai bhai*/
  .single-slider {
    text-align: center;
    margin: 50px 0;
  }
  
  .single-slider .swiper {
    width: 100%;          /* 90% width for both desktop & mobile */
  
    margin: 0 auto;
  }
  
  .single-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .single-slider img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  }
  
  /* Optional styling for the main slider below */
  .slider-section img {
    width: 80%;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
  }
  
  /*  Imge slider bhai*/
  .projects-slider .swiper-slide {
    display: flex;
    justify-content: center; /* center the card horizontally */
  }
  
  .project-card {
    width: 90%; /* mobile: card fills 90% of container */
    
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
  }
  
  .project-card:hover {
    transform: translateY(-5px);
  }
  
  .project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .project-info {
    padding: 15px;
  }
  
  .project-info h3 {
    margin: 10px 0 5px;
    font-size: 1.2rem;
    color: #111;
  }
  
  .project-info p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
  }
  .projects-heading {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .projects-heading h2 {
    font-size: 2rem;
    color: #111;
    font-weight: 700;
    margin-bottom: 8px;
  }
  
  .projects-heading p {
    font-size: 1rem;
    color: #555;
  }
    
  /*Kyu choose krega bhai*/
 /* Why Choose Us Section */
.why-choose-section {
  padding: 60px 20px;
  background: #f8f4ff;
  text-align: center;

  opacity: 0;
  transform: translateY(50px);
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.2s;
}

.why-choose-section h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a1333;

  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.4s;
}

.why-choose-section .why-sub {
  font-size: 1rem;
  color: #6a5c7d;
  margin-bottom: 40px;

  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.6s;
}

/* GRID */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  max-width: 1100px;
  margin: auto;
}

/* Card Base */
.why-box {
  background: #fff;
  padding: 28px 22px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(80, 40, 140, 0.12);
  transition: 0.4s ease;
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s ease forwards;

  /* Premium floating */
  animation: fadeUp 1s ease forwards, floatBox 4s ease-in-out infinite;
}

/* Stagger */
.why-box:nth-child(1) { animation-delay: 0.3s; }
.why-box:nth-child(2) { animation-delay: 0.5s; }
.why-box:nth-child(3) { animation-delay: 0.7s; }
.why-box:nth-child(4) { animation-delay: 0.9s; }

/* ICONS — Individual Premium Colors */
.why-box:nth-child(1) i { color: #ff6f61; } /* Creative */
.why-box:nth-child(2) i { color: #ffb400; } /* Fast */
.why-box:nth-child(3) i { color: #4caf50; } /* Trusted */
.why-box:nth-child(4) i { color: #3f51b5; } /* Affordable */

/* Icon style */
.why-box i {
  font-size: 42px;
  margin-bottom: 15px;
  transition: 0.35s ease;
}

/* Shine layer */
.why-box::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255,255,255,0.28);
  transform: rotate(25deg);
  transition: 0.6s;
}

/* HOVER: Premium */
.why-box:hover {
  transform: translateY(-14px) scale(1.05);
  box-shadow: 0 12px 28px rgba(90, 40, 150, 0.18);
}

/* SHINE move on hover */
.why-box:hover::after {
  top: -20%;
}

/* Icon hover pop */
.why-box:hover i {
  transform: scale(1.22);
}

/* Gradient hover based on card */
.why-box:nth-child(1):hover {
  background: linear-gradient(135deg, #ff6f61, #ff9e80);
  color: #fff;
}
.why-box:nth-child(2):hover {
  background: linear-gradient(135deg, #ffb400, #ffd54f);
  color: #fff;
}
.why-box:nth-child(3):hover {
  background: linear-gradient(135deg, #4caf50, #81c784);
  color: #fff;
}
.why-box:nth-child(4):hover {
  background: linear-gradient(135deg, #3f51b5, #7986cb);
  color: #fff;
}

.why-box:hover p,
.why-box:hover h3,
.why-box:hover i {
  color: #fff;
}

/* Titles & Text */
.why-box h3 {
  font-size: 1.28rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.why-box p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}

/* Fade animation */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Floating animation */
@keyframes floatBox {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Responsive */
@media(max-width: 992px) {
  .why-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media(max-width: 600px) {
  .why-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}


/*Tech we use*/
/* Section */
.tech-section {
  padding: 60px 20px;
  background: #f8f8f8;
  text-align: center;
}

.tech-section h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
}

.tech-sub {
  font-size: 1rem;
  color: #666;
  margin-bottom: 40px;
}

/* Grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1100px;
  margin: auto;
}

/* Box */
.tech-box {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  text-align: center;

  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
}

/* stagger animation */
.tech-box:nth-child(1) { animation-delay: 0.2s; }
.tech-box:nth-child(2) { animation-delay: 0.4s; }
.tech-box:nth-child(3) { animation-delay: 0.6s; }
.tech-box:nth-child(4) { animation-delay: 0.8s; }
.tech-box:nth-child(5) { animation-delay: 1.0s; }
.tech-box:nth-child(6) { animation-delay: 1.2s; }

.tech-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Icons */
.tech-box i {
  font-size: 45px;
  color: #ff7f50;
  margin-bottom: 12px;
  transition: 0.3s ease;
}

.tech-box:hover i {
  transform: scale(1.1);
  color: #ff5a2f;
}

.tech-box h3 {
  font-size: 1.25rem;
  margin-bottom: 6px;
  color: #111;
}

.tech-box p {
  color: #666;
  font-size: 0.95rem;
}
.tech-box i.fa-html5 {
  color: #E44D26;  /* Official HTML5 Orange */
}

/* CSS3 */
.tech-box i.fa-css3-alt {
  color: #1572B6;  /* Official CSS3 Blue */
}

/* JavaScript */
.tech-box i.fa-js {
  color: #F7DF1E;  /* Official JS Yellow */
}

/* React */
.tech-box i.fa-react {
  color: #61DAFB;  /* Official React Cyan */
}

/* NodeJS */
.tech-box i.fa-node-js {
  color: #3C873A;  /* Official NodeJS Green */
}
/* WordPress */
.tech-box i.fa-wordpress {
  color: #21759B;   /* Official WP Blue */
}

/* Shopify */
.tech-box i.fa-shopify {
  color: #95BF47;   /* Official Shopify Green */
}
/* Database (Generic icon) */
.tech-box i.fa-database {
  color: #6C63FF;  /* A clean modern DB purple */
}

/* Android */
.tech-box i.fa-android {
  color: #3DDC84;  /* Official Android Green */
}

/* Python */
.tech-box i.fa-python {
  color: #3471A2;  /* Python Blue */
}
/* fade up animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media(max-width: 992px) {
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 600px) {
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


  /* ====== HERO SECTION ====== */
  .hero {
    text-align: center;
    padding: 25px 20px;
    background: #ffffff;
  }
  
  .hero h1 {
    font-size: 2.3rem;
    color: #000000; /* Pure black */
    
    font-weight: 700;
    text-align: center;
   margin-bottom: 30px;
   margin-top: 30px;
    letter-spacing: 0.5px;
  }
  
 .hero p.features {
  font-weight: 600;          /* Slightly bold */
  font-size: 1.5rem;         /* Slightly larger */
  color: #79797c;            /* Blue accent to match theme */
  letter-spacing: 0.3px;     /* Cleaner spacing */
  margin-top: 20px;
  margin-bottom: 10px;
}
  
  
 /* Buttons container */
.buttons {
    display: flex;
    flex-wrap: wrap;       /* allow wrapping */
    justify-content: center;
    gap: 10px;
    margin-top: 40px;      /* some spacing from text */
  }
  
  /* Buttons style */
  .buttons .btn {
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    flex: 0 1 auto;       /* desktop default */
    text-align: center;
    min-width: 140px;
  }
  
  /* Outline Button */
  .btn-outline {
    border: 2px solid #3b82f6;
    color: #3b82f6;
    background: transparent;
  }
  
  .btn-outline:hover {
   
    background: linear-gradient(135deg, #5a9afc, #a03ed2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(142, 36, 170, 0.4);
    color: #fff;
  }
  
  /* Primary Button */
  .btn-primary {
    background:linear-gradient(135deg, #3b82f6, #8e24aa);
    color: #fff;
    border: none;
  }
  
  .btn-primary:hover {
    background: linear-gradient(135deg, #5a9afc, #a03ed2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(142, 36, 170, 0.4);
  }
  
  /* ===== Mobile: 2 buttons per row ===== */
  @media (max-width: 768px) {
    .buttons {
        flex-direction: row;   /* ensure horizontal layout */
      }
   

        .buttons .btn {
            flex: 0 0 45%;         /* almost half width each */
            max-width: 45%;    
            box-sizing: border-box;    /* 2 per row */
          }
    }
  
  
  
  /* ====== WORK SECTION ====== */
  .work {
    text-align: center;
    padding: 70px 20px;
    background: #ffffff; /* White background section */
  }
  
  .work h2 {
    color: #1e3a8a;
    margin-bottom: 10px;
  }
  
  .work p {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 40px;
  }
  
  /* ====== CARD ====== */
  .card {
    background: #ffffff;
    border-radius: 15px;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid rgba(0,0,255,0.08); /* subtle blue border */
    box-shadow: 0 5px 20px rgba(0,0,255,0.05);
  }
  
  .card img {
    width: 100%;
    border-radius: 10px;
  }
  
  .card h3 {
    color: #1e3a8a;
    margin-top: 15px;
  }
  
  .card ul {
    list-style: none;
    padding: 0;
    color: #444;
  }

 /* industries */
.industries-section {
  text-align: center;
  padding: 50px 15px;
  background: #faf7ff;
}

.industries-section h2 {
  font-size: 1.8rem;
  color:#000000; 
  margin-bottom: 30px;
  font-weight: 600;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 15px;
  max-width: 1000px;
  margin: auto;
}

.industry-box {
  background: white;
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(106, 27, 154, 0.1);
  padding: 20px 10px;
  transition: all 0.3s ease;
}

.industry-box i {
  font-size: 24px;
  margin-bottom: 8px;
  transition: 0.3s ease;
}

/* ✅ NEW MULTICOLOR ICONS */
.industry-box:nth-child(1) i { color: #FF6F61; }   /* Fashion */
.industry-box:nth-child(2) i { color: #4CAF50; }   /* Grocery */
.industry-box:nth-child(3) i { color: #FF9800; }   /* Restaurant */
.industry-box:nth-child(4) i { color: #3F51B5; }   /* Electronics */
.industry-box:nth-child(5) i { color: #8D6E63; }   /* Furniture */
.industry-box:nth-child(6) i { color: #455A64; }   /* Real Estate */
.industry-box:nth-child(7) i { color: #9C27B0; }   /* Education */
.industry-box:nth-child(8) i { color: #E91E63; }   /* Beauty */
.industry-box:nth-child(9) i { color: #009688; }   /* Fitness */
.industry-box:nth-child(10) i { color: #F44336; }  /* Medical */

.industry-box p {
  font-size: 0.9rem;
  color: #333;
  font-weight: 500;
  margin: 0;
}

/* Hover UI stays SAME */
.industry-box:hover {
  background: linear-gradient(135deg, #9c27b0, #ce93d8);
  color: white;
  transform: translateY(-4px);
}

.industry-box:hover i {
  color: white;
}
.industry-box:nth-child(1):hover {
  background: linear-gradient(135deg, #ff6f61, #ff8a80); /* Fashion */
  color: #fff;
}
.industry-box:nth-child(1):hover i { color:#fff; }

.industry-box:nth-child(2):hover {
  background: linear-gradient(135deg, #4CAF50, #81C784); /* Grocery */
  color: #fff;
}
.industry-box:nth-child(2):hover i { color:#fff; }

.industry-box:nth-child(3):hover {
  background: linear-gradient(135deg, #ff9800, #ffb74d); /* Restaurant */
  color: #fff;
}
.industry-box:nth-child(3):hover i { color:#fff; }

.industry-box:nth-child(4):hover {
  background: linear-gradient(135deg, #3F51B5, #7986CB); /* Electronics */
  color: #fff;
}
.industry-box:nth-child(4):hover i { color:#fff; }

.industry-box:nth-child(5):hover {
  background: linear-gradient(135deg, #8D6E63, #BCAAA4); /* Furniture */
  color:#fff;
}
.industry-box:nth-child(5):hover i { color:#fff; }

.industry-box:nth-child(6):hover {
  background: linear-gradient(135deg, #455A64, #90A4AE); /* Real Estate */
  color:#fff;
}
.industry-box:nth-child(6):hover i { color:#fff; }

.industry-box:nth-child(7):hover {
  background: linear-gradient(135deg, #9C27B0, #CE93D8); /* Education */
  color:#fff;
}
.industry-box:nth-child(7):hover i { color:#fff; }

.industry-box:nth-child(8):hover {
  background: linear-gradient(135deg, #E91E63, #F48FB1); /* Beauty */
  color:#fff;
}
.industry-box:nth-child(8):hover i { color:#fff; }

.industry-box:nth-child(9):hover {
  background: linear-gradient(135deg, #009688, #4DB6AC); /* Fitness */
  color:#fff;
}
.industry-box:nth-child(9):hover i { color:#fff; }

.industry-box:nth-child(10):hover {
  background: linear-gradient(135deg, #F44336, #EF9A9A); /* Medical */
  color:#fff;
}
.industry-box:nth-child(10):hover i { color:#fff; }
/*flaotinh butn*/
.call-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  touch-action: manipulation;
}

/* round button */
.call-fab .btn {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  background: linear-gradient(135deg, #10b981, #059669); /* green */
  border: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.call-fab .btn:active { transform: scale(.96); }
.call-fab .btn:focus { outline: 3px solid rgba(5,150,105,0.18); outline-offset: 3px; }

/* label (optional) */
.call-fab .label {
  background: #fff;
  color: #0f172a;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(2,6,23,0.08);
  user-select: none;
  white-space: nowrap;
  font-size: 14px;
}

/* small animation for attention */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1.08); opacity: .85; }
  100% { transform: scale(1); opacity: 1; }
}
.call-fab .btn.pulse {
  animation: pulse 2.6s infinite;
}

/* hide label on very small screens if needed */
@media (max-width:360px) {
  .call-fab .label { display: none; }
}
/* Floating animation */
@keyframes floatBox {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.industry-box {
  animation: floatBox 3s ease-in-out infinite;
}

@media (min-width: 992px) {
  .industries-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 768px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/**pop up*/
.overlay-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999; 
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* slightly darker for premium feel */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popup-box {
  background: #ffffff; /* clean white background */
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); /* softer, deeper shadow */
  width: 320px;
  text-align: center;
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInUp 0.5s ease-out forwards;
  border-top: 6px solid #72c8cd; /* premium accent color */
}

.form-container {
  display: flex;
  flex-direction: column;
}

.form-label {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333; /* darker, premium text color */
  text-align: left;
}

.form-input {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

.btn-submit,
.btn-close-popup {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-submit {
  background: linear-gradient(135deg, #f6fbff, #ebe8f0); /* premium gradient */
  color: rgb(0, 0, 0);
  box-shadow: 0 6px 16px rgba(106, 92, 255, 0.3);
}

.btn-submit:hover {
  background: linear-gradient(135deg, #cedbe6, #ebe8f0); /* hover gradient */
}

.btn-close-popup {
  margin-top: 12px;
  background-color: #f6f9fa; /* premium red */
  color: rgb(0, 0, 0);
  box-shadow: 0 6px 16px rgba(255, 76, 76, 0.3);
}

.btn-close-popup:hover {
  background-color: #e33a3a;
}
/* Inputs & textarea */
#name, #email, #phone, #message {
  padding: 12px 16px;
  margin-bottom: 20px;
  border: 1px solid #d1d1d1;
  border-radius: 10px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
  background: #fdfdfd;
  color: #333;
  outline: none;
}

#name:focus, #email:focus, #phone:focus, #message:focus {
  border-color: #5cd1ff; /* premium accent color */
  box-shadow: 0 0 8px rgba(106, 92, 255, 0.4);
}

/* Placeholder color */
#name::placeholder,
#email::placeholder,
#phone::placeholder,
#message::placeholder {
  color: #aaa;
  font-weight: 500;
}
/* Keyframes for fadeInUp animation */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Animation for popup */
.overlay-container.show {
  display: flex;
  opacity: 1;
}
/*services*/
.services-text {
  max-width: 900px;
  margin: 100px auto;
  padding: 0 20px;
  text-align: center;
  line-height: 1.8;
  font-family: 'Poppins', sans-serif;
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.2s ease;
}

/* Visible when scrolled into view */
.services-text.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Heading Animation */
.services-text h2 {
  font-size: 2.0em;
  margin-bottom: 15px;
  color: #18191a;
  font-weight: 700;
  letter-spacing: 1px;
  animation: floatTitle 3s ease-in-out infinite alternate;
}

/* Paragraph Text */
.services-text p {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.1em;
}

/* Floating heading effect */
@keyframes floatTitle {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

/* Highlight Animation */
.highlight {
  color: #161718;
  position: relative;
  font-weight: 600;
  display: inline-block;
  animation: glowText 3s ease-in-out infinite alternate;
}

@keyframes glowText {
  0% {
    color: #3e7089;
    text-shadow: 0 0 10px rgba(42, 103, 168, 0.4);
  }
  100% {
    color: #375082;
    text-shadow: 0 0 20px rgba(0,123,255,0.7);
  }
}
  /* ====== FOOTER ====== */
  footer { background: #fff; color: #555; padding: 30px 20px; text-align: center; font-size: 14px; border-top: 1px solid #eee;font-family: 'Montserrat', sans-serif; }
  footer a { color: #3f51b5; margin: 0 8px; transition: color 0.3s; }
  footer a:hover { color: #8047dd; }
/* Responsive */
@media(max-width: 600px) {
  .footer {
    font-size: 0.9rem;
    padding: 30px 15px;
  }

  .footer a {
    display: inline-block;
    margin: 5px 8px;
  }
}

  /*messeageus*/.message-box {
  max-width: 600px;
  margin: 80px auto;
  padding: 40px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.message-box h3 {
  font-size: 28px;
  font-weight: 600;
  color: #000;
  margin-bottom: 25px;
}

.message-box form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message-box input,
.message-box textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  outline: none;
  transition: all 0.3s ease;
  color: #000;
  background-color: #f9f9f9;
}

.message-box input:focus,
.message-box textarea:focus {
  border-color: #000;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.message-box button {
  background: #000;
  color: #fff;
  padding: 14px 0;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.message-box button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
  
  /* ====== RESPONSIVE ====== */
  @media (max-width: 768px) {
    .navbar ul {
      flex-direction: column;
      align-items: flex-start;
    }
    
  }