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

            MYTRADESETU
            STORY PAGE

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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

:root{

--blue:#0B63D1;

--green:#18A64A;

--black:#111111;

--white:#ffffff;

--light:#F8FAFC;

--text:#666666;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--white);

color:var(--black);

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

.container{

width:90%;

max-width:1400px;

margin:auto;

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

NAVBAR

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

.story-navbar{

height:82px;

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

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

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

position:sticky;

top:0;

z-index:999;

}

.story-navbar .container{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

}

.story-logo img{

height:60px;

width:auto;

}

.back-btn{

padding:15px 34px;

background:#0B63D1;

color:#fff;

border-radius:50px;

font-weight:700;

letter-spacing:.3px;

box-shadow:

0 10px 25px rgba(11,99,209,.20);

transition:.35s;

}

.back-btn:hover{

background:#18A64A;

transform:translateY(-3px);

box-shadow:

0 18px 35px rgba(24,166,74,.25);

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

HERO

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

.story-hero{

padding:120px 0;

background:#ffffff;

text-align:center;

}

.story-tag{

display:inline-block;

padding:8px 20px;

background:#EEF6FF;

color:var(--blue);

border-radius:40px;

font-size:14px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.story-hero h1{

font-size:78px;

font-weight:800;

line-height:1.05;

max-width:950px;

margin:0 auto 22px;

letter-spacing:-2px;

}

.story-hero p{

font-size:24px;

max-width:760px;

margin:0 auto;

line-height:1.7;

color:#666;

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

FOUNDER IMAGE

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

.founder-image{

margin:45px auto 25px;

display:flex;

justify-content:center;

}

.founder-image img{

width:560px;

max-width:100%;

border-radius:28px;

border:8px solid #fff;

box-shadow:

0 35px 80px rgba(0,0,0,.15);

}

.founder-image img:hover{

transform:translateY(-8px);

}

.story-hero h2{

font-size:54px;

font-weight:800;

letter-spacing:-1.5px;

line-height:1.2;

margin-top:22px;

}

.story-hero h2 span{

color:#0B63D1;

margin:0 12px;

font-weight:700;

}

.story-hero h3{

font-size:22px;

font-weight:500;

color:#0B63D1;

letter-spacing:.5px;

margin-top:12px;

}

.scroll-text{

margin-top:40px;

font-size:14px;

letter-spacing:5px;

color:#9A9A9A;

text-transform:uppercase;

font-weight:600;

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

            STORY INTRO

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

.story-intro{

padding:80px 0 30px;
}

.intro-box{

max-width:900px;

margin:auto;

text-align:center;

}

.intro-box span{

display:inline-block;

padding:8px 20px;

background:#ffffff;

border:1px solid rgba(11,99,209,.10);

border-radius:50px;

color:var(--green);

font-size:14px;

font-weight:700;

letter-spacing:1px;

margin-bottom:25px;

}

.intro-box h2{

font-size:60px;

font-weight:800;

line-height:1.15;

color:var(--black);

margin-bottom:30px;

}

.intro-box p{

font-size:22px;

line-height:1.9;

color:var(--text);

max-width:760px;

margin:auto;

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

            CHAPTERS

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

.chapters{

padding:140px 0;

background:#ffffff;

}

.chapter{

max-width:1000px;

margin:0 auto 120px;

padding-left:40px;

border-left:4px solid var(--blue);

transition:.35s;

}

.chapter:hover{

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

transform:translateX(8px);

}

.chapter-title{

font-size:16px;

font-weight:800;

letter-spacing:4px;

text-transform:uppercase;

color:var(--green);

margin-bottom:25px;

}

.chapter-content{

font-size:21px;

line-height:2;

color:var(--text);

}

.chapter-content p{

margin-bottom:28px;

}

.chapter strong{

color:var(--blue);

font-weight:700;

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

        FOUNDER MESSAGE

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

.founder-message{

padding:140px 0;

background:var(--black);

}

.message-box{

max-width:950px;

margin:auto;

text-align:center;

}

.message-box h2{

font-size:62px;

font-weight:800;

line-height:1.15;

color:#ffffff;

margin-bottom:35px;

}

.message-box p{

font-size:22px;

line-height:2;

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

max-width:820px;

margin:auto;

}

.message-box h3{

margin-top:60px;

font-size:34px;

font-weight:800;

color:#ffffff;

}

.message-box span{

display:block;

margin-top:10px;

font-size:18px;

color:var(--green);

letter-spacing:1px;

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

                FOOTER

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

.story-footer{

background:#ffffff;

padding:35px 0;

border-top:1px solid #ECECEC;

}

.story-footer .container{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

.story-footer p{

font-size:16px;

color:#777777;

}

.story-footer a{

padding:14px 28px;

background:var(--blue);

color:#ffffff;

border-radius:12px;

font-weight:600;

transition:.35s;

}

.story-footer a:hover{

background:var(--green);

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

        PREMIUM EFFECTS

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

/* Smooth Selection */

::selection{

background:#0B63D1;

color:#ffffff;

}

/* Smooth Transition */

*{

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

}

/* Premium Hover */

.chapter:hover .chapter-title{

color:#0B63D1;

letter-spacing:5px;

}

/* Founder Image */

.founder-image{

position:relative;

}

.founder-image::after{

content:"";

position:absolute;

width:100%;

height:100%;

left:0;

top:0;

border-radius:24px;

background:linear-gradient(

135deg,

rgba(11,99,209,.06),

rgba(24,166,74,.06)

);

pointer-events:none;

}

/* Readability */

.chapter-content{

max-width:900px;

}

/* Better Paragraph Spacing */

.chapter-content p{

margin-bottom:34px;

}

/* Button */

.back-btn,
.story-footer a,
.belief-btn{

box-shadow:

0 12px 30px rgba(11,99,209,.15);

}

.back-btn:hover,
.story-footer a:hover,
.belief-btn:hover{

transform:translateY(-3px);

}

/* Founder Message */

.message-box{

position:relative;

}

.message-box::before{

content:"";

position:absolute;

width:120px;

height:4px;

background:#18A64A;

left:50%;

top:-35px;

transform:translateX(-50%);

border-radius:10px;

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

        RESPONSIVE

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

@media(max-width:992px){

.story-hero{

padding:70px 0 40px;

background:#ffffff;

text-align:center;

min-height:90vh;

display:flex;

align-items:center;

justify-content:center;

}

.story-hero h1{

font-size:46px;

}

.story-hero p{

font-size:18px;

}

.intro-box h2{

font-size:40px;

}

.intro-box p{

font-size:18px;

}

.chapter{

padding-left:20px;

margin-bottom:70px;

}

.chapter-content{

font-size:18px;

line-height:1.8;

}

.message-box h2{

font-size:42px;

}

.message-box p{

font-size:18px;

}

.story-footer .container{

flex-direction:column;

text-align:center;

}

}

@media(max-width:576px){

.story-hero h1{

font-size:36px;

}

.founder-image img{

width:100%;

max-width:320px;

}

.story-hero h2{

font-size:30px;

}

.story-hero h3{

font-size:18px;

}

}
.hero-divider{

width:140px;

height:5px;

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

margin:25px auto 0;

border-radius:20px;

}


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

            MASTER CHAPTER UI

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

.story-chapter{

padding:70px 0;

background:#ffffff;

}

.chapter-header{

position:relative;

text-align:center;

max-width:900px;

margin:0 auto 50px;

z-index:2;

}
.chapter-no{

font-size:160px;

font-weight:800;

color:#F3F5F8;

position:absolute;

top:-120px;

left:50%;

transform:translateX(-50%);

z-index:0;

pointer-events:none;

user-select:none;

}

.chapter-small{

font-size:14px;

font-weight:800;

letter-spacing:6px;

text-transform:uppercase;

color:#18A64A;

margin-bottom:18px;

position:relative;

z-index:5;


}

.chapter-header h2{

font-size:64px;

font-weight:800;

line-height:1.08;

letter-spacing:-2px;

color:#111111;

margin-bottom:25px;

position:relative;

z-index:5;


}

.chapter-big-quote{

font-size:32px;

font-weight:600;

line-height:1.35;

color:#0B63D1;

max-width:700px;

margin:0 auto 35px;

}

.chapter-divider{

width:220px;

height:5px;

margin:25px auto 0;

border-radius:50px;

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

}

.chapter-body{

max-width:820px;

margin:55px auto 0;

font-size:22px;

line-height:2;

color:#555;

text-align:left;

}

.chapter-body p{

margin-bottom:32px;

}

.chapter-ending{

max-width:700px;

margin:70px auto 0;

font-size:30px;

font-style:italic;

font-weight:600;

color:#18A64A;

text-align:center;

border:none;

padding:0;

}


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

.story-footer{
    background:#0b0b0b;
    color:#ffffff;
    padding:90px 0 60px;
    margin-top:120px;
}

.story-footer .container{
    max-width:1100px;
    margin:auto;
    text-align:center;
}

.footer-brand h2{
    font-size:52px;
    font-weight:800;
    margin-bottom:10px;
    letter-spacing:-1px;
}

.footer-tagline{
    font-size:22px;
    color:#d9d9d9;
    margin-bottom:45px;
}

.footer-values{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    margin-bottom:45px;
}

.footer-values span{
    color:#18A64A;
    font-size:15px;
    font-weight:700;
    letter-spacing:4px;
}

.footer-message{
    max-width:760px;
    margin:0 auto 45px;
    color:#e5e5e5;
    font-size:20px;
    line-height:1.8;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:30px;
}

.footer-bottom p{
    color:#bfbfbf;
    margin-bottom:25px;
}

.footer-home-btn{
    display:inline-block;
    padding:15px 34px;
    border-radius:50px;
    background:linear-gradient(90deg,#0B63D1,#18A64A);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.footer-home-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(11,99,209,.25);
}
.story-footer-logo{

width:320px;

max-width:100%;

height:auto;

display:block;

margin-bottom:25px;

}

/*==================================================
FINAL STORY MOBILE (REPLACE OLD MOBILE SECTION)
==================================================*/
@media screen and (max-width:768px){

.container{width:94%;max-width:94%;margin:auto;padding:0 12px;box-sizing:border-box;}

.story-navbar{padding:8px 0 !important;height:auto !important;}
.story-navbar .container{display:flex;justify-content:space-between;align-items:center;height:auto !important;}
.story-logo img{width:120px !important;height:auto;}
.back-btn{padding:8px 14px !important;font-size:11px !important;border-radius:10px;white-space:nowrap;}

.story-hero{padding:20px 0 !important;margin:0 !important;text-align:center;min-height:auto !important;display:block !important;}
.story-tag{font-size:12px;padding:8px 16px;margin-bottom:10px;}
.story-hero h1{font-size:32px !important;line-height:1.2;margin:10px 0 !important;}
.story-hero p{font-size:15px;line-height:1.7;margin:10px 0 15px !important;padding:0 6px;}

.founder-image{margin:15px auto !important;display:flex;justify-content:center;}
.founder-image img{max-width:320px !important;width:100%;height:auto;}

.story-hero h2{font-size:20px !important;line-height:1.4;word-spacing:6px;margin:5px 0 4px;}
.story-hero h2 span{padding:0 8px;}
.story-hero h3{font-size:16px !important;margin:4px 0;}

.scroll-text{font-size:12px;letter-spacing:3px;margin-top:10px;}
.hero-divider{display:none !important;}

.story-intro{padding:35px 0 !important;}
.intro-box h2{font-size:30px !important;line-height:1.25;}
.intro-box p{font-size:16px !important;line-height:1.8;}

.story-chapter{padding:45px 0 !important;}
.chapter-header h2{font-size:34px !important;line-height:1.25;}
.chapter-big-quote{font-size:20px !important;}
.chapter-body{font-size:16px !important;line-height:1.8;}

.story-footer{padding:50px 0 !important;margin-top:40px !important;}
.story-footer-logo{width:180px !important;margin:0 auto 15px;}

img{max-width:100%;height:auto;}
body{overflow-x:hidden;}
*{box-sizing:border-box;}

}