/*====================================================

            MYTRADESETU 3.0

        BUILDING THE FUTURE OF TRADE

====================================================*/


/*========================

RESET

========================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}


/*========================

ROOT

========================*/

:root{

--primary:#0B63D1;

--secondary:#18A64A;

--dark:#111111;

--text:#666666;

--white:#ffffff;

--light:#F8FAFC;

--border:#EAEAEA;

--radius:14px;

}


/*========================

HTML

========================*/

html{

scroll-behavior:smooth;

}


/*========================

BODY

========================*/

body{

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

background:var(--white);

color:var(--dark);

overflow-x:hidden;

line-height:1.6;

}


/*========================

COMMON

========================*/

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;

max-width:1400px;

margin:auto;

}


/*========================

NAVBAR

========================*/

.navbar{

width:100%;

height:90px;

background:#fff;

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

position:sticky;

top:0;

z-index:999;

}


.navbar-container{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}


.logo{

display:flex;

align-items:center;

}


.logo img{

height:58px;

width:auto;

display:block;

}


.menu ul{

display:flex;

align-items:center;

gap:38px;

}


.menu ul li a{

font-size:17px;

font-weight:600;

color:#111;

transition:.3s;

}


.menu ul li a:hover{

color:var(--primary);

}


.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 30px;

background:var(--primary);

color:#fff;

border-radius:12px;

font-weight:600;

transition:.3s;

}


.btn-primary:hover{

transform:translateY(-3px);

}


/*========================

HERO

========================*/

.hero{

width:100%;

min-height:calc(100vh - 90px);

display:flex;

align-items:center;

background:#ffffff;
}


.hero-container{

display:flex;

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

gap:70px;

padding:35px 0;

}
.hero-left{

flex:1;

max-width:500px;

}

.hero-right{

flex:1;

display:flex;

justify-content:center;

align-items:center;

}
/*====================================================

            HERO LEFT

====================================================*/

.hero-tag{

display:inline-block;

padding:10px 20px;

background:#EEF6FF;

color:var(--primary);

font-size:14px;

font-weight:700;

border-radius:50px;

letter-spacing:1px;

margin-bottom:22px;

}

.hero-left h1{

font-size:58px;

line-height:1.08;

}

.hero-left h1 span{

display:block;

color:var(--primary);

}

.hero-left h2{

font-size:28px;

}

.hero-left p{

font-size:18px;

line-height:1.6;

margin-bottom:28px;

}
/*========================

BUTTONS

========================*/

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.hero-btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

background:var(--primary);

color:#fff;

border-radius:12px;

font-weight:600;

transition:.3s;

}

.hero-btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 15px 30px rgba(11,99,209,.20);

}

.hero-btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border:2px solid var(--primary);

color:var(--primary);

border-radius:12px;

font-weight:600;

transition:.3s;

background:#fff;

}

.hero-btn-secondary:hover{

background:var(--primary);

color:#fff;

}

/*========================

RIGHT SIDE BASE

========================*/

.trade-system{

position:relative;

width:560px;

height:560px;

display:flex;

justify-content:center;

align-items:center;

margin:auto;

}

.trade-center{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:220px;

height:220px;

background:#fff;

border-radius:50%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

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

border:3px solid var(--primary);

z-index:100;

}

.trade-logo{

width:150px;

height:auto;

display:block;

}

.trade-center p{

margin-top:3px !important;

font-size:9px !important;

font-weight:700;

letter-spacing:0.5px !important;

line-height:1.1 !important;

text-align:center;

}
/*======================================

        HERO ORBIT FINAL

=======================================*/

.orbit{

position:absolute;

width:420px;

height:420px;

left:50%;

top:50%;

transform:translate(-50%,-50%);

border:2px dashed rgba(11,99,209,.15);

border-radius:50%;

}

/*----------------------------

COMMON ITEM

----------------------------*/

.orbit-item{

position:absolute;

width:110px;

height:110px;

background:#ffffff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:10px;

border:2px solid #EAEAEA;

box-shadow:0 10px 30px rgba(0,0,0,.08);

font-size:15px;

font-weight:600;

color:#111;

transition:.35s;

cursor:pointer;

}

.orbit-item:hover{

border-color:#0B63D1;

}

/*----------------------------

POSITION

----------------------------*/

.item1{

left:50%;

top:-55px;

transform:translateX(-50%);

}

.item2{

right:-55px;

top:50%;

transform:translateY(-50%);

}

.item3{

left:50%;

bottom:-55px;

transform:translateX(-50%);

}

.item4{

left:-55px;

top:50%;

transform:translateY(-50%);

}

.item5{

right:20px;

top:20px;

}

/*----------------------------

CENTER GLOW

----------------------------*/

.trade-center{

overflow:hidden;

}

.trade-center::before{

content:"";

position:absolute;

width:280px;

height:280px;

background:rgba(11,99,209,.05);

border-radius:50%;

z-index:-1;

}
/*======================================

HERO V2 ORBIT FIX

======================================*/

.trade-system{

position:relative;

width:600px;

height:600px;

margin:auto;

display:flex;

justify-content:center;

align-items:center;

}

/* CENTER */

.trade-center{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:220px;

height:220px;

border-radius:50%;

background:#fff;

border:3px solid #0B63D1;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

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

z-index:100;

}

/* LOGO */

.trade-logo{

width:150px;

height:auto;

}

/* ORBIT */

.orbit{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:420px;

height:420px;

border-radius:50%;

}

/* COMMON */

.orbit-item{

cursor:default;

transition:border-color .3s, box-shadow .3s;

}

/* TOP */

.item1{

left:50%;

top:0;

transform:translate(-50%,-50%);

}

/* RIGHT */

.item2{

right:0;

top:50%;

transform:translate(50%,-50%);

}

/* BOTTOM */

.item3{

left:50%;

bottom:0;

transform:translate(-50%,50%);

}

/* LEFT */

.item4{

left:0;

top:50%;

transform:translate(-50%,-50%);

}

.orbit-item:hover{

border-color:#0B63D1;

box-shadow:0 18px 35px rgba(11,99,209,.18);

}
/*========================

ORBIT ANIMATION

========================*/

@keyframes orbitRotate{

from{

transform:translate(-50%,-50%) rotate(0deg);

}

to{

transform:translate(-50%,-50%) rotate(360deg);

}

}

.orbit{

animation:orbitRotate 20s linear infinite;

}
/*==================================================

            WHY WE EXIST

==================================================*/

.why-exist{

padding:120px 0;

background:#F8FAFC;

}

.section-title{

max-width:850px;

margin:0 auto 70px;

text-align:center;

}

.section-title span{

display:inline-block;

padding:8px 18px;

background:#EEF6FF;

color:#0B63D1;

font-size:14px;

font-weight:700;

border-radius:50px;

letter-spacing:1px;

margin-bottom:20px;

}

.section-title h2{

font-size:52px;

font-weight:800;

line-height:1.2;

color:#111;

margin-bottom:22px;

}

.section-title p{

font-size:20px;

line-height:1.8;

color:#666;

max-width:760px;

margin:auto;

}

/*=========================

CARDS

=========================*/

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

background:#ffffff;

padding:40px 30px;

border-radius:20px;

text-align:center;

border:1px solid #EAEAEA;

box-shadow:0 10px 30px rgba(0,0,0,.05);

transition:.35s;

}

.why-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(11,99,209,.12);

border-color:#0B63D1;

}

.why-card h3{

font-size:26px;

font-weight:700;

margin-bottom:14px;

color:#111;

}

.why-card p{

font-size:17px;

line-height:1.7;

color:#666;

}

/*=========================

RESPONSIVE

=========================*/

@media(max-width:992px){

.why-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:40px;

}

.section-title p{

font-size:18px;

}

}
.why-card:nth-child(1) h3{

color:#0B63D1;

}

.why-card:nth-child(2) h3{

color:#18A64A;

}

.why-card:nth-child(3) h3{

color:#0B63D1;

}
/*==================================================

                OUR STORY

==================================================*/

.our-story{

padding:40px 0;

background:#ffffff;

}

.story-container{

display:flex;

justify-content:space-between;

align-items:center;

gap:80px;

}

.story-left{

flex:1;

max-width:620px;

}

.section-tag{

display:inline-block;

padding:8px 18px;

background:#EEF6FF;

color:#0B63D1;

border-radius:50px;

font-size:14px;

font-weight:700;

letter-spacing:1px;

margin-bottom:22px;

}

.story-left h2{

font-size:54px;

font-weight:800;

line-height:1.2;

color:#111;

margin-bottom:25px;

}

.story-left p{

font-size:18px;

line-height:1.8;

color:#666;

margin-bottom:22px;

}

.story-btn{

display:inline-block;

padding:16px 34px;

background:#0B63D1;

color:#ffffff;

border-radius:12px;

font-weight:600;

transition:.35s;

}

.story-btn:hover{

background:#18A64A;

transform:translateY(-4px);

}

/*==========================

RIGHT PANEL

==========================*/

.story-right{

flex:1;

display:flex;

justify-content:center;

}

.story-panel{

background:#F8FAFC;

padding:50px;

border-radius:24px;

border:1px solid #EAEAEA;

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

transition:.35s;

max-width:550px;

}

.story-panel:hover{

transform:translateY(-8px);

border-color:#0B63D1;

box-shadow:0 20px 45px rgba(11,99,209,.12);

}

.story-panel h3{

font-size:32px;

font-weight:700;

color:#0B63D1;

margin-bottom:20px;

line-height:1.3;

}

.story-panel p{

font-size:17px;

line-height:1.8;

color:#666;

}

/*==========================

RESPONSIVE

==========================*/

@media(max-width:992px){

.story-container{

flex-direction:column;

gap:50px;

}

.story-left{

max-width:100%;

}

.story-left h2{

font-size:40px;

}

.story-panel{

max-width:100%;

}

}
/*==================================================

            WHY MYTRADESETU

==================================================*/

.why-mts{

padding:40px 0;

background:#ffffff;

}

.mts-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.mts-card{

background:#ffffff;

padding:45px;

border:1px solid #EAEAEA;

border-radius:22px;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.mts-card:hover{

transform:translateY(-8px);

border-color:#0B63D1;

box-shadow:0 20px 45px rgba(11,99,209,.12);

}

.mts-card h3{

font-size:30px;

font-weight:700;

color:#0B63D1;

margin-bottom:18px;

line-height:1.3;

}

.mts-card p{

font-size:18px;

line-height:1.8;

color:#666;

}

@media(max-width:992px){

.mts-grid{

grid-template-columns:1fr;

}

.mts-card{

padding:35px;

}

.mts-card h3{

font-size:26px;

}

}
/*==================================================

                OUR MISSION

==================================================*/

.mission{

padding:40px 0;

background:#F8FAFC;

}

.mission-container{

display:flex;

justify-content:space-between;

align-items:center;

gap:80px;

}

.mission-left{

flex:1;

max-width:620px;

}

.mission-left h2{

font-size:54px;

font-weight:800;

line-height:1.2;

color:#111;

margin:20px 0;

}

.mission-left p{

font-size:19px;

line-height:1.8;

color:#666;

}

.mission-right{

flex:1;

display:flex;

justify-content:center;

}

.mission-box{

background:#ffffff;

padding:55px;

border-radius:24px;

border:1px solid #EAEAEA;

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

transition:.35s;

max-width:560px;

}

.mission-box:hover{

transform:translateY(-8px);

border-color:#0B63D1;

box-shadow:0 20px 45px rgba(11,99,209,.12);

}

.mission-box h3{

font-size:34px;

font-weight:700;

color:#0B63D1;

margin-bottom:20px;

line-height:1.3;

}

.mission-box p{

font-size:18px;

line-height:1.9;

color:#666;

}

@media(max-width:992px){

.mission-container{

flex-direction:column;

gap:50px;

}

.mission-left{

max-width:100%;

}

.mission-left h2{

font-size:40px;

}

.mission-box{

max-width:100%;

padding:35px;

}

}
/*==================================================

                OUR VALUES

==================================================*/

.our-values{

padding:40px 0;

background:#ffffff;

}

.values-list{

margin-top:70px;

display:flex;

flex-direction:column;

gap:28px;

}

.value-item{

padding:35px 40px;

border-left:5px solid #0B63D1;

background:#FAFBFD;

border-radius:0 18px 18px 0;

transition:.35s;

}

.value-item:hover{

background:#ffffff;

transform:translateX(10px);

box-shadow:0 15px 35px rgba(11,99,209,.08);

}

.value-item h3{

font-size:30px;

font-weight:700;

color:#0B63D1;

margin-bottom:12px;

}

.value-item p{

font-size:18px;

line-height:1.8;

color:#666;

max-width:900px;

}

@media(max-width:992px){

.our-values{

padding:80px 0;

}

.value-item{

padding:25px;

}

.value-item h3{

font-size:24px;

}

.value-item p{

font-size:16px;

}

}
/*==================================================

                HOW WE WORK

==================================================*/

.how-work{

padding:40px 0;

background:#F8FAFC;

}

/* Workflow */

.workflow{

margin-top:70px;

display:flex;

justify-content:space-between;

align-items:center;

gap:0;

flex-wrap:nowrap;

}

/* Box */

.workflow-item{

flex:1;

background:#ffffff;

padding:35px 20px;

border-radius:18px;

border:1px solid #EAEAEA;

text-align:center;

transition:.35s;

min-height:120px;

display:flex;

justify-content:center;

align-items:center;

}

.workflow-item:hover{

transform:translateY(-8px);

border-color:#0B63D1;

box-shadow:0 18px 40px rgba(11,99,209,.10);

}

/* Heading */

.workflow-item h3{

font-size:24px;

font-weight:700;

line-height:1.4;

color:#111;

transition:.3s;

}

.workflow-item:hover h3{

color:#18A64A;

}

/* Connecting Line */

.workflow-line{

width:70px;

height:2px;

background:linear-gradient(to right,#0B63D1,#18A64A);

border-radius:20px;

flex-shrink:0;

}

/* Mobile */

@media(max-width:992px){

.workflow{

flex-direction:column;

gap:20px;

}

.workflow-line{

width:2px;

height:50px;

background:linear-gradient(to bottom,#0B63D1,#18A64A);

}

.workflow-item{

width:100%;

}

}
/*==================================================

                THE BELIEF

==================================================*/

.belief{

padding:70px 0;

background:#111111;

color:#ffffff;

overflow:hidden;

position:relative;

}

/* Soft Brand Glow */

.belief::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:radial-gradient(circle,
rgba(11,99,209,.12),
rgba(24,166,74,.08),
transparent 70%);

top:-180px;

right:-150px;

border-radius:50%;

pointer-events:none;

}

/* Content */

.belief-content{

max-width:900px;

margin:0 auto;

text-align:center;

}

.belief .section-tag{

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

color:#18A64A;

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

}

.belief h2{

font-size:64px;

font-weight:800;

line-height:1.1;

margin:25px 0;

color:#ffffff;

}

.belief p{

font-size:22px;

line-height:1.9;

color:rgba(255,255,255,.75);

max-width:850px;

margin:auto;

}

/* Button */

.belief-btn{

display:inline-block;

margin-top:45px;

padding:18px 40px;

background:#0B63D1;

color:#ffffff;

border-radius:14px;

font-weight:600;

transition:.35s;

}

.belief-btn:hover{

background:#18A64A;

transform:translateY(-4px);

}

/* Founders */

.belief-founders{

display:flex;

justify-content:center;

gap:60px;

margin-top:90px;

flex-wrap:wrap;

}

/* Founder Card */

.founder-card{

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

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

padding:30px;

border-radius:24px;

width:280px;

text-align:center;

transition:.35s;

backdrop-filter:blur(8px);

}

.founder-card:hover{

transform:translateY(-8px);

border-color:#18A64A;

box-shadow:0 20px 45px rgba(24,166,74,.15);

}

/* Founder Image */

.founder-card img{

width:150px;

height:150px;

object-fit:cover;

border-radius:50%;

margin:0 auto 20px;

border:4px solid #0B63D1;

}

/* Founder Name */

.founder-card h3{

font-size:26px;

font-weight:700;

color:#ffffff;

margin-bottom:8px;

}

/* Founder Role */

.founder-card p{

font-size:16px;

color:#18A64A;

}

/* Bottom Line */

.belief-line{

margin-top:70px;

text-align:center;

font-size:28px;

font-weight:600;

color:#ffffff;

letter-spacing:.5px;

}

/* Responsive */

@media(max-width:992px){

.belief{

padding:90px 0;

}

.belief h2{

font-size:42px;

}

.belief p{

font-size:18px;

}

.belief-founders{

gap:30px;

}

.founder-card{

width:100%;

max-width:340px;

}

.belief-line{

font-size:22px;

}

}
.trade-video{

padding:60px 0;

background:#ffffff;

}

.trade-video-content{

text-align:center;

max-width:900px;

margin:auto;

margin-bottom:35px;

}

.trade-tag{

display:inline-block;

padding:10px 22px;

background:#eef5ff;

color:#1565d8;

font-weight:600;

border-radius:50px;

letter-spacing:1px;

font-size:14px;

}

.trade-video-content h2{

font-size:56px;

font-weight:800;

margin:20px 0;

color:#111;

line-height:1.2;

}

.trade-video-content p{

font-size:22px;

line-height:1.7;

color:#666;

max-width:850px;

margin:auto;

}

.trade-video-box{
position:relative;
max-width:70%;
margin:0 auto;

overflow:hidden;

border-radius:25px;

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

}

.trade-video video{

width:100%;
height:auto;

display:block;

border-radius:25px;

}
.trade-video-box{

position:relative;

overflow:hidden;

border-radius:25px;

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

}

.sound-toggle{

position:absolute;

bottom:20px;

right:20px;

background:rgba(0,0,0,.75);

color:#fff;

padding:12px 22px;

border-radius:50px;

font-size:14px;

font-weight:00;

cursor:pointer;

backdrop-filter:blur(10px);

transition:.3s;

}

.sound-toggle:hover{

transform:translateY(-2px);

background:#0B63D1;

}

/*==================================

PREMIUM FOOTER

==================================*/

.premium-footer{

background:#0B0B0B;

padding:90px 0 50px;

color:#ffffff;

margin-top:0;

}

.premium-footer .container{

max-width:1200px;

margin:auto;

padding:0 25px;

}

.footer-top{

display:grid;

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

gap:50px;

align-items:flex-start;

}

.footer-brand h2{

font-size:46px;

font-weight:800;

margin-bottom:12px;

letter-spacing:-1px;

}

.footer-brand p{

font-size:18px;

color:#d6d6d6;

line-height:1.8;

}

.footer-line{

width:90px;

height:4px;

margin-top:20px;

border-radius:20px;

background:linear-gradient(90deg,#0B63D1,#18A64A);

}

/*==================================

FOOTER LINKS & CONTACT

==================================*/

.footer-links h3,
.footer-contact h3,
.footer-vision h3{

font-size:22px;

font-weight:700;

margin-bottom:25px;

color:#ffffff;

}

.footer-links ul,
.footer-contact ul{

list-style:none;

padding:0;

margin:0;

}

.footer-links ul li,
.footer-contact ul li{

margin-bottom:16px;

line-height:1.8;

color:#cfcfcf;

}

.footer-links a,
.footer-contact a{

color:#cfcfcf;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover,
.footer-contact a:hover{

color:#18A64A;

padding-left:6px;

}

.footer-contact strong{

color:#ffffff;

font-weight:600;

}

.footer-vision p{

font-size:17px;

line-height:1.9;

color:#cfcfcf;

}

/*==================================

FOOTER BOTTOM

==================================*/

.footer-bottom{

margin-top:70px;

padding-top:35px;

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

text-align:center;

}

.footer-quote{

font-size:28px;

font-weight:600;

font-style:italic;

line-height:1.6;

color:#ffffff;

max-width:800px;

margin:0 auto 30px;

}

.footer-divider{

width:140px;

height:4px;

margin:0 auto 30px;

border-radius:50px;

background:linear-gradient(90deg,#0B63D1,#18A64A);

}

.footer-copy{

font-size:15px;

color:#bdbdbd;

margin-bottom:10px;

letter-spacing:.5px;

}

.footer-made{

font-size:18px;

font-weight:600;

color:#18A64A;

letter-spacing:1px;

}

/*==================================

RESPONSIVE

==================================*/

@media(max-width:992px){

.footer-top{

grid-template-columns:1fr 1fr;

gap:40px;

}

}

@media(max-width:768px){

.footer-top{

grid-template-columns:1fr;

text-align:center;

}

.footer-brand h2{

font-size:38px;

}

.footer-quote{

font-size:22px;

}

.footer-line{

margin:20px auto 0;

}

.footer-links a:hover,
.footer-contact a:hover{

padding-left:0;

}

}

/*============================

FOOTER CTA

=============================*/

.footer-cta{

background:#f7f9fc;

padding:30px 0;

text-align:center;

}

.footer-cta h2{

font-size:52px;

font-weight:800;

color:#111;

margin-bottom:20px;

}

.footer-cta p{

font-size:22px;

color:#666;

max-width:850px;

margin:0 auto 40px;

line-height:1.7;

}

.footer-cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta-btn-primary,
.cta-btn-secondary{

display:inline-block;

padding:18px 42px;

border-radius:60px;

font-size:18px;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.cta-btn-primary{

background:#0B63D1;

color:#fff;

}

.cta-btn-primary:hover{

transform:translateY(-3px);

box-shadow:0 12px 30px rgba(11,99,209,.25);

}

.cta-btn-secondary{

background:#fff;

color:#0B63D1;

border:2px solid #0B63D1;

}

.cta-btn-secondary:hover{

background:#0B63D1;

color:#fff;

transform:translateY(-3px);

}
.footer-logo{

width:280px;

max-width:100%;

height:auto;

margin-bottom:20px;

display:block;

}

.footer-brand p{

font-size:18px;

line-height:1.8;

color:#d6d6d6;

margin-top:10px;

}

/*==================================================

FINAL RESPONSIVE CSS
(CEO VERSION - DO NOT EDIT)

==================================================*/

@media screen and (max-width:768px){

.container{
width:94%;
max-width:94%;
margin:auto;
padding:0;
}

/*---------------- NAVBAR ----------------*/

.navbar{

padding:12px 0;

}

.navbar-container{

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:nowrap;

}

.logo img{

width:140px;
height:auto;

}

/* Mobile me tagline hide */

.brand-tagline{

display:none !important;

}

.btn-primary{

width:auto !important;
padding:10px 16px;
font-size:12px;
white-space:nowrap;

}

/*---------------- HERO ----------------*/

.hero{

padding:35px 0 45px;
min-height:auto;

}

.hero-container{

display:flex;
flex-direction:column;
align-items:center;
gap:30px;

}

.hero-left,
.hero-right{

width:100%;
text-align:center;

}

.hero-tag{

font-size:11px;
padding:7px 14px;

}

.hero-left h1{

font-size:34px;
line-height:1.15;
margin:18px 0;

}

.hero-left h2{

font-size:19px;
line-height:1.5;
margin-bottom:15px;

}

.hero-left p{

font-size:15px;
line-height:1.8;

}

.hero-buttons{

display:flex;
flex-direction:column;
gap:14px;
margin-top:25px;

}

.hero-btn-primary,
.hero-btn-secondary{

width:100%;
padding:15px;

}

.hero-right img,
.hero-right video{

width:88%;
max-width:340px;
height:auto;
margin:auto;
display:block;

}

/*---------------- VIDEO ----------------*/

.trade-video{

padding:45px 0;

}

.trade-video-content{

margin-bottom:20px;

}

.trade-video-content h2{

font-size:30px;

}

.trade-video-content p{

font-size:15px;

}

.trade-video-box{

max-width:100%;

}

.trade-video video{

width:100%;
height:auto;

}

/*---------------- FOUNDERS ----------------*/

.belief{

padding:60px 0;

}

.belief-founders{

display:flex;
flex-direction:column;
gap:25px;

}

.founder-card{

width:100%;
max-width:300px;
margin:auto;

}

.founder-card img{

width:100%;
height:auto;

}

/*---------------- BUTTONS ----------------*/

button,
a.btn-primary,
.hero-btn-primary,
.hero-btn-secondary,
.cta-btn-primary,
.cta-btn-secondary{

display:block;
width:100%;
text-align:center;

}

/*---------------- FOOTER ----------------*/

.footer-top{

display:grid;
grid-template-columns:1fr;
gap:35px;
text-align:center;

}

.footer-logo{

width:200px;
margin:auto;

}

.footer-quote{

font-size:20px;

}

/*---------------- GENERAL ----------------*/

section{

padding:60px 0;

}

img{

max-width:100%;
height:auto;

}

h1{

font-size:34px;

}

h2{

font-size:30px;

}

h3{

font-size:22px;

}

p{

font-size:16px;
line-height:1.8;

}

body{

overflow-x:hidden;

}

*{

box-sizing:border-box;

}

}
/*==================================

CEO HERO MOBILE FIX

==================================*/

@media screen and (max-width:768px){

.hero{

overflow:hidden;

padding:40px 0;

}

.hero-container{

display:flex;

flex-direction:column;

align-items:center;

gap:35px;

}

/* HERO RIGHT */

.trade-system{

width:320px !important;
height:320px !important;
margin:20px auto;

}

/* CENTER */

.trade-center{

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-50%) !important;

width:150px !important;
height:150px !important;

display:flex !important;
flex-direction:column !important;

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

padding:0 !important;

overflow:hidden;

}

/* LOGO */

.trade-logo{

width:80px !important;
height:auto !important;

margin:0 !important;

}

/* QUALITY FIRST */

.trade-center p{

margin:4px 0 0 0 !important;

font-size:9px !important;

line-height:1 !important;

letter-spacing:.5px !important;

text-align:center !important;

}
/* ORBIT */

.orbit{

width:240px !important;

height:240px !important;

}

/* COMMON */

.orbit-item{

width:72px !important;

height:72px !important;

font-size:10px !important;

padding:5px !important;

}

/* TOP */

.item1{

left:50%;

top:0;

transform:translate(-50%,-50%);

}

/* RIGHT */

.item2{

right:0;

top:50%;

transform:translate(50%,-50%);

}

/* BOTTOM */

.item3{

left:50%;

bottom:0;

transform:translate(-50%,50%);

}

/* LEFT */

.item4{

left:0;

top:50%;

transform:translate(-50%,-50%);

}

/* TEXT */

.hero-left h1{

font-size:32px !important;

}

.hero-left h2{

font-size:18px !important;

}

.hero-left p{

font-size:15px !important;

line-height:1.7;

}

body{

overflow-x:hidden;

}

}
/*==================================

CEO ANIMATION PACKAGE

==================================*/

.reveal{

opacity:0 !important;

transform:translateY(50px) !important;

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.active{

opacity:1 !important;

transform:translateY(0) !important;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}

/* Left */

.reveal-left{

opacity:0;

transform:translateX(-60px);

transition:.8s;

}

.reveal-left.active{

opacity:1;

transform:translateX(0);

}

/* Right */

.reveal-right{

opacity:0;

transform:translateX(60px);

transition:.8s;

}

.reveal-right.active{

opacity:1;

transform:translateX(0);

}

/* Scale */

.reveal-scale{

opacity:0;

transform:scale(.9);

transition:.8s;

}

.reveal-scale.active{

opacity:1;

transform:scale(1);

}

/* Hover */

.why-card,
.mts-card,
.value-item,
.workflow-item,
.founder-card{

transition:
opacity .8s ease,
transform .8s ease,
box-shadow .35s ease;

will-change:transform,opacity;

}

.why-card:hover,
.mts-card:hover,
.value-item:hover,
.workflow-item:hover,
.founder-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.12);

}