/* ==================== MEDIA QUERIES ==================== */

@media (max-width: 1024px) {
  .about__inner{
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }

  .about__content--right .about__text{
    padding-right: 0px;
  }

  .featured__header{
    gap: 50px;
  }

  .header__logo{
    position: initial;
    transform: none;
  }

  .opportunity{
    background-position-x: left;
  }

  .hero__icon-left{
    left: 10px;
  }

  .hero__icon-arrow{
    right: 10px;
  }

  .hero__filter select{
    padding: 12px 30px;
    text-align: center;
  }

  .hero__search-input-wrap{
    padding-left: 10px;
  }

  .benefits__slide{
    grid-template-columns: 340px 1fr
  }

  .benefits__content{
    padding-bottom: 56px;
  }

  .benefits__pagination{
    bottom: 10px!important;
  }

  .process__inner{
    gap: 20px;
  }

  .why__inner{
    gap: 50px;
  }
}

@media (max-width: 768px) {
  .hero__bottom{
    flex-wrap: wrap;
  }

  .header{
    padding-left: 0px;
    padding-right: 0px;
  }

  .container{
    padding: 0 30px;
  }

  .footer__nav--left, .footer__nav--right{
    width: auto;
  }

  .hero__bottom--right{
    max-width: max-content;
  }

  .featured__header{
    align-items: center;
  }

  .investment__title{
    padding-left: 0px;
  }

  .header__nav {
    display: none;
  }

  .header__burger {
    display: flex;
  }

  .header__logo {
    position: static;
    transform: none;
  }

  .hero .contact__link{
    display: none;
  }

  .property-card__footer{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }

  .featured__grid,.contact__inner{
    gap: 10px;
  }

  .property-card__body{
    padding: 10px;
    margin-top: 0px;
  }

  .property-card__price{
    width: 100%;
  }

  .property-card__bed-count{
    margin-left: inherit;
  }

  .investment__info{
    padding-left: 0px;
  }

  .path-card__text{
    display: none;
  }

  .hero__search{
    flex-wrap: wrap;
  }

  .hero__search .hero__filters{
    width: 100%;
  }

  .hero__search .hero__filter{
    width: 100%;
  }

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

  .intro-property__content{
    flex-wrap: wrap;
  }

  .benefits__inner{
    padding-left: 30px;
    padding-right: 0px;
  }

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


@media (max-width: 576px) {
  .container{
    padding: 0 20px;
  }

  .header__logo,.header__logo--black{
    width: 140px;
  }

  .header__mobile{
    padding: 20px;
  }

  .hero__title{
    font-size: 46px;
  }

  .intro__text{
    font-size: 24px;
  }

  .paths__grid{
    grid-template-columns: repeat(1, 1fr);
  }

  .paths{
    padding: 60px 0px;
  }

  .path-card{
    aspect-ratio: auto;
  }

  .path-card__img{
    height: 145px;
  }

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

  .about__content--right .about__text{
    font-size: 24px;
  }

  .opportunity{
    height: auto;
  }

  .opportunity__title{
    font-size: 38px;
  }

  .featured__header{
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 70px;
  }

  .featured__subtitle{
    margin-left: 0px;
  }

  .featured__grid{
    grid-template-columns: repeat(1, 1fr);
  }

  .investment__info{
    padding: 0px;
    width: 100%;
  }

  .slider__arrow{
    display: none;
  }

  .investment__title{
    font-size: 30px;
  }

  .investment__prop-name{
    font-size: 28px;
  }

  .cta-banner__content{
    padding-left: 20px;
    padding-right: 20px;
    align-items: flex-start;
  }

  .cta-banner__title{
    font-size: 28px;
    text-align: left;
  }

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

  .contact__title{
    font-size: 30px;
  }

  .contact__text{
    font-size: 16px;
  }

  .contact__form{
    margin-top: 60px;
    grid-template-columns: 1fr;
  }

  .contact__submit--btn{
    width: 150px;
    height: 44px;
  }

  .contact__submit{
    justify-content: flex-start;
  }

  .footer__logo{
    display: none;
  }

  .footer__inner{
    flex-wrap: wrap;
  }

  .footer__left{
    width: 100%;
    text-align: center;
  }

  .footer__nav{
    flex-direction: column;
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  .footer__brand-logo{
    margin-left: auto;
    margin-right: auto;
  }

  .footer__bottom{
    justify-content: center;
  }

  .footer__brand-text{
    margin-left: auto;
    margin-right: auto;
  }

  .path-card{
    display: flex;
    flex-wrap: wrap-reverse;
  }

  .path-card__item{
    height: auto;
    width: 100%;
    pointer-events: none;
  }

  .path-card__title{
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .path-card__link-img{
    display: block;
  }

  .hero__filters{
    flex-wrap: wrap;
  }

  .hero__search {
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
    width: fit-content;
    padding: 24px 20px
  }

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

  .benefits__inner{
    padding-left: 0px;
    padding-right: 0px;
  }

  .benefits__slide{
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .benefits__content{
    order: 1;
    padding-left: 20px;
    padding-right: 20px;
    gap: 100px;
  }

  .benefits__title{
    font-size: 38px;
  }

  .benefits__desc{
    font-size: 28px;
  }
  .benefits__pagination{
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero--rent .hero__title{
    font-size: 46px;
    text-align: left;
    margin-top: 200px;
  }

  .hero--rent .hero__title br{
    display: none;
  }

  .hero__search{
    bottom: -60px;
  }

  .featured{
    padding: 100px 0;
  }

  .intro-property__title{
    width: auto;
    font-size: 30px;
  }

  .intro-property__text{
    font-size: 16px;
  }

  .why__text{
    font-size: 16px;
  }

  .why__service-title{
    font-size: 28px;
  }

  .process{
    padding: 70px 0;
  }

  .process__step-num{
    font-size: 16px;
    font-style: normal;
    font-family: 'Satoshi-Italic';
  }

  .process__step-title{
    font-size: 28px;
  }

  .showcase{
    padding: 50px 0;
  }

  .showcase__title{
    font-size: 30px;
  }

  .showcase-card{
   max-width: 300px;
  }

  .intro-investment__inner{
    flex-wrap: wrap;
  }

  .intro-investment__text{
    font-size: 24px;
  }

  .markets-grid__photos{
    flex-wrap: wrap;
    gap: 28px;
  }

  .markets-grid__text{
    flex-wrap: wrap;
    gap: 28px;
  }

  .markets-grid__main-text, .markets-grid__market-text{
    font-size: 16px;
  }
}