/* ================================================================
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 */
/* Prevent sections from causing horizontal overflow */
section,
header,
footer,
main {
max-width: 100%;
}
/* Do NOT apply global padding to .container */
.container,
.container-fluid {
width: 95%;
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: 250px !important;
}
.navbar .navbar-brand img {
max-width: 250px !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;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width:1024px){
header.style-9{
background-image:url("../img/header/5.png");
background-repeat:no-repeat;
background-size:cover;
background-position:70% center;
}
header.style-9 .content.section-padding{
padding:60px 0 45px !important;
}
header.style-9 .info{
max-width:540px;
}
header.style-9 .info h1{
font-size:34px !important;
line-height:1.25 !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width:991px){
html,
body{
overflow-x:hidden;
}
header.style-9{
background-image:url("../img/header/5.png") !important;
background-repeat:no-repeat !important;
/* Decrease laptop size */
background-size:92% auto !important;
/* Keep laptop on right-bottom */
background-position:98% bottom !important;
min-height:100vh !important;
background-color:#030b22;
}
header.style-9 .content.section-padding{
padding:65px 0 30px !important;
}
header.style-9 .info{
max-width:245px;
position:relative;
z-index:10;
}
header.style-9 .info h6{
font-size:12px !important;
margin-bottom:8px;
}
header.style-9 .info h1{
font-size:22px !important;
line-height:1.30 !important;
margin-bottom:16px;
}
header.style-9 .info h1 br{
display:none;
}
header.style-9 .info ul{
margin-bottom:18px;
}
header.style-9 .info ul li{
font-size:14px !important;
line-height:24px;
margin:7px 0;
padding-left:30px !important;
}
header.style-9 .info ul li::before{
width:18px;
}
/* Buttons */
header.style-9 .btns{
display:flex !important;
flex-direction:column !important;
gap:10px;
margin-top:10px !important;
position:relative;
z-index:10;
}
header.style-9 .btn{
width:185px !important;
height:42px !important;
border-radius:8px;
font-size:14px !important;
padding:0 18px !important;
margin-right:0 !important;
}
header.style-9 .btn small,
header.style-9 .btn span{
font-size:14px !important;
}
header.style-9 .btn i{
width:28px;
height:28px;
line-height:28px;
font-size:13px;
}
header.style-9 .img{
display:none !important;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width:576px){
/* Hero Background */
header.style-9{
background-image:url("../img/header/5.png") !important;
background-repeat:no-repeat !important;
background-size:88% auto !important;
background-position:98% bottom !important;
min-height:100vh !important;
}
/* Content */
header.style-9 .content.section-padding{
padding:60px 0 30px !important;
}
/* Text */
header.style-9 .info{
transform:translateY(-50px);
max-width:230px;
}
header.style-9 .info h6{
font-size:8px !important;
margin-bottom:0px !important;
color: #308fff;
}
header.style-9 .info h1{
font-size:13px !important;
line-height:24px !important;
margin-bottom:10px !important;
}
header.style-9 .info ul{
margin-bottom:30px !important;
}
header.style-9 .info ul li{
font-size:11px !important;
line-height:18px !important;
padding-left:25px !important;
margin:3px 0 !important;
color: #308fff;
}
/* Hero Content */
header.style-9 .content.section-padding{
position:relative;
}
@media (max-width:576px){
/* Button Container */
header.style-9 .btns{
position:absolute !important;
left:0px !important;
bottom:10px !important; /* Red mark చేసిన area */
display:flex !important;
flex-direction:row !important;
gap:12px !important;
align-items:center !important;
justify-content:flex-start !important;
width:auto !important;
margin:0 !important;
z-index:999;
}
/* Button */
header.style-9 .btn{
width:115px !important;
height:42px !important;
border-radius:8px !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
padding:0 8px !important;
font-size:8px !important;
}
header.style-9 .btn span,
header.style-9 .btn small{
font-size:12px !important;
margin-left:2px;
}
header.style-9 .btn i{
width:16px;
height:16px;
line-height:16px;
}
}
}
/* ================================================================
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: 20px 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;
}
}
/* ================================================================
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: 5px !important;
letter-spacing: 0px !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; }
}
/* ================================================================
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: 450px !important;
text-align: center !important;
}
/* Chat banner padding */
.chat-banner.style-3,
section.chat-banner {
padding: 50px 0 !important;
}
}
/* ==========================================================
FOOTER RESPONSIVE CSS
========================================================== */
/* Tablet */
@media (max-width:1024px){
footer.style-3{
padding-top:30px !important;
}
}
/* Mobile */
@media (max-width:991px){
/* ==========================
Main Footer Columns
========================== */
footer.style-3 > .container > .row > div{
flex:0 0 100%;
max-width:100%;
margin-bottom:20px;
}
footer.style-3 .items{
margin-bottom:0;
padding-bottom:0;
}
footer.style-3 .items .title{
font-size:15px;
margin-bottom:14px;
}
footer.style-3 .items ul{
margin:0;
padding:0;
list-style:none;
}
footer.style-3 .items ul li{
margin-bottom:6px;
}
footer.style-3 .items ul li:last-child{
margin-bottom:0;
}
footer.style-3 .items ul li a{
font-size:13px;
line-height:1.6;
}
/* Industries */
footer.style-3 .items .row{
margin:0;
--bs-gutter-x:1rem;
--bs-gutter-y:0;
}
/* ==========================
Footer Bottom
========================== */
footer.style-3 .foot{
margin-top:0;
padding:10px 0;
border-top:none;
}
footer.style-3 .foot .row{
display:flex;
flex-direction:column;
align-items:flex-start;
margin:0;
row-gap:10px;
}
footer.style-3 .foot .col-lg-3,
footer.style-3 .foot .col-lg-6,
footer.style-3 .foot .col-sm-6{
flex:0 0 100%;
max-width:100%;
margin:0;
padding:0;
text-align:left;
}
/* Logo */
footer.style-3 .foot .logo{
margin:0;
padding:0;
text-align:left;
}
footer.style-3 .foot .logo img{
display:block;
max-width:180px;
height:auto;
margin:0;
}
/* Copyright */
footer.style-3 .foot small{
display:block;
margin:0;
padding:0;
font-size:13px;
line-height:1.5;
color:#fff;
}
/* Decorative Images */
footer.style-3 .contact_globe{
display:none;
}
footer.style-3 .foot .testi_lines{
display:none;
}
}
/* Small Mobile */
@media (max-width:576px){
footer.style-3{
padding-top:20px;
}
footer.style-3 .items .title{
font-size:14px;
}
footer.style-3 .items ul li a{
font-size:12px;
}
footer.style-3 .foot{
padding:8px 0;
}
footer.style-3 .foot .row{
row-gap:8px;
}
footer.style-3 .foot .logo img{
max-width:160px;
}
footer.style-3 .foot small{
font-size:12px;
}
}
/* ================================================================
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;
}
}
@media (max-width: 767px) {
.client-card .d-flex {
display: flex !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 12px;
}
.client-card .icon-20 {
min-width: 24px;
width: 24px;
height: 24px;
flex: 0 0 24px;
margin-top: 2px;
}
.client-card .d-flex {
line-height: 1.6;
}
}
.feature-item{
display:flex;
align-items:flex-start;
gap:12px;
}
.feature-item span{
flex:1;
display:block;
line-height:1.6;
}
.client-card .d-flex{
display:flex !important;
flex-direction:row !important;
align-items:flex-start !important;
gap:12px !important;
}
.client-card .d-flex .icon-20{
flex:0 0 24px !important;
min-width:24px !important;
}
.client-card .d-flex span,
.client-card .d-flex p{
display:inline-block !important;
margin:0 !important;
}
/* Global Mobile Bullet Alignment Fix */
@media (max-width: 767px) {
.d-flex.mb-10,
.d-flex.mb-15,
.d-flex.mb-20 {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 12px !important;
}
.icon-20,
.icon-25,
.icon-30 {
flex: 0 0 auto !important;
min-width: 24px !important;
}
.d-flex p,
.d-flex span,
.d-flex div:last-child {
margin: 0 !important;
line-height: 1.6 !important;
padding-top:10px;
}
}
@media (max-width: 767px) {
h2.mb-10 {
font-size: 28px !important;
line-height: 1.3 !important;
margin-bottom: 15px !important;
}
.section-head {
margin-bottom: 0px !important;
}
}
.features-card.style-5{
height:100%;
text-align:center;
}
.features-card.style-5 .icon{
margin-bottom:20px;
}
.features-card.style-5 .card-title{
line-height:1.5;
margin-bottom:10px;
}
@media (max-width:767px){
.features{
padding:0px 0;
}
.features-card.style-5{
min-height:120px;
padding:20px 15px;
}
.features-card .card-title{
font-size:18px;
line-height:1.4;
}
}
.office-address{
display:flex;
align-items:flex-start;
}
.office-address .address-content{
flex:1;
min-width:0;
}
.office-address strong{
display:block;
color:#0092f8;
margin-bottom:5px;
word-break:break-word;
}
.office-address p{
margin:0;
line-height:1.6;
word-break:break-word;
}
@media (max-width:767px){
.office-address{
gap:10px;
}
.office-address .address-content{
width:100%;
}
.office-address p,
.office-address strong{
font-size:14px;
line-height:1.5;
}
}
/* ==========================================================
ABOUT US PAGE - MOBILE RESPONSIVE FIX
Add at END of mobile-fix.css
========================================================== */
@media (max-width: 767px){
/* Hero Section */
header.style-5 .info h1{
font-size:28px !important;
line-height:1.3 !important;
}
header.style-5 .info p{
font-size:14px !important;
line-height:1.7 !important;
}
/* Section Headings */
.about.style-5 h2,
.services.style-9 h2{
font-size:24px !important;
line-height:1.3 !important;
}
/* Who We Are Stats */
.about.style-5 .row.g-3 .col-6{
flex:0 0 100% !important;
max-width:100% !important;
}
.about.style-5 .row.g-3 .col-6 > div{
padding:20px 15px !important;
}
.about.style-5 .row.g-3 .col-6 > div div:first-child{
font-size:28px !important;
}
/* Mission & Vision Cards */
.about.style-5 .p-5{
padding:20px !important;
}
.about.style-5 h4{
font-size:20px !important;
}
/* Values Banner */
.about.style-5 .fw-semibold{
font-size:14px !important;
line-height:1.8 !important;
display:block !important;
}
/* Core Values Cards */
.features-card.style-5{
min-height:auto !important;
height:auto !important;
padding:25px 15px !important;
text-align:center !important;
display:block !important;
}
.features-card.style-5 .icon{
margin-bottom:15px !important;
}
.features-card .card-title{
font-size:18px !important;
line-height:1.4 !important;
margin-bottom:10px !important;
}
.features-card .text{
font-size:14px !important;
line-height:1.7 !important;
}
/* Why Businesses Choose Cards */
.service-card{
padding:20px 15px !important;
height:auto !important;
}
.service-card h3{
font-size:18px !important;
line-height:1.4 !important;
}
.service-card p{
font-size:14px !important;
line-height:1.7 !important;
}
/* Promise Section */
.list-icon li{
align-items:flex-start !important;
}
.list-icon li h6{
font-size:18px !important;
}
.list-icon li p{
font-size:14px !important;
line-height:1.6 !important;
}
/* AI Section */
section[style*="#010825"] h2{
font-size:24px !important;
}
section[style*="#010825"] h6{
font-size:17px !important;
}
section[style*="#010825"] p{
font-size:14px !important;
line-height:1.7 !important;
}
/* Future Section */
h3[style*="font-size:52px"],
h3[style*="font-size: 52px"]{
font-size:26px !important;
line-height:1.4 !important;
}
p[style*="font-size:45px"],
p[style*="font-size: 45px"]{
font-size:20px !important;
line-height:1.5 !important;
}
.about.style-5 .p-5.rounded-3.mb-10{
padding:25px 15px !important;
}
/* Remove offset issue */
.offset-lg-4{
margin-left:0 !important;
}
/* General Text Fix */
.about.style-5 p,
.services.style-9 p{
overflow-wrap:break-word;
word-break:break-word;
}
.about.style-5 h3,
.about.style-5 h4,
.about.style-5 h5,
.about.style-5 h6{
overflow-wrap:break-word;
}
/* Buttons */
.btn{
width:100%;
max-width:100%;
}
/* Container Safety */
.container{
padding-left:15px !important;
padding-right:15px !important;
}
}
/* Extra Small Devices */
@media (max-width: 480px){
header.style-5 .info h1{
font-size:22px !important;
}
.section-head h2{
font-size:30px !important;
}
.features-card .card-title{
font-size:16px !important;
}
.service-card h3{
font-size:16px !important;
}
h3[style*="font-size:52px"],
h3[style*="font-size: 52px"]{
font-size:22px !important;
}
p[style*="font-size:45px"],
p[style*="font-size: 45px"]{
font-size:18px !important;
}
}
/* About Promise Section Fix */
.list-icon li{
display:flex !important;
flex-direction:row !important;
align-items:flex-start !important;
gap:15px !important;
}
.list-icon li .icon{
width:44px !important;
min-width:44px !important;
height:44px !important;
flex-shrink:0 !important;
}
.list-icon li > div{
flex:1 !important;
width:auto !important;
}
.list-icon li h6{
display:block !important;
width:100% !important;
margin-bottom:8px !important;
font-size:20px !important;
}
.list-icon li p{
display:block !important;
width:100% !important;
margin:0 !important;
line-height:1.7 !important;
}
.promise-card{
background:#fff;
border-radius:18px;
padding:30px 22px;
text-align:center;
height:100%;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:all .3s ease;
}
.promise-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.12);
}
.icon-box{
width:65px;
height:65px;
margin:0 auto 20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.icon-box i{
color:#fff;
font-size:24px;
}
.promise-card h5{
color:var(--color-darkBlue2);
font-size:22px;
font-weight:700;
margin-bottom:12px;
}
.promise-card p{
color:#666;
font-size:15px;
line-height:1.8;
margin:0;
}
.speed{
background:linear-gradient(135deg,#0c3df4,#02b5ff);
}
.simplicity{
background:linear-gradient(135deg,#6640f4,#157efb);
}
.scalability{
background:linear-gradient(135deg,#00c057,#0d76f2);
}
.trust{
background:linear-gradient(135deg,#ff7a41,#ffc808);
}
/* Tablet */
@media (max-width:991px){
.promise-card{
margin-bottom:10px;
}
}
/* Mobile */
@media (max-width:767px){
.promise-card{
padding:25px 20px;
}
.promise-card h5{
font-size:20px;
}
.promise-card p{
font-size:14px;
}
.icon-box{
width:55px;
height:55px;
}
.icon-box i{
font-size:20px;
}
}
/* =========================================
DATANXZEN CHOOSE US SECTION
========================================= */
/* ==========================================
DATANXZEN TABS
========================================== */
.choose-tabs{
display:grid !important;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:30px !important;
}
.choose-tabs .nav-item{
width:100%;
margin:0;
}
.choose-tabs .nav-link{
width:100%;
height:100px;
border:1px solid #e5e7eb;
border-radius:10px;
background:#fff;
padding:0px;
display:flex !important;
align-items:center;
justify-content:center;
gap:15px;
font-size:16px;
font-weight:700;
color:#16237A !important;
text-align:center;
transition:all .3s ease;
position:relative;
}
.choose-tabs .nav-link img{
width:42px;
height:42px;
object-fit:contain;
flex-shrink:0;
}
.choose-tabs .nav-link span{
display:block;
line-height:1.3;
}
.choose-tabs .nav-link:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.choose-tabs .nav-link.active{
background:linear-gradient(135deg,#0d76f2,#0d76f2) !important;
border:none !important;
color:#fff !important;
}
.choose-tabs .nav-link.active span{
color:#fff !important;
}
.choose-tabs .nav-link.active img{
filter: brightness(0) invert(1) !important;
}
.choose-tabs .nav-link.active:after{
content:"";
position:absolute;
left:0;
width:100%;
}
/* ==========================================
TABLET
========================================== */
@media(max-width:991px){
.choose-tabs{
grid-template-columns:repeat(2,1fr);
gap:15px;
}
.choose-tabs .nav-link{
height:100px;
font-size:16px;
}
.choose-tabs .nav-link img{
width:36px;
height:36px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width:767px){
.choose-tabs{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
gap:12px !important;
padding:0 1px !important;
}
.choose-tabs .nav-item{
flex:0 0 calc(50% - 6px) !important;
max-width:calc(50% - 6px) !important;
margin:0 !important;
}
.choose-tabs .nav-link{
width:100% !important;
min-width:100% !important;
min-height:65px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:10px !important;
border-radius:14px !important;
text-align:center !important;
}
.choose-tabs .nav-link span{
font-size:13px !important;
line-height:1.25 !important;
white-space:normal !important;
}
.choose-tabs .nav-link img{
display:none; /* icon లేకపోతే remove చేయొచ్చు */
}
}
/*====================================================
BOTTOM CARD
====================================================*/
.bottom-value{
display:flex;
justify-content:center;
margin-top:10px;
}
.bottom-value .value-box{
width:280px;
}
/*==================================================
CORE VALUES RADIAL
==================================================*/
.core-values-radial{
background:#fff;
padding:70px 0;
}
.values-wrapper{
position:relative;
width:1200px;
height:820px;
margin:auto;
}
/*==================================================
CENTER
==================================================*/
.center-circle{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:240px;
height:240px;
border-radius:50%;
background:#fff;
border:8px solid #edf4ff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
box-shadow:0 20px 60px rgba(0,0,0,.12);
z-index:10;
}
.center-circle img{
width:120px;
margin-bottom:12px;
}
.center-circle h3{
font-size:28px;
font-weight:700;
color:#1a2b56;
margin-bottom:5px;
}
.center-circle span{
color:#0d6efd;
font-size:14px;
font-weight:600;
letter-spacing:0px;
margin-bottom:10px;
}
.center-circle p{
font-size:13px;
color:#666;
text-align:center;
line-height:1.5;
margin:0;
padding:0 25px;
}
/*==================================================
VALUE NODES
==================================================*/
.value-node{
position:absolute;
width:170px;
text-align:center;
z-index:20;
}
.value-node h5{
font-size:18px;
margin-top:14px;
margin-bottom:4px;
color:#1a2b56;
font-weight:700;
}
.value-node p{
font-size:13px;
color:#777;
margin:0;
}
/*==================================================
CIRCLES
==================================================*/
.icon-circle{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:34px;
box-shadow:0 15px 35px rgba(0,0,0,.15);
transition:.35s;
}
.icon-circle:hover{
transform:translateY(-8px) scale(1.08);
}
/*==================================================
POSITIONS
==================================================*/
/* LEFT */
.node1{
left:60px;
top:60px;
}
.node2{
left:20px;
top:220px;
}
.node3{
left:20px;
top:460px;
}
.node4{
left:60px;
top:620px;
}
/* RIGHT */
.node5{
right:60px;
top:60px;
}
.node6{
right:20px;
top:220px;
}
.node7{
right:20px;
top:460px;
}
.node8{
right:60px;
top:620px;
}
/* BOTTOM */
.node9{
left:50%;
transform:translateX(-50%);
bottom:0;
}
/*==================================================
CONNECTOR SVG
==================================================*/
.connector-svg{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
}
.connector-svg path{
stroke:#d8e5ff;
stroke-width:3;
fill:none;
stroke-linecap:round;
stroke-dasharray:8 8;
}
/*==================================================
COLORS
==================================================*/
.blue{
background:#1f78ff;
}
.purple{
background:#7b3aed;
}
.red{
background:#ef4444;
}
.green{
background:#22c55e;
}
.orange{
background:#fb923c;
}
.indigo{
background:#2563eb;
}
.cyan{
background:#06b6d4;
}
.gold{
background:#f4b400;
}
.navy{
background:#0b3a82;
}
/* Mobile Fix */
@media (max-width: 767.98px){
.about.style-5{
padding-top:10px !important;
padding-bottom:10px !important;
}
.about.style-5 .container{
padding-left:18px;
padding-right:18px;
}
.about.style-5 .section-head{
margin-bottom:35px;
}
.about.style-5 .section-head h2{
font-size:25px !important;
line-height:1.25 !important;
text-align:center;
margin-bottom:18px;
}
.about.style-5 .section-head h2 span{
display:block;
margin-top:5px;
}
.about.style-5 .section-head p{
font-size:15px !important;
line-height:1.8;
padding:0 5px;
}
.about.style-5 .row.g-4{
--bs-gutter-x:1rem;
--bs-gutter-y:1rem;
}
.about.style-5 .col-md-6{
width:100%;
}
.about.style-5 .rounded-3{
padding:22px !important;
height:auto !important;
}
}
.cost-saving-badge{
display:inline-block;
max-width:100%;
padding:14px 28px;
background:linear-gradient(to right,#0c3df4,#02b5ff);
color:#fff;
border-radius:30px;
font-size:15px;
font-weight:500;
line-height:1.6;
white-space:normal;
word-break:break-word;
box-shadow:0 8px 25px rgba(0,146,248,.18);
}
@media (max-width:768px){
.cost-saving-badge{
display:block;
width:100%;
border-radius:16px;
padding:14px 16px;
font-size:14px;
line-height:1.5;
}
}
/* ===========================
Responsive ROI Table
=========================== */
.roi-table{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
border-radius:16px;
box-shadow:0 6px 30px rgba(0,146,248,.10);
background:#fff;
}
.roi-table table{
min-width:900px;
margin-bottom:0;
border-collapse:collapse;
font-size:14px;
}
.roi-table thead{
background:linear-gradient(to right,#0c3df4,#02b5ff);
color:#fff;
}
.roi-table th{
padding:16px 10px;
font-weight:600;
border-color:#dfe8ff;
white-space:nowrap;
}
.roi-table td{
padding:16px 10px;
vertical-align:middle;
white-space:nowrap;
border-color:#e7eef8;
}
.roi-table tbody tr:nth-child(even){
background:#f8faff;
}
.roi-table::-webkit-scrollbar{
height:8px;
}
.roi-table::-webkit-scrollbar-thumb{
background:#0c7dff;
border-radius:20px;
}
.roi-table::-webkit-scrollbar-track{
background:#edf4ff;
}
/* ===========================
Tablet
=========================== */
@media (max-width:991px){
.roi-table table{
min-width:820px;
font-size:13.5px;
}
.roi-table th,
.roi-table td{
padding:14px 16px;
}
}
/* ===========================
Mobile
=========================== */
@media (max-width:768px){
.roi-table{
border-radius:12px;
}
.roi-table table{
min-width:760px;
font-size:13px;
}
.roi-table th,
.roi-table td{
padding:12px 14px;
}
}
/* Mobile */
@media (max-width: 767px) {
.numbers.style-8 .numbers-btm .num,
.numbers.style-8 .numbers-btm .number,
.numbers.style-8 .numbers-btm h2,
.numbers.style-8 .numbers-btm h3 {
font-size: 30px !important;
line-height: 1.1 !important;
}
.numbers.style-8 .numbers-btm p {
font-size: 16px !important;
}
}
/* Remove all accordion borders */
.accordion-item{
border: 0 !important;
border-radius: 0 !important;
}
/* Add only one bottom border */
.accordion-button{
border: 0 !important;
border-bottom: 1px solid #ccc !important;
box-shadow: none !important;
}
.accordion-button:not(.collapsed){
border-bottom: 1px solid #e9ecef !important;
box-shadow: none !important;
}
.accordion-collapse{
border: 0 !important;
}
.accordion-body{
border: 0 !important;
}
/* =====================================================
DATANXZEN HEADER - MOBILE RESPONSIVE
===================================================== */
@media (max-width: 767px){
/* ==========================
Header Background
========================== */
header.style-9{
background-image:url("../img/header/5.png") !important;
background-repeat:no-repeat !important;
background-size:82% auto !important;
background-position:right bottom !important;
background-color:#020b24 !important;
min-height:720px !important;
overflow:hidden;
}
/* ==========================
Navbar
========================== */
.navbar.style-9 .content{
padding:12px 15px !important;
border-bottom:none !important;
}
.navbar.style-9 .navbar-brand{
width:auto !important;
max-width:150px !important;
min-width:auto !important;
}
.navbar.style-9 .navbar-brand img{
width:140px !important;
height:auto !important;
display:block;
}
.navbar-toggler{
padding:4px 6px !important;
border:none !important;
}
/* ==========================
Hero Content
========================== */
header.style-9 .content.section-padding{
padding:70px 0 40px !important;
}
header.style-9 .info{
max-width:240px !important;
transform:none !important;
position:relative;
z-index:10;
}
/* Small Blue Title */
header.style-9 .info h6{
font-size:16px !important;
font-weight:600;
color:#1b8dff !important;
margin-bottom:12px !important;
}
/* Main Heading */
header.style-9 .info h1{
font-size:28px !important;
font-weight:800 !important;
line-height:1.2 !important;
color:#fff !important;
margin-bottom:18px !important;
letter-spacing:-0.5px;
}
header.style-9 .info h1 br{
display:none !important;
}
/* Description */
header.style-9 .hero-description{
max-width:220px !important;
font-size:15px !important;
line-height:1.8 !important;
color:#ffffff !important;
margin-bottom:22px !important;
}
/* ==========================
Buttons
========================== */
header.style-9 .btns{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:10px;
margin-top:10px !important;
position:relative !important;
left:auto !important;
bottom:auto !important;
}
header.style-9 .btn{
width:170px !important;
height:44px !important;
border-radius:10px !important;
padding:0 16px !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
margin:0 !important;
}
header.style-9 .btn small{
font-size:14px !important;
font-weight:600;
}
header.style-9 .btn i{
width:22px !important;
height:22px !important;
line-height:22px !important;
font-size:11px !important;
margin-left:8px;
}
}
/* ==========================================
Extra Small Devices
========================================== */
@media (max-width:480px){
header.style-9{
background-size:80% auto !important;
background-position:right bottom !important;
min-height:680px !important;
}
header.style-9 .navbar-brand img{
width:130px !important;
}
header.style-9 .info{
max-width:220px !important;
}
header.style-9 .info h1{
font-size:24px !important;
}
header.style-9 .hero-description{
font-size:14px !important;
max-width:200px !important;
}
header.style-9 .btn{
width:160px !important;
height:42px !important;
}
}
/* ======================================
HEADER MOBILE BACKGROUND FIX
Add at END of mobile-fix.css
====================================== */
@media (max-width:767px){
header.style-9{
min-height:650px !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
}
/* ============================================================
Mobile UX fixes (added 14 Aug 2026)
- 16px form controls: prevents iOS Safari auto-zoom on focus
- Larger tap targets for footer links on touch devices
============================================================ */
@media (max-width: 767.98px) {
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
font-size: 16px !important;
}
footer .items ul li a {
display: inline-block;
padding: 6px 0;
min-height: 32px;
line-height: 1.6;
}
}