@media (max-width: 992px) {
.hero {
padding-top:120px;
min-height:0
}

/* Solutions sub-pages: page-specific mobile head banner photo instead of
   the shared bg_home.png pattern */
.hero-visitor {
background:url(../image/visitor_manage_headbanner-mobile.webp) center center / cover no-repeat
}

.hero-conference {
background:url(../image/conf_book_img-mobile.webp) center center / cover no-repeat
}

.hero-hrms {
background:url(../image/hrms_dash-mobile.webp) center center / cover no-repeat
}

.hero-car-parking {
background:url(../image/car_parking_head-mobile.webp) center center / cover no-repeat
}

.hero-hot-desk {
background:url(../image/hot_desk_dash-mobile.webp) center center / cover no-repeat
}

.navbar {
position:relative;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
padding:16px 20px
}

.menu-toggle {
display:flex;
flex:0 0 auto;
width:32px;
height:32px;
align-items:center;
justify-content:center
}

/* Mobile menu: a compact card anchored to the right, below the hamburger
   — not a full-width panel stretching the whole navbar. .mobile-menu-panel
   wraps <nav> + the login/demo button; on desktop it's display:contents
   (see base stylesheet) so it doesn't affect desktop layout at all. */
.mobile-menu-panel:has(nav.active) {
display:flex;
flex-direction:column;
position:absolute;
top:calc(100% + 12px);
right:0;
width:280px;
max-height:calc(100vh - 110px);
overflow-y:auto;
background:#fff;
border-radius:16px;
box-shadow:0 14px 34px #092c522e;
padding:18px 20px;
gap:4px;
z-index:20
}

nav {
display:none;
width:100%;
flex-direction:column;
align-items:stretch;
justify-content:center;
gap:18px;
margin-top:16px;
order:3
}

nav.active {
display:flex;
margin-top:0;
gap:2px
}

nav > a,.drop-btn {
width:100%;
padding:8px 4px
}

.login-btn {
display:none;
order:4;
width:100%;
text-align:center;
margin-top:10px
}

.login-btn.active {
display:block
}

.dropdown-content {
position:static;
transform:none;
width:100%;
grid-template-columns:1fr;
opacity:1;
visibility:visible;
display:none;
margin-top:12px;
box-shadow:0 8px 20px #0000000d;
padding:20px;
pointer-events:auto
}

.dropdown-content.resources-dropdown {
width:100%
}

.resources-grid {
grid-template-columns:1fr
}

.dropdown:hover .dropdown-content {
display:grid;
top:auto
}

.hero-content h1 {
font-size:42px
}

.hero-content p {
font-size:18px
}

.problems-section h2 {
font-size:40px
}

.cards {
grid-template-columns:1fr 1fr
}

.cards .card,.cards .card:nth-child(4),.cards .card:nth-child(5) {
grid-column:auto
}

header.scrolled .logo img {
width:140px
}

.modules-section > h2 {
font-size:36px
}

.module-row {
gap:40px;
margin-bottom:70px
}

.module-content h3 {
font-size:26px
}

.integrations-row {
gap:40px;
padding:40px
}

.integrations-image img {
max-width:320px
}

.integrations-content h2 {
font-size:32px;
white-space:normal
}

.industries-section h2 {
font-size:36px
}

.industries-grid {
grid-template-columns:repeat(6,1fr)
}

.industries-grid .industry-item {
grid-column:span 2
}

.industries-grid .industry-item:nth-child(10) {
grid-column:2 / 4
}

.blogs-section h2 {
font-size:36px
}

.blog-card {
flex-basis:calc((100% - 28px) / 2);
max-width:calc((100% - 28px) / 2)
}

.faq-content h2 {
font-size:34px
}

.faq-row {
gap:40px
}

.app-header h2 {
font-size:40px
}

.app-wrapper {
grid-template-columns:1fr
}

.mobile-preview {
order:-1;
margin-bottom:30px
}

.feature-column {
gap:25px
}

.footer-top {
grid-template-columns:1fr;
gap:40px
}

.footer-bottom {
flex-direction:column;
gap:20px;
text-align:center
}
}

@media (max-width: 768px) {
.hero {
padding-top:100px
}

header {
padding:10px 10px 16px
}

.navbar {
padding:12px 16px;
border-radius:14px
}

.hero-content {
margin-top:30px
}

.hero-content h1 {
font-size:34px
}

.hero-content p {
font-size:16px
}

.hero-buttons {
flex-direction:column;
align-items:center
}

.primary-btn,.secondary-btn,.btn-light,.view-all-btn {
width:100%;
max-width:320px;
justify-content:center;
text-align:center;
margin-left:auto;
margin-right:auto
}

.home_dash {
margin-top:40px;
margin-bottom:40px
}

.problems-section {
padding:50px 20px 60px
}

.problems-section h2 {
font-size:32px
}

.section-desc {
font-size:16px
}

.cards {
grid-template-columns:1fr
}

.cards .card,.cards .card:nth-child(4),.cards .card:nth-child(5) {
grid-column:auto
}

.card h3 {
font-size:22px
}

.card p {
font-size:15px
}

.home_dash img {
width:100%;
border-radius:16px
}

header.scrolled .logo img {
width:130px
}

.modules-section {
padding:40px 16px 70px
}

.modules-section > h2 {
font-size:30px
}

.module-row,.module-row.reverse {
flex-direction:column;
gap:16px;
margin-bottom:40px;
text-align:center
}

.module-content p {
max-width:none
}

.module-buttons {
flex-direction:column;
align-items:center
}

.module-image {
padding:0
}

.module-image img {
max-width:80%;
margin:0 auto
}

.integrations-section {
padding:60px 16px
}

.integrations-row {
flex-direction:column;
text-align:center;
gap:30px;
padding:30px 20px
}

.integrations-content {
max-width:none
}

.integrations-image {
position:static;
width:100%;
min-width:0;
display:flex;
justify-content:center
}

.integrations-image img {
max-width:280px
}

.integrations-content h2 {
font-size:28px;
white-space:normal
}

.integrations-content p {
max-width:none
}

.industries-section {
padding:50px 20px 60px
}

.industries-section h2 {
font-size:30px
}

.industries-grid {
grid-template-columns:repeat(2,1fr);
gap:35px 16px
}

.industries-grid .industry-item,.industries-grid .industry-item:nth-child(10) {
grid-column:auto
}

.blogs-section h2 {
font-size:30px
}

.blog-card {
flex-basis:100%;
max-width:100%
}

.faq-section {
padding:60px 16px
}

.faq-row {
flex-direction:column;
gap:30px
}

.faq-content {
max-width:none;
text-align:center
}

.faq-content h2 {
font-size:30px
}

.app-section {
padding:35px 25px
}

.app-header h2 {
font-size:32px
}

.feature-card {
flex-direction:column;
align-items:center;
text-align:center
}

.feature-card h4 {
font-size:18px
}

.feature-card p {
font-size:15px
}

.mobile-preview img {
width:270px
}
}

@media (max-width: 576px) {
.hero {
padding-top:90px
}

header {
padding:8px
}

.navbar {
padding:10px 14px;
border-radius:12px
}

.logo img {
width:130px
}

nav {
gap:10px
}

nav > a,.drop-btn {
font-size:13px
}

.login-btn {
padding:8px 16px;
font-size:13px
}

.hero-content h1 {
font-size:28px
}

.hero-content p {
font-size:15px
}

.problems-section h2 {
font-size:28px
}

.industries-section h2 {
font-size:26px
}

.blogs-section h2 {
font-size:26px
}

header.scrolled .logo img {
width:115px
}
}