/*==================================================
            ABOUT PAGE - HERO SECTION
==================================================*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*=============================
        ABOUT TITLE
=============================*/

.about-title{
    text-align:center;
    padding: 20px;
}

.about-subtitle{
    display:inline-block;
    font-size:14px;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#2563EB;
    margin-bottom:5px;
}

.about-title h1{
    font-size:58px;
    font-weight:800;
    color:#111827;
    line-height:1.2;
}

@media (max-width:768px){

    .about-title{
        padding:120px 20px 60px;
    }

    .about-title h1{
        font-size:38px;
    }

}

@media (max-width:480px){

    .about-title h1{
        font-size:30px;
    }

}
.about-hero{

    position:relative;

    width:100%;

    min-height:100vh;

    padding:180px 5% 120px;

    overflow:hidden;

    display:flex;

    align-items:center;

}

.about-hero-container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:50px;

}

/*==================================================
                LEFT CONTENT
==================================================*/
/* HERO IMAGE */

.about-hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.about-hero-image img{
    width:100%;
    max-width:600px;
    border-radius:35px;
    box-shadow:0 35px 80px rgba(15,23,42,.12);
}

/* STORY CONTENT */

.story-content h2{
    font-size:58px;
    color:#111827;
    line-height:1.15;
    margin:25px 0;
}

.story-content p{
    font-size:17px;
    line-height:2;
    color:#64748B;
    margin-bottom:22px;
}
.about-hero-content{

    position:relative;

    z-index:5;

}

/* Badge */

.about-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 24px;

    border-radius:60px;

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

    backdrop-filter:blur(20px);

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

    color:#2563EB;

    font-size:15px;

    font-weight:600;

    box-shadow:
    0 15px 40px rgba(15,23,42,.08);

    margin-bottom:30px;

}

.about-hero-badge i{

    font-size:18px;

}

/* Heading */

.about-hero-content h1{

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    color:#111827;

    margin-bottom:30px;

    letter-spacing:-2px;

}

.about-hero-content h1 span{

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* Paragraph */

.about-hero-content p{

    max-width:650px;

    font-size:18px;

    line-height:1.9;

    color:#64748B;

    margin-bottom:45px;

}

/* Buttons */

.about-buttons{

    display:flex;

    align-items:center;

    gap:18px;

}

.about-btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 36px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED);

    box-shadow:
    0 18px 40px rgba(37,99,235,.25);

    transition:.4s;

}

.about-btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:
    0 28px 55px rgba(37,99,235,.35);

}

.about-btn-secondary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:18px 34px;

    text-decoration:none;

    border-radius:60px;

    color:#111827;

    font-weight:600;

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

    backdrop-filter:blur(18px);

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

    transition:.35s;

}

.about-btn-secondary:hover{

    transform:translateY(-6px);

    background:#fff;

}
/*==================================================
            COMPANY STORY SECTION
==================================================*/

.company-story{

    position:relative;

    padding:140px 5%;

    overflow:hidden;

}

.story-container{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"image content";
    gap:90px;
    align-items:center;
}

.story-content{
    grid-area:content;
}

.story-image{
    grid-area:image;
}

/*==========================
        Story Image
==========================*/

.story-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.story-image img{

    width:100%;

    max-width:560px;

    border-radius:35px;

    object-fit:cover;

    box-shadow:

    0 35px 80px rgba(15,23,42,.12);

}

/* Glass Overlay */

.story-image::before{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    border-radius:35px;

    background:

    linear-gradient(

    rgba(255,255,255,.08),

    rgba(255,255,255,0)

    );

    pointer-events:none;

}

/* Floating Years Card */

.story-years{

    position:absolute;

    bottom:30px;

    left:-35px;

    width:180px;

    padding:25px;

    border-radius:25px;

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

    backdrop-filter:blur(18px);

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

    text-align:center;

    box-shadow:

    0 18px 45px rgba(15,23,42,.08);

}

.story-years h2{

    font-size:48px;

    color:#2563EB;

    margin-bottom:8px;

}

.story-years p{

    color:#64748B;

    line-height:1.6;

    font-size:15px;

}

/* story buttons */

.story-buttons{
    align-items:center;
    margin-top:-60%;
    margin-left: 15%;

}

.story-btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 30%;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED);

    box-shadow:
    0 18px 40px rgba(37,99,235,.25);

    transition:.4s;

}

.story-btn-primary:hover{

    transform:translateY(-6px);
    border-width: 1.5px;
    border: solid;
    background-color: #ffffff;

    box-shadow:
    0 28px 55px rgba(37,99,235,.35);

}
/*==================================================
            MISSION & VISION SECTION
==================================================*/

.company-purpose{

    position:relative;

    padding:140px 5%;

    overflow:hidden;

}

.purpose-container{

    max-width:1400px;

    margin:auto;

}

/*==============================
        Heading
==============================*/

.purpose-heading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.purpose-heading h2{

    font-size:58px;

    font-weight:800;

    color:#111827;

    margin-bottom:22px;

    line-height:1.15;

}

.purpose-heading h2 span{

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.purpose-heading p{

    color:#64748B;

    font-size:18px;

    line-height:1.9;

}

/*==============================
        Cards Grid
==============================*/

.purpose-grid{

    display:grid;

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

    gap:40px;

}
/*==================================================
            WHY CHOOSE US SECTION
==================================================*/

.why-choose{

    position:relative;

    padding:140px 5%;

    overflow:hidden;

}

.why-container{

    max-width:1400px;

    margin:auto;

}

.why-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 80px;

}

.why-heading h2{

    font-size:58px;

    color:#111827;

    font-weight:800;

    margin-bottom:22px;

    line-height:1.15;

}

.why-heading h2 span{

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.why-heading p{

    color:#64748B;

    line-height:1.9;

    font-size:18px;

}

.why-grid{

    display:grid;

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

    gap:30px;

}
/*==================================================
                FEATURE CARD
==================================================*/

.why-card{

    position:relative;

    padding:45px 35px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    overflow:hidden;

    transition:.45s;

    box-shadow:

    0 20px 45px rgba(15,23,42,.08);

}

.why-card:hover{

    transform:translateY(-12px);

    box-shadow:

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

}

.why-card i{

    width:85px;

    height:85px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED);

    margin-bottom:28px;

}

.why-card h3{

    font-size:25px;

    color:#111827;

    margin-bottom:18px;

}

.why-card p{

    color:#64748B;

    line-height:1.9;

    font-size:16px;

}
/*==================================================
            DEVELOPMENT PROCESS
==================================================*/

.process{

    padding:140px 5%;

}

.process-container{

    max-width:1200px;

    margin:auto;

}

.process-heading{

    text-align:center;

    margin-bottom:90px;

}

.process-heading h2{

    font-size:58px;

    color:#111827;

    margin-bottom:20px;

}

.process-heading p{

    color:#64748B;

    font-size:18px;

}

.timeline{

    position:relative;

    max-width:1000px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    background:linear-gradient(

    #2563EB,

    #7C3AED

    );

    border-radius:50px;

}

.timeline-item{

    position:relative;

    width:50%;

    padding:30px 60px;

}

.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}

.timeline-item:nth-child(even){

    left:50%;

}
/*==================================================
                TIMELINE CARD
==================================================*/

.timeline-content{

    position:relative;

    padding:35px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:

    0 18px 45px rgba(15,23,42,.08);

    transition:.4s;

}

.timeline-content:hover{

    transform:translateY(-8px);

}

.timeline-number{

    position:absolute;

    top:40px;

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:22px;

    font-weight:700;

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED);

    box-shadow:

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

}

.timeline-item:nth-child(odd) .timeline-number{

    right:-95px;

}

.timeline-item:nth-child(even) .timeline-number{

    left:-95px;

}

.timeline-content h3{

    font-size:24px;

    margin-bottom:15px;

    color:#111827;

}

.timeline-content p{

    color:#64748B;

    line-height:1.9;

}
/*==================================================
            TECHNOLOGY STACK
==================================================*/

.tech-stack{

    padding:140px 5%;

}

.tech-container{

    max-width:1400px;

    margin:auto;

}

.tech-heading{

    text-align:center;

    margin-bottom:80px;

}

.tech-heading h2{

    font-size:56px;

    color:#111827;

    margin-bottom:20px;

}

.tech-grid{

    display:grid;

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

    gap:28px;

}

.tech-card{

    padding:45px 20px;

    border-radius:30px;

    text-align:center;

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

    backdrop-filter:blur(20px);

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

    transition:.4s;

}

.tech-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 30px 60px rgba(37,99,235,.12);

}

.tech-card i{

    font-size:58px;

    margin-bottom:22px;

    color:#2563EB;

}

.tech-card h3{

    font-size:22px;

    color:#111827;

}
/*==================================================
                PREMIUM ANIMATIONS
==================================================*/

.why-card,
.timeline-content,
.tech-card{

    transition:all .4s ease;

}

.why-card:hover i{

    transform:rotate(-12deg) scale(1.1);

}

.tech-card:hover i{

    transform:scale(1.15) rotate(8deg);

}

.timeline-content:hover{

    box-shadow:

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

}

.why-card::before,
.tech-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-50%;

    width:60px;

    height:250%;

    background:linear-gradient(

        transparent,

        rgba(255,255,255,.75),

        transparent

    );

    transform:rotate(25deg);

    transition:.8s;

}

.why-card:hover::before,
.tech-card:hover::before{

    left:170%;

}

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.why-card{

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

}

.tech-card{

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

}

.timeline-content{

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

}
/*==================================================
            COMPANY STATISTICS
==================================================*/

.company-stats{

    position:relative;

    padding:140px 5%;

    overflow:hidden;

}

.stats-container{

    max-width:1400px;

    margin:auto;

}

.stats-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 80px;

}

.stats-heading h2{

    font-size:58px;

    font-weight:800;

    color:#111827;

    margin-bottom:22px;

}

.stats-heading h2 span{

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.stats-heading p{

    color:#64748B;

    font-size:18px;

    line-height:1.9;

}

/*==============================
        Statistics Grid
==============================*/

.stats-grid{

    display:grid;

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

    gap:30px;

}

.stat-card{

    position:relative;

    padding:45px 30px;

    text-align:center;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    overflow:hidden;

    transition:.4s;

    box-shadow:

    0 20px 45px rgba(15,23,42,.08);

}

.stat-card:hover{

    transform:translateY(-12px);

    box-shadow:

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

}

.stat-card i{

    width:90px;

    height:90px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:24px;

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED);

    color:#fff;

    font-size:34px;

    margin-bottom:28px;

}

.stat-card h2{

    font-size:48px;

    color:#2563EB;

    margin-bottom:10px;

    font-weight:800;

}

.stat-card h3{

    font-size:22px;

    color:#111827;

    margin-bottom:12px;

}

.stat-card p{

    color:#64748B;

    line-height:1.8;

}
/*==================================================
                FOUNDER SECTION
==================================================*/

.founder{

    padding:140px 5%;

    position:relative;

}

.founder-container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:90px;

    align-items:center;

}

/*==============================
        Founder Image
==============================*/

.founder-image{

    position:relative;

}

.founder-image img{

    width:100%;

    border-radius:35px;

    box-shadow:

    0 35px 80px rgba(15,23,42,.12);

}

/* Floating Badge */

.founder-image::after{

    content:"Founder";

    position:absolute;

    bottom:30px;

    left:30px;

    padding:14px 24px;

    border-radius:50px;

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

    backdrop-filter:blur(18px);

    color:#2563EB;

    font-weight:700;

    box-shadow:

    0 18px 45px rgba(15,23,42,.10);

}
/*==================================================
            FOUNDER CONTENT
==================================================*/

.founder-content h2{

    font-size:58px;

    color:#111827;

    line-height:1.15;

    margin:25px 0;

}

.founder-content p{

    color:#64748B;

    font-size:17px;

    line-height:2;

    margin-bottom:20px;

}

.founder-sign{

    margin-top:25px;

    padding:20px;

    border-radius:25px;

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

    backdrop-filter:blur(18px);

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

}

.founder-sign h3{

    font-size:28px;

    color:#111827;

}

.founder-sign span{

    color:#2563EB;

    font-weight:600;

    font-size:16px;

}

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

.stat-card,
.founder-image,
.founder-sign,
.faq-item{

    transition:all .4s ease;

}

/* Floating Cards */

.stat-card{

    animation:statFloat 8s ease-in-out infinite;

}

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

    animation-delay:.4s;

}

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

    animation-delay:.8s;

}

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

    animation-delay:1.2s;

}

@keyframes statFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/* Founder Image */

.founder-image{

    animation:founderFloat 9s ease-in-out infinite;

}

@keyframes founderFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/* Hover Icons */

.stat-card:hover i{

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

}

.stat-card i{

    transition:.4s;

}

/* Shine Effect */

.stat-card::before,
.faq-item::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-50%;

    width:60px;

    height:260%;

    background:linear-gradient(

        transparent,

        rgba(255,255,255,.75),

        transparent

    );

    transform:rotate(25deg);

    transition:.8s;

}

.stat-card:hover::before,
.faq-item:hover::before{

    left:170%;

}
/*==================================================
                CALL TO ACTION
==================================================*/

.about-cta{

    position:relative;

    padding:150px 5%;

    overflow:hidden;

}

.cta-box{

    position:relative;

    max-width:1200px;

    margin:auto;

    text-align:center;

    padding:90px 70px;

    border-radius:40px;

    overflow:hidden;

    background:linear-gradient(
    135deg,
    #2563EB,
    #4F46E5,
    #7C3AED);

    color:#ffffff;

    box-shadow:

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

}

/* Decorative Glow */

.cta-box::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    filter:blur(70px);

    top:-180px;

    left:-120px;

}

.cta-box::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

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

    filter:blur(70px);

    bottom:-170px;

    right:-100px;

}

.cta-box span{

    display:inline-block;

    padding:12px 26px;

    margin-bottom:25px;

    border-radius:50px;

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

    backdrop-filter:blur(15px);

    font-weight:600;

    letter-spacing:.5px;

}

.cta-box h2{

    font-size:62px;

    line-height:1.15;

    margin-bottom:25px;

    font-weight:800;

}

.cta-box p{

    max-width:720px;

    margin:0 auto 45px;

    font-size:18px;

    line-height:1.9;

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

}

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}
/*==================================================
                CTA BUTTONS
==================================================*/

.cta-buttons .primary-btn{

    padding:18px 38px;

    border-radius:60px;

    background:#ffffff;

    color:#2563EB;

    text-decoration:none;

    font-weight:700;

    transition:.4s;

    box-shadow:

    0 20px 45px rgba(0,0,0,.15);

}

.cta-buttons .primary-btn:hover{

    transform:

    translateY(-8px)

    scale(1.04);

}

.cta-buttons .secondary-btn{

    padding:18px 38px;

    border-radius:60px;

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

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    backdrop-filter:blur(15px);

    transition:.4s;

}

.cta-buttons .secondary-btn:hover{

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

    transform:translateY(-8px);

}
/*==================================================
                COMPANY QUOTE
==================================================*/

.company-quote{

    padding:140px 5%;

}

.quote-box{

    max-width:1000px;

    margin:auto;

    text-align:center;

    padding:80px 60px;

    border-radius:35px;

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

    backdrop-filter:blur(20px);

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

    box-shadow:

    0 30px 70px rgba(15,23,42,.08);

    position:relative;

}

.quote-box i{

    font-size:65px;

    color:#2563EB;

    margin-bottom:30px;

}

.quote-box h2{

    font-size:42px;

    line-height:1.6;

    color:#111827;

    margin-bottom:30px;

    font-weight:700;

}

.quote-box span{

    font-size:20px;

    font-weight:600;

    color:#7C3AED;

}
/*==================================================
            BACKGROUND DECORATIONS
==================================================*/

.about-cta::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

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

    filter:blur(120px);

    top:50px;

    left:-200px;

}

.company-quote::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    border-radius:50%;

    background:rgba(124,58,237,.08);

    filter:blur(120px);

    right:-120px;

    bottom:0;

}
/*==================================================
                PREMIUM ANIMATIONS
==================================================*/

.cta-box{

    animation:ctaFloat 8s ease-in-out infinite;

}

@keyframes ctaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.quote-box{

    animation:quoteFloat 9s ease-in-out infinite;

}

@keyframes quoteFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/* Shine Effect */

.cta-box::after{

    animation:shineMove 8s linear infinite;

}

@keyframes shineMove{

    0%{

        transform:translateX(-40px);

    }

    50%{

        transform:translateX(30px);

    }

    100%{

        transform:translateX(-40px);

    }

}

.quote-box{

    transition:.45s;

}

.quote-box:hover{

    transform:translateY(-12px);

    box-shadow:

    0 40px 90px rgba(37,99,235,.15);

}

.cta-buttons a{

    transition:.4s;

}

.cta-buttons a i{

    transition:.35s;

}

.cta-buttons a:hover i{

    transform:translateX(8px);

}
/*==================================================
            RESPONSIVE DESIGN
==================================================*/

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

.about-hero-container,
.story-container,
.founder-container{
    grid-template-columns:1fr;
    text-align:center;
    gap:60px;
}

.story-years{
    left:20px;
}

.about-hero-content p,
.story-content p,
.founder-content p{
    max-width:100%;
}

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

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

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

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

}


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

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

.about-title h1,
.about-hero-content h1,
.story-content h2,
.purpose-heading h2,
.why-heading h2,
.process-heading h2,
.tech-heading h2,
.stats-heading h2,
.founder-content h2,
.faq-heading h2,
.cta-box h2{
    font-size:42px;
}

.about-buttons,
.cta-buttons{
    justify-content:center;
    flex-wrap:wrap;
}

.timeline::before{
    left:30px;
}

.timeline-item{
    width:100%;
    left:0 !important;
    padding:0 0 40px 80px;
    text-align:left !important;
}

.timeline-number{
    left:-2px !important;
    right:auto !important;
}

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

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

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

.story-years{
    position:relative;
    left:0;
    bottom:20px;
    margin:auto;
}

}


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

.about-title{
    padding:100px 20px 40px;
}

.about-title h1,
.about-hero-content h1,
.story-content h2,
.purpose-heading h2,
.why-heading h2,
.process-heading h2,
.tech-heading h2,
.stats-heading h2,
.founder-content h2,
.faq-heading h2,
.cta-box h2{
    font-size:34px;
}

.about-subtitle{
    font-size:12px;
    letter-spacing:2px;
}

.about-hero{
    padding:100px 5% 70px;
}

.about-buttons,
.cta-buttons{
    flex-direction:column;
    width:100%;
}

.about-btn-primary,
.about-btn-secondary,
.primary-btn,
.secondary-btn{
    width:100%;
    justify-content:center;
}

.story-container,
.founder-container{
    gap:40px;
}

.story-image img,
.founder-image img,
.about-hero-image img{
    border-radius:20px;
}

.story-years{
    width:150px;
    padding:20px;
}

.story-years h2{
    font-size:36px;
}

.tech-grid,
.stats-grid{
    grid-template-columns:1fr;
}

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

.timeline-item{
    padding-left:70px;
}

.timeline-content{
    padding:25px;
}

.cta-box{
    padding:60px 30px;
}

.quote-box{
    padding:50px 25px;
}

.quote-box h2{
    font-size:28px;
}

}


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

.about-title h1,
.about-hero-content h1,
.story-content h2,
.purpose-heading h2,
.why-heading h2,
.process-heading h2,
.tech-heading h2,
.stats-heading h2,
.founder-content h2,
.faq-heading h2,
.cta-box h2{
    font-size:28px;
}

.about-hero-content p,
.story-content p,
.purpose-heading p,
.why-heading p,
.process-heading p,
.stats-heading p,
.founder-content p,
.faq-item p,
.cta-box p{
    font-size:15px;
    line-height:1.8;
}

.about-btn-primary,
.about-btn-secondary,
.primary-btn,
.secondary-btn{
    padding:15px 25px;
    font-size:15px;
}

.tech-card,
.why-card,
.stat-card,
.timeline-content,
.faq-item{
    padding:25px;
}

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

.why-card i,
.stat-card i{
    width:70px;
    height:70px;
    font-size:28px;
}

.stat-card h2{
    font-size:38px;
}

.quote-box h2{
    font-size:24px;
}

.quote-box span{
    font-size:18px;
}

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

    .story-container{
        grid-template-columns:1fr;
        grid-template-areas:
            "content"
            "image";
        gap:50px;
    }

}