﻿/*========================================================================================
==========================================================================================
======================== WRITE ALL MEDIA QUERIES BELOW ====================================
==========================================================================================
==========================================================================================*/



/*================ Medium devices (tablets, 768px and up) ================*/
@media only screen and (min-width: 768px) {
  .home-banner-slider-with-image .image-desktop {
    display: block;
  }

  .home-banner-slider-with-image .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) {
  
}
