@use "../../assets/scss/customVariables.scss" as *;

.container {
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;

  .welcomeView {
    width: 100%;
    height: calc(100vh - 81px);
    background-color: #EBF2FC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

    @media screen and (max-width: 770px) {
      justify-content: flex-start;
      padding-top: 20px;
    }

    .welcomeViewBg {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    
  }

  .bannerView {
    width: 100%;
    height: 428px;
    margin: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;  
    box-sizing: border-box;
    .banner {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: cover;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;


      .bannerHome{
        width: auto;
        height: 100%;

        @media screen and (max-width: 933px) {
          width: 100%;
          height: auto;
        }
      }
    }
@media screen and (max-width: 1291px) {
        padding: 0 20px;
      }
  }

  .properties {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      max-width: $max-width-layout;


      @media screen and (max-width: 900px) {
        flex-direction: column;
      }

      .title {
        font-size: 50px;
        font-weight: 700;
        line-height: 65px;
        color: #000000;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 40px;

        @media screen and (max-width: 770px) {
          font-size: 35px;
        }
        @media screen and (max-width: 571px) {
          font-size: 25px;
        }
      }

      .error {
        width: 100%;
        height: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .propertiesRowWrap {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        position: relative;

        padding: 0 20px;

        .loading {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          z-index: 100;
          border-radius: 20px;
          backdrop-filter: blur(5px);
        }
      }
    }


  .featuredContainer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto;
    max-width: $max-width-layout;
    padding: 0 20px;
    box-sizing: border-box;

    @media screen and (max-width: 660px) {
          margin-bottom: 20px !important;
        }

    .title {
      font-size: 50px;
      font-weight: 700;
      color: #000000;
      text-align: left;
      margin-bottom: 40px;

      @media screen and (max-width: 571px) {
          font-size: 25px;
          margin-bottom: 15px;
        }
    }

    @media screen and (max-width: 900px) {
      flex-direction: column;
    }

    .tabsContainer {
      width: 100%;
      overflow: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 30px;
      scrollbar-width: nonw;

      &::-webkit-scrollbar {
        display: none;
      }

      .tabs {
      box-sizing: border-box;
      height: 52px;
      border-radius: 100px;
      border: 1px solid #DDDDDD;
      display: flex;
      flex-direction: row;   
      align-items: center;
      justify-content: center;
      min-width: 1276.88px;
      

      .tab {
        flex: 1;
        height: 100%;
        border-radius: 100px;
        display: flex;
        flex-direction: column;   
        align-items: center;
        justify-content: center;
        cursor: pointer;

        & >p {
          font-size: 16px;
          font-weight: 600;
        }
      }

      .tab_selected {
        background-color: $primary-color;

        &> p {
          color: #fff;
          font-weight: 800;
        }
      }
    }
    }

    .subitems {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      padding-bottom: 100px;
      border-bottom: 1px solid #DDDDDD;

      @media screen and (max-width: 660px) {
          padding-bottom: 20px;
        }

      .cols {
        width: 47.8%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap: 20px;
        justify-content: space-between;
        &:first-child {
        @media screen and (max-width: 660px) {
          border-bottom: 1.5px solid #DDDD;
          margin-bottom: 20px;
          padding-bottom: 20px;
        }
      }

        @media screen and (max-width: 660px) {
          width: 100%;
        }

        @media screen and (max-width: 448px) {
          flex-wrap: wrap;
        }

        .title {
          width: 100%;
          font-size: 25.66px;
          line-height: 36.11px;
          font-weight: 700;
          color: #1F1F25;
          margin-bottom: 0;
        }

        .stateItem {
          width: 47.8%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;

          @media screen and (max-width: 448px) {
            width: 100%;
          }

          .subtitle {
            width: 100%;
            font-size: 19.24px;
            line-height: 36.11px;
            font-weight: 600;
            color: #1F1F25;

          }
          .subItem {
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
          }
        }
      }
    }
  }

  .otherLinks {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto;
    max-width: $max-width-layout;
    padding: 0 20px;

    row-gap: 30px;



    .stateItem {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      min-width: 200px;

      .subtitle {
        width: 100%;
        font-size: 19.24px;
        line-height: 36.11px;
        font-weight: 600;
        color: #1F1F25;

      }
      .subItem {
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
      }
    }
  }
}

.paginationContainer {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }