/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

.page-template-template-resources {
   #main {
    padding: 0 !important;
    padding-bottom: 80px !important;
    .resources-container {
        padding: 0;
        margin: auto;
        max-width: 1170px;
        @media screen and (max-width: 768px) {
          padding: 0 15px;
        }
    } 
    .fusion-row {
        padding: 0;
        max-width: 100%;
    }

    #resources-hero {
      min-height: 460px;
      background-image: url('./assets/img/bg.png');
      background-position: right;
      background-size: contain;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;

      .resources-title {
        max-width: 50%;
        @media screen and (max-width: 768px) {
          max-width: 100%;
        }
      }
    }
   }  

   .filters{
    margin-bottom: 40px;
    .mobile-filters {
        display: none;
        margin: 15px 0;
    }

    .mobile-filters select {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        background-color: #fff;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat, repeat;
        background-position: right 0.7em top 50%, 0 0;
        background-size: 0.65em auto, 100%;
    }

    .desktop-filters {
        display: block;
    }

    .filters-inputs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0;
      list-style: none;
      margin: 15px 0;
    }

    .filters-inputs li {
      margin: 0;
    }

    .filters-inputs a {
      display: block;
      padding: 8px 16px;
      background-color: #f5f5f5;
      border-radius: 4px;
      text-decoration: none;
      color: #333;
      transition: all 0.3s ease;
    }

    .filters-inputs li.active a,
    .filters-inputs a:hover {
      background-color: #0073aa;
      color: #fff;
    }

    .filters-inputs ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0;
    }

    .filters-inputs ul li {
      list-style: none;
    }

    .filters-inputs ul li a {
      text-decoration: none;
      color: #535B68;
      text-align: center;
      font-family: Lato;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal; 
      padding: 10px 25px;
      display: block; 
      border: 1px solid #E5E7ED;
      background: #E5E7ED;
      }
      .filters-inputs ul li.active a {
        background: #598BFF;
        color: #fff;
      } 
      .filters-inputs ul li a:hover {
        background: #598BFF;
        color: #fff;
      }
   }
   
   @media screen and (max-width: 768px) {
    .mobile-filters {
        display: block !important;
    }
    
    .desktop-filters {
        display: none !important;
    }
   }

   .resources-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px; 
    @media screen and (max-width: 768px) {
      grid-template-columns: repeat(1, 1fr);
    }
    .card-item {  
      .content {
        padding: 15px 15px 0 15px;
      }
      .resource-type {
        color: #000;
        font-family: Lato;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
      .post-title {
        color: #598BFF;
        font-family: Lato;
        font-size: 29px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }
   }
}