/* =============================
   NAV ACTIVE STATE
============================= */
.nav-list a.active{
  color:#0072ce;
  font-weight:700;
}


/* =============================
   FIXED HEADER
============================= */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  background:rgba(0,0,0,.94);
  backdrop-filter: blur(10px);

  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* =============================
   HERO SECTION (MODERN WHITE STYLE)
============================= */
.hero{
  background: #eef6ff; /* soft blue tint */
  text-align:center;
  padding:160px 20px 80px;
}


/* Tagline */
.hero .tagline{
  font-size:.85rem;
  letter-spacing:3px;
  margin-bottom:14px;
  color:#4b5563;
  text-transform:uppercase;
}

/* Main heading */
.hero h1{
  font-size:3rem;
  font-weight:500;
  line-height:1.15;
  margin-bottom:16px;
  color:var(--primary);
}

/* Description */
.hero .lead{
  max-width:760px;
  margin:auto;
  font-size:1.2rem;
  line-height:1.7;
  color:#374151;
}

/* Responsive */
@media (max-width:980px){
  .hero{
    padding:90px 20px 70px;
  }
}

@media (max-width:640px){
  .hero .tagline{
    letter-spacing:1px;
  }

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

/* =============================
   PRODUCTS SECTION
============================= */
.products-section {
  background: #e6f0ff;
  color: #070f23;
  padding: 6rem 1rem;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(13, 108, 232, 0.15);
  margin-top: 30px;
}

.products-section .section-title {
  font-size: 2rem;
  font-weight: 600;
  color: #06111a;
  margin-bottom: 1rem;
}

.products-section .section-intro {
  font-size: 1.3rem;
  color: #0a0a0a;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  line-height: 1.6;
}

/* =============================
   GRID
============================= */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* =============================
   PRODUCT CARD (NO OVERLY HEAVY CARD FEEL)
============================= */
.product-card {
  background: #ffffff;
  border: 1px solid rgba(0,114,206,0.18);
  padding: 2rem 1.5rem;
  border-radius: 14px;
  transition: 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 74, 173, 0.12);
  position: relative;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 74, 173, 0.18);
}

/* =============================
   IMAGE CENTERING (FIXED PROPERLY)
============================= */
.product-card .img-wrapper {
  width: 100%;
  height: 130px;
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  margin-bottom: 18px;
}

.product-card img {
  display: block;
  margin: 0 auto;
  max-width: 120px;
  max-height: 100%;
  object-fit: contain;
}

/* =============================
   TEXT STYLES
============================= */
.product-card h3 {
  font-size: 1.3rem;
  color: #0072ce;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.product-card p {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* =============================
   COMING SOON TAG
============================= */
.product-card .coming-soon {
  display: inline-block;
  font-size: 1rem;
  color: #ffffff;
  background: linear-gradient(90deg, #0077ff, #00d1ff);
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-weight: 500;
}

/* =============================
   CTA SECTION (FIXED CENTERING)
============================= */
.contact {
  text-align: center;
  padding: 5rem 1rem;
  background: #f8fbff;
}

.contact .section-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #06111a;
}

.contact p {
  max-width: 700px;
  margin: 0 auto 2rem auto;
  font-size: 1.3rem;
  color: #333;
  line-height: 1.6;
}

/* THIS IS THE REAL FIX */
.contact a.btn,
.contact .btn {
  display: inline-block;
  margin: 0 auto;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 768px) {
  .products-section .section-title {
    font-size: 1.5rem;
  }

  .products-section .section-intro {
    font-size: 1rem;
  }

  .product-card h3 {
    font-size: 1rem;
  }

  .product-card p {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .products-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .product-card {
    width: 100%;
    max-width: 380px;
  }
}

@media (max-width: 768px){

  .hero{
    padding:80px 16px 60px;
  }

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

  .hero .lead{
    font-size:0.95rem;
    line-height:1.6;
  }

  .products-section{
    padding:4rem 1rem;
  }

  .products-section .section-title{
    font-size:1.4rem;
  }

  .products-section .section-intro{
    font-size:0.95rem;
    margin-bottom:2rem;
  }

  .product-card{
    padding:1.3rem;
  }

  .product-card h3{
    font-size:1rem;
  }

  .product-card p{
    font-size:0.9rem;
  }

  .product-card .img-wrapper{
    height:100px; /* smaller image area */
  }

  .product-card img{
    max-width:90px;
  }

  .contact{
    padding:3rem 1rem;
  }

  .contact .section-title{
    font-size:1.4rem;
  }

  .contact p{
    font-size:0.95rem;
  }
}

@media (max-width: 992px){

  .nav-toggle{
    display:block;
    margin-left:auto;
  }



  .main-nav{
    position:absolute;
    top:60px;
    right:0;

    width:max-content;        /* 👈 key: fits content */
    min-width:180px;          /* keeps it usable */
    max-width:260px;

    background:rgba(0,0,0,.96);
    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;

    display:none;
    padding:10px 0;
    box-shadow:0 15px 35px rgba(0,0,0,.35);
  }

  .main-nav.active{
    display:block;
  }

  .main-nav .nav-list{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .nav-list li{
    width:100%;
  }

  .nav-list a{
    display:block;
    padding:12px 16px;
    white-space:nowrap; /* prevents wrapping */
  }

  .nav-list a:hover{
    background:rgba(255,255,255,.08);
  }
}

/* =========================
   CONTACT CTA MOBILE FIX
========================= */
@media (max-width: 768px){

  .contact{
    padding:55px 16px !important;
  }

  .contact .section-title{
    font-size:1rem !important;
    line-height:1.25;
    margin-bottom:12px;
  }

  .contact p{
    font-size:0.95rem !important;
    line-height:1.6;
    margin-bottom:18px;
    padding:0 6px;
  }

  /* Button compact + consistent */
  .contact .btn,
  .contact .btn-primary{
    width:100%;
    max-width:260px;
    padding:11px 18px;
    font-size:0.85rem;
    font-weight: 300;
    border-radius:8px;
  }

  .hero .tagline{
    font-size: 0.7rem;
  }

  .hero,
.products-section,
.contact{
  padding:60px 16px !important;
}

}

/* =========================
   MOBILE COMPACT LAYOUT FIX
========================= */
@media (max-width: 768px){

  /* HERO spacing below fixed navbar */
  .hero{
    padding:100px 16px 60px !important;
  }

  /* Other sections */
  .products-section,
  .contact{
    padding:60px 16px !important;
  }

  /* Make headings more proportional */
  .hero h1{
    font-size:1.5rem !important;
    line-height:1.2;
  }

  .products-section .section-title,
  .contact .section-title{
    font-size:1rem !important;
    line-height:1.3;
  }

.hero .lead,
.products-section .section-intro{
  font-size:0.98rem !important;
  line-height:1.6;
}

.contact p{
  font-size:0.8rem !important;
  line-height:1.6 !important;
}

}

/* ==========================================
   MOBILE HEADER SPACING FIX
========================================== */
@media (max-width:768px){

  .services-hero,
  .service-page-hero{
    padding-top:100px !important;
  }

}

@media (max-width: 992px){

  .nav-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-right:0;
  }

  .nav-toggle{
    display:block;
    margin-left:auto;
  }

  .main-nav{
    position:absolute;

    /* attaches directly under header */
    top:100%;

    /* pushes fully to the right edge */
    right:-4%;

    width:max-content;
    min-width:180px;
    max-width:260px;

    background:rgba(0,0,0,.97);
    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:0 0 12px 12px;

    display:none;

    padding:6px 0;

    box-shadow:0 12px 25px rgba(0,0,0,.28);
  }

  .main-nav.active{
    display:block;
  }

  .main-nav .nav-list{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .nav-list li{
    width:100%;
  }

  .nav-list a{
    display:block;
    padding:12px 16px;
    white-space:nowrap;
  }

  .nav-list a:hover{
    background:rgba(255,255,255,.08);
  }
}

@media (max-width: 480px) {
  .coming-soon {
    font-size: 0.75rem;
    font-weight: 450;
  }
}

@media (max-width: 420px){

  .product-card .coming-soon{
    font-size: 0.8rem;
    padding: 4px 10px;
    font-weight: 350;
  }

   .nav-list a{
    font-size: 0.9rem;
    font-weight: 350;
  }
   .lead{
    font-size: 0.4rem;
  }

    .product-card h3{
    font-size:0.9rem;
    font-weight: 600;
  }
 
body .contact p{
  font-size:0.85rem !important;
  line-height:1.6;
}

}

@media (max-width: 420px){

  .hero .lead{
    font-size:0.8rem !important;
  }

    .product-card p {
    font-size: 0.8rem;
  }
}