/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

    /* CSS */

    .main-banner .banner-subtitle{
      font-size: 20px;
    }
}

  /*
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

  @media (min-width: 1025px) and (max-width: 1280px) {
    /* CSS */
    .container{
        max-width: 1360px !important;
    }

    .main-banner .banner-subtitle{
      font-size: 20px;
    }


  }

  /*
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

  @media (min-width: 768px) and (max-width: 1024px) {

    /* CSS */

  }

  /*
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /* CSS */

  }

  /*
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

  @media (min-width: 481px) and (max-width: 767px) {

    /* CSS */

  }

  /*
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

  @media (min-width: 320px) and (max-width: 480px) {

    h2{
      font-size: 20px;
    }
    p.subtitle{
      font-size: 16px;
    }
    /* CSS */
    .main-banner .wrapper{
      margin:20px;
    }
    .main-banner .banner-title{
      font-size: 24px;
    }

    .main-banner .banner-subtitle{
      font-size: 18px;
    }

    .heading-section .title{
      font-size: 18px;
    }

    .heading-section p.subtitle {
      font-size: 16px;
    }

    .card .card-body .card-title{
      font-size: 14px;
    }
    .card .card-body p.highlight{
      font-size: 12px;
    }

    .hide-on-mobile{
      display: none;
    }

    .benefit-asessment-section  .banner-title{
      font-size: 24px;
    }

    .card .price-info .discount, .price-info .real-price{
      font-size: 16px;
    }

    .cta-banner .cta-content h3{
      font-size: 20px;
      text-align: center;
    }

    .benefit .benefit-title h5{
      font-size: 18px;
    }

    .benefit .benefit-card {
      margin-bottom: 40px;
    }

    .benefit .benefit-card .benefit-desc{
      font-size: 16px;
    }

    .benefit-card .card-body{
      padding-top:1rem;
      padding-bottom:1rem;
    }

    .benefit-card{
      min-height: 200px;
    }

    .benefit-card .card-body {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    .benefit .card .box-icon{
      display: flex;
      justify-content: center;
      width: 75px;
      height: 75px;
      position: absolute;
      top: -35px;
      background: #FFF;
      border-radius: 30px;
      left: 40px;
      box-shadow: 0 0 3px #c4c4c4;
    }

    section .corporate-banner-description{
      font-size: 18px;
      margin-top: 20px;
    }

    section.corporate-banner {
      text-align: center;
    }

    section.corporate-banner .banner-title {
      font-size: 24px;
    }

    section.security-section .card-title h4{
      font-size: 18px;
    }

    section.security-section .card-description{
      font-size: 16px;
    }

    /* btn component */
    .btn-lg{
      font-size: 16px;
      padding: 0.3rem 0.5rem;
    }

    /* profile page */
    .profile-page{
      padding: 15px;
    }

    .detail-event-page{
      flex-direction: column;
    }

    .details {
      /* position: fixed; */
      max-width: 420px;
      z-index: 99999;
      background-color: #fff;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 25px;
      border-radius: 24px;
    }

  }