/* ===========================================================
ADS AI WEBSITE
Version : 2.0
Author  : ADS AI
===========================================================*/

/* ===========================================================
GOOGLE FONT
===========================================================*/

:root{

--primary:#2563eb;
--secondary:#06b6d4;
--accent:#38bdf8;

--dark:#050816;
--dark2:#091223;
--card:#0d1a30;

--white:#ffffff;
--text:#d8e3f1;
--muted:#8fa6c2;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--radius:18px;

--shadow:
0 15px 45px rgba(0,0,0,.35);

--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:

radial-gradient(circle at top left,#173a79 0%,transparent 35%),

radial-gradient(circle at bottom right,#005b88 0%,transparent 30%),

linear-gradient(180deg,#050816,#081423,#050816);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

/* ===========================================================
SCROLLBAR
===========================================================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#07101f;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

#2563eb,

#06b6d4

);

border-radius:30px;

}

/* ===========================================================
TYPOGRAPHY
===========================================================*/

h1,h2,h3,h4,h5,h6{

font-weight:800;

color:#fff;

line-height:1.2;

}

h1{

font-size:68px;

}

h2{

font-size:46px;

}

h3{

font-size:28px;

}

p{

color:var(--muted);

font-size:17px;

}

a{

text-decoration:none;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}

/* ===========================================================
CONTAINER
===========================================================*/

.section{

padding:110px 0;

position:relative;

}

.dark-section{

background:rgba(255,255,255,.02);

backdrop-filter:blur(18px);

}

.section-title{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:10px 20px;

border-radius:100px;

background:rgba(56,189,248,.12);

color:#4cc9ff;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.section-title h2{

margin-bottom:18px;

}

/* ===========================================================
HEADER
===========================================================*/

.header{

position:fixed;

top:0;

left:0;

right:0;

z-index:9999;

padding:18px 0;

background:rgba(5,8,22,.55);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,.05);

}

.logo{

font-size:34px;

font-weight:900;

color:#fff;

letter-spacing:2px;

}

.logo span{

color:#4cc9ff;

}

.navbar-nav{

gap:15px;

}

.nav-link{

color:#dbeafe !important;

font-weight:600;

position:relative;

}

.nav-link:hover{

color:#4cc9ff !important;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#38bdf8;

transition:.3s;

}

.nav-link:hover::after{

width:100%;

}

/* ===========================================================
BUTTONS
===========================================================*/

.btn{

border-radius:50px;

padding:14px 30px;

font-weight:700;

transition:.35s;

}

.btn-primary{

background:

linear-gradient(

135deg,

#2563eb,

#06b6d4

);

border:none;

box-shadow:

0 10px 35px rgba(37,99,235,.35);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 18px 40px rgba(37,99,235,.55);

}

.btn-outline-light{

border:2px solid rgba(255,255,255,.25);

}

.btn-outline-light:hover{

background:#fff;

color:#081423;

}

/* ===========================================================
BACKGROUND GRID
===========================================================*/

.background-grid{

position:fixed;

inset:0;

pointer-events:none;

opacity:.05;

background-image:

linear-gradient(

rgba(255,255,255,.12) 1px,

transparent 1px),

linear-gradient(

90deg,

rgba(255,255,255,.12) 1px,

transparent 1px);

background-size:50px 50px;

z-index:-1;

}

/* ===========================================================
HERO
===========================================================*/

.hero{

padding-top:180px;

padding-bottom:120px;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:

radial-gradient(

circle,

rgba(56,189,248,.25),

transparent 70%

);

right:-250px;

top:-150px;

filter:blur(40px);

animation:floatGlow 8s infinite alternate;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

background:rgba(37,99,235,.18);

border:1px solid rgba(56,189,248,.25);

border-radius:100px;

font-weight:700;

margin-bottom:30px;

}

.hero h1{

margin-bottom:30px;

}

.hero h1 span{

background:

linear-gradient(

90deg,

#4cc9ff,

#38bdf8,

#2563eb

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

max-width:640px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:50px;

}

.hero-stats{

display:flex;

gap:60px;

}

.hero-stats h2{

font-size:42px;

color:#4cc9ff;

margin-bottom:8px;

}

.hero-card{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

border-radius:25px;

padding:35px;

box-shadow:var(--shadow);

}

.hero-card-header{

display:flex;

align-items:center;

gap:12px;

font-weight:700;

margin-bottom:25px;

}

.online-dot{

width:12px;

height:12px;

border-radius:50%;

background:#22c55e;

box-shadow:0 0 18px #22c55e;

animation:pulse 1.8s infinite;

}

.terminal{

background:#06101f;

border-radius:18px;

padding:22px;

font-family:monospace;

margin-bottom:25px;

}

.terminal div{

margin:10px 0;

color:#7df9ff;

}

.dashboard-item{

margin-top:18px;

}

.progress{

height:12px;

background:#0e203b;

border-radius:20px;

overflow:hidden;

}

.progress-bar{

background:linear-gradient(90deg,#2563eb,#06b6d4);

}

/* ===========================================================
SERVICE CARDS
===========================================================*/

.service-card{

height:100%;

padding:40px 35px;

background:rgba(255,255,255,.04);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

transition:all .35s ease;

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:4px;

background:linear-gradient(90deg,#2563eb,#06b6d4,#38bdf8);

transition:.45s;

}

.service-card:hover::before{

left:0;

}

.service-card:hover{

transform:translateY(-12px);

border-color:#38bdf8;

box-shadow:

0 20px 45px rgba(37,99,235,.25);

}

.service-icon{

width:78px;

height:78px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

font-size:34px;

background:

linear-gradient(135deg,#2563eb,#06b6d4);

color:#fff;

}

.service-card h3{

margin-bottom:18px;

}

.service-card ul{

margin-top:25px;

padding-left:18px;

margin-bottom:30px;

}

.service-card li{

margin:10px 0;

color:#b7c7db;

}

.service-card a{

font-weight:700;

color:#4cc9ff;

}

.service-card a i{

margin-left:8px;

transition:.3s;

}

.service-card:hover a i{

margin-left:16px;

}

/* ===========================================================
PRODUCTS
===========================================================*/

.product-card{

height:100%;

padding:35px;

background:linear-gradient(

180deg,

rgba(255,255,255,.06),

rgba(255,255,255,.03)

);

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

position:relative;

overflow:hidden;

}

.product-card:hover{

transform:translateY(-12px);

border-color:#38bdf8;

}

.product-card::after{

content:"";

position:absolute;

right:-70px;

top:-70px;

width:180px;

height:180px;

background:

radial-gradient(circle,

rgba(56,189,248,.18),

transparent);

}

.product-logo{

width:82px;

height:82px;

border-radius:24px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

margin-bottom:28px;

background:

linear-gradient(

135deg,

#2563eb,

#06b6d4

);

color:white;

}

.product-card h3{

margin-bottom:15px;

}

.product-tag{

display:inline-block;

padding:10px 18px;

margin-top:25px;

border-radius:40px;

background:#143256;

color:#72dbff;

font-weight:700;

font-size:14px;

letter-spacing:.5px;

}

/* ===========================================================
TECH STACK
===========================================================*/

.tech-card{

height:100%;

padding:35px;

border-radius:24px;

text-align:center;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.tech-card:hover{

transform:translateY(-10px);

border-color:#4cc9ff;

}

.tech-card i{

font-size:54px;

margin-bottom:25px;

background:linear-gradient(

135deg,

#38bdf8,

#2563eb

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.tech-card h4{

margin-bottom:15px;

}

/* ===========================================================
FEATURES
===========================================================*/

.feature-card{

height:100%;

padding:35px;

text-align:center;

border-radius:22px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.feature-card:hover{

transform:translateY(-12px);

background:rgba(37,99,235,.10);

}

.feature-card i{

font-size:42px;

margin-bottom:22px;

color:#38bdf8;

}

.feature-card h3{

margin-bottom:18px;

}

/* ===========================================================
PORTFOLIO
===========================================================*/

.portfolio-card{

height:100%;

padding:40px;

border-radius:24px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

position:relative;

overflow:hidden;

}

.portfolio-card:hover{

transform:scale(1.03);

border-color:#4cc9ff;

}

.portfolio-card::before{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:5px;

background:linear-gradient(

90deg,

#2563eb,

#38bdf8

);

}

.portfolio-card h3{

margin-bottom:20px;

}

/* ===========================================================
CARD HOVER EFFECT
===========================================================*/

.service-card,
.product-card,
.tech-card,
.feature-card,
.portfolio-card{

cursor:pointer;

}

.service-card:hover,
.product-card:hover,
.tech-card:hover,
.feature-card:hover,
.portfolio-card:hover{

box-shadow:

0 25px 60px rgba(0,0,0,.35);

}

/* ===========================================================
FLOATING GLOW
===========================================================*/

@keyframes floatGlow{

0%{

transform:translateY(0);

}

100%{

transform:translateY(30px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.15);

opacity:.65;

}

100%{

transform:scale(1);

opacity:1;

}

}

@keyframes floatCard{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.hero-card{

animation:floatCard 5s ease-in-out infinite;

}

/* ===========================================================
CTA SECTION
===========================================================*/

.cta-section{

padding:120px 0;

position:relative;

overflow:hidden;

}

.cta-box{

background:linear-gradient(
135deg,
rgba(37,99,235,.22),
rgba(6,182,212,.18)
);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border-radius:32px;

padding:80px;

text-align:center;

position:relative;

overflow:hidden;

}

.cta-box::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:420px;

height:420px;

border-radius:50%;

background:radial-gradient(circle,
rgba(56,189,248,.25),
transparent 70%);

}

.cta-box h2{

font-size:52px;

margin:25px 0;

}

.cta-box p{

max-width:760px;

margin:auto;

margin-bottom:45px;

font-size:19px;

}

.cta-badge{

display:inline-block;

padding:12px 22px;

border-radius:50px;

background:rgba(255,255,255,.08);

font-weight:700;

color:#4cc9ff;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

/* ===========================================================
CONTACT
===========================================================*/

.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}

.contact-card{

display:flex;

gap:22px;

align-items:flex-start;

padding:28px;

border-radius:22px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.contact-card:hover{

transform:translateX(10px);

border-color:#38bdf8;

}

.contact-card i{

width:64px;

height:64px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

background:linear-gradient(
135deg,
#2563eb,
#06b6d4
);

color:white;

}

.contact-card h4{

margin-bottom:10px;

}

.contact-form{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

padding:45px;

backdrop-filter:blur(18px);

}

.form-control,

.form-select{

background:#081425;

border:1px solid rgba(255,255,255,.08);

color:white;

padding:18px;

border-radius:14px;

}

.form-control::placeholder{

color:#8fa6c2;

}

.form-control:focus,

.form-select:focus{

background:#081425;

color:white;

border-color:#38bdf8;

box-shadow:none;

}

textarea{

resize:none;

}

/* ===========================================================
FOOTER
===========================================================*/

.footer{

padding:90px 0 35px;

background:#030712;

border-top:1px solid rgba(255,255,255,.06);

}

.footer-logo{

font-size:40px;

font-weight:900;

margin-bottom:20px;

}

.footer-logo span{

color:#38bdf8;

}

.footer h5{

margin-bottom:25px;

}

.footer ul{

list-style:none;

padding:0;

}

.footer li{

margin:12px 0;

}

.footer a{

color:#9fb5cf;

}

.footer a:hover{

color:#4cc9ff;

}

.social-links{

display:flex;

gap:15px;

margin-top:30px;

}

.social-links a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#10213d;

color:white;

transition:.35s;

}

.social-links a:hover{

transform:translateY(-6px);

background:#2563eb;

}

.footer-bottom{

margin-top:45px;

padding-top:25px;

display:flex;

justify-content:space-between;

flex-wrap:wrap;

border-top:1px solid rgba(255,255,255,.08);

}

/* ===========================================================
ANIMATIONS
===========================================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.7s;

}

.fade-up.show{

opacity:1;

transform:none;

}

.scale-up{

transform:scale(.92);

opacity:0;

transition:.6s;

}

.scale-up.show{

opacity:1;

transform:scale(1);

}

/* ===========================================================
UTILITY
===========================================================*/

.text-gradient{

background:linear-gradient(
90deg,
#4cc9ff,
#2563eb
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.shadow-lg{

box-shadow:
0 20px 60px rgba(0,0,0,.35);

}

/* ===========================================================
RESPONSIVE
===========================================================*/

@media(max-width:1200px){

.hero h1{

font-size:58px;

}

}

@media(max-width:992px){

.hero{

text-align:center;

padding-top:150px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

margin-bottom:60px;

}

.hero-card{

margin-top:40px;

}

.cta-box{

padding:60px 35px;

}

.cta-box h2{

font-size:42px;

}

.footer-bottom{

text-align:center;

justify-content:center;

gap:15px;

}

}

@media(max-width:768px){

.section{

padding:80px 0;

}

h1{

font-size:42px;

}

h2{

font-size:34px;

}

.hero p{

font-size:17px;

}

.hero-stats{

gap:30px;

}

.hero-stats h2{

font-size:32px;

}

.service-card,

.product-card,

.tech-card,

.feature-card,

.portfolio-card{

padding:28px;

}

.contact-form{

padding:30px;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:34px;

}

}

@media(max-width:576px){

.logo{

font-size:28px;

}

.hero{

padding-top:130px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-stats{

flex-direction:column;

gap:20px;

}

.footer{

text-align:center;

}

.social-links{

justify-content:center;

}

}

/* ===========================================================
STYLE.CSS — PART 4
FINAL JS SUPPORT + PRODUCTION POLISH
APPEND TO assets/css/style.css
===========================================================*/

/* ===========================================================
SCROLLED HEADER
===========================================================*/

.header{

transition:
background .3s ease,
box-shadow .3s ease,
padding .3s ease;

}

.header.scrolled{

background:rgba(5,8,22,.94);

box-shadow:
0 12px 35px rgba(0,0,0,.25);

padding:10px 0;

}

/* ===========================================================
ACTIVE NAVIGATION
===========================================================*/

.nav-link.active{

color:#4cc9ff !important;

}

.nav-link.active::after{

width:100%;

}

/* ===========================================================
NAVBAR TOGGLER
===========================================================*/

.navbar-toggler{

border:1px solid rgba(255,255,255,.15);

border-radius:12px;

padding:9px 11px;

box-shadow:none !important;

}

.navbar-toggler:focus{

box-shadow:
0 0 0 3px rgba(56,189,248,.16) !important;

}

.navbar-toggler-icon{

filter:
invert(1)
brightness(2);

}

/* ===========================================================
ACCESSIBLE KEYBOARD FOCUS
===========================================================*/

.keyboard-navigation a:focus-visible,
.keyboard-navigation button:focus-visible,
.keyboard-navigation input:focus-visible,
.keyboard-navigation select:focus-visible,
.keyboard-navigation textarea:focus-visible{

outline:
3px solid rgba(56,189,248,.85);

outline-offset:4px;

}

/* ===========================================================
SELECTION
===========================================================*/

::selection{

background:#2563eb;

color:#ffffff;

}

::-moz-selection{

background:#2563eb;

color:#ffffff;

}

/* ===========================================================
CARD POINTER GLOW SUPPORT
===========================================================*/

.service-card,
.product-card,
.tech-card,
.feature-card,
.portfolio-card{

isolation:isolate;

will-change:transform;

}

/* ===========================================================
BETTER FORM SELECT
===========================================================*/

.form-select{

color-scheme:dark;

cursor:pointer;

}

.form-select option{

background:#081425;

color:#ffffff;

}

/* ===========================================================
FORM AUTOFILL
===========================================================*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{

-webkit-text-fill-color:#ffffff;

-webkit-box-shadow:
0 0 0 1000px #081425 inset;

transition:
background-color 9999s ease-in-out 0s;

}

/* ===========================================================
FORM BUTTON DISABLED
===========================================================*/

.contact-form button:disabled{

opacity:.8;

cursor:not-allowed;

transform:none !important;

}

/* ===========================================================
BUTTON RIPPLE SUPPORT
===========================================================*/

.btn{

isolation:isolate;

}

.btn > *{

position:relative;

z-index:2;

}

/* ===========================================================
SMOOTH ANCHOR OFFSET
===========================================================*/

section[id]{

scroll-margin-top:95px;

}

/* ===========================================================
FOOTER LINK POLISH
===========================================================*/

.footer li a{

position:relative;

display:inline-flex;

align-items:center;

}

.footer li a::before{

content:"";

width:0;

height:1px;

margin-right:0;

background:#38bdf8;

transition:
width .3s ease,
margin-right .3s ease;

}

.footer li a:hover::before{

width:14px;

margin-right:8px;

}

/* ===========================================================
SOCIAL ICON GLOW
===========================================================*/

.social-links a:hover{

box-shadow:
0 10px 30px rgba(37,99,235,.4);

}

/* ===========================================================
PAGE READY
===========================================================*/

body:not(.ads-page-ready){

opacity:.99;

}

body.ads-page-ready{

opacity:1;

}

/* ===========================================================
RESIZE PERFORMANCE
===========================================================*/

body.is-resizing *,
body.is-resizing *::before,
body.is-resizing *::after{

transition:none !important;

}

/* ===========================================================
PAGE HIDDEN PERFORMANCE
===========================================================*/

body.page-hidden .hero-card{

animation-play-state:paused;

}

/* ===========================================================
RESPONSIVE NAVIGATION PANEL
===========================================================*/

@media(max-width:991.98px){

.header{

padding:12px 0;

}

.navbar-collapse{

margin-top:16px;

padding:20px;

border-radius:20px;

background:
rgba(8,20,37,.97);

border:
1px solid rgba(255,255,255,.08);

box-shadow:
0 20px 50px rgba(0,0,0,.35);

backdrop-filter:
blur(20px);

}

.navbar-nav{

gap:5px;

}

.nav-link{

padding:
12px 14px !important;

border-radius:10px;

}

.nav-link:hover,
.nav-link.active{

background:
rgba(56,189,248,.08);

}

.nav-link::after{

display:none;

}

.navbar-collapse .btn{

margin-left:0 !important;

margin-top:15px;

width:100%;

}

}

/* ===========================================================
MOBILE BACK TO TOP
===========================================================*/

@media(max-width:576px){

#adsBackToTop{

right:18px !important;

bottom:18px !important;

width:50px !important;

height:50px !important;

}

}

/* ===========================================================
TOUCH DEVICE OPTIMIZATION
===========================================================*/

@media(hover:none){

.service-card:hover,
.product-card:hover,
.tech-card:hover,
.feature-card:hover,
.portfolio-card:hover,
.contact-card:hover{

transform:none;

}

.hero-card{

animation:none;

}

}

/* ===========================================================
REDUCED MOTION
===========================================================*/

@media(prefers-reduced-motion:reduce){

html{

scroll-behavior:auto;

}

*,
*::before,
*::after{

animation-duration:.01ms !important;

animation-iteration-count:1 !important;

transition-duration:.01ms !important;

scroll-behavior:auto !important;

}

}

/* ===========================================================
PRINT
===========================================================*/

@media print{

.header,
.cta-section,
.social-links,
#adsBackToTop,
#adsScrollProgress,
#adsPointerSpotlight{

display:none !important;

}

body{

background:#ffffff;

color:#111827;

}

.section,
.footer{

padding:
30px 0;

}

h1,
h2,
h3,
h4,
h5,
h6,
p{

color:#111827 !important;

}

}

/* ===========================================================
VERY SMALL DEVICES
===========================================================*/

@media(max-width:380px){

.hero h1{

font-size:36px;

}

.section-title h2{

font-size:30px;

}

.hero-card{

padding:22px;

}

.contact-form{

padding:22px;

}

.cta-box{

padding:
38px 18px;

}

}

/* ===========================================================
LARGE DESKTOP
===========================================================*/

@media(min-width:1400px){

.container{

max-width:1320px;

}

.hero h1{

font-size:72px;

}

}

/* ===========================================================
END ADS AI V2 STYLESHEET
===========================================================*/
/* ===========================================================
ADS AI V2 - MOBILE RESPONSIVE MASTER FIX
=========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

.row > * {
    min-width: 0;
}

/* ===========================================================
TABLET AND MOBILE
=========================================================== */

@media (max-width: 991.98px) {

    .header {
        width: 100%;
        padding: 10px 0;
    }

    .header .container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .navbar {
        width: 100%;
        padding: 0;
    }

    .navbar-brand.logo,
    .logo {
        font-size: 27px;
        line-height: 1;
        margin-right: 0;
    }

    .navbar-toggler {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 48px;
        padding: 8px;
    }

    .navbar-collapse {
        width: 100%;
        max-width: 100%;
        margin-top: 14px;
    }

    .hero {
        width: 100%;
        min-height: auto;
        padding-top: 120px;
        padding-bottom: 70px;
        overflow: hidden;
    }

    .hero .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero .row {
        margin-left: 0;
        margin-right: 0;
    }

    .hero .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .hero .col-lg-6:first-child {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
        margin-bottom: 45px;
    }

    .hero .col-lg-6:last-child {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
    }

    .hero-tag {
        display: inline-flex;
        max-width: 100%;
        white-space: normal;
        text-align: center;
        font-size: 13px;
        padding: 9px 16px;
        margin-bottom: 22px;
    }

    .hero h1 {
        display: block !important;
        width: 100%;
        max-width: 100%;
        font-size: clamp(38px, 9vw, 56px);
        line-height: 1.08;
        letter-spacing: -1.5px;
        margin: 0 0 24px;
        overflow-wrap: break-word;
    }

    .hero h1 span {
        display: inline;
    }

    .hero p {
        width: 100%;
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        font-size: 17px;
        line-height: 1.7;
    }

    .hero-buttons {
        width: 100%;
        justify-content: center;
        margin-bottom: 38px;
    }

    .hero-stats {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px 40px;
        margin-bottom: 10px;
    }

    .hero-stats > div {
        min-width: 90px;
    }

    .hero-card {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        padding: 28px;
        transform: none !important;
        animation: none;
    }

    .terminal {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        padding: 20px;
    }

    .terminal div {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .dashboard {
        width: 100%;
    }

    .section {
        padding: 75px 0;
    }

    .section .container,
    .cta-section .container,
    .footer .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-title {
        width: 100%;
        max-width: 680px;
        margin-bottom: 45px;
    }

    .section-title h2 {
        font-size: clamp(32px, 7vw, 44px);
        overflow-wrap: break-word;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card {
        width: 100%;
        max-width: 100%;
    }

    .cta-section {
        padding: 75px 0;
    }

    .cta-box {
        width: 100%;
        max-width: 100%;
        padding: 50px 28px;
    }

    .cta-box h2 {
        font-size: clamp(32px, 7vw, 44px);
    }

    .contact-form {
        width: 100%;
        max-width: 100%;
    }
}

/* ===========================================================
MOBILE
=========================================================== */

@media (max-width: 767.98px) {

    .hero {
        padding-top: 105px;
        padding-bottom: 60px;
        text-align: center;
    }

    .hero .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero h1 {
        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.1;
        letter-spacing: -1px;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.65;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        align-items: start;
    }

    .hero-stats > div {
        min-width: 0;
    }

    .hero-stats h2 {
        font-size: 28px;
    }

    .hero-stats p {
        font-size: 12px;
        line-height: 1.3;
        margin-bottom: 0;
    }

    .hero-card {
        padding: 20px;
        border-radius: 22px;
    }

    .hero-card-header {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .terminal {
        padding: 18px 14px;
        border-radius: 15px;
    }

    .terminal div {
        font-size: 12px;
        line-height: 1.55;
        margin: 8px 0;
    }

    .dashboard-item {
        margin-top: 16px;
    }

    .dashboard-item h5 {
        font-size: 15px;
    }

    .section {
        padding: 65px 0;
    }

    .section .container,
    .cta-section .container,
    .footer .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-title {
        margin-bottom: 38px;
    }

    .section-title span {
        font-size: 12px;
        padding: 8px 15px;
    }

    .section-title h2 {
        font-size: 32px;
        line-height: 1.15;
    }

    .section-title p {
        font-size: 15px;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card {
        padding: 25px 22px;
        border-radius: 20px;
    }

    .service-card h3,
    .product-card h3,
    .feature-card h3,
    .portfolio-card h3 {
        font-size: 23px;
    }

    .service-icon,
    .product-logo {
        width: 66px;
        height: 66px;
        font-size: 28px;
        border-radius: 18px;
    }

    .tech-card i {
        font-size: 44px;
    }

    .cta-section {
        padding: 60px 0;
    }

    .cta-box {
        padding: 42px 20px;
        border-radius: 24px;
    }

    .cta-box h2 {
        font-size: 31px;
        line-height: 1.15;
    }

    .cta-box p {
        font-size: 16px;
    }

    .cta-buttons {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    .contact-card {
        padding: 20px;
        gap: 15px;
    }

    .contact-card i {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 21px;
    }

    .contact-form {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .form-control,
    .form-select {
        width: 100%;
        min-width: 0;
        font-size: 16px;
        padding: 15px;
    }

    .footer {
        padding-top: 65px;
    }

    .footer .row > div {
        margin-bottom: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ===========================================================
SMALL MOBILE - 400PX AND BELOW
=========================================================== */

@media (max-width: 400px) {

    .header .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .logo,
    .navbar-brand.logo {
        font-size: 25px;
    }

    .navbar-toggler {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .hero {
        padding-top: 100px;
    }

    .hero .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero h1 {
        font-size: 34px;
        line-height: 1.08;
    }

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

    .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .hero-stats h2 {
        font-size: 25px;
    }

    .hero-stats p {
        font-size: 11px;
    }

    .hero-card {
        padding: 16px;
        border-radius: 18px;
    }

    .terminal {
        padding: 15px 11px;
    }

    .terminal div {
        font-size: 11px;
    }

    .section .container,
    .cta-section .container,
    .footer .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card {
        padding: 22px 18px;
    }

    .contact-form {
        padding: 20px 14px;
    }

    #adsBackToTop {
        right: 14px !important;
        bottom: 14px !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/* ===========================================================
END MOBILE RESPONSIVE MASTER FIX
=========================================================== */