/**
Theme Name: clicktell
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clicktell
Template: astra
*/


/*  */
header {
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    background: linear-gradient(88.94deg, #743EE4 -107.81%, #0B0B11 -94.59%);
    position: fixed !important;
    z-index: 99 !important;
    top: 0 !important;
}

header .elementor-widget-clictell_header {
    width: 100%;
}

.clictell-header-section {
    /* Matches the deep dark theme */
    padding: 20px 0;
    width: 100%;
    z-index: 100;
}

.clictell-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Styling */
.clictell-header-logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.clictell-header-logo-img {
    max-height: 40px;
    /* Constrains image height nicely in the header */
    width: auto;
}

.clictell-header-logo-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #ffffff;
    font-family: 'Space Grotesk', sans-serif;
}

/* Header Button Styling (Scaled down from global) */
.clictell-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    padding: 12px 32px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    /* Scaled down for header */
    line-height: 1;
    text-decoration: none;

    /* Base background */
    background: linear-gradient(91.51deg, #7300FF 17.76%, #C18FFF 185.28%);

    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Hover Layer for Smooth Transition */
.clictell-header-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(260deg, #7300FF 17.76%, #C18FFF 185.28%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.clictell-header-btn:hover::before {
    opacity: 1;
}

.clictell-header-btn:hover {
    text-decoration: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .clictell-header-section {
        padding: 16px 0;
    }

    .clictell-header-logo-text {
        font-size: 22px;
    }

    .clictell-header-btn {
        padding: 10px 24px;
        font-size: 14px;
    }
}

.clictell-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 10px;
}

/* --- Enterprise Readiness Section --- */
.clictell-enterprise-section {
    padding: 100px 20px;
    background-color: #ffffff;
}

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

/* Kicker (ENTERPRISE READINESS) */
.clictell-kicker {
    color: #7300FF;
    margin-bottom: 20px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 10%;
    text-transform: uppercase;
}

/* Main Title */
.clictell-enterprise-title {
    color: #000000;
    margin-bottom: 70px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 60px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
}

/* Pill Grid Container */
.clictell-features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 0 auto;
}

/* Individual Feature Pill */
.clictell-feature-pill {
    display: inline-block;
    padding: 22px 22px;
    color: #4B4B4B;
    background-color: #ffffff;
    border-radius: 9999px;
    transition: all 0.3s ease;
    border: 1px solid #7300FF;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 22px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
}

/* Optional hover state */
.clictell-feature-pill:hover {
    background-color: #faf5ff;
    border-color: #C18FFF;
}



/* ==========================================================================
   Global Button Style (.clictell-btn-global)
   Use this class anywhere in Elementor (Advanced > CSS Classes)
   ========================================================================== */
.clictell-btn-global {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    padding: 15px 80px;
    border-radius: 9999px;
    transition: all 0.3s ease-in-out;
    border: none;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;

    /* Original base background */
    background: linear-gradient(91.51deg, #7300FF 17.76%, #C18FFF 185.28%);

    /* Required for the smooth transition trick */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* 1. Create a layer that holds the hover gradient */
.clictell-btn-global::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;

    /* The hover background */
    background: linear-gradient(260deg, #7300FF 17.76%, #C18FFF 185.28%);

    /* Keep it behind the text and hidden by default */
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* 2. Fade the hover layer in smoothly on hover */
.clictell-btn-global:hover::before {
    opacity: 1;
}

/* 3. Keep standard hover rules here */
.clictell-btn-global:hover {
    text-decoration: none;
}

/* ==========================================================================
   CTA Section (Get Started)
   ========================================================================== */
.clictell-cta-section {
    padding: 100px 20px;
    color: #ffffff;
    background: linear-gradient(174.76deg, #743EE4 -85.91%, #0B0B11 113.34%);
}

.clictell-cta-kicker {
    color: #C18FFF;
    /* Soft purple */
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.clictell-cta-title {
    color: #ffffff;
    font-size: 60px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 36px;
    margin-left: auto;
    margin-right: auto;
}

.clictell-cta-desc {
    color: #e5e7eb;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    font-family: Space Grotesk;
    font-weight: 300;
    font-size: 35px;
    line-height: 130%;
    letter-spacing: -3%;
    text-align: center;
}



/* ==========================================================================
   Who It's For (Verticals) Section
   ========================================================================== */
.clictell-verticals-section {
    padding: 100px 20px;
    position: relative;
    z-index: 1;
    background: #F6F2FB;
}

.clictell-verticals-section::before {
    content: "";
    background-image: url('/wp-content/uploads/2026/06/Ellipse-4-1-scaled.png');
    position: absolute;
    top: 0;
    right: 0;
    width: 60vw;
    max-width: 800px;
    height: 800px;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    mix-blend-mode: screen;
}

.clictell-verticals-header {
    max-width: 1000px;
    margin-bottom: 70px;
    position: relative;
    z-index: 1;
}

.clictell-verticals-kicker {
    color: #7300FF;
    margin-bottom: 28px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 10%;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.clictell-verticals-title {
    color: #000000;
    margin: 0;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 60px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
    position: relative;
    z-index: 1;
}

/* 3-Column Grid */
.clictell-verticals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    position: relative;
    z-index: 1;
}

/* Individual Card */
.clictell-vertical-card {
    background-color: #F4EEFB;
    border: 1px dashed #c084fc;
    /* Light purple dashed line */
    border-radius: 20px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 1;
    s
}

.clictell-vertical-card:hover {
    background-color: #FFFFFF;
}

.clictell-vertical-icon {
    color: #8b3dff;
    /* Purple icon */
    font-size: 28px;
    margin-bottom: 45px;
}

.clictell-vertical-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.clictell-vertical-card-title {
    color: #000000;
    margin-bottom: 16px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 26px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
}

.clictell-vertical-card-desc {
    color: #000000;
    margin-bottom: 0;
    flex-grow: 1;
    font-family: Space Grotesk;
    font-weight: 300;
    font-size: 16px;
    line-height: 131%;
    letter-spacing: -3%;
}

/* Optional Link at bottom of card */
.clictell-vertical-link {
    display: inline-block;
    margin-top: 24px;
    color: #8b3dff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.clictell-vertical-link:hover {
    color: #7224e6;
    text-decoration: underline;
}

/* ==========================================================================
   How It Works Section (Dark Theme)
   ========================================================================== */
.clictell-howitworks-section {
    padding: 100px 20px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    background: linear-gradient(183.12deg, #000000 52.85%, #5838A3 206.75%);
    position: relative;
}

.clictell-howitworks-section::before {
    content: "";
    position: absolute;
    background-image: url('/wp-content/uploads/2026/06/bg-img-1.png');
    width: 100%;
    height: 80%;
    left: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.clictell-hw-header {
    max-width: 1150px;
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
}

.clictell-hw-kicker {
    color: #C18FFF;
    margin-bottom: 25px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 10%;
    text-transform: uppercase;
}

.clictell-hw-title {
    color: #ffffff;
    margin-bottom: 36px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-style: Medium;
    font-size: 60px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
}

.clictell-hw-desc {
    font-size: 35px;
    line-height: 130%;
    color: #ffffff;
    /* Light grey */
    font-weight: 300;
}

/* 3-Column Grid */
.clictell-hw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
    /* Ensures cards sit above Elementor background images */
}

/* Individual Step Card */
.clictell-hw-card {
    background-color: #15151A;
    border-radius: 20px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 1px solid #494949;
}

.clictell-hw-card:hover {
    border-color: rgba(167, 139, 250, 0.4);
    transform: translateY(-5px);
}

/* Small purple icon box inside card */
.clictell-hw-icon-wrap {
    background-color: #2c1654;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: #a78bfa;
    font-size: 20px;
}

.clictell-hw-icon-wrap svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.clictell-hw-card-title {
    color: #FFFFFF;
    margin-bottom: 16px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 22px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
}

.clictell-hw-card-desc {
    color: #9C8CB0;
    margin: 0;
    font-family: Space Grotesk;
    font-weight: 400;
    font-size: 14px;
    line-height: 114.99999999999999%;
    letter-spacing: 4%;
}

/* Footer Banner */
.clictell-hw-footer {
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(177.39deg, rgba(0, 0, 0, 0.38) -125.01%, rgba(88, 56, 163, 0.38) 274.27%);
    border: 1px solid #000000;
}

.clictell-hw-footer p {
    margin: 0;
    color: #C18FFF;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 18px;
    line-height: 110.00000000000001%;
    letter-spacing: 10%;
}



/* ==========================================================================
   What Makes Us Different Section
   ========================================================================== */
.clictell-diff-section {
    padding: 100px 20px;
    background-color: #F6F2FB;
    /* Very light purple/grey tint */
}

.clictell-diff-header {
    max-width: 1100px;
    margin-bottom: 60px;
}

.clictell-diff-kicker {
    color: #7300FF;
    margin-bottom: 28px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 10%;
    text-transform: uppercase;
}

.clictell-diff-title {
    margin-bottom: 36px;
    font-weight: 500;
    font-size: 60px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
}

.clictell-diff-title-dark {
    color: #111827;
    /* Dark charcoal */
}

.clictell-diff-title-purple {
    color: #7300FF;
    /* Bright purple */
}

.clictell-diff-desc {
    color: #000;
    max-width: 1200px;
    font-family: Space Grotesk;
    font-weight: 300;
    font-size: 35px;
    line-height: 130%;
    letter-spacing: -3%;
}

/* 3-Column Grid */
.clictell-diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Individual Card */
.clictell-diff-card {
    border-radius: 35px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid #291B45;
    background: linear-gradient(159deg, #21163C -43.27%, #593BA2 242.29%);
}

.clictell-diff-card.active {
    background: linear-gradient(358deg, #53228E 7.46%, #220949 274.94%);
}

/* Large Background Number */
.clictell-diff-card-num {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #5C498A;
    z-index: 1;
    user-select: none;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 50px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
}

/* Wrapper to keep text above the background number */
.clictell-diff-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.clictell-diff-card-label {
    color: #C18FFF;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 24px;
    line-height: 110.00000000000001%;
    letter-spacing: 14%;
}

.clictell-diff-card-desc {
    color: #f3f4f6;
    margin: 0;
    font-family: Space Grotesk;
    font-weight: 300;
    font-style: Light;
    font-size: 18px;
    line-height: 131%;
    letter-spacing: 0%;
}



/* ==========================================================================
   Core Capabilities Section
   ========================================================================== */
.clictell-core-section {
    padding: 80px 20px;
    background-color: #ffffff;
}

.clictell-core-kicker {
    color: #8b3dff;
    /* Purple */
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

/* 4-Column Grid System for asymmetric layout */
.clictell-core-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Card Width Modifiers */
.clictell-core-card.span-4 {
    grid-column: span 4;
}

.clictell-core-card.span-2 {
    grid-column: span 2;
}

.clictell-core-card.span-1 {
    grid-column: span 1;
    padding-left: 25px;
    padding-right: 25px;
}

/* Base Card Styling */
.clictell-core-card {
    border-radius: 35px;
    padding: 46px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;

    /* 1. Make the actual border transparent */
    border: 1px solid transparent;

    /* 2. Layer the white background inside, and the gradient border outside */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        /* The inner white card */
        linear-gradient(180deg, #7300FF 0%, #2F1C4C 100%) border-box;
    /* The gradient border */
}

/* Icon Box */
.clictell-core-icon {
    width: 48px;
    height: 48px;
    background-color: #f3e8ff;
    /* Very light purple bg */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b3dff;
    /* Purple icon */
    font-size: 24px;
    margin-bottom: 45px;
}

.clictell-core-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.clictell-core-card-title {
    color: #000;
    margin-bottom: 24px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 26px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
    flex: 1;
}

.clictell-core-card-desc {
    color: #000;
    margin: 0;
    font-family: Space Grotesk;
    font-weight: 300;
    font-size: 16px;
    line-height: 131%;
    letter-spacing: -3%;
    flex: 1;
}



/* ==========================================================================
   The Challenge Section
   ========================================================================== */
.clictell-challenge-section {
    padding: 100px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(238, 225, 255, 0.6) 100%);
}

.clictell-challenge-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Right side is slightly wider */
    gap: 60px;
    align-items: center;
}

.clictell-challenge-kicker {
    color: #7300FF;
    margin-bottom: 40px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 10%;
    text-transform: uppercase;
}

.clictell-challenge-title {
    margin: 0;
    font-weight: 500;
    font-size: 60px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
}

.clictell-challenge-title-dark {
    color: #000000;
    /* Dark charcoal */
}

.clictell-challenge-title-purple {
    color: #7300FF;
    /* Bright purple */
}

/* Right Column (Text Box) Styling */
.clictell-challenge-box {
    border: 1px solid #7300ff;
    /* Thin purple border */
    border-radius: 40px;
    padding: 48px 40px;
    background-color: #fff;
}

.clictell-challenge-p1 {
    color: #000000;
    margin-bottom: 30px;
    font-family: Space Grotesk;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0%;
}

.clictell-challenge-p2 {
    margin: 0;
    font-family: Space Grotesk;
    font-weight: 400;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: 0%;
}

.clictell-challenge-p2-dark {
    color: #1f2937;
    /* Dark text */
    font-weight: 400;
}

.clictell-challenge-p2-purple {
    color: #8b3dff;
    /* Bright purple highlight */
    font-weight: 500;
}


/* ==========================================================================
   Main Hero Section
   ========================================================================== */
.clictell-main-hero-section {
    padding: 20px 20px;
    background-color: #030008;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(5.26deg, #0B0B11 25.38%, #743EE4 222.11%);
    position: relative;
}

.clictell-main-hero-section::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    height: 160px;
    background: radial-gradient(ellipse at center, rgba(167, 82, 255, 0.9) 0%, rgba(167, 82, 255, 0.45) 60%, rgba(167, 82, 255, 0.15) 30%, transparent 100%);
    filter: blur(30px);
    pointer-events: none;
    width: 100%;
}

.clictell-main-hero-section::after {
    content: '';
    position: absolute;
    background-image: url(/wp-content/uploads/2026/06/bg.png);
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.clictell-main-hero-section .clictell-container {
    max-width: 990px;
    position: relative;
    z-index: 1;
}

.clictell-main-hero-title {
    margin-bottom: 50px;
    font-family: Space Grotesk;
    font-weight: 400;
    font-style: Regular;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: -2%;
    text-align: center;
}

.clictell-mh-white {
    color: #ffffff;
}

.clictell-mh-purple {
    color: #C18FFF;
    line-height: 130%;
    font-weight: 700;
}

.clictell-main-hero-desc {
    color: #ffffff;
    margin: 0 auto 40px auto;
    font-family: Space Grotesk;
    font-weight: 300;
    font-style: Light;
    font-size: 30px;
    line-height: 122%;
    letter-spacing: 0%;
    text-align: center;
}

.clictell-mh-btn-wrapper {
    margin-bottom: 100px;
    /* Pushes the industries list to the bottom */
}

/* Industry Tags at the bottom */
.clictell-main-hero-industries ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.clictell-main-hero-industries li {
    color: #C8ADFF;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-family: Space Grotesk;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 20%;
}

/* Automatically adds the bullet dot separator between items */
.clictell-main-hero-industries li:not(:last-child)::after {
    content: "•";
    margin-left: 12px;
    color: #C8ADFF;
    /* Darker grey dot */
}


/* Responsive Adjustments */
@media (max-width: 992px) {
    .clictell-verticals-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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


    /* Break down to 2 columns on tablets */
    .clictell-core-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clictell-core-card.span-2,
    .clictell-core-card.span-1 {
        grid-column: span 1;
        /* Make everything take up half the screen */
    }

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

    .clictell-challenge-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .clictell-challenge-left {
        max-width: 100%;
    }
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .clictell-main-hero-section {
        height: 100vh;
    }

    .clictell-container.clictell-header-flex {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .clictell-main-hero-title {
        font-size: 36px;
    }

    .clictell-main-hero-desc {
        font-size: 16px;
    }

    .clictell-mh-btn-wrapper {
        margin-bottom: 60px;
    }

    .clictell-main-hero-industries ul {
        column-gap: 8px;
        row-gap: 12px;
    }

    .clictell-main-hero-industries li {
        font-size: 10px;
    }

    .clictell-main-hero-industries li:not(:last-child)::after {
        margin-left: 8px;
    }

    .clictell-enterprise-title {
        font-size: 32px;
        margin-bottom: 35px;
    }

    .clictell-feature-pill {
        font-size: 14px;
        padding: 8px 15px;
    }

    .clictell-features-grid {
        gap: 12px;
    }

    .clictell-diff-desc {
        font-size: 24px;
    }

    .clictell-cta-section,
    .clictell-enterprise-section,
    .clictell-verticals-section,
    .clictell-howitworks-section,
    .clictell-diff-section,
    .clictell-core-section,
    .clictell-challenge-section,
    .clictell-main-hero-section {
        padding: 50px 10px;
    }

    .clictell-cta-title {
        font-size: 32px;
    }

    .clictell-cta-desc {
        font-size: 18px;
    }

    .clictell-btn-global {
        font-size: 16px;
        padding: 12px 28px;
    }

    .clictell-verticals-title {
        font-size: 32px;
    }

    .clictell-verticals-grid {
        grid-template-columns: 1fr;
    }

    .clictell-vertical-card {
        padding: 30px 24px;
    }

    .clictell-hw-title {
        font-size: 32px;
    }

    .clictell-hw-grid {
        grid-template-columns: 1fr;
    }

    .clictell-hw-footer p {
        font-size: 12px;
        line-height: 1.8;
    }


    .clictell-diff-title {
        font-size: 32px;
    }

    .clictell-diff-grid {
        grid-template-columns: 1fr;
    }

    /* Single column on mobile */
    .clictell-core-grid {
        grid-template-columns: 1fr;
    }

    .clictell-core-card.span-4,
    .clictell-core-card.span-2,
    .clictell-core-card.span-1 {
        grid-column: span 1;
    }

    .clictell-core-card {
        padding: 30px 24px;
    }

    .clictell-core-card:hover,
    .clictell-core-card.is-highlighted {
        padding: 29px 23px;
        /* Mobile border offset */
    }

    .clictell-challenge-title {
        font-size: 36px;
    }

    .clictell-challenge-box {
        padding: 30px 24px;
    }

    .clictell-challenge-p1 {
        font-size: 14px;
    }

    .clictell-challenge-p2 {
        font-size: 16px;
    }
}



/* Responsive Adjustments */
@media (max-width: 992px) {
    .clictell-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clictell-footer-brand {
        grid-column: span 2;
        padding-right: 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .clictell-footer-section {
        padding: 60px 20px 20px;
    }

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

    .clictell-footer-brand {
        grid-column: span 1;
    }
}

/* ==========================================================================
   Footer Accordion Features (Fortified)
   ========================================================================== */


/* ==========================================================================
   Footer Section
   ========================================================================== */
footer {
    padding: 0 !important;
    background: linear-gradient(180.04deg, #000000 0.03%, #2F1C4C 209.35%);

}

footer .elementor-widget-clictell_footer {
    width: 100%;
}

.clictell-footer-section {
    color: #ffffff;
    padding: 80px 20px 30px;
}

/* 4-Column Grid: Brand column is wider (1.5fr) */
.clictell-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

/* Brand Column */
.clictell-footer-brand {
    /* padding-right: 40px; */
}

.clictell-footer-logo-img {
    max-width: 150px;
    height: auto;
    margin-bottom: 20px;
}

.clictell-footer-logo-text {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #ffffff;
    margin-bottom: 20px;
}

.clictell-footer-desc {
    color: #9C8CB0;
    margin: 0;
    font-family: Space Grotesk;
    font-weight: 500;
    font-style: Medium;
    font-size: 22px;
    line-height: 140%;
    letter-spacing: 0%;
}

/* Navigation Columns */
.clictell-footer-nav h4 {
    color: #C18FFF;
    margin-bottom: 24px;
    font-weight: 700;
    font-style: Bold;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: 0%;
}

.clictell-footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clictell-footer-nav li {
    margin-bottom: 16px;
}

.clictell-footer-nav a {
    color: #9C8CB0;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0;
}

.clictell-footer-nav {
    padding-top: 100px;
}

.clictell-footer-nav a:hover {
    color: #ffffff;
    text-decoration-color: #ffffff;
}

/* Bottom Bar */
.clictell-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.clictell-footer-bottom p {
    color: #9ca3af;
    font-size: 12px;
    margin: 0;
}

/* Hide the accordion plus/minus icon on Desktop */
.clictell-accordion-icon {
    display: none;
}

/* Mobile Accordion Styles */
@media (max-width: 768px) {
    .clictell-howitworks-section::before {
        background-size: cover;
    }

    .clictell-footer-grid {
        gap: 0;
        grid-template-columns: 1fr;
        margin-bottom: 10px;
    }

    .clictell-footer-nav {
        padding-top: 0;
    }

    .clictell-footer-section {
        padding: 40px 10px 30px;
    }

    .clictell-footer-brand {
        margin-bottom: 30px;
    }

    .clictell-footer-nav {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .clictell-footer-nav:last-of-type {
        border-bottom: none;
    }

    /* 1. Force the Header to be a flex row for the icon */
    .clictell-accordion-trigger {
        cursor: pointer;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        margin-bottom: 0 !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* 2. Force the Icon to display */
    .clictell-accordion-icon {
        display: block !important;
        width: 14px;
        height: 14px;
        position: relative;
    }

    .clictell-accordion-icon::before,
    .clictell-accordion-icon::after {
        content: '';
        position: absolute;
        background-color: #c4b5fd;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .clictell-accordion-icon::before {
        top: 0;
        bottom: 0;
        left: 6px;
        right: 6px;
    }

    .clictell-accordion-icon::after {
        left: 0;
        right: 0;
        top: 6px;
        bottom: 6px;
    }

    /* Open State Animations */
    .clictell-footer-nav.is-open .clictell-accordion-icon::before {
        transform: rotate(90deg);
        opacity: 0;
    }

    .clictell-footer-nav.is-open .clictell-accordion-icon::after {
        transform: rotate(180deg);
    }

    /* 3. Content box hidden by default (NO !important here) */
    .clictell-accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .clictell-accordion-content ul {
        padding-bottom: 20px;
    }
}

/* ==========================================================================
   Contact / Talk to an Expert Section
   ========================================================================== */
.clictell-contact-section {
    padding: 180px 20px 100px;
    background: linear-gradient(5.26deg, #0B0B11 25.38%, #743EE4 222.11%);
    /* Default dark gradient */
    color: #ffffff;
}

.clictell-contact-grid {
    display: grid;
    grid-template-columns: 1fr 620px;
    gap: 90px;
    align-items: center;
}

/* Left Column Styling */
.clictell-contact-kicker {
    color: #C18FFF;
    margin-bottom: 40px;
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 10%;
    text-transform: uppercase;
}

.clictell-contact-title {
    color: #ffffff;
    margin-bottom: 40px;
    font-weight: 700;
    font-style: Bold;
    font-size: 60px;
    line-height: 110.00000000000001%;
    letter-spacing: -3%;
}

.clictell-contact-desc {
    color: #FFFFFF;
    max-width: 90%;
    font-family: Space Grotesk;
    font-weight: 400;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: 0%;
    padding-bottom: 60px;
    margin-bottom: 0 !important;
}

/* Bullet List */
.clictell-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.clictell-contact-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 45px;
}


.clictell-contact-list li {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.clictell-contact-check {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background-color: #2F1C4C;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    margin-top: 4px;
    border: 1px solid #C18FFF;
}
.clictell-contact-list-text {
    color: #FFFFFF;
    font-family: Space Grotesk;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0%;
}

/* Right Column (Form Box) Styling */
.clictell-contact-box {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 60px;
    color: #000;
    border: 1px solid #494949;
    box-shadow: 20px 4px 22.6px 9px #00000040;
}
.clictell-contact-box-title {
    margin-bottom: 5px;
    color: #000000;
    font-weight: 500;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: 0%;
}
.clictell-contact-box-subtitle {
    color: #6C6C6C;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 50px !important;
}
.clictell-contact-disclaimer {
    color: #7E7E7E;
    margin-top: 24px;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 13px;
    line-height: 140%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 0 !important;
}
.ff-default .ff-el-input--label label {
    font-family: Space Grotesk;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000;
}
.ff-default .ff-el-form-control {
    border: 2px solid #EFE4FB !important;
    width: 100%;
    height: 50px;
    opacity: 1;
    border-radius: 9px !important;
}
fieldset {
    display: flex;
    flex-direction: column;
}
form.fluent_form_1 .wpf_has_custom_css.ff-btn-submit {
    background: linear-gradient(91.51deg, #7300FF 17.76%, #C18FFF 185.28%) !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    font-family: "Space Grotesk", Sans-serif !important;
    margin-top: 50px;
}
/* ==========================================================================
   FluentForm Overrides (To match the Figma Design)
   ========================================================================== */
.clictell-fluentform-wrapper .ff-el-group {
    margin-bottom: 20px !important;
}

.clictell-fluentform-wrapper .ff-el-form-control {
    border: 1px solid #e9d5ff !important;
    /* Light purple border */
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    background-color: #faf5ff !important;
    /* Very faint purple bg */
    color: #111827 !important;
}

.clictell-fluentform-wrapper .ff-el-form-control::placeholder {
    color: #9ca3af !important;
}

/* Form Labels */
.clictell-fluentform-wrapper .ff-el-input--label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
}

/* Submit Button Override */
.clictell-fluentform-wrapper .ff-btn-submit {
    width: 100% !important;
    background: linear-gradient(91.51deg, #7300FF 17.76%, #C18FFF 185.28%) !important;
    border: none !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: opacity 0.3s ease !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.clictell-fluentform-wrapper .ff-btn-submit:hover {
    opacity: 0.9 !important;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .clictell-contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .clictell-contact-left {
        text-align: center;
    }

    .clictell-contact-list li {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .clictell-contact-section {
        padding: 100px 20px;
    }

    .clictell-contact-title {
        font-size: 36px;
    }

    .clictell-contact-box {
        padding: 30px 20px;
    }
}