/*
Theme Name: Digiclickks
Theme URI: https://digiclickks.com
Author: Soham Kumthekar & Prasanna Karmalkar
Author URI: https://digiclickks.com
Description: AI-Powered Digital Marketing Agency — Pune, India
Version: 1.0.1
License: Private
*/

/* ==================================================
   DIGICLICKS BRAND UPDATE - 27 SEP 2026
================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    --dc-purple: #380A5C;
    --dc-dark-purple: #260A47;
    --dc-yellow: #FDB80F;
}


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

html,
body,
#root {
    font-family: 'Montserrat', sans-serif !important;
}

p,
li {
    font-family: 'Montserrat', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-sora {
    font-family: 'Poppins', sans-serif !important;
}


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

header,
header a,
header button,
nav,
nav a {
    font-family: 'Poppins', sans-serif !important;
}

/* Digi Clickks brand name */
header .font-sora {
    font-family: 'Poppins', sans-serif !important;
    color: var(--dc-dark-purple) !important;
}

/* Menu */
header nav a {
    font-family: 'Poppins', sans-serif !important;
    color: var(--dc-dark-purple) !important;
    font-weight: 500 !important;
}

/* Remove CSS background around logo */
header div:has(> img[alt="Digi Clickks"]) {
    background: transparent !important;
}


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

.btn-yellow {
    font-family: 'Poppins', sans-serif !important;
    background: var(--dc-yellow) !important;
    color: var(--dc-dark-purple) !important;
    border-color: var(--dc-yellow) !important;
    font-weight: 600 !important;
}


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

/* You're at the right place. */
#home .font-sora > div:first-child span {
    color: var(--dc-purple) !important;
}

/* Welcome to Digiclickks. */
#home .font-sora > div:nth-child(2) span {
    color: var(--dc-dark-purple) !important;
}

/* Hero paragraph */
#home p {
    font-family: 'Montserrat', sans-serif !important;
}


/* ==================================================
   STATS SECTION - FINAL FIX
================================================== */

#stats > div > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0 !important;
    align-items: center !important;
}

#stats > div > div > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 18px 8px !important;
    margin: 0 !important;
}

#stats > div > div > div > div:first-child {
    width: 100% !important;
    padding: 0 8px !important;
}

/* Number / Pune Based */
#stats .font-sora {
    font-family: 'Poppins', sans-serif !important;
    color: #380A5C !important;
    white-space: nowrap !important;
}

/* Stats labels */
#stats .tracking-wider {
    font-family: 'Montserrat', sans-serif !important;
    white-space: nowrap !important;
    font-size: 11px !important;
}

/* Remove old dividers */
#stats .w-px {
    display: none !important;
}


/* DESKTOP - ALL 4 IN ONE LINE */
@media (min-width: 768px) {

    #stats > div > div {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    #stats > div > div > div:not(:last-child) {
        border-right: 1px solid rgba(38, 10, 71, 0.10);
    }

    #stats > div > div > div {
        padding: 8px 6px !important;
    }
}


/* MOBILE */
@media (max-width: 767px) {

    #stats > div > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #stats > div > div > div {
        padding: 16px 5px !important;
    }

    #stats .tracking-wider {
        white-space: normal !important;
        font-size: 10px !important;
    }
}

/* FINAL PUNE BASED WIDTH FIX */
@media (min-width: 768px) {

    #stats > div > div {
        grid-template-columns: 1fr 1fr 0.8fr 1.35fr !important;
    }

    #stats > div > div > div:nth-child(4) .font-sora {
        font-size: clamp(1.8rem, 2.8vw, 2.8rem) !important;
        white-space: nowrap !important;
    }

    #stats > div > div > div:nth-child(4) {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* CONTACT PHONE - KEEP IN ONE LINE */
#contact p {
    overflow-wrap: normal !important;
}

#contact p:nth-child(3) {
    white-space: nowrap !important;
    font-size: 14px !important;
}

/* FOOTER CONTACT PHONE - ONE LINE */
#contact .space-y-2.text-sm > p:nth-child(3) {
    white-space: nowrap !important;
    font-size: 12px !important;
    letter-spacing: -0.2px !important;
}

/* ==================================================
   SECTION HEADING + SPACING FIX
================================================== */

/* WHO WE ARE */
#about h2 {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Keep: We Build Modern / Digital Growth Systems */
#about h2 br {
    display: none !important;
}

/*#about h2 {
    line-height: 1.15 !important;
}*/

/* SERVICES */
#services h2 {
    white-space: nowrap !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
}

/* Add a little more gap between service cards */
#services .grid {
    gap: 24px !important;
}

/* AI TRAINING */
#ai-training h2 {
    white-space: nowrap !important;
    font-size: clamp(1.9rem, 4vw, 3rem) !important;
}

/* MOBILE - allow wrapping */
@media (max-width: 767px) {

    #services h2,
    #ai-training h2 {
        white-space: normal !important;
    }
}


/* ==================================================
   DIGICLICKS SECTION TEXT FIXES
================================================== */

/* DIGITAL GROWTH SERVICES */
#services h2 {
    white-space: nowrap !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
}

/* Keep description in one line on desktop */
#services .text-center > div:last-child p {
    max-width: 760px !important;
}

/* Services card gap */
#services .grid {
    gap: 28px !important;
}


/* AI TRAINING */
#ai-training h2 {
    white-space: nowrap !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
}


/* MOBILE */
@media (max-width: 767px) {

    #services h2,
    #ai-training h2 {
        white-space: normal !important;
    }

    #services .grid {
        gap: 20px !important;
    }
} 

/* WHO WE ARE - SECOND LINE */
.dc-growth-line {
    white-space: nowrap !important;
}

/* ==================================================
   FINAL CTA - DIGICLICKS BRAND
================================================== */

.dc-final-cta {
    background: linear-gradient(
        135deg,
        #380A5C 0%,
        #260A47 100%
    ) !important;

    border: 1px solid rgba(255,255,255,0.16) !important;

    box-shadow:
        0 25px 70px rgba(38,10,71,0.28),
        0 8px 30px rgba(56,10,92,0.20) !important;
}

/* soft glow inside */
.dc-final-cta > div:first-child {
    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(255,255,255,0.12),
            transparent 40%
        ) !important;
}

.dc-final-cta-title {
    color: #FFFFFF !important;
    font-family: 'Poppins', sans-serif !important;
}

.dc-final-cta-text {
    color: rgba(255,255,255,0.82) !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Yellow main CTA */
.dc-final-cta .btn-yellow {
    background: #FDB80F !important;
    color: #260A47 !important;
    border-color: #FDB80F !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

/* Secondary button */
.dc-final-cta .btn-outline {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.35) !important;
    background: rgba(255,255,255,0.08) !important;
    font-family: 'Poppins', sans-serif !important;
}

.dc-final-cta .btn-outline:hover {
    background: rgba(255,255,255,0.14) !important;
}


/* ==================================================
   FOOTER CONTACT ICONS
================================================== */

#contact .dc-contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin-bottom: 10px !important;
}

#contact .dc-contact-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;

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

    border-radius: 9px;

    background: rgba(56, 10, 92, 0.08);
    color: #380A5C;

    border: 1px solid rgba(56, 10, 92, 0.12);
}

#contact .dc-contact-item a {
    color: #260A47 !important;
    text-decoration: none !important;
}

#contact .dc-contact-item a:hover {
    color: #380A5C !important;
}


/* ==================================================
   FINAL MOBILE RESPONSIVE SAFETY FIX
================================================== */

@media (max-width: 767px) {

    /* Footer Contact full width */
    #contact .grid > :last-child {
        grid-column: 1 / -1 !important;
    }

    /* Phone must not overflow mobile */
    #contact .dc-phone-line {
        white-space: normal !important;
        line-height: 1.7 !important;
        font-size: 13px !important;
    }

    /* Contact rows align neatly */
    #contact .dc-contact-item {
        align-items: flex-start !important;
    }

    /* Section headings */
    #services h2,
    #ai-training h2 {
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    /* Stats stay 2 x 2 */
    #stats > div > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #stats .font-sora {
        white-space: normal !important;
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
    }

    /* Prevent accidental horizontal scroll */
    html,
    body,
    #root {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* TRANSPARENT BRAND LOGO */
img[alt="Digi Clickks"] {
    background: transparent !important;
    object-fit: contain !important;
}

header div:has(> img[alt="Digi Clickks"]),
footer div:has(> img[alt="Digi Clickks"]) {
    background: transparent !important;
    padding: 0 !important;
}


/* HERO - PLACE YELLOW FINAL OVERRIDE */
#home .font-sora > div:first-child span.dc-place-yellow {
    color: #FDB80F !important;
}

/* ==================================================
   CONNECT US SECTION
================================================== */

#connect-us {
    padding: 90px 24px;
    scroll-margin-top: 100px;
}

.dc-connect-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 55px 45px;

    border-radius: 32px;

    background: linear-gradient(
        135deg,
        #380A5C 0%,
        #260A47 100%
    );

    box-shadow: 0 24px 70px rgba(38, 10, 71, 0.22);
}

.dc-connect-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}

.dc-connect-label {
    display: inline-block;
    margin-bottom: 12px;

    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #FDB80F;
}

.dc-connect-heading h2 {
    margin: 0 0 12px;

    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;

    color: #ffffff !important;
}

.dc-connect-heading p {
    margin: 0 auto;
    max-width: 620px;

    color: rgba(255,255,255,0.78) !important;
    line-height: 1.7;
}

.dc-connect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dc-connect-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;

    padding: 22px;

    border-radius: 20px;
    background: rgba(255,255,255,0.09);

    border: 1px solid rgba(255,255,255,0.14);
}

.dc-connect-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

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

    border-radius: 12px;

    background: #FDB80F;
    color: #260A47;

    font-size: 18px;
}

.dc-connect-card h3 {
    margin: 0 0 5px;
    color: #ffffff !important;
    font-size: 16px;
}

.dc-connect-card p,
.dc-connect-card a {
    margin: 0;
    color: rgba(255,255,255,0.82) !important;
    font-size: 14px;
    text-decoration: none;
}

.dc-connect-card a:hover {
    color: #FDB80F !important;
}


/* MOBILE */
@media (max-width: 767px) {

    #connect-us {
        padding: 60px 18px;
    }

    .dc-connect-inner {
        padding: 38px 20px;
        border-radius: 24px;
    }

    .dc-connect-grid {
        grid-template-columns: 1fr;
    }

}




/* ABOUT HEADING - FINAL */
#about .dc-about-line1,
#about .dc-about-line2 {
    display: block !important;
}

#about .dc-growth-gap {
    display: inline-block !important;
    margin-left: 0 !important;
}


/* ==================================================
   FINAL RESPONSIVE CROSS-CHECK FIX
================================================== */

/* TABLET: use hamburger instead of crowded desktop menu */
@media (min-width: 768px) and (max-width: 980px) {

    /* Main menu */
    #root nav > div > div:nth-child(2) {
        display: none !important;
    }

    /* Book Free Consultation header button */
    #root nav > div > div:nth-child(3) {
        display: none !important;
    }

    /* Show hamburger */
    #root nav > div > button[aria-label="Toggle menu"] {
        display: block !important;
    }
}


/* Keep Back To Top away from WhatsApp */
#root button[aria-label="Back to top"] {
    right: auto !important;
    left: 24px !important;
}


/* MOBILE */
@media (max-width: 767px) {

    #root button[aria-label="Back to top"] {
        left: 16px !important;
        right: auto !important;
        bottom: 18px !important;
    }

    /* Connect Us cards */
    .dc-connect-card {
        min-width: 0 !important;
    }

    .dc-connect-card a {
        overflow-wrap: anywhere !important;
    }
}

/* ==================================================
   ELFSIGHT WHATSAPP - FINAL NO EXTRA SPACE FIX
================================================== */

.elfsight-app-3d028908-cd28-4a4b-a9c9-9fd944eef506 {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;

    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    z-index: 999999 !important;
}



/* ==================================================
   HERO MOBILE - FINAL RESPONSIVE FIX
================================================== */

@media (max-width: 767px) {

    /* Hero should grow naturally with its content */
    #home {
        min-height: auto !important;
        height: auto !important;
    }

    /* Hero background video */
    #home > video {
        object-fit: cover !important;
        object-position: 55% center !important;
    }

    /* Move hero content up and into normal document flow */
    #home > div.absolute.bottom-0.left-0.z-10.w-full {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;

        padding: 145px 20px 90px !important;
    }

    /* Hero content width */
    #home > div.absolute.bottom-0.left-0.z-10.w-full > div {
        max-width: 100% !important;
    }

    /* Top label */
    #home .kicker {
        width: fit-content !important;
        max-width: 100% !important;
        padding: 9px 14px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    /* Main Hero heading */
    #home .font-sora.font-extrabold {
        font-size: clamp(2.25rem, 10vw, 3rem) !important;
        line-height: 1.06 !important;
        margin-top: 22px !important;
        margin-bottom: 20px !important;
    }

    /* Description */
    #home p {
        font-size: 15px !important;
        line-height: 1.65 !important;
        max-width: 100% !important;
    }

    /* CTA buttons */
    #home .flex.flex-wrap.gap-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 24px !important;
        width: 100% !important;
    }

    #home .flex.flex-wrap.gap-3 > div {
        width: 100% !important;
        display: block !important;
        transform: none !important;
    }

    #home .flex.flex-wrap.gap-3 a {
        width: 100% !important;
        min-height: 54px !important;
        justify-content: center !important;
    }

    /* Hide the small bouncing down arrow on mobile */
    #home button[aria-label="Scroll down"] {
        display: none !important;
    }
}

/* ==================================================
   MOBILE HEADER - TRANSPARENT
================================================== */

@media (max-width: 767px) {

    #root nav {
        top: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Remove white/glass header box */
    #root nav > .glass-strong {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        border: none !important;
        box-shadow: none !important;

        height: 64px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Logo clean */
    #root nav img[alt="Digi Clickks"] {
        width: 54px !important;
        height: 54px !important;
        object-fit: contain !important;
    }

    /* Hamburger only */
    #root nav button[aria-label="Toggle menu"] {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 8px !important;
        color: #260A47 !important;
    }
}

/* ==================================================
   FINAL HEADER + HERO + LOGO SIZE FIX
================================================== */

/* ---------- DESKTOP / LAPTOP ---------- */
@media (min-width: 981px) {

    /* Keep hero content below fixed header */
    #home > div.absolute.bottom-0.left-0.z-10.w-full {
        top: 175px !important;
        bottom: auto !important;
    }

    /* Header logo bigger */
    #root nav a[href="#home"] > div {
        width: 54px !important;
        height: 54px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #root nav img[alt="Digi Clickks"] {
        width: 54px !important;
        height: 54px !important;
        object-fit: contain !important;
    }

    /* Footer logo bigger */
    #contact div:has(> img[alt="Digi Clickks"]) {
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
    }

    #contact img[alt="Digi Clickks"] {
        width: 52px !important;
        height: 52px !important;
    }
}


/* ---------- TABLET ---------- */
@media (min-width: 768px) and (max-width: 980px) {

    #root nav a[href="#home"] > div,
    #root nav img[alt="Digi Clickks"] {
        width: 52px !important;
        height: 52px !important;
    }

    #contact div:has(> img[alt="Digi Clickks"]),
    #contact img[alt="Digi Clickks"] {
        width: 50px !important;
        height: 50px !important;
    }
}


/* ---------- MOBILE ---------- */
@media (max-width: 767px) {

    /* Bigger mobile header logo */
    #root nav a[href="#home"] > div,
    #root nav img[alt="Digi Clickks"] {
        width: 58px !important;
        height: 58px !important;
    }

    /* Bigger footer logo */
    #contact div:has(> img[alt="Digi Clickks"]),
    #contact img[alt="Digi Clickks"] {
        width: 52px !important;
        height: 52px !important;
    }
}


/* ==================================================
   HERO DESKTOP / LAPTOP - FINAL POSITION FIX
================================================== */

@media (min-width: 981px) {

    #home {
        min-height: 100dvh !important;
        height: 100dvh !important;
    }

    #home > div.absolute.bottom-0.left-0.z-10.w-full {
        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        display: flex !important;
        align-items: center !important;

        padding:
            110px
            clamp(40px, 5vw, 72px)
            30px !important;
    }

    #home > div.absolute.bottom-0.left-0.z-10.w-full > div {
        width: 100% !important;
        max-width: 42rem !important;
    }
}

/* FINAL MOBILE POLISH */
@media (max-width: 767px) {

    /* Hero content a little higher */
    #home > div.absolute.bottom-0.left-0.z-10.w-full {
        padding: 115px 20px 70px !important;
    }

    /* Hero heading balanced */
    #home .font-sora.font-extrabold {
        font-size: clamp(2.15rem, 9.5vw, 2.8rem) !important;
        line-height: 1.07 !important;
    }

    /* Slightly tighter paragraph */
    #home p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    /* WhatsApp closer to corner */
    .elfsight-app-3d028908-cd28-4a4b-a9c9-9fd944eef506 {
        right: 12px !important;
        bottom: 14px !important;
    }
}

/* ==================================================
   HERO BACKGROUND - FINAL DEVICE POSITION
================================================== */

/* Desktop / Laptop */
@media (min-width: 981px) {
    #home > video {
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 980px) {
    #home > video {
        object-fit: cover !important;
        object-position: 55% center !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #home > video {
        object-fit: cover !important;
        object-position: 58% center !important;
    }
}

/* ==================================================
   FORCE WEBSITE LIGHT MODE
================================================== */

:root,
html,
body,
#root {
    color-scheme: only light !important;
}