@media only screen and (max-width:767px){.hidden-xs-only{display:none!important}}
@media only screen and (min-width:768px){.hidden-sm-and-up{display:none!important}}
@media only screen and (min-width:768px) and (max-width:991px){.hidden-sm-only{display:none!important}}
@media only screen and (max-width:991px){.hidden-sm-and-down{display:none!important}}
@media only screen and (min-width:992px){.hidden-md-and-up{display:none!important}}
@media only screen and (min-width:992px) and (max-width:1199px){.hidden-md-only{display:none!important}}
@media only screen and (max-width:1199px){.hidden-md-and-down{display:none!important}}
@media only screen and (min-width:1200px){.hidden-lg-and-up{display:none!important}}
@media only screen and (min-width:1200px) and (max-width:1919px){.hidden-lg-only{display:none!important}}
@media only screen and (max-width:1919px){.hidden-lg-and-down{display:none!important}}
@media only screen and (min-width:1920px){.hidden-xl-only{display:none!important}}

/* Top Navigation Responsive */
.top-navigation-desktop-nav{display:flex}
.top-navigation-mobile-nav{display:none}

@media only screen and (max-width:767px){
  .top-navigation-container{padding:0 12px!important}
  .top-navigation-container .ant-row{padding:0 12px!important}
  .top-navigation-desktop-nav{display:none!important}
  .top-navigation-mobile-nav{display:flex!important}
}

/* Hero Section Mobile Responsive */
@media only screen and (max-width:767px){
  .hero-section{padding-top:100px!important;padding-bottom:60px!important}
  .hero-section h1{font-size:36px!important}
  .hero-section .hero-subtitle{font-size:16px!important;margin-bottom:32px!important}
  .hero-section .hero-buttons{flex-direction:column!important;gap:12px!important;margin-bottom:48px!important}
  .hero-section .hero-buttons button{width:100%!important;height:48px!important;font-size:16px!important}
  .hero-section .hero-stats{flex-direction:column!important;gap:12px!important;padding:0 16px!important}
  .hero-section .hero-stats>div{min-width:auto!important;width:100%!important;padding:16px 24px!important;flex-direction:row!important;justify-content:center!important}
  .hero-section .hero-stats>div>div:first-child{font-size:24px!important;margin-bottom:0!important;margin-right:12px!important}
  .hero-section .hero-preview{margin-top:10px!important}
  .hero-section .hero-tag{margin-bottom:24px!important}
}

@media only screen and (min-width:768px) and (max-width:991px){
  .hero-section h1{font-size:48px!important}
  .hero-section .hero-stats{flex-wrap:wrap!important}
  .hero-section .hero-stats>div{min-width:140px!important;padding:16px 28px!important}
}