::-moz-selection {
    /* Code for Firefox */
     color: #fff;
     background: #21e676;
}
 ::selection {
     color: #fff;
     background: #21e676;
}
 body {
     font-family: Barlow;
     background-color: #0F0F0F !important;
}
.dropdown:hover .dropdown-menu {

    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }
 #navbarsExample04 .dropdown-menu{
                                   background-color: #212121 !important;
                                   border-radius:.5rem !important;
                                   border:0 none !important;
                                   box-shadow: 0 3px 9px #00000078;
                                 }
 #navbarsExample04 .dropdown-menu .dropdown-item{
                                                  color: #ececec;
                                                }
a.dropdown-item:hover{
                       background-color: transparent !important;  
                       color:#21e676 !important;
                    }
.dropdown-item:hover{
                         background-color: #21e676 !important; 
                         color: #fff;
                    }
.text-black{color:#000;}
 .main-wrapper{
    max-width:1920px;
     margin: 0 auto;
}
 ul {
    margin: 0;
     padding: 0;
}
 a {
    color: #21e676;
}
 a:hover {
     color: #21e676;
     text-decoration: none;
}
 .font22 {
     font-size: 22px;
}
 .themeColor {
     color: #21e676 !important;
}
/* header section start */
 .hamburger-inner>p {
     display: none;
}
 .headerbg, .workbg {
     background-color:#0F0F0F;
     padding:5.5px 0;
}
 .headerbg.hx, .workbg.hux {
     background-color:#000F06;
}
 ul.topNavigation > li.nav-item {
     padding-left:55px;
}
 ul.topNavigation > li.nav-item > a {
     color: #fff !important;
     border-bottom:solid 2px transparent;
     padding:0 !important;
     transition: all ease-in-out 0.4s;
     font-size:1.1rem;
}
 ul.topNavigation > li.nav-item > a:hover {
     color:#39D448 !important;
     border-bottom:solid 2px #39D448;
}
 ul.topNavigation > li.nav-item > a.active {
     color:#39D448 !important;
     
}
/* header close */
/* services section start */
 .servicesBg {
     background: #10136E;
     
     padding: 28px 50px 30px 80px;
}
 .servicesBg h2 {
     font: Bold 40px/73px Barlow;
     font-size:3rem;
     color: #D2FAFF;
}
 .servicesBg > ul > li {
     color: #fff;
     font-size:16px;
     list-style: none;
     line-height: 35px;
}
 .servicesBg > ul > li > a {
     color: #fff;
}
 .servicesIcons {
    margin-top:1.5rem;
}
 .servicesIcons > ul > li{
    display: inline-block;
     margin-right: 20px;
}
 .servicesIcons > ul > li > img {
    width:20px;
     height:20px;
}
/* services end */
/* We specialize section start */
 .specialize {
     background-color: #21e676;
     height: 405px;
     padding-left: 60px;
}
 .specialize>p, .specialize {
    color: #000;
}
 .specialize > p {
     font: 30px/52px Barlow;
}
 .specialize > h2 {
     font-family: Barlow;
     font-weight: 900;
     font-size: 60px;
     margin-top: -5px;
     line-height: 60px;
}
/* We specialize end */
/* banner section start*/
 .bannerImg {
     /*background: url('../img/banner.png') no-repeat;
     background-size: cover;*/
     width: 100%;
     z-index: -1;
     position: absolute;
     top: 0;
     left: 0;
}
 .navbar{
    padding:0.9rem 1rem !important;
}
 .navbar-brand{
    margin-left:1.5rem;
}
 .bannerText {
    width: 50%;
     margin-left: 6rem;
}
.bannerText.hxd {
    width: 90% !important;
     margin-left: 6rem;
}
 .workbg .bannerText{
    width:50%;
     margin-left: 7rem;
     margin-bottom:2rem;
}
 .workbg .bannerText > h1{
     margin-top: 5rem;
}
 .bannerText > h1 ,workbg .bannerText > h1{
     font-size: 90px;
     color: #fff;
     font-weight: 700;
     margin-top:8rem;
     line-height: 87px;
}
 .bannerText img {
     width:60px;
     /*margin-top: 2rem;*/
     margin-left:-5px;
}
.bannerText.workshop{width: 90% !important;}
/* banner end */
/* case studies section or ux-workshop section strat */
 .darkBg {
     background-color: #0f0f0f;
}
 .lightBlackBg {
     background-color: #181A18;
}
 .caseStudy, .uxWorkshop {
     padding: 75px 0px 50px;
     position: relative;
}
 .caseStudyAfter, .workShopAfter {
     position: relative;
     overflow: hidden;
}
 .caseStudyAfter:after{
     position: absolute;
     content: "";
     background: url('../img/casestudies.svg');
     right: -70px;
     width: 200px;
     height: 200px;
     top: 36px;
     background-size: cover;
}
 .workShopAfter:after {
     position: absolute;
     content: "";
     background: url('../img/workshop.svg');
     right: -70px;
     width: 200px;
     height: 200px;
     top: 45px;
     background-size: cover;
}
 .caseStudy>.col-sm-12>h2, .uxWorkshop>.col-sm-12>h2 {
     font-family:Barlow;
     font-size:52px;
     font-weight: 700;
     line-height: 50px;
     margin-bottom: 30px;
}
 .knowMore:hover{
    color:#fff;
     text-decoration: underline;
}
/* case studies or ux-workshop end */
/* CMR-Quick Ride section start from here */
 .overlayEffect {
     background-color: #000000;
}
 .gmrBackground, .quickRide, .rugged {
     position: relative;
     height: 360px;
}
 .quickrideWork{
    position: relative;
     height: 500px;
}
 .gmrBackground span, .quickRide span, .rugged span, .quickrideWork span {
     z-index: 1;
     right: 40px;
     top: 35px;
     font-size: 11px;
     font-weight: 600;
}
 .gmrBackground:after{
     background-image: url(../img/gmr-infrastructure.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     position: absolute;
     content: "";
     width:100%;
     height:100%;
     opacity: 1;
     background-position: 100% 0;
}
 .moneMileyBg:after {
     background-image: url(../img/moneyMile-ui-ux.jpg) !important;
     background-position: 100% 100%;
}
 .moneMileyBg {
     height:420px;
}
 .seeMoreWork>h2{
     margin-top:90px;
     line-height: 65px;
     margin-left:50px;
}
 .overlayEffect:hover .moneMileyBg:after{
     opacity: 1 !important;
}
 .quickRide, .rugged, .quickrideWork {
    position: relative;
     background: #000;
}
.quickRideEffect .quickrideWork:hover .quickrideText img{margin-left:50px;transition: all ease-in-out 0.3s;}
.quickworklogoimg{
    width:40%;
     margin:30px 0 0 40px;
}
 .quickImg {
     width:75%;
     margin:30px 0 0 40px;
}
 .ruggedLogo{
     width:40%;
     margin:30px 0 0 40px;
}
 .domusImg {
     width:20%;
     margin:30px 0 0 30px;
}
 .domusLablesWrap, .quickLablesWrap{
    padding-right:35px;
}
 .quvareIcon {
     width:10%;
}
 .quickSpan {
     margin: 35px 0 0 6px;
}
 .quickRide:after {
     background-image: url(../img/quick-ride-website.jpg);
     background-repeat: no-repeat;
     background-position:47%;
     background-size: cover;
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     opacity: 1;
}
 .quickrideWork:after{
     background-image: url(../img/quick-ride.jpg) !important;
     background-repeat: no-repeat;
     background-position:47%;
     background-size: cover;
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     opacity: 1;
}
 .rugged:after {
     background-image: url(../img/rugged.jpg);
     background-repeat: no-repeat;
     background-position:47%;
     background-size: cover;
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     opacity: 1;
}
 .domus:after {
     background-image: url(../img/domus.jpg) !important;
}
 .quvare, .fortr {
     background-color:rgba(0, 45, 97);
     overflow: hidden;
     
}
 .quvare:hover, .fortr:hover {
     background-color: rgba(1, 27, 58);
     transition: all ease-in-out 0.3s;
}
 .quvare:after{
     background-image: none !important;
}
 .fortr:after{
    background-image: url(../img/fotress.jpg);
    transition: all ease-in-out 0.3s;

}
 .mobileDarkBg .fortr:after{
    background-image: url(../img/special-vest.jpg) !important;
}
 .quvareUI>h2, .fortr>h2 {
     margin-left: 1.8rem;
     margin-top:1.2rem;
}
 .quvareUI>img, .quickRideUi>img {
     margin-left: 2.1rem;
     margin-top: 1.2rem;
     transition: all ease-in-out 0.3s;
}
/* .quickRideEffect:hover .domus:after {
     opacity: 1 !important;
}
 */

 .quickRideEffect:hover .quickRide:after {
     opacity: 0.5;
     transition: all ease-in-out 0.3s;
}
.quickrideWork:hover, .rugged:hover{opacity:0.9;transition: all ease-in-out 0.3s;}
 .quickRideUi{
     margin-top: 100px;
}
 .quvareUI {
     margin-top: 20px;
}
 .mobileImg {
     width: 55%;
}
 .topQuvareDiv {
     height:200px;
}
.topSpeVestDiv {
     height:100px;
}
 .quickRideUi>h2, .quvareUI>h2 {
     font-size: 56px;
     font-weight: 700;
}
 .quickRideUi .domusDiv {
     background-color: #fff;
     border-radius: 15px;
     width:50%;
     margin: auto;
     font-size: 12px;
     padding:5px;
     margin-top:40px;
     opacity: 0;
}
 .quickRideEffect:hover .domusDiv {
     background-color: #fff;
     border-radius: 15px;
     width: 50%;
     margin: auto;
     font-size: 12px;
     padding: 5px;
     margin-top: 30px;
     opacity: 1;
}
 .quickRideEffect:hover .quickRideUi img {
     margin-right: -40px;
     transition: all ease-in-out 0.3s;
}
 .seeMoreHover img {
     margin-right: 90px;
     transition: all ease-in-out 0.3s;
}
 .seeMoreUi:hover .seeMoreHover img {
     margin-right: 70px;
     transition: all ease-in-out 0.3s;
}
 .gmrBackground:after, .gmrUi, .quickRide:after, .rugged:after, .quickrideWork:after, .quickrideWork:after>img.arrowIcon, .quickRideUi>img,.quickrideWork>img.arrowIcon, .gmrUi>img.arrowIcon, .fortr>img.arrowIcon, .quvareUI>img, .quvare, .moneyMile, .seeMoreHover, .seeMoreUi, .domusDiv {
     background: rgb(17, 17, 17) !important;
     transition: all ease-in-out 0.3s;
}
 .moneyMile, .seeMoreUi {
     background: rgb(17, 17, 17) !important;
}
 .seeMoreUi:hover {
     background: rgb(16, 67, 20) !important;
     transition: all ease-in-out 0.3s;
}
 .overlayEffect:hover .moneyMile {
     background: rgb(0, 0, 0) !important;
     transition: all ease-in-out 0.3s;
}
 .overlayEffect:hover .gmrBackground:after {
     opacity: 0.8;
     transition: all ease-in-out 0.3s;
}
 .quickRideEffect .quickrideWork:hover{
    background:rgb(255, 255, 255, 0.8);
    transition: all ease-in-out 0.3s;
}
 .overlayEffect:hover .gmrUi {
     background:rgb(255, 255, 255, 0.8);
     transition: all ease-in-out 0.3s;
}
 .quickRideEffect:hover .quvareUI img.quvareUIImg {
     margin-left: 50px;
     transition: all ease-in-out 0.3s;
}
 .gmrUi {
     padding: 100px 0px 0px 80px;
     position: relative;
     background:rgb(255, 255, 255,1);
}
 .gmrUi > img.gmrIcons {
     position: absolute;
     top: 30px;
     left: 30px;
     width: 60px;
}
 .moneyMile>h2 {
     font-size: 68px !important;
     line-height: 64px !important;
}
 .gmrUi>h2 {
     color: #003974;
     font-size: 56px;
     font-weight: 700;
     line-height: 52px;
}
 .gmrUi>img.arrowIcon, .quickrideWork>img.arrowIcon {
     margin-top: 20px;
     margin-left: 4px;
     width:40px;
     transition: all ease-in-out 0.3s;
}
 .overlayEffect:hover .gmrUi img.arrowIcon {
     margin-left: 20px;
     transition: all ease-in-out 0.3s;
     
}
 .quickRide > div.position-absolute, .quickrideWork > div.position-absolute{
     width:100%;
     z-index:1;
}
 .rugged > div.position-absolute {
     width:100%;
     z-index:1;
}
/* CMR-Quick Ride end here */
/* our clients section start form here */
 .ourClients {
     background: #f6f6f6;
     padding-bottom: 150px;
}
 .ourClients > .col-sm-12 > h3{
     color: rgb(136, 130, 130);
     font-weight: 700;
     margin:150px 0 60px;
     font: Bold 45px/73px Barlow;
     text-align: center;
}
 .ourClients ul{
    text-align:center;
}
 .ourClients > .col-sm-12 > ul > li {
     display: inline-block;
     width:22%;
     text-align: center;
}
 .ourClients > .col-sm-12 > ul > li:last-child img{
    width:185px;
}
 .ourClients>.col-sm-12>ul>li>img {
     width:100px;
}
/* our clients end here */
/* testimonials section start from here*/
 .testimonailBg {
     background: rgba(24, 128, 219, 1);
     background: -moz-linear-gradient(left, rgba(24, 128, 219, 1) 0%, rgba(190, 17, 184, 1) 100%);
     background: -webkit-gradient(left top, right top, color-stop(0%, rgba(24, 128, 219, 1)), color-stop(100%, rgba(190, 17, 184, 1)));
     background: -webkit-linear-gradient(left, rgba(24, 128, 219, 1) 0%, rgba(190, 17, 184, 1) 100%);
     background: -o-linear-gradient(left, rgba(24, 128, 219, 1) 0%, rgba(190, 17, 184, 1) 100%);
     background: -ms-linear-gradient(left, rgba(24, 128, 219, 1) 0%, rgba(190, 17, 184, 1) 100%);
     background: linear-gradient(to right, rgba(24, 128, 219, 1) 0%, rgba(190, 17, 184, 1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1880db', endColorstr='#be11b8', GradientType=1);
     padding:120px 0 100px;
     position: relative;
     overflow: hidden;
     height: 100%;
}
 .testimonailBg > .col-sm-12 > p{
     font-size: 22px;
}
 .tesimonalUi {
     width: 42%;
     margin: 50px auto;
     position: relative;
}
 .tesimonalUi>p::after {
     content: "";
     position: absolute;
     background-image: url(../img/testimonial-top.svg);
     background-repeat: no-repeat;
     top: 0;
     bottom: 0;
     width: 85px;
     height: 75px;
     left: -75px;
     opacity: 0.7;
}
 .tesimonalUi>p::before {
     content: "";
     position: absolute;
     background-image: url(../img/testimonial-bottom.svg);
     background-repeat: no-repeat;
     bottom: -65px;
     width: 85px;
     height: 75px;
     right: -75px;
     opacity: 0.7;
}
 .testimonailBg > .col-sm-12 > h2 {
     font-weight: 900;
     font-size: 70px;
     transition: all ease-in-out 0.5s;
}
 .testimonailBg>.col-sm-12>h2:hover {
     letter-spacing: 10px;
}
 .testimonailBg > img{
     position: absolute;
     right: -140px;
     top: 190px;
     width: 30%;
}
 .tesimonalUi > center > img {
     width: 75px !important;
     height: 75px;
     margin-bottom: 20px;
     border-radius: 50%;
}
 .tesimonalUi > p {
     font-size: 22px;
     line-height: 30px;
     font-weight: 300;
}
 .tesimonalUi>small {
     font-size: 70%;
}
/* testimonials end here */
/* qualityWork section start from here */
 .qualityWork {
     background:url('../img/design-agency.jpg');
     background-size:cover;
     padding:100px 48px;
}
 .qualityWork > div {
     font-size: 40px;
     width:53%;
     margin:auto;
     font-weight: 700;
     color: #fff;
     line-height: 40px;
}
 .qualityWork > div > span {
     display: block;
     font-weight: normal;
}
/* qualityWork end here */
/* email-phone no section start form here */
 .emailPhone {
     margin-left: 120px;
     margin-top: 120px;
}
 .emailPhone > div:first-child {
     margin-bottom: 30px;
}
 .emailPhone > div > a:hover {
     color:#8cca92;
     text-decoration:underline;
}
/* email-phone no section end */
/* footer section start from here */
 footer {
    /* padding:100px 0px 0px;*/
}
 ul.footerlink > li{
     list-style: none;
     margin-bottom: 12px;
}
 ul.footerlink > li > a{
     color:#ffffff;
     opacity: 0.5;
}
 ul.footerlink>li>a:hover {
     color:#21e676;
}
 .footerWidth {
     width: 74%;
     margin:auto;
}
/* footer section end */
 ul.footerLink li {
    list-style: none;
     display: inline-block;
     margin-left: 40px;
}
 ul.footerLink li a{
     color: #fff;
     opacity: 0.5;
}
 .opacityText{
     opacity: 0.5;
}
 .whitehrColor {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     margin-top: 0 !important;
}
 .paddingTopFooter {
     padding-top: 90px;
}
 .paddingBottomFooter {
     padding-bottom: 90px;
}
 .owl-carousel.owl-drag .owl-item {
     -ms-touch-action: auto !important;
     touch-action: auto !important;
}
 .owl-carousel.off {
     display: block;
}

.semiqolon-ptrn{
                     background:url('../img/semiqolon-pattren.png') right  no-repeat;
                     height: 350px;
               }

/*Quvare CS */
.ins-made-easy{
               
               background: #F8F8F8;
              }
.ins-made-easy h2{
                    color: #00316B;
                    font-size: 3rem !important;
                    letter-spacing: -1px;
                    text-align: right;
                    padding: 7rem;
                 }
.industry-fintech{
                    background: #00316B;
                    text-align: center;
                    color: #fff;
                    padding: 7rem;
                 }
.industry-fintech.fortr3ssbg{
                              background: #39BBEC;
                            }
.industry-fintech.specialvest{
                              background: #F15B2B;
                            }
.industry-fintech.tmm{
                              background: #00A5E5;
                            }
.industry-fintech.gmr{
                              background: #ED1C24;
                            }

.typ-work{
               background: #171717;
               color: #fff;
               text-align: center;
               padding: 7rem;
         }
.insurance-cover{
                    background: #0F0F0F;
                    color: #fff;
                    font-size: 24px;
                    letter-spacing: -1px;
                 }
.hxdworkshop{
                    background: #000F06;
                 }
.cs-h2{
          font-size: 9vh;
      }
.cs-h3{
          font-size: 4vh;
          color: #fff;
      }
.cs-h2.hci{
               color: #fff;
          }
.cs-h2.hci span{
                    color: #21E676;
               } 
.cs-h2-abt{
               font-size: 5vh;
           }
.green-hdng{
               color: #39D448;
           }           
.abt-para{
               font-size: 24px;
         }
.abt-ylw-hdng{
               color: #D9C123;
              }
.abt-blu-hdng{
               color: #176DD0;
              }
.the-process h2{
                    color: #39D448;
                    font-size: 3rem !important;
                    letter-spacing: -1px;
                    text-align: right;
                    margin-top: 32% !important; 
                 }
.green-bg{
               background: #39D448;
               text-align: left;
               color: #000;
               font-size: 24px;
         }
.vc-h2{
          color: #197AE9;
          font-size: 3rem !important;
          letter-spacing: -1px;
          text-align: left;
          margin-top: 103%;
          margin-left: 24%;
          margin-bottom: 0;
      }
.black-bg{
               background: #000;
         }
.the-process-bg{
                    background: #197AE9;
                    font-size: 24px;
               }
.the-development h2{
                    color: #E522DE;
                    font-size: 3rem !important;
                    letter-spacing: -1px;
                    text-align: center;
                    margin-top: 70% !important; 
                 }
.the-development-bg{
                         background: #E522DE;
                         color: #fff;
                         font-size: 24px;
                   }
.the-prod-bg{
                    background: #D9C123;
                    font-size: 24px;
               }
.the-prod h2{
                    color: #D9C123;
                    font-size: 3rem !important;
                    letter-spacing: -1px;
                    text-align: left;
                    margin-top: 40% !important; 
                 }
.play-yt{
          width: 100px;
          height: 100px;
          background: url('../img/play-button.svg') no-repeat;
          float: left;
          
        }
.play-yt:hover{
                    background: url('../img/play-button-hover.svg') no-repeat;

              }
.ux-title{
               position: absolute;
               text-align: center;
               font-size: 8vw;
               font-weight: bolder;
               color: #fff;
               margin-top: 20%;
         }
.ux-title span{
                    color: #57FF5D;
              }
.hxdworkshop p{
                    color: #ccc;
              }
.cs-h3 span{
               color: #21E676;
           }
.ux-wokshop-link{
                    position: absolute;
                    display: block;
                    top: 10%;
                    left: 25%;
                    transition: all ease-in-out 0.3s;
                }
.ux-wokshop-link:hover{
                         margin-left: 20px;
                         transition: all ease-in-out 0.3s;
                      }
.the-process{
              transition: all ease-in-out 0.3s;
            }
.the-process:hover{
                    margin-left: 20px;
                    transition: all ease-in-out 0.3s;
                  }                   
.end-user{
               background: #03C917;
               color: #fff;
         }
.gather-req{
               background: #013406;
               color: #fff;
         }
.the-ux-process h3{
                    font-size: 6.5rem;
                    font-weight: 100;
                  }
.the-ux-process h4{
                    font-size: 2.5rem;
                    font-weight: 100;
                  }
.process-research{
                    background: #197AE9;
                    color: #fff;
                 }
.ucd{
          background: #00BCCB;
          color: #fff;
    }                 
.hlp{
          background: #CB006C;
          color: #fff;
    }
.ut{
     background: #E87918;
     color: #fff;
   }    
.user-feed{
     background: #D92E2E;
     color: #fff;
   }    
.rapid{
     background: #E65B12;
     color: #fff;
   }          
.interactive-proto{
                     background: #442ED9;
                     color: #fff;
                  }
.client-feed{
               background: #2E5CD9;
               color: #fff;
            }
.users-5{
          background: #6901DF;
          color: #fff;
        }
.until-satisfied{
                    background: #0ED500;
                    color: #fff;
                }
.our-expertise-box{
                    background: #000;
                  }
.service-ux-ui, .service-branding, .motion-2d-animation, .ar-agency, .vr-agency{
                    background-color: #000;
                    color: #fff;
              }

.expertise-arrow-link{
                    position: absolute;
                    display: block;
                    top: 150%;
                    left: 0%;
                    transition: all ease-in-out 0.3s;
                }
.service-ux-ui:hover .expertise-arrow-link{
                                             margin-left: 20px;
                                             transition: all ease-in-out 0.3s;
                                          }
.service-ux-ui:hover img, .service-branding:hover img, .motion-2d-animation:hover img, .ar-agency:hover img, .vr-agency:hover img{opacity: .7;}

.service-branding:hover .expertise-arrow-link{
                                             margin-left: 20px;
                                             transition: all ease-in-out 0.3s;
                                          }
.motion-2d-animation:hover .expertise-arrow-link{
                                             margin-left: 20px;
                                             transition: all ease-in-out 0.3s;
                                          }
.ar-agency:hover .expertise-arrow-link{
                                             margin-left: 20px;
                                             transition: all ease-in-out 0.3s;
                                          }
.vr-agency:hover .expertise-arrow-link{
                                             margin-left: 20px;
                                             transition: all ease-in-out 0.3s;
                                          }
.our-expertise .text-white{
                              position: relative;
                              top: 35%;
                              left: 10%;
                              font-size: 78px !important;
                              line-height: 72px !important;
                          }
.our-expertise, .our-expertise a{
                                   color:#fff;
                                   text-align: left;
                                }
.our-expertise h2{
                    font-size: 52px;
                    font-weight: 700;
                    line-height: 50px;
                    margin-left: 10%;
                 }     
.service-ux-ui h2, .service-branding h2, .ar-agency h2, .vr-agency h2{
                    position: absolute;
                    top: 40%;
                    z-index: 1;
                 }
 .motion-2d-animation h2{
                   
                    position: absolute;
                    top: 35%;
                    z-index: 1;
                 }

/*Sanket Media Query Start*/

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
.bannerText > h1{margin-top: 7.5rem !important; margin-left: 1rem !important; line-height: 40px !important;}
.play-yt{margin-left: 1rem !important; }
.our-expertise .text-white{font-size: 56px !important; font-weight: 700;}
.our-expertise-box{width: 100% !important; height: 100% !important; padding: 4rem;}
.our-expertise-box h2{margin:  0 !important; top: 0 !important; left: -35px !important;}
.abt-mob1{padding: 1rem !important; margin: 1rem !important;}
.ins-made-easy h2, .typ-work{padding: 2rem !important;}
.workshop-mob{margin-top: 100px !important;}
#navbarsExample04 .dropdown-menu{
                    background-color:#212121 !important;
              }
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
.gmrhd{margin-left: 1.5rem !important;}
.workshop-mob{margin-top: 100px !important;}
#navbarsExample04 .dropdown-menu{
                    background-color:#212121 !important;
              }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}