/* ========================================================= 
   ELDO TECH 
   PREMIUM BLACK / WHITE WEBSITE 
========================================================= */ 
 
:root { 
 
    --black: #080808; 
    --black-2: #0d0d0d; 
    --black-3: #111111; 
 
    --white: #ffffff; 
    --white-soft: #f5f5f5; 
 
    --gray: #8b8b8b; 
    --gray-light: #b5b5b5; 
    --gray-dark: #292929; 
 
    --line: rgba(255,255,255,0.09); 
 
    --green: #25D366; 
 
    --font-main: "Manrope", sans-serif; 
    --font-secondary: "DM Sans", sans-serif; 
} 
 
 
/* ========================================================= 
   RESET 
========================================================= */ 
 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
 
html { 
    scroll-behavior: smooth; 
} 
 
 
body { 
    background: var(--black); 
    color: var(--white); 
 
    font-family: var(--font-main); 
 
    overflow-x: hidden; 
} 
 
 
a { 
    color: inherit; 
} 
 
 
button { 
    font-family: inherit; 
} 
 
 
::selection { 
    background: #ffffff; 
    color: #000000; 
} 
 
 
/* ========================================================= 
   NAVBAR 
========================================================= */ 
 
.navbar { 
 
    position: fixed; 
 
    top: 0; 
    left: 0; 
 
    width: 100%; 
 
    height: 78px; 
 
    z-index: 100; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    padding: 0 4.4%; 
 
    background: rgba(8,8,8,0.92); 
 
    border-bottom: 1px solid var(--line); 
 
    backdrop-filter: blur(12px); 
 
    transition: 
        background 0.3s ease, 
        border-color 0.3s ease; 
 
} 
 
 
/* LOGO */ 
 
.logo { 
 
    display: flex; 
 
    align-items: center; 
 
    width: 94px; 
 
    flex-shrink: 0; 
 
    text-decoration: none; 
} 
 
 
.logo img { 
 
    display: block; 
 
    width: 94px; 
 
    height: auto; 
 
    object-fit: contain; 
 
} 
 
 
/* NAV */ 
 
.nav-links { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    gap: 30px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
 
.nav-links a { 
 
    position: relative; 
 
    padding: 30px 0; 
 
    color: #777777; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
    transition: 
        color 0.25s ease; 
 
} 
 
 
.nav-links a:hover, 
.nav-links a.active { 
 
    color: #ffffff; 
 
} 
 
 
.nav-links a.active::after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
    right: 0; 
 
    bottom: 11px; 
 
    height: 2px; 
 
    background: #ffffff; 
 
} 
 
 
/* NAV CTA */ 
 
.nav-talk { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    gap: 13px; 
 
    min-width: 124px; 
 
    height: 44px; 
 
    padding: 0 20px; 
 
    border-radius: 30px; 
 
    background: #ffffff; 
 
    color: #111111; 
 
    text-decoration: none; 
 
    font-size: 13px; 
 
    font-weight: 700; 
 
    transition: 
        transform 0.25s ease, 
        background 0.25s ease; 
 
} 
 
 
.nav-talk span { 
 
    font-size: 18px; 
 
} 
 
 
.nav-talk:hover { 
 
    transform: translateY(-2px); 
 
    background: #eeeeee; 
 
} 
 
 
/* MOBILE MENU */ 
 
.mobile-menu { 
 
    display: none; 
 
    width: 42px; 
 
    height: 42px; 
 
    border: 0; 
 
    background: transparent; 
 
    cursor: pointer; 
 
} 
 
 
.mobile-menu span { 
 
    display: block; 
 
    width: 23px; 
 
    height: 1px; 
 
    background: #ffffff; 
 
    margin: 6px auto; 
 
} 
 
 
/* ========================================================= 
   HOME 
========================================================= */ 
 
.hero { 
 
    position: relative; 
 
    min-height: 100vh; 
    min-height: 100svh; 
 
    padding-top: 78px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: #080808; 
 
} 
 
 
/* GRID */ 
 
.hero-grid { 
 
    position: absolute; 
 
    inset: 0; 
 
    pointer-events: none; 
 
    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: 56px 56px; 
 
    mask-image: 
        linear-gradient( 
            to bottom, 
            #000000 0%, 
            rgba(0,0,0,0.85) 70%, 
            transparent 100% 
        ); 
 
    -webkit-mask-image: 
        linear-gradient( 
            to bottom, 
            #000000 0%, 
            rgba(0,0,0,0.85) 70%, 
            transparent 100% 
        ); 
 
} 
 
 
/* CENTER */ 
 
.hero-center { 
 
    position: relative; 
 
    z-index: 2; 
 
    width: min(1000px, 92%); 
 
    margin-top: -15px; 
 
    text-align: center; 
 
} 
 
 
/* BADGE */ 
 
.hero-badge { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    gap: 9px; 
 
    padding: 9px 16px; 
 
    border: 1px solid rgba(255,255,255,0.10); 
 
    border-radius: 30px; 
 
    background: rgba(255,255,255,0.025); 
 
    color: #9b9b9b; 
 
    font-size: 11px; 
 
    font-weight: 600; 
 
    letter-spacing: 1.1px; 
 
    margin-bottom: 25px; 
 
} 
 
 
.hero-badge span { 
 
    width: 7px; 
 
    height: 7px; 
 
    border-radius: 50%; 
 
    background: #20d878; 
 
    box-shadow: 
        0 0 10px rgba(32,216,120,0.55); 
 
} 
 
 
/* MAIN HERO HEADING */ 
 
.hero-center h1 { 
 
    color: #ffffff; 
 
    font-size: clamp( 
        52px, 
        6.2vw, 
        92px 
    ); 
 
    line-height: 0.98; 
 
    font-weight: 800; 
 
    letter-spacing: -4px; 
 
    margin: 0; 
 
    text-transform: uppercase; 
 
} 
 
 
/* DESCRIPTION */ 
 
.hero-description { 
 
    margin-top: 29px; 
 
    color: #9c9c9c; 
 
    font-family: var(--font-secondary); 
 
    font-size: 18px; 
 
    line-height: 1.55; 
 
    font-weight: 400; 
 
} 
 
 
/* ========================================================= 
   HERO BOTTOM INFORMATION 
========================================================= */ 
 
.hero-bottom { 
 
    position: absolute; 
 
    left: 4.4%; 
    right: 4.4%; 
 
    bottom: 28px; 
 
    z-index: 5; 
 
    display: grid; 
 
    grid-template-columns: 
        1fr 
        1fr 
        1fr; 
 
    align-items: end; 
 
    gap: 30px; 
 
} 
 
 
/* META */ 
 
.hero-meta { 
 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 5px; 
 
} 
 
 
.hero-meta small { 
 
    color: #666666; 
 
    font-size: 9px; 
 
    letter-spacing: 1.6px; 
 
    font-weight: 700; 
 
} 
 
 
.hero-meta strong { 
 
    color: #b5b5b5; 
 
    font-size: 11px; 
 
    letter-spacing: 1px; 
 
    font-weight: 600; 
 
} 
 
 
/* SECOND META */ 
 
.hero-meta:nth-child(2) { 
 
    text-align: center; 
 
} 
 
 
/* SCROLL */ 
 
.hero-scroll { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
    gap: 12px; 
 
    color: #777777; 
 
    font-size: 9px; 
 
    letter-spacing: 1.5px; 
 
} 
 
 
.hero-scroll i { 
 
    width: 35px; 
 
    height: 1px; 
 
    background: #777777; 
 
} 
 
 
/* ========================================================= 
   COMMON SECTION 
========================================================= */ 
 
.section { 
 
    position: relative; 
 
    padding: 130px 6%; 
 
    border-top: 1px solid var(--line); 
 
} 
 
 
.section-top { 
 
    display: flex; 
 
    align-items: center; 
 
    gap: 20px; 
 
    margin-bottom: 70px; 
 
} 
 
 
.section-number { 
 
    color: #555555; 
 
    font-size: 11px; 
 
    letter-spacing: 1px; 
 
} 
 
 
.section-label { 
 
    color: #777777; 
 
    font-size: 10px; 
 
    letter-spacing: 1.8px; 
 
    font-weight: 700; 
 
} 
 
 
.section-heading { 
 
    display: grid; 
 
    grid-template-columns: 1.2fr 0.8fr; 
 
    gap: 80px; 
 
    align-items: end; 
 
    margin-bottom: 65px; 
 
} 
 
 
.section-heading h2, 
.section-title h2, 
.clients-heading h2, 
.value-grid h2, 
.faq-grid h2, 
.contact h2 { 
 
    font-size: clamp( 
        50px, 
        6vw, 
        88px 
    ); 
 
    line-height: 0.98; 
 
    letter-spacing: -4px; 
 
    font-weight: 700; 
 
} 
 
 
em { 
 
    font-style: normal; 
 
    color: #777777; 
 
} 
 
 
.section-heading p { 
 
    color: #888888; 
 
    font-size: 16px; 
 
    line-height: 1.7; 
 
    max-width: 470px; 
 
} 
 
 
/* ========================================================= 
   ABOUT 
========================================================= */ 
 
.about { 
 
    background: #090909; 
 
} 
 
 
.about-grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    gap: 100px; 
 
} 
 
 
.about-content { 
 
    max-width: 600px; 
 
} 
 
 
.about-content p { 
 
    color: #858585; 
 
    font-size: 16px; 
 
    line-height: 1.8; 
 
    margin-bottom: 28px; 
 
} 
 
 
.about-content .large-text { 
 
    color: #d5d5d5; 
 
    font-size: 25px; 
 
    line-height: 1.5; 
 
} 
 
 
.text-link { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    gap: 12px; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    font-size: 13px; 
 
    font-weight: 600; 
 
    margin-top: 12px; 
 
} 
 
 
.text-link span { 
 
    font-size: 18px; 
 
} 
 
 
/* ========================================================= 
   SERVICES 
========================================================= */ 
 
.services { 
 
    background: #080808; 
 
} 
 
 
.services-grid { 
 
    display: grid; 
 
    grid-template-columns: 
        repeat(2, 1fr); 
 
    border-top: 1px solid var(--line); 
 
    border-left: 1px solid var(--line); 
 
} 
 
 
.service-card { 
 
    position: relative; 
 
    min-height: 320px; 
 
    padding: 35px; 
 
    border-right: 1px solid var(--line); 
 
    border-bottom: 1px solid var(--line); 
 
    transition: 
        background 0.3s ease; 
 
} 
 
 
.service-card:hover { 
 
    background: #101010; 
 
} 
 
 
.service-number { 
 
    color: #555555; 
 
    font-size: 11px; 
 
} 
 
 
.service-card h3 { 
 
    margin-top: 55px; 
 
    color: #ffffff; 
 
    font-size: 35px; 
 
    line-height: 1; 
 
    letter-spacing: -1.5px; 
 
} 
 
 
.service-card p { 
 
    max-width: 350px; 
 
    margin-top: 25px; 
 
    color: #777777; 
 
    font-size: 14px; 
 
    line-height: 1.7; 
 
} 
 
 
.service-arrow { 
 
    position: absolute; 
 
    right: 35px; 
 
    bottom: 35px; 
 
    color: #ffffff; 
 
    font-size: 23px; 
 
} 
 
 
/* ========================================================= 
   WORK 
========================================================= */ 
 
.work { 
 
    background: #0a0a0a; 
 
} 
 
 
.work-grid { 
 
    display: grid; 
 
    grid-template-columns: 
        repeat(2, 1fr); 
 
    border-top: 1px solid var(--line); 
 
    border-left: 1px solid var(--line); 
 
} 
 
 
.work-card { 
 
    position: relative; 
 
    min-height: 360px; 
 
    padding: 35px; 
 
    border-right: 1px solid var(--line); 
 
    border-bottom: 1px solid var(--line); 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
    transition: 
        background 0.3s ease; 
 
} 
 
 
.work-card:hover { 
 
    background: #111111; 
 
} 
 
 
.work-card-content { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
 
.work-index { 
 
    color: #555555; 
 
    font-size: 11px; 
 
} 
 
 
.work-category { 
 
    display: block; 
 
    margin-top: 10px; 
 
    color: #777777; 
 
    font-size: 9px; 
 
    letter-spacing: 1.5px; 
 
    font-weight: 700; 
 
} 
 
 
.work-card h3 { 
 
    margin-top: 65px; 
 
    font-size: 44px; 
 
    line-height: 0.98; 
 
    letter-spacing: -2px; 
 
} 
 
 
.work-card p { 
 
    margin-top: 20px; 
 
    color: #777777; 
 
    font-size: 14px; 
 
} 
 
 
.work-card-action { 
 
    position: absolute; 
 
    left: 35px; 
 
    bottom: 35px; 
 
    color: #ffffff; 
 
    font-size: 10px; 
 
    letter-spacing: 1.5px; 
 
    font-weight: 700; 
 
} 
 
 
.work-footer { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    padding-top: 25px; 
 
    color: #555555; 
 
    font-size: 9px; 
 
    letter-spacing: 1.4px; 
 
} 
 
 
/* ========================================================= 
   SPECIAL WORK 
========================================================= */ 
 
.special-work { 
 
    background: #080808; 
 
} 
 
 
.special-grid { 
 
    display: grid; 
 
    grid-template-columns: 
        repeat(3, 1fr); 
 
    border-top: 1px solid var(--line); 
 
    border-left: 1px solid var(--line); 
 
} 
 
 
.special-card { 
 
    position: relative; 
 
    min-height: 390px; 
 
    padding: 35px; 
 
    text-align: left; 
 
    color: #ffffff; 
 
    background: transparent; 
 
    border: 0; 
 
    border-right: 1px solid var(--line); 
 
    border-bottom: 1px solid var(--line); 
 
    cursor: pointer; 
 
    transition: 
        background 0.3s ease; 
 
} 
 
 
.special-card:hover { 
 
    background: #111111; 
 
} 
 
 
.special-number { 
 
    color: #555555; 
 
    font-size: 11px; 
 
} 
 
 
.special-label { 
 
    display: block; 
 
    margin-top: 12px; 
 
    color: #777777; 
 
    font-size: 9px; 
 
    letter-spacing: 1.4px; 
 
    font-weight: 700; 
 
} 
 
 
.special-card h3 { 
 
    margin-top: 85px; 
 
    font-size: 38px; 
 
    line-height: 1; 
 
    letter-spacing: -1.5px; 
 
} 
 
 
.special-count { 
 
    position: absolute; 
 
    left: 35px; 
 
    bottom: 35px; 
 
    color: #777777; 
 
    font-size: 10px; 
 
    letter-spacing: 1.2px; 
 
} 
 
 
.special-arrow { 
 
    position: absolute; 
 
    right: 35px; 
 
    bottom: 32px; 
 
    font-size: 23px; 
 
} 
 
 
/* ========================================================= 
   CLIENTS 
========================================================= */ 
 
.clients { 
 
    overflow: hidden; 
 
    background: #090909; 
 
} 
 
 
.clients-heading { 
 
    margin-bottom: 80px; 
 
} 
 
 
.logo-marquee { 
 
    width: 100vw; 
 
    margin-left: -6%; 
 
    overflow: hidden; 
 
} 
 
 
.logo-track { 
 
    display: flex; 
 
    width: max-content; 
 
    animation: 
        logoMove 32s linear infinite; 
 
} 
 
 
.client-logo { 
 
    width: 220px; 
 
    height: 120px; 
 
    margin-right: 35px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-shrink: 0; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
 
.client-logo img { 
 
    display: block; 
 
    width: auto; 
 
    max-width: 160px; 
 
    max-height: 65px; 
 
    object-fit: contain; 
 
    object-position: center; 
 
    filter: grayscale(1); 
 
    opacity: 0.55; 
 
    transition: 
        filter 0.3s ease, 
        opacity 0.3s ease, 
        transform 0.3s ease; 
 
} 


/* CLIENT LOGO ORIGINAL COLOUR ON HOVER */

.client-logo:hover img {

    filter: grayscale(0) !important;

    opacity: 1 !important;

    transform: scale(1.05);

}
 
 
/* Keep extra-wide client logos contained */ 
 
.client-logo:nth-child(6) img, 
.client-logo:nth-child(12) img { 
 
    max-width: 140px; 
 
    max-height: 55px; 
 
} 
 
@keyframes logoMove { 
 
    from { 
 
        transform: translateX(0); 
 
    } 
 
    to { 
 
        transform: translateX(-50%); 
 
    } 
 
} 
 
 
.clients-note { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin-top: 30px; 
 
    color: #555555; 
 
    font-size: 9px; 
 
    letter-spacing: 1.4px; 
 
} 
 
 
/* ========================================================= 
   VALUE 
========================================================= */ 
 
.value { 
 
    background: #080808; 
 
} 
 
 
.value-grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    gap: 100px; 
 
} 
 
 
.value-list { 
 
    border-top: 1px solid var(--line); 
 
} 
 
 
.value-item { 
 
    display: grid; 
 
    grid-template-columns: 50px 1fr; 
 
    gap: 20px; 
 
    padding: 30px 0; 
 
    border-bottom: 1px solid var(--line); 
 
} 
 
 
.value-item > span { 
 
    color: #555555; 
 
    font-size: 11px; 
 
} 
 
 
.value-item h3 { 
 
    font-size: 20px; 
 
    font-weight: 600; 
 
} 
 
 
.value-item p { 
 
    margin-top: 9px; 
 
    color: #777777; 
 
    font-size: 14px; 
 
    line-height: 1.6; 
 
} 
 
 
/* ========================================================= 
   FAQ 
========================================================= */ 
 
.faq { 
 
    background: #090909; 
 
} 
 
 
.faq-grid { 
 
    display: grid; 
 
    grid-template-columns: 0.8fr 1.2fr; 
 
    gap: 100px; 
 
} 
 
 
.faq-list { 
 
    border-top: 1px solid var(--line); 
 
} 
 
 
.faq-item { 
 
    border-bottom: 1px solid var(--line); 
 
} 
 
 
.faq-question { 
 
    width: 100%; 
 
    min-height: 80px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    border: 0; 
 
    background: transparent; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
    text-align: left; 
 
    font-size: 16px; 
 
    font-weight: 600; 
 
} 
 
 
.faq-question b { 
 
    color: #777777; 
 
    font-size: 20px; 
 
    font-weight: 400; 
 
} 
 
 
.faq-answer { 
 
    display: grid; 
 
    grid-template-rows: 0fr; 
 
    transition: 
        grid-template-rows 0.3s ease; 
 
} 
 
 
.faq-answer p { 
 
    overflow: hidden; 
 
    color: #777777; 
 
    font-size: 14px; 
 
    line-height: 1.7; 
 
} 
 
 
.faq-item.open .faq-answer { 
 
    grid-template-rows: 1fr; 
 
} 
 
 
.faq-item.open .faq-answer p { 
 
    padding-bottom: 25px; 
 
} 
 
 
/* ========================================================= 
   CONTACT 
========================================================= */ 
 
.contact { 
 
    background: #080808; 
 
    text-align: center; 
 
} 
 
 
.contact-inner { 
 
    max-width: 1000px; 
 
    margin: auto; 
 
} 
 
 
.contact h2 { 
 
    margin-top: 35px; 
 
} 
 
 
.contact-inner > p { 
 
    max-width: 550px; 
 
    margin: 30px auto; 
 
    color: #777777; 
 
    font-size: 16px; 
 
    line-height: 1.7; 
 
} 
 
 
.contact-actions { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    gap: 12px; 
 
    margin-top: 40px; 
 
} 
 
 
.contact-button { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    gap: 15px; 
 
    min-width: 145px; 
 
    padding: 15px 22px; 
 
    border: 1px solid var(--line); 
 
    border-radius: 30px; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    font-size: 13px; 
 
    transition: 
        background 0.25s ease, 
        color 0.25s ease; 
 
} 
 
 
.contact-button:hover { 
 
    background: #ffffff; 
 
    color: #000000; 
 
} 
 
 
.contact-details { 
 
    display: grid; 
 
    grid-template-columns: 
        repeat(3, 1fr); 
 
    margin-top: 90px; 
 
    border-top: 1px solid var(--line); 
 
    border-bottom: 1px solid var(--line); 
 
} 
 
 
.contact-details > div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    gap: 9px; 
 
    padding: 30px; 
 
    border-right: 1px solid var(--line); 
 
} 
 
 
.contact-details > div:last-child { 
 
    border-right: 0; 
 
} 
 
 
.contact-details small { 
 
    color: #555555; 
 
    font-size: 9px; 
 
    letter-spacing: 1.5px; 
 
} 
 
 
.contact-details a, 
.contact-details span { 
 
    color: #aaaaaa; 
 
    text-decoration: none; 
 
    font-size: 13px; 
 
} 
 
 
/* ========================================================= 
   FOOTER 
========================================================= */ 
 
.footer { 
 
    padding: 70px 6% 30px; 
 
    background: #050505; 
 
    border-top: 1px solid var(--line); 
 
} 
 
 
.footer-top { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    padding-bottom: 50px; 
 
} 
 
 
.footer-logo img { 
 
    width: 94px; 
 
    display: block; 
 
} 
 
 
.footer-top p { 
 
    color: #777777; 
 
    font-size: 14px; 
 
} 
 
 
.back-top { 
 
    color: #777777; 
 
    text-decoration: none; 
 
    font-size: 10px; 
 
    letter-spacing: 1.5px; 
 
} 
 
 
.footer-bottom { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    gap: 20px; 
 
    padding-top: 25px; 
 
    border-top: 1px solid var(--line); 
 
    color: #555555; 
 
    font-size: 9px; 
 
    letter-spacing: 1.2px; 
 
} 
 
 
/* ========================================================= 
   FLOATING LET'S TALK / WHATSAPP 
========================================================= */ 
 
.floating-whatsapp { 
 
    position: fixed !important; 
 
    right: 24px !important; 
 
    bottom: 24px !important; 
 
    z-index: 99999 !important; 
 
    display: inline-flex !important; 
 
    align-items: center !important; 
 
    justify-content: center !important; 
 
    gap: 8px !important; 
 
    width: auto !important; 
 
    min-width: 94px !important; 
 
    height: 42px !important; 
 
    padding: 0 17px !important; 
 
    border-radius: 999px !important; 
 
    background: #25D366 !important; 
 
    color: #ffffff !important; 
 
    text-decoration: none !important; 
 
    font-size: 10px !important; 
 
    font-weight: 700 !important; 
 
    letter-spacing: 0.2px !important; 
 
    line-height: 1 !important; 
 
    box-shadow: none !important; 
 
    transition: 
        transform 0.25s ease !important; 
 
} 
 
 
.floating-whatsapp span { 
 
    display: inline-block !important; 
 
    color: #ffffff !important; 
 
    font-size: 10px !important; 
 
    font-weight: 700 !important; 
 
} 
 
 
.floating-whatsapp b { 
 
    display: inline-block !important; 
 
    color: #ffffff !important; 
 
    font-size: 13px !important; 
 
    font-weight: 700 !important; 
 
    line-height: 1 !important; 
 
} 
 
 
.floating-whatsapp:hover { 
 
    transform: translateY(-3px) !important; 
 
    box-shadow: none !important; 
 
} 
 
 
/* ========================================================= 
   FULLSCREEN WORK VIEW 
========================================================= */ 
 
.work-view, 
.special-view { 
 
    position: fixed; 
 
    inset: 0; 
 
    z-index: 300; 
 
    overflow-y: auto; 
 
    padding: 35px 6% 70px; 
 
    background: #070707; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    pointer-events: none; 
 
    transform: translateY(20px); 
 
    transition: 
        opacity 0.3s ease, 
        visibility 0.3s ease, 
        transform 0.3s ease; 
 
} 
 
 
.work-view.active, 
.special-view.active { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    pointer-events: auto; 
 
    transform: translateY(0); 
 
} 
 
 
.work-view-top, 
.special-view-top { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    padding-bottom: 30px; 
 
    border-bottom: 1px solid var(--line); 
 
} 
 
 
.work-back, 
.special-back { 
 
    border: 0; 
 
    background: transparent; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
    font-size: 13px; 
 
} 
 
 
#workViewClient, 
.special-view-label { 
 
    color: #777777; 
 
    font-size: 10px; 
 
    letter-spacing: 1.5px; 
 
} 
 
 
.work-view-heading, 
.special-view-heading { 
 
    padding: 60px 0; 
 
} 
 
 
.work-view-heading h2, 
.special-view-heading h2 { 
 
    margin-top: 15px; 
 
    font-size: clamp( 
        45px, 
        6vw, 
        80px 
    ); 
 
    line-height: 1; 
 
    letter-spacing: -3px; 
 
} 
 
 
.special-view-heading p { 
 
    max-width: 600px; 
 
    margin-top: 20px; 
 
    color: #777777; 
 
    line-height: 1.7; 
 
} 
 
 
/* CLIENT INSTAGRAM BUTTON */ 
 
#workViewInstagram { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    gap: 8px; 
 
    margin-top: 22px; 
 
} 
 
 
.work-video-grid, 
.special-video-grid { 
 
    display: grid; 
 
    grid-template-columns: 
        repeat(3, 1fr); 
 
    gap: 20px; 
 
} 
 
 
.reel-card { 
 
    min-height: 300px; 
 
    overflow: hidden; 
 
    border: 1px solid var(--line); 
 
    background: #101010; 
 
} 
 
 
.reel-card iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 300px; 
 
    border: 0; 
 
} 
 
 
.reel-card-link { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-height: 300px; 
 
    padding: 30px; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 
 
.reel-card-link span { 
 
    color: #777777; 
 
    font-size: 11px; 
 
    letter-spacing: 1.5px; 
 
} 
 
 
/* INSTAGRAM EMBED */ 
 
.instagram-media { 
 
    width: 100% !important; 
 
    min-width: 0 !important; 
 
    margin: 0 !important; 
 
} 
 
 
/* ========================================================= 
   TABLET 
========================================================= */ 
 
@media (max-width: 900px) { 
 
    .nav-links { 
 
        gap: 18px; 
 
    } 
 
 
    .nav-links a { 
 
        font-size: 12px; 
 
    } 
 
 
    .section { 
 
        padding: 100px 5%; 
 
    } 
 
 
    .section-heading, 
    .about-grid, 
    .value-grid, 
    .faq-grid { 
 
        grid-template-columns: 1fr; 
 
        gap: 45px; 
 
    } 
 
 
    .services-grid, 
    .work-grid { 
 
        grid-template-columns: 1fr; 
 
    } 
 
 
    .special-grid { 
 
        grid-template-columns: 1fr; 
 
    } 
 
 
    .work-video-grid, 
    .special-video-grid { 
 
        grid-template-columns: 
            repeat(2, 1fr); 
 
    } 
 
 
    .hero-center h1 { 
 
        font-size: clamp( 
            48px, 
            8vw, 
            76px 
        ); 
 
    } 
 
 
    .hero-description { 
 
        font-size: 16px; 
 
    } 
 
 
    .hero-bottom { 
 
        left: 5%; 
 
        right: 5%; 
 
    } 
 
} 
 
 
/* ========================================================= 
   MOBILE 
========================================================= */ 
 
@media (max-width: 700px) { 
 
    /* NAVBAR */ 
 
    .navbar { 
 
        height: 70px; 
 
        padding: 0 20px; 
 
    } 
 
 
    .logo, 
    .logo img { 
 
        width: 82px; 
 
    } 
 
 
    .nav-links { 
 
        display: none; 
 
        position: absolute; 
 
        top: 70px; 
 
        left: 0; 
 
        width: 100%; 
 
        margin: 0; 
 
        padding: 20px; 
 
        flex-direction: column; 
 
        align-items: flex-start; 
 
        gap: 0; 
 
        background: #080808; 
 
        border-bottom: 1px solid var(--line); 
 
    } 
 
 
    .nav-links.open { 
 
        display: flex; 
 
    } 
 
 
    .nav-links a { 
 
        width: 100%; 
 
        padding: 15px 0; 
 
    } 
 
 
    .nav-links a.active::after { 
 
        display: none; 
 
    } 
 
 
    .nav-talk { 
 
        min-width: 105px; 
 
        height: 40px; 
 
        padding: 0 15px; 
 
        font-size: 12px; 
 
    } 
 
 
    .mobile-menu { 
 
        display: block; 
 
    } 
 
 
    /* HERO */ 
 
    .hero { 
 
        padding-top: 70px; 
 
        min-height: 100svh; 
 
    } 
 
 
    .hero-center { 
 
        margin-top: -30px; 
 
    } 
 
 
    .hero-badge { 
 
        max-width: 95%; 
 
        padding: 8px 12px; 
 
        font-size: 8px; 
 
        white-space: nowrap; 
 
        letter-spacing: 0.7px; 
 
    } 
 
 
    .hero-center h1 { 
 
        font-size: clamp( 
            36px, 
            10.5vw, 
            58px 
        ); 
 
        letter-spacing: -2.5px; 
 
    } 
 
 
    .hero-description { 
 
        font-size: 14px; 
 
        margin-top: 22px; 
 
    } 
 
 
    .desktop-only { 
 
        display: none; 
 
    } 
 
 
    /* ===================================================== 
       MOBILE HERO BOTTOM 
    ===================================================== */ 
 
    .hero-bottom { 
 
        position: absolute; 
 
        left: 0; 
 
        right: 0; 
 
        bottom: 22px; 
 
        width: 100%; 
 
        padding: 0 20px; 
 
        display: grid; 
 
        grid-template-columns: 1fr 1fr; 
 
        align-items: end; 
 
        gap: 16px; 
 
    } 
 
 
    .hero-meta { 
 
        display: flex; 
 
        flex-direction: column; 
 
        gap: 4px; 
 
    } 
 
 
    .hero-meta:nth-child(2) { 
 
        text-align: right; 
 
    } 
 
 
    .hero-meta small { 
 
        font-size: 7px; 
 
        letter-spacing: 1.2px; 
 
    } 
 
 
    .hero-meta strong { 
 
        font-size: 8px; 
 
        letter-spacing: 0.7px; 
 
    } 
 
 
    .hero-scroll { 
 
        grid-column: 1 / -1; 
 
        justify-content: center; 
 
        margin-top: 2px; 
 
        gap: 8px; 
 
        font-size: 7px; 
 
        letter-spacing: 1.1px; 
 
    } 
 
 
    .hero-scroll i { 
 
        width: 25px; 
 
    } 
 
 
    /* SECTIONS */ 
 
    .section { 
 
        padding: 85px 20px; 
 
    } 
 
 
    .section-heading h2, 
    .section-title h2, 
    .clients-heading h2, 
    .value-grid h2, 
    .faq-grid h2, 
    .contact h2 { 
 
        font-size: 48px; 
 
        letter-spacing: -2.5px; 
 
    } 
 
 
    /* SERVICES / WORK */ 
 
    .service-card, 
    .work-card { 
 
        min-height: 320px; 
 
        padding: 25px; 
 
    } 
 
 
    .service-card h3, 
    .work-card h3 { 
 
        font-size: 34px; 
 
    } 
 
 
    /* SPECIAL */ 
 
    .special-card { 
 
        min-height: 330px; 
 
        padding: 25px; 
 
    } 
 
 
    .special-card h3 { 
 
        margin-top: 65px; 
 
        font-size: 32px; 
 
    } 
 
 
    /* CLIENTS */ 
 
    .logo-marquee { 
 
        margin-left: -20px; 
 
    } 
 
 
    .client-logo { 
 
        width: 170px; 
 
        height: 105px; 
 
        margin-right: 15px; 
 
        overflow: hidden; 
 
        position: relative;

    } 
 
 
    .client-logo img { 
 
        max-width: 125px; 
 
        max-height: 55px; 
 
    } 
 
 
    .clients-note { 
 
        flex-direction: column; 
 
        gap: 8px; 
 
    } 
 
 
    /* CONTACT */ 
 
    .contact-details { 
 
        grid-template-columns: 1fr; 
 
    } 
 
 
    .contact-details > div { 
 
        border-right: 0; 
 
        border-bottom: 1px solid var(--line); 
 
    } 
 
 
    .contact-details > div:last-child { 
 
        border-bottom: 0; 
 
    } 
 
 
    /* FOOTER */ 
 
    .footer { 
 
        padding: 50px 20px 25px; 
 
    } 
 
 
    .footer-top { 
 
        flex-direction: column; 
 
        align-items: flex-start; 
 
        gap: 25px; 
 
    } 
 
 
    .footer-bottom { 
 
        flex-direction: column; 
 
    } 
 
 
    /* FLOATING LET'S TALK */ 
 
    .floating-whatsapp { 
 
        right: 16px !important; 
 
        bottom: 16px !important; 
 
        min-width: 88px !important; 
 
        height: 38px !important; 
 
        padding: 0 14px !important; 
 
        border-radius: 999px !important; 
 
    } 
 
 
    .floating-whatsapp span { 
 
        font-size: 9px !important; 
 
    } 
 
 
    .floating-whatsapp b { 
 
        font-size: 12px !important; 
 
    } 
 
 
    /* FULLSCREEN VIEWS */ 
 
    .work-video-grid, 
    .special-video-grid { 
 
        grid-template-columns: 1fr; 
 
    } 
 
 
    .work-view, 
    .special-view { 
 
        padding: 25px 20px 50px; 
 
    } 
 
 
    .work-view-heading, 
    .special-view-heading { 
 
        padding: 40px 0; 
 
    } 
 
 
    .work-view-heading h2, 
    .special-view-heading h2 { 
 
        font-size: 42px; 
 
        letter-spacing: -2px; 
 
    } 
 
} 
 
 
/* ========================================================= 
   SMALL MOBILE 
========================================================= */ 
 
@media (max-width: 420px) { 
 
    .hero-center h1 { 
 
        font-size: 34px; 
 
        letter-spacing: -2px; 
 
    } 
 
 
    .hero-description { 
 
        font-size: 13px; 
 
        max-width: 300px; 
 
        margin-left: auto; 
 
        margin-right: auto; 
 
    } 
 
 
    .hero-bottom { 
 
        padding: 0 15px; 
 
        bottom: 18px; 
 
    } 
 
 
    .hero-meta small { 
 
        font-size: 6px; 
 
    } 
 
 
    .hero-meta strong { 
 
        font-size: 7px; 
 
    } 
 
 
    .hero-scroll { 
 
        font-size: 6px; 
 
    } 
 
 
    .floating-whatsapp { 
 
        right: 12px !important; 
 
        bottom: 12px !important; 
 
        min-width: 84px !important; 
 
        height: 36px !important; 
 
    } 
 
 
    .section-heading h2, 
    .section-title h2, 
    .clients-heading h2, 
    .value-grid h2, 
    .faq-grid h2, 
    .contact h2 { 
 
        font-size: 42px; 
 
    } 
 
 
    .service-card h3, 
    .work-card h3 { 
 
        font-size: 30px; 
 
    } 
 
 
    .special-card h3 { 
 
        font-size: 29px; 
 
    } 
 
 
    .work-view-heading h2, 
    .special-view-heading h2 { 
 
        font-size: 36px; 
 
    } 
 
}