@media (min-width: 756px) {
.secondary-image .since-badge {
  position: absolute;
  left: -36px;
  top: 45%;
  background: #EA0029;
  color: white;
  padding: 10px 20px;
  transform: rotate(-90deg);
}
  .counter-section .single-counter {

    margin-bottom: 150px;
    display: block;
    text-align: center;
    padding: 110px 20px 95px;
    border-radius: 10px;
    box-shadow: rgba(36, 37, 38, 0.08) 4px 4px 15px 0px;
    transition: all 0.3s ease-in;
    cursor: pointer;
  }

}

@media (max-width: 356px) {


  .counter-section .single-counter {

    margin-bottom: 150px;
    display: block;
    text-align: center;
    padding: 110px 20px 95px;
    border-radius: 10px;
    box-shadow: rgba(36, 37, 38, 0.08) 4px 4px 15px 0px;
    transition: all 0.3s ease-in;
    cursor: pointer;
  }
}

@media (max-width: 991px) {
 
  .counter-section {
    padding: 150px 0px 120px;
  }

  .mainmenu-area .navbar .mybtn1 {
    margin-left: 15px !important;
    margin-bottom: 15px;
    padding: 5px 30px;
  }

  .product-details-section .product-image img {
    max-width: 320px;
    display: block;
    margin: 0 auto;
  }

  .user-dashboard-area .user-menu {
    margin-bottom: 30px;
  }

  .blog-page .discus-comment-box {
    margin: 40px;
  }


  .service-area.service-page .service-content-wrapper {
    margin-top: 30px;
  }

  .patment-area {
    margin-bottom: 40px;
  }

  body {
    padding-top: 109px;
  }

  .mainmenu-area {
    position: fixed;
    z-index: 9;
    width: 100%;
    top: 0px;
    left: 0px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
  }

  .mainmenu-area .navbar .navbar-brand img {
    max-height: 75px;
    width: 158px;
  }

  .mainmenu-area .navbar #main_menu .navbar-nav {
    padding-bottom: 15px;
    height: 300px;
    overflow: auto;
  }

  .mainmenu-area .navbar #main_menu .navbar-nav .nav-item {
    display: inline-block;
  }

  .mainmenu-area .navbar #main_menu .navbar-nav .nav-link {
    display: inline-block;
  }

  .mainmenu-area .navbar #main_menu .navbar-nav .nav-link {
    padding: 5px 10px;
  }

  .mainmenu-area .navbar #main_menu {
    padding-left: 0px;
    background-color: #fff;
  }

  .login-signup .login-area.signup-area {
    margin-top: 40px;
  }

  .new-login .new-login-box .left-image {
    display: none;
  }

  .new-login .new-login-box .right-content {
    padding: 30px 50px 55px 50px;
  }

  .hero-area .hero-area-slider .intro-carousel .intro-content .slider-content {
    width: 70%;
  }

  .about-section {
    padding: 65px 15px;
  }


  .about-section .right-images,
  .offer-section .offer-image {
    margin-top: 0px;
  }

  .hero-area .hero-area-slider .intro-carousel .intro-content {
    height: 450px;
  }

  .contact-us .left-area .contact-form {
    margin-bottom: 40px;
  }

  .hero-area {
    position: relative;
    height: auto;
    width: 100%;

    /* overflow: hidden; */
  }

  .hero-area-slider {
    height: auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .top-header .left-content {
    text-align: center;
  }

  .mainmenu-area .top-header .right-content {
    text-align: center;
  }

  body {
    padding-top: 112px;
  }

  .hero-area .hero-area-slider .intro-carousel .intro-content .slider-content {
    width: 100%;
  }

  .intro-content .slider-content .layer-1 .title {

    font-family: Sans-serif;
    font-size: 45px;
    font-weight: 600;
    line-height: 46px;
    text-transform: capitalize;
    font-style: italic;
    color: #000038;
  }

  .contact-banner .contact-btn-area {
    text-align: left;
    margin-top: 20px;
  }

  /* about section */
  .about-section .secondary-image {
    width: 50%;
    right: 0;
    bottom: 50px;
    position: relative;

  }

  .about-section .since-badge {
    position: absolute;
    left: -30px;
    top: 35%;
    font-size: 13px;
    background: #EA0029;
    color: white;
    padding: 2px 5px;
    transform: rotate(-90deg);
  }

  .since-badge {
    position: absolute;
    background: #EA0029;
    color: white;

    border-radius: 5px;
    font-weight: 300;
    z-index: 1;
  }

  /* fin about section */
  .blog-section {
    padding: 40px 6px;
    background-color: #f3f8f9;
  }

  .about-section {
    padding: 40px 6px;
    background-color: #f3f8f9;
  }

  .main-title {
    font-size: 24px;
    font-weight: 600;
    color: #0071CE;
    margin-top: 60px;
  }

  #live-monitoring-app {
    padding: 40px 20px;
  }

}

@media (max-width: 575px) {
  .willFlip {
    width: 100%;
  }

  .contact-banner .left-content .number {
    font-size: 24px;
    line-height: 34px;
  }

  .willFlip .front {
    padding: 21px 15px 8px;
  }

  .willFlip .front #cardNumber {
    padding: 0px 0px;
  }

  .hero-area .hero-area-slider .intro-carousel .intro-content {
    height: 380px;
  }

  .hero-area {
    position: relative;
    height: auto;
    width: 100%;

    /* overflow: hidden; */
  }

  .hero-area-slider {
    height: auto;
    width: 100%;
  }

  .hero-area .hero-area-slider .intro-carousel .intro-content .slider-content .layer-1 .title {

    font-family: "Sarabun", Sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 66px;
    text-transform: capitalize;
    margin-top: 20px;
    color: #000038;
  }

  .trusted-header {
    margin-bottom: 20px;
    margin-top: 30px
  }

  .intro-content {
    position: relative;

    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
  }

  .willFlip .front #cardNumber {
    font-size: 20px;
    line-height: 30px;
  }

  .willFlip .front label {
    font-size: 14px;
  }

  .willFlip .front input {
    font-size: 17px;
    line-height: 17px;
  }

  .footer .footer-widget .title {
    font-size: 22px;
  }

  .footer-newsletter-widget .social-links .title {
    font-size: 16px;
  }

  .footer .footer-widget .title {
    font-size: 20px;
  }

  .footer .footer-widget .title {
    font-size: 20px;
    margin-top: 10px;
  }

  .blog .blog-box .details .blog-title {
    font-size: 20px;
    line-height: 30px;
  }

  .hero-area .hero-area-slider .intro-carousel.owl-carousel .owl-controls .owl-nav .owl-prev,
  .hero-area .hero-area-slider .intro-carousel.owl-carousel .owl-controls .owl-nav .owl-next {
    display: none !important;
  }

  .hero-area .hero-area-slider .intro-carousel .intro-content .slider-content .layer-1 .title {
    font-size: 30px;
    line-height: 40px;
  }

  .mybtn1 {
    padding: 5px 20px;
  }

  .section-heading .title {
    font-size: 30px;
    line-height: 40px;
  }

  .main-breadcrumb-area .pagetitle {
    font-size: 23px;
    line-height: 33px;
  }

  .blog .blog-box .blog-images .date {
    height: 70px;
  }

  .blog .blog-box .details .blog-title {
    font-size: 17px;
    line-height: 27px;
  }

  .blog .blog-box .details {
    padding: 20px 20px 20px;
  }

  .contact-us .right-area {
    margin-top: 30px;
  }


}



@media (max-width: 414px) {
  .shop-section .product-filter {
    display: block;
  }

  .shop-section .product-filter .left {
    margin-bottom: 20px;
  }

  .footer .footer-widget .title {
    font-size: 21px;
  }

  .willFlip .front #cardNumber {
    font-size: 16px;
    line-height: 26px;
  }

  .willFlip .front label {
    font-size: 12px;
  }

  .willFlip .front input,
  .willFlip .front .content-date-input .slash-text {
    font-size: 15px;
    line-height: 17px;
  }

  /* Comment Area Css Start */
  .comment-area .all-comment li .single-comment {
    display: flow-root;
  }

  .comment-area .all-comment li .single-comment .left-area {
    text-align: left;
    padding-right: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
  }

  .comment-area .all-comment li .single-comment .left-area::before {
    display: none;
  }

  .comment-area .all-comment li .replay-area {
    position: relative;
    padding-left: 00px;
    margin-bottom: 20px;
  }

  .comment-area .all-comment li .replay-review {
    margin-left: 30px;
  }

  .login-signup .login-area .header-area .title {
    font-size: 24px;
    margin-bottom: 0px;
  }

  .login-signup .login-area .header-area .text {
    font-size: 14px;
  }

  .login-signup .login-area .to-login-page {
    font-size: 14px;
  }

  .hero-area {
    position: relative;

    width: 100%;

    /* overflow: hidden; */
  }

  .hero-area-slider {

    width: 100%;
  }

}

@media (max-width: 360px) {
  .mainmenu-area .top-header .left-content ul li {
    margin-right: 5px;
  }
}