/*-----------------------------------*\
  #media_queries.css
\*-----------------------------------*/

/**
 * copyright 2021 @codewithsadee 
 */





/*-----------------------------------*\
  #RESPONSIVE FOR 370PX
\*-----------------------------------*/

@media (min-width: 370px) {

  /**
   * ABOUT
   */

  .about-table tr { flex-direction: row; }

  .about-table th,
  .about-table td { width: 50%; }

}





/*-----------------------------------*\
  #RESPONSIVE FOR 500PX
\*-----------------------------------*/

@media (min-width: 500px) {

  /**
   * VARIABLE 
   */

  :root {
    --fs-1: 48px;
    --fs-2: 30px;
  }

  .section-padding { padding: 80px 20px; }

  /**
   * NAVBAR 
   */

  .nav { padding: 100px 16%; }


  /**
   * HEADER INTRO
   */

  .intro { padding: 80px 15%; }


  /**
   * ABOUT
   */

  .content-card .card-head {
    flex-direction: row;
    gap: 20px;
  }


  /**
   * PORTFOLIO
   */

  .portfolio-carousel-inner { width: 250%; }


  /**
   * SERVICE
   */

  .service-card { display: flex; }

  .service-card .card-head {
    width: 70%;
    min-width: 70%;
  }

  .service-card .card-footer {
    width: 30%;
    min-width: 30%;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    padding: 20px;
    border-top: none;
    border-left: 1px solid hsla(100, 100%, 100%, 0.05);
  }


  /**
   * CUSTOMERS
   */

  #customers .wrapper { grid-template-columns: 1fr 1fr; }


  /**
   * CONTACT
   */

  .address address, .phone a { max-width: 300px; }


  /**
   * FOOTER
   */

  .footer { padding: 50px 20px; }

}





/*-----------------------------------*\
  #RESPONSIVE FOR 768PX
\*-----------------------------------*/

@media (min-width: 768px) {


  /**
   * VARIABLE 
   */

  :root { --fs-4: 30px; }


  /**
   * HEADER INTRO
   */

  .intro { padding: 80px 20%; }

  /* supprime la section dans header en petit et tablette format */
@media (max-width: 1023px) {
  .intro{
    display: none;
  }
}


  /**
   * NEWS & TIPS
   */

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


  /**
   * CONTACT
   */

  .contact-form .wrapper {
    flex-direction: row;
    gap: 30px;
  }

  .contact-form .wrapper > div { width: 50%; }

}





/*-----------------------------------*\
  #RESPONSIVE FOR 1024PX
\*-----------------------------------*/

@media (min-width: 1024px) {
  .menu-open-btn {
    right: 10px;
  }

  .container {
    display:        flex;
    flex-direction: row;
       /* max-width: 1440px; */
  }


  .section-padding { padding: 80px 50px; }

  /**
   * HEADER 
   */

  header {
    width: 40%;
    height: 100vh;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    border-right: 1px solid white;
  }


  /**
   * NAVBAR 
   */

  .nav { padding: 100px 50px; }


  /**
   * HEADER INTRO
   */

  .intro { padding: 80px 30%; }


  /**
   * MAIN 
   */

  main {
    width:  60%;
    height: 100vh;
    overflow-y: auto;
    scroll-behavior: smooth;
  }

  /**
   * SCROLLBAR 
   */

  ::-webkit-scrollbar {
    width: 8px;
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--liver-chestunut);
    border-radius: 4px;
    border: 2px solid var(--eerie-black-dark);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--gainsboro);
  }

  ::-webkit-scrollbar-track {
    background: var(--eerie-black-dark);
    border-radius: 4px;
  }

  /**
   * FOOTER 
   */

  .footer { padding: 50px; }

}