/* =========================================================
   LARGE LAPTOPS
========================================================= */

@media(max-width:1400px){

  .container{

    max-width:1200px;

  }

  .hero-container,
  .why-grid,
  .cta-box{

    gap:60px;

  }

}

/* =========================================================
   LAPTOPS
========================================================= */

@media(max-width:1200px){

  /* ================= HERO ================= */

  .hero-container{

    grid-template-columns:1fr;

    text-align:center;

  }

  .hero-content p{

    margin-left:auto;
    margin-right:auto;

  }

  .hero-buttons,
  .hero-tags{

    justify-content:center;

  }

  .hero-visual{

    max-width:700px;

    margin:0 auto;

  }

  /* ================= STATS ================= */

  .stats-strip{

    grid-template-columns:
    repeat(2,1fr);

  }

  .strip-review{

    grid-column:
    span 2;

  }

  /* ================= SERVICES ================= */

  .services-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  /* ================= PROJECTS ================= */

  .projects-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  /* ================= WHY ================= */

  .why-grid{

    grid-template-columns:1fr;

  }

  .why-content{

    text-align:center;

  }

  .why-features{

    max-width:900px;

    margin:
    0 auto 40px;

  }

  /* ================= EXPERTISE ================= */

  .expertise-grid{

    grid-template-columns:
    repeat(3,1fr);

  }

  /* ================= TESTIMONIALS ================= */

  .testimonials-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  /* ================= CTA ================= */

  .cta-box{

    grid-template-columns:1fr;

    text-align:center;

  }

  .cta-content p{

    margin-left:auto;
    margin-right:auto;

  }

  .cta-buttons{

    justify-content:center;

  }

}

/* =========================================================
   TABLETS
========================================================= */

@media(max-width:992px){

  section{

    padding:100px 0 !important;

  }

  /* ================= HEADER ================= */

  .site-header{

    padding:16px 0;

  }

  .header-container{

    padding:16px 22px;

    border-radius:28px;

  }

  .menu-toggle{

    display:flex;

  }

  /* ================= MOBILE NAV ================= */

  .nav-menu{

    position:fixed;

    top:105px;
    left:-100%;

    width:100%;

    height:
    calc(100vh - 105px);

    flex-direction:column;

    align-items:flex-start;

    gap:0;

    padding:30px;

    background:
    rgba(255,255,255,0.97);

    backdrop-filter:blur(20px);

    overflow-y:auto;

    transition:0.35s ease;

  }

  .nav-menu.active{

    left:0;

  }

  .nav-menu > a,
  .nav-parent{

    width:100%;

    padding:18px 0;

    border-bottom:
    1px solid rgba(15,23,42,0.06);

  }

  /* ================= DROPDOWN ================= */

  .dropdown-menu{

    position:static;

    min-width:100%;

    margin-top:16px;

    opacity:1;
    visibility:visible;

    transform:none;

    display:none;

    box-shadow:none;

  }

  .nav-dropdown.active .dropdown-menu{

    display:block;

  }

  /* ================= HERO ================= */

  .hero-section{

    padding-top:150px !important;

  }

  .hero-content h1{

    font-size:4rem;

  }

  /* ================= WHY FEATURES ================= */

  .why-features{

    grid-template-columns:1fr;

  }

  /* ================= EXPERTISE ================= */

  .expertise-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  /* ================= FOOTER ================= */

  .footer-top{

    grid-template-columns:
    repeat(2,1fr);

  }

}

/* =========================================================
   MOBILE DEVICES
========================================================= */

@media(max-width:768px){

  /* ================= TYPOGRAPHY ================= */

  h1{

    font-size:2.8rem !important;

    line-height:1.1;

  }

  h2{

    font-size:2.3rem !important;

    line-height:1.15;

  }

  h3{

    font-size:1.2rem !important;

  }

  p{

    font-size:15px;

    line-height:1.8;

  }

  /* ================= HERO ================= */

  .hero-section{

    padding-top:140px !important;

  }

  .hero-container{

    gap:50px;

  }

  .hero-buttons{

    flex-direction:column;

  }

  .primary-btn,
  .secondary-btn{

    width:100%;

  }

  .hero-tags{

    justify-content:center;

  }

  /* ================= DASHBOARD ================= */

  .dashboard-card{

    padding:26px;

    border-radius:30px;

  }

  .analytics-grid{

    grid-template-columns:1fr;

  }

  /* ================= STATS ================= */

  .stats-strip{

    grid-template-columns:1fr;

  }

  .strip-review{

    grid-column:auto;

  }

  /* ================= SERVICES ================= */

  .services-grid{

    grid-template-columns:1fr;

  }

  .main-service-card{

    padding:30px;

  }

  /* ================= PROJECTS ================= */

  .projects-header{

    flex-direction:column;

    align-items:flex-start;

    gap:24px;

  }

  .projects-grid{

    grid-template-columns:1fr;

  }

  /* ================= WHY ================= */

  .why-grid{

    gap:60px;

  }

  .performance-card{

    padding:28px;

  }

  .performance-card h3{

    font-size:3rem;

  }

  /* ================= EXPERTISE ================= */

  .expertise-grid{

    grid-template-columns:1fr;

  }

  .expertise-item{

    padding:32px 26px;

  }

  /* ================= TESTIMONIALS ================= */

  .testimonials-grid{

    grid-template-columns:1fr;

  }

  .testimonial-card{

    padding:30px;

  }

  /* ================= CTA ================= */

  .cta-box{

    padding:50px 30px;

  }

  .cta-buttons{

    flex-direction:column;

  }

  /* ================= FOOTER ================= */

  .footer-top{

    grid-template-columns:1fr;

  }

  .footer-bottom{

    flex-direction:column;

    text-align:center;

  }

  .footer-bottom-links{

    justify-content:center;

  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

  /* ================= CONTAINER ================= */

  .container{

    padding:0 18px;

  }

  /* ================= HEADER ================= */

  .header-container{

    padding:14px 18px;

  }

  .logo img{

    width:46px;
    height:46px;

  }

  .logo-text{

    font-size:1.05rem;

  }

  .menu-toggle{

    width:50px;
    height:50px;

  }

  /* ================= TYPOGRAPHY ================= */

  h1{

    font-size:2.2rem !important;

  }

  h2{

    font-size:1.9rem !important;

  }

  /* ================= HERO ================= */

  .mini-badge{

    font-size:12px;

    padding:10px 16px;

  }

  .hero-tag{

    width:100%;

    justify-content:center;

  }

  /* ================= BUTTONS ================= */

  .primary-btn,
  .secondary-btn{

    font-size:14px;

    padding:15px 20px;

  }

  /* ================= CARDS ================= */

  .dashboard-card,
  .main-service-card,
  .project-content,
  .performance-card,
  .expertise-item,
  .testimonial-card,
  .cta-card{

    padding:24px;

    border-radius:26px;

  }

  /* ================= TERMINAL ================= */

  .terminal-body{

    font-size:12px;

  }

  /* ================= CTA ================= */

  .cta-box{

    padding:40px 22px;

    border-radius:30px;

  }

  /* ================= FOOTER ================= */

  .newsletter-box{

    padding:22px;

  }

  .newsletter-form{

    flex-direction:column;

  }

  .newsletter-form button{

    width:100%;

  }

}

/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media(max-width:360px){

  h1{

    font-size:2rem !important;

  }

  h2{

    font-size:1.7rem !important;

  }

  .header-container{

    padding:12px 16px;

  }

  .logo-text{

    font-size:0.95rem;

  }

}