/*=========================================================
                    TRAVIK TECH
                PREMIUM STYLESHEET
                    VERSION 3.0
=========================================================*/


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

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


/*=========================================================
                    CSS VARIABLES
=========================================================*/

:root{

    --primary:#7c3aed;
    --primary-light:#a855f7;
    --primary-dark:#5b21b6;

    --black:#0f172a;
    --white:#ffffff;

    --surface:#f8fafc;
    --surface-2:#ffffff;

    --text:#111827;
    --text-light:#6b7280;

    --border:#e5e7eb;

    --success:#22c55e;
    --danger:#ef4444;

    --radius:22px;

    --transition:.35s ease;

    --shadow-sm:
    0 10px 30px rgba(15,23,42,.05);

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

    --shadow-purple:
    0 25px 70px rgba(124,58,237,.18);

}


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

    background:

radial-gradient(circle at left center,
rgba(124,58,237,.04),
transparent 35%),

radial-gradient(circle at right center,
rgba(168,85,247,.03),
transparent 45%),

linear-gradient(
rgba(124,58,237,.04) 1px,
transparent 1px),

linear-gradient(
90deg,
rgba(124,58,237,.04) 1px,
transparent 1px),

#f8f5ff;

    background-size:

    auto,
    auto,
    70px 70px,
    70px 70px,
    auto;

}

img{

    display:block;
    max-width:100%;

}

a{

    color:inherit;
    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    border:none;
    outline:none;
    cursor:pointer;
    background:none;
    font-family:inherit;

}

input,
textarea,
select{

    font-family:inherit;
    outline:none;

}

textarea{

    resize:vertical;

}


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

.container{

    width:min(1220px,92%);
    margin:auto;

}

.section{

    padding:120px 0;

}

.section-head{

    max-width:760px;
    margin:0 auto 70px;
    text-align:center;

}

.section-label{

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

    padding:10px 24px;

    border-radius:999px;

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

    color:var(--primary);

    font-size:.92rem;

    font-weight:700;

}

.section-head h2{

    font-size:clamp(2.5rem,5vw,3.8rem);

    line-height:1.15;

    margin:22px 0;

    color:var(--text);

}

.section-head p{

    font-size:1.12rem;

    color:var(--text-light);

    line-height:1.9;

}


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

::selection{

    background:var(--primary);

    color:#ffffff;

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f4f4f4;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    var(--primary),
    var(--primary-light));

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:rgba(248,245,255,.88);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(15,23,42,.05);

    transition:.35s ease;

}

.site-header.scrolled{

     background:#f8f5ff;


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

}

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

.header-inner{

    display:grid;

    grid-template-columns:240px 1fr auto;

    align-items:center;

    gap:40px;

    height:92px;

}

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

.brand{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:1.35rem;

    font-weight:800;

    color:var(--text);

}

.brand-mark{

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:23px;

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

    box-shadow:
    0 18px 40px rgba(124,58,237,.30);

}

.brand:hover .brand-mark{

    transform:rotate(-8deg);

    transition:.35s;

}

/*=========================================================
                    NAVIGATION
=========================================================*/

.nav-menu{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:38px;

}

.nav-menu a{

    position:relative;

    font-size:1rem;

    font-weight:600;

    color:var(--text);

    transition:.3s;

}

.nav-menu a:hover{

    color:var(--primary);

}

.nav-menu a.active{

    color:var(--primary);

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:100%;

    height:2px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.nav-menu a:hover::after,

.nav-menu a.active::after{

    transform:scaleX(1);

}

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

.header-buttons{

    display:flex;

    align-items:center;

    gap:14px;

}

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

.button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border-radius:999px;

    font-weight:700;

    transition:.35s;

}

.button-primary{

    color:#ffffff;

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

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

}

.button-primary:hover{

    transform:translateY(-4px);

}

.button-secondary{

    background:#ffffff;

    color:var(--text);

    border:1px solid var(--border);

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

}

.button-secondary:hover{

    transform:translateY(-4px);

}

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

.nav-toggle{

    display:none;

    width:50px;

    height:50px;

    border-radius:16px;

    background:#ffffff;

    border:1px solid var(--border);

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

    justify-content:center;

    align-items:center;

    font-size:21px;

}

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

@media(max-width:1024px){

    .header-inner{

        grid-template-columns:1fr auto;

    }

    .nav-menu{

        display:none;

    }

    .header-buttons{

        display:none;

    }

    .nav-toggle{

        display:flex;

    }

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

.hero{

    position:relative;

    padding-top:170px;

    padding-bottom:120px;

    overflow:hidden;

}

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

.hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:90px;

    align-items:start;

}

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

.hero-content{

    max-width:670px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:999px;

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

    color:var(--primary);

    font-weight:700;

    margin-bottom:30px;

}

.hero-badge i{

    color:var(--primary);

}

.hero h1{

    font-size:clamp(3.5rem,6vw,5.2rem);

    line-height:.95;

    letter-spacing:-2px;

    margin-bottom:26px;

    color:var(--text);

}

.hero h1 span{

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

    background-clip:text;

    -webkit-background-clip:text;

    color:transparent;

    -webkit-text-fill-color:transparent;

}

.hero p{

    font-size:1.18rem;

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:45px;

    max-width:620px;

}

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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:55px;

}

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

.hero-stats{

    display:grid;

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

    gap:20px;

}

.hero-stat{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:22px;

    padding:26px;

    text-align:center;

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

    transition:.35s;

}

.hero-stat:hover{

    transform:translateY(-8px);

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

}

.hero-stat h2{

    font-size:2.1rem;

    color:var(--primary);

    margin-bottom:8px;

}

.hero-stat p{

    margin:0;

    font-size:.95rem;

    color:var(--text-light);

}

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

@media(max-width:992px){

    .hero{

        padding-top:150px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

    .hero-content{

        margin:auto;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .hero-stats{

        grid-template-columns:1fr;

    }

}
/*=========================================================
                    HERO DASHBOARD
=========================================================*/

.hero-dashboard{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.dashboard-window{

    position:relative;

    width:100%;

    max-width:570px;

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

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

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

    border-radius:32px;

    padding:30px;

    overflow:hidden;

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

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

}

.dashboard-window::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    right:-120px;

    top:-120px;

    border-radius:50%;

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

    filter:blur(45px);

}

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

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.dashboard-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#ede9fe;

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    margin-bottom:12px;

}

.dashboard-header h3{

    font-size:1.55rem;

    color:var(--text);

}

.dashboard-live{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 16px;

    border-radius:999px;

    background:#f8fafc;

    font-weight:700;

    color:var(--text);

}

.dashboard-live span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:0 0 12px #22c55e;

}

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

.metric-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:24px;

}

.metric-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:20px;

    transition:.35s;

}

.metric-card:hover{

    transform:translateY(-6px);

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

}

.metric-card h4{

    font-size:.9rem;

    color:var(--text-light);

    margin-bottom:8px;

}

.metric-card h2{

    font-size:1.8rem;

    color:var(--text);

    margin-bottom:6px;

}

.metric-card small{

    color:#22c55e;

    font-weight:700;

}

/*=========================================================
                    BOTTOM SECTION
=========================================================*/

.dashboard-bottom{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:18px;

}

.mini-chart,
.mini-activity{

    background:#fafafa;

    border:1px solid var(--border);

    border-radius:20px;

    padding:20px;

    align-self: flex-start;

}

.mini-chart h4,
.mini-activity h4{

    margin-bottom:16px;

}

.bars{

    display:flex;

    align-items:flex-end;

    gap:8px;

    height:130px;

}

.bars span{

    flex:1;

    border-radius:12px 12px 0 0;

    background:linear-gradient(
        180deg,
        var(--primary-light),
        var(--primary)
    );

    transition:.35s;

}

.bars span:hover{

    transform:scaleY(1.08);

}

.mini-activity p{

    margin:12px 0;

    color:var(--text-light);

}

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

@keyframes dashboardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .hero-dashboard{

        justify-content:center;

    }

}

@media(max-width:768px){

    .metric-grid{

        grid-template-columns:1fr;

    }

    .dashboard-bottom{

        grid-template-columns:1fr;

    }

}
/*=========================================================
                TRUSTED TECHNOLOGIES
=========================================================*/

.trusted{

    position:relative;

    padding:120px 0;

}

.trusted-grid{

    display:grid;

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

    gap:28px;

    margin-top:70px;

}

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

.trusted-card{

    position:relative;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:24px;

    min-height:180px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    transition:var(--transition);

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

}

.trusted-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.trusted-card:hover{

    transform:translateY(-10px);

    border-color:#d8b4fe;

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

}

.trusted-card:hover::before{

    transform:scaleX(1);

}

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

.trusted-card i{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:20px;

    transition:.35s;

}

.trusted-card:hover i{

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

}

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

.trusted-card span{

    font-size:1.08rem;

    font-weight:700;

    color:var(--text);

}

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

@media(max-width:1100px){

    .trusted-grid{

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

    }

}

@media(max-width:700px){

    .trusted-grid{

        grid-template-columns:1fr;

    }

}
/*=========================================================
                    SERVICES
=========================================================*/

.services{

    position:relative;

    padding:90px 0;

}

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

.services-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

    align-items:stretch;

}

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

.service-box{

    position:relative;

    display:flex;

    flex-direction:column;

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(124,58,237,.10);

    border-radius:28px;

    padding:38px;

    min-height:390px;

    overflow:hidden;

    transition:var(--transition);

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

}

.service-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.service-box:hover{

    transform:translateY(-12px);

    border-color:#d8b4fe;

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

}

.service-box:hover::before{

    transform:scaleX(1);

}

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

.service-icon{

    width:74px;

    height:74px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:22px;

    margin-bottom:28px;

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

    color:#ffffff;

    font-size:30px;

    box-shadow:
    0 18px 35px rgba(124,58,237,.30);

    transition:.35s;

}

.service-box:hover .service-icon{

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

}

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

.service-box h3{

    font-size:1.55rem;

    margin-bottom:18px;

    color:var(--text);

}

.service-box p{

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:30px;

}

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

.service-box a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    color:var(--primary);

    font-weight:700;

    transition:.3s;

}

.service-box a i{

    transition:.3s;

}

.service-box:hover a{

    gap:18px;

}

.service-box:hover a i{

    transform:translateX(6px);

}

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

@media(max-width:1100px){

    .services-grid{

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

    }

}

@media(max-width:768px){

    .services-grid{

        grid-template-columns:1fr;

    }

}
/*=========================================================
                WHY CHOOSE TRAVIK TECH
=========================================================*/

.why-us{

    position:relative;

    background:transparent;

    padding:90px 0;

}

.why-us::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-220px;

    right:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(124,58,237,.10),
        transparent 70%
    );

}

.why-us::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(168,85,247,.08),
        transparent 70%
    );

}

.why-us .section-label{

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

    color:var(--primary);

}

.why-us .section-head h2{

    color:var(--text);

}

.why-us .section-head p{

    color:var(--text-light);

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

.why-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

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

.why-card{

    position:relative;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:28px;

    padding:38px;

    transition:.35s;

    overflow:hidden;

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

}

.why-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-12px);

    border-color:#d8b4fe;

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

}

.why-card:hover::before{

    transform:scaleX(1);

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

.why-icon{

    margin-bottom:22px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

}

.why-icon i{

    font-size:42px;

    transition:.35s;

}

.why-card:nth-child(1) .why-icon i{
    color:#7c3aed; /* Purple */
}

.why-card:nth-child(2) .why-icon i{
    color:#3b82f6; /* Blue */
}

.why-card:nth-child(3) .why-icon i{
    color:#10b981; /* Green */
}

.why-card:nth-child(4) .why-icon i{
    color:#f59e0b; /* Orange */
}

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

    transform:scale(1.15);

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

.why-card h3{

    color:var(--text);

    font-size:1.5rem;

    margin-bottom:18px;

}

.why-card p{

    color:var(--text-light);

    line-height:1.9;

}

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

@media(max-width:900px){

    .why-grid{

        grid-template-columns:1fr;

    }

}
/*=========================================================
                    OUR PROCESS
=========================================================*/

.process{

    position:relative;

    padding:90px 0;

    background:transparent;

}

.process::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(124,58,237,.08),
        transparent 70%
    );

}

.process::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-150px;

    bottom:-150px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(168,85,247,.06),
        transparent 70%
    );

}

/*=========================================================
                    TIMELINE
=========================================================*/

.process-timeline{

    position:relative;

    max-width:1100px;

    margin:80px auto 0;

}

.process-timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    border-radius:20px;

    background:linear-gradient(
        to bottom,
        var(--primary),
        var(--primary-light)
    );

}

/*=========================================================
                    STEP
=========================================================*/

.process-step{

    position:relative;

    width:50%;

    padding:20px 55px;

    margin-bottom:60px;

}

.process-step:nth-child(odd){

    left:0;

    text-align:right;

}

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

    left:50%;

}

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

.process-number{

    position:absolute;

    top:35px;

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#ffffff;

    font-size:1.3rem;

    font-weight:800;

    box-shadow:0 18px 40px rgba(124,58,237,.28);

}

.process-step:nth-child(odd) .process-number{

    right:-32px;

}

.process-step:nth-child(even) .process-number{

    left:-32px;

}

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

.process-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:26px;

    padding:34px;

    transition:.35s;

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

}

.process-card:hover{

    transform:translateY(-10px);

    border-color:#d8b4fe;

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

}

.process-card h3{

    font-size:1.5rem;

    margin-bottom:18px;

    color:var(--text);

}

.process-card p{

    color:var(--text-light);

    line-height:1.9;

}

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

@media(max-width:900px){

    .process-timeline::before{

        left:32px;

    }

    .process-step{

        width:100%;

        left:0 !important;

        text-align:left;

        padding-left:95px;

        padding-right:15px;

    }

    .process-number{

        left:0 !important;

    }

}
/*=========================================================
                    PORTFOLIO
=========================================================*/
.portfolio{

    position:relative;

    padding:90px 0;

    background:transparent;

}

.portfolio-grid{

    display:grid;

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

    gap:35px;

    margin-top:50px;

}

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

.portfolio-card{

    position:relative;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:30px;

    overflow:hidden;

    transition:.35s;

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

}

.portfolio-card:hover{

    transform:translateY(-12px);

    border-color:#d8b4fe;

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

}

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

.portfolio-image{

    position:relative;

    height:190px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    overflow:hidden;

}

.portfolio-image::before{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    right:-120px;

    top:-120px;

    border-radius:50%;

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

}

.portfolio-image i{

    font-size:90px;

    color:#ffffff;

    transition:.35s;

}

.portfolio-card:hover .portfolio-image i{

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

}

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

.portfolio-content{

    padding:28px;

}

.portfolio-content span{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:999px;

    background:#ede9fe;

    color:var(--primary);

    font-size:.9rem;

    font-weight:700;

    margin-bottom:20px;

}

.portfolio-content h3{

    font-size:1.7rem;

    margin-bottom:18px;

    color:var(--text);

}

.portfolio-content p{

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:30px;

}

.portfolio-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:700;

    transition:.3s;

}

.portfolio-content a:hover{

    gap:18px;

}

.portfolio-content a i{

    transition:.3s;

}

.portfolio-content a:hover i{

    transform:translateX(6px);

}

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

@media(max-width:900px){

    .portfolio-grid{

        grid-template-columns:1fr;

    }

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

.cta{

    position:relative;

    padding:120px 0;

    background:transparent;

}

.cta-panel{

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    padding:70px;

    border-radius:36px;

    background:#000000;

    box-shadow:0 30px 80px rgba(0,0,0,.25);

}

.cta-panel::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-160px;

    top:-160px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(124,58,237,.28),
        transparent 70%
    );

}

.cta-panel::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(168,85,247,.20),
        transparent 70%
    );

}

.cta-panel>*{

    position:relative;

    z-index:2;

}

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

.cta-panel h2{

    color:#ffffff;

    font-size:clamp(2.4rem,5vw,3.4rem);

    margin-bottom:20px;

    line-height:1.2;

}

.cta-panel p{

    color:#d1d5db;

    max-width:650px;

    line-height:1.9;

    font-size:1.08rem;

}

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

.cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.cta-panel .button-primary{

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

}

.cta-panel .button-secondary{

    background:#ffffff;

    color:#111827;

    border:none;

}

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

@media(max-width:900px){

    .cta-panel{

        flex-direction:column;

        text-align:center;

        padding:50px 35px;

    }

    .cta-buttons{

        justify-content:center;

    }

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

footer{

    position:relative;

    background:#000000;

    color:#ffffff;

    padding:90px 0 35px;

    overflow:hidden;

}

footer::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    right:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(124,58,237,.18),
        transparent 70%
    );

}

footer::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(168,85,247,.12),
        transparent 70%
    );

}

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

.footer-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:50px;

}

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

footer .brand{

    color:#ffffff;

}

footer .brand-mark{

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

    color:#ffffff;

}

.footer-about{

    margin-top:22px;

    color:#b6bcc8;

    line-height:1.9;

}

/*=========================================================
                    TITLES
=========================================================*/

.footer-title{

    color:#ffffff;

    font-size:1.2rem;

    margin-bottom:24px;

}

/*=========================================================
                    LINKS
=========================================================*/

.footer-links{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-links a{

    color:#b6bcc8;

    transition:.3s;

}

.footer-links a:hover{

    color:#a855f7;

    transform:translateX(6px);

}

/*=========================================================
                    CONTACT
=========================================================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-contact p{

    display:flex;

    align-items:center;

    gap:12px;

    color:#b6bcc8;

}

.footer-contact i{

    color:#a855f7;

    width:20px;

}

/*=========================================================
                    SOCIAL
=========================================================*/

.footer-social{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

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

    color:#ffffff;

    transition:.35s;

}

.footer-social a:hover{

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

    transform:translateY(-5px);

}

/*=========================================================
                    COPYRIGHT
=========================================================*/

.footer-bottom{

    position:relative;

    z-index:2;

    margin-top:70px;

    padding-top:30px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{

    color:#9ca3af;

}

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

@media(max-width:992px){

    .footer-grid{

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

    }

}

@media(max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-contact p{

        justify-content:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom{

        justify-content:center;

        text-align:center;

    }

}
/*=========================================================
                WHATSAPP FLOATING BUTTON
=========================================================*/

.whatsapp-container{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:9999;

}

.whatsapp-button{

    width:68px;

    height:68px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    background:#25D366;

    color:#ffffff;

    font-size:34px;

    box-shadow:0 18px 45px rgba(0,0,0,.28);

    transition:.35s;

}

.whatsapp-button:hover{

    transform:scale(1.08);

}

/*=========================================================
                    POPUP
=========================================================*/

.whatsapp-popup{

    position:absolute;

    right:0;

    bottom:90px;

    width:360px;

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

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

}

.whatsapp-popup.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

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

.whatsapp-header{

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px;

    background:#000000;

    color:#ffffff;

}

.whatsapp-avatar{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#ffffff;

    font-size:24px;

}

.whatsapp-info{

    flex:1;

}

.whatsapp-info h4{

    margin-bottom:6px;

    font-size:1.1rem;

}

.whatsapp-info small{

    display:flex;

    align-items:center;

    gap:8px;

    color:#d1d5db;

}

.online-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:0 0 10px #22c55e;

}

.whatsapp-close{

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    cursor:pointer;

    transition:.3s;

}

.whatsapp-close:hover{

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

}

/*=========================================================
                    BODY
=========================================================*/

.whatsapp-body{

    background:#ffffff;

    padding:24px;

}

.whatsapp-body p{

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:18px;

    color:#374151;

    line-height:1.8;

    margin-bottom:22px;

}

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

.whatsapp-chat-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:16px;

    border-radius:16px;

    font-weight:700;

    text-decoration:none;

    color:#ffffff;

    background:#25D366;

    transition:.35s;

}

.whatsapp-chat-btn:hover{

    background:#1da851;

    transform:translateY(-3px);

}

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

@media(max-width:500px){

    .whatsapp-popup{

        width:320px;

        right:-5px;

    }

}
/*=========================================================
                GLOBAL RESPONSIVE
=========================================================*/

@media (max-width:1200px){

    .container{

        width:min(94%,1100px);

    }

}

@media (max-width:992px){

/*==========================
        GENERAL
==========================*/

.section{

    padding:65px 0;

}

.section-head{

    margin-bottom:50px;

}

.section-head h2{

    font-size:2.7rem;

}

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

.hero{

    padding-top:150px;

    padding-bottom:90px;

}

.hero-grid{

    grid-template-columns:1fr;

    gap:60px;

}

.hero-content{

    max-width:100%;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

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

}

/*==========================
        DASHBOARD
==========================*/

.hero-dashboard{

    justify-content:center;

}

.dashboard-window{

    max-width:650px;

}

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

.trusted-grid{

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

}

/*==========================
        SERVICES
==========================*/

.services-grid{

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

}

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

.why-grid{

    grid-template-columns:1fr;

}

/*==========================
        PORTFOLIO
==========================*/

.portfolio-grid{

    grid-template-columns:1fr;

}

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

.cta-panel{

    flex-direction:column;

    text-align:center;

}

.cta-buttons{

    justify-content:center;

}

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

.footer-grid{

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

}

}

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

@media(max-width:768px){

.section{

    padding:90px 0;

}

.section-head h2{

    font-size:2.2rem;

}

.section-head p{

    font-size:1rem;

}

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

.header-inner{

    height:82px;

}

.brand{

    font-size:1.15rem;

}

.brand-mark{

    width:48px;

    height:48px;

    font-size:20px;

}

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

.hero{

    padding-top:130px;

}

.hero h1{

    font-size:2.9rem;

}

.hero p{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

}

.button{

    width:100%;

}

.hero-stats{

    grid-template-columns:1fr;

}

/*==========================
        DASHBOARD
==========================*/

.metric-grid{

    grid-template-columns:1fr;

}

.dashboard-bottom{

    grid-template-columns:1fr;

}

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

.trusted-grid{

    grid-template-columns:1fr;

}

/*==========================
        SERVICES
==========================*/

.services-grid{

    grid-template-columns:1fr;

}

.service-box{

    min-height:auto;

}

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

.process-timeline::before{

    left:30px;

}

.process-step{

    width:100%;

    left:0!important;

    padding-left:90px;

    padding-right:15px;

    text-align:left;

}

.process-number{

    left:0!important;

}

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

.cta-panel{

    padding:45px 30px;

}

.cta-panel h2{

    font-size:2rem;

}

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

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-contact p{

    justify-content:center;

}

.footer-social{

    justify-content:center;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

/*==========================
        WHATSAPP
==========================*/

.whatsapp-container{

    right:18px;

    bottom:18px;

}

.whatsapp-button{

    width:62px;

    height:62px;

    font-size:30px;

}

.whatsapp-popup{

    width:320px;

    right:-5px;

}

}

/*=========================================================
                SMALL PHONES
=========================================================*/

@media(max-width:480px){

.hero h1{

    font-size:2.4rem;

}

.section-head h2{

    font-size:2rem;

}

.dashboard-window{

    padding:22px;

}

.service-box{

    padding:28px;

}

.portfolio-content{

    padding:28px;

}

.cta-panel{

    padding:35px 22px;

}

.whatsapp-popup{

    width:300px;

}

}

/* ===== TEMPORARY HERO SPACING TEST ===== */

.hero{
    padding-bottom:60px !important;
}

.trusted{
    padding-top:40px !important;
}

.section-head{
    margin-bottom:35px !important;
}

.trusted-grid{
    margin-top:30px !important;
}
/* =========================================
   SECTION SPACING OVERRIDE
========================================= */

.section{
    padding-top:70px !important;
    padding-bottom:70px !important;
}

.section-head{
    margin-bottom:40px !important;
}

.section-head h2{
    margin-bottom:16px !important;
}

.section-head p{
    margin-top:0 !important;
}

.trusted{
    padding-bottom:50px !important;
}

.services{
    padding-top:50px !important;
}

.why-us{
    padding-top:50px !important;
}

.process{
    padding-top:50px !important;
}

.portfolio{
    padding-top:50px !important;
}
/*=========================================
      PORTFOLIO CARD SIZE FIX
=========================================*/

.portfolio-card{
    max-width:560px !important;
    margin:auto !important;
}

.portfolio-image{
    height:180px !important;
    display:flex;
    align-items:center;
    justify-content:center;
}

.portfolio-image i{
    font-size:4rem !important;
}

.portfolio-content{
    padding:28px !important;
}

.portfolio-content p{
    margin-bottom:20px !important;
}
/* =========================================
   FIX GAP AFTER PROCESS SECTION
========================================= */

.process,
.process-section{
    padding-bottom:40px !important;
    margin-bottom:0 !important;
    min-height:auto !important;
    height:auto !important;
}

.portfolio{
    margin-top:0 !important;
    padding-top:40px !important;
}
/*=========================================================
                    CONTACT FORM
=========================================================*/

.contact-form{

    max-width:1050x;

    margin:70px auto 0;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:32px;

    padding:50px;

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

}


.form-grid{

    display:grid;

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

    gap:24px;

    margin-bottom:30px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.form-group label{

    font-size:.95rem;

    font-weight:700;

    color:var(--text);

}

.form-title{

    font-size:1.35rem;

    margin:20px 0 25px;

    color:var(--text);

}
/*=========================================================
                SERVICE SELECTION
=========================================================*/
.contact-service-selection{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin:35px 0 40px;

}

.contact-service-option{

    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    gap:14px;
    padding:30px 20px;

    background:#ffffff;

    border:1px solid var(--border);
    border-radius:22px;

    cursor:pointer;
    transition:.35s;

}

.contact-service-option:hover{

    transform:translateY(-8px);
    border-color:var(--primary);
    box-shadow:var(--shadow-purple);

}

.contact-service-icon{

    width:72px;
    height:72px;

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

    border-radius:20px;
    margin-bottom:10px;
}

.contact-service-icon i{

    font-size:2rem;

}

.contact-service-option span{

    font-weight:700;
    color:var(--text);

}

.contact-service-option input{

    position:absolute;
    opacity:0;
    pointer-events:none;

}

.contact-service-option:has(input:checked){

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

    border-color:transparent;

}

.contact-service-option:has(input:checked) span{

    color:#ffffff;

}

.contact-service-option:has(input:checked) .contact-service-icon{

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

}

.contact-service-option:has(input:checked) .contact-service-icon i{

    color:#ffffff;

}
.contact-service-icon{
    width:72px;
    height:72px;
    border-radius:20px;

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

    margin-bottom:14px;
}

.contact-service-icon i{
    font-size:30px;
}

/* Website */
.contact-service-icon.blue{
    background:#eef5ff;
}

.contact-service-icon.blue i{
    color:#2563eb;
}

/* E-Commerce */
.contact-service-icon.orange{
    background:#fff2e8;
}

.contact-service-icon.orange i{
    color:#f97316;
}

/* Software */
.contact-service-icon.purple{
    background:#f3e8ff;
}

.contact-service-icon.purple i{
    color:#7c3aed;
}

/* Mobile */
.contact-service-icon.green{
    background:#ecfdf3;
}

.contact-service-icon.green i{
    color:#22c55e;
}

/* AI */
.contact-service-icon.teal{
    background:#e6fffb;
}

.contact-service-icon.teal i{
    color:#14b8a6;
}

/* Cloud */
.contact-service-icon.sky{
    background:#eef4ff;
}

.contact-service-icon.sky i{
    color:#3b82f6;
}
/* Contact Form Inputs */

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;
    padding:16px 18px;
    font-size:1rem;

    border:1px solid var(--border);
    border-radius:14px;

    background:#fff;
    color:var(--text);

    transition:.3s;

    outline:none;

}

.contact-form textarea{

    min-height:170px;
    resize:vertical;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(124,58,237,.12);

}
/* Contact Form Width */

.contact-form{

    max-width:1050px;
    margin:0 auto;

}
/* ==========================================
   CONTACT FORM BUTTON
========================================== */

.contact-form .button{

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

    padding:18px 42px;
    min-width:220px;

    font-size:1.05rem;
    font-weight:700;

    border-radius:999px;
}
/* ==========================================
        CAREERS HERO
========================================== */


.careers-hero .hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

.careers-dashboard{

    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    padding:36px;
    box-shadow:var(--shadow);

}

.dashboard-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;

}

.status-badge{

    background:rgba(124,58,237,.12);
    color:var(--primary);
    padding:8px 18px;
    border-radius:999px;
    font-weight:600;
    font-size:.9rem;

}

.dashboard-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;

}

.dashboard-card{

    border:1px solid var(--border);
    border-radius:18px;
    padding:22px;

}

.dashboard-card h4{

    font-size:.95rem;
    color:var(--muted);
    margin-bottom:12px;

}

.dashboard-card strong{

    display:block;
    font-size:1.4rem;
    margin-bottom:8px;

}

.dashboard-card small{

    color:#22c55e;
    font-weight:600;

}

.dashboard-footer{

    margin-top:28px;
    padding-top:24px;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);

}

.dashboard-footer i{

    color:var(--primary);

}

@media(max-width:992px){

.careers-hero .hero-grid{

grid-template-columns:1fr;

}

}
/* ==========================================
   CAREERS PAGE OVERRIDES
========================================== */


.hero.section.careers-hero{
    padding-top:150px !important;
    padding-bottom:80px !important;
}

.careers-hero .hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:100px;
    align-items:start;
}

.careers-dashboard{
    margin-top:5px;
}
/*=========================================================
    FUTURE OPPORTUNITIES - MODERN STYLE
=========================================================*/

.opportunity-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:24px;
    padding:32px;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
    transition:.35s;
    height:100%;
}

.opportunity-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(124,58,237,.12);
}
.opportunity-card h3{
    font-size:1.65rem;
    margin-bottom:16px;
}

.opportunity-card p{
    color:var(--muted);
    line-height:1.8;
    margin-bottom:22px;
}

.opportunity-status{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:999px;
    font-weight:600;
    font-size:.95rem;
}

.opportunity-status::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
}

/* Status colours */
.opportunity-card:nth-child(1) .opportunity-status{
    background:#eef4ff;
    color:#2563eb;
}

.opportunity-card:nth-child(1) .opportunity-status::before{
    background:#2563eb;
}

.opportunity-card:nth-child(2) .opportunity-status{
    background:#ecfdf5;
    color:#10b981;
}

.opportunity-card:nth-child(2) .opportunity-status::before{
    background:#10b981;
}

.opportunity-card:nth-child(3) .opportunity-status{
    background:#fff7ed;
    color:#f97316;
}

.opportunity-card:nth-child(3) .opportunity-status::before{
    background:#f97316;
}

.opportunity-card:nth-child(4) .opportunity-status{
    background:#f5f3ff;
    color:#7c3aed;
}

.opportunity-card:nth-child(4) .opportunity-status::before{
    background:#7c3aed;
}
.opportunity-icon{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    width:auto;
    height:auto;

    background:transparent;
    box-shadow:none;
    border-radius:0;

    margin-bottom:20px;
}

.opportunity-icon i{
    font-size:42px;
}
/* Software */
.opportunity-card:nth-child(1) .opportunity-icon i{
    color:#2563eb;
}

/* UI / UX */
.opportunity-card:nth-child(2) .opportunity-icon i{
    color:#10b981;
}

/* Mobile */
.opportunity-card:nth-child(3) .opportunity-icon i{
    color:#f97316;
}

/* Internship */
.opportunity-card:nth-child(4) .opportunity-icon i{
    color:#7c3aed;
}
/* DevOps & Cloud */
.opportunity-card:nth-child(5) .opportunity-icon i{
    color:#0ea5e9;
}

.opportunity-card:nth-child(5) .opportunity-status{
    background:#e0f2fe;
    color:#0284c7;
}

.opportunity-card:nth-child(5) .opportunity-status::before{
    background:#0284c7;
}
/* AI Engineering */
.opportunity-card:nth-child(6) .opportunity-icon i{
    color:#7c3aed;
}

.opportunity-card:nth-child(6) .opportunity-status{
    background:#f5f3ff;
    color:#7c3aed;
}

.opportunity-card:nth-child(6) .opportunity-status::before{
    background:#7c3aed;
}
/*=========================================================
    GLOBAL HEADER OVERRIDE
=========================================================*/

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    background:#050505 !important;
    border-bottom:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:.35s ease;
}

.site-header::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-35px;
    transform:translateX(-50%);

    width:900px;
    height:120px;

    background:radial-gradient(circle,
        rgba(124,58,237,.18),
        transparent 70%);

    pointer-events:none;
}
/* White logo text */
.site-header .brand,
.site-header .brand span{
    color:#fff !important;
}

/* Navigation */
.site-header .nav-menu a{
    color:rgba(255,255,255,.75) !important;
}

.site-header .nav-menu a:hover{
    color:#fff !important;
}

.site-header .nav-menu a.active{
    color:#8b5cf6 !important;
}
.site-header::after{
    display:none !important;
}
.site-header .nav-menu{
    gap:36px;
}

.site-header .nav-menu a{
    background:transparent !important;
    color:rgba(255,255,255,.75) !important;
    padding:0;
    border-radius:0;
    box-shadow:none;
    position:relative;
    font-weight:600;
    transition:.3s;
}

.site-header .nav-menu a:hover{
    color:#fff !important;
}

.site-header .nav-menu a.active{
    color:#8b5cf6 !important;
}

.site-header .nav-menu a.active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-12px;
    width:100%;
    height:2px;
    background:#8b5cf6;
    border-radius:10px;
}
/* ==========================================
   HEADER SPACER
========================================== */

.header-spacer{
    width: 205px;   /* match your button */
    height: 56px;
    flex-shrink: 0;
}
/* ==========================================
   FINAL HEADER FIX
========================================== */

.header-inner{
    grid-template-columns:240px 1fr 220px !important;
}
.tech-icon{
    width:90px;
    height:90px;

    margin:0 auto 25px;

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

    border-radius:22px;

    font-size:58px;

    transition:.35s ease;
}

.tech-card:hover .tech-icon{
    transform:translateY(-4px);
}
.html{
    background:#fff3ee;
}

.html i{
    color:#e34f26;
}

.css{
    background:#eef5ff;
}

.css i{
    color:#1572b6;
}

.js{
    background:#fff8d8;
}

.js i{
    color:#f7df1e;
}

.react{
    background:#eefbff;
}

.react i{
    color:#61dafb;
}

.python{
    background:#fff9df;
}

.python i{
    color:#3776ab;
}

.mysql{
    background:#eef8ff;
}

.mysql i{
    color:#00758f;
}

.node{
    background:#eefced;
}

.node i{
    color:#3c873a;
}

.git{
    background:#fff2ef;
}

.git i{
    color:#f1502f;
}
/*=========================================================
            COLOURED SERVICE ICONS
=========================================================*/

.service-icon.website{
    background:#eef5ff;
    color:#2563eb;
}

.service-icon.ecommerce{
    background:#fff2e8;
    color:#f97316;
}

.service-icon.software{
    background:#f3e8ff;
    color:#7c3aed;
}

.service-icon.mobile{
    background:#ecfdf3;
    color:#22c55e;
}

.service-icon.ai{
    background:#e6fffb;
    color:#14b8a6;
}

.service-icon.cloud{
    background:#eef4ff;
    color:#3b82f6;
}
/*=========================================================
                    PORTFOLIO IMPROVEMENTS
=========================================================*/

.portfolio-image{

    height:100px;

    border-radius:28px 28px 0 0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:16px;

    color:#ffffff;

    position:relative;

    overflow:hidden;

}

.portfolio-image::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    right:-70px;

    top:-70px;

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

}

.portfolio-image i{

    font-size:48px;

    position:relative;

    z-index:2;

}

.portfolio-image h4{

    color:#ffffff;

    font-size:1.2rem;

    font-weight:700;

    position:relative;

    z-index:2;

}

.website{

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

}

.ecommerce{

    background:linear-gradient(
    135deg,
    #f97316,
    #fb923c
    );

}

.portfolio-tags{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin:16px 0;

}

.portfolio-tags span{

    padding:8px 14px;

    border-radius:999px;

    background:#f3f4f6;

    color:var(--primary);

    font-size:.82rem;

    font-weight:600;

}

.portfolio-card{

    overflow:hidden;

    transition:.35s;

}

.portfolio-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 70px rgba(124,58,237,.16);

}

.portfolio-card:hover .portfolio-image i{

    transform:scale(1.08);

    transition:.35s;

}
.portfolio-more{
    margin-top:60px;
    text-align:center;
}
.portfolio-content{
    padding: 28px;
}
.portfolio-content p{
    margin: 16px 0;
    line-height: 1.7;
}
/* ==========================================
        PORTFOLIO CARD SIZE OVERRIDE
========================================== */

.portfolio-grid{
    align-items: start !important;
}

.portfolio-card{
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    align-self: start !important;
    display: block !important;
}

.portfolio-content{
    padding: 24px !important;
}

.portfolio-content p{
    margin: 16px 0 18px;
}

.portfolio-image{
    height: 150px !important;
}
/*=========================================
    SERVICE ICON COLORS
=========================================*/

.service-option i{
    transition:.3s;
}

/* Individual icon colors */

.service-blue{
    color:#2563eb;
}

.service-orange{
    color:#f97316;
}

.service-purple{
    color:#7c3aed;
}

.service-green{
    color:#22c55e;
}

.service-cyan{
    color:#14b8a6;
}

.service-sky{
    color:#3b82f6;
}

/* Selected card */

.service-option:has(input:checked){
    background:var(--primary);
    border-color:var(--primary);
    box-shadow:0 20px 45px rgba(124,58,237,.25);
}

.service-option:has(input:checked) span{
    color:#fff;
}

.service-option:has(input:checked) i{
    color:#fff;
}
/*=========================================================
            CONTACT SERVICE ICONS
=========================================================*/

.service-option{
    position:relative;
    transition:.35s;
}

.service-option span{
    display:block;
    margin-top:18px;
    font-weight:700;
    transition:.35s;
}

.service-icon{
    width:74px;
    height:74px;
    margin:0 auto;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    transition:.35s;
    box-shadow:0 18px 35px rgba(124,58,237,.12);
}

/* Icon colours */

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

.service-icon.orange{
    background:#fff2e8;
    color:#f97316;
}

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

.service-icon.green{
    background:#ecfdf5;
    color:#22c55e;
}

.service-icon.teal{
    background:#ecfeff;
    color:#14b8a6;
}

.service-icon.sky{
    background:#eff6ff;
    color:#3b82f6;
}

/* Selected card */

.service-option:has(input:checked){
    background:linear-gradient(135deg,#7c3aed,#a855f7);
    border-color:#7c3aed;
    box-shadow:0 25px 45px rgba(124,58,237,.25);
}

.service-option:has(input:checked) span{
    color:#fff;
}

.service-option:has(input:checked) .service-icon{
    background:rgba(255,255,255,.18);
    color:#fff;
    box-shadow:none;
}
/*=========================================================
                ABOUT HERO
=========================================================*/
.about-hero{
    padding:160px 0 80px;
}

.about-hero .hero-grid{
    display:grid;
    grid-template-columns:500px 680px;
    justify-content:space-between;
    gap:40px;
    align-items:start;
}

.hero-copy {
    max-width:520px;
}

.about-title{
    font-size:4.3rem;
    line-height:1.05;
    font-weight:800;
    margin-bottom:25px;
}

.about-title .purple{
    color:#7c3aed;
}

.hero-image img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:28px;
    display:block;
}

.feature-cards{
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.feature-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:24px;
    padding:30px 24px;
    transition:.3s;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(124,58,237,.12);
}

.feature-card i{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#7c3aed;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}

.feature-card h3{
    margin-bottom:10px;
}
/*=========================================================
            ABOUT DASHBOARD V2
=========================================================*/
.about-dashboard{
    width:700px;
    max-width:none;
    background:#fff;
    border-radius:26px;
    padding:21px;
    margin-left:auto;
}
.dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
}

.dashboard-header h3{
    font-size:2.2rem;
    line-height:1.15;
    margin:0;
    white-space:nowrap;
}

.dashboard-header p{
    width:220px;
    margin:0;
}
.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:20px 0;
}
.stat-card{

    border:1px solid #ececec;

    border-radius:18px;

    padding:16px;

    text-align:center;

}

.stat-card i{

    color:#7c3aed;

    font-size:22px;

    margin-bottom:12px;

}

.stat-card h4{

    font-size:1.5rem;

    margin-bottom:5px;

}

.stat-card span{

    color:#6b7280;

}

.dashboard-image{

    position:relative;

}

.dashboard-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:20px;
}
.floating-card{
    position:absolute;
    right:18px;
    bottom:18px;
    width:120px;
    background:#fff;
    padding:14px;
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
    text-align:center;
}

.floating-circle{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#7c3aed;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 12px;
    font-weight:700;
    font-size:1.1rem;
}

.floating-card h4{
    font-size:1rem;
    margin:8px 0 4px;
}

.floating-card p{
    font-size:0.9rem;
    color:#6b7280;
    margin:0;
}
/*=========================================================
                    SERVICES PAGE
=========================================================*/

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

.services-hero{
    padding:170px 0 100px;
    position: relative;
    position:relative;
}

.services-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
}

.services-content{
    max-width:560px;
    margin-top:-5px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    background:#f3ebff;
    color:#7c3aed;
    border-radius:999px;
    font-weight:600;
    margin-bottom:28px;
}

.hero-badge i{
    font-size:8px;
}

.services-content h1{
    font-size:4.3rem;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-2px;
    margin-bottom:26px;
    color:#111827;
}

.services-content h1 span{
    color:#7c3aed;
}

.services-content p{
    font-size:1.08rem;
    line-height:1.85;
    color:#6b7280;
    margin-bottom:40px;
}

.hero-actions{
    display:flex;
    gap:18px;
}
.services-laptop{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:40px;
    flex-shrink:0;
}

.services-laptop img{
    width:115%;
    max-width:none;  
    height:auto;
    display:block;
    object-fit:contain;
}
.services-laptop::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:radial-gradient(circle,
        rgba(124,58,237,.18),
        transparent 70%);
    left:120px;
    top:90px;
    z-index:-1;
    filter:blur(30px);
}


/*=========================================================
                SERVICES DASHBOARD
=========================================================*/

.services-dashboard{
    position:relative;
    z-index:3;

    width:100%;
    max-width:640px;
    margin-left:auto;
    background:#fff;
    border:1px solid #ececec;
    border-radius:30px;
    padding:34px;
    box-shadow:0 30px 70px rgba(0,0,0,.08);
}

.dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:35px;
}

.dashboard-label{
    display:inline-block;
    padding:8px 16px;
    background:#f3ebff;
    color:#7c3aed;
    border-radius:999px;
    font-size:.85rem;
    font-weight:700;
    margin-bottom:12px;
}

.dashboard-header h3{
    font-size:2rem;
    color:#111827;
    line-height:1.2;
}

.status{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    color:#111827;
}

.online{
    width:10px;
    height:10px;
    background:#22c55e;
    border-radius:50%;
}

/* ======================
   SERVICE CARDS
====================== */
.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:30px;
}

.service-mini{
    background:#fff;
    border:1px solid #ececec;
    border-radius:22px;
    padding:26px;
}

.service-mini .service-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:22px;
}

.service-mini h4{
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:10px;
    color:#111827;
}

.service-mini p{
    color:#6b7280;
    line-height:1.7;
    margin:0;
}

/* ======================
   CHART
====================== */

.dashboard-chart{
    border-top:1px solid #ececec;
    padding-top:28px;
}

.chart-card span{
    display:block;
    font-size:.95rem;
    color:#6b7280;
    margin-bottom:12px;
}

.progress-bar{
    width:100%;
    height:12px;
    background:#ececec;
    border-radius:999px;
    overflow:hidden;
    margin-bottom:16px;
}

.progress{
    width:98%;
    height:100%;
    background:linear-gradient(90deg,#7c3aed,#a855f7);
    border-radius:999px;
}

.chart-card strong{
    display:block;
    font-size:1rem;
    color:#111827;
    margin-bottom:24px;
}

/* ======================
   TECH STACK
====================== */

.tech-stack{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.tech-stack span{
    background:#f8f8f8;
    border:1px solid #ececec;
    padding:10px 18px;
    border-radius:999px;
    font-size:.9rem;
    font-weight:600;
    color:#555;
    transition:.3s;
}

.tech-stack span:hover{
    background:#7c3aed;
    border-color:#7c3aed;
    color:#fff;
}

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

@media(max-width:1100px){

.services-dashboard{
    margin:50px auto 0;
}

}

@media(max-width:650px){

.dashboard-header{
    flex-direction:column;
    gap:20px;
}

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

.tech-stack{
    justify-content:center;
}

}

/*=========================================================
                    OUR SERVICES
=========================================================*/

.services-section{
    background:transparent;
    padding:120px 0;
}

.section-head{
    max-width:820px;
    margin:0 auto 70px;
    text-align:center;
}

.section-head .section-label{
    display:inline-block;
    padding:12px 24px;
    background:#f3ebff;
    color:#7c3aed;
    border-radius:999px;
    font-size:.85rem;
    font-weight:700;
    margin-bottom:22px;
    letter-spacing:.5px;
}

.section-head h2{
    font-size:3.6rem;
    font-weight:800;
    line-height:1.1;
    color:#111827;
    margin-bottom:24px;
}

.section-head p{
    max-width:760px;
    margin:auto;
    font-size:1.1rem;
    line-height:1.9;
    color:#6b7280;
}

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

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

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

.service-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:28px;
    padding:40px 34px;
    display:flex;
    flex-direction:column;
    min-height:430px;
    transition:.35s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.03);
}
.service-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:24px;
    padding:35px 30px;
    transition:.35s;
    position:relative;
    overflow:hidden;
}

.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#7c3aed;
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(124,58,237,.12);
}

.service-card:hover::before{
    transform:scaleX(1);
}

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

.service-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:28px;
}

/* Different icon colours */

.service-card:nth-child(1) .service-icon{
    background:#edf4ff;
    color:#3b82f6;
}

.service-card:nth-child(2) .service-icon{
    background:#fff4e8;
    color:#f97316;
}

.service-card:nth-child(3) .service-icon{
    background:#f3ebff;
    color:#7c3aed;
}

.service-card:nth-child(4) .service-icon{
    background:#e9fbef;
    color:#22c55e;
}

.service-card:nth-child(5) .service-icon{
    background:#e8fffb;
    color:#14b8a6;
}

.service-card:nth-child(6) .service-icon{
    background:#edf4ff;
    color:#3b82f6;
}

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

.service-card h3{
    font-size:1.55rem;
    font-weight:700;
    color:#111827;
    margin-bottom:18px;
    line-height:1.35;
}

.service-card p{
    color:#6b7280;
    font-size:1rem;
    line-height:1.9;
    margin-bottom:30px;
}

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

.service-link{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#7c3aed;
    font-weight:700;
    transition:.3s;
}

.service-link i{
    transition:.3s;
}

.service-link:hover{
    gap:16px;
    color:#5b21b6;
}

.service-link:hover i{
    transform:translateX(6px);
}

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

@media(max-width:1100px){

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

}

@media(max-width:768px){

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

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

.service-card{
    min-height:auto;
}

}
/*==========================
        FINAL CTA
==========================*/

.final-cta .cta-panel{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;

    padding:60px;

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

    border-radius:30px;

    position:relative;
    overflow:hidden;

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

/* Purple glow */

.final-cta .cta-panel::before{
    content:"";
    position:absolute;

    width:320px;
    height:320px;

    background:#7c3aed;
    opacity:.18;

    filter:blur(120px);

    top:-140px;
    right:-120px;
}

.final-cta .cta-panel::after{
    content:"";
    position:absolute;

    width:260px;
    height:260px;

    background:#9333ea;
    opacity:.12;

    filter:blur(120px);

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

/* Keep content above glow */

.cta-content,
.cta-buttons{
    position:relative;
    z-index:2;
}

.cta-content{
    max-width:650px;
}

.final-cta .section-label{
    background:rgba(124,58,237,.15);
    color:#c084fc;
    border:1px solid rgba(124,58,237,.25);
}

.final-cta h2{
    color:#fff;
    font-size:3rem;
    margin:24px 0;
}

.final-cta p{
    color:rgba(255,255,255,.75);
    line-height:1.8;
}

.cta-buttons{
    display:flex;
    gap:18px;
}
/*==========================
        RESPONSIVE
==========================*/

@media(max-width:1100px){

.services-hero-grid,
.services-grid,
.industries-grid{

grid-template-columns:1fr;

}

.services-showcase{

justify-content:center;

}

.final-cta .cta-panel{

flex-direction:column;
text-align:center;

}

}

@media(max-width:768px){

.services-content h1{

font-size:3rem;

}

.showcase-stats{

grid-template-columns:1fr;

}

.hero-actions,
.cta-buttons{

flex-direction:column;

}

}
.service-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    background:rgba(124,58,237,.10);
    color:#7c3aed;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:24px;
    transition:.3s;
}


/* Dashboard icon colours */

.web-icon{
    background:#edf4ff;
    color:#3b82f6;
}

.ecommerce-icon{
    background:#fff3e8;
    color:#f97316;
}

.ai-icon{
    background:#e8fffb;
    color:#14b8a6;
}

.cloud-icon{
    background:#edf4ff;
    color:#3b82f6;
}

/* Hover */

.service-mini:hover .web-icon{
    background:#3b82f6;
    color:#fff;
}

.service-mini:hover .ecommerce-icon{
    background:#f97316;
    color:#fff;
}

.service-mini:hover .ai-icon{
    background:#14b8a6;
    color:#fff;
}

.service-mini:hover .cloud-icon{
    background:#3b82f6;
    color:#fff;
}
/*=========================================================
                SERVICE MODAL
=========================================================*/

.service-modal{
    position:fixed;
    inset:0;
    background:rgba(10,10,15,.65);
    backdrop-filter:blur(8px);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:9999;
}

.service-modal.active{
    opacity:1;
    visibility:visible;
}

.service-modal-content{
    width:min(1000px,92%);
    max-height:90vh;
    overflow-y:auto;
    background:linear-gradient(180deg,#ffffff,#fcfbff);
    border-radius:30px;
    padding:55px;
    position:relative;
    box-shadow:0 40px 90px rgba(0,0,0,.20);
}

.service-modal-content::-webkit-scrollbar{
    width:8px;
}
    
.service-modal-content::-webkit-scrollbar-thumb{
    background:#7c3aed;
    border-radius:50px;
}

.close-modal{
    position:absolute;
    top:28px;
    right:28px;
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:#f5f5f5;
    cursor:pointer;
    font-size:22px;
    transition:.3s;
}

.modal-close:hover{
    background:#7c3aed;
    color:#fff;
}

.modal-badge{
    display:inline-flex;
    padding:10px 20px;
    border-radius:999px;
    background:#f2e9ff;
    color:#7c3aed;
    font-weight:700;
    margin-bottom:24px;
}

.modal-title{
    font-size:3.2rem;
    line-height:1.1;
    font-weight:800;
    color:#111827;
    margin-bottom:25px;
}

.modal-text{
    font-size:1.08rem;
    line-height:1.95;
    color:#6b7280;
    margin-bottom:45px;
}

.modal-divider{
    border:none;
    border-top:1px solid #ececec;
    margin:45px 0;
}

.modal-heading{
    font-size:1.6rem;
    font-weight:800;
    color:#111827;
    margin-bottom:30px;
}

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

.modal-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 45px;
}

.modal-feature{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:1.05rem;
    font-weight:600;
    color:#111827;
}

.modal-feature i{
    color:#22c55e;
    font-size:20px;
}

/*==============================
        TECH STACK
==============================*/

.modal-tech{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.modal-tech span{
    padding:13px 22px;
    border-radius:999px;
    font-weight:700;
    border:1px solid #ececec;
    background:#fff;
    transition:.3s;
}

.modal-tech span:hover{
    transform:translateY(-3px);
}

/* Individual Colors */

.modal-tech span:nth-child(1){
    background:#fff4eb;
    color:#e34f26;
}

.modal-tech span:nth-child(2){
    background:#edf6ff;
    color:#1572b6;
}

.modal-tech span:nth-child(3){
    background:#fff8db;
    color:#c29b00;
}

.modal-tech span:nth-child(4){
    background:#eaf8ff;
    color:#61dafb;
}

.modal-tech span:nth-child(5){
    background:#ecfff0;
    color:#3c873a;
}

.modal-tech span:nth-child(6){
    background:#edf4ff;
    color:#21759b;
}

.modal-tech span:nth-child(7){
    background:#edf4ff;
    color:#00618a;
}

/*==============================
        INFO CARDS
==============================*/

.modal-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.timeline-card,
.ideal-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:24px;
    padding:28px;
}

.timeline-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
}

.timeline-card i{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:#f3ebff;
    color:#7c3aed;
    font-size:22px;
}

.timeline-card h4,
.ideal-card h4{
    font-size:1.2rem;
    color:#111827;
    margin-bottom:10px;
}

.timeline-card p{
    color:#6b7280;
}

.ideal-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:15px;
}

.ideal-tags span{
    background:#f7f7f7;
    border:1px solid #ececec;
    padding:10px 18px;
    border-radius:999px;
    font-weight:600;
    color:#555;
}

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

.modal-cta{
    margin-top:45px;
    padding:40px;
    border-radius:28px;
    background:linear-gradient(135deg,#7c3aed,#9b5cf7);
    text-align:center;
    color:#fff;
}

.modal-cta h3{
    font-size:2rem;
    margin-bottom:15px;
}

.modal-cta p{
    color:rgba(255,255,255,.9);
    line-height:1.8;
    margin-bottom:30px;
}

.modal-button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 34px;
    border-radius:999px;
    background:#fff;
    color:#7c3aed;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.modal-button:hover{
    transform:translateY(-4px);
}

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

@media(max-width:900px){

.service-modal-content{
    padding:35px;
}

.service-modal-title{
    font-size:2.4rem;
}

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

.service-modal-bottom{
    grid-template-columns:1fr;
}

}

@media(max-width:600px){

.modal-content{
    width:95%;
    padding:28px;
}

.modal-title{
    font-size:2rem;
}

.modal-cta{
    padding:30px;
}

}
/*==================================
      MODAL CTA BUTTON OVERRIDE
==================================*/

.modal-cta .button,
.modal-cta .button-primary,
.modal-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    background:#111827 !important;
    color:#fff !important;
    border:2px solid #111827 !important;

    padding:16px 34px;
    border-radius:999px;

    font-weight:700;
    text-decoration:none;
    transition:.3s ease;
}

.modal-cta .button:hover,
.modal-cta .button-primary:hover,
.modal-button:hover{

    background:#000 !important;
    border-color:#000 !important;

    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.2);
}

.modal-cta .button i,
.modal-cta .button-primary i,
.modal-button i{
    color:#fff;
}
/* Close Button Override */

.close-modal{
    background:#f5f5f5;
    color:#111827;
    transition:all .3s ease;
}

.close-modal:hover{
    background:#7c3aed;
    color:#ffffff;
    transform:rotate(90deg) scale(1.05);
    box-shadow:0 10px 25px rgba(124,58,237,.35);
}

.close-modal:hover i{
    color:#ffffff;
}
/*=========================================================
                    INDUSTRIES
=========================================================*/

.industries-section{
    background:transparent;
    position:relative;
}

.industries-list{
    max-width:1000px;
    margin:70px auto 0;
    display:flex;
    flex-direction:column;
    gap:26px;
}

/* CARD */
.industry-item{
    display:flex;
    align-items:center;
    gap:28px;

    background:#fff;
    border:1px solid #ececec;
    border-radius:24px;

    padding:36px 40px;

    position:relative;
    overflow:hidden;

    transition:.35s ease;
}

.industry-item:hover{
    transform:translateY(-8px);
    border-color:#d8b4fe;
    box-shadow:0 20px 50px rgba(124,58,237,.12);
}
/* LEFT SIDE */

.industry-icon{

    width:72px;
    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
    flex-shrink:0;

}

.industry-icon::after{

    content:"";
    position:absolute;

    right:-18px;
    top:50%;

    transform:translateY(-50%);

    width:2px;
    height:64px;

    border-radius:20px;

    background:#8b5cf6;

}

.industry-icon i{

    font-size:2.3rem;

    transition:.35s;

}

.industry-item:hover .industry-icon i{

    transform:scale(1.18);

}

/* CONTENT */

.industry-content{

    flex:1;

}

.industry-content h3{

    font-size:1.8rem;
    font-weight:700;

    color:#111827;

    margin-bottom:12px;

}

.industry-content p{

    color:#6b7280;
    font-size:1.05rem;
    line-height:1.8;

}
/*=========================================================
                INDIVIDUAL COLORS
=========================================================*/

/* Retail */

.industry-item:nth-child(1) .industry-icon i,
.industry-item:nth-child(1) .industry-arrow{
    color:#ff7a00;
}

.industry-item:nth-child(1) .industry-icon::after{
    background:#ff7a00;
}

/* Startups */

.industry-item:nth-child(2) .industry-icon i,
.industry-item:nth-child(2) .industry-arrow{
    color:#8b5cf6;
}

.industry-item:nth-child(2) .industry-icon::after{
    background:#8b5cf6;
}

/* Corporate */

.industry-item:nth-child(3) .industry-icon i,
.industry-item:nth-child(3) .industry-arrow{
    color:#2563eb;
}

.industry-item:nth-child(3) .industry-icon::after{
    background:#2563eb;
}

/* Education */

.industry-item:nth-child(4) .industry-icon i,
.industry-item:nth-child(4) .industry-arrow{
    color:#16a34a;
}

.industry-item:nth-child(4) .industry-icon::after{
    background:#16a34a;
}

/* Healthcare */

.industry-item:nth-child(5) .industry-icon i,
.industry-item:nth-child(5) .industry-arrow{
    color:#ef4444;
}

.industry-item:nth-child(5) .industry-icon::after{
    background:#ef4444;
}

/* Hospitality */

.industry-item:nth-child(6) .industry-icon i,
.industry-item:nth-child(6) .industry-arrow{
    color:#f59e0b;
}

.industry-item:nth-child(6) .industry-icon::after{
    background:#f59e0b;
}

/* MOBILE */

@media (max-width:768px){

    .industry-item{

        flex-direction:column;
        text-align:center;
        gap:22px;
        padding:28px;

    }

    .industry-icon::after{

        display:none;

    }
}
 /* ==========================
   WhatsApp Floating Button
========================== */

.whatsapp-float{
    position:fixed;
    bottom:30px;
    right:30px;

    width:65px;
    height:65px;

    background:#25D366;
    color:#fff;

    border-radius:50%;

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

    font-size:34px;

    text-decoration:none;

    box-shadow:0 15px 35px rgba(37,211,102,.35);

    z-index:9999;

    transition:.3s ease;

    animation:whatsappFloat 4s ease-in-out infinite;
}

.whatsapp-float:hover{
    transform:translateY(-5px) scale(1.08);
    box-shadow:0 20px 40px rgba(37,211,102,.45);
}

@keyframes whatsappFloat{

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

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

}
/* ==========================================
   ACTIVE PROJECTS
========================================== */

.dashboard-projects{
    margin-top:20px;
    margin-left:5px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
}

.dashboard-projects h4{
    font-size:17px;
    margin-bottom:18px;
    color:var(--text);
}

.project-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #f1f1f1;
}

.project-item:last-child{
    border-bottom:none;
}

.project-item strong{
    display:block;
    font-size:15px;
    color:var(--text);
}

.project-item div span{
    display:block;
    font-size:12px;
    color:var(--text-light);
    margin-top:4px;
}

/* Project Status */

.project-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;          /* Prevent stretching */
    width:auto;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}
.project-status.active{
    background:#dcfce7;
    color:#15803d;
}

.project-status.progress{
    background:#fef3c7;
    color:#b45309;
}

.project-status.completed{
    background:#ede9fe;
    color:#7c3aed;
}
.project-status.progress{
    padding:6px 7px;
    min-width:90px;
}
/* Remove purple glow from CTA */
.cta-panel::before,
.cta-panel::after{
    display:none !important;
}

/* Remove purple glow from footer */
footer::before,
footer::after{
    display:none !important;
}
/*=========================================================
        CAREERS VALUES - NEW DESIGN
=========================================================*/

.culture-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:70px;
}

.culture-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:28px;
    padding:38px;
    transition:.35s;
    box-shadow:var(--shadow-sm);
    position:relative;
    overflow:hidden;
}

.culture-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.culture-card:hover{
    transform:translateY(-12px);
    box-shadow:var(--shadow-purple);
    border-color:#d8b4fe;
}

.culture-card:hover::before{
    transform:scaleX(1);
}

.culture-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:26px;
    font-size:30px;
    transition:.35s;
}

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

.culture-card h3{
    font-size:1.65rem;
    margin-bottom:18px;
    color:var(--text);
}

.culture-card p{
    color:var(--text-light);
    line-height:1.9;
    font-size:1rem;
}
/*=========================================================
        CULTURE CARD ICON COLOURS
=========================================================*/

.culture-card:nth-child(1) .culture-icon{
    background:#f3e8ff;
    color:#7c3aed;
}

.culture-card:nth-child(2) .culture-icon{
    background:#dbeafe;
    color:#2563eb;
}

.culture-card:nth-child(3) .culture-icon{
    background:#dcfce7;
    color:#16a34a;
}

.culture-card:nth-child(4) .culture-icon{
    background:#ffedd5;
    color:#ea580c;
}

.culture-card:nth-child(5) .culture-icon{
    background:#ffe4e6;
    color:#e11d48;
}

.culture-card:nth-child(6) .culture-icon{
    background:#cffafe;
    color:#0891b2;
}

/* Hover Animation */

.culture-card:hover .culture-icon{
    color:#ffffff;
}

.culture-card:nth-child(1):hover .culture-icon{
    background:#7c3aed;
}

.culture-card:nth-child(2):hover .culture-icon{
    background:#2563eb;
}

.culture-card:nth-child(3):hover .culture-icon{
    background:#16a34a;
}

.culture-card:nth-child(4):hover .culture-icon{
    background:#ea580c;
}

.culture-card:nth-child(5):hover .culture-icon{
    background:#e11d48;
}

.culture-card:nth-child(6):hover .culture-icon{
    background:#0891b2;
}

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

@media (max-width:991px){

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

}

@media (max-width:600px){

    .culture-card{
        padding:28px;
    }

    .culture-icon{
        width:62px;
        height:62px;
        font-size:26px;
        border-radius:18px;
    }

    .culture-card h3{
        font-size:1.4rem;
    }

}
/* ================================
   MOBILE RESPONSIVE FIX
   ================================ */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* Prevent large sections from pushing outside the screen */
main,
section,
footer,
header {
    max-width: 100%;
}

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

    body {
        width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Header */
    header {
        width: 100%;
    }

    /* Hero */
    .hero {
        width: 100%;
        overflow: hidden;
    }

    .hero .container {
        width: 100%;
        padding: 70px 20px 40px;
    }

    /* Hero heading */
    .hero h1 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(42px, 11vw, 64px);
        line-height: 0.98;
        letter-spacing: -2px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Hero paragraph */
    .hero p {
        width: 100%;
        max-width: 100%;
        font-size: 18px;
        line-height: 1.6;
        margin-left: 0;
        margin-right: 0;
    }

    /* Hero layout */
    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 40px;
    }

    /* Dashboard / hero visual */
    .hero-dashboard,
    .dashboard,
    .dashboard-card {
        width: 100%;
        max-width: 100%;
    }

    /* Buttons */
    .hero-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .hero-buttons a,
    .hero-buttons button {
        width: 100%;
        max-width: 100%;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Cards */
    .card,
    .service-card,
    .feature-card {
        max-width: 100%;
    }
}

/* Smaller phones */
@media (max-width: 480px) {

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero .container {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 55px;
    }

    .hero h1 {
        font-size: clamp(38px, 10.5vw, 52px);
        line-height: 1;
        letter-spacing: -1.5px;
    }

    .hero p {
        font-size: 17px;
        line-height: 1.55;
    }
}
/* Mobile menu */
@media (max-width: 768px) {
    nav {
        display: none;
    }

    nav.mobile-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 20px;
        background: #000;
        z-index: 1000;
    }

    nav.mobile-open a {
        display: block;
        width: 100%;
        padding: 15px 0;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}
/* ==========================================
   MOBILE RESPONSIVE FIX
========================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Hamburger */
.nav-toggle {
    display: none;
    border: none;
    background: white;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
}

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

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-header {
        width: 100%;
    }

    .header-inner {
        min-height: 82px;
        width: 100%;
    }

    .brand {
        min-width: 0;
    }

    .brand span {
        white-space: nowrap;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 82px;
        left: 20px;
        right: 20px;
        width: auto;
        flex-direction: column;
        background: #ffffff;
        border-radius: 18px;
        padding: 15px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        z-index: 9999;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu.open a {
    color: #111827 !important;
    background: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    text-decoration: none !important;
}

.nav-menu.open a:hover {
    color: #7c3aed !important;
}

    .header-buttons {
        display: none;
    }

    .nav-toggle {
        display: flex;
        flex-shrink: 0;
        position: relative;
        z-index: 10000;
    }

    /* HERO */

    .hero {
        width: 100%;
        overflow: hidden;
    }

    .hero-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 40px;
    }

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

    .hero-badge {
        display: inline-flex;
        max-width: 100%;
        font-size: 15px;
        padding: 14px 20px;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(42px, 11vw, 64px);
        line-height: 1.05;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .hero h1 span {
        display: inline;
    }

    .hero-content > p {
        width: 100%;
        max-width: 100%;
        font-size: 18px;
        line-height: 1.7;
    }

    .hero-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .hero-buttons .button {
        width: 100%;
    }

    .hero-stats {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* DASHBOARD */

    .hero-dashboard {
        width: 100%;
        max-width: 100%;
    }

    .dashboard-window {
        width: 100%;
        max-width: 100%;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .metric-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .metric-card {
        min-width: 0;
        padding: 18px;
    }

    .metric-card h2 {
        font-size: 25px;
    }

    .dashboard-bottom {
        grid-template-columns: 1fr;
    }

    /* GENERAL SECTIONS */

    .section-head {
        width: 100%;
        max-width: 100%;
    }

    .section-head h2 {
        font-size: clamp(34px, 9vw, 48px);
        line-height: 1.1;
    }

    .section-head p {
        font-size: 17px;
        line-height: 1.6;
    }

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

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

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

    .process-timeline {
        width: 100%;
    }

    .process-card {
        width: 100%;
        max-width: 100%;
    }

    .cta-panel {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

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

    .cta-buttons .button {
        width: 100%;
    }

    /* FOOTER */

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}

/* Smaller phones */
@media (max-width: 480px) {

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .brand-mark {
        width: 52px;
        height: 52px;
    }

    .brand span {
        font-size: 20px;
    }

    .nav-toggle {
        width: 52px;
        height: 52px;
    }

    .hero h1 {
        font-size: 43px;
    }

    .hero-content > p {
        font-size: 17px;
    }

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

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

}
/* ==========================================
   MOBILE NAVIGATION FIX
========================================== */

.nav-toggle {
    display: none;
}

@media (max-width: 768px) {

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border: none;
        border-radius: 16px;
        background: white;
        cursor: pointer;
        font-size: 28px;
        color: #7c3aed;
        z-index: 1001;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .nav-menu.active {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .nav-menu a {
        display: block;
        width: 100%;
        padding: 16px;
        text-align: center;
        border-radius: 12px;
        text-decoration: none;
    }
}
.nav-toggle {
    display: none;
}

@media (max-width: 768px) {

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border: none;
        border-radius: 16px;
        background: #ffffff;
        color: #7c3aed;
        font-size: 28px;
        cursor: pointer;
        position: relative;
        z-index: 1001;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        padding: 20px;
        flex-direction: column;
        gap: 10px;
        z-index: 1000;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        width: 100%;
        padding: 15px;
        text-align: center;
    }
}
@media (max-width: 768px) {

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 9999;
        cursor: pointer;
        pointer-events: auto;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 20px;
        z-index: 9998;
        flex-direction: column;
        gap: 10px;
    }

    .nav-menu.open {
        display: flex;
    }

    .nav-menu a {
        display: block;
        width: 100%;
        padding: 15px;
        text-align: center;
    }
}
/* ==========================================
   MOBILE MENU
========================================== */

@media (max-width: 768px) {

    .site-header {
        position: relative;
        z-index: 10000;
        background: #000000;
    }

    .header-inner {
        position: relative;
    }

    /* Hamburger - far right */
    .nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;

        position: absolute !important;
        right: 20px !important;
        left: auto !important;
        top: 50%;
        transform: translateY(-50%);

        width: 64px;
        height: 64px;

        background: #ffffff;
        border: none;
        border-radius: 18px;

        cursor: pointer;
        z-index: 10001;
    }

    .nav-toggle i {
        color: #7c3aed;
        font-size: 28px;
        pointer-events: none;
    }

    /* Mobile dropdown */
    .nav-menu {
        position: absolute !important;
        top: 100%;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        display: none !important;
        flex-direction: column;

        background: #000000 !important;

        padding: 10px 20px 20px !important;
        margin: 0 !important;

        z-index: 10000;
    }

    /* Open menu */
    .nav-menu.open,
    .nav-menu.active {
        display: flex !important;
    }

    /* Menu links */
    .nav-menu a {
        display: block !important;

        width: 100% !important;
        box-sizing: border-box;

        padding: 18px 15px !important;

        background: #000000 !important;
        color: #ffffff !important;

        text-align: center !important;
        text-decoration: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        cursor: pointer;
    }

    /* Active link */
    .nav-menu a.active {
        color: #a855f7 !important;
    }

    /* Hover */
    .nav-menu a:hover {
        color: #a855f7 !important;
        background: #000000 !important;
    }

    /* Hide Get a Quote in header */
    .header-buttons {
        display: none !important;
    }
}
/* ==========================================
   MOBILE MENU - BLACK FIX
========================================== */

@media (max-width: 768px) {

    .nav-menu.open,
    .nav-menu.active {
        background: #000000 !important;
        background-color: #000000 !important;
    }

    .nav-menu.open > a,
    .nav-menu.active > a {
        background: #000000 !important;
        background-color: #000000 !important;

        color: #ffffff !important;

        opacity: 1 !important;
        visibility: visible !important;

        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;

        border: none !important;
        border-bottom: 1px solid #333333 !important;
    }

    .nav-menu.open > a.active,
    .nav-menu.active > a.active {
        background: #000000 !important;
        background-color: #000000 !important;
        color: #a855f7 !important;
    }

    .nav-menu.open > a:hover,
    .nav-menu.active > a:hover {
        background: #000000 !important;
        background-color: #000000 !important;
        color: #a855f7 !important;
    }
}
/* ==========================================
   MOBILE HEADER FINAL POSITION
========================================== */

@media (max-width: 768px) {

    .header-inner {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Travik Tech stays on the left */
    .brand {
        flex-shrink: 0 !important;
    }

    /* Get a Quote in the middle */
    .header-buttons {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        display: flex !important;
        margin: 0 !important;
    }

    .header-buttons .button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 12px 16px !important;
        font-size: 13px !important;

        white-space: nowrap !important;
    }

    /* Hamburger stays at the far right */
    .nav-toggle {
        display: flex !important;

        margin-left: auto !important;
        margin-right: 0 !important;

        width: 56px !important;
        height: 56px !important;

        flex-shrink: 0 !important;

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

        background: #ffffff !important;
        border: none !important;
        border-radius: 16px !important;

        z-index: 10001 !important;
    }

    .nav-toggle i {
        color: #7c3aed !important;
        font-size: 25px !important;
    }
}
/* ==========================================
   MOBILE GET A QUOTE BUTTON - NO ARROW
========================================== */

@media (max-width: 768px) {

    .header-buttons {
        display: flex !important;
        align-items: center;
        justify-content: center;

        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        margin: 0 !important;
    }

    .header-buttons .button {
        white-space: nowrap;
    }

    /* Hide arrow inside Get a Quote */
    .header-buttons .button i {
        display: none !important;
    }

    /* Keep hamburger on the far right */
    .nav-toggle {
        position: relative !important;
        margin-left: auto !important;
    }
}
/* ==========================================
   FINAL MOBILE HEADER POSITION
   Get a Quote centered between logo and hamburger
========================================== */

@media (max-width: 768px) {

    .site-header .header-inner {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Travik Tech stays on the left */
    .site-header .brand {
        flex-shrink: 0 !important;
    }

    /* Get a Quote */
    .site-header .header-buttons {
        display: block !important;

        position: absolute !important;

        /* Move it into the space between logo and hamburger */
        left: 58% !important;
        top: 50% !important;

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

        margin: 0 !important;

        z-index: 10001 !important;
    }

    .site-header .header-buttons .button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;

        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    /* Hamburger stays completely on the far right */
    .site-header .nav-toggle {
        display: flex !important;

        margin-left: auto !important;

        position: relative !important;

        z-index: 10002 !important;
    }

    /* Completely remove the arrow from Get a Quote */
    .site-header .header-buttons .button i {
        display: none !important;
    }
}
/* ==========================================
   FINAL MOBILE HEADER ALIGNMENT
========================================== */

@media (max-width: 768px) {

    .site-header .header-inner {
        height: 82px !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Travik Tech */
    .site-header .brand {
        display: flex !important;
        align-items: center !important;
        height: 56px !important;
        margin: 0 !important;
    }

    /* Get a Quote */
    .site-header .header-buttons {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }

    .site-header .header-buttons .button {
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hamburger */
    .site-header .nav-toggle {
        width: 56px !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 0 0 auto !important;
    }
}/* ==========================================
   FINAL MOBILE HEADER VERTICAL ALIGNMENT
========================================== */

@media (max-width: 768px) {

    .site-header .header-inner {
        display: flex !important;
        align-items: center !important;
    }

    /* Travik Tech */
    .site-header .brand {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Get a Quote */
    .site-header .header-buttons {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }

    .site-header .header-buttons .button {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hamburger */
    .site-header .nav-toggle {
        position: relative !important;
        top: 0 !important;
        transform: none !important;

        width: 56px !important;
        height: 56px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

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

}
/* ==========================================
   ABOUT PAGE - MOBILE FIX
========================================== */

@media (max-width: 768px) {

    /* Give the About page content proper space below header */
    body:has(.about-hero) .about-hero {
        padding-top: 70px !important;
    }

    /* Keep About page hero inside the screen */
    body:has(.about-hero) .about-hero .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Prevent About heading from being cut off */
    body:has(.about-hero) .about-hero h1 {
        font-size: 44px !important;
        line-height: 1.08 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* About paragraph */
    body:has(.about-hero) .about-hero p {
        width: 100% !important;
        max-width: 100% !important;
    }

}
/* ==========================================
   ABOUT CTA - MOBILE SPACING
   ========================================== */

@media (max-width: 768px) {

    .about-cta {
        padding-bottom: 40px !important;
    }

    .about-cta h2 {
        margin-bottom: 20px !important;
    }

    .about-cta p {
        margin-bottom: 28px !important;
    }

    .about-cta .button {
        margin-top: 0 !important;
    }

}
/* ==========================================
   ABOUT PAGE - MOBILE TEXT FIX
   ========================================== */

@media (max-width: 768px) {

    .about-hero {
        overflow: hidden !important;
    }

    .about-hero h1,
    .about-hero p {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .about-hero h1 {
        font-size: 44px !important;
        line-height: 1.08 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .about-hero p {
        font-size: 18px !important;
        line-height: 1.6 !important;
        overflow-wrap: break-word !important;
    }

}
/* ==========================================
   FINAL MOBILE FIX - ABOUT PAGE
   ========================================== */

@media (max-width: 768px) {

    .about-hero,
    .about-hero .container,
    .about-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .about-hero .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .about-hero h1 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .about-hero p {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

}
/* ==========================================
   ABOUT PAGE - FIX MOBILE OVERFLOW
   ========================================== */

@media (max-width: 768px) {

    /* Make the About layout fit the screen */
    .about-hero-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Make the left content fit inside the grid */
    .about-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Stop the About heading from creating horizontal overflow */
    .about-content h1 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    /* Keep paragraphs inside the screen */
    .about-content p {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    /* Make the main container fit the phone */
    .about-hero .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

}
/* =========================================================
   ABOUT PAGE - MOBILE FIX
========================================================= */

@media (max-width: 768px) {

    /* Keep the whole About hero inside the phone */
    .about-hero,
    .about-hero .container,
    .about-hero-grid,
    .about-content,
    .about-right,
    .about-dashboard,
    .technology-ecosystem {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .about-hero .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Main About layout becomes one column */
    .about-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* About text */
    .about-content {
        overflow: hidden !important;
    }

    .about-hero h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 44px !important;
        line-height: 1.08 !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .about-hero p {
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Buttons stay inside the screen */
    .about-hero .hero-buttons {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-hero .hero-buttons .button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Strengths section */
    .dashboard-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* IMPORTANT: prevents cards from being cut on the right */
    .dashboard-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .dashboard-card strong,
    .dashboard-card small {
        display: block !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Technology Ecosystem */
    .technology-ecosystem {
        overflow: hidden !important;
    }

    .ecosystem-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .ecosystem-image {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ecosystem-image img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
}
/* =========================================================
   CAREERS PAGE - MOBILE ONLY
   Keep desktop layout exactly as it is
========================================================= */

@media screen and (max-width: 768px) {

    /* Careers hero becomes a single vertical column */
    .careers-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
    }

    /* Text section */
    .careers-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        order: 1 !important;
        box-sizing: border-box !important;
    }

    /* Make paragraph finish before dashboard */
    .careers-hero-content p {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        margin-bottom: 30px !important;
    }

    /* Dashboard MUST be underneath */
    .career-dashboard {
        order: 2 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 30px 0 0 0 !important;
        padding: 0 !important;

        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;
        float: none !important;
        clear: both !important;

        grid-column: auto !important;
        grid-row: auto !important;

        box-sizing: border-box !important;
    }

    /* Dashboard itself must not create a side-by-side layout */
    .career-dashboard .dashboard-cards {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

}
/* =========================================================
   CAREERS PAGE - MOBILE LAYOUT FIX
   Keeps desktop layout unchanged
========================================================= */

@media screen and (max-width: 768px) {

    /* Force the Careers hero into one column */
    .careers-hero .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Left text/content stays first */
    .careers-hero .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    /* Career dashboard moves BELOW the paragraph */
    .careers-hero .career-dashboard {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 40px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        float: none !important;
        clear: both !important;
        grid-column: auto !important;
        grid-row: auto !important;
        order: 2 !important;
        box-sizing: border-box !important;
    }

    /* Make sure the dashboard itself doesn't overflow */
    .careers-hero .career-dashboard *,
    .careers-hero .career-dashboard {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}
/* =========================================================
   MOBILE HERO POSITION - ALL PAGES
   Desktop is NOT affected
========================================================= */

@media screen and (max-width: 768px) {

    main > .hero {
        margin-top: 0 !important;
        padding-top: 40px !important;
    }

    main > .hero .container {
        padding-top: 0 !important;
    }

}
/* ==========================================
   TRAVIK TECH ORIGINAL LOGO
========================================== */

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* ==========================================
   FINAL LOGO OVERRIDE
   This overrides all previous logo styles
========================================== */

.brand-mark {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;

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

    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;

    overflow: visible !important;
    flex-shrink: 0 !important;
}

.brand-mark img {
    display: block !important;

    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;

    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* ==========================================
   FORCE TRAVIK TECH LOGO
   ========================================== */

.site-header .brand-mark {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;

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

    background: #000 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.site-header .brand-mark i {
    display: none !important;
}

.site-header .brand-mark::after {
    content: "" !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    background-image: url("../images/Logo.png") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* ==========================================
   MOBILE FOOTER
   ========================================== */

@media screen and (max-width: 768px) {

    footer,
    .site-footer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    footer .container,
    .site-footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    footer * ,
    .site-footer * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    footer .footer-inner,
    .site-footer .footer-inner {
        width: 100% !important;
        max-width: 100% !important;
    }

    footer .footer-content,
    .site-footer .footer-content {
        width: 100% !important;
        max-width: 100% !important;
    }

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

    footer .brand-mark i,
    .site-footer .brand-mark i {
        display: none !important;
    }

    footer .brand-mark::after,
    .site-footer .brand-mark::after {
        content: "" !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url("../images/Logo.png") !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

}
/* ==========================================
   MOBILE - PERFORMANCE DASHBOARD FIX
========================================== */

@media screen and (max-width: 768px) {

    .hero-dashboard .dashboard-header h3 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 36px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow: visible !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        box-sizing: border-box !important;
    }

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

    .hero-dashboard {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .hero-dashboard .dashboard-window {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .hero-dashboard .dashboard-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

}
/* ================================
   SERVICE PAGE MOBILE FIX
   ================================ */

@media (max-width: 768px) {

    /* Prevent horizontal scrolling */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Keep all sections inside the phone screen */
    .container,
    .section,
    .services-section,
    .service-section {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Service cards */
    .services-grid,
    .services-list,
    .service-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .service-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Two-column sections → one column */
    .what-we-deliver,
    .delivery-grid,
    .performance-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    /* Prevent headings/text from pushing outside */
    h1,
    h2,
    h3,
    p {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* Hero heading */
    .hero h1,
    .hero-title {
        max-width: 100%;
        font-size: clamp(42px, 11vw, 64px);
        line-height: 1;
    }

    /* Technologies */
    .technologies-grid,
    .tech-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100%;
    }

    /* Delivery cards */
    .delivery-card,
    .performance-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
    }

    * {
        max-width: 100%;
        box-sizing: border-box;
    }
}
/* =========================================================
   SERVICE MODAL - MOBILE OVERFLOW FIX
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Modal stays inside the phone */
    .service-modal {
        padding: 16px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .service-modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        padding: 30px 22px;
        margin: 0;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 28px;
    }

    /* Modal title */
    .modal-title {
        font-size: 2.2rem;
        line-height: 1.15;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* IMPORTANT: feature list becomes one column */
    .modal-features {
        grid-template-columns: 1fr !important;
        gap: 18px;
        width: 100%;
        min-width: 0;
    }

    .modal-feature {
        min-width: 0;
        width: 100%;
    }

    .modal-feature span {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Technology tags */
    .modal-tech {
        width: 100%;
        max-width: 100%;
    }

    .modal-tech span {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    /* Bottom information cards */
    .modal-bottom {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    /* Modal CTA */
    .modal-cta {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 30px 20px;
    }

    .modal-button {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Close button */
    .close-modal {
        top: 18px;
        right: 18px;
        width: 48px;
        height: 48px;
    }
}


/* Smaller phones */
@media screen and (max-width: 480px) {

    .service-modal-content {
        padding: 26px 18px;
        border-radius: 24px;
    }

    .modal-title {
        font-size: 2rem;
    }

    .modal-heading {
        font-size: 1.4rem;
    }

    .modal-text {
        font-size: 1rem;
        line-height: 1.8;
    }

    .modal-feature {
        font-size: 1rem;
    }
}
/* =========================================================
   TRAVIK TECH — SERVICES PAGE ONLY
   Mobile + Desktop Layout Fix
   ========================================================= */

/* Everything below only applies when the Services page
   contains .services-hero */
body:has(.services-hero) {

    /* Prevent horizontal overflow */
    overflow-x: hidden;

    /* Keep sections inside the screen */
    width: 100%;
}

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

body:has(.services-hero) .services-hero {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

body:has(.services-hero) .services-hero .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Hero heading */

body:has(.services-hero) .services-hero h1 {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: normal;
    word-break: normal;
}

body:has(.services-hero) .services-hero .highlight {
    display: inline;
}

/* Hero paragraph */

body:has(.services-hero) .services-hero p {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* =========================================================
   SERVICES CONTENT / CARDS
   ========================================================= */

body:has(.services-hero) .services-section,
body:has(.services-hero) .services-grid,
body:has(.services-hero) .service-grid {
    box-sizing: border-box;
    width: 100%;
}

body:has(.services-hero) .service-card {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

body:has(.services-hero) .service-card img {
    max-width: 100%;
    height: auto;
}

body:has(.services-hero) .service-card h2,
body:has(.services-hero) .service-card h3 {
    overflow-wrap: break-word;
}

body:has(.services-hero) .service-card p {
    overflow-wrap: break-word;
}

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

body:has(.services-hero) .services-hero a,
body:has(.services-hero) .services-hero button {
    box-sizing: border-box;
    max-width: 100%;
}

/* =========================================================
   MOBILE — UP TO 480px
   ========================================================= */

@media screen and (max-width: 480px) {

    body:has(.services-hero) .services-hero {
        padding-top: 70px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 60px;
    }

    body:has(.services-hero) .services-hero .container {
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Our Services pill */

    body:has(.services-hero) .services-hero .section-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 14px 24px;
        margin-bottom: 35px;

        font-size: 1rem;
        line-height: 1.2;

        max-width: 100%;
        box-sizing: border-box;
    }

    /* Main heading */

    body:has(.services-hero) .services-hero h1 {
        width: 100%;
        max-width: 100%;

        margin: 0 0 30px 0;

        font-size: clamp(2.8rem, 12vw, 3.5rem);
        line-height: 0.98;
        letter-spacing: -0.055em;

        overflow-wrap: break-word;
    }

    /* Purple words */

    body:has(.services-hero) .services-hero h1 .highlight {
        font-size: inherit;
        line-height: inherit;
        white-space: normal;
    }

    /* Description */

    body:has(.services-hero) .services-hero p {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: 1.08rem;
        line-height: 1.65;

        overflow-wrap: break-word;
    }

    /* Service cards */

    body:has(.services-hero) .service-grid,
    body:has(.services-hero) .services-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    body:has(.services-hero) .service-card {
        width: 100%;
        min-width: 0;
    }

    /* Any service section containers */

    body:has(.services-hero) .services-section .container {
        width: 100%;
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
    }

    /* Images */

    body:has(.services-hero) img {
        max-width: 100%;
    }

}

/* =========================================================
   SMALL TABLETS — 481px to 768px
   ========================================================= */

@media screen and (min-width: 481px) and (max-width: 768px) {

    body:has(.services-hero) .services-hero {
        padding-left: 40px;
        padding-right: 40px;
    }

    body:has(.services-hero) .services-hero h1 {
        font-size: clamp(3.5rem, 9vw, 5rem);
        line-height: 1;
    }

    body:has(.services-hero) .services-hero p {
        max-width: 700px;
    }

    body:has(.services-hero) .service-grid,
    body:has(.services-hero) .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

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

@media screen and (min-width: 769px) {

    body:has(.services-hero) .services-hero h1 {
        font-size: clamp(4.5rem, 7vw, 7rem);
        line-height: 0.95;
    }

    body:has(.services-hero) .services-hero p {
        font-size: 1.2rem;
        line-height: 1.7;
    }

}

/* =========================================================
   EXTRA SAFETY — SERVICES PAGE
   ========================================================= */

body:has(.services-hero) *,
body:has(.services-hero) *::before,
body:has(.services-hero) *::after {
    box-sizing: border-box;
}

body:has(.services-hero) .container {
    overflow: visible;
}

@media screen and (max-width: 480px) {

    body:has(.services-hero) .container {
        overflow: visible;
    }

    body:has(.services-hero) .services-hero br {
        display: none;
    }
}
/* =========================================
   SERVICES PAGE — MOBILE HERO FIX
   ========================================= */

@media screen and (max-width: 768px) {

    /* Keep the entire hero inside the screen */
    .services-hero {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 55px 24px 40px;
        margin: 0;
        overflow: hidden;
    }

    /* Hero heading */
    .services-hero h1 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        font-size: clamp(3rem, 11vw, 4.5rem);
        line-height: 1.02;
        letter-spacing: -0.055em;

        overflow-wrap: normal;
        word-break: normal;
        white-space: normal;
    }

    /* Prevent highlighted text from creating overflow */
    .services-hero h1 span {
        max-width: 100%;
        white-space: normal;
    }

    /* Hero paragraph */
    .services-hero p {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        font-size: 1.05rem;
        line-height: 1.6;

        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Buttons */
    .services-hero .btn,
    .services-hero a {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Remove accidental horizontal overflow */
    .services-hero * {
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media screen and (max-width: 480px) {

    .services-hero {
        padding: 55px 24px 40px;
    }

    .services-hero h1 {
        font-size: 3.15rem;
        line-height: 1;
        letter-spacing: -0.055em;
    }

    .services-hero p {
        font-size: 1.05rem;
        line-height: 1.6;
    }
}
/* =========================================
   SERVICES PAGE - MOBILE HERO FIX
   ========================================= */

@media screen and (max-width: 768px) {

    .services-hero {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 55px 24px 40px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .services-hero h1 {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;

        font-size: 3.15rem;
        line-height: 1.02;
        letter-spacing: -0.05em;

        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .services-hero p {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;

        font-size: 1.05rem;
        line-height: 1.6;

        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    .services-hero .btn,
    .services-hero a {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* Smaller phones */
@media screen and (max-width: 480px) {

    .services-hero {
        padding: 55px 24px 40px;
    }

    .services-hero h1 {
        font-size: 3rem;
        line-height: 1.03;
        letter-spacing: -0.05em;
    }

    .services-hero p {
        font-size: 1rem;
        line-height: 1.6;
    }
}
/* Services page - add more space before buttons */
.hero-actions {
    margin-top: 35px;
}
/* SERVICES DASHBOARD - MOBILE FIX */
@media screen and (max-width: 768px) {

    .services-dashboard {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .dashboard-header {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    .dashboard-header h3 {
        font-size: 1.35rem;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .dashboard-stats {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .service-mini {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .service-mini h4,
    .service-mini p {
        overflow-wrap: break-word;
    }

    .dashboard-chart {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .chart-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .tech-stack {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex-wrap: wrap;
    }

}
/* ABOUT PAGE - OUR STRENGTHS MOBILE FIX */
@media screen and (max-width: 768px) {

    .strengths-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .strength-card {
        min-width: 0;
        padding: 24px 14px;
    }

    .strength-card h3 {
        font-size: 1rem;
        line-height: 1.3;
    }

    .strength-card p {
        font-size: 0.85rem;
        line-height: 1.5;
    }

}
/* ABOUT DASHBOARD - MOBILE FIX */
@media screen and (max-width: 768px) {

    .about-right {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .about-dashboard {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .dashboard-insights {
        width: 100%;
        box-sizing: border-box;
    }

    .dashboard-insights p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .dashboard-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .dashboard-card {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 22px 12px;
    }

    .dashboard-card strong {
        font-size: 0.95rem;
        line-height: 1.3;
        overflow-wrap: break-word;
    }

    .dashboard-card small {
        font-size: 0.8rem;
        line-height: 1.4;
        overflow-wrap: break-word;
    }

}