
@media only screen and (min-width: 1400px){

}
@media only screen and (min-width: 1800px){

}


@media only screen and (min-width: 2501px){

}


@media (min-width: 768px){
.header .mobile-buttons{ display:none;}
.mobile-contact-box{ display:none;}
.hero-bg.mobile{ display:none;}

}

@media only screen and (max-width: 2500px){


}
@media only screen and (max-width: 1399px){

}
@media only screen and (max-width: 1300px){

}

@media (max-width: 1199px){

}



@media (max-width: 990px){
.mid-header .heder-logo {display: block; width: 50%;}
.mid-header .heder-logo img {width: 100px;}
.mid-header .header-menu {width: auto; order: 2;}

.mid-header {padding: 4px 0;}
.header-menu button.navbar-toggler {display: inline-block; float:right; padding: 0; position: relative; box-shadow: none;}
.header-menu button.navbar-toggler.collapsed span.navbar-toggler-icon::before, .header-menu button.navbar-toggler.collapsed span.navbar-toggler-icon::after {content: ""; width: 25px; height: 2px; background: #fff; position: absolute; left: 5px; top: 7px; transform: rotate(0deg);}
.header-menu button.navbar-toggler.collapsed span.navbar-toggler-icon::after{ top: 22px;}
.header-menu button.navbar-toggler.collapsed span.navbar-toggler-icon span {width: 35px; height: 2px; background: #fff; display: inline-block; position: absolute; top: 15px; right: 0;}

.header-menu button.navbar-toggler span.navbar-toggler-icon::before, .header-menu button.navbar-toggler span.navbar-toggler-icon::after {content: ""; width: 30px;
height: 2px; background: #fff; position: absolute; left: 0; top: 7px;}
.header-menu button.navbar-toggler span.navbar-toggler-icon::after{ top: 14px; transform: rotate(-45deg);}
.header-menu button.navbar-toggler span.navbar-toggler-icon::before{transform: rotate(45deg); top: 14px;}
.header-menu button.navbar-toggler span.navbar-toggler-icon span { display:none;}

.menu {position: absolute; left: 0; top: 0; height: 100vh;}
.header-menu .navbar .navbar-collapse {position: fixed; left: 0; width: 40%; height: 100vh; background: #fff; z-index: 999; display: block; transform: translate(-800px, 0px); transition: all 0.5s ease; background: #fff;  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; padding: 15px;}
.header-menu nav.navbar{ display:block;}
.header-menu .navbar .navbar-collapse .menu-logo {border-bottom: 1px solid #324671; padding: 0 0 10px 0; display: block; margin-bottom: 10px;}
.header-menu .navbar .navbar-collapse .menu-logo img {width: 110px;}
.header-menu .navbar .navbar-collapse.show {transform: translate(0px, 0px); transition: all 0.5s ease; background: #000000;}
.header-menu .navbar .navbar-collapse ul.navbar-nav {margin: 0 !important; padding: 0; display: block;}
.header-menu .navbar .navbar-collapse ul.navbar-nav .nav-item {border-bottom: 1px solid #3d3d3d;  margin: 0; padding:5px 0;}
.header-menu .navbar .navbar-collapse ul.navbar-nav a.nav-link {border: none; font-size: 15px; font-weight: 600; padding: 10px 10px; text-transform: uppercase;}
.header-menu .navbar .navbar-collapse ul.navbar-nav a.nav-link.active, .header-menu .navbar .navbar-collapse ul.navbar-nav a.nav-link:hover{ color: #ff6b35;}
.header-menu .navbar .navbar-collapse ul.navbar-nav a.nav-link.dropdown-toggle::after {position: absolute; right: 0; top: 15px; width: 25px; height: 25px; margin: 0; content: "\f107"; font-family: 'FontAwesome'; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0; left: auto; color: #fff; background: #ff6b35;}
.header-menu .navbar .navbar-collapse ul.navbar-nav li.show a.nav-link.dropdown-toggle::after {content: "\f106";}
.header-menu .navbar ul.navbar-nav li.dropdown ul.dropdown-menu {width: 100%; left: 0; margin: 0px 0 10px 0; border: none; padding: 0 10px; box-shadow: none; position: static; border-radius: 0; background: transparent;}
.header-menu .navbar ul.navbar-nav li.dropdown ul.dropdown-menu li{ width:100%; margin:0; padding: 0; border-color: #3d3d3d;}
.header-menu .navbar ul.navbar-nav li.dropdown ul.dropdown-menu li a.dropdown-item{font-weight: 600; color: #fff;}
.header-menu .navbar ul.navbar-nav li.dropdown ul.dropdown-menu li:last-child{ border:none;}
.header-menu .navbar ul.navbar-nav li a.login-btn{margin: 10px 0 0 0; text-align: center;}


.header-menu .navbar ul.navbar-nav li.dropdown ul.dropdown-menu h6.title{    margin: 10px 0px 0;}
.header-menu .navbar ul.navbar-nav li.dropdown ul.dropdown-menu .header-menu .navbar ul.navbar-nav li.dropdown ul.dropdown-menu {margin-bottom: 5px;}

.header-menu .menu-btn{ display:block;}
.navbar-collapse .menu-btn {margin: 15px 0 0 0;}
.navbar-collapse .menu-btn a {width: 100%; background: #ff6b35; padding: 15px; border-radius: 30px; display: block; text-align: center; color: #fff; font-size: 16px; margin: 0 0 5px;}
.navbar-collapse .menu-btn a .fa {padding: 0 10px 0 0;}





}
@media (max-width: 800px){

}

@media (max-width: 767px){
.header .header-right{ display:none;}





}



@media (max-width: 639px){
p{font-size: 15px;}
.row{ margin:0;}
.btn-default{width: 100%; margin: 0 0 10px 0;}

.sec-title, .start-adventure .mid-content h2 {font-size: 24px;}

.heder-logo a img {width: 30px;}
section.header.sticky-header{ background:#000;}
section.header{background:#00000063;}
section.header.sticky-header .heder-logo a img {width: 100px;}
.header-menu .navbar .navbar-collapse{ width:85%;}

section.home-banner {text-align: center; align-items: end; padding: 0 0 20px 0; height: 50vh;}
.home-bnr-content h1{font-size: 36px; line-height: 42px;}
.home-bnr-content hr {margin: 10px auto;}
.home-bnr-content p{font-size: 16px;}

.home-services .img-box-content{    margin: 0 0 20px 0;}
.home-services .img-box-content p.white {display: none;}

.home-bnr-content .button-box { margin: 15px 0;}
.home-bnr-content a.btn-default{width: 50%; min-width: inherit; justify-content:center; font-size: 14px; padding: 17px 10px;}
.home-bnr-content .count{ display:none;}


.home-services, section.count, .why-choose, .brands-box, .sec-contact, .our-story, .our-team, .our-services, .service-overview, .key-features, .how-work, .how-works-page, .page-contact{ padding:30px 0;}
h2.sec-title{font-size: 30px;}
.services-grid{margin: 0 0 20px 0;}

.work-process{margin: 0 0 20px 0;}
.pt-5 {padding-top: 2rem !important;}

.why-choose .heading-box{text-align: center;}
.why-choose .heading-box .top-title {margin: 0 auto;}
.why-choose .heading-right-text{margin: 5px 0 5px 0;}
.bg-content-box .align{display: block;}
.bg-content-box .content-box{text-align: center;}
.btn-default{padding: 15px 10px;}
.brands-box .brand-details{    margin-bottom: 15px;}
.brands-box .count {margin: 30px 0; overflow: hidden; padding: 20px;}
.brands-box .count .align {display: block;}
.brands-box .count .count-info{width: 50%; float: left;}
.brands-box .count .count-info .number { font-size: 30px;}
.brands-box .count .count-info p.counter-title{font-size: 12px;}
.brands-box .img-content{margin-bottom: 20px;}
.brands-box .img-content::before{height: 100%;}

.left-box .response-box{margin: 20px 0;}
.contact-right {padding: 20px;}


.btn-box {display: grid; gap: 10px;}
.btn-box a {width: 100%; text-align: center;}


section.footer{ padding:30px 0 0 0px;}
section.footer .col-sm-3, .footer .col-sm-3.links, .footer .col-sm-3.service{ width:100%;}
.footer-content a.ftr-logo img{ width: 160px; margin: 0 10px 20px 0;}
section.footer ul li {padding: 10px 0 10px 0;}
section.footer .col-sm-3 .footer-content p{ font-size:14px;}
section.footer .col-sm-3 .footer-content {margin-bottom: 20px; border-bottom: 1px solid #ffffff5e; padding: 0 0px 15px;}
.footer-content ul.socail-link {margin: 20px 0 0px 0;}
.btm-ftr p.copyright{ text-align:center;}
section.footer .btm-ftr ul {text-align: center; margin:0 0 10px 0;}
section.footer .col-sm-3.ratings .footer-content {border: none;}
.btm-ftr .btm-ftr-content {display: block;}

.btm-ftr{padding: 0px 0px 15px; margin: 0 0 0 0;}

.scrollup{right: 20px; bottom: 30px; display:none;}
.inner-banner {height: 250px; background-position: center center !important;  background-size: cover !important;}
.inner-banner .banner-overlay{align-items: end; padding: 0 0 30px 0;}
.inner-bnr-content h1{font-size: 24px;}
.inner-bnr-content p {font-size: 13px;}

.our-story .align{padding: 20px 0 0 0px;}
.our-story .count {margin: 10px 0 0 0;}
.our-story .count .align{display: inline-block;}
.our-story .count .count-info{width: 48%; float: left; margin: 3px; padding: 10px;}
.our-story .count .count-info .number{font-size: 42px;}
.our-story .count .count-info p.counter-title{font-size: 12px;}

.our-team .team-box{margin-bottom: 20px;}


.experts, .our-journey{padding:30px 0;}
.experts .tech-box{margin: 0 0 10px 0;}
.our-journey .timeline-item.right{left: 0;}
.our-journey .timeline-item{ padding:0 30px;}
.our-journey .timeline-item.left {border-left: 2px solid #eee; border-right:0;}
.our-journey .timeline-item::after { left: -7px;}

.about-page-choose .choose-item .icon {width: 90px; height: 60px;}
.about-page-choose .box-icon-text{ width:100%; left: 0px !important;}

.our-service, .how-works{padding:30px 0;}
.service-content h2 {font-size: 24px;}
.our-service .service-img-box img{margin: 0 0 20px 0;}
.service-content{gap: 10px;}
.our-service .row {margin-bottom: 40px;}
.service-content .price-box {display: block; margin: 10px 0;}
.service-content .btn-box a {text-align: center;}
.our-service .col-md-6.order {order: inherit;}

.how-works .works-des{height: auto; margin: 0 0 15px 0;}

.service-overview .align {height: 100%; padding: 20px 0 0 0px;}
.service-overview .heading-box {margin: 0 0 5px;}
h3.sec-title {font-size: 24px;}
.service-overview .content-box ul li {width: 100%; font-size: 16px;}
.feature-box{margin: 0 0 10px 0;}
.faq-content-cox {margin: 50px 0 0 0;}
.faq-content-cox .heading-box {text-align: left;}

.page-contact .row .col-md-5{padding: 30px;}
.page-contact .row .col-md-7 {border-top: 1px solid #ddd; border-left: none;}

}

@media (max-width: 479px){

}




@media (max-width: 375px){


}
@media (max-width: 320px){

}



