/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
    /* CSS */
    
  }
  
  /* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
  
  @media (min-width: 1025px) and (max-width: 1280px) {
    
    /* CSS */
    
  }
  
  /* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) {
    
    /* CSS */
    
  }
  
  /* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    
    /* CSS */
    
  }
  
  /* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
  
  @media (min-width: 481px) and (max-width: 767px) {
    

    .cat-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 16px;
    }
    
  }
  
  /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
  
  @media (max-width: 480px) {

    .welcome-content {}
    .welcome-tag {
      display: inline-flex; align-items: center; gap: 8px;
      background: #e5e5ff;
      color: #3e4095;
      border-radius: 20px; padding: 6px 16px;
      font-size: .82rem; font-weight: 700;
      letter-spacing: .5px; text-transform: uppercase;
      margin-bottom: 20px;
    }
    .welcome-title {
      font-size: 36px;
      font-weight: 800;
      line-height: 1.24; color: #444;
      margin-bottom: 20px;
    }
    .welcome-title span { color: #3e4095;; }
    .welcome-lead {
      /* font-size: 1.05rem; color: var(--text-mid);
      line-height: 1.8; margin-bottom: 16px; */
    }
    .welcome-extra {
      font-size: .97rem; color: var(--text-mid);
      line-height: 1.8; margin-bottom: 28px;
      display: none;
    }
    .welcome-extra.open { display: block; }
    .welcome-features {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 14px; margin-bottom: 20px;
    }
    .welcome-feat {
        display: block;
        align-items: flex-start;
        gap: 10px;
        background: #e5e5ff;
        border-radius: 12px;
        padding: 14px 16px;
        border: 1.5px solid #cacbff;
    }
    .welcome-feat-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 0;
      margin-bottom: 10px; color: #3e4095;}
    .welcome-feat-text { font-size: .88rem; color: var(--text-mid); line-height: 1.5; }
    .welcome-feat-text strong { color: #444444; display: block; font-size: .92rem; margin-bottom: 2px; }
    .welcome-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
    .read-more-btn {
      background: transparent;
      border: 2px solid #3e4095;
      color: #3e4095;
      padding: 11px 26px; border-radius: 8px;
      cursor: pointer; font-family: 'Source Sans 3', sans-serif;
      font-size: .95rem; font-weight: 600;
      transition: all .2s;
      display: flex; align-items: center; gap: 8px;
    }
    .read-more-btn:hover { background: #3e4095; color: #fff; text-decoration: none !important;}
    .read-more-btn .arrow { transition: transform .3s; display: inline-block; }
    .read-more-btn.open .arrow { transform: rotate(90deg); }
    .welcome-since {
      font-size: .88rem; color: var(--text-light);
      display: flex; align-items: center; gap: 6px;
    }
    

    .cat-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 16px;
    }

    .ypt-btnPrimary {
      background: #ef7b00;
      color: #ffffff;
      padding: 12px 22px;
      border-radius: 50px;
      font-weight: 600;
      text-decoration: none;
  }

    .ypt-btnSecondary {
      margin-left: 14px;
      border: 1.8px solid #ffffff;
      padding: 12px 22px;
      border-radius: 50px;
      color: #ffffff;
      font-weight: 600;
      text-decoration: none;
  }

  .modularform label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    text-align: left;
}
    
  }