/* ======================================================
   YONGNENG VALVES - RESPONSIVE CSS
   FILE: /assets/css/responsive.css
====================================================== */

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

  .wrapper{
    max-width:1200px;
  }

}

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

  .wrapper{
    grid-template-columns:2fr 1fr;
    gap:25px;
    padding:30px 20px;
  }

  header h1{
    font-size:48px;
  }

  .hero-content h2{
    font-size:42px;
  }

  .section-title{
    font-size:32px;
  }

}

/* ===============================
   992px - TABLET
================================ */
@media screen and (max-width:992px){

  /* WRAPPER */
  .wrapper{
    grid-template-columns:1fr;
    gap:25px;
  }

  /* MAIN */
  .main-content{
    width:100%;
  }

  /* SIDEBAR */
  .sidebar{
    width:100%;
  }

  /* HEADER */
  header{
    padding:70px 20px;
  }

  header h1{
    font-size:42px;
  }

  header p{
    font-size:18px;
  }

  /* HERO */
  .hero-content{
    padding:35px;
  }

  .hero-content h2{
    font-size:38px;
  }

  .hero-content p{
    font-size:18px;
  }

  /* GRID */
  .featured-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* NAV */
  nav{
    padding:15px;
  }

  nav a{
    margin:0 10px;
    font-size:14px;
  }

}

/* ===============================
   768px - MOBILE TABLET
================================ */
@media screen and (max-width:768px){

  /* HEADER */
  header{
    padding:60px 20px;
  }

  header h1{
    font-size:36px;
    line-height:1.4;
  }

  header p{
    font-size:17px;
    line-height:1.8;
  }

  /* NAVIGATION */
  nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    padding:15px 10px;
  }

  nav a{
    margin:0;
    padding:8px 12px;
    background:rgba(255,255,255,.08);
    border-radius:8px;
    font-size:14px;
  }

  /* WRAPPER */
  .wrapper{
    padding:25px 15px;
  }

  /* HERO */
  .hero-content{
    padding:28px;
    border-radius:16px;
  }

  .hero-content h2{
    font-size:32px;
    line-height:1.4;
  }

  .hero-content p{
    font-size:16px;
  }

  .label-tech{
    font-size:12px;
    padding:7px 14px;
  }

  .hero-btn{
    width:100%;
    text-align:center;
    padding:15px;
  }

  /* SECTION TITLE */
  .section-title{
    font-size:28px;
  }

  /* GRID */
  .featured-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  /* CARD */
  .article-card img{
    height:220px;
  }

  .card-content{
    padding:22px;
  }

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

  .card-content p{
    font-size:15px;
  }

  /* SIDEBAR */
  .widget{
    padding:24px;
    border-radius:16px;
  }

  .widget h3{
    font-size:22px;
  }

  /* FOOTER */
  footer{
    padding:35px 20px;
  }

}

/* ===============================
   576px - MOBILE
================================ */
@media screen and (max-width:576px){

  /* HEADER */
  header{
    padding:50px 15px;
  }

  header h1{
    font-size:30px;
  }

  header p{
    font-size:15px;
  }

  /* HERO */
  .hero-content{
    padding:24px;
  }

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

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

  /* BUTTON */
  .hero-btn{
    font-size:15px;
  }

  /* SECTION TITLE */
  .section-title{
    font-size:24px;
  }

  /* CARD */
  .article-card img{
    height:200px;
  }

  .card-content{
    padding:20px;
  }

  .card-content h3{
    font-size:22px;
    line-height:1.5;
  }

  /* WIDGET */
  .widget{
    padding:20px;
  }

  .widget h3{
    font-size:20px;
  }

  .widget input{
    padding:13px;
  }

  .widget button{
    padding:13px;
  }

  /* NAV */
  nav{
    gap:8px;
  }

  nav a{
    font-size:13px;
    padding:7px 10px;
  }

}

/* ===============================
   400px - SMALL DEVICE
================================ */
@media screen and (max-width:400px){

  header h1{
    font-size:26px;
  }

  .hero-content h2{
    font-size:24px;
  }

  .card-content h3{
    font-size:20px;
  }

  .section-title{
    font-size:22px;
  }

  .widget h3{
    font-size:18px;
  }

}

/* ===============================
   LANDSCAPE FIX
================================ */
@media screen and (max-height:500px) and (orientation:landscape){

  header{
    padding:35px 20px;
  }

  .hero-content{
    padding:24px;
  }

}

/* ===============================
   TOUCH DEVICE
================================ */
@media(hover:none){

  .article-card:hover{
    transform:none;
  }

  .widget:hover{
    transform:none;
  }

  .hero-btn:hover{
    transform:none;
  }

}