@media screen and (min-width: 991px) {
    .mobile-header{
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .dekstop-header{
        display: none;
    }
    #fixed-header{
        display: none;
    }
    .mobile-header{
        display: block;
    }
    .header-lower {
        position: relative;
    }
    .mobile-header-box{
        position: fixed;
        left: -1100px;
        top: 0;
        bottom: 0;
        background-color: #ddd;
        height: 1000px;
        width: 100%;
        padding: 30px 20px;
    }
    .header-lower .navbar-nav {
        display: block !important;
    }
    .header-lower .navbar-nav {
        display: block;
    }
   
    .header-lower .nav-heading{
        text-align: center;
    border-bottom: 1px solid #000;
    padding: 10px;

    }
    .header-lower .nav-outer{
        padding-block: 30px;
    }
    .header-lower .navbar-nav li {
        margin-block-end: 20px;
    }
    .header-lower .navbar-nav li a {
        padding: 10px 0px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.2;
      
    }
    .header-lower .header-btn {
        justify-content: start !important;
        flex-wrap: wrap;
    }
    .mobile-header .mobile-logo-box{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .mobile-header .mobile-logo-box .logo-box{
        position: relative;
        float: left;
    }
    .mobile-header .mobile-logo-box .logo-box a img{
        width: 50%;
    }
  .menu{
        position: relative;
        float: right;
        font-size: 24px;
    }
/* ...............banner........... */
h2{
    font-size: 28px !important;
}
.banner {
    height: 600px !important;
    background-position: left;
}
.banner .banner-content h1 {
    font-size: 32px !important;}
     /* ........... .card-container........... */
     .card-container .card-box {
        margin-block-end: 10px;
    }
/* ........... .experience................ */
    .experience .experience-card-box::after {
        display: none !important;
    }
    .experience .experience-card-box::before {
        display: none !important;
    }
   
    /* ........about us.............. */
    .about-us-container  .about-image{
padding-block-start: 10px;
    }
    .about-us-container .about-us-card {
        flex-wrap: wrap;
    }
    .about-us-container .about-us-card .customer {
        width: 100% !important;
    }
    /* ...... .it-services ............ */
    .it-services .it-service-card {
        margin-block-end: 20px;
    }
    /* ..............why choose us............ */
    .why-choose-us .contact-info {
        padding: 42px 20px !important;
    }
    .footer .service-link{
        padding-block-start: 20px;
    }
    .contact-form .technology .technology-box .content h4 {
        font-size: 16px !important;
        text-align: start;
    }
    .why-choose-us .contact-info .info-box {
       line-break: anywhere;
    }
    .header-lower .logo-box {
        width: 40% !important;
    }
    .experience .experience-content .number-card{
        display: none !important;
    }
}
@media only screen and   (max-width: 1199px) and  (min-width: 789px){
    .about-us-container .about-us-card {
        flex-wrap: wrap;
    }
    .about-us-container .about-us-card .customer {
        width: 100% !important;
    }
    .experience .experience-card-box::before {
        display: none !important;
    }
    .experience .experience-card-box::after {
        display: none !important;
    }
}