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

.about-hero{

    position:relative;
    overflow:hidden;

    padding:160px 0 110px;

    background:
    linear-gradient(
    135deg,
    #f8faff,
    #eef4ff
    );

}

.about-hero::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:rgba(70,86,163,.08);

    top:-180px;
    right:-140px;

    filter:blur(20px);

}

.about-hero::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(44,116,179,.08);

    bottom:-120px;
    left:-100px;

    filter:blur(20px);

}

.about-container{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:80px;

    align-items:center;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

    color:var(--gray);

    font-size:.95rem;

}

.breadcrumb a{

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.breadcrumb a:hover{

    color:var(--secondary);

}

.breadcrumb i{

    font-size:.8rem;

}


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

.about-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:#fff;

    color:var(--secondary);

    font-weight:600;

    box-shadow:var(--shadow);

    margin-bottom:28px;

}

.about-content h1{

    font-size:4rem;

    line-height:1.15;

    color:var(--primary);

    margin-bottom:25px;

}

.about-content h1 span{

    color:var(--secondary);

}

.about-content p{

    color:var(--gray);

    line-height:1.9;

    font-size:1.08rem;

    margin-bottom:40px;

}

.about-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}


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

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    animation:float 6s ease-in-out infinite;

}

.experience-card{

    position:absolute;

    bottom:40px;

    left:-30px;

    background:#fff;

    padding:24px;

    border-radius:20px;

    box-shadow:var(--shadow);

    text-align:center;

}

.experience-card h2{

    color:var(--secondary);

    font-size:2rem;

    margin-bottom:8px;

}

.experience-card p{

    color:var(--gray);

    font-size:.95rem;

}


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

.about-story{

    background:#fff;

}

.story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.story-image{

    position:relative;

}

.story-image img{

    width:100%;

    border-radius:30px;

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

}

.story-content .section-tag{

    display:inline-block;

    margin-bottom:18px;

    color:var(--secondary);

    font-weight:600;

    letter-spacing:2px;

}

.story-content h2{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:25px;

}

.story-content p{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:22px;

}


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

.story-features{

    display:grid;

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

    gap:22px;

    margin-top:35px;

}

.story-box{

    display:flex;

    gap:18px;

    align-items:flex-start;

    background:var(--light);

    padding:22px;

    border-radius:18px;

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

    transition:.35s;

}

.story-box:hover{

    transform:translateY(-8px);

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

}

.story-box i{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:var(--secondary);

    color:#fff;

    font-size:1.3rem;

    flex-shrink:0;

}

.story-box h4{

    color:var(--primary);

    margin-bottom:8px;

}

.story-box p{

    margin:0;

    font-size:.95rem;

    color:var(--gray);

    line-height:1.7;

}


/* ==========================================================
   MISSION & VISION
========================================================== */

.mission{

    background:var(--light-gray);

}

.mv-grid{

    display:grid;

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

    gap:35px;

}

.mv-card{

    position:relative;

    background:#fff;

    padding:45px;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 20px 55px rgba(0,0,0,.06);

    transition:.4s;

}

.mv-card:hover{

    transform:translateY(-12px);

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

}

.mv-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        var(--accent)
    );

}

.mv-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:rgba(70,86,163,.08);

    color:var(--secondary);

    font-size:2rem;

    margin-bottom:28px;

}

.mv-card h3{

    color:var(--primary);

    font-size:2rem;

    margin-bottom:18px;

}

.mv-card p{

    color:var(--gray);

    line-height:1.9;

}


/* ==========================================================
   COMMON SPACING
========================================================== */

.about-story,
.mission{

    padding:110px 0;

}
/* ==========================================================
   CORE VALUES
========================================================== */

.values{

    background:#fff;

}

.values-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.value-card{

    position:relative;

    background:#fff;

    padding:45px 35px;

    border-radius:24px;

    text-align:center;

    transition:.4s;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.value-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:linear-gradient(
    90deg,
    var(--secondary),
    var(--accent)
    );

    transform:scaleX(0);

    transition:.35s;

    transform-origin:left;

}

.value-card:hover{

    transform:translateY(-15px);

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

}

.value-card:hover::before{

    transform:scaleX(1);

}

.value-icon{

    width:90px;
    height:90px;

    border-radius:24px;

    background:rgba(70,86,163,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:28px;

    color:var(--secondary);

    font-size:2.2rem;

    transition:.35s;

}

.value-card:hover .value-icon{

    background:var(--secondary);

    color:#fff;

    transform:rotateY(180deg);

}

.value-card h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:1.5rem;

}

.value-card p{

    color:var(--gray);

    line-height:1.9;

}



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

.company-stats{

    background:linear-gradient(
    135deg,
    var(--primary),
    #162d53
    );

    color:#fff;

}

.stats-grid{

    display:grid;

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

    gap:35px;

}

.stat-card{

    text-align:center;

    padding:35px;

}

.stat-icon{

    width:85px;
    height:85px;

    border-radius:50%;

    margin:auto;

    margin-bottom:25px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    transition:.35s;

}

.stat-card:hover .stat-icon{

    transform:translateY(-10px);

    background:var(--secondary);

}

.stat-card h2{

    font-size:3rem;

    margin-bottom:10px;

    color:#fff;

}

.stat-card p{

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

}



/* ==========================================================
   TEAM
========================================================== */

.team{

    background:var(--light-gray);

}

.team-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.team-card{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    transition:.4s;

    box-shadow:0 18px 50px rgba(0,0,0,.06);

}

.team-card:hover{

    transform:translateY(-15px);

}

.team-image{

    position:relative;

    overflow:hidden;

}

.team-image img{

    width:100%;

    transition:.5s;

}

.team-card:hover img{

    transform:scale(1.08);

}

.team-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

    to top,

    rgba(11,31,58,.82),

    transparent

    );

    opacity:0;

    transition:.35s;

}

.team-card:hover .team-overlay{

    opacity:1;

}

.team-social{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

    display:flex;

    gap:15px;

    opacity:0;

    transition:.35s;

}

.team-card:hover .team-social{

    opacity:1;

}

.team-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    transition:.35s;

}

.team-social a:hover{

    background:var(--secondary);

    color:#fff;

}

.team-content{

    padding:32px;

    text-align:center;

}

.team-content h3{

    color:var(--primary);

    margin-bottom:8px;

}

.team-content span{

    color:var(--secondary);

    font-weight:600;

    display:block;

    margin-bottom:15px;

}

.team-content p{

    color:var(--gray);

    line-height:1.8;

}



/* ==========================================================
   CERTIFICATIONS
========================================================== */

.certifications{

    background:#fff;

}

.cert-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.cert-card{

    background:#fff;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.cert-card:hover{

    transform:translateY(-12px);

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

}

.cert-card img{

    width:75px;

    margin:auto;

    margin-bottom:25px;

}

.cert-card h3{

    color:var(--primary);

    margin-bottom:12px;

}

.cert-card p{

    color:var(--gray);

    line-height:1.8;

}



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

.values,
.company-stats,
.team,
.certifications{

    padding:110px 0;

}

/* ==========================================================
   COMPANY JOURNEY
========================================================== */

.journey{

    background:var(--light-gray);

}

.timeline{

    position:relative;

    max-width:900px;

    margin:70px auto 0;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    background:linear-gradient(
    to bottom,
    var(--secondary),
    var(--accent)
    );

}

.timeline-item{

    position:relative;

    width:50%;

    padding:0 55px 70px;

}

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

    left:0;

    text-align:right;

}

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

    left:50%;

}

.timeline-dot{

    position:absolute;

    top:8px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--secondary);

    border:5px solid #fff;

    box-shadow:0 0 0 8px rgba(70,86,163,.12);

}

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

    right:-11px;

}

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

    left:-11px;

}

.timeline-content{

    background:#fff;

    padding:30px;

    border-radius:22px;

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

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-10px);

}

.timeline-content h3{

    color:var(--primary);

    margin-bottom:10px;

}

.timeline-content span{

    color:var(--secondary);

    font-weight:600;

    display:block;

    margin-bottom:15px;

}

.timeline-content p{

    color:var(--gray);

    line-height:1.8;

}


/* ==========================================================
   TRUST SECTION
========================================================== */

.about-trust{

    background:#fff;

}

.trust-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.trust-image img{

    width:100%;

    border-radius:30px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.trust-content h2{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:25px;

}

.trust-content>p{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:35px;

}

.trust-list{

    display:grid;

    gap:20px;

}

.trust-list li{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.trust-list i{

    width:55px;

    height:55px;

    border-radius:16px;

    background:rgba(70,86,163,.10);

    color:var(--secondary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

}

.trust-list h4{

    color:var(--primary);

    margin-bottom:6px;

}

.trust-list p{

    color:var(--gray);

    line-height:1.7;

}



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

.about-cta{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
    135deg,
    var(--primary),
    #17335c
    );

    color:#fff;

    text-align:center;

}

.about-cta::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

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

    top:-180px;

    right:-120px;

}

.about-cta::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    bottom:-130px;

    left:-90px;

}

.about-cta .container{

    position:relative;

    z-index:2;

}

.about-cta h2{

    font-size:3.2rem;

    margin-bottom:20px;

}

.about-cta p{

    max-width:700px;

    margin:auto;

    margin-bottom:40px;

    line-height:1.9;

    opacity:.92;

}

.about-cta .hero-buttons{

    justify-content:center;

}

.about-cta .btn-secondary{

    border-color:#fff;

    color:#fff;

}

.about-cta .btn-secondary:hover{

    background:#fff;

    color:var(--primary);

}



/* ==========================================================
   FLOATING DECORATIONS
========================================================== */

.float-shape{

    position:absolute;

    border-radius:50%;

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

}

.shape-one{

    width:18px;

    height:18px;

    background:var(--secondary);

}

.shape-two{

    width:12px;

    height:12px;

    background:var(--accent);

}

.shape-three{

    width:26px;

    height:26px;

    background:rgba(70,86,163,.18);

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1100px){

.about-container,
.story-grid,
.trust-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.story-features{

grid-template-columns:1fr;

}

.mv-grid{

grid-template-columns:1fr;

}

.stats-grid{

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

}

.about-buttons{

justify-content:center;

}

.about-image{

max-width:520px;

margin:auto;

}

.timeline::before{

left:25px;

}

.timeline-item{

width:100%;

padding-left:75px;

padding-right:0;

left:0 !important;

text-align:left !important;

}

.timeline-dot{

left:14px !important;

right:auto !important;

}

}



@media(max-width:768px){

.about-hero{

padding:130px 0 90px;

}

.about-content h1{

font-size:2.8rem;

}

.story-content h2,
.trust-content h2{

font-size:2.3rem;

}

.about-cta h2{

font-size:2.4rem;

}

.stats-grid{

grid-template-columns:1fr 1fr;

}

.team-grid{

grid-template-columns:1fr;

}

.cert-grid{

grid-template-columns:1fr;

}

}



@media(max-width:576px){

.about-content h1{

font-size:2.2rem;

}

.about-buttons{

flex-direction:column;

}

.about-buttons a{

width:100%;

}

.stats-grid{

grid-template-columns:1fr;

}

.timeline{

margin-top:40px;

}

.timeline-item{

padding-left:60px;

padding-bottom:45px;

}

.timeline-content{

padding:24px;

}

.about-cta h2{

font-size:2rem;

}

.experience-card{

display:none;

}

}
.timeline-content .tm-process-icon{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: rgba(70, 86, 163, 0.1);
    color: var(--secondary);
    font-size: 1.2rem;
}

@keyframes float{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0px);
    }
}

.hero-graphic{
    height:500px;
    position:relative;
    background:linear-gradient(
        135deg,
        #061A2E,
        #3B4FA3
    );
    border-radius:35px;
    overflow:hidden;
}

.graphic-circle{
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-70px;
    right:-70px;
}

.graphic-circle.small{
    width:180px;
    height:180px;
    left:-50px;
    bottom:-50px;
    top:auto;
}

.graphic-card{
    position:absolute;
    background:#fff;
    padding:20px;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
     
}

.graphic-card i{
    color:#3B4FA3;
    font-size:2rem;
    margin-bottom:10px;
    
}

.card-1{
    top:80px;
    left:60px;
    animation:float 5s ease-in-out infinite;
}

.card-2{
    top:200px;
    right:60px;
    animation:float 6s ease-in-out infinite;
}

.card-3{
    bottom:70px;
    left:120px;
    animation:float 7s ease-in-out infinite;
}

.story-graphic{
    height:450px;
    background:linear-gradient(
        135deg,
        #edf3ff,
        #dce8ff
    );
    border-radius:30px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
}

.story-box-card{
    width:220px;
    background:#fff;
    padding:30px;
    border-radius:25px;
    text-align:center;
    box-shadow:var(--shadow);
}

.story-box-card i{
    font-size:2rem;
    color:var(--secondary);
    margin-bottom:15px;
}
.story-box-card:nth-child(1){
    animation:float 5s ease-in-out infinite;
}

.story-box-card:nth-child(2){
    animation:float 5s ease-in-out infinite 1.5s;
}
.cert-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.cert-card{
    background:#fff;
    padding:35px;
    border-radius:25px;
    text-align:center;
    box-shadow:var(--shadow);
    position:relative;
}
.cert-icon{

    width:90px;
    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

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

    background:rgba(59,79,163,.10);

    transition:.4s;
}

.cert-icon i{

    font-size:2.3rem;

    color:var(--secondary);
}

.cert-card:hover .cert-icon{

    transform:scale(1.1);

    background:var(--secondary);
}

.cert-card:hover .cert-icon i{

    color:#fff;
}

.cert-card:nth-child(1){
    animation:float 5s ease-in-out infinite;
}

.cert-card:nth-child(2){
    animation:float 6s ease-in-out infinite;
}

.cert-card:nth-child(3){
    animation:float 7s ease-in-out infinite;
}

.cert-card:nth-child(4){
    animation:float 5.5s ease-in-out infinite;
}
.trust-image{

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

.trust-graphic{

    position:relative;

    width:500px;
    height:500px;
}

.trust-center{

    position:absolute;

    top:50%;
    left:50%;

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

    width:240px;

    background:#fff;

    padding:35px;

    border-radius:30px;

    text-align:center;

    box-shadow:var(--shadow);
}

.center-circle{

    width:90px;
    height:90px;

    margin:0 auto 20px;

    border-radius:50%;

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

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

    color:#fff;

    font-size:2rem;
}

.trust-center h3{

    color:var(--primary);
    margin-bottom:10px;
}

.trust-center p{

    color:var(--gray);
    font-size:.95rem;
}

.trust-card{

    position:absolute;

    width:180px;

    background:#fff;

    padding:20px;

    border-radius:20px;

    text-align:center;

    box-shadow:var(--shadow);

    animation:float 6s ease-in-out infinite;
}

.trust-card i{

    font-size:1.8rem;

    color:var(--secondary);

    margin-bottom:12px;
}

.trust-card h4{

    color:var(--primary);

    margin-bottom:6px;

    font-size:1rem;
}

.trust-card span{

    color:var(--gray);

    font-size:.85rem;
}

.card-a{

    top:20px;
    left:0;

    animation-delay:0s;
}

.card-b{

    top:40px;
    right:0;

    animation-delay:1.5s;
}

.card-c{

    bottom:40px;
    left:50%;

    transform:translateX(-50%);

    animation-delay:3s;
}

@media(max-width:768px){

    .trust-graphic{

        width:100%;
        max-width:420px;
        height:450px;
    }

    .trust-card{

        width:150px;
    }

    .trust-center{

        width:200px;
    }
}