/* ================================================================
DatanXzen – Comprehensive Mobile & Responsive Fix (mobile-fix.css)
Version: 2.0
Breakpoints:
Mobile : 320px – 767px
Tablet : 768px – 1024px
Desktop : 1025px and above
Load AFTER style.css in :
================================================================ */
/* ================================================================
0. GLOBAL RESET – prevent horizontal scroll, box-model safety
================================================================ */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
overflow-x: hidden !important;
max-width: 100vw;
width: 100%;
}
img, video, iframe, svg {
max-width: 100% !important;
height: auto !important;
}
/* Prevent any section from causing horizontal overflow */
section,
.section,
header,
footer,
main,
.container,
.container-fluid {
max-width: 100%;
}
/* Remove body padding added by style-6/style-9 themes on mobile */
@media (max-width: 1024px) {
body.style-6,
body.home-style-9 {
padding: 0 !important;
}
}
/* ================================================================
1. NAVBAR – style-9 (all pages – mobile hamburger menu)
================================================================ */
@media (max-width: 991px) {
/* Sticky navbar: ensure it doesn't overlap content */
.navbar {
position: relative !important;
}
/* Logo sizing */
.navbar .navbar-brand {
max-width: 160px !important;
}
.navbar .navbar-brand img {
max-width: 150px !important;
height: auto !important;
}
/* Toggler visibility on dark backgrounds */
.navbar.navbar-dark .navbar-toggler {
border-color: rgba(255,255,255,0.4) !important;
}
.navbar.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* style-9 navbar collapse panel */
.navbar.style-9 .navbar-collapse {
background-color: #010825;
padding: 10px 15px 20px;
border-radius: 0 0 12px 12px;
margin-top: 8px;
max-height: 80vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Nav links */
.navbar.style-9 .navbar-nav .nav-item .nav-link {
margin: 6px 0 !important;
padding: 10px 0 !important;
font-size: 14px !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
line-height: 1.5 !important;
}
/* Dropdown menus inside mobile nav */
.navbar .dropdown-menu {
position: static !important;
float: none !important;
width: 100% !important;
box-shadow: none !important;
background: rgba(255,255,255,0.06) !important;
border: none !important;
border-radius: 8px !important;
padding: 5px 0 5px 10px !important;
margin-top: 5px !important;
}
.navbar .dropdown-menu .dropdown-item {
color: rgba(255,255,255,0.8) !important;
font-size: 13px !important;
padding: 8px 12px !important;
white-space: normal !important;
line-height: 1.4 !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.navbar .dropdown-menu .dropdown-item:last-child {
border-bottom: none !important;
}
.navbar .dropdown-menu .dropdown-item:hover {
background: rgba(0,146,248,0.2) !important;
color: #fff !important;
}
/* Request Demo button – full width on mobile */
.navbar .nav-side .btn,
.navbar .nav-side .btns .btn {
width: 100% !important;
text-align: center !important;
margin: 12px 0 0 !important;
padding: 10px 20px !important;
font-size: 14px !important;
}
/* Inner page navbar (style-11) - same treatment */
header.about-page-sec.style-11 .navbar.style-9 .navbar-collapse {
background-color: #010825;
}
}
@media (max-width: 576px) {
.navbar .navbar-brand {
max-width: 130px !important;
}
.navbar .navbar-brand img {
max-width: 120px !important;
}
}
/* ================================================================
2. MEGA MENU – mobile collapse fix
================================================================ */
@media (max-width: 991px) {
.navbar .mega-menu .dropdown-menu {
position: static !important;
width: 100% !important;
padding: 10px 5px !important;
box-shadow: none !important;
background: rgba(0,0,0,0.2) !important;
border-radius: 8px !important;
margin-top: 5px !important;
}
.mega-menu-content {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.mega-column h5 {
font-size: 13px !important;
margin-bottom: 8px !important;
}
.mega-column a {
padding: 7px 8px !important;
font-size: 13px !important;
}
.mega-column a span { font-size: 13px !important; }
.mega-column a small { font-size: 11px !important; }
.mega-cta {
padding: 15px !important;
}
.mega-cta h4 {
font-size: 16px !important;
margin-bottom: 8px !important;
}
.mega-cta p {
font-size: 13px !important;
line-height: 1.5 !important;
margin-bottom: 12px !important;
}
}
/* ================================================================
3. HERO HEADER (style-9 homepage)
================================================================ */
@media (max-width: 1024px) {
header.style-9 .content.section-padding {
padding: 60px 0 50px !important;
}
header.style-9 .info h1 {
font-size: 36px !important;
line-height: 1.3 !important;
}
header.style-9 .info ul li {
font-size: 15px !important;
padding-left: 40px !important;
}
}
@media (max-width: 991px) {
header.style-9 .content.section-padding {
padding: 50px 0 40px !important;
}
header.style-9 .info h6 {
font-size: 12px !important;
margin-bottom: 10px !important;
}
header.style-9 .info h1 {
font-size: 28px !important;
line-height: 1.35 !important;
margin-bottom: 20px !important;
}
header.style-9 .info h1 br {
display: none !important;
}
header.style-9 .info ul li {
font-size: 14px !important;
margin: 8px 0 !important;
padding-left: 35px !important;
}
/* CTA buttons – stack vertically */
header.style-9 .btns {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-top: 25px !important;
align-items: flex-start !important;
}
header.style-9 .btns .btn {
width: 100% !important;
max-width: 320px !important;
text-align: center !important;
margin-right: 0 !important;
}
/* Hero image – hide oversized decorative image */
header.style-9 .img {
display: none !important;
}
}
@media (max-width: 576px) {
header.style-9 .content.section-padding {
padding: 35px 0 30px !important;
}
header.style-9 .info h1 {
font-size: 22px !important;
}
header.style-9 .info h6 {
font-size: 11px !important;
}
header.style-9 .btns .btn {
font-size: 13px !important;
padding: 10px 16px !important;
}
header.style-9 .btns .btn small {
font-size: 13px !important;
}
}
/* ================================================================
4. INNER PAGE HERO HEADERS (style-5, style-11, about-page-sec)
================================================================ */
@media (max-width: 1024px) {
header.style-5,
header.about-page-sec.style-5,
header.about-page-sec.style-11 {
padding: 70px 0 50px !important;
}
header.style-5 .info h1,
header.about-page-sec .info h1 {
font-size: 34px !important;
line-height: 1.3 !important;
}
}
@media (max-width: 991px) {
header.style-5,
header.about-page-sec.style-5,
header.about-page-sec.style-11 {
padding: 60px 0 40px !important;
overflow: hidden !important;
}
header.style-5 .info h1,
header.about-page-sec .info h1 {
font-size: 26px !important;
line-height: 1.3 !important;
margin-bottom: 15px !important;
}
header.style-5 .info h1 br,
header.about-page-sec .info h1 br {
display: none !important;
}
header.style-5 .info p,
header.about-page-sec .info p {
font-size: 14px !important;
line-height: 1.7 !important;
}
/* Hide decorative images in inner headers */
header.style-5 .main-img,
header.style-5 .handr-img,
header.style-5 .handl-img {
display: none !important;
}
}
@media (max-width: 576px) {
header.style-5 .info h1,
header.about-page-sec .info h1 {
font-size: 20px !important;
}
header.style-5 .info p,
header.about-page-sec .info p {
font-size: 13px !important;
}
}
/* ================================================================
5. NUMBERS / STATS SECTION (style-8)
================================================================ */
@media (max-width: 1024px) {
.numbers.style-8 .numbers-content .row {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
.numbers.style-8 .numbers-content .row .col-lg-3 {
flex: none !important;
max-width: none !important;
width: auto !important;
}
}
@media (max-width: 991px) {
.numbers.style-8 .numbers-content {
padding: 20px !important;
}
.numbers.style-8 .number-card.style-8 {
flex-direction: row !important;
align-items: center !important;
padding: 15px 12px !important;
}
.numbers.style-8 .number-card .icon {
margin-right: 12px !important;
flex-shrink: 0 !important;
}
.numbers.style-8 .number-card .icon img {
width: 40px !important;
height: 40px !important;
}
.numbers.style-8 .number-card .inf h3 {
font-size: 24px !important;
margin-bottom: 2px !important;
}
.numbers.style-8 .number-card .inf p {
font-size: 12px !important;
margin: 0 !important;
}
.numbers.style-8 .number-card.style-8.mt-4 {
margin-top: 0 !important;
}
}
@media (max-width: 576px) {
.numbers.style-8 .numbers-content .row {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.numbers.style-8 .numbers-content {
padding: 12px !important;
}
}
/* ================================================================
6. TRUSTED BY – client logos section
================================================================ */
@media (max-width: 991px) {
.clients.style-5 .section-head h2 {
font-size: 22px !important;
}
.clients.style-5 .section-head p {
font-size: 15px !important;
}
}
@media (max-width: 576px) {
.clients.style-5 .section-head h2 {
font-size: 20px !important;
}
.clients.style-5 .section-head p {
font-size: 13px !important;
}
.clients .swiper-slide img {
max-height: 40px !important;
max-width: 100px !important;
object-fit: contain !important;
}
}
/* ================================================================
7. SERVICES / SERVICE-BOX CARDS
================================================================ */
@media (max-width: 1024px) {
.service-box {
margin-bottom: 20px !important;
height: auto !important;
}
}
@media (max-width: 991px) {
.service-box .text,
.service-box p {
font-size: 14px !important;
line-height: 1.65 !important;
}
.service-box h5 {
font-size: 16px !important;
}
}
@media (max-width: 767px) {
/* Full-width columns on mobile */
section .col-lg-4.col-md-6,
.services-section .col-lg-4,
.services-section .col-md-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* ================================================================
8. SECTION HEADINGS – typography scaling
================================================================ */
@media (max-width: 1024px) {
.section-head h2 {
font-size: 28px !important;
line-height: 1.35 !important;
}
.section-head p {
font-size: 15px !important;
}
}
@media (max-width: 991px) {
.section-head h2 {
font-size: 24px !important;
margin-bottom: 15px !important;
letter-spacing: 1px !important;
}
.section-head h5 {
font-size: 14px !important;
}
.section-head p,
.section-head p[style*="font-size:20px"] {
font-size: 14px !important;
line-height: 1.7 !important;
}
/* Inline override: h6 labels in blue */
h6[style*="color:#0092f8"],
h6[style*="color:#0d76f2"] {
font-size: 12px !important;
}
/* Inline h5 labels */
h5[style*="color:#0d76f2"][style*="font-size:20px"] {
font-size: 15px !important;
}
}
@media (max-width: 576px) {
.section-head h2 {
font-size: 20px !important;
}
/* Hide decorative
tags that create vertical gaps */
.section-head br,
header br,
.info br {
display: none !important;
}
}
/* ================================================================
9. INLINE FONT-SIZE OVERRIDES (common patterns across pages)
================================================================ */
@media (max-width: 991px) {
/* Large h2s used in CTAs and product sections */
h2[style*="font-size:35px"],
h2[style*="font-size: 35px"],
.tab-content h2[style*="font-size:35px"] {
font-size: 22px !important;
line-height: 1.3 !important;
padding-bottom: 10px !important;
}
/* CTA banner h2 */
h2[style*="font-size:40px"],
h2[style*="font-size: 40px"],
.chat-banner h2[style*="font-size:40px"] {
font-size: 24px !important;
line-height: 1.3 !important;
}
/* CTA banner paragraph */
p[style*="font-size:25px"],
p[style*="font-size: 25px"],
.chat-banner p[style*="font-size:25px"] {
font-size: 15px !important;
line-height: 1.65 !important;
}
/* ROI / product section h3 */
h3[style*="font-size:35px"],
h3[style*="font-size: 35px"] {
font-size: 20px !important;
line-height: 1.3 !important;
}
/* section small/label text */
small[style*="font-size:25px"],
small[style*="font-size: 25px"] {
font-size: 14px !important;
}
/* h4 titles */
h4[style*="font-size:18px"],
h4[style*="font-size: 18px"] {
font-size: 15px !important;
}
/* body text paragraphs */
p[style*="font-size:20px"],
p[style*="font-size: 20px"] {
font-size: 14px !important;
line-height: 1.7 !important;
}
/* inline text blocks */
.text[style*="font-size:16px"],
div[style*="font-size:16px;line-height"] {
font-size: 14px !important;
line-height: 1.7 !important;
}
/* captcha text size */
#captcha-text {
font-size: 16px !important;
letter-spacing: 4px !important;
}
}
@media (max-width: 576px) {
h2[style*="font-size:35px"],
h2[style*="font-size: 35px"] { font-size: 18px !important; }
h2[style*="font-size:40px"],
h2[style*="font-size: 40px"] { font-size: 20px !important; }
h3[style*="font-size:35px"],
h3[style*="font-size: 35px"] { font-size: 18px !important; }
p[style*="font-size:25px"],
p[style*="font-size: 25px"] { font-size: 14px !important; }
}
/* ================================================================
10. PLUG & PLAY / TAB SECTION (nav-pills + tab content)
================================================================ */
@media (max-width: 1024px) {
#pills-tab {
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: center !important;
}
#pills-tab .nav-link {
font-size: 13px !important;
padding: 8px 16px !important;
border-radius: 20px !important;
}
}
@media (max-width: 991px) {
.tab-content .text {
font-size: 14px !important;
line-height: 1.7 !important;
}
/* Grid lists inside tab panels */
.tab-content ul[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Tab image */
.tab-content .img img {
max-width: 100% !important;
height: auto !important;
margin-top: 20px !important;
}
}
@media (max-width: 576px) {
#pills-tab .nav-link {
font-size: 12px !important;
padding: 7px 12px !important;
}
#pills-tab {
gap: 6px !important;
}
}
/* ================================================================
11. ROI / MAXIMUM ROI SECTION
================================================================ */
@media (max-width: 991px) {
.about.style-6 .img img,
section img[style*="width:auto"] {
max-width: 100% !important;
height: auto !important;
width: 100% !important;
}
.about.style-6 .info {
margin-bottom: 30px !important;
}
.about.style-6 h3[style*="font-size:35px"] {
font-size: 20px !important;
}
.about.style-6 small[style*="font-size:25px"] {
font-size: 13px !important;
}
/* ROI table / comparison grids */
.about.style-6 .row .col-lg-6 {
margin-bottom: 20px !important;
}
}
/* ================================================================
12. ABOUT LOGOS ROW (border-bottom separator / partner logos)
================================================================ */
@media (max-width: 991px) {
.about-logos.d-flex {
flex-wrap: wrap !important;
gap: 15px !important;
justify-content: center !important;
padding-bottom: 15px !important;
}
.about-logos .img {
width: 45% !important;
text-align: center !important;
}
.about-logos .img img {
max-height: 40px !important;
object-fit: contain !important;
}
}
@media (max-width: 576px) {
.about-logos .img {
width: 47% !important;
}
}
/* ================================================================
13. GLOBAL CUSTOMERS / INDUSTRIES GRID
================================================================ */
@media (max-width: 1024px) {
/* 4-col → 2-col on tablet */
.col-lg-3.col-sm-6 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
@media (max-width: 576px) {
.col-lg-3.col-sm-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* ================================================================
14. SUCCESS STORIES / TESTIMONIALS / NUMBER CARDS
================================================================ */
@media (max-width: 991px) {
.testi-card,
.testimonial-card {
padding: 20px !important;
margin-bottom: 20px !important;
}
.testimonials h2 {
font-size: 22px !important;
}
/* Success story inf blocks */
.inf[style*="text-align:center"] {
text-align: center !important;
}
.info.pt-30 {
padding-top: 15px !important;
}
}
/* ================================================================
15. CTA BANNER – "Ready to Transform" section
================================================================ */
@media (max-width: 991px) {
.chat-banner .btns,
section .btns {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
align-items: center !important;
}
.chat-banner .btns .btn,
section .btns .btn {
width: 100% !important;
max-width: 320px !important;
text-align: center !important;
}
/* Chat banner padding */
.chat-banner.style-3,
section.chat-banner {
padding: 50px 0 !important;
}
}
/* ================================================================
16. FOOTER (style-3) – column stacking, spacing, social icons
================================================================ */
@media (max-width: 1024px) {
footer.style-3 {
padding-top: 60px !important;
}
}
@media (max-width: 991px) {
footer.style-3 .row .col-lg-4,
footer.style-3 .row .col-lg-2,
footer.style-3 .row .col-lg-3,
footer.style-3 .row .col-sm-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
margin-bottom: 28px !important;
}
footer.style-3 .items {
margin-bottom: 0 !important;
}
footer.style-3 .items .title {
margin-bottom: 14px !important;
font-size: 15px !important;
}
footer.style-3 .items ul li a {
font-size: 13px !important;
}
/* Inline font-size in footer address */
footer.style-3 .items small[style*="font-size:16px"],
footer.style-3 .items small[style*="font-size: 16px"] {
font-size: 13px !important;
line-height: 1.7 !important;
}
footer.style-3 .socail-icons {
margin-top: 15px !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
/* Footer bottom bar */
footer.style-3 .foot {
margin-top: 10px !important;
padding: 25px 0 20px !important;
text-align: center !important;
}
footer.style-3 .foot .logo {
margin-bottom: 15px !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Decorative globe – hide on mobile */
footer.style-3 .contact_globe {
display: none !important;
}
footer.style-3 .foot .testi_lines {
display: none !important;
}
}
@media (max-width: 576px) {
footer.style-3 .foot .col-sm-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
text-align: center !important;
}
footer.style-3 .foot .col-sm-6:last-child {
margin-top: 10px !important;
}
}
/* ================================================================
17. ABOUT PAGE – who we are, stat cards, culture sections
================================================================ */
@media (max-width: 1024px) {
.about.style-5 .content .img {
margin-bottom: 30px !important;
}
}
@media (max-width: 991px) {
/* Stat/metric cards grid */
.about.style-5 .row.g-3 .col-6 {
padding: 10px !important;
}
.about.style-5 .row.g-3 .col-6 > div {
padding: 20px 12px !important;
}
.about.style-5 .row.g-3 .col-6 > div div:first-child {
font-size: 28px !important;
}
.about.style-5 .row.g-3 .col-6 > div div:last-child {
font-size: 12px !important;
}
/* Text inside about sections */
.about.style-5 p[style*="font-size:15px"],
.about.style-5 p[style*="font-size: 15px"] {
font-size: 14px !important;
line-height: 1.75 !important;
}
/* Dark background about blocks */
section[style*="background:#010825"] h2,
section[style*="background: #010825"] h2 {
font-size: 22px !important;
}
/* Leadership / profile card padding */
.about.style-5 .p-4 {
padding: 16px !important;
}
}
@media (max-width: 576px) {
/* Stack 2-col stat grid to 1 col on phones */
.about.style-5 .row.g-3 .col-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* ================================================================
18. LEADERSHIP / PROFILE PAGES
================================================================ */
@media (max-width: 991px) {
.profile-img,
.team-img {
max-width: 220px !important;
margin: 0 auto 20px !important;
display: block !important;
}
.profile-info h2,
.leadership-card h3 {
font-size: 22px !important;
}
.profile-info h5 {
font-size: 14px !important;
}
.profile-info p {
font-size: 14px !important;
line-height: 1.75 !important;
}
}
/* ================================================================
19. CONTACT PAGE – form layout
================================================================ */
@media (max-width: 991px) {
/* Stack form columns */
.contact.style-6 .content .row .col-lg-6,
.contact-form .row .col-lg-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
margin-bottom: 15px !important;
}
.contact.style-6 .content .contact_message {
position: static !important;
margin-top: 30px !important;
}
/* Contact info cards */
.contact.style-6 .contact-card,
.contact.style-1 .content .contact_info ul {
margin: 15px 0 !important;
}
/* Form fields */
.contact-form .form-control,
.contact .form-control {
font-size: 14px !important;
padding: 12px !important;
}
}
@media (max-width: 576px) {
/* Full-width submit button */
.contact .btn[type="submit"],
.contact-form .btn[type="submit"],
.contact form .btn {
width: 100% !important;
}
}
/* ================================================================
20. REQUEST DEMO PAGE – form and captcha
================================================================ */
@media (max-width: 991px) {
.RequestDemo-page .row .col-lg-6,
section .row .col-lg-6:has(.form-control) {
flex: 0 0 100% !important;
max-width: 100% !important;
margin-bottom: 15px !important;
}
#captcha-text {
font-size: 16px !important;
letter-spacing: 4px !important;
padding: 6px !important;
}
}
@media (max-width: 576px) {
.RequestDemo-page form .btn,
.contact form .btn[style*="padding"] {
width: 100% !important;
font-size: 14px !important;
}
}
/* ================================================================
21. FAQs PAGE
================================================================ */
@media (max-width: 991px) {
.faq.style-3 .accordion-item {
margin-bottom: 10px !important;
}
.faq.style-3 .accordion-button {
font-size: 14px !important;
padding: 14px !important;
line-height: 1.5 !important;
}
.faq.style-3 .accordion-body {
font-size: 13px !important;
line-height: 1.7 !important;
padding: 12px 14px !important;
}
}
/* ================================================================
22. INDUSTRY / SECTOR PAGES (Banking, Healthcare, etc.)
================================================================ */
@media (max-width: 991px) {
/* Industry hero icons/images */
.industry-hero .img,
.sector-hero .img {
display: none !important;
}
/* Industry feature cards */
.industry-card,
.sector-card {
margin-bottom: 20px !important;
padding: 20px !important;
}
}
/* ================================================================
23. SOLUTION PAGES (UniversalDataIngestion, EmbeddedAI, etc.)
================================================================ */
@media (max-width: 1024px) {
/* Sidebar / sticky sidebar */
.col-lg-4.sticky-top {
position: relative !important;
top: auto !important;
}
}
@media (max-width: 991px) {
/* Full-width sidebar on mobile */
.col-lg-4.sticky-top,
aside.col-lg-4 {
flex: 0 0 100% !important;
max-width: 100% !important;
margin-top: 30px !important;
}
/* Solution feature list */
.frs-content .info p,
.frs-content .info .text {
font-size: 14px !important;
line-height: 1.75 !important;
}
/* Solution page sub-headings */
.frs-content h3,
.frs-content h4 {
font-size: 18px !important;
}
/* Feature check-list items */
.frs-content ul li,
section ul li {
font-size: 14px !important;
line-height: 1.6 !important;
}
/* Inline grid list override */
ul[style*="grid-template-columns: repeat(2"],
ul[style*="grid-template-columns:repeat(2"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* ================================================================
24. CAREERS PAGE – job listing cards
================================================================ */
@media (max-width: 991px) {
.careers-card,
.job-card {
padding: 20px !important;
margin-bottom: 16px !important;
}
.careers-card h5,
.job-card h5 {
font-size: 16px !important;
}
.careers-card .btn,
.job-card .btn {
width: 100% !important;
margin-top: 12px !important;
}
}
/* ================================================================
25. SUCCESS STORIES PAGE
================================================================ */
@media (max-width: 991px) {
.success-card,
.story-card {
padding: 20px !important;
margin-bottom: 20px !important;
}
}
/* ================================================================
26. BUTTONS – touch targets and mobile UX
================================================================ */
@media (max-width: 991px) {
.btn {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: normal !important;
line-height: 1.3 !important;
}
/* Buttons with icons */
.btn .fa-long-arrow-alt-right,
.btn i {
flex-shrink: 0 !important;
}
/* "me-4" on buttons – remove on mobile to prevent gaps */
.btns .btn.me-4 {
margin-right: 0 !important;
}
}
@media (max-width: 576px) {
.btn {
font-size: 13px !important;
padding: 10px 16px !important;
}
.btn small {
font-size: 13px !important;
}
}
/* ================================================================
27. SPACING UTILITY OVERRIDES – reduce excessive whitespace
================================================================ */
@media (max-width: 1024px) {
.section-padding { padding: 70px 0 !important; }
.mt-100, .mt-80 { margin-top: 50px !important; }
.mb-100, .mb-80 { margin-bottom: 50px !important; }
.pt-100, .pt-80 { padding-top: 50px !important; }
.pb-100, .pb-80 { padding-bottom: 50px !important; }
.mt-60 { margin-top: 35px !important; }
.mb-60 { margin-bottom: 35px !important; }
.mt-70 { margin-top: 40px !important; }
.mb-70 { margin-bottom: 40px !important; }
}
@media (max-width: 991px) {
.section-padding { padding: 50px 0 !important; }
.mt-100, .mt-80 { margin-top: 40px !important; }
.mb-100, .mb-80 { margin-bottom: 40px !important; }
.pt-100, .pt-80 { padding-top: 40px !important; }
.pb-100, .pb-80 { padding-bottom: 40px !important; }
.mt-60 { margin-top: 30px !important; }
.mb-60 { margin-bottom: 30px !important; }
.mt-50 { margin-top: 25px !important; }
.mb-50 { margin-bottom: 25px !important; }
.mt-40 { margin-top: 20px !important; }
.mb-40 { margin-bottom: 20px !important; }
.pt-50 { padding-top: 25px !important; }
.pb-50 { padding-bottom: 25px !important; }
.pt-40 { padding-top: 20px !important; }
.pb-40 { padding-bottom: 20px !important; }
}
@media (max-width: 576px) {
.section-padding { padding: 35px 0 !important; }
.mt-100, .mt-80 { margin-top: 30px !important; }
.mb-100, .mb-80 { margin-bottom: 30px !important; }
.mt-60 { margin-top: 25px !important; }
.mb-60 { margin-bottom: 25px !important; }
}
/* ================================================================
28. IMAGES – overflow, max-width, decorative element hiding
================================================================ */
@media (max-width: 991px) {
img {
max-width: 100% !important;
height: auto !important;
}
/* Decorative shape elements */
.ser_shap_l,
.ser_shap_r,
.num_shap,
.testi_lines,
.testi3_lines,
.global2,
.contact_globe,
.about-logos .img-fluid.position-absolute,
.head-shape-r,
.head-shape-l {
display: none !important;
}
/* Prevent section overflow from absolute-positioned images */
section,
.section,
header,
footer,
.about.style-6,
.choose_us,
.testimonials,
.faq,
.numbers,
.clients,
.chat-banner {
overflow-x: hidden !important;
}
}
/* ================================================================
29. GRIDS – Bootstrap column stacking corrections
================================================================ */
@media (max-width: 767px) {
/* Ensure col-lg-* that are NOT col-sm-6 go full-width */
.row > .col-lg-4:not(.col-sm-6):not(.col-md-6),
.row > .col-lg-3:not(.col-sm-6),
.row > .col-lg-8:not(.col-sm-6),
.row > .col-lg-6:not(.col-sm-6) {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* ================================================================
30. FORMS – mobile input sizing and touch targets
================================================================ */
@media (max-width: 991px) {
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
font-size: 14px !important;
min-height: 44px !important;
padding: 10px 14px !important;
}
textarea.form-control {
min-height: 120px !important;
}
label {
font-size: 13px !important;
margin-bottom: 6px !important;
}
/* Radio / checkbox touch targets */
.form-check {
padding: 6px 0 6px 24px !important;
}
.form-check-input {
width: 18px !important;
height: 18px !important;
margin-top: 2px !important;
}
}
/* ================================================================
31. THANK YOU PAGE
================================================================ */
@media (max-width: 991px) {
.thankyou-page,
.Thankyou-page {
padding: 60px 0 !important;
text-align: center !important;
}
.thankyou-page h1,
.Thankyou-page h1 {
font-size: 26px !important;
}
.thankyou-page p,
.Thankyou-page p {
font-size: 14px !important;
}
}
/* ================================================================
32. CONTAINER PADDING – edge-to-edge safety on narrow screens
================================================================ */
@media (max-width: 576px) {
.container {
padding-left: 16px !important;
padding-right: 16px !important;
}
.container-fluid {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* ================================================================
33. SWIPER SLIDERS – mobile controls
================================================================ */
@media (max-width: 767px) {
.swiper-button-next,
.swiper-button-prev {
width: 30px !important;
height: 30px !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 14px !important;
}
.swiper-pagination {
bottom: 5px !important;
}
}
/* ================================================================
34. SIDE MENU / OVERLAY
================================================================ */
@media (max-width: 991px) {
.side_overlay {
z-index: 9998 !important;
}
}
/* ================================================================
35. PRELOADER / LOADING SCREEN
================================================================ */
#loading-text img {
max-width: 180px !important;
height: auto !important;
}
@media (max-width: 576px) {
#loading-text img {
max-width: 140px !important;
}
}
/* ================================================================
36. LANDSCAPE MOBILE (small height, wide viewport)
================================================================ */
@media (max-height: 500px) and (max-width: 900px) {
header.style-9 .content.section-padding {
padding: 30px 0 20px !important;
}
header.style-9 .info h1 {
font-size: 20px !important;
}
.navbar.style-9 .navbar-collapse {
max-height: 70vh !important;
}
}
/* ================================================================
37. PRINT / HIGH-DPI SAFETY
================================================================ */
@media print {
.navbar, footer, .chat-banner, #preloader {
display: none !important;
}
body {
overflow: visible !important;
}
}
/* ================================================================
38. NAVBAR LOGO SIZE + HEADER GAP FIX (All pages)
Fixes: logo too small on mobile, excessive dark gap below navbar
on inner pages (about-page-sec style-11 / style-5 headers)
================================================================ */
/* ── Logo: give it a proper minimum so it's never tiny ─────────── */
.navbar.style-9 .navbar-brand {
width: auto !important; /* override the fixed 300px */
min-width: 180px;
max-width: 220px;
}
.navbar.style-9 .navbar-brand img {
width: 100% !important;
height: auto !important;
display: block !important;
}
@media (max-width: 991px) {
.navbar.style-9 .navbar-brand {
min-width: 160px;
max-width: 190px;
}
}
@media (max-width: 576px) {
.navbar.style-9 .navbar-brand {
min-width: 140px;
max-width: 160px;
}
}
/* ── Navbar content row: remove the border that creates the gap ── */
.navbar.style-9 .content {
border-bottom: none !important;
padding: 12px 15px !important;
}
/* On desktop keep the subtle divider if desired */
@media (min-width: 992px) {
.navbar.style-9 .content {
padding: 15px 15px !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
}
/* ── Inner-page header dark gap (about-page-sec style-11) ────── */
/* The header element wraps the navbar — kill excess height */
header.about-page-sec.style-11,
header.about-page-sec.style-5 {
padding: 0 !important;
min-height: unset !important;
}
/* The navs-container should only be as tall as the navbar */
header.about-page-sec .navs-container,
header.style-9 .navs-container {
padding: 0 !important;
min-height: unset !important;
}
@media (max-width: 991px) {
/* Kill any inherited padding/min-height from style-5 / style-11 */
header.about-page-sec.style-11,
header.about-page-sec.style-5,
header.style-9 {
padding: 0 !important;
min-height: unset !important;
height: auto !important;
}
/* Tighten the navbar itself on mobile */
.navbar.style-9 .content {
padding: 10px 14px !important;
border-bottom: none !important;
}
/* Collapse panel: push content below navbar without overlap */
.navbar.style-9 .navbar-collapse {
position: relative !important;
z-index: 100 !important;
}
}
@media (max-width: 576px) {
.navbar.style-9 .content {
padding: 8px 12px !important;
}
.navbar.style-9 .navbar-brand {
min-width: 130px;
max-width: 150px;
}
}