body{
    font-family: "Lato", sans-serif;
}
a{
    text-decoration: none;
}
select:focus,
:focus{
    outline: none !important;
    box-shadow: none !important;
}
.loader{
    width:20px;
    height:20px;
    position: absolute;
    right: 25px;
    top: 16px;
}
.loader1 {   width: 20px;    height: 20px;    position: absolute;    right: 25px;
   top: 16px;
}
.error{
    color:#e74c3c;
    position: absolute;
    bottom: -20px;
    left: 12px;
}
.submit-msg{
    position: absolute;
    left: 15px;
}
.header{
    background: #fff;
    padding: 0px 0;
    /* position: sticky;
    top: 0; */
    z-index: 3;
}
.header .dropdown-toggle::after{
    display: none;
}
.header .dropdown-menu.show{
    width: 100%;
}
.header .dropdown-menu li{
    margin-bottom:15px ;
}
.header .dropdown-menu li{
    font-size: 18px;
}
.fixed-header{
    position: fixed;
    width: 100%;
    animation: slideDown 0.35s ease-out;
    padding: 8px 0;
    box-shadow: 0 5px 50px 0 #B2BEC399;
}
.fixed-header img{
    max-width:120px;
}
.banner-btn:hover{background: #c74444; transition: background-color 0.3s ease, color 0.3s ease;}
.current-menu-item a{color: #ff5151;}
#service,
#contact,
#hire_us {
    scroll-margin: 160px;
  }
  #portfolio{
    scroll-margin: 160px;
  }
.mega-menu-wrap{
    width: 100% !important;
}
@keyframes slideDown {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
.header ul .nav-item{
    margin: 0 20px;
    font-weight: 500;
    font-size: 20px;
}
.header .nav-link{
    color: #000000;
}
.header .nav-link:hover,
.header .nav-link.active,
.header .nav li .active{
    color: #FF5252;
}
.navbar-brand{
    width: 150px;
}
.navbar-brand img{
    width:100%;
    height: auto;
}
.current-menu-item > a,
.current-menu-ancestor > a,
.mega-current-menu-ancestor > a,
.mega-current-menu-item a{
    color: #FF5252 !important;
}
.site-navigation ul.menu{
    margin-left: auto !important;
}
.site-navigation ul.menu li a{
    padding: 8px 0px;
    color: #000;
}
.top-banner{
    background: url(../images/top-bg.png);
    background-repeat: no-repeat;
    background-size: 105%;
    background-position: bottom center;
}
.banner-inner{
    padding-top: 70px;
    padding-bottom: 150px;
}
.top-banner h1{
    font-size: 45px;
    font-weight: 800;
    color: #2D3436;
}
.top-banner p{
    font-size: 18px;
    font-weight: 600;
    color: #2D3436;
    margin: 56px 0;
}
.banner-btn{
    border-radius: 8px;
    background-color: #FF5252;
    border:none;
    color: #fff;
    width: 200px;
    height: 60px;
    font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.client-slider{
    margin: 50px 0;
}
.page-title{
    font-size: 26px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 50px;
    text-transform: uppercase;
}
.page-sub-tilte{
    color: #696969;
    font-size: 18px;
    margin-bottom: 50px;
}
.journy-box{
    border-radius: 8px;
    padding: 40px;
}
.blue-box{
    background-color: #ECF3FF;
}
.yellow-box{
    background-color: #FFFBEB;
}
.red-box{
    background-color: #FFEDED;
}
.green-box{
    background-color: #F0FEF7;
}
.brown-box{
    background-color: #F5F5F5;
}
.violet-box{
    background-color: #F6F3FF;
}
.journy-box > img{
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 50px;
}
.number{
    font-weight: 800;
    font-size: 40px;
    color: #000000;
    margin: 0;
}
.text{
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    margin: 0;
}
.shadow-box{
    box-shadow: 0px 0px 30px #B2BEC380;
    border-radius: 8px;
    padding: 24px;
    height: 100%;
}
.shadow-image-box{
    border-radius: 8px;
    padding: 20px;
    width: 127px;
    height: 127px;
    margin-right: 30px;
}
.shadow-box h2{
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 20px;
}
.shadow-box p{
    font-size: 18px;
    font-weight: 400;
    color: #696969;
    margin-bottom: 0;
}
.special-section{
    background-image: url(../images/special-bg.png);
    background-size: cover;
    background-position: bottom;
    padding: 130px 0;
}
.special-section h2{
    font-size: 40px;
    font-weight: 900;
}
.special-section p{
    font-size: 18px;
}

.white_box{
    border-radius: 8px;
    background-color: #fff;  
    padding: 35px; 
}
.white_box h3{
    color: #FF5252;
    font-size: 50px;
    font-weight: bolder;
}
.white_box p{
    color: #000000;
    font-size: 18px;
    font-weight: bolder;
}
.shadow_box{
    border-radius: 8px;
    box-shadow: 0 0 50px 0 #B2BEC399;
    padding: 30px;
    transition: all .3s;
}
.shadow_box:hover{
    scale: 1.1;
    background-color: #ff52522a;
    transition: all .3s;
}
.icon_box{
    width: 100px;
    height: 100px;
    border-radius: 8px;
}
.icon_box img{
    width: 80%;
    height: 50px;
    object-fit: contain;
}
.blue_bg{
    background: #A1C4FF;
}
.red_bg{
    background: #FFA8A8;
}
.yellow_bg{
    background: #FFEB9F;
}
.skyblue_bg{
    background: #B3F7D6;
}
.violet_bg{
    background: #BDA5FF;
}
.orange_bg{
    background: #FFD59F;
}
.shadow_box{
    height: 100%;
}

.shadow_box h3{
    font-size: 20px;
    font-weight: 900;
    margin: 20px 0;
    color: #000;
}
.shadow_box p{
    color: #696969;
    font-size: 15px;
    margin-bottom: 0;
}
.gray-bg{
    background: #EBEFF2;
}
.gray-bg .nav-tabs{
    background-color: #fff;
    box-shadow: 0 0 50px 0 #B2BEC399;
    border-radius: 8px;
    text-transform: uppercase;
    overflow: hidden;
    margin-bottom: 50px;
    /* margin-top: -80px; */
    margin-top: 0px;
    overflow-x: auto;
}
.gray-bg .nav-tabs li{
    width: 100%;
}
.gray-bg .nav-tabs button{
    text-transform: uppercase;
    color: #696969;
    border: none;
    border-radius: 0;
    margin: 0;
    font-size: 16px;
    padding: 20px 40px;
    white-space: nowrap;
}
.gray-bg .nav-tabs button.active{
    background-color: #B2BEC3;
    color: #fff;
}
.project-details{
    text-align: right;
}
.project-details h3{
    font-size: 22px;
    color: #000000;
    font-weight: 900;
    margin-bottom: 25px;
}
.project-details p{
    font-size: 18px;
    color: #000000;
    font-weight: 400;
}
.swiper-pagination-bullet{
    width: 15px;
    height: 15px;
}
.swiper-pagination-bullet-active{
    width: 35px;
    height: 15px;
    background-color: #696969;
    border-radius: 10px;
}
.strength-area p{
    font-size: 22px;
    margin-top: 30px;
    font-weight: 800;
    line-height: 30px;
    color: #000000;
}

.center_nav{
    border: none;
    background-color: #448AFF !important;
    max-width: 580px;
    margin: 0 auto;
    border-radius: 8px;
    padding: 3px  4px !important;
    display: flex;
    margin-bottom: 25px;
    font-size:16px;
    position:relative;
    margin-top: 0 !important;
}
.center_nav.nav-tabs>li{
    margin-bottom: 0;
    width: 100%;
    position: relative;
    z-index: 2;
}
.center_nav.nav-tabs>li>a.active{
    border:none;
    border-radius: 8px;
    background: #fff;
    color: #000 !important;
    font-weight: 800;
}
.center_nav.nav-tabs>li>a{
    color: #fff;
    border: none;
    margin: 0;
    text-align:center;
    padding:6px 10px;
    display: block;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
}
.center_nav.nav-tabs>li>a:hover{
    border-radius: 8px;
    
}
.card-deck{
    text-align:center;
}
.card-deck .card-title{
    margin: 0;
    font-size: 16px;
    line-height: 1;
}
.card{
    width: auto;
    display:inline-block;
    border: 1px solid #707070;
    padding: 10px 20px;
    border-radius: 8px;
    margin-right: 10px;
    margin-bottom: 10px;
    transition: all .3s;
}
.card:hover{
    background-color: #FF5252;
}
.card a{
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    text-decoration: none;
    color: #000;
    font-size: 16px; 
}
.card img{
    width: 20px;
    margin-right: 8px;
}
.card:hover a{
    color: #fff;
}
.card:hover img{
    filter: invert(1);
}
.marker {
    transition: transform 0.4s;
    background-color: #fff;
    background-size: 100%;
    width: 140px;
    height: 35px;
    margin-left: 0;
    transform: translateY(0px);
    transform: translateX(4px);
    position: absolute;
    border-radius: 30px;
    left: 0px;
    pointer-events:none;
}
.orange-box{
    background-color: #FFFBEB;
    border-radius: 8px;
    padding: 30px;
}
.orange-box h2{
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: #000;
    padding-bottom: 30px;
    border-bottom: 2px solid #FFAB40;
}
.orange-box h4{
    font-size: 18px;
    color: #FFAB40;
    text-transform: uppercase;
    font-weight: 600;
}
.orange-box p{
    font-size: 16px;
    color: #000;
}
.orange-box button{
    background-color: #FFAB40;
    border-radius: 8px;
    color: #fff;
    padding: 25px;
    width: 100%;
    border:none;
    font-size: 20px;
    font-weight: 600;
}
.blue-box2{
    background-color: #ECF3FF;
    border-radius: 8px;
    padding: 30px;
    height: 100%;
}
.blue-box2 h2{
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: #000;
    padding-bottom: 30px;
    border-bottom: 2px solid #448AFF;
}
.blue-box2 h4{
    font-size: 18px;
    color: #448AFF;
    text-transform: uppercase;
    font-weight: 600;
}
.blue-box2 p{
    font-size: 16px;
    color: #000;
}
.blue-box2 button{
    background-color: #448AFF;
    border-radius: 8px;
    color: #fff;
    padding: 25px;
    width: 100%;
    border:none;
    font-size: 20px;
    font-weight: 600;
}
.red-text{
    color: #FF5252;
}
.feedbackSlider .swiper-wrapper{
    padding-bottom: 120px;
}

.feedback-box{
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 50px 0 #B2BEC399;
    padding: 50px;
    min-height: 355px;
}
.feedback-inner{
    padding-left: 40px;
    padding-top: 22px;
}
.testimonial-logo{
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
}
.testi-text{
    font-size: 18px;
    color: #696969;
    font-weight: 400;
    position: relative;
    margin-bottom: 25px;
}
.testi-text::before{
    content: '';
    position: absolute;
    background-image: url(../images/quote.svg);
    background-size: contain;
    background-repeat: no-repeat;
    top: -22px;
    left: -40px;
    width: 35px;
    height: 30px;
}
.testimonial-logo img{
    width: 100%;
}
.client-info h4{
    font-size: 20px;
    color: #000;
    font-weight: bold;
    margin: 0;
}
.client-info p{
    font-size: 16px;
    color: #696969;
    margin: 0;
}
.conatct-text{
    position: relative;
    padding-left: 65px;
}
.conatct-text h2{
    font-size: 38px;
    font-weight: 500;
    color: #000;
}
.conatct-text p{
    font-size: 20px;
    font-weight: 400;
    color: #696969;
}
.conatct-text::before{
    content: '';
    background-image: url(../images/plan.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -20px;
    bottom: -11px;
    width: 180px;
    height: 258px;
}
.contact-form{
    position:relative;
}
.contact-form input,
.contact-form textarea{
    width: 100%;
    border:none;
    height: 40px;
    border-bottom: 1px solid #A9A9A9;
    color: #000;
    font-size: 18px;
}
.contact-form input::-webkit-outer-spin-button,
.contact-form input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
.contact-form input[type=number] {
    appearance: textfield;
-moz-appearance: textfield;
}
.contact-form input:focus,
.contact-form textarea:focus{
    outline: none;
    box-shadow: none;
}
.contact-form textarea{
    height: 80px;
}
.contact-form .file {
    display: none;
}
.contact-form .file-btn{
    color: #448AFF;
    /* width: 94px !important; */
    background: none;
    height: 28px !important;
    border:none !important;
    font-size: 16px;
    font-weight: 500;
    position: absolute;
    right: 0;
    top: 5px;
    text-decoration: underline;
}
.form-submit{
    border: 1px solid #696969;
    border-radius: 8px;
    height: 55px;
    width: 180px;
    color: #000;
    font-size: 18px;
    background: #fff;
}
.footer-bg{
    background-image: url(../images/footer-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding:  80px 0 180px 0;
}
.footer-bg img{
    width: 100%;
    padding-right: 10px;
}
.address{
    width: 100%;
}
.address h4{
    font-size: 50px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 30px;
}
.address p{
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}
.address p:nth-child(2){
    font-weight: 700;
    font-size: 20px;
}
.address p:nth-child(3),
.address p:nth-child(4){
    margin-bottom: 25px;
}
.copyright-area{
    background: #061C35;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}
.foot-client-img{
    width: 170px;
    height: 170px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    background-color: #fff;
}
.copyright-area p{
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}
#top {
    display: inline-block;
    background-color: #fff;
    border-radius:50px;
    width: 50px;
    height: 50px;
    text-align: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, 
    opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    cursor:pointer;
}
#top.show {
    opacity: 1;
    visibility: visible;
}
/* SERVICE PAGE CSS */
.service-banner{
    background-image: url(../images/gds-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 90px 0;
}
.art-banner h1,
.app-banner h1,
.service-banner h1{
    font-size: 50px;
    font-weight: 800;
    margin-bottom: 50px;
}
.art-banner p,
.app-banner p,
.service-banner p{
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 60px;
}
.art-banner a,
.app-banner a,
.service-banner a{
    display: inline-block;
    background-color: #FF5252;
    border-radius: 8px;
    min-width: 180px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;
}
.unity-banner{
    background-image: url(../images/unity-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.unity-banner h1{
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 10px;
}
.unity-banner p{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 60px;
}
.unity-banner a{
    display: inline-block;
    background-color: #FF5252;
    border-radius: 8px;
    min-width: 180px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    padding: 0 25px;
}
.icon-box-width{
    width: 175px;
}
.company{
    padding: 15px;
}
.number-box{
    width: 80px;
    height: 70px;
    font-size: 25px;
    font-weight: 800;
    text-align: center;
    border-radius: 4px 4px 0 0 ;
}
.number-box.box-1{
    background-color: rgb(247 183 49 / 10%);
    color: #F7B731;
}
.number-box.box-2{
    background-color: rgb(232 76 61 / 10%);
    color: #E84C3D;
}
.number-box.box-3{
    background-color: rgb(61 35 37 / 10%);
    color: #3D2325;
}
.number-box.box-4{
    background-color: rgb(118 101 110 / 10%);
    color: #76656E;
}
.company h4{
    font-size: 16px;
    font-weight: 600;
}
.company p{
    font-size: 14px;

}
.shadow-box .image-box{
    width: 70px;
    height: 70px;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    margin-bottom: 15px;
}
.choose-box h4{
    font-size: 20px;
    font-weight: 600;
}
.choose-box p{
    font-size: 16px;
}
.method-box{
    text-align: center;
    border-radius: 8px;
    padding: 30px;
    height: 100%;
}
.method-box img{
    width: 70px;
    margin-bottom: 20px;
}
.method-box h4{
    font-size: 25px;
    color: #000;
    font-weight: 800;
}
.method-box p{
    font-size: 16px;
    color: #696969;
}
.platform-box h2{
    font-size: 35px;
    font-weight: 700;
    color: #000;
}
.platform-img-box{
    width: 100%;
    /* height: 60px; */
    border-radius: 4px 4px 0 0;
    padding: 10px;
}
.mobile-box{
    background-color: rgb(124, 77, 255,.2);
}
.desktop-box{
    background-color: rgb(255, 171, 64,.2);
}
.arvr-box{
    background-color: rgb(105, 240, 174,.2);
}
.platform-box h4{
    font-size: 20px;
    font-weight: 700;
    color: #555555;
}
.platform-box p{
    font-size: 16px;
    color: #555555;
    margin: 0;
}
.cta-section{
    color:#fff;
    background-color: #448AFF;
    padding: 40px 0;
}
.cta-section h2{
    font-size: 35px;
    margin-bottom: 40px;
}
.cta-button{
    background-color: #FFAB40;
    color: #fff;
    border-radius: 4px;
    height: 40px;
    min-width: 260px;
    border:none;
}
.cta-section img{
    width: 95px;
    padding: 0 10px;
}
.cta-section h4{
    font-size: 30px;
    font-weight: 800;
    margin: 0;
}
.cta-section p{
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}
.html-banner{
    background-image: url(../images/html5-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.unreal-banner{
    background-image: url(../images/unreal-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.arvr-banner{
    background-image: url(../images/arvr-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.meta-banner{
    background-image: url(../images/meta-banner.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.gamification-banner{
    background-image: url(../images/gamification-banner.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.app-banner{
    background-image: url(../images/app-dev-banner.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 120px 0 30px 0;
    color: #000;
}
.ios-banner{
    background-image: url(../images/iso-app-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.android-banner{
    background-image: url(../images/android-app-banner.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.webapp-banner{
    background-image: url(../images/Web-App-Development.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.arvrapp-banner{
    background-image: url(../images/arvr-app-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.iot-banner{
    background-image: url(../images/iot-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 84px 0 30px 0;
    color: #fff;
}
.tech-banner{
    background-image: url(../images/tech-banner.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 109px 0 100px 0;
    color: #fff;
}
.banner-2d{
    background-image: url(../images/2d-art.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 109px 0 100px 0;
    color: #fff;
}
.banner-3d{
    background-image: url(../images/3d-art.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 109px 0 100px 0;
    color: #fff;
}
.uiux-banner{
    background-image: url(../images/uiux-banner.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 109px 0 100px 0;
    color: #fff;
}

.enterprise-banner{
    background-image: url(../images/enterprise-solution-banner.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 109px 0 100px 0;
    color: #fff;
}
.art-banner{
    background-image: url(../images/art-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 120px 0 30px 0;
    color: #fff;
    min-height: 580px;
}
.fintech-banner{
    background-image: url(../images/fintech-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 120px 0 30px 0;
    color: #000;
    min-height: 580px;
}
.edtech-banner{
    background-image: url(../images/edtech-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 120px 0 30px 0;
    color: #000;
    min-height: 580px;
}
.health-banner{
    background-image: url(../images/health-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 120px 0 30px 0;
    color: #000;
    min-height: 580px;
}
.media-banner{
    background-image: url(../images/media-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 120px 0 30px 0;
    color: #000;
    min-height: 580px;
}
.casino-banner{
    background-image: url(../images/casino-industry-banner.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 120px 0 30px 0;
    color: #000;
    min-height: 580px;
}
.ecom-banner{
    background-image: url(../images/ecom-banner.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 120px 0 30px 0;
    color: #000;
    min-height: 580px;
}

.ecom-banner h1,
.casino-banner h1,
.media-banner h1,
.health-banner h1,
.edtech-banner h1,
.fintech-banner h1,
.enterprise-banner h1,
.casino-banner h1,
.uiux-banner h1,
.banner-3d h1,
.banner-2d h1,
.tech-banner h1,
.iot-banner h1,
.arvrapp-banner h1,
.webapp-banner h1,
.android-banner h1,
.ios-banner h1,
.gamification-banner h1,
.meta-banner h1,
.html-banner h1,
.arvr-banner h1,
.unreal-banner h1{
    font-size: 35px;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.ecom-banner p,
.casino-banner p,
.media-banner p,
.health-banner p,
.edtech-banner p,
.fintech-banner p,
.enterprise-banner p,
.casino-banner p,
.uiux-banner p,
.banner-3d p,
.banner-2d p,
.iot-banner p,
.arvrapp-banner p,
.webapp-banner p,
.android-banner p,
.ios-banner p,
.gamification-banner p,
.meta-banner p,
.html-banner p,
.arvr-banner p,
.unreal-banner p{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 60px;
}

.ecom-banner a,
.casino-banner a,
.media-banner a,
.health-banner a,
.edtech-banner a,
.fintech-banner a,
.enterprise-banner a,
.casino-banner a,
.uiux-banner a,
.banner-3d a,
.banner-2d a,
.iot-banner a,
.arvrapp-banner a,
.webapp-banner a,
.android-banner a,
.ios-banner a,
.gamification-banner a,
.meta-banner a,
.html-banner a,
.arvr-banner a,
.unreal-banner a{
    display: inline-block;
    background-color: #FF5252;
    border-radius: 8px;
    min-width: 180px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    padding: 0 25px;
}


/* SERVICE PAGE CSS */
.nav-item:hover .submenu{
    opacity: 1;
    visibility: visible;
    transform: translateY(16px);
} 
.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(-20px);
}

.mega-menu {
    display: flex;
    /* flex-wrap: wrap; */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    padding: 15px 0;
    box-shadow: 0 0px 6px 2px rgb(0 0 0 / 20%);
    width: 100%;
    justify-content: space-around;
    z-index: 1;
    /* Transition properties */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Start with it slightly lower */
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mega-column {
    width: 30%;
    padding: 0 15px;
}

.mega-column h3 {
    color: #333;
    font-weight: 700;
    font-size: 16px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
}

.mega-column ul {
    list-style: none;
    padding: 0;
}

.mega-column ul li {
    margin-bottom: 8px;
}

.mega-column ul li a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
}
.mega-column ul li a.active,
.mega-column ul li a:hover {
    color: #FF5252;
}
.submenu{
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    padding: 10px;
    box-shadow: 0 0px 6px 2px rgb(0 0 0 / 20%);
    width: 200px;
    /* Transition properties */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Start with it slightly lower */
    transition: all 0.3s ease;
    border-radius: 2px;
}
.submenu{
    list-style: none;
}
.submenu li{
    /* display: block; */
    margin-bottom: 8px;
}
.submenu li a{
    display: block;
    font-size: 14px;
    color: #000;
}
.submenu li a.active,
.submenu li a:hover {
    color: #FF5252;
}

/* SIDE NAV */
.sidenav-container {
    /* background-color: #333; */
    padding: 0px;
    color: #000;
}

.menu-icon {
    font-size: 30px;
    cursor: pointer;
}

.sidenav {
    height: 100%; /* Full-height */
    width: 300px; /* Set width to 0 initially */
    position: fixed; /* Stay in place */
    z-index: 3; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #fff; /* Dark background */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 100px; /* Place content 60px from the top */
    transition: 0.3s; /* 0.3 second transition effect */
    transform: translateX(300px);
    box-shadow: 0 0 12px 0px #00000061;
}

.sidenav a {
    padding: 8px 15px 8px 15px;
    text-decoration: none;
    font-size: 16px;
    color: #000;
    display: block;
    transition: 0.3s;
    margin-bottom: 8px;
}

.sidenav a:hover {
    color: #e74c3c;
}

.sidenav .closebtn {
    position: absolute;
    top: 12px;
    right: 0px;
    font-size: 38px;
    margin-left: 0px;
}

.sidenav-submenu {
    display: none; /* Hide submenu initially */
    /* padding-left: 25px; */
}
.sidenav-submenu h3{
    font-size: 16px;
    margin: 0;
    font-weight: 600;
}
.sidenav-submenu div{
    padding: 0 15px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.submenu-toggle {
    cursor: pointer;
}
.submenu-toggle img{
    float: right;
}

/* Open the side nav by setting width */
.sidenav.open {
    /* width: 250px; */
    transform: translateX(0px);
}
.sidenav-submenu.open{
    display: block;
}
/* Style submenu items */
.sidenav-submenu a {
    font-size: 14px;
    padding: 5px 8px 5px 0px;
}
.sidenav-submenu a.active{
    color:#e74c3c;
}
.project-slider h3{
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 15px;
}
.project-slider p{
    font-size: 16px;
    margin-bottom: 30px;
}
.project-slider ul{
    list-style-image: url(../images/slider/bullet-small.png);
    padding-left: 20px;
}
.project-slider ul li{
    margin-bottom: 10px;
    padding-left: 10px;
}
.brd-btn {
    border-radius: 4px;
    color: #fff;
    padding: 10px 20px;
    margin-right: 10px;
    font-size: 16px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 10px;
}
.color-1 {
    border: 1px solid #FFFFFF;
}
.color-2 {
    border: 1px solid #69F0AE;
}
.color-3 {
    border: 1px solid #448AFF;
}
.color-4 {
    border: 1px solid #FFAB40;
}
.overview-tech{
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 800;
    color: #000;
}
.overview-tech img{
    /* padding: 0 15%; */
    max-width: 155px;
}

.tech-box{
    box-shadow: 0 0  50px #00000029;
    border-radius: 4px;
    padding: 30px;
    width: 100%;
    display: inline-block;
    font-size: 16px;
    height: 100%;
}
.tech-box h3{
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

#art,
#uiux,
#animation,
#frontend,
#backend,
#mobile-app,
#game-dev,
#ecom,
#aiml,
#blockchain,
#architech,
#devops,
#database,
#quality,
#management{
    scroll-margin: 120px;
}
#toolSelect,
#categorySelect,
#portfolioTabDropdown,
#mobileTabDropdown{
    background-color: #fff;
    text-align: center;
    color: #000;
    font-weight: 600;
    font-size: 18px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    border: 2px solid #e74c3c;
    margin-bottom: 25px;
}
#toolSelect option,
#categorySelect option,
#portfolioTabDropdown option,
#mobileTabDropdown option{
    background-color: #fff;
    color: #000;
    font-size: 14px;
}
#toolSelect{
    font-size: 14px;
    width: 100%;
}


/* portfolio */
:focus-visible {
    outline: none !important;
}
.filter-button {
    font-size: 16px;
    text-transform: uppercase;
    border: none;
    background-color: none;
    border-radius: 0;
    text-align: center;
    color: #fff;
    outline: none;
    padding: 5px 15px;
    /* border-bottom: 2px solid transparent; */
    font-weight: 600;
}
.filter-button:hover {
    text-align: center;
    color: #000;
    background: none;
}
.btn-default:active,
.filter-button:active,
.filter-button:focus {
    border: none;
    color: #000;
    outline: none;
}
.port-image {
    width: 100%;
}
.gallery_product {
    margin-bottom: 30px;
}
.gallery_product img{
    width: 100%;
}
.position_relative {
    position: relative;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    transition: all ease-in-out .3s;
}
.position_relative:hover{
    transition: all ease-in-out .3s;
    box-shadow: 0 0 20px #0000004d;
}
.item_title {
    position: absolute;
    z-index: 1;
    bottom: 0;
    font-size: 20px;
    text-transform: capitalize;
    line-height: 25px;
    font-weight: 500;
    width: 100%;
    padding: 30px 15px;
    background-color: rgb(0 0 0 / 70%);
    background: linear-gradient(transparent, rgb(0 0 0 / 100%));
    color: #fff;
}
.item_title:after {
    content: "";
    width: 40px;
    height: 3px;
    background: #FF5252;
    left: 15px;
    z-index: 9999999;
    position: absolute;
    bottom: 20px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
}
.gallery_product:hover .item_title:after {
    width: 80px;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
}
.filter-button.active,
.filter-button.active:focus,
.filter-button.active:focus-visible,
.filter-button.active:active {
    background-color: #fff;
    color: #000;
    outline: none !important;
    border-radius: 8px;
}
.category_btn {
    list-style: none;
    background: #448AFF;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 30px;
    overflow: auto;
}
.category_btn li {
    display: inline-block;
    cursor: pointer;
    white-space: nowrap;
}
.hover_btn {
    position: absolute;
    margin: 0 auto;
    width: 110px;
    height: 40px;
    left: 0;
    right: 0;
    background: #FF5252;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 3px 3px 5px #00000042;
    transition: all cubic-bezier(0.39, 0.58, 0.57, 1) 0.3s;
    opacity: 0;
    transform: translate(0px, 55px);
}
.gallery_product:hover .hover_btn {
    transition: all cubic-bezier(0.39, 0.58, 0.57, 1) 0.3s;
    opacity: 1;
    transform: translate(0px, -190px);
}
.youtube-video {
    width: 100%;
    height: 500px !important;
    pointer-events: none;
}
.red_btn{
    background: #FF5252;
    color: #fff;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 400;
    line-height: 45px;
    display: inline-block;
    padding: 0 25px;
}
.software-img{
    width: 50%;
    padding: 25px;
}
.software-title{
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
}

/* CENTER SLIDER */
.center-slider {
    position: relative;
    width:100%;
    height: 400px;
}
    
.center-slider > .swiper-slide__content {
    /* position: absolute; */
    top: 0;
}
    
.center-slider .swiper-slide {
    height: 400px;
    display: flex;
    background: #eee;
    align-items: center;
    justify-content: center;
    transition: all 200ms linear;
    transform: scale(0.8);
    filter: grayscale(1);
}
.center-slider .swiper-slide.swiper-slide-active {
    transform: scale(1);
    border: 10px solid #FF5252;
    filter: grayscale(0);
}
.center-slider .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
    
.center-slider .swiper-slide__content {
    height: 300px;
}
.center-slider .swiper-pagination{
    bottom: -50px;
    z-index: 1;
}
.menu-item-has-children,
.hasChild{
    position: relative;
}
.menu-item-has-children:after,
.hasChild:after{
    content: '' !important;
    width: 12px;
    height: 12px;
    background-image: url(../images/arrow.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 20px;
    right: -10px;
}
.vertical-tab{
    border:1px solid #000;
    border-radius: 8px;
    overflow: hidden;
}
.yellow-tab{
    background-color: #FFFBEB;
    border-color: #FFAB40;
}
.blue-tab{
    background-color: #ECF3FF;
    border-color: #448AFF;
}
.yellow-tab .nav .nav-item{
    border-bottom: 2px solid #FFAB40;
}
.blue-tab .nav .nav-item{
    border-bottom: 2px solid #448AFF;
}
.vertical-tab .nav .nav-item:last-child{
    border: none;
}
.vertical-tab .nav .nav-item button{
    padding: 15px 10px;
    padding-right: 35px;
    min-width: 365px;
}
.vertical-tab .nav .nav-item,
.vertical-tab .nav .nav-item button{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 16px;
    color: #000;
    background-color: #fff;
    border-radius: 0;
}
.yellow-tab .nav .nav-item button.active {
    background-color: #FFFBEB;
    border-radius: none;
    color: #000 !important;
}
.blue-tab .nav .nav-item button.active {
    background-color: #ECF3FF;
    border-radius: none;
    color: #000 !important;
}
.yellow-tab .nav .nav-item button.active::after {
    content: "";
    background-image: url(../images/yellow-arrow.png);
    width: 15px;
    height: 15px;
    background-size: 88%;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    top: 21px;
    border-radius: 5px 0 0 5px;
    background-position: top center;
}
.blue-tab .nav .nav-item button.active::after {
    content: "";
    background-image: url(../images/blue-arrow.png);
    width: 15px;
    height: 15px;
    background-size: 88%;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    top: 21px;
    border-radius: 5px 0 0 5px;
    background-position: top center;
}
.tab-inner-img{
    width: 120px;
}
.vertical-tab .tab-pane h2{
    text-transform: uppercase;
    margin: 20px 0;
    font-weight: 800;
}
.vertical-tab .tab-pane p{
    font-size: 18px;
}
.yellow-tab .tab-pane h2{
    color: #FFAB40;
}
.blue-tab .tab-pane h2{
    color: #448AFF;
}
.yellow-point h3,
.blue-point h3{
    font-size: 25px;
    font-weight: 700;
    position: relative;
    display: inline;
}
.yellow-point h3:before{
    content: '';
    position: absolute;
    left: -30px;
    top: 8px;
    width: 15px;
    height: 15px;
    background-color: #FFAB40;
    border-radius: 15px;
}
.blue-point h3:before{
    content: '';
    position: absolute;
    left: -30px;
    top: 8px;
    width: 15px;
    height: 15px;
    background-color: #448AFF;
    border-radius: 15px;
}
.yellow-point h3{
    color: #FFAB40;
}
.blue-point h3{
    color: #448AFF;
}
.mw-100{
    max-width: 100%;
}
.border-box h4{
    font-size: 20px;
    font-weight: 600;
}
.border-box p{
    font-size: 16px;
    font-weight: 600;
}
.tab-mobile-view h2{
    font-size: 18px;
    font-weight: 600;
}
.tab-mobile-view .tab-inner-img{
    width:90px 
}
.blue-round-box{
    border-radius: 8px;
    background-color: #ECF3FF;
    border: 1px solid #448AFF;
    padding: 30px;
}
.blue-round-box h2{
    color: #448AFF;
}
.blue-round-box p{
    font-size: 16px;
}
.yellow-round-box{
    border-radius: 8px;
    background-color: #FFFBEB;
    border: 1px solid #FFAB40;
    padding: 30px;
}
.yellow-round-box h2{
    color: #FFAB40;
}
.yellow-round-box p{
    font-size: 16px;
}

.frame-area{
    position: relative;
}
.laptop-frame,
.mobile-frame{
    position: absolute;
    /* border:1px solid #f00; */
}
.laptop-frame{
    width: 100%;
    min-height: 300px;
    top:0;
    box-sizing: border-box;
    background-image: url(../images/macbook-air.svg);
    background-position: left top;
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 1;
}
.laptop-img{
    max-width: 377px;
    height: 239px;
    position: relative;
    top: -12px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.laptop-img img{
    height: 100%;
    object-fit: cover;
}
.mobile-frame{
    width: 100px;
    min-height: 200px;
    top: 15%;
    left: 15%;
    z-index: 2;
    background-image: url(../images/iphone6.svg);
    background-position: left top;
    background-size: 100%;
    background-repeat: no-repeat;
}
.specialise_sec{width:auto;}
.specialise_sec p{padding-top: 20px; margin: 0px;}
.specialise_sec a{margin-top: 40px; display: inline-block;}
    
    
@media only screen and (max-width: 600px) {
    .item_title {
        font-size: 16px;
        line-height: 20px;
    }
}
      

@media only screen and (max-width: 991px) {
    .header ul .nav-item{
        display: inline-block !important;
        margin: 0 10px;
    }
    .frame-area{
        height: 370px;
    }
    .laptop-img {
        max-width: 356px;
        height: 227px;
        position: relative;
        top: -20px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 820px) {
    .fixed-header{
        padding: 0;
    }
    .menu-item-has-children:after, .hasChild:after{
        background-image: none;
        content: unset !important;
    }
    .banner-btn{
        height: 50px;
    }
    .banner-inner{
        padding-bottom: 20px;
    }
    /* .header .navbar,
    .header .navbar .navbar-nav{
        display: block !important;
        text-align: right;
    } */
    .header ul .nav-item{
        display: inline-block !important;
        margin: 0 10px;
    }
    .top-banner h1{
        font-size: 26px;
    }
    .top-banner p{
        margin: 25px 0;
    }
    .client-slider {
        margin: 50px 0;
    }
    .white_box{
        padding: 15px;
    }
    .white_box h3{
        margin-bottom: 15px;
    }
    .white_box p{
        font-size: 16px;
    }
    .project-details{
        margin-top:25px;
        text-align: left;
    }
    .blue-box2 h2,
    .orange-box h2{
        font-size: 18px;
    }
    .orange-box h4,
    .blue-box2 h4{
        font-size: 16px;
    }
    .orange-box p,
    .blue-box2 p{
        font-size: 15px;
    }
    .orange-box button,
    .blue-box2 button{
        padding: 15px 0;
        font-size: 16px;
    }
    .address{
        top:45px;
    }
    .address h4{
        font-size: 50px;
    }
    .address p{
        font-size: 18px;
    }
    .foot-client-img{
        width: 157px;
        height: 157px;
    }
    .testi-text{
        margin-top: 25px;
    }
    .feedbackSlider .swiper-wrapper{
        padding-bottom: 60px;
    }
    .conatct-text h2{
        font-size: 25px;
    }
    .conatct-text p{
        font-size: 15px;
    }
    .gray-bg .nav-tabs{
        margin-top: 0;
    }
    .service-banner{
        padding: 35px 0;
        background-size: cover;
    }
    .service-banner h1 {
        font-size: 35px;
        margin-bottom: 15px;
    }
    .service-banner p {
        font-size: 14px;
        margin-bottom: 30px;
    }
    .service-banner a{
        font-size: 18px;
        min-width: 145px;
        height: 40px;
        line-height: 40px;
    }
    .page-title{
        font-size: 18px;
        margin-bottom: 25px;
    }
    .page-sub-tilte {
        font-size: 16px;
        margin-bottom: 30px;
    }
    .shadow_box h3 {
        font-size: 16px;
    }
    .client-info h4 {
        font-size: 16px;
    }
    .client-info p {
        font-size: 14px;
    }
    .testi-text{
        font-size: 16px;
    }
    .accolades-img{
        width: 60% !important;
    }
    .ecom-banner h1,
    .casino-banner h1,
    .media-banner h1,
    .health-banner h1,
    .edtech-banner h1,
    .fintech-banner h1,
    .banner-2d h1,
    .banner-3d h1,
    .uiux-banner h1,
    .casino-banner h1,
    .enterprise-banner h1,
    .html-banner h1,
    .unity-banner h1,
    .tech-banner h1, 
    .iot-banner h1, 
    .arvrapp-banner h1, 
    .webapp-banner h1, 
    .android-banner h1, 
    .ios-banner h1, 
    .gamification-banner h1, 
    .meta-banner h1, 
    .html-banner h1, 
    .arvr-banner h1, 
    .unreal-banner h1{
        font-size: 20px;
    }
    .ecom-banner p,
    .casino-banner p,
    .media-banner p,
    .health-banner p,
    .edtech-banner p,
    .fintech-banner p,
    .banner-2d p,
    .banner-3d p,
    .uiux-banner p,
    .casino-banner p,
    .enterprise-banner p,
    .iot-banner p,
    .arvrapp-banner p,
    .webapp-banner p,
    .android-banner p,
    .ios-banner p,
    .gamification-banner p,
    .meta-banner p,
    .arvr-banner p,
    .unreal-banner p,
    .html-banner p,
    .unity-banner p {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .ecom-banner a,
    .casino-banner a,
    .media-banner a,
    .health-banner a,
    .edtech-banner a,
    .fintech-banner a,
    .banner-2d a,
    .banner-3d a,
    .uiux-banner a,
    .casino-banner a,
    .enterprise-banner a,
    .iot-banner a,
    .arvrapp-banner a,
    .webapp-banner a,
    .android-banner a,
    .ios-banner a,
    .gamification-banner a,
    .meta-banner a,
    .arvr-banner a,
    .unreal-banner a,
    .html-banner a,
    .unity-banner a{
        height: 35px;
        line-height: 35px;
        font-size: 16px;
        padding: 0 15px;
    }
    .brd-btn{
        padding: 4px;
        font-size: 14px;
    }
    .ecom-banner,
    .casino-banner,
    .media-banner,
    .health-banner,
    .edtech-banner,
    .fintech-banner,
    .banner-2d,
    .banner-3d,
    .uiux-banner,
    .casino-banner,
    .enterprise-banner,
    .iot-banner,
    .arvrapp-banner,
    .webapp-banner,
    .android-banner,
    .ios-banner,
    .gamification-banner,
    .meta-banner,
    .arvr-banner,
    .unreal-banner,
    .html-banner,
    .unity-banner,
    .tech-banner{
        padding: 20px 0;
        min-height: auto;
    }
    .vertical-tab .tab-pane h2{
        font-size: 20px;
    }
    .vertical-tab .tab-pane p{
        font-size: 16px;
    }
    .tab-inner-img {
        width: 90px;
    }
    .strength-area img{
        width: 90px;
    }
    #toolSelect {
        font-size: 14px;
        width: 50%;
    }
    .border-box p{
        font-size: 16px;
    }
}

@media only screen and (max-width: 600px) {
    .white_box{
        padding: 20px;
    }
    .white_box h3{
        font-size: 40px;
    }
    .white_box p{
        font-size: 18px;
    }
    .service-banner{
        padding: 15px 0;
    }
    .service-banner h1{
        font-size: 20px;
    }
    .icon-box-width{
        width: 100px !important;
    }
    .frame-area{
        height: auto;
    }
}
@media only screen and (max-width: 480px) {
    .mob-standard-logo {
        display: inline-block;
        height: 67px !important;
    }
    .top-banner {
        background-repeat: no-repeat;
        background-size: 168%;
        background-position: top center;
    }
    .header ul .nav-item{
        margin: 0 5px;
    }
    .banner-inner{
        padding-top: 0;
        margin-top:-30px;
        padding-bottom: 20px;
        text-align: center;
        background-image: linear-gradient(transparent 0%, rgb(255, 255, 255) 12%);
    }
    .top-banner h1{
        font-size: 24px;
        
    }
    .top-banner p{
        font-size: 12px;
        margin: 0 0 20px 0;
    }
    .banner-btn{
        width: 240px;
        height: 45px;
        font-size: 14px;
    }
    .client-slider {
        margin: 30px 0;
    }
    .page-title {
        font-size: 16px;
        margin-bottom: 24px;
        padding: 0px;
        font-weight: 800;
    }
    .page-sub-tilte{
        font-size: 13px;
        margin-bottom: 20px !important;
    }
    .white_box{
        padding: 20px;
    }
    .white_box h3{
        font-size: 36px;
    }
    .white_box p{
        font-size: 15px !important;
        text-align: left !important;
    }
    .journy-box {
        padding: 20px;
    }
    .journy-box > img{
        margin-bottom: 30px;
        width: 50px;
        height: 50px;
    }
    .number{
        font-size: 25px;
        margin-bottom: 23px;
    }
    .text{
        font-size: 12px;
    }
    .shadow_box{
        padding: 10px;
    }
    .shadow-box h2{
        font-size: 16px;
        margin-bottom: 5px;
    }
    .shadow-box p{
        font-size: 13px;
    }
    .special-section{
        padding: 70px 0 0;
    }
    .special-section h2{
        text-align: center;
        font-size: 35px;
        margin-top: 20px;
    }
    .specialise_sec{text-align: center;}
    .special-section p{
        text-align: center;
        font-size: 14px;
    }
    .gray-bg {
        padding-top: 30px !important;
    }
    .gray-bg .nav-tabs{
        margin-bottom: 18px;
        margin-top: 0;
    }
    .gray-bg .nav-tabs button{
        font-size: 12px;
        padding: 12px 24px;
    }
    .project-details h3{
        text-align: center;
        font-size: 15px;
    }
    .project-details p{
        text-align: center;
        font-size: 14px;
    }
    .techuse span{
        font-size: 12px;
    }
    .techuse span img{
        width: 60%;
    }
    .strength-area p{
        font-size: 16px;
        line-height: 24px;
    }
    .address h4 {
        font-size: 35px;
        margin-bottom: 40px;
    }
    .address p:nth-child(2){
        font-weight: 700;
        font-size: 14px;
    }
    .icon_box{
        width: 65px;
        height: 65px;
    }
    .icon_box img {
        width: 50%;
        height: 40px;
    }
    .shadow_box h3{
        font-size: 15px;
    }
    .shadow_box p{
        font-size: 12px;
    }
    .strength-area img{
        width: 80px;
        height: 80px;
        object-fit: contain;
    }
    .center_nav{
        margin-bottom: 20px !important;
    }
    .center_nav.nav-tabs>li>a{
        font-size: 12px;
        white-space: nowrap;
    }
    .card-deck{
        text-align: center;
    }
    .card-deck .card-title{
        font-size: 11px;
    }
    .blue-box2, .orange-box{
        padding: 10px;
    }
    .blue-box2 h2, .orange-box h2 {
        font-size: 16px;
        padding: 15px 0;
    }
    .blue-box2 h4, .orange-box h4{
        font-size: 15px;
    }
    .blue-box2 p, .orange-box p{
        font-size: 12px;
    }
    .orange-box button, .blue-box2 button{
        font-size: 14px;
        width: 80%;
    }
    .testi-text{
        font-size: 12px;
        margin-top: 40px;
    }
    .testi-text::before{
        width: 25px;
        height: 22px;
        top: -15px;
        left: -28px;
    }
    .feedbackSlider {
        margin-bottom: 30px;
    }
    .feedbackSlider .swiper-wrapper {
        padding-bottom: 50px;
    }
    .feedback-box{
        padding: 30px;
        min-height: 285px;
    }
    .feedback-inner {
        padding-left: 15px;
        padding-top: 0;
    }
    .left-position{
        margin-left: -30px;
    }
    .testimonial-logo{
        width: 70px;
        height: 70px;
    }
    .client-info h4 {
        font-size: 15px;
    }
    .client-info p {
        font-size: 12px;
    }
    .address p {
        font-size: 12px;
    }
    .conatct-text h2 {
        font-size: 24px;
    }
    .conatct-text p {
        font-size: 17px;
    }
    .conatct-text {
        padding-left: 180px;
    }
    .conatct-text::before {
        left: 30px;
        width: 155px;
        height: 165px;
    }
    .contact-form input, .contact-form textarea{
        font-size: 12px;
    }
    .contact-form .file-btn{
        font-size: 12px;
    }
    .form-submit {
        height: 40px;
        font-size: 14px;
        font-weight: 600;
    }
    .foot-client-img{
        width: 150px;
        height: 150px;
        margin-bottom: 30px;
    }
    .footer-bg{
        padding: 50px 0 120px 0 ;
        background-image: url(../images/footer-bg-mobile.png);
    }
    /* .footer-bg{
        background-image: url(../images/footer-bg.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        padding:  80px 0 180px 0;
    } */
    .special-section{
        background-image: url(../images/special-bg-mobile.png);
    }
    .gray-bg .nav-tabs::-webkit-scrollbar{
        width:5px;
        height:3px;
        border-radius:5px;
    }
    .gray-bg .nav-tabs::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius:5px;
    }
    .gray-bg .nav-tabs::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        border-radius:5px;
    }
    .overview-tech{
        font-size: 14px;
    }
    .overview-tech img {
        max-width: 90px;
    }
    .tech-box{
        font-size: 14px;
        padding: 20px;
    }
    .tech-box h3{
        font-size: 18px;
    }
    .cta-section{
        padding: 25px 0;
    }
    .cta-section h2{
        font-size: 25px;
    }
    .cta-section img{
        width: 80px;
    }
    .cta-section h4{
        font-size: 20px;
    }
    .cta-section p{
        font-size: 12px;
    }
    .ecom-banner h1,
    .casino-banner h1,
    .media-banner h1,
    .edtech-banner h1,
    .fintech-banner h1,
    .banner-2d h1,
    .banner-3d h1,
    .uiux-banner h1,
    .casino-banner h1,
    .enterprise-banner h1,
    .html-banner h1,
    .unity-banner h1,
    .tech-banner h1, 
    .iot-banner h1, 
    .arvrapp-banner h1, 
    .webapp-banner h1, 
    .android-banner h1, 
    .ios-banner h1, 
    .gamification-banner h1, 
    .meta-banner h1, 
    .html-banner h1, 
    .arvr-banner h1, 
    .unreal-banner h1{
        font-size: 20px;
    }
    .ecom-banner p,
    .casino-banner p,
    .media-banner p,
    .edtech-banner p,
    .fintech-banner p,
    .banner-2d p,
    .banner-3d p,
    .uiux-banner p,
    .casino-banner p,
    .enterprise-banner p,
    .iot-banner p,
    .arvrapp-banner p,
    .webapp-banner p,
    .android-banner p,
    .ios-banner p,
    .gamification-banner p,
    .meta-banner p,
    .arvr-banner p,
    .unreal-banner p,
    .html-banner p,
    .unity-banner p {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .ecom-banner a,
    .casino-banner a,
    .media-banner a,
    .edtech-banner a,
    .fintech-banner a,
    .banner-2d a,
    .banner-3d a,
    .uiux-banner a,
    .casino-banner a,
    .enterprise-banner a,
    .iot-banner a,
    .arvrapp-banner a,
    .webapp-banner a,
    .android-banner a,
    .ios-banner a,
    .gamification-banner a,
    .meta-banner a,
    .arvr-banner a,
    .unreal-banner a,
    .html-banner a,
    .unity-banner a{
        height: 35px;
        line-height: 35px;
        font-size: 16px;
        padding: 0 15px;
    }
    .brd-btn{
        padding: 4px;
        font-size: 14px;
    }
    .ecom-banner,
    .casino-banner,
    .media-banner,
    .edtech-banner,
    .fintech-banner,
    .banner-2d,
    .banner-3d,
    .uiux-banner,
    .casino-banner,
    .enterprise-banner,
    .iot-banner,
    .arvrapp-banner,
    .webapp-banner,
    .android-banner,
    .ios-banner,
    .gamification-banner,
    .meta-banner,
    .arvr-banner,
    .unreal-banner,
    .html-banner,
    .unity-banner,
    .tech-banner{
        padding: 20px 0;
        min-height: auto;
    }
    .youtube-video{
        height: 390px !important;
    }
    .gallery_product:hover .hover_btn{
        transform: translate(0px, -124px);
    }
    #toolSelect{
        width: 100%;
    }
    .error{
        font-size: 12px;
    }
    .yellow-point h3, .blue-point h3{
        font-size: 16px;
    }
}