/* =========================================
   LARGE LAPTOPS / SMALL DESKTOPS
========================================= */

@media screen and (max-width:1400px){

  .hero-container,
  .problem-grid,
  .footer-container,
  .section-header{
    gap:60px;
  }

  h1{
    font-size:92px;
  }

}

/* =========================================
   SURFACE PRO / IPAD PRO LANDSCAPE
   Surface Pro 7
   iPad Pro
========================================= */

@media screen and (max-width:1200px){

  .hero-container{
    grid-template-columns:1fr;
    gap:70px;
  }

  .problem-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .section-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .feature-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .footer-container{
    grid-template-columns:repeat(2,1fr);
  }

  h1{
    font-size:84px;
  }

  .hero{
    padding-top:170px;
  }

}

/* =========================================
   TABLETS
   iPad Air
   iPad Mini
   Surface Duo
========================================= */

@media screen and (max-width:1024px){

  /* HEADER */

  header{
    width:calc(100% - 20px);
  }

  .menu-toggle{
    display:block;
  }

  .nav-links{

    position:absolute;

    top:90px;
    left:0;
    right:0;

    width:100%;

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

    backdrop-filter:blur(20px);

    border-radius:24px;

    padding:30px;

    display:none;

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

    gap:24px;

    box-shadow:
    0 20px 60px rgba(19,72,130,0.08);
  }

  .nav-links.active{
    display:flex;
  }

  /* HERO */

  .hero{
    padding:160px 24px 100px;
  }

  h1{
    font-size:72px;
  }

  .hero p{
    font-size:17px;
  }

  .video-wrapper{
    min-height:520px;
  }

  /* FEATURES */

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

  .feature-card{
    min-height:auto;
  }

  /* CTA */

  .cta-box{
    padding:70px 40px;
  }

}

/* =========================================
   LARGE MOBILE DEVICES
   iPhone XR
   iPhone 14 Pro Max
   Samsung Galaxy S20 Ultra
   Samsung Galaxy A51/71
   Pixel 7
========================================= */

@media screen and (max-width:768px){

  .hero{
    padding-top:150px;
    min-height:auto;
  }

  .hero-container{
    gap:50px;
  }

  h1{
    font-size:58px;
    line-height:0.95;
  }

  .hero p{
    font-size:16px;
    line-height:1.8;
  }

  .hero-buttons{
    width:100%;
  }

  .btn{
    width:100%;
  }

  .video-wrapper{
    min-height:420px;
  }

  .video-overlay{
    padding:28px;
  }

  .video-text h3{
    font-size:26px;
  }

  .problem-grid h2{
    font-size:48px;
  }

  .section-header h2{
    font-size:52px;
  }

  .cta-box h2{
    font-size:52px;
  }

  .footer-container{
    grid-template-columns:1fr;
    gap:40px;
  }

  .footer{
    padding-top:70px;
  }

}

/* =========================================
   SMALL MOBILE DEVICES
   iPhone SE
   Samsung Galaxy S8+
========================================= */

@media screen and (max-width:480px){

  /* HEADER */

  .navbar{
    padding:16px 18px;
  }

  .logo-box img{
    height:34px;
  }

  .menu-toggle{
    font-size:26px;
  }

  .nav-links{
    top:80px;
    padding:24px;
  }

  /* HERO */

  .hero{
    padding:140px 18px 80px;
  }

  h1{
    font-size:44px;
    line-height:0.98;
    letter-spacing:-0.05em;
  }

  .hero-badge{
    font-size:11px;
    padding:9px 14px;
  }

  .hero p{
    font-size:15px;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .btn{
    width:100%;
    padding:16px 20px;
  }

  /* VIDEO */

  .video-wrapper{
    min-height:340px;
    border-radius:24px;
  }

  .video-overlay{
    padding:20px;
  }

  .video-text h3{
    font-size:22px;
  }

  .video-text p{
    font-size:14px;
  }

  /* TRUST */

  .problem-section{
    padding:20px 18px 100px;
  }

  .problem-grid h2{
    font-size:38px;
  }

  .problem-grid p{
    font-size:16px;
  }

  /* FEATURES */

  .features{
    padding:0 18px 100px;
  }

  .section-header{
    margin-bottom:50px;
  }

  .section-header h2{
    font-size:40px;
  }

  .section-header p{
    font-size:15px;
  }

  .feature-card{
    padding:28px;
    border-radius:24px;
  }

  .feature-icon{
    width:64px;
    height:64px;

    border-radius:18px;

    font-size:28px;
  }

  .feature-card h3{
    font-size:24px;
  }

  /* CTA */

  .cta-section{
    padding:0 18px;
  }

  .cta-box{
    padding:50px 24px;
    border-radius:28px;
  }

  .cta-box h2{
    font-size:40px;
  }

  .cta-box p{
    font-size:15px;
  }

  .cta-button{
    width:100%;
  }

  /* FOOTER */

  .footer{
    padding:60px 18px 24px;
  }

  .footer-logo img{
    height:34px;
  }

  .footer-links h4,
  .footer-contact h4{
    margin-bottom:18px;
  }

  .social-icons{
    gap:10px;
  }

}

/* =========================================
   GALAXY Z FOLD / ASUS ZENBOOK FOLD
========================================= */

@media screen and (min-width:481px) and (max-width:900px){

  .hero-container{
    grid-template-columns:1fr;
  }

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

  .video-wrapper{
    min-height:500px;
  }

}

/* =========================================
   NEST HUB
========================================= */

@media screen and (max-height:700px){

  .hero{
    min-height:auto;
    padding-top:140px;
    padding-bottom:80px;
  }

  .video-wrapper{
    min-height:380px;
  }

}

/* =========================================
   NEST HUB MAX
========================================= */

@media screen and (min-width:1200px) and (max-height:900px){

  .hero{
    min-height:auto;
  }

}