/* =========================================
   RESPONSIVE DESIGN
========================================= */

/* =========================================
   LARGE TABLETS / SMALL LAPTOPS
   KEEP SAME LAYOUT — JUST SCALE CONTENT
========================================= */
@media (max-width: 1100px){

  h1{
    font-size:2.6rem;
  }

  h2{
    font-size:2rem;
  }

  .container{
    padding-inline:30px;
  }

   .know-us,
  .testimonials,
  .products-hero-bg,
  .hero-projects .hero-bg{
    background-attachment:fixed;
  }

  .hero-grid,
  .about-grid,
  .products-row,
  .featured-grid,
  .location-grid,
  .about-company-grid,
  .ceo-section,
  .contact-grid{
    gap:40px;
  }

  .phone-mockup{
    width:220px;
    height:430px;
  }

  .products-premium .products-card img{
    height:340px;
  }

  .project-card img{
    height:260px;
  }

  .featured-image img{
    height:auto;
  }

  .cta-box{
    padding:40px;
  }

  .hero-content p{
    font-size:1.05rem;
  }

  .btn{
    font-size:0.95rem;
  }
}


/* =========================================
   TABLET
   KEEP SAME STRUCTURE TILL 600px
========================================= */
@media (max-width: 900px){

  h1{
    font-size:2.2rem;
  }

  p{
    font-size:0.95rem;
  }

  .container{
    padding-inline:20px;
  }

  .hero-grid{
    grid-template-columns:1fr 0.9fr;
    gap:25px;
  }

  .about-grid,
  .products-row,
  .featured-grid,
  .location-grid,
  .about-company-grid,
  .ceo-section,
  .contact-grid{
    grid-template-columns:1fr 1fr;
    gap:30px;
  }

  .phone-mockup{
    width:200px;
    height:390px;
  }

  .hero-buttons{
    flex-wrap:wrap;
  }

  .btn{
    padding:8px 8px 8px 18px;
    gap:12px;
  }

  .products-premium .products-card img{
    height:300px;
  }

  .products-image img{
    height:320px;
  }

  .project-card img{
    height:240px;
  }

  .testimonial-card{
    padding:30px;
  }

  .cta-content h2{
    font-size:28px;
  }

  .nav-links a{
    font-size:13px;
    padding:8px 12px;
  }

  .logo img{
    height:42px;
  }
}


/* =========================================
   MOBILE RESPONSIVE
   BELOW 750px
========================================= */
@media (max-width: 750px){

  /* =========================
     GLOBAL
  ========================= */
  section{
    padding:70px 0;
  }

  h1{
    font-size:2rem;
    line-height:1.2;
  }

  h2{
    font-size:1.7rem;
  }

  p{
    font-size:0.95rem;
    line-height:1.6;
  }

  .container{
    padding-inline:16px;
  }

  /* =========================
     NAVBAR
  ========================= */
  .nav-wrapper{
    padding:10px 15px;
  }

  .menu-icon{
    display:block;
    background: transparent;
    border: none;
  }

.nav-links{
  position:absolute;
  top:100%;
  left:0;
  width:100%;

  flex-direction:column;
  align-items:flex-start;

  padding:20px;
  gap:10px;

  border-radius:0;
  border-bottom-left-radius:20%;

background:linear-gradient(120deg,#ffffff,#a9cbe6b6,#7bd7c58e);  
  backdrop-filter:blur(15px);

  transform:translateY(-10px);
  opacity:0;
  pointer-events:none;

  transition:0.3s ease;

  overflow:hidden;
}

/* RIGHT SIDE IMAGE */
.nav-links::after{
  content:'';

  position:absolute;
align-items: center;
  width:100%;
  height:100px;

  background:url('assets/logo.png') center/contain no-repeat;

  opacity:0.15;

  pointer-events:none;
}

  .nav-links.active{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .nav-links a{
    width:100%;
    justify-content:flex-start;
    padding:12px 14px;
    border-radius:12px;
  }

  /* =========================
     HERO
  ========================= */
  .hero{
    min-height:100vh;
    padding-top:120px;
    padding-bottom:80px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-content{
    order:2;
  }

  .hero-buttons{
    justify-content:center;
  }

  .hero-content p{
    font-size:1rem;
  }

  /* =========================
     ABOUT
  ========================= */
  .about-grid{
    grid-template-columns:1fr;
  }

  .stats{
    justify-content:center;
  }

  .stat-card{
    min-width:140px;
  }

  .phone-mockup{
    width:220px;
    height:420px;
  }

  /* =========================
     KNOW US
  ========================= */
  .know-grid{
    grid-template-columns:1fr;
  }

  .card-inner{
    min-height:240px;
  }

  /* =========================
     TIMELINE
  ========================= */
  .why-choose .timeline-line{
    left:20px;
  }

  .why-choose .timeline-item,
  .why-choose .timeline-item.left,
  .why-choose .timeline-item.right{
    width:100%;
    left:0;
    text-align:left;
    padding:20px 20px 20px 60px;
  }

  .why-choose .timeline-item::before,
  .why-choose .timeline-item.left::before,
  .why-choose .timeline-item.right::before{
    left:14px;
    right:auto;
  }

  /* =========================
     TESTIMONIAL
  ========================= */
  .testimonial-card{
    padding:25px 20px;
  }

  .client{
    flex-direction:column;
    text-align:center;
  }

  /* =========================
     CONTACT
  ========================= */
  .contact-grid{
    grid-template-columns:1fr;
  }

  .contact-form{
    padding:25px 20px;
  }

  /* =========================
     FOOTER
  ========================= */
  .footer-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .footer{
    text-align:center;
  }

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

  /* =========================
     PRODUCTS PREMIUM
  ========================= */
  .products-premium .products-grid{
    grid-template-columns:1fr;
  }

  .products-premium .products-card img{
    height:280px;
  }

  /* =========================
     PRODUCT DETAILS
  ========================= */
  .products-row,
  .products-row.reverse{
    grid-template-columns:1fr;
    direction:ltr;
  }

  .products-image img{
    height:260px;
  }

  .products-text h2{
    font-size:26px;
  }

  /* =========================
     PRODUCT GRID
  ========================= */
  .product-grid{
    grid-template-columns:1fr;
  }

  .product-grid img{
    height:240px;
  }

  /* =========================
     CTA
  ========================= */
  .cta-box{
    flex-direction:column;
    text-align:center;
    padding:30px 20px;
  }

  .cta-buttons{
    justify-content:center;
  }

  /* =========================
     ABOUT PAGE
  ========================= */
  .about-images{
    grid-template-columns:1fr;
  }

  .about-images img{
    height:220px;
  }

  .location-grid,
  .about-company-grid,
  .ceo-section{
    grid-template-columns:1fr;
  }

  .ceo-image img{
    width:220px;
    height:280px;
  }

  .ceo-sons{
    flex-direction:column;
  }

  .son-card{
    min-width:100%;
  }

  /* =========================
     TRUST
  ========================= */
  .trust-grid{
    grid-template-columns:1fr;
  }

  /* =========================
     PROJECTS
  ========================= */
  .projects-grid{
    grid-template-columns:1fr;
  }

  .featured-grid{
    grid-template-columns:1fr;
  }

  .project-card img{
    height:250px;
  }

  .featured-text h2{
    font-size:28px;
  }

  /* =========================
     BUTTONS
  ========================= */
  .btn{
    width:auto;
    font-size:0.92rem;
  }

  /* =========================
     WHATSAPP
  ========================= */
  .whatsapp-float{
    width:50px;
    height:50px;
    font-size:24px;
    right:18px;
    bottom:18px;
  }
}