/* =========================================
   Data Software Analysis — Services Page
   Pure CSS3 — Blue Futuristic Theme
   ========================================= */

:root{
  --primary:#1E88E5;
  --primary-2:#4FC3F7;
  --bg:#050B18;
  --bg-2:#0B1225;
  --bg-3:#0E1830;
  --glow:rgba(30,136,229,.4);
  --glow-soft:rgba(30,136,229,.18);
  --text:#ffffff;
  --muted:#A8B3C7;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(79,195,247,.25);
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ============ BACKGROUND FX ============ */
.bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(ellipse at top,#0a1530 0%,var(--bg) 60%);}
.grid-overlay{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(79,195,247,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,195,247,.06) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
}
.aurora{position:absolute;border-radius:50%;filter:blur(120px);opacity:.55;mix-blend-mode:screen;animation:float 18s ease-in-out infinite}
.aurora-1{width:520px;height:520px;background:var(--glow);top:-100px;left:-120px}
.aurora-2{width:600px;height:600px;background:rgba(79,195,247,.25);top:40%;right:-150px;animation-delay:-6s}
.aurora-3{width:480px;height:480px;background:rgba(30,136,229,.3);bottom:-160px;left:30%;animation-delay:-12s}
#particles{position:absolute;inset:0;width:100%;height:100%}

@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.08)}
}

/* ============ COMMON ============ */
.eyebrow{
  display:inline-block;font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--primary-2);font-weight:500;margin-bottom:18px;
}
.grad{
  background:linear-gradient(120deg,#fff 0%,var(--primary-2) 50%,var(--primary) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-head{text-align:center;max-width:720px;margin:0 auto 70px}
.section-head h2{font-size:clamp(32px,4vw,52px);margin-bottom:14px}
.section-head p{color:var(--muted);font-size:17px}

/* ============ HERO ============ */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:120px 24px 80px;text-align:center;
}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.orb-1{width:300px;height:300px;background:var(--glow);top:20%;left:10%;animation:float 12s ease-in-out infinite}
.orb-2{width:240px;height:240px;background:rgba(79,195,247,.3);bottom:20%;right:12%;animation:float 14s ease-in-out infinite -4s}

/* Hero Background Image */
.hero-bg-image{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none;
    z-index:1;
    bottom:-300px;

}

.hero-bg-image img{
    width:900px;
    max-width:65vw;
    object-fit:contain;
    opacity:.20;
    filter:brightness(3) saturate(1)
           drop-shadow(0 0 80px rgba(30,136,229,.35));
    animation:heroImageFloat 10s ease-in-out infinite;
}

@keyframes heroImageFloat{
    0%,100%{
        transform:translateY(12px) scale(1);
    }
    50%{
        transform:translateY(-18px) scale(1.04);
    }
}

.hero-inner{position:relative;z-index:5;max-width:900px}
.hero-title{
  font-size:clamp(44px,7vw,88px);
  margin-bottom:24px;
  text-shadow:0 0 60px rgba(30,136,229,.3);
}
.hero-sub{
  font-size:clamp(16px,1.6vw,20px);
  color:var(--muted);max-width:680px;margin:0 auto 40px;
}
.hero-cta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:60px;font-weight:500;font-size:15px;
  position:relative;overflow:hidden;transition:all .35s cubic-bezier(.2,.8,.2,1);
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary) 0%,#1565C0 100%);
  color:#fff;
  box-shadow:0 8px 30px var(--glow),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px var(--glow)}
.btn-primary::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .8s;
}
.btn-primary:hover::before{transform:translateX(100%)}

.scroll-indicator{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--muted);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  animation:bob 2.4s ease-in-out infinite;
  z-index:5;
}
.mouse{width:24px;height:38px;border:1.5px solid var(--line-strong);border-radius:14px;position:relative;display:block}
.wheel{position:absolute;top:6px;left:50%;width:3px;height:7px;background:var(--primary-2);border-radius:3px;transform:translateX(-50%);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:1;top:6px}80%{opacity:0;top:18px}100%{opacity:0}}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ============ SERVICES GRID ============ */
.services{padding:120px 24px;max-width:1280px;margin:0 auto;position:relative}
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}

.card{
  position:relative;padding:34px 28px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(11,18,37,.7) 0%,rgba(11,18,37,.4) 100%);
  border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  overflow:hidden;cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;
  animation:floatCard 6s ease-in-out infinite;
  transform-style:preserve-3d;
}
.card:nth-child(2n){animation-delay:-2s}
.card:nth-child(3n){animation-delay:-4s}

@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.card::before{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  background:linear-gradient(135deg,transparent,rgba(79,195,247,.18),transparent 60%);
  opacity:0;transition:opacity .5s;pointer-events:none;
}
.card::after{
  content:"";position:absolute;top:-50%;left:-60%;width:60%;height:200%;
  background:linear-gradient(120deg,transparent,rgba(79,195,247,.25),transparent);
  transform:skewX(-20deg);transition:left .9s ease;pointer-events:none;
}
.card:hover{
  transform:translateY(-10px);
  border-color:var(--line-strong);
  box-shadow:0 20px 60px -10px var(--glow),0 0 0 1px var(--glow-soft) inset;
  animation-play-state:paused;
}
.card:hover::before{opacity:1}
.card:hover::after{left:120%}

.card-icon{
  width:64px;height:64px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(30,136,229,.2),rgba(30,136,229,.05));
  border:1px solid var(--line-strong);
  margin-bottom:22px;color:var(--primary-2);
  box-shadow:0 0 30px rgba(30,136,229,.2) inset;
  transition:transform .5s;
}
.card:hover .card-icon{transform:scale(1.08) rotate(-4deg)}
.card-icon svg{width:30px;height:30px}

.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--muted);font-size:14.5px;margin-bottom:22px;min-height:62px}

.learn{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
  color:var(--primary-2);letter-spacing:.05em;
  padding:10px 16px;border-radius:30px;
  border:1px solid var(--line-strong);
  background:rgba(30,136,229,.06);
  transition:all .35s;
}
.learn svg{width:14px;height:14px;transition:transform .35s}
.learn:hover{background:rgba(30,136,229,.18);box-shadow:0 0 20px var(--glow-soft)}
.learn:hover svg{transform:translateX(4px)}

/* ============ DETAILS ============ */
.details{padding:60px 24px 140px;position:relative}
.details-inner{max-width:1280px;margin:0 auto}
.details-head{text-align:center;margin-bottom:60px;min-height:160px}
.details-head h2{
  font-size:clamp(32px,4.5vw,56px);margin-bottom:16px;
  background:linear-gradient(120deg,#fff,var(--primary-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .4s;
}
.details-head p{color:var(--muted);font-size:17px;max-width:680px;margin:0 auto;transition:opacity .4s}

.details-head.swap h2,.details-head.swap p{opacity:0;transform:translateY(10px)}

/* Carousel */
.carousel{
  position:relative;display:flex;align-items:center;gap:16px;
  max-width:1200px;margin:0 auto;
}
.car-viewport{
  flex:1;overflow:hidden;padding:30px 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.car-track{
  display:flex;gap:22px;transition:transform .7s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.feature{
  flex:0 0 320px;padding:32px 26px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(14,24,48,.85),rgba(11,18,37,.6));
  border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:transform .5s,box-shadow .5s,border-color .5s,opacity .5s;
  opacity:.55;transform:scale(.92);
  min-height:300px;display:flex;flex-direction:column;
}
.feature.active{
  opacity:1;transform:scale(1);
  border-color:var(--line-strong);
  box-shadow:0 20px 60px -10px var(--glow),inset 0 0 0 1px var(--glow-soft);
}
.feature-icon{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,rgba(30,136,229,.25),rgba(30,136,229,.05));
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary-2);margin-bottom:20px;
  box-shadow:0 0 24px rgba(30,136,229,.2) inset;
}
.feature-icon svg{width:28px;height:28px}
.feature h4{font-size:18px;margin-bottom:10px;font-family:'Space Grotesk',sans-serif}
.feature p{color:var(--muted);font-size:14px}

.car-btn{
  width:48px;height:48px;border-radius:50%;
  background:rgba(11,18,37,.7);border:1px solid var(--line-strong);
  color:var(--primary-2);display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(14px);transition:all .3s;flex-shrink:0;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.car-btn:hover{background:var(--primary);color:#fff;box-shadow:0 6px 24px var(--glow);transform:scale(1.08)}

.car-dots{display:flex;justify-content:center;gap:8px;margin-top:30px}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.15);transition:all .3s;cursor:pointer;
}
.dot.active{background:var(--primary-2);width:26px;border-radius:8px;box-shadow:0 0 12px var(--glow)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.1s}
.reveal:nth-child(3){transition-delay:.2s}
.reveal:nth-child(4){transition-delay:.3s}

/* ============ RESPONSIVE ============ */
@media(max-width:768px){
  .services{padding:80px 18px}
  .details{padding:40px 18px 100px}
  .feature{flex:0 0 78vw;min-height:280px}
  .car-btn{width:42px;height:42px}
  .section-head{margin-bottom:50px}
  .hero{padding:100px 20px 70px}
}
@media(max-width:480px){
  .card{padding:28px 22px}
  .card p{min-height:auto}
}


/* ==========================================================
   CLIENT TESTIMONIALS
========================================================== */

.testimonial-section{
    position:relative;
    padding:120px 0;
    background:transparent;
    overflow:hidden;
    isolation:isolate;
}


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

.testimonial-bg{

    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;

}

.glow{

    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.28;
    animation:floatGlow 12s ease-in-out infinite;

}

.glow1{

    width:420px;
    height:420px;

    background:#1E88E5;

    top:-150px;
    left:-120px;

}

.glow2{

    width:350px;
    height:350px;

    background:#00BFFF;

    right:-100px;
    bottom:50px;

    animation-delay:3s;

}

.glow3{

    width:280px;
    height:280px;

    background:#4FC3F7;

    top:45%;
    left:40%;

    animation-delay:6s;

}


@keyframes floatGlow{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0px);

}

}


/*======================
HEADING
======================*/

.testimonial-heading{
    max-width:760px;
    margin:auto;
    text-align:center;
    margin-bottom:70px;
    position:relative;
    z-index:10;
    isolation:isolate;
}

.testimonial-heading span{

    color:#38BDF8;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.9rem;

    font-weight:700;

}

.testimonial-heading h2{

    margin-top:15px;

    color:#fff;

    font-size:3rem;

    font-weight:700;

    line-height:1.2;

}

.testimonial-heading h2 span{

    color:#38BDF8;

}

.testimonial-heading p{

    margin-top:20px;

    color:#AFC6E9;

    font-size:1rem;

    line-height:1.8;

}



/*======================
MARQUEE
======================*/

.marquee{
    position:relative;
    z-index:2;
    overflow:hidden;
    margin:28px 0;
}

.marquee-track{
    display:flex;
    gap:18px;
    width:max-content;
}



/*======================
CARD
======================*/

.t-card{

    width:320px;

    min-height:210px;

    padding:24px;

    border-radius:24px;

    background:rgba(12,18,38,.72);

    backdrop-filter:blur(22px);

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

    box-shadow:

    0 20px 50px rgba(0,0,0,.35),

    inset 0 0 0 1px rgba(255,255,255,.03);

    transition:.45s;

    flex-shrink:0;

    position:relative;

    overflow:hidden;

}

.t-card::before{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

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

    border-radius:50%;

    right:-70px;

    top:-70px;

}

.t-card:hover{

    transform:translateY(-12px) scale(1.03);

    border-color:#38BDF8;

    box-shadow:

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

    0 25px 70px rgba(0,0,0,.45);

}


/*======================
CLIENT INFO
======================*/

.client{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}

.avatar{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    color:white;

    background:linear-gradient(135deg,#1E88E5,#38BDF8);

    box-shadow:

    0 0 20px rgba(56,189,248,.45);

    flex-shrink:0;

}

.client h4{

    color:white;

    font-size:1rem;

    margin-bottom:4px;

}

.client small{

    color:#9BB5D9;

    font-size:.85rem;

}


/*======================
STARS
======================*/

.stars{

    color:#38BDF8;

    letter-spacing:3px;

    font-size:15px;

    margin-bottom:16px;

}


/*======================
TEXT
======================*/

.t-card p{

    color:#D6E5FF;

    font-size:.95rem;

    line-height:1.8;

}


/*======================
SHINE EFFECT
======================*/

.t-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.10),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

}

.t-card:hover::after{

    left:150%;

}

/*==========================================================
MARQUEE ANIMATION
==========================================================*/

.marquee-track{
    animation: marqueeLeft 35s linear infinite;
    will-change: transform;
    align-items: stretch;
    padding-right: 18px;
}

.marquee.reverse .marquee-track{

    animation: marqueeRight 35s linear infinite;

}

.marquee:hover .marquee-track{

    animation-play-state: paused;

}

@keyframes marqueeLeft{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes marqueeRight{

    from{

        transform:translateX(-50%);

    }

    to{

        transform:translateX(0);

    }

}


/*==========================================================
FLOATING CARD EFFECT
==========================================================*/

.t-card{

    animation:cardFloat 6s ease-in-out infinite;

}

.t-card:nth-child(2){

    animation-delay:.5s;

}

.t-card:nth-child(3){

    animation-delay:1s;

}

.t-card:nth-child(4){

    animation-delay:1.5s;

}

.t-card:nth-child(5){

    animation-delay:2s;

}

.t-card:nth-child(6){

    animation-delay:2.5s;

}

.t-card:nth-child(7){

    animation-delay:3s;

}

.t-card:nth-child(8){

    animation-delay:3.5s;

}

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*==========================================================
BLUE BORDER GLOW
==========================================================*/

.t-card:hover{

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

    box-shadow:

    0 0 12px rgba(56,189,248,.35),

    0 0 40px rgba(56,189,248,.18),

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

}


/*==========================================================
AVATAR HOVER
==========================================================*/

.avatar{

    transition:.35s;

}

.t-card:hover .avatar{

    transform:rotate(10deg) scale(1.12);

    box-shadow:

    0 0 25px rgba(56,189,248,.8);

}


/*==========================================================
CLIENT NAME
==========================================================*/

.client h4{

    transition:.3s;

}

.t-card:hover h4{

    color:#38BDF8;

}


/*==========================================================
FADE EDGES
==========================================================*/

.marquee::before,

.marquee::after{

    content:"";

    position:absolute;

    top:0;

    width:140px;

    height:100%;

    z-index:20;

    pointer-events:none;

}

.marquee::before{

    left:0;

    background:linear-gradient(

        90deg,

        #050816,

        transparent

    );

}

.marquee::after{

    right:0;

    background:linear-gradient(

        -90deg,

        #050816,

        transparent

    );

}


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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#050816;

}

::-webkit-scrollbar-thumb{

    background:#1E88E5;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#38BDF8;

}


/* ===========================
   Hamburger
=========================== */

.hamburger{

    width:56px;
    height:56px;

    display:none;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    gap:6px;

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

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

    border-radius:18px;

    cursor:pointer;

    transition:.35s;

}

.hamburger:hover{

    background:rgba(46,164,255,.12);

}

.hamburger span{

    width:24px;
    height:2.5px;

    background:#fff;

    border-radius:20px;

    transition:.35s ease;

}

/* Open */

.hamburger.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.hamburger.active span:nth-child(2){

    opacity:0;

}

.hamburger.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

@media(max-width:992px){

.hamburger{

display:flex;

}

}
/* ==========================================================
   GLOBAL RESPONSIVE
==========================================================*/

/* Large Desktop */
@media (max-width:1400px){

.hero-content h1{
    font-size:4.5rem;
}

.hero__visual{
    transform:translate(-250px,-100px);
}

}


/* Laptop */
@media (max-width:1200px){

.about-hero{
    padding:120px 6% 60px;
}

.hero-content h1{
    font-size:3.8rem;
}

.hero-content p{
    font-size:1rem;
}

.hero__visual{
    transform:none;
    min-height:420px;
}

.who-we-are{
    margin-top:0;
    padding:80px 6%;
}

.about-highlights{
    grid-template-columns:repeat(2,1fr);
}

.why-grid{
    grid-template-columns:repeat(2,1fr);
}

.section-header h2,
.brands-header h2,
.why-header h2{
    font-size:2.6rem;
}

}


/* Tablet */
@media (max-width:992px){

.about-hero{
    min-height:auto;
    padding:120px 30px 80px;
}

.hero-container{
    display:flex;
    flex-direction:column;
}

.hero-content{
    order:1;
}

.hero__visual{
    order:2;
    min-height:350px;
    transform:none;
}

.hero-content h1{
    font-size:3rem;
    line-height:1.2;
}

.hero-content p{
    width:100%;
}

.hero__robot{
    max-width:280px;
}

.hero__ring--one{
    width:300px;
    height:300px;
}

.hero__ring--two{
    width:240px;
    height:240px;
}

.who-we-are{
    margin-top:0;
    padding:80px 30px;
}

.about-highlights{
    grid-template-columns:1fr;
}

.highlight-card{
    padding:24px;
}

.why-grid{
    grid-template-columns:repeat(2,1fr);
}

.brands-header h2,
.section-header h2,
.why-header h2{
    font-size:2.2rem;
}

.brand-card{
    width:180px;
}

}


/* Mobile */
@media (max-width:768px){

.about-hero{
    padding:100px 20px 60px;
}

.hero-tag{
    font-size:.75rem;
}

.hero-content h1{
    font-size:2.3rem;
}

.hero-content p{
    font-size:.95rem;
    line-height:1.7;
}

.hero__visual{
    min-height:260px;
}

.hero__robot{
    max-width:220px;
}

.hero__ring--one{
    width:220px;
    height:220px;
}

.hero__ring--two{
    width:170px;
    height:170px;
}

.hero-card{
    display:none;
}

.who-we-are{
    padding:60px 20px;
}

.section-header h2,
.brands-header h2,
.why-header h2{
    font-size:2rem;
}

.highlight-card{
    padding:20px;
}

.about-highlights{
    gap:20px;
}

.why-grid{
    grid-template-columns:1fr;
}

.stack-card{
    height:auto;
    min-height:280px;
}

.card-inner{
    padding:22px;
}

.trusted-brands{
    padding:70px 20px;
}

.brand-card{
    width:150px;
    height:80px;
}

.brand-card img{
    max-width:110px;
}

}


/* Small Mobile */
@media (max-width:480px){

.about-hero{
    padding:90px 15px 50px;
}

.hero-content h1{
    font-size:1.9rem;
}

.hero-content p{
    font-size:.9rem;
}

.hero-tag,
.section-tag{
    font-size:.68rem;
    padding:8px 16px;
}

.section-header h2,
.brands-header h2,
.why-header h2{
    font-size:1.7rem;
}

.hero__robot{
    max-width:180px;
}

.hero__ring--one{
    width:180px;
    height:180px;
}

.hero__ring--two{
    width:140px;
    height:140px;
}

.highlight-card{
    padding:18px;
}

.card-inner{
    padding:18px;
}

.icon{
    width:50px;
    height:50px;
    font-size:1.4rem;
}

.brand-card{
    width:130px;
    height:70px;
}

.brand-card img{
    max-width:90px;
}

}


/* Ultra Small */
@media (max-width:360px){

.hero-content h1{
    font-size:1.6rem;
}

.section-header h2,
.brands-header h2,
.why-header h2{
    font-size:1.5rem;
}

.hero__robot{
    max-width:150px;
}

}
@media (max-width:992px){

.nav-links{
    display:none;
}

.login-btn{
    display:none;
}

.nav-divider{
    display:none;
}

.hamburger{
    display:flex;
    align-items:center;
    justify-content:center;
}

}

@media (max-width:480px){

.mobile-menu{

    width:100%;

    max-width:100%;

    right:-100%;

}

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

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

.marquee-track,

.t-card,

.glow{

animation:none !important;

}

}


/*==========================================================
OPTIONAL GRID OVERLAY
==========================================================*/

.testimonial-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(79,195,247,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(79,195,247,.06) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse at center,#000 35%,transparent 85%);
    opacity:.55;
    pointer-events:none;
    z-index:0;
}


/*==========================================================
BOTTOM GLOW LINE
==========================================================*/

.testimonial-section::after{
content:"";
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width:320px;
height:2px;
background:linear-gradient(
90deg,
transparent,
#38BDF8,
transparent
);
box-shadow:
0 0 20px rgba(56,189,248,.7);
z-index:0;
}