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

.about-hero{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    min-height:680px;
    padding:40px 0;
    background:#fff;
}

/*==========================================================
BACKGROUND
==========================================================*/

.hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at left center,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.92) 35%,
        rgba(255,255,255,.65) 58%,
        rgba(255,255,255,.18) 76%,
        transparent 100%);
}

.blur{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
}

.blur-1{
    width:280px;
    height:280px;
    background:rgba(37,99,235,.16);
    left:-80px;
    top:-70px;
}

.blur-2{
    width:340px;
    height:340px;
    background:rgba(96,165,250,.12);
    right:-90px;
    bottom:-90px;
}

.grid-pattern{
    position:absolute;
    inset:0;
    opacity:.025;
    background-image:
    linear-gradient(#2563eb 1px,transparent 1px),
    linear-gradient(90deg,#2563eb 1px,transparent 1px);
    background-size:50px 50px;
}

/*==========================================================
LAYOUT
==========================================================*/

.about-hero .container{
    position:relative;
    z-index:5;
    width:min(1350px,92%);
    margin:auto;
}

.hero-wrapper{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    align-items:center;
    gap:40px;
}

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

.hero-left{
    max-width:700px;
}

.hero-title{
    font-size:64px;
    font-weight:750;
    line-height:1.02;
    letter-spacing:-2.5px;
}

.hero-title span{
    background:linear-gradient(
        90deg,
        #2563eb,
        #60a5fa
    );

    -webkit-background-clip:text;
    color:transparent;
}

.hero-line{
    width:38px;
    height:4px;
    background:#2563eb;
    border-radius:20px;
    margin-bottom:18px;
}

.company-name{
    font-size:24px;
    color:#2563eb;
    margin-bottom:12px;
}

.hero-left p{
    font-size:17px;
    color:#5b6478;
    line-height:1.65;
    margin-bottom:12px;
}

.hero-buttons{
    display:flex;
    gap:14px;
    margin-top:25px;
}

/*==========================================================
BUTTONS
==========================================================*/

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:200px;
    height:50px;
    border-radius:12px;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease;
}

.btn-primary{
    background:#2563eb;
    color:#fff;
    box-shadow:0 10px 25px rgba(37,99,235,.25);
}

.btn-primary:hover{
    transform:translateY(-4px);

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

.btn-secondary{
    border:2px solid #2563eb;
    background:#fff;
    color:#2563eb;
}

.btn-secondary:hover{
    background:#2563eb;
    color:#fff;
}
/*==========================================================
RIGHT SIDE
==========================================================*/
.hero-right{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:650px;
}


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

.hero-image{
    position:relative;
    z-index:5;
}

.hero-image::before{
    content:"";
    position:absolute;

    width:420px;
    height:420px;

    background:
    radial-gradient(
        circle,
        rgba(37,99,235,.25),
        transparent 70%
    );

    top:50%;
    left:50%;

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

    z-index:-1;
}

.hero-image img{
    width:520px;
    max-width:100%;
    display:block;
    user-select:none;
    pointer-events:none;
}

/*==========================================================
CODE WINDOW
==========================================================*/

.code-window{
    position:absolute;
    top:18%;
    left:0;
    width:180px;
    padding:16px;
    border-radius:18px;
    background:rgba(255,255,255,.28);
    border:1px solid rgba(255,255,255,.55);
    backdrop-filter:blur(18px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    z-index:8;
}

.window-top{
    display:flex;
    gap:7px;
    margin-bottom:15px;
}

.window-top span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#fff;
}

/*==========================================================
FLOAT ANIMATION
==========================================================*/

@keyframes float{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}
/*==========================================================
BOTTOM STATS
==========================================================*/

.hero-stats{
    position:absolute;
    left:50%;
    bottom:15px;
    transform:translateX(-50%);

    width:110%;          /* Increase width */
    max-width:950px;    /* Prevent it from becoming too wide */

    padding:18px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.85),
        rgba(255,255,255,.55)
    );

    backdrop-filter:blur(25px);
    box-shadow:0 25px 70px rgba(15,23,42,.12);
    border-radius:24px;
    border:1px solid rgba(255,255,255,.65);
    z-index:20;
}

.stat-item{
    display:flex;
    align-items:center;
    gap:14px;
    flex:1;
}

.stat-icon{

    width:48px;
    height:48px;

    border-radius:16px;

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

    background:#eff6ff;

    color:#2563eb;

    font-size:20px;

    transition:.35s;

}


.stat-item:hover .stat-icon{

    transform:translateY(-5px);

    background:#2563eb;

    color:white;

}

.stat-item h3{

    font-size:18px;

    font-weight:750;

    color:#0f172a;

    line-height:1.2;

    margin-bottom:5px;

}

.stat-item span{

    font-size:12px;

    color:#64748b;

    line-height:1.4;

    max-width:130px;

}

.divider{
    width:1px;
    height:40px;
    background:#dbe5f3;
    margin:0 18px;
}

/*==========================================================
HOVER EFFECTS
==========================================================*/

.hero-image img{
    transition:.35s;
}

.hero-image:hover img{
    transform:translateY(-6px);
}

.code-window{
    transition:.35s;
}

.code-window:hover{
    transform:translateY(-5px);
}

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

@media (max-width:1200px){

    .hero-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .hero-left{
        max-width:100%;
        text-align:center;
    }

    .hero-line{
        margin:18px auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-right{
        min-height:520px;
    }

    .hero-image img{
        width:440px;
    }

    .code-window{
        left:40px;
    }

    .hero-stats{
        position:relative;
        left:auto;
        bottom:auto;
        transform:none;
        width:100%;
        margin-top:25px;
    }

}

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

@media (max-width:768px){

    .about-hero{
        min-height:auto;
        padding:70px 0;
    }

    .hero-title{
        font-size:38px;
    }

    .company-name{
        font-size:22px;
    }

    .hero-left p{
        font-size:15px;
        line-height:1.8;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

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

    .hero-right{
        min-height:380px;
    }

    .hero-image img{
        width:320px;
    }

    .floating-icon,
    .code-window{
        display:none;
    }

    .hero-stats{
        flex-direction:column;
        gap:20px;
        padding:20px;
        text-align:center;
    }

    .divider{
        display:none;
    }

    .stat-item{
        justify-content:center;
    }

}

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

@media (max-width:480px){

    .hero-title{
        font-size:32px;
    }

    .company-name{
        font-size:20px;
    }

    .hero-image img{
        width:280px;
    }

    .stat-item h3{
        font-size:24px;
    }

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

}









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

.about-info-section{
    position:relative;
    padding:80px 0;
    background:#f8fafc;
    overflow:hidden;
}

.about-info-section .container{
    width:min(1320px,92%);
    margin:auto;
}

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

.about-info-wrapper{

    display:grid;
    grid-template-columns:480px 1fr;
    gap:45px;

    border-radius:24px;

    padding:28px;

    background:transparent;
    box-shadow:none;

    align-items:center;
}

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

.about-info-image{

    position:relative;
    overflow:hidden;
    border-radius:20px;
    height:560px;
}

.about-info-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.about-info-image::after{

    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(15,23,42,.05),
        rgba(15,23,42,.35)
    );
}


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

.about-info-content{

    display:flex;
    flex-direction:column;
    justify-content:center;
}

/*==================================
TAG
==================================*/

.section-tag{

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

    margin-bottom:18px;
}

.section-tag span{

    color:#2563eb;
    font-weight:700;
    letter-spacing:.18em;
    font-size:.82rem;
}

.tag-line{

    width:65px;
    height:2px;
    background:#d1d5db;
}

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

.about-info-content h2{

    font-size:2.9rem;
    line-height:1.15;
    font-weight:800;

    color:#0f172a;

    margin-bottom:18px;
}

.about-info-content h2 span{

    color:#2563eb;
}

/*==================================
LINE
==================================*/

.heading-line{

    width:40px;
    height:4px;

    background:#2563eb;

    border-radius:50px;

    margin-bottom:26px;
}

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

.about-info-content p{

    color:#475569;

    font-size:1rem;

    line-height:1.75;

    margin-bottom:18px;
}


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

@media (max-width:1200px){

.story-card{

    grid-template-columns:400px 1fr;
    gap:35px;
}

.about-info-content h2{

    font-size:2.5rem;
}

}

@media (max-width:992px){

.story-card{

    grid-template-columns:1fr;
}

.about-info-image{

    min-height:460px;
}

.about-info-content{

    padding-top:10px;
}

}

@media (max-width:768px){

.story-card{

    padding:22px;
}

.about-info-content h2{

    font-size:2rem;
}

.about-info-image{

    min-height:360px;
}

}

@media (max-width:576px){

.about-info-content h2{

    font-size:1.75rem;
}

.about-info-content p{

    font-size:.95rem;
}


}








/*==================================================
MISSION • VISION • VALUES
==================================================*/

.purpose-section{
    position:relative;
    padding:80px 0;
    background:#f8fafc;
    overflow:hidden;
}

.purpose-section .container{
    width:min(1320px,92%);
    margin:auto;
}

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

.section-heading{
    text-align:center;
    margin-bottom:50px;
}

.section-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-bottom:24px;
}

.section-label span{
    width:85px;
    height:2px;
    background:#2563eb;
    opacity:.25;
    position:relative;
}

.section-label span::after{
    content:"";
    position:absolute;
    right:-6px;
    top:50%;
    transform:translateY(-50%);
    width:7px;
    height:7px;
    border-radius:50%;
    background:#2563eb;
}

.section-label p{
    margin:0;
    color:#2563eb;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:.25em;
}

.section-heading h2{
    font-size:3rem;
    letter-spacing:-1.5px;
    margin-bottom:12px;    
    line-height:1.15;
    font-weight:800;
    color:#0f172a;
}

.section-heading h2 span{

    background:linear-gradient(90deg,#2563eb,#3b82f6);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.heading-text{
    color:#64748b;
    font-size:1.1rem;
    margin:0;
}

/*==================================
GRID
==================================*/

.purpose-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

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

.purpose-card{

    position:relative;

    padding:36px 30px 36px;
    border-radius:22px;

    text-align:center;

    overflow:hidden;

    transition:.45s;

    background:
    linear-gradient(
    145deg,
    #ffffff,
    #f9fbff
    );

    border:1px solid rgba(226,232,240,.8);

    box-shadow:
    0 20px 60px rgba(15,23,42,.06);
}

.purpose-card:hover{
transform:translateY(-6px);

box-shadow:
0 30px 80px rgba(15,23,42,.12);
}

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

.purpose-icon{

    position:relative;

    width:90px;
    height:90px;
    margin-bottom:25px;
    margin:0 auto 24px;
}

.icon-ring{

    position:absolute;

    inset:0;

    border:2px dashed;

    border-radius:50%;

    opacity:.4;
}

.icon-ring::after{

    content:"";

    position:absolute;

    width:12px;
    height:12px;

    border-radius:50%;

    top:20px;
    right:20px;
}

.icon-circle{

    position:absolute;

    left:50%;
    top:50%;

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

    width:70px;
    height:70px;

    border-radius:50%;

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

    background:#fff;

    box-shadow:
    0 15px 40px rgba(37,99,235,.12),
    inset 0 0 20px rgba(255,255,255,.6);
}

.icon-circle i{

    font-size:30px;
}

/*==================================
MISSION
==================================*/

.mission .icon-ring{
    border-color:#3b82f6;
}



.mission .icon-circle{

    background:linear-gradient(#fff,#eef5ff);
}

.mission .icon-circle i{
    color:#2563eb;
}

.mission .title-line{
    background:#2563eb;
}

/*==================================
VISION
==================================*/

.vision .icon-ring{
    border-color:#22c55e;
}



.vision .icon-circle{

    background:linear-gradient(#fff,#effdf5);
}

.vision .icon-circle i{
    color:#16a34a;
}

.vision .title-line{
    background:#16a34a;
}

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

.values .icon-ring{
    border-color:#f59e0b;
}



.values .icon-circle{

    background:linear-gradient(#fff,#fff7eb);
}

.values .icon-circle i{
    color:#f59e0b;
}

.values .title-line{
    background:#f59e0b;
}

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

.purpose-card h3{

    font-size:1.6rem;
    margin-bottom:12px;

    color:#0f172a;
}

.title-line{

    height:4px;

    width:40px;
    margin:0 auto 22px;

    border-radius:20px;
}

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

.purpose-card p{

    margin:0;

    color:#475569;

    font-size:.98rem;
    line-height:1.75;
}

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

.values ul{

    list-style:none;

    margin:0;
    padding:0;

    text-align:left;
}

.values li:hover{

background:#fffbeb;

padding-left:10px;

}

.values li{

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

    color:#334155;
    transition:.3s;
    padding:12px 0;
    font-size:1rem;

    border-bottom:1px dashed #e5e7eb;
}

.values li:last-child{

    border:none;
}

.values li i{

    color:#f59e0b;

    font-size:20px;
}

/*==================================
BOTTOM WAVE
==================================*/

.card-wave{

    position:absolute;

    left:0;
    right:0;
    bottom:-2px;

    height:70px;

    opacity:.8;
}

.card-wave::before{

    content:"";

    position:absolute;

    left:-10%;
    width:120%;
    height:100%;

    border-radius:50% 50% 0 0;

    transform:rotate(-2deg);
}

.mission .card-wave::before{

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

.vision .card-wave::before{

    background:rgba(34,197,94,.08);
}

.values .card-wave::before{

    background:rgba(245,158,11,.08);
}

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

@media(max-width:1200px){

.purpose-grid{

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

.values{

    grid-column:span 2;
}

.section-heading h2{

    font-size:3.3rem;
}

}

@media(max-width:900px){

.purpose-grid{

    grid-template-columns:1fr;
}

.values{

    grid-column:auto;
}

.section-heading h2{

    font-size:2.8rem;
}

.heading-text{

    font-size:1.1rem;
}

.purpose-card{

    padding:45px 30px 50px;
}

}

@media(max-width:600px){

.purpose-section{

    padding:80px 0;
}

.section-heading{

    margin-bottom:50px;
}

.section-heading h2{

    font-size:2.2rem;
}

.section-label span{

    width:45px;
}

.purpose-icon{

    width:130px;
    height:130px;
}

.icon-circle{

    width:100px;
    height:100px;
}

.icon-circle i{

    font-size:42px;
}

.purpose-card h3{

    font-size:1.6rem;
}

.purpose-card{

    padding:35px 22px 40px;
}

.values li{

    font-size:1rem;
    padding:14px 0;
}

}








/*==================================================
WHAT WE DO
PART 1
==================================================*/

.what-we-do{
    position:relative;
    padding:80px 0;
    background:
        radial-gradient(circle at top left,rgba(37,99,235,.06),transparent 35%),
        #f8fafc;
    overflow:hidden;
}

.what-we-do .container{
    width:min(1320px,92%);
    margin:auto;
}

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

.section-header{
    max-width:760px;
    margin:0 auto 55px;
    text-align:center;
}

.section-header h2{
    font-size:3.1rem;
    letter-spacing:-1px;
    font-weight:800;
    line-height:1.25;
    color:#0f172a;
    padding-bottom:16px;
}

.section-header h2 span{
    display:block;
    color:#2563eb;
}

.section-header p{
    font-size:1.02rem;
    line-height:1.75;
    color:#64748b;
}

/*==================================
GRID
==================================*/

.services-grid{

    display:grid;
    margin-top: 20px;

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

    gap:22px;

    align-items:stretch;
}

/*==================================
CARD
==================================*/
.service-box{

    position:relative;

    display:flex;
    flex-direction:column;

    padding:32px;

    background:
    linear-gradient(
        145deg,
        #ffffff,
        #fdfefe
    );

    border-radius:26px;

    border:1px solid rgba(226,232,240,.8);

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

    transition:
    transform .45s ease,
    box-shadow .45s ease;

    overflow:hidden;
}


.service-box:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 35px 80px rgba(15,23,42,.12);

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

.service-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;
}

.service-icon{

    width:64px;
    height:64px;

    border-radius:18px;

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

    font-size:26px;

    transition:.35s;
}

.service-box:hover .service-icon{

    transform:
    translateY(-6px)
    rotate(-8deg)
    scale(1.08);

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

}

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

.service-box h3{

    font-size:1.35rem;

    color:#0f172a;

    margin-bottom:12px;

    line-height:1.3;
}

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

.service-box>p{

    color:#64748b;

    font-size:.94rem;

    line-height:1.65;

    margin-bottom:18px;
}

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

.service-box ul{

    list-style:none;

    margin:0;

    padding:0;

    flex:1;
}

.service-box li{

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px 0;

    font-size:.92rem;

    color:#334155;
}

.service-box li i{

    font-size:12px;
}

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

.service-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    text-decoration:none;

    font-size:.92rem;

    font-weight:700;

    transition:.3s;
}

.service-btn i{

    transition:.3s;
}

.service-btn:hover i{

    transform:translateX(5px);
}
/*==================================================
WHAT WE DO
PART 2
==================================================*/

/*==================================
COMMON TOP BORDER
==================================*/

.service-box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    transition:.35s;
}

/*==================================
DECORATIVE CIRCLE
==================================*/

.service-box::after{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
    right:-80px;
    top:-80px;
    opacity:.05;
    transition:.4s;
}

.service-box:hover::after{
    transform:scale(1.2);
}

/*==================================================
BLUE
==================================================*/

.service-box.blue::before{
    background:#2563eb;
}

.service-box.blue::after{
    background:#2563eb;
}

.service-box.blue .service-icon{
    background:#eff6ff;
    color:#2563eb;
}

.service-box.blue li i,
.service-box.blue .service-btn{
    color:#2563eb;
}

/*==================================================
GREEN
==================================================*/

.service-box.green::before{
    background:#22c55e;
}

.service-box.green::after{
    background:#22c55e;
}

.service-box.green .service-icon{
    background:#ecfdf5;
    color:#16a34a;
}

.service-box.green li i,
.service-box.green .service-btn{
    color:#16a34a;
}

/*==================================================
PURPLE
==================================================*/

.service-box.purple::before{
    background:#7c3aed;
}

.service-box.purple::after{
    background:#7c3aed;
}

.service-box.purple .service-icon{
    background:#f5f3ff;
    color:#7c3aed;
}

.service-box.purple li i,
.service-box.purple .service-btn{
    color:#7c3aed;
}

/*==================================================
ORANGE
==================================================*/

.service-box.orange::before{
    background:#f59e0b;
}

.service-box.orange::after{
    background:#f59e0b;
}

.service-box.orange .service-icon{
    background:#fff7ed;
    color:#f59e0b;
}

.service-box.orange li i,
.service-box.orange .service-btn{
    color:#f59e0b;
}

/*==================================
HOVER EFFECTS
==================================*/

.service-box:hover{
    border-color:transparent;
}

.service-box:hover h3{
    color:#111827;
}

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

@media (max-width:1200px){

    .section-header h2{
        font-size:2.8rem;
    }

    .services-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }
}

@media (max-width:992px){

    .what-we-do{
        padding:70px 0;
    }

    .section-header{
        margin-bottom:45px;
    }

    .section-header h2{
        font-size:2.4rem;
    }

    .service-box{
        padding:24px;
    }
}

@media (max-width:768px){

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

    .section-header h2{
        font-size:2rem;
    }

    .section-header p{
        font-size:.95rem;
    }

    .service-box{
        padding:22px;
        border-radius:18px;
    }

    .service-icon{
        width:58px;
        height:58px;
        border-radius:16px;
        font-size:22px;
    }

    .service-box h3{
        font-size:1.25rem;
    }

    .service-box > p{
        font-size:.9rem;
        margin-bottom:16px;
    }

    .service-box li{
        padding:7px 0;
        font-size:.88rem;
    }

    .service-btn{
        margin-top:16px;
        font-size:.9rem;
    }
}

@media (max-width:576px){

    .what-we-do{
        padding:60px 0;
    }

    .section-header{
        margin-bottom:36px;
    }
    .section-header h2{
        font-size:1.75rem;
    }

    .service-box{
        padding:20px;
    }

    .service-icon{
        width:54px;
        height:54px;
        font-size:20px;
    }

    .service-box h3{
        font-size:1.15rem;
    }

    .service-box li{
        font-size:.85rem;
    }

    .service-btn{
        font-size:.85rem;
    }
}









/*==================================================
WHY CHOOSE US
PART 1
==================================================*/

.why-choose{
    position:relative;
    padding:70px 0;
    background:#f8fafc;
    overflow:hidden;
}

.why-choose .container{
    width:min(1320px,92%);
    margin:auto;
}

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

.why-choose .section-header{
    max-width:760px;
    margin:0 auto 40px;
    text-align:center;
}

.why-choose .section-header h2{
    font-size:3rem;
    font-weight:800;
    color:#0f172a;
    line-height:1.15;
    margin-bottom:16px;
}

.why-choose .section-header h2 span{
    display:block;
    color:#2563eb;
}

.why-choose .section-header p{
    color:#64748b;
    font-size:1.05rem;
    line-height:1.75;
}

/*==================================
GRID
==================================*/

.why-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);
    row-gap:35px;
    gap:26px;
}

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

.why-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    padding:32px;
    min-height:430px;

    border:1px solid #e5e7eb;

    overflow:hidden;

    transition:.35s;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);
}

.why-card:hover{

    transform:
    translateY(-10px)
    scale(1.015);

    box-shadow:
        0 22px 45px rgba(15,23,42,.10);
}

/*==================================
TOP
==================================*/

.card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;
}

.icon-box{

    width:64px;
    height:64px;

    border-radius:18px;

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

    font-size:24px;

    transition:.35s;
}

.why-card:hover .icon-box{

    transform:rotate(-8deg) scale(1.08);
}

.card-number{

    font-size:2.2rem;
    font-weight:900;
    color:#e5edf8;
    letter-spacing:-1px;
}

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

.why-card h3{

    font-size:1.35rem;

    color:#0f172a;

    line-height:1.35;

    margin-bottom:14px;
}

.why-card p{

    color:#64748b;

    font-size:.95rem;

    line-height:1.7;

    margin-bottom:18px;
}

.card-divider{

    width:45px;
    height:4px;

    border-radius:20px;

    margin-bottom:18px;
}

/*==================================
FEATURE LIST
==================================*/

.feature-list{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:24px;
}

.feature-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:#334155;

    font-size:.92rem;
}

.feature-item i{

    width:20px;

    text-align:center;
}

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

.learn-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    font-weight:700;

    font-size:.92rem;

    transition:.3s;
}

.learn-btn i{

    transition:.3s;
}

.learn-btn:hover i{

    transform:translateX(5px);
}
/*==================================================
WHY CHOOSE US
PART 2
==================================================*/

/*==================================
TOP BORDER
==================================*/

.why-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    transition:.35s;
}

/*==================================
BACKGROUND DECORATION
==================================*/

.why-card::after{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
    right:-70px;
    top:-70px;
    opacity:.05;
    transition:.35s;
}

.why-card:hover::after{
    transform:scale(1.2);
}

/*==================================================
BLUE
==================================================*/

.why-card.blue::before,
.why-card.blue .card-divider{
    background:#2563eb;
}

.why-card.blue::after{
    background:#2563eb;
}

.why-card.blue .icon-box{
    background:#eff6ff;
    color:#2563eb;
}

.why-card.blue .feature-item i,
.why-card.blue .learn-btn{
    color:#2563eb;
}

/*==================================================
GREEN
==================================================*/

.why-card.green::before,
.why-card.green .card-divider{
    background:#22c55e;
}

.why-card.green::after{
    background:#22c55e;
}

.why-card.green .icon-box{
    background:#ecfdf5;
    color:#16a34a;
}

.why-card.green .feature-item i,
.why-card.green .learn-btn{
    color:#16a34a;
}

/*==================================================
PURPLE
==================================================*/

.why-card.purple::before,
.why-card.purple .card-divider{
    background:#7c3aed;
}

.why-card.purple::after{
    background:#7c3aed;
}

.why-card.purple .icon-box{
    background:#f5f3ff;
    color:#7c3aed;
}

.why-card.purple .feature-item i,
.why-card.purple .learn-btn{
    color:#7c3aed;
}

/*==================================================
ORANGE
==================================================*/

.why-card.orange::before,
.why-card.orange .card-divider{
    background:#f59e0b;
}

.why-card.orange::after{
    background:#f59e0b;
}

.why-card.orange .icon-box{
    background:#fff7ed;
    color:#f59e0b;
}

.why-card.orange .feature-item i,
.why-card.orange .learn-btn{
    color:#f59e0b;
}

/*==================================================
PINK
==================================================*/

.why-card.pink::before,
.why-card.pink .card-divider{
    background:#ec4899;
}

.why-card.pink::after{
    background:#ec4899;
}

.why-card.pink .icon-box{
    background:#fdf2f8;
    color:#ec4899;
}

.why-card.pink .feature-item i,
.why-card.pink .learn-btn{
    color:#ec4899;
}

/*==================================================
CYAN
==================================================*/

.why-card.cyan::before,
.why-card.cyan .card-divider{
    background:#06b6d4;
}

.why-card.cyan::after{
    background:#06b6d4;
}

.why-card.cyan .icon-box{
    background:#ecfeff;
    color:#06b6d4;
}

.why-card.cyan .feature-item i,
.why-card.cyan .learn-btn{
    color:#06b6d4;
}

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

.why-bottom{
    margin-top:55px;
    padding:24px 30px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    box-shadow:0 12px 35px rgba(15,23,42,.05);
}

.bottom-left{
    display:flex;
    align-items:center;
    gap:18px;
}

.trophy-box{
    width:68px;
    height:68px;
    border-radius:18px;
    background:#eff6ff;
    color:#2563eb;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:26px;
}

.bottom-left h4{
    margin:0 0 6px;
    font-size:1.35rem;
    color:#0f172a;
}

.bottom-left p{
    margin:0;
    color:#64748b;
    line-height:1.7;
}

.bottom-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    background:#2563eb;
    color:#fff;
    text-decoration:none;
    border-radius:999px;
    font-weight:700;
    transition:.3s;
}

.bottom-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(37,99,235,.25);
}

.bottom-btn i{
    transition:.3s;
}

.bottom-btn:hover i{
    transform:translateX(5px);
}

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

.why-card:hover{
    border-color:transparent;
}

.why-card:hover .card-number{
    color:#cbd5e1;
}

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

@media (max-width:1200px){

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

    .why-choose .section-header h2{
        font-size:2.6rem;
    }
}

@media (max-width:992px){

    .why-choose{
        padding:75px 0;
    }

    .why-grid{
        gap:20px;
    }

    .why-bottom{
        flex-direction:column;
        text-align:center;
    }

    .bottom-left{
        flex-direction:column;
    }
}

@media (max-width:768px){

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

    .why-choose .section-header h2{
        font-size:2.1rem;
    }

    .why-card{
        padding:22px;
    }

    .icon-box{
        width:56px;
        height:56px;
        font-size:22px;
    }

    .card-number{
        font-size:1.6rem;
    }

    .why-bottom{
        padding:22px;
    }
}

@media (max-width:576px){

    .why-choose{
        padding:60px 0;
    }

    .why-choose .section-header{
        margin-bottom:40px;
    }

    .why-choose .section-header h2{
        font-size:1.8rem;
    }

    .why-card{
        padding:20px;
        border-radius:18px;
    }

    .bottom-btn{
        width:100%;
        justify-content:center;
    }
}









/*==================================================
OUR PROCESS
PART 1
==================================================*/

.process-section{
    position:relative;
    padding:90px 0;
    background:#f8fafc;
    overflow:hidden;
}

.process-section .container{
    width:min(1320px,92%);
    margin:auto;
}

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

.process-section .section-header{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.process-section .section-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:50px;
    background:#eff6ff;
    color:#2563eb;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.15em;
    margin-bottom:18px;
}

.process-section .section-header h2{
    font-size:3rem;
    font-weight:800;
    color:#0f172a;
    line-height:1.15;
    margin-bottom:16px;
}

.process-section .section-header h2 span{
    color:#2563eb;
}

.process-section .section-header p{
    color:#64748b;
    font-size:1.05rem;
    line-height:1.8;
}

/*==================================
PROCESS GRID
==================================*/
/*==================================
PROCESS GRID
==================================*/

.process-grid{

    display:grid;

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

    gap:18px;

    position:relative;

    align-items:stretch;

}


/* connector line */

.process-grid::before{

    content:"";

    position:absolute;

    top:75px;

    left:8%;

    right:8%;

    height:2px;

    background:#e2e8f0;

    z-index:0;

}


/*==================================
CONNECTOR
==================================*/

.connector{

    display:none;

}



/* alternating cards slightly down */

.process-card:nth-child(even){

    transform:translateY(35px);

}


.process-card:nth-child(even):hover{

    transform:translateY(25px);

}

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

.process-card{
    position:relative;
    background:#fff;
    border:1px solid #e5e7eb;
    text-align:center;
    overflow:hidden;
    transition:.35s;
    min-height:360px;

    padding:28px 20px;

    z-index:1;

    border-radius:24px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);
}



.process-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 22px 45px rgba(15,23,42,.10);
}

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

.step-number{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#e2e8f0;
    color:#fff;
    font-size:.95rem;
    font-weight:700;

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

    margin:0 auto 18px;
}

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

.process-icon{
    width:72px;
    height:72px;
    border-radius:20px;

    margin:0 auto 20px;

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

    font-size:28px;

    transition:.35s;
}

.process-card:hover .process-icon{
    transform:rotate(-8deg) scale(1.08);
}

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

.process-card h3{
    color:#0f172a;
    font-size:1.45rem;
    margin-bottom:16px;
}

.process-card p{
    color:#64748b;
    max-width:220px;
    margin:auto;
    font-size:1rem;
    line-height:1.8;
}

/*==================================
DECORATION
==================================*/

.process-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
}

.process-card::after{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
    top:-70px;
    right:-70px;
    opacity:.05;
    transition:.35s;
}

.process-card:hover::after{
    transform:scale(1.2);
}
/*==================================================
OUR PROCESS
PART 2
==================================================*/

/*==================================
BLUE
==================================*/

.process-card.blue::before{
    background:#2563eb;
}

.process-card.blue::after{
    background:#2563eb;
}

.process-card.blue .step-number{
    background:#2563eb;
}

.process-card.blue .process-icon{
    background:#eff6ff;
    color:#2563eb;
}

/*==================================
GREEN
==================================*/

.process-card.green::before{
    background:#22c55e;
}

.process-card.green::after{
    background:#22c55e;
}

.process-card.green .step-number{
    background:#22c55e;
}

.process-card.green .process-icon{
    background:#ecfdf5;
    color:#16a34a;
}

/*==================================
PURPLE
==================================*/

.process-card.purple::before{
    background:#7c3aed;
}

.process-card.purple::after{
    background:#7c3aed;
}

.process-card.purple .step-number{
    background:#7c3aed;
}

.process-card.purple .process-icon{
    background:#f5f3ff;
    color:#7c3aed;
}

/*==================================
ORANGE
==================================*/

.process-card.orange::before{
    background:#f59e0b;
}

.process-card.orange::after{
    background:#f59e0b;
}

.process-card.orange .step-number{
    background:#f59e0b;
}

.process-card.orange .process-icon{
    background:#fff7ed;
    color:#f59e0b;
}

/*==================================
PINK
==================================*/

.process-card.pink::before{
    background:#ec4899;
}

.process-card.pink::after{
    background:#ec4899;
}

.process-card.pink .step-number{
    background:#ec4899;
}

.process-card.pink .process-icon{
    background:#fdf2f8;
    color:#ec4899;
}

/*==================================
CYAN
==================================*/

.process-card.cyan::before{
    background:#06b6d4;
}

.process-card.cyan::after{
    background:#06b6d4;
}

.process-card.cyan .step-number{
    background:#06b6d4;
}

.process-card.cyan .process-icon{
    background:#ecfeff;
    color:#06b6d4;
}


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

@media (max-width:1400px){

    .process-grid{

        grid-template-columns:repeat(3,1fr);
    }
        .process-card:nth-child(even){
        transform:none;
    }

    .connector{
        display:none;
    }
}

@media (max-width:992px){

    .process-section{
        padding:75px 0;
    }

    .process-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }

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

    .process-section .section-header h2{
        font-size:2.5rem;
    }
}

@media (max-width:768px){

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

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

    .process-card{
        min-height:auto;
        padding:24px;
    }

    .process-section .section-header{
        margin-bottom:50px;
    }

    .process-section .section-header h2{
        font-size:2rem;
    }

    .process-icon{
        width:64px;
        height:64px;
        font-size:24px;
    }

    .stat-box{
        padding:20px;
    }
}

@media (max-width:576px){

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

    .process-section .section-header h2{
        font-size:1.75rem;
    }

    .process-section .section-header p{
        font-size:.95rem;
    }

    .process-card{
        padding:20px;
        border-radius:18px;
    }

    .process-icon{
        width:58px;
        height:58px;
        font-size:22px;
    }

    .step-number{
        width:40px;
        height:40px;
        font-size:.85rem;
    }

    .process-card h3{
        font-size:1.2rem;
    }

    .process-card p{
        font-size:.9rem;
    }

    .stat-box{
        flex-direction:column;
        text-align:center;
    }

    .stat-content h3{
        font-size:1.8rem;
    }
}











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

.technology-section{

    position:relative;

    padding:90px 0;

    background:#f8fbff;

    overflow:hidden;

}



/* Background glow */

.technology-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-220px;

    right:-150px;

    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(37,99,235,.12),
        transparent 70%
    );

}



.technology-section::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    bottom:-180px;

    left:-150px;

    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(6,182,212,.10),
        transparent 70%
    );

}




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


.section-header{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:800px;

    margin:auto;

}



.section-header h2 span{


    background:

    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );


    -webkit-background-clip:text;


    color:transparent;


}



.section-header p{


    margin-top:22px;


    color:#64748b;


    font-size:18px;


    line-height:1.7;


}





/*==========================================================
 CAROUSEL WRAPPER
==========================================================*/


.technology-wrapper{


    position:relative;

    z-index:2;

    margin-top:45px;

    overflow:hidden;

    width:100%;

    padding:30px 0;


}




/*==========================================================
 TRACK
==========================================================*/


.technology-track{


    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    animation:techScroll 35s linear infinite;

    padding-left:40px;


}



.technology-wrapper:hover .technology-track{


    animation-play-state:paused;


}





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


.technology-card{


    position:relative;
    width:210px;

    height:180px;

    flex-shrink:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;
    background:white;
    border-radius:22px;
    border:
    1px solid #e2e8f0;
    box-shadow:
    0 12px 35px rgba(15,23,42,.06);
    transition:.35s ease;
    overflow:hidden;


}




/* top accent */


.technology-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:4px;


    background:

    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );


    transform:scaleX(0);


    transform-origin:left;


    transition:.35s;


}




.technology-card:hover::before{


    transform:scaleX(1);


}



.technology-card:hover{


    transform:translateY(-7px);


    border-color:

    rgba(37,99,235,.3);


    box-shadow:


    0 25px 50px rgba(37,99,235,.14);


}





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


.tech-logo{

    width:75px;
    height:75px;
    border-radius:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#f8fafc;
    transition:.35s;
}

.tech-logo i{

    font-size:3rem;
}

.technology-card:hover .tech-logo{
    transform:scale(1.1);
}

.technology-card:nth-child(3n){

    transform:translateY(-8px);

}

.technology-card:nth-child(3n):hover{

    transform:translateY(-15px);

}



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


.technology-card h3{


    margin:0;


    font-size:20px;


    font-weight:750;


    color:#0f172a;


}



.technology-card span{


    font-size:13px;


    color:#64748b;


    font-weight:600;


}




/*==========================================================
 COLORS
==========================================================*/


.html i{
    color:#e34f26;
}

.css i{
    color:#1572b6;
}

.javascript i{
    color:#f7df1e;
}

.bootstrap i{
    color:#7952b3;
}

.react i{
    color:#61dafb;
}

.vue i{
    color:#42b883;
}

.php i{
    color:#777bb4;
}

.laravel i{
    color:#ff2d20;
}

.python i{
    color:#3776ab;
}

.node i{
    color:#339933;
}

.database i{
    color:#00758f;
}

.git i{
    color:#f05032;
}





/*==========================================================
 FADE SIDES
==========================================================*/


.technology-wrapper::before,
.technology-wrapper::after{


    content:"";


    position:absolute;


    top:0;


    height:100%;


    width:70px;


    z-index:5;


    pointer-events:none;


}



.technology-wrapper::before{


    left:0;


    background:

    linear-gradient(
        90deg,
        #f8fbff,
        transparent
    );


}



.technology-wrapper::after{


    right:0;


    background:

    linear-gradient(
        270deg,
        #f8fbff,
        transparent
    );


}





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


@keyframes techScroll{


    from{

        transform:translateX(0);

    }


    to{

        transform:translateX(-50%);

    }


}





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


@media(max-width:992px){


.section-header h2{

    font-size:45px;

}


.technology-card{

    width:160px;

    height:150px;

}


}



@media(max-width:600px){


.section-header h2{

    font-size:36px;

}


.technology-card{

    width:140px;

    height:140px;

}


.tech-logo{

    width:55px;

    height:55px;

}


.tech-logo i{

    font-size:2rem;

}


}













/*==========================================================
INDUSTRIES WE SERVE
==========================================================*/

.industries-section{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}



/*==========================================================
BACKGROUND EFFECT
==========================================================*/

.industries-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-160px;

    right:-140px;


    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(37,99,235,.10),
        transparent 70%
    );

}



.industries-section::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    bottom:-150px;

    left:-120px;


    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(6,182,212,.08),
        transparent 70%
    );

}



/*==========================================================
INDUSTRY GRID
==========================================================*/

.industry-grid{

    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin-top:60px;

}



/*==========================================================
INDUSTRY CARD
==========================================================*/

.industry-card{

position:relative;

background:#fff;

border:1px solid #e5e7eb;

border-radius:24px;

padding:35px 28px;

text-align:center;

min-height:280px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

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

transition:.35s ease;

overflow:hidden;

}



.industry-card:hover{

    border-color:rgba(37,99,235,.40);
    transform:translateY(-10px);
    box-shadow:
    0 30px 60px rgba(37,99,235,.15);
}

.industry-card::after{

content:"";

position:absolute;

width:120px;

height:120px;

border-radius:50%;

right:-60px;

top:-60px;

background:#2563eb;

opacity:.04;

transition:.4s;

}


.industry-card:hover::after{

transform:scale(1.4);

}



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

.industry-icon{


    width:75px;

    height:75px;

    border-radius:22px;

    background:#eff6ff;

    font-size:1.9rem;

    margin-bottom:25px;

    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    transition:.35s;


}



.industry-card:hover 
.industry-icon{


    background:var(--primary);


    color:#fff;


    transform:scale(1.08);


}



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

.industry-card h3{


    font-size:1.15rem;


    font-weight:700;


    color:var(--dark);


    margin-bottom:12px;


    line-height:1.4;


}



.industry-card p{


    color:var(--text);


    font-size:.92rem;


    line-height:1.7;


    margin:0;


}
/*==========================================================
INDUSTRIES WE SERVE
PART 2
==========================================================*/


/*==========================================================
CARD TOP ACCENT
==========================================================*/

.industry-card{

    overflow:hidden;

}


.industry-card::before{

    content:"";


    position:absolute;


    top:0;

    left:0;


    width:100%;


    height:3px;



    background:

    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );



    transform:scaleX(0);


    transform-origin:left;


    transition:.35s;


}



.industry-card:hover::before{

    transform:scaleX(1);

}



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

.industry-icon{

    position:relative;

    overflow:hidden;

}



.industry-icon::after{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:70%;


    height:100%;



    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );


    transform:skewX(-20deg);



    transition:.6s;


}



.industry-card:hover 
.industry-icon::after{


    left:140%;


}



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

.industry-card:hover h3{

    color:var(--primary);

}



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

@media(max-width:1200px){


    .industry-grid{


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


        gap:25px;


    }



}



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

@media(max-width:768px){


    .industries-section{


        padding:90px 0;


    }



    .industry-grid{


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


        gap:20px;


        margin-top:50px;


    }



    .industry-card{


        padding:28px 18px;


        min-height:240px;


    }



    .industry-icon{


        width:60px;


        height:60px;


        font-size:1.45rem;


    }



    .industry-card h3{


        font-size:1.05rem;


    }



    .industry-card p{


        font-size:.88rem;


    }


}



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

@media(max-width:480px){


    .industry-grid{


        grid-template-columns:1fr;


    }



    .industry-card{


        min-height:auto;


    }


}



/*==========================================================
REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){


    .industry-card,
    .industry-icon{


        transition:none;


    }


}
.industry-show-btn{
    display:flex;
    justify-content:flex-end;
    margin-top:25px;
}

.btn-show-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0;
    border:none;
    background:transparent;
    color:#2563eb;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.btn-show-more:hover{
    color:#1d4ed8;
}

.btn-show-more i{
    font-size:13px;
    transition:.3s;
}

.btn-show-more.active i{
    transform:rotate(180deg);
}
.industry-hidden{
    display:none;
}

.industry-hidden.show{
    display:flex;
}












/*==========================================================
OUR PROMISE + CTA SECTION
==========================================================*/

.growth-cta{

    position:relative;

    padding:100px 0;

    overflow:hidden;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

}



/*==========================================================
BACKGROUND GLOW
==========================================================*/

.cta-glow{

    position:absolute;


    width:500px;

    height:500px;


    top:-180px;

    right:-150px;


    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(255,255,255,.18),
        transparent 70%
    );


}



.growth-cta::before{


    content:"";


    position:absolute;


    width:400px;


    height:400px;


    bottom:-200px;


    left:-150px;



    border-radius:50%;



    background:

    radial-gradient(
        circle,
        rgba(255,255,255,.12),
        transparent 70%
    );


}



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

.cta-wrapper{


    position:relative;


    z-index:2;



    display:flex;


    align-items:center;


    justify-content:space-between;



    gap:60px;



}



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

.cta-content{


    max-width:650px;


}



.cta-badge{


    display:inline-flex;


    align-items:center;


    gap:10px;



    padding:8px 18px;


    border-radius:50px;


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



    color:#fff;


    font-size:.9rem;


    font-weight:600;


    margin-bottom:25px;


}



.cta-content h2{


    color:#fff;


    font-size:3rem;


    line-height:1.2;


    font-weight:800;


    margin-bottom:25px;


}



.cta-content h2 span{


    color:#bfdbfe;


}



.cta-content p{


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


    font-size:1.05rem;


    line-height:1.8;


    margin-bottom:15px;


}



/*==========================================================
BUTTONS
==========================================================*/

.cta-buttons{


    display:flex;


    gap:18px;


    margin-top:35px;


}



.cta-buttons a{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:10px;



    padding:15px 30px;


    border-radius:12px;


    text-decoration:none;


    font-weight:700;


    transition:.35s;


}



/* Primary Button */

.btn-primary{


    background:#fff;


    color:#2563eb;


}



.btn-primary:hover{


    transform:translateY(-4px);


    box-shadow:

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


}



/* Outline Button */

.btn-outline{


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


    color:#fff;


    background:transparent;


}



.btn-outline:hover{


    background:#fff;


    color:#2563eb;


    transform:translateY(-4px);


}
/*==========================================================
CTA VISUAL AREA
==========================================================*/

.cta-visual{

    position:relative;

    width:380px;

    height:380px;

    display:flex;

    align-items:center;

    justify-content:center;

}



/*==========================================================
MAIN CIRCLE
==========================================================*/

.cta-circle{


    width:170px;

    height:170px;


    display:flex;

    align-items:center;

    justify-content:center;



    border-radius:50%;



    background:

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



    backdrop-filter:blur(12px);



    border:

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



    color:#fff;


    font-size:4rem;



    box-shadow:


    0 25px 60px rgba(0,0,0,.15);



    animation:

    rocketFloat 4s ease-in-out infinite;


}



@keyframes rocketFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }


}



/*==========================================================
FLOATING CARDS
==========================================================*/

.cta-card{


    position:absolute;



    display:flex;


    align-items:center;


    gap:12px;



    padding:14px 20px;


    border-radius:14px;



    background:#fff;



    color:var(--dark);



    font-size:.95rem;



    font-weight:700;



    box-shadow:


    0 15px 40px rgba(0,0,0,.15);



}



.cta-card i{


    width:35px;


    height:35px;


    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50%;



    background:var(--primary-light);



    color:var(--primary);


}



/* Card Positions */

.card-one{


    top:55px;


    right:-10px;



    animation:

    cardFloat 5s ease-in-out infinite;


}



.card-two{


    bottom:60px;


    left:-20px;



    animation:

    cardFloat 5s ease-in-out infinite;


    animation-delay:1.5s;


}



@keyframes cardFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-10px);

    }


}



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

@media(max-width:1000px){


    .cta-wrapper{


        flex-direction:column;


        text-align:center;


        gap:50px;


    }



    .cta-content{


        max-width:750px;


    }



    .cta-buttons{


        justify-content:center;


    }



    .cta-visual{


        width:330px;


        height:330px;


    }



}



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

@media(max-width:768px){


    .growth-cta{


        padding:80px 0;


    }



    .cta-content h2{


        font-size:2.2rem;


    }



    .cta-content p{


        font-size:.95rem;


    }



    .cta-buttons{


        flex-direction:column;


        width:100%;


    }



    .cta-buttons a{


        width:100%;


    }



    .cta-visual{


        width:280px;


        height:280px;


    }



    .cta-circle{


        width:130px;


        height:130px;


        font-size:3rem;


    }



    .cta-card{


        font-size:.8rem;


        padding:10px 14px;


    }



    .card-one{


        right:-35px;


        top:35px;


    }



    .card-two{


        left:-35px;


        bottom:35px;


    }



}



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

@media(max-width:480px){


    .cta-content h2{


        font-size:1.8rem;


    }



    .cta-visual{


        transform:scale(.85);


        margin:-20px 0;


    }


}



/*==========================================================
REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){


    .cta-circle,
    .cta-card{


        animation:none;


    }


}