@charset "utf-8";
/*mobile starts*/
@media (max-width: 767px) {


}
/*mobile ends*/

/* ipad Portrait starts*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .wrapper {
        display: none;
    }
    #webRotate {
        display: block;
    }
    #webRotateportrait {
        display: none;
    }
    body {
        background: #037780;
    }
    #rotate {
        display: flex;
        font-size: 16px;
        color: #fff;
        position: absolute;
        text-align: center;
        background-color: #037780;
        width: 100%;
        height: 100%;
        z-index: 158;
        align-items: center;
        justify-content: center;
    }
    #rotate img {
        width: 15%;
        top: 30%;
        position: fixed;
        transform: translate(-50%, -50%);
        left: 45%;
        -webkit-animation: spin 1s infinite linear;
    }
    #rotate span {
        top: 50%;
        position: fixed;
        transform: translate(-50%, -50%);
        left: 50%;
        text-align: center;
    }

}
/* ipad Portrait ends*/

/*ipad landscape starts*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1),
only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .wrapper {
        display: block !important;
    }
    #webRotate {
        display: none !important;
    }
    #webRotateportrait {
        display: none !important;
    }
    p {
        margin-bottom: 0 !important;
    }
    .Project_list {
        margin-top: 20px;
    }
    .Project_list .accordion-item {
        margin-bottom:15px;
    }
    .Project_list .accordion-body {
        padding: 0rem 0.25rem;
    }
    .accordion-button:not(.collapsed)::before {
        font-size:20px;
    }
    .Project_list {
        padding-top: 0;
    }
    .Project_list .accordion-button {
        width:190px;
    }
    .service_footer h2 {
        margin-top: 15px;
    }
    .product_gallery img {  
        position: absolute;
        top:20%;
        right:0;
        height:50%;
    }
    .service_footer_left p{
        margin: 0; 
    }
    .service_footer_right {
        margin: 40px 0 0 20px;
    }
    .footer-block-div {
        top:-30%;
    }
    .product_gallery img {
        height: 55%;
    }
    .lklk {
        height: calc(870 * 0.062vw);
    }
    #thumbnail-container {
        top: calc(800 * 0.059vw);
    }
    #thumbnail-container div {
        margin-left: 20px;
    }
}


@media only screen and (max-width:700px) {
    .left_red_border{
        display: none
    }
    .product_outer_grid {
        display: none
    }
    .main_content {
        height: auto;  
        overflow: hidden; 
    }
    #digitalproductBG{
        background-image:none;
      }
      
      .service_header{
         /* background-color: #ffffff; */
          margin: 2px 30px 0 10px;
          /* position:fixed; */
      }
     
      .header_logo .img-fluid {
          width:88%;
      }
      
      #open-bar .fal {
          font-size:30px;
      }
      .wraper_mobile {
          display: block;
      }
      .product_title_mobile {
          padding:0 15px;
          display: flex;
          font-size: 34px;
          align-items: center;
          border-bottom: 2px solid rgb(240, 240, 240);
      }
      .product_title_mobile h1{
        font-size: 18px;
        font-weight: 400;
        color: #EC1C24;
        padding-top: 5px;
        /* line-height: 40px; */
        text-transform: uppercase;
        letter-spacing: 0px;
      }
      
      #right_arrow {
          position: absolute;
          right: 3%;
          
      }
      .product_title_mobile a{
        padding-right: 20px;
        font-size: 28px;
        color: #000;
      }

      .service_mobile{
          padding:20px 20px 20px 20px;
        font-family: 'Helvetica Neue';
      }
      .productHeadings {
        display: flex;
        position: relative;
        margin-bottom: 10px;
      }
      .service_mobile p{
        font-size: 14px;
        line-height: 18px;
      }
      .slide_count {
          padding-top:15px;
      }
      #product_head h2{
        color: #EC1C24;
        font-size: 17px;
        font-weight: 400;
        line-height: 28px;
        margin-left: 45px;
        text-transform: uppercase;
        font-family: 'Helvetica Neue';
      }
      #product_headOne h2{
        color: #EC1C24;
        font-size: 17px;
        font-weight: 400;
        line-height: 28px;
        text-transform: uppercase;
        font-family: 'Helvetica Neue';
      }
      #leftBtn  {
          position: absolute;
          transform: rotate(-90deg);
      }
      #rightBtn {
        position: absolute;
        right: 8%;
        transform: rotate(90deg);
    }
      .project_titles_Mobile {
        display: flex;
    }
    .project_titles_Mobile p {
        
        margin:8px 0 0 12px ;
        /* padding-bottom: 3px; */
        padding-right: 5px;
        font-size:0.8rem;  
    }
    .project_titles_Mobile p:hover {
        border-bottom: 2px solid red;
    }
    .active {
        color: #444;
        padding-bottom: 4px;
        border-bottom: 2px solid red;
      }
    .underline {
        border-top: 0.5px solid grey;
    }
    .product_gallery_mobile {
        margin: 20px 0 20px 35px;
    }
    .product_gallery_mobile img {
        /* width:100%; */
        height:45vw;
    }
    .Images  {
      position: relative;
      margin-top:50px;
    }
    #projectImage {
      display: flex;
      justify-content: center;
      width: 330px;
    }
    .ellipse img {
      /* width: 130px;
      z-index: -1;
      position:absolute;
      top:0; */
    }
    .projectDescription p {
      font-size:14px;
      padding:10px 15px 0 15px;
      margin-bottom: o;
    }
    .closeBtn {
        display:none;
    }
    #closeBtn_mobile{
        display: block;
        position: absolute;
        top: 15%;  
        z-index: 1000;
        margin-left: 40px;
        font-size: 1.5rem;
        color: #EC1C24;
        cursor: pointer;
        font-family: 'Helvetica Neue';
    }
    .lklk {
        height: calc(870 * 0.252vw);
    }
    #prev-slide, #next-slide, #active-slide {
        width: calc(730 * 0.082vw);
        
    }
    :is(#prev-slide, #next-slide, #active-slide) img{
        background-size:cover;
    }
    #thumbnail-container {
        top:550px;  
    }
    #thumbnail-container div {
        width: calc(150 * 0.1vw);
        margin: 0 10px 0 0 ;
    }
    #prev-slide {
        right: 82%;
      }
      #next-slide {
        left: 82%;
        cursor: pointer;
      }
    #aiproductsBG {
        background-image:none;
      }
      #immersivetechnologyBG{
        background-image: none;
      }
}
@media screen and (max-width: 400px) {
    .project_titles_Mobile p {
        margin:8px 0 0 8px ;
    }
    .slide_count {
        padding-top: 0;
    }
 }


/*nav menu for service page*/
@media screen and (max-height: 450px) {
    /* .overlay a {font-size: 14px} */
    .overlay .closeServicebtn {
      /* font-size: 40px; */
      top: 15px;
      right: 35px;
    }
   
  }
 @media screen and (min-width: 1400px)  {
     .ellipse {
         /* width: 675px; */
         bottom: 13%;
         right:110px;
     }
     .product_gallery img{
        height: 88%;
      }
     /* .product_gallery img{
         margin-right: 30px;
     } */
 }