
@media only screen and (max-width: 1650px) {
  .logo-text.mt-0{
    font-size: 18px;
  }
  .brand-hero-section {
    padding: 0 0 415px 0;
}
}

@media only screen and (max-width: 1400px) {
  .logo-text.mt-0 {
    font-size: 18px;
}
  .main-section-bg {
    background-position: 1% -276%, 0 0;
    background-size: 50%, 36%;
}
  .feature-content h1 {
    font-size: 14px;
    padding-top: 10px;
  }
  .feature-content p {
    font-size: 11px;
    padding: 10px 0px 0px 25px;
  }
  .counter-content h3 {
    font-size: 70px;
  }
  .join-waitlist{
    margin: -82px 18%;
  }
  .footer-menu.px-5{
    padding: 0 30px !important;
  }
  .hero-brand-section {
    background-position: center 0px;
}
.brand-section1-img {
  position: absolute;
  left: 40%;
  top: 12%;
}
}

/*-------- Big tablet view -------------*/
@media only screen and (max-width: 1024px) {
  .main-section-bg {
    background-position: 0% 11% ,0 0;
    background-size: 60%, 53%;
}
  .section1-heading-wrap {
    margin-left: 30px;
    margin-top: 30px;
  }
  .section-main-content {
    margin-top: 30px;
  
  }
  .logo-text{
    margin-top: 25px;
  }
  .slogun{
    margin-top: 25px;
  }
  .navbar-nav{
    margin-right: 50px;
  }
  .counter {
    height: 215px;
  }
  .counter .one,.counter .two,.counter .three {
    left: 25px;
  }
  .counter-content h3 {
    font-size: 65px;
  }
  .counter-content p{
    font-size: 15px;
  }
  .logo-text.mb-5 {
    margin: 0 0 20px 0 !important;
}
  .join-waitlist {
    margin: -82px 16%;
    width: 700px;
    height: 250px;
}
.footer-menu.px-5{
  padding: 0 15px !important;
}
.footer-menu{
  font-size: 12px;
}
.buy-btn{
  margin-top: 35px;
}
.brand-section-bg{
  background-size: 40%;
}
.brand-hero-section {
  padding: 0 0 235px 0;
}
.brand-main-logo {
  margin: 1px 100px;
}
.brand-section1-img {
  position: absolute;
  left: 42%;
  top: 7%;
}
}
/*-------- tablet view -------------*/
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .logo-text.mt-0 {
    font-size: 10px;
}

  .join-waitlist {
    margin: -82px 17%;
    width: 500px;
    height: 260px;
}
.logo-text.mb-5 {
  font-size: 20px;
}
.main-section-bg {
  background-position: center top ,0 0;
  background-size: 80%, 0%;
}
  .section_title h3{
    text-align: center;
  }
  .section3-img{
    text-align: center;
  }
  .counter-content h3 {
    font-size: 50px;
  }
  .counter-content p {
    font-size: 13px;
  }
  .footer-menu.px-5 {
    padding: 0 7px !important;
}
.col-lg-11.col-sm-11.col-12.align-items-center{
  display: flex;
}
.brand-hero-section {
  padding: 0 0 105px 0;
}
.brand-section-main-content {
  margin: 11px 0px;
}.section1-heading-wrap {
  margin-top: 10px;
}
.brand-section1-img {
  position: absolute;
  left: 44%;
  top: 6%;
  width: 50%;
}
}
/*---------- mobile view -------------*/
@media only screen and (max-width: 767px) {
  .logo-text.mt-0 {
    font-size: 10px;
}
  .navbar-nav {
    margin-right: 0;
  }
  nav ul li {
    margin: 5px 0 0 30px;
  }
  .section1-heading-wrap p {
    font-size: 20px;
  }
  .section1-heading {
    font-size: 30px;
  }
  .logo-text {
    margin-top: 20px;
  }
    
  .logo-text{
    font-size: 20px;
  }
  .slogun {
    margin-top: 10px;
    margin-bottom: 15px;
  }
  .counter {
    height: 140px;
  }
  .counter-content h3 {
    font-size: 25px;
  }
  .counter-content p {
    font-size: 11px;
  }
  .counter .one, .counter .two, .counter .three {
    left: 15px;
    width: 3px;
  }
  .counter .one{
    height: 90px;
  }
  .counter .two{
    height: 110px;
  }
  .counter .three{
    height: 100px;
  }
  .ss:before {
    width: 20px;
    height: 20px;
    left: -9px;
    transform: rotate(45deg);
  }
  .ss:after {
    left: -7px;
    transform: rotate(45deg);
  }
  .col-lg-2.col-md-2.col-sm-4.col-4.my-5{
    margin: 15px 0 !important;
    padding: 10px 0 !important;
  }
  .join-waitlist {
    margin: -42px 16%;
    width: 290px;
    height: 290px;
}
.logo-text {
  font-size: 14px;
}
.waitlist-content{
  font-size: 14px;
}
.buy-btn {
  margin-top: 5px !important;
}
.footer-menu.px-5{
  margin: 10px 0;
}
nav ul li{
  padding: 10px;
  margin: 0;
}
.brand-section-main-content {
  margin: 0;
  text-align: center;
}
.hero-brand-section {
  background-position: 80% 0px;
}
.brand-section1-img {
  left: 2%;
}
  .icon-block{
    display: none;
  }
  .icon-none{
    display: block;
    visibility: visible;
  }
  .order-2 {
    order: 1 !important;
  }
  .order-1 {
    order: 2 !important;
  }
  .brand-section-bg {
    background-size: 80%;
}
}

@media only screen and (max-width: 480px) {
  nav.navbar {
    padding: 25px 0px;
  }
  .section1-heading {
    font-size: 24px;
  }
  .logo-text {
    font-size: 17px;
  }
  .col-lg-11.col-sm-11.col-12.align-items-center{
    display: block;
    text-align: center;
  }
  .col-lg-1.col-sm-1.col-12 img{
    width: 20%;
  }
  .col-sm-7.col-12.text-right{
    text-align: center !important;
  }
  .col-sm-4.col-12.social-icons.text-right{
    text-align: center !important;
  }
  .slogun {
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 16px;
  }
  .section1-heading-wrap {
    margin-left: 0;
    margin-top: 10px;
    text-align: center;
  }
  .section1-heading-wrap p {
    font-size: 16px;
  }
  .about_us_info p {
    font-size: 11px;
  }
  div#navbarNavAltMarkup {
    background: #000;
    color: #fff;
    position: absolute;
    top: 70px;
    left: -22rem;
    z-index: 999;
    width: 406px;
    padding: 10px;
  }
  .main-section-bg {
    background-position: 50px 70px,0 0;
    background-size: 90%, 93%;
}
  .navbar-nav {
    align-items: center;
    flex-direction: column !important;
    align-items: center;
  }
  .hb_logo-header {
    position: relative; 
  }
  .counter .one, .counter .two, .counter .three {
    left: 10px;
    width: 2px;
  }


 
}
@media only screen and (max-width: 450px) {


}
@media only screen and (max-width: 400px) {
  .join-waitlist {
    margin: -42px 13%;
  }
 
}
@media only screen and (min-width:390px) and (max-width: 370px) {

}

@media only screen and (max-width: 360px) {

  
}
@media only screen and (max-width: 330px) {
  
}
