/* =========================================================
ROOT
========================================================= */

:root{

--black:#05080d;
--dark:#09111d;
--dark2:#101a2b;
--dark3:#142137;

--gold:#d9a441;
--gold2:#f4cf72;
--gold3:#fff0b8;

--white:#ffffff;

--text:#172033;
--muted:#687386;

--light:#f7f8fb;
--border:#e7e9ee;

--blue:#5965ff;
--cyan:#35d5ff;

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

--radius:22px;

--container:1200px;

}


/* =========================================================
RESET
========================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:
Inter,
Arial,
Helvetica,
sans-serif;

color:var(--text);

background:#fff;

line-height:1.6;

overflow-x:hidden;

}

img{

max-width:100%;

height:auto;

display:block;

}

a{

text-decoration:none;

transition:.3s ease;

}

button,
input,
textarea,
select{

font-family:inherit;

}


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

.container{

width:min(1200px,92%);

margin:auto;

}


/* =========================================================
TOP BAR
========================================================= */

.topbar{

background:#03060a;

color:#cbd5e1;

font-size:13px;

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

}

.topbar-inner{

min-height:40px;

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

}

.topbar a{

color:#fff;

}

.topbar a:hover{

color:var(--gold2);

}

.top-highlight{

color:var(--gold2);

font-weight:800;

}


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

.header{

position:sticky;

top:0;

z-index:9999;

background:rgba(5,8,13,.96);

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

backdrop-filter:blur(18px);

}

.nav{

min-height:82px;

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

}


/* =========================================================
BRAND
========================================================= */

.brand{

display:flex;

align-items:center;

gap:12px;

color:#fff;

min-width:max-content;

}

.brand:hover{

color:#fff;

}

.brand-logo{

width:52px;

height:52px;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

border-radius:15px;

background:
linear-gradient(
135deg,
#f4cf72 0%,
#d9a441 45%,
#fff0b8 100%
);

color:#080b10;

font-size:17px;

font-weight:1000;

letter-spacing:1px;

box-shadow:
0 8px 30px rgba(217,164,65,.25);

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

position:relative;

overflow:hidden;

}

.brand-logo::before{

content:"";

position:absolute;

width:35px;

height:35px;

border:1px solid rgba(0,0,0,.18);

border-radius:50%;

transform:rotate(25deg);

}

.brand-logo span{

position:relative;

z-index:2;

}

.brand-name{

display:block;

color:#fff;

font-size:16px;

line-height:1.1;

font-weight:1000;

letter-spacing:.5px;

}

.brand-sub{

display:block;

color:#9ca9bb;

font-size:8px;

letter-spacing:1.4px;

margin-top:5px;

font-weight:800;

}


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

.nav-menu{

display:flex;

align-items:center;

gap:3px;

}

.nav-menu a{

color:#d7deea;

font-size:13px;

font-weight:700;

padding:11px 11px;

border-radius:10px;

position:relative;

}

.nav-menu a:hover,
.nav-menu a.active{

color:var(--gold2);

background:rgba(217,164,65,.09);

}

.nav-menu a.active::after{

content:"";

position:absolute;

bottom:3px;

left:13px;

right:13px;

height:2px;

border-radius:10px;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold2)
);

}


/* =========================================================
CTA NAV
========================================================= */

.nav-cta{

display:inline-flex !important;

align-items:center;

justify-content:center;

gap:8px;

padding:12px 18px !important;

background:
linear-gradient(
135deg,
var(--gold),
var(--gold2)
) !important;

color:#080b10 !important;

border:1px solid var(--gold2);

border-radius:10px !important;

font-weight:900 !important;

box-shadow:
0 8px 25px rgba(217,164,65,.20);

}

.nav-cta:hover{

background:
linear-gradient(
135deg,
#fff0b8,
#f4cf72
) !important;

color:#000 !important;

transform:translateY(-2px);

box-shadow:
0 12px 30px rgba(217,164,65,.40);

}

.nav-cta::after{

display:none !important;

}


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

.menu-btn{

display:none;

width:45px;

height:45px;

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

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

color:#fff;

border-radius:10px;

cursor:pointer;

font-size:19px;

}


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

.ecom-hero{

position:relative;

padding:105px 0 115px;

color:#fff;

overflow:hidden;

background:

radial-gradient(
circle at 85% 20%,
rgba(217,164,65,.18),
transparent 27%
),

radial-gradient(
circle at 10% 90%,
rgba(53,213,255,.08),
transparent 30%
),

linear-gradient(
135deg,
#04070c,
#09121f 55%,
#101b2c
);

}

.ecom-hero::before{

content:"";

position:absolute;

width:550px;

height:550px;

right:-270px;

top:-300px;

border:1px solid rgba(217,164,65,.10);

border-radius:50%;

}

.ecom-hero::after{

content:"";

position:absolute;

width:320px;

height:320px;

left:-220px;

bottom:-220px;

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

border-radius:50%;

}

.hero-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1.05fr .95fr;

gap:65px;

align-items:center;

}

.hero-label{

display:inline-flex;

align-items:center;

gap:9px;

color:var(--gold2);

font-size:13px;

font-weight:900;

letter-spacing:1.5px;

text-transform:uppercase;

margin-bottom:18px;

}

.hero-label::before{

content:"";

width:30px;

height:2px;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold2)
);

}

.ecom-hero h1{

font-size:
clamp(
42px,
5.2vw,
70px
);

line-height:1.03;

letter-spacing:-2.5px;

margin-bottom:22px;

}

.ecom-hero h1 span{

color:var(--gold2);

}

.hero-description{

color:#bdc8d8;

font-size:17px;

line-height:1.85;

max-width:700px;

margin-bottom:27px;

}

.hero-actions{

display:flex;

gap:12px;

flex-wrap:wrap;

}


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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:9px;

padding:14px 21px;

border-radius:11px;

font-size:14px;

font-weight:800;

border:1px solid transparent;

}

.btn-gold{

background:
linear-gradient(
135deg,
var(--gold),
var(--gold2)
);

color:#101010;

box-shadow:
0 12px 30px rgba(217,164,65,.20);

}

.btn-gold:hover{

transform:translateY(-3px);

box-shadow:
0 16px 38px rgba(217,164,65,.32);

color:#000;

}

.btn-outline{

color:#fff;

border-color:rgba(255,255,255,.18);

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

}

.btn-outline:hover{

background:#fff;

color:#111;

}


/* =========================================================
HERO STORE CARD
========================================================= */

.hero-store-card{

position:relative;

padding:28px;

border-radius:25px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.11),
rgba(255,255,255,.035)
);

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

box-shadow:
0 30px 80px rgba(0,0,0,.38);

overflow:hidden;

}

.hero-store-card::before{

content:"";

position:absolute;

width:210px;

height:210px;

right:-90px;

top:-90px;

border-radius:50%;

border:1px solid rgba(217,164,65,.18);

}

.store-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

position:relative;

z-index:2;

}

.store-top h3{

font-size:23px;

color:#fff;

}

.store-badge{

padding:7px 11px;

border-radius:20px;

font-size:10px;

font-weight:900;

color:#111;

background:
linear-gradient(
135deg,
var(--gold),
var(--gold2)
);

}

.product-preview{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

position:relative;

z-index:2;

}

.product-box{

min-height:130px;

border-radius:15px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.09),
rgba(255,255,255,.025)
);

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

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

padding:15px;

}

.product-box i{

font-size:30px;

color:var(--gold2);

margin-bottom:9px;

}

.product-box strong{

font-size:12px;

color:#fff;

}

.product-box span{

font-size:10px;

color:#9eacbd;

}

.store-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:9px;

margin-top:12px;

position:relative;

z-index:2;

}

.stat{

padding:12px 8px;

text-align:center;

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

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

border-radius:11px;

}

.stat strong{

display:block;

font-size:16px;

color:var(--gold2);

}

.stat span{

font-size:9px;

color:#9eacbd;

}


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

.section{

padding:105px 0;

}

.section.light{

background:#f7f8fb;

}

.section-head{

max-width:820px;

margin-bottom:48px;

}

.eyebrow{

display:inline-block;

color:#b47e1d;

font-size:12px;

font-weight:900;

letter-spacing:1.6px;

text-transform:uppercase;

margin-bottom:13px;

}

.section-head h2{

font-size:
clamp(
34px,
4vw,
54px
);

line-height:1.1;

letter-spacing:-1.5px;

color:#111827;

margin-bottom:17px;

}

.section-head h2 span{

color:#b88222;

}

.section-head p{

color:#687386;

font-size:16px;

line-height:1.8;

}


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

.feature-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:18px;

}

.feature-card{

padding:27px 21px;

background:#fff;

border:1px solid #e2e6ed;

border-radius:18px;

transition:.35s;

position:relative;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

left:0;

top:0;

height:3px;

width:0;

background:
linear-gradient(
90deg,
var(--gold),
var(--gold2)
);

transition:.35s;

}

.feature-card:hover{

transform:translateY(-7px);

border-color:#d9a441;

box-shadow:
0 20px 45px rgba(16,24,40,.09);

}

.feature-card:hover::before{

width:100%;

}

.feature-icon{

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:
linear-gradient(
135deg,
#fff2c9,
#f4cf72
);

color:#6e4a0b;

font-size:19px;

margin-bottom:18px;

}

.feature-card h3{

font-size:17px;

color:#111827;

margin-bottom:8px;

}

.feature-card p{

color:#687386;

font-size:12px;

line-height:1.7;

}


/* =========================================================
ECOMMERCE TYPES
========================================================= */

.type-section{

background:#f7f8fb;

}

.type-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

}

.type-card{

padding:30px 25px;

background:#fff;

border:1px solid #e2e6ed;

border-radius:20px;

transition:.35s;

}

.type-card:hover{

transform:translateY(-7px);

box-shadow:
0 20px 50px rgba(16,24,40,.10);

border-color:#d9a441;

}

.type-number{

font-size:12px;

font-weight:900;

color:#b47e1d;

letter-spacing:2px;

margin-bottom:14px;

}

.type-card h3{

font-size:21px;

margin-bottom:10px;

color:#111827;

}

.type-card p{

font-size:13px;

color:#687386;

line-height:1.8;

}

.type-card ul{

list-style:none;

margin-top:18px;

}

.type-card li{

font-size:12px;

color:#475467;

padding:6px 0;

border-bottom:1px dashed #e4e7ec;

}

.type-card li i{

color:#b47e1d;

margin-right:7px;

}


/* =========================================================
PRICING
========================================================= */

.pricing-section{

background:
linear-gradient(
135deg,
#07101c,
#0c1727
);

color:#fff;

position:relative;

overflow:hidden;

}

.pricing-section::before{

content:"";

position:absolute;

width:500px;

height:500px;

right:-250px;

top:-200px;

border-radius:50%;

border:1px solid rgba(217,164,65,.10);

}

.pricing-section .section-head h2{

color:#fff;

}

.pricing-section .section-head p{

color:#aab7c8;

}

.pricing-section .eyebrow{

color:var(--gold2);

}

.pricing-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

position:relative;

z-index:2;

}

.price-card{

padding:32px 25px;

border-radius:22px;

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

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

position:relative;

transition:.35s;

}

.price-card:hover{

transform:translateY(-8px);

border-color:rgba(217,164,65,.50);

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

}

.price-card.popular{

border-color:rgba(217,164,65,.65);

background:
linear-gradient(
135deg,
rgba(217,164,65,.13),
rgba(255,255,255,.045)
);

}

.popular-label{

position:absolute;

top:-13px;

right:20px;

padding:6px 12px;

border-radius:20px;

background:
linear-gradient(
135deg,
var(--gold),
var(--gold2)
);

color:#111;

font-size:10px;

font-weight:1000;

letter-spacing:.5px;

}

.price-card h3{

font-size:20px;

margin-bottom:7px;

color:#fff;

}

.price-card .price{

font-size:37px;

font-weight:1000;

color:var(--gold2);

line-height:1.2;

margin:12px 0 3px;

}

.price-card .price small{

font-size:12px;

color:#aab7c8;

font-weight:500;

}

.price-card .price-desc{

font-size:11px;

color:#9daabd;

margin-bottom:20px;

}

.price-list{

list-style:none;

margin-bottom:25px;

}

.price-list li{

font-size:12px;

color:#c1cad7;

padding:8px 0;

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

}

.price-list li i{

color:var(--gold2);

margin-right:7px;

}

.price-card .btn{

width:100%;

}


/* =========================================================
INTERNATIONAL
========================================================= */

.international{

background:#fff;

}

.international-box{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

align-items:stretch;

}

.international-content{

padding:42px;

border-radius:24px;

background:
linear-gradient(
135deg,
#07101c,
#101d30
);

color:#fff;

position:relative;

overflow:hidden;

}

.international-content::after{

content:"";

position:absolute;

width:300px;

height:300px;

right:-150px;

bottom:-170px;

border-radius:50%;

border:1px solid rgba(217,164,65,.15);

}

.international-content h3{

font-size:30px;

line-height:1.2;

margin-bottom:14px;

position:relative;

z-index:2;

}

.international-content h3 span{

color:var(--gold2);

}

.international-content p{

font-size:13px;

line-height:1.85;

color:#aebaca;

position:relative;

z-index:2;

}

.global-points{

display:grid;

grid-template-columns:1fr 1fr;

gap:11px;

margin-top:24px;

position:relative;

z-index:2;

}

.global-point{

padding:13px;

border-radius:12px;

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

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

font-size:12px;

color:#d6deea;

}

.global-point i{

color:var(--gold2);

margin-right:7px;

}

.international-pricing{

padding:42px;

border-radius:24px;

background:#f7f8fb;

border:1px solid #e2e6ed;

}

.international-pricing h3{

font-size:27px;

color:#111827;

margin-bottom:8px;

}

.international-pricing>p{

font-size:13px;

color:#687386;

margin-bottom:22px;

}

.global-price{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 0;

border-bottom:1px solid #e3e7ed;

gap:15px;

}

.global-price strong{

font-size:14px;

color:#111827;

}

.global-price span{

font-size:20px;

font-weight:1000;

color:#b47e1d;

white-space:nowrap;

}

.global-price small{

display:block;

font-size:10px;

font-weight:500;

color:#7a8595;

}


/* =========================================================
PROCESS
========================================================= */

.process-section{

background:#f7f8fb;

}

.process-grid{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:13px;

}

.process-card{

padding:25px 18px;

background:#fff;

border:1px solid #e2e6ed;

border-radius:18px;

text-align:center;

transition:.3s;

}

.process-card:hover{

transform:translateY(-6px);

border-color:#d9a441;

box-shadow:
0 15px 35px rgba(16,24,40,.08);

}

.process-number{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 15px;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--gold),
var(--gold2)
);

color:#111;

font-weight:1000;

}

.process-card h3{

font-size:15px;

margin-bottom:7px;

}

.process-card p{

font-size:11px;

line-height:1.7;

color:#687386;

}


/* =========================================================
LOCATIONS
========================================================= */

.locations{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:12px;

margin-top:25px;

}

.location{

padding:15px 10px;

text-align:center;

background:#fafbfc;

border:1px solid #e3e7ed;

border-radius:12px;

font-size:13px;

font-weight:800;

color:#344054;

transition:.3s;

}

.location:hover{

transform:translateY(-4px);

color:#a36e12;

border-color:#d9a441;

background:#fffdf8;

}


/* =========================================================
WHY WITS
========================================================= */

.why-section{

background:
linear-gradient(
135deg,
#07101c,
#0d1828
);

color:#fff;

}

.why-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

}

.why-card{

padding:30px 24px;

border-radius:19px;

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

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

transition:.35s;

}

.why-card:hover{

transform:translateY(-6px);

border-color:rgba(217,164,65,.35);

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

}

.why-icon{

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:
linear-gradient(
135deg,
var(--gold),
var(--gold2)
);

color:#111;

font-size:19px;

margin-bottom:18px;

}

.why-card h3{

font-size:18px;

margin-bottom:8px;

}

.why-card p{

color:#aab8c9;

font-size:13px;

line-height:1.75;

}


/* =========================================================
FAQ
========================================================= */

.faq{

max-width:950px;

}

.faq details{

border-bottom:1px solid #e3e7ed;

padding:20px 0;

}

.faq summary{

cursor:pointer;

list-style:none;

color:#111827;

font-size:17px;

font-weight:800;

padding-right:30px;

position:relative;

}

.faq summary::-webkit-details-marker{

display:none;

}

.faq summary::after{

content:"+";

position:absolute;

right:0;

top:-3px;

font-size:25px;

color:#b27b18;

}

.faq details[open] summary::after{

content:"−";

}

.faq p{

color:#687386;

line-height:1.8;

padding-top:12px;

max-width:850px;

}


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

.cta-section{

padding:90px 0;

background:

radial-gradient(
circle at 50% 0%,
rgba(217,164,65,.18),
transparent 35%
),

linear-gradient(
135deg,
#050a12,
#0d1828
);

}

.cta-box{

text-align:center;

padding:65px 25px;

border:1px solid rgba(217,164,65,.18);

border-radius:28px;

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

}

.cta-box h2{

color:#fff;

font-size:
clamp(
34px,
5vw,
58px
);

line-height:1.08;

margin-bottom:17px;

}

.cta-box h2 span{

color:var(--gold2);

}

.cta-box p{

color:#abb8c9;

max-width:720px;

margin:0 auto 28px;

line-height:1.8;

}

.cta-actions{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

}


/* =========================================================
SOCIAL
========================================================= */

.social-icons{

display:flex;

gap:9px;

margin-top:18px;

}

.social-icons a{

width:38px;

height:38px;

display:flex;

align-items:center;

justify-content:center;

border-radius:10px;

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

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

color:#d7deea;

font-size:15px;

}

.social-icons a:hover{

background:
linear-gradient(
135deg,
var(--gold),
var(--gold2)
);

color:#111;

transform:translateY(-3px);

}


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

.footer{

background:#03060a;

color:#9caabc;

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

}

.footer-main{

padding:75px 0 50px;

display:grid;

grid-template-columns:
1.5fr
1fr
1fr
1.2fr;

gap:45px;

}

.footer h4{

color:#fff;

font-size:15px;

margin-bottom:17px;

}

.footer-company-name{

color:var(--gold2);

font-weight:1000;

}

.footer p{

color:#8997aa;

font-size:13px;

line-height:1.8;

}

.footer-links a{

display:block;

color:#9caabc;

font-size:13px;

padding:7px 9px;

margin:2px 0;

border-left:2px solid transparent;

border-radius:6px;

}

.footer-links a:hover{

color:var(--gold2);

background:rgba(217,164,65,.07);

border-left-color:var(--gold2);

transform:translateX(4px);

}

.footer-links a.highlight{

color:#fff;

background:rgba(217,164,65,.05);

border-left-color:#d9a441;

}

.footer-contact a{

display:block;

color:#aeb9c8;

font-size:13px;

padding:6px 0;

}

.footer-contact a:hover{

color:var(--gold2);

}

.footer-owner{

margin-top:15px;

padding:13px;

border:1px solid rgba(217,164,65,.15);

border-radius:10px;

background:rgba(217,164,65,.04);

}

.footer-owner strong{

color:#fff;

}

.footer-owner span{

color:var(--gold2);

font-weight:900;

}

.footer-bottom{

padding:20px 0;

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

display:flex;

justify-content:space-between;

gap:15px;

flex-wrap:wrap;

color:#68768a;

font-size:12px;

}

.footer-bottom strong{

color:#a9b5c4;

}


/* =========================================================
WHATSAPP
========================================================= */

.whatsapp{

position:fixed;

right:22px;

bottom:22px;

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#25d366;

color:#fff;

font-size:27px;

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

z-index:99999;

}

.whatsapp:hover{

transform:scale(1.08);

color:#fff;

}


/* =========================================================
BACK TOP
========================================================= */

.back-top{

position:fixed;

right:22px;

bottom:92px;

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:10px;

background:#111b29;

color:var(--gold2);

border:1px solid rgba(217,164,65,.25);

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9998;

}

.back-top.show{

opacity:1;

visibility:visible;

}


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

@media(max-width:1100px){

.nav-menu a{

padding:10px 7px;

font-size:11px;

}

.hero-grid{

gap:40px;

}

.feature-grid{

grid-template-columns:
repeat(2,1fr);

}

.pricing-grid{

grid-template-columns:
repeat(3,1fr);

}

.process-grid{

grid-template-columns:
repeat(3,1fr);

}

.locations{

grid-template-columns:
repeat(4,1fr);

}

.footer-main{

grid-template-columns:
repeat(2,1fr);

}

}


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

@media(max-width:850px){

.topbar-inner{

justify-content:center;

text-align:center;

flex-wrap:wrap;

padding:7px 0;

}

.nav{

min-height:72px;

}

.menu-btn{

display:flex;

align-items:center;

justify-content:center;

}

.nav-menu{

display:none;

position:absolute;

top:72px;

left:0;

right:0;

padding:15px;

flex-direction:column;

align-items:stretch;

background:
rgba(5,8,13,.99);

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

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

}

.nav-menu.open{

display:flex;

}

.nav-menu a{

padding:13px 15px;

font-size:14px;

}

.nav-menu a.active::after{

display:none;

}

.ecom-hero{

padding:80px 0 100px;

}

.hero-grid{

grid-template-columns:1fr;

}

.hero-store-card{

max-width:700px;

margin:auto;

}

.international-box{

grid-template-columns:1fr;

}

.type-grid{

grid-template-columns:
repeat(2,1fr);

}

.why-grid{

grid-template-columns:
repeat(2,1fr);

}

}


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

@media(max-width:650px){

.container{

width:min(92%,550px);

}

.topbar{

font-size:11px;

}

.brand-logo{

width:45px;

height:45px;

font-size:15px;

}

.brand-name{

font-size:14px;

}

.brand-sub{

font-size:7px;

}

.ecom-hero{

padding:65px 0 90px;

}

.ecom-hero h1{

font-size:42px;

letter-spacing:-1.7px;

}

.hero-description{

font-size:15px;

}

.hero-actions{

flex-direction:column;

align-items:stretch;

}

.hero-actions .btn{

width:100%;

}

.product-preview{

grid-template-columns:1fr 1fr;

}

.store-stats{

grid-template-columns:1fr 1fr 1fr;

}

.section{

padding:75px 0;

}

.section-head{

margin-bottom:35px;

}

.section-head h2{

font-size:34px;

}

.feature-grid,
.type-grid,
.pricing-grid,
.why-grid{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:
repeat(2,1fr);

}

.global-points{

grid-template-columns:1fr;

}

.international-content,
.international-pricing{

padding:30px 20px;

}

.locations{

grid-template-columns:
repeat(2,1fr);

}

.cta-section{

padding:65px 0;

}

.cta-box{

padding:50px 18px;

}

.footer-main{

grid-template-columns:1fr;

gap:32px;

padding:55px 0 35px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

align-items:center;

}

.whatsapp{

width:54px;

height:54px;

right:17px;

bottom:17px;

}

.back-top{

right:17px;

bottom:82px;

}

}