/* start responsive screen phone*/
@media (max-width: 575.98px) {
  section.hero-section-software,
  section.hero-section-website,
  section.hero-section-block,
  section.hero-section-mobile-app,
  section.hero-section-home-page,
  section.BannerAbout {
    min-height: 178px !important;
  }
  #swiper-prev-section-website,
  #swiper-next-section-website,
  #swiper-prev-section-software,
  #swiper-next-section-software,
  #swiper-next-section-mobile,
  #swiper-prev-section-mobile,
  #swiper-next-section-desgin,
  #swiper-prev-section-desgin {
    display: none;
  }
  .overlay-cover-about {
    background-color: rgba(76, 54, 164, 0.5);
    height: 178px;
  }
  .overlay-cover-ux-ui {
    background-color: rgba(185 70 70 / 50%);
    height: 178px;
  }
  .overlay-cover-mobile-app {
    background-color: rgba(125, 220, 247, 0.5);
    height: 178px;
  }
  .overlay-cover-website {
    background-color: rgba(93, 99, 196, 0.5);
    height: 178px;
  }
  .BannerAboutDescription {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
  }

  .hero-section-software {
    background-color: rgba(127, 199, 218, 0.5);
    height: 178px;
  }
  .hero-section-website {
    background-color: rgba(93, 99, 196, 0.5);
    height: 178px;
  }
  section.hero-section-block .hero-title,
  section.hero-section-mobile-app .hero-title,
  section.hero-section-software .hero-title,
  section.hero-section-website .hero-title,
  section.BannerAbout .BannerTitle {
    font-size: 28px;
  }
  section.hero-section-home-page .hero-title {
    font-size: 20px;
  }
  section.hero-section-home-page .hero-sub_title {
    font-size: 28px;
    margin-top: -40px;
  }
  .section-sub_contact {
    background: linear-gradient(
        rgba(140, 155, 155, 0.4) 0%,
        rgba(140, 155, 155, 0.4) 100%
      ),
      url(https://images.unsplash.com/photo-1573497620053-ea5300f94f21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 190px;
    width: 93%;
    position: relative;
    margin-left: 15px;
    margin-top: -1rem;
  }
  .button-sub-contact {
    text-align: start;
    margin-top: -40px;
    margin-bottom: 67px;
    margin-left: 15px;
  }
  .text-contact {
    padding-top: 0px;
    background-color: var(--white);
  }
  .hero-title {
    font-size: 28px;
  }
  .hr_desgin {
    position: absolute;
    right: 42%;
    border: 1px solid;
    background-color: var(--white);
    width: 74px;
    bottom: 70px;
  }
  .swiper-pagination {
    display: none;
  }
  .section-content-all-serveice {
    margin-top: -70px;
  }
  /* .section-more-services {
    margin-top: -60px;
  } */
  .slider_container {
    margin-top: -60px;
  }
  .contact-section-block {
    padding-top: 1px;
    padding-bottom: 1px;
  }
  .bg-light {
    background: none;
  }

  .contact-desc {
    margin-bottom: 20px;
  }
  .FooterContent {
    padding-top: 0.7rem;
  }
  .margin-contact {
    margin-left: -14px;
  }
  .footer-quick-link {
    font-family: "Poppins", sans-serif​ !important;
  }
  div.social-link {
    padding-left: 0;
    padding-right: 0;
  }
  .content-sub-contact {
    margin-top: 25px;
    margin-left: 15px;
  }
  p.title-sub-contact {
    text-align: start;
    font-size: 20px;
    margin-top: 25px;
  }
  p.short-sub-contact {
    text-align: start;
    font-size: 28px;
  }
  p.desc-sub-contact {
    text-align: start;
    color: var(--gray);
    font-size: 10px;
    margin: 0;
    padding: 0;
    margin-bottom: 25px;
  }
  .mb-h2 {
    margin-bottom: 7rem;
    text-align: center;
    font-size: 16px;
  }
  button.btn-view-detail {
    font-size: 14px;
  }
  a.btn-danger-contact {
    width: 127px;
    font-size: 12px;
  }
  .screen-h3 {
    margin-right: 247px;
  }
  p.BannerDescription {
    font-size: 10px;
    width: 20rem;
    margin: 0 auto;
    margin-top: 0;
    font-weight: 300;
  }
  p.OurServiceDescriptionIcon {
    font-size: 9px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    color: var(--gray);
  }
  p.OurServiceDescription {
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    color: var(--gray);
  }
  .SectionOurService {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  p.TitleWhyChooseService {
    font-size: 16px;
    margin-bottom: 0px;
  }
  p.DescriptionWhyChooseService {
    font-weight: 400;
    font-size: 12px;
    color: var(--gray);
  }
  /* style icon service */
  .icon-user {
    width: 40px;
    height: 21px;
  }
  .icon-lock {
    width: 24px;
    height: 29px;
  }
  .icon-layer {
    width: 24px;
    height: 29px;
  }
  .icon-route {
    width: 29px;
    height: 27px;
  }
  .text-danger {
    margin-right: 0px;
    margin-bottom: 0;
    margin-top: -23px;
    font-size: 28px;
  }
  .title-contact {
    /* margin-right: 90px; */
    font-size: 20px;
  }
  .content {
    margin-top: 25px;
  }
  .image-contact {
    padding: 28px;
    background: var(--white);
  }

  /*-------------------------------------
        9.  Responsive Footer 
  --------------------------------------*/
  .bg-footer {
    background-color: var(--dark);
    height: 580px;
  }
  .demo-container {
    padding: 10px 25px;
  }
  .demo-container-below {
    padding: 0 25px;
    margin-top: 20px;
  }
  .social-link {
    margin-top: 15px;
  }
  .social-link a {
    width: 34px;
    height: 34px;
    text-align: center;
    text-decoration: none;
    margin: 0 10px;
    color: var(--dark);
    background-color: var(--white);
    box-sizing: 0 0 20px 10px rgba(242, 235, 235, 0.966);
    border-radius: 50%;
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .social-link a .fab {
    font-size: 20px;
    line-height: 30px;
  }
  p.social-link {
    margin-left: -11px;
  }
  .footer-text-center {
    font-size: 12px;
  }
  .footer-quick-link {
    font-size: 12px;
  }
  .footer-contacts {
    margin-top: 20px;
  }
  p.home-page-why-chooes {
    margin-top: 1px;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
  }
  p.home-page-prointix-service {
    font-size: 28px;
  }

  div.box-icon {
    width: 66px;
    height: 66px;
    border-radius: 125px;
    background: var(--red);
    margin-left: 46px;
  }
  .button-contact {
    margin-bottom: 60px;
  }
  .offcanvas {
    width: 250px;
  }
  .navbar-nav .dropdown-menu {
    padding: 6px;
    height: 9rem;
    position: static;
    display: block;
    border: none;
  }
  div.stand-line {
    width: 1.488px;
    height: 20.117px;
    background: var(--text-color);
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
  }
  /* i.icon-search {
    margin-left: 120px;
    font-size: 20px;
    color: var(--dark-blue);
  } */
  .text-custom-contact-h2 {
    margin-top: 28px;
  }
  .block-icon {
    display: none;
  }
  button.demo-btn {
    border: 1px solid var(--white);
    color: var(--white);
    margin-left: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    transition: border-color 0.05s ease;
    display: none;
  }
  div.demo-content {
    background: var(--gray);
    height: 13rem;
    margin-top: -20rem;
    border-radius: 14px;
  }
  div.demo-body {
    margin: 0px;
  }
  div.demo-header {
    font-size: 10px;
    color: var(--white);
    font-weight: 10px;
    margin-right: 25px;
    margin-top: 30px;
  }
  div.search {
    height: 56px;
    margin-bottom: auto;
    margin-top: -32px;
    background-color: var(--white);
    padding: 20px 20px 20px 40px;
    border-radius: 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  div.search .search-input {
    margin-left: -36px;
    width: 100%;
    font-size: 20px;
    font-weight: 300;
    color: var(--dark);
    font-size: 12px;
    transition: width 0.4s linear;
  }
  button.search-icon {
    font-size: 12px;
    height: 25px;
    width: 25px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    background: var(--dark-Green);
    bottom: 1px;
    position: relative;
    border-radius: 50%;
    border: none;
  }
  .custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 38, 77)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  .swiper,
  swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
    margin-bottom: 50px;
    margin-top: -60px;
  }
  .SwiperCardsilder {
    margin-top: 120px;
  }
  a.button-contact {
    background: none;
    color: black;
  }
  hr.class-5,
  hr.bg-white {
    display: none;
  }
  li.home-navbar {
    display: inline;
  }
  /* .ContactUsTitle {
    margin-top: -7rem;
  } */
  body
    > main
    > section:nth-child(4)
    > div
    > div.container.mt-5.mb-3
    > div
    > div.text-center
    > div {
    background-color: var(--bg-gray);

    margin-bottom: -3rem;
  }
#btnNextTestimonial {
    background-color: var(--teal);
    width: 35px;
    margin-right: -7px;
}
  /*======================= About responsive 
==========================================*/
  .AboutName {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
  }
  .AboutPosition {
    font-size: 9px;
    font-style: normal;
    font-weight: 400;
  }
  .AboutDescription {
    margin: 0;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
  }
  .team-text {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    color: var(--dark-blue);
  }
  .IconWhyChooseService {
    border-radius: 125px;
    background: var(--red);
    width: 66.834px;
    height: 66.834px;
  }
  .demo-item {
    padding: 5px;
    border-radius: 5px;
  }
  .TitleOurServices {
    margin-top: 1px;
    font-size: 28px;
    font-weight: 700;
    line-height: 35px;
  }
  .TitleUsersTestimonials {
    font-size: 28px;
    font-weight: 700;
    line-height: 35px;
    margin-top: 0;
  }
  /*=================== Our Servie ================= */
  .CartTitleOurService {
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
  }
  .cart-img-homepage {
    height: 180px;
  }
  /* ================== service prointix ================== */
  .TitleServieProintix {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    margin: 40px 0px 20px 0px;
  }
  .DescriptionserviceProintix {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
  }
  .CardServiceProintix {
    margin-top: 2rem;
  }
  hr.class-6 {
    background-color: var(--white);
    border-top: 2px dashed var(--gray);
    margin-bottom: 40px;
    display: inherit;
    margin-top: 3rem;
  }
  .content-service {
    padding: 2rem;
  }
  .more-service {
    margin-bottom: 2rem;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
  }
  /* ========================contact us================== */
  .image-contact {
    height: 178px;
  }
  .title-get-touch {
    font-size: 28px;
    font-weight: 600;
    line-height: 35px;
  }
  .form-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
  }
  .demo-text-contact-h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
  }
  .text-contact-small {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }
  .office-hour {
    font-size: 28px;
    font-weight: 600;
    line-height: 35px;
  }
  .letter-spacing {
    font-size: 18px;

    font-weight: 400;
    line-height: 24px;
  }
  .our-location {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
  }
  .bg-subcontact {
    background: none;
  }
  .slide-container {
 
  width: 100%;
  padding: 0;
  margin: 0;
}
}
/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1800px) {
  .container-fluid{
    max-width: 1360px;
  }
}