/* ==============================
   GOOGLE FONT
==============================*/
:root {

    --gh-bg: #061321;
    --gh-bg-light: #081827;

    --gh-card: #0d2236;
    --gh-card-hover: #102b43;

    --gh-blue: #168cff;
    --gh-cyan: #19b5ff;

    --gh-white: #ffffff;
    --gh-text: #d9e5f0;
    --gh-muted: #8fa5b9;

    --gh-border: rgba(255,255,255,0.08);

    --gh-container: 1200px;
      --a-bg-a: #081524;

    --a-bg-dark-a: #08131f;

    --a-card-a: #11263d;

    --a-card-hover-a: #15304b;

    --a-blue-a: #159ff5;

    --a-blue-light-a: #45b8ff;

    --a-white-a: #ffffff;

    --a-text-a: #eaf2fa;

    --a-text-light-a: #b8c7d9;

    --a-text-muted-a: #7f91a6;

    --a-border-a: rgba(116, 163, 202, 0.18);

    --a-border-blue-a: rgba(21, 159, 245, 0.35);

    --a-shadow-a:
        0 20px 60px rgba(0, 0, 0, 0.25);

    --a-radius-a: 20px;

    --a-transition-a: 0.35s ease;
    
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {

    background: #071321;
 font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--gh-bg);

    color: var(--gh-white);

    overflow-x: hidden;
}
 /* =========================================================
   GROWTH HARBOUR — ABOUT PAGE
   Premium Dark Navy + Cyan Theme
========================================================= */


.about-container {

    width: min(
        92%,
        var(--gh-container)
    );

    margin: auto;
}
.life-carousel-v {
    display: flex;
    gap: 18px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    padding: 5px 3px 18px;

    scrollbar-width: thin;
}

.life-carousel-v::-webkit-scrollbar {
    height: 5px;
}

.life-carousel-v::-webkit-scrollbar-track {
    background: #151b23;
}

.life-carousel-v::-webkit-scrollbar-thumb {
    background: #00bfff;
    border-radius: 20px;
}

.life-slide-v {
    min-width: 72%;
    height: 370px !important;
    scroll-snap-align: start;
    flex-shrink: 0;
}

.life-image-placeholder-v {
    width: 100%;
    height: 100%;

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

    border-radius: 18px;

    border: 1px dashed rgba(255, 255, 255, 0.16);

    background:
        linear-gradient(
            135deg,
            rgba(0, 191, 255, 0.035),
            rgba(255, 215, 0, 0.018)
        );

    color: #4f5b68;

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

    letter-spacing: 2px;

    position: relative;
    overflow: hidden;
}

.life-image-placeholder-v::before {
    content: "";

    position: absolute;
    width: 180px;
    height: 180px;

    border-radius: 50%;

    border: 1px solid rgba(0, 191, 255, 0.08);
}

.life-image-placeholder-v::after {
    content: "";

    position: absolute;
    width: 100%;
    height: 1px;

    background: rgba(0, 191, 255, 0.1);

    top: 50%;
    left: 0;
}
/* Card Container */
.life-image-wrapper-v {
    position: relative !important;
    width: 100% !important;
    height: 380px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #0f172a !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
}

/* Image with Smooth Zoom & Subtle Dimming */
.life-image-wrapper-v img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: brightness(0.92) contrast(1.05) !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease !important;
}

/* Soft dark overlay */
.life-image-wrapper-v::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.6) 100%
    ) !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
}

/* Hover Effects */
.life-image-wrapper-v:hover img {
    transform: scale(1.08) !important;
    filter: brightness(1) !important;
}

/* Frosted Glass Badge (Top-Left Position) */
.life-badge-v {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    
    /* Modern Glassmorphism effect */
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    
    /* Typography */
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Little accent dot inside the badge */
.badge-dot {
    width: 6px !important;
    height: 6px !important;
    background: #38bdf8 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #38bdf8 !important;
}

/* Badge hover reaction */
.life-image-wrapper-v:hover .life-badge-v {
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}


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

.about-navbar {

    height: 92px;

    display: flex;
    align-items: center;

    background:
        rgba(6,19,33,.94);

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

    backdrop-filter:
        blur(18px);

    position: sticky;

    top: 0;

    z-index: 1000;
}


.about-nav-container {

    width: min(
        92%,
        1380px
    );

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* LOGO */

.about-logo img {

    width: 65px;

    height: auto;

    object-fit: contain;
}


/* NAV LINKS */

.about-nav-links {

    display: flex;

    align-items: center;

    gap: 37px;
}


.about-nav-links a {

    color:
        #e6edf4;

    font-size: 16px;

    transition:
        .3s;

    position: relative;
}


.about-nav-links a:hover {

    color:
        var(--gh-cyan);
}


.about-nav-links a.active {

    color:
        var(--gh-cyan);
}


.about-nav-links a.active::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -13px;

    width: 100%;

    height: 2px;

    background:
        var(--gh-cyan);

    box-shadow:
        0 0 12px
        rgba(25,181,255,.8);
}


/* NAV BUTTON */

.about-nav-btn {

    padding:
        15px 28px;

    border-radius:
        40px;

    background:
        linear-gradient(
            135deg,
            var(--gh-cyan),
            var(--gh-blue)
        );

    font-weight:
        700;

    transition:
        .3s;
}


.about-nav-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 35px
        rgba(22,140,255,.3);
}


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

.about-section {

    padding:
        110px 0;

    position:
        relative;
}


.about-label {

    display:
        inline-block;

    color:
        var(--gh-cyan);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    margin-bottom:
        18px;
}


.section-heading {

    max-width:
        750px;

    margin-bottom:
        60px;
}


.section-heading h2,
.difference-heading h2,
.experience-content h2 {

    font-size:
        clamp(38px,5vw,64px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        22px;
}


.section-heading h2 span,
.difference-heading h2 span,
.experience-content h2 span,
.who-content h2 span,
.about-hero-content h1 span,
.about-cta-box h2 span {

    color:
        var(--gh-cyan);
}


.section-heading p,
.difference-heading > p,
.experience-content p {

    color:
        var(--gh-muted);

    font-size:
        17px;

    line-height:
        1.8;
}


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

.about-hero {

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    position:
        relative;

    overflow:
        hidden;
}


.hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;
}


.hero-glow-one {

    width:
        600px;

    height:
        600px;

    left:
        -280px;

    top:
        50px;

    background:
        radial-gradient(
            circle,
            rgba(25,181,255,.13),
            transparent 68%
        );
}


.hero-glow-two {

    width:
        550px;

    height:
        550px;

    right:
        -250px;

    bottom:
        -250px;

    background:
        radial-gradient(
            circle,
            rgba(22,124,255,.13),
            transparent 68%
        );
}


.about-hero-grid {

    display:
        grid;

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

    align-items:
        center;

    gap:
        90px;
}


/* HERO VISUAL */

.about-hero-visual {

    min-height:
        520px;

    position:
        relative;

    display:
        grid;

    place-items:
        center;
}


.hero-main-card {

    width:
        370px;

    height:
        440px;

    border-radius:
        35px;

    background:
        linear-gradient(
            145deg,
            rgba(25,181,255,.12),
            rgba(13,34,54,.95)
        );

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

    position:
        relative;

    overflow:
        hidden;

    transform:
        rotate(-5deg);

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


.hero-card-glow {

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    top:
        50%;

    left:
        50%;

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

    background:
        radial-gradient(
            circle,
            rgba(25,181,255,.5),
            transparent 68%
        );
}


.hero-card-logo {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

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

    font-size:
        85px;

    font-weight:
        900;

    color:
        white;

    text-shadow:
        0 0 40px
        rgba(25,181,255,.8);
}


.hero-card-text {

    position:
        absolute;

    bottom:
        55px;

    left:
        50%;

    transform:
        translateX(-50%);

    font-size:
        13px;

    letter-spacing:
        5px;

    color:
        var(--gh-cyan);

    white-space:
        nowrap;
}


/* FLOATING CARDS */

.hero-floating-card {

    position:
        absolute;

    padding:
        18px 22px;

    border-radius:
        18px;

    background:
        rgba(13,34,54,.92);

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

    backdrop-filter:
        blur(20px);

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


.hero-floating-card strong {

    display:
        block;

    color:
        var(--gh-cyan);

    font-size:
        26px;

    margin-bottom:
        5px;
}


.hero-floating-card span {

    color:
        #c6d5e1;

    font-size:
        13px;
}


.hero-floating-one {

    top:
        55px;

    right:
        10px;
}


.hero-floating-two {

    bottom:
        50px;

    left:
        -10px;
}


/* HERO CONTENT */

.about-hero-content {

    max-width:
        700px;
}


.about-hero-content h1 {

    font-size:
        clamp(48px,6vw,82px);

    line-height:
        1.02;

    letter-spacing:
        -4px;

    margin-bottom:
        28px;
}


.about-hero-content > p {

    color:
        var(--gh-text);

    font-size:
        18px;

    line-height:
        1.8;

    margin-bottom:
        34px;
}


.about-hero-buttons,
.cta-buttons {

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;
}


/* BUTTONS */

.about-primary-btn,
.about-secondary-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        16px 27px;

    border-radius:
        12px;

    font-weight:
        700;

    transition:
        .3s;
}


.about-primary-btn {

    background:
        linear-gradient(
            135deg,
            var(--gh-cyan),
            var(--gh-blue)
        );
}


.about-secondary-btn {

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

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


.about-primary-btn:hover,
.about-secondary-btn:hover {

    transform:
        translateY(-4px);
}


.about-primary-btn:hover {

    box-shadow:
        0 15px 35px
        rgba(22,140,255,.25);
}


/* =========================================================
   WHO WE ARE
========================================================= */

.who-we-are {

    background:
        var(--gh-bg-light);
}


.who-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        90px;

    align-items:
        center;
}


.who-visual {

    min-height:
        480px;

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            #0d2236,
            #081827
        );

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

    position:
        relative;

    overflow:
        hidden;
}


.who-circle {

    position:
        absolute;

    border-radius:
        50%;

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

    top:
        50%;

    left:
        50%;

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


.circle-one {
    width:
        340px;
    height:
        340px;
}


.circle-two {
    width:
        245px;
    height:
        245px;
}


.circle-three {
    width:
        150px;
    height:
        150px;
}


.who-center-logo {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

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

    width:
        105px;

    height:
        105px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        25px;

    background:
        linear-gradient(
            135deg,
            var(--gh-cyan),
            var(--gh-blue)
        );

    font-size:
        30px;

    font-weight:
        900;

    box-shadow:
        0 0 70px
        rgba(25,181,255,.35);
}


.who-tag {

    position:
        absolute;

    padding:
        11px 17px;

    border-radius:
        30px;

    background:
        rgba(13,34,54,.95);

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

    color:
        #d6e5ef;

    font-size:
        13px;
}


.tag-one {
    top:
        80px;
    left:
        50px;
}


.tag-two {
    top:
        100px;
    right:
        40px;
}


.tag-three {
    bottom:
        80px;
    left:
        50%;
    transform:
        translateX(-50%);
}


.who-content h2 {

    font-size:
        clamp(38px,5vw,62px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        25px;
}


.who-content p {

    color:
        var(--gh-muted);

    font-size:
        17px;

    line-height:
        1.85;

    margin-bottom:
        18px;
}


.who-points {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin-top:
        28px;
}


.who-points div {

    padding:
        15px;

    border-radius:
        12px;

    background:
        rgba(13,34,54,.7);

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

    color:
        #dce8f2;
}


.who-points span {

    color:
        var(--gh-cyan);

    margin-right:
        7px;
}


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

.purpose-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        25px;
}


.purpose-card {

    padding:
        45px;

    min-height:
        390px;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #0d2236,
            #0a1d2e
        );

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

    position:
        relative;

    overflow:
        hidden;

    transition:
        .4s;
}


.purpose-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(25,181,255,.3);

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


.purpose-card::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    right:
        -120px;

    bottom:
        -130px;

    background:
        radial-gradient(
            circle,
            rgba(25,181,255,.12),
            transparent 70%
        );
}


.purpose-number {

    color:
        var(--gh-cyan);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        2px;

    margin-bottom:
        35px;
}


.purpose-card h3 {

    font-size:
        35px;

    line-height:
        1.15;

    margin-bottom:
        22px;
}


.purpose-card p {

    color:
        var(--gh-muted);

    line-height:
        1.8;

    font-size:
        16px;
}


.vision-line {

    margin-top:
        28px;

    color:
        var(--gh-cyan);

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        2px;

    line-height:
        1.8;
}


/* =========================================================
   DIFFERENCE
========================================================= */

.difference-section {

    background:
        var(--gh-bg-light);
}


.difference-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        50px;

    margin-bottom:
        55px;
}


.difference-heading > p {

    max-width:
        450px;
}


.difference-grid {

    display:
        grid;

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

    gap:
        18px;
}


.difference-card {

    min-height:
        275px;

    padding:
        32px;

    border-radius:
        22px;

    background:
        var(--gh-card);

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

    transition:
        .4s;

    position:
        relative;
}


.difference-card:hover {

    transform:
        translateY(-8px);

    background:
        var(--gh-card-hover);

    border-color:
        rgba(25,181,255,.3);

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


.difference-card > span {

    color:
        var(--gh-cyan);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        2px;

    display:
        block;

    margin-bottom:
        35px;
}


.difference-card h3 {

    font-size:
        22px;

    margin-bottom:
        14px;
}


.difference-card p {

    color:
        var(--gh-muted);

    line-height:
        1.7;

    font-size:
        15px;
}


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

.process-grid {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        70px;

    position:
        relative;
}


.process-grid::before {

    content:
        "";

    position:
        absolute;

    top:
        36px;

    left:
        7%;

    right:
        7%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gh-cyan),
            var(--gh-blue),
            transparent
        );
}


.process-item {

    text-align:
        center;

    position:
        relative;

    z-index:
        2;
}


.process-number {

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 25px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--gh-card);

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

    color:
        var(--gh-cyan);

    font-weight:
        800;

    box-shadow:
        0 0 30px
        rgba(25,181,255,.08);

    transition:
        .3s;
}


.process-item:hover
.process-number {

    background:
        linear-gradient(
            135deg,
            var(--gh-cyan),
            var(--gh-blue)
        );

    color:
        white;

    transform:
        scale(1.08);
}


.process-item h3 {

    font-size:
        17px;

    margin-bottom:
        10px;
}


.process-item p {

    color:
        var(--gh-muted);

    font-size:
        13px;

    line-height:
        1.6;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience-section {

    background:
        var(--gh-bg-light);
}


.experience-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;

    align-items:
        center;
}


.experience-content p {

    max-width:
        650px;

    margin-bottom:
        18px;
}


.expertise-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        30px;
}


.expertise-list span {

    padding:
        11px 16px;

    border-radius:
        50px;

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

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

    color:
        #c9dce9;

    font-size:
        13px;

    transition:
        .3s;
}


.expertise-list span:hover {

    background:
        rgba(25,181,255,.13);

    border-color:
        rgba(25,181,255,.4);

    color:
        white;
}


/* STATS */

.stats-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;
}


.stat-card {

    padding:
        32px;

    min-height:
        160px;

    border-radius:
        20px;

    background:
        var(--gh-card);

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

    transition:
        .3s;
}


.stat-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(25,181,255,.3);
}


.stat-card strong {

    display:
        block;

    font-size:
        43px;

    margin-bottom:
        8px;
}


.stat-card strong span {

    color:
        var(--gh-cyan);
}


.stat-card p {

    color:
        var(--gh-muted);

    font-size:
        14px;
}


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

.about-cta-section {

    padding:
        110px 0;
}


.about-cta-box {

    padding:
        90px 50px;

    text-align:
        center;

    border-radius:
        35px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(25,181,255,.22),
            transparent 55%
        ),

        linear-gradient(
            145deg,
            #0d2b44,
            #091c2c
        );

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

    position:
        relative;

    overflow:
        hidden;
}


.about-cta-box h2 {

    font-size:
        clamp(40px,5vw,68px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        22px;
}


.about-cta-box > p {

    max-width:
        650px;

    margin:
        0 auto 35px;

    color:
        var(--gh-muted);

    font-size:
        17px;

    line-height:
        1.8;
}


.cta-buttons {

    justify-content:
        center;
}


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

.about-footer {

    padding:
        35px 0;

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

    text-align:
        center;
}


.about-footer p {

    color:
        var(--gh-muted);

    font-size:
        14px;
}


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

@media(max-width:1100px) {


    .about-nav-links {

        gap:
            20px;
    }


    .about-nav-links a {

        font-size:
            14px;
    }


    .about-hero-grid,
    .who-grid,
    .experience-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            40px;
    }


    .difference-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .process-grid {

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

        row-gap:
            45px;
    }


    .process-grid::before {

        display:
            none;
    }

}


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

@media(max-width:800px) {


    .about-navbar {

        height:
            75px;
    }


    .about-nav-links {

        display:
            none;
    }


    .about-nav-btn {

        padding:
            12px 19px;

        font-size:
            13px;
    }


    .about-hero {

        min-height:
            auto;

        padding:
            80px 0;
    }


    .about-hero-grid,
    .who-grid,
    .purpose-grid,
    .experience-grid {

        grid-template-columns:
            1fr;
    }


    .about-hero-content {

        order:
            -1;
    }


    .about-hero-content h1 {

        font-size:
            clamp(46px,12vw,68px);

        letter-spacing:
            -3px;
    }


    .about-hero-content > p {

        font-size:
            16px;
    }


    .hero-main-card {

        width:
            290px;

        height:
            350px;
    }


    .about-hero-visual {

        min-height:
            400px;
    }


    .hero-floating-one {

        right:
            0;
    }


    .hero-floating-two {

        left:
            0;
    }


    .who-visual {

        min-height:
            390px;
    }


    .who-points {

        grid-template-columns:
            1fr;
    }


    .difference-heading {

        display:
            block;
    }


    .difference-heading > p {

        margin-top:
            20px;
    }


    .difference-grid {

        grid-template-columns:
            1fr;
    }


    .process-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            40px 15px;
    }


    .stats-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .about-section {

        padding:
            80px 0;
    }


    .about-cta-section {

        padding:
            80px 0;
    }


    .about-cta-box {

        padding:
            65px 25px;
    }

}


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

@media(max-width:500px) {


    .about-logo img {

        width:
            52px;
    }


    .about-nav-btn {

        padding:
            11px 16px;

        font-size:
            12px;
    }


    .about-hero-content h1 {

        font-size:
            44px;
    }


    .about-hero-buttons {

        flex-direction:
            column;
    }


    .about-primary-btn,
    .about-secondary-btn {

        justify-content:
            center;

        width:
            100%;
    }


    .hero-main-card {

        width:
            255px;

        height:
            320px;
    }


    .hero-floating-card {

        padding:
            13px 15px;
    }


    .hero-floating-card strong {

        font-size:
            21px;
    }


    .purpose-card {

        padding:
            30px;

        min-height:
            auto;
    }


    .purpose-card h3 {

        font-size:
            29px;
    }


    .process-grid {

        grid-template-columns:
            1fr;
    }


    .stats-grid {

        grid-template-columns:
            1fr;
    }


    .section-heading h2,
    .difference-heading h2,
    .experience-content h2 {

        font-size:
            42px;
    }


    .about-cta-box h2 {

        font-size:
            43px;
    }

}





/* ------------------------------------------------------ */


                          /* services page of css */

/* -------------------------------------------------------- */



/* =========================================================
   GROWTH HARBOUR
   SERVICES PAGE CSS
========================================================= */


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

:root {

    --bg:
        #061321;

    --bg-dark:
        #040e19;

    --bg-section:
        #081a2d;

    --card:
        #0b2035;

    --card-hover:
        #102942;

    --blue:
        #2563eb;

    --blue-light:
        #3b82f6;

    --cyan:
        #22d3ee;

    --cyan-light:
        #67e8f9;

    --white:
        #ffffff;

    --text:
        #f8fafc;

    --text-light:
        #cbd5e1;

    --text-muted:
        #94a3b8;

    --border:
        rgba(148, 163, 184, 0.14);

    --border-blue:
        rgba(59, 130, 246, 0.28);

    --gradient:
        linear-gradient(
            135deg,
            #2563eb,
            #22d3ee
        );

    --gradient-soft:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.15),
            rgba(34, 211, 238, 0.05)
        );

    --container:
        1200px;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

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

    background:
        var(--bg);

    color:
        var(--text);

    line-height:
        1.7;

    overflow-x:
        hidden;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    font-family:
        inherit;

}


img {

    display:
        block;

    max-width:
        100%;

}


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

.container {

    width:
        min(
            92%,
            var(--container)
        );

    margin:
        0 auto;

}


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

.services-navbar {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(
            6,
            19,
            33,
            0.88
        );

    backdrop-filter:
        blur(18px);

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

    border-bottom:
        1px solid
        rgba(
            148,
            163,
            184,
            0.08
        );

}


.nav-container {

    width:
        min(
            94%,
            1380px
        );

    min-height:
        78px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.nav-logo {

    flex-shrink:
        0;

}


.nav-logo img {

    width:
        150px;

    height:
        auto;

    object-fit:
        contain;

}


.nav-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        27px;

}


.nav-links a {

    position:
        relative;

    color:
        var(--text-light);

    font-size:
        14px;

    font-weight:
        500;

    transition:
        color 0.3s ease;

}


.nav-links a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -9px;

    width:
        0;

    height:
        2px;

    border-radius:
        20px;

    background:
        var(--gradient);

    transition:
        width 0.3s ease;

}


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

    color:
        var(--white);

}


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

    width:
        100%;

}


.nav-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        13px 24px;

    border-radius:
        30px;

    background:
        var(--gradient);

    color:
        var(--white);

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap;

    box-shadow:
        0 10px 30px
        rgba(
            37,
            99,
            235,
            0.25
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.nav-cta:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 40px
        rgba(
            34,
            211,
            238,
            0.22
        );

}


/* MOBILE MENU BUTTON */

.mobile-menu-btn {

    display:
        none;

    width:
        44px;

    height:
        44px;

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

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            0.03
        );

    cursor:
        pointer;

}


.mobile-menu-btn span {

    display:
        block;

    width:
        20px;

    height:
        2px;

    margin:
        4px auto;

    background:
        var(--white);

    transition:
        0.3s ease;

}


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

section {

    position:
        relative;

}


.section-label {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.section-heading {

    max-width:
        800px;

    margin:
        0 auto 65px;

    text-align:
        center;

}


.section-heading h2 {

    font-size:
        clamp(
            34px,
            4vw,
            54px
        );

    line-height:
        1.1;

    letter-spacing:
        -2px;

    font-weight:
        800;

}


.section-heading h2 span {

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.section-heading p {

    margin-top:
        22px;

    color:
        var(--text-muted);

    font-size:
        15px;

}


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

.services-hero {

    min-height:
        690px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(
                37,
                99,
                235,
                0.20
            ),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 70%,
            rgba(
                34,
                211,
                238,
                0.10
            ),
            transparent 25%
        );

}


.services-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.025
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.025
            ) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

}


.hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(90px);

    pointer-events:
        none;

}


.hero-glow-one {

    width:
        300px;

    height:
        300px;

    left:
        -100px;

    top:
        100px;

    background:
        var(--blue);

    opacity:
        0.10;

}


.hero-glow-two {

    width:
        280px;

    height:
        280px;

    right:
        -100px;

    bottom:
        20px;

    background:
        var(--cyan);

    opacity:
        0.08;

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        920px;

    margin:
        0 auto;

    padding:
        110px 0;

    text-align:
        center;

}


.hero-content h1 {

    max-width:
        950px;

    margin:
        0 auto;

    font-size:
        clamp(
            48px,
            6vw,
            78px
        );

    line-height:
        1.03;

    letter-spacing:
        -4px;

    font-weight:
        850;

}


.hero-content h1 span {

    display:
        block;

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-content > p {

    max-width:
        800px;

    margin:
        28px auto 0;

    color:
        var(--text-light);

    font-size:
        17px;

}


.hero-content .hero-description {

    margin-top:
        14px;

    color:
        var(--text-muted);

    font-size:
        14px;

}


.hero-buttons {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        38px;

}


.primary-btn,
.secondary-btn {

    min-height:
        53px;

    padding:
        0 25px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        11px;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        0.3s ease;

}


.primary-btn {

    background:
        var(--gradient);

    color:
        white;

    box-shadow:
        0 15px 35px
        rgba(
            37,
            99,
            235,
            0.25
        );

}


.primary-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 45px
        rgba(
            34,
            211,
            238,
            0.25
        );

}


.primary-btn span {

    font-size:
        19px;

}


.secondary-btn {

    color:
        var(--text-light);

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

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

}


.secondary-btn:hover {

    transform:
        translateY(-4px);

    color:
        white;

    border-color:
        rgba(
            34,
            211,
            238,
            0.3
        );

    background:
        rgba(
            34,
            211,
            238,
            0.06
        );

}


.hero-trust {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        42px;

    color:
        #64748b;

    font-size:
        11px;

    letter-spacing:
        1px;

}


.hero-trust i {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--cyan);

}


.hero-bottom-glow {

    position:
        absolute;

    left:
        50%;

    bottom:
        -150px;

    width:
        600px;

    height:
        250px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        var(--blue);

    filter:
        blur(130px);

    opacity:
        0.10;

}


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

.trust-section {

    background:
        #071827;

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

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

}


.trust-grid {

    display:
        grid;

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

}


.trust-item {

    min-height:
        155px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

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

}


.trust-item:last-child {

    border-right:
        0;

}


.trust-item strong {

    font-size:
        43px;

    line-height:
        1;

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.trust-item strong span {

    font-size:
        25px;

}


.trust-item p {

    margin-top:
        10px;

    color:
        var(--text-muted);

    font-size:
        12px;

}


/* =========================================================
   INTRO
========================================================= */

.intro-section {

    padding:
        110px 0 50px;

    background:
        var(--bg);

}


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

.services-section {

    padding:
        60px 0 120px;

    background:
        var(--bg);

}


.services-grid {

    display:
        grid;

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

    gap:
        20px;

}


.service-card {

    position:
        relative;

    min-height:
        430px;

    padding:
        30px;

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

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(
                11,
                32,
                53,
                0.95
            ),
            rgba(
                7,
                24,
                40,
                0.95
            )
        );

    overflow:
        hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}


.service-card::before {

    content:
        "";

    position:
        absolute;

    width:
        160px;

    height:
        160px;

    right:
        -80px;

    top:
        -80px;

    border-radius:
        50%;

    background:
        var(--blue);

    filter:
        blur(70px);

    opacity:
        0.08;

    transition:
        opacity 0.35s ease;

}


.service-card:hover {

    transform:
        translateY(-9px);

    border-color:
        var(--border-blue);

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

}


.service-card:hover::before {

    opacity:
        0.20;

}


.featured-service {

    border-color:
        rgba(
            34,
            211,
            238,
            0.28
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                14,
                42,
                67,
                0.98
            ),
            rgba(
                7,
                25,
                42,
                0.98
            )
        );

}


.featured-badge {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    padding:
        5px 9px;

    border-radius:
        30px;

    background:
        rgba(
            34,
            211,
            238,
            0.10
        );

    color:
        var(--cyan);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.service-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.service-number {

    color:
        #64748b;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1px;

}


.service-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        rgba(
            37,
            99,
            235,
            0.12
        );

    border:
        1px solid
        rgba(
            59,
            130,
            246,
            0.15
        );

    color:
        var(--cyan);

    font-size:
        12px;

    font-weight:
        800;

    transition:
        0.3s ease;

}


.service-card:hover .service-icon {

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

    background:
        var(--gradient);

    color:
        white;

}


.service-card h3 {

    margin-top:
        30px;

    font-size:
        22px;

    line-height:
        1.2;

}


.service-card > p {

    margin-top:
        13px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


.service-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        22px;

}


.service-tags span {

    padding:
        6px 9px;

    border-radius:
        50px;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    border:
        1px solid
        rgba(
            148,
            163,
            184,
            0.10
        );

    color:
        #94a3b8;

    font-size:
        9px;

}


.service-link {

    position:
        absolute;

    left:
        30px;

    bottom:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        700;

}


.service-link span {

    font-size:
        17px;

    transition:
        transform 0.3s ease;

}


.service-link:hover span {

    transform:
        translateX(5px);

}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section {

    padding:
        120px 0;

    background:
        var(--bg-section);

}


.split-heading {

    display:
        grid;

    grid-template-columns:
        1fr 0.6fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        60px;

}


.split-heading h2 {

    max-width:
        650px;

    font-size:
        clamp(
            35px,
            4vw,
            54px
        );

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.split-heading h2 span {

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.split-heading > p {

    color:
        var(--text-muted);

    font-size:
        14px;

}


.why-grid {

    display:
        grid;

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

    gap:
        18px;

}


.why-card {

    padding:
        32px;

    min-height:
        245px;

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

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    transition:
        0.3s ease;

}


.why-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--border-blue);

    background:
        rgba(
            37,
            99,
            235,
            0.06
        );

}


.why-number {

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        800;

}


.why-card h3 {

    margin-top:
        30px;

    font-size:
        20px;

}


.why-card p {

    margin-top:
        11px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


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

.process-section {

    padding:
        120px 0;

    background:
        var(--bg);

}


.process-grid {

    display:
        grid;

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

    gap:
        10px;

}


.process-card {

    position:
        relative;

    padding:
        25px 18px;

    min-height:
        240px;

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

}


.process-number {

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--gradient);

    color:
        white;

    font-size:
        10px;

    font-weight:
        800;

    box-shadow:
        0 10px 25px
        rgba(
            37,
            99,
            235,
            0.25
        );

}


.process-card h3 {

    margin-top:
        25px;

    font-size:
        18px;

}


.process-card p {

    margin-top:
        10px;

    color:
        var(--text-muted);

    font-size:
        12px;

}


/* =========================================================
   GOALS
========================================================= */

.goals-section {

    padding:
        120px 0;

    background:
        var(--bg-section);

}


.goals-grid {

    display:
        grid;

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

    gap:
        18px;

}


.goal-card {

    padding:
        30px;

    min-height:
        270px;

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

    border-radius:
        18px;

    background:
        var(--card);

    transition:
        0.3s ease;

}


.goal-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--border-blue);

}


.goal-icon {

    display:
        inline-flex;

    width:
        40px;

    height:
        40px;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(
            34,
            211,
            238,
            0.08
        );

    color:
        var(--cyan);

    font-size:
        10px;

    font-weight:
        800;

}


.goal-card h3 {

    margin-top:
        24px;

    font-size:
        20px;

}


.goal-card p {

    margin-top:
        10px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


.goal-card a {

    display:
        inline-block;

    margin-top:
        20px;

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        700;

}


/* =========================================================
   DELIVER
========================================================= */

.deliver-section {

    padding:
        120px 0;

    background:
        var(--bg);

}


.deliver-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        90px;

    align-items:
        start;

}


.deliver-content h2 {

    font-size:
        clamp(
            35px,
            4vw,
            52px
        );

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.deliver-content h2 span {

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.deliver-content > p {

    margin-top:
        22px;

    color:
        var(--text-muted);

    font-size:
        14px;

}


.deliver-list {

    display:
        grid;

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

    gap:
        14px;

}


.deliver-item {

    display:
        flex;

    gap:
        15px;

    padding:
        22px;

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

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );

}


.deliver-item > span {

    flex-shrink:
        0;

    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(
            34,
            211,
            238,
            0.10
        );

    color:
        var(--cyan);

    font-size:
        12px;

}


.deliver-item h3 {

    font-size:
        14px;

}


.deliver-item p {

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


/* =========================================================
   RESULTS
========================================================= */

.results-section {

    padding:
        100px 0;

    background:
        var(--bg-section);

}


.results-box {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        70px;

    padding:
        65px;

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

    border-radius:
        25px;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(
                37,
                99,
                235,
                0.16
            ),
            transparent 35%
        ),

        rgba(
            255,
            255,
            255,
            0.02
        );

}


.results-content h2 {

    font-size:
        clamp(
            35px,
            4vw,
            50px
        );

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.results-content h2 span {

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.results-content p {

    margin-top:
        20px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


.results-stats {

    display:
        grid;

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

    gap:
        15px;

}


.result-stat {

    padding:
        28px;

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

    border-radius:
        15px;

    background:
        rgba(
            6,
            19,
            33,
            0.55
        );

}


.result-stat strong {

    display:
        block;

    font-size:
        40px;

    line-height:
        1;

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.result-stat span {

    display:
        block;

    margin-top:
        10px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    padding:
        120px 0;

    background:
        var(--bg);

}


.faq-container {

    max-width:
        850px;

    margin:
        0 auto;

}


.faq-item {

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

}


.faq-question {

    width:
        100%;

    padding:
        25px 5px;

    border:
        0;

    background:
        transparent;

    color:
        var(--white);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    text-align:
        left;

    cursor:
        pointer;

    font-size:
        15px;

    font-weight:
        600;

}


.faq-question b {

    flex-shrink:
        0;

    width:
        28px;

    height:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    color:
        var(--cyan);

    font-size:
        17px;

    font-weight:
        400;

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


.faq-answer {

    max-height:
        0;

    overflow:
        hidden;

    transition:
        max-height 0.4s ease;

}


.faq-answer p {

    padding:
        0 45px 25px 5px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


.faq-item.active .faq-answer {

    max-height:
        200px;

}


.faq-item.active
.faq-question b {

    transform:
        rotate(45deg);

    background:
        rgba(
            34,
            211,
            238,
            0.08
        );

}


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

.final-cta-section {

    padding:
        100px 0;

    background:
        var(--bg-section);

}


.final-cta {

    position:
        relative;

    padding:
        90px 45px;

    text-align:
        center;

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

    border-radius:
        28px;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(
                37,
                99,
                235,
                0.24
            ),
            transparent 45%
        ),

        linear-gradient(
            135deg,
            #0b2035,
            #071827
        );

}


.cta-glow {

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    left:
        50%;

    top:
        -250px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        var(--cyan);

    filter:
        blur(120px);

    opacity:
        0.12;

}


.final-cta > * {

    position:
        relative;

    z-index:
        2;

}


.final-cta h2 {

    max-width:
        850px;

    margin:
        0 auto;

    font-size:
        clamp(
            38px,
            5vw,
            62px
        );

    line-height:
        1.05;

    letter-spacing:
        -3px;

}


.final-cta h2 span {

    display:
        inline;

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.final-cta > p {

    max-width:
        700px;

    margin:
        23px auto 0;

    color:
        var(--text-muted);

    font-size:
        14px;

}


.cta-buttons {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        35px;

}


.final-cta small {

    display:
        block;

    margin-top:
        25px;

    color:
        #64748b;

    font-size:
        10px;

}


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

.services-footer {

    background:
        var(--bg-dark);

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

}


.footer-main {

    display:
        grid;

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

    gap:
        60px;

    padding:
        70px 0;

}


.footer-brand img {

    width:
        145px;

}


.footer-brand p {

    margin-top:
        12px;

    color:
        var(--cyan);

    font-size:
        12px;

    font-weight:
        600;

}


.footer-brand span {

    display:
        block;

    max-width:
        260px;

    margin-top:
        8px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


.footer-links-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.footer-links-group h4 {

    margin-bottom:
        10px;

    color:
        white;

    font-size:
        13px;

}


.footer-links-group a {

    color:
        #64748b;

    font-size:
        11px;

    transition:
        color 0.3s ease;

}


.footer-links-group a:hover {

    color:
        var(--cyan);

}


.footer-bottom {

    padding:
        20px 0;

    border-top:
        1px solid
        rgba(
            148,
            163,
            184,
            0.08
        );

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-bottom p,
.footer-bottom a {

    color:
        #475569;

    font-size:
        10px;

}


.footer-bottom div {

    display:
        flex;

    gap:
        20px;

}


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

@media (max-width: 1100px) {


    .nav-links {

        gap:
            16px;

    }


    .nav-links a {

        font-size:
            12px;

    }


    .nav-cta {

        display:
            none;

    }


    .services-grid {

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

    }


    .process-grid {

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

    }


    .why-grid {

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

    }


    .goals-grid {

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

    }

}


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

@media (max-width: 768px) {


    .nav-container {

        min-height:
            70px;

    }


    .nav-logo img {

        width:
            125px;

    }


    .mobile-menu-btn {

        display:
            block;

    }


    .nav-links {

        position:
            absolute;

        left:
            4%;

        right:
            4%;

        top:
            75px;

        padding:
            20px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

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

        border-radius:
            15px;

        background:
            rgba(
                6,
                19,
                33,
                0.98
            );

        backdrop-filter:
            blur(20px);

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

    }


    .nav-links.mobile-active {

        display:
            flex;

    }


    .nav-links a {

        padding:
            12px 8px;

        font-size:
            14px;

        border-bottom:
            1px solid
            rgba(
                148,
                163,
                184,
                0.07
            );

    }


    .nav-links a:last-child {

        border-bottom:
            0;

    }


    .nav-links a::after {

        display:
            none;

    }


    .services-hero {

        min-height:
            auto;

    }


    .hero-content {

        padding:
            90px 0;

    }


    .hero-content h1 {

        font-size:
            clamp(
                42px,
                11vw,
                58px
            );

        letter-spacing:
            -2.5px;

    }


    .hero-content > p {

        font-size:
            14px;

    }


    .hero-trust {

        gap:
            10px;

    }


    .trust-grid {

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

    }


    .trust-item {

        min-height:
            130px;

    }


    .trust-item:nth-child(2) {

        border-right:
            0;

    }


    .trust-item:nth-child(3),
    .trust-item:nth-child(4) {

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

    }


    .section-heading {

        margin-bottom:
            45px;

    }


    .section-heading h2 {

        font-size:
            36px;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .service-card {

        min-height:
            400px;

    }


    .split-heading {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .why-grid {

        grid-template-columns:
            1fr;

    }


    .process-grid {

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

    }


    .goals-grid {

        grid-template-columns:
            1fr;

    }


    .deliver-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .deliver-list {

        grid-template-columns:
            1fr;

    }


    .results-box {

        grid-template-columns:
            1fr;

        padding:
            45px 28px;

    }


    .final-cta {

        padding:
            65px 22px;

    }


    .final-cta h2 {

        font-size:
            40px;

        letter-spacing:
            -2px;

    }


    .footer-main {

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

        gap:
            40px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }


    .footer-bottom {

        flex-direction:
            column;

    }


}


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

@media (max-width: 480px) {


    .container {

        width:
            90%;

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .primary-btn,
    .secondary-btn {

        width:
            100%;

    }


    .hero-trust i {

        display:
            none;

    }


    .hero-trust {

        flex-direction:
            column;

    }


    .trust-item strong {

        font-size:
            35px;

    }


    .service-card {

        padding:
            25px;

    }


    .service-link {

        left:
            25px;

    }


    .process-grid {

        grid-template-columns:
            1fr;

    }


    .results-stats {

        grid-template-columns:
            1fr;

    }


    .result-stat {

        padding:
            24px;

    }


    .faq-question {

        font-size:
            13px;

    }


    .faq-answer p {

        font-size:
            12px;

    }


    .final-cta h2 {

        font-size:
            34px;

    }


    .cta-buttons {

        flex-direction:
            column;

    }


    .footer-main {

        grid-template-columns:
            1fr;

    }


    .footer-brand {

        grid-column:
            auto;

    }


    .footer-bottom div {

        flex-direction:
            column;

        gap:
            8px;

    }

}






/* ============================================== */


                 /* Portfolio page of css */

/* ================================================ */




/* =========================================================
   GROWTH HARBOUR
   PORTFOLIO PAGE
========================================================= */

:root {

    --navy: #061321;
    --navy-light: #0a1b2d;
    --card: #0d2338;
    --card-light: #102a43;

    --blue: #18a8ff;
    --blue-light: #38bdf8;

    --white: #f8fafc;
    --text: #cbd5e1;
    --muted: #94a3b8;

    --border: rgba(148, 163, 184, 0.14);

    --gold: #f5b82e;

    --container: 1240px;

}


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

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    background: var(--navy);

    color: var(--white);

    line-height: 1.7;

    overflow-x: hidden;

}


a {

    text-decoration: none;

    color: inherit;

}


img {

    max-width: 100%;

    display: block;

}


button {

    font-family: inherit;

}


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

.portfolio-navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(6, 19, 33, 0.88);

    backdrop-filter: blur(18px);

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

}


.portfolio-nav-container {

    max-width: var(--container);

    margin: auto;

    min-height: 92px;

    padding: 0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}


.portfolio-logo {

    width: 105px;

    flex-shrink: 0;

}


.portfolio-logo img {

    width: 100%;

    object-fit: contain;

}


.portfolio-nav {

    display: flex;

    align-items: center;

    gap: 28px;

}


.portfolio-nav a {

    color: #e2e8f0;

    font-size: 15px;

    font-weight: 500;

    transition: .3s ease;

    position: relative;

}


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

    color: var(--blue);

}


.portfolio-nav a.active::after {

    content: "";

    position: absolute;

    bottom: -10px;

    left: 0;

    width: 100%;

    height: 2px;

    background: var(--blue);

}


.portfolio-nav-btn {

    padding: 13px 24px;

    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #19b5ff,
        #1677ff
    );

    font-weight: 700;

    white-space: nowrap;

    transition: .3s ease;

}


.portfolio-nav-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(24, 168, 255, .25);

}


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

.portfolio-hero {

    min-height: 720px;

    max-width: var(--container);

    margin: auto;

    padding: 110px 24px 100px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;

    position: relative;

}


.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}


.hero-glow-one {

    width: 300px;

    height: 300px;

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

    top: 80px;

    left: -100px;

}


.hero-glow-two {

    width: 250px;

    height: 250px;

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

    right: -100px;

    bottom: 50px;

}


.portfolio-hero-content {

    position: relative;

    z-index: 2;

}


.portfolio-eyebrow {

    display: inline-block;

    color: var(--blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 25px;

}


.portfolio-hero h1 {

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

    font-size: clamp(48px, 5vw, 76px);

    line-height: 1.08;

    letter-spacing: -3px;

    max-width: 750px;

    margin-bottom: 28px;

}


.portfolio-hero h1 span {

    display: block;

    color: var(--blue);

}


.portfolio-hero p {

    max-width: 650px;

    color: var(--text);

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 35px;

}


.portfolio-hero-actions {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}


.primary-portfolio-btn,
.secondary-portfolio-btn {

    padding: 15px 25px;

    border-radius: 8px;

    font-weight: 700;

    transition: .3s ease;

}


.primary-portfolio-btn {

    background: var(--blue);

    color: white;

}


.primary-portfolio-btn span {

    margin-left: 8px;

}


.primary-portfolio-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(24,168,255,.25);

}


.secondary-portfolio-btn {

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

    color: white;

}


.secondary-portfolio-btn:hover {

    border-color: var(--blue);

    color: var(--blue);

}


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

.portfolio-hero-visual {

    position: relative;

    height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.visual-frame {

    width: 390px;

    height: 450px;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            #0d2b43,
            #071727
        );

    border: 1px solid rgba(56,189,248,.25);

    transform: rotate(-5deg);

    position: relative;

    overflow: hidden;

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

}


.visual-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

}


.visual-logo {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 210px;

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

    filter:
        drop-shadow(
            0 0 40px rgba(24,168,255,.45)
        );

}


.visual-label {

    position: absolute;

    bottom: 35px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 10px;

    letter-spacing: 4px;

    color: var(--blue);

    white-space: nowrap;

}


.floating-result-card,
.floating-growth-card {

    position: absolute;

    background: rgba(13,35,56,.95);

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

    backdrop-filter: blur(15px);

    padding: 20px 25px;

    border-radius: 20px;

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

}


.floating-result-card {

    top: 35px;

    right: 0;

}


.floating-growth-card {

    bottom: 40px;

    left: 0;

}


.floating-result-card strong,
.floating-growth-card strong {

    display: block;

    color: var(--blue);

    font-size: 30px;

}


.floating-result-card span,
.floating-growth-card span {

    color: var(--text);

    font-size: 13px;

}


/* =========================================================
   INTRO
========================================================= */

.portfolio-intro {

    max-width: var(--container);

    margin: auto;

    padding: 120px 24px;

}


.portfolio-section-heading {

    max-width: 750px;

    margin-bottom: 70px;

}


.portfolio-section-heading > span,
.project-heading span,
.capability-heading span,
.impact-heading span,
.difference-content > span {

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

}


.portfolio-section-heading h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.15;

    margin: 15px 0;

}


.portfolio-section-heading h2 em {

    color: var(--blue);

    font-style: normal;

}


.portfolio-section-heading p {

    color: var(--text);

    font-size: 17px;

}


.portfolio-principles {

    display: grid;

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

    gap: 20px;

}


.principle-item {

    padding: 35px;

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

    border-radius: 18px;

    background: rgba(13,35,56,.45);

    display: flex;

    gap: 20px;

    transition: .3s ease;

}


.principle-item:hover {

    transform: translateY(-8px);

    border-color: rgba(24,168,255,.35);

}


.principle-item > span {

    color: var(--blue);

    font-weight: 800;

}


.principle-item h3 {

    font-size: 19px;

    margin-bottom: 10px;

}


.principle-item p {

    color: var(--muted);

    font-size: 14px;

}


/* =========================================================
   PROJECT SECTION
========================================================= */

.project-section {

    background: #07192b;

    padding: 120px 24px;

}


.project-heading {

    max-width: var(--container);

    margin: auto auto 55px;

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

}


.project-heading h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.1;

    margin-top: 15px;

}


.project-heading h2 strong {

    color: var(--blue);

    display: block;

}


.project-heading > p {

    max-width: 450px;

    color: var(--muted);

}


.project-filter {

    max-width: var(--container);

    margin: auto auto 45px;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}


.filter-btn {

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

    background: transparent;

    color: var(--text);

    padding: 10px 18px;

    border-radius: 50px;

    cursor: pointer;

    transition: .3s ease;

}


.filter-btn:hover,
.filter-btn.active {

    background: var(--blue);

    color: white;

    border-color: var(--blue);

}


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

.project-grid {

    max-width: var(--container);

    margin: auto;

    display: grid;

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

    gap: 25px;

}


.project-card {

    background: #0b2035;

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

    border-radius: 20px;

    overflow: hidden;

    transition: .4s ease;

}


.project-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(24,168,255,.35);

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

}


.project-image {

    height: 330px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}


.project-image > span {

    position: absolute;

    bottom: 20px;

    left: 25px;

    font-size: 10px;

    letter-spacing: 2px;

    color: #bae6fd;

}


/* Branding */

.project-branding {

    background:
        radial-gradient(
            circle at center,
            #17466b,
            #071827
        );

}


.branding-symbol {

    font-family: Poppins;

    font-size: 110px;

    font-weight: 800;

    color: white;

    text-shadow:
        0 0 50px rgba(24,168,255,.7);

}


.project-number {

    position: absolute;

    top: 20px;

    right: 25px;

    color: var(--blue);

    font-weight: 800;

}


/* Motion */

.project-motion {

    background:
        linear-gradient(
            135deg,
            #071827,
            #0b4972
        );

}


.motion-circle {

    width: 180px;

    height: 180px;

    border-radius: 50%;

    border: 35px solid var(--blue);

    box-shadow:
        0 0 80px rgba(24,168,255,.5);

}


.motion-text {

    position: absolute;

    font-size: 32px;

    font-weight: 800;

    letter-spacing: 5px;

}


/* Web */

.project-web {

    background: #061321;

}


.browser-window {

    width: 72%;

    border-radius: 12px;

    overflow: hidden;

    background: #102a43;

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

}


.browser-top {

    padding: 10px;

    font-size: 10px;

    color: #64748b;

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

}


.browser-content {

    height: 180px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 25px;

}


.browser-content span {

    color: var(--blue);

    font-size: 13px;

}


.browser-content strong {

    font-size: 38px;

}


/* Marketing */

.project-marketing {

    background:
        radial-gradient(
            circle at 80% 20%,
            #164c72,
            #061321
        );

}


.marketing-chart {

    width: 230px;

    height: 170px;

    position: relative;

}


.marketing-chart span {

    font-size: 50px;

    font-weight: 800;

    color: var(--blue);

}


.marketing-chart small {

    display: block;

    color: var(--muted);

    letter-spacing: 2px;

}


.chart-line {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 70px;

    border-top: 4px solid var(--blue);

    transform:
        skewY(-12deg);

}


/* SEO */

.project-seo {

    background:
        radial-gradient(
            circle,
            #103d5c,
            #061321
        );

}


.seo-score {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    border: 8px solid var(--blue);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


.seo-score strong {

    font-size: 55px;

    line-height: 1;

}


.seo-score span {

    position: static;

    color: var(--blue);

}


/* Social */

.project-social {

    background:
        linear-gradient(
            145deg,
            #122e48,
            #061321
        );

}


.social-post {

    width: 180px;

    height: 220px;

    background:
        linear-gradient(
            145deg,
            #1c5e86,
            #071827
        );

    border-radius: 12px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 25px;

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

}


.social-post strong {

    font-size: 28px;

}


.social-post span {

    font-size: 38px;

    color: var(--blue);

    font-weight: 800;

}


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

.project-content {

    padding: 30px;

}


.project-meta {

    color: var(--blue);

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 10px;

}


.project-content h3 {

    font-family: Poppins;

    font-size: 24px;

    line-height: 1.3;

    margin-bottom: 13px;

}


.project-content p {

    color: var(--muted);

    font-size: 14px;

    margin-bottom: 22px;

}


.project-content a {

    color: white;

    font-weight: 700;

    font-size: 14px;

}


.project-content a span {

    color: var(--blue);

    margin-left: 7px;

}


.project-content a:hover {

    color: var(--blue);

}


/* =========================================================
   IMPACT
========================================================= */

.portfolio-impact {

    padding: 120px 24px;

    background: var(--navy);

}


.impact-container {

    max-width: var(--container);

    margin: auto;

}


.impact-heading {

    max-width: 750px;

    margin-bottom: 65px;

}


.impact-heading h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.15;

    margin: 15px 0;

}


.impact-heading h2 strong {

    display: block;

    color: var(--blue);

}


.impact-heading p {

    color: var(--muted);

}


.impact-stats {

    display: grid;

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

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

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

}


.impact-stat {

    padding: 40px 25px;

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

}


.impact-stat:last-child {

    border-right: none;

}


.impact-stat strong {

    font-family: Poppins;

    font-size: 48px;

    color: var(--blue);

    display: block;

}


.impact-stat span {

    font-weight: 700;

}


.impact-stat p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 10px;

}


/* =========================================================
   CAPABILITIES
========================================================= */

.portfolio-capabilities {

    background: #07192b;

    padding: 120px 24px;

}


.capability-heading {

    max-width: var(--container);

    margin: auto auto 50px;

}


.capability-heading h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.15;

    margin-top: 15px;

}


.capability-heading h2 strong {

    color: var(--blue);

}


.capability-list {

    max-width: var(--container);

    margin: auto;

}


.capability-row {

    display: grid;

    grid-template-columns:
        70px 1fr 1fr 40px;

    align-items: center;

    gap: 25px;

    padding: 30px 0;

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

    transition: .3s ease;

}


.capability-row:hover {

    padding-left: 15px;

    padding-right: 15px;

    background: rgba(24,168,255,.03);

}


.capability-row > span {

    color: var(--blue);

    font-weight: 800;

}


.capability-row h3 {

    font-family: Poppins;

    font-size: 23px;

}


.capability-row p {

    color: var(--muted);

    font-size: 14px;

}


.capability-row a {

    color: var(--blue);

    font-size: 22px;

}


/* =========================================================
   DIFFERENCE
========================================================= */

.portfolio-difference {

    max-width: var(--container);

    margin: auto;

    padding: 130px 24px;

    display: grid;

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

    gap: 90px;

    align-items: center;

}


.difference-visual {

    min-height: 430px;

    border-radius: 30px;

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

    background:
        radial-gradient(
            circle at center,
            rgba(24,168,255,.18),
            transparent 55%
        ),
        #081a2c;

    display: flex;

    justify-content: center;

    align-items: center;

}


.difference-logo {

    width: 260px;

    filter:
        drop-shadow(
            0 0 45px rgba(24,168,255,.25)
        );

}


.difference-content h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.15;

    margin: 15px 0 20px;

}


.difference-content h2 strong {

    display: block;

    color: var(--blue);

}


.difference-content > p {

    color: var(--muted);

    margin-bottom: 30px;

}


.difference-points {

    display: grid;

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

    gap: 15px;

}


.difference-points > div {

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

    padding: 18px;

    border-radius: 12px;

}


.difference-points strong {

    color: var(--blue);

    font-size: 13px;

}


.difference-points p {

    margin-top: 5px;

    font-size: 14px;

}


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

.portfolio-cta {

    text-align: center;

    padding: 130px 24px;

    background:
        radial-gradient(
            circle at center,
            #103b5d,
            #061321 65%
        );

    position: relative;

    overflow: hidden;

}


.portfolio-cta > * {

    position: relative;

    z-index: 2;

}


.portfolio-cta > span {

    color: var(--blue);

    letter-spacing: 3px;

    font-size: 12px;

    font-weight: 800;

}


.portfolio-cta h2 {

    font-family: Poppins;

    font-size: clamp(42px,5vw,70px);

    line-height: 1.1;

    max-width: 850px;

    margin: 20px auto;

}


.portfolio-cta h2 strong {

    color: var(--blue);

    display: block;

}


.portfolio-cta > p {

    max-width: 650px;

    margin: auto;

    color: var(--muted);

}


.cta-buttons {

    margin-top: 35px;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}


.cta-primary,
.cta-secondary {

    padding: 15px 25px;

    border-radius: 8px;

    font-weight: 700;

}


.cta-primary {

    background: var(--blue);

}


.cta-primary span {

    margin-left: 8px;

}


.cta-secondary {

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

}


.cta-secondary:hover {

    border-color: var(--blue);

    color: var(--blue);

}


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

.portfolio-footer {

    max-width: var(--container);

    margin: auto;

    padding: 60px 24px 30px;

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

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    flex-wrap: wrap;

}


.footer-brand img {

    width: 130px;

}


.footer-brand p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 8px;

}


.footer-links {

    display: flex;

    gap: 25px;

}


.footer-links a {

    color: var(--muted);

    font-size: 14px;

}


.footer-links a:hover {

    color: var(--blue);

}


.copyright {

    width: 100%;

    color: #64748b;

    font-size: 12px;

    padding-top: 25px;

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

}


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

@media (max-width: 1100px) {

    .portfolio-nav {

        gap: 15px;

    }

    .portfolio-nav a {

        font-size: 13px;

    }

    .portfolio-hero {

        gap: 30px;

    }

}


@media (max-width: 900px) {

    .portfolio-nav {

        display: none;

    }

    .portfolio-hero {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .portfolio-hero p {

        margin-left: auto;

        margin-right: auto;

    }

    .portfolio-hero-actions {

        justify-content: center;

    }

    .portfolio-hero-visual {

        margin-top: 30px;

    }

    .portfolio-principles {

        grid-template-columns: 1fr;

    }

    .project-heading {

        flex-direction: column;

        align-items: flex-start;

    }

    .impact-stats {

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

    }

    .impact-stat:nth-child(2) {

        border-right: none;

    }

    .portfolio-difference {

        grid-template-columns: 1fr;

    }

    .capability-row {

        grid-template-columns:
            50px 1fr 40px;

    }

    .capability-row p {

        display: none;

    }

}


@media (max-width: 650px) {

    .portfolio-nav-container {

        min-height: 75px;

    }

    .portfolio-logo {

        width: 90px;

    }

    .portfolio-nav-btn {

        padding: 11px 17px;

        font-size: 13px;

    }

    .portfolio-hero {

        padding-top: 70px;

    }

    .portfolio-hero h1 {

        letter-spacing: -2px;

    }

    .portfolio-hero-visual {

        height: 390px;

    }

    .visual-frame {

        width: 290px;

        height: 350px;

    }

    .visual-logo {

        width: 160px;

    }

    .floating-result-card {

        right: -5px;

    }

    .floating-growth-card {

        left: -5px;

    }

    .project-grid {

        grid-template-columns: 1fr;

    }

    .project-image {

        height: 280px;

    }

    .impact-stats {

        grid-template-columns: 1fr;

    }

    .impact-stat {

        border-right: none;

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

    }

    .impact-stat:last-child {

        border-bottom: none;

    }

    .capability-row {

        grid-template-columns:
            35px 1fr 25px;

    }

    .capability-row h3 {

        font-size: 18px;

    }

    .difference-points {

        grid-template-columns: 1fr;

    }

    .difference-visual {

        min-height: 320px;

    }

    .footer-links {

        flex-wrap: wrap;

    }

}



/* ==================================== */

            /* video page of css */


/* ======================================== */



/* =====================================================
   GROWTH HARBOUR
   VIDEO PAGE
===================================================== */


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


html {
    scroll-behavior: smooth;
}


body {
    background: #06111e;
    color: #f8fafc;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}


a {
    text-decoration: none;
    color: inherit;
}


img {
    max-width: 100%;
}


section {
    position: relative;
}


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

.video-navbar {
    width: 100%;
    background: rgba(5, 16, 29, 0.94);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 100;
}


.video-nav-container {
    max-width: 1500px;
    min-height: 92px;
    margin: auto;
    padding: 0 5%;

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


.video-logo img {
    width: 105px;
    display: block;
}


.video-nav-container nav {
    display: flex;
    align-items: center;
    gap: 38px;
}


.video-nav-container nav a {
    color: #e5edf7;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    padding: 35px 0;
    transition: .3s ease;
}


.video-nav-container nav a:hover,
.video-nav-container nav a.active {
    color: #20b5ff;
}


.video-nav-container nav a.active::after {
    content: "";

    position: absolute;
    bottom: 24px;
    left: 0;

    width: 100%;
    height: 2px;

    background: #16b7ff;
}


.nav-cta {
    padding: 16px 30px;

    border-radius: 40px;

    background: linear-gradient(
        135deg,
        #20b8ff,
        #147cf5
    );

    font-weight: 700;

    box-shadow:
        0 10px 30px rgba(20,130,255,.20);

    transition: .3s ease;
}


.nav-cta:hover {
    transform: translateY(-3px);
    box-shadow:
        0 15px 40px rgba(20,160,255,.35);
}



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

.video-hero {
    min-height: 760px;

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

    align-items: center;

    max-width: 1500px;
    margin: auto;

    padding: 90px 7%;

    overflow: hidden;
}


.hero-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    background: rgba(0, 157, 255, .14);

    filter: blur(120px);

    border-radius: 50%;

    top: 100px;
    left: -250px;
}


.hero-content {
    position: relative;
    z-index: 2;
}


.hero-label {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    color: #18b7ff;

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

    letter-spacing: 3px;

    margin-bottom: 25px;
}


.hero-label i {
    font-size: 15px;
}


.hero-content h1 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(48px, 5.5vw, 82px);

    line-height: 1.04;

    max-width: 800px;

    letter-spacing: -3px;

    margin-bottom: 30px;
}


.hero-content h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #20b9ff,
            #6fd5ff
        );

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

    color: transparent;
}


.hero-content > p {
    color: #aebed0;

    max-width: 670px;

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 35px;
}


.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}


.primary-video-btn,
.secondary-video-btn {
    display: inline-flex;

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

    gap: 12px;

    padding: 17px 25px;

    border-radius: 10px;

    font-weight: 700;

    transition: .3s ease;
}


.primary-video-btn {
    background: #159ff5;

    box-shadow:
        0 15px 35px rgba(0,155,255,.22);
}


.primary-video-btn:hover {
    transform: translateY(-4px);
    background: #27b5ff;
}


.secondary-video-btn {
    border: 1px solid rgba(255,255,255,.14);

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

    color: #dce8f5;
}


.secondary-video-btn:hover {
    border-color: #19b5ff;
    color: #19b5ff;
}


.hero-trust {
    display: flex;

    gap: 40px;

    margin-top: 65px;
}


.hero-trust div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.hero-trust strong {
    font-size: 27px;
    color: #20b8ff;
}


.hero-trust span {
    color: #8fa3b8;
    font-size: 13px;
}


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

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
}


.visual-card {
    width: min(520px, 100%);
    height: 570px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #0b304a,
            #081a2b
        );

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

    position: relative;

    overflow: hidden;

    transform: rotate(3deg);

    box-shadow:
        0 40px 100px rgba(0,0,0,.45);
}


.visual-card::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    background: #00aaff;

    opacity: .17;

    filter: blur(80px);

    left: 100px;
    top: 120px;

    border-radius: 50%;
}


.visual-top {
    position: absolute;

    top: 25px;
    left: 28px;
    right: 28px;

    display: flex;
    justify-content: space-between;

    color: #9cb0c5;

    font-size: 12px;

    letter-spacing: 2px;
}


.visual-play {
    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: rgba(15,157,239,.12);

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

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

    font-size: 28px;

    color: #24baff;

    position: absolute;

    top: 50%;
    left: 50%;

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

    box-shadow:
        0 0 70px rgba(0,174,255,.3);
}


.visual-bottom {
    position: absolute;

    bottom: 30px;
    left: 30px;

    color: #18b7ff;

    font-size: 12px;

    letter-spacing: 4px;
}


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

.section-heading {
    text-align: center;

    max-width: 850px;

    margin: 0 auto 70px;

    padding: 0 20px;
}


.section-heading > span {
    color: #19b8ff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;
}


.section-heading h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.12;

    margin: 18px 0;
}


.section-heading h2 strong {
    color: #20b7ff;
}


.section-heading p {
    color: #91a4b9;

    line-height: 1.8;

    font-size: 17px;
}


/* =====================================================
   SHOWREEL
===================================================== */

.showreel-section {
    padding: 120px 6%;

    background:
        linear-gradient(
            180deg,
            #071321,
            #091a2c
        );
}


.showreel-wrapper {
    max-width: 1150px;
    margin: auto;
}


.showreel-video {
    height: 650px;

    position: relative;

    overflow: hidden;

    border-radius: 25px;

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

    background: #02070d;

    box-shadow:
        0 40px 100px rgba(0,0,0,.45);
}


.showreel-video video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.video-overlay {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

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

    pointer-events: none;

    background: rgba(3,12,22,.75);

    backdrop-filter: blur(15px);

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

    border-radius: 14px;

    padding: 20px 25px;
}


.video-overlay span {
    font-weight: 700;
    letter-spacing: 2px;
}


.video-overlay i {
    color: #19b8ff;
}


.video-overlay small {
    color: #94a8bc;
}


/* =====================================================
   CATEGORIES
===================================================== */

.categories-section {
    padding: 130px 6%;
}


.category-grid {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 22px;
}


.category-card {
    padding: 38px 35px;

    min-height: 300px;

    background:
        linear-gradient(
            145deg,
            rgba(17,42,64,.85),
            rgba(8,24,40,.9)
        );

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

    border-radius: 20px;

    position: relative;

    overflow: hidden;

    transition: .4s ease;
}


.category-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -80px;
    bottom: -80px;

    background: #009dff;

    opacity: .07;

    filter: blur(40px);

    border-radius: 50%;
}


.category-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(20,180,255,.35);

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);
}


.category-icon {
    width: 55px;
    height: 55px;

    border-radius: 14px;

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

    color: #18b8ff;

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

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

    font-size: 21px;

    margin-bottom: 25px;
}


.category-card > span {
    position: absolute;

    right: 28px;
    top: 30px;

    color: #42566b;

    font-weight: 800;
}


.category-card h3 {
    font-family: "Poppins", sans-serif;

    font-size: 24px;

    margin-bottom: 13px;
}


.category-card p {
    color: #8fa5b9;

    line-height: 1.7;

    font-size: 15px;

    margin-bottom: 25px;
}


.category-card a {
    color: #18b8ff;

    font-size: 14px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 9px;
}


/* =====================================================
   VIDEO SHOWCASE
===================================================== */

.video-showcase {
    padding: 130px 6%;

    background: #071523;
}


.video-grid {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 25px;
}


.work-card {
    background: #0b1d30;

    border-radius: 20px;

    overflow: hidden;

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

    transition: .4s ease;
}


.work-card.large {
    grid-column: span 2;
}


.work-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(15,182,255,.3);
}


.work-media {
    height: 390px;

    position: relative;

    background:
        linear-gradient(
            135deg,
            #0b2941,
            #061321
        );

    overflow: hidden;
}


.work-card:not(.large) .work-media {
    height: 300px;
}


.work-media video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    opacity: .82;
}


.work-play {
    width: 55px;
    height: 55px;

    position: absolute;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    background: rgba(10,20,30,.72);

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

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

    color: #19b8ff;

    backdrop-filter: blur(10px);

    transition: .3s ease;
}


.work-card:hover .work-play {
    transform:
        translate(-50%,-50%)
        scale(1.12);

    background: #0b9fe7;
    color: white;
}


.work-info {
    padding: 25px 28px 30px;
}


.work-info span {
    font-size: 11px;

    color: #19b8ff;

    letter-spacing: 2px;

    font-weight: 800;
}


.work-info h3 {
    font-family: "Poppins", sans-serif;

    font-size: 23px;

    margin-top: 10px;
}


.work-info p {
    color: #8fa3b7;

    margin-top: 10px;

    line-height: 1.6;
}


/* =====================================================
   WHY VIDEO
===================================================== */

.why-video {
    max-width: 1250px;

    margin: auto;

    padding: 140px 6%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;
}


.why-content > span {
    color: #19b8ff;

    font-size: 12px;

    letter-spacing: 3px;

    font-weight: 800;
}


.why-content h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,4vw,58px);

    line-height: 1.1;

    margin: 20px 0;
}


.why-content h2 strong {
    display: block;

    color: #20b7ff;
}


.why-content p {
    color: #92a5b8;

    line-height: 1.9;

    font-size: 16px;

    margin-bottom: 30px;
}


.why-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 23px;

    border-radius: 9px;

    background: #129fe9;

    font-weight: 700;

    transition: .3s ease;
}


.why-btn:hover {
    transform: translateY(-3px);
}


.why-points {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.why-point {
    display: flex;

    gap: 20px;

    padding: 25px;

    border-radius: 15px;

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

    background:
        rgba(14,34,52,.55);

    transition: .3s ease;
}


.why-point:hover {
    border-color:
        rgba(20,180,255,.25);
}


.why-point > div {
    min-width: 48px;
    height: 48px;

    border-radius: 12px;

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

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

    color: #18b8ff;
}


.why-point h3 {
    margin-bottom: 7px;

    font-size: 18px;
}


.why-point p {
    color: #8499ad;

    line-height: 1.6;

    font-size: 14px;
}


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

.video-process {
    padding: 130px 6%;

    background: #071624;
}


.process-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 18px;
}


.process-card {
    padding: 35px 25px;

    background: #0b2033;

    border-radius: 18px;

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

    position: relative;
}


.process-card > span {
    position: absolute;

    top: 20px;
    right: 22px;

    color: #344c61;

    font-size: 30px;

    font-weight: 800;
}


.process-card > i {
    color: #18b8ff;

    font-size: 25px;

    margin: 30px 0 25px;
}


.process-card h3 {
    font-family: "Poppins", sans-serif;

    font-size: 21px;

    margin-bottom: 12px;
}


.process-card p {
    color: #899eb2;

    line-height: 1.7;

    font-size: 14px;
}


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

.video-stats {
    padding: 75px 7%;

    display: grid;

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

    background:
        linear-gradient(
            90deg,
            #081c2e,
            #0a263d,
            #081c2e
        );

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

    border-bottom: 1px solid
        rgba(255,255,255,.06);
}


.stat {
    text-align: center;

    padding: 15px;

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


.stat:last-child {
    border-right: none;
}


.stat strong {
    display: block;

    font-size: 42px;

    color: #1ab8ff;

    font-family: "Poppins", sans-serif;
}


.stat span {
    color: #91a4b7;

    font-size: 14px;
}


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

.video-final-cta {
    padding: 150px 6%;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #0c2b43 0%,
            #06111e 65%
        );
}


.cta-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    background: #009dff;

    opacity: .08;

    filter: blur(130px);

    border-radius: 50%;

    left: 50%;
    top: 50%;

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


.cta-content {
    position: relative;

    max-width: 850px;

    margin: auto;
}


.cta-content > span {
    color: #19b8ff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;
}


.cta-content h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(42px,5vw,68px);

    line-height: 1.1;

    margin: 20px 0;
}


.cta-content h2 strong {
    color: #20b8ff;
}


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

    margin: auto;

    color: #92a5b9;

    line-height: 1.8;

    font-size: 17px;
}


.cta-buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 35px;
}


.cta-primary,
.cta-secondary {
    padding: 17px 28px;

    border-radius: 9px;

    font-weight: 700;

    transition: .3s ease;
}


.cta-primary {
    background: #12a5f2;
}


.cta-primary:hover {
    transform: translateY(-3px);
}


.cta-secondary {
    border: 1px solid
        rgba(255,255,255,.15);

    color: #d9e5f0;
}


.cta-secondary:hover {
    color: #18b8ff;

    border-color: #18b8ff;
}


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

.video-footer {
    padding: 55px 7% 30px;

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

    background: #040d17;
}


.footer-brand img {
    width: 125px;
}


.footer-brand p {
    max-width: 400px;

    color: #7f94a9;

    line-height: 1.7;

    margin-top: 15px;
}


.footer-copy {
    margin-top: 45px;

    padding-top: 25px;

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

    color: #60758a;

    font-size: 13px;
}


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

@media (max-width: 1100px) {

    .video-nav-container nav {
        gap: 20px;
    }


    .video-hero {
        grid-template-columns: 1fr;
        gap: 70px;
    }


    .hero-content {
        text-align: center;
    }


    .hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


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


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


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


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

}


@media (max-width: 850px) {

    .video-nav-container {
        flex-wrap: wrap;
        padding: 20px 5%;
    }


    .video-nav-container nav {
        order: 3;

        width: 100%;

        overflow-x: auto;

        padding-bottom: 5px;
    }


    .video-nav-container nav a {
        padding: 10px 0;

        white-space: nowrap;
    }


    .video-nav-container nav a.active::after {
        bottom: 0;
    }


    .hero-content h1 {
        letter-spacing: -2px;
    }


    .showreel-video {
        height: 480px;
    }


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


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


    .stat {
        margin-bottom: 20px;
    }

}


@media (max-width: 600px) {

    .video-hero {
        padding: 70px 5%;
    }


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


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


    .hero-trust {
        gap: 20px;
        flex-wrap: wrap;
    }


    .visual-card {
        height: 430px;
    }


    .showreel-section,
    .categories-section,
    .video-showcase,
    .why-video,
    .video-process {
        padding: 90px 5%;
    }


    .showreel-video {
        height: 350px;
        border-radius: 15px;
    }


    .video-overlay {
        left: 12px;
        right: 12px;
        bottom: 12px;

        padding: 14px;

        flex-wrap: wrap;
        gap: 8px;
    }


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


    .work-card.large {
        grid-column: span 1;
    }


    .work-media,
    .work-card:not(.large) .work-media {
        height: 260px;
    }


    .why-video {
        gap: 50px;
    }


    .video-stats {
        grid-template-columns: 1fr 1fr;

        padding: 50px 4%;
    }


    .stat {
        border-right: none;
    }


    .stat strong {
        font-size: 32px;
    }


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


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

}



/* ======================================== */

              /* pricing page of css */


/* ============================================= */



/* =========================================================
   GROWTH HARBOUR - PRICING PAGE
   Premium Dark Blue / Electric Blue Theme
========================================================= */

:root {

    --bg: #061321;

    --bg-dark: #040d18;

    --primary: #0f172a;

    --card: #0d2238;

    --card-light: #102b44;

    --blue: #2563eb;

    --cyan: #18b7ff;

    --cyan-light: #5dd8ff;

    --gold: #f5b82e;

    --white: #f8fafc;

    --text: #d7e3ef;

    --muted: #9db1c5;

    --border: rgba(69, 151, 210, .20);

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

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--bg);

    color: var(--white);

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

    overflow-x: hidden;

}


a {

    text-decoration: none;

    color: inherit;

}


button {

    font-family: inherit;

}


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

.navbar {

    width: 100%;

    height: 92px;

    background: rgba(4, 15, 27, .92);

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

    position: relative;

    z-index: 100;

}


.nav-container {

    max-width: 1500px;

    height: 100%;

    margin: auto;

    padding: 0 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.logo img {

    width: 82px;

    height: auto;

    object-fit: contain;

}


.nav-menu {

    display: flex;

    align-items: center;

    gap: 38px;

}


.nav-menu a {

    color: #edf4fa;

    font-size: 16px;

    font-weight: 500;

    position: relative;

    transition: .3s ease;

}


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

    color: var(--cyan);

}


.nav-menu a.active::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -12px;

    height: 2px;

    background: var(--cyan);

    box-shadow: 0 0 12px var(--cyan);

}


.nav-btn {

    padding: 16px 31px;

    border-radius: 40px;

    background: linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );

    font-weight: 700;

    transition: .3s ease;

    box-shadow:
        0 10px 35px rgba(24,183,255,.20);

}


.nav-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 40px rgba(24,183,255,.35);

}


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

.pricing-hero {

    min-height: 760px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(24,183,255,.13),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #061321,
            #071a2b
        );

}


.hero-content {

    max-width: 1000px;

    position: relative;

    z-index: 2;

    padding: 80px 25px;

}


.eyebrow {

    color: var(--cyan);

    letter-spacing: 4px;

    font-size: 12px;

    font-weight: 700;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    margin-bottom: 28px;

}


.eyebrow span {

    width: 30px;

    height: 1px;

    background: var(--cyan);

}


.pricing-hero h1 {

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

    font-size: clamp(48px, 6vw, 82px);

    line-height: 1.08;

    letter-spacing: -3px;

    margin-bottom: 30px;

}


.pricing-hero h1 span {

    display: block;

    color: var(--cyan);

    text-shadow:
        0 0 35px rgba(24,183,255,.22);

}


.pricing-hero p {

    max-width: 800px;

    margin: auto;

    color: var(--muted);

    font-size: 18px;

    line-height: 1.8;

}


.hero-buttons {

    margin-top: 42px;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}


.primary-btn,
.secondary-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 17px 28px;

    border-radius: 9px;

    font-weight: 700;

    transition: .3s ease;

}


.primary-btn {

    background: linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );

    box-shadow:
        0 12px 35px rgba(24,183,255,.22);

}


.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(24,183,255,.35);

}


.secondary-btn {

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

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

    color: var(--text);

}


.secondary-btn:hover {

    border-color: var(--cyan);

    color: var(--cyan);

    transform: translateY(-4px);

}


.trust-line {

    margin-top: 65px;

    display: flex;

    justify-content: center;

    gap: 70px;

}


.trust-line div {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.trust-line strong {

    font-size: 27px;

    color: var(--white);

}


.trust-line span {

    font-size: 13px;

    color: var(--muted);

}


/* HERO GLOW */

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

}


.glow-one {

    width: 300px;

    height: 300px;

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

    left: -100px;

    top: 180px;

}


.glow-two {

    width: 250px;

    height: 250px;

    background: rgba(24,183,255,.14);

    right: -80px;

    bottom: 100px;

}


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

section {

    padding: 115px 6%;

}


.section-heading {

    max-width: 780px;

    margin: 0 auto 70px;

    text-align: center;

}


.section-label {

    color: var(--cyan);

    font-size: 12px;

    letter-spacing: 4px;

    font-weight: 800;

}


.section-heading h2 {

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

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.15;

    margin-top: 18px;

}


.section-heading h2 span {

    color: var(--cyan);

}


.section-heading p {

    color: var(--muted);

    line-height: 1.8;

    margin-top: 20px;

    font-size: 16px;

}


/* =========================================================
   VALUE
========================================================= */

.value-section {

    background: #071827;

}


.value-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 20px;

}


.value-card {

    padding: 34px 28px;

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

    background:
        linear-gradient(
            145deg,
            rgba(15,43,68,.9),
            rgba(8,26,42,.85)
        );

    border-radius: 18px;

    transition: .4s ease;

}


.value-card:hover {

    transform: translateY(-8px);

    border-color: rgba(24,183,255,.5);

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

}


.value-icon {

    width: 55px;

    height: 55px;

    border-radius: 14px;

    display: grid;

    place-items: center;

    color: var(--cyan);

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

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

    margin-bottom: 24px;

    font-size: 20px;

}


.value-card h3 {

    font-size: 19px;

    margin-bottom: 13px;

}


.value-card p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   PRICING PLANS
========================================================= */

.plans-section {

    background: var(--bg);

}


.pricing-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 22px;

    align-items: stretch;

}


.pricing-card {

    background:
        linear-gradient(
            160deg,
            #102a42,
            #091a2b
        );

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

    border-radius: 24px;

    padding: 38px 34px;

    position: relative;

    transition: .4s ease;

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

}


.pricing-card:hover {

    transform: translateY(-10px);

    border-color:
        rgba(24,183,255,.45);

}


.pricing-card.popular {

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

    background:
        linear-gradient(
            160deg,
            #10314d,
            #0a1e32
        );

    box-shadow:
        0 25px 70px rgba(24,183,255,.12);

}


.popular-badge {

    position: absolute;

    top: -13px;

    left: 50%;

    transform: translateX(-50%);

    padding: 7px 18px;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    border-radius: 30px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    white-space: nowrap;

}


.plan-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


.plan-icon {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: var(--cyan);

    background: rgba(24,183,255,.09);

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

}


.plan-tag {

    color: var(--muted);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 700;

}


.pricing-card h3 {

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

    font-size: 30px;

    margin-bottom: 12px;

}


.plan-description {

    color: var(--muted);

    min-height: 72px;

    line-height: 1.7;

    font-size: 14px;

}


.price {

    padding: 28px 0;

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

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

    margin: 25px 0;

}


.price small {

    display: block;

    color: var(--muted);

    margin-bottom: 5px;

}


.price strong {

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

    font-size: 42px;

}


.price span {

    color: var(--muted);

    font-size: 13px;

}


.custom-price strong {

    font-size: 38px;

    color: var(--cyan);

}


.plan-btn {

    width: 100%;

    padding: 15px;

    border-radius: 9px;

    text-align: center;

    display: block;

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

    color: var(--cyan);

    font-weight: 700;

    transition: .3s ease;

}


.plan-btn:hover {

    background: var(--cyan);

    color: #04111d;

}


.included-title {

    margin-top: 30px;

    margin-bottom: 18px;

    font-size: 13px;

    font-weight: 700;

}


.pricing-card ul {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.pricing-card li {

    color: var(--muted);

    font-size: 14px;

}


.pricing-card li i {

    color: var(--cyan);

    margin-right: 9px;

}


/* =========================================================
   COMPARISON
========================================================= */

.comparison-section {

    background: #071827;

}


.comparison-wrapper {

    max-width: 1100px;

    margin: auto;

    overflow-x: auto;

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

    border-radius: 18px;

}


table {

    width: 100%;

    min-width: 750px;

    border-collapse: collapse;

}


th,
td {

    padding: 21px 25px;

    text-align: center;

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

}


th {

    background: #102b44;

    color: var(--white);

    font-size: 14px;

}


td {

    color: var(--muted);

    font-size: 14px;

}


td:first-child,
th:first-child {

    text-align: left;

}


td:nth-child(3) {

    color: var(--cyan);

    font-weight: 700;

}


.highlight-column {

    color: var(--cyan);

}


/* =========================================================
   ROI
========================================================= */

.roi-section {

    max-width: 1300px;

    margin: 100px auto;

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

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(24,183,255,.12),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #0d2942,
            #081b2d
        );

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 60px;

    align-items: center;

}


.roi-content h2 {

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

    font-size: clamp(35px, 4vw, 52px);

    line-height: 1.15;

    margin: 18px 0;

}


.roi-content h2 span {

    color: var(--cyan);

}


.roi-content p {

    color: var(--muted);

    line-height: 1.8;

    max-width: 600px;

    margin-bottom: 30px;

}


.roi-stats {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


.roi-box {

    padding: 30px 22px;

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

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

    border-radius: 15px;

}


.roi-box strong {

    display: block;

    font-size: 30px;

    color: var(--cyan);

    margin-bottom: 8px;

}


.roi-box span {

    color: var(--muted);

    font-size: 13px;

}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {

    background: var(--bg);

}


.industry-grid {

    max-width: 1000px;

    margin: auto;

    display: grid;

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

    gap: 12px;

}


.industry-grid div {

    min-height: 130px;

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

    border-radius: 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 14px;

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

    transition: .3s ease;

}


.industry-grid div:hover {

    border-color: var(--cyan);

    transform: translateY(-6px);

}


.industry-grid i {

    color: var(--cyan);

    font-size: 22px;

}


.industry-grid span {

    font-size: 13px;

    color: var(--text);

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    background: #071827;

}


.faq-container {

    max-width: 850px;

    margin: auto;

}


details {

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

    padding: 24px 0;

}


summary {

    cursor: pointer;

    list-style: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-weight: 600;

    font-size: 16px;

}


summary::-webkit-details-marker {

    display: none;

}


summary i {

    color: var(--cyan);

    transition: .3s ease;

}


details[open] summary i {

    transform: rotate(45deg);

}


details p {

    color: var(--muted);

    line-height: 1.8;

    padding-top: 18px;

    max-width: 750px;

    font-size: 14px;

}


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

.final-cta {

    min-height: 550px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(24,183,255,.12),
            transparent 38%
        ),

        #061321;

}


.cta-content {

    max-width: 850px;

    position: relative;

    z-index: 2;

}


.cta-content h2 {

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

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.1;

    margin: 18px 0;

}


.cta-content h2 span {

    color: var(--cyan);

}


.cta-content p {

    color: var(--muted);

    max-width: 700px;

    margin: 0 auto 32px;

    line-height: 1.8;

}


.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;

}


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

footer {

    background: #030b14;

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

}


.footer-inner {

    max-width: 1300px;

    margin: auto;

    padding: 45px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.footer-inner h3 {

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

    color: var(--white);

}


.footer-inner p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 6px;

}


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

@media(max-width:1200px) {

    .nav-menu {

        gap: 20px;

    }

    .nav-container {

        padding: 0 25px;

    }

    .value-grid {

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

    }

    .industry-grid {

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

    }

}


@media(max-width:950px) {

    .nav-menu {

        display: none;

    }

    .pricing-grid {

        grid-template-columns: 1fr;

        max-width: 550px;

    }

    .roi-section {

        grid-template-columns: 1fr;

    }

}


@media(max-width:650px) {

    section {

        padding: 80px 20px;

    }

    .navbar {

        height: 75px;

    }

    .nav-container {

        padding: 0 18px;

    }

    .logo img {

        width: 70px;

    }

    .nav-btn {

        padding: 12px 18px;

        font-size: 13px;

    }

    .pricing-hero {

        min-height: 700px;

    }

    .pricing-hero h1 {

        font-size: 43px;

        letter-spacing: -1.5px;

    }

    .pricing-hero p {

        font-size: 15px;

    }

    .trust-line {

        gap: 20px;

        flex-wrap: wrap;

    }

    .trust-line strong {

        font-size: 21px;

    }

    .trust-line span {

        font-size: 11px;

    }

    .value-grid {

        grid-template-columns: 1fr;

    }

    .roi-section {

        margin: 50px 20px;

        padding: 50px 25px;

    }

    .roi-stats {

        grid-template-columns: 1fr 1fr;

    }

    .industry-grid {

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

    }

    .footer-inner {

        flex-direction: column;

        gap: 20px;

        text-align: center;

    }

}


@media(max-width:430px) {

    .nav-btn {

        display: none;

    }

    .pricing-hero h1 {

        font-size: 37px;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .primary-btn,
    .secondary-btn {

        justify-content: center;

        width: 100%;

    }

    .roi-stats {

        grid-template-columns: 1fr;

    }

}



/* ======================================== */


               /* Blog pages of css */

/* ============================================= */




/* =====================================================
   GROWTH HARBOUR BLOG
   Premium Editorial Design
===================================================== */


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

:root {

    --bg: #061321;

    --bg-soft: #081827;

    --card: #0c2135;

    --card-light: #102a42;

    --blue: #19a9ff;

    --blue-dark: #0879c4;

    --gold: #f5b82e;

    --white: #f7f9fc;

    --text: #c5d2df;

    --muted: #7f94a8;

    --border: rgba(120, 170, 210, 0.16);

    --shadow:
        0 25px 70px rgba(0, 0, 0, 0.28);

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--bg);

    color: var(--white);

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

    line-height: 1.7;

    overflow-x: hidden;

}


a {

    color: inherit;

    text-decoration: none;

}


img {

    max-width: 100%;

    display: block;

}


button,
input {

    font: inherit;

}


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

.blog-header {

    position: relative;

    z-index: 100;

    background: rgba(6, 19, 33, 0.94);

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

}


.navbar {

    max-width: 1450px;

    margin: auto;

    min-height: 90px;

    padding: 0 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.brand img {

    width: 105px;

    height: auto;

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-links a {

    position: relative;

    color: #e7edf4;

    font-size: 15px;

    transition: .3s ease;

}


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

    color: var(--blue);

}


.nav-links a.active::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -12px;

    width: 100%;

    height: 2px;

    background: var(--blue);

}


.nav-btn {

    padding: 13px 24px;

    border-radius: 30px;

    background: linear-gradient(
        135deg,
        #19a9ff,
        #0879ff
    );

    font-weight: 700;

    transition: .3s ease;

}


.nav-btn span {

    margin-left: 6px;

}


.nav-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 30px rgba(25, 169, 255, .25);

}


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

.blog-hero {

    min-height: 650px;

    position: relative;

    display: grid;

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

    align-items: center;

    padding: 80px 8%;

    overflow: hidden;

}


.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(25, 169, 255, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(25, 169, 255, .08) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 720px;

}


.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--blue);

    letter-spacing: 4px;

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 25px;

}


.dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow:
        0 0 15px var(--blue);

}


.blog-hero h1 {

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

    font-size: clamp(48px, 6vw, 82px);

    line-height: 1.05;

    letter-spacing: -3px;

    margin-bottom: 28px;

}


.blog-hero h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            #55c5ff,
            var(--gold)
        );

     -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.blog-hero p {

    max-width: 650px;

    color: var(--text);

    font-size: 18px;

    line-height: 1.9;

}


.hero-actions {

    display: flex;

    gap: 15px;

    margin-top: 38px;

}


.primary-btn,
.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 15px 25px;

    border-radius: 10px;

    font-weight: 700;

    transition: .3s ease;

}


.primary-btn {

    color: #03101c;

    background: var(--blue);

}


.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(25, 169, 255, .25);

}


.secondary-btn {

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

    color: var(--white);

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

}


.secondary-btn:hover {

    border-color: var(--blue);

    color: var(--blue);

}


/* =====================================================
   HERO LOGO AREA
===================================================== */

.hero-logo-card {

    height: 460px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.logo-frame {

    width: 370px;

    height: 370px;

    border-radius: 45px;

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

    background:
        radial-gradient(
            circle at center,
            rgba(25,169,255,.18),
            rgba(12,33,53,.95) 62%
        );

    transform: rotate(-5deg);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 0 100px rgba(25,169,255,.12);

}


.logo-frame img {

    width: 270px;

    filter:
        drop-shadow(
            0 15px 30px rgba(0,0,0,.4)
        );

}


.logo-glow {

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: var(--blue);

    filter: blur(130px);

    opacity: .13;

}


.floating-stat {

    position: absolute;

    z-index: 4;

    padding: 20px 25px;

    border-radius: 22px;

    background: rgba(12,33,53,.92);

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

    backdrop-filter: blur(15px);

    box-shadow: var(--shadow);

}


.floating-stat strong {

    display: block;

    color: var(--blue);

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

    font-size: 30px;

}


.floating-stat span {

    color: var(--text);

    font-size: 13px;

}


.stat-one {

    top: 40px;

    right: 0;

}


.stat-two {

    bottom: 35px;

    left: 10px;

}


.stat-two strong {

    color: var(--gold);

}


/* =====================================================
   TOPIC BAR
===================================================== */

.topic-bar {

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

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

    background: #081827;

}


.topic-container {

    max-width: 1300px;

    margin: auto;

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 35px;

}


.topic-label {

    color: var(--blue);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;

    white-space: nowrap;

}


.topics {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}


.topics a {

    padding: 8px 15px;

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

    border-radius: 30px;

    color: var(--text);

    font-size: 13px;

    transition: .3s ease;

}


.topics a:hover {

    border-color: var(--blue);

    color: var(--blue);

}


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

.featured-section,
.articles-section {

    max-width: 1300px;

    margin: auto;

    padding: 110px 25px;

}


.section-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;

}


.section-heading.center {

    display: block;

    text-align: center;

}


.section-label {

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

}


.section-heading h2 {

    max-width: 650px;

    margin-top: 15px;

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

    font-size: clamp(35px, 4vw, 55px);

    line-height: 1.15;

}


.section-heading h2 span {

    color: var(--blue);

}


.section-heading p {

    max-width: 430px;

    color: var(--muted);

}


/* =====================================================
   FEATURED ARTICLE
===================================================== */

.featured-card {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 540px;

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

    border-radius: 30px;

    overflow: hidden;

    background: var(--card);

    box-shadow: var(--shadow);

}


.featured-visual {

    position: relative;

    overflow: hidden;

    min-height: 500px;

    background:
        radial-gradient(
            circle at center,
            #0d5e91,
            #071522 65%
        );

}


.visual-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(255,255,255,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.15) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

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

}


.visual-circle {

    position: absolute;

    width: 340px;

    height: 340px;

    border-radius: 50%;

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

    left: 50%;

    top: 50%;

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

    box-shadow:
        0 0 100px rgba(25,169,255,.25);

}


.visual-content {

    position: absolute;

    left: 50%;

    top: 50%;

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

    text-align: center;

}


.visual-content span {

    color: var(--gold);

    font-size: 12px;

    letter-spacing: 5px;

}


.visual-content strong {

    display: block;

    margin: 15px 0;

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

    font-size: 65px;

    line-height: .9;

}


.visual-content small {

    color: #b9d7ea;

    letter-spacing: 3px;

}


.featured-info {

    padding: 65px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.article-meta {

    display: flex;

    gap: 10px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.featured-info h3 {

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

    font-size: 38px;

    line-height: 1.2;

    margin: 25px 0;

}


.featured-info > p {

    color: var(--text);

}


.article-author {

    margin-top: 40px;

    padding-top: 25px;

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

    display: flex;

    align-items: center;

    gap: 15px;

}


.author-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: linear-gradient(
        135deg,
        var(--blue),
        var(--gold)
    );

    color: #061321;

    font-weight: 800;

}


.article-author strong {

    display: block;

}


.article-author span {

    display: block;

    color: var(--muted);

    font-size: 12px;

}


.read-link {

    margin-left: auto;

    color: var(--blue);

    font-weight: 700;

}


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

.articles-section {

    padding-top: 40px;

}


.article-grid {

    display: grid;

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

    gap: 25px;

}


.article-card {

    overflow: hidden;

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

    border-radius: 20px;

    background: var(--card);

    transition: .35s ease;

}


.article-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(25,169,255,.4);

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

}


.article-image {

    height: 225px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}


.article-image span {

    position: absolute;

    top: 18px;

    left: 18px;

    z-index: 2;

    padding: 6px 11px;

    border-radius: 20px;

    background: rgba(0,0,0,.35);

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

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 800;

}


.image-word {

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

    font-size: 48px;

    font-weight: 800;

    opacity: .9;

    transform: rotate(-8deg);

}


/* Different Visuals */

.seo-image {

    background:
        radial-gradient(
            circle,
            #0879c4,
            #061321 70%
        );

}


.marketing-image {

    background:
        linear-gradient(
            135deg,
            #0c3554,
            #082033,
            #18364a
        );

}


.branding-image {

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(245,184,46,.55),
            transparent 30%
        ),
        #101e2d;

}


.web-image {

    background:
        linear-gradient(
            135deg,
            #0a2e49,
            #061321
        );

}


.motion-image {

    background:
        radial-gradient(
            circle at center,
            #0b75b4,
            #061321 70%
        );

}


.content-image {

    background:
        linear-gradient(
            135deg,
            #12324a,
            #071522
        );

}


.article-body {

    padding: 27px;

}


.card-meta {

    color: var(--blue);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.article-body h3 {

    margin: 13px 0;

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

    font-size: 21px;

    line-height: 1.35;

}


.article-body p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;

}


.article-body a {

    display: inline-block;

    margin-top: 20px;

    color: var(--blue);

    font-size: 14px;

    font-weight: 700;

}


/* =====================================================
   GROWTH PLAYBOOK
===================================================== */

.playbook-section {

    max-width: 1400px;

    margin: 80px auto;

    padding: 90px 8%;

    display: grid;

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

    gap: 80px;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #0b2238,
            #061321
        );

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

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

}


.playbook-content h2 {

    margin: 18px 0 25px;

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

    font-size: clamp(38px, 4vw, 55px);

    line-height: 1.15;

}


.playbook-content h2 span {

    color: var(--gold);

}


.playbook-content p {

    color: var(--text);

    max-width: 550px;

    margin-bottom: 18px;

}


.playbook-content .primary-btn {

    margin-top: 20px;

}


.playbook-visual {

    min-height: 420px;

    position: relative;

}


.playbook-card {

    position: absolute;

    width: 220px;

    padding: 25px;

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

    border-radius: 20px;

    background: rgba(12,33,53,.85);

    backdrop-filter: blur(12px);

    box-shadow: var(--shadow);

}


.playbook-card span {

    color: var(--blue);

    font-size: 12px;

}


.playbook-card strong {

    display: block;

    margin: 10px 0;

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

    font-size: 22px;

}


.playbook-card small {

    color: var(--muted);

}


.card-a {

    top: 20px;

    left: 20px;

}


.card-b {

    top: 100px;

    right: 20px;

}


.card-c {

    bottom: 80px;

    left: 70px;

}


.card-d {

    bottom: 10px;

    right: 80px;

    border-color:
        rgba(245,184,46,.3);

}


/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter-section {

    max-width: 1300px;

    margin: 100px auto;

    padding: 0 25px;

}


.newsletter-box {

    position: relative;

    overflow: hidden;

    padding: 60px;

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

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(25,169,255,.12),
            transparent 35%
        ),
        var(--card);

    display: grid;

    grid-template-columns: 80px 1fr 420px;

    align-items: center;

    gap: 30px;

}


.newsletter-icon {

    width: 65px;

    height: 65px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--gold)
        );

    color: #061321;

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

    font-weight: 800;

}


.newsletter-content > span {

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.newsletter-content h2 {

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

    font-size: 30px;

    margin: 5px 0;

}


.newsletter-content h2 strong {

    color: var(--gold);

}


.newsletter-content p {

    color: var(--muted);

    font-size: 13px;

}


.newsletter-form {

    display: flex;

    padding: 6px;

    border-radius: 12px;

    background: #061321;

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

}


.newsletter-form input {

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: white;

    padding: 12px;

}


.newsletter-form button {

    border: none;

    padding: 0 20px;

    border-radius: 8px;

    background: var(--blue);

    color: #061321;

    font-weight: 800;

    cursor: pointer;

}


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

.blog-cta {

    max-width: 900px;

    margin: 130px auto;

    text-align: center;

    padding: 0 25px;

}


.cta-line {

    width: 70px;

    height: 3px;

    margin: 0 auto 30px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--gold)
        );

}


.blog-cta > span {

    color: var(--blue);

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 800;

}


.blog-cta h2 {

    margin: 20px 0;

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

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.1;

}


.blog-cta h2 strong {

    color: var(--gold);

}


.blog-cta p {

    color: var(--muted);

    max-width: 680px;

    margin: auto;

}


.cta-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

    padding: 17px 30px;

    border-radius: 10px;

    background: var(--blue);

    color: #061321;

    font-weight: 800;

    transition: .3s ease;

}


.cta-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 40px rgba(25,169,255,.25);

}


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

.blog-footer {

    margin-top: 100px;

    padding: 70px 7% 30px;

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

    background: #040e18;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

}


.footer-brand img {

    width: 160px;

}


.footer-brand p {

    margin-top: 20px;

    max-width: 350px;

    color: var(--muted);

}


.footer-links {

    display: flex;

    justify-content: flex-end;

    align-items: flex-start;

    gap: 25px;

    flex-wrap: wrap;

}


.footer-links a {

    color: var(--text);

    font-size: 14px;

}


.footer-links a:hover {

    color: var(--blue);

}


.copyright {

    grid-column: 1 / -1;

    padding-top: 25px;

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

    color: var(--muted);

    font-size: 12px;

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0,0,0,0);

    white-space: nowrap;

    border: 0;

}


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

@media (max-width: 1150px) {

    .nav-links {

        gap: 17px;

    }

    .nav-btn {

        display: none;

    }

    .blog-hero {

        padding: 70px 5%;

    }

    .featured-info {

        padding: 45px;

    }

}


@media (max-width: 900px) {

    .navbar {

        padding: 0 25px;

    }

    .nav-links {

        display: none;

    }


    .blog-hero {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .blog-hero p {

        margin: auto;

    }


    .hero-actions {

        justify-content: center;

    }


    .hero-logo-card {

        margin-top: 40px;

    }


    .featured-card {

        grid-template-columns: 1fr;

    }


    .article-grid {

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

    }


    .playbook-section {

        grid-template-columns: 1fr;

    }


    .newsletter-box {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .newsletter-icon {

        margin: auto;

    }


    .newsletter-form {

        max-width: 500px;

        width: 100%;

        margin: auto;

    }

}


@media (max-width: 600px) {

    .blog-hero {

        min-height: auto;

        padding:
            65px 20px
            30px;

    }


    .blog-hero h1 {

        font-size: 46px;

        letter-spacing: -2px;

    }


    .hero-actions {

        flex-direction: column;

    }


    .hero-actions a {

        width: 100%;

    }


    .logo-frame {

        width: 280px;

        height: 280px;

    }


    .logo-frame img {

        width: 210px;

    }


    .floating-stat {

        padding: 13px 16px;

    }


    .stat-one {

        right: 0;

    }


    .stat-two {

        left: 0;

    }


    .topic-container {

        flex-direction: column;

        align-items: flex-start;

    }


    .featured-section,
    .articles-section {

        padding:
            75px 18px;

    }


    .section-heading {

        display: block;

    }


    .section-heading p {

        margin-top: 20px;

    }


    .featured-info {

        padding: 30px 25px;

    }


    .featured-info h3 {

        font-size: 28px;

    }


    .article-grid {

        grid-template-columns: 1fr;

    }


    .playbook-section {

        margin: 40px 0;

        padding: 70px 25px;

    }


    .playbook-visual {

        min-height: 500px;

    }


    .playbook-card {

        width: 180px;

    }


    .card-a {

        left: 0;

    }


    .card-b {

        right: 0;

    }


    .card-c {

        left: 25px;

    }


    .card-d {

        right: 20px;

    }


    .newsletter-section {

        margin: 70px auto;

    }


    .newsletter-box {

        padding: 35px 22px;

    }


    .newsletter-form {

        flex-direction: column;

        gap: 8px;

        background: transparent;

        border: none;

    }


    .newsletter-form input,
    .newsletter-form button {

        width: 100%;

        min-height: 48px;

        border-radius: 8px;

    }


    .blog-footer {

        grid-template-columns: 1fr;

    }


    .footer-links {

        justify-content: flex-start;

    }


    .copyright {

        grid-column: auto;

    }

}



/* ================================= */

           /* careers pages of css            */

/* ==================================== */



/* =====================================================
   GROWTH HARBOUR
   CAREERS PAGE
===================================================== */

:root {

    --navy: #061321;
    --navy-2: #081a2b;
    --navy-3: #0b2238;

    --blue: #149fe8;
    --blue-light: #45c5ff;
    --blue-soft: rgba(20,159,232,0.12);

    --gold: #f5b82e;

    --white: #ffffff;
    --text: #d7e3ed;
    --muted: #8da3b6;
    --dim: #536b7e;

    --line: rgba(255,255,255,0.09);

    --radius: 22px;

    --container: 1280px;

}


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

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


html {
    scroll-behavior: smooth;
}


body {

    background: var(--navy);

    color: var(--white);

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

    line-height: 1.7;

    overflow-x: hidden;

}


a {
    text-decoration: none;
    color: inherit;
}


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


button {
    font-family: inherit;
}


::selection {
    background: var(--blue);
    color: white;
}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(6,19,33,0.90);

    backdrop-filter: blur(20px);

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

}


.navbar {

    width: min(94%, 1450px);

    min-height: 88px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.brand {

    display: flex;

    align-items: center;

    gap: 11px;

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

    font-weight: 700;

    font-size: 18px;

    white-space: nowrap;

}


.brand img {

    width: 46px;

    height: 46px;

    object-fit: contain;

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 27px;

}


.nav-links a {

    color: #c9d7e3;

    font-size: 14px;

    font-weight: 500;

    transition: 0.3s ease;

    position: relative;

}


.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -9px;

    width: 0;

    height: 2px;

    background: var(--blue);

    transition: 0.3s ease;

}


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

    color: var(--blue-light);

}


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

    width: 100%;

}


.nav-cta {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px 20px;

    border: 1px solid rgba(20,159,232,0.35);

    border-radius: 50px;

    background: rgba(20,159,232,0.08);

    color: var(--blue-light);

    font-size: 13px;

    font-weight: 700;

    transition: 0.3s ease;

}


.nav-cta:hover {

    background: var(--blue);

    color: white;

    transform: translateY(-2px);

}


.menu-btn {

    display: none;

    background: none;

    border: none;

    color: white;

    font-size: 23px;

}


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

section {
    position: relative;
}


.section-label {

    display: block;

    color: var(--blue-light);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 18px;

}


.btn-primary,
.btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 14px 22px;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 700;

    transition: 0.3s ease;

}


.btn-primary {

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #0877c9
        );

    color: white;

    box-shadow:
        0 15px 35px rgba(20,159,232,0.20);

}


.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(20,159,232,0.35);

}


.btn-outline {

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

    background: rgba(255,255,255,0.025);

    color: var(--text);

}


.btn-outline:hover {

    border-color: rgba(20,159,232,0.45);

    color: var(--blue-light);

    transform: translateY(-4px);

}


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

.career-hero {

    width: min(94%, var(--container));

    min-height: 750px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 0.85fr;

    align-items: center;

    gap: 80px;

    padding: 100px 0;

    overflow: hidden;

}


.hero-grid-lines {

    position: absolute;

    inset: 0;

    opacity: 0.25;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 85%
        );

}


.hero-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}


.orb-one {

    width: 350px;

    height: 350px;

    background: rgba(20,159,232,0.10);

    left: -200px;

    top: 100px;

}


.orb-two {

    width: 300px;

    height: 300px;

    background: rgba(245,184,46,0.05);

    right: -150px;

    bottom: 20px;

}


.hero-content {

    position: relative;

    z-index: 2;

}


.hero-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 13px;

    border: 1px solid rgba(20,159,232,0.22);

    background: rgba(20,159,232,0.06);

    border-radius: 50px;

    color: #9bdcff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 24px;

}


.hero-kicker span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow: 0 0 14px var(--blue);

}


.hero-content h1 {

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

    font-size: clamp(50px, 6vw, 82px);

    line-height: 1.02;

    letter-spacing: -3px;

    max-width: 750px;

}


.hero-content h1 em {

    display: block;

    font-style: normal;

    color: transparent;

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

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}


.hero-text {

    max-width: 660px;

    color: var(--text);

    font-size: 17px;

    margin-top: 26px;

}


.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

}


.hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 28px;

    color: var(--muted);

    font-size: 11px;

}


.hero-meta i {

    color: var(--blue);

    margin-right: 5px;

}


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

.hero-visual {

    min-height: 520px;

    position: relative;

    display: grid;

    place-items: center;

}


.hero-main-card {

    width: 420px;

    height: 490px;

    padding: 27px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #102c45,
            #071522
        );

    border: 1px solid rgba(20,159,232,0.25);

    box-shadow:
        0 40px 100px rgba(0,0,0,0.45);

    transform: rotate(4deg);

    position: relative;

    overflow: hidden;

}


.hero-main-card::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background: rgba(20,159,232,0.15);

    filter: blur(80px);

    left: 50%;

    top: 40%;

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

}


.card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #7891a5;

    font-size: 10px;

    letter-spacing: 2px;

    position: relative;

    z-index: 2;

}


.live-status {

    color: #9de0b6;

    display: flex;

    align-items: center;

    gap: 6px;

}


.live-status i {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #3bd278;

    box-shadow: 0 0 10px #3bd278;

}


.hero-card-content {

    position: relative;

    z-index: 2;

    margin-top: 110px;

}


.card-small-text {

    color: var(--blue-light);

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 700;

}


.hero-card-content h2 {

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

    font-size: 38px;

    line-height: 1.1;

    margin-top: 14px;

}


.hero-card-content h2 strong {

    display: block;

    color: var(--blue-light);

}


.hero-card-content p {

    color: var(--muted);

    font-size: 13px;

    max-width: 290px;

    margin-top: 15px;

}


.card-footer {

    position: absolute;

    left: 27px;

    right: 27px;

    bottom: 25px;

    display: grid;

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

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

    padding-top: 20px;

    z-index: 2;

}


.card-footer div {

    text-align: center;

}


.card-footer strong {

    display: block;

    color: var(--blue-light);

    font-size: 19px;

}


.card-footer span {

    color: #637c90;

    font-size: 9px;

}


.floating-tag {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 16px;

    border-radius: 13px;

    background: rgba(10,31,49,0.92);

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

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

    backdrop-filter: blur(15px);

    color: var(--text);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    z-index: 5;

}


.floating-tag i {

    color: var(--blue);

    font-size: 17px;

}


.tag-one {

    left: 0;

    top: 100px;

}


.tag-two {

    right: 0;

    bottom: 100px;

}


.floating-number {

    position: absolute;

    right: 25px;

    top: 25px;

    text-align: right;

}


.floating-number strong {

    display: block;

    color: var(--gold);

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

    font-size: 28px;

}


.floating-number span {

    color: var(--dim);

    font-size: 8px;

    letter-spacing: 2px;

}


/* =====================================================
   NOT JUST A JOB
===================================================== */

.not-job-section {

    padding: 130px max(5%, calc((100vw - 1200px) / 2));

    background: var(--navy-2);

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

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

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

}


.not-job-intro h2 {

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

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.05;

    letter-spacing: -2px;

}


.not-job-intro h2 span {

    display: block;

    color: var(--blue-light);

}


.not-job-content {

    padding-top: 30px;

}


.not-job-content p {

    color: var(--muted);

    font-size: 15px;

}


.not-job-content .large-copy {

    color: var(--text);

    font-size: 22px;

    line-height: 1.5;

    margin-bottom: 25px;

}


.growth-pillars {

    grid-column: 1 / -1;

    display: grid;

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

    gap: 1px;

    background: var(--line);

    margin-top: 25px;

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

}


.growth-pillars article {

    padding: 35px;

    background: var(--navy-2);

    display: grid;

    grid-template-columns: 35px 1fr;

    gap: 20px;

}


.growth-pillars article > span {

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

}


.growth-pillars i {

    color: var(--blue);

    font-size: 21px;

}


.growth-pillars h3 {

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

    font-size: 18px;

    margin-top: 14px;

}


.growth-pillars p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 7px;

}


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

.journey-section {

    width: min(1200px,90%);

    margin: auto;

    padding: 140px 0;

}


.journey-heading {

    max-width: 650px;

}


.journey-heading h2 {

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

    font-size: clamp(40px,5vw,64px);

    line-height: 1.05;

}


.journey-heading h2 span {

    color: var(--blue-light);

}


.journey-heading p {

    color: var(--muted);

    margin-top: 18px;

}


.journey-track {

    position: relative;

    margin-top: 90px;

    display: grid;

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

    gap: 25px;

}


.journey-line {

    position: absolute;

    left: 0;

    right: 0;

    top: 28px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            rgba(20,159,232,0.1)
        );

}


.journey-step {

    position: relative;

    z-index: 2;

}


.journey-number {

    width: 56px;

    height: 56px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--navy);

    border: 1px solid rgba(20,159,232,0.4);

    color: var(--blue-light);

    font-size: 11px;

    font-weight: 800;

}


.journey-copy {

    padding-top: 30px;

    padding-right: 20px;

}


.journey-copy > span {

    color: var(--gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.journey-copy h3 {

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

    font-size: 25px;

    margin-top: 7px;

}


.journey-copy p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 8px;

}


/* =====================================================
   MINDSET
===================================================== */

.mindset-section {

    padding: 130px 5%;

    background:
        linear-gradient(
            120deg,
            #071624,
            #0b2238
        );

    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 90px;

}


.mindset-left {

    max-width: 500px;

}


.mindset-left h2 {

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

    font-size: clamp(40px,4.5vw,60px);

    line-height: 1.05;

}


.mindset-left h2 span {

    color: var(--blue-light);

}


.mindset-left > p {

    color: var(--muted);

    margin-top: 22px;

}


.mindset-note {

    margin-top: 45px;

    border-left: 2px solid var(--gold);

    padding-left: 20px;

}


.mindset-note i {

    color: var(--gold);

    font-size: 14px;

}


.mindset-note p {

    color: var(--text);

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

    margin-top: 8px;

}


.mindset-grid {

    display: grid;

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

    gap: 1px;

    background: var(--line);

}


.mindset-item {

    background: #0a1d30;

    padding: 30px;

    min-height: 210px;

    position: relative;

    transition: 0.3s ease;

}


.mindset-item:hover {

    background: #0d263e;

}


.mindset-item > span {

    position: absolute;

    top: 22px;

    right: 25px;

    color: #405a70;

    font-size: 10px;

}


.mindset-item i {

    color: var(--blue);

    font-size: 20px;

}


.mindset-item h3 {

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

    font-size: 19px;

    margin-top: 20px;

}


.mindset-item p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 5px;

}


/* =====================================================
   DEPARTMENTS
===================================================== */

.departments-section {

    width: min(1200px,90%);

    margin: auto;

    padding: 140px 0;

}


.departments-top {

    display: grid;

    grid-template-columns: 1fr 0.65fr;

    gap: 80px;

    align-items: end;

}


.departments-top h2 {

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

    font-size: clamp(40px,5vw,65px);

    line-height: 1.05;

}


.departments-top h2 span {

    color: var(--blue-light);

}


.departments-top > p {

    color: var(--muted);

    font-size: 14px;

}


.department-list {

    margin-top: 65px;

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

}


.department-row {

    min-height: 125px;

    display: grid;

    grid-template-columns: 50px 70px 1fr 35px;

    align-items: center;

    gap: 20px;

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

    transition: 0.35s ease;

}


.department-row:hover {

    padding-left: 15px;

    background: rgba(20,159,232,0.025);

}


.department-number {

    color: #4b6377;

    font-size: 11px;

}


.department-icon {

    width: 52px;

    height: 52px;

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

    border-radius: 13px;

    display: grid;

    place-items: center;

    color: var(--blue);

}


.department-info > span {

    color: var(--blue-light);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.department-info h3 {

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

    font-size: 23px;

    margin-top: 3px;

}


.department-info p {

    color: var(--muted);

    font-size: 12px;

}


.department-arrow {

    color: #62798c;

    transition: 0.3s ease;

}


.department-row:hover .department-arrow {

    color: var(--blue-light);

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

}


/* =====================================================
   POSITIONS
===================================================== */

.positions-section {

    padding: 130px 5%;

    background: var(--navy-2);

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

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

}


.positions-heading {

    width: min(1100px,100%);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 0.55fr;

    gap: 70px;

    align-items: end;

}


.positions-heading h2 {

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

    font-size: clamp(40px,5vw,62px);

    line-height: 1.05;

}


.positions-heading h2 span {

    color: var(--blue-light);

}


.positions-heading > p {

    color: var(--muted);

    font-size: 13px;

}


.jobs {

    width: min(1100px,100%);

    margin: 65px auto 0;

}


.job-row {

    min-height: 155px;

    padding: 25px 0;

    display: grid;

    grid-template-columns: 55px 1.4fr 1fr 100px;

    align-items: center;

    gap: 25px;

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

    position: relative;

}


.job-row:last-child {

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

}


.job-index {

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

}


.job-title > span {

    color: var(--blue-light);

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 800;

}


.job-title h3 {

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

    font-size: 19px;

    margin-top: 4px;

}


.job-title p {

    color: var(--muted);

    font-size: 12px;

    max-width: 450px;

}


.job-details {

    display: flex;

    flex-direction: column;

    gap: 7px;

    color: var(--muted);

    font-size: 10px;

}


.job-details i {

    width: 16px;

    color: var(--blue);

}


.job-apply {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 13px;

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

    border-radius: 9px;

    color: var(--blue-light);

    font-size: 11px;

    font-weight: 700;

    transition: 0.3s ease;

}


.job-apply:hover {

    background: var(--blue);

    color: white;

    border-color: var(--blue);

}


.featured-job {

    padding-left: 18px;

    padding-right: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(20,159,232,0.08),
            transparent
        );

    border: 1px solid rgba(20,159,232,0.22);

    margin: 15px 0;

}


.featured-label {

    position: absolute;

    right: 18px;

    top: 0;

    background: var(--gold);

    color: #111;

    padding: 4px 9px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    border-radius: 0 0 6px 6px;

}


/* =====================================================
   OPEN APPLICATION
===================================================== */

.open-application {

    width: min(1150px,90%);

    min-height: 500px;

    margin: 130px auto;

    display: grid;

    place-items: center;

    text-align: center;

    overflow: hidden;

    border-radius: 30px;

    border: 1px solid rgba(20,159,232,0.25);

    background:
        radial-gradient(
            circle at center,
            rgba(20,159,232,0.16),
            transparent 52%
        ),
        #0a1f32;

}


.application-pattern {

    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    opacity: 0.2;

}


.application-content {

    max-width: 750px;

    padding: 70px 30px;

    position: relative;

    z-index: 2;

}


.application-content h2 {

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

    font-size: clamp(40px,5vw,65px);

    line-height: 1.05;

}


.application-content h2 span {

    color: var(--blue-light);

}


.application-content > p {

    color: var(--muted);

    margin: 20px auto 30px;

    max-width: 620px;

}


.application-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}


.application-content small {

    display: block;

    color: #5c7386;

    font-size: 10px;

    margin-top: 20px;

}


/* =====================================================
   CULTURE
===================================================== */

.culture-section {

    width: min(1200px,90%);

    margin: auto;

    padding: 20px 0 140px;

}


.culture-heading h2 {

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

    font-size: clamp(40px,5vw,65px);

    line-height: 1.05;

}


.culture-heading h2 span {

    color: var(--blue-light);

}


.culture-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 65px;

}


.culture-feature {

    min-height: 420px;

    padding: 45px;

    background:
        linear-gradient(
            145deg,
            #0d2a43,
            #071827
        );

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

    border-radius: 25px;

    position: relative;

    overflow: hidden;

}


.culture-feature::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: rgba(20,159,232,0.12);

    filter: blur(70px);

    right: -80px;

    bottom: -80px;

}


.culture-number {

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

}


.culture-feature > i {

    display: block;

    color: var(--blue);

    font-size: 28px;

    margin-top: 130px;

}


.culture-feature h3 {

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

    font-size: 27px;

    margin-top: 18px;

}


.culture-feature p {

    max-width: 450px;

    color: var(--muted);

    font-size: 13px;

    margin-top: 8px;

}


.culture-stack {

    display: grid;

    gap: 1px;

    background: var(--line);

}


.culture-stack article {

    background: var(--navy-2);

    padding: 28px;

    display: grid;

    grid-template-columns: 40px 1fr;

    gap: 20px;

    align-items: center;

}


.culture-stack article > span {

    color: var(--gold);

    font-size: 10px;

    font-weight: 800;

}


.culture-stack h3 {

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

    font-size: 18px;

}


.culture-stack p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 4px;

}


/* =====================================================
   FRESHERS
===================================================== */

.freshers-section {

    padding: 100px 8%;

    background: #081b2d;

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

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

    display: grid;

    grid-template-columns: 80px 1fr 0.8fr;

    gap: 50px;

    align-items: center;

}


.freshers-number {

    color: var(--gold);

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

    font-size: 40px;

    font-weight: 800;

}


.freshers-content {

    max-width: 650px;

}


.freshers-content h2 {

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

    font-size: clamp(38px,4vw,57px);

    line-height: 1.05;

}


.freshers-content h2 span {

    color: var(--blue-light);

}


.freshers-content > p {

    color: var(--muted);

    margin-top: 20px;

    font-size: 14px;

}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--blue-light);

    font-weight: 700;

    font-size: 12px;

    margin-top: 25px;

}


.text-link i {

    transition: 0.3s ease;

}


.text-link:hover i {

    transform: translateX(5px);

}


.internship-list {

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

    padding-left: 35px;

    display: grid;

    gap: 13px;

}


.internship-list div {

    color: var(--text);

    font-size: 12px;

}


.internship-list i {

    color: var(--blue);

    width: 24px;

}


/* =====================================================
   HIRING
===================================================== */

.hiring-section {

    width: min(1200px,90%);

    margin: auto;

    padding: 140px 0;

}


.hiring-heading {

    max-width: 650px;

}


.hiring-heading h2 {

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

    font-size: clamp(40px,5vw,64px);

    line-height: 1.05;

}


.hiring-heading h2 span {

    color: var(--blue-light);

}


.hiring-heading p {

    color: var(--muted);

    margin-top: 18px;

}


.hiring-steps {

    margin-top: 70px;

    display: grid;

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

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

}


.hiring-steps article {

    min-height: 230px;

    padding: 30px 25px;

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

    position: relative;

}


.hiring-steps article:last-child {

    border-right: none;

}


.hiring-steps strong {

    color: var(--gold);

    font-size: 11px;

}


.hiring-steps h3 {

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

    font-size: 20px;

    margin-top: 55px;

}


.hiring-steps p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 5px;

}


/* =====================================================
   FAQ
===================================================== */

.faq-section {

    padding: 120px 5%;

    background: var(--navy-2);

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

}


.faq-heading {

    width: min(800px,100%);

    margin: auto;

}


.faq-heading h2 {

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

    font-size: clamp(40px,5vw,60px);

    line-height: 1.05;

}


.faq-heading h2 span {

    color: var(--blue-light);

}


.faq-list {

    width: min(800px,100%);

    margin: 65px auto 0;

}


details {

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

}


details:last-child {

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

}


summary {

    list-style: none;

    cursor: pointer;

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

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

    font-size: 14px;

    font-weight: 600;

}


summary::-webkit-details-marker {

    display: none;

}


summary i {

    color: var(--blue);

    transition: 0.3s ease;

}


details[open] summary i {

    transform: rotate(45deg);

}


details p {

    color: var(--muted);

    font-size: 13px;

    padding: 0 40px 25px 0;

}


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

.final-career-cta {

    min-height: 620px;

    display: grid;

    place-items: center;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(20,159,232,0.15),
            transparent 45%
        ),
        var(--navy);

}


.final-grid {

    position: absolute;

    inset: 0;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

}


.final-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding: 50px 20px;

}


.final-content h2 {

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

    font-size: clamp(45px,6vw,78px);

    line-height: 1.02;

    letter-spacing: -3px;

}


.final-content h2 span {

    display: block;

    color: var(--blue-light);

}


.final-content > p {

    max-width: 600px;

    margin: 22px auto 30px;

    color: var(--muted);

}


.final-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}


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

.site-footer {

    background: #040d16;

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

    padding: 75px 5% 25px;

}


.footer-main {

    width: min(1200px,100%);

    margin: auto;

    display: grid;

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

    gap: 60px;

}


.footer-brand p {

    max-width: 400px;

    color: var(--muted);

    font-size: 12px;

    margin-top: 15px;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.footer-column h3 {

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

    font-size: 14px;

    margin-bottom: 7px;

}


.footer-column a {

    color: var(--muted);

    font-size: 12px;

    transition: 0.3s ease;

}


.footer-column a:hover {

    color: var(--blue-light);

    transform: translateX(3px);

}


.footer-bottom {

    width: min(1200px,100%);

    margin: 55px auto 0;

    padding-top: 20px;

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

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #506679;

    font-size: 10px;

}


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

@media (max-width: 1150px) {

    .nav-links {
        gap: 16px;
    }

    .career-hero {
        gap: 40px;
    }

}


@media (max-width: 950px) {

    .nav-links,
    .nav-cta {
        display: none;
    }

    .menu-btn {
        display: block;
    }


    .career-hero {

        grid-template-columns: 1fr;

        text-align: center;

        padding-top: 80px;

    }


    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-actions,
    .hero-meta {
        justify-content: center;
    }


    .hero-visual {
        margin-top: 30px;
    }


    .not-job-section {
        grid-template-columns: 1fr;
    }


    .not-job-content {
        padding-top: 0;
    }


    .growth-pillars {
        grid-column: auto;
    }


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


    .journey-line {
        display: none;
    }


    .mindset-section {
        grid-template-columns: 1fr;
    }


    .departments-top {
        grid-template-columns: 1fr;
        gap: 25px;
    }


    .positions-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .job-row {
        grid-template-columns: 45px 1fr;
    }


    .job-details {
        grid-column: 2;
    }


    .job-apply {
        grid-column: 2;
        width: max-content;
    }


    .freshers-section {
        grid-template-columns: 60px 1fr;
    }


    .internship-list {
        grid-column: 2;
    }


    .hiring-steps {
        grid-template-columns: repeat(3,1fr);
    }


    .hiring-steps article:nth-child(3) {
        border-right: none;
    }


    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 650px) {

    .navbar {
        min-height: 75px;
    }


    .brand span {
        display: none;
    }


    .career-hero {
        width: 90%;
        padding: 65px 0;
    }


    .hero-content h1 {
        font-size: 47px;
        letter-spacing: -2px;
    }


    .hero-text {
        font-size: 14px;
    }


    .hero-meta {
        flex-direction: column;
        gap: 8px;
    }


    .hero-main-card {
        width: 285px;
        height: 380px;
    }


    .hero-card-content {
        margin-top: 70px;
    }


    .hero-card-content h2 {
        font-size: 27px;
    }


    .tag-one {
        left: -5px;
        top: 45px;
    }


    .tag-two {
        right: -5px;
        bottom: 45px;
    }


    .floating-number {
        right: 5px;
    }


    .not-job-section,
    .journey-section,
    .mindset-section,
    .departments-section,
    .hiring-section,
    .culture-section {
        padding-top: 85px;
        padding-bottom: 85px;
    }


    .growth-pillars {
        grid-template-columns: 1fr;
    }


    .growth-pillars article {
        border-bottom: 1px solid var(--line);
    }


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


    .journey-copy {
        padding-top: 15px;
    }


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


    .department-row {
        grid-template-columns: 35px 52px 1fr 20px;
        gap: 10px;
        min-height: 105px;
    }


    .department-info h3 {
        font-size: 17px;
    }


    .department-info p {
        font-size: 10px;
    }


    .department-icon {
        width: 45px;
        height: 45px;
    }


    .job-row {
        grid-template-columns: 35px 1fr;
        gap: 15px;
        padding: 25px 0;
    }


    .job-title h3 {
        font-size: 17px;
    }


    .job-details {
        grid-column: 2;
    }


    .job-apply {
        grid-column: 2;
        width: 100%;
    }


    .featured-job {
        padding-left: 12px;
        padding-right: 12px;
    }


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


    .culture-feature {
        min-height: 350px;
    }


    .culture-feature > i {
        margin-top: 90px;
    }


    .freshers-section {
        grid-template-columns: 1fr;
        padding: 80px 7%;
        gap: 20px;
    }


    .internship-list {
        grid-column: auto;
        border-left: none;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 25px;
    }


    .hiring-steps {
        grid-template-columns: 1fr;
    }


    .hiring-steps article {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }


    .hiring-steps h3 {
        margin-top: 25px;
    }


    .open-application {
        width: 90%;
        margin: 80px auto;
    }


    .faq-section {
        padding: 85px 7%;
    }


    .final-career-cta {
        min-height: 520px;
    }


    .final-content h2 {
        font-size: 46px;
        letter-spacing: -2px;
    }


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


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

}




/* ======================================= */

                /* contect page of css */

/* ======================================== */




/* =========================================================
   GROWTH HARBOUR
   CONTACT PAGE
========================================================= */


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

:root {

    --navy: #061525;
    --navy-light: #0a1c2f;
    --card: #0d2237;
    --card-light: #112b43;

    --blue: #19aaff;
    --blue-dark: #087fd1;
    --blue-soft: rgba(25, 170, 255, 0.12);

    --gold: #f5b82e;

    --white: #ffffff;
    --text: #d6e2ef;
    --muted: #8da2b8;

    --border: rgba(255, 255, 255, 0.09);

    --shadow:
        0 25px 70px rgba(0, 0, 0, 0.30);

    --radius: 22px;

}


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

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


html {
    scroll-behavior: smooth;
}


body {

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

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(25, 170, 255, 0.08),
            transparent 30%
        ),
        var(--navy);

    color: var(--white);

    line-height: 1.6;

    overflow-x: hidden;

}


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


a {
    text-decoration: none;
    color: inherit;
}


button,
input,
textarea,
select {
    font-family: inherit;
}


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

.container {

    width: min(1200px, 92%);

    margin: auto;

}


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

.site-header {

    height: 95px;

    background: rgba(5, 18, 31, 0.92);

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

    position: sticky;

    top: 0;

    z-index: 1000;

    backdrop-filter: blur(18px);

}


.navbar {

    width: min(1470px, 94%);

    height: 95px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.brand-logo {

    width: 145px;

    flex-shrink: 0;

}


.brand-logo img {

    width: 100%;

    height: auto;

    object-fit: contain;

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 38px;

}


.nav-links a {

    color: #e8eef5;

    font-size: 16px;

    font-weight: 500;

    position: relative;

    transition: 0.3s ease;

}


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

    color: var(--blue);

}


.nav-links a::after {

    content: "";

    position: absolute;

    width: 0;

    height: 2px;

    left: 0;

    bottom: -10px;

    background: var(--blue);

    transition: 0.3s ease;

}


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

    width: 100%;

}


.nav-cta {

    background:
        linear-gradient(
            135deg,
            #1db5ff,
            #087df0
        );

    padding: 14px 24px;

    border-radius: 40px;

    font-weight: 700;

    white-space: nowrap;

    display: flex;

    align-items: center;

    gap: 10px;

    box-shadow:
        0 12px 30px rgba(0, 140, 255, 0.22);

    transition: 0.3s ease;

}


.nav-cta:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(0, 140, 255, 0.35);

}


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

.section-tag {

    color: var(--blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.section-heading {

    max-width: 750px;

    margin-bottom: 70px;

}


.section-heading.center {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

}


.section-heading h2 {

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

    font-size: clamp(38px, 5vw, 58px);

    line-height: 1.12;

    margin: 15px 0 20px;

    letter-spacing: -1.5px;

}


.section-heading h2 span {

    color: var(--blue);

}


.section-heading p {

    color: var(--muted);

    font-size: 17px;

    max-width: 700px;

}


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

.contact-hero {

    min-height: 720px;

    position: relative;

    overflow: hidden;

    padding: 110px 0;

    background:

        linear-gradient(
            120deg,
            rgba(6, 21, 37, 0.96),
            rgba(8, 31, 52, 0.92)
        );

}


.contact-hero::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background: rgba(25, 170, 255, 0.06);

    filter: blur(80px);

    right: -150px;

    top: -180px;

}


.contact-hero .container {

    min-height: 500px;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 70px;

}


.hero-content {

    position: relative;

    z-index: 2;

}


.hero-label {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

}


.hero-label span {

    width: 30px;

    height: 2px;

    background: var(--blue);

}


.hero-content h1 {

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

    font-size: clamp(48px, 6vw, 76px);

    line-height: 1.02;

    letter-spacing: -3px;

    margin: 22px 0;

}


.hero-content h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            #73d4ff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.hero-content > p {

    max-width: 690px;

    color: var(--text);

    font-size: 18px;

    line-height: 1.9;

}


.hero-actions {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 35px;

}


.primary-btn,
.secondary-btn {

    min-height: 54px;

    padding: 0 25px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-weight: 700;

    transition: 0.3s ease;

}


.primary-btn {

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #087ff0
        );

    box-shadow:
        0 15px 35px rgba(25, 170, 255, 0.2);

}


.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(25, 170, 255, 0.32);

}


.secondary-btn {

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

    background: rgba(255,255,255,0.03);

    color: var(--text);

}


.secondary-btn:hover {

    border-color: var(--blue);

    color: var(--blue);

}


.hero-trust {

    display: flex;

    gap: 25px;

    margin-top: 50px;

    flex-wrap: wrap;

}


.trust-item {

    display: flex;

    align-items: center;

    gap: 10px;

}


.trust-item > i {

    color: var(--blue);

    font-size: 18px;

}


.trust-item div {

    display: flex;

    flex-direction: column;

}


.trust-item strong {

    font-size: 13px;

}


.trust-item span {

    color: var(--muted);

    font-size: 11px;

}


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

.hero-visual {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.logo-orbit {

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(25, 170, 255, 0.20),
            rgba(9, 31, 51, 0.6) 60%,
            rgba(6, 21, 37, 0.2)
        );

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

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 0 80px rgba(25, 170, 255, 0.12);

    position: relative;

    z-index: 2;

    animation: floatLogo 5s ease-in-out infinite;

}


.logo-orbit img {

    width: 220px;

    filter:
        drop-shadow(
            0 0 25px rgba(25,170,255,0.20)
        );

}


.visual-ring {

    position: absolute;

    border-radius: 50%;

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

}


.ring-one {

    width: 450px;

    height: 450px;

}


.ring-two {

    width: 600px;

    height: 600px;

    border-color: rgba(245,184,46,0.08);

}


.floating-card {

    position: absolute;

    background:
        rgba(13, 34, 55, 0.94);

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

    border-radius: 18px;

    padding: 18px 22px;

    display: flex;

    flex-direction: column;

    box-shadow: var(--shadow);

    z-index: 4;

    backdrop-filter: blur(12px);

}


.floating-card strong {

    color: var(--blue);

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

    font-size: 30px;

}


.floating-card span {

    color: var(--text);

    font-size: 12px;

}


.card-top {

    top: 30px;

    right: 0;

}


.card-bottom {

    bottom: 35px;

    left: 0;

}


.card-bottom strong {

    color: var(--gold);

}


.card-right {

    right: -30px;

    bottom: 120px;

}


@keyframes floatLogo {

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

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

}


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

.contact-section {

    padding: 120px 0;

    background: var(--navy);

}


.contact-layout {

    display: grid;

    grid-template-columns: 1.5fr 0.85fr;

    gap: 30px;

    align-items: start;

}


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

.form-card {

    background:
        linear-gradient(
            145deg,
            rgba(16, 42, 66, 0.96),
            rgba(9, 29, 47, 0.96)
        );

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

    border-radius: var(--radius);

    padding: 42px;

    box-shadow: var(--shadow);

}


.form-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;

}


.form-header span {

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.form-header h3 {

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

    font-size: 26px;

    margin-top: 6px;

}


.form-icon {

    width: 52px;

    height: 52px;

    border-radius: 15px;

    background: var(--blue-soft);

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

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blue);

    font-size: 20px;

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}


.form-group {

    margin-bottom: 22px;

}


.form-group label {

    display: block;

    color: #e8f0f8;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 9px;

}


.optional {

    color: var(--muted);

    font-weight: 400;

    margin-left: 5px;

}


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

    width: 100%;

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

    background: #07192b;

    color: var(--white);

    border-radius: 11px;

    padding: 15px 16px;

    outline: none;

    font-size: 14px;

    transition: 0.3s ease;

}


.form-group input,
.form-group select {

    height: 52px;

}


.form-group textarea {

    resize: vertical;

    min-height: 145px;

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color: #61768c;

}


.form-group select {

    cursor: pointer;

}


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

    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(25,170,255,0.08);

}


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

.logo-upload {

    position: relative;

    min-height: 125px;

    border: 1px dashed rgba(25,170,255,0.35);

    border-radius: 13px;

    background:
        rgba(25,170,255,0.035);

    transition: 0.3s ease;

    overflow: hidden;

}


.logo-upload:hover {

    border-color: var(--blue);

    background:
        rgba(25,170,255,0.07);

}


.logo-upload input {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;

}


.upload-content {

    min-height: 125px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    pointer-events: none;

}


.upload-icon {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blue);

    background: var(--blue-soft);

    margin-bottom: 4px;

}


.upload-content strong {

    font-size: 13px;

}


.upload-content span {

    color: var(--muted);

    font-size: 11px;

}


/* =========================================================
   PRIVACY
========================================================= */

.privacy-check {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: var(--muted);

    font-size: 12px;

    margin: 10px 0 20px;

    cursor: pointer;

}


.privacy-check input {

    margin-top: 3px;

    accent-color: var(--blue);

}


.submit-btn {

    width: 100%;

    height: 58px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #087ff0
        );

    font-weight: 800;

    font-size: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    transition: 0.3s ease;

}


.submit-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(25,170,255,0.25);

}


.form-note {

    text-align: center;

    color: var(--muted);

    font-size: 11px;

    margin-top: 15px;

}


.form-note i {

    color: var(--blue);

    margin-right: 5px;

}


/* =========================================================
   SIDEBAR
========================================================= */

.contact-sidebar {

    display: flex;

    flex-direction: column;

    gap: 20px;

    position: sticky;

    top: 120px;

}


.info-card {

    background:
        linear-gradient(
            150deg,
            #0e2943,
            #0a1d30
        );

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

    border-radius: var(--radius);

    padding: 35px;

}


.card-label {

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.info-card h3 {

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

    font-size: 29px;

    line-height: 1.2;

    margin: 14px 0;

}


.info-card h3 span {

    color: var(--blue);

}


.info-card > p {

    color: var(--muted);

    font-size: 14px;

    margin-bottom: 30px;

}


.contact-detail {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 0;

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

}


.detail-icon {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--blue-soft);

    color: var(--blue);

}


.contact-detail div:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.contact-detail small {

    color: var(--muted);

    font-size: 11px;

}


.contact-detail strong {

    color: var(--white);

    font-size: 13px;

    font-weight: 600;

}


.contact-detail:hover strong {

    color: var(--blue);

}


.response-badge {

    margin-top: 20px;

    padding: 13px;

    border-radius: 10px;

    background: rgba(25,170,255,0.07);

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

    color: var(--muted);

    font-size: 11px;

    text-align: center;

}


.response-badge strong {

    color: var(--blue);

}


.online-dot {

    display: inline-block;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #28d17c;

    margin-right: 6px;

    box-shadow:
        0 0 10px rgba(40,209,124,0.8);

}


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

.social-card {

    padding: 28px 30px;

    border-radius: var(--radius);

    background: #0b1f33;

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

}


.social-card > span {

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.social-card h4 {

    margin: 6px 0 18px;

    font-size: 18px;

}


.social-links {

    display: flex;

    gap: 10px;

}


.social-links a {

    width: 43px;

    height: 43px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #07192b;

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

    color: var(--text);

    transition: 0.3s ease;

}


.social-links a:hover {

    color: var(--blue);

    border-color: var(--blue);

    transform: translateY(-4px);

}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section {

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #07192b,
            #061525
        );

}


.why-grid {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 100px;

}


.why-heading h2 {

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

    font-size: clamp(38px, 4vw, 54px);

    line-height: 1.1;

    margin: 15px 0 20px;

}


.why-heading h2 span {

    display: block;

    color: var(--blue);

}


.why-heading p {

    color: var(--muted);

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 25px;

}


.text-link {

    color: var(--blue);

    font-weight: 700;

    display: inline-flex;

    gap: 10px;

    align-items: center;

}


.why-points {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0 40px;

}


.why-point {

    display: flex;

    gap: 18px;

    padding: 30px 0;

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

}


.why-point > span {

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;

}


.why-point h3 {

    font-size: 17px;

    margin-bottom: 8px;

}


.why-point p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   HELP SECTION
========================================================= */

.help-section {

    padding: 120px 0;

}


.help-grid {

    display: grid;

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

    gap: 18px;

}


.help-card {

    position: relative;

    padding: 30px;

    min-height: 245px;

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

    background:
        linear-gradient(
            145deg,
            rgba(13,34,55,0.95),
            rgba(8,25,41,0.95)
        );

    border-radius: 18px;

    transition: 0.35s ease;

    overflow: hidden;

}


.help-card::before {

    content: "";

    position: absolute;

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background: var(--blue);

    opacity: 0;

    filter: blur(70px);

    right: -40px;

    top: -40px;

    transition: 0.35s ease;

}


.help-card:hover {

    transform: translateY(-8px);

    border-color: rgba(25,170,255,0.4);

}


.help-card:hover::before {

    opacity: 0.18;

}


.help-card > i {

    color: var(--blue);

    font-size: 25px;

    margin-bottom: 25px;

}


.help-card h3 {

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

    font-size: 20px;

    margin-bottom: 10px;

}


.help-card p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

}


.help-card > span {

    position: absolute;

    bottom: 25px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 700;

}


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

.process-section {

    padding: 120px 0;

    background: #071a2b;

}


.process-grid {

    display: grid;

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

    gap: 30px;

    position: relative;

}


.process-item {

    position: relative;

    padding-top: 15px;

}


.process-number {

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blue);

    font-weight: 800;

    background: #0a253d;

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

    margin-bottom: 25px;

    position: relative;

    z-index: 2;

}


.process-item h3 {

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

    font-size: 19px;

    margin-bottom: 10px;

}


.process-item p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

}


.process-line {

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            rgba(25,170,255,0.05)
        );

    position: relative;

    top: 45px;

    margin-bottom: -1px;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    padding: 120px 0;

}


.faq-grid {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 90px;

}


.faq-intro h2 {

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

    font-size: 45px;

    line-height: 1.1;

    margin: 15px 0;

}


.faq-intro h2 span {

    color: var(--blue);

    display: block;

}


.faq-intro p {

    color: var(--muted);

    margin-bottom: 30px;

}


.faq-list details {

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

    padding: 20px 0;

}


.faq-list summary {

    list-style: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-weight: 600;

    font-size: 15px;

}


.faq-list summary::-webkit-details-marker {

    display: none;

}


.faq-list summary i {

    color: var(--blue);

    transition: 0.3s ease;

}


.faq-list details[open] summary i {

    transform: rotate(45deg);

}


.faq-list details p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;

    padding-top: 15px;

    max-width: 700px;

}


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

.final-cta {

    padding: 120px 0;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #08213a,
            #061525
        );

    text-align: center;

}


.cta-glow {

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(25,170,255,0.1);

    filter: blur(90px);

    left: 50%;

    top: 50%;

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

}


.cta-content {

    position: relative;

    z-index: 2;

}


.cta-content > span {

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

}


.cta-content h2 {

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

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.08;

    margin: 18px auto;

    max-width: 800px;

}


.cta-content h2 strong {

    display: block;

    color: var(--blue);

}


.cta-content p {

    color: var(--muted);

    font-size: 17px;

    margin-bottom: 30px;

}


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

.site-footer {

    background: #040f1c;

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

    padding: 70px 0 25px;

}


.footer-grid {

    display: grid;

    grid-template-columns: 1.5fr 0.7fr 0.7fr 1fr;

    gap: 50px;

    padding-bottom: 50px;

}


.footer-brand img {

    width: 190px;

    margin-bottom: 20px;

}


.footer-brand p {

    color: var(--muted);

    font-size: 13px;

    max-width: 330px;

    line-height: 1.8;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.footer-column h4 {

    font-size: 14px;

    margin-bottom: 8px;

}


.footer-column a,
.footer-column span {

    color: var(--muted);

    font-size: 13px;

    transition: 0.3s ease;

}


.footer-column a:hover {

    color: var(--blue);

}


.footer-bottom {

    padding-top: 22px;

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

    display: flex;

    justify-content: space-between;

    gap: 20px;

}


.footer-bottom p {

    color: #60758a;

    font-size: 11px;

}


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

@media (max-width: 1200px) {

    .nav-links {

        gap: 20px;

    }

    .nav-links a {

        font-size: 14px;

    }

    .nav-cta {

        padding: 12px 18px;

    }

}


@media (max-width: 1000px) {

    .nav-links {

        display: none;

    }


    .contact-hero .container {

        grid-template-columns: 1fr;

    }


    .hero-visual {

        min-height: 420px;

    }


    .contact-layout {

        grid-template-columns: 1fr;

    }


    .contact-sidebar {

        position: static;

        display: grid;

        grid-template-columns: 1fr 1fr;

    }


    .why-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .help-grid {

        grid-template-columns: 1fr 1fr;

    }


    .process-grid {

        grid-template-columns: 1fr 1fr;

        gap: 50px;

    }


    .process-line {

        display: none;

    }


    .faq-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .footer-grid {

        grid-template-columns: 1fr 1fr;

    }

}


@media (max-width: 650px) {

    .site-header,
    .navbar {

        height: 78px;

    }


    .brand-logo {

        width: 120px;

    }


    .nav-cta {

        padding: 11px 15px;

        font-size: 12px;

    }


    .contact-hero {

        padding: 75px 0;

    }


    .hero-content h1 {

        font-size: 46px;

        letter-spacing: -2px;

    }


    .hero-content > p {

        font-size: 15px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .hero-trust {

        flex-direction: column;

    }


    .hero-visual {

        min-height: 360px;

    }


    .logo-orbit {

        width: 230px;

        height: 230px;

    }


    .logo-orbit img {

        width: 160px;

    }


    .ring-one {

        width: 320px;

        height: 320px;

    }


    .ring-two {

        width: 400px;

        height: 400px;

    }


    .floating-card {

        padding: 12px 15px;

    }


    .floating-card strong {

        font-size: 22px;

    }


    .card-top {

        right: 0;

        top: 15px;

    }


    .card-right {

        right: 0;

        bottom: 45px;

    }


    .card-bottom {

        left: 0;

        bottom: 25px;

    }


    .form-card {

        padding: 25px 18px;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .contact-sidebar {

        display: flex;

    }


    .why-points {

        grid-template-columns: 1fr;

    }


    .help-grid {

        grid-template-columns: 1fr;

    }


    .process-grid {

        grid-template-columns: 1fr;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .footer-bottom {

        flex-direction: column;

    }


    .section-heading h2 {

        font-size: 38px;

    }


    .faq-intro h2 {

        font-size: 38px;

    }

}

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

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

html {
    scroll-behavior: smooth;
}

body {

   
}

a {
    text-decoration: none;
    color: inherit;
}

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


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

header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 90px;

    background: #08131f;

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

    z-index: 1000;

}

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

.container {

    width: 90%;

    max-width: 1400px;

    margin: auto;

    height: 90px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

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

.logo img {

    width: 65px;

    display: block;

}


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

.btn {

    padding: 16px 35px;

    background: linear-gradient(90deg, #17c2ff, #0079ff);

    color: #fff;

    border-radius: 50px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    transition: .35s;

}

.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(0, 174, 255, .35);

}



    .btn {

        padding: 14px 25px;

    }

}

@media(max-width:900px) {

    .container {

        flex-direction: column;

        height: auto;

        padding: 20px 0;

    }

    header {

        height: auto;

    }

    nav {

        margin: 20px 0;

    }

    nav ul {

        flex-wrap: wrap;

        justify-content: center;

    }

}




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

.hero-section {

    width: 100%;

    min-height: 100vh;

    background: #071321;

    display: flex;

    align-items: center;

    padding-top: 110px;

}

.hero-wrapper {

    width: 90%;

    max-width: 1350px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 80px;

}
.hero-content {
    max-width: 850px;
    text-align: center;
}
/* LEFT SIDE */

.hero-content {

    flex: 1;

}

.hero-content h1 {

    font-size: 78px;

    line-height: 1.08;

    color: #fff;

    font-weight: 800;

    margin-bottom: 30px;

}

.hero-content p {

    font-size: 24px;

    color: #c0c8d2;

    line-height: 1.8;

    max-width: 720px;

    margin-bottom: 45px;

}

/* BUTTONS */

.hero-buttons {

    display: flex;

    gap: 25px;

}

.primary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    background: linear-gradient(90deg, #16c2ff, #0078ff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(0, 162, 255, .35);

}

.secondary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    border: 2px solid #14b8ff;

    color: #14b8ff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.secondary-btn:hover {

    background: #14b8ff;

    color: #fff;

}

/* RIGHT SIDE */

.hero-image {

    flex: 1;

    display: flex;

    justify-content: flex-end;

}

.hero-image img {

    width: 100%;

    max-width: 560px;

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

}

/* FLOAT */

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}

/* RESPONSIVE */

@media(max-width:992px) {

    .hero-wrapper {

        flex-direction: column;

        text-align: center;

    }

    .hero-content h1 {

        font-size: 52px;

    }

    .hero-content p {

        font-size: 18px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-image {

        justify-content: center;

        margin-top: 50px;

    }

    .hero-image img {

        max-width: 380px;

    }

}




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

.footer {
    width: 100%;
    background: #071321;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 25px 0;
    margin-top: 100px;
}

.footer footer {
    width: 90%;
    margin: auto;
}

.footer .container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.footer p {
    color: #b8c7d1;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .5px;
    transition: .3s ease;
}

.footer p:hover {
    color: #00e5ff;
}

.footer p span {
    color: #00e5ff;
    font-weight: 600;
}

@media (max-width:768px) {

    .footer {
        padding: 20px 15px;
    }

    .footer p {
        font-size: 14px;
        line-height: 1.8;
    }

}





/* about page of css */


/* about page */
.active {

    color: #18b7ff !important;

}

.active::after {

    width: 100% !important;

}

.btn {

    background: linear-gradient(135deg, #18b7ff, #006eff);

    padding: 16px 38px;

    border-radius: 50px;

    color: white;

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.btn:hover {

    transform: translateY(-4px);

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

}

/* Active */

.nav-menu .active {

    color: #14b8ff;

}

.nav-menu .active::after {

    width: 100%;

}

/* Button */

.nav-btn {

    padding: 14px 34px;

    background: linear-gradient(135deg, #14b8ff, #007bff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    border-radius: 50px;

    transition: .4s;

}

.nav-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(20, 184, 255, .45);

}

/* Responsive */

@media(max-width:991px) {

    .navbar {

        padding: 18px 25px;

        flex-direction: column;

        gap: 20px;

    }

    .nav-menu {

        flex-wrap: wrap;

        justify-content: center;

        gap: 20px;

    }

    .logo span {

        font-size: 20px;

    }

    .nav-btn {

        padding: 12px 25px;

    }

}



.about {
    padding: 100px 4%;
    background: #081524;
    color: #fff;
}



.about-image {

    flex: 1;

    text-align: center;

}

.about-image img {

    width: 100%;

    max-width: 520px;

    filter: drop-shadow(0 0 40px rgba(0, 153, 255, .3));

    transition: .5s;

}

.about-image img:hover {

    transform: scale(1.05);

}

.about-content {

    flex: 1;

}

.section-tag {

    color: #14b8ff;

    font-weight: 700;

    letter-spacing: 2px;

}

.about-content h2 {

    font-size: 52px;

    margin: 18px 0;

    line-height: 1.2;

}

.about-content p {

    color: #bfc7d4;

    line-height: 1.8;

    margin-bottom: 35px;

}

.about-list {

    display: grid;

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

    gap: 18px;

    margin-bottom: 40px;

}

.about-list div {

    background: #0d2033;

    padding: 15px;

    border-radius: 12px;

    transition: .4s;

}

.about-list div:hover {

    background: #1296ff;

    transform: translateY(-5px);

}

.about-btn {

    display: inline-block;

    padding: 15px 35px;

    background: #1296ff;

    color: #fff;

    border-radius: 40px;

    text-decoration: none;

    font-weight: 600;

    transition: .4s;

}

.about-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 0 25px #1296ff;

}

.about-stats {

    margin-top: 70px;

    display: grid;

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

    gap: 25px;

}

.stat-card {

    background: #0d2033;

    padding: 35px;

    border-radius: 20px;

    text-align: center;

    transition: .4s;

}

.stat-card:hover {

    transform: translateY(-10px);

    background: #1296ff;

}

.stat-card h2 {

    font-size: 42px;

    color: #f8c13a;

    margin-bottom: 10px;

}

.stat-card p {

    color: #ddd;

}

@media(max-width:992px) {

    .about-container {

        flex-direction: column;

    }

    .about-stats {

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

    }

    .about-content h2 {

        font-size: 38px;

    }

}

@media(max-width:600px) {

    .about-stats {

        grid-template-columns: 1fr;

    }

    .about-list {

        grid-template-columns: 1fr;

    }

}



/* therd page of website services */


.active {

    color: #18b7ff !important;

}

.active::after {

    width: 100% !important;

}

.btn {

    background: linear-gradient(135deg, #18b7ff, #006eff);

    padding: 16px 38px;

    border-radius: 50px;

    color: white;

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.btn:hover {

    transform: translateY(-4px);

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

}

/* Active */

.nav-menu .active {

    color: #14b8ff;

}

.nav-menu .active::after {

    width: 100%;

}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
    align-items: center;
}

.explore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 38px;
    background: transparent;
    color: #0EA5FF;
    border: 2px solid #0EA5FF;
    border-radius: 50px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    transition: all .4s ease;
}

.explore-btn:hover {
    background: #0EA5FF;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(14, 165, 255, .35);
}

.explore-btn span {
    transition: .3s;
}

.explore-btn:hover span {
    transform: translateX(5px);
}

/* Button */

.nav-btn {

    padding: 14px 34px;

    background: linear-gradient(135deg, #14b8ff, #007bff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    border-radius: 50px;

    transition: .4s;

}

.nav-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(20, 184, 255, .45);

}

/* Responsive */

@media(max-width:991px) {

    .navbar {

        padding: 18px 25px;

        flex-direction: column;

        gap: 20px;

    }

    .nav-menu {

        flex-wrap: wrap;

        justify-content: center;

        gap: 20px;

    }

    .logo span {

        font-size: 20px;

    }

    .nav-btn {

        padding: 12px 25px;

    }

}

/* script on about page */


.about-company {

    width: 90%;
    margin: 100px auto;

    display: grid;
    grid-template-columns: 1.5fr 1fr;

    gap: 70px;

    align-items: center;

}

.about-left h2 {

    font-size: 55px;

    color: white;

    line-height: 1.2;

    margin: 15px 0 30px;

}

.sub-title {

    color: #2EA8FF;

    letter-spacing: 3px;

    font-size: 15px;

    font-weight: 600;

}

.about-left p {

    color: #c7d2e2;

    line-height: 2;

    font-size: 18px;

    text-align: justify;

}

.about-btn {

    display: inline-block;

    margin-top: 35px;

    padding: 16px 38px;

    background: #1DA1FF;

    color: white;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    transition: .4s;

}

.about-btn:hover {

    background: #0a84ff;

    transform: translateY(-5px);

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

}

.quote-box {
    background-image: url("images/blue-bg.png")!important;
    background: #13263d;
    padding: 60px 40px;
    border-radius: 20px;
    border: 1px solid rgba(0, 170, 255, .25);
    text-align: center;
}
.quote-box h3 {

    font-size: 38px;

    line-height: 1.4;

    color: white;

}

.quote-box span {

    display: block;

    margin-top: 35px;

    color: #1DA1FF;

    font-size: 24px;

    font-weight: 700;

}

.quote-box p {

    margin-top: 10px;

    color: #b6c4d6;

    font-size: 17px;

}



/* service page of css */


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

@media(max-width:1100px) {

    nav ul {

        gap: 25px;

    }

    nav ul li a {

        font-size: 16px;

    }

    .btn {

        padding: 14px 25px;

    }

}

@media(max-width:900px) {

    .container {

        flex-direction: column;

        height: auto;

        padding: 20px 0;

    }

    header {

        height: auto;

    }

    nav {

        margin: 20px 0;

    }

    nav ul {

        flex-wrap: wrap;

        justify-content: center;

    }

}




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

.hero-section {

    width: 100%;

    min-height: 100vh;

    background: #071321;

    display: flex;

    align-items: center;

    padding-top: 110px;

}

.hero-wrapper {

    width: 90%;

    max-width: 1350px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 80px;

}

/* LEFT SIDE */

.hero-content {

    flex: 1;

}


.hero-content h1 {

    font-size: 78px;

    line-height: 1.08;

    color: #fff;

    font-weight: 800;

    margin-bottom: 30px;

}

.hero-content p {

    font-size: 24px;

    color: #c0c8d2;

    line-height: 1.8;

    max-width: 720px;

    margin-bottom: 45px;

}

/* BUTTONS */

.hero-buttons {

    display: flex;

    gap: 25px;

}

.primary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    background: linear-gradient(90deg, #16c2ff, #0078ff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(0, 162, 255, .35);

}

.secondary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    border: 2px solid #14b8ff;

    color: #14b8ff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.secondary-btn:hover {

    background: #14b8ff;

    color: #fff;

}

/* RIGHT SIDE */

.hero-image {

    flex: 1;

    display: flex;

    justify-content: flex-end;

}

.hero-image img {

    width: 100%;

    max-width: 560px;

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

}

/* FLOAT */

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}

/* RESPONSIVE */

@media(max-width:992px) {

    .hero-wrapper {

        flex-direction: column;

        text-align: center;

    }

    .hero-content h1 {

        font-size: 52px;

    }

    .hero-content p {

        font-size: 18px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-image {

        justify-content: center;

        margin-top: 50px;

    }

    .hero-image img {

        max-width: 380px;

    }

}



/* other srvices */

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

.services {

    padding: 100px 8%;
    background: #08111F;

}

.section-title {

    text-align: center;
    margin-bottom: 60px;

}

.section-title h2 {

    font-size: 60px;
    color: #fff;
    margin-bottom: 15px;

}

.section-title p {

    color: #b8c5d6;
    font-size: 18px;

}

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

.services-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

}

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

.service-card {

    background: #13253B;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 22px;

    padding: 45px 30px;

    text-align: center;

    transition: .35s;

}

.service-card:hover {

    transform: translateY(-10px);

    border-color: #0EA5FF;

    box-shadow: 0 18px 40px rgba(14, 165, 255, .18);

}

.service-card i {

    font-size: 48px;

    color: #1DA1F2;

    margin-bottom: 25px;

}

.service-card h3 {

    color: #fff;

    font-size: 30px;

    margin-bottom: 18px;

}

.service-card p {

    color: #b7c5d6;

    line-height: 1.8;

    font-size: 17px;

}

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

@media(max-width:1100px) {

    .services-grid {

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

    }

}

@media(max-width:768px) {

    .services-grid {

        grid-template-columns: 1fr;

    }

    .section-title h2 {

        font-size: 42px;

    }

    .service-card {

        padding: 35px 25px;

    }

}










.active {

    color: #18b7ff !important;

}

.active::after {

    width: 100% !important;

}

.btn {

    background: linear-gradient(135deg, #18b7ff, #006eff);

    padding: 16px 38px;

    border-radius: 50px;

    color: white;

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.btn:hover {

    transform: translateY(-4px);

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

}

/* Active */

.nav-menu .active {

    color: #14b8ff;

}

.nav-menu .active::after {

    width: 100%;

}

/* Button */

.nav-btn {

    padding: 14px 34px;

    background: linear-gradient(135deg, #14b8ff, #007bff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    border-radius: 50px;

    transition: .4s;

}

.nav-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(20, 184, 255, .45);

}

/* Responsive */

@media(max-width:991px) {

    .navbar {

        padding: 18px 25px;

        flex-direction: column;

        gap: 20px;

    }

    .nav-menu {

        flex-wrap: wrap;

        justify-content: center;

        gap: 20px;

    }

    .logo span {

        font-size: 20px;

    }

    .nav-btn {

        padding: 12px 25px;

    }

}


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

.services-hero {

    padding: 140px 10% 90px;

    background: linear-gradient(135deg, #071321, #0c2847);

    text-align: center;

    color: #fff;

}

.services-hero h1 {

    font-size: 60px;

    margin-bottom: 20px;

}

.services-hero p {

    font-size: 20px;

    color: #c7d3df;

    max-width: 700px;

    margin: auto;

    line-height: 1.8;

}

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

.services-section {

    padding: 100px 8%;

    background: #081524;

}

.services-section h2 {

    text-align: center;

    color: #fff;

    font-size: 45px;

    margin-bottom: 60px;

}

.services-grid {

    display: grid;

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

    gap: 30px;

}

.service-card {

    background: #11263d;

    padding: 40px 30px;

    border-radius: 20px;

    text-align: center;

    transition: .4s;

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

}

.service-card:hover {

    transform: translateY(-12px);

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

    border-color: #14b8ff;

}

.service-card i {

    font-size: 50px;

    color: #14b8ff;

    margin-bottom: 20px;

}

.service-card h3 {

    color: #fff;

    margin-bottom: 15px;

}

.service-card p {

    color: #bfc7d4;

    line-height: 1.8;

}

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

.cta {

    padding: 100px 10%;

    background: #0d2035;

    text-align: center;

}

.cta h2 {

    color: #fff;

    font-size: 45px;

    margin-bottom: 20px;

}

.cta p {

    color: #bfc7d4;

    font-size: 18px;

    margin-bottom: 35px;

}




/* portfolio */



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

@media(max-width:1100px) {

    nav ul {

        gap: 25px;

    }

    nav ul li a {

        font-size: 16px;

    }

    .btn {

        padding: 14px 25px;

    }

}

@media(max-width:900px) {

    .container {

        flex-direction: column;

        height: auto;

        padding: 20px 0;

    }

    header {

        height: auto;

    }

    nav {

        margin: 20px 0;

    }

    nav ul {

        flex-wrap: wrap;

        justify-content: center;

    }

}




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

.hero-section {

    width: 100%;

    min-height: 100vh;

    background: #071321;

    display: flex;

    align-items: center;

    padding-top: 110px;

}

.hero-wrapper {

    width: 90%;

    max-width: 1350px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 80px;

}

/* LEFT SIDE */

.hero-content {

    flex: 1;

}

.hero-content h1 {

    font-size: 78px;

    line-height: 1.08;

    color: #fff;

    font-weight: 800;

    margin-bottom: 30px;

}

.hero-content p {

    font-size: 24px;

    color: #c0c8d2;

    line-height: 1.8;

    max-width: 720px;

    margin-bottom: 45px;

}

/* BUTTONS */

.hero-buttons {

    display: flex;

    gap: 25px;

}

.primary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    background: linear-gradient(90deg, #16c2ff, #0078ff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(0, 162, 255, .35);

}

.secondary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    border: 2px solid #14b8ff;

    color: #14b8ff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.secondary-btn:hover {

    background: #14b8ff;

    color: #fff;

}

/* RIGHT SIDE */

.hero-image {

    flex: 1;

    display: flex;

    justify-content: flex-end;

}

.hero-image img {

    width: 100%;

    max-width: 560px;

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

}

/* FLOAT */

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}

/* RESPONSIVE */

@media(max-width:992px) {

    .hero-wrapper {

        flex-direction: column;

        text-align: center;

    }

    .hero-content h1 {

        font-size: 52px;

    }

    .hero-content p {

        font-size: 18px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-image {

        justify-content: center;

        margin-top: 50px;

    }

    .hero-image img {

        max-width: 380px;

    }

}



/* second page of website about */














.portfolio-hero {
    padding: 120px 10%;
    text-align: center;
}

.portfolio-hero h4 {
    color: #14b8ff;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.portfolio-hero h1 {
    font-size: 58px;
    line-height: 1.2;
    margin-bottom: 25px;
}

.portfolio-hero p {
    max-width: 700px;
    margin: auto;
    color: #bfc7d4;
    line-height: 1.8;
}

/* ===================================
   Portfolio
=================================== */

.portfolio {
    padding: 90px 8%;
}

.title {
    text-align: center;
    margin-bottom: 60px;
}

.title h2 {
    font-size: 42px;
    margin-bottom: 15px;
}

.title p {
    color: #bfc7d4;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}

.card {
    background: #0f2235;
    border-radius: 20px;
    overflow: hidden;
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, .08);
}

.card:hover {
    transform: translateY(-10px);
    border-color: #14b8ff;
    box-shadow: 0 20px 50px rgba(20, 184, 255, .18);
}

.image {
    height: 240px;
    overflow: hidden;
}

.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.card:hover .image img {
    transform: scale(1.08);
}

.content {
    padding: 10px;
}

.content span {
    color: #14b8ff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.content h3 {
    margin: 15px 0;
    font-size: 28px;
}

.content p {
    color: #bfc7d4;
    line-height: 1.8;
    margin-bottom: 20px;
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.features span {
    background: #112b45;
    padding: 8px 14px;
    border-radius: 30px;
    color: #fff;
    font-size: 13px;
}

.content a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #14b8ff;
    font-weight: 600;
}

.content a:hover {
    color: #fff;
}



/* ===========================
   Brand Identity Card
=========================== */

.card {
    background: #102235;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.4s;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 170, 255, 0.25);
}

.content {
    padding: 15px;
}

.content span:first-child {
    display: inline-block;
    background: #18b7ff;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.content h3 {
    font-size: 30px;
    color: #fff;
    margin-bottom: 18px;
}

.content p {
    color: #c7d4df;
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 25px;
}
/* ===========================
   Features
=========================== */

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.features span {
    background: #16314d;
    color: #18b7ff;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    transition: 0.3s;
}

.features span:hover {
    background: #18b7ff;
    color: #fff;
}

/* ===========================
   Button
=========================== */

.content a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: linear-gradient(135deg, #18b7ff, #007bff);
    color: #fff;
    padding: 6px 25px;
    border-radius: 50px;
    font-weight: 600;
    transition: .35s;
    font-size: 18px;
}

.content a:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(24, 183, 255, .35);

}

/* ===========================
   Statistics
=========================== */

.stats {

    width: 90%;
    max-width: 1300px;

    margin: 100px auto;

    display: grid;

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

    gap: 30px;

}

.box {

    background: #102235;

    text-align: center;

    padding: 45px 20px;

    border-radius: 20px;

    transition: .4s;

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

}

.box:hover {

    transform: translateY(-10px);

    border-color: #18b7ff;

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

}

.box h2 {

    color: #18b7ff;

    font-size: 55px;

    margin-bottom: 12px;

    font-weight: 700;

}

.box p {

    color: #d7e4ef;

    font-size: 18px;

    font-weight: 500;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:992px) {

    .stats {

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

    }

}

@media(max-width:600px) {

    .stats {

        grid-template-columns: 1fr;

    }

    .content h3 {

        font-size: 24px;

    }

    .box h2 {

        font-size: 42px;

    }

}


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

.cta {

    position: relative;

    padding: 120px 8%;

    text-align: center;

    background: linear-gradient(135deg, #081524, #102235, #16314d);

    overflow: hidden;

}

/* Background Glow */

.cta::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

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

    border-radius: 50%;

    top: -180px;

    left: -150px;

    filter: blur(120px);

}

.cta::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

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

    border-radius: 50%;

    bottom: -180px;

    right: -150px;

    filter: blur(120px);

}

/* Heading */

.cta h2 {

    position: relative;

    z-index: 2;

    font-size: 58px;

    color: #ffffff;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 25px;

    letter-spacing: -1px;

}

/* Blue Line */

.cta h2::after {

    content: "";

    display: block;

    width: 130px;

    height: 5px;

    margin: 20px auto 0;

    border-radius: 50px;

    background: linear-gradient(90deg, #18b7ff, #59d7ff);

    box-shadow: 0 0 20px rgba(24, 183, 255, .6);

}

/* Paragraph */

.cta p {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: auto;

    color: #c7d4df;

    font-size: 20px;

    line-height: 1.9;

    margin-bottom: 45px;

}

/* Button */

.cta a {

    position: relative;

    z-index: 2;

    display: inline-block;

    padding: 18px 42px;

    background: linear-gradient(135deg, #18b7ff, #007bff);

    color: #fff;

    text-decoration: none;

    font-size: 18px;

    font-weight: 600;

    border-radius: 50px;

    transition: .4s ease;

    box-shadow: 0 12px 30px rgba(24, 183, 255, .35);

}

.cta a:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 45px rgba(24, 183, 255, .55);

}

/* Responsive */

@media(max-width:992px) {

    .cta {

        padding: 90px 6%;

    }

    .cta h2 {

        font-size: 46px;

    }

    .cta p {

        font-size: 18px;

    }

}

@media(max-width:768px) {

    .cta h2 {

        font-size: 34px;

    }

    .cta p {

        font-size: 16px;

        line-height: 1.8;

    }

    .cta a {

        padding: 15px 34px;

        font-size: 16px;

    }

}



/*video page of css  */




.hero-video {

    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}


.hero-video video {

    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;

}


.hero-overlay {

    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(15, 23, 42, .95),
            rgba(15, 23, 42, .55));

}



.hero-content {

    position: relative;
    max-width: 900px;
    text-align: center;
    padding: 20px;
    z-index: 2;

}


.hero-content span {

    color: #38BDF8;
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 600;

}



.hero-content h1 {

    font-family: 'Poppins';
    font-size: 70px;
    line-height: 1.1;
    margin: 25px 0;

}



.hero-content p {

    color: #CBD5E1;
    font-size: 18px;
    max-width: 700px;
    margin: auto;
    line-height: 1.8;

}



/* BUTTON */


.hero-btn {

    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;

}



.hero-btn a {

    padding: 15px 35px;
    border-radius: 50px;
    color: white;
    border: 1px solid #334155;
    transition: .4s;

}



.hero-btn a:first-child {

    background: #2563EB;
    border-color: #2563EB;

}


.hero-btn a:hover {

    transform: translateY(-5px);

}

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

.hero-btn {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 45px;

}


/* Common Button */

.hero-btn a {

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

    padding: 16px 38px;

    min-width: 180px;

    border-radius: 50px;

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

    letter-spacing: .5px;

    color: #fff;

    text-decoration: none;

    overflow: hidden;

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

    backdrop-filter: blur(10px);

    transition: .4s ease;

}



/* First Button */

.hero-btn a:first-child {

    background: linear-gradient(135deg,
            #2563EB,
            #1D4ED8);

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

}



/* Second Button */

.hero-btn a:last-child {

    background: rgba(255, 255, 255, 0.08);

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

}



/* Hover Effect */

.hero-btn a:hover {

    transform: translateY(-6px) scale(1.03);

}



/* First Hover Glow */

.hero-btn a:first-child:hover {

    box-shadow:

        0 15px 40px rgba(37, 99, 235, .6);

}



/* Second Hover */

.hero-btn a:last-child:hover {

    background: #fff;

    color: #0F172A;

}



/* Shine Animation */

.hero-btn a::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .4),
            transparent);

    transition: .6s;

}



.hero-btn a:hover::before {

    left: 100%;

}



/* Mobile Responsive */

@media(max-width:600px) {

    .hero-btn {

        flex-direction: column;

    }


    .hero-btn a {

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

    }

}




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


.section-title {

    text-align: center;
    max-width: 800px;
    margin: auto;
    margin-bottom: 60px;

}


.section-title span {

    color: #2563EB;
    letter-spacing: 2px;
    font-size: 14px;

}


.section-title h2 {

    font-size: 45px;
    margin: 20px 0;
    font-family: 'Poppins';

}


.section-title p {

    color: #94A3B8;
    line-height: 1.7;

}




/* =========================================
        SHOWREEL
========================================= */


.showreel,
.services,
.portfolio {

    padding: 100px 8%;

}



.main-video {

    position: relative;
    max-width: 1000px;
    margin: auto;
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid #1E293B;

}



.main-video video {

    width: 100%;
    display: block;

}



.play-text {

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background: #2563EB;
    padding: 20px 35px;
    border-radius: 50px;
    font-weight: 600;

}







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


.service-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

}



.service-card {

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

    backdrop-filter: blur(15px);

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

    padding: 40px 30px;

    border-radius: 25px;

    transition: .4s;

}



.service-card:hover {

    transform: translateY(-12px);
    border-color: #2563EB;

}



.service-card h3 {

    font-size: 25px;
    margin-bottom: 15px;

}



.service-card p {

    color: #94A3B8;
    line-height: 1.7;

}





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


.portfolio-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

}



.portfolio-card {

    background: #111827;
    border-radius: 25px;
    overflow: hidden;
    transition: .4s;
    border: 1px solid #1E293B;

}



.portfolio-card:hover {

    transform: translateY(-10px);

}



.portfolio-card video {

    width: 100%;
    height: 280px;
    object-fit: cover;

}



.portfolio-card div {

    padding: 25px;

}



.portfolio-card h3 {

    font-size: 22px;
    margin-bottom: 10px;

}



.portfolio-card p {

    color: #38BDF8;

}





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


.stats {

    padding: 80px 8%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;

}



.stats div {

    background: #111827;
    padding: 40px 20px;
    border-radius: 20px;
    border: 1px solid #1E293B;

}



.stats h2 {

    color: #2563EB;
    font-size: 45px;

}



.stats p {

    color: #CBD5E1;

}





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


.cta {

    margin: 80px 8%;
    padding: 80px 20px;
    text-align: center;

    background:
        linear-gradient(135deg,
            #2563EB,
            #0F172A);

    border-radius: 35px;

}



.cta h2 {

    font-size: 45px;
    margin-bottom: 15px;

}


.cta p {

    font-size: 18px;
    margin-bottom: 30px;

}



.cta a {

    display: inline-block;

    background: white;
    color: #0F172A;

    padding: 15px 35px;

    border-radius: 50px;

    font-weight: 600;

}





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


@media(max-width:1000px) {


    .hero-content h1 {

        font-size: 50px;

    }


    .service-grid,
    .portfolio-grid {

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

    }


    .stats {

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

    }


}



@media(max-width:600px) {


    .hero-content h1 {

        font-size: 35px;

    }


    .hero-btn {

        flex-direction: column;

    }



    .service-grid,
    .portfolio-grid,
    .stats {

        grid-template-columns: 1fr;

    }



    .section-title h2 {

        font-size: 32px;

    }
}


/* ==========================================
   VIDEO PORTFOLIO SECTION
   8 VIDEO GRID DESIGN
========================================== */


.portfolio {

    padding: 100px 8%;
    background: #0F172A;

}



/* SECTION TITLE */

.section-title {

    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;

}


.section-title span {

    color: #2563EB;
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 600;

}


.section-title h2 {

    font-family: 'Poppins', sans-serif;
    font-size: 45px;
    margin: 20px 0;
    color: #ffffff;

}


.section-title p {

    color: #94A3B8;
    font-size: 17px;
    line-height: 1.7;

}



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


.portfolio-grid {

    display: grid;

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

    gap: 25px;

}





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


.portfolio-card {

    background: #111827;

    border-radius: 22px;

    overflow: hidden;

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

    transition: 0.4s ease;

    position: relative;

}



.portfolio-card:hover {

    transform: translateY(-12px);

    border-color: #2563EB;

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

}





/* VIDEO */


.portfolio-card video {

    width: 100%;

    height: 320px;

    object-fit: cover;

    display: block;

    transition: 0.5s ease;

}



.portfolio-card:hover video {

    transform: scale(1.08);

}





/* VIDEO CONTENT */


.portfolio-card div {

    padding: 22px;

}



.portfolio-card h3 {

    font-size: 21px;

    color: #ffffff;

    margin-bottom: 10px;

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

}



.portfolio-card p {

    color: #38BDF8;

    font-size: 14px;

    font-weight: 500;

}





/* ==========================================
        PLAY ICON OVERLAY
========================================== */


.portfolio-card::before {

    content: "â–¶";

    position: absolute;

    top: 40%;

    left: 50%;

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

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #2563EB;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 22px;

    z-index: 2;

    transition: 0.4s;

}



.portfolio-card:hover::before {

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

}





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



@media(max-width:1200px) {


    .portfolio-grid {

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

    }


}





@media(max-width:900px) {


    .portfolio-grid {

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

    }



    .portfolio-card video {

        height: 280px;

    }


}





@media(max-width:600px) {


    .portfolio {

        padding: 70px 20px;

    }


    .portfolio-grid {

        grid-template-columns: 1fr;

    }



    .section-title h2 {

        font-size: 32px;

    }



    .portfolio-card video {

        height: 260px;

    }


}









/* pricing page of css */





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

.pricing-hero {
    background: #081524;
    padding: 100px 8%;
    text-align: center;
}

.pricing-hero span {
    color: #18b7ff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pricing-hero h1 {
    color: #fff;
    font-size: 55px;
    margin: 20px 0;
}

.pricing-hero p {
    max-width: 750px;
    margin: auto;
    color: #c7d0da;
    line-height: 1.8;
    font-size: 18px;
}

/* =========================
   Pricing
========================= */

.pricing {

    background: #081524;
    padding: 90px 8%;
}

.pricing-grid {

    display: grid;

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

    gap: 35px;
}

/* Card */

.price-card {

    position: relative;

    background: #102235;

    padding: 40px 30px;

    border-radius: 20px;

    transition: .4s;

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

}

.price-card:hover {

    transform: translateY(-10px);

    border-color: #18b7ff;

    box-shadow: 0 20px 45px rgba(24, 183, 255, .25);

}

.plan {

    text-align: center;

    margin-bottom: 30px;
}

.plan h3 {

    color: #fff;

    font-size: 28px;
}

.plan h2 {

    color: #18b7ff;

    font-size: 55px;

    margin: 15px 0;
}

.plan p {

    color: #c9d3dc;
}

/* Features */

.price-card ul {

    list-style: none;

    margin: 25px 0;
}

.price-card ul li {

    color: #fff;

    margin: 18px 0;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 16px;
}

.price-card ul li i {

    color: #18b7ff;
}

/* Button */

.price-card a {

    display: block;

    text-align: center;

    text-decoration: none;

    background: linear-gradient(135deg, #18b7ff, #007bff);

    color: #fff;

    padding: 15px;

    border-radius: 40px;

    font-weight: 600;

    transition: .3s;
}

.price-card a:hover {

    transform: translateY(-4px);

    box-shadow: 0 15px 30px rgba(24, 183, 255, .35);

}

/* Popular */

.popular {

    transform: scale(1.05);

    border: 2px solid #18b7ff;
}

.popular-tag {

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: #ffc107;

    color: #000;

    padding: 8px 22px;

    border-radius: 30px;

    font-weight: 700;

    font-size: 14px;
}


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

.why {
    background: #081524;
    padding: 100px 8%;
    text-align: center;
}

.why h2 {
    color: #fff;
    font-size: 48px;
    margin-bottom: 60px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.why-grid div {
    background: #102235;
    padding: 40px 30px;
    border-radius: 20px;
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, .08);
}

.why-grid div:hover {
    transform: translateY(-10px);
    border-color: #18b7ff;
    box-shadow: 0 20px 40px rgba(24, 183, 255, .25);
}

.why-grid i {
    font-size: 50px;
    color: #18b7ff;
    margin-bottom: 20px;
}

.why-grid h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 15px;
}

.why-grid p {
    color: #c7d2dd;
    line-height: 1.8;
    font-size: 16px;
}


/* why choose  */


/* Second Why Choose Grid */

.why-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 60px;

}

.why-card {

    background: #16263A;

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

    border-radius: 20px;

    padding: 40px 30px;

    text-align: center;

    transition: .4s;

}

.why-card:hover {

    transform: translateY(-10px);

    border-color: #0EA5FF;

    box-shadow: 0 15px 40px rgba(14, 165, 255, .35);

}

.why-card i {

    font-size: 42px;

    color: #0EA5FF;

    margin-bottom: 20px;

}

.why-card h3 {

    color: #fff;

    font-size: 28px;

    margin-bottom: 15px;

}

.why-card p {

    color: #B8C5D3;

    line-height: 1.8;

}




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

.pricing-cta {

    background: linear-gradient(135deg, #102235, #16314d);

    padding: 100px 8%;

    text-align: center;
}

.pricing-cta h2 {

    color: #fff;

    font-size: 50px;

    margin-bottom: 20px;
}

.pricing-cta p {

    max-width: 750px;

    margin: auto;

    color: #d2dce6;

    line-height: 1.8;

    font-size: 18px;

    margin-bottom: 40px;
}

.pricing-cta a {

    display: inline-block;

    text-decoration: none;

    background: linear-gradient(135deg, #18b7ff, #007bff);

    color: #fff;

    padding: 16px 40px;

    border-radius: 50px;

    font-size: 18px;

    font-weight: 600;

    transition: .35s;
}

.pricing-cta a:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(24, 183, 255, .35);
}


/*==========================
      Responsive
==========================*/

@media(max-width:768px) {

    .why h2 {

        font-size: 36px;

    }

    .pricing-cta h2 {

        font-size: 34px;

    }

    .pricing-cta p {

        font-size: 16px;

    }

}

.container {

    width: 90%;

    max-width: 1400px;

    margin: auto;

    height: 90px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

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

.logo img {

    width: 65px;

    display: block;

}


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

.btn {

    padding: 16px 35px;

    background: linear-gradient(90deg, #17c2ff, #0079ff);

    color: #fff;

    border-radius: 50px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    transition: .35s;

}

.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(0, 174, 255, .35);

}

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

@media(max-width:1100px) {

    nav ul {

        gap: 25px;

    }

    nav ul li a {

        font-size: 16px;

    }

    .btn {

        padding: 14px 25px;

    }

}

@media(max-width:900px) {

    .container {

        flex-direction: column;

        height: auto;

        padding: 20px 0;

    }

    header {

        height: auto;

    }

    nav {

        margin: 20px 0;

    }

    nav ul {

        flex-wrap: wrap;

        justify-content: center;

    }

}




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

.hero-section {

    width: 100%;

    min-height: 100vh;

    background: #071321;

    display: flex;

    align-items: center;

    padding-top: 110px;

}

.hero-wrapper {

    width: 90%;

    max-width: 1350px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 80px;

}

/* LEFT SIDE */

.hero-content {

    flex: 1;

}

.hero-content h1 {

    font-size: 78px;

    line-height: 1.08;

    color: #fff;

    font-weight: 800;

    margin-bottom: 30px;

}

.hero-content p {

    font-size: 24px;

    color: #c0c8d2;

    line-height: 1.8;

    max-width: 720px;

    margin-bottom: 45px;

}

/* BUTTONS */

.hero-buttons {

    display: flex;

    gap: 25px;

}

.primary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    background: linear-gradient(90deg, #16c2ff, #0078ff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(0, 162, 255, .35);

}

.secondary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    border: 2px solid #14b8ff;

    color: #14b8ff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.secondary-btn:hover {

    background: #14b8ff;

    color: #fff;

}

/* RIGHT SIDE */

.hero-image {

    flex: 1;

    display: flex;

    justify-content: flex-end;

}

.hero-image img {

    width: 100%;

    max-width: 560px;

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

}

/* FLOAT */

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}

/* RESPONSIVE */

@media(max-width:992px) {

    .hero-wrapper {

        flex-direction: column;

        text-align: center;

    }

    .hero-content h1 {

        font-size: 52px;

    }

    .hero-content p {

        font-size: 18px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-image {

        justify-content: center;

        margin-top: 50px;

    }

    .hero-image img {

        max-width: 380px;

    }

}




/* blog page of css */


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {

    background: #071321;

}

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

header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 90px;

    background: #08131f;

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

    z-index: 1000;

}

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

.container {

    width: 90%;

    max-width: 1400px;

    margin: auto;

    height: 90px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

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

.logo img {

    width: 65px;

    display: block;

}


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

.btn {

    padding: 16px 35px;

    background: linear-gradient(90deg, #17c2ff, #0079ff);

    color: #fff;

    border-radius: 50px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    transition: .35s;

}

.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(0, 174, 255, .35);

}

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

@media(max-width:1100px) {

    
    .btn {

        padding: 14px 25px;

    }

}

@media(max-width:900px) {

    .container {

        flex-direction: column;

        height: auto;

        padding: 20px 0;

    }

    header {

        height: auto;

    }

    nav {

        margin: 20px 0;

    }

    nav ul {

        flex-wrap: wrap;

        justify-content: center;

    }

}




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

.hero-section {

    width: 100%;

    min-height: 100vh;

    background: #071321;

    display: flex;

    align-items: center;

    padding-top: 110px;

}

.hero-wrapper {

    width: 90%;

    max-width: 1350px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 80px;

}

/* LEFT SIDE */

.hero-content {

    flex: 1;

}

.hero-content h1 {

    font-size: 78px;

    line-height: 1.08;

    color: #fff;

    font-weight: 800;

    margin-bottom: 30px;

}

.hero-content p {

    font-size: 24px;

    color: #c0c8d2;

    line-height: 1.8;

    max-width: 720px;

    margin-bottom: 45px;

}

/* BUTTONS */

.hero-buttons {

    display: flex;

    gap: 25px;

}

.primary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    background: linear-gradient(90deg, #16c2ff, #0078ff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(0, 162, 255, .35);

}

.secondary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    border: 2px solid #14b8ff;

    color: #14b8ff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.secondary-btn:hover {

    background: #14b8ff;

    color: #fff;

}

/* RIGHT SIDE */

.hero-image {

    flex: 1;

    display: flex;

    justify-content: flex-end;

}

.hero-image img {

    width: 100%;

    max-width: 560px;

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

}

/* FLOAT */

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}

/* RESPONSIVE */

@media(max-width:992px) {

    .hero-wrapper {

        flex-direction: column;

        text-align: center;

    }

    .hero-content h1 {

        font-size: 52px;

    }

    .hero-content p {

        font-size: 18px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-image {

        justify-content: center;

        margin-top: 50px;

    }

    .hero-image img {

        max-width: 380px;

    }

}



/* second page of website about */













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

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #081524;
    color: #fff;
}

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

.blog-hero {
    padding: 100px 8%;
    text-align: center;
}

.blog-hero span {
    color: #18b7ff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.blog-hero h1 {
    font-size: 58px;
    margin: 20px 0;
    line-height: 1.2;
}

.blog-hero p {
    max-width: 760px;
    margin: auto;
    color: #bfc9d4;
    line-height: 1.8;
    font-size: 18px;
}

/* ==========================
        BLOG SECTION
========================== */

.blog {
    padding: 90px 8%;
}

.blog-title {
    text-align: center;
    margin-bottom: 60px;
}

.blog-title h2 {
    font-size: 45px;
    margin-bottom: 15px;
}

.blog-title p {
    color: #bfc9d4;
}

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

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 35px;
}

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

.blog-card {
    background: #102235;
    border-radius: 20px;
    overflow: hidden;
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, .08);
}

.blog-card:hover {
    transform: translateY(-12px);
    border-color: #18b7ff;
    box-shadow: 0 20px 45px rgba(24, 183, 255, .25);
}

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

.blog-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: .5s;
}

.blog-card:hover img {
    transform: scale(1.08);
}

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

.blog-content {
    padding: 28px;
}

.blog-content span {
    display: inline-block;
    background: #16314d;
    color: #18b7ff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}

.blog-content h3 {
    font-size: 28px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.blog-content p {
    color: #c9d2dc;
    line-height: 1.8;
    margin-bottom: 25px;
}

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

.blog-content a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #18b7ff;
    font-weight: 600;
    transition: .3s;
}

.blog-content a:hover {
    color: #fff;
}

.blog-content a i {
    transition: .3s;
}

.blog-content a:hover i {
    transform: translateX(6px);
}

/*==================================
        NEWSLETTER
==================================*/

.newsletter {

    background: #102235;

    padding: 100px 8%;

    text-align: center;

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

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

}

.newsletter h2 {

    color: #fff;

    font-size: 48px;

    margin-bottom: 20px;

}

.newsletter p {

    color: #c8d3dd;

    font-size: 18px;

    max-width: 700px;

    margin: 0 auto 40px;

    line-height: 1.8;

}

.newsletter form {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}

.newsletter input {

    width: 450px;

    max-width: 100%;

    padding: 18px 22px;

    border: none;

    outline: none;

    border-radius: 50px;

    background: #16314d;

    color: #fff;

    font-size: 16px;

    transition: .3s;

}

.newsletter input::placeholder {

    color: #9fb2c5;

}

.newsletter input:focus {

    border: 2px solid #18b7ff;

    box-shadow: 0 0 15px rgba(24, 183, 255, .3);

}

.newsletter button {

    padding: 18px 35px;

    border: none;

    border-radius: 50px;

    background: linear-gradient(135deg, #18b7ff, #007bff);

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: .35s;

}

.newsletter button:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(24, 183, 255, .35);

}

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

.blog-cta {

    background: linear-gradient(135deg, #081524, #102235);

    padding: 110px 8%;

    text-align: center;

}

.blog-cta h2 {

    color: #fff;

    font-size: 52px;

    margin-bottom: 20px;

    line-height: 1.3;

}

.blog-cta p {

    max-width: 760px;

    margin: 0 auto 40px;

    color: #c9d3dc;

    font-size: 18px;

    line-height: 1.8;

}

.blog-cta a {

    display: inline-block;

    padding: 18px 42px;

    background: linear-gradient(135deg, #18b7ff, #007bff);

    color: #fff;

    text-decoration: none;

    border-radius: 50px;

    font-size: 17px;

    font-weight: 600;

    transition: .35s;

}

.blog-cta a:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(24, 183, 255, .35);

}

/*==================================
          Responsive
==================================*/

@media(max-width:768px) {

    .newsletter {

        padding: 70px 5%;

    }

    .newsletter h2 {

        font-size: 34px;

    }

    .newsletter p {

        font-size: 16px;

    }

    .newsletter form {

        flex-direction: column;

    }

    .newsletter input {

        width: 100%;

    }

    .newsletter button {

        width: 100%;

    }

    .blog-cta {

        padding: 80px 5%;

    }

    .blog-cta h2 {

        font-size: 36px;

    }

    .blog-cta p {

        font-size: 16px;

    }

}




/* careers page of css */





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

.btn {

    padding: 16px 35px;

    background: linear-gradient(90deg, #17c2ff, #0079ff);

    color: #fff;

    border-radius: 50px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    transition: .35s;

}

.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(0, 174, 255, .35);

}



@media(max-width:900px) {

    .container {

        flex-direction: column;

        height: auto;

        padding: 20px 0;

    }

    header {

        height: auto;

    }

    nav {

        margin: 20px 0;

    }

    nav ul {

        flex-wrap: wrap;

        justify-content: center;

    }

}




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

.hero-section {

    width: 100%;

    min-height: 100vh;

    background: #071321;

    display: flex;

    align-items: center;

    padding-top: 110px;

}

.hero-wrapper {

    width: 90%;

    max-width: 1350px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 80px;

}

/* LEFT SIDE */

.hero-content {

    flex: 1;

}

.hero-content h1 {

    font-size: 78px;

    line-height: 1.08;

    color: #fff;

    font-weight: 800;

    margin-bottom: 30px;

}

.hero-content p {

    font-size: 24px;

    color: #c0c8d2;

    line-height: 1.8;

    max-width: 720px;

    margin-bottom: 45px;

}

/* BUTTONS */

.hero-buttons {

    display: flex;

    gap: 25px;

}

.primary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    background: linear-gradient(90deg, #16c2ff, #0078ff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(0, 162, 255, .35);

}

.secondary-btn {

    padding: 18px 42px;

    border-radius: 50px;

    border: 2px solid #14b8ff;

    color: #14b8ff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.secondary-btn:hover {

    background: #14b8ff;

    color: #fff;

}

/* RIGHT SIDE */

.hero-image {

    flex: 1;

    display: flex;

    justify-content: flex-end;

}

.hero-image img {

    width: 100%;

    max-width: 560px;

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

}

/* FLOAT */

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}

/* RESPONSIVE */

@media(max-width:992px) {

    .hero-wrapper {

        flex-direction: column;

        text-align: center;

    }

    .hero-content h1 {

        font-size: 52px;

    }

    .hero-content p {

        font-size: 18px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-image {

        justify-content: center;

        margin-top: 50px;

    }

    .hero-image img {

        max-width: 380px;

    }

}



/* second page of website about */














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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #081524;
    color: #fff;
}

/*====================================

        HERO SECTION

====================================*/

.career-hero {
    padding: 100px 8%;
    text-align: center;
}

.career-hero span {
    color: #18b7ff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.career-hero h1 {
    font-size: 58px;
    margin: 20px 0;
    line-height: 1.2;
}

.career-hero p {
    max-width: 760px;
    margin: auto;
    color: #c8d3dd;
    font-size: 18px;
    line-height: 1.8;
}

/*====================================

        WHY WORK

====================================*/

.why-work {
    padding: 90px 8%;
}

.why-work h2 {
    text-align: center;
    font-size: 45px;
    margin-bottom: 60px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.why-card {
    background: #102235;
    padding: 35px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: .4s;
}

.why-card:hover {
    transform: translateY(-10px);
    border-color: #18b7ff;
    box-shadow: 0 18px 40px rgba(24, 183, 255, .25);
}

.why-card i {
    font-size: 45px;
    color: #18b7ff;
    margin-bottom: 20px;
}

.why-card h3 {
    margin-bottom: 15px;
    font-size: 25px;
}

.why-card p {
    color: #c9d3dc;
    line-height: 1.8;
}

/*====================================

        JOB SECTION

====================================*/

.jobs {
    padding: 90px 8%;
}

.jobs h2 {
    text-align: center;
    font-size: 45px;
    margin-bottom: 60px;
}

.job-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #102235;
    padding: 30px 35px;
    border-radius: 18px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: .4s;
}

.job-card:hover {
    border-color: #18b7ff;
    transform: translateY(-5px);
}

.job-card h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.job-card p {
    color: #bfcbd8;
}

.job-card a {
    text-decoration: none;
    background: linear-gradient(135deg, #18b7ff, #007bff);
    color: #fff;
    padding: 14px 28px;
    border-radius: 40px;
    font-weight: 600;
    transition: .3s;
}

.job-card a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(24, 183, 255, .35);
}



/* extra */


/*====================================

        REQUIREMENTS

====================================*/

.requirements {
    padding: 90px 8%;
}

.requirements h2 {
    text-align: center;
    font-size: 45px;
    margin-bottom: 60px;
}

.require-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.require-grid div {
    background: #102235;
    padding: 35px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: .4s;
}

.require-grid div:hover {
    transform: translateY(-10px);
    border-color: #18b7ff;
    box-shadow: 0 18px 40px rgba(24, 183, 255, .25);
}

.require-grid i {
    font-size: 45px;
    color: #18b7ff;
    margin-bottom: 20px;
}

.require-grid h3 {
    margin-bottom: 15px;
    font-size: 24px;
}

.require-grid p {
    color: #c9d3dc;
    line-height: 1.8;
}

/*====================================

            CTA

====================================*/

.career-cta {
    padding: 100px 8%;
    text-align: center;
    background: linear-gradient(135deg, #102235, #16314d);
}

.career-cta h2 {
    font-size: 50px;
    margin-bottom: 20px;
}

.career-cta p {
    max-width: 700px;
    margin: auto;
    color: #c9d3dc;
    line-height: 1.8;
    font-size: 18px;
    margin-bottom: 40px;
}

.career-cta a {
    display: inline-block;
    text-decoration: none;
    background: linear-gradient(135deg, #18b7ff, #007bff);
    color: #fff;
    padding: 18px 42px;
    border-radius: 50px;
    font-weight: 600;
    transition: .35s;
}

.career-cta a:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(24, 183, 255, .35);
}

/*====================================

        RESPONSIVE

====================================*/

@media(max-width:768px) {

    .career-hero h1 {
        font-size: 38px;
    }

    .why-work h2,
    .jobs h2,
    .requirements h2 {
        font-size: 34px;
    }

    .job-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .career-cta h2 {
        font-size: 36px;
    }

    .career-cta p {
        font-size: 16px;
    }

}





/* contect page off css */


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {

    background: #071321;

}

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

header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 90px;

    background: #08131f;

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

    z-index: 1000;

}

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

.container {

    width: 90%;

    max-width: 1400px;

    margin: auto;

    height: 90px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

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

.logo img {

    width: 65px;

    display: block;

}


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

.btn {

    padding: 16px 35px;

    background: linear-gradient(90deg, #17c2ff, #0079ff);

    color: #fff;

    border-radius: 50px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    transition: .35s;

}

.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(0, 174, 255, .35);

}

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

@media(max-width:1100px) {

    nav ul {

        gap: 25px;

    }

    nav ul li a {

        font-size: 16px;

    }

    .btn {

        padding: 14px 25px;

    }

}

@media(max-width:900px) {

    .container {

        flex-direction: column;

        height: auto;

        padding: 20px 0;

    }

    header {

        height: auto;

    }

    nav {

        margin: 20px 0;

    }

    nav ul {

        flex-wrap: wrap;

        justify-content: center;

    }

}

/*        */



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

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 35px;
}

.social-icons a {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    font-size: 26px;
    background: #13253b;
    border: 2px solid rgba(255, 255, 255, .08);
    transition: 0.4s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
}

/* Hover Animation */
.social-icons a:hover {
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0 0 25px rgba(0, 191, 255, .6);
}

/* Facebook */
.social-icons a:nth-child(1):hover {
    background: #1877F2;
}

/* Instagram */
.social-icons a:nth-child(2):hover {
    background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5);
}

/* LinkedIn */
.social-icons a:nth-child(3):hover {
    background: #0A66C2;
}

/* YouTube */
.social-icons a:nth-child(4):hover {
    background: #FF0000;
}

/* WhatsApp */
.social-icons a:nth-child(5):hover {
    background: #25D366;
}


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

.contact-hero {
    width: 100%;
    min-height: 60vh;
    background: #071321;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 140px 20px 80px;
}

.hero-content {
    max-width: 850px;
    text-align: left;
}

.hero-content h1 {
    font-size: 55px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-content p {
    font-size: 20px;
    color: #bfc9d6;
    line-height: 1.8;
    margin-bottom: 35px;
}

.hero-content button {
    padding: 16px 40px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(90deg, #16c5ff, #007bff);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.hero-content button:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 170, 255, .4);
}

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

.contact-section {
    width: 90%;
    max-width: 1300px;
    margin: 80px auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

.contact-form,
.contact-info {
    background: #0d1d30;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 40px;
}

.contact-form h2,
.contact-info h2 {
    color: #fff;
    font-size: 32px;
    margin-bottom: 30px;
}

.contact-form form {
    display: grid;
    gap: 18px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #081321;
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: .3s;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: #19bfff;
    box-shadow: 0 0 15px rgba(25, 191, 255, .25);
}

.contact-form textarea {
    min-height: 160px;
    resize: none;
}

.contact-form button {
    padding: 18px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(90deg, #16c5ff, #007bff);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.contact-form button:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 170, 255, .4);
}

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

.contact-info p {
    color: #c6d0dd;
    font-size: 17px;
    margin: 20px 0;
    line-height: 1.8;
}

.contact-info i {
    color: #18bfff;
    margin-right: 10px;
}

.social-icons {
    display: flex;
    gap: 18px;
    margin-top: 35px;
}

.social-icons a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #081321;
    color: #fff;
    text-decoration: none;
    transition: .3s;
    font-size: 20px;
}

.social-icons a:hover {
    background: #18bfff;
    transform: translateY(-5px);
}

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

@media(max-width:991px) {

    .contact-section {
        grid-template-columns: 1fr;
    }

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

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

}



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

.why-section {
    width: 100%;
    padding: 90px 8%;
    background: #071321;
    text-align: center;
}

.why-section h2 {
    font-size: 42px;
    color: #ffffff;
    margin-bottom: 50px;
    font-weight: 700;
    position: relative;
}

.why-section h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background: #18c5ff;
    display: block;
    margin: 15px auto;
    border-radius: 20px;
}

/* Cards */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.card {
    background: #0b1d31;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 35px 20px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    transition: .35s;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(24, 197, 255, .25);
    border-color: #18c5ff;
}

/* ==========================
   MAP SECTION
========================== */

.map-section {
    padding: 80px 20px;
    background: #071321;
    text-align: center;
}

.map-section h2 {
    color: #fff;
    font-size: 42px;
    margin-bottom: 40px;
}

.map-section iframe {
    width: 90%;
    max-width: 1200px;
    height: 500px;
    border: none;
    border-radius: 20px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .35);
}

.map-section {
    padding: 80px 0 0;
    background: #071321;
    text-align: center;
}

.map-section iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}
                 /* second page of website about */

  /* ==============================================
   POPUPS & FORMS (MODERN DARK GLASS LOOK)
============================================== */

/* Popup Backdrop */


    /* Popups background overlay */
.popup {
    display: none; /* Default hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* Active class which JS will toggle */
.popup.active {
    display: flex;
}

/* Close button styling */
.close-btn {
    cursor: pointer;
    float: right;
    font-size: 24px;
    font-weight: bold;
}

/*about us css  */

    /* =========================================================
   GROWTH HARBOUR — ABOUT PAGE
   Premium Dark Navy + Cyan Theme
========================================================= */


:root {

    --gh-bg: #061321;
    --gh-bg-light: #081827;

    --gh-card: #0d2236;
    --gh-card-hover: #102b43;

    --gh-blue: #168cff;
    --gh-cyan: #19b5ff;

    --gh-white: #ffffff;
    --gh-text: #d9e5f0;
    --gh-muted: #8fa5b9;

    --gh-border: rgba(255,255,255,0.08);

    --gh-container: 1200px;
}


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



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

.about-container {

    width: min(
        92%,
        var(--gh-container)
    );

    margin: auto;
}


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



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

.about-section {

    padding:
        110px 0;

    position:
        relative;
}


.about-label {

    display:
        inline-block;

    color:
        var(--gh-cyan);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    margin-bottom:
        18px;
}


.section-heading {

    max-width:
        750px;

    margin-bottom:
        60px;
}


.section-heading h2,
.difference-heading h2,
.experience-content h2 {

    font-size:
        clamp(38px,5vw,64px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        22px;
}


.section-heading h2 span,
.difference-heading h2 span,
.experience-content h2 span,
.who-content h2 span,
.about-hero-content h1 span,
.about-cta-box h2 span {

    color:
        var(--gh-cyan);
}


.section-heading p,
.difference-heading > p,
.experience-content p {

    color:
        var(--gh-muted);

    font-size:
        17px;

    line-height:
        1.8;
}


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

.about-hero {

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    position:
        relative;

    overflow:
        hidden;
}


.hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;
}


.hero-glow-one {

    width:
        600px;

    height:
        600px;

    left:
        -280px;

    top:
        50px;

    background:
        radial-gradient(
            circle,
            rgba(25,181,255,.13),
            transparent 68%
        );
}


.hero-glow-two {

    width:
        550px;

    height:
        550px;

    right:
        -250px;

    bottom:
        -250px;

    background:
        radial-gradient(
            circle,
            rgba(22,124,255,.13),
            transparent 68%
        );
}


.about-hero-grid {

    display:
        grid;

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

    align-items:
        center;

    gap:
        90px;
}


/* HERO VISUAL */

.about-hero-visual {

    min-height:
        520px;

    position:
        relative;

    display:
        grid;

    place-items:
        center;
}


.hero-main-card {

    width:
        370px;

    height:
        440px;

    border-radius:
        35px;

    background:
        linear-gradient(
            145deg,
            rgba(25,181,255,.12),
            rgba(13,34,54,.95)
        );

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

    position:
        relative;

    overflow:
        hidden;

    transform:
        rotate(-5deg);

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


.hero-card-glow {

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    top:
        50%;

    left:
        50%;

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

    background:
        radial-gradient(
            circle,
            rgba(25,181,255,.5),
            transparent 68%
        );
}


.hero-card-logo {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

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

    font-size:
        85px;

    font-weight:
        900;

    color:
        white;

    text-shadow:
        0 0 40px
        rgba(25,181,255,.8);
}


.hero-card-text {

    position:
        absolute;

    bottom:
        55px;

    left:
        50%;

    transform:
        translateX(-50%);

    font-size:
        13px;

    letter-spacing:
        5px;

    color:
        var(--gh-cyan);

    white-space:
        nowrap;
}


/* FLOATING CARDS */

.hero-floating-card {

    position:
        absolute;

    padding:
        18px 22px;

    border-radius:
        18px;

    background:
        rgba(13,34,54,.92);

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

    backdrop-filter:
        blur(20px);

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


.hero-floating-card strong {

    display:
        block;

    color:
        var(--gh-cyan);

    font-size:
        26px;

    margin-bottom:
        5px;
}


.hero-floating-card span {

    color:
        #c6d5e1;

    font-size:
        13px;
}


.hero-floating-one {

    top:
        55px;

    right:
        10px;
}


.hero-floating-two {

    bottom:
        50px;

    left:
        -10px;
}


/* HERO CONTENT */

.about-hero-content {

    max-width:
        700px;
}


.about-hero-content h1 {

    font-size:
        clamp(48px,6vw,82px);

    line-height:
        1.02;

    letter-spacing:
        -4px;

    margin-bottom:
        28px;
}


.about-hero-content > p {

    color:
        var(--gh-text);

    font-size:
        18px;

    line-height:
        1.8;

    margin-bottom:
        34px;
}


.about-hero-buttons,
.cta-buttons {

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;
}


/* BUTTONS */

.about-primary-btn,
.about-secondary-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        16px 27px;

    border-radius:
        12px;

    font-weight:
        700;

    transition:
        .3s;
}


.about-primary-btn {

    background:
        linear-gradient(
            135deg,
            var(--gh-cyan),
            var(--gh-blue)
        );
}


.about-secondary-btn {

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

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


.about-primary-btn:hover,
.about-secondary-btn:hover {

    transform:
        translateY(-4px);
}


.about-primary-btn:hover {

    box-shadow:
        0 15px 35px
        rgba(22,140,255,.25);
}


/* =========================================================
   WHO WE ARE
========================================================= */

.who-we-are {

    background:
        var(--gh-bg-light);
}


.who-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        90px;

    align-items:
        center;
}


.who-visual {

    min-height:
        480px;

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            #0d2236,
            #081827
        );

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

    position:
        relative;

    overflow:
        hidden;
}


.who-circle {

    position:
        absolute;

    border-radius:
        50%;

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

    top:
        50%;

    left:
        50%;

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


.circle-one {
    width:
        340px;
    height:
        340px;
}


.circle-two {
    width:
        245px;
    height:
        245px;
}


.circle-three {
    width:
        150px;
    height:
        150px;
}


.who-center-logo {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

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

    width:
        105px;

    height:
        105px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        25px;

    background:
        linear-gradient(
            135deg,
            var(--gh-cyan),
            var(--gh-blue)
        );

    font-size:
        30px;

    font-weight:
        900;

    box-shadow:
        0 0 70px
        rgba(25,181,255,.35);
}


.who-tag {

    position:
        absolute;

    padding:
        11px 17px;

    border-radius:
        30px;

    background:
        rgba(13,34,54,.95);

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

    color:
        #d6e5ef;

    font-size:
        13px;
}


.tag-one {
    top:
        80px;
    left:
        50px;
}


.tag-two {
    top:
        100px;
    right:
        40px;
}


.tag-three {
    bottom:
        80px;
    left:
        50%;
    transform:
        translateX(-50%);
}


.who-content h2 {

    font-size:
        clamp(38px,5vw,62px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        25px;
}


.who-content p {

    color:
        var(--gh-muted);

    font-size:
        17px;

    line-height:
        1.85;

    margin-bottom:
        18px;
}


.who-points {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin-top:
        28px;
}


.who-points div {

    padding:
        15px;

    border-radius:
        12px;

    background:
        rgba(13,34,54,.7);

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

    color:
        #dce8f2;
}


.who-points span {

    color:
        var(--gh-cyan);

    margin-right:
        7px;
}


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

.purpose-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        25px;
}


.purpose-card {

    padding:
        45px;

    min-height:
        390px;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #0d2236,
            #0a1d2e
        );

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

    position:
        relative;

    overflow:
        hidden;

    transition:
        .4s;
}


.purpose-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(25,181,255,.3);

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


.purpose-card::after {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    right:
        -120px;

    bottom:
        -130px;

    background:
        radial-gradient(
            circle,
            rgba(25,181,255,.12),
            transparent 70%
        );
}


.purpose-number {

    color:
        var(--gh-cyan);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        2px;

    margin-bottom:
        35px;
}


.purpose-card h3 {

    font-size:
        35px;

    line-height:
        1.15;

    margin-bottom:
        22px;
}


.purpose-card p {

    color:
        var(--gh-muted);

    line-height:
        1.8;

    font-size:
        16px;
}


.vision-line {

    margin-top:
        28px;

    color:
        var(--gh-cyan);

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        2px;

    line-height:
        1.8;
}


/* =========================================================
   DIFFERENCE
========================================================= */

.difference-section {

    background:
        var(--gh-bg-light);
}


.difference-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        50px;

    margin-bottom:
        55px;
}


.difference-heading > p {

    max-width:
        450px;
}


.difference-grid {

    display:
        grid;

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

    gap:
        18px;
}


.difference-card {

    min-height:
        275px;

    padding:
        32px;

    border-radius:
        22px;

    background:
        var(--gh-card);

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

    transition:
        .4s;

    position:
        relative;
}


.difference-card:hover {

    transform:
        translateY(-8px);

    background:
        var(--gh-card-hover);

    border-color:
        rgba(25,181,255,.3);

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


.difference-card > span {

    color:
        var(--gh-cyan);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        2px;

    display:
        block;

    margin-bottom:
        35px;
}


.difference-card h3 {

    font-size:
        22px;

    margin-bottom:
        14px;
}


.difference-card p {

    color:
        var(--gh-muted);

    line-height:
        1.7;

    font-size:
        15px;
}


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

.process-grid {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        70px;

    position:
        relative;
}


.process-grid::before {

    content:
        "";

    position:
        absolute;

    top:
        36px;

    left:
        7%;

    right:
        7%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gh-cyan),
            var(--gh-blue),
            transparent
        );
}


.process-item {

    text-align:
        center;

    position:
        relative;

    z-index:
        2;
}


.process-number {

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 25px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--gh-card);

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

    color:
        var(--gh-cyan);

    font-weight:
        800;

    box-shadow:
        0 0 30px
        rgba(25,181,255,.08);

    transition:
        .3s;
}


.process-item:hover
.process-number {

    background:
        linear-gradient(
            135deg,
            var(--gh-cyan),
            var(--gh-blue)
        );

    color:
        white;

    transform:
        scale(1.08);
}


.process-item h3 {

    font-size:
        17px;

    margin-bottom:
        10px;
}


.process-item p {

    color:
        var(--gh-muted);

    font-size:
        13px;

    line-height:
        1.6;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience-section {

    background:
        var(--gh-bg-light);
}


.experience-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;

    align-items:
        center;
}


.experience-content p {

    max-width:
        650px;

    margin-bottom:
        18px;
}


.expertise-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        30px;
}


.expertise-list span {

    padding:
        11px 16px;

    border-radius:
        50px;

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

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

    color:
        #c9dce9;

    font-size:
        13px;

    transition:
        .3s;
}


.expertise-list span:hover {

    background:
        rgba(25,181,255,.13);

    border-color:
        rgba(25,181,255,.4);

    color:
        white;
}


/* STATS */

.stats-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;
}


.stat-card {

    padding:
        32px;

    min-height:
        160px;

    border-radius:
        20px;

    background:
        var(--gh-card);

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

    transition:
        .3s;
}


.stat-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(25,181,255,.3);
}


.stat-card strong {

    display:
        block;

    font-size:
        43px;

    margin-bottom:
        8px;
}


.stat-card strong span {

    color:
        var(--gh-cyan);
}


.stat-card p {

    color:
        var(--gh-muted);

    font-size:
        14px;
}


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

.about-cta-section {

    padding:
        110px 0;
}


.about-cta-box {

    padding:
        90px 50px;

    text-align:
        center;

    border-radius:
        35px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(25,181,255,.22),
            transparent 55%
        ),

        linear-gradient(
            145deg,
            #0d2b44,
            #091c2c
        );

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

    position:
        relative;

    overflow:
        hidden;
}


.about-cta-box h2 {

    font-size:
        clamp(40px,5vw,68px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        22px;
}


.about-cta-box > p {

    max-width:
        650px;

    margin:
        0 auto 35px;

    color:
        var(--gh-muted);

    font-size:
        17px;

    line-height:
        1.8;
}


.cta-buttons {

    justify-content:
        center;
}


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

.about-footer {

    padding:
        35px 0;

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

    text-align:
        center;
}


.about-footer p {

    color:
        var(--gh-muted);

    font-size:
        14px;
}


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

@media(max-width:1100px) {


    .about-nav-links {

        gap:
            20px;
    }


    .about-nav-links a {

        font-size:
            14px;
    }


    .about-hero-grid,
    .who-grid,
    .experience-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            40px;
    }


    .difference-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .process-grid {

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

        row-gap:
            45px;
    }


    .process-grid::before {

        display:
            none;
    }

}


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

@media(max-width:800px) {


    .about-navbar {

        height:
            75px;
    }


    .about-nav-links {

        display:
            none;
    }


    .about-nav-btn {

        padding:
            12px 19px;

        font-size:
            13px;
    }


    .about-hero {

        min-height:
            auto;

        padding:
            80px 0;
    }


    .about-hero-grid,
    .who-grid,
    .purpose-grid,
    .experience-grid {

        grid-template-columns:
            1fr;
    }


    .about-hero-content {

        order:
            -1;
    }


    .about-hero-content h1 {

        font-size:
            clamp(46px,12vw,68px);

        letter-spacing:
            -3px;
    }


    .about-hero-content > p {

        font-size:
            16px;
    }


    .hero-main-card {

        width:
            290px;

        height:
            350px;
    }


    .about-hero-visual {

        min-height:
            400px;
    }


    .hero-floating-one {

        right:
            0;
    }


    .hero-floating-two {

        left:
            0;
    }


    .who-visual {

        min-height:
            390px;
    }


    .who-points {

        grid-template-columns:
            1fr;
    }


    .difference-heading {

        display:
            block;
    }


    .difference-heading > p {

        margin-top:
            20px;
    }


    .difference-grid {

        grid-template-columns:
            1fr;
    }


    .process-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            40px 15px;
    }


    .stats-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .about-section {

        padding:
            80px 0;
    }


    .about-cta-section {

        padding:
            80px 0;
    }


    .about-cta-box {

        padding:
            65px 25px;
    }

}


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

@media(max-width:500px) {


    .about-logo img {

        width:
            52px;
    }


    .about-nav-btn {

        padding:
            11px 16px;

        font-size:
            12px;
    }


    .about-hero-content h1 {

        font-size:
            44px;
    }


    .about-hero-buttons {

        flex-direction:
            column;
    }


    .about-primary-btn,
    .about-secondary-btn {

        justify-content:
            center;

        width:
            100%;
    }


    .hero-main-card {

        width:
            255px;

        height:
            320px;
    }


    .hero-floating-card {

        padding:
            13px 15px;
    }


    .hero-floating-card strong {

        font-size:
            21px;
    }


    .purpose-card {

        padding:
            30px;

        min-height:
            auto;
    }


    .purpose-card h3 {

        font-size:
            29px;
    }


    .process-grid {

        grid-template-columns:
            1fr;
    }


    .stats-grid {

        grid-template-columns:
            1fr;
    }


    .section-heading h2,
    .difference-heading h2,
    .experience-content h2 {

        font-size:
            42px;
    }


    .about-cta-box h2 {

        font-size:
            43px;
    }

}





/* ------------------------------------------------------ */


                          /* services page of css */

/* -------------------------------------------------------- */



/* =========================================================
   GROWTH HARBOUR
   SERVICES PAGE CSS
========================================================= */


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

:root {

    --bg:
        #061321;

    --bg-dark:
        #040e19;

    --bg-section:
        #081a2d;

    --card:
        #0b2035;

    --card-hover:
        #102942;

    --blue:
        #2563eb;

    --blue-light:
        #3b82f6;

    --cyan:
        #22d3ee;

    --cyan-light:
        #67e8f9;

    --white:
        #ffffff;

    --text:
        #f8fafc;

    --text-light:
        #cbd5e1;

    --text-muted:
        #94a3b8;

    --border:
        rgba(148, 163, 184, 0.14);

    --border-blue:
        rgba(59, 130, 246, 0.28);

    --gradient:
        linear-gradient(
            135deg,
            #2563eb,
            #22d3ee
        );

    --gradient-soft:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.15),
            rgba(34, 211, 238, 0.05)
        );

    --container:
        1200px;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

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

    background:
        var(--bg);

    color:
        var(--text);

    line-height:
        1.7;

    overflow-x:
        hidden;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    font-family:
        inherit;

}


img {

    display:
        block;

    max-width:
        100%;

}


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

.container {

    width:
        min(
            92%,
            var(--container)
        );

    margin:
        0 auto;

}


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

.services-navbar {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(
            6,
            19,
            33,
            0.88
        );

    backdrop-filter:
        blur(18px);

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

    border-bottom:
        1px solid
        rgba(
            148,
            163,
            184,
            0.08
        );

}


.nav-container {

    width:
        min(
            94%,
            1380px
        );

    min-height:
        78px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.nav-logo {

    flex-shrink:
        0;

}


.nav-logo img {

    width:
        150px;

    height:
        auto;

    object-fit:
        contain;

}


.nav-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        27px;

}


.nav-links a {

    position:
        relative;

    color:
        var(--text-light);

    font-size:
        14px;

    font-weight:
        500;

    transition:
        color 0.3s ease;

}


.nav-links a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -9px;

    width:
        0;

    height:
        2px;

    border-radius:
        20px;

    background:
        var(--gradient);

    transition:
        width 0.3s ease;

}


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

    color:
        var(--white);

}


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

    width:
        100%;

}


.nav-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        13px 24px;

    border-radius:
        30px;

    background:
        var(--gradient);

    color:
        var(--white);

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap;

    box-shadow:
        0 10px 30px
        rgba(
            37,
            99,
            235,
            0.25
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.nav-cta:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 40px
        rgba(
            34,
            211,
            238,
            0.22
        );

}


/* MOBILE MENU BUTTON */

.mobile-menu-btn {

    display:
        none;

    width:
        44px;

    height:
        44px;

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

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            0.03
        );

    cursor:
        pointer;

}


.mobile-menu-btn span {

    display:
        block;

    width:
        20px;

    height:
        2px;

    margin:
        4px auto;

    background:
        var(--white);

    transition:
        0.3s ease;

}


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

section {

    position:
        relative;

}


.section-label {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.section-heading {

    max-width:
        800px;

    margin:
        0 auto 65px;

    text-align:
        center;

}


.section-heading h2 {

    font-size:
        clamp(
            34px,
            4vw,
            54px
        );

    line-height:
        1.1;

    letter-spacing:
        -2px;

    font-weight:
        800;

}


.section-heading h2 span {

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.section-heading p {

    margin-top:
        22px;

    color:
        var(--text-muted);

    font-size:
        15px;

}


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

.services-hero {

    min-height:
        690px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(
                37,
                99,
                235,
                0.20
            ),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 70%,
            rgba(
                34,
                211,
                238,
                0.10
            ),
            transparent 25%
        );

}


.services-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.025
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.025
            ) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

}


.hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(90px);

    pointer-events:
        none;

}


.hero-glow-one {

    width:
        300px;

    height:
        300px;

    left:
        -100px;

    top:
        100px;

    background:
        var(--blue);

    opacity:
        0.10;

}


.hero-glow-two {

    width:
        280px;

    height:
        280px;

    right:
        -100px;

    bottom:
        20px;

    background:
        var(--cyan);

    opacity:
        0.08;

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        920px;

    margin:
        0 auto;

    padding:
        110px 0;

    text-align:
        center;

}


.hero-content h1 {

    max-width:
        950px;

    margin:
        0 auto;

    font-size:
        clamp(
            48px,
            6vw,
            78px
        );

    line-height:
        1.03;

    letter-spacing:
        -4px;

    font-weight:
        850;

}


.hero-content h1 span {

    display:
        block;

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-content > p {

    max-width:
        800px;

    margin:
        28px auto 0;

    color:
        var(--text-light);

    font-size:
        17px;

}


.hero-content .hero-description {

    margin-top:
        14px;

    color:
        var(--text-muted);

    font-size:
        14px;

}


.hero-buttons {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        38px;

}


.primary-btn,
.secondary-btn {

    min-height:
        53px;

    padding:
        0 25px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        11px;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        0.3s ease;

}


.primary-btn {

    background:
        var(--gradient);

    color:
        white;

    box-shadow:
        0 15px 35px
        rgba(
            37,
            99,
            235,
            0.25
        );

}


.primary-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 45px
        rgba(
            34,
            211,
            238,
            0.25
        );

}


.primary-btn span {

    font-size:
        19px;

}


.secondary-btn {

    color:
        var(--text-light);

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

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

}


.secondary-btn:hover {

    transform:
        translateY(-4px);

    color:
        white;

    border-color:
        rgba(
            34,
            211,
            238,
            0.3
        );

    background:
        rgba(
            34,
            211,
            238,
            0.06
        );

}


.hero-trust {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        42px;

    color:
        #64748b;

    font-size:
        11px;

    letter-spacing:
        1px;

}


.hero-trust i {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--cyan);

}


.hero-bottom-glow {

    position:
        absolute;

    left:
        50%;

    bottom:
        -150px;

    width:
        600px;

    height:
        250px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        var(--blue);

    filter:
        blur(130px);

    opacity:
        0.10;

}


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

.trust-section {

    background:
        #071827;

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

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

}


.trust-grid {

    display:
        grid;

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

}


.trust-item {

    min-height:
        155px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

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

}


.trust-item:last-child {

    border-right:
        0;

}


.trust-item strong {

    font-size:
        43px;

    line-height:
        1;

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.trust-item strong span {

    font-size:
        25px;

}


.trust-item p {

    margin-top:
        10px;

    color:
        var(--text-muted);

    font-size:
        12px;

}


/* =========================================================
   INTRO
========================================================= */

.intro-section {

    padding:
        110px 0 50px;

    background:
        var(--bg);

}


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

.services-section {

    padding:
        60px 0 120px;

    background:
        var(--bg);

}


.services-grid {

    display:
        grid;

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

    gap:
        20px;

}


.service-card {

    position:
        relative;

    min-height:
        430px;

    padding:
        30px;

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

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(
                11,
                32,
                53,
                0.95
            ),
            rgba(
                7,
                24,
                40,
                0.95
            )
        );

    overflow:
        hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}


.service-card::before {

    content:
        "";

    position:
        absolute;

    width:
        160px;

    height:
        160px;

    right:
        -80px;

    top:
        -80px;

    border-radius:
        50%;

    background:
        var(--blue);

    filter:
        blur(70px);

    opacity:
        0.08;

    transition:
        opacity 0.35s ease;

}


.service-card:hover {

    transform:
        translateY(-9px);

    border-color:
        var(--border-blue);

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

}


.service-card:hover::before {

    opacity:
        0.20;

}


.featured-service {

    border-color:
        rgba(
            34,
            211,
            238,
            0.28
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                14,
                42,
                67,
                0.98
            ),
            rgba(
                7,
                25,
                42,
                0.98
            )
        );

}


.featured-badge {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    padding:
        5px 9px;

    border-radius:
        30px;

    background:
        rgba(
            34,
            211,
            238,
            0.10
        );

    color:
        var(--cyan);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.service-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.service-number {

    color:
        #64748b;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1px;

}


.service-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        rgba(
            37,
            99,
            235,
            0.12
        );

    border:
        1px solid
        rgba(
            59,
            130,
            246,
            0.15
        );

    color:
        var(--cyan);

    font-size:
        12px;

    font-weight:
        800;

    transition:
        0.3s ease;

}


.service-card:hover .service-icon {

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

    background:
        var(--gradient);

    color:
        white;

}


.service-card h3 {

    margin-top:
        30px;

    font-size:
        22px;

    line-height:
        1.2;

}


.service-card > p {

    margin-top:
        13px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


.service-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        22px;

}


.service-tags span {

    padding:
        6px 9px;

    border-radius:
        50px;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    border:
        1px solid
        rgba(
            148,
            163,
            184,
            0.10
        );

    color:
        #94a3b8;

    font-size:
        9px;

}


.service-link {

    position:
        absolute;

    left:
        30px;

    bottom:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        700;

}


.service-link span {

    font-size:
        17px;

    transition:
        transform 0.3s ease;

}


.service-link:hover span {

    transform:
        translateX(5px);

}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section {

    padding:
        120px 0;

    background:
        var(--bg-section);

}


.split-heading {

    display:
        grid;

    grid-template-columns:
        1fr 0.6fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        60px;

}


.split-heading h2 {

    max-width:
        650px;

    font-size:
        clamp(
            35px,
            4vw,
            54px
        );

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.split-heading h2 span {

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.split-heading > p {

    color:
        var(--text-muted);

    font-size:
        14px;

}


.why-grid {

    display:
        grid;

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

    gap:
        18px;

}


.why-card {

    padding:
        32px;

    min-height:
        245px;

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

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    transition:
        0.3s ease;

}


.why-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--border-blue);

    background:
        rgba(
            37,
            99,
            235,
            0.06
        );

}


.why-number {

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        800;

}


.why-card h3 {

    margin-top:
        30px;

    font-size:
        20px;

}


.why-card p {

    margin-top:
        11px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


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

.process-section {

    padding:
        120px 0;

    background:
        var(--bg);

}


.process-grid {

    display:
        grid;

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

    gap:
        10px;

}


.process-card {

    position:
        relative;

    padding:
        25px 18px;

    min-height:
        240px;

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

}


.process-number {

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--gradient);

    color:
        white;

    font-size:
        10px;

    font-weight:
        800;

    box-shadow:
        0 10px 25px
        rgba(
            37,
            99,
            235,
            0.25
        );

}


.process-card h3 {

    margin-top:
        25px;

    font-size:
        18px;

}


.process-card p {

    margin-top:
        10px;

    color:
        var(--text-muted);

    font-size:
        12px;

}


/* =========================================================
   GOALS
========================================================= */

.goals-section {

    padding:
        120px 0;

    background:
        var(--bg-section);

}


.goals-grid {

    display:
        grid;

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

    gap:
        18px;

}


.goal-card {

    padding:
        30px;

    min-height:
        270px;

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

    border-radius:
        18px;

    background:
        var(--card);

    transition:
        0.3s ease;

}


.goal-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--border-blue);

}


.goal-icon {

    display:
        inline-flex;

    width:
        40px;

    height:
        40px;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(
            34,
            211,
            238,
            0.08
        );

    color:
        var(--cyan);

    font-size:
        10px;

    font-weight:
        800;

}


.goal-card h3 {

    margin-top:
        24px;

    font-size:
        20px;

}


.goal-card p {

    margin-top:
        10px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


.goal-card a {

    display:
        inline-block;

    margin-top:
        20px;

    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        700;

}


/* =========================================================
   DELIVER
========================================================= */

.deliver-section {

    padding:
        120px 0;

    background:
        var(--bg);

}


.deliver-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        90px;

    align-items:
        start;

}


.deliver-content h2 {

    font-size:
        clamp(
            35px,
            4vw,
            52px
        );

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.deliver-content h2 span {

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.deliver-content > p {

    margin-top:
        22px;

    color:
        var(--text-muted);

    font-size:
        14px;

}


.deliver-list {

    display:
        grid;

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

    gap:
        14px;

}


.deliver-item {

    display:
        flex;

    gap:
        15px;

    padding:
        22px;

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

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );

}


.deliver-item > span {

    flex-shrink:
        0;

    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(
            34,
            211,
            238,
            0.10
        );

    color:
        var(--cyan);

    font-size:
        12px;

}


.deliver-item h3 {

    font-size:
        14px;

}


.deliver-item p {

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


/* =========================================================
   RESULTS
========================================================= */

.results-section {

    padding:
        100px 0;

    background:
        var(--bg-section);

}


.results-box {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        70px;

    padding:
        65px;

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

    border-radius:
        25px;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(
                37,
                99,
                235,
                0.16
            ),
            transparent 35%
        ),

        rgba(
            255,
            255,
            255,
            0.02
        );

}


.results-content h2 {

    font-size:
        clamp(
            35px,
            4vw,
            50px
        );

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.results-content h2 span {

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.results-content p {

    margin-top:
        20px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


.results-stats {

    display:
        grid;

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

    gap:
        15px;

}


.result-stat {

    padding:
        28px;

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

    border-radius:
        15px;

    background:
        rgba(
            6,
            19,
            33,
            0.55
        );

}


.result-stat strong {

    display:
        block;

    font-size:
        40px;

    line-height:
        1;

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.result-stat span {

    display:
        block;

    margin-top:
        10px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    padding:
        120px 0;

    background:
        var(--bg);

}


.faq-container {

    max-width:
        850px;

    margin:
        0 auto;

}


.faq-item {

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

}


.faq-question {

    width:
        100%;

    padding:
        25px 5px;

    border:
        0;

    background:
        transparent;

    color:
        var(--white);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    text-align:
        left;

    cursor:
        pointer;

    font-size:
        15px;

    font-weight:
        600;

}


.faq-question b {

    flex-shrink:
        0;

    width:
        28px;

    height:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    color:
        var(--cyan);

    font-size:
        17px;

    font-weight:
        400;

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


.faq-answer {

    max-height:
        0;

    overflow:
        hidden;

    transition:
        max-height 0.4s ease;

}


.faq-answer p {

    padding:
        0 45px 25px 5px;

    color:
        var(--text-muted);

    font-size:
        13px;

}


.faq-item.active .faq-answer {

    max-height:
        200px;

}


.faq-item.active
.faq-question b {

    transform:
        rotate(45deg);

    background:
        rgba(
            34,
            211,
            238,
            0.08
        );

}


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

.final-cta-section {

    padding:
        100px 0;

    background:
        var(--bg-section);

}


.final-cta {

    position:
        relative;

    padding:
        90px 45px;

    text-align:
        center;

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

    border-radius:
        28px;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(
                37,
                99,
                235,
                0.24
            ),
            transparent 45%
        ),

        linear-gradient(
            135deg,
            #0b2035,
            #071827
        );

}


.cta-glow {

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    left:
        50%;

    top:
        -250px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        var(--cyan);

    filter:
        blur(120px);

    opacity:
        0.12;

}


.final-cta > * {

    position:
        relative;

    z-index:
        2;

}


.final-cta h2 {

    max-width:
        850px;

    margin:
        0 auto;

    font-size:
        clamp(
            38px,
            5vw,
            62px
        );

    line-height:
        1.05;

    letter-spacing:
        -3px;

}


.final-cta h2 span {

    display:
        inline;

    background:
        var(--gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.final-cta > p {

    max-width:
        700px;

    margin:
        23px auto 0;

    color:
        var(--text-muted);

    font-size:
        14px;

}


.cta-buttons {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        35px;

}


.final-cta small {

    display:
        block;

    margin-top:
        25px;

    color:
        #64748b;

    font-size:
        10px;

}


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

.services-footer {

    background:
        var(--bg-dark);

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

}


.footer-main {

    display:
        grid;

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

    gap:
        60px;

    padding:
        70px 0;

}


.footer-brand img {

    width:
        145px;

}


.footer-brand p {

    margin-top:
        12px;

    color:
        var(--cyan);

    font-size:
        12px;

    font-weight:
        600;

}


.footer-brand span {

    display:
        block;

    max-width:
        260px;

    margin-top:
        8px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


.footer-links-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.footer-links-group h4 {

    margin-bottom:
        10px;

    color:
        white;

    font-size:
        13px;

}


.footer-links-group a {

    color:
        #64748b;

    font-size:
        11px;

    transition:
        color 0.3s ease;

}


.footer-links-group a:hover {

    color:
        var(--cyan);

}


.footer-bottom {

    padding:
        20px 0;

    border-top:
        1px solid
        rgba(
            148,
            163,
            184,
            0.08
        );

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-bottom p,
.footer-bottom a {

    color:
        #475569;

    font-size:
        10px;

}


.footer-bottom div {

    display:
        flex;

    gap:
        20px;

}


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

@media (max-width: 1100px) {


    .nav-links {

        gap:
            16px;

    }


    .nav-links a {

        font-size:
            12px;

    }


    .nav-cta {

        display:
            none;

    }


    .services-grid {

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

    }


    .process-grid {

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

    }


    .why-grid {

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

    }


    .goals-grid {

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

    }

}


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

@media (max-width: 768px) {


    .nav-container {

        min-height:
            70px;

    }


    .nav-logo img {

        width:
            125px;

    }


    .mobile-menu-btn {

        display:
            block;

    }


    .nav-links {

        position:
            absolute;

        left:
            4%;

        right:
            4%;

        top:
            75px;

        padding:
            20px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

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

        border-radius:
            15px;

        background:
            rgba(
                6,
                19,
                33,
                0.98
            );

        backdrop-filter:
            blur(20px);

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

    }


    .nav-links.mobile-active {

        display:
            flex;

    }


    .nav-links a {

        padding:
            12px 8px;

        font-size:
            14px;

        border-bottom:
            1px solid
            rgba(
                148,
                163,
                184,
                0.07
            );

    }


    .nav-links a:last-child {

        border-bottom:
            0;

    }


    .nav-links a::after {

        display:
            none;

    }


    .services-hero {

        min-height:
            auto;

    }


    .hero-content {

        padding:
            90px 0;

    }


    .hero-content h1 {

        font-size:
            clamp(
                42px,
                11vw,
                58px
            );

        letter-spacing:
            -2.5px;

    }


    .hero-content > p {

        font-size:
            14px;

    }


    .hero-trust {

        gap:
            10px;

    }


    .trust-grid {

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

    }


    .trust-item {

        min-height:
            130px;

    }


    .trust-item:nth-child(2) {

        border-right:
            0;

    }


    .trust-item:nth-child(3),
    .trust-item:nth-child(4) {

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

    }


    .section-heading {

        margin-bottom:
            45px;

    }


    .section-heading h2 {

        font-size:
            36px;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .service-card {

        min-height:
            400px;

    }


    .split-heading {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .why-grid {

        grid-template-columns:
            1fr;

    }


    .process-grid {

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

    }


    .goals-grid {

        grid-template-columns:
            1fr;

    }


    .deliver-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .deliver-list {

        grid-template-columns:
            1fr;

    }


    .results-box {

        grid-template-columns:
            1fr;

        padding:
            45px 28px;

    }


    .final-cta {

        padding:
            65px 22px;

    }


    .final-cta h2 {

        font-size:
            40px;

        letter-spacing:
            -2px;

    }


    .footer-main {

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

        gap:
            40px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }


    .footer-bottom {

        flex-direction:
            column;

    }


}


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

@media (max-width: 480px) {


    .container {

        width:
            90%;

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .primary-btn,
    .secondary-btn {

        width:
            100%;

    }


    .hero-trust i {

        display:
            none;

    }


    .hero-trust {

        flex-direction:
            column;

    }


    .trust-item strong {

        font-size:
            35px;

    }


    .service-card {

        padding:
            25px;

    }


    .service-link {

        left:
            25px;

    }


    .process-grid {

        grid-template-columns:
            1fr;

    }


    .results-stats {

        grid-template-columns:
            1fr;

    }


    .result-stat {

        padding:
            24px;

    }


    .faq-question {

        font-size:
            13px;

    }


    .faq-answer p {

        font-size:
            12px;

    }


    .final-cta h2 {

        font-size:
            34px;

    }


    .cta-buttons {

        flex-direction:
            column;

    }


    .footer-main {

        grid-template-columns:
            1fr;

    }


    .footer-brand {

        grid-column:
            auto;

    }


    .footer-bottom div {

        flex-direction:
            column;

        gap:
            8px;

    }

}






/* ============================================== */


                 /* Portfolio page of css */

/* ================================================ */




/* =========================================================
   GROWTH HARBOUR
   PORTFOLIO PAGE
========================================================= */

:root {

    --navy: #061321;
    --navy-light: #0a1b2d;
    --card: #0d2338;
    --card-light: #102a43;

    --blue: #18a8ff;
    --blue-light: #38bdf8;

    --white: #f8fafc;
    --text: #cbd5e1;
    --muted: #94a3b8;

    --border: rgba(148, 163, 184, 0.14);

    --gold: #f5b82e;

    --container: 1240px;

}


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

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    background: var(--navy);

    color: var(--white);

    line-height: 1.7;

    overflow-x: hidden;

}


a {

    text-decoration: none;

    color: inherit;

}


img {

    max-width: 100%;

    display: block;

}


button {

    font-family: inherit;

}


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

.portfolio-navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(6, 19, 33, 0.88);

    backdrop-filter: blur(18px);

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

}


.portfolio-nav-container {

    max-width: var(--container);

    margin: auto;

    min-height: 92px;

    padding: 0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}


.portfolio-logo {

    width: 105px;

    flex-shrink: 0;

}


.portfolio-logo img {

    width: 100%;

    object-fit: contain;

}


.portfolio-nav {

    display: flex;

    align-items: center;

    gap: 28px;

}


.portfolio-nav a {

    color: #e2e8f0;

    font-size: 15px;

    font-weight: 500;

    transition: .3s ease;

    position: relative;

}


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

    color: var(--blue);

}


.portfolio-nav a.active::after {

    content: "";

    position: absolute;

    bottom: -10px;

    left: 0;

    width: 100%;

    height: 2px;

    background: var(--blue);

}


.portfolio-nav-btn {

    padding: 13px 24px;

    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #19b5ff,
        #1677ff
    );

    font-weight: 700;

    white-space: nowrap;

    transition: .3s ease;

}


.portfolio-nav-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(24, 168, 255, .25);

}


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

.portfolio-hero {

    min-height: 720px;

    max-width: var(--container);

    margin: auto;

    padding: 110px 24px 100px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;

    position: relative;

}


.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}


.hero-glow-one {

    width: 300px;

    height: 300px;

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

    top: 80px;

    left: -100px;

}


.hero-glow-two {

    width: 250px;

    height: 250px;

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

    right: -100px;

    bottom: 50px;

}


.portfolio-hero-content {

    position: relative;

    z-index: 2;

}


.portfolio-eyebrow {

    display: inline-block;

    color: var(--blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 25px;

}


.portfolio-hero h1 {

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

    font-size: clamp(48px, 5vw, 76px);

    line-height: 1.08;

    letter-spacing: -3px;

    max-width: 750px;

    margin-bottom: 28px;

}


.portfolio-hero h1 span {

    display: block;

    color: var(--blue);

}


.portfolio-hero p {

    max-width: 650px;

    color: var(--text);

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 35px;

}


.portfolio-hero-actions {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}


.primary-portfolio-btn,
.secondary-portfolio-btn {

    padding: 15px 25px;

    border-radius: 8px;

    font-weight: 700;

    transition: .3s ease;

}


.primary-portfolio-btn {

    background: var(--blue);

    color: white;

}


.primary-portfolio-btn span {

    margin-left: 8px;

}


.primary-portfolio-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(24,168,255,.25);

}


.secondary-portfolio-btn {

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

    color: white;

}


.secondary-portfolio-btn:hover {

    border-color: var(--blue);

    color: var(--blue);

}


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

.portfolio-hero-visual {

    position: relative;

    height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.visual-frame {

    width: 390px;

    height: 450px;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            #0d2b43,
            #071727
        );

    border: 1px solid rgba(56,189,248,.25);

    transform: rotate(-5deg);

    position: relative;

    overflow: hidden;

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

}


.visual-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

}


.visual-logo {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 210px;

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

    filter:
        drop-shadow(
            0 0 40px rgba(24,168,255,.45)
        );

}


.visual-label {

    position: absolute;

    bottom: 35px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 10px;

    letter-spacing: 4px;

    color: var(--blue);

    white-space: nowrap;

}


.floating-result-card,
.floating-growth-card {

    position: absolute;

    background: rgba(13,35,56,.95);

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

    backdrop-filter: blur(15px);

    padding: 20px 25px;

    border-radius: 20px;

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

}


.floating-result-card {

    top: 35px;

    right: 0;

}


.floating-growth-card {

    bottom: 40px;

    left: 0;

}


.floating-result-card strong,
.floating-growth-card strong {

    display: block;

    color: var(--blue);

    font-size: 30px;

}


.floating-result-card span,
.floating-growth-card span {

    color: var(--text);

    font-size: 13px;

}


/* =========================================================
   INTRO
========================================================= */

.portfolio-intro {

    max-width: var(--container);

    margin: auto;

    padding: 120px 24px;

}


.portfolio-section-heading {

    max-width: 750px;

    margin-bottom: 70px;

}


.portfolio-section-heading > span,
.project-heading span,
.capability-heading span,
.impact-heading span,
.difference-content > span {

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

}


.portfolio-section-heading h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.15;

    margin: 15px 0;

}


.portfolio-section-heading h2 em {

    color: var(--blue);

    font-style: normal;

}


.portfolio-section-heading p {

    color: var(--text);

    font-size: 17px;

}


.portfolio-principles {

    display: grid;

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

    gap: 20px;

}


.principle-item {

    padding: 35px;

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

    border-radius: 18px;

    background: rgba(13,35,56,.45);

    display: flex;

    gap: 20px;

    transition: .3s ease;

}


.principle-item:hover {

    transform: translateY(-8px);

    border-color: rgba(24,168,255,.35);

}


.principle-item > span {

    color: var(--blue);

    font-weight: 800;

}


.principle-item h3 {

    font-size: 19px;

    margin-bottom: 10px;

}


.principle-item p {

    color: var(--muted);

    font-size: 14px;

}


/* =========================================================
   PROJECT SECTION
========================================================= */

.project-section {

    background: #07192b;

    padding: 120px 24px;

}


.project-heading {

    max-width: var(--container);

    margin: auto auto 55px;

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

}


.project-heading h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.1;

    margin-top: 15px;

}


.project-heading h2 strong {

    color: var(--blue);

    display: block;

}


.project-heading > p {

    max-width: 450px;

    color: var(--muted);

}


.project-filter {

    max-width: var(--container);

    margin: auto auto 45px;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}


.filter-btn {

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

    background: transparent;

    color: var(--text);

    padding: 10px 18px;

    border-radius: 50px;

    cursor: pointer;

    transition: .3s ease;

}


.filter-btn:hover,
.filter-btn.active {

    background: var(--blue);

    color: white;

    border-color: var(--blue);

}


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

.project-grid {

    max-width: var(--container);

    margin: auto;

    display: grid;

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

    gap: 25px;

}


.project-card {

    background: #0b2035;

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

    border-radius: 20px;

    overflow: hidden;

    transition: .4s ease;

}


.project-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(24,168,255,.35);

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

}


.project-image {

    height: 330px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}


.project-image > span {

    position: absolute;

    bottom: 20px;

    left: 25px;

    font-size: 10px;

    letter-spacing: 2px;

    color: #bae6fd;

}


/* Branding */

.project-branding {

    background:
        radial-gradient(
            circle at center,
            #17466b,
            #071827
        );

}


.branding-symbol {

    font-family: Poppins;

    font-size: 110px;

    font-weight: 800;

    color: white;

    text-shadow:
        0 0 50px rgba(24,168,255,.7);

}


.project-number {

    position: absolute;

    top: 20px;

    right: 25px;

    color: var(--blue);

    font-weight: 800;

}


/* Motion */

.project-motion {

    background:
        linear-gradient(
            135deg,
            #071827,
            #0b4972
        );

}


.motion-circle {

    width: 180px;

    height: 180px;

    border-radius: 50%;

    border: 35px solid var(--blue);

    box-shadow:
        0 0 80px rgba(24,168,255,.5);

}


.motion-text {

    position: absolute;

    font-size: 32px;

    font-weight: 800;

    letter-spacing: 5px;

}


/* Web */

.project-web {

    background: #061321;

}


.browser-window {

    width: 72%;

    border-radius: 12px;

    overflow: hidden;

    background: #102a43;

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

}


.browser-top {

    padding: 10px;

    font-size: 10px;

    color: #64748b;

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

}


.browser-content {

    height: 180px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 25px;

}


.browser-content span {

    color: var(--blue);

    font-size: 13px;

}


.browser-content strong {

    font-size: 38px;

}


/* Marketing */

.project-marketing {

    background:
        radial-gradient(
            circle at 80% 20%,
            #164c72,
            #061321
        );

}


.marketing-chart {

    width: 230px;

    height: 170px;

    position: relative;

}


.marketing-chart span {

    font-size: 50px;

    font-weight: 800;

    color: var(--blue);

}


.marketing-chart small {

    display: block;

    color: var(--muted);

    letter-spacing: 2px;

}


.chart-line {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 70px;

    border-top: 4px solid var(--blue);

    transform:
        skewY(-12deg);

}


/* SEO */

.project-seo {

    background:
        radial-gradient(
            circle,
            #103d5c,
            #061321
        );

}


.seo-score {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    border: 8px solid var(--blue);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


.seo-score strong {

    font-size: 55px;

    line-height: 1;

}


.seo-score span {

    position: static;

    color: var(--blue);

}


/* Social */

.project-social {

    background:
        linear-gradient(
            145deg,
            #122e48,
            #061321
        );

}


.social-post {

    width: 180px;

    height: 220px;

    background:
        linear-gradient(
            145deg,
            #1c5e86,
            #071827
        );

    border-radius: 12px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 25px;

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

}


.social-post strong {

    font-size: 28px;

}


.social-post span {

    font-size: 38px;

    color: var(--blue);

    font-weight: 800;

}


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

.project-content {

    padding: 30px;

}


.project-meta {

    color: var(--blue);

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 10px;

}


.project-content h3 {

    font-family: Poppins;

    font-size: 24px;

    line-height: 1.3;

    margin-bottom: 13px;

}


.project-content p {

    color: var(--muted);

    font-size: 14px;

    margin-bottom: 22px;

}


.project-content a {

    color: white;

    font-weight: 700;

    font-size: 14px;

}


.project-content a span {

    color: var(--blue);

    margin-left: 7px;

}


.project-content a:hover {

    color: var(--blue);

}


/* =========================================================
   IMPACT
========================================================= */

.portfolio-impact {

    padding: 120px 24px;

    background: var(--navy);

}


.impact-container {

    max-width: var(--container);

    margin: auto;

}


.impact-heading {

    max-width: 750px;

    margin-bottom: 65px;

}


.impact-heading h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.15;

    margin: 15px 0;

}


.impact-heading h2 strong {

    display: block;

    color: var(--blue);

}


.impact-heading p {

    color: var(--muted);

}


.impact-stats {

    display: grid;

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

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

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

}


.impact-stat {

    padding: 40px 25px;

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

}


.impact-stat:last-child {

    border-right: none;

}


.impact-stat strong {

    font-family: Poppins;

    font-size: 48px;

    color: var(--blue);

    display: block;

}


.impact-stat span {

    font-weight: 700;

}


.impact-stat p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 10px;

}


/* =========================================================
   CAPABILITIES
========================================================= */

.portfolio-capabilities {

    background: #07192b;

    padding: 120px 24px;

}


.capability-heading {

    max-width: var(--container);

    margin: auto auto 50px;

}


.capability-heading h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.15;

    margin-top: 15px;

}


.capability-heading h2 strong {

    color: var(--blue);

}


.capability-list {

    max-width: var(--container);

    margin: auto;

}


.capability-row {

    display: grid;

    grid-template-columns:
        70px 1fr 1fr 40px;

    align-items: center;

    gap: 25px;

    padding: 30px 0;

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

    transition: .3s ease;

}


.capability-row:hover {

    padding-left: 15px;

    padding-right: 15px;

    background: rgba(24,168,255,.03);

}


.capability-row > span {

    color: var(--blue);

    font-weight: 800;

}


.capability-row h3 {

    font-family: Poppins;

    font-size: 23px;

}


.capability-row p {

    color: var(--muted);

    font-size: 14px;

}


.capability-row a {

    color: var(--blue);

    font-size: 22px;

}


/* =========================================================
   DIFFERENCE
========================================================= */

.portfolio-difference {

    max-width: var(--container);

    margin: auto;

    padding: 130px 24px;

    display: grid;

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

    gap: 90px;

    align-items: center;

}


.difference-visual {

    min-height: 430px;

    border-radius: 30px;

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

    background:
        radial-gradient(
            circle at center,
            rgba(24,168,255,.18),
            transparent 55%
        ),
        #081a2c;

    display: flex;

    justify-content: center;

    align-items: center;

}


.difference-logo {

    width: 260px;

    filter:
        drop-shadow(
            0 0 45px rgba(24,168,255,.25)
        );

}


.difference-content h2 {

    font-family: Poppins;

    font-size: clamp(38px,4vw,58px);

    line-height: 1.15;

    margin: 15px 0 20px;

}


.difference-content h2 strong {

    display: block;

    color: var(--blue);

}


.difference-content > p {

    color: var(--muted);

    margin-bottom: 30px;

}


.difference-points {

    display: grid;

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

    gap: 15px;

}


.difference-points > div {

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

    padding: 18px;

    border-radius: 12px;

}


.difference-points strong {

    color: var(--blue);

    font-size: 13px;

}


.difference-points p {

    margin-top: 5px;

    font-size: 14px;

}


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

.portfolio-cta {

    text-align: center;

    padding: 130px 24px;

    background:
        radial-gradient(
            circle at center,
            #103b5d,
            #061321 65%
        );

    position: relative;

    overflow: hidden;

}


.portfolio-cta > * {

    position: relative;

    z-index: 2;

}


.portfolio-cta > span {

    color: var(--blue);

    letter-spacing: 3px;

    font-size: 12px;

    font-weight: 800;

}


.portfolio-cta h2 {

    font-family: Poppins;

    font-size: clamp(42px,5vw,70px);

    line-height: 1.1;

    max-width: 850px;

    margin: 20px auto;

}


.portfolio-cta h2 strong {

    color: var(--blue);

    display: block;

}


.portfolio-cta > p {

    max-width: 650px;

    margin: auto;

    color: var(--muted);

}


.cta-buttons {

    margin-top: 35px;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}


.cta-primary,
.cta-secondary {

    padding: 15px 25px;

    border-radius: 8px;

    font-weight: 700;

}


.cta-primary {

    background: var(--blue);

}


.cta-primary span {

    margin-left: 8px;

}


.cta-secondary {

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

}


.cta-secondary:hover {

    border-color: var(--blue);

    color: var(--blue);

}


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

.portfolio-footer {

    max-width: var(--container);

    margin: auto;

    padding: 60px 24px 30px;

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

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    flex-wrap: wrap;

}


.footer-brand img {

    width: 130px;

}


.footer-brand p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 8px;

}


.footer-links {

    display: flex;

    gap: 25px;

}


.footer-links a {

    color: var(--muted);

    font-size: 14px;

}


.footer-links a:hover {

    color: var(--blue);

}


.copyright {

    width: 100%;

    color: #64748b;

    font-size: 12px;

    padding-top: 25px;

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

}


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

@media (max-width: 1100px) {

    .portfolio-nav {

        gap: 15px;

    }

    .portfolio-nav a {

        font-size: 13px;

    }

    .portfolio-hero {

        gap: 30px;

    }

}


@media (max-width: 900px) {

    .portfolio-nav {

        display: none;

    }

    .portfolio-hero {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .portfolio-hero p {

        margin-left: auto;

        margin-right: auto;

    }

    .portfolio-hero-actions {

        justify-content: center;

    }

    .portfolio-hero-visual {

        margin-top: 30px;

    }

    .portfolio-principles {

        grid-template-columns: 1fr;

    }

    .project-heading {

        flex-direction: column;

        align-items: flex-start;

    }

    .impact-stats {

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

    }

    .impact-stat:nth-child(2) {

        border-right: none;

    }

    .portfolio-difference {

        grid-template-columns: 1fr;

    }

    .capability-row {

        grid-template-columns:
            50px 1fr 40px;

    }

    .capability-row p {

        display: none;

    }

}


@media (max-width: 650px) {

    .portfolio-nav-container {

        min-height: 75px;

    }

    .portfolio-logo {

        width: 90px;

    }

    .portfolio-nav-btn {

        padding: 11px 17px;

        font-size: 13px;

    }

    .portfolio-hero {

        padding-top: 70px;

    }

    .portfolio-hero h1 {

        letter-spacing: -2px;

    }

    .portfolio-hero-visual {

        height: 390px;

    }

    .visual-frame {

        width: 290px;

        height: 350px;

    }

    .visual-logo {

        width: 160px;

    }

    .floating-result-card {

        right: -5px;

    }

    .floating-growth-card {

        left: -5px;

    }

    .project-grid {

        grid-template-columns: 1fr;

    }

    .project-image {

        height: 280px;

    }

    .impact-stats {

        grid-template-columns: 1fr;

    }

    .impact-stat {

        border-right: none;

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

    }

    .impact-stat:last-child {

        border-bottom: none;

    }

    .capability-row {

        grid-template-columns:
            35px 1fr 25px;

    }

    .capability-row h3 {

        font-size: 18px;

    }

    .difference-points {

        grid-template-columns: 1fr;

    }

    .difference-visual {

        min-height: 320px;

    }

    .footer-links {

        flex-wrap: wrap;

    }

}



/* ==================================== */

            /* video page of css */


/* ======================================== */



/* =====================================================
   GROWTH HARBOUR
   VIDEO PAGE
===================================================== */


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


html {
    scroll-behavior: smooth;
}


body {
    background: #06111e;
    color: #f8fafc;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}


a {
    text-decoration: none;
    color: inherit;
}


img {
    max-width: 100%;
}


section {
    position: relative;
}


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

.video-navbar {
    width: 100%;
    background: rgba(5, 16, 29, 0.94);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 100;
}


.video-nav-container {
    max-width: 1500px;
    min-height: 92px;
    margin: auto;
    padding: 0 5%;

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


.video-logo img {
    width: 105px;
    display: block;
}


.video-nav-container nav {
    display: flex;
    align-items: center;
    gap: 38px;
}


.video-nav-container nav a {
    color: #e5edf7;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    padding: 35px 0;
    transition: .3s ease;
}


.video-nav-container nav a:hover,
.video-nav-container nav a.active {
    color: #20b5ff;
}


.video-nav-container nav a.active::after {
    content: "";

    position: absolute;
    bottom: 24px;
    left: 0;

    width: 100%;
    height: 2px;

    background: #16b7ff;
}


.nav-cta {
    padding: 16px 30px;

    border-radius: 40px;

    background: linear-gradient(
        135deg,
        #20b8ff,
        #147cf5
    );

    font-weight: 700;

    box-shadow:
        0 10px 30px rgba(20,130,255,.20);

    transition: .3s ease;
}


.nav-cta:hover {
    transform: translateY(-3px);
    box-shadow:
        0 15px 40px rgba(20,160,255,.35);
}



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

.video-hero {
    min-height: 760px;

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

    align-items: center;

    max-width: 1500px;
    margin: auto;

    padding: 90px 7%;

    overflow: hidden;
}


.hero-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    background: rgba(0, 157, 255, .14);

    filter: blur(120px);

    border-radius: 50%;

    top: 100px;
    left: -250px;
}


.hero-content {
    position: relative;
    z-index: 2;
}


.hero-label {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    color: #18b7ff;

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

    letter-spacing: 3px;

    margin-bottom: 25px;
}


.hero-label i {
    font-size: 15px;
}


.hero-content h1 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(48px, 5.5vw, 82px);

    line-height: 1.04;

    max-width: 800px;

    letter-spacing: -3px;

    margin-bottom: 30px;
}


.hero-content h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #20b9ff,
            #6fd5ff
        );

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

    color: transparent;
}


.hero-content > p {
    color: #aebed0;

    max-width: 670px;

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 35px;
}


.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}


.primary-video-btn,
.secondary-video-btn {
    display: inline-flex;

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

    gap: 12px;

    padding: 17px 25px;

    border-radius: 10px;

    font-weight: 700;

    transition: .3s ease;
}


.primary-video-btn {
    background: #159ff5;

    box-shadow:
        0 15px 35px rgba(0,155,255,.22);
}


.primary-video-btn:hover {
    transform: translateY(-4px);
    background: #27b5ff;
}


.secondary-video-btn {
    border: 1px solid rgba(255,255,255,.14);

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

    color: #dce8f5;
}


.secondary-video-btn:hover {
    border-color: #19b5ff;
    color: #19b5ff;
}


.hero-trust {
    display: flex;

    gap: 40px;

    margin-top: 65px;
}


.hero-trust div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.hero-trust strong {
    font-size: 27px;
    color: #20b8ff;
}


.hero-trust span {
    color: #8fa3b8;
    font-size: 13px;
}


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

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
}


.visual-card {
    width: min(520px, 100%);
    height: 570px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #0b304a,
            #081a2b
        );

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

    position: relative;

    overflow: hidden;

    transform: rotate(3deg);

    box-shadow:
        0 40px 100px rgba(0,0,0,.45);
}


.visual-card::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    background: #00aaff;

    opacity: .17;

    filter: blur(80px);

    left: 100px;
    top: 120px;

    border-radius: 50%;
}


.visual-top {
    position: absolute;

    top: 25px;
    left: 28px;
    right: 28px;

    display: flex;
    justify-content: space-between;

    color: #9cb0c5;

    font-size: 12px;

    letter-spacing: 2px;
}


.visual-play {
    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: rgba(15,157,239,.12);

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

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

    font-size: 28px;

    color: #24baff;

    position: absolute;

    top: 50%;
    left: 50%;

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

    box-shadow:
        0 0 70px rgba(0,174,255,.3);
}


.visual-bottom {
    position: absolute;

    bottom: 30px;
    left: 30px;

    color: #18b7ff;

    font-size: 12px;

    letter-spacing: 4px;
}


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

.section-heading {
    text-align: center;

    max-width: 850px;

    margin: 0 auto 70px;

    padding: 0 20px;
}


.section-heading > span {
    color: #19b8ff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;
}


.section-heading h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.12;

    margin: 18px 0;
}


.section-heading h2 strong {
    color: #20b7ff;
}


.section-heading p {
    color: #91a4b9;

    line-height: 1.8;

    font-size: 17px;
}


/* =====================================================
   SHOWREEL
===================================================== */

.showreel-section {
    padding: 120px 6%;

    background:
        linear-gradient(
            180deg,
            #071321,
            #091a2c
        );
}


.showreel-wrapper {
    max-width: 1150px;
    margin: auto;
}


.showreel-video {
    height: 650px;

    position: relative;

    overflow: hidden;

    border-radius: 25px;

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

    background: #02070d;

    box-shadow:
        0 40px 100px rgba(0,0,0,.45);
}


.showreel-video video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.video-overlay {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

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

    pointer-events: none;

    background: rgba(3,12,22,.75);

    backdrop-filter: blur(15px);

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

    border-radius: 14px;

    padding: 20px 25px;
}


.video-overlay span {
    font-weight: 700;
    letter-spacing: 2px;
}


.video-overlay i {
    color: #19b8ff;
}


.video-overlay small {
    color: #94a8bc;
}


/* =====================================================
   CATEGORIES
===================================================== */

.categories-section {
    padding: 130px 6%;
}


.category-grid {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 22px;
}


.category-card {
    padding: 38px 35px;

    min-height: 300px;

    background:
        linear-gradient(
            145deg,
            rgba(17,42,64,.85),
            rgba(8,24,40,.9)
        );

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

    border-radius: 20px;

    position: relative;

    overflow: hidden;

    transition: .4s ease;
}


.category-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -80px;
    bottom: -80px;

    background: #009dff;

    opacity: .07;

    filter: blur(40px);

    border-radius: 50%;
}


.category-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(20,180,255,.35);

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);
}


.category-icon {
    width: 55px;
    height: 55px;

    border-radius: 14px;

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

    color: #18b8ff;

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

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

    font-size: 21px;

    margin-bottom: 25px;
}


.category-card > span {
    position: absolute;

    right: 28px;
    top: 30px;

    color: #42566b;

    font-weight: 800;
}


.category-card h3 {
    font-family: "Poppins", sans-serif;

    font-size: 24px;

    margin-bottom: 13px;
}


.category-card p {
    color: #8fa5b9;

    line-height: 1.7;

    font-size: 15px;

    margin-bottom: 25px;
}


.category-card a {
    color: #18b8ff;

    font-size: 14px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 9px;
}


/* =====================================================
   VIDEO SHOWCASE
===================================================== */

.video-showcase {
    padding: 130px 6%;

    background: #071523;
}


.video-grid {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 25px;
}


.work-card {
    background: #0b1d30;

    border-radius: 20px;

    overflow: hidden;

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

    transition: .4s ease;
}


.work-card.large {
    grid-column: span 2;
}


.work-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(15,182,255,.3);
}


.work-media {
    height: 390px;

    position: relative;

    background:
        linear-gradient(
            135deg,
            #0b2941,
            #061321
        );

    overflow: hidden;
}


.work-card:not(.large) .work-media {
    height: 300px;
}


.work-media video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    opacity: .82;
}


.work-play {
    width: 55px;
    height: 55px;

    position: absolute;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    background: rgba(10,20,30,.72);

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

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

    color: #19b8ff;

    backdrop-filter: blur(10px);

    transition: .3s ease;
}


.work-card:hover .work-play {
    transform:
        translate(-50%,-50%)
        scale(1.12);

    background: #0b9fe7;
    color: white;
}


.work-info {
    padding: 25px 28px 30px;
}


.work-info span {
    font-size: 11px;

    color: #19b8ff;

    letter-spacing: 2px;

    font-weight: 800;
}


.work-info h3 {
    font-family: "Poppins", sans-serif;

    font-size: 23px;

    margin-top: 10px;
}


.work-info p {
    color: #8fa3b7;

    margin-top: 10px;

    line-height: 1.6;
}


/* =====================================================
   WHY VIDEO
===================================================== */

.why-video {
    max-width: 1250px;

    margin: auto;

    padding: 140px 6%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;
}


.why-content > span {
    color: #19b8ff;

    font-size: 12px;

    letter-spacing: 3px;

    font-weight: 800;
}


.why-content h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,4vw,58px);

    line-height: 1.1;

    margin: 20px 0;
}


.why-content h2 strong {
    display: block;

    color: #20b7ff;
}


.why-content p {
    color: #92a5b8;

    line-height: 1.9;

    font-size: 16px;

    margin-bottom: 30px;
}


.why-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 23px;

    border-radius: 9px;

    background: #129fe9;

    font-weight: 700;

    transition: .3s ease;
}


.why-btn:hover {
    transform: translateY(-3px);
}


.why-points {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.why-point {
    display: flex;

    gap: 20px;

    padding: 25px;

    border-radius: 15px;

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

    background:
        rgba(14,34,52,.55);

    transition: .3s ease;
}


.why-point:hover {
    border-color:
        rgba(20,180,255,.25);
}


.why-point > div {
    min-width: 48px;
    height: 48px;

    border-radius: 12px;

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

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

    color: #18b8ff;
}


.why-point h3 {
    margin-bottom: 7px;

    font-size: 18px;
}


.why-point p {
    color: #8499ad;

    line-height: 1.6;

    font-size: 14px;
}


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

.video-process {
    padding: 130px 6%;

    background: #071624;
}


.process-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 18px;
}


.process-card {
    padding: 35px 25px;

    background: #0b2033;

    border-radius: 18px;

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

    position: relative;
}


.process-card > span {
    position: absolute;

    top: 20px;
    right: 22px;

    color: #344c61;

    font-size: 30px;

    font-weight: 800;
}


.process-card > i {
    color: #18b8ff;

    font-size: 25px;

    margin: 30px 0 25px;
}


.process-card h3 {
    font-family: "Poppins", sans-serif;

    font-size: 21px;

    margin-bottom: 12px;
}


.process-card p {
    color: #899eb2;

    line-height: 1.7;

    font-size: 14px;
}


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

.video-stats {
    padding: 75px 7%;

    display: grid;

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

    background:
        linear-gradient(
            90deg,
            #081c2e,
            #0a263d,
            #081c2e
        );

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

    border-bottom: 1px solid
        rgba(255,255,255,.06);
}


.stat {
    text-align: center;

    padding: 15px;

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


.stat:last-child {
    border-right: none;
}


.stat strong {
    display: block;

    font-size: 42px;

    color: #1ab8ff;

    font-family: "Poppins", sans-serif;
}


.stat span {
    color: #91a4b7;

    font-size: 14px;
}


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

.video-final-cta {
    padding: 150px 6%;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #0c2b43 0%,
            #06111e 65%
        );
}


.cta-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    background: #009dff;

    opacity: .08;

    filter: blur(130px);

    border-radius: 50%;

    left: 50%;
    top: 50%;

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


.cta-content {
    position: relative;

    max-width: 850px;

    margin: auto;
}


.cta-content > span {
    color: #19b8ff;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;
}


.cta-content h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(42px,5vw,68px);

    line-height: 1.1;

    margin: 20px 0;
}


.cta-content h2 strong {
    color: #20b8ff;
}


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

    margin: auto;

    color: #92a5b9;

    line-height: 1.8;

    font-size: 17px;
}


.cta-buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 35px;
}


.cta-primary,
.cta-secondary {
    padding: 17px 28px;

    border-radius: 9px;

    font-weight: 700;

    transition: .3s ease;
}


.cta-primary {
    background: #12a5f2;
}


.cta-primary:hover {
    transform: translateY(-3px);
}


.cta-secondary {
    border: 1px solid
        rgba(255,255,255,.15);

    color: #d9e5f0;
}


.cta-secondary:hover {
    color: #18b8ff;

    border-color: #18b8ff;
}


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

.video-footer {
    padding: 55px 7% 30px;

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

    background: #040d17;
}


.footer-brand img {
    width: 125px;
}


.footer-brand p {
    max-width: 400px;

    color: #7f94a9;

    line-height: 1.7;

    margin-top: 15px;
}


.footer-copy {
    margin-top: 45px;

    padding-top: 25px;

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

    color: #60758a;

    font-size: 13px;
}


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

@media (max-width: 1100px) {

    .video-nav-container nav {
        gap: 20px;
    }


    .video-hero {
        grid-template-columns: 1fr;
        gap: 70px;
    }


    .hero-content {
        text-align: center;
    }


    .hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


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


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


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


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

}


@media (max-width: 850px) {

    .video-nav-container {
        flex-wrap: wrap;
        padding: 20px 5%;
    }


    .video-nav-container nav {
        order: 3;

        width: 100%;

        overflow-x: auto;

        padding-bottom: 5px;
    }


    .video-nav-container nav a {
        padding: 10px 0;

        white-space: nowrap;
    }


    .video-nav-container nav a.active::after {
        bottom: 0;
    }


    .hero-content h1 {
        letter-spacing: -2px;
    }


    .showreel-video {
        height: 480px;
    }


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


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


    .stat {
        margin-bottom: 20px;
    }

}


@media (max-width: 600px) {

    .video-hero {
        padding: 70px 5%;
    }


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


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


    .hero-trust {
        gap: 20px;
        flex-wrap: wrap;
    }


    .visual-card {
        height: 430px;
    }


    .showreel-section,
    .categories-section,
    .video-showcase,
    .why-video,
    .video-process {
        padding: 90px 5%;
    }


    .showreel-video {
        height: 350px;
        border-radius: 15px;
    }


    .video-overlay {
        left: 12px;
        right: 12px;
        bottom: 12px;

        padding: 14px;

        flex-wrap: wrap;
        gap: 8px;
    }


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


    .work-card.large {
        grid-column: span 1;
    }


    .work-media,
    .work-card:not(.large) .work-media {
        height: 260px;
    }


    .why-video {
        gap: 50px;
    }


    .video-stats {
        grid-template-columns: 1fr 1fr;

        padding: 50px 4%;
    }


    .stat {
        border-right: none;
    }


    .stat strong {
        font-size: 32px;
    }


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


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

}



/* ======================================== */

              /* pricing page of css */


/* ============================================= */



/* =========================================================
   GROWTH HARBOUR - PRICING PAGE
   Premium Dark Blue / Electric Blue Theme
========================================================= */

:root {

    --bg: #061321;

    --bg-dark: #040d18;

    --primary: #0f172a;

    --card: #0d2238;

    --card-light: #102b44;

    --blue: #2563eb;

    --cyan: #18b7ff;

    --cyan-light: #5dd8ff;

    --gold: #f5b82e;

    --white: #f8fafc;

    --text: #d7e3ef;

    --muted: #9db1c5;

    --border: rgba(69, 151, 210, .20);

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

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--bg);

    color: var(--white);

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

    overflow-x: hidden;

}


a {

    text-decoration: none;

    color: inherit;

}


button {

    font-family: inherit;

}


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

.navbar {

    width: 100%;

    height: 92px;

    background: rgba(4, 15, 27, .92);

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

    position: relative;

    z-index: 100;

}


.nav-container {

    max-width: 1500px;

    height: 100%;

    margin: auto;

    padding: 0 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.logo img {

    width: 82px;

    height: auto;

    object-fit: contain;

}


.nav-menu {

    display: flex;

    align-items: center;

    gap: 38px;

}


.nav-menu a {

    color: #edf4fa;

    font-size: 16px;

    font-weight: 500;

    position: relative;

    transition: .3s ease;

}


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

    color: var(--cyan);

}


.nav-menu a.active::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -12px;

    height: 2px;

    background: var(--cyan);

    box-shadow: 0 0 12px var(--cyan);

}


.nav-btn {

    padding: 16px 31px;

    border-radius: 40px;

    background: linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );

    font-weight: 700;

    transition: .3s ease;

    box-shadow:
        0 10px 35px rgba(24,183,255,.20);

}


.nav-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 40px rgba(24,183,255,.35);

}


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

.pricing-hero {

    min-height: 760px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(24,183,255,.13),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #061321,
            #071a2b
        );

}


.hero-content {

    max-width: 1000px;

    position: relative;

    z-index: 2;

    padding: 80px 25px;

}


.eyebrow {

    color: var(--cyan);

    letter-spacing: 4px;

    font-size: 12px;

    font-weight: 700;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    margin-bottom: 28px;

}


.eyebrow span {

    width: 30px;

    height: 1px;

    background: var(--cyan);

}


.pricing-hero h1 {

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

    font-size: clamp(48px, 6vw, 82px);

    line-height: 1.08;

    letter-spacing: -3px;

    margin-bottom: 30px;

}


.pricing-hero h1 span {

    display: block;

    color: var(--cyan);

    text-shadow:
        0 0 35px rgba(24,183,255,.22);

}


.pricing-hero p {

    max-width: 800px;

    margin: auto;

    color: var(--muted);

    font-size: 18px;

    line-height: 1.8;

}


.hero-buttons {

    margin-top: 42px;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}


.primary-btn,
.secondary-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 17px 28px;

    border-radius: 9px;

    font-weight: 700;

    transition: .3s ease;

}


.primary-btn {

    background: linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );

    box-shadow:
        0 12px 35px rgba(24,183,255,.22);

}


.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(24,183,255,.35);

}


.secondary-btn {

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

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

    color: var(--text);

}


.secondary-btn:hover {

    border-color: var(--cyan);

    color: var(--cyan);

    transform: translateY(-4px);

}


.trust-line {

    margin-top: 65px;

    display: flex;

    justify-content: center;

    gap: 70px;

}


.trust-line div {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.trust-line strong {

    font-size: 27px;

    color: var(--white);

}


.trust-line span {

    font-size: 13px;

    color: var(--muted);

}


/* HERO GLOW */

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

}


.glow-one {

    width: 300px;

    height: 300px;

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

    left: -100px;

    top: 180px;

}


.glow-two {

    width: 250px;

    height: 250px;

    background: rgba(24,183,255,.14);

    right: -80px;

    bottom: 100px;

}


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

section {

    padding: 115px 6%;

}


.section-heading {

    max-width: 780px;

    margin: 0 auto 70px;

    text-align: center;

}


.section-label {

    color: var(--cyan);

    font-size: 12px;

    letter-spacing: 4px;

    font-weight: 800;

}


.section-heading h2 {

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

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.15;

    margin-top: 18px;

}


.section-heading h2 span {

    color: var(--cyan);

}


.section-heading p {

    color: var(--muted);

    line-height: 1.8;

    margin-top: 20px;

    font-size: 16px;

}


/* =========================================================
   VALUE
========================================================= */

.value-section {

    background: #071827;

}


.value-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 20px;

}


.value-card {

    padding: 34px 28px;

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

    background:
        linear-gradient(
            145deg,
            rgba(15,43,68,.9),
            rgba(8,26,42,.85)
        );

    border-radius: 18px;

    transition: .4s ease;

}


.value-card:hover {

    transform: translateY(-8px);

    border-color: rgba(24,183,255,.5);

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

}


.value-icon {

    width: 55px;

    height: 55px;

    border-radius: 14px;

    display: grid;

    place-items: center;

    color: var(--cyan);

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

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

    margin-bottom: 24px;

    font-size: 20px;

}


.value-card h3 {

    font-size: 19px;

    margin-bottom: 13px;

}


.value-card p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   PRICING PLANS
========================================================= */

.plans-section {

    background: var(--bg);

}


.pricing-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 22px;

    align-items: stretch;

}


.pricing-card {

    background:
        linear-gradient(
            160deg,
            #102a42,
            #091a2b
        );

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

    border-radius: 24px;

    padding: 38px 34px;

    position: relative;

    transition: .4s ease;

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

}


.pricing-card:hover {

    transform: translateY(-10px);

    border-color:
        rgba(24,183,255,.45);

}


.pricing-card.popular {

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

    background:
        linear-gradient(
            160deg,
            #10314d,
            #0a1e32
        );

    box-shadow:
        0 25px 70px rgba(24,183,255,.12);

}


.popular-badge {

    position: absolute;

    top: -13px;

    left: 50%;

    transform: translateX(-50%);

    padding: 7px 18px;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    border-radius: 30px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    white-space: nowrap;

}


.plan-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


.plan-icon {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: var(--cyan);

    background: rgba(24,183,255,.09);

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

}


.plan-tag {

    color: var(--muted);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 700;

}


.pricing-card h3 {

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

    font-size: 30px;

    margin-bottom: 12px;

}


.plan-description {

    color: var(--muted);

    min-height: 72px;

    line-height: 1.7;

    font-size: 14px;

}


.price {

    padding: 28px 0;

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

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

    margin: 25px 0;

}


.price small {

    display: block;

    color: var(--muted);

    margin-bottom: 5px;

}


.price strong {

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

    font-size: 42px;

}


.price span {

    color: var(--muted);

    font-size: 13px;

}


.custom-price strong {

    font-size: 38px;

    color: var(--cyan);

}


.plan-btn {

    width: 100%;

    padding: 15px;

    border-radius: 9px;

    text-align: center;

    display: block;

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

    color: var(--cyan);

    font-weight: 700;

    transition: .3s ease;

}


.plan-btn:hover {

    background: var(--cyan);

    color: #04111d;

}


.included-title {

    margin-top: 30px;

    margin-bottom: 18px;

    font-size: 13px;

    font-weight: 700;

}


.pricing-card ul {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.pricing-card li {

    color: var(--muted);

    font-size: 14px;

}


.pricing-card li i {

    color: var(--cyan);

    margin-right: 9px;

}


/* =========================================================
   COMPARISON
========================================================= */

.comparison-section {

    background: #071827;

}


.comparison-wrapper {

    max-width: 1100px;

    margin: auto;

    overflow-x: auto;

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

    border-radius: 18px;

}


table {

    width: 100%;

    min-width: 750px;

    border-collapse: collapse;

}


th,
td {

    padding: 21px 25px;

    text-align: center;

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

}


th {

    background: #102b44;

    color: var(--white);

    font-size: 14px;

}


td {

    color: var(--muted);

    font-size: 14px;

}


td:first-child,
th:first-child {

    text-align: left;

}


td:nth-child(3) {

    color: var(--cyan);

    font-weight: 700;

}


.highlight-column {

    color: var(--cyan);

}


/* =========================================================
   ROI
========================================================= */

.roi-section {

    max-width: 1300px;

    margin: 100px auto;

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

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(24,183,255,.12),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #0d2942,
            #081b2d
        );

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 60px;

    align-items: center;

}


.roi-content h2 {

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

    font-size: clamp(35px, 4vw, 52px);

    line-height: 1.15;

    margin: 18px 0;

}


.roi-content h2 span {

    color: var(--cyan);

}


.roi-content p {

    color: var(--muted);

    line-height: 1.8;

    max-width: 600px;

    margin-bottom: 30px;

}


.roi-stats {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


.roi-box {

    padding: 30px 22px;

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

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

    border-radius: 15px;

}


.roi-box strong {

    display: block;

    font-size: 30px;

    color: var(--cyan);

    margin-bottom: 8px;

}


.roi-box span {

    color: var(--muted);

    font-size: 13px;

}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {

    background: var(--bg);

}


.industry-grid {

    max-width: 1000px;

    margin: auto;

    display: grid;

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

    gap: 12px;

}


.industry-grid div {

    min-height: 130px;

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

    border-radius: 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 14px;

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

    transition: .3s ease;

}


.industry-grid div:hover {

    border-color: var(--cyan);

    transform: translateY(-6px);

}


.industry-grid i {

    color: var(--cyan);

    font-size: 22px;

}


.industry-grid span {

    font-size: 13px;

    color: var(--text);

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    background: #071827;

}


.faq-container {

    max-width: 850px;

    margin: auto;

}


details {

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

    padding: 24px 0;

}


summary {

    cursor: pointer;

    list-style: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-weight: 600;

    font-size: 16px;

}


summary::-webkit-details-marker {

    display: none;

}


summary i {

    color: var(--cyan);

    transition: .3s ease;

}


details[open] summary i {

    transform: rotate(45deg);

}


details p {

    color: var(--muted);

    line-height: 1.8;

    padding-top: 18px;

    max-width: 750px;

    font-size: 14px;

}


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

.final-cta {

    min-height: 550px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(24,183,255,.12),
            transparent 38%
        ),

        #061321;

}


.cta-content {

    max-width: 850px;

    position: relative;

    z-index: 2;

}


.cta-content h2 {

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

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.1;

    margin: 18px 0;

}


.cta-content h2 span {

    color: var(--cyan);

}


.cta-content p {

    color: var(--muted);

    max-width: 700px;

    margin: 0 auto 32px;

    line-height: 1.8;

}


.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;

}


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

footer {

    background: #030b14;

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

}


.footer-inner {

    max-width: 1300px;

    margin: auto;

    padding: 45px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.footer-inner h3 {

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

    color: var(--white);

}


.footer-inner p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 6px;

}


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

@media(max-width:1200px) {

    .nav-menu {

        gap: 20px;

    }

    .nav-container {

        padding: 0 25px;

    }

    .value-grid {

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

    }

    .industry-grid {

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

    }

}


@media(max-width:950px) {

    .nav-menu {

        display: none;

    }

    .pricing-grid {

        grid-template-columns: 1fr;

        max-width: 550px;

    }

    .roi-section {

        grid-template-columns: 1fr;

    }

}


@media(max-width:650px) {

    section {

        padding: 80px 20px;

    }

    .navbar {

        height: 75px;

    }

    .nav-container {

        padding: 0 18px;

    }

    .logo img {

        width: 70px;

    }

    .nav-btn {

        padding: 12px 18px;

        font-size: 13px;

    }

    .pricing-hero {

        min-height: 700px;

    }

    .pricing-hero h1 {

        font-size: 43px;

        letter-spacing: -1.5px;

    }

    .pricing-hero p {

        font-size: 15px;

    }

    .trust-line {

        gap: 20px;

        flex-wrap: wrap;

    }

    .trust-line strong {

        font-size: 21px;

    }

    .trust-line span {

        font-size: 11px;

    }

    .value-grid {

        grid-template-columns: 1fr;

    }

    .roi-section {

        margin: 50px 20px;

        padding: 50px 25px;

    }

    .roi-stats {

        grid-template-columns: 1fr 1fr;

    }

    .industry-grid {

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

    }

    .footer-inner {

        flex-direction: column;

        gap: 20px;

        text-align: center;

    }

}


@media(max-width:430px) {

    .nav-btn {

        display: none;

    }

    .pricing-hero h1 {

        font-size: 37px;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .primary-btn,
    .secondary-btn {

        justify-content: center;

        width: 100%;

    }

    .roi-stats {

        grid-template-columns: 1fr;

    }

}



/* ======================================== */


               /* Blog pages of css */

/* ============================================= */




/* =====================================================
   GROWTH HARBOUR BLOG
   Premium Editorial Design
===================================================== */


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

:root {

    --bg: #061321;

    --bg-soft: #081827;

    --card: #0c2135;

    --card-light: #102a42;

    --blue: #19a9ff;

    --blue-dark: #0879c4;

    --gold: #f5b82e;

    --white: #f7f9fc;

    --text: #c5d2df;

    --muted: #7f94a8;

    --border: rgba(120, 170, 210, 0.16);

    --shadow:
        0 25px 70px rgba(0, 0, 0, 0.28);

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--bg);

    color: var(--white);

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

    line-height: 1.7;

    overflow-x: hidden;

}


a {

    color: inherit;

    text-decoration: none;

}


img {

    max-width: 100%;

    display: block;

}


button,
input {

    font: inherit;

}


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

.blog-header {

    position: relative;

    z-index: 100;

    background: rgba(6, 19, 33, 0.94);

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

}


.navbar {

    max-width: 1450px;

    margin: auto;

    min-height: 90px;

    padding: 0 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.brand img {

    width: 105px;

    height: auto;

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-links a {

    position: relative;

    color: #e7edf4;

    font-size: 15px;

    transition: .3s ease;

}


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

    color: var(--blue);

}


.nav-links a.active::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -12px;

    width: 100%;

    height: 2px;

    background: var(--blue);

}


.nav-btn {

    padding: 13px 24px;

    border-radius: 30px;

    background: linear-gradient(
        135deg,
        #19a9ff,
        #0879ff
    );

    font-weight: 700;

    transition: .3s ease;

}


.nav-btn span {

    margin-left: 6px;

}


.nav-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 30px rgba(25, 169, 255, .25);

}


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

.blog-hero {

    min-height: 650px;

    position: relative;

    display: grid;

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

    align-items: center;

    padding: 80px 8%;

    overflow: hidden;

}


.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(25, 169, 255, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(25, 169, 255, .08) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 720px;

}


.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--blue);

    letter-spacing: 4px;

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 25px;

}


.dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow:
        0 0 15px var(--blue);

}


.blog-hero h1 {

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

    font-size: clamp(48px, 6vw, 82px);

    line-height: 1.05;

    letter-spacing: -3px;

    margin-bottom: 28px;

}


.blog-hero h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            #55c5ff,
            var(--gold)
        );

     -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.blog-hero p {

    max-width: 650px;

    color: var(--text);

    font-size: 18px;

    line-height: 1.9;

}


.hero-actions {

    display: flex;

    gap: 15px;

    margin-top: 38px;

}


.primary-btn,
.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 15px 25px;

    border-radius: 10px;

    font-weight: 700;

    transition: .3s ease;

}


.primary-btn {

    color: #03101c;

    background: var(--blue);

}


.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(25, 169, 255, .25);

}


.secondary-btn {

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

    color: var(--white);

    background: rgba(255,255,255,.03);

}


.secondary-btn:hover {

    border-color: var(--blue);

    color: var(--blue);

}


/* =====================================================
   HERO LOGO AREA
===================================================== */

.hero-logo-card {

    height: 460px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.logo-frame {

    width: 370px;

    height: 370px;

    border-radius: 45px;

    border: 1px solid rgba(25,169,255,.35);

    background:
        radial-gradient(
            circle at center,
            rgba(25,169,255,.18),
            rgba(12,33,53,.95) 62%
        );

    transform: rotate(-5deg);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 0 100px rgba(25,169,255,.12);

}


.logo-frame img {

    width: 270px;

    filter:
        drop-shadow(
            0 15px 30px rgba(0,0,0,.4)
        );

}


.logo-glow {

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: var(--blue);

    filter: blur(130px);

    opacity: .13;

}


.floating-stat {

    position: absolute;

    z-index: 4;

    padding: 20px 25px;

    border-radius: 22px;

    background: rgba(12,33,53,.92);

    border: 1px solid var(--border);

    backdrop-filter: blur(15px);

    box-shadow: var(--shadow);

}


.floating-stat strong {

    display: block;

    color: var(--blue);

    font-family: "Poppins", sans-serif;

    font-size: 30px;

}


.floating-stat span {

    color: var(--text);

    font-size: 13px;

}


.stat-one {

    top: 40px;

    right: 0;

}


.stat-two {

    bottom: 35px;

    left: 10px;

}


.stat-two strong {

    color: var(--gold);

}


/* =====================================================
   TOPIC BAR
===================================================== */

.topic-bar {

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

    background: #081827;

}


.topic-container {

    max-width: 1300px;

    margin: auto;

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 35px;

}


.topic-label {

    color: var(--blue);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;

    white-space: nowrap;

}


.topics {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}


.topics a {

    padding: 8px 15px;

    border: 1px solid var(--border);

    border-radius: 30px;

    color: var(--text);

    font-size: 13px;

    transition: .3s ease;

}


.topics a:hover {

    border-color: var(--blue);

    color: var(--blue);

}


/* =====================================================
   GENERAL SECTION
===================================================== */

.featured-section,
.articles-section {

    max-width: 1300px;

    margin: auto;

    padding: 110px 25px;

}


.section-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;

}


.section-heading.center {

    display: block;

    text-align: center;

}


.section-label {

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

}


.section-heading h2 {

    max-width: 650px;

    margin-top: 15px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(35px, 4vw, 55px);

    line-height: 1.15;

}


.section-heading h2 span {

    color: var(--blue);

}


.section-heading p {

    max-width: 430px;

    color: var(--muted);

}


/* =====================================================
   FEATURED ARTICLE
===================================================== */

.featured-card {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 540px;

    border: 1px solid var(--border);

    border-radius: 30px;

    overflow: hidden;

    background: var(--card);

    box-shadow: var(--shadow);

}


.featured-visual {

    position: relative;

    overflow: hidden;

    min-height: 500px;

    background:
        radial-gradient(
            circle at center,
            #0d5e91,
            #071522 65%
        );

}


.visual-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(255,255,255,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.15) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    transform: rotate(-8deg) scale(1.3);

}


.visual-circle {

    position: absolute;

    width: 340px;

    height: 340px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.2);

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    box-shadow:
        0 0 100px rgba(25,169,255,.25);

}


.visual-content {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    text-align: center;

}


.visual-content span {

    color: var(--gold);

    font-size: 12px;

    letter-spacing: 5px;

}


.visual-content strong {

    display: block;

    margin: 15px 0;

    font-family: "Poppins", sans-serif;

    font-size: 65px;

    line-height: .9;

}


.visual-content small {

    color: #b9d7ea;

    letter-spacing: 3px;

}


.featured-info {

    padding: 65px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.article-meta {

    display: flex;

    gap: 10px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.featured-info h3 {

    font-family: "Poppins", sans-serif;

    font-size: 38px;

    line-height: 1.2;

    margin: 25px 0;

}


.featured-info > p {

    color: var(--text);

}


.article-author {

    margin-top: 40px;

    padding-top: 25px;

    border-top: 1px solid var(--border);

    display: flex;

    align-items: center;

    gap: 15px;

}


.author-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: linear-gradient(
        135deg,
        var(--blue),
        var(--gold)
    );

    color: #061321;

    font-weight: 800;

}


.article-author strong {

    display: block;

}


.article-author span {

    display: block;

    color: var(--muted);

    font-size: 12px;

}


.read-link {

    margin-left: auto;

    color: var(--blue);

    font-weight: 700;

}


/* =====================================================
   ARTICLE GRID
===================================================== */

.articles-section {

    padding-top: 40px;

}


.article-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

}


.article-card {

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: 20px;

    background: var(--card);

    transition: .35s ease;

}


.article-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(25,169,255,.4);

    box-shadow:
        0 25px 60px rgba(0,0,0,.25);

}


.article-image {

    height: 225px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}


.article-image span {

    position: absolute;

    top: 18px;

    left: 18px;

    z-index: 2;

    padding: 6px 11px;

    border-radius: 20px;

    background: rgba(0,0,0,.35);

    border: 1px solid rgba(255,255,255,.15);

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 800;

}


.image-word {

    font-family: "Poppins", sans-serif;

    font-size: 48px;

    font-weight: 800;

    opacity: .9;

    transform: rotate(-8deg);

}


/* Different Visuals */

.seo-image {

    background:
        radial-gradient(
            circle,
            #0879c4,
            #061321 70%
        );

}


.marketing-image {

    background:
        linear-gradient(
            135deg,
            #0c3554,
            #082033,
            #18364a
        );

}


.branding-image {

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(245,184,46,.55),
            transparent 30%
        ),
        #101e2d;

}


.web-image {

    background:
        linear-gradient(
            135deg,
            #0a2e49,
            #061321
        );

}


.motion-image {

    background:
        radial-gradient(
            circle at center,
            #0b75b4,
            #061321 70%
        );

}


.content-image {

    background:
        linear-gradient(
            135deg,
            #12324a,
            #071522
        );

}


.article-body {

    padding: 27px;

}


.card-meta {

    color: var(--blue);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.article-body h3 {

    margin: 13px 0;

    font-family: "Poppins", sans-serif;

    font-size: 21px;

    line-height: 1.35;

}


.article-body p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;

}


.article-body a {

    display: inline-block;

    margin-top: 20px;

    color: var(--blue);

    font-size: 14px;

    font-weight: 700;

}


/* =====================================================
   GROWTH PLAYBOOK
===================================================== */

.playbook-section {

    max-width: 1400px;

    margin: 80px auto;

    padding: 90px 8%;

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 80px;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #0b2238,
            #061321
        );

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

}


.playbook-content h2 {

    margin: 18px 0 25px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(38px, 4vw, 55px);

    line-height: 1.15;

}


.playbook-content h2 span {

    color: var(--gold);

}


.playbook-content p {

    color: var(--text);

    max-width: 550px;

    margin-bottom: 18px;

}


.playbook-content .primary-btn {

    margin-top: 20px;

}


.playbook-visual {

    min-height: 420px;

    position: relative;

}


.playbook-card {

    position: absolute;

    width: 220px;

    padding: 25px;

    border: 1px solid var(--border);

    border-radius: 20px;

    background: rgba(12,33,53,.85);

    backdrop-filter: blur(12px);

    box-shadow: var(--shadow);

}


.playbook-card span {

    color: var(--blue);

    font-size: 12px;

}


.playbook-card strong {

    display: block;

    margin: 10px 0;

    font-family: "Poppins", sans-serif;

    font-size: 22px;

}


.playbook-card small {

    color: var(--muted);

}


.card-a {

    top: 20px;

    left: 20px;

}


.card-b {

    top: 100px;

    right: 20px;

}


.card-c {

    bottom: 80px;

    left: 70px;

}


.card-d {

    bottom: 10px;

    right: 80px;

    border-color:
        rgba(245,184,46,.3);

}


/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter-section {

    max-width: 1300px;

    margin: 100px auto;

    padding: 0 25px;

}


.newsletter-box {

    position: relative;

    overflow: hidden;

    padding: 60px;

    border: 1px solid rgba(25,169,255,.25);

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(25,169,255,.12),
            transparent 35%
        ),
        var(--card);

    display: grid;

    grid-template-columns: 80px 1fr 420px;

    align-items: center;

    gap: 30px;

}


.newsletter-icon {

    width: 65px;

    height: 65px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--gold)
        );

    color: #061321;

    font-family: "Poppins", sans-serif;

    font-weight: 800;

}


.newsletter-content > span {

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.newsletter-content h2 {

    font-family: "Poppins", sans-serif;

    font-size: 30px;

    margin: 5px 0;

}


.newsletter-content h2 strong {

    color: var(--gold);

}


.newsletter-content p {

    color: var(--muted);

    font-size: 13px;

}


.newsletter-form {

    display: flex;

    padding: 6px;

    border-radius: 12px;

    background: #061321;

    border: 1px solid var(--border);

}


.newsletter-form input {

    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: white;

    padding: 12px;

}


.newsletter-form button {

    border: none;

    padding: 0 20px;

    border-radius: 8px;

    background: var(--blue);

    color: #061321;

    font-weight: 800;

    cursor: pointer;

}


/* =====================================================
   FINAL CTA
===================================================== */

.blog-cta {

    max-width: 900px;

    margin: 130px auto;

    text-align: center;

    padding: 0 25px;

}


.cta-line {

    width: 70px;

    height: 3px;

    margin: 0 auto 30px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--gold)
        );

}


.blog-cta > span {

    color: var(--blue);

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 800;

}


.blog-cta h2 {

    margin: 20px 0;

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.1;

}


.blog-cta h2 strong {

    color: var(--gold);

}


.blog-cta p {

    color: var(--muted);

    max-width: 680px;

    margin: auto;

}


.cta-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

    padding: 17px 30px;

    border-radius: 10px;

    background: var(--blue);

    color: #061321;

    font-weight: 800;

    transition: .3s ease;

}


.cta-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 40px rgba(25,169,255,.25);

}


/* =====================================================
   FOOTER
===================================================== */

.blog-footer {

    margin-top: 100px;

    padding: 70px 7% 30px;

    border-top: 1px solid var(--border);

    background: #040e18;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

}


.footer-brand img {

    width: 160px;

}


.footer-brand p {

    margin-top: 20px;

    max-width: 350px;

    color: var(--muted);

}


.footer-links {

    display: flex;

    justify-content: flex-end;

    align-items: flex-start;

    gap: 25px;

    flex-wrap: wrap;

}


.footer-links a {

    color: var(--text);

    font-size: 14px;

}


.footer-links a:hover {

    color: var(--blue);

}


.copyright {

    grid-column: 1 / -1;

    padding-top: 25px;

    border-top: 1px solid var(--border);

    color: var(--muted);

    font-size: 12px;

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0,0,0,0);

    white-space: nowrap;

    border: 0;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1150px) {

    .nav-links {

        gap: 17px;

    }

    .nav-btn {

        display: none;

    }

    .blog-hero {

        padding: 70px 5%;

    }

    .featured-info {

        padding: 45px;

    }

}


@media (max-width: 900px) {

    .navbar {

        padding: 0 25px;

    }

    .nav-links {

        display: none;

    }


    .blog-hero {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .blog-hero p {

        margin: auto;

    }


    .hero-actions {

        justify-content: center;

    }


    .hero-logo-card {

        margin-top: 40px;

    }


    .featured-card {

        grid-template-columns: 1fr;

    }


    .article-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .playbook-section {

        grid-template-columns: 1fr;

    }


    .newsletter-box {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .newsletter-icon {

        margin: auto;

    }


    .newsletter-form {

        max-width: 500px;

        width: 100%;

        margin: auto;

    }

}


@media (max-width: 600px) {

    .blog-hero {

        min-height: auto;

        padding:
            65px 20px
            30px;

    }


    .blog-hero h1 {

        font-size: 46px;

        letter-spacing: -2px;

    }


    .hero-actions {

        flex-direction: column;

    }


    .hero-actions a {

        width: 100%;

    }


    .logo-frame {

        width: 280px;

        height: 280px;

    }


    .logo-frame img {

        width: 210px;

    }


    .floating-stat {

        padding: 13px 16px;

    }


    .stat-one {

        right: 0;

    }


    .stat-two {

        left: 0;

    }


    .topic-container {

        flex-direction: column;

        align-items: flex-start;

    }


    .featured-section,
    .articles-section {

        padding:
            75px 18px;

    }


    .section-heading {

        display: block;

    }


    .section-heading p {

        margin-top: 20px;

    }


    .featured-info {

        padding: 30px 25px;

    }


    .featured-info h3 {

        font-size: 28px;

    }


    .article-grid {

        grid-template-columns: 1fr;

    }


    .playbook-section {

        margin: 40px 0;

        padding: 70px 25px;

    }


    .playbook-visual {

        min-height: 500px;

    }


    .playbook-card {

        width: 180px;

    }


    .card-a {

        left: 0;

    }


    .card-b {

        right: 0;

    }


    .card-c {

        left: 25px;

    }


    .card-d {

        right: 20px;

    }


    .newsletter-section {

        margin: 70px auto;

    }


    .newsletter-box {

        padding: 35px 22px;

    }


    .newsletter-form {

        flex-direction: column;

        gap: 8px;

        background: transparent;

        border: none;

    }


    .newsletter-form input,
    .newsletter-form button {

        width: 100%;

        min-height: 48px;

        border-radius: 8px;

    }


    .blog-footer {

        grid-template-columns: 1fr;

    }


    .footer-links {

        justify-content: flex-start;

    }


    .copyright {

        grid-column: auto;

    }

}



/* ================================= */

           /* careers pages of css            */

/* ==================================== */



/* =====================================================
   GROWTH HARBOUR
   CAREERS PAGE
===================================================== */

:root {

    --navy: #061321;
    --navy-2: #081a2b;
    --navy-3: #0b2238;

    --blue: #149fe8;
    --blue-light: #45c5ff;
    --blue-soft: rgba(20,159,232,0.12);

    --gold: #f5b82e;

    --white: #ffffff;
    --text: #d7e3ed;
    --muted: #8da3b6;
    --dim: #536b7e;

    --line: rgba(255,255,255,0.09);

    --radius: 22px;

    --container: 1280px;

}


/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--navy);

    color: var(--white);

    font-family: "Inter", sans-serif;

    line-height: 1.7;

    overflow-x: hidden;

}


a {
    text-decoration: none;
    color: inherit;
}


img {
    display: block;
    max-width: 100%;
}


button {
    font-family: inherit;
}


::selection {
    background: var(--blue);
    color: white;
}


/* =====================================================
   NAVBAR
===================================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(6,19,33,0.90);

    backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--line);

}


.navbar {

    width: min(94%, 1450px);

    min-height: 88px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.brand {

    display: flex;

    align-items: center;

    gap: 11px;

    font-family: "Poppins", sans-serif;

    font-weight: 700;

    font-size: 18px;

    white-space: nowrap;

}


.brand img {

    width: 46px;

    height: 46px;

    object-fit: contain;

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 27px;

}


.nav-links a {

    color: #c9d7e3;

    font-size: 14px;

    font-weight: 500;

    transition: 0.3s ease;

    position: relative;

}


.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -9px;

    width: 0;

    height: 2px;

    background: var(--blue);

    transition: 0.3s ease;

}


.nav-links a:hover,
.nav-links a.active {

    color: var(--blue-light);

}


.nav-links a:hover::after,
.nav-links a.active::after {

    width: 100%;

}


.nav-cta {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px 20px;

    border: 1px solid rgba(20,159,232,0.35);

    border-radius: 50px;

    background: rgba(20,159,232,0.08);

    color: var(--blue-light);

    font-size: 13px;

    font-weight: 700;

    transition: 0.3s ease;

}


.nav-cta:hover {

    background: var(--blue);

    color: white;

    transform: translateY(-2px);

}


.menu-btn {

    display: none;

    background: none;

    border: none;

    color: white;

    font-size: 23px;

}


/* =====================================================
   COMMON
===================================================== */

section {
    position: relative;
}


.section-label {

    display: block;

    color: var(--blue-light);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 18px;

}


.btn-primary,
.btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 14px 22px;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 700;

    transition: 0.3s ease;

}


.btn-primary {

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #0877c9
        );

    color: white;

    box-shadow:
        0 15px 35px rgba(20,159,232,0.20);

}


.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(20,159,232,0.35);

}


.btn-outline {

    border: 1px solid var(--line);

    background: rgba(255,255,255,0.025);

    color: var(--text);

}


.btn-outline:hover {

    border-color: rgba(20,159,232,0.45);

    color: var(--blue-light);

    transform: translateY(-4px);

}


/* =====================================================
   HERO
===================================================== */

.career-hero {

    width: min(94%, var(--container));

    min-height: 750px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 0.85fr;

    align-items: center;

    gap: 80px;

    padding: 100px 0;

    overflow: hidden;

}


.hero-grid-lines {

    position: absolute;

    inset: 0;

    opacity: 0.25;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 85%
        );

}


.hero-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}


.orb-one {

    width: 350px;

    height: 350px;

    background: rgba(20,159,232,0.10);

    left: -200px;

    top: 100px;

}


.orb-two {

    width: 300px;

    height: 300px;

    background: rgba(245,184,46,0.05);

    right: -150px;

    bottom: 20px;

}


.hero-content {

    position: relative;

    z-index: 2;

}


.hero-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 13px;

    border: 1px solid rgba(20,159,232,0.22);

    background: rgba(20,159,232,0.06);

    border-radius: 50px;

    color: #9bdcff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 24px;

}


.hero-kicker span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow: 0 0 14px var(--blue);

}


.hero-content h1 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(50px, 6vw, 82px);

    line-height: 1.02;

    letter-spacing: -3px;

    max-width: 750px;

}


.hero-content h1 em {

    display: block;

    font-style: normal;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            var(--blue),
            var(--gold)
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}


.hero-text {

    max-width: 660px;

    color: var(--text);

    font-size: 17px;

    margin-top: 26px;

}


.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

}


.hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 28px;

    color: var(--muted);

    font-size: 11px;

}


.hero-meta i {

    color: var(--blue);

    margin-right: 5px;

}


/* =====================================================
   HERO VISUAL
===================================================== */

.hero-visual {

    min-height: 520px;

    position: relative;

    display: grid;

    place-items: center;

}


.hero-main-card {
    width: 420px;
    height: 407px;
    padding: 27px;
    border-radius: 30px;
    background: linear-gradient(
            145deg,
            #102c45,
            #071522
        );
    border: 1px solid rgba(20,159,232,0.25);
    box-shadow: 0 40px 100px rgba(0,0,0,0.45);
    transform: rotate(4deg);
    position: relative;
    overflow: hidden;
}


.hero-main-card::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background: rgba(20,159,232,0.15);

    filter: blur(80px);

    left: 50%;

    top: 40%;

    transform: translate(-50%, -50%);

}


.card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #7891a5;

    font-size: 10px;

    letter-spacing: 2px;

    position: relative;

    z-index: 2;

}


.live-status {

    color: #9de0b6;

    display: flex;

    align-items: center;

    gap: 6px;

}


.live-status i {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #3bd278;

    box-shadow: 0 0 10px #3bd278;

}


.hero-card-content {

    position: relative;

    z-index: 2;

    margin-top: 110px;

}


.card-small-text {

    color: var(--blue-light);

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 700;

}


.hero-card-content h2 {

    font-family: "Poppins", sans-serif;

    font-size: 38px;

    line-height: 1.1;

    margin-top: 14px;

}


.hero-card-content h2 strong {

    display: block;

    color: var(--blue-light);

}


.hero-card-content p {

    color: var(--muted);

    font-size: 13px;

    max-width: 290px;

    margin-top: 15px;

}


.card-footer {

    position: absolute;

    left: 27px;

    right: 27px;

    bottom: 25px;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    border-top: 1px solid var(--line);

    padding-top: 20px;

    z-index: 2;

}


.card-footer div {

    text-align: center;

}


.card-footer strong {

    display: block;

    color: var(--blue-light);

    font-size: 19px;

}


.card-footer span {

    color: #637c90;

    font-size: 9px;

}


.floating-tag {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 16px;

    border-radius: 13px;

    background: rgba(10,31,49,0.92);

    border: 1px solid var(--line);

    box-shadow: 0 20px 50px rgba(0,0,0,0.3);

    backdrop-filter: blur(15px);

    color: var(--text);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    z-index: 5;

}


.floating-tag i {

    color: var(--blue);

    font-size: 17px;

}


.tag-one {

    left: 0;

    top: 100px;

}


.tag-two {

    right: 0;

    bottom: 100px;

}


.floating-number {

    position: absolute;

    right: 25px;

    top: 25px;

    text-align: right;

}


.floating-number strong {

    display: block;

    color: var(--gold);

    font-family: "Poppins", sans-serif;

    font-size: 28px;

}


.floating-number span {

    color: var(--dim);

    font-size: 8px;

    letter-spacing: 2px;

}


/* =====================================================
   NOT JUST A JOB
===================================================== */

.not-job-section {

    padding: 130px max(5%, calc((100vw - 1200px) / 2));

    background: var(--navy-2);

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

}


.not-job-intro h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.05;

    letter-spacing: -2px;

}


.not-job-intro h2 span {

    display: block;

    color: var(--blue-light);

}


.not-job-content {

    padding-top: 30px;

}


.not-job-content p {

    color: var(--muted);

    font-size: 15px;

}


.not-job-content .large-copy {

    color: var(--text);

    font-size: 22px;

    line-height: 1.5;

    margin-bottom: 25px;

}


.growth-pillars {

    grid-column: 1 / -1;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 1px;

    background: var(--line);

    margin-top: 25px;

    border: 1px solid var(--line);

}


.growth-pillars article {

    padding: 35px;

    background: var(--navy-2);

    display: grid;

    grid-template-columns: 35px 1fr;

    gap: 20px;

}


.growth-pillars article > span {

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

}


.growth-pillars i {

    color: var(--blue);

    font-size: 21px;

}


.growth-pillars h3 {

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    margin-top: 14px;

}


.growth-pillars p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 7px;

}


/* =====================================================
   JOURNEY
===================================================== */

.journey-section {

    width: min(1200px,90%);

    margin: auto;

    padding: 140px 0;

}


.journey-heading {

    max-width: 650px;

}


.journey-heading h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,5vw,64px);

    line-height: 1.05;

}


.journey-heading h2 span {

    color: var(--blue-light);

}


.journey-heading p {

    color: var(--muted);

    margin-top: 18px;

}


.journey-track {

    position: relative;

    margin-top: 90px;

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 25px;

}


.journey-line {

    position: absolute;

    left: 0;

    right: 0;

    top: 28px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            rgba(20,159,232,0.1)
        );

}


.journey-step {

    position: relative;

    z-index: 2;

}


.journey-number {

    width: 56px;

    height: 56px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--navy);

    border: 1px solid rgba(20,159,232,0.4);

    color: var(--blue-light);

    font-size: 11px;

    font-weight: 800;

}


.journey-copy {

    padding-top: 30px;

    padding-right: 20px;

}


.journey-copy > span {

    color: var(--gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.journey-copy h3 {

    font-family: "Poppins", sans-serif;

    font-size: 25px;

    margin-top: 7px;

}


.journey-copy p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 8px;

}


/* =====================================================
   MINDSET
===================================================== */

.mindset-section {

    padding: 130px 5%;

    background:
        linear-gradient(
            120deg,
            #071624,
            #0b2238
        );

    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 90px;

}


.mindset-left {

    max-width: 500px;

}


.mindset-left h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,4.5vw,60px);

    line-height: 1.05;

}


.mindset-left h2 span {

    color: var(--blue-light);

}


.mindset-left > p {

    color: var(--muted);

    margin-top: 22px;

}


.mindset-note {

    margin-top: 45px;

    border-left: 2px solid var(--gold);

    padding-left: 20px;

}


.mindset-note i {

    color: var(--gold);

    font-size: 14px;

}


.mindset-note p {

    color: var(--text);

    font-family: "Poppins", sans-serif;

    margin-top: 8px;

}


.mindset-grid {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 1px;

    background: var(--line);

}


.mindset-item {

    background: #0a1d30;

    padding: 30px;

    min-height: 210px;

    position: relative;

    transition: 0.3s ease;

}


.mindset-item:hover {

    background: #0d263e;

}


.mindset-item > span {

    position: absolute;

    top: 22px;

    right: 25px;

    color: #405a70;

    font-size: 10px;

}


.mindset-item i {

    color: var(--blue);

    font-size: 20px;

}


.mindset-item h3 {

    font-family: "Poppins", sans-serif;

    font-size: 19px;

    margin-top: 20px;

}


.mindset-item p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 5px;

}


/* =====================================================
   DEPARTMENTS
===================================================== */

.departments-section {

    width: min(1200px,90%);

    margin: auto;

    padding: 140px 0;

}


.departments-top {

    display: grid;

    grid-template-columns: 1fr 0.65fr;

    gap: 80px;

    align-items: end;

}


.departments-top h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,5vw,65px);

    line-height: 1.05;

}


.departments-top h2 span {

    color: var(--blue-light);

}


.departments-top > p {

    color: var(--muted);

    font-size: 14px;

}


.department-list {

    margin-top: 65px;

    border-top: 1px solid var(--line);

}


.department-row {

    min-height: 125px;

    display: grid;

    grid-template-columns: 50px 70px 1fr 35px;

    align-items: center;

    gap: 20px;

    border-bottom: 1px solid var(--line);

    transition: 0.35s ease;

}


.department-row:hover {

    padding-left: 15px;

    background: rgba(20,159,232,0.025);

}


.department-number {

    color: #4b6377;

    font-size: 11px;

}


.department-icon {

    width: 52px;

    height: 52px;

    border: 1px solid var(--line);

    border-radius: 13px;

    display: grid;

    place-items: center;

    color: var(--blue);

}


.department-info > span {

    color: var(--blue-light);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.department-info h3 {

    font-family: "Poppins", sans-serif;

    font-size: 23px;

    margin-top: 3px;

}


.department-info p {

    color: var(--muted);

    font-size: 12px;

}


.department-arrow {

    color: #62798c;

    transition: 0.3s ease;

}


.department-row:hover .department-arrow {

    color: var(--blue-light);

    transform: translate(4px,-4px);

}


/* =====================================================
   POSITIONS
===================================================== */

.positions-section {

    padding: 130px 5%;

    background: var(--navy-2);

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

}


.positions-heading {

    width: min(1100px,100%);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 0.55fr;

    gap: 70px;

    align-items: end;

}


.positions-heading h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,5vw,62px);

    line-height: 1.05;

}


.positions-heading h2 span {

    color: var(--blue-light);

}


.positions-heading > p {

    color: var(--muted);

    font-size: 13px;

}


.jobs {

    width: min(1100px,100%);

    margin: 65px auto 0;

}


.job-row {

    min-height: 155px;

    padding: 25px 0;

    display: grid;

    grid-template-columns: 55px 1.4fr 1fr 100px;

    align-items: center;

    gap: 25px;

    border-top: 1px solid var(--line);

    position: relative;

}


.job-row:last-child {

    border-bottom: 1px solid var(--line);

}


.job-index {

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

}


.job-title > span {

    color: var(--blue-light);

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 800;

}


.job-title h3 {

    font-family: "Poppins", sans-serif;

    font-size: 19px;

    margin-top: 4px;

}


.job-title p {

    color: var(--muted);

    font-size: 12px;

    max-width: 450px;

}


.job-details {

    display: flex;

    flex-direction: column;

    gap: 7px;

    color: var(--muted);

    font-size: 10px;

}


.job-details i {

    width: 16px;

    color: var(--blue);

}


.job-apply {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 13px;

    border: 1px solid var(--line);

    border-radius: 9px;

    color: var(--blue-light);

    font-size: 11px;

    font-weight: 700;

    transition: 0.3s ease;

}


.job-apply:hover {

    background: var(--blue);

    color: white;

    border-color: var(--blue);

}


.featured-job {

    padding-left: 18px;

    padding-right: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(20,159,232,0.08),
            transparent
        );

    border: 1px solid rgba(20,159,232,0.22);

    margin: 15px 0;

}


.featured-label {

    position: absolute;

    right: 18px;

    top: 0;

    background: var(--gold);

    color: #111;

    padding: 4px 9px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    border-radius: 0 0 6px 6px;

}


/* =====================================================
   OPEN APPLICATION
===================================================== */

.open-application {

    width: min(1150px,90%);

    min-height: 500px;

    margin: 130px auto;

    display: grid;

    place-items: center;

    text-align: center;

    overflow: hidden;

    border-radius: 30px;

    border: 1px solid rgba(20,159,232,0.25);

    background:
        radial-gradient(
            circle at center,
            rgba(20,159,232,0.16),
            transparent 52%
        ),
        #0a1f32;

}


.application-pattern {

    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    opacity: 0.2;

}


.application-content {

    max-width: 750px;

    padding: 70px 30px;

    position: relative;

    z-index: 2;

}


.application-content h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,5vw,65px);

    line-height: 1.05;

}


.application-content h2 span {

    color: var(--blue-light);

}


.application-content > p {

    color: var(--muted);

    margin: 20px auto 30px;

    max-width: 620px;

}


.application-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}


.application-content small {

    display: block;

    color: #5c7386;

    font-size: 10px;

    margin-top: 20px;

}


/* =====================================================
   CULTURE
===================================================== */

.culture-section {

    width: min(1200px,90%);

    margin: auto;

    padding: 20px 0 140px;

}


.culture-heading h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,5vw,65px);

    line-height: 1.05;

}


.culture-heading h2 span {

    color: var(--blue-light);

}


.culture-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 65px;

}


.culture-feature {

    min-height: 420px;

    padding: 45px;

    background:
        linear-gradient(
            145deg,
            #0d2a43,
            #071827
        );

    border: 1px solid var(--line);

    border-radius: 25px;

    position: relative;

    overflow: hidden;

}


.culture-feature::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: rgba(20,159,232,0.12);

    filter: blur(70px);

    right: -80px;

    bottom: -80px;

}


.culture-number {

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

}


.culture-feature > i {

    display: block;

    color: var(--blue);

    font-size: 28px;

    margin-top: 130px;

}


.culture-feature h3 {

    font-family: "Poppins", sans-serif;

    font-size: 27px;

    margin-top: 18px;

}


.culture-feature p {

    max-width: 450px;

    color: var(--muted);

    font-size: 13px;

    margin-top: 8px;

}


.culture-stack {

    display: grid;

    gap: 1px;

    background: var(--line);

}


.culture-stack article {

    background: var(--navy-2);

    padding: 28px;

    display: grid;

    grid-template-columns: 40px 1fr;

    gap: 20px;

    align-items: center;

}


.culture-stack article > span {

    color: var(--gold);

    font-size: 10px;

    font-weight: 800;

}


.culture-stack h3 {

    font-family: "Poppins", sans-serif;

    font-size: 18px;

}


.culture-stack p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 4px;

}


/* =====================================================
   FRESHERS
===================================================== */

.freshers-section {

    padding: 100px 8%;

    background: #081b2d;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

    display: grid;

    grid-template-columns: 80px 1fr 0.8fr;

    gap: 50px;

    align-items: center;

}


.freshers-number {

    color: var(--gold);

    font-family: "Poppins", sans-serif;

    font-size: 40px;

    font-weight: 800;

}


.freshers-content {

    max-width: 650px;

}


.freshers-content h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(38px,4vw,57px);

    line-height: 1.05;

}


.freshers-content h2 span {

    color: var(--blue-light);

}


.freshers-content > p {

    color: var(--muted);

    margin-top: 20px;

    font-size: 14px;

}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--blue-light);

    font-weight: 700;

    font-size: 12px;

    margin-top: 25px;

}


.text-link i {

    transition: 0.3s ease;

}


.text-link:hover i {

    transform: translateX(5px);

}


.internship-list {

    border-left: 1px solid var(--line);

    padding-left: 35px;

    display: grid;

    gap: 13px;

}


.internship-list div {

    color: var(--text);

    font-size: 12px;

}


.internship-list i {

    color: var(--blue);

    width: 24px;

}


/* =====================================================
   HIRING
===================================================== */

.hiring-section {

    width: min(1200px,90%);

    margin: auto;

    padding: 140px 0;

}


.hiring-heading {

    max-width: 650px;

}


.hiring-heading h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,5vw,64px);

    line-height: 1.05;

}


.hiring-heading h2 span {

    color: var(--blue-light);

}


.hiring-heading p {

    color: var(--muted);

    margin-top: 18px;

}


.hiring-steps {

    margin-top: 70px;

    display: grid;

    grid-template-columns: repeat(5,1fr);

    border-top: 1px solid var(--line);

}


.hiring-steps article {

    min-height: 230px;

    padding: 30px 25px;

    border-right: 1px solid var(--line);

    position: relative;

}


.hiring-steps article:last-child {

    border-right: none;

}


.hiring-steps strong {

    color: var(--gold);

    font-size: 11px;

}


.hiring-steps h3 {

    font-family: "Poppins", sans-serif;

    font-size: 20px;

    margin-top: 55px;

}


.hiring-steps p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 5px;

}


/* =====================================================
   FAQ
===================================================== */

.faq-section {

    padding: 120px 5%;

    background: var(--navy-2);

    border-top: 1px solid var(--line);

}


.faq-heading {

    width: min(800px,100%);

    margin: auto;

}


.faq-heading h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px,5vw,60px);

    line-height: 1.05;

}


.faq-heading h2 span {

    color: var(--blue-light);

}


.faq-list {

    width: min(800px,100%);

    margin: 65px auto 0;

}


details {

    border-top: 1px solid var(--line);

}


details:last-child {

    border-bottom: 1px solid var(--line);

}


summary {

    list-style: none;

    cursor: pointer;

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 600;

}


summary::-webkit-details-marker {

    display: none;

}


summary i {

    color: var(--blue);

    transition: 0.3s ease;

}


details[open] summary i {

    transform: rotate(45deg);

}


details p {

    color: var(--muted);

    font-size: 13px;

    padding: 0 40px 25px 0;

}


/* =====================================================
   FINAL CTA
===================================================== */

.final-career-cta {

    min-height: 620px;

    display: grid;

    place-items: center;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(20,159,232,0.15),
            transparent 45%
        ),
        var(--navy);

}


.final-grid {

    position: absolute;

    inset: 0;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

}


.final-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding: 50px 20px;

}


.final-content h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(45px,6vw,78px);

    line-height: 1.02;

    letter-spacing: -3px;

}


.final-content h2 span {

    display: block;

    color: var(--blue-light);

}


.final-content > p {

    max-width: 600px;

    margin: 22px auto 30px;

    color: var(--muted);

}


.final-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}


/* =====================================================
   FOOTER
===================================================== */

.site-footer {

    background: #040d16;

    border-top: 1px solid var(--line);

    padding: 75px 5% 25px;

}


.footer-main {

    width: min(1200px,100%);

    margin: auto;

    display: grid;

    grid-template-columns: 2fr repeat(3,1fr);

    gap: 60px;

}


.footer-brand p {

    max-width: 400px;

    color: var(--muted);

    font-size: 12px;

    margin-top: 15px;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.footer-column h3 {

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    margin-bottom: 7px;

}


.footer-column a {

    color: var(--muted);

    font-size: 12px;

    transition: 0.3s ease;

}


.footer-column a:hover {

    color: var(--blue-light);

    transform: translateX(3px);

}


.footer-bottom {

    width: min(1200px,100%);

    margin: 55px auto 0;

    padding-top: 20px;

    border-top: 1px solid var(--line);

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #506679;

    font-size: 10px;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1150px) {

    .nav-links {
        gap: 16px;
    }

    .career-hero {
        gap: 40px;
    }

}


@media (max-width: 950px) {

    .nav-links,
    .nav-cta {
        display: none;
    }

    .menu-btn {
        display: block;
    }


    .career-hero {

        grid-template-columns: 1fr;

        text-align: center;

        padding-top: 80px;

    }


    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-actions,
    .hero-meta {
        justify-content: center;
    }


    .hero-visual {
        margin-top: 30px;
    }


    .not-job-section {
        grid-template-columns: 1fr;
    }


    .not-job-content {
        padding-top: 0;
    }


    .growth-pillars {
        grid-column: auto;
    }


    .journey-track {
        grid-template-columns: repeat(2,1fr);
    }


    .journey-line {
        display: none;
    }


    .mindset-section {
        grid-template-columns: 1fr;
    }


    .departments-top {
        grid-template-columns: 1fr;
        gap: 25px;
    }


    .positions-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .job-row {
        grid-template-columns: 45px 1fr;
    }


    .job-details {
        grid-column: 2;
    }


    .job-apply {
        grid-column: 2;
        width: max-content;
    }


    .freshers-section {
        grid-template-columns: 60px 1fr;
    }


    .internship-list {
        grid-column: 2;
    }


    .hiring-steps {
        grid-template-columns: repeat(3,1fr);
    }


    .hiring-steps article:nth-child(3) {
        border-right: none;
    }


    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 650px) {

    .navbar {
        min-height: 75px;
    }


    .brand span {
        display: none;
    }


    .career-hero {
        width: 90%;
        padding: 65px 0;
    }


    .hero-content h1 {
        font-size: 47px;
        letter-spacing: -2px;
    }


    .hero-text {
        font-size: 14px;
    }


    .hero-meta {
        flex-direction: column;
        gap: 8px;
    }


    .hero-main-card {
        width: 285px;
        height: 380px;
    }


    .hero-card-content {
        margin-top: 70px;
    }


    .hero-card-content h2 {
        font-size: 27px;
    }


    .tag-one {
        left: -5px;
        top: 45px;
    }


    .tag-two {
        right: -5px;
        bottom: 45px;
    }


    .floating-number {
        right: 5px;
    }


    .not-job-section,
    .journey-section,
    .mindset-section,
    .departments-section,
    .hiring-section,
    .culture-section {
        padding-top: 85px;
        padding-bottom: 85px;
    }


    .growth-pillars {
        grid-template-columns: 1fr;
    }


    .growth-pillars article {
        border-bottom: 1px solid var(--line);
    }


    .journey-track {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .journey-copy {
        padding-top: 15px;
    }


    .mindset-grid {
        grid-template-columns: 1fr;
    }


    .department-row {
        grid-template-columns: 35px 52px 1fr 20px;
        gap: 10px;
        min-height: 105px;
    }


    .department-info h3 {
        font-size: 17px;
    }


    .department-info p {
        font-size: 10px;
    }


    .department-icon {
        width: 45px;
        height: 45px;
    }


    .job-row {
        grid-template-columns: 35px 1fr;
        gap: 15px;
        padding: 25px 0;
    }


    .job-title h3 {
        font-size: 17px;
    }


    .job-details {
        grid-column: 2;
    }


    .job-apply {
        grid-column: 2;
        width: 100%;
    }


    .featured-job {
        padding-left: 12px;
        padding-right: 12px;
    }


    .culture-layout {
        grid-template-columns: 1fr;
    }


    .culture-feature {
        min-height: 350px;
    }


    .culture-feature > i {
        margin-top: 90px;
    }


    .freshers-section {
        grid-template-columns: 1fr;
        padding: 80px 7%;
        gap: 20px;
    }


    .internship-list {
        grid-column: auto;
        border-left: none;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 25px;
    }


    .hiring-steps {
        grid-template-columns: 1fr;
    }


    .hiring-steps article {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }


    .hiring-steps h3 {
        margin-top: 25px;
    }


    .open-application {
        width: 90%;
        margin: 80px auto;
    }


    .faq-section {
        padding: 85px 7%;
    }


    .final-career-cta {
        min-height: 520px;
    }


    .final-content h2 {
        font-size: 46px;
        letter-spacing: -2px;
    }


    .footer-main {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .footer-bottom {
        flex-direction: column;
    }

}




/* ======================================= */

                /* contect page of css */

/* ======================================== */




/* =========================================================
   GROWTH HARBOUR
   CONTACT PAGE
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --navy: #061525;
    --navy-light: #0a1c2f;
    --card: #0d2237;
    --card-light: #112b43;

    --blue: #19aaff;
    --blue-dark: #087fd1;
    --blue-soft: rgba(25, 170, 255, 0.12);

    --gold: #f5b82e;

    --white: #ffffff;
    --text: #d6e2ef;
    --muted: #8da2b8;

    --border: rgba(255, 255, 255, 0.09);

    --shadow:
        0 25px 70px rgba(0, 0, 0, 0.30);

    --radius: 22px;

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: "Inter", sans-serif;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(25, 170, 255, 0.08),
            transparent 30%
        ),
        var(--navy);

    color: var(--white);

    line-height: 1.6;

    overflow-x: hidden;

}


img {
    max-width: 100%;
    display: block;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input,
textarea,
select {
    font-family: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: min(1200px, 92%);

    margin: auto;

}


/* =========================================================
   NAVBAR
========================================================= */

.site-header {

    height: 95px;

    background: rgba(5, 18, 31, 0.92);

    border-bottom: 1px solid var(--border);

    position: sticky;

    top: 0;

    z-index: 1000;

    backdrop-filter: blur(18px);

}


.navbar {

    width: min(1470px, 94%);

    height: 95px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.brand-logo {

    width: 145px;

    flex-shrink: 0;

}


.brand-logo img {

    width: 100%;

    height: auto;

    object-fit: contain;

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 38px;

}


.nav-links a {

    color: #e8eef5;

    font-size: 16px;

    font-weight: 500;

    position: relative;

    transition: 0.3s ease;

}


.nav-links a:hover,
.nav-links a.active {

    color: var(--blue);

}


.nav-links a::after {

    content: "";

    position: absolute;

    width: 0;

    height: 2px;

    left: 0;

    bottom: -10px;

    background: var(--blue);

    transition: 0.3s ease;

}


.nav-links a:hover::after,
.nav-links a.active::after {

    width: 100%;

}


.nav-cta {

    background:
        linear-gradient(
            135deg,
            #1db5ff,
            #087df0
        );

    padding: 14px 24px;

    border-radius: 40px;

    font-weight: 700;

    white-space: nowrap;

    display: flex;

    align-items: center;

    gap: 10px;

    box-shadow:
        0 12px 30px rgba(0, 140, 255, 0.22);

    transition: 0.3s ease;

}


.nav-cta:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(0, 140, 255, 0.35);

}


/* =========================================================
   COMMON
========================================================= */

.section-tag {

    color: var(--blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.section-heading {

    max-width: 750px;

    margin-bottom: 70px;

}


.section-heading.center {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

}


.section-heading h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(38px, 5vw, 58px);

    line-height: 1.12;

    margin: 15px 0 20px;

    letter-spacing: -1.5px;

}


.section-heading h2 span {

    color: var(--blue);

}


.section-heading p {

    color: var(--muted);

    font-size: 17px;

    max-width: 700px;

}


/* =========================================================
   HERO
========================================================= */

.contact-hero {

    min-height: 720px;

    position: relative;

    overflow: hidden;

    padding: 110px 0;

    background:

        linear-gradient(
            120deg,
            rgba(6, 21, 37, 0.96),
            rgba(8, 31, 52, 0.92)
        );

}


.contact-hero::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background: rgba(25, 170, 255, 0.06);

    filter: blur(80px);

    right: -150px;

    top: -180px;

}


.contact-hero .container {

    min-height: 500px;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 70px;

}


.hero-content {

    position: relative;

    z-index: 2;

}


.hero-label {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--blue);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

}


.hero-label span {

    width: 30px;

    height: 2px;

    background: var(--blue);

}


.hero-content h1 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(48px, 6vw, 76px);

    line-height: 1.02;

    letter-spacing: -3px;

    margin: 22px 0;

}


.hero-content h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            #73d4ff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.hero-content > p {

    max-width: 690px;

    color: var(--text);

    font-size: 18px;

    line-height: 1.9;

}


.hero-actions {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 35px;

}


.primary-btn,
.secondary-btn {

    min-height: 54px;

    padding: 0 25px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-weight: 700;

    transition: 0.3s ease;

}


.primary-btn {

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #087ff0
        );

    box-shadow:
        0 15px 35px rgba(25, 170, 255, 0.2);

}


.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(25, 170, 255, 0.32);

}


.secondary-btn {

    border: 1px solid var(--border);

    background: rgba(255,255,255,0.03);

    color: var(--text);

}


.secondary-btn:hover {

    border-color: var(--blue);

    color: var(--blue);

}


.hero-trust {

    display: flex;

    gap: 25px;

    margin-top: 50px;

    flex-wrap: wrap;

}


.trust-item {

    display: flex;

    align-items: center;

    gap: 10px;

}


.trust-item > i {

    color: var(--blue);

    font-size: 18px;

}


.trust-item div {

    display: flex;

    flex-direction: column;

}


.trust-item strong {

    font-size: 13px;

}


.trust-item span {

    color: var(--muted);

    font-size: 11px;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.logo-orbit {

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(25, 170, 255, 0.20),
            rgba(9, 31, 51, 0.6) 60%,
            rgba(6, 21, 37, 0.2)
        );

    border: 1px solid rgba(25,170,255,0.25);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 0 80px rgba(25, 170, 255, 0.12);

    position: relative;

    z-index: 2;

    animation: floatLogo 5s ease-in-out infinite;

}


.logo-orbit img {

    width: 220px;

    filter:
        drop-shadow(
            0 0 25px rgba(25,170,255,0.20)
        );

}


.visual-ring {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(25,170,255,0.15);

}


.ring-one {

    width: 450px;

    height: 450px;

}


.ring-two {

    width: 600px;

    height: 600px;

    border-color: rgba(245,184,46,0.08);

}


.floating-card {

    position: absolute;

    background:
        rgba(13, 34, 55, 0.94);

    border: 1px solid var(--border);

    border-radius: 18px;

    padding: 18px 22px;

    display: flex;

    flex-direction: column;

    box-shadow: var(--shadow);

    z-index: 4;

    backdrop-filter: blur(12px);

}


.floating-card strong {

    color: var(--blue);

    font-family: "Poppins", sans-serif;

    font-size: 30px;

}


.floating-card span {

    color: var(--text);

    font-size: 12px;

}


.card-top {

    top: 30px;

    right: 0;

}


.card-bottom {

    bottom: 35px;

    left: 0;

}


.card-bottom strong {

    color: var(--gold);

}


.card-right {

    right: -30px;

    bottom: 120px;

}


@keyframes floatLogo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {

    padding: 120px 0;

    background: var(--navy);

}


.contact-layout {

    display: grid;

    grid-template-columns: 1.5fr 0.85fr;

    gap: 30px;

    align-items: start;

}


/* =========================================================
   FORM CARD
========================================================= */

.form-card {

    background:
        linear-gradient(
            145deg,
            rgba(16, 42, 66, 0.96),
            rgba(9, 29, 47, 0.96)
        );

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 42px;

    box-shadow: var(--shadow);

}


.form-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;

}


.form-header span {

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.form-header h3 {

    font-family: "Poppins", sans-serif;

    font-size: 26px;

    margin-top: 6px;

}


.form-icon {

    width: 52px;

    height: 52px;

    border-radius: 15px;

    background: var(--blue-soft);

    border: 1px solid rgba(25,170,255,0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blue);

    font-size: 20px;

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}


.form-group {

    margin-bottom: 22px;

}


.form-group label {

    display: block;

    color: #e8f0f8;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 9px;

}


.optional {

    color: var(--muted);

    font-weight: 400;

    margin-left: 5px;

}


.form-group input,
.form-group textarea,
.form-group select {

    width: 100%;

    border: 1px solid rgba(255,255,255,0.08);

    background: #07192b;

    color: var(--white);

    border-radius: 11px;

    padding: 15px 16px;

    outline: none;

    font-size: 14px;

    transition: 0.3s ease;

}


.form-group input,
.form-group select {

    height: 52px;

}


.form-group textarea {

    resize: vertical;

    min-height: 145px;

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color: #61768c;

}


.form-group select {

    cursor: pointer;

}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(25,170,255,0.08);

}


/* =========================================================
   LOGO UPLOAD
========================================================= */

.logo-upload {

    position: relative;

    min-height: 125px;

    border: 1px dashed rgba(25,170,255,0.35);

    border-radius: 13px;

    background:
        rgba(25,170,255,0.035);

    transition: 0.3s ease;

    overflow: hidden;

}


.logo-upload:hover {

    border-color: var(--blue);

    background:
        rgba(25,170,255,0.07);

}


.logo-upload input {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;

}


.upload-content {

    min-height: 125px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    pointer-events: none;

}


.upload-icon {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blue);

    background: var(--blue-soft);

    margin-bottom: 4px;

}


.upload-content strong {

    font-size: 13px;

}


.upload-content span {

    color: var(--muted);

    font-size: 11px;

}


/* =========================================================
   PRIVACY
========================================================= */

.privacy-check {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: var(--muted);

    font-size: 12px;

    margin: 10px 0 20px;

    cursor: pointer;

}


.privacy-check input {

    margin-top: 3px;

    accent-color: var(--blue);

}


.submit-btn {

    width: 100%;

    height: 58px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #087ff0
        );

    font-weight: 800;

    font-size: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    transition: 0.3s ease;

}


.submit-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(25,170,255,0.25);

}


.form-note {

    text-align: center;

    color: var(--muted);

    font-size: 11px;

    margin-top: 15px;

}


.form-note i {

    color: var(--blue);

    margin-right: 5px;

}


/* =========================================================
   SIDEBAR
========================================================= */

.contact-sidebar {

    display: flex;

    flex-direction: column;

    gap: 20px;

    position: sticky;

    top: 120px;

}


.info-card {

    background:
        linear-gradient(
            150deg,
            #0e2943,
            #0a1d30
        );

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 35px;

}


.card-label {

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.info-card h3 {

    font-family: "Poppins", sans-serif;

    font-size: 29px;

    line-height: 1.2;

    margin: 14px 0;

}


.info-card h3 span {

    color: var(--blue);

}


.info-card > p {

    color: var(--muted);

    font-size: 14px;

    margin-bottom: 30px;

}


.contact-detail {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 0;

    border-top: 1px solid var(--border);

}


.detail-icon {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--blue-soft);

    color: var(--blue);

}


.contact-detail div:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.contact-detail small {

    color: var(--muted);

    font-size: 11px;

}


.contact-detail strong {

    color: var(--white);

    font-size: 13px;

    font-weight: 600;

}


.contact-detail:hover strong {

    color: var(--blue);

}


.response-badge {

    margin-top: 20px;

    padding: 13px;

    border-radius: 10px;

    background: rgba(25,170,255,0.07);

    border: 1px solid rgba(25,170,255,0.12);

    color: var(--muted);

    font-size: 11px;

    text-align: center;

}


.response-badge strong {

    color: var(--blue);

}


.online-dot {

    display: inline-block;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #28d17c;

    margin-right: 6px;

    box-shadow:
        0 0 10px rgba(40,209,124,0.8);

}


/* =========================================================
   SOCIAL
========================================================= */

.social-card {

    padding: 28px 30px;

    border-radius: var(--radius);

    background: #0b1f33;

    border: 1px solid var(--border);

}


.social-card > span {

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.social-card h4 {

    margin: 6px 0 18px;

    font-size: 18px;

}


.social-links {

    display: flex;

    gap: 10px;

}


.social-links a {

    width: 43px;

    height: 43px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #07192b;

    border: 1px solid var(--border);

    color: var(--text);

    transition: 0.3s ease;

}


.social-links a:hover {

    color: var(--blue);

    border-color: var(--blue);

    transform: translateY(-4px);

}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section {

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #07192b,
            #061525
        );

}


.why-grid {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 100px;

}


.why-heading h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(38px, 4vw, 54px);

    line-height: 1.1;

    margin: 15px 0 20px;

}


.why-heading h2 span {

    display: block;

    color: var(--blue);

}


.why-heading p {

    color: var(--muted);

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 25px;

}


.text-link {

    color: var(--blue);

    font-weight: 700;

    display: inline-flex;

    gap: 10px;

    align-items: center;

}


.why-points {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0 40px;

}


.why-point {

    display: flex;

    gap: 18px;

    padding: 30px 0;

    border-bottom: 1px solid var(--border);

}


.why-point > span {

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;

}


.why-point h3 {

    font-size: 17px;

    margin-bottom: 8px;

}


.why-point p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   HELP SECTION
========================================================= */

.help-section {

    padding: 120px 0;

}


.help-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

}


.help-card {

    position: relative;

    padding: 30px;

    min-height: 245px;

    border: 1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            rgba(13,34,55,0.95),
            rgba(8,25,41,0.95)
        );

    border-radius: 18px;

    transition: 0.35s ease;

    overflow: hidden;

}


.help-card::before {

    content: "";

    position: absolute;

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background: var(--blue);

    opacity: 0;

    filter: blur(70px);

    right: -40px;

    top: -40px;

    transition: 0.35s ease;

}


.help-card:hover {

    transform: translateY(-8px);

    border-color: rgba(25,170,255,0.4);

}


.help-card:hover::before {

    opacity: 0.18;

}


.help-card > i {

    color: var(--blue);

    font-size: 25px;

    margin-bottom: 25px;

}


.help-card h3 {

    font-family: "Poppins", sans-serif;

    font-size: 20px;

    margin-bottom: 10px;

}


.help-card p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

}


.help-card > span {

    position: absolute;

    bottom: 25px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   PROCESS
========================================================= */

.process-section {

    padding: 120px 0;

    background: #071a2b;

}


.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    position: relative;

}


.process-item {

    position: relative;

    padding-top: 15px;

}


.process-number {

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blue);

    font-weight: 800;

    background: #0a253d;

    border: 1px solid rgba(25,170,255,0.25);

    margin-bottom: 25px;

    position: relative;

    z-index: 2;

}


.process-item h3 {

    font-family: "Poppins", sans-serif;

    font-size: 19px;

    margin-bottom: 10px;

}


.process-item p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

}


.process-line {

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            rgba(25,170,255,0.05)
        );

    position: relative;

    top: 45px;

    margin-bottom: -1px;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    padding: 120px 0;

}


.faq-grid {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 90px;

}


.faq-intro h2 {

    font-family: "Poppins", sans-serif;

    font-size: 45px;

    line-height: 1.1;

    margin: 15px 0;

}


.faq-intro h2 span {

    color: var(--blue);

    display: block;

}


.faq-intro p {

    color: var(--muted);

    margin-bottom: 30px;

}


.faq-list details {

    border-bottom: 1px solid var(--border);

    padding: 20px 0;

}


.faq-list summary {

    list-style: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-weight: 600;

    font-size: 15px;

}


.faq-list summary::-webkit-details-marker {

    display: none;

}


.faq-list summary i {

    color: var(--blue);

    transition: 0.3s ease;

}


.faq-list details[open] summary i {

    transform: rotate(45deg);

}


.faq-list details p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;

    padding-top: 15px;

    max-width: 700px;

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    padding: 120px 0;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #08213a,
            #061525
        );

    text-align: center;

}


.cta-glow {

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(25,170,255,0.1);

    filter: blur(90px);

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

}


.cta-content {

    position: relative;

    z-index: 2;

}


.cta-content > span {

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

}


.cta-content h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.08;

    margin: 18px auto;

    max-width: 800px;

}


.cta-content h2 strong {

    display: block;

    color: var(--blue);

}


.cta-content p {

    color: var(--muted);

    font-size: 17px;

    margin-bottom: 30px;

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    background: #040f1c;

    border-top: 1px solid var(--border);

    padding: 70px 0 25px;

}


.footer-grid {

    display: grid;

    grid-template-columns: 1.5fr 0.7fr 0.7fr 1fr;

    gap: 50px;

    padding-bottom: 50px;

}


.footer-brand img {

    width: 190px;

    margin-bottom: 20px;

}


.footer-brand p {

    color: var(--muted);

    font-size: 13px;

    max-width: 330px;

    line-height: 1.8;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.footer-column h4 {

    font-size: 14px;

    margin-bottom: 8px;

}


.footer-column a,
.footer-column span {

    color: var(--muted);

    font-size: 13px;

    transition: 0.3s ease;

}


.footer-column a:hover {

    color: var(--blue);

}


.footer-bottom {

    padding-top: 22px;

    border-top: 1px solid var(--border);

    display: flex;

    justify-content: space-between;

    gap: 20px;

}


.footer-bottom p {

    color: #60758a;

    font-size: 11px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .nav-links {

        gap: 20px;

    }

    .nav-links a {

        font-size: 14px;

    }

    .nav-cta {

        padding: 12px 18px;

    }

}


@media (max-width: 1000px) {

    .nav-links {

        display: none;

    }


    .contact-hero .container {

        grid-template-columns: 1fr;

    }


    .hero-visual {

        min-height: 420px;

    }


    .contact-layout {

        grid-template-columns: 1fr;

    }


    .contact-sidebar {

        position: static;

        display: grid;

        grid-template-columns: 1fr 1fr;

    }


    .why-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .help-grid {

        grid-template-columns: 1fr 1fr;

    }


    .process-grid {

        grid-template-columns: 1fr 1fr;

        gap: 50px;

    }


    .process-line {

        display: none;

    }


    .faq-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .footer-grid {

        grid-template-columns: 1fr 1fr;

    }

}


@media (max-width: 650px) {

    .site-header,
    .navbar {

        height: 78px;

    }


    .brand-logo {

        width: 120px;

    }


    .nav-cta {

        padding: 11px 15px;

        font-size: 12px;

    }


    .contact-hero {

        padding: 75px 0;

    }


    .hero-content h1 {

        font-size: 46px;

        letter-spacing: -2px;

    }


    .hero-content > p {

        font-size: 15px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .hero-trust {

        flex-direction: column;

    }


    .hero-visual {

        min-height: 360px;

    }


    .logo-orbit {

        width: 230px;

        height: 230px;

    }


    .logo-orbit img {

        width: 160px;

    }


    .ring-one {

        width: 320px;

        height: 320px;

    }


    .ring-two {

        width: 400px;

        height: 400px;

    }


    .floating-card {

        padding: 12px 15px;

    }


    .floating-card strong {

        font-size: 22px;

    }


    .card-top {

        right: 0;

        top: 15px;

    }


    .card-right {

        right: 0;

        bottom: 45px;

    }


    .card-bottom {

        left: 0;

        bottom: 25px;

    }


    .form-card {

        padding: 25px 18px;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .contact-sidebar {

        display: flex;

    }


    .why-points {

        grid-template-columns: 1fr;

    }


    .help-grid {

        grid-template-columns: 1fr;

    }


    .process-grid {

        grid-template-columns: 1fr;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .footer-bottom {

        flex-direction: column;

    }


    .section-heading h2 {

        font-size: 38px;

    }


    .faq-intro h2 {

        font-size: 38px;

    }

}

/*service====================================*/

   COMMON
========================================================= */

.services-page-a {
    width: 100%;

    background: var(--a-bg-a);

    overflow: hidden;
}


.container-a {
    width: min(1180px, calc(100% - 40px));

    margin: auto;
}


.section-heading-a {
    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;
}


.section-label-a {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--a-blue-a);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.section-heading-a h2 {
    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: clamp(35px, 5vw, 56px);

    line-height: 1.15;

    letter-spacing: -1.5px;
}


.section-heading-a h2 span {
    display: block;

    color: var(--a-blue-a);
}


.section-heading-a p {
    max-width: 680px;

    margin: 20px auto 0;

    color: var(--a-text-light-a);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   HERO
========================================================= */

.services-hero-a {
    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #081524 0%,
            #0b2038 50%,
            #102c48 100%
        );

    border-bottom: 1px solid var(--a-border-a);

    overflow: hidden;
}


.hero-bg-a {
    position: absolute;

    width: 550px;

    height: 550px;

    right: -180px;

    top: -200px;

    border-radius: 50%;

    background: rgba(21, 159, 245, 0.09);

    filter: blur(90px);

    pointer-events: none;
}


.hero-bg-a::after {
    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    left: -900px;

    top: 450px;

    border-radius: 50%;

    background: rgba(21, 159, 245, 0.06);

    filter: blur(80px);
}


.hero-content-a {
    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: auto;
}


.hero-label-a {
    display: inline-block;

    margin-bottom: 22px;

    color: var(--a-blue-a);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;
}


.hero-title-a {
    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: clamp(48px, 6vw, 76px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -3px;
}


.hero-title-a span {
    display: block;

    color: var(--a-blue-a);
}


.hero-description-a {
    max-width: 720px;

    margin: 25px auto 0;

    color: var(--a-text-light-a);

    font-size: 17px;

    line-height: 1.8;
}


.hero-buttons-a {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-btn-a,
.secondary-btn-a {
    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 25px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    transition: var(--a-transition-a);
}


.primary-btn-a {
    background: var(--a-blue-a);

    color: #ffffff;

    box-shadow:
        0 10px 30px rgba(21, 159, 245, 0.2);
}


.primary-btn-a:hover {
    background: var(--a-blue-light-a);

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(21, 159, 245, 0.3);
}


.primary-btn-a span {
    font-size: 18px;

    transition: var(--a-transition-a);
}


.primary-btn-a:hover span {
    transform: translateX(4px);
}


.secondary-btn-a {
    border: 1px solid var(--a-border-a);

    background: rgba(255, 255, 255, 0.03);

    color: var(--a-white-a);
}


.secondary-btn-a:hover {
    border-color: var(--a-border-blue-a);

    background: rgba(21, 159, 245, 0.08);

    transform: translateY(-3px);
}


/* =========================================================
   INTRO
========================================================= */

.services-intro-a {
    padding: 120px 0;

    background: var(--a-bg-dark-a);
}


.intro-grid-a {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


.intro-box-a {
    padding: 35px;

    background: var(--a-card-a);

    border: 1px solid var(--a-border-a);

    border-radius: var(--a-radius-a);

    transition: var(--a-transition-a);
}


.intro-box-a:hover {
    transform: translateY(-7px);

    border-color: var(--a-border-blue-a);

    background: var(--a-card-hover-a);

    box-shadow: var(--a-shadow-a);
}


.intro-icon-a {
    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 10px;

    background: rgba(21, 159, 245, 0.1);

    border: 1px solid rgba(21, 159, 245, 0.25);

    color: var(--a-blue-a);

    font-size: 11px;

    font-weight: 700;
}


.intro-box-a h3 {
    margin-bottom: 10px;

    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: 20px;
}


.intro-box-a p {
    color: var(--a-text-light-a);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   SERVICES LIST
========================================================= */

.services-list-a {
    padding: 130px 0;

    background: var(--a-bg-a);
}


.service-grid-a {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


.service-card-a {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 500px;

    padding: 30px;

    background: var(--a-card-a);

    border: 1px solid var(--a-border-a);

    border-radius: var(--a-radius-a);

    overflow: hidden;

    transition:
        transform var(--a-transition-a),
        border-color var(--a-transition-a),
        background var(--a-transition-a),
        box-shadow var(--a-transition-a);
}


.service-card-a::before {
    content: "";

    position: absolute;

    width: 160px;

    height: 160px;

    right: -80px;

    top: -80px;

    border-radius: 50%;

    background: rgba(21, 159, 245, 0.08);

    filter: blur(30px);

    transition: var(--a-transition-a);
}


.service-card-a:hover {
    transform: translateY(-9px);

    border-color: var(--a-border-blue-a);

    background: var(--a-card-hover-a);

    box-shadow: var(--a-shadow-a);
}


.service-card-a:hover::before {
    transform: scale(1.5);
}


.service-top-a {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 28px;
}


.service-number-a {
    color: var(--a-text-muted-a);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.service-icon-a {
    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: rgba(21, 159, 245, 0.08);

    border: 1px solid rgba(21, 159, 245, 0.25);

    color: var(--a-blue-a);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: var(--a-transition-a);
}


.service-card-a:hover .service-icon-a {
    transform: scale(1.08);

    background: rgba(21, 159, 245, 0.15);

    border-color: var(--a-blue-a);
}


.service-card-a h3 {
    position: relative;

    z-index: 2;

    margin-bottom: 13px;

    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: 21px;

    line-height: 1.35;
}


.service-card-a > p {
    position: relative;

    z-index: 2;

    margin-bottom: 24px;

    color: var(--a-text-light-a);

    font-size: 14px;

    line-height: 1.75;
}


.service-features-a {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.service-features-a li {
    position: relative;

    padding-left: 18px;

    color: #aebed0;

    font-size: 13px;
}


.service-features-a li::before {
    content: "";

    position: absolute;

    left: 0;

    top: 9px;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: var(--a-blue-a);
}


.service-link-a {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: auto;

    padding-top: 28px;

    color: var(--a-blue-a);

    font-size: 13px;

    font-weight: 700;

    transition: var(--a-transition-a);
}


.service-link-a span {
    font-size: 17px;

    transition: var(--a-transition-a);
}


.service-link-a:hover {
    color: var(--a-white-a);
}


.service-link-a:hover span {
    transform: translateX(5px);
}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section-a {
    padding: 130px 0;

    background: var(--a-bg-dark-a);
}


.why-grid-a {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--a-border-a);

    border-left: 1px solid var(--a-border-a);
}


.why-card-a {
    min-height: 220px;

    padding: 35px;

    border-right: 1px solid var(--a-border-a);

    border-bottom: 1px solid var(--a-border-a);

    transition: var(--a-transition-a);
}


.why-card-a:hover {
    background: rgba(21, 159, 245, 0.04);
}


.why-number-a {
    display: block;

    margin-bottom: 23px;

    color: var(--a-blue-a);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.why-card-a h3 {
    margin-bottom: 10px;

    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: 19px;
}


.why-card-a p {
    color: var(--a-text-light-a);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   PROCESS
========================================================= */

.process-section-a {
    padding: 130px 0;

    background: var(--a-bg-a);
}


.process-grid-a {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 20px;

    position: relative;
}


.process-grid-a::before {
    content: "";

    position: absolute;

    top: 27px;

    left: 10%;

    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--a-blue-a),
            transparent
        );

    opacity: 0.35;
}


.process-item-a {
    position: relative;

    z-index: 2;

    text-align: center;
}


.process-number-a {
    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: var(--a-bg-a);

    border: 1px solid var(--a-border-blue-a);

    color: var(--a-blue-a);

    font-size: 11px;

    font-weight: 800;

    transition: var(--a-transition-a);
}


.process-item-a:hover .process-number-a {
    background: var(--a-blue-a);

    color: white;

    box-shadow:
        0 0 25px rgba(21, 159, 245, 0.25);
}


.process-item-a h3 {
    margin-bottom: 9px;

    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: 18px;
}


.process-item-a p {
    color: var(--a-text-light-a);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.services-cta-a {
    position: relative;

    padding: 140px 0;

    background:
        linear-gradient(
            135deg,
            #081524,
            #0d2741
        );

    border-top: 1px solid var(--a-border-a);

    overflow: hidden;
}


.cta-glow-a {
    position: absolute;

    width: 500px;

    height: 500px;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(21, 159, 245, 0.08);

    filter: blur(100px);

    pointer-events: none;
}


.cta-content-a {
    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: auto;

    text-align: center;
}


.cta-content-a h2 {
    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px, 6vw, 65px);

    line-height: 1.1;

    letter-spacing: -2px;
}


.cta-content-a h2 span {
    display: block;

    color: var(--a-blue-a);
}


.cta-content-a p {
    max-width: 650px;

    margin: 22px auto 0;

    color: var(--a-text-light-a);

    font-size: 16px;

    line-height: 1.8;
}


.cta-buttons-a {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 32px;
}


.cta-content-a small {
    display: block;

    margin-top: 22px;

    color: var(--a-text-muted-a);

    font-size: 11px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: #06101b;
}


::-webkit-scrollbar-thumb {
    background: #173b5c;

    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
    background: var(--a-blue-a);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .container-a {
        width: min(92%, 900px);
    }


    .service-grid-a {
        grid-template-columns: repeat(2, 1fr);
    }


    .intro-grid-a {
        grid-template-columns: 1fr;
    }


    .why-grid-a {
        grid-template-columns: repeat(2, 1fr);
    }


    .process-grid-a {
        grid-template-columns: repeat(3, 1fr);

        row-gap: 45px;
    }


    .process-grid-a::before {
        display: none;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .container-a {
        width: calc(100% - 30px);
    }


    .services-hero-a {
        min-height: 650px;
    }


    .hero-title-a {
        font-size: 44px;

        letter-spacing: -2px;
    }


    .hero-description-a {
        font-size: 14px;
    }


    .hero-buttons-a {
        flex-direction: column;
    }


    .primary-btn-a,
    .secondary-btn-a {
        width: 100%;
    }


    .services-intro-a,
    .services-list-a,
    .why-section-a,
    .process-section-a {
        padding: 90px 0;
    }


    .service-grid-a {
        grid-template-columns: 1fr;
    }


    .service-card-a {
        min-height: auto;
    }


    .why-grid-a {
        grid-template-columns: 1fr;
    }


    .process-grid-a {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .process-item-a {
        text-align: left;

        display: grid;

        grid-template-columns: 55px 1fr;

        column-gap: 18px;

        align-items: center;
    }


    .process-number-a {
        grid-row: span 2;

        margin: 0;
    }


    .process-item-a h3 {
        margin-bottom: 4px;
    }


    .services-cta-a {
        padding: 100px 0;
    }


    .cta-buttons-a {
        flex-direction: column;
    }


    .cta-buttons-a .primary-btn-a,
    .cta-buttons-a .secondary-btn-a {
        width: 100%;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .hero-title-a {
        font-size: 38px;
    }


    .section-heading-a h2 {
        font-size: 34px;
    }


    .service-card-a {
        padding: 24px;
    }


    .intro-box-a {
        padding: 25px;
    }


    .why-card-a {
        padding: 27px;
    }


    .cta-content-a h2 {
        font-size: 39px;
    }
}


/* =========================================================
   GROWTH HARBOUR SERVICES
========================================================= */

:root {

    --bg-a: #071522;
    --bg-two-a: #091a2a;

    --card-a: #102940;
    --card-hover-a: #14334f;

    --blue-a: #159ff5;
    --blue-light-a: #4bbcff;

    --white-a: #ffffff;
    --text-a: #eaf4fc;
    --muted-a: #aebfd1;
    --soft-a: #71879d;

    --border-a: rgba(116, 169, 210, 0.17);
    --border-blue-a: rgba(21, 159, 245, 0.45);

    --shadow-a: 0 25px 70px rgba(0, 0, 0, .28);

    --radius-a: 20px;

    --transition-a: .35s ease;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--bg-a);

    color: var(--text-a);

    font-family: "Inter", sans-serif;

    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font-family: inherit;
}


.container-a {

    width: min(1180px, calc(100% - 40px));

    margin: auto;
}


.services-page-a {
    width: 100%;
}


.section-head-a {

    max-width: 760px;

    margin: 0 auto 60px;

    text-align: center;
}


.section-tag-a {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--blue-a);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.section-head-a h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(36px, 5vw, 58px);

    line-height: 1.1;

    letter-spacing: -2px;

    color: var(--white-a);
}


.section-head-a h2 span {

    display: block;

    color: var(--blue-a);
}


.section-head-a p {

    max-width: 680px;

    margin: 20px auto 0;

    color: var(--muted-a);

    line-height: 1.8;

    font-size: 15px;
}


/* =========================================================
   HERO
========================================================= */

.hero-section-a {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(21,159,245,.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071522,
            #0b2239
        );

    border-bottom: 1px solid var(--border-a);
}


.hero-grid-a {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

    pointer-events: none;
}


.hero-glow-a {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}


.hero-glow-one-a {

    width: 350px;

    height: 350px;

    right: -100px;

    top: 100px;

    background: rgba(21,159,245,.12);
}


.hero-glow-two-a {

    width: 250px;

    height: 250px;

    left: -100px;

    bottom: -80px;

    background: rgba(21,159,245,.08);
}


.hero-content-a {

    position: relative;

    z-index: 2;

    max-width: 900px;
}


.hero-badge-a {

    width: fit-content;

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

    padding: 8px 14px;

    border: 1px solid var(--border-blue-a);

    border-radius: 50px;

    background: rgba(21,159,245,.06);

    color: #80cfff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.badge-dot-a {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--blue-a);

    box-shadow: 0 0 12px var(--blue-a);

    animation: pulse-a 2s infinite;
}


@keyframes pulse-a {

    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.7);
    }
}


.hero-title-a {

    max-width: 850px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(48px, 7vw, 82px);

    line-height: 1.03;

    letter-spacing: -4px;

    color: var(--white-a);
}


.hero-title-a span {

    display: block;

    color: var(--blue-a);

    text-shadow:
        0 0 40px rgba(21,159,245,.18);
}


.hero-text-a {

    max-width: 690px;

    margin-top: 27px;

    color: var(--muted-a);

    font-size: 17px;

    line-height: 1.85;
}


.hero-actions-a {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 35px;
}


.primary-btn-a,
.outline-btn-a {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 25px;

    border-radius: 9px;

    font-size: 14px;

    font-weight: 700;

    transition: var(--transition-a);
}


.primary-btn-a {

    background: var(--blue-a);

    color: white;

    box-shadow:
        0 10px 30px rgba(21,159,245,.18);
}


.primary-btn-a:hover {

    background: var(--blue-light-a);

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(21,159,245,.28);
}


.primary-btn-a span {

    font-size: 18px;

    transition: var(--transition-a);
}


.primary-btn-a:hover span {

    transform: translateX(4px);
}


.outline-btn-a {

    border: 1px solid var(--border-a);

    background: rgba(255,255,255,.025);

    color: white;
}


.outline-btn-a:hover {

    border-color: var(--border-blue-a);

    background: rgba(21,159,245,.07);

    transform: translateY(-3px);
}


.hero-trust-a {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 55px;
}


.trust-item-a {

    display: flex;

    flex-direction: column;
}


.trust-item-a strong {

    color: white;

    font-family: "Poppins", sans-serif;

    font-size: 25px;
}


.trust-item-a span {

    color: var(--soft-a);

    font-size: 11px;

    margin-top: 2px;
}


.trust-line-a {

    width: 1px;

    height: 35px;

    background: var(--border-a);
}


/* =========================================================
   INTRO
========================================================= */

.intro-section-a {

    padding: 125px 0;

    background: var(--bg-two-a);
}


.feature-grid-a {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 18px;
}


.feature-box-a {

    padding: 30px;

    border: 1px solid var(--border-a);

    background: rgba(255,255,255,.018);

    border-radius: var(--radius-a);

    transition: var(--transition-a);
}


.feature-box-a:hover {

    transform: translateY(-7px);

    border-color: var(--border-blue-a);

    background: var(--card-a);
}


.feature-icon-a {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 10px;

    color: var(--blue-a);

    background: rgba(21,159,245,.08);

    border: 1px solid var(--border-blue-a);

    font-size: 11px;

    font-weight: 800;
}


.feature-box-a h3 {

    margin-bottom: 10px;

    font-family: "Poppins", sans-serif;

    color: white;

    font-size: 19px;
}


.feature-box-a p {

    color: var(--muted-a);

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   SERVICES
========================================================= */

.services-section-a {

    padding: 130px 0;

    background: var(--bg-a);
}


.filter-area-a {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 50px;
}


.filter-btn-a {

    padding: 11px 19px;

    border: 1px solid var(--border-a);

    border-radius: 50px;

    background: transparent;

    color: var(--muted-a);

    cursor: pointer;

    font-size: 12px;

    font-weight: 600;

    transition: var(--transition-a);
}


.filter-btn-a:hover,
.filter-btn-a.active-a {

    color: white;

    border-color: var(--blue-a);

    background: var(--blue-a);

    box-shadow:
        0 7px 20px rgba(21,159,245,.16);
}


.services-grid-a {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 18px;
}


.service-card-a {

    position: relative;

    min-height: 450px;

    display: flex;

    flex-direction: column;

    padding: 28px;

    border: 1px solid var(--border-a);

    border-radius: var(--radius-a);

    background:
        linear-gradient(
            145deg,
            #102940,
            #0d2236
        );

    overflow: hidden;

    transition: var(--transition-a);
}


.service-card-a::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -100px;

    right: -80px;

    border-radius: 50%;

    background: rgba(21,159,245,.08);

    filter: blur(35px);

    transition: .5s ease;
}


.service-card-a:hover {

    transform: translateY(-10px);

    border-color: var(--border-blue-a);

    box-shadow: var(--shadow-a);
}


.service-card-a:hover::before {

    transform: scale(1.5);
}


.card-number-a {

    position: absolute;

    top: 22px;

    right: 24px;

    color: rgba(255,255,255,.2);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


.card-icon-a {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    border-radius: 14px;

    color: var(--blue-a);

    border: 1px solid var(--border-blue-a);

    background: rgba(21,159,245,.08);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: var(--transition-a);
}


.service-card-a:hover .card-icon-a {

    background: var(--blue-a);

    color: white;

    transform: rotate(-4deg) scale(1.05);
}


.service-card-a h3 {

    font-family: "Poppins", sans-serif;

    color: white;

    font-size: 19px;

    line-height: 1.35;

    margin-bottom: 13px;
}


.service-card-a p {

    color: var(--muted-a);

    font-size: 13px;

    line-height: 1.75;
}


.service-tags-a {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 20px;
}


.service-tags-a span {

    padding: 6px 9px;

    border-radius: 5px;

    background: rgba(255,255,255,.045);

    color: #a8bdd0;

    font-size: 10px;
}


.details-btn-a {

    margin-top: auto;

    padding: 20px 0 0;

    border: 0;

    background: transparent;

    color: var(--blue-a);

    text-align: left;

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

    transition: var(--transition-a);
}


.details-btn-a span {

    margin-left: 6px;

    font-size: 16px;

    transition: var(--transition-a);
}


.details-btn-a:hover {

    color: white;
}


.details-btn-a:hover span {

    margin-left: 11px;
}


/* =========================================================
   STATS
========================================================= */

.stats-section-a {

    padding: 45px 0;

    background: var(--bg-two-a);
}


.stats-box-a {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    border: 1px solid var(--border-a);

    border-radius: 18px;

    overflow: hidden;

    background: rgba(255,255,255,.018);
}


.stat-item-a {

    padding: 35px 20px;

    text-align: center;

    border-right: 1px solid var(--border-a);
}


.stat-item-a:last-child {

    border-right: 0;
}


.stat-item-a strong {

    display: block;

    color: var(--blue-a);

    font-family: "Poppins", sans-serif;

    font-size: 34px;
}


.stat-item-a span {

    color: var(--muted-a);

    font-size: 12px;
}


/* =========================================================
   PROCESS
========================================================= */

.process-section-a {

    padding: 130px 0;

    background: var(--bg-two-a);
}


.process-wrapper-a {

    display: flex;

    align-items: stretch;

    gap: 12px;
}


.process-card-a {

    flex: 1;

    padding: 28px 20px;

    border: 1px solid var(--border-a);

    border-radius: 16px;

    background: rgba(255,255,255,.018);

    text-align: center;

    transition: var(--transition-a);
}


.process-card-a:hover {

    transform: translateY(-7px);

    border-color: var(--border-blue-a);

    background: var(--card-a);
}


.process-icon-a {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: rgba(21,159,245,.08);

    border: 1px solid var(--border-blue-a);

    color: var(--blue-a);

    font-size: 11px;

    font-weight: 800;
}


.process-card-a h3 {

    color: white;

    font-family: "Poppins", sans-serif;

    font-size: 17px;

    margin-bottom: 8px;
}


.process-card-a p {

    color: var(--muted-a);

    font-size: 12px;

    line-height: 1.7;
}


.process-arrow-a {

    align-self: center;

    color: var(--blue-a);

    font-size: 22px;
}


/* =========================================================
   FAQ
========================================================= */

.faq-section-a {

    padding: 130px 0;

    background: var(--bg-a);
}


.faq-wrapper-a {

    max-width: 850px;

    margin: auto;
}


.faq-item-a {

    margin-bottom: 10px;

    border: 1px solid var(--border-a);

    border-radius: 12px;

    overflow: hidden;

    background: rgba(255,255,255,.018);
}


.faq-question-a {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 22px;

    border: 0;

    background: transparent;

    color: white;

    cursor: pointer;

    text-align: left;

    font-size: 14px;

    font-weight: 600;
}


.faq-question-a b {

    color: var(--blue-a);

    font-size: 22px;

    font-weight: 400;

    transition: var(--transition-a);
}


.faq-item-a.open-a .faq-question-a b {

    transform: rotate(45deg);
}


.faq-answer-a {

    max-height: 0;

    overflow: hidden;

    transition: max-height .4s ease;
}


.faq-answer-a p {

    padding: 0 22px 22px;

    color: var(--muted-a);

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   CTA
========================================================= */

.cta-section-a {

    position: relative;

    padding: 145px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #081827,
            #0c2943
        );

    border-top: 1px solid var(--border-a);
}


.cta-light-a {

    position: absolute;

    width: 500px;

    height: 500px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background: rgba(21,159,245,.08);

    filter: blur(100px);
}


.cta-content-a {

    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: auto;

    text-align: center;
}


.cta-content-a h2 {

    font-family: "Poppins", sans-serif;

    color: white;

    font-size: clamp(40px,6vw,65px);

    line-height: 1.08;

    letter-spacing: -2px;
}


.cta-content-a h2 span {

    display: block;

    color: var(--blue-a);
}


.cta-content-a p {

    max-width: 650px;

    margin: 22px auto;

    color: var(--muted-a);

    font-size: 15px;

    line-height: 1.8;
}


.cta-buttons-a {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


.cta-note-a {

    margin-top: 25px;

    color: var(--soft-a);

    font-size: 11px;
}


/* =========================================================
   MODAL
========================================================= */

.service-modal-a {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.service-modal-a.show-a {

    display: flex;
}


.modal-overlay-a {

    position: absolute;

    inset: 0;

    background: rgba(1,8,15,.82);

    backdrop-filter: blur(8px);
}


.modal-box-a {

    position: relative;

    z-index: 2;

    width: min(560px,100%);

    padding: 38px;

    border: 1px solid var(--border-blue-a);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #102a42,
            #091b2c
        );

    box-shadow: 0 30px 100px rgba(0,0,0,.5);

    animation: modal-in-a .3s ease;
}


@keyframes modal-in-a {

    from {
        opacity: 0;
        transform: translateY(20px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.modal-close-a {

    position: absolute;

    top: 17px;

    right: 20px;

    width: 35px;

    height: 35px;

    border: 1px solid var(--border-a);

    border-radius: 50%;

    background: rgba(255,255,255,.04);

    color: white;

    cursor: pointer;

    font-size: 22px;

    transition: var(--transition-a);
}


.modal-close-a:hover {

    background: var(--blue-a);

    border-color: var(--blue-a);
}


.modal-icon-a {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 14px;

    background: rgba(21,159,245,.1);

    border: 1px solid var(--border-blue-a);

    color: var(--blue-a);

    font-size: 11px;

    font-weight: 800;
}


.modal-label-a {

    color: var(--blue-a);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.modal-box-a h2 {

    margin-top: 8px;

    color: white;

    font-family: "Poppins", sans-serif;

    font-size: 32px;
}


.modal-box-a > p {

    margin: 12px 0 22px;

    color: var(--muted-a);

    line-height: 1.7;

    font-size: 14px;
}


.modal-list-a {

    display: grid;

    gap: 9px;

    margin-bottom: 28px;
}


.modal-feature-a {

    padding: 10px 12px;

    border-radius: 7px;

    background: rgba(255,255,255,.035);

    color: #c3d3e2;

    font-size: 12px;
}


.modal-feature-a::before {

    content: "✓";

    margin-right: 8px;

    color: var(--blue-a);

    font-weight: 800;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .services-grid-a {

        grid-template-columns: repeat(2,1fr);
    }


    .feature-grid-a {

        grid-template-columns: repeat(2,1fr);
    }


    .process-wrapper-a {

        display: grid;

        grid-template-columns: repeat(2,1fr);
    }


    .process-arrow-a {

        display: none;
    }
}


@media (max-width: 700px) {

    .container-a {

        width: calc(100% - 30px);
    }


    .hero-section-a {

        min-height: 680px;
    }


    .hero-title-a {

        font-size: 45px;

        letter-spacing: -2.5px;
    }


    .hero-text-a {

        font-size: 14px;
    }


    .hero-actions-a {

        flex-direction: column;
    }


    .hero-actions-a .primary-btn-a,
    .hero-actions-a .outline-btn-a {

        width: 100%;
    }


    .hero-trust-a {

        gap: 15px;
    }


    .trust-item-a strong {

        font-size: 21px;
    }


    .intro-section-a,
    .services-section-a,
    .process-section-a,
    .faq-section-a {

        padding: 90px 0;
    }


    .feature-grid-a {

        grid-template-columns: 1fr;
    }


    .services-grid-a {

        grid-template-columns: 1fr;
    }


    .service-card-a {

        min-height: 420px;
    }


    .stats-box-a {

        grid-template-columns: repeat(2,1fr);
    }


    .stat-item-a:nth-child(2) {

        border-right: 0;
    }


    .stat-item-a:nth-child(1),
    .stat-item-a:nth-child(2) {

        border-bottom: 1px solid var(--border-a);
    }


    .process-wrapper-a {

        grid-template-columns: 1fr;
    }


    .cta-section-a {

        padding: 100px 0;
    }


    .cta-buttons-a {

        flex-direction: column;
    }


    .cta-buttons-a .primary-btn-a,
    .cta-buttons-a .outline-btn-a {

        width: 100%;
    }


    .modal-box-a {

        padding: 30px 23px;
    }


    .modal-box-a h2 {

        font-size: 27px;
    }
}


@media (max-width: 420px) {

    .hero-title-a {

        font-size: 38px;
    }


    .section-head-a h2 {

        font-size: 34px;
    }


    .stats-box-a {

        grid-template-columns: 1fr;
    }


    .stat-item-a {

        border-right: 0;

        border-bottom: 1px solid var(--border-a);
    }


    .stat-item-a:last-child {

        border-bottom: 0;
    }


    .hero-trust-a {

        flex-wrap: wrap;
    }


    .trust-line-a {

        display: none;
    }
}


/*contact>*/
/* =========================================================
   COMMON
========================================================= */

.services-page-a {
    width: 100%;

    background: var(--a-bg-a);

    overflow: hidden;
}


.container-a {
    width: min(1180px, calc(100% - 40px));

    margin: auto;
}


.section-heading-a {
    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;
}


.section-label-a {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--a-blue-a);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.section-heading-a h2 {
    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: clamp(35px, 5vw, 56px);

    line-height: 1.15;

    letter-spacing: -1.5px;
}


.section-heading-a h2 span {
    display: block;

    color: var(--a-blue-a);
}


.section-heading-a p {
    max-width: 680px;

    margin: 20px auto 0;

    color: var(--a-text-light-a);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   HERO
========================================================= */

.services-hero-a {
    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #081524 0%,
            #0b2038 50%,
            #102c48 100%
        );

    border-bottom: 1px solid var(--a-border-a);

    overflow: hidden;
}


.hero-bg-a {
    position: absolute;

    width: 550px;

    height: 550px;

    right: -180px;

    top: -200px;

    border-radius: 50%;

    background: rgba(21, 159, 245, 0.09);

    filter: blur(90px);

    pointer-events: none;
}


.hero-bg-a::after {
    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    left: -900px;

    top: 450px;

    border-radius: 50%;

    background: rgba(21, 159, 245, 0.06);

    filter: blur(80px);
}


.hero-content-a {
    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: auto;
}


.hero-label-a {
    display: inline-block;

    margin-bottom: 22px;

    color: var(--a-blue-a);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;
}


.hero-title-a {
    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: clamp(48px, 6vw, 76px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -3px;
}


.hero-title-a span {
    display: block;

    color: var(--a-blue-a);
}


.hero-description-a {
    max-width: 720px;

    margin: 25px auto 0;

    color: var(--a-text-light-a);

    font-size: 17px;

    line-height: 1.8;
}


.hero-buttons-a {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-btn-a,
.secondary-btn-a {
    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 25px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    transition: var(--a-transition-a);
}


.primary-btn-a {
    background: var(--a-blue-a);

    color: #ffffff;

    box-shadow:
        0 10px 30px rgba(21, 159, 245, 0.2);
}


.primary-btn-a:hover {
    background: var(--a-blue-light-a);

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(21, 159, 245, 0.3);
}


.primary-btn-a span {
    font-size: 18px;

    transition: var(--a-transition-a);
}


.primary-btn-a:hover span {
    transform: translateX(4px);
}


.secondary-btn-a {
    border: 1px solid var(--a-border-a);

    background: rgba(255, 255, 255, 0.03);

    color: var(--a-white-a);
}


.secondary-btn-a:hover {
    border-color: var(--a-border-blue-a);

    background: rgba(21, 159, 245, 0.08);

    transform: translateY(-3px);
}


/* =========================================================
   INTRO
========================================================= */

.services-intro-a {
    padding: 120px 0;

    background: var(--a-bg-dark-a);
}


.intro-grid-a {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


.intro-box-a {
    padding: 35px;

    background: var(--a-card-a);

    border: 1px solid var(--a-border-a);

    border-radius: var(--a-radius-a);

    transition: var(--a-transition-a);
}


.intro-box-a:hover {
    transform: translateY(-7px);

    border-color: var(--a-border-blue-a);

    background: var(--a-card-hover-a);

    box-shadow: var(--a-shadow-a);
}


.intro-icon-a {
    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 10px;

    background: rgba(21, 159, 245, 0.1);

    border: 1px solid rgba(21, 159, 245, 0.25);

    color: var(--a-blue-a);

    font-size: 11px;

    font-weight: 700;
}


.intro-box-a h3 {
    margin-bottom: 10px;

    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: 20px;
}


.intro-box-a p {
    color: var(--a-text-light-a);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   SERVICES LIST
========================================================= */

.services-list-a {
    padding: 130px 0;

    background: var(--a-bg-a);
}


.service-grid-a {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


.service-card-a {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 500px;

    padding: 30px;

    background: var(--a-card-a);

    border: 1px solid var(--a-border-a);

    border-radius: var(--a-radius-a);

    overflow: hidden;

    transition:
        transform var(--a-transition-a),
        border-color var(--a-transition-a),
        background var(--a-transition-a),
        box-shadow var(--a-transition-a);
}


.service-card-a::before {
    content: "";

    position: absolute;

    width: 160px;

    height: 160px;

    right: -80px;

    top: -80px;

    border-radius: 50%;

    background: rgba(21, 159, 245, 0.08);

    filter: blur(30px);

    transition: var(--a-transition-a);
}


.service-card-a:hover {
    transform: translateY(-9px);

    border-color: var(--a-border-blue-a);

    background: var(--a-card-hover-a);

    box-shadow: var(--a-shadow-a);
}


.service-card-a:hover::before {
    transform: scale(1.5);
}


.service-top-a {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 28px;
}


.service-number-a {
    color: var(--a-text-muted-a);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.service-icon-a {
    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: rgba(21, 159, 245, 0.08);

    border: 1px solid rgba(21, 159, 245, 0.25);

    color: var(--a-blue-a);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: var(--a-transition-a);
}


.service-card-a:hover .service-icon-a {
    transform: scale(1.08);

    background: rgba(21, 159, 245, 0.15);

    border-color: var(--a-blue-a);
}


.service-card-a h3 {
    position: relative;

    z-index: 2;

    margin-bottom: 13px;

    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: 21px;

    line-height: 1.35;
}


.service-card-a > p {
    position: relative;

    z-index: 2;

    margin-bottom: 24px;

    color: var(--a-text-light-a);

    font-size: 14px;

    line-height: 1.75;
}


.service-features-a {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.service-features-a li {
    position: relative;

    padding-left: 18px;

    color: #aebed0;

    font-size: 13px;
}


.service-features-a li::before {
    content: "";

    position: absolute;

    left: 0;

    top: 9px;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: var(--a-blue-a);
}


.service-link-a {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: auto;

    padding-top: 28px;

    color: var(--a-blue-a);

    font-size: 13px;

    font-weight: 700;

    transition: var(--a-transition-a);
}


.service-link-a span {
    font-size: 17px;

    transition: var(--a-transition-a);
}


.service-link-a:hover {
    color: var(--a-white-a);
}


.service-link-a:hover span {
    transform: translateX(5px);
}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section-a {
    padding: 130px 0;

    background: var(--a-bg-dark-a);
}


.why-grid-a {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--a-border-a);

    border-left: 1px solid var(--a-border-a);
}


.why-card-a {
    min-height: 220px;

    padding: 35px;

    border-right: 1px solid var(--a-border-a);

    border-bottom: 1px solid var(--a-border-a);

    transition: var(--a-transition-a);
}


.why-card-a:hover {
    background: rgba(21, 159, 245, 0.04);
}


.why-number-a {
    display: block;

    margin-bottom: 23px;

    color: var(--a-blue-a);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.why-card-a h3 {
    margin-bottom: 10px;

    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: 19px;
}


.why-card-a p {
    color: var(--a-text-light-a);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   PROCESS
========================================================= */

.process-section-a {
    padding: 130px 0;

    background: var(--a-bg-a);
}


.process-grid-a {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 20px;

    position: relative;
}


.process-grid-a::before {
    content: "";

    position: absolute;

    top: 27px;

    left: 10%;

    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--a-blue-a),
            transparent
        );

    opacity: 0.35;
}


.process-item-a {
    position: relative;

    z-index: 2;

    text-align: center;
}


.process-number-a {
    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: var(--a-bg-a);

    border: 1px solid var(--a-border-blue-a);

    color: var(--a-blue-a);

    font-size: 11px;

    font-weight: 800;

    transition: var(--a-transition-a);
}


.process-item-a:hover .process-number-a {
    background: var(--a-blue-a);

    color: white;

    box-shadow:
        0 0 25px rgba(21, 159, 245, 0.25);
}


.process-item-a h3 {
    margin-bottom: 9px;

    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: 18px;
}


.process-item-a p {
    color: var(--a-text-light-a);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.services-cta-a {
    position: relative;

    padding: 140px 0;

    background:
        linear-gradient(
            135deg,
            #081524,
            #0d2741
        );

    border-top: 1px solid var(--a-border-a);

    overflow: hidden;
}


.cta-glow-a {
    position: absolute;

    width: 500px;

    height: 500px;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(21, 159, 245, 0.08);

    filter: blur(100px);

    pointer-events: none;
}


.cta-content-a {
    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: auto;

    text-align: center;
}


.cta-content-a h2 {
    color: var(--a-white-a);

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px, 6vw, 65px);

    line-height: 1.1;

    letter-spacing: -2px;
}


.cta-content-a h2 span {
    display: block;

    color: var(--a-blue-a);
}


.cta-content-a p {
    max-width: 650px;

    margin: 22px auto 0;

    color: var(--a-text-light-a);

    font-size: 16px;

    line-height: 1.8;
}


.cta-buttons-a {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 32px;
}


.cta-content-a small {
    display: block;

    margin-top: 22px;

    color: var(--a-text-muted-a);

    font-size: 11px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: #06101b;
}


::-webkit-scrollbar-thumb {
    background: #173b5c;

    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
    background: var(--a-blue-a);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .container-a {
        width: min(92%, 900px);
    }


    .service-grid-a {
        grid-template-columns: repeat(2, 1fr);
    }


    .intro-grid-a {
        grid-template-columns: 1fr;
    }


    .why-grid-a {
        grid-template-columns: repeat(2, 1fr);
    }


    .process-grid-a {
        grid-template-columns: repeat(3, 1fr);

        row-gap: 45px;
    }


    .process-grid-a::before {
        display: none;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .container-a {
        width: calc(100% - 30px);
    }


    .services-hero-a {
        min-height: 650px;
    }


    .hero-title-a {
        font-size: 44px;

        letter-spacing: -2px;
    }


    .hero-description-a {
        font-size: 14px;
    }


    .hero-buttons-a {
        flex-direction: column;
    }


    .primary-btn-a,
    .secondary-btn-a {
        width: 100%;
    }


    .services-intro-a,
    .services-list-a,
    .why-section-a,
    .process-section-a {
        padding: 90px 0;
    }


    .service-grid-a {
        grid-template-columns: 1fr;
    }


    .service-card-a {
        min-height: auto;
    }


    .why-grid-a {
        grid-template-columns: 1fr;
    }


    .process-grid-a {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .process-item-a {
        text-align: left;

        display: grid;

        grid-template-columns: 55px 1fr;

        column-gap: 18px;

        align-items: center;
    }


    .process-number-a {
        grid-row: span 2;

        margin: 0;
    }


    .process-item-a h3 {
        margin-bottom: 4px;
    }


    .services-cta-a {
        padding: 100px 0;
    }


    .cta-buttons-a {
        flex-direction: column;
    }


    .cta-buttons-a .primary-btn-a,
    .cta-buttons-a .secondary-btn-a {
        width: 100%;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .hero-title-a {
        font-size: 38px;
    }


    .section-heading-a h2 {
        font-size: 34px;
    }


    .service-card-a {
        padding: 24px;
    }


    .intro-box-a {
        padding: 25px;
    }


    .why-card-a {
        padding: 27px;
    }


    .cta-content-a h2 {
        font-size: 39px;
    }
}


/* =========================================================
   GROWTH HARBOUR SERVICES
========================================================= */

:root {

    --bg-a: #071522;
    --bg-two-a: #091a2a;

    --card-a: #102940;
    --card-hover-a: #14334f;

    --blue-a: #159ff5;
    --blue-light-a: #4bbcff;

    --white-a: #ffffff;
    --text-a: #eaf4fc;
    --muted-a: #aebfd1;
    --soft-a: #71879d;

    --border-a: rgba(116, 169, 210, 0.17);
    --border-blue-a: rgba(21, 159, 245, 0.45);

    --shadow-a: 0 25px 70px rgba(0, 0, 0, .28);

    --radius-a: 20px;

    --transition-a: .35s ease;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--bg-a);

    color: var(--text-a);

    font-family: "Inter", sans-serif;

    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font-family: inherit;
}


.container-a {

    width: min(1180px, calc(100% - 40px));

    margin: auto;
}


.services-page-a {
    width: 100%;
}


.section-head-a {

    max-width: 760px;

    margin: 0 auto 60px;

    text-align: center;
}


.section-tag-a {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--blue-a);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.section-head-a h2 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(36px, 5vw, 58px);

    line-height: 1.1;

    letter-spacing: -2px;

    color: var(--white-a);
}


.section-head-a h2 span {

    display: block;

    color: var(--blue-a);
}


.section-head-a p {

    max-width: 680px;

    margin: 20px auto 0;

    color: var(--muted-a);

    line-height: 1.8;

    font-size: 15px;
}


/* =========================================================
   HERO
========================================================= */

.hero-section-a {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(21,159,245,.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071522,
            #0b2239
        );

    border-bottom: 1px solid var(--border-a);
}


.hero-grid-a {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

    pointer-events: none;
}


.hero-glow-a {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}


.hero-glow-one-a {

    width: 350px;

    height: 350px;

    right: -100px;

    top: 100px;

    background: rgba(21,159,245,.12);
}


.hero-glow-two-a {

    width: 250px;

    height: 250px;

    left: -100px;

    bottom: -80px;

    background: rgba(21,159,245,.08);
}


.hero-content-a {

    position: relative;

    z-index: 2;

    max-width: 900px;
}


.hero-badge-a {

    width: fit-content;

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

    padding: 8px 14px;

    border: 1px solid var(--border-blue-a);

    border-radius: 50px;

    background: rgba(21,159,245,.06);

    color: #80cfff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.badge-dot-a {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--blue-a);

    box-shadow: 0 0 12px var(--blue-a);

    animation: pulse-a 2s infinite;
}


@keyframes pulse-a {

    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.7);
    }
}


.hero-title-a {

    max-width: 850px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(48px, 7vw, 82px);

    line-height: 1.03;

    letter-spacing: -4px;

    color: var(--white-a);
}


.hero-title-a span {

    display: block;

    color: var(--blue-a);

    text-shadow:
        0 0 40px rgba(21,159,245,.18);
}


.hero-text-a {

    max-width: 690px;

    margin-top: 27px;

    color: var(--muted-a);

    font-size: 17px;

    line-height: 1.85;
}


.hero-actions-a {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 35px;
}


.primary-btn-a,
.outline-btn-a {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 25px;

    border-radius: 9px;

    font-size: 14px;

    font-weight: 700;

    transition: var(--transition-a);
}


.primary-btn-a {

    background: var(--blue-a);

    color: white;

    box-shadow:
        0 10px 30px rgba(21,159,245,.18);
}


.primary-btn-a:hover {

    background: var(--blue-light-a);

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(21,159,245,.28);
}


.primary-btn-a span {

    font-size: 18px;

    transition: var(--transition-a);
}


.primary-btn-a:hover span {

    transform: translateX(4px);
}


.outline-btn-a {

    border: 1px solid var(--border-a);

    background: rgba(255,255,255,.025);

    color: white;
}


.outline-btn-a:hover {

    border-color: var(--border-blue-a);

    background: rgba(21,159,245,.07);

    transform: translateY(-3px);
}


.hero-trust-a {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 55px;
}


.trust-item-a {

    display: flex;

    flex-direction: column;
}


.trust-item-a strong {

    color: white;

    font-family: "Poppins", sans-serif;

    font-size: 25px;
}


.trust-item-a span {

    color: var(--soft-a);

    font-size: 11px;

    margin-top: 2px;
}


.trust-line-a {

    width: 1px;

    height: 35px;

    background: var(--border-a);
}


/* =========================================================
   INTRO
========================================================= */

.intro-section-a {

    padding: 125px 0;

    background: var(--bg-two-a);
}


.feature-grid-a {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 18px;
}


.feature-box-a {

    padding: 30px;

    border: 1px solid var(--border-a);

    background: rgba(255,255,255,.018);

    border-radius: var(--radius-a);

    transition: var(--transition-a);
}


.feature-box-a:hover {

    transform: translateY(-7px);

    border-color: var(--border-blue-a);

    background: var(--card-a);
}


.feature-icon-a {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 10px;

    color: var(--blue-a);

    background: rgba(21,159,245,.08);

    border: 1px solid var(--border-blue-a);

    font-size: 11px;

    font-weight: 800;
}


.feature-box-a h3 {

    margin-bottom: 10px;

    font-family: "Poppins", sans-serif;

    color: white;

    font-size: 19px;
}


.feature-box-a p {

    color: var(--muted-a);

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   SERVICES
========================================================= */

.services-section-a {

    padding: 130px 0;

    background: var(--bg-a);
}


.filter-area-a {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 50px;
}


.filter-btn-a {

    padding: 11px 19px;

    border: 1px solid var(--border-a);

    border-radius: 50px;

    background: transparent;

    color: var(--muted-a);

    cursor: pointer;

    font-size: 12px;

    font-weight: 600;

    transition: var(--transition-a);
}


.filter-btn-a:hover,
.filter-btn-a.active-a {

    color: white;

    border-color: var(--blue-a);

    background: var(--blue-a);

    box-shadow:
        0 7px 20px rgba(21,159,245,.16);
}


.services-grid-a {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 18px;
}


.service-card-a {

    position: relative;

    min-height: 450px;

    display: flex;

    flex-direction: column;

    padding: 28px;

    border: 1px solid var(--border-a);

    border-radius: var(--radius-a);

    background:
        linear-gradient(
            145deg,
            #102940,
            #0d2236
        );

    overflow: hidden;

    transition: var(--transition-a);
}


.service-card-a::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -100px;

    right: -80px;

    border-radius: 50%;

    background: rgba(21,159,245,.08);

    filter: blur(35px);

    transition: .5s ease;
}


.service-card-a:hover {

    transform: translateY(-10px);

    border-color: var(--border-blue-a);

    box-shadow: var(--shadow-a);
}


.service-card-a:hover::before {

    transform: scale(1.5);
}


.card-number-a {

    position: absolute;

    top: 22px;

    right: 24px;

    color: rgba(255,255,255,.2);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


.card-icon-a {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    border-radius: 14px;

    color: var(--blue-a);

    border: 1px solid var(--border-blue-a);

    background: rgba(21,159,245,.08);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: var(--transition-a);
}


.service-card-a:hover .card-icon-a {

    background: var(--blue-a);

    color: white;

    transform: rotate(-4deg) scale(1.05);
}


.service-card-a h3 {

    font-family: "Poppins", sans-serif;

    color: white;

    font-size: 19px;

    line-height: 1.35;

    margin-bottom: 13px;
}


.service-card-a p {

    color: var(--muted-a);

    font-size: 13px;

    line-height: 1.75;
}


.service-tags-a {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 20px;
}


.service-tags-a span {

    padding: 6px 9px;

    border-radius: 5px;

    background: rgba(255,255,255,.045);

    color: #a8bdd0;

    font-size: 10px;
}


.details-btn-a {

    margin-top: auto;

    padding: 20px 0 0;

    border: 0;

    background: transparent;

    color: var(--blue-a);

    text-align: left;

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

    transition: var(--transition-a);
}


.details-btn-a span {

    margin-left: 6px;

    font-size: 16px;

    transition: var(--transition-a);
}


.details-btn-a:hover {

    color: white;
}


.details-btn-a:hover span {

    margin-left: 11px;
}


/* =========================================================
   STATS
========================================================= */

.stats-section-a {

    padding: 45px 0;

    background: var(--bg-two-a);
}


.stats-box-a {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    border: 1px solid var(--border-a);

    border-radius: 18px;

    overflow: hidden;

    background: rgba(255,255,255,.018);
}


.stat-item-a {

    padding: 35px 20px;

    text-align: center;

    border-right: 1px solid var(--border-a);
}


.stat-item-a:last-child {

    border-right: 0;
}


.stat-item-a strong {

    display: block;

    color: var(--blue-a);

    font-family: "Poppins", sans-serif;

    font-size: 34px;
}


.stat-item-a span {

    color: var(--muted-a);

    font-size: 12px;
}


/* =========================================================
   PROCESS
========================================================= */

.process-section-a {

    padding: 130px 0;

    background: var(--bg-two-a);
}


.process-wrapper-a {

    display: flex;

    align-items: stretch;

    gap: 12px;
}


.process-card-a {

    flex: 1;

    padding: 28px 20px;

    border: 1px solid var(--border-a);

    border-radius: 16px;

    background: rgba(255,255,255,.018);

    text-align: center;

    transition: var(--transition-a);
}


.process-card-a:hover {

    transform: translateY(-7px);

    border-color: var(--border-blue-a);

    background: var(--card-a);
}


.process-icon-a {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: rgba(21,159,245,.08);

    border: 1px solid var(--border-blue-a);

    color: var(--blue-a);

    font-size: 11px;

    font-weight: 800;
}


.process-card-a h3 {

    color: white;

    font-family: "Poppins", sans-serif;

    font-size: 17px;

    margin-bottom: 8px;
}


.process-card-a p {

    color: var(--muted-a);

    font-size: 12px;

    line-height: 1.7;
}


.process-arrow-a {

    align-self: center;

    color: var(--blue-a);

    font-size: 22px;
}


/* =========================================================
   FAQ
========================================================= */

.faq-section-a {

    padding: 130px 0;

    background: var(--bg-a);
}


.faq-wrapper-a {

    max-width: 850px;

    margin: auto;
}


.faq-item-a {

    margin-bottom: 10px;

    border: 1px solid var(--border-a);

    border-radius: 12px;

    overflow: hidden;

    background: rgba(255,255,255,.018);
}


.faq-question-a {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 22px;

    border: 0;

    background: transparent;

    color: white;

    cursor: pointer;

    text-align: left;

    font-size: 14px;

    font-weight: 600;
}


.faq-question-a b {

    color: var(--blue-a);

    font-size: 22px;

    font-weight: 400;

    transition: var(--transition-a);
}


.faq-item-a.open-a .faq-question-a b {

    transform: rotate(45deg);
}


.faq-answer-a {

    max-height: 0;

    overflow: hidden;

    transition: max-height .4s ease;
}


.faq-answer-a p {

    padding: 0 22px 22px;

    color: var(--muted-a);

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   CTA
========================================================= */

.cta-section-a {

    position: relative;

    padding: 145px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #081827,
            #0c2943
        );

    border-top: 1px solid var(--border-a);
}


.cta-light-a {

    position: absolute;

    width: 500px;

    height: 500px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background: rgba(21,159,245,.08);

    filter: blur(100px);
}


.cta-content-a {

    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: auto;

    text-align: center;
}


.cta-content-a h2 {

    font-family: "Poppins", sans-serif;

    color: white;

    font-size: clamp(40px,6vw,65px);

    line-height: 1.08;

    letter-spacing: -2px;
}


.cta-content-a h2 span {

    display: block;

    color: var(--blue-a);
}


.cta-content-a p {

    max-width: 650px;

    margin: 22px auto;

    color: var(--muted-a);

    font-size: 15px;

    line-height: 1.8;
}


.cta-buttons-a {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


.cta-note-a {

    margin-top: 25px;

    color: var(--soft-a);

    font-size: 11px;
}


/* =========================================================
   MODAL
========================================================= */

.service-modal-a {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.service-modal-a.show-a {

    display: flex;
}


.modal-overlay-a {

    position: absolute;

    inset: 0;

    background: rgba(1,8,15,.82);

    backdrop-filter: blur(8px);
}


.modal-box-a {

    position: relative;

    z-index: 2;

    width: min(560px,100%);

    padding: 38px;

    border: 1px solid var(--border-blue-a);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #102a42,
            #091b2c
        );

    box-shadow: 0 30px 100px rgba(0,0,0,.5);

    animation: modal-in-a .3s ease;
}


@keyframes modal-in-a {

    from {
        opacity: 0;
        transform: translateY(20px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.modal-close-a {

    position: absolute;

    top: 17px;

    right: 20px;

    width: 35px;

    height: 35px;

    border: 1px solid var(--border-a);

    border-radius: 50%;

    background: rgba(255,255,255,.04);

    color: white;

    cursor: pointer;

    font-size: 22px;

    transition: var(--transition-a);
}


.modal-close-a:hover {

    background: var(--blue-a);

    border-color: var(--blue-a);
}


.modal-icon-a {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 14px;

    background: rgba(21,159,245,.1);

    border: 1px solid var(--border-blue-a);

    color: var(--blue-a);

    font-size: 11px;

    font-weight: 800;
}


.modal-label-a {

    color: var(--blue-a);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.modal-box-a h2 {

    margin-top: 8px;

    color: white;

    font-family: "Poppins", sans-serif;

    font-size: 32px;
}


.modal-box-a > p {

    margin: 12px 0 22px;

    color: var(--muted-a);

    line-height: 1.7;

    font-size: 14px;
}


.modal-list-a {

    display: grid;

    gap: 9px;

    margin-bottom: 28px;
}


.modal-feature-a {

    padding: 10px 12px;

    border-radius: 7px;

    background: rgba(255,255,255,.035);

    color: #c3d3e2;

    font-size: 12px;
}


.modal-feature-a::before {

    content: "✓";

    margin-right: 8px;

    color: var(--blue-a);

    font-weight: 800;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .services-grid-a {

        grid-template-columns: repeat(2,1fr);
    }


    .feature-grid-a {

        grid-template-columns: repeat(2,1fr);
    }


    .process-wrapper-a {

        display: grid;

        grid-template-columns: repeat(2,1fr);
    }


    .process-arrow-a {

        display: none;
    }
}


@media (max-width: 700px) {

    .container-a {

        width: calc(100% - 30px);
    }


    .hero-section-a {

        min-height: 680px;
    }


    .hero-title-a {

        font-size: 45px;

        letter-spacing: -2.5px;
    }


    .hero-text-a {

        font-size: 14px;
    }


    .hero-actions-a {

        flex-direction: column;
    }


    .hero-actions-a .primary-btn-a,
    .hero-actions-a .outline-btn-a {

        width: 100%;
    }


    .hero-trust-a {

        gap: 15px;
    }


    .trust-item-a strong {

        font-size: 21px;
    }


    .intro-section-a,
    .services-section-a,
    .process-section-a,
    .faq-section-a {

        padding: 90px 0;
    }


    .feature-grid-a {

        grid-template-columns: 1fr;
    }


    .services-grid-a {

        grid-template-columns: 1fr;
    }


    .service-card-a {

        min-height: 420px;
    }


    .stats-box-a {

        grid-template-columns: repeat(2,1fr);
    }


    .stat-item-a:nth-child(2) {

        border-right: 0;
    }


    .stat-item-a:nth-child(1),
    .stat-item-a:nth-child(2) {

        border-bottom: 1px solid var(--border-a);
    }


    .process-wrapper-a {

        grid-template-columns: 1fr;
    }


    .cta-section-a {

        padding: 100px 0;
    }


    .cta-buttons-a {

        flex-direction: column;
    }


    .cta-buttons-a .primary-btn-a,
    .cta-buttons-a .outline-btn-a {

        width: 100%;
    }


    .modal-box-a {

        padding: 30px 23px;
    }


    .modal-box-a h2 {

        font-size: 27px;
    }
}


@media (max-width: 420px) {

    .hero-title-a {

        font-size: 38px;
    }


    .section-head-a h2 {

        font-size: 34px;
    }


    .stats-box-a {

        grid-template-columns: 1fr;
    }


    .stat-item-a {

        border-right: 0;

        border-bottom: 1px solid var(--border-a);
    }


    .stat-item-a:last-child {

        border-bottom: 0;
    }


    .hero-trust-a {

        flex-wrap: wrap;
    }


    .trust-line-a {

        display: none;
    }
}


/* ============================================== */



/* =========================================================
   GROWTH HARBOUR — SERVICES PAGE
   Theme:
   Dark #0D1117
   Electric Blue #00BFFF
   Gold #FFD700
   Fonts: Poppins + Inter
========================================================= */


/* =========================================================
   GLOBAL RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Inter", sans-serif;
    background: #0D1117;
    color: #ffffff;
    overflow-x: hidden;
    line-height: 1.7;
}


a {
    text-decoration: none;
    color: inherit;
}


button {
    font-family: inherit;
}


img {
    max-width: 100%;
    display: block;
}


.container-a {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================================
   COMMON
========================================================= */

.section-heading-a {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}


.section-label-a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 18px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #00BFFF;
}


.section-heading-a h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.8px;

    color: #ffffff;
}


.section-heading-a h2 span {
    color: #00BFFF;
}


.section-heading-a p {
    margin-top: 20px;

    color: #8994a5;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-button-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    padding: 15px 24px;

    border-radius: 10px;

    background: #00BFFF;
    color: #001017;

    font-size: 14px;
    font-weight: 800;

    transition: 0.35s ease;

    box-shadow:
        0 0 25px rgba(0, 191, 255, 0.15);
}


.primary-button-a span {
    font-size: 20px;
    transition: 0.3s ease;
}


.primary-button-a:hover {
    transform: translateY(-3px);

    background: #ffffff;

    box-shadow:
        0 0 35px rgba(0, 191, 255, 0.35);
}


.primary-button-a:hover span {
    transform: translateX(5px);
}


.secondary-button-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 23px;

    border: 1px solid rgba(255,255,255,0.14);

    border-radius: 10px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    background: rgba(255,255,255,0.025);

    transition: 0.35s ease;
}


.secondary-button-a:hover {
    border-color: #00BFFF;

    color: #00BFFF;

    background: rgba(0,191,255,0.06);

    transform: translateY(-3px);
}


/* =========================================================
   HERO
========================================================= */

.services-hero-a {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 110px 0 90px;

    overflow: hidden;

    border-bottom: 1px solid rgba(255,255,255,0.06);
}


.hero-background-a {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.hero-grid-a {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 85%
    );
}


.hero-glow-a {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.13;
}


.hero-glow-one-a {
    background: #00BFFF;

    top: -220px;
    left: -160px;
}


.hero-glow-two-a {
    background: #FFD700;

    right: -220px;
    bottom: -250px;

    opacity: 0.06;
}


.hero-layout-a {
    position: relative;

    display: grid;

    grid-template-columns: 1.08fr 0.92fr;

    gap: 70px;

    align-items: center;
}


.hero-content-a {
    position: relative;
}


.hero-label-a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 8px 13px;

    border: 1px solid rgba(0,191,255,0.18);

    border-radius: 50px;

    background: rgba(0,191,255,0.05);

    color: #00BFFF;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.8px;
}


.hero-dot-a {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #00BFFF;

    box-shadow:
        0 0 12px #00BFFF;

    animation: pulse-a 1.8s infinite;
}


@keyframes pulse-a {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.65);
    }

}


.hero-title-a {
    margin-top: 25px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(45px, 6vw, 78px);

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 800;
}


.hero-title-a span {
    display: block;

    color: #00BFFF;

    text-shadow:
        0 0 35px rgba(0,191,255,0.18);
}


.hero-description-a {
    max-width: 650px;

    margin-top: 27px;

    color: #8e99aa;

    font-size: 16px;

    line-height: 1.85;
}


.hero-actions-a {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 35px;
}


.hero-trust-a {
    display: flex;
    align-items: center;

    gap: 22px;

    margin-top: 55px;
}


.trust-item-a {
    display: flex;
    flex-direction: column;
}


.trust-item-a strong {
    font-family: "Poppins", sans-serif;

    font-size: 22px;

    color: #ffffff;
}


.trust-item-a span {
    color: #6e7888;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


.trust-divider-a {
    width: 1px;
    height: 34px;

    background: rgba(255,255,255,0.1);
}


/* =========================================================
   GROWTH DASHBOARD
========================================================= */

.growth-dashboard-a {
    position: relative;

    padding: 30px;

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.065),
            rgba(255,255,255,0.015)
        );

    backdrop-filter: blur(18px);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.35),
        inset 0 1px rgba(255,255,255,0.08);

    overflow: hidden;
}


.growth-dashboard-a::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    background: #00BFFF;

    filter: blur(90px);

    opacity: 0.13;
}


.dashboard-header-a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(255,255,255,0.07);
}


.dashboard-small-title-a {
    color: #6e7888;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.dashboard-header-a h2 {
    margin-top: 5px;

    font-family: "Poppins", sans-serif;

    font-size: 20px;
}


.dashboard-status-a {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 6px 10px;

    border-radius: 20px;

    background: rgba(0,191,255,0.08);

    color: #00BFFF;

    font-size: 9px;

    font-weight: 700;
}


.dashboard-status-a span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00BFFF;

    box-shadow: 0 0 8px #00BFFF;
}


/* CHART */

.dashboard-chart-a {
    position: relative;

    height: 210px;

    margin-top: 25px;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 100% 42px;
}


.chart-line-a {
    position: absolute;

    left: -5%;
    top: 62%;

    width: 115%;
    height: 100px;

    border-top: 3px solid #00BFFF;

    transform: rotate(-14deg);

    filter:
        drop-shadow(0 0 7px rgba(0,191,255,0.8));

    border-radius: 50%;
}


.chart-point-a {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #00BFFF;

    border: 2px solid #0D1117;

    box-shadow:
        0 0 14px #00BFFF;

    z-index: 2;
}


.point-one-a {
    left: 10%;
    top: 68%;
}


.point-two-a {
    left: 30%;
    top: 61%;
}


.point-three-a {
    left: 49%;
    top: 53%;
}


.point-four-a {
    left: 70%;
    top: 39%;
}


.point-five-a {
    right: 7%;
    top: 20%;
}


/* DASHBOARD STATS */

.dashboard-stats-a {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 10px;
}


.dashboard-stat-a {
    padding: 15px;

    border-radius: 12px;

    background: rgba(255,255,255,0.035);

    border: 1px solid rgba(255,255,255,0.055);
}


.dashboard-stat-a span {
    display: block;

    color: #737e8e;

    font-size: 10px;
}


.dashboard-stat-a strong {
    display: block;

    margin-top: 4px;

    font-family: "Poppins", sans-serif;

    color: #ffffff;

    font-size: 19px;
}


/* =========================================================
   GOALS SECTION
========================================================= */

.goals-section-a {
    padding: 115px 0;
}


.goal-grid-a {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 16px;
}


.goal-card-a {
    position: relative;

    padding: 27px;

    min-height: 390px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 17px;

    background: rgba(255,255,255,0.025);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}


.goal-card-a:hover {
    transform: translateY(-8px);

    border-color: rgba(0,191,255,0.4);

    background: rgba(0,191,255,0.035);
}


.goal-icon-a {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(0,191,255,0.08);

    border: 1px solid rgba(0,191,255,0.15);

    color: #00BFFF;

    font-size: 11px;

    font-weight: 800;
}


.goal-card-a h3 {
    margin-top: 25px;

    font-family: "Poppins", sans-serif;

    font-size: 20px;
}


.goal-card-a p {
    margin-top: 12px;

    color: #808b9b;

    font-size: 13px;

    line-height: 1.75;
}


.goal-services-a {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 20px;
}


.goal-services-a span {
    padding: 5px 8px;

    border-radius: 5px;

    background: rgba(255,255,255,0.045);

    color: #8c97a7;

    font-size: 9px;
}


.goal-link-a {
    position: absolute;

    left: 27px;
    bottom: 25px;

    color: #00BFFF;

    font-size: 11px;

    font-weight: 800;
}


/* =========================================================
   SERVICES
========================================================= */

.services-section-a {
    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.015),
            transparent
        );

    border-top: 1px solid rgba(255,255,255,0.04);

    border-bottom: 1px solid rgba(255,255,255,0.04);
}


.service-filter-a {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 50px;
}


.filter-button-a {
    padding: 10px 17px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 30px;

    background: transparent;

    color: #7f8999;

    cursor: pointer;

    font-size: 11px;

    font-weight: 700;

    transition: 0.3s ease;
}


.filter-button-a:hover,
.filter-button-a.active-a {
    color: #001017;

    background: #00BFFF;

    border-color: #00BFFF;
}


.services-grid-a {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 18px;
}


.service-card-a {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 590px;

    padding: 30px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.012)
        );

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}


.service-card-a::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -100px;
    bottom: -100px;

    border-radius: 50%;

    background: #00BFFF;

    filter: blur(90px);

    opacity: 0;

    transition: 0.4s ease;
}


.service-card-a:hover {
    transform: translateY(-8px);

    border-color: rgba(0,191,255,0.35);
}


.service-card-a:hover::after {
    opacity: 0.12;
}


.service-card-top-a {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.service-number-a {
    color: #596474;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 700;
}


.service-icon-a {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 54px;
    height: 34px;

    padding: 0 9px;

    border: 1px solid rgba(0,191,255,0.2);

    border-radius: 8px;

    color: #00BFFF;

    background: rgba(0,191,255,0.06);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.8px;
}


.service-category-a {
    display: block;

    margin-top: 30px;

    color: #00BFFF;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.service-card-a h3 {
    margin-top: 9px;

    font-family: "Poppins", sans-serif;

    font-size: 23px;

    line-height: 1.25;
}


.service-card-a > p {
    margin-top: 15px;

    color: #808b9b;

    font-size: 13px;

    line-height: 1.75;
}


.service-points-a {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 9px;

    margin-top: 24px;

    padding: 0;

    list-style: none;
}


.service-points-a li {
    position: relative;

    padding-left: 15px;

    color: #9ca5b2;

    font-size: 10px;

    line-height: 1.4;
}


.service-points-a li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 7px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #00BFFF;

    box-shadow:
        0 0 7px rgba(0,191,255,0.7);
}


.service-link-a {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: auto;

    padding-top: 25px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    border-top: 1px solid rgba(255,255,255,0.06);
}


.service-link-a span {
    color: #00BFFF;

    font-size: 19px;

    transition: 0.3s ease;
}


.service-link-a:hover {
    color: #00BFFF;
}


.service-link-a:hover span {
    transform: translateX(5px);
}


/* =========================================================
   SERVICE MATCH
========================================================= */

.service-match-section-a {
    padding: 120px 0;
}


.match-layout-a {
    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 70px;

    align-items: center;
}


.match-content-a h2 {
    margin-top: 5px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(35px,4vw,54px);

    line-height: 1.1;

    letter-spacing: -1.5px;
}


.match-content-a h2 span {
    display: block;

    color: #00BFFF;
}


.match-content-a p {
    margin-top: 22px;

    color: #808b9b;

    font-size: 14px;

    line-height: 1.8;
}


.match-content-a .primary-button-a {
    margin-top: 28px;
}


.match-table-a {
    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 16px;

    overflow: hidden;

    background: rgba(255,255,255,0.025);
}


.match-row-a {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    padding: 19px 23px;

    border-bottom: 1px solid rgba(255,255,255,0.06);

    color: #858f9e;

    font-size: 12px;
}


.match-row-a:last-child {
    border-bottom: 0;
}


.match-header-a {
    color: #566171;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.3px;

    background: rgba(255,255,255,0.025);
}


.match-row-a strong {
    color: #00BFFF;

    font-weight: 700;
}


/* =========================================================
   WHY
========================================================= */

.why-section-a {
    padding: 120px 0;

    border-top: 1px solid rgba(255,255,255,0.05);
}


.why-grid-a {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 15px;
}


.why-card-a {
    padding: 30px;

    min-height: 250px;

    border: 1px solid rgba(255,255,255,0.07);

    border-radius: 16px;

    background: rgba(255,255,255,0.02);

    transition: 0.35s ease;
}


.why-card-a:hover {
    transform: translateY(-7px);

    border-color: rgba(0,191,255,0.28);
}


.why-number-a {
    color: #00BFFF;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 800;
}


.why-card-a h3 {
    margin-top: 35px;

    font-family: "Poppins", sans-serif;

    font-size: 20px;
}


.why-card-a p {
    margin-top: 12px;

    color: #7d8898;

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   PROCESS
========================================================= */

.process-section-a {
    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,191,255,0.025),
            transparent
        );
}


.process-timeline-a {
    position: relative;

    display: grid;

    grid-template-columns: repeat(5,1fr);

    gap: 0;
}


.process-timeline-a::before {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;

    top: 27px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00BFFF,
            transparent
        );

    opacity: 0.35;
}


.process-step-a {
    position: relative;

    text-align: center;

    padding: 0 12px;
}


.process-number-a {
    position: relative;

    z-index: 2;

    width: 55px;
    height: 55px;

    margin: 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #0D1117;

    border: 1px solid rgba(0,191,255,0.35);

    color: #00BFFF;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    font-weight: 800;

    box-shadow:
        0 0 25px rgba(0,191,255,0.08);
}


.process-content-a span {
    display: block;

    margin-top: 25px;

    color: #00BFFF;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.process-content-a h3 {
    margin-top: 6px;

    font-family: "Poppins", sans-serif;

    font-size: 17px;
}


.process-content-a p {
    margin-top: 8px;

    color: #707b8c;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   RESULTS
========================================================= */

.results-section-a {
    padding: 100px 0;
}


.results-box-a {
    padding: 55px;

    border: 1px solid rgba(0,191,255,0.18);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(0,191,255,0.08),
            transparent 35%
        ),
        rgba(255,255,255,0.025);
}


.results-heading-a {
    text-align: center;
}


.results-heading-a h2 {
    margin-top: 10px;

    font-family: "Poppins", sans-serif;

    font-size: 38px;

    line-height: 1.2;
}


.results-heading-a h2 span {
    color: #00BFFF;
}


.results-grid-a {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    margin-top: 50px;
}


.result-item-a {
    text-align: center;

    padding: 10px;

    border-right: 1px solid rgba(255,255,255,0.07);
}


.result-item-a:last-child {
    border-right: 0;
}


.result-item-a strong {
    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 35px;

    color: #00BFFF;
}


.result-item-a span {
    display: block;

    margin-top: 4px;

    color: #727d8d;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


/* =========================================================
   SEO CONTENT
========================================================= */

.seo-content-section-a {
    padding: 100px 0;

    border-top: 1px solid rgba(255,255,255,0.05);
}


.seo-content-wrapper-a {
    max-width: 900px;

    margin: auto;

    padding: 45px;

    border-left: 2px solid #00BFFF;

    background:
        linear-gradient(
            90deg,
            rgba(0,191,255,0.04),
            transparent
        );
}


.seo-content-label-a {
    color: #00BFFF;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.seo-content-wrapper-a h2 {
    margin-top: 12px;

    font-family: "Poppins", sans-serif;

    font-size: 31px;

    line-height: 1.25;
}


.seo-content-wrapper-a p {
    margin-top: 18px;

    color: #7f8a9a;

    font-size: 13px;

    line-height: 1.85;
}


/* =========================================================
   FAQ
========================================================= */

.faq-section-a {
    padding: 120px 0;
}


.faq-list-a {
    max-width: 850px;

    margin: auto;
}


.faq-item-a {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}


.faq-question-a {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 23px 4px;

    border: 0;

    background: transparent;

    color: #ffffff;

    text-align: left;

    cursor: pointer;

    font-size: 14px;

    font-weight: 700;
}


.faq-question-a strong {
    color: #00BFFF;

    font-size: 22px;

    font-weight: 400;

    transition: 0.3s ease;
}


.faq-item-a.active-a
.faq-question-a strong {
    transform: rotate(45deg);
}


.faq-answer-a {
    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease;
}


.faq-answer-a p {
    padding: 0 30px 22px 4px;

    color: #778293;

    font-size: 12px;

    line-height: 1.8;
}


.faq-item-a.active-a
.faq-answer-a {
    max-height: 180px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.contact-cta-a {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    border-top: 1px solid rgba(255,255,255,0.06);
}


.cta-background-a {
    position: absolute;

    inset: 0;
}


.cta-glow-a {
    position: absolute;

    width: 600px;
    height: 300px;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    background: #00BFFF;

    filter: blur(150px);

    opacity: 0.07;
}


.cta-content-a {
    position: relative;

    max-width: 800px;

    margin: auto;

    text-align: center;
}


.cta-content-a h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(42px,6vw,70px);

    line-height: 1.05;

    letter-spacing: -2.5px;
}


.cta-content-a h2 span {
    display: block;

    color: #00BFFF;
}


.cta-content-a > p {
    max-width: 650px;

    margin: 24px auto 0;

    color: #818c9c;

    font-size: 15px;

    line-height: 1.8;
}


.cta-actions-a {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}


.cta-trust-a {
    margin-top: 27px;

    color: #596474;

    font-size: 10px;

    letter-spacing: 0.4px;
}


.cta-trust-a span {
    color: #00BFFF;

    padding: 0 8px;
}


/* =========================================================
   SERVICE FILTER JS SUPPORT
========================================================= */

.service-card-a.hide-a {
    display: none;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.goal-card-a,
.service-card-a,
.why-card-a,
.process-step-a,
.results-box-a,
.faq-item-a {
    animation: reveal-a 0.7s ease both;
}


@keyframes reveal-a {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   SELECTION
========================================================= */

::selection {
    background: #00BFFF;

    color: #001017;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 7px;
}


::-webkit-scrollbar-track {
    background: #0D1117;
}


::-webkit-scrollbar-thumb {
    background: #1c3b47;

    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
    background: #00BFFF;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    .hero-layout-a {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .hero-content-a {
        max-width: 750px;

        margin: auto;

        text-align: center;
    }


    .hero-label-a {
        margin: auto;
    }


    .hero-description-a {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-actions-a,
    .hero-trust-a {
        justify-content: center;
    }


    .goal-grid-a {
        grid-template-columns: repeat(2,1fr);
    }


    .services-grid-a {
        grid-template-columns: repeat(2,1fr);
    }


    .why-grid-a {
        grid-template-columns: repeat(2,1fr);
    }


    .match-layout-a {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .process-timeline-a {
        grid-template-columns: repeat(3,1fr);

        row-gap: 45px;
    }


    .process-timeline-a::before {
        display: none;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    .container-a {
        width: min(92%, 550px);
    }


    .services-hero-a {
        min-height: auto;

        padding: 80px 0 70px;
    }


    .hero-title-a {
        font-size: 44px;

        letter-spacing: -2px;
    }


    .hero-description-a {
        font-size: 14px;
    }


    .hero-actions-a {
        flex-direction: column;
    }


    .hero-actions-a a {
        width: 100%;
    }


    .hero-trust-a {
        gap: 12px;
    }


    .trust-divider-a {
        height: 28px;
    }


    .trust-item-a strong {
        font-size: 18px;
    }


    .trust-item-a span {
        font-size: 8px;
    }


    .growth-dashboard-a {
        padding: 20px;
    }


    .dashboard-header-a {
        align-items: flex-start;

        gap: 15px;
    }


    .dashboard-status-a {
        display: none;
    }


    .dashboard-chart-a {
        height: 170px;
    }


    .goals-section-a,
    .services-section-a,
    .service-match-section-a,
    .why-section-a,
    .process-section-a,
    .faq-section-a {
        padding: 80px 0;
    }


    .results-section-a,
    .seo-content-section-a {
        padding: 70px 0;
    }


    .section-heading-a {
        margin-bottom: 45px;
    }


    .section-heading-a h2 {
        font-size: 36px;
    }


    .goal-grid-a,
    .services-grid-a,
    .why-grid-a {
        grid-template-columns: 1fr;
    }


    .goal-card-a {
        min-height: 360px;
    }


    .service-card-a {
        min-height: auto;

        padding: 25px;
    }


    .service-points-a {
        margin-bottom: 20px;
    }


    .match-content-a {
        text-align: center;
    }


    .match-row-a {
        grid-template-columns: 1fr;

        gap: 4px;

        padding: 16px;
    }


    .process-timeline-a {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .process-step-a {
        display: grid;

        grid-template-columns: 60px 1fr;

        gap: 20px;

        text-align: left;

        align-items: start;
    }


    .process-number-a {
        margin: 0;
    }


    .process-content-a span {
        margin-top: 0;
    }


    .results-box-a {
        padding: 35px 20px;
    }


    .results-heading-a h2 {
        font-size: 30px;
    }


    .results-grid-a {
        grid-template-columns: repeat(2,1fr);

        gap: 25px;

        margin-top: 35px;
    }


    .result-item-a {
        border-right: 0;
    }


    .result-item-a strong {
        font-size: 29px;
    }


    .seo-content-wrapper-a {
        padding: 30px 25px;
    }


    .seo-content-wrapper-a h2 {
        font-size: 25px;
    }


    .contact-cta-a {
        padding: 90px 0;
    }


    .cta-content-a h2 {
        font-size: 43px;

        letter-spacing: -1.8px;
    }


    .cta-actions-a {
        flex-direction: column;
    }


    .cta-actions-a a {
        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .hero-title-a {
        font-size: 37px;
    }


    .hero-trust-a {
        gap: 8px;
    }


    .trust-item-a strong {
        font-size: 16px;
    }


    .dashboard-stats-a {
        grid-template-columns: 1fr;
    }


    .service-points-a {
        grid-template-columns: 1fr;
    }


    .filter-button-a {
        padding: 9px 13px;

        font-size: 10px;
    }


    .cta-content-a h2 {
        font-size: 37px;
    }

}




/* =========================================== */


              /* video page of css */

/* =============================================== */



/* =========================================================
   GROWTH HARBOUR — VIDEO PAGES CSS
   Theme:
   Background  : #0D1117
   Electric Blue: #00BFFF
   Gold         : #FFD700
   ========================================================= */


/* =========================
   ROOT VARIABLES
========================= */

:root {

    --v-bg: #0D1117;
    --v-bg-soft: #111821;
    --v-card: #121A24;

    --v-blue: #00BFFF;
    --v-gold: #FFD700;

    --v-white: #F5F7FA;
    --v-muted: #9BA8B7;

    --v-border: rgba(0, 191, 255, 0.18);

    --v-blue-glow:
        0 0 25px rgba(0, 191, 255, 0.18);

    --v-gold-glow:
        0 0 25px rgba(255, 215, 0, 0.15);

    --v-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);

    --v-radius: 24px;

}


/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(0, 191, 255, 0.10),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 20%,
            rgba(255, 215, 0, 0.07),
            transparent 25%
        ),

        var(--v-bg);

    color: var(--v-white);

    font-family:
        "Inter",
        "Poppins",
        Arial,
        sans-serif;

    line-height: 1.65;

    overflow-x: hidden;

}


/* =========================
   GENERAL ELEMENTS
========================= */

a {
    color: inherit;
    text-decoration: none;
}


img {
    display: block;
    width: 100%;
    object-fit: cover;
}


button {
    font-family: inherit;
}


::selection {
    background: var(--v-blue);
    color: #001018;
}


/* =========================
   MAIN CONTAINER
========================= */

.v-container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================
   SECTIONS
========================= */

.v-section {

    padding: 100px 0;

    position: relative;

}


/* =========================
   KICKER
========================= */

.v-kicker {

    color: var(--v-blue);

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    margin-bottom: 15px;

}


/* =========================
   HEADINGS
========================= */

.v-title {

    font-size: clamp(
        2.2rem,
        5vw,
        4.5rem
    );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -0.04em;

    max-width: 900px;

}


.v-title span {

    color: var(--v-blue);

    text-shadow:
        0 0 30px rgba(
            0,
            191,
            255,
            0.18
        );

}


.v-subtitle {

    color: var(--v-muted);

    max-width: 760px;

    margin-top: 22px;

    font-size: 1.08rem;

    line-height: 1.8;

}


/* =========================
   HERO SECTION
========================= */

.v-hero {

    min-height: 90vh;

    padding:
        120px
        0
        80px;

    display: flex;

    align-items: center;

    position: relative;

}


.v-hero::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    background:
        radial-gradient(
            circle,
            rgba(
                0,
                191,
                255,
                0.12
            ),
            transparent 70%
        );

    top: -150px;

    left: -120px;

    pointer-events: none;

}


.v-hero::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                215,
                0,
                0.08
            ),
            transparent 70%
        );

    right: -100px;

    bottom: -100px;

    pointer-events: none;

}


.v-hero-grid {

    display: grid;

    grid-template-columns:
        1.1fr
        0.9fr;

    gap: 55px;

    align-items: center;

}


/* =========================
   HERO CONTENT
========================= */

.v-hero-content {

    position: relative;

    z-index: 2;

}


.v-hero-content .v-title {

    max-width: 750px;

}


.v-hero-content .v-subtitle {

    max-width: 680px;

}


/* =========================
   HERO IMAGE
========================= */

.v-hero-card {

    position: relative;

    border-radius:
        var(--v-radius);

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #121B25,
            #0E141C
        );

    border:
        1px solid
        var(--v-border);

    box-shadow:
        var(--v-shadow),
        var(--v-blue-glow);

    transform:
        perspective(1000px)
        rotateY(-3deg);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;

}


.v-hero-card:hover {

    transform:
        perspective(1000px)
        rotateY(0deg)
        translateY(-6px);

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.45),

        0 0 45px
        rgba(0, 191, 255, 0.15);

}


.v-hero-card img {

    height: 460px;

    object-fit: cover;

    transition:
        transform 0.7s ease;

}


.v-hero-card:hover img {

    transform: scale(1.05);

}


/* =========================
   BUTTONS
========================= */

.v-btns {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 32px;

}


.v-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding:
        13px
        24px;

    border-radius: 999px;

    font-weight: 800;

    font-size: 0.95rem;

    border:
        1px solid
        var(--v-border);

    transition:
        all 0.3s ease;

}


.v-btn-primary {

    background:
        var(--v-blue);

    color: #001018;

    box-shadow:
        0 0 30px
        rgba(
            0,
            191,
            255,
            0.18
        );

}


.v-btn-primary:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 35px
        rgba(
            0,
            191,
            255,
            0.30
        );

}


.v-btn-gold {

    background:
        var(--v-gold);

    color: #171300;

    box-shadow:
        var(--v-gold-glow);

}


.v-btn-gold:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 35px
        rgba(
            255,
            215,
            0,
            0.25
        );

}


.v-btn-outline {

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    color:
        var(--v-white);

}


.v-btn-outline:hover {

    border-color:
        var(--v-blue);

    color:
        var(--v-blue);

    transform:
        translateY(-3px);

}


/* =========================
   GRID
========================= */

.v-grid-3 {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

    margin-top: 42px;

}


.v-grid-2 {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 30px;

    align-items: center;

}


/* =========================
   CARDS
========================= */

.v-card {

    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(
                18,
                26,
                36,
                0.92
            ),
            rgba(
                13,
                19,
                27,
                0.90
            )
        );

    border:
        1px solid
        var(--v-border);

    border-radius:
        var(--v-radius);

    overflow: hidden;

    box-shadow:
        var(--v-shadow);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}


.v-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(
                0,
                191,
                255,
                0.06
            ),
            transparent 45%
        );

    opacity: 0;

    transition:
        opacity 0.35s ease;

    pointer-events: none;

}


.v-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(
            0,
            191,
            255,
            0.42
        );

    box-shadow:
        0 25px 70px
        rgba(
            0,
            0,
            0,
            0.42
        ),

        0 0 30px
        rgba(
            0,
            191,
            255,
            0.08
        );

}


.v-card:hover::before {

    opacity: 1;

}


.v-card-body {

    padding: 30px;

}


.v-card h3 {

    font-size: 1.3rem;

    margin-bottom: 10px;

    color:
        var(--v-white);

}


.v-card p {

    color:
        var(--v-muted);

    line-height: 1.75;

}


/* =========================
   SERVICE ICON
========================= */

.v-service-icon {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color:
        var(--v-blue);

    border:
        1px solid
        var(--v-border);

    background:
        rgba(
            0,
            191,
            255,
            0.06
        );

    font-size: 1.4rem;

    margin-bottom: 22px;

    box-shadow:
        inset 0 0 20px
        rgba(
            0,
            191,
            255,
            0.04
        );

}


/* =========================
   STATISTICS
========================= */

.v-stat-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;

    margin-top: 45px;

}


.v-stat {

    padding: 27px 22px;

    border:
        1px solid
        var(--v-border);

    border-radius: 20px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;

}


.v-stat:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(
            0,
            191,
            255,
            0.38
        );

}


.v-stat strong {

    display: block;

    font-size: 2.1rem;

    line-height: 1;

    margin-bottom: 8px;

    color:
        var(--v-gold);

    text-shadow:
        0 0 20px
        rgba(
            255,
            215,
            0,
            0.12
        );

}


.v-stat span {

    color:
        var(--v-muted);

    font-size: 0.92rem;

}


/* =========================
   CAROUSEL
========================= */

.v-carousel {

    position: relative;

    margin-top: 42px;

    overflow: hidden;

}


.v-track {

    display: flex;

    gap: 20px;

    overflow: hidden;

    width: 100%;

}


.v-slide {

    flex:
        0 0
        calc(
            (100% - 40px) / 3
        );

    overflow: hidden;

    border-radius: 20px;

}


.v-slide img {

    height: 310px;

    width: 100%;

    border:
        1px solid
        var(--v-border);

    border-radius: 20px;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        border-color 0.3s ease;

}


.v-slide:hover img {

    transform:
        scale(1.04);

    border-color:
        rgba(
            0,
            191,
            255,
            0.45
        );

}


/* =========================
   CAROUSEL BUTTONS
========================= */

.v-carousel-btns {

    display: flex;

    gap: 10px;

    margin-top: 22px;

}


.v-arrow {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border:
        1px solid
        var(--v-border);

    background:
        var(--v-card);

    color:
        var(--v-white);

    cursor: pointer;

    font-size: 1.15rem;

    transition:
        all 0.3s ease;

}


.v-arrow:hover {

    color:
        var(--v-blue);

    border-color:
        var(--v-blue);

    box-shadow:
        0 0 20px
        rgba(
            0,
            191,
            255,
            0.15
        );

    transform:
        translateY(-2px);

}


/* =========================
   LIST
========================= */

.v-list {

    display: grid;

    gap: 14px;

    margin-top: 22px;

}


.v-list li {

    list-style: none;

    color:
        var(--v-muted);

    padding-left: 28px;

    position: relative;

}


.v-list li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 0;

    color:
        var(--v-blue);

    font-weight: 900;

}


/* =========================
   PROCESS
========================= */

.v-process {

    counter-reset:
        v-process;

}


.v-process .v-card {

    padding: 30px;

}


.v-process .v-card::after {

    counter-increment:
        v-process;

    content:
        "0" counter(v-process);

    position: absolute;

    right: 22px;

    top: 20px;

    color:
        rgba(
            0,
            191,
            255,
            0.18
        );

    font-size: 2rem;

    font-weight: 900;

}


.v-process .v-card h3 {

    color:
        var(--v-white);

}


/* =========================
   FAQ
========================= */

.v-faq details {

    border-bottom:
        1px solid
        var(--v-border);

    padding:
        22px 0;

}


.v-faq summary {

    cursor: pointer;

    list-style: none;

    position: relative;

    padding-right: 35px;

    font-size: 1.05rem;

    font-weight: 800;

    color:
        var(--v-white);

}


.v-faq summary::-webkit-details-marker {

    display: none;

}


.v-faq summary::after {

    content: "+";

    position: absolute;

    right: 0;

    top: -3px;

    font-size: 1.5rem;

    color:
        var(--v-blue);

    transition:
        transform 0.3s ease;

}


.v-faq details[open]
summary::after {

    transform:
        rotate(45deg);

}


.v-faq details p {

    color:
        var(--v-muted);

    padding-top: 14px;

    max-width: 800px;

}


/* =========================
   CTA
========================= */

.v-cta {

    padding:
        65px;

    border:
        1px solid
        var(--v-border);

    border-radius:
        30px;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(
                0,
                191,
                255,
                0.10
            ),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(
                255,
                215,
                0,
                0.07
            ),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            rgba(
                0,
                191,
                255,
                0.04
            ),
            rgba(
                255,
                215,
                0,
                0.025
            )
        );

    position: relative;

    overflow: hidden;

}


.v-cta::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:
        rgba(
            0,
            191,
            255,
            0.08
        );

    filter:
        blur(50px);

    right: -50px;

    top: -50px;

}


.v-cta .v-title {

    position: relative;

    z-index: 1;

}


.v-cta .v-subtitle {

    position: relative;

    z-index: 1;

}


.v-cta .v-btns {

    position: relative;

    z-index: 1;

}


/* =========================
   SMALL TEXT
========================= */

.v-small {

    font-size: 0.92rem;

    color:
        var(--v-muted);

}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar {

    width: 8px;

}


::-webkit-scrollbar-track {

    background:
        var(--v-bg);

}


::-webkit-scrollbar-thumb {

    background:
        rgba(
            0,
            191,
            255,
            0.35
        );

    border-radius: 20px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--v-blue);

}


/* =========================
   TABLET
========================= */

@media (max-width: 1000px) {

    .v-hero {

        padding:
            100px
            0
            70px;

    }


    .v-hero-grid {

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .v-hero-card {

        max-width: 750px;

        width: 100%;

        margin: auto;

        transform: none;

    }


    .v-grid-3 {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .v-grid-2 {

        grid-template-columns:
            1fr;

    }


    .v-stat-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .v-slide {

        flex:
            0 0
            calc(
                (100% - 20px) / 2
            );

    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 650px) {

    .v-container {

        width:
            min(
                92%,
                540px
            );

    }


    .v-section {

        padding:
            70px 0;

    }


    .v-hero {

        min-height:
            auto;

        padding:
            85px 0
            60px;

    }


    .v-title {

        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );

        letter-spacing:
            -0.03em;

    }


    .v-subtitle {

        font-size:
            0.98rem;

    }


    .v-hero-card {

        border-radius:
            20px;

    }


    .v-hero-card img {

        height:
            310px;

    }


    .v-grid-3 {

        grid-template-columns:
            1fr;

    }


    .v-grid-2 {

        grid-template-columns:
            1fr;

    }


    .v-stat-grid {

        grid-template-columns:
            1fr;

    }


    .v-slide {

        flex:
            0 0 100%;

    }


    .v-slide img {

        height:
            270px;

    }


    .v-card-body {

        padding:
            25px;

    }


    .v-btns {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .v-btn {

        width:
            100%;

    }


    .v-cta {

        padding:
            35px 25px;

        border-radius:
            24px;

    }


    .v-kicker {

        font-size:
            0.72rem;

    }

}


/* =========================
   EXTRA SMALL DEVICES
========================= */

@media (max-width: 400px) {

    .v-hero {

        padding-top:
            70px;

    }


    .v-title {

        font-size:
            2rem;

    }


    .v-hero-card img {

        height:
            250px;

    }


    .v-stat strong {

        font-size:
            1.8rem;

    }


    .v-arrow {

        width:
            43px;

        height:
            43px;

    }

}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}




/* =========================================== */


          /* videos page og css */



/* ============================================ */

/* =========================================================
   GROWTH HARBOUR - VIDEO GALLERY
   ========================================================= */

:root {
    --bg-v: #0D1117;
    --bg-light-v: #111821;
    --card-v: #141C26;
    --blue-v: #00BFFF;
    --gold-v: #FFD700;
    --white-v: #F5F7FA;
    --text-v: #9BA8B7;
    --border-v: rgba(0, 191, 255, 0.18);
}

/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-v);
    color: var(--white-v);
    font-family: "Poppins", "Inter", Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}


/* CONTAINER */

.video-gallery-container-v {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
}


/* KICKER */

.video-gallery-kicker-v {
    display: inline-block;
    color: var(--blue-v);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 18px;
}


/* HERO */

.video-gallery-hero-v {
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.video-gallery-hero-v::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    top: -180px;
    left: -180px;
    border-radius: 50%;
    background: rgba(0, 191, 255, 0.08);
    filter: blur(80px);
}

.video-gallery-hero-v::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    right: -180px;
    bottom: -180px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.06);
    filter: blur(80px);
}

.video-gallery-hero-content-v {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.video-gallery-title-v {
    font-size: clamp(48px, 7vw, 100px);
    line-height: 1;
    letter-spacing: -4px;
    font-weight: 800;
}

.video-gallery-title-v span {
    color: var(--blue-v);
}

.video-gallery-subtitle-v {
    max-width: 720px;
    margin-top: 28px;
    color: var(--text-v);
    font-size: 17px;
    line-height: 1.8;
}


/* BUTTONS */

.video-gallery-buttons-v {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 35px;
}

.video-gallery-btn-v {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    transition: 0.3s ease;
}

.video-gallery-btn-primary-v {
    background: var(--blue-v);
    color: #061018;
}

.video-gallery-btn-primary-v:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 191, 255, 0.25);
}

.video-gallery-btn-outline-v {
    border: 1px solid var(--border-v);
    color: var(--white-v);
    background: rgba(255, 255, 255, 0.02);
}

.video-gallery-btn-outline-v:hover {
    border-color: var(--blue-v);
    color: var(--blue-v);
    transform: translateY(-4px);
}


/* SECTION HEADING */

.video-section-heading-v {
    max-width: 760px;
    margin-bottom: 45px;
}

.video-section-heading-v h2 {
    font-size: clamp(35px, 5vw, 65px);
    line-height: 1.1;
    letter-spacing: -2px;
}

.video-section-heading-v h2 span {
    color: var(--blue-v);
}

.video-section-heading-v p {
    margin-top: 18px;
    color: var(--text-v);
    font-size: 16px;
}


/* CATEGORY */

.video-category-section-v {
    padding: 100px 0;
}

.video-category-grid-v {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.video-category-card-v {
    position: relative;
    min-height: 220px;
    padding: 28px;
    background: var(--card-v);
    border: 1px solid var(--border-v);
    border-radius: 22px;
    overflow: hidden;
    transition: 0.3s ease;
}

.video-category-card-v:hover {
    transform: translateY(-7px);
    border-color: var(--blue-v);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.video-category-icon-v {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border: 1px solid var(--border-v);
    border-radius: 14px;
    color: var(--blue-v);
    font-size: 20px;
}

.video-category-card-v h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

.video-category-card-v p {
    color: var(--text-v);
    font-size: 14px;
}


/* VIDEO SHOWCASE */

.video-showcase-section-v {
    padding: 100px 0;
}

.video-gallery-grid-v {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* VIDEO CARD */

.video-gallery-card-v {
    overflow: hidden;
    background: var(--card-v);
    border: 1px solid var(--border-v);
    border-radius: 22px;
    transition: 0.3s ease;
}

.video-gallery-card-v:hover {
    transform: translateY(-8px);
    border-color: var(--blue-v);
}


/* BLANK VIDEO BOX */

.video-thumbnail-v {
    width: 100%;
    height: 280px;
    position: relative;
    background: #080C11;
    border-bottom: 1px solid var(--border-v);
}


/* PLAY BUTTON */

.video-play-v {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    border: 1px solid rgba(0, 191, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 191, 255, 0.06);
    color: var(--blue-v);
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s ease;
}

.video-play-v:hover {
    background: var(--blue-v);
    color: #061018;
    transform: translate(-50%, -50%) scale(1.08);
}


/* VIDEO CONTENT */

.video-gallery-card-content-v {
    padding: 25px;
}

.video-gallery-card-content-v > span {
    color: var(--gold-v);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.video-gallery-card-content-v h3 {
    margin: 9px 0;
    font-size: 21px;
}

.video-gallery-card-content-v p {
    color: var(--text-v);
    font-size: 14px;
    line-height: 1.7;
}

.video-watch-link-v {
    display: inline-block;
    margin-top: 18px;
    color: var(--blue-v);
    font-size: 14px;
    font-weight: 700;
}

.video-watch-link-v:hover {
    color: var(--gold-v);
}


/* STATS */

.video-stats-section-v {
    padding: 80px 0;
}

.video-stats-grid-v {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.video-stat-v {
    padding: 30px 15px;
    text-align: center;
    background: var(--card-v);
    border: 1px solid var(--border-v);
    border-radius: 18px;
}

.video-stat-v strong {
    display: block;
    color: var(--gold-v);
    font-size: 35px;
}

.video-stat-v span {
    color: var(--text-v);
    font-size: 13px;
}


/* CTA */

.video-gallery-cta-section-v {
    padding: 100px 0;
}

.video-gallery-cta-v {
    padding: 80px 30px;
    text-align: center;
    border: 1px solid var(--border-v);
    border-radius: 28px;
    background: var(--card-v);
}

.video-gallery-cta-v h2 {
    font-size: clamp(38px, 5vw, 65px);
    line-height: 1.1;
    letter-spacing: -2px;
}

.video-gallery-cta-v h2 span {
    color: var(--blue-v);
}

.video-gallery-cta-v p {
    max-width: 700px;
    margin: 20px auto 30px;
    color: var(--text-v);
}


/* TABLET */

@media (max-width: 1000px) {

    .video-category-grid-v {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-gallery-grid-v {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-stats-grid-v {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* MOBILE */

@media (max-width: 650px) {

    .video-gallery-container-v {
        width: 92%;
    }

    .video-gallery-hero-v {
        min-height: auto;
        padding: 90px 0 70px;
    }

    .video-gallery-title-v {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .video-gallery-subtitle-v {
        font-size: 15px;
    }

    .video-gallery-buttons-v {
        flex-direction: column;
    }

    .video-gallery-btn-v {
        width: 100%;
    }

    .video-category-section-v,
    .video-showcase-section-v,
    .video-gallery-cta-section-v {
        padding: 70px 0;
    }

    .video-category-grid-v,
    .video-gallery-grid-v,
    .video-stats-grid-v {
        grid-template-columns: 1fr;
    }

    .video-thumbnail-v {
        height: 230px;
    }

    .video-gallery-cta-v {
        padding: 55px 20px;
    }
}




/* =========================================== */


           blog


/* ============================================ */




:root {
    --bg-v: #0D1117;
    --card-v: #141C26;
    --blue-v: #00BFFF;
    --gold-v: #FFD700;
    --white-v: #F5F7FA;
    --text-v: #9BA8B7;
    --border-v: rgba(0, 191, 255, 0.18);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-v);
    color: var(--white-v);
    font-family: "Poppins", "Inter", Arial, sans-serif;
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}

.blog-container-v {
    width: 92%;
    max-width: 1180px;
    margin: auto;
}


/* HERO */

.blog-hero-v {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.blog-hero-v::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -200px;
    left: -200px;
    border-radius: 50%;
    background: rgba(0, 191, 255, 0.09);
    filter: blur(80px);
}

.blog-kicker-v {
    color: var(--blue-v);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.blog-hero-v h1 {
    max-width: 950px;
    margin-top: 18px;
    font-size: clamp(50px, 7vw, 100px);
    line-height: 1;
    letter-spacing: -5px;
}

.blog-hero-v h1 span {
    display: block;
    color: var(--blue-v);
}

.blog-hero-v p {
    max-width: 720px;
    margin-top: 28px;
    color: var(--text-v);
    font-size: 17px;
}

.blog-search-v {
    display: flex;
    max-width: 650px;
    margin-top: 35px;
    border: 1px solid var(--border-v);
    border-radius: 50px;
    overflow: hidden;
    background: var(--card-v);
}

.blog-search-v input {
    flex: 1;
    padding: 17px 22px;
    border: 0;
    outline: 0;
    color: white;
    background: transparent;
}

.blog-search-v button {
    padding: 0 28px;
    border: 0;
    background: var(--blue-v);
    color: #061018;
    font-weight: 800;
    cursor: pointer;
}


/* HEADINGS */

.blog-heading-v {
    margin-bottom: 40px;
}

.blog-heading-v > span {
    color: var(--blue-v);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.blog-heading-v h2 {
    margin-top: 12px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.1;
    letter-spacing: -3px;
}

.blog-heading-v strong {
    color: var(--blue-v);
}


/* FEATURED */

.blog-featured-v {
    padding: 100px 0;
}

.blog-carousel-v {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.blog-feature-card-v {
    overflow: hidden;
    border: 1px solid var(--border-v);
    border-radius: 24px;
    background: var(--card-v);
    transition: 0.35s ease;
}

.blog-feature-card-v:hover {
    transform: translateY(-8px);
    border-color: var(--blue-v);
}

.blog-image-placeholder-v,
.blog-card-image-v {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 12px;
    letter-spacing: 3px;
    background:
        linear-gradient(
            135deg,
            #111A24,
            #080C11
        );
}

.blog-feature-content-v {
    padding: 26px;
}

.blog-feature-content-v > span {
    color: var(--gold-v);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.blog-feature-content-v h3 {
    margin: 10px 0;
    font-size: 23px;
    line-height: 1.3;
}

.blog-feature-content-v p {
    color: var(--text-v);
    font-size: 14px;
}

.blog-feature-content-v a,
.blog-card-content-v a {
    display: inline-block;
    margin-top: 18px;
    color: var(--blue-v);
    font-weight: 700;
}


/* CATEGORY */

.blog-category-v {
    padding: 100px 0;
}

.blog-category-grid-v {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.blog-category-card-v {
    padding: 30px;
    min-height: 230px;
    border: 1px solid var(--border-v);
    border-radius: 22px;
    background: var(--card-v);
    transition: 0.3s ease;
}

.blog-category-card-v:hover {
    transform: translateY(-7px);
    border-color: var(--blue-v);
}

.blog-category-card-v strong {
    color: var(--gold-v);
    font-size: 13px;
}

.blog-category-card-v h3 {
    margin: 28px 0 10px;
    font-size: 21px;
}

.blog-category-card-v p {
    color: var(--text-v);
    font-size: 14px;
}


/* LATEST */

.blog-latest-v {
    padding: 100px 0;
}

.blog-grid-v {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.blog-card-v {
    overflow: hidden;
    border: 1px solid var(--border-v);
    border-radius: 22px;
    background: var(--card-v);
    transition: 0.3s ease;
}

.blog-card-v:hover {
    transform: translateY(-7px);
    border-color: var(--blue-v);
}

.blog-card-image-v {
    height: 230px;
}

.blog-card-content-v {
    padding: 25px;
}

.blog-card-content-v small {
    color: var(--gold-v);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.blog-card-content-v h3 {
    margin: 10px 0;
    font-size: 21px;
    line-height: 1.3;
}

.blog-card-content-v p {
    color: var(--text-v);
    font-size: 14px;
}


/* CTA */

.blog-cta-v {
    padding: 100px 0;
}

.blog-cta-box-v {
    padding: 80px 30px;
    text-align: center;
    border: 1px solid var(--border-v);
    border-radius: 30px;
    background: var(--card-v);
}

.blog-cta-box-v > span {
    color: var(--gold-v);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.blog-cta-box-v h2 {
    max-width: 800px;
    margin: 15px auto;
    font-size: clamp(38px, 5vw, 65px);
    line-height: 1.1;
}

.blog-cta-box-v h2 strong {
    color: var(--blue-v);
}

.blog-cta-box-v p {
    max-width: 650px;
    margin: auto;
    color: var(--text-v);
}

.blog-cta-box-v a {
    display: inline-block;
    margin-top: 30px;
    padding: 14px 28px;
    border-radius: 50px;
    background: var(--blue-v);
    color: #061018;
    font-weight: 800;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .blog-carousel-v,
    .blog-grid-v {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-category-grid-v {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {

    .blog-hero-v {
        min-height: auto;
        padding: 90px 0;
    }

    .blog-hero-v h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .blog-search-v {
        flex-direction: column;
        border-radius: 18px;
    }

    .blog-search-v button {
        padding: 14px;
    }

    .blog-carousel-v,
    .blog-grid-v,
    .blog-category-grid-v {
        grid-template-columns: 1fr;
    }

    .blog-featured-v,
    .blog-category-v,
    .blog-latest-v,
    .blog-cta-v {
        padding: 70px 0;
    }
}



/* =========================================
   GROWTH HARBOUR BLOG
   Premium Dark Theme
   ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", "Poppins", Arial, sans-serif;
    background: #0d1117;
    color: #f5f7fa;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================
   GLOBAL CONTAINER
   ========================================= */

.blog-container-v {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================
   HERO
   ========================================= */

.blog-hero-v {
    min-height: 720px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hero-grid-v {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent
    );
}

.hero-glow-v {
    position: absolute;
    width: 650px;
    height: 650px;

    background: rgba(0, 191, 255, 0.10);

    filter: blur(100px);

    border-radius: 50%;

    top: -280px;
    right: -150px;
}

.blog-hero-v::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    background: rgba(255, 215, 0, 0.045);

    filter: blur(110px);

    border-radius: 50%;

    left: -220px;
    bottom: -280px;
}

.hero-content-v {
    max-width: 850px;
    position: relative;
    z-index: 2;
}

.hero-badge-v {
    display: inline-flex;

    padding: 9px 17px;

    border: 1px solid rgba(0, 191, 255, 0.35);

    border-radius: 50px;

    color: #00bfff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    background: rgba(0, 191, 255, 0.05);

    margin-bottom: 28px;
}

.hero-title-v {
    font-size: clamp(48px, 7vw, 88px);

    line-height: 1.02;

    letter-spacing: -4px;

    max-width: 950px;

    font-weight: 800;
}

.hero-title-v span,
.section-heading-v h2 span,
.section-heading-center-v h2 span,
.why-text-v h2 span,
.cta-content-v h2 span {
    color: #00bfff;
}

.hero-description-v {
    max-width: 700px;

    color: #9da7b5;

    font-size: 18px;

    margin-top: 28px;

    line-height: 1.8;
}

.hero-actions-v {
    display: flex;

    gap: 14px;

    margin-top: 35px;

    flex-wrap: wrap;
}


/* =========================================
   BUTTONS
   ========================================= */

.primary-btn-v,
.secondary-btn-v {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 52px;

    padding: 0 24px;

    border-radius: 9px;

    font-size: 14px;

    font-weight: 700;

    transition: 0.3s ease;
}

.primary-btn-v {
    background: #00bfff;
    color: #061018;

    box-shadow:
        0 0 25px rgba(0, 191, 255, 0.18);
}

.primary-btn-v:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(0, 191, 255, 0.25);
}

.secondary-btn-v {
    border: 1px solid rgba(255,255,255,0.15);

    background: rgba(255,255,255,0.035);

    color: #ffffff;
}

.secondary-btn-v:hover {
    border-color: #00bfff;

    color: #00bfff;

    transform: translateY(-3px);
}


/* =========================================
   HERO STATS
   ========================================= */

.hero-stats-v {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

    margin-top: 80px;

    max-width: 650px;

    position: relative;
    z-index: 3;
}

.stat-box-v {
    padding: 22px;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,0.08);

    background: rgba(255,255,255,0.025);

    backdrop-filter: blur(12px);
}

.stat-box-v strong {
    display: block;

    color: #00bfff;

    font-size: 28px;
}

.stat-box-v span {
    color: #858f9d;

    font-size: 12px;
}


/* =========================================
   SECTIONS
   ========================================= */

.featured-section-v,
.categories-section-v,
.articles-section-v,
.why-section-v,
.faq-section-v {
    padding: 110px 0;
}

.featured-section-v {
    background: #0b0f14;
}

.categories-section-v {
    background: #0d1117;
}

.articles-section-v {
    background: #0b0f14;
}


/* =========================================
   SECTION HEADING
   ========================================= */

.section-heading-v {
    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 45px;
}

.section-label-v {
    display: block;

    color: #00bfff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

    margin-bottom: 13px;
}

.section-heading-v h2,
.section-heading-center-v h2,
.why-text-v h2 {
    font-size: clamp(34px, 5vw, 54px);

    line-height: 1.1;

    letter-spacing: -2px;
}

.section-heading-v > p {
    max-width: 400px;

    color: #8993a1;

    font-size: 14px;
}

.section-heading-center-v {
    text-align: center;

    max-width: 700px;

    margin: 0 auto 55px;
}

.section-heading-center-v p {
    color: #8993a1;

    margin-top: 18px;

    font-size: 15px;
}


/* =========================================
   FEATURED ARTICLE
   ========================================= */

.featured-card-v {
    display: grid;

    grid-template-columns: 1.05fr 1fr;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 18px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );

    transition: 0.4s ease;
}

.featured-card-v:hover {
    border-color: rgba(0,191,255,0.35);

    transform: translateY(-5px);
}

.featured-image-v {
    min-height: 450px;

    position: relative;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(0,191,255,0.14),
            transparent 40%
        ),
        #101721;

    padding: 22px;
}

.image-placeholder-v {
    width: 100%;
    height: 100%;

    min-height: 300px;

    border: 1px dashed rgba(255,255,255,0.16);

    display: flex;

    align-items: center;
    justify-content: center;

    color: #55606e;

    font-size: 11px;

    letter-spacing: 2px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(0,191,255,0.04),
            rgba(255,215,0,0.02)
        );
}

.featured-tag-v,
.article-category-v {
    position: absolute;

    top: 35px;
    left: 35px;

    background: #00bfff;

    color: #061018;

    padding: 7px 12px;

    border-radius: 5px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.featured-content-v {
    padding: 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.article-meta-v {
    display: flex;

    gap: 9px;

    color: #697482;

    font-size: 11px;

    margin-bottom: 17px;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.featured-content-v h3 {
    font-size: clamp(28px, 4vw, 42px);

    line-height: 1.15;

    letter-spacing: -1.5px;

    margin-bottom: 20px;
}

.featured-content-v p {
    color: #8993a1;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 30px;
}

.read-more-v,
.article-link-v {
    color: #00bfff;

    font-size: 13px;

    font-weight: 700;

    display: inline-flex;

    gap: 10px;

    align-items: center;

    transition: 0.3s;
}

.read-more-v:hover,
.article-link-v:hover {
    color: #ffd700;

    gap: 14px;
}


/* =========================================
   CATEGORY CARDS
   ========================================= */

.category-grid-v {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}

.category-card-v {
    min-height: 290px;

    padding: 27px;

    border-radius: 14px;

    border: 1px solid rgba(255,255,255,0.07);

    background: rgba(255,255,255,0.025);

    position: relative;

    overflow: hidden;

    transition: 0.35s ease;
}

.category-card-v::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    background: rgba(0,191,255,0.08);

    filter: blur(40px);

    border-radius: 50%;

    right: -50px;
    bottom: -50px;
}

.category-card-v:hover {
    transform: translateY(-7px);

    border-color: rgba(0,191,255,0.4);

    background: rgba(0,191,255,0.035);
}

.category-card-v > span {
    color: #4f5966;

    font-size: 11px;

    position: absolute;

    top: 25px;
    right: 25px;
}

.category-icon-v {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    border: 1px solid rgba(0,191,255,0.25);

    color: #00bfff;

    font-size: 20px;

    margin-bottom: 35px;
}

.category-card-v h3 {
    font-size: 19px;

    margin-bottom: 12px;
}

.category-card-v p {
    color: #788391;

    font-size: 13px;

    line-height: 1.7;

    min-height: 65px;
}

.category-card-v b {
    display: inline-block;

    color: #00bfff;

    font-size: 12px;

    margin-top: 20px;
}


/* =========================================
   ARTICLES
   ========================================= */

.view-all-v {
    color: #00bfff;

    font-size: 13px;

    font-weight: 700;
}

.articles-grid-v {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}

.article-card-v {
    border: 1px solid rgba(255,255,255,0.07);

    border-radius: 14px;

    overflow: hidden;

    background: rgba(255,255,255,0.025);

    transition: 0.35s ease;
}

.article-card-v:hover {
    transform: translateY(-7px);

    border-color: rgba(0,191,255,0.35);
}

.article-image-v {
    height: 220px;

    position: relative;

    padding: 15px;

    background: #111821;
}

.article-image-v .image-placeholder-v {
    min-height: unset;

    height: 100%;
}

.article-category-v {
    top: 27px;
    left: 27px;
}

.article-content-v {
    padding: 28px;
}

.article-content-v h3 {
    font-size: 20px;

    line-height: 1.35;

    margin-bottom: 14px;

    letter-spacing: -0.4px;
}

.article-content-v p {
    color: #788391;

    font-size: 13px;

    line-height: 1.75;

    margin-bottom: 23px;
}


/* =========================================
   WHY SECTION
   ========================================= */

.why-section-v {
    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(0,191,255,0.05),
            transparent 35%
        ),
        #0d1117;
}

.why-content-v {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 90px;

    align-items: center;
}

.why-text-v p {
    color: #858f9d;

    font-size: 15px;

    line-height: 1.8;

    margin: 25px 0 32px;

    max-width: 500px;
}

.benefits-grid-v {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;
}

.benefit-box-v {
    padding: 30px;

    border-radius: 13px;

    border: 1px solid rgba(255,255,255,0.07);

    background: rgba(255,255,255,0.025);
}

.benefit-box-v strong {
    color: #ffd700;

    font-size: 12px;
}

.benefit-box-v h3 {
    font-size: 18px;

    margin: 20px 0 9px;
}

.benefit-box-v p {
    color: #77818f;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================
   CTA
   ========================================= */

.blog-cta-v {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    text-align: center;

    border-top: 1px solid rgba(255,255,255,0.06);

    border-bottom: 1px solid rgba(255,255,255,0.06);

    background: #090d12;
}

.cta-glow-v {
    position: absolute;

    width: 600px;
    height: 300px;

    background: rgba(0,191,255,0.08);

    filter: blur(90px);

    border-radius: 50%;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
}

.cta-content-v {
    position: relative;

    z-index: 2;
}

.cta-content-v h2 {
    font-size: clamp(38px, 6vw, 65px);

    line-height: 1.08;

    letter-spacing: -3px;

    max-width: 800px;

    margin: 0 auto;
}

.cta-content-v p {
    max-width: 600px;

    margin: 22px auto 30px;

    color: #858f9d;

    font-size: 15px;
}

.cta-actions-v {
    display: flex;

    justify-content: center;

    gap: 13px;

    flex-wrap: wrap;
}


/* =========================================
   FAQ
   ========================================= */

.faq-section-v {
    background: #0b0f14;
}

.faq-grid-v {
    max-width: 850px;

    margin: 0 auto;
}

.faq-item-v {
    border-bottom: 1px solid rgba(255,255,255,0.09);

    padding: 24px 0;
}

.faq-item-v summary {
    cursor: pointer;

    list-style: none;

    font-size: 17px;

    font-weight: 600;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}

.faq-item-v summary::-webkit-details-marker {
    display: none;
}

.faq-item-v summary span {
    color: #00bfff;

    font-size: 25px;

    font-weight: 300;

    transition: 0.3s;
}

.faq-item-v[open] summary span {
    transform: rotate(45deg);

    color: #ffd700;
}

.faq-item-v p {
    color: #7f8996;

    font-size: 14px;

    line-height: 1.8;

    max-width: 750px;

    padding-top: 17px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1000px) {

    .category-grid-v {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-card-v {
        grid-template-columns: 1fr;
    }

    .featured-image-v {
        min-height: 350px;
    }

    .articles-grid-v {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-content-v {
        grid-template-columns: 1fr;

        gap: 50px;
    }
}


@media (max-width: 700px) {

    .blog-hero-v {
        min-height: auto;

        padding: 100px 0 70px;
    }

    .hero-title-v {
        font-size: 48px;

        letter-spacing: -2.5px;
    }

    .hero-description-v {
        font-size: 15px;
    }

    .hero-stats-v {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .section-heading-v {
        display: block;
    }

    .section-heading-v > p {
        margin-top: 20px;
    }

    .featured-content-v {
        padding: 32px 25px;
    }

    .featured-image-v {
        min-height: 280px;

        padding: 15px;
    }

    .category-grid-v,
    .articles-grid-v {
        grid-template-columns: 1fr;
    }

    .benefits-grid-v {
        grid-template-columns: 1fr;
    }

    .featured-section-v,
    .categories-section-v,
    .articles-section-v,
    .why-section-v,
    .faq-section-v {
        padding: 75px 0;
    }

    .blog-cta-v {
        padding: 80px 0;
    }

    .cta-content-v h2 {
        letter-spacing: -2px;
    }
}


@media (max-width: 480px) {

    .blog-container-v {
        width: 90%;
    }

    .hero-title-v {
        font-size: 40px;
    }

    .hero-actions-v,
    .cta-actions-v {
        flex-direction: column;
    }

    .primary-btn-v,
    .secondary-btn-v {
        width: 100%;
    }

    .category-card-v {
        min-height: 260px;
    }

    .article-image-v {
        height: 200px;
    }
}






/* =================================== */

                /* careers */


/* =================================== */




/* =========================================================
   GROWTH HARBOUR — CAREERS PAGE
   Theme:
   #0D1117  Dark Background
   #00BFFF  Electric Blue
   #FFD700  Gold
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #0d1117;
    color: #f5f7fa;
    font-family: "Inter", "Poppins", Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 7px;
}

body::-webkit-scrollbar-track {
    background: #0d1117;
}

body::-webkit-scrollbar-thumb {
    background: #00bfff;
    border-radius: 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

::selection {
    background: #00bfff;
    color: #071016;
}


/* =========================================================
   COMMON CONTAINER
   ========================================================= */

.career-container-v {
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================================
   COMMON LABEL
   ========================================================= */

.career-label-v {
    display: inline-block;
    color: #00bfff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.8px;
    margin-bottom: 24px;
    position: relative;
    padding-left: 30px;
}

.career-label-v::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 1px;
    background: #00bfff;
    left: 0;
    top: 50%;
}


/* =========================================================
   COMMON BUTTONS
   ========================================================= */

.career-buttons-v {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.career-primary-btn-v,
.career-secondary-btn-v {
    min-height: 54px;
    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.career-primary-btn-v {
    background: #00bfff;
    color: #071016;

    box-shadow:
        0 0 0 rgba(0, 191, 255, 0),
        0 10px 30px rgba(0, 191, 255, 0.08);
}

.career-primary-btn-v:hover {
    transform: translateY(-4px);

    box-shadow:
        0 0 30px rgba(0, 191, 255, 0.25),
        0 15px 40px rgba(0, 191, 255, 0.15);
}

.career-secondary-btn-v {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.025);
    color: #e9edf2;
}

.career-secondary-btn-v:hover {
    transform: translateY(-4px);
    color: #00bfff;
    border-color: rgba(0, 191, 255, 0.5);
    background: rgba(0, 191, 255, 0.04);
}


/* =========================================================
   COMMON HEADINGS
   ========================================================= */

.career-heading-v {
    max-width: 720px;
    margin-bottom: 55px;
}

.career-heading-v > span,
.jobs-header-v > div > span,
.application-info-v > span,
.culture-main-v > span {
    color: #00bfff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.career-heading-v h2,
.jobs-header-v h2,
.application-info-v h2,
.culture-main-v h2 {
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.05;
    letter-spacing: -2.5px;
    font-weight: 800;
    margin-top: 14px;
}

.career-heading-v h2 strong,
.jobs-header-v h2 strong,
.application-info-v h2 strong,
.culture-main-v h2 strong {
    color: #00bfff;
    font-weight: inherit;
}

.career-heading-v p {
    color: #7f8996;
    margin-top: 20px;
    font-size: 15px;
    max-width: 650px;
}


/* =========================================================
   PAGE 01 — CAREER HERO
   ========================================================= */

.career-hero-v {
    min-height: 780px;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(0, 191, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 215, 0, 0.035),
            transparent 25%
        ),
        #0d1117;
}


/* Grid background */

.career-grid-v {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, 0.1)
        );
}


/* Blue glow */

.career-glow-v {
    position: absolute;

    width: 600px;
    height: 600px;

    right: -260px;
    top: -230px;

    border-radius: 50%;

    background: rgba(0, 191, 255, 0.1);

    filter: blur(100px);

    pointer-events: none;
}


/* Hero content */

.career-hero-content-v {
    max-width: 900px;
    position: relative;
    z-index: 2;
}

.career-hero-content-v h1 {
    font-size: clamp(50px, 7.5vw, 94px);
    line-height: 0.98;
    letter-spacing: -5px;
    font-weight: 800;
}

.career-hero-content-v h1 span {
    display: block;
    color: #00bfff;
}

.career-hero-content-v p {
    max-width: 680px;

    color: #87919e;

    font-size: 17px;
    line-height: 1.8;

    margin-top: 30px;
}


/* Stats */

.career-stats-v {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    max-width: 680px;

    gap: 14px;

    margin-top: 75px;

    position: relative;
    z-index: 2;
}

.career-stats-v div {
    padding: 23px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.025);

    backdrop-filter: blur(16px);

    transition: 0.3s ease;
}

.career-stats-v div:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 191, 255, 0.3);
}

.career-stats-v strong {
    display: block;

    color: #00bfff;

    font-size: 29px;
    line-height: 1;
}

.career-stats-v span {
    display: block;

    color: #747f8d;

    font-size: 12px;

    margin-top: 9px;
}


/* =========================================================
   PAGE 02 — LIFE HERO
   ========================================================= */

.life-hero-v,
.jobs-hero-v,
.internship-hero-v,
.culture-hero-v,
.application-hero-v {
    position: relative;
    overflow: hidden;

    padding: 155px 0 115px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(0, 191, 255, 0.11),
            transparent 30%
        ),
        #0d1117;
}

.life-hero-v::after,
.jobs-hero-v::after,
.internship-hero-v::after,
.culture-hero-v::after,
.application-hero-v::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    bottom: -150px;

    border-radius: 50%;

    border: 1px solid rgba(0, 191, 255, 0.1);
}

.life-hero-v h2,
.jobs-hero-v h2,
.internship-hero-v h2,
.culture-hero-v h2,
.application-hero-v h2 {
    position: relative;
    z-index: 2;

    font-size: clamp(48px, 7vw, 88px);
    line-height: 0.98;
    letter-spacing: -4px;
    font-weight: 800;
}

.life-hero-v h2 span,
.jobs-hero-v h2 span,
.internship-hero-v h2 span,
.culture-hero-v h2 span,
.application-hero-v h2 span {
    display: block;
    color: #00bfff;
}

.life-hero-v p,
.jobs-hero-v p,
.internship-hero-v p,
.culture-hero-v p,
.application-hero-v p {
    max-width: 670px;

    color: #7e8996;

    font-size: 17px;
    line-height: 1.8;

    margin-top: 28px;

    position: relative;
    z-index: 2;
}


/* =========================================================
   LIFE GALLERY
   ========================================================= */



/* Carousel dots */

.carousel-dots-v {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.carousel-dots-v span {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dots-v span:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Active Dot (Modern Pill Shape Effect) */
.carousel-dots-v span.active {
    width: 28px;
    border-radius: 12px;
    background: #38bdf8; /* Blue Accent */
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* =========================================================
   LIFE VALUES
   ========================================================= */

.life-values-v {
    padding: 105px 0;
    background: #0d1117;
}

.life-value-grid-v {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.life-value-grid-v article {
    min-height: 285px;

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.02);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.life-value-grid-v article:hover {
    transform: translateY(-8px);

    border-color: rgba(0, 191, 255, 0.35);

    background: rgba(0, 191, 255, 0.025);
}

.life-value-grid-v article > span {
    color: #ffd700;
    font-size: 12px;
    font-weight: 700;
}

.life-value-grid-v h3 {
    font-size: 22px;
    margin-top: 55px;
    margin-bottom: 12px;
}

.life-value-grid-v p {
    color: #778290;
    font-size: 13px;
}


/* =========================================================
   PAGE 03 — OPEN POSITIONS
   ========================================================= */

.jobs-section-v {
    padding: 115px 0;
    background: #0a0e13;
}

.jobs-header-v {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 50px;
}

.jobs-header-v p {
    color: #737e8b;
    font-size: 13px;
}

.jobs-header-v p a {
    color: #00bfff;
    transition: 0.3s ease;
}

.jobs-header-v p a:hover {
    color: #ffd700;
}


/* Jobs */

.jobs-list-v {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.job-card-v {
    display: grid;

    grid-template-columns: 65px 1fr 150px 70px;

    align-items: center;

    gap: 25px;

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.022);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.job-card-v:hover {
    transform: translateX(6px);

    border-color: rgba(0, 191, 255, 0.35);

    background: rgba(0, 191, 255, 0.025);
}

.job-number-v {
    color: #ffd700;
    font-size: 13px;
    font-weight: 700;
}

.job-info-v > span {
    color: #00bfff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.8px;
}

.job-info-v h3 {
    font-size: 21px;
    margin: 7px 0;
}

.job-info-v p {
    color: #717c89;
    font-size: 12px;
}

.job-meta-v {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.job-meta-v span {
    color: #7d8793;
    font-size: 11px;
}

.job-apply-v {
    color: #00bfff;

    font-size: 12px;
    font-weight: 800;

    transition: 0.3s ease;
}

.job-apply-v:hover {
    color: #ffd700;
    transform: translateX(4px);
}


/* =========================================================
   PAGE 04 — INTERNSHIP
   ========================================================= */

.internship-path-v {
    padding: 115px 0;
    background: #0a0e13;
}

.internship-grid-v {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.internship-grid-v article {
    min-height: 310px;

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.022);

    transition: 0.35s ease;
}

.internship-grid-v article:hover {
    transform: translateY(-8px);

    border-color: rgba(0, 191, 255, 0.35);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.18);
}

.internship-grid-v article > span {
    color: #ffd700;
    font-size: 12px;
}

.internship-grid-v h3 {
    font-size: 21px;
    margin-top: 65px;
    margin-bottom: 13px;
}

.internship-grid-v p {
    color: #778290;
    font-size: 13px;
}


/* Internship benefits */

.internship-benefits-v {
    padding: 110px 0;
    background: #0d1117;
}

.internship-benefits-v h2 {
    font-size: clamp(40px, 5vw, 62px);
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 50px;
}

.internship-benefits-v h2 strong {
    color: #00bfff;
}

.benefit-line-v {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.benefit-line-v div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 25px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.benefit-line-v strong {
    color: #ffd700;
    font-size: 12px;
}

.benefit-line-v span {
    color: #b8c0c9;
    font-size: 14px;
}


/* =========================================================
   PAGE 05 — CULTURE
   ========================================================= */

.culture-section-v {
    padding: 115px 0;
    background: #0a0e13;
}

.culture-grid-v {
    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr;

    gap: 15px;
}

.culture-main-v {
    grid-row: span 2;

    padding: 45px;

    min-height: 480px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 1px solid rgba(0, 191, 255, 0.2);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0, 191, 255, 0.09),
            transparent 35%
        ),
        rgba(255, 255, 255, 0.018);
}

.culture-main-v h2 {
    margin-top: 15px;
}

.culture-main-v p {
    color: #7b8693;

    font-size: 14px;

    line-height: 1.8;

    margin-top: 25px;

    max-width: 500px;
}

.culture-card-v {
    min-height: 230px;

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.02);

    transition: 0.35s ease;
}

.culture-card-v:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 191, 255, 0.3);
}

.culture-card-v > span {
    color: #ffd700;
    font-size: 12px;
}

.culture-card-v h3 {
    font-size: 21px;
    margin-top: 45px;
}

.culture-card-v p {
    color: #778290;
    font-size: 13px;
    margin-top: 8px;
}


/* Quote */

.culture-quote-v {
    padding: 135px 0;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 191, 255, 0.08),
            transparent 45%
        ),
        #0d1117;
}

.quote-mark-v {
    color: #00bfff;
    font-size: 90px;
    line-height: 0.6;
    font-family: Georgia, serif;
}

.culture-quote-v h2 {
    max-width: 850px;

    margin: 35px auto 15px;

    font-size: clamp(38px, 5vw, 65px);

    line-height: 1.05;

    letter-spacing: -2px;
}

.culture-quote-v h2 strong {
    color: #00bfff;
}

.culture-quote-v p {
    color: #7d8793;
}


/* =========================================================
   PAGE 06 — APPLICATION
   ========================================================= */

.application-section-v {
    padding: 115px 0;
    background: #0a0e13;
}

.application-layout-v {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 80px;

    align-items: start;
}

.application-info-v h2 {
    margin-top: 15px;
}

.application-info-v > p {
    color: #7c8794;

    font-size: 14px;

    line-height: 1.8;

    margin-top: 25px;
}


/* Application points */

.application-points-v {
    margin-top: 45px;
}

.application-points-v div {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.application-points-v span {
    color: #ffd700;
    font-size: 12px;
    font-weight: 700;
}

.application-points-v p {
    color: #9ca5af;
    font-size: 13px;
}


/* =========================================================
   APPLICATION FORM
   ========================================================= */

.career-form-v {
    padding: 40px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.18);
}

.form-row-v {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.form-group-v {
    margin-bottom: 20px;
}

.form-group-v label {
    display: block;

    color: #a7afb8;

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 8px;
}

.form-group-v input,
.form-group-v textarea,
.form-group-v select {
    width: 100%;

    padding: 14px 15px;

    color: #f5f7fa;

    background: #111720;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 7px;

    outline: none;

    font-size: 13px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.form-group-v input::placeholder,
.form-group-v textarea::placeholder {
    color: #4e5966;
}

.form-group-v input:focus,
.form-group-v textarea:focus,
.form-group-v select:focus {
    border-color: #00bfff;

    background: #101821;

    box-shadow:
        0 0 0 3px rgba(0, 191, 255, 0.06);
}

.form-group-v textarea {
    min-height: 150px;
    resize: vertical;
}

.form-group-v select {
    cursor: pointer;
}

.career-form-v .career-primary-btn-v {
    width: 100%;
    border: none;
    cursor: pointer;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .career-hero-v {
        min-height: 700px;
    }

    .life-value-grid-v,
    .internship-grid-v {
        grid-template-columns: repeat(2, 1fr);
    }

    .culture-grid-v {
        grid-template-columns: 1fr 1fr;
    }

    .culture-main-v {
        grid-column: span 2;
        grid-row: auto;
        min-height: 350px;
    }

    .application-layout-v {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .job-card-v {
        grid-template-columns: 55px 1fr 120px 60px;
        gap: 18px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .career-container-v {
        width: 90%;
    }


    /* Hero */

    .career-hero-v {
        min-height: auto;
        padding: 110px 0 80px;
    }

    .career-hero-content-v h1,
    .life-hero-v h2,
    .jobs-hero-v h2,
    .internship-hero-v h2,
    .culture-hero-v h2,
    .application-hero-v h2 {
        font-size: 48px;
        letter-spacing: -2.5px;
    }

    .career-hero-content-v p,
    .life-hero-v p,
    .jobs-hero-v p,
    .internship-hero-v p,
    .culture-hero-v p,
    .application-hero-v p {
        font-size: 15px;
    }


    /* Buttons */

    .career-buttons-v {
        flex-direction: column;
        align-items: stretch;
    }

    .career-primary-btn-v,
    .career-secondary-btn-v {
        width: 100%;
    }


    /* Stats */

    .career-stats-v {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }


    /* Common sections */

    .career-heading-v h2,
    .jobs-header-v h2,
    .application-info-v h2,
    .culture-main-v h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }


    /* Life */

    .life-hero-v,
    .jobs-hero-v,
    .internship-hero-v,
    .culture-hero-v,
    .application-hero-v {
        padding: 105px 0 80px;
    }

    .life-gallery-v,
    .life-values-v,
    .jobs-section-v,
    .internship-path-v,
    .internship-benefits-v,
    .culture-section-v,
    .application-section-v {
        padding: 80px 0;
    }

    .life-slide-v {
        min-width: 90%;
        height: 320px;
    }

    .life-value-grid-v,
    .internship-grid-v {
        grid-template-columns: 1fr;
    }


    /* Jobs */

    .jobs-header-v {
        display: block;
        margin-bottom: 35px;
    }

    .jobs-header-v p {
        margin-top: 18px;
    }

    .job-card-v {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 25px;
    }

    .job-number-v {
        margin-bottom: 3px;
    }

    .job-meta-v {
        flex-direction: row;
        gap: 15px;
    }

    .job-apply-v {
        display: inline-block;
        margin-top: 4px;
    }


    /* Culture */

    .culture-grid-v {
        grid-template-columns: 1fr;
    }

    .culture-main-v {
        grid-column: auto;
        min-height: auto;
    }

    .culture-quote-v {
        padding: 100px 0;
    }

    .culture-quote-v h2 {
        font-size: 40px;
    }


    /* Application */

    .application-layout-v {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .career-form-v {
        padding: 25px;
    }

    .form-row-v {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .career-container-v {
        width: 90%;
    }

    .career-label-v {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .career-hero-content-v h1,
    .life-hero-v h2,
    .jobs-hero-v h2,
    .internship-hero-v h2,
    .culture-hero-v h2,
    .application-hero-v h2 {
        font-size: 38px;
        letter-spacing: -2px;
    }

    .career-hero-content-v p,
    .life-hero-v p,
    .jobs-hero-v p,
    .internship-hero-v p,
    .culture-hero-v p,
    .application-hero-v p {
        font-size: 14px;
        line-height: 1.7;
    }

    .career-heading-v h2,
    .jobs-header-v h2,
    .application-info-v h2,
    .culture-main-v h2 {
        font-size: 35px;
    }

    .life-slide-v {
        min-width: 94%;
        height: 270px;
    }

    .culture-main-v {
        padding: 30px;
    }

    .career-form-v {
        padding: 20px;
    }

    .internship-benefits-v h2 {
        font-size: 42px;
    }

    .benefit-line-v div {
        gap: 20px;
    }

    .benefit-line-v span {
        text-align: right;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}





/* ============================== */

          /* contact */



/* ============================= */



/* =========================================================
   GROWTH HARBOUR - CONTACT PAGE
   Premium Dark / Navy / Blue / Gold Theme
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
    --navy: #050b14;
    --navy-2: #08111d;
    --navy-3: #0b1624;

    --blue: #1597e8;
    --blue-light: #39b6ff;
    --blue-dark: #0875bd;

    --gold: #f5b91e;
    --gold-light: #ffd45a;
    --gold-dark: #c99008;

    --white: #ffffff;
    --text: #dce7f2;
    --muted: #8494a7;
    --muted-2: #607185;

    --border: rgba(255, 255, 255, 0.09);
    --border-blue: rgba(21, 151, 232, 0.25);
    --border-gold: rgba(245, 185, 30, 0.25);

    --card: rgba(8, 17, 29, 0.78);
    --card-2: rgba(11, 22, 36, 0.88);

    --shadow: 0 25px 70px rgba(0, 0, 0, 0.45);

    --radius: 22px;
    --radius-small: 12px;

    --container: 1180px;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(21, 151, 232, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 35%,
            rgba(245, 185, 30, 0.045),
            transparent 25%
        ),
        var(--navy);

    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.containerv {
    width: min(92%, var(--container));
    margin: 0 auto;
}


/* =========================================================
   NAVBAR
========================================================= */

.site-headerv {
    position: relative;
    z-index: 100;
    background: rgba(5, 11, 20, 0.9);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
}

.navbarv {
    width: min(92%, 1320px);
    min-height: 82px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.brand-logov img {
    width: 150px;
    height: auto;
}

.nav-linksv {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-linksv a {
    position: relative;
    color: #9aaabd;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s ease;
}

.nav-linksv a:hover,
.nav-linksv a.activev {
    color: var(--white);
}

.nav-linksv a.activev::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--blue),
        var(--gold)
    );
}

.nav-ctav {
    padding: 12px 18px;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        var(--blue),
        #0878c7
    );

    color: white;
    font-size: 13px;
    font-weight: 700;

    box-shadow:
        0 10px 30px rgba(21, 151, 232, 0.2);

    transition: 0.3s ease;
}

.nav-ctav:hover {
    transform: translateY(-2px);

    box-shadow:
        0 15px 35px rgba(21, 151, 232, 0.32);
}


/* =========================================================
   HERO
========================================================= */

.contact-herov {
    position: relative;
    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border-bottom: 1px solid var(--border);

    background:
        linear-gradient(
            135deg,
            rgba(8, 17, 29, 0.96),
            rgba(5, 11, 20, 1)
        );
}

.contact-herov::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent
    );

    pointer-events: none;
}

.hero-glowv {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.glow-onev {
    width: 400px;
    height: 400px;

    background: rgba(21, 151, 232, 0.15);

    top: -150px;
    left: -100px;
}

.glow-twov {
    width: 350px;
    height: 350px;

    background: rgba(245, 185, 30, 0.08);

    right: -100px;
    bottom: -150px;
}

.contact-herov .containerv {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    align-items: center;
    gap: 60px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-contentv {
    padding: 80px 0;
}

.hero-labelv {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--gold);
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
    margin-bottom: 22px;
}

.hero-labelv span {
    width: 28px;
    height: 1px;
    background: var(--gold);
}

.hero-contentv h1 {
    max-width: 760px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.98;

    letter-spacing: -3px;

    margin-bottom: 28px;
}

.hero-contentv h1 span {
    display: block;

    background: linear-gradient(
        90deg,
        var(--blue-light),
        var(--blue),
        var(--gold)
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-contentv > p {
    max-width: 670px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.8;

    margin-bottom: 34px;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actionsv {
    display: flex;
    align-items: center;
    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 45px;
}

.primary-btnv,
.secondary-btnv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 50px;

    padding: 0 22px;

    border-radius: 11px;

    font-size: 14px;
    font-weight: 700;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.primary-btnv {
    background:
        linear-gradient(
            135deg,
            var(--blue),
            #0877c3
        );

    border: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow:
        0 14px 35px rgba(21, 151, 232, 0.2);
}

.primary-btnv:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 45px rgba(21, 151, 232, 0.35);
}

.secondary-btnv {
    color: var(--text);

    border: 1px solid var(--border);

    background: rgba(255, 255, 255, 0.025);
}

.secondary-btnv:hover {
    border-color: var(--border-blue);

    transform: translateY(-3px);
}


/* =========================================================
   HERO TRUST
========================================================= */

.hero-trustv {
    display: flex;
    align-items: center;
    gap: 25px;

    flex-wrap: wrap;
}

.trust-itemv {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trust-itemv > i {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: var(--blue-light);

    background: rgba(21, 151, 232, 0.08);

    border: 1px solid var(--border-blue);
}

.trust-itemv strong,
.trust-itemv span {
    display: block;
}

.trust-itemv strong {
    font-size: 12px;
    color: var(--text);
}

.trust-itemv span {
    font-size: 10px;
    color: var(--muted-2);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visualv {
    position: relative;

    width: 470px;
    height: 470px;

    margin: auto;
}

.logo-orbitv {
    position: absolute;

    width: 230px;
    height: 230px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21, 151, 232, 0.13),
            rgba(5, 11, 20, 0.85) 65%
        );

    border: 1px solid var(--border-blue);

    box-shadow:
        0 0 80px rgba(21, 151, 232, 0.13),
        inset 0 0 50px rgba(21, 151, 232, 0.06);
}

.logo-orbitv img {
    width: 170px;

    filter:
        drop-shadow(0 0 20px rgba(21, 151, 232, 0.18));
}

.visual-ringv {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border: 1px solid rgba(21, 151, 232, 0.16);
}

.ring-onev {
    width: 340px;
    height: 340px;
}

.ring-twov {
    width: 440px;
    height: 440px;

    border-color: rgba(245, 185, 30, 0.12);

    border-style: dashed;

    animation: rotateRingv 25s linear infinite;
}

@keyframes rotateRingv {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-cardv {
    position: absolute;

    padding: 14px 17px;

    min-width: 145px;

    background: rgba(7, 15, 25, 0.88);

    border: 1px solid var(--border);

    border-radius: 14px;

    backdrop-filter: blur(15px);

    box-shadow: var(--shadow);
}

.floating-cardv strong {
    display: block;

    font-size: 25px;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            var(--gold)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.floating-cardv span {
    color: var(--muted);

    font-size: 10px;
}

.card-topv {
    top: 35px;
    right: 5px;
}

.card-bottomv {
    bottom: 40px;
    left: 5px;
}

.card-rightv {
    right: -30px;
    bottom: 145px;
}


/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-sectionv {
    padding: 120px 0;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(21, 151, 232, 0.06),
            transparent 30%
        );
}

.section-headingv {
    max-width: 760px;
    margin-bottom: 55px;
}

.section-headingv.centerv {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-tagv {
    display: inline-block;

    color: var(--gold);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 15px;
}

.section-headingv h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(34px, 4vw, 55px);

    line-height: 1.08;

    letter-spacing: -2px;

    margin-bottom: 18px;
}

.section-headingv h2 span {
    color: var(--blue-light);
}

.section-headingv p {
    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   CONTACT LAYOUT
========================================================= */

.contact-layoutv {
    display: grid;

    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.65fr);

    gap: 25px;

    align-items: start;
}


/* =========================================================
   FORM CARD
========================================================= */

.form-cardv {
    padding: 35px;

    border-radius: var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(11, 22, 36, 0.94),
            rgba(6, 13, 22, 0.94)
        );

    border: 1px solid var(--border);

    box-shadow: var(--shadow);
}

.form-headerv {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding-bottom: 25px;

    margin-bottom: 25px;

    border-bottom: 1px solid var(--border);
}

.form-headerv span {
    color: var(--gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.8px;
}

.form-headerv h3 {
    margin-top: 7px;

    font-family: "Poppins", sans-serif;

    font-size: 25px;
}

.form-iconv {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    color: var(--blue-light);

    background: rgba(21, 151, 232, 0.08);

    border: 1px solid var(--border-blue);

    font-size: 20px;
}


/* =========================================================
   FORM
========================================================= */

.form-rowv {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.form-groupv {
    margin-bottom: 20px;
}

.form-groupv label {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #b9c7d5;

    font-size: 12px;
    font-weight: 600;

    margin-bottom: 8px;
}

.optionalv {
    color: var(--muted-2);

    font-size: 10px;

    font-weight: 400;
}

.form-groupv input,
.form-groupv select,
.form-groupv textarea {
    width: 100%;

    color: var(--white);

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid var(--border);

    border-radius: 10px;

    outline: none;

    font-size: 13px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.form-groupv input,
.form-groupv select {
    height: 49px;

    padding: 0 15px;
}

.form-groupv textarea {
    min-height: 145px;

    padding: 14px 15px;

    resize: vertical;
}

.form-groupv input::placeholder,
.form-groupv textarea::placeholder {
    color: #536477;
}

.form-groupv select {
    color: #9aaabd;
}

.form-groupv select option {
    background: #091321;

    color: white;
}

.form-groupv input:focus,
.form-groupv select:focus,
.form-groupv textarea:focus {
    border-color: var(--blue);

    background: rgba(21, 151, 232, 0.035);

    box-shadow:
        0 0 0 3px rgba(21, 151, 232, 0.08);
}


/* =========================================================
   LOGO UPLOAD
========================================================= */

.logo-uploadv {
    position: relative;

    min-height: 120px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 13px;

    border: 1px dashed rgba(21, 151, 232, 0.35);

    background: rgba(21, 151, 232, 0.025);

    transition: 0.3s ease;
}

.logo-uploadv:hover {
    border-color: var(--blue);
    background: rgba(21, 151, 232, 0.05);
}

.logo-uploadv input {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}

.upload-contentv {
    text-align: center;
}

.upload-iconv {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    margin: 0 auto 8px;

    color: var(--blue-light);

    border-radius: 10px;

    background: rgba(21, 151, 232, 0.1);
}

.upload-contentv strong {
    display: block;

    font-size: 12px;

    color: var(--text);
}

.upload-contentv span {
    display: block;

    margin-top: 3px;

    font-size: 10px;

    color: var(--muted-2);
}


/* =========================================================
   CHECKBOX
========================================================= */

.privacy-checkv {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;

    margin: 5px 0 20px;

    cursor: pointer;
}

.privacy-checkv input {
    width: 15px;
    height: 15px;

    margin-top: 1px;

    accent-color: var(--blue);

    flex-shrink: 0;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.submit-btnv {
    width: 100%;

    min-height: 53px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border: none;

    border-radius: 11px;

    color: white;

    font-size: 14px;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #0875bd
        );

    box-shadow:
        0 15px 35px rgba(21, 151, 232, 0.2);

    transition: 0.3s ease;
}

.submit-btnv:hover {
    transform: translateY(-2px);

    box-shadow:
        0 20px 45px rgba(21, 151, 232, 0.32);
}

.form-notev {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 14px;

    color: var(--muted-2);

    font-size: 10px;

    text-align: center;
}


/* =========================================================
   CONTACT SIDEBAR
========================================================= */

.contact-sidebarv {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.info-cardv,
.social-cardv {
    padding: 30px;

    border-radius: var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(11, 22, 36, 0.95),
            rgba(6, 13, 22, 0.95)
        );

    border: 1px solid var(--border);
}

.card-labelv {
    color: var(--gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;
}

.info-cardv h3 {
    font-family: "Poppins", sans-serif;

    font-size: 28px;

    line-height: 1.15;

    margin: 15px 0;
}

.info-cardv h3 span {
    color: var(--blue-light);
}

.info-cardv > p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.75;

    margin-bottom: 25px;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-detailv {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 0;

    border-top: 1px solid var(--border);

    transition: 0.3s ease;
}

.contact-detailv:hover {
    transform: translateX(4px);
}

.detail-iconv {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    color: var(--blue-light);

    background: rgba(21, 151, 232, 0.07);

    border: 1px solid var(--border-blue);
}

.contact-detailv small,
.contact-detailv strong {
    display: block;
}

.contact-detailv small {
    color: var(--muted-2);

    font-size: 10px;

    margin-bottom: 2px;
}

.contact-detailv strong {
    color: var(--text);

    font-size: 12px;

    word-break: break-word;
}

.response-badgev {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 18px;

    padding: 8px 11px;

    border-radius: 8px;

    color: var(--muted);

    background: rgba(21, 151, 232, 0.05);

    border: 1px solid var(--border-blue);

    font-size: 10px;
}

.response-badgev strong {
    color: var(--blue-light);
}

.online-dotv {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #28d17c;

    box-shadow:
        0 0 10px rgba(40, 209, 124, 0.8);
}


/* =========================================================
   SOCIAL
========================================================= */

.social-cardv > span {
    color: var(--gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.social-cardv h4 {
    font-family: "Poppins", sans-serif;

    margin: 7px 0 16px;

    font-size: 20px;
}

.social-linksv {
    display: flex;

    gap: 10px;
}

.social-linksv a {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: var(--muted);

    border: 1px solid var(--border);

    background: rgba(255, 255, 255, 0.02);

    transition: 0.3s ease;
}

.social-linksv a:hover {
    color: white;

    border-color: var(--blue);

    background: rgba(21, 151, 232, 0.1);

    transform: translateY(-3px);
}


/* =========================================================
   WHY SECTION
========================================================= */

.why-sectionv {
    padding: 110px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: rgba(255, 255, 255, 0.012);
}

.why-gridv {
    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 80px;

    align-items: start;
}

.why-headingv h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.08;

    letter-spacing: -2px;

    margin-bottom: 20px;
}

.why-headingv h2 span {
    display: block;

    color: var(--blue-light);
}

.why-headingv p {
    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 25px;
}

.text-linkv {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--blue-light);

    font-size: 13px;

    font-weight: 700;
}

.text-linkv:hover {
    color: var(--gold);
}

.why-pointsv {
    border-top: 1px solid var(--border);
}

.why-pointv {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid var(--border);
}

.why-pointv > span {
    color: var(--gold);

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 700;
}

.why-pointv h3 {
    font-size: 17px;

    margin-bottom: 6px;
}

.why-pointv p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   HELP SECTION
========================================================= */

.help-sectionv {
    padding: 120px 0;
}

.help-gridv {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.help-cardv {
    position: relative;

    min-height: 250px;

    padding: 27px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(11, 22, 36, 0.9),
            rgba(5, 11, 20, 0.9)
        );

    border: 1px solid var(--border);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.help-cardv::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -50px;
    top: -50px;

    border-radius: 50%;

    background: rgba(21, 151, 232, 0.08);

    filter: blur(15px);
}

.help-cardv:hover {
    transform: translateY(-7px);

    border-color: var(--border-blue);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3);
}

.help-cardv > i {
    color: var(--blue-light);

    font-size: 24px;

    margin-bottom: 25px;
}

.help-cardv h3 {
    font-family: "Poppins", sans-serif;

    font-size: 18px;

    margin-bottom: 9px;
}

.help-cardv p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;

    margin-bottom: 20px;
}

.help-cardv > span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--gold);

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   PROCESS
========================================================= */

.process-sectionv {
    padding: 115px 0;

    background: #07101b;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    overflow: hidden;
}

.process-gridv {
    position: relative;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;
}

.process-linev {
    height: 1px;

    width: 100%;

    margin: 10px 0 -10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            var(--gold),
            transparent
        );

    opacity: 0.35;
}

.process-itemv {
    position: relative;

    padding: 25px 10px;
}

.process-numberv {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--blue-light);

    background: var(--navy-3);

    border: 1px solid var(--border-blue);

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 22px;

    box-shadow:
        0 0 0 7px #07101b;
}

.process-itemv:nth-child(4) .process-numberv {
    color: var(--gold);
    border-color: var(--border-gold);
}

.process-itemv h3 {
    font-family: "Poppins", sans-serif;

    font-size: 17px;

    margin-bottom: 7px;
}

.process-itemv p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   FAQ
========================================================= */

.faq-sectionv {
    padding: 120px 0;
}

.faq-gridv {
    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 80px;

    align-items: start;
}

.faq-introv h2 {
    font-family: "Poppins", sans-serif;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.08;

    letter-spacing: -2px;

    margin-bottom: 18px;
}

.faq-introv h2 span {
    display: block;

    color: var(--blue-light);
}

.faq-introv p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;

    margin-bottom: 25px;
}

.faq-listv details {
    border-top: 1px solid var(--border);

    padding: 20px 0;
}

.faq-listv details:last-child {
    border-bottom: 1px solid var(--border);
}

.faq-listv summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    cursor: pointer;

    list-style: none;

    color: var(--text);

    font-size: 14px;

    font-weight: 600;
}

.faq-listv summary::-webkit-details-marker {
    display: none;
}

.faq-listv summary i {
    color: var(--blue-light);

    transition: transform 0.3s ease;
}

.faq-listv details[open] summary i {
    transform: rotate(45deg);
}

.faq-listv details p {
    max-width: 750px;

    padding-top: 13px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-ctav {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    text-align: center;

    border-top: 1px solid var(--border);

    background:
        radial-gradient(
            circle at center,
            rgba(21, 151, 232, 0.13),
            transparent 48%
        ),
        #050b14;
}

.cta-glowv {
    position: absolute;

    width: 400px;
    height: 400px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(21, 151, 232, 0.08);

    filter: blur(90px);

    pointer-events: none;
}

.cta-contentv {
    position: relative;
    z-index: 2;
}

.cta-contentv > span {
    color: var(--gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.cta-contentv h2 {
    max-width: 800px;

    margin: 15px auto;

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px, 5vw, 68px);

    line-height: 1;

    letter-spacing: -3px;
}

.cta-contentv h2 strong {
    display: block;

    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            var(--gold)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.cta-contentv p {
    color: var(--muted);

    margin-bottom: 28px;

    font-size: 14px;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footerv {
    padding: 70px 0 25px;

    background: #030811;

    border-top: 1px solid var(--border);
}

.footer-gridv {
    display: grid;

    grid-template-columns: 1.4fr repeat(3, 1fr);

    gap: 50px;

    padding-bottom: 50px;

    border-bottom: 1px solid var(--border);
}

.footer-brandv img {
    width: 155px;

    margin-bottom: 18px;
}

.footer-brandv p {
    max-width: 310px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.8;
}

.footer-columnv {
    display: flex;

    flex-direction: column;

    gap: 11px;
}

.footer-columnv h4 {
    color: var(--white);

    font-size: 13px;

    margin-bottom: 7px;
}

.footer-columnv a,
.footer-columnv span {
    color: var(--muted);

    font-size: 12px;

    transition: 0.25s ease;
}

.footer-columnv a:hover {
    color: var(--blue-light);

    transform: translateX(3px);
}

.footer-bottomv {
    padding-top: 22px;

    text-align: center;
}

.footer-bottomv p {
    color: var(--muted-2);

    font-size: 10px;

    letter-spacing: 0.5px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #030811;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            var(--blue),
            var(--gold)
        );

    border-radius: 10px;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
    background: var(--blue);
    color: white;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1100px) {

    .nav-linksv {
        gap: 15px;
    }

    .contact-herov .containerv {
        grid-template-columns: 1fr;
    }

    .hero-contentv {
        text-align: center;
        padding-bottom: 30px;
    }

    .hero-contentv > p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-labelv,
    .hero-actionsv,
    .hero-trustv {
        justify-content: center;
    }

    .hero-visualv {
        margin-bottom: 70px;
    }

    .contact-layoutv {
        grid-template-columns: 1fr;
    }

    .contact-sidebarv {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }

    .why-gridv,
    .faq-gridv {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .help-gridv {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-gridv {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-gridv {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .footer-columnv:last-child {
        grid-column: 2 / 4;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 760px) {

    .navbarv {
        min-height: 70px;
    }

    .brand-logov img {
        width: 125px;
    }

    .nav-linksv,
    .nav-ctav {
        display: none;
    }


    /* HERO */

    .contact-herov {
        min-height: auto;
    }

    .hero-contentv {
        padding: 75px 0 20px;
    }

    .hero-contentv h1 {
        font-size: clamp(42px, 12vw, 60px);

        letter-spacing: -2px;
    }

    .hero-contentv > p {
        font-size: 14px;
    }

    .hero-trustv {
        align-items: flex-start;

        flex-direction: column;

        width: fit-content;

        margin: auto;
    }

    .hero-visualv {
        width: 320px;
        height: 320px;

        margin-top: 30px;
        margin-bottom: 70px;
    }

    .logo-orbitv {
        width: 160px;
        height: 160px;
    }

    .logo-orbitv img {
        width: 120px;
    }

    .ring-onev {
        width: 240px;
        height: 240px;
    }

    .ring-twov {
        width: 310px;
        height: 310px;
    }

    .floating-cardv {
        min-width: 110px;

        padding: 9px 11px;
    }

    .floating-cardv strong {
        font-size: 19px;
    }

    .floating-cardv span {
        font-size: 8px;
    }

    .card-topv {
        top: 15px;
        right: 0;
    }

    .card-bottomv {
        left: 0;
        bottom: 15px;
    }

    .card-rightv {
        right: -10px;
        bottom: 95px;
    }


    /* SECTIONS */

    .contact-sectionv,
    .why-sectionv,
    .help-sectionv,
    .process-sectionv,
    .faq-sectionv,
    .final-ctav {
        padding: 75px 0;
    }

    .section-headingv {
        margin-bottom: 38px;
    }

    .section-headingv h2 {
        letter-spacing: -1px;
    }


    /* FORM */

    .form-cardv {
        padding: 22px 17px;
    }

    .form-rowv {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .form-headerv h3 {
        font-size: 20px;
    }

    .form-iconv {
        width: 45px;
        height: 45px;

        flex-shrink: 0;
    }


    /* SIDEBAR */

    .contact-sidebarv {
        display: flex;
    }

    .info-cardv,
    .social-cardv {
        padding: 22px;
    }


    /* HELP */

    .help-gridv {
        grid-template-columns: 1fr;
    }


    /* PROCESS */

    .process-gridv {
        grid-template-columns: 1fr;
    }

    .process-linev {
        display: none;
    }

    .process-itemv {
        padding: 18px 0;
    }


    /* WHY */

    .why-gridv {
        gap: 35px;
    }


    /* CTA */

    .cta-contentv h2 {
        letter-spacing: -2px;
    }


    /* FOOTER */

    .footer-gridv {
        grid-template-columns: 1fr 1fr;

        gap: 35px;
    }

    .footer-brandv {
        grid-column: 1 / -1;
    }

    .footer-columnv:last-child {
        grid-column: auto;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

    .containerv {
        width: min(91%, 1180px);
    }

    .hero-contentv h1 {
        font-size: 43px;
    }

    .hero-actionsv {
        flex-direction: column;

        width: 100%;
    }

    .primary-btnv,
    .secondary-btnv {
        width: 100%;
    }

    .hero-visualv {
        width: 280px;
        height: 280px;
    }

    .ring-onev {
        width: 210px;
        height: 210px;
    }

    .ring-twov {
        width: 270px;
        height: 270px;
    }

    .logo-orbitv {
        width: 145px;
        height: 145px;
    }

    .logo-orbitv img {
        width: 105px;
    }

    .floating-cardv {
        min-width: 95px;
    }

    .card-rightv {
        right: -20px;
    }

    .footer-gridv {
        grid-template-columns: 1fr;
    }

    .footer-brandv,
    .footer-columnv:last-child {
        grid-column: auto;
    }
}