/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for larger than 600px screen
 */

 @media (min-width: 600px) {

    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-2: 1.875rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container {
      max-width: 550px;
      margin-inline: auto;
    }
  
    .has-scrollbar {
      gap: 25px;
      margin-inline: -25px;
      padding-inline: 25px;
      scroll-padding-left: 25px;
    }
  
    .has-scrollbar > li { min-width: calc(50% - 12.5px); }
  
  
  
    /**
     * SERVICE
     */
  
    .service-list > li { width: calc(50% - 15px); }
  
  
  
    /**
     * PROPERTY
     */
  
    .property .container {
      max-width: unset;
      padding-inline: 25px;
    }
  
  
  
   
  
  
    /**
     * FOOTER
     */
  
    .footer-link-box {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 768px screen
   */
  
  @media (min-width: 768px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-1: 2.5rem;
      --fs-5: 0.938rem;
      --fs-6: 0.875rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 720px; }
  
    .btn {
      --fs-5: 1rem;
      padding: 12px 28px;
    }
  
  
  
    /**
     * HEADER
     */
  
    .header-top { padding-block: 5px; }
  
    .header-top .wrapper { margin-left: auto; }
  
    .header-top-social-list { gap: 12px; }
  
    .header-top-social-link { font-size: 1rem; }
  
    .header-top-btn { padding: 10px 20px; }
  
    .header-bottom-actions {
      all: unset;
      display: flex;
      align-items: center;
      gap: 10px;
    }
  
    .header-bottom .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .header-bottom-actions-btn ion-icon { margin-bottom: 0; }
  
    .header-bottom-actions-btn span { display: none; }
  
    .header-bottom-actions-btn {
      background: var(--white);
      width: 50px;
      height: 50px;
      box-shadow: var(--shadow-2);
    }
  
  
  
    /**
     * HERO
     */
  
    .hero-content { max-width: 400px; }
  
  
  
    /**
     * ABOUT
     */
  
    .about .section-title { max-width: 30ch; }
  
    .about-text { max-width: 55ch }
  
    .about-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  
  
  
    /**
     * FEATURES
     */
  
    .features-list > li { width: calc(33.33% - 13.33px); }
  
    .features-card { gap: 20px; }
  
    .features-card .card-icon {
      width: 80px;
      height: 80px;
      font-size: 32px;
    }
  
    .features-card .card-title { --fs-6: 1.125rem; }
  
  
  
    /**
     * BLOG
     */
  
    .blog-card { --fs-7: 0.875rem; }
  
    .blog-title { font-size: 1.25rem; }
  
    .blog .card-meta-list { gap: 30px; }
  
  
  
   
  
  
  
    /**
     * FOOTER
     */
  
    .footer { margin-bottom: 0; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 992px screen
   */
  
  @media (min-width: 992px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-1: 3.125rem;
      --fs-4: 1.375rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 970px; }
  
    .btn { padding: 15px 40px; }
  
  
  
    /**
     * HEADER
     */
  
    .header-top-list,
    .header-top .wrapper { gap: 30px; }
  
  
  
    /**
     * HERO
     */
  
    .hero-content {
      max-width: unset;
      margin-bottom: 0;
    }
  
    .hero .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  
  
  
    /**
     * ABOUT
     */
  
    .about .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 60px;
    }
  
    .about-banner { margin-bottom: 0; }
  
    .about-banner > img { width: 100%; }
  
  
  
    /**
     * SERVICE
     */
  
    .service-list > li { width: calc(33.33% - 20px); }
  
  
  
    /**
     * PROPERTY
     */
  
    .property-card .card-content { padding-inline: 30px; }
  
    .card-footer { padding: 20px 30px 30px; }
  
  
  
    /**
     * FEATURES
     */
  
    .features-list { column-gap: 30px; }
  
    .features-list > li { width: calc(25% - 30px); }
  
  
  
    /**
     * BLOG
     */
  
    .blog-title { font-size: 1.375rem; }
  
  
  
    
  
  
  
    /**
     * FOOTER
     */
  
    .footer-top .container {
      display: flex;
      justify-content: space-between;
    }
  
    .footer-brand {
      max-width: 300px;
      margin-bottom: 0;
    }
  
    .footer-link-box { flex-basis: 550px; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 1200px screen
   */
  
  @media (min-width: 1200px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-2: 2.75rem;
      --fs-4: 1.5rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 1200px; }
  
    .has-scrollbar > li { min-width: calc(33.33% - 16.66px); }
  
  
  
    /**
     * HEADER
     */
  
    .header-bottom { padding-block: 30px; }
  
    .header-bottom-actions-btn:last-child,
    .navbar-top,
    .overlay { display: none; }
  
    .navbar,
    .navbar.active { all: unset; }
  
    .navbar-list {
      display: flex;
      align-items: center;
      gap: 30px;
    }
  
    .navbar-link {
      color: var(--dark-jungle-green);
      --fs-5: 1.125rem;
      text-transform: capitalize;
    }
  
    .header { padding-bottom: 114px; }
  
    .header-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  
    .header.active .header-bottom {
      position: fixed;
      bottom: auto;
      top: -94px;
      padding-block: 20px;
      box-shadow: 0 10px 50px hsla(237, 71%, 52%, 0.2);
      animation: slideDown 0.25s ease-out forwards;
    }
  
    @keyframes slideDown {
      0% { transform: translateY(0); }
      100% { transform: translateY(100%); }
    }
  
  
  
    /**
     * HERO
     */
  
    .hero-text {
      padding-left: 30px;
      max-width: 450px;
      margin-bottom: 40px;
    }
  
  
  
    /**
     * FEATURES
     */
  
    .features-card .card-icon {
      width: 100px;
      height: 100px;
      font-size: 45px;
    }
  
    .features-card .card-title { --fs-6: 1.375rem; }
  
  
  
    
  
  
  
    /**
     * FOOTER
     */
  
    .footer { --fs-5: 1rem; }
  
    .footer-link-box { flex-basis: 700px; }
  
  }