/*=========================================================
    SHREE INFOSERV
    Premium Software Company Website
    Version : 1.0
==========================================================*/

/*==========================
      GOOGLE FONT
==========================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


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

:root{

    --primary:#2563eb;
    --secondary:#7c3aed;
    --accent:#06b6d4;

    --dark:#081226;
    --dark-light:#10203d;

    --white:#ffffff;

    --text:#d7def2;

    --gray:#94a3b8;

    --border:rgba(255,255,255,.12);

    --glass:rgba(255,255,255,.08);

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

    --radius:18px;

    --transition:.35s ease;

}


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

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

html{

    scroll-behavior:smooth;

}

body{

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

    background:linear-gradient(140deg,#06111f,#091c39,#081226);

    color:var(--white);

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}


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

.container{

    width:92%;

    max-width:1280px;

    margin:auto;

}


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

#header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    transition:.4s;

}

#header.scrolled{

    background:rgba(8,18,38,.88);

    backdrop-filter:blur(18px);

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

}


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

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}


/*==========================
      LOGO
==========================*/

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    color:#fff;

    font-size:24px;

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

}

.logo-text h2{

    font-size:24px;

    font-weight:700;

    letter-spacing:.5px;

}

.logo-text small{

    color:var(--gray);

    font-size:13px;

}


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

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-links a{

    color:#fff;

    font-size:15px;

    font-weight:500;

    transition:var(--transition);

    position:relative;

}

.nav-links a:hover{

    color:#60a5fa;

}

.nav-links a::after{

    content:'';

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#60a5fa;

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;

}

.active{

    color:#60a5fa !important;

}


/*==========================
      RIGHT NAV
==========================*/

.nav-right{

    display:flex;

    align-items:center;

    gap:18px;

}


/*==========================
      BUTTON
==========================*/

.quote-btn{

    color:#fff;

    background:linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    padding:14px 28px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    transition:.35s;

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

}

.quote-btn:hover{

    transform:translateY(-4px);

}


/*==========================
      HAMBURGER
==========================*/

.menu-toggle{

    display:none;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:28px;

    height:3px;

    background:#fff;

    margin:5px;

    border-radius:20px;

}


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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding-top:120px;

}


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

.hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}


/*==========================
      LEFT SIDE
==========================*/

.hero-left{

    position:relative;

    z-index:2;

}

.hero-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

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

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

    color:#7dd3fc;

    font-size:14px;

    margin-bottom:28px;

    backdrop-filter:blur(12px);

}


/*==========================
      HEADING
==========================*/

.hero-left h1{

    font-size:64px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:30px;

}

.hero-left h1 span{

    color:#38bdf8;

}


/*==========================
      PARAGRAPH
==========================*/

.hero-left p{

    color:var(--text);

    font-size:18px;

    line-height:1.9;

    margin-bottom:40px;

    max-width:640px;

}


/*==========================
      BUTTON GROUP
==========================*/

.hero-buttons{

    display:flex;

    gap:20px;

}


/*==========================
      PRIMARY BUTTON
==========================*/

.btn-primary{

    padding:18px 38px;

    border-radius:50px;

    background:linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    color:#fff;

    font-weight:600;

    transition:.35s;

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

}

.btn-primary:hover{

    transform:translateY(-5px);

}


/*==========================
      SECONDARY BUTTON
==========================*/

.btn-secondary{

    padding:18px 38px;

    border-radius:50px;

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

    color:#fff;

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

    backdrop-filter:blur(15px);

    transition:.35s;

}

.btn-secondary:hover{

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

}


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

.hero-bg{

    position:absolute;

    width:100%;

    height:100%;

    left:0;

    top:0;

    overflow:hidden;

}


/*==========================
      FLOATING CIRCLES
==========================*/

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(50px);

    opacity:.35;

}

.one{

    width:320px;

    height:320px;

    background:#2563eb;

    left:-100px;

    top:80px;

}

.two{

    width:450px;

    height:450px;

    background:#7c3aed;

    right:-150px;

    top:120px;

}

.three{

    width:280px;

    height:280px;

    background:#06b6d4;

    bottom:-100px;

    left:40%;

}

/*=========================================================
        HERO RIGHT SECTION
=========================================================*/

.hero-right{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:2;
}

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

.hero-card{

    width:100%;
    max-width:500px;

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

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

    backdrop-filter:blur(20px);

    border-radius:24px;

    padding:35px;

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

    position:relative;

    overflow:hidden;

}

.hero-card::before{

    content:'';

    position:absolute;

    width:180px;
    height:180px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.35),
        rgba(124,58,237,.35)
    );

    border-radius:50%;

    top:-80px;
    right:-60px;

    filter:blur(20px);

}

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

.card-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:30px;

    font-size:18px;

    font-weight:600;

    color:#ffffff;

}

/*==========================
        LIVE DOT
===========================*/

.live-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#00ff88;

    box-shadow:0 0 15px #00ff88;

    animation:liveBlink 1.2s infinite;

}

@keyframes liveBlink{

    0%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.4;
        transform:scale(.8);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}

/*==========================
      SERVICE LIST
===========================*/

.service-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*==========================
      SERVICE ITEM
===========================*/

.service-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px;

    border-radius:16px;

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

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

    transition:.35s;

}

.service-item:hover{

    transform:translateX(8px);

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

}

/*==========================
        ICON
===========================*/

.service-item i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-size:24px;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

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

}

/*==========================
      TITLE
===========================*/

.service-item h4{

    font-size:18px;

    margin-bottom:5px;

    color:#ffffff;

}

/*==========================
      DESCRIPTION
===========================*/

.service-item small{

    color:#cbd5e1;

    font-size:14px;

}

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

.hero-stats{

    display:flex;

    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;

}

/*==========================
        STAT CARD
===========================*/

.stat{

    flex:1;

    min-width:150px;

    padding:25px;

    border-radius:18px;

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

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

    backdrop-filter:blur(15px);

    transition:.35s;

}

.stat:hover{

    transform:translateY(-8px);

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

}

/*==========================
        NUMBER
===========================*/

.stat h2{

    font-size:38px;

    color:#38bdf8;

    margin-bottom:10px;

}

/*==========================
        TEXT
===========================*/

.stat p{

    font-size:15px;

    color:#cbd5e1;

    line-height:1.6;

    margin:0;

}

/*=========================================================
        SCROLL INDICATOR
=========================================================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

}

.scroll-down span{

    width:32px;

    height:52px;

    display:block;

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

    border-radius:30px;

    position:relative;

}

.scroll-down span::before{

    content:'';

    position:absolute;

    width:6px;

    height:12px;

    border-radius:20px;

    background:#ffffff;

    left:50%;

    transform:translateX(-50%);

    top:10px;

    animation:scrollMouse 2s infinite;

}

@keyframes scrollMouse{

    0%{

        top:10px;

        opacity:1;

    }

    100%{

        top:28px;

        opacity:0;

    }

}

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

.hero-left{

    animation:fadeLeft 1s ease;

}

.hero-right{

    animation:fadeRight 1s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
        FLOATING CIRCLES
=========================================================*/

.one{

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

}

.two{

    animation:floatTwo 10s ease-in-out infinite;

}

.three{

    animation:floatThree 12s ease-in-out infinite;

}

@keyframes floatOne{

    50%{

        transform:translateY(-40px);

    }

}

@keyframes floatTwo{

    50%{

        transform:translate(-30px,30px);

    }

}

@keyframes floatThree{

    50%{

        transform:translateY(35px);

    }

}

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

.clients{

    padding:90px 0;

    position:relative;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.02),
        rgba(255,255,255,.04)
    );

}

.clients-title{

    text-align:center;

    color:#9fb6dc;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

    margin-bottom:50px;

}

.clients-grid{

    display:grid;

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

    gap:25px;

}

.clients-grid div{

    height:95px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:600;

    color:#ffffff;

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

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

    backdrop-filter:blur(15px);

    transition:.35s;

    cursor:pointer;

}

.clients-grid div:hover{

    transform:translateY(-8px);

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.25),
        rgba(124,58,237,.25)
    );

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

}

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

section{

    position:relative;

}

section h2{

    font-size:44px;

    font-weight:700;

    margin-bottom:25px;

    color:#ffffff;

}

section p{

    color:#cbd5e1;

    line-height:1.8;

}

/*=========================================================
              GRADIENT TEXT
=========================================================*/

.gradient-text{

    background:linear-gradient(
        135deg,
        #38bdf8,
        #2563eb,
        #7c3aed
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

/*=========================================================
                CARD EFFECT
=========================================================*/

.glass-card{

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

    backdrop-filter:blur(20px);

    border-radius:20px;

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

}

/*=========================================================
                SHADOW HELPERS
=========================================================*/

.shadow-lg{

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

}

.shadow-md{

    box-shadow:
        0 18px 40px rgba(0,0,0,.22);

}

/*=========================================================
                BORDER GLOW
=========================================================*/

.glow{

    position:relative;

}

.glow::before{

    content:'';

    position:absolute;

    inset:-1px;

    border-radius:inherit;

    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.7),
        rgba(124,58,237,.7)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

/*=========================================================
                IMAGE HOVER
=========================================================*/

img{

    transition:.4s;

}

img:hover{

    transform:scale(1.03);

}

/*=========================================================
                LINK EFFECT
=========================================================*/

a{

    transition:.3s;

}

a:hover{

    opacity:.95;

}

/*=========================================================
                CUSTOM SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#081226;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        #2563eb,
        #7c3aed
    );

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#38bdf8;

}

/*=========================================================
                TEXT SELECTION
=========================================================*/

::selection{

    background:#2563eb;

    color:#ffffff;

}

/*=========================================================
                UTILITIES
=========================================================*/

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mt-60{

    margin-top:60px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}

.py-100{

    padding:100px 0;

}

/*=========================================================
                ANIMATION DELAYS
=========================================================*/

.delay-1{

    animation-delay:.2s;

}

.delay-2{

    animation-delay:.4s;

}

.delay-3{

    animation-delay:.6s;

}

.delay-4{

    animation-delay:.8s;

}

/*=========================================================
                TRANSITIONS
=========================================================*/

button,
.btn-primary,
.btn-secondary,
.quote-btn,
.service-item,
.stat,
.clients-grid div{

    transition:
        all .35s ease;

}

/*=========================================================
                PERFORMANCE
=========================================================*/

.hero,
.hero-card,
.service-item,
.stat,
.clients-grid div{

    will-change:transform;

}

/*=========================================================
                END OF PART 1.2C
=========================================================*/

/* Scroll To Top */

.scrollTop{

    position:fixed;
    
    right:30px;
    
    bottom:30px;
    
    width:55px;
    
    height:55px;
    
    border-radius:50%;
    
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    cursor:pointer;
    
    color:#fff;
    
    font-size:18px;
    
    opacity:0;
    
    visibility:hidden;
    
    transition:.35s;
    
    box-shadow:0 15px 35px rgba(0,0,0,.35);
    
    z-index:999;
    
    }
    
    .scrollTop.show{
    
    opacity:1;
    
    visibility:visible;
    
    }
    
    .scrollTop:hover{
    
    transform:translateY(-5px);
    
    }

    /*===========================================
        LARGE LAPTOP
===========================================*/

@media(max-width:1400px){

    .container{
    
        width:95%;
    
    }
    
    .hero-left h1{
    
        font-size:56px;
    
    }
    
    .hero-wrapper{
    
        gap:50px;
    
    }
    
    }
    
    /*===========================================
            LAPTOP
    ===========================================*/
    
    @media(max-width:1200px){
    
    .hero-left h1{
    
        font-size:48px;
    
    }
    
    .hero-left p{
    
        font-size:17px;
    
    }
    
    .clients-grid{
    
        grid-template-columns:repeat(4,1fr);
    
    }
    
    .hero-card{
    
        max-width:450px;
    
    }
    
    }
    
    /*===========================================
            TABLET
    ===========================================*/
    
    @media(max-width:992px){
    
    .nav-links{
    
        position:fixed;
    
        top:85px;
    
        left:-100%;
    
        width:100%;
    
        background:#081226;
    
        flex-direction:column;
    
        padding:40px;
    
        gap:30px;
    
        transition:.4s;
    
        border-top:1px solid rgba(255,255,255,.08);
    
    }
    
    .nav-links.active{
    
        left:0;
    
    }
    
    .menu-toggle{
    
        display:block;
    
    }
    
    .quote-btn{
    
        display:none;
    
    }
    
    .hero{
    
        padding-top:140px;
    
    }
    
    .hero-wrapper{
    
        grid-template-columns:1fr;
    
        text-align:center;
    
    }
    
    .hero-buttons{
    
        justify-content:center;
    
    }
    
    .hero-left p{
    
        margin:auto;
    
        margin-bottom:35px;
    
    }
    
    .hero-right{
    
        margin-top:50px;
    
    }
    
    .hero-card{
    
        max-width:650px;
    
    }
    
    .hero-stats{
    
        justify-content:center;
    
    }
    
    .clients-grid{
    
        grid-template-columns:repeat(3,1fr);
    
    }
    
    }
    
    /*===========================================
            MOBILE
    ===========================================*/
    
    @media(max-width:768px){
    
    .logo-text h2{
    
        font-size:20px;
    
    }
    
    .hero-left h1{
    
        font-size:38px;
    
        line-height:1.3;
    
    }
    
    .hero-left p{
    
        font-size:16px;
    
    }
    
    .hero-buttons{
    
        flex-direction:column;
    
        align-items:center;
    
    }
    
    .btn-primary,
    .btn-secondary{
    
        width:260px;
    
        text-align:center;
    
    }
    
    .hero-card{
    
        padding:25px;
    
    }
    
    .service-item{
    
        padding:15px;
    
    }
    
    .service-item i{
    
        width:50px;
    
        height:50px;
    
        font-size:20px;
    
    }
    
    .hero-stats{
    
        flex-direction:column;
    
    }
    
    .stat{
    
        width:100%;
    
    }
    
    .clients-grid{
    
        grid-template-columns:repeat(2,1fr);
    
    }
    
    .clients-grid div{
    
        font-size:16px;
    
        height:80px;
    
    }
    
    section h2{
    
        font-size:34px;
    
    }
    
    }
    
    /*===========================================
            SMALL MOBILE
    ===========================================*/
    
    @media(max-width:576px){
    
    .navbar{
    
        padding:15px 0;
    
    }
    
    .hero{
    
        padding-top:120px;
    
    }
    
    .hero-left h1{
    
        font-size:32px;
    
    }
    
    .hero-badge{
    
        font-size:12px;
    
    }
    
    .hero-left p{
    
        font-size:15px;
    
    }
    
    .hero-card{
    
        padding:20px;
    
    }
    
    .card-header{
    
        font-size:16px;
    
    }
    
    .service-item{
    
        flex-direction:column;
    
        text-align:center;
    
    }
    
    .service-item h4{
    
        font-size:17px;
    
    }
    
    .service-item small{
    
        font-size:13px;
    
    }
    
    .clients-grid{
    
        grid-template-columns:1fr;
    
    }
    
    .clients-grid div{
    
        height:70px;
    
    }
    
    .scroll-down{
    
        display:none;
    
    }
    
    }
    
    /*===========================================
            EXTRA SMALL
    ===========================================*/
    
    @media(max-width:400px){
    
    .hero-left h1{
    
        font-size:28px;
    
    }
    
    .logo-icon{
    
        width:48px;
    
        height:48px;
    
    }
    
    .logo-text h2{
    
        font-size:18px;
    
    }
    
    .hero-buttons a{
    
        width:100%;
    
    }
    
    }

    /*=========================================
        WHY CHOOSE US
=========================================*/

.why-us{

    padding:120px 0;

    position:relative;

}

.why-wrapper{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:70px;

    align-items:center;

}

.section-badge{

    display:inline-block;

    padding:10px 25px;

    border-radius:40px;

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

    color:#60a5fa;

    border:1px solid rgba(96,165,250,.3);

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:25px;

}

.why-content h2{

    font-size:48px;

    line-height:1.2;

    margin-bottom:30px;

}

.why-content p{

    color:#cbd5e1;

    line-height:1.9;

    margin-bottom:40px;

}

.experience-box{

    display:flex;

    align-items:center;

    gap:25px;

    padding:25px;

    border-radius:20px;

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

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

}

.experience-box h3{

    font-size:64px;

    color:#38bdf8;

}

.experience-box p{

    margin:0;

}

.why-grid{

    display:grid;

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

    gap:25px;

}

.why-card{

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

    backdrop-filter:blur(15px);

    border-radius:20px;

    padding:30px;

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

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);

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

}

.why-card i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    color:#fff;

    font-size:28px;

    margin-bottom:20px;

}

.why-card h4{

    margin-bottom:15px;

    font-size:22px;

}

.why-card p{

    color:#cbd5e1;

    line-height:1.7;

    margin:0;

}

/*=========================================
        ABOUT COMPANY
=========================================*/

.about-company{

    padding:120px 0;

    position:relative;

}

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/* LEFT */

.about-images{

    position:relative;

}

.image-card{

    overflow:hidden;

    border-radius:25px;

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

}

.image-card img{

    width:100%;

    display:block;

}

.floating-card{

    position:absolute;

    right:-20px;

    bottom:40px;

    width:180px;

    text-align:center;

    padding:25px;

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

    backdrop-filter:blur(15px);

    border-radius:20px;

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

}

.floating-card h2{

    font-size:48px;

    color:#38bdf8;

}

.experience-tag{

    position:absolute;

    left:-20px;

    top:40px;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    color:#fff;

    padding:18px 30px;

    border-radius:40px;

    font-size:15px;

    font-weight:600;

}

.experience-tag i{

    margin-right:10px;

}

/* RIGHT */

.about-content h2{

    font-size:48px;

    margin-bottom:30px;

    line-height:1.2;

}

.about-content p{

    color:#cbd5e1;

    line-height:1.9;

    margin-bottom:25px;

}

.mission-grid{

    margin:40px 0;

    display:grid;

    gap:25px;

}

.mission-box{

    display:flex;

    gap:20px;

    align-items:flex-start;

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

    padding:25px;

    border-radius:20px;

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

    transition:.35s;

}

.mission-box:hover{

    transform:translateX(8px);

}

.mission-box i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    color:#fff;

    font-size:24px;

}

.mission-box h4{

    margin-bottom:10px;

    font-size:22px;

}

.mission-box p{

    margin:0;

}