/* =========================================================
   GENX TECHNOLOGIES - ABOUT PAGE
   Modern Desktop + Mobile Responsive Design
========================================================= */

:root{

    --primary:#1769ff;
    --primary-dark:#124fd1;
    --purple:#4c35ff;
    --dark:#0b1733;
    --text:#17233f;
    --muted:#60708f;
    --border:#e4ebf7;
    --light:#f6f9ff;
    --white:#ffffff;

}


/* =========================================================
   GLOBAL
========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:"Poppins",sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

.container{
    width:min(1160px, calc(100% - 48px));
    margin:auto;
}


/* =========================================================
   NAVBAR
========================================================= */

.header{

    position:sticky;
    top:0;
    left:0;

    width:100%;

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

    backdrop-filter:blur(15px);

    border-bottom:1px solid #edf1f8;

    z-index:9999;

}


.navbar{

    min-height:72px;

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

}


.logo{

    position:relative;

    display:flex;
    align-items:center;

    font-size:28px;
    font-weight:800;

    letter-spacing:-1.5px;

    color:var(--dark);

    line-height:1;

}


.logo-gen{
    color:#0c1732;
}

.logo-x{
    color:#343cff;
}


.logo small{

    position:absolute;

    left:2px;
    top:32px;

    font-size:7px;

    letter-spacing:2px;

    font-weight:700;

    color:#14213d;

    white-space:nowrap;

}


.nav-links{

    list-style:none;

    display:flex;
    align-items:center;

    gap:34px;

    margin:0;
    padding:0;

}


.nav-links a{

    position:relative;

    color:#17213b;

    font-size:14px;
    font-weight:500;

    padding:26px 0;

    transition:.25s ease;

}


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

    color:var(--primary);

}


.nav-links a.active::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:14px;

    height:2px;

    border-radius:10px;

    background:var(--primary);

}


.quote-btn{

    display:inline-flex;
    align-items:center;
    gap:6px;

    background:linear-gradient(135deg,#1670ff,#4933ff);

    color:#fff;

    padding:12px 22px;

    border-radius:13px;

    font-size:13px;
    font-weight:600;

    box-shadow:0 12px 25px rgba(48,78,255,.22);

    transition:.3s ease;

}


.quote-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 30px rgba(48,78,255,.32);

}


.mobile-menu{

    display:none;

    width:44px;
    height:44px;

    border:0;

    background:#f3f6ff;

    border-radius:12px;

    cursor:pointer;

    padding:10px;

}


.mobile-menu span{

    display:block;

    height:2px;

    background:#16213d;

    margin:5px 0;

    border-radius:5px;

}


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

.about-hero{

    position:relative;

    min-height:505px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 82% 40%,
            rgba(113,104,255,.28),
            transparent 36%
        ),

        radial-gradient(
            circle at 15% 70%,
            rgba(73,175,255,.13),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f9ff 48%,
            #f0edff 100%
        );

}


.hero-bg-shape{

    position:absolute;

    width:600px;
    height:600px;

    right:-220px;
    top:-180px;

    border-radius:50%;

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

    filter:blur(3px);

}


.about-hero-grid{

    position:relative;

    min-height:505px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:30px;

}


.about-hero-content{

    position:relative;

    z-index:3;

    padding:40px 0;

}


.section-tag{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:7px 15px;

    border-radius:30px;

    border:1px solid #cfe0ff;

    background:#edf5ff;

    color:#075de9;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

}


.about-hero h1{

    margin:20px 0 16px;

    max-width:650px;

    font-size:51px;

    line-height:1.08;

    letter-spacing:-2.5px;

    color:#0b1733;

}


.about-hero h1 span{

    color:transparent;

    background:linear-gradient(
        90deg,
        #0877ff,
        #4d2fff
    );

    -webkit-background-clip:text;
    background-clip:text;

}


.about-hero-content > p{

    max-width:600px;

    margin:0;

    color:#566987;

    font-size:15px;

    line-height:1.8;

}


.hero-features{

    display:grid;

    grid-template-columns:repeat(4,max-content);

    gap:14px 20px;

    margin-top:20px;

}


.hero-features div{

    display:flex;
    align-items:center;
    gap:7px;

    font-size:11px;
    font-weight:600;

    color:#172442;

}


.check{

    display:inline-flex;

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

    width:18px;
    height:18px;

    border-radius:50%;

    background:#1670ff;

    color:#fff;

    font-size:10px;

}


.hero-buttons{

    display:flex;

    gap:14px;

    margin-top:28px;

}


.primary-btn,
.secondary-btn,
.outline-btn{

    display:inline-flex;

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

    gap:8px;

    min-height:48px;

    padding:0 22px;

    border-radius:12px;

    font-size:13px;
    font-weight:600;

    transition:.3s ease;

}


.primary-btn{

    color:white;

    background:linear-gradient(
        135deg,
        #0875ff,
        #4932ff
    );

    box-shadow:
        0 12px 25px rgba(36,91,255,.22);

}


.primary-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 30px rgba(36,91,255,.32);

}


.secondary-btn{

    color:#1265ed;

    background:white;

    border:1px solid #1970ff;

}


.secondary-btn:hover{

    background:#edf5ff;

    transform:translateY(-2px);

}


/* =========================================================
   HERO VISUAL
========================================================= */

.about-hero-visual{

    position:relative;

    min-height:450px;

    display:flex;

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

}


.image-glow{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(71,116,255,.27),
            transparent 68%
        );

    filter:blur(20px);

}


.hero-image-wrap{

    position:relative;

    width:430px;

    height:390px;

    border-radius:30px;

    overflow:hidden;

    z-index:2;

    box-shadow:
        0 30px 70px rgba(30,65,130,.18);

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

}


.hero-image-wrap img{

    width:100%;
    height:100%;

    object-fit:cover;

}


/* floating cards */

.floating-card{

    position:absolute;

    z-index:5;

    display:flex;
    align-items:center;

    gap:9px;

    padding:10px 14px;

    background:#fff;

    border-radius:14px;

    box-shadow:
        0 15px 35px rgba(38,65,120,.16);

    border:1px solid rgba(225,232,246,.9);

    min-width:140px;

}


.floating-card strong{

    display:block;

    font-size:11px;

    color:#17213d;

}


.floating-card small{

    display:block;

    color:#8491aa;

    font-size:8px;

    margin-top:2px;

}


.floating-icon{

    width:34px;
    height:34px;

    border-radius:10px;

    display:flex;

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

    font-size:15px;

}


.floating-icon.blue{
    background:#e7f1ff;
}

.floating-icon.green{
    background:#e8fff1;
}

.floating-icon.purple{
    background:#f0eaff;
}

.floating-icon.pink{
    background:#ffe8f0;
}


.website-card{
    top:75px;
    left:5px;
}

.app-card{
    top:110px;
    right:-5px;
}

.ai-card{
    bottom:92px;
    right:-8px;
}

.software-card{
    bottom:58px;
    left:10px;
}


.experience-card{

    position:absolute;

    z-index:7;

    left:30px;
    bottom:30px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border-radius:15px;

    background:white;

    box-shadow:
        0 15px 35px rgba(38,65,120,.17);

}


.experience-icon{

    width:38px;
    height:38px;

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

    border-radius:50%;

    background:#eaf2ff;

    color:#1769ff;

}


.experience-card strong{

    display:block;

    font-size:18px;

    line-height:1;

}


.experience-card span{

    display:block;

    margin-top:3px;

    color:#74819b;

    font-size:9px;

}


/* =========================================================
   STATS
========================================================= */

.stats-section{

    position:relative;

    z-index:10;

    margin-top:-1px;

    background:#f6faff;

}


.stats-container{

    position:relative;

    margin-top:-1px;

    transform:translateY(-30px);

    display:grid;

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

    background:#fff;

    border:1px solid #e3ebf7;

    border-radius:20px;

    box-shadow:0 15px 45px rgba(34,65,120,.09);

    overflow:hidden;

}


.stat-item{

    display:flex;
    align-items:center;

    gap:15px;

    padding:22px 25px;

    border-right:1px solid #e7edf6;

}


.stat-item:last-child{
    border-right:0;
}


.stat-icon{

    width:43px;
    height:43px;

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

    border-radius:12px;

    background:#edf4ff;

    color:#1769ff;

    font-size:19px;

}


.stat-item strong{

    display:block;

    font-size:20px;

    color:#10203e;

}


.stat-item span{

    display:block;

    margin-top:2px;

    font-size:9px;

    color:#71809a;

}


/* =========================================================
   STORY
========================================================= */

.about-story{

    padding:70px 0 85px;

    background:#fff;

}


.story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:75px;

    align-items:center;

}


.story-image{

    position:relative;

}


.story-image > img{

    width:100%;
    height:350px;

    object-fit:cover;

    border-radius:24px;

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

}


.office-badge{

    position:absolute;

    right:-30px;
    top:25px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 16px;

    background:#fff;

    border-radius:14px;

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

}


.badge-icon{

    width:37px;
    height:37px;

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

    border-radius:10px;

    background:#ffeef0;

    color:#ff3f5f;

}


.office-badge strong,
.office-badge span{

    display:block;

}


.office-badge strong{
    font-size:11px;
}

.office-badge span{
    font-size:8px;
    color:#8a96aa;
    margin-top:2px;
}


.project-badge{

    position:absolute;

    left:20px;
    bottom:20px;

    background:#fff;

    padding:13px 18px;

    border-radius:14px;

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

}


.project-badge strong{

    display:block;

    color:#1769ff;

    font-size:20px;

}


.project-badge span{

    display:block;

    font-size:9px;

    color:#74819b;

}


.story-content h2{

    margin:18px 0 15px;

    font-size:39px;

    letter-spacing:-1.5px;

    color:#0c1835;

}


.story-content h2 span{

    color:transparent;

    background:linear-gradient(
        90deg,
        #0874ff,
        #4932ff
    );

    -webkit-background-clip:text;
    background-clip:text;

}


.story-content p{

    color:#63718c;

    font-size:14px;

    line-height:1.8;

    margin:0 0 15px;

}


.outline-btn{

    margin-top:10px;

    color:#1265ed;

    border:1px solid #2877ff;

    background:white;

}


.outline-btn:hover{

    background:#edf5ff;

    transform:translateY(-2px);

}


/* =========================================================
   VALUES
========================================================= */

.values-section{

    padding:85px 0;

    background:
        linear-gradient(
            180deg,
            #f8fbff,
            #ffffff
        );

}


.section-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 42px;

}


.section-heading h2{

    margin:15px 0 8px;

    font-size:39px;

    letter-spacing:-1.5px;

    color:#0c1835;

}


.section-heading h2 span{

    color:transparent;

    background:linear-gradient(
        90deg,
        #0874ff,
        #4932ff
    );

    -webkit-background-clip:text;
    background-clip:text;

}


.section-heading p{

    margin:0;

    color:#71809b;

    font-size:13px;

}


.values-grid{

    display:grid;

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

    gap:16px;

}


.value-card{

    display:flex;

    gap:14px;

    padding:23px 18px;

    border-radius:18px;

    border:1px solid #e5ebf5;

    background:white;

    transition:.3s ease;

}


.value-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(31,67,125,.10);

}


.value-icon{

    flex:0 0 43px;

    width:43px;
    height:43px;

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

    border-radius:12px;

    font-size:19px;

}


.blue-card .value-icon{
    background:#e8f1ff;
}

.green-card .value-icon{
    background:#e8fff4;
}

.red-card .value-icon{
    background:#ffedf1;
}

.purple-card .value-icon{
    background:#f0ebff;
}


.value-card h3{

    margin:1px 0 6px;

    font-size:14px;

    color:#182440;

}


.value-card p{

    margin:0;

    color:#71809b;

    font-size:10px;

    line-height:1.65;

}


/* =========================================================
   TECHNOLOGY
========================================================= */

.technology-section{

    padding:90px 0;

    background:#fff;

}


.technology-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


.technology-content h2{

    margin:18px 0 14px;

    font-size:40px;

    line-height:1.15;

    letter-spacing:-1.5px;

    color:#0b1733;

}


.technology-content h2 span{

    display:block;

    color:transparent;

    background:linear-gradient(
        90deg,
        #0874ff,
        #4932ff
    );

    -webkit-background-clip:text;
    background-clip:text;

}


.technology-content > p{

    color:#64728d;

    font-size:14px;

    line-height:1.8;

    max-width:580px;

}


.technology-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:13px 20px;

    margin:25px 0;

}


.technology-list div{

    font-size:12px;

    font-weight:600;

    color:#25324d;

}


.technology-list span{

    display:inline-flex;

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

    width:20px;
    height:20px;

    margin-right:7px;

    border-radius:50%;

    background:#e9f2ff;

    color:#1670ff;

    font-size:10px;

}


/* Technology visual */

.technology-box{

    position:relative;

    height:370px;

    display:flex;

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

    border-radius:30px;

    overflow:hidden;

    background:

        radial-gradient(
            circle,
            rgba(91,115,255,.25),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #0c1c43,
            #152b68
        );

    box-shadow:
        0 30px 70px rgba(15,39,90,.20);

}


.tech-center{

    position:relative;

    z-index:4;

    width:140px;
    height:140px;

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

    flex-wrap:wrap;

    align-content:center;

    border-radius:50%;

    background:#fff;

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

    color:#0b1733;

    font-size:29px;

    font-weight:800;

}


.tech-center strong{
    color:#3e37ff;
}


.tech-center small{

    width:100%;

    text-align:center;

    font-size:7px;

    letter-spacing:2px;

    color:#71809b;

}


.tech-orbit{

    position:absolute;

    border:1px dashed rgba(255,255,255,.28);

    border-radius:50%;

}


.orbit-one{

    width:250px;
    height:250px;
}


.orbit-two{

    width:340px;
    height:340px;

}


.tech-item{

    position:absolute;

    z-index:5;

    width:52px;
    height:52px;

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

    border-radius:15px;

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

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

    backdrop-filter:blur(10px);

    font-size:22px;

}


.tech-one{
    top:55px;
    left:120px;
}

.tech-two{
    top:95px;
    right:95px;
}

.tech-three{
    bottom:65px;
    left:95px;
}

.tech-four{
    bottom:70px;
    right:115px;
}


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

.about-cta{

    padding:70px 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(74,67,255,.28),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #0a1b3e,
            #112d66
        );

}


.cta-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}


.cta-small{

    color:#72b3ff;

    font-size:10px;

    font-weight:700;

    letter-spacing:1.5px;

}


.cta-content h2{

    margin:10px 0 8px;

    color:white;

    font-size:38px;

    line-height:1.15;

    letter-spacing:-1.5px;

}


.cta-content h2 span{

    color:#5ca4ff;

}


.cta-content p{

    margin:0;

    color:#b9c8e4;

    font-size:13px;

}


.cta-button{

    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 24px;

    border-radius:12px;

    background:white;

    color:#155fff;

    font-size:13px;

    font-weight:700;

    transition:.3s ease;

}


.cta-button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,0,0,.2);

}


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

.footer{

    background:#07132d;

    padding:55px 0 0;

    color:white;

}


.footer-grid{

    display:grid;

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

    gap:50px;

    padding-bottom:40px;

}


.footer .logo{
    color:white;
}


.footer .logo-gen{
    color:white;
}


.footer-brand p{

    max-width:300px;

    color:#8ea0c2;

    font-size:11px;

    line-height:1.7;

    margin-top:20px;

}


.footer-links{

    display:flex;

    flex-direction:column;

    gap:11px;

}


.footer-links h4{

    margin:0 0 8px;

    font-size:13px;

}


.footer-links a{

    color:#8ea0c2;

    font-size:11px;

    transition:.2s;

}


.footer-links a:hover{
    color:white;
}


.footer-bottom{

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

    padding:20px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}


.footer-bottom p{

    margin:0;

    color:#7486aa;

    font-size:9px;

}


.footer-bottom div{

    display:flex;
    gap:9px;

}


.footer-bottom a,
.footer-bottom span{

    color:#7486aa;

    font-size:9px;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .nav-links{
        gap:18px;
    }

    .about-hero h1{
        font-size:42px;
    }

    .hero-features{
        grid-template-columns:1fr 1fr;
    }

    .floating-card{
        transform:scale(.85);
    }

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

    .technology-grid{
        gap:35px;
    }

}


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

@media(max-width:760px){

    .container{
        width:min(100% - 32px, 600px);
    }


    /* NAVBAR */

    .navbar{
        min-height:68px;
    }

    .mobile-menu{
        display:block;
    }

    .quote-btn{
        display:none;
    }

    .nav-links{

        position:absolute;

        top:68px;
        left:16px;
        right:16px;

        display:none;

        flex-direction:column;

        gap:0;

        padding:10px;

        background:white;

        border:1px solid #e4ebf7;

        border-radius:16px;

        box-shadow:0 20px 45px rgba(25,55,110,.15);

    }

    .nav-links.show{
        display:flex;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links a{

        display:block;

        padding:13px 15px;

        border-radius:10px;

    }

    .nav-links a.active::after{
        display:none;
    }

    .nav-links a.active{
        background:#edf4ff;
    }


    /* HERO */

    .about-hero{
        min-height:auto;
    }

    .about-hero-grid{

        min-height:auto;

        grid-template-columns:1fr;

        gap:10px;

        padding-top:35px;
        padding-bottom:35px;

    }

    .about-hero-content{
        padding:0;
    }

    .about-hero h1{

        margin-top:17px;

        font-size:38px;

        line-height:1.08;

        letter-spacing:-1.7px;

    }

    .about-hero-content > p{
        font-size:13px;
        line-height:1.7;
    }

    .hero-features{
        grid-template-columns:1fr 1fr;
        gap:11px 10px;
    }

    .hero-features div{
        font-size:10px;
    }

    .hero-buttons{
        margin-top:22px;
    }

    .primary-btn,
    .secondary-btn{
        min-height:45px;
        padding:0 15px;
        font-size:11px;
    }


    /* HERO IMAGE */

    .about-hero-visual{

        min-height:350px;

        margin-top:5px;

    }

    .hero-image-wrap{

        width:100%;
        height:315px;

        border-width:5px;

        border-radius:22px;

    }

    .website-card{
        left:-4px;
        top:25px;
    }

    .app-card{
        right:-7px;
        top:58px;
    }

    .ai-card{
        right:-7px;
        bottom:50px;
    }

    .software-card{
        left:-3px;
        bottom:30px;
    }

    .floating-card{

        min-width:auto;

        padding:7px 9px;

        transform:scale(.75);

        transform-origin:center;

    }

    .floating-icon{
        width:28px;
        height:28px;
    }

    .experience-card{

        left:50%;

        transform:translateX(-50%);

        bottom:0;

        white-space:nowrap;

        padding:9px 14px;

    }


    /* STATS */

    .stats-container{

        transform:none;

        margin-top:0;

        grid-template-columns:1fr 1fr;

        border-radius:16px;

    }

    .stat-item{

        padding:17px 14px;

        border-bottom:1px solid #e7edf6;

    }

    .stat-item:nth-child(2){
        border-right:0;
    }

    .stat-item:nth-child(3){
        border-bottom:0;
    }

    .stat-item:nth-child(4){
        border-right:0;
        border-bottom:0;
    }

    .stat-icon{
        width:36px;
        height:36px;
        font-size:15px;
    }

    .stat-item strong{
        font-size:17px;
    }

    .stat-item span{
        font-size:8px;
    }


    /* STORY */

    .about-story{
        padding:55px 0;
    }

    .story-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .story-image > img{
        height:280px;
        border-radius:20px;
    }

    .office-badge{
        right:10px;
        top:15px;
    }

    .project-badge{
        left:12px;
        bottom:12px;
    }

    .story-content h2{
        font-size:34px;
    }

    .story-content p{
        font-size:12px;
    }


    /* VALUES */

    .values-section{
        padding:60px 0;
    }

    .section-heading{
        margin-bottom:28px;
    }

    .section-heading h2{
        font-size:31px;
    }

    .section-heading p{
        font-size:11px;
    }

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

    .value-card{
        padding:18px;
    }


    /* TECHNOLOGY */

    .technology-section{
        padding:60px 0;
    }

    .technology-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .technology-content h2{
        font-size:32px;
    }

    .technology-content > p{
        font-size:12px;
    }

    .technology-list{
        grid-template-columns:1fr;
    }

    .technology-box{
        height:310px;
    }


    /* CTA */

    .about-cta{
        padding:55px 0;
    }

    .cta-content{

        flex-direction:column;

        align-items:flex-start;

        gap:25px;

    }

    .cta-content h2{
        font-size:30px;
    }

    .cta-content p{
        font-size:11px;
        line-height:1.7;
    }

    .cta-button{
        width:100%;
    }


    /* FOOTER */

    .footer{
        padding-top:45px;
    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:35px 25px;

    }

    .footer-brand{
        grid-column:1/-1;
    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:400px){

    .about-hero h1{
        font-size:33px;
    }

    .section-tag{
        font-size:9px;
    }

    .hero-features div{
        font-size:9px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .primary-btn,
    .secondary-btn{
        width:100%;
    }

    .hero-image-wrap{
        height:280px;
    }

    .about-hero-visual{
        min-height:315px;
    }

    .floating-card{
        transform:scale(.65);
    }

    .story-content h2{
        font-size:30px;
    }

    .section-heading h2{
        font-size:28px;
    }

}