@media (min-width: 991px) and (max-width: 1200px) {
    #header .header-nav-main nav>ul>li {
      height: 100%;
      align-self: stretch;
      margin-left: 2px;
      height: 0px;
    }
  }

  .quote-box {
    background-color: #274893;
    color: white;
    display: flex;
    align-items: center;
    padding: 8px 11px;
    border-radius: 5px;
    margin-top: 5px;
    transition: 1s;
  }

  .phone-icon {
    width: 36px;
    height: 54px;
    margin-right: 8px;
  }

  .quote-text p {
    margin: 0;
    color: #ffffff;
    font-weight: bold;
  }

  .call-text {
    white-space: nowrap;
    font-size: 19px;
    font-weight: bold;
  }

  .phone-number {
    color: #ffffff;
  }

  .quote-box:hover {
    background-color: #48b84e !important;
    transition: 1s;
    color: #ffffff
  }

  .phone-icon {
    transition: transform 0.3s ease-in-out;
  }

  .quote-box:hover .phone-icon {
    transform: rotate(20deg) scale(1.1);
  }

  @keyframes bounce {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-5px);
    }
  }

  .quote-box:hover .phone-icon {
    animation: bounce 0.5s ease-in-out;
  }



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

  @media (min-width: 1281px) {

        .section-banner {
        padding-top: 0;
        margin-top: 9%;  /* Only push it down as needed */
    }

  }

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

  @media (min-width: 1025px) and (max-width: 1280px) {

    .section-banner {
      padding-top: 0;
      margin-top: 132px;  /* Only push it down as needed */
  }

  }



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

    .section-banner {
        padding-top: 0;
        margin-top: 22.1%;
        /* Only push it down as needed */
      }
    .phone-icon {
      width: 26px;
      height: 34px;
      margin-right: 8px;
    }

    .quote-text p {
      line-height: 15px;
    }

    .call-text {
      font-size: 13px;
    }
  }

  @media only screen and (max-width: 1365px) {
    .section-banner {
        padding-top: 0;
        margin-top: 14.1%;
        /* Only push it down as needed */
      }


  }
  @media (min-width: 820px) and (max-width: 1180px) {
    .section-banner {
      padding-top: 0;
      margin-top: 24.1%;
      /* Only push it down as needed */
    }
  }
  /*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .section-banner {
        padding-top: 0;
        margin-top: 19.5%;
        /* Only push it down as needed */
      }
  }

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

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

    .section-banner {
        padding-top: 0;
        margin-top: 30.5%
        /* Only push it down as needed */
      }
    .phone-icon {
      width: 26px;
      height: 34px;
      margin-right: 8px;
    }

    .quote-text p {
      line-height: 15px;
    }

    .call-text {
      font-size: 13px;
    }
  }

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

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

    .section-banner {
        padding-top: 0;
        margin-top: 39%;
        /* Only push it down as needed */
      }
    .phone-icon {
      width: 26px;
      height: 34px;
      margin-right: 8px;
    }

    .quote-text p {
      line-height: 15px;
    }

    .call-text {
      font-size: 13px;
    }

  }
/* Hide the li by default */
.mobile-nav-item {
  display: none;
}

/* Hide the li on iPad Pro (11-inch and 12.9-inch) */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
  .mobile-nav-item {
    display: none;
  }
}

@media only screen and (min-width: 834px) and (max-width: 1194px) {
  .mobile-nav-item {
    display: none;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
  .mobile-nav-item {
    display: none;
  }

  .ipad-pro-hide {
    display: none;
  }
}

/* Show the li on small devices (e.g., screens less than 768px wide) */
@media (max-width: 767px) {
  .mobile-nav-item {
    display: block;
  }
}

/* Hide the li on regular iPads (portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .mobile-nav-item {
    display: none;
  }
    .ipad-pro-hide {
      display: none;
    }
}


/* 15 inch laptop (1366px – 1440px) */
@media screen and (min-width: 1366px) and (max-width: 1440px) {
  .section-banner {
    margin-top: 10%;
  }
}

/* 16 inch laptop (1441px – 1800px) */
@media screen and (min-width: 1441px) and (max-width: 1800px) {
  .section-banner {
    margin-top: 10%;
  }
}