﻿/*========================================================================================
==========================================================================================
======================== WRITE ALL MEDIA QUERIES BELOW ====================================
==========================================================================================
==========================================================================================*/



/*================ Medium devices (tablets, 768px and up) ================*/
@media only screen and (min-width: 768px) {

  .home-banner-slider__slide .image-desktop {
    display: block;
  }

  .home-banner-slider__slide .image-mobile {
    display: none;
  }
  /*************** HOME BANNER SLIDER ****************/
  .home-banner-slider__slide__container {
    justify-content: start;
  }
  .home-banner-slider .home-banner-slider__slide {
    background-image: url('@(banner.BackgroundUrl)');
  }

  .home-banner-slider .home-banner-slider__slide__content__left {
    width: 50%;
    margin-inline-start: 45px;
    padding: 0;
  }

  .home-banner-slider .slider-details .slider-details__heading {
    font-size: 24px;
    line-height: 28px;
    text-align: start;
  }

  .home-banner-slider .slider-details .slider-details__button__container {
    justify-content: start;
  }



  .home-banner-slider .slider-details .slider-details__info {
    text-align: start;
    line-height: 22px;
  }

  .home-banner-slider .image-box .round-area {
    width: 260px;
    height: 260px;
    animation: round-shape-anim-tab 1s linear infinite;
  }

  .home-banner-slider .home-banner-slider__slide__content__right {
    width: 50%;
    display: block;
  }
}

/*================ Large devices (desktops, 992px and up) ================*/
@media only screen and (min-width: 992px) {
  /*************** HOME BANNER SLIDER ****************/
  .home-banner-slider {
    height: 370px;
  }

    .home-banner-slider .slider-details .slider-details__heading {
      font-size: 42px;
      line-height: 45px;
    }

    .home-banner-slider .image-box .round-area {
      width: 360px;
      height: 360px;
    }


}

/*================ X-Large devices (large desktops, 1200px and up) ================*/
@media only screen and (min-width: 1200px) {
  /*************** HOME BANNER SLIDER ****************/
  .home-banner-slider {
    height: 462px;
  }

    .home-banner-slider .splide__pagination,
    .home-banner-slider-with-image .splide__pagination {
      bottom: 24px;
    }

    .home-banner-slider .slider-details .slider-details__heading {
      font-size: 58px;
      line-height: 68px;
    }

    .home-banner-slider .slider-details .slider-details__info {
      max-width: 90%;
      margin: 30px 0;
      font-size: 18px;
      line-height: 30px;
      text-align: start;
    }

    .home-banner-slider .image-box .round-area {
      width: 436px;
      height: 436px;
    }
}

/*================ XX-Large devices (larger desktops, 1400px and up) ================*/
@media only screen and (min-width: 1400px) {
  
}
