/* Reponsive Website Media Quieries */

@media only screen and (max-width: 450px){
    /* For mobile phones: */
    .navbar{
        text-align: left !important;
        justify-content: start !important;
    }
    .logo{
        
        height: 37px;
    }
    .navh1{
        font-size: 1.2rem;
    }
   .navbar-toggler{
        position: absolute;
        float: right;
        top: 1.75rem;
        right: 1.0rem;
   }
   .counterbox{
        width: 80%;
        margin: auto;
        padding-top: 10x;
        padding-bottom: 10px;
   }
   .rbtn{
        margin: auto !important;
        width:80% !important;
        text-align: center;
        margin-left: 10% !important;
        margin-right: 10% !important;
        border-radius: 10px;
   }
   .position-absolute{
        position: relative !important;
   }
    .resli{
        width:70%;
        font-size: 0.8rem;
        padding: 0.5%;
        text-align: left !important;
    }
    .proicons{
        display: none;
    }
    .text-center{
        text-align: center !important ;
    }
    .resbanner{
        /* background: purple; */
        margin-top: 20%;
        text-align: center !important;
    }
    .diff{
        flex-direction: column;
    }
    .leftdif{
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    .rightdif{
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    .resheader{
        text-align: center !important;
    }
    .respara{
        text-align: center !important;
    }

    .afaq{
        flex-direction: column !important;
    }
    .lfaq{
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    .rfaq{
        width: 90%;
        height:40vh;
        /* background: yellow; */
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 3%;
    }
    .brands{
        width: 100% !important;
    }
    .serviceBX01{
        background: url('../img/web_dev01.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .serviceBX02{
        background: url('../img/web_des02.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .serviceBX03{
        background: url('../img/digital_mark03.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .serviceBX04{
        background: url('../img/graphic_des04.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .serviceBX05{
        background: url('../img/back_dev05.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .serviceBX06{
        background: url('../img/seo_opt06.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .leftservice{
        width:100% !important;
        height: auto;
        margin:0% ;
        overflow: hidden;
        color:#fff;
    }
    .rightservice{
        width:100% !important;
        height: auto;
        margin:0% !important ;
        overflow: hidden;
        color:#fff;
        padding: 10% 5% !important;
    }
    .letdis{
        display: flex;
        width: 100% !important;
        padding: 0% !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .leftld{
        width: 100% !important;
        height: auto !important;
    }
    .rightld{
        width: 100% !important;
        height: auto !important;
    }
    .letdishead{
        /* justify-content: center !important; */
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    .letdispara{
        /* justify-content: center !important; */
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    .cell{
        width:33%;
        height: 160px;
        overflow: hidden;
        border-radius: 8px;
    }
    .cell img{
        height: 150px !important;
    }
    .more_portfolio{
        width: 80% !important;
        margin: 5% 10% !important;
        z-index: 1;
    }
    .brands_button{
        display: block !important;
        z-index: 2;
    }
    .case-timeline-dot{
        display:none !important;
    }
    .start_working{
        height: auto !important;
        padding: 5% !important;
    }
    .letdishead{
        text-align: left;
        color: black;
        font-size: 1.4rem;
        padding-left: 10%;
        padding-right: 10%;
      }
    .letdispara{
        text-align: center;
        font-size: 1rem;
        padding-left: 4% !important;
        padding-right: 4% !important;
        color: black;
    }
    .workbutton{
        width: 65% !important;
        margin: 0 auto !important;
    }
    .container11{
        width: 90vw !important;
        margin: 20px auto;
    }
    .skills{
        flex-direction: column !important;
    }
    .leftskills{
        width: 90vw !important;
        margin: 5px auto !important;
    }
    .rightskills {
        width: 90vw;
        margin: 0 auto !important;
    }
    .container01 .card .content h3{
        margin-top:23.5%;
    }
    #slider{
        max-height: 90vh;
    }
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
    }
    .carousel-caption h1 {
        font-size: 1.4rem !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    .s247box{
        flex-direction: column !important;
    }
    .s247Left{
       width: 90vw;
       height:auto;
       margin-right: 5%;
       margin-left: 5%;
       animation-name: fadeIn;
       -webkit-animation-name: fadeIn; 
       animation-duration: 1.5s;   
       -webkit-animation-duration: 1.5s;
       animation-timing-function: ease-in-out; 
       -webkit-animation-timing-function: ease-in-out;  
       overflow: hidden;
    }
    .s247Right{
        width: 90vw;
        height:auto;
        margin-right: 5%;
        margin-left: 5%;
        animation-name: fadeIn;
        -webkit-animation-name: fadeIn; 
        animation-duration: 1.5s;   
        -webkit-animation-duration: 1.5s;
        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;  
        overflow: hidden;
    }
    .s247Left h1{
      font-size: 2.3rem !important;
      color: var(--primary);
      text-align: center !important;
      animation-name: fadeIn;
      -webkit-animation-name: fadeIn; 
      animation-duration: 1.5s;   
      -webkit-animation-duration: 1.5s;
      animation-timing-function: ease-in-out; 
      -webkit-animation-timing-function: ease-in-out;  
    }
    .s247Left h2{
        margin-top: 5%;
        font-size: 1.5rem !important;
        color: var(--primary);
        text-align: center !important;
        animation-name: fadeIn;
        -webkit-animation-name: fadeIn; 
        animation-duration: 1.5s;   
        -webkit-animation-duration: 1.5s;
        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;  
    }
    .s247Left p{
      margin-left: 5%;     
      text-align: left !important;
      font-size: 1rem !important;
      color: var(--text);
      animation-name: fadeIn;
      -webkit-animation-name: fadeIn; 
      animation-duration: 3s;   
      -webkit-animation-duration: 3s;
      animation-timing-function: ease-in-out; 
      -webkit-animation-timing-function: ease-in-out;  
    }
    /* 24/7 Service */
    .carousel{
        width:90vw;
        margin-top: 5%;
        height: 50vh !important;
        margin-left: 5% !important;
        margin-right: 5% !important;
    }
    .chat_icon{
  position: fixed;
  width:50px;
  height: 50px;
  right: 75px !important;
  bottom: 90px !important;
  font-size: 1.4rem;
  color: #ff560c;
  cursor: pointer;
  z-index: 1000;
}
.chat_box{
  position: fixed;
  right: 75px;
  bottom: 50px;
  width: 25vw;
  background: #dedede;
  height: 80vh;
  transition:  all 0.7s ease-out;
  transform: scaleY(0);
  z-index: 1000;
}
.hidden{
  display: none !important;
}
.chat_box.active{
  transform: scaleY(1);
}
.conv-form-wrapper textarea{
    height: 40px !important;
    background: rgb(247, 227, 227);
    overflow: hidden;
    resize: none;
}
#messages{
  padding-top: 20px;
  padding-left:20px;
  padding-bottom: 20px;
}
div.conv-form-wrapper div.options div.option{
  display: block !important;
}
.mycross{
  position: absolute;
  float: right;
  right: 15px;
  top: 20px;
  cursor: pointer;
  color:#ff560c;
  z-index: 200;
}
div.conv-form-wrapper div#messages div.message.from{
  padding: 20px;
}
.chat_box{
    width: 80% !important; 
    height: 83vh;
    overflow: hidden;
    margin: none !important;
    text-align: center;
    right: 40px;
    bottom: 10px;
}
div.conv-form-wrapper div.options div.option{
    display: block !important;
    width: 80% !important;
}
    .carousel-nav{
        width: 90vw;
        margin-right: 5%;
        margin-left: 5%;
    }
    .carousel-cell-video{
        margin-top: 5%;
        height:40vh;
        width:90vh
    }
    iframe {
        border: 0;
        height: 50vh;
        width: 100vw;
    }
   
}
@media only screen and (min-width: 451px) and (max-width: 750px) {
	/* For tablet phones: */
    .logo{
        width: 80px;
        height: 80px;
    }
    .navh1{
        font-size: 1.4rem;
    }
   .navbar-toggler{
        position: absolute;
        float: right;
        top: 1.75rem;
        right: 1.0rem;
   }
   .counterbox{
        width: 80%;
        margin: auto;
        padding-top: 10x;
        padding-bottom: 10px;
   }
   .rbtn{
        width:80% !important;
        text-align: center;
        margin-left: 10% !important;
        margin-right: 10% !important;
   }
   .position-absolute{
        position: relative !important;
   }
    .resli{
        width: auto;
        font-size: 0.8rem;
        padding: 0.5%;
        text-align: center !important;
    }
    .proicons{
        padding: 0.5%;
    }
    .text-center{
        text-align: center !important ;
    }
    .bloghead{
        position: absolute !important;
    }
    .position-absolute1{
        position: absolute !important;
        top: 0;
    }
    .ofhidden{
        overflow: hidden;
    }
    .case-timeline-dot{
        display:none !important;
    }

}
@media only screen and (min-width: 751px) and (max-width: 1500px){
	/* For Desktops/Laptops: */
    .position-absolute {
        position: relative !important;
    }
    .resimg{
        object-fit: contain;
    }
    .more_portfolio{
        z-index: 1;
    }
    .brands_button{
        display: none !important;
        z-index: 2;
    }
    .more_portfolio:hover   .brands_button{
        display: block !important;
    }
    .serviceBX01{
        padding-top: 3.5% !important;
    }
    .team-social{
        z-index: 1;
    }
    .myicons{
        display: none !important;
        z-index: 2;
    }
    .team-social:hover   .myicons{
        display: block !important;
    }
    .skillbar{
        margin-left: 45% !important;
    }
}
@media only screen and (min-width: 1501px){
	/* For Big screens/TVs: */
    .position-absolute {
        position: relative !important;
    }
}




@media (max-width: 751px) {
    .sticky-top.navbar-dark {
        position: relative;
        background: #FFFFFF;
    }

    .navbar-dark .navbar-nav .nav-link,
    .navbar-dark .navbar-nav .nav-link.show,
    .sticky-top.navbar-dark .navbar-nav .nav-link {
        padding: 10px 0;
        color: var(--dark);
    }

    .navbar-dark .navbar-brand h1 {
        color: var(--primary);
    }
}

@media (min-width: 751px) {
    .navbar-dark {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid rgba(256, 256, 256, .1);
        z-index: 999;
    }
    
    .sticky-top.navbar-dark {
        position: fixed;
        background: #FFFFFF;
    }

    .navbar-dark .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 2px;
        bottom: -1px;
        left: 50%;
        background: var(--primary);
        transition: .5s;
    }

    .navbar-dark .navbar-nav .nav-link:hover::before,
    .navbar-dark .navbar-nav .nav-link.active::before {
        width: 100%;
        left: 0;
    }

    .navbar-dark .navbar-nav .nav-link.nav-contact::before {
        display: none;
    }

    .sticky-top.navbar-dark .navbar-brand h1 {
        color: var(--primary);
    }
}


@media (max-width: 576px) {
}
@media (min-width: 751px) {
    .facts {
        position: relative;
        margin-top: -75px;
        z-index: 1;
    }
}

@media (min-width: 767.98px) {
    .footer-about {
        margin-bottom: -75px;
    }
}