/* Start custom CSS for html, class: .elementor-element-f605a84 *//*==================================================
            WEBSITE HERO SECTION
==================================================*/

.website-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 90px;
    padding: 120px 70px;
    background: 
        radial-gradient(circle at 15% 20%, rgba(125, 60, 255, .18), transparent 35%), 
        radial-gradient(circle at 85% 80%, rgba(255, 0, 204, .10), transparent 35%), 
        linear-gradient(180deg, #071021, #091226);
    position: relative;
    overflow: hidden;
}

.website-hero-left {
    flex: 1;
    z-index: 2;
}

.website-tag {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 40px;
    color: #b56dff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.website-hero h1 {
    font-size: 72px;
    line-height: 1.05;
    font-weight: 800;
    color: #fff;
    margin-bottom: 25px;
}

.website-hero h1 span {
    display: block;
    background: linear-gradient(90deg, #7d3cff, #ff00cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.website-hero p {
    max-width: 620px;
    font-size: 18px;
    line-height: 1.9;
    color: #bcc2d2;
    margin-bottom: 45px;
}

.website-hero p strong {
    color: #fff;
}

.website-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 55px;
    flex-wrap: wrap;
}

.website-btn-primary {
    padding: 18px 38px;
    background: linear-gradient(90deg, #7d3cff, #ff00cc);
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    transition: .35s;
}

.website-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(125, 60, 255, .35);
}

.website-btn-secondary {
    padding: 18px 38px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    transition: .35s;
}

.website-btn-secondary:hover {
    background: rgba(255, 255, 255, .08);
}

/* 3-Column SaaS KPI Card Grid Layout */
.website-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 720px;
}

.website-stats div {
    padding: 20px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
    backdrop-filter: blur(12px);
}

.website-stats h3 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 6px;
    font-weight: 700;
}

.website-stats p {
    margin: 0;
    color: #9198ac;
    font-size: 14px;
    line-height: 1.4;
}

/* Right Column & Visual Elements */
.website-hero-right {
    flex: 1;
    position: relative;
    height: 760px;
}

.website-dashboard {
    position: absolute;
    left: 20px;
    top: 40px;
    width: 420px;
    padding: 35px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 28px;
    backdrop-filter: blur(22px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
    animation: floatHero 6s ease-in-out infinite;
    z-index: 3;
}

.dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 12px #00e676;
}

.dashboard-header h4 {
    color: #fff;
    margin: 0;
}

.dashboard-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 130px;
}

.dashboard-chart span {
    flex: 1;
    background: linear-gradient(to top, #7d3cff, #ff00cc);
    border-radius: 20px;
}

.dashboard-chart span:nth-child(1) { height: 40px; }
.dashboard-chart span:nth-child(2) { height: 85px; }
.dashboard-chart span:nth-child(3) { height: 65px; }
.dashboard-chart span:nth-child(4) { height: 120px; }
.dashboard-chart span:nth-child(5) { height: 90px; }

.dashboard-growth {
    font-size: 64px;
    font-weight: 800;
    margin: 30px 0 8px;
    background: linear-gradient(90deg, #7d3cff, #ff00cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.website-dashboard small {
    color: #aab2c6;
}

/*====================================================
            WEBSITE HEALTH CARD
====================================================*/

.website-health-card {
    position: absolute;
    right: 20px;
    bottom: 70px;
    width: 320px;
    padding: 28px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
    animation: floatHero 7s ease-in-out infinite;
    animation-delay: 1.5s;
    z-index: 2;
}

.health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.health-header h5 {
    color: #fff;
    font-size: 18px;
    margin: 0;
}

.health-score {
    color: #00e676;
    font-size: 26px;
    font-weight: 700;
}

.health-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.health-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.health-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.health-item span {
    color: #b8bfd2;
    font-size: 15px;
}

.health-item strong {
    color: #fff;
    font-size: 15px;
}

/* Floating Badges */
.floating-badge {
    position: absolute;
    padding: 14px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
    animation: floatHero 6s ease-in-out infinite;
    z-index: 4;
}

.badge-one {
    top: 10px;
    right: 30px;
    animation-delay: 1s;
}

.badge-two {
    top: 170px;
    right: 0;
    animation-delay: 2s;
}

.badge-three {
    bottom: 120px;
    right: 30px;
    animation-delay: 3s;
}

.badge-four {
    bottom: 20px;
    left: 100px;
    animation-delay: 4s;
}

.badge-five {
    top: 300px;
    left: 20px;
    animation-delay: 2.8s;
}

@keyframes floatHero {
    0% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

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

@media(max-width: 991px) {
    .website-hero {
        flex-direction: column;
        padding: 90px 25px;
        text-align: center;
    }

    .website-hero h1 {
        font-size: 46px;
    }

    .website-buttons {
        justify-content: center;
    }

    .website-stats {
        grid-template-columns: repeat(3, 1fr);
        margin: 0 auto;
    }

    .website-hero-right {
        width: 100%;
        height: auto;
        min-height: 520px;
        margin-top: 50px;
    }

    .website-dashboard {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 30px;
    }

    .website-health-card {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }

    /* Hide floating badges on smaller screens to prevent clutter */
    .floating-badge {
        display: none;
    }
}

@media(max-width: 768px) {
    .website-stats {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 480px) {
    .website-hero h1 {
        font-size: 36px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5189087 *//*====================================================
            WEBSITE SOLUTIONS
====================================================*/

.website-categories {
    position: relative;
    padding: 120px 6%;
    background: #081320;
    overflow: hidden;
}

.website-categories:before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at top left, rgba(125,60,255,.10), transparent 35%),
        radial-gradient(circle at bottom right, rgba(255,0,204,.08), transparent 40%);
    pointer-events: none;
}

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

.section-heading {
    max-width: 900px;
    margin: 0 auto 80px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.section-heading > span {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 40px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #b56dff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.section-heading h2 {
    font-size: 54px;
    color: #fff;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 24px;
}

.section-heading p {
    color: #b8bfd2;
    font-size: 18px;
    line-height: 1.9;
}

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

.website-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    position: relative;
    z-index: 2;
}

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

.website-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 30px;
    background: #111c2c;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    transition: .35s;
    text-decoration: none;
    overflow: hidden;
    min-height: 540px;
}

.website-card:hover {
    transform: translateY(-10px);
    border-color: #8d34ff;
    box-shadow: 0 25px 60px rgba(125,60,255,.18);
}

.website-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #7d3cff, #ff00cc);
    transform: scaleX(0);
    transform-origin: left;
    transition: .35s;
}

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

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

.website-card.featured {
    background: linear-gradient(180deg, rgba(125,60,255,.14), rgba(17,28,44,.95));
    border-color: #8d34ff;
}

.card-badge {
    position: absolute;
    right: 24px;
    top: 24px;
    padding: 8px 18px;
    border-radius: 40px;
    background: linear-gradient(90deg, #7d3cff, #ff00cc);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

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

.website-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #7d3cff, #ff00cc);
    color: #fff;
    box-shadow: 0 12px 30px rgba(125,60,255,.30);
    overflow: hidden;
    flex-shrink: 0;
}

.website-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 26px;
    color: #fff;
    font-style: normal;
    line-height: 1;
}

.website-icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
    stroke: currentColor;
}

/*==========================
TYPOGRAPHY
==========================*/

.website-card h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 16px;
    min-height: 54px;
}

.website-card p {
    color: #aeb7cb;
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 22px;
}

/*==========================
META
==========================*/

.website-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.website-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 30px;
    background: rgba(125,60,255,.10);
    border: 1px solid rgba(125,60,255,.22);
    color: #d7bcff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/*==========================
LIST
==========================*/

.website-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    flex: 1;
}

.website-card li {
    position: relative;
    padding: 12px 0 12px 22px;
    color: #d7dceb;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.website-card li:last-child {
    border: none;
}

.website-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #b56dff;
    font-weight: 700;
}

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

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: #d86dff;
    font-size: 15px;
    font-weight: 700;
}

.card-link i {
    font-size: 12px;
    transition: .3s;
}

.website-card:hover .card-link {
    color: #fff;
}

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

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

@media(max-width: 768px) {
    .website-categories {
        padding: 90px 20px;
    }

    .section-heading h2 {
        font-size: 38px;
    }

    .website-card {
        padding: 28px;
        min-height: auto;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d03563a *//*=========================================
WHY CHICAIM WEBSITES
=========================================*/

.why-websites{
    position:relative;
    padding:120px 6%;
    background:#081320;
    overflow:hidden;
}

.why-websites::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    left:-150px;
    background:#7d3cff;
    border-radius:50%;
    filter:blur(120px);
    opacity:.18;
}

.why-websites::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    right:-120px;
    bottom:-120px;
    background:#ff00cc;
    border-radius:50%;
    filter:blur(120px);
    opacity:.15;
}

.why-container{
    position:relative;
    z-index:2;
    max-width:1400px;
    margin:0 auto;
}

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

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

.section-heading span{
    display:inline-block;
    padding:10px 22px;
    margin-bottom:22px;
    border-radius:50px;
    background:rgba(125,60,255,.12);
    border:1px solid rgba(125,60,255,.25);
    color:#d7b8ff;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.section-heading h2{
    color:#fff;
    font-size:54px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:24px;
}

.section-heading p{
    color:#b8bfd2;
    font-size:18px;
    line-height:1.9;
}

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

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:100px;
}

.why-card{
    padding:38px;
    border-radius:28px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:.35s ease;
}

.why-card:hover{
    transform:translateY(-10px);
    border-color:#7d3cff;
    box-shadow:0 20px 45px rgba(125,60,255,.18);
}

.why-icon{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    border-radius:20px;
    background:linear-gradient(135deg,#7d3cff,#ff00cc);
    color:#fff;
    font-size:32px;
    box-shadow:0 12px 30px rgba(125,60,255,.30);
}

.why-card h3{
    color:#fff;
    font-size:24px;
    font-weight:700;
    margin-bottom:16px;
}

.why-card p{
    color:#b8bfd2;
    line-height:1.8;
    font-size:16px;
}

/*=========================================
INCLUDED SECTION
=========================================*/

.included-section{
    margin-top:40px;
}

.included-heading{
    max-width:760px;
    margin:0 auto 55px;
    text-align:center;
}

.included-heading h2{
    color:#fff;
    font-size:42px;
    margin-bottom:18px;
}

.included-heading p{
    color:#b8bfd2;
    font-size:17px;
    line-height:1.8;
}

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

.included-card{
    padding:30px;
    border-radius:22px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    transition:.35s ease;
}

.included-card:hover{
    transform:translateY(-6px);
    border-color:#7d3cff;
    background:rgba(125,60,255,.08);
}

.included-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    margin-bottom:20px;
    background:linear-gradient(135deg,#7d3cff,#ff00cc);
    color:#fff;
    font-size:20px;
    font-weight:700;
}

.included-card h4{
    color:#fff;
    font-size:20px;
    margin-bottom:12px;
}

.included-card p{
    color:#b8bfd2;
    line-height:1.7;
    font-size:15px;
}

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

.website-cta{
    margin-top:100px;
    padding:70px 50px;
    text-align:center;
    border-radius:32px;
    background:linear-gradient(135deg,
        rgba(125,60,255,.15),
        rgba(255,0,204,.10));
    border:1px solid rgba(125,60,255,.20);
    backdrop-filter:blur(18px);
}

.website-cta h2{
    color:#fff;
    font-size:46px;
    font-weight:800;
    margin-bottom:20px;
}

.website-cta p{
    max-width:720px;
    margin:0 auto 40px;
    color:#c5cce0;
    font-size:18px;
    line-height:1.8;
}

.website-cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

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

.website-cta .btn-primary,
.website-cta .btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    transition:.35s ease;
}

.website-cta .btn-primary{
    background:linear-gradient(135deg,#7d3cff,#a64dff);
    color:#fff;
}

.website-cta .btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(125,60,255,.35);
}

.website-cta .btn-secondary{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
}

.website-cta .btn-secondary:hover{
    background:rgba(125,60,255,.12);
    border-color:#7d3cff;
    transform:translateY(-4px);
}

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

@media (max-width:1100px){

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

    .section-heading h2{
        font-size:46px;
    }

    .included-heading h2{
        font-size:36px;
    }

    .website-cta h2{
        font-size:40px;
    }

}

@media (max-width:768px){

    .why-websites{
        padding:90px 20px;
    }

    .section-heading{
        margin-bottom:60px;
    }

    .section-heading h2{
        font-size:34px;
    }

    .section-heading p{
        font-size:16px;
    }

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

    .why-card,
    .included-card{
        padding:28px;
    }

    .included-heading h2{
        font-size:30px;
    }

    .website-cta{
        padding:50px 25px;
    }

    .website-cta h2{
        font-size:30px;
    }

    .website-cta p{
        font-size:16px;
    }

    .website-cta-buttons{
        flex-direction:column;
        align-items:center;
    }

    .website-cta .btn-primary,
    .website-cta .btn-secondary{
        width:100%;
        max-width:320px;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9818154 *//*==================================================
 WEBSITE TYPES
==================================================*/

.website-types{

    padding:120px 60px;

    background:#08101d;

}

.types-header{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.types-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

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

    color:#b86cff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.types-header h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

}

.types-header p{

    color:#b8bfd2;

    font-size:18px;

    line-height:1.8;

}

.types-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:30px;

}

.type-card{

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

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

    border-radius:24px;

    padding:35px;

    transition:.35s;

    backdrop-filter:blur(18px);

}

.type-card:hover{

    transform:translateY(-10px);

    border-color:#8d34ff;

    box-shadow:0 20px 45px rgba(125,60,255,.18);

}

.featured{

    border:1px solid #8d34ff;

    box-shadow:0 0 40px rgba(125,60,255,.18);

}

.type-top{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}

.type-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    background:linear-gradient(135deg,#7d3cff,#ff00cc);

}

.type-top h3{

    color:#fff;

    font-size:26px;

    margin:0;

}

.type-top span{

    color:#d86bff;

    font-size:13px;

    font-weight:600;

}

.type-card p{

    color:#b8bfd2;

    line-height:1.8;

    margin-bottom:25px;

}

.type-card ul{

    list-style:none;

    padding:0;

    margin:0 0 30px;

}

.type-card li{

    color:#fff;

    padding:10px 0;

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

}

.type-card li:last-child{

    border-bottom:none;

}

.type-card a{

    display:inline-block;

    color:#d86bff;

    font-weight:700;

    text-decoration:none;

}

.type-card a:hover{

    color:#fff;

}

@media(max-width:768px){

.website-types{

padding:80px 20px;

}

.types-header h2{

font-size:36px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c2a49ef *//*==================================================
 FEATURES INCLUDED
==================================================*/

.website-features{

    padding:120px 60px;

    background:linear-gradient(180deg,#091226,#0a1020);

}

.features-header{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

}

.features-tag{

    display:inline-block;

    padding:10px 22px;

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

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

    border-radius:50px;

    color:#b86cff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.features-header h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

}

.features-header p{

    color:#b8bfd2;

    font-size:18px;

    line-height:1.8;

}

.features-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.feature-card{

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

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

    border-radius:22px;

    padding:35px;

    transition:.35s;

    backdrop-filter:blur(18px);

}

.feature-card:hover{

    transform:translateY(-8px);

    border-color:#8d34ff;

    box-shadow:0 20px 45px rgba(125,60,255,.18);

}

.feature-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(135deg,#7d3cff,#ff00cc);

    font-size:28px;

    margin-bottom:25px;

}

.feature-card h3{

    color:#fff;

    font-size:24px;

    margin-bottom:15px;

}

.feature-card p{

    color:#b8bfd2;

    line-height:1.8;

    margin:0;

}

@media(max-width:768px){

.website-features{

padding:80px 20px;

}

.features-header h2{

font-size:36px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c755fa5 *//*=========================================
        DEVELOPMENT PROCESS
=========================================*/

.development-process{

    padding:120px 60px;

    background:#08111f;

}

.process-header{

    max-width:850px;

    margin:0 auto 80px;

    text-align:center;

}

.process-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

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

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

    color:#b86cff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.process-header h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

}

.process-header p{

    color:#b8bfd2;

    font-size:18px;

    line-height:1.8;

}

.process-timeline{

    max-width:1100px;

    margin:auto;

}

.process-step{

    display:flex;

    align-items:flex-start;

    gap:30px;

    padding:25px 0;

}

.step-number{

    width:80px;

    height:80px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:linear-gradient(135deg,#7d3cff,#ff00cc);

    color:#fff;

    font-size:28px;

    font-weight:700;

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

}

.step-content{

    flex:1;

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

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

    border-radius:22px;

    padding:30px;

    transition:.35s;

}

.step-content:hover{

    transform:translateY(-6px);

    border-color:#8d34ff;

    box-shadow:0 20px 40px rgba(125,60,255,.18);

}

.step-content h3{

    color:#fff;

    font-size:28px;

    margin-bottom:15px;

}

.step-content p{

    color:#b8bfd2;

    line-height:1.8;

    margin:0;

}

.timeline-line{

    width:4px;

    height:40px;

    margin-left:38px;

    background:linear-gradient(#7d3cff,#ff00cc);

    opacity:.4;

}

@media(max-width:768px){

.development-process{

padding:80px 20px;

}

.process-header h2{

font-size:36px;

}

.process-step{

flex-direction:column;

align-items:flex-start;

}

.timeline-line{

margin-left:38px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a8cd2c9 *//*==================================================
        CHICAIM HUB INTEGRATION
==================================================*/

.hub-integration{

    padding:120px 60px;

    background:
    radial-gradient(circle at center,
    rgba(125,60,255,.12),
    transparent 45%),
    linear-gradient(180deg,#071021,#091226);

}

.hub-header{

    max-width:850px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;

}

.hub-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

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

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

    color:#b56dff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.hub-header h2{

    color:#fff;

    font-size:52px;

    font-weight:800;

    margin-bottom:20px;

}

.hub-header span{

    background:linear-gradient(90deg,#7d3cff,#ff00cc);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.hub-header p{

    color:#b8bfd2;

    font-size:18px;

    line-height:1.9;

}

.hub-layout{

    display:grid;

    grid-template-columns:1fr 520px 1fr;

    gap:40px;

    align-items:center;

}

.hub-item{

    display:flex;

    gap:18px;

    margin-bottom:25px;

    padding:22px;

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

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

    border-radius:20px;

    transition:.35s;

}

.hub-item:hover{

    transform:translateY(-6px);

    border-color:#8d34ff;

}

.hub-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#7d3cff,#ff00cc);

    font-size:28px;

    flex-shrink:0;

}

.hub-item h3{

    color:#fff;

    margin-bottom:8px;

    font-size:22px;

}

.hub-item p{

    color:#b8bfd2;

    line-height:1.7;

    margin:0;

}

/* Dashboard */

.dashboard-window{

    padding:35px;

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

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

    border-radius:28px;

    backdrop-filter:blur(20px);

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

}

.dashboard-top{

    display:flex;

    gap:10px;

    margin-bottom:25px;

}

.dashboard-top span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#7d3cff;

}

.dashboard-title{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin-bottom:35px;

}

.dashboard-metrics{

    display:flex;

    justify-content:space-between;

    margin-bottom:40px;

}

.dashboard-metrics h4{

    color:#fff;

    font-size:36px;

    margin-bottom:8px;

}

.dashboard-metrics p{

    color:#aeb7ca;

}

.dashboard-bars{

    display:flex;

    gap:12px;

    align-items:flex-end;

    height:160px;

}

.dashboard-bars span{

    flex:1;

    border-radius:20px;

    background:linear-gradient(to top,#7d3cff,#ff00cc);

}

.dashboard-bars span:nth-child(1){height:45px;}
.dashboard-bars span:nth-child(2){height:90px;}
.dashboard-bars span:nth-child(3){height:140px;}
.dashboard-bars span:nth-child(4){height:110px;}
.dashboard-bars span:nth-child(5){height:75px;}

.hub-footer{

    max-width:900px;

    margin:80px auto 0;

    text-align:center;

}

.hub-footer h3{

    color:#fff;

    font-size:42px;

    margin-bottom:20px;

}

.hub-footer p{

    color:#b8bfd2;

    font-size:18px;

    line-height:1.9;

}

@media(max-width:1100px){

.hub-layout{

grid-template-columns:1fr;

}

.dashboard-window{

max-width:520px;

margin:auto;

}

}

@media(max-width:768px){

.hub-integration{

padding:80px 20px;

}

.hub-header h2{

font-size:36px;

}

.hub-footer h3{

font-size:30px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f78d11f *//*=========================================
        TECHNOLOGY STACK
=========================================*/

.tech-stack{

    padding:120px 60px;

    background:linear-gradient(180deg,#091226,#071021);

}

.tech-header{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.tech-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

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

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

    color:#b86cff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.tech-header h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

}

.tech-header p{

    color:#b8bfd2;

    font-size:18px;

    line-height:1.8;

}

.tech-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.tech-card{

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

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

    border-radius:24px;

    padding:35px;

    transition:.35s;

    backdrop-filter:blur(18px);

}

.tech-card:hover{

    transform:translateY(-8px);

    border-color:#8d34ff;

    box-shadow:0 20px 45px rgba(125,60,255,.18);

}

.tech-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    background:linear-gradient(135deg,#7d3cff,#ff00cc);

    margin-bottom:25px;

}

.tech-card h3{

    color:#fff;

    font-size:24px;

    margin-bottom:25px;

}

.tech-list{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tech-list span{

    padding:10px 18px;

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

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

    border-radius:50px;

    color:#d9dcea;

    font-size:14px;

    transition:.3s;

}

.tech-list span:hover{

    border-color:#8d34ff;

    background:rgba(125,60,255,.15);

    transform:translateY(-3px);

}

@media(max-width:768px){

.tech-stack{

padding:80px 20px;

}

.tech-header h2{

font-size:36px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7f743b6 *//*=========================================
        WEBSITE PLANS
=========================================*/

.website-plans{

    padding:120px 60px;

    background:linear-gradient(180deg,#071021,#0b1326);

}

.plans-header{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.plans-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

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

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

    color:#b86cff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.plans-header h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

}

.plans-header p{

    color:#b8bfd2;

    font-size:18px;

    line-height:1.8;

}

.plans-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}

.plan-card{

    position:relative;

    padding:40px 35px;

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

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

    border-radius:24px;

    backdrop-filter:blur(20px);

    transition:.35s;

}

.plan-card:hover{

    transform:translateY(-10px);

    border-color:#8d34ff;

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

}

.featured{

    transform:scale(1.05);

    border:2px solid #8d34ff;

    background:linear-gradient(180deg,
    rgba(125,60,255,.12),
    rgba(255,255,255,.04));

    box-shadow:0 0 60px rgba(125,60,255,.22);

}

.popular-badge{

    position:absolute;

    top:-15px;

    left:50%;

    transform:translateX(-50%);

    background:linear-gradient(90deg,#7d3cff,#ff00cc);

    color:#fff;

    padding:8px 20px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}

.plan-label{

    color:#b86cff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

.plan-card h3{

    color:#fff;

    font-size:30px;

    margin:15px 0;

}

/* Price */

.plan-price{

    margin:30px 0;

    padding:25px;

    text-align:center;

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

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

    border-radius:20px;

}

.plan-price span{

    display:block;

    color:#aab3c8;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.plan-price strong{

    display:block;

    margin:12px 0;

    font-size:52px;

    font-weight:800;

    background:linear-gradient(90deg,#7d3cff,#ff00cc);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.plan-price small{

    display:block;

    color:#8f99ae;

    font-size:14px;

}

.hub-price{

    display:inline-block;

    margin-top:18px;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(125,60,255,.15);

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

    color:#d7b0ff;

    font-size:13px;

    font-weight:600;

}

.plan-card ul{

    list-style:none;

    padding:0;

    margin:35px 0;

}

.plan-card li{

    padding:12px 0;

    color:#d8dcea;

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

}

.plan-card li:last-child{

    border:none;

}

.plan-btn{

    display:block;

    text-align:center;

    padding:18px;

    border-radius:50px;

    background:linear-gradient(90deg,#7d3cff,#ff00cc);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

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

}

.plan-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(125,60,255,.4);

}

.plans-note{

    margin-top:60px;

    text-align:center;

}

.plans-note p{

    max-width:900px;

    margin:auto;

    color:#aeb7ca;

    line-height:1.8;

    font-size:17px;

}

.plans-note strong{

    color:#fff;

}

@media(max-width:768px){

.website-plans{

padding:80px 20px;

}

.plans-header h2{

font-size:36px;

}

.featured{

transform:none;

}

.plan-price strong{

font-size:42px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8bb8b99 *//*=========================================
        PROJECTS / EXPERTISE
=========================================*/

.portfolio-section{

    padding:120px 60px;

    background:linear-gradient(180deg,#0b1326,#071021);

}

.portfolio-header{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.portfolio-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

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

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

    color:#b86cff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.portfolio-header h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

}

.portfolio-header p{

    color:#b8bfd2;

    font-size:18px;

    line-height:1.8;

}

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.portfolio-card{

    padding:35px;

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

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

    border-radius:24px;

    transition:.35s;

}

.portfolio-card:hover{

    transform:translateY(-10px);

    border-color:#8d34ff;

    box-shadow:0 20px 50px rgba(125,60,255,.18);

}

.portfolio-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    background:linear-gradient(135deg,#7d3cff,#ff00cc);

    margin-bottom:25px;

}

.portfolio-card h3{

    color:#fff;

    font-size:28px;

    margin-bottom:18px;

}

.portfolio-card p{

    color:#b8bfd2;

    line-height:1.8;

    margin-bottom:25px;

}

.portfolio-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.portfolio-card li{

    padding:10px 0;

    color:#d8dcea;

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

}

.portfolio-card li:last-child{

    border:none;

}

.portfolio-highlight{

    background:linear-gradient(135deg,#7d3cff,#ff00cc);

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.portfolio-highlight p{

    color:#fff;

}

.portfolio-btn{

    display:inline-block;

    margin-top:10px;

    background:#fff;

    color:#7d3cff;

    padding:16px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

}

@media(max-width:768px){

.portfolio-section{

padding:80px 20px;

}

.portfolio-header h2{

font-size:36px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bc366c1 *//*=========================================
            FAQ SECTION
=========================================*/

.website-faq{

    padding:120px 60px;

    background:#071021;

}

.faq-header{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.faq-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

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

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

    color:#b86cff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.faq-header h2{

    color:#fff;

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

}

.faq-header p{

    color:#b8bfd2;

    font-size:18px;

    line-height:1.8;

}

.faq-container{

    max-width:950px;

    margin:auto;

}

.faq-item{

    margin-bottom:20px;

    border-radius:18px;

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

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

    overflow:hidden;

    transition:.3s;

}

.faq-item:hover{

    border-color:#8d34ff;

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    background:none;

    border:none;

    cursor:pointer;

    color:#fff;

    font-size:20px;

    font-weight:600;

    text-align:left;

}

.faq-icon{

    font-size:28px;

    color:#b86cff;

    transition:.3s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq-answer p{

    padding:0 30px 30px;

    color:#b8bfd2;

    line-height:1.8;

    font-size:16px;

}

.faq-item.active .faq-answer{

    max-height:300px;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

}

@media(max-width:768px){

.website-faq{

padding:80px 20px;

}

.faq-header h2{

font-size:36px;

}

.faq-question{

font-size:18px;

padding:20px;

}

.faq-answer p{

padding:0 20px 25px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-aa54c50 *//*=========================================
            WEBSITE CTA
=========================================*/

.website-cta{

    position:relative;

    overflow:hidden;

    padding:140px 20px;

    background:
    radial-gradient(circle at top,#1d1142 0%,#08111f 45%,#050b17 100%);

}

.cta-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.35;

}

.cta-glow-1{

    width:350px;

    height:350px;

    background:#7d3cff;

    top:-120px;

    left:-120px;

}

.cta-glow-2{

    width:300px;

    height:300px;

    background:#ff00cc;

    bottom:-120px;

    right:-80px;

}

.website-cta-content{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

    padding:70px 60px;

    border-radius:32px;

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

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

    backdrop-filter:blur(18px);

}

.cta-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(125,60,255,.15);

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

    color:#dcb5ff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.website-cta-content h2{

    color:#fff;

    font-size:54px;

    line-height:1.2;

    font-weight:800;

    margin-bottom:25px;

}

.website-cta-content h2 span{

    background:linear-gradient(90deg,#7d3cff,#ff00cc);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.website-cta-content p{

    max-width:760px;

    margin:0 auto;

    color:#bcc4d7;

    font-size:19px;

    line-height:1.9;

}

.cta-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-primary{

    padding:18px 38px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    background:linear-gradient(90deg,#7d3cff,#ff00cc);

    transition:.35s;

}

.cta-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(125,60,255,.35);

}

.cta-secondary{

    padding:18px 38px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

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

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

    transition:.35s;

}

.cta-secondary:hover{

    border-color:#7d3cff;

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

}

.cta-features{

    margin-top:60px;

    display:grid;

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

    gap:20px;

}

.cta-feature{

    padding:22px;

    border-radius:18px;

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

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

}

.cta-feature span{

    display:block;

    color:#b86cff;

    font-size:28px;

    margin-bottom:10px;

}

.cta-feature p{

    color:#fff;

    font-size:16px;

    line-height:1.5;

    margin:0;

}

@media(max-width:768px){

.website-cta{

padding:90px 20px;

}

.website-cta-content{

padding:50px 25px;

}

.website-cta-content h2{

font-size:36px;

}

.website-cta-content p{

font-size:17px;

}

.cta-features{

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

}

}

@media(max-width:480px){

.cta-features{

grid-template-columns:1fr;

}

}/* End custom CSS */