:root{
    --blue:#F85800;
    --blue-dark:#001848;
    --blue-light:#FFB800;
    --navy:#001848;
    --text:#687487;
    --white:#fff;
    --soft:#FFFDFC;
    --line:#e6ebf2;
    --shadow:0 20px 60px rgba(13,35,70,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,sans-serif;color:var(--text);overflow-x:hidden;background:#fff;line-height:1.7}
h1,h2,h3,h4,h5{font-family:"Plus Jakarta Sans",sans-serif;color:var(--navy);font-weight:700}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}
.container{max-width:1220px}

/* loader */
.page-loader{position:fixed;inset:0;background:#fff;z-index:10000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;transition:.7s}
.page-loader.loaded{opacity:0;visibility:hidden}
.loader-logo{font-size:30px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:10px}
.loader-logo>span>span{color:var(--blue)}
.loader-line{width:180px;height:3px;background:#e8edf5;overflow:hidden;border-radius:10px}
.loader-line span{display:block;width:60%;height:100%;background:var(--blue);animation:loader 1s infinite}
@keyframes loader{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

/* logo */
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    width: 180px;
    height: 55px;
    object-fit: contain;
    display: block;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .brand-logo {
        width: 140px;
        height: 45px;
    }
}

/* topbar */
.topbar{height:49px;border-bottom:1px solid #e9edf3;background:#fff;font-size:14px;color:#171c25}
.topbar-inner{height:49px;display:flex;justify-content:space-between;align-items:center}
.top-left,.top-right{display:flex;align-items:center;gap:18px}
.top-left i{color:#202733;margin-right:8px}
.top-divider{height:18px;width:1px;background:#b9bec7;display:inline-block}
.top-right a{font-weight:500}
.currency{border:1px solid #dfe4ea;border-radius:24px;background:#fff;padding:7px 13px;display:flex;align-items:center;gap:8px}

/* header */
.main-header{position:sticky;top:0;z-index:999;background:#fff;box-shadow:0 4px 20px rgba(11,28,55,.06);transition:.35s}
.main-header.scrolled{box-shadow:0 10px 35px rgba(11,28,55,.12)}
.header-container{height:90px;display:flex;align-items:center}
.brand{height:90px;background:var(--blue);color:#fff;margin-left:-12px;padding:0 65px 0 28px;position:relative;min-width:300px;overflow:hidden}
.brand:after{content:"";position:absolute;right:-1px;top:0;width:70px;height:115px;background:#fff;border-radius:0 0 0 70px}
.brand-name{position:relative;z-index:2}
.brand-mark{z-index:2}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:3px;flex:1;margin-left:30px}
.nav-link{font-size:16px;font-weight:600;color:#111923;padding:46px 16px;position:relative;transition:.25s}
.nav-link:hover,.nav-link.active{color:#111}
.nav-link.active:after{content:"";position:absolute;bottom:27px;left:16px;right:16px;height:2px;background:#111}
.nav-arrow{font-size:9px;margin-left:3px}
.header-actions{display:flex;align-items:center;gap:30px}
.search-btn{width:52px;height:52px;border:1px solid #d9dfe7;background:#fff;border-radius:50%;font-size:22px;transition:.3s}
.search-btn:hover{color:var(--blue);border-color:var(--blue);transform:rotate(8deg)}
.header-cta{background:var(--blue);color:#fff;font-size:16px;font-weight:700;padding:10px 10px;border-radius:10px;display:flex;align-items:center;gap:12px;transition:.3s}
.header-cta:hover{background:var(--blue-dark);color:#fff;transform:translateY(-2px)}
.header-cta i{font-size:18px}
.mobile-toggle{display:none;border:0;background:none;font-size:24px}

/* mobile */
.mobile-menu{display:none;padding:10px 22px 20px;background:#fff;border-top:1px solid var(--line)}
.mobile-menu a{display:block;padding:12px 0;font-weight:600;border-bottom:1px solid #edf0f5}
.mobile-menu.open{display:block}

/* search */
.search-overlay{position:fixed;inset:0;background:rgba(5,19,43,.96);z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.35s}
.search-overlay.open{opacity:1;visibility:visible}
.search-close{position:absolute;right:40px;top:35px;width:55px;height:55px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;color:#fff;font-size:24px}
.search-box{width:min(800px,90%);border-bottom:2px solid rgba(255,255,255,.4);display:flex;align-items:center;gap:20px;padding:15px 0}
.search-box span{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:2px}
.search-box input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:30px}
.search-box input::placeholder{color:#91a0b7}
.search-box button{border:0;background:var(--blue);color:#fff;width:55px;height:55px;border-radius:50%}

/* hero */
/* =========================================================
   HERO SLIDER — COMPACT VERSION
========================================================= */

.hero-slider {
    position: relative;
    width: 100%;
    height: 560px;
    min-height: 560px;
    overflow: hidden;
    background: #001848;
}


/* =========================================================
   SLIDE
========================================================= */

.hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0;
    visibility: hidden;

    transform: scale(1.04);

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease,
        transform 6s ease;

    z-index: 1;
}


.hero-slide.active {
    opacity: 1;
    visibility: visible;

    transform: scale(1.08);

    z-index: 2;
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.hero-overlay-pattern {
    position: absolute;
    inset: 0;

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

    background-size: 60px 60px;

    opacity: .3;

    pointer-events: none;

    animation: heroGridMove 20s linear infinite;
}


@keyframes heroGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 60px 60px;
    }

}


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

.hero-container {
    position: relative;

    z-index: 10;

    height: 100%;

    display: flex;

    align-items: center;
}


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

.hero-copy,
.hero-content {
    max-width: 650px;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .8s ease .2s,
        transform .8s ease .2s;
}


.hero-slide.active .hero-copy,
.hero-slide.active .hero-content {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   EYEBROW
========================================================= */

.hero-eyebrow,
.eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #FFB800;

    font-size: 10px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;

    margin-bottom: 15px;
}


.hero-eyebrow span,
.eyebrow span {

    display: inline-block;

    width: 32px;

    height: 2px;

    background: #FFB800;

}


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

.hero-content h1,
.hero-copy h1 {

    max-width: 680px;

    margin: 0 0 16px;

    color: #fff;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(36px, 4.2vw, 56px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.hero-content h1 strong,
.hero-copy h1 strong {

    color: #FFB800;

    font-weight: 800;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-content > p,
.hero-copy > p {

    max-width: 570px;

    margin: 0 0 23px;

    color:
        rgba(255,255,255,.78);

    font-size: 14px;

    line-height: 1.65;
}


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

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


.hero-btn {

    min-height: 45px;

    padding:
        0 18px;

    border-radius: 5px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-size: 12px;

    font-weight: 700;

    transition:
        all .3s ease;
}


.hero-btn-primary {

    color: #fff;

    background: #F85800;

    border: 1px solid #F85800;

    box-shadow:
        0 10px 25px
        rgba(18,96,216,.28);
}


.hero-btn-primary:hover {

    color: #fff;

    background: #001848;

    border-color: #001848;

    transform:
        translateY(-3px);
}


.hero-btn-primary i {

    transition:
        transform .3s ease;
}


.hero-btn-primary:hover i {

    transform:
        translateX(4px);
}


.hero-btn-outline {

    color: #fff;

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

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

    backdrop-filter:
        blur(5px);
}


.hero-btn-outline:hover {

    color: #001848;

    background: #fff;

    border-color: #fff;

    transform:
        translateY(-3px);
}


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

.hero-trust {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-top: 28px;
}


.trust-item {

    display: flex;

    flex-direction: column;
}


.trust-item strong {

    color: #fff;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.2;
}


.trust-item span {

    color: #a9b8cc;

    font-size: 9px;

    line-height: 1.4;

    margin-top: 3px;
}


.trust-separator {

    width: 1px;

    height: 30px;

    background:
        rgba(255,255,255,.22);
}


/* =========================================================
   SLIDE NUMBER
========================================================= */

.slide-number {

    position: absolute;

    right: 35px;

    bottom: 35px;

    z-index: 30;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 10px;

    font-weight: 700;
}


.slide-number i {

    display: block;

    width: 40px;

    height: 1px;

    background:
        rgba(255,255,255,.4);
}


/* =========================================================
   ARROWS
========================================================= */

.hero-controls {

    position: absolute;

    right: 30px;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 30;

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.hero-arrow {

    width: 45px;

    height: 45px;

    padding: 0;

    border-radius: 50%;

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

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

    backdrop-filter:
        blur(8px);

    color: #fff;

    display: grid;

    place-items: center;

    cursor: pointer;

    transition:
        all .3s ease;
}


.hero-arrow:hover {

    background: #F85800;

    border-color: #F85800;

    transform: scale(1.08);
}


/* =========================================================
   DOTS
========================================================= */

.hero-dots {

    position: absolute;

    left: 50%;

    bottom: 24px;

    transform:
        translateX(-50%);

    z-index: 30;

    display: flex;

    align-items: center;

    gap: 7px;
}


.hero-dot {

    position: relative;

    width: 32px;

    height: 3px;

    padding: 0;

    border: 0;

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

    overflow: hidden;

    cursor: pointer;
}


.hero-dot span {

    position: absolute;

    inset: 0;

    background: #fff;

    transform:
        translateX(-100%);
}


.hero-dot.active span {

    animation:
        heroDotProgress 5s linear forwards;
}


@keyframes heroDotProgress {

    from {
        transform:
            translateX(-100%);
    }

    to {
        transform:
            translateX(0);
    }

}


/* =========================================================
   PROGRESS BAR
========================================================= */

.hero-progress {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 3px;

    z-index: 50;

    background:
        rgba(255,255,255,.12);
}


.hero-progress span {

    display: block;

    width: 0;

    height: 100%;

    background:
        linear-gradient(90deg, #F85800, #FFB800);
}


.hero-progress span.animate {

    animation:
        heroProgress 5s linear forwards;
}


@keyframes heroProgress {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll {

    position: absolute;

    left: 28px;

    bottom: 28px;

    z-index: 30;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    color: #a9b8cc;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 1.7px;

    writing-mode:
        vertical-rl;
}


.hero-scroll i {

    color: #fff;

    animation:
        heroScroll 1.5s ease-in-out infinite;
}


@keyframes heroScroll {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(6px);
    }

}


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

@media (max-width: 991px) {

    .hero-slider {

        height: 520px;

        min-height: 520px;
    }


    .hero-content h1,
    .hero-copy h1 {

        font-size: 46px;

    }


    .hero-controls {

        right: 20px;
    }

}


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

@media (max-width: 767px) {

    .hero-slider {

        height: 500px;

        min-height: 500px;
    }


    .hero-slide {

        background-position:
            65% center;
    }


    .hero-content,
    .hero-copy {

        max-width: 90%;

    }


    .hero-content h1,
    .hero-copy h1 {

        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

        margin-bottom: 13px;

    }


    .hero-content > p,
    .hero-copy > p {

        font-size: 12px;

        line-height: 1.6;

        margin-bottom: 18px;

    }


    .hero-eyebrow,
    .eyebrow {

        font-size: 9px;

        margin-bottom: 12px;

    }


    .hero-buttons {

        gap: 8px;

    }


    .hero-btn {

        min-height: 42px;

        padding:
            0 14px;

        font-size: 10px;

    }


    .hero-trust {

        gap: 11px;

        margin-top: 22px;

    }


    .trust-item strong {

        font-size: 15px;

    }


    .trust-item span {

        font-size: 8px;

    }


    .trust-separator {

        height: 25px;

    }


    .hero-controls {

        top: auto;

        right: 15px;

        bottom: 65px;

        transform: none;

        flex-direction: row;

    }


    .hero-arrow {

        width: 38px;

        height: 38px;

        font-size: 11px;

    }


    .hero-scroll {

        display: none;

    }


    .slide-number {

        display: none;

    }


    .hero-dots {

        bottom: 20px;

    }

}



/* ================================
   COMPACT ADVANCED FEATURE STRIP
================================ */

.feature-strip{
    padding:32px 0;
    background:#fff;
}

.feature-strip .row{
    border:1px solid #e8eef6;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 30px rgba(20,60,110,.06);
    overflow:hidden;
}


/* FEATURE CELL */

.feature-cell{
    min-height:135px;
    padding:22px 25px;
    display:flex;
    align-items:center;
    gap:18px;
    position:relative;
    transition:all .3s ease;
}

.feature-cell:not(:last-child):after{
    content:"";
    position:absolute;
    right:0;
    top:22px;
    bottom:22px;
    width:1px;
    background:#e5ebf3;
}


/* HOVER */

.feature-cell:hover{
    background:#FFFAF6;
}


/* ICON */

.feature-icon{
    width:62px;
    height:62px;
    min-width:62px;

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

    border-radius:16px;

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

    color:#fff;

    font-size:24px;

    box-shadow:
        0 8px 20px rgba(20,120,255,.20);

    position:relative;
    overflow:hidden;

    transition:all .3s ease;
}


/* ICON LIGHT EFFECT */

.feature-icon:before{
    content:"";
    position:absolute;
    width:35px;
    height:35px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    top:-12px;
    right:-10px;
}

.feature-icon i{
    position:relative;
    z-index:2;
}


/* HOVER ICON */

.feature-cell:hover .feature-icon{
    transform:translateY(-3px) rotate(-3deg);
    box-shadow:
        0 12px 25px rgba(20,120,255,.28);
}


/* CONTENT */

.feature-cell > div:last-child{
    flex:1;
}

.feature-cell h4{
    margin:0 0 6px;

    font-size:17px;
    line-height:1.3;

    font-weight:700;
    color:#001848;
}

.feature-cell p{
    margin:0;

    font-size:13px;
    line-height:1.55;

    color:#718096;

    max-width:280px;
}


/* SMALL BLUE LINE */

.feature-cell h4:after{
    content:"";
    display:block;

    width:30px;
    height:2px;

    margin-top:7px;

    background:var(--blue);
    border-radius:5px;

    transition:.3s;
}

.feature-cell:hover h4:after{
    width:45px;
}


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

@media(max-width:991px){

    .feature-strip{
        padding:25px 0;
    }

    .feature-cell{
        min-height:125px;
        padding:20px;
    }

    .feature-cell:not(:last-child):after{
        display:none;
    }

    .feature-icon{
        width:56px;
        height:56px;
        min-width:56px;
        font-size:21px;
    }

}


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

@media(max-width:767px){

    .feature-strip{
        padding:20px 0;
    }

    .feature-strip .row{
        border-radius:12px;
    }

    .feature-cell{
        min-height:auto;
        padding:18px 20px;
    }

    .feature-cell + .feature-cell{
        border-top:1px solid #e9eef5;
    }

    .feature-icon{
        width:52px;
        height:52px;
        min-width:52px;
        border-radius:13px;
        font-size:20px;
    }

    .feature-cell h4{
        font-size:16px;
    }

    .feature-cell p{
        font-size:12.5px;
    }

}

/* sections */
.section{padding:115px 0;position:relative}
.section-heading{max-width:760px;margin:0 auto 58px;text-align:center}
.section-kicker{display:inline-block;color:var(--blue);font-size:13px;text-transform:uppercase;letter-spacing:2px;font-weight:800;margin-bottom:12px}
.section-heading h2,.about-copy h2{font-size:46px;line-height:1.15;letter-spacing:-1.5px;margin-bottom:17px}
.section-heading h2 span,.about-copy h2 span,.cta-inner h2 span{color:var(--blue)}
.section-heading p{max-width:650px;margin:0 auto}

/* services */
/* =========================================
   CMS PLATFORMS PREMIUM SECTION
========================================= */

.cms-platforms-section{
    position:relative;
    padding:80px 0;
    background:
        radial-gradient(
            circle at 0% 20%,
            rgba(26,126,255,.09),
            transparent 25%
        ),
        radial-gradient(
            circle at 100% 80%,
            rgba(26,126,255,.07),
            transparent 25%
        ),
        #FFFAF6;
    overflow:hidden;
}


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

.cms-section-heading{
    max-width:850px;
    margin:0 auto 42px;
    text-align:center;
}

.cms-kicker{
    display:inline-flex;
    align-items:center;
    gap:12px;

    color:#F85800;

    font-size:12px;
    font-weight:800;
    letter-spacing:3px;
}

.cms-kicker i{
    display:block;
    width:32px;
    height:2px;

    background:#F85800;
}

.cms-section-heading h2{
    margin:11px 0 13px;

    color:#001848;

    font-size:42px;
    line-height:1.15;
    font-weight:800;
}

.cms-section-heading h2 span{
    color:#F85800;
}

.cms-section-heading p{
    max-width:760px;
    margin:auto;

    color:#667991;

    font-size:14px;
    line-height:1.7;
}


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

.cms-platform-grid{
    display:grid;

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

    gap:22px;
}


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

.cms-platform-card{
    position:relative;

    background:#fff;

    border:1px solid #F8E5D9;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 8px 28px rgba(20,55,100,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

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

    border-color:#FFD2B8;

    box-shadow:
        0 20px 45px rgba(20,75,135,.13);
}


/* =========================================
   IMAGE
========================================= */

.cms-platform-image{
    position:relative;

    height:165px;

    overflow:hidden;

    background:#edf5ff;
}

.cms-platform-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .5s ease;
}

.cms-platform-card:hover
.cms-platform-image img{
    transform:scale(1.06);
}


/* Image overlay */

.cms-platform-image:after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(5,25,55,.28)
        );

    pointer-events:none;
}


/* Badge */

.cms-platform-badge{
    position:absolute;

    left:15px;
    bottom:14px;

    z-index:2;

    padding:6px 12px;

    border-radius:30px;

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

    color:#001848;

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

    box-shadow:0 5px 15px rgba(0,0,0,.08);
}


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

.cms-platform-content{
    padding:20px 21px 19px;
}


/* =========================================
   TITLE
========================================= */

.cms-platform-title{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:11px;
}

.cms-platform-icon{
    width:48px;
    height:48px;

    min-width:48px;

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

    border-radius:12px;

    background:#FFF1E8;

    color:#F85800;

    font-size:25px;

    transition:.3s;
}

.cms-platform-card:hover
.cms-platform-icon{
    transform:rotate(-4deg) scale(1.05);
}

.cms-platform-title h3{
    margin:0 0 3px;

    color:#001848;

    font-size:19px;
    line-height:1.2;
    font-weight:800;
}

.cms-platform-title span{
    color:#718198;

    font-size:11px;
    line-height:1.3;
}


/* =========================================
   ICON COLORS
========================================= */

.wordpress-icon{
    background:#FFF1E8;
    color:#F85800;
}

.shopify-icon{
    background:#FFF1E8;
    color:#F85800;
}

.prestashop-icon{
    background:#FFF1E8;
    color:#F85800;
}

.magento-icon{
    background:#fff0e9;
    color:#F85800;
}

.joomla-icon{
    background:#FFF1E8;
    color:#F85800;
}

.drupal-icon{
    background:#FFF1E8;
    color:#F85800;
}

.opencart-icon{
    background:#FFF1E8;
    color:#F85800;
}

.wix-icon{
    background:#f3f3f3;
    color:#111;
    font-size:17px;
}

.webflow-icon{
    background:#FFF1E8;
    color:#F85800;
    font-size:28px;
}


/* =========================================
   DESCRIPTION
========================================= */

.cms-platform-content > p{
    margin:0 0 14px;

    color:#64758b;

    font-size:12.5px;
    line-height:1.55;

    min-height:58px;
}


/* =========================================
   SERVICE TAGS
========================================= */

.cms-tags{
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    min-height:55px;

    margin-bottom:15px;
}

.cms-tags span{
    display:inline-flex;
    align-items:center;

    padding:5px 9px;

    border:1px solid #F8E5D9;

    border-radius:5px;

    background:#FFFAF6;

    color:#001848;

    font-size:10px;
    font-weight:600;

    transition:.25s;
}

.cms-tags span:hover{
    background:#FFF1E8;
    border-color:#FFD2B8;
    color:#F85800;
}


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

.cms-platform-link{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-top:13px;

    border-top:1px solid #edf1f6;

    color:#F85800;

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

    text-decoration:none;
}

.cms-platform-link i{
    width:30px;
    height:30px;

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

    border-radius:50%;

    background:#FFF1E8;

    color:#F85800;

    font-size:11px;

    transition:.3s;
}

.cms-platform-link:hover{
    color:#F85800;
}

.cms-platform-link:hover i{
    background:#F85800;
    color:#fff;

    transform:translateX(4px);
}


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

@media(max-width:1100px){

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

}


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

@media(max-width:700px){

    .cms-platforms-section{
        padding:55px 0;
    }

    .cms-section-heading{
        margin-bottom:30px;
    }

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

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

    .cms-platform-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

}


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

@media(max-width:480px){

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

    .cms-kicker{
        font-size:10px;
        letter-spacing:2px;
    }

    .cms-platform-image{
        height:150px;
    }

    .cms-platform-content{
        padding:18px;
    }

}

/* about */
/* ==========================================
   CMS ABOUT SECTION
========================================== */

.cms-about-section{
    position:relative;
    padding:85px 0;

    background:#fff;

    overflow:hidden;
}


/* ==========================================
   LEFT VISUAL
========================================== */

.cms-about-visual{
    position:relative;

    min-height:560px;

    max-width:570px;

    margin:auto;
}


/* MAIN IMAGE */

.cms-about-main-img{
    position:absolute;

    left:0;
    top:0;

    width:62%;
    height:500px;

    overflow:hidden;

    border-radius:
        130px
        20px
        20px
        130px;

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

    z-index:2;
}

.cms-about-main-img img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:.5s;
}

.cms-about-main-img:hover img{
    transform:scale(1.04);
}


/* ==========================================
   SMALL IMAGES
========================================== */

.cms-about-small-img{
    position:absolute;

    width:43%;
    height:235px;

    overflow:hidden;

    border-radius:
        85px
        20px
        20px
        20px;

    border:7px solid #fff;

    box-shadow:
        0 15px 40px rgba(15,55,100,.13);

    z-index:3;
}

.cms-about-small-img img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:.5s;
}

.cms-about-small-img:hover img{
    transform:scale(1.06);
}


/* TOP IMAGE */

.cms-about-img-one{
    right:0;
    top:8px;
}


/* BOTTOM IMAGE */

.cms-about-img-two{
    right:0;
    bottom:15px;

    border-radius:
        20px
        20px
        85px
        20px;
}


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

.cms-about-experience{
    position:absolute;

    left:42%;
    bottom:5px;

    z-index:5;

    display:flex;
    align-items:center;
    gap:10px;

    padding:15px 20px;

    background:#F85800;

    color:#fff;

    border-radius:12px;

    box-shadow:
        0 12px 30px rgba(8,120,245,.28);
}

.cms-about-experience strong{
    font-size:29px;
    line-height:1;
    font-weight:800;
}

.cms-about-experience span{
    font-size:11px;
    line-height:1.35;
    font-weight:600;
}


/* ==========================================
   DOT PATTERN
========================================== */

.cms-about-dots{
    position:absolute;

    right:-15px;
    top:255px;

    width:75px;
    height:75px;

    background-image:
        radial-gradient(
            #F85800 1.5px,
            transparent 1.5px
        );

    background-size:10px 10px;

    opacity:.35;

    z-index:1;
}


/* ==========================================
   RIGHT CONTENT
========================================== */

.cms-about-content{
    max-width:590px;
}


/* KICKER */

.cms-about-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#F85800;

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

    letter-spacing:2.5px;
}

.cms-about-kicker i{
    width:32px;
    height:2px;

    display:block;

    background:#F85800;
}


/* HEADING */

.cms-about-content h2{
    margin:12px 0 18px;

    color:#001848;

    font-size:43px;
    line-height:1.12;

    font-weight:800;

    letter-spacing:-1px;
}

.cms-about-content h2 span{
    display:block;

    color:#F85800;
}


/* INTRO */

.cms-about-intro{
    margin:0 0 23px;

    color:#68788d;

    font-size:14px;
    line-height:1.75;
}


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

.cms-about-feature{
    display:flex;
    align-items:center;

    gap:15px;

    margin-bottom:17px;
}

.cms-about-feature-icon{
    width:56px;
    height:56px;

    min-width:56px;

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

    border-radius:13px;

    background:#FFF1E8;

    color:#F85800;

    font-size:22px;

    transition:.3s;
}

.cms-about-feature:hover
.cms-about-feature-icon{
    background:#F85800;
    color:#fff;

    transform:translateY(-3px);
}

.cms-about-feature h3{
    margin:0 0 4px;

    color:#001848;

    font-size:17px;
    font-weight:750;
}

.cms-about-feature p{
    margin:0;

    color:#718095;

    font-size:12.5px;
    line-height:1.5;
}


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

.cms-about-checks{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px 20px;

    margin:22px 0 25px;
}

.cms-about-checks span{
    display:flex;
    align-items:center;

    gap:8px;

    color:#001848;

    font-size:12px;
    font-weight:600;
}

.cms-about-checks i{
    color:#F85800;
    font-size:15px;
}


/* ==========================================
   BUTTON
========================================== */

.cms-about-btn{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:14px 22px;

    border-radius:8px;

    background:#F85800;

    color:#fff;

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

    text-decoration:none;

    box-shadow:
        0 8px 22px rgba(8,120,245,.22);

    transition:.3s;
}

.cms-about-btn i{
    transition:.3s;
}

.cms-about-btn:hover{
    background:#0564d1;
    color:#fff;

    transform:translateY(-2px);
}

.cms-about-btn:hover i{
    transform:translateX(4px);
}


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

@media(max-width:991px){

    .cms-about-section{
        padding:65px 0;
    }

    .cms-about-visual{
        min-height:510px;

        max-width:520px;

        margin-bottom:20px;
    }

    .cms-about-main-img{
        height:450px;
    }

    .cms-about-content{
        max-width:100%;
    }

    .cms-about-content h2{
        font-size:37px;
    }

}


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

@media(max-width:767px){

    .cms-about-section{
        padding:55px 0;
    }

    .cms-about-visual{
        min-height:420px;
    }

    .cms-about-main-img{
        width:60%;
        height:375px;

        border-radius:90px 16px 16px 90px;
    }

    .cms-about-small-img{
        width:43%;
        height:175px;

        border-width:5px;
    }

    .cms-about-img-one{
        top:0;
    }

    .cms-about-img-two{
        bottom:10px;
    }

    .cms-about-experience{
        left:32%;
        bottom:0;

        padding:11px 15px;
    }

    .cms-about-experience strong{
        font-size:23px;
    }

    .cms-about-experience span{
        font-size:9px;
    }

    .cms-about-dots{
        display:none;
    }

    .cms-about-content h2{
        font-size:31px;
        letter-spacing:-.5px;
    }

    .cms-about-intro{
        font-size:13px;
    }

}


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

@media(max-width:480px){

    .cms-about-visual{
        min-height:350px;
    }

    .cms-about-main-img{
        height:315px;
    }

    .cms-about-small-img{
        height:145px;
    }

    .cms-about-content h2{
        font-size:27px;
    }

    .cms-about-checks{
        grid-template-columns:1fr;
        gap:8px;
    }

}

/* platform */
/* ==========================================
   ADVANCED CMS PLATFORM SECTION
========================================== */

.platform-section{
    position:relative;

    padding:85px 0;

    background:
        linear-gradient(
            135deg,
            #FFFAF6 0%,
            #ffffff 50%,
            #f3f8ff 100%
        );

    overflow:hidden;
}


/* ==========================================
   BACKGROUND DECORATION
========================================== */

.platform-bg-circle{
    position:absolute;

    border-radius:50%;

    pointer-events:none;
}

.circle-one{
    width:420px;
    height:420px;

    left:-250px;
    top:-180px;

    border:1px solid rgba(8,120,245,.12);
}

.circle-two{
    width:360px;
    height:360px;

    right:-210px;
    bottom:-180px;

    border:1px solid rgba(8,120,245,.10);
}


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

.platform-heading{
    position:relative;

    max-width:780px;

    margin:0 auto 45px;

    text-align:center;

    z-index:2;
}

.platform-heading .section-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#F85800;

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

    text-transform:uppercase;
    letter-spacing:2.5px;
}

.platform-heading .section-kicker:before,
.platform-heading .section-kicker:after{
    content:"";

    width:28px;
    height:2px;

    background:#F85800;

    border-radius:5px;
}

.platform-heading h2{
    margin:12px 0 14px;

    color:#001848;

    font-size:42px;
    line-height:1.15;

    font-weight:800;

    letter-spacing:-.8px;
}

.platform-heading h2 span{
    color:#F85800;
}

.platform-heading p{
    max-width:700px;

    margin:auto;

    color:#687990;

    font-size:14px;

    line-height:1.7;
}


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

.platform-grid{
    position:relative;
    z-index:2;

    display:grid;

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

    gap:20px;
}


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

.platform-card{
    position:relative;

    min-height:245px;

    padding:26px 24px 23px;

    display:flex;

    gap:18px;

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

    border:1px solid #F8E5D9;

    border-radius:17px;

    overflow:hidden;

    box-shadow:
        0 8px 28px rgba(20,60,110,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.platform-card:hover{
    transform:translateY(-6px);

    border-color:#c5ddf8;

    box-shadow:
        0 18px 42px rgba(20,70,130,.12);
}


/* TOP BLUE LINE */

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

    position:absolute;

    top:0;
    left:0;

    width:0;
    height:3px;

    background:
        linear-gradient(90deg, #F85800, #FFB800);

    transition:.4s;
}

.platform-card:hover:before{
    width:100%;
}


/* ==========================================
   NUMBER
========================================== */

.platform-number{
    position:absolute;

    top:15px;
    right:18px;

    color:#e8f1fb;

    font-size:30px;

    line-height:1;

    font-weight:800;
}


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

.platform-icon{
    position:relative;
    z-index:2;

    width:62px;
    height:62px;

    min-width:62px;

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

    border-radius:16px;

    font-size:30px;

    background:#FFF1E8;

    color:#F85800;

    box-shadow:
        0 8px 20px rgba(8,120,245,.10);

    transition:.35s;
}

.platform-card:hover .platform-icon{
    transform:
        translateY(-3px)
        rotate(-4deg);
}


/* ICON COLORS */

.wordpress-icon{
    background:#FFF1E8;
    color:#F85800;
}

.shopify-icon{
    background:#FFF1E8;
    color:#F85800;
}

.drupal-icon{
    background:#FFF1E8;
    color:#F85800;
}

.joomla-icon{
    background:#FFF1E8;
    color:#F85800;
}

.prestashop-icon{
    background:#FFF1E8;
    color:#F85800;
}

.php-icon{
    background:#FFF1E8;
    color:#001848;
}


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

.platform-content{
    position:relative;

    z-index:2;

    padding-top:1px;

    flex:1;
}

.platform-content h4{
    margin:0 0 4px;

    color:#001848;

    font-size:19px;

    line-height:1.25;

    font-weight:800;
}

.platform-content > span{
    display:block;

    margin-bottom:11px;

    color:#F85800;

    font-size:11px;

    font-weight:700;
}

.platform-content p{
    margin:0 0 15px;

    color:#6a7b91;

    font-size:12px;

    line-height:1.55;
}


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

.platform-content a{
    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#F85800;

    font-size:12px;

    font-weight:800;

    text-decoration:none;

    transition:.3s;
}

.platform-content a i{
    font-size:10px;

    transition:.3s;
}

.platform-content a:hover{
    color:#F85800;
}

.platform-content a:hover i{
    transform:translateX(5px);
}


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

.platform-bottom{
    position:relative;

    z-index:2;

    margin-top:25px;

    padding:20px 24px;

    display:flex;

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

    gap:20px;

    background:#001848;

    border-radius:14px;

    box-shadow:
        0 12px 30px rgba(10,45,85,.12);
}

.platform-bottom strong{
    display:block;

    margin-bottom:4px;

    color:#fff;

    font-size:15px;
}

.platform-bottom span{
    color:#aebfd4;

    font-size:12px;
}

.platform-bottom a{
    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:12px 18px;

    border-radius:7px;

    background:#F85800;

    color:#fff;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;
}

.platform-bottom a:hover{
    background:#FFB800;

    transform:translateY(-2px);
}

.platform-bottom a i{
    transition:.3s;
}

.platform-bottom a:hover i{
    transform:translateX(4px);
}


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

@media(max-width:1100px){

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

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

}


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

@media(max-width:767px){

    .platform-section{
        padding:60px 0;
    }

    .platform-heading{
        margin-bottom:32px;
    }

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

    .platform-heading p{
        font-size:13px;
    }

    .platform-grid{
        grid-template-columns:1fr;

        gap:15px;
    }

    .platform-card{
        min-height:210px;

        padding:22px 20px;
    }

    .platform-bottom{
        flex-direction:column;

        align-items:flex-start;

        padding:20px;
    }

    .platform-bottom a{
        width:100%;

        justify-content:center;
    }

}


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

@media(max-width:480px){

    .platform-heading h2{
        font-size:27px;
    }

    .platform-card{
        gap:13px;
    }

    .platform-icon{
        width:54px;
        height:54px;
        min-width:54px;

        font-size:25px;
    }

    .platform-content h4{
        font-size:17px;
    }

    .platform-number{
        font-size:24px;
    }

}

/* process */
/* ==========================================
   CMS DEVELOPMENT PROCESS SECTION
========================================== */

.process-section{
    position:relative;
    padding:85px 0;

    background:
        radial-gradient(
            circle at 0% 20%,
            rgba(25,125,255,.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 100% 80%,
            rgba(120,80,255,.07),
            transparent 25%
        ),
        #FFFAF6;

    overflow:hidden;
}


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

.process-heading{
    position:relative;
    z-index:3;

    max-width:800px;

    margin:0 auto 48px;

    text-align:center;
}

.process-heading .section-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#F85800;

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

    letter-spacing:2.5px;
    text-transform:uppercase;
}

.process-heading .section-kicker i{
    display:block;

    width:30px;
    height:2px;

    background:#F85800;

    border-radius:5px;
}

.process-heading h2{
    margin:12px 0 13px;

    color:#001848;

    font-size:42px;
    line-height:1.15;

    font-weight:800;

    letter-spacing:-.8px;
}

.process-heading h2 span{
    color:#F85800;
}

.process-heading p{
    max-width:720px;

    margin:auto;

    color:#687990;

    font-size:14px;
    line-height:1.7;
}


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

.process-wrapper{
    position:relative;
}


/* ==========================================
   CONNECTING LINE
========================================== */

.process-line{
    position:absolute;

    top:46px;
    left:11%;

    width:78%;
    height:2px;

    background:#dbe8f7;

    z-index:0;
}

.process-line span{
    display:block;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            #F85800,
            #19b56b,
            #ff7718,
            #F85800
        );

    opacity:.25;
}


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

.process-card{
    position:relative;
    z-index:2;

    height:100%;

    min-height:410px;

    padding:22px 21px 20px;

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

    border:1px solid #e0eaf5;

    border-radius:18px;

    box-shadow:
        0 9px 30px rgba(20,60,110,.06);

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

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

    box-shadow:
        0 20px 42px rgba(20,65,120,.12);
}


/* ==========================================
   TOP COLOR LINE
========================================== */

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

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;
}


/* COLORS */

.process-blue:before{
    background:#F85800;
}

.process-green:before{
    background:#F85800;
}

.process-orange:before{
    background:#FFB800;
}

.process-purple:before{
    background:#F85800;
}


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

.process-card-top{
    display:flex;

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

    margin-bottom:18px;
}


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

.process-icon{
    width:62px;
    height:62px;

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

    border-radius:50%;

    color:#fff;

    font-size:23px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.10);

    transition:.35s;
}

.process-card:hover .process-icon{
    transform:
        rotate(-8deg)
        scale(1.06);
}


/* ICON COLORS */

.process-blue .process-icon{
    background:linear-gradient(
        135deg,
        #318cff,
        #F85800
    );
}

.process-green .process-icon{
    background:linear-gradient(
        135deg,
        #42ce70,
        #16a64e
    );
}

.process-orange .process-icon{
    background:linear-gradient(
        135deg,
        #ff9b40,
        #ff6b0a
    );
}

.process-purple .process-icon{
    background:linear-gradient(
        135deg,
        #9468ff,
        #6732df
    );
}


/* ==========================================
   STEP NUMBER
========================================== */

.process-number{
    width:58px;
    height:58px;

    display:flex;
    flex-direction:column;

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

    border-radius:12px;

    background:#FFFAF6;

    color:#F85800;

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

    line-height:1;
}

.process-number small{
    margin-top:5px;

    color:#8090a4;

    font-size:8px;

    font-weight:800;

    letter-spacing:1.5px;
}

.process-green .process-number{
    color:#F85800;
}

.process-orange .process-number{
    color:#F85800;
}

.process-purple .process-number{
    color:#F85800;
}


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

.process-content h3{
    margin:0 0 4px;

    color:#001848;

    font-size:22px;
    font-weight:800;
}

.process-content h4{
    margin:0 0 10px;

    font-size:13px;

    font-weight:800;
}

.process-blue .process-content h4{
    color:#F85800;
}

.process-green .process-content h4{
    color:#F85800;
}

.process-orange .process-content h4{
    color:#F85800;
}

.process-purple .process-content h4{
    color:#F85800;
}

.process-content p{
    margin:0 0 17px;

    color:#667990;

    font-size:12.5px;
    line-height:1.6;
}


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

.process-content ul{
    list-style:none;

    margin:0;
    padding:14px 0 0;

    border-top:1px solid #e9eef5;
}

.process-content ul li{
    display:flex;
    align-items:center;

    gap:9px;

    margin-bottom:10px;

    color:#40556f;

    font-size:12px;
    font-weight:600;
}

.process-content ul li:last-child{
    margin-bottom:0;
}

.process-content ul li i{
    width:20px;
    height:20px;

    min-width:20px;

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

    border-radius:50%;

    color:#fff;

    font-size:8px;
}


/* CHECK COLORS */

.process-blue ul li i{
    background:#F85800;
}

.process-green ul li i{
    background:#F85800;
}

.process-orange ul li i{
    background:#FFB800;
}

.process-purple ul li i{
    background:#F85800;
}


/* ==========================================
   BOTTOM DECORATION
========================================== */

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

    position:absolute;

    width:120px;
    height:120px;

    right:-55px;
    bottom:-55px;

    border-radius:50%;

    opacity:.10;

    transition:.4s;
}

.process-card:hover:after{
    transform:scale(1.25);
}

.process-blue:after{
    background:#F85800;
}

.process-green:after{
    background:#F85800;
}

.process-orange:after{
    background:#FFB800;
}

.process-purple:after{
    background:#F85800;
}


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

@media(max-width:1100px){

    .process-line{
        display:none;
    }

    .process-card{
        min-height:390px;
    }

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

}


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

@media(max-width:767px){

    .process-section{
        padding:60px 0;
    }

    .process-heading{
        margin-bottom:32px;
    }

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

    .process-heading p{
        font-size:13px;
    }

    .process-card{
        min-height:auto;

        padding:21px 19px;
    }

    .process-icon{
        width:55px;
        height:55px;
    }

    .process-number{
        width:52px;
        height:52px;

        font-size:20px;
    }

}


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

@media(max-width:480px){

    .process-heading h2{
        font-size:27px;
    }

    .process-card{
        border-radius:15px;
    }

    .process-content h3{
        font-size:20px;
    }

}

/**section 4**/
/* =========================================================
   ADVANCED COLORFUL CMS SERVICES
========================================================= */

.cms-services-section{
    position:relative;
    padding:90px 0 85px;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(0,132,255,.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 25%,
            rgba(121,72,255,.10),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #FFFAF6 0%,
            #eef6ff 100%
        );

    overflow:hidden;
}


/* =========================================================
   BACKGROUND SHAPES
========================================================= */

.cms-bg-shape{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.cms-shape-1{
    width:430px;
    height:430px;

    left:-270px;
    top:-180px;

    border:1px solid rgba(0,120,245,.13);

    animation:
        cmsFloat 8s ease-in-out infinite;
}

.cms-shape-2{
    width:350px;
    height:350px;

    right:-220px;
    bottom:-150px;

    border:1px solid rgba(112,65,230,.12);

    animation:
        cmsFloat 10s ease-in-out infinite reverse;
}

.cms-dots{
    position:absolute;

    width:90px;
    height:90px;

    background-image:
        radial-gradient(
            #F85800 1.5px,
            transparent 1.5px
        );

    background-size:11px 11px;

    opacity:.3;

    animation:
        cmsDots 6s ease-in-out infinite;
}

.cms-dots-left{
    left:20px;
    top:80px;
}

.cms-dots-right{
    right:20px;
    bottom:100px;
}


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

.cms-services-heading{
    position:relative;
    z-index:5;

    max-width:850px;

    margin:0 auto 48px;

    text-align:center;
}

.cms-kicker{
    display:inline-flex;
    align-items:center;
    gap:12px;

    color:#F85800;

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

    letter-spacing:3px;
}

.cms-kicker i{
    width:35px;
    height:2px;

    display:block;

    background:#F85800;
}

.cms-services-heading h2{
    margin:12px 0 15px;

    color:#101f38;

    font-size:44px;
    line-height:1.12;

    font-weight:850;

    letter-spacing:-1px;
}

.cms-services-heading h2 span{
    display:block;

    color:#F85800;

    position:relative;
}

.cms-services-heading h2 span:after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-7px;

    width:105px;
    height:4px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4db5ff,
            transparent
        );

    transform:translateX(-50%);
}

.cms-services-heading p{
    max-width:750px;

    margin:auto;

    color:#61748d;

    font-size:14px;

    line-height:1.75;
}


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

.cms-services-grid{
    position:relative;
    z-index:5;

    display:grid;

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

    gap:20px;
}


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

.cms-service-card{
    position:relative;

    min-height:310px;

    padding:22px 22px 19px;

    display:flex;
    flex-direction:column;

    border-radius:20px;

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

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

    box-shadow:
        0 12px 35px rgba(35,75,120,.08);

    overflow:hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease;
}

.cms-service-card:hover{
    transform:translateY(-10px);

    box-shadow:
        0 25px 55px rgba(25,70,120,.16);
}


/* =========================================================
   CARD COLOR BACKGROUND
========================================================= */

.service-blue{
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #edf7ff 100%
        );
}

.service-pink{
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fff0fb 100%
        );
}

.service-green{
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #effff2 100%
        );
}

.service-orange{
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fff5e9 100%
        );
}

.service-purple{
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f4efff 100%
        );
}

.service-cyan{
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #eaffff 100%
        );
}

.service-red{
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fff0f2 100%
        );
}

.service-indigo{
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #FFF1E8 100%
        );
}


/* =========================================================
   GLOW
========================================================= */

.service-card-glow{
    position:absolute;

    width:180px;
    height:180px;

    right:-70px;
    top:-80px;

    border-radius:50%;

    opacity:.22;

    filter:blur(5px);

    transition:.5s;
}

.cms-service-card:hover .service-card-glow{
    transform:scale(1.35);
    opacity:.35;
}

.service-blue .service-card-glow{
    background:#51a9ff;
}

.service-pink .service-card-glow{
    background:#ff65c5;
}

.service-green .service-card-glow{
    background:#55df7a;
}

.service-orange .service-card-glow{
    background:#ff9c40;
}

.service-purple .service-card-glow{
    background:#a06aff;
}

.service-cyan .service-card-glow{
    background:#36d9e5;
}

.service-red .service-card-glow{
    background:#ff657d;
}

.service-indigo .service-card-glow{
    background:#5d91ff;
}


/* =========================================================
   TOP
========================================================= */

.cms-service-top{
    position:relative;
    z-index:3;

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

    margin-bottom:18px;
}


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

.cms-service-icon{
    width:60px;
    height:60px;

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

    border-radius:16px;

    color:#fff;

    font-size:24px;

    box-shadow:
        0 9px 20px rgba(0,0,0,.12);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.cms-service-card:hover .cms-service-icon{
    transform:
        rotate(-7deg)
        scale(1.1);

    box-shadow:
        0 13px 27px rgba(0,0,0,.18);
}


/* ICON COLORS */

.service-blue .cms-service-icon{
    background:linear-gradient(135deg,#FFB800,#0068e8);
}

.service-pink .cms-service-icon{
    background:linear-gradient(135deg,#ff48c4,#F85800);
}

.service-green .cms-service-icon{
    background:linear-gradient(135deg,#27d45d,#F85800);
}

.service-orange .cms-service-icon{
    background:linear-gradient(135deg,#ff9c31,#F85800);
}

.service-purple .cms-service-icon{
    background:linear-gradient(135deg,#833cff,#F85800);
}

.service-cyan .cms-service-icon{
    background:linear-gradient(135deg,#19d7df,#F85800);
}

.service-red .cms-service-icon{
    background:linear-gradient(135deg,#ff4661,#F85800);
}

.service-indigo .cms-service-icon{
    background:linear-gradient(135deg,#318aff,#F85800);
}


/* =========================================================
   NUMBER
========================================================= */

.cms-service-number{
    position:relative;
    z-index:2;

    font-size:35px;

    line-height:1;

    font-weight:900;

    opacity:.25;

    transition:.35s;
}

.cms-service-card:hover .cms-service-number{
    opacity:.55;

    transform:translateY(-3px);
}

.service-blue .cms-service-number{
    color:#FFB800;
}

.service-pink .cms-service-number{
    color:#F85800;
}

.service-green .cms-service-number{
    color:#F85800;
}

.service-orange .cms-service-number{
    color:#F85800;
}

.service-purple .cms-service-number{
    color:#F85800;
}

.service-cyan .cms-service-number{
    color:#F85800;
}

.service-red .cms-service-number{
    color:#F85800;
}

.service-indigo .cms-service-number{
    color:#F85800;
}


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

.cms-service-content{
    position:relative;
    z-index:3;
}

.cms-service-content h3{
    margin:0 0 9px;

    max-width:255px;

    color:#0f213d;

    font-size:18px;

    line-height:1.28;

    font-weight:850;
}

.cms-service-content p{
    margin:0;

    color:#5d7089;

    font-size:12px;

    line-height:1.65;
}


/* =========================================================
   DECORATION
========================================================= */

.service-decoration{
    position:absolute;

    right:13px;
    bottom:45px;

    color:rgba(0,100,220,.08);

    font-size:80px;

    transform:rotate(-10deg);

    transition:
        transform .5s ease,
        opacity .4s ease;
}

.cms-service-card:hover .service-decoration{
    transform:
        rotate(0deg)
        scale(1.08);

    opacity:.7;
}


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

.cms-service-link{
    position:relative;
    z-index:5;

    margin-top:auto;
    padding-top:17px;

    display:flex;
    align-items:center;

    gap:9px;

    width:max-content;

    color:#086de0;

    font-size:12px;

    font-weight:800;

    text-decoration:none;
}

.cms-service-link i{
    width:28px;
    height:28px;

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

    border-radius:50%;

    background:#F85800;

    color:#fff;

    font-size:10px;

    transition:.35s;
}

.cms-service-link:hover{
    color:#F85800;
}

.cms-service-link:hover i{
    transform:translateX(5px) rotate(-5deg);
}


/* LINK COLORS */

.service-pink .cms-service-link{
    color:#F85800;
}

.service-pink .cms-service-link i{
    background:#F85800;
}

.service-green .cms-service-link{
    color:#F85800;
}

.service-green .cms-service-link i{
    background:#F85800;
}

.service-orange .cms-service-link{
    color:#F85800;
}

.service-orange .cms-service-link i{
    background:#F85800;
}

.service-purple .cms-service-link{
    color:#F85800;
}

.service-purple .cms-service-link i{
    background:#F85800;
}

.service-cyan .cms-service-link{
    color:#F85800;
}

.service-cyan .cms-service-link i{
    background:#F85800;
}

.service-red .cms-service-link{
    color:#F85800;
}

.service-red .cms-service-link i{
    background:#F85800;
}


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

.cms-services-cta{
    position:relative;
    z-index:5;

    margin-top:25px;

    min-height:115px;

    padding:22px 28px;

    display:flex;
    align-items:center;

    gap:18px;

    border-radius:20px;

    overflow:hidden;

    background:
        linear-gradient(
            110deg,
            #082c67,
            #086ee0 55%,
            #128cff
        );

    box-shadow:
        0 18px 40px rgba(8,92,190,.20);
}

.cms-services-cta:before{
    content:"";

    position:absolute;

    width:280px;
    height:280px;

    right:-100px;
    top:-150px;

    border-radius:50%;

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

.cta-circle{
    position:relative;
    z-index:2;

    width:65px;
    height:65px;

    min-width:65px;

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

    border-radius:50%;

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

    color:#fff;

    font-size:26px;

    animation:
        ctaPulse 2.5s ease-in-out infinite;
}

.cta-content{
    position:relative;
    z-index:2;

    flex:1;
}

.cta-content strong{
    display:block;

    margin-bottom:5px;

    color:#fff;

    font-size:18px;
}

.cta-content span{
    color:#c8ddf8;

    font-size:12px;

    line-height:1.5;
}

.cta-button{
    position:relative;
    z-index:3;

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

    gap:10px;

    padding:14px 21px;

    border-radius:8px;

    background:#fff;

    color:#0768d8;

    font-size:12px;

    font-weight:800;

    text-decoration:none;

    white-space:nowrap;

    transition:.3s;
}

.cta-button:hover{
    background:#f0f7ff;

    color:#005dc5;

    transform:translateY(-3px);
}

.cta-button i{
    transition:.3s;
}

.cta-button:hover i{
    transform:translateX(5px);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cmsFloat{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-18px) rotate(5deg);
    }

}

@keyframes cmsDots{

    0%,100%{
        transform:translateY(0);
        opacity:.25;
    }

    50%{
        transform:translateY(-12px);
        opacity:.55;
    }

}

@keyframes ctaPulse{

    0%,100%{
        box-shadow:
            0 0 0 0 rgba(255,255,255,.12);
    }

    50%{
        box-shadow:
            0 0 0 12px rgba(255,255,255,0);
    }

}


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

@media(max-width:1100px){

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

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

}


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

@media(max-width:767px){

    .cms-services-section{
        padding:65px 0;
    }

    .cms-services-heading{
        margin-bottom:32px;
    }

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

    .cms-services-heading p{
        font-size:13px;
    }

    .cms-services-grid{
        grid-template-columns:1fr;

        gap:15px;
    }

    .cms-service-card{
        min-height:280px;
    }

    .cms-services-cta{
        flex-wrap:wrap;

        padding:20px;
    }

    .cta-content{
        width:calc(100% - 83px);
        flex:auto;
    }

    .cta-button{
        width:100%;
        justify-content:center;
    }

}


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

@media(max-width:480px){

    .cms-services-heading h2{
        font-size:27px;
    }

    .cms-kicker{
        font-size:10px;
        letter-spacing:2px;
    }

    .cms-service-card{
        min-height:265px;

        padding:20px;
    }

    .cms-service-icon{
        width:55px;
        height:55px;
    }

    .cms-service-number{
        font-size:30px;
    }

    .cms-services-cta{
        border-radius:15px;
    }

}

/* Section 5 */
/* =====================================================
   WORDPRESS DEVELOPMENT SECTION
   THEME COLOR: BLUE + DARK BLUE + WHITE
===================================================== */

.wordpress-section{
    position:relative;
    padding:90px 0;

    background:
        radial-gradient(
            circle at 5% 45%,
            rgba(8,120,245,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 15%,
            rgba(47,164,255,.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #FFFAF6 0%,
            #ffffff 55%,
            #FFF7F0 100%
        );

    overflow:hidden;
}


/* ==========================================
   BACKGROUND SHAPES
========================================== */

.wordpress-bg-shape{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.wp-shape-one{
    width:420px;
    height:420px;

    left:-280px;
    bottom:-220px;

    border:1px solid rgba(8,120,245,.13);

    animation:wpFloat 8s ease-in-out infinite;
}

.wp-shape-two{
    width:300px;
    height:300px;

    right:-180px;
    top:-130px;

    border:1px solid rgba(8,120,245,.10);

    animation:wpFloat 10s ease-in-out infinite reverse;
}


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

.wordpress-visual{
    position:relative;
    min-height:500px;
    max-width:530px;
    margin:auto;
}


/* ==========================================
   MAIN DASHBOARD
========================================== */

.wordpress-main-card{
    position:absolute;

    left:0;
    top:45px;

    width:100%;

    border-radius:22px;

    background:#fff;

    border:1px solid #dceaf8;

    box-shadow:
        0 25px 65px rgba(7,73,140,.13);

    overflow:hidden;

    transform:
        perspective(1000px)
        rotateY(2deg);

    transition:.5s;
}

.wordpress-visual:hover .wordpress-main-card{
    transform:
        perspective(1000px)
        rotateY(0deg)
        translateY(-6px);

    box-shadow:
        0 30px 75px rgba(7,73,140,.18);
}


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

.wordpress-card-header{
    height:40px;

    display:flex;
    align-items:center;

    gap:6px;

    padding:0 15px;

    background:#f2f7fc;

    border-bottom:1px solid #F8E5D9;
}

.wordpress-card-header span{
    width:9px;
    height:9px;

    border-radius:50%;

    background:#b9cce0;
}


/* ==========================================
   DASHBOARD
========================================== */

.wordpress-dashboard{
    display:flex;
    min-height:360px;
}


/* ==========================================
   SIDEBAR
========================================== */

.wp-sidebar{
    width:65px;

    padding:18px 10px;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:14px;

    background:
        linear-gradient(
            180deg,
            #092b55,
            #0b3b70
        );
}

.wp-logo{
    width:38px;
    height:38px;

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

    margin-bottom:10px;

    border-radius:10px;

    background:#fff;

    color:#F85800;

    font-size:23px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.15);
}

.wp-menu{
    width:38px;
    height:38px;

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

    border-radius:9px;

    color:#91b2d5;

    font-size:14px;

    transition:.3s;
}

.wp-menu.active,
.wp-menu:hover{
    background:#F85800;
    color:#fff;

    box-shadow:
        0 6px 16px rgba(8,120,245,.28);
}


/* ==========================================
   DASHBOARD CONTENT
========================================== */

.wp-dashboard-content{
    flex:1;

    padding:20px;

    background:#FFFAF6;
}


/* ==========================================
   TOP BAR
========================================== */

.wp-topbar{
    display:flex;

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

    margin-bottom:20px;
}

.wp-topbar strong{
    color:#001848;
    font-size:14px;
}

.wp-topbar span{
    width:30px;
    height:30px;

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

    border-radius:8px;

    background:#e8f3ff;

    color:#F85800;

    font-size:11px;
}


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

.wp-stat-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

    margin-bottom:15px;
}

.wp-stat{
    position:relative;

    padding:15px;

    border-radius:11px;

    background:#fff;

    border:1px solid #F8E5D9;

    transition:.3s;
}

.wp-stat:hover{
    transform:translateY(-3px);

    border-color:#FFD2B8;

    box-shadow:
        0 8px 20px rgba(8,120,245,.08);
}

.wp-stat small{
    display:block;

    color:#8093a8;

    font-size:9px;

    margin-bottom:5px;
}

.wp-stat strong{
    color:#001848;

    font-size:20px;
}

.wp-stat i{
    position:absolute;

    right:12px;
    top:13px;

    color:#F85800;

    font-size:17px;
}


/* ==========================================
   CHART
========================================== */

.wp-chart{
    padding:18px;

    background:#fff;

    border:1px solid #F8E5D9;

    border-radius:12px;
}

.chart-heading{
    display:flex;

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

    margin-bottom:20px;
}

.chart-heading strong{
    color:#001848;
    font-size:11px;
}

.chart-heading span{
    color:#12a454;

    font-size:10px;

    font-weight:800;
}

.chart-bars{
    height:120px;

    display:flex;
    align-items:flex-end;
    justify-content:space-around;

    gap:10px;

    border-bottom:1px solid #e8eef5;
}

.chart-bars i{
    width:18px;

    display:block;

    border-radius:
        5px 5px 0 0;

    background:
        linear-gradient(
            180deg,
            #48b1ff,
            #F85800
        );

    animation:
        chartGrow 1.5s ease forwards;
}


/* ==========================================
   WORDPRESS FLOATING BADGE
========================================== */

.wordpress-floating-badge{
    position:absolute;

    left:-35px;
    top:5px;

    z-index:5;

    display:flex;
    align-items:center;

    gap:10px;

    padding:12px 16px;

    border-radius:13px;

    background:#fff;

    border:1px solid #F8E5D9;

    box-shadow:
        0 15px 35px rgba(20,70,110,.13);

    animation:
        wpFloat 4s ease-in-out infinite;
}

.wp-badge-icon{
    width:43px;
    height:43px;

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

    border-radius:11px;

    background:#e8f4ff;

    color:#F85800;

    font-size:24px;
}

.wordpress-floating-badge strong{
    display:block;

    color:#001848;

    font-size:12px;
}

.wordpress-floating-badge span{
    display:block;

    color:#7b8da1;

    font-size:9px;

    margin-top:2px;
}


/* ==========================================
   PERFORMANCE BADGE
========================================== */

.wordpress-performance{
    position:absolute;

    right:-28px;
    bottom:20px;

    z-index:5;

    display:flex;
    align-items:center;

    gap:10px;

    padding:12px 15px;

    background:#fff;

    border-radius:13px;

    border:1px solid #F8E5D9;

    box-shadow:
        0 15px 35px rgba(20,70,110,.13);

    animation:
        wpFloat 5s ease-in-out infinite reverse;
}

.wordpress-performance > i{
    width:39px;
    height:39px;

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

    border-radius:10px;

    background:#FFF1E8;

    color:#F85800;

    font-size:16px;
}

.wordpress-performance strong{
    display:block;

    color:#001848;

    font-size:11px;
}

.wordpress-performance span{
    display:block;

    color:#7b8da1;

    font-size:9px;
}


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

.wordpress-content{
    max-width:690px;
}


/* ==========================================
   KICKER
========================================== */

.wordpress-kicker{
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#F85800;

    font-size:12px;

    font-weight:800;

    letter-spacing:2.5px;
}

.wordpress-kicker i{
    width:32px;
    height:2px;

    display:block;

    background:#F85800;

    border-radius:5px;
}


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

.wordpress-content h2{
    margin:12px 0 17px;

    color:#0c1d35;

    font-size:42px;

    line-height:1.12;

    font-weight:850;

    letter-spacing:-1px;
}

.wordpress-content h2 span{
    display:block;

    color:#F85800;
}


/* ==========================================
   TEXT
========================================== */

.wordpress-intro{
    margin:0 0 10px;

    color:#506984;

    font-size:16px;

    line-height:1.65;

    font-weight:600;
}

.wordpress-description{
    margin:0 0 23px;

    color:#718399;

    font-size:13px;

    line-height:1.7;
}


/* ==========================================
   EXPERTISE HEADING
========================================== */

.wordpress-expertise-heading{
    display:flex;

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

    margin-bottom:14px;

    padding-bottom:10px;

    border-bottom:1px solid #e2ebf4;
}

.wordpress-expertise-heading strong{
    color:#001848;

    font-size:15px;
}

.wordpress-expertise-heading span{
    color:#8494a7;

    font-size:10px;
}


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

.wordpress-expertise{
    display:grid;

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

    gap:8px 18px;

    margin-bottom:25px;
}

.wordpress-expertise-item{
    display:flex;

    align-items:center;

    gap:9px;

    padding:8px 10px;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #FFFAF6,
            #ffffff
        );

    color:#001848;

    font-size:11.5px;

    font-weight:600;

    border:1px solid #e4edf6;

    transition:.3s;
}

.wordpress-expertise-item i{
    width:25px;
    height:25px;

    min-width:25px;

    display:flex;

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

    border-radius:7px;

    background:#FFF1E8;

    color:#F85800;

    font-size:10px;

    transition:.3s;
}

.wordpress-expertise-item:hover{
    transform:
        translateX(4px)
        translateY(-2px);

    border-color:#FFD2B8;

    background:#fff;

    box-shadow:
        0 7px 18px rgba(8,120,245,.08);
}

.wordpress-expertise-item:hover i{
    background:#F85800;

    color:#fff;

    transform:rotate(-5deg);
}


/* ==========================================
   BUTTON
========================================== */

.wordpress-btn{
    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            #F85800,
            #F85800
        );

    color:#fff;

    font-size:12px;

    font-weight:800;

    text-decoration:none;

    box-shadow:
        0 10px 25px rgba(8,120,245,.25);

    transition:.35s;
}

.wordpress-btn:hover{
    background:
        linear-gradient(
            135deg,
            #2997ff,
            #F85800
        );

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 15px 30px rgba(8,120,245,.32);
}

.wordpress-btn i{
    transition:.3s;
}

.wordpress-btn:hover i{
    transform:translateX(5px);
}


/* ==========================================
   ANIMATIONS
========================================== */

@keyframes wpFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

@keyframes chartGrow{

    from{
        transform:scaleY(0);
        transform-origin:bottom;
    }

    to{
        transform:scaleY(1);
        transform-origin:bottom;
    }

}


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

@media(max-width:1100px){

    .wordpress-visual{
        max-width:480px;
    }

    .wordpress-content h2{
        font-size:36px;
    }

}


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

@media(max-width:991px){

    .wordpress-visual{
        min-height:470px;

        margin-bottom:15px;
    }

    .wordpress-content{
        max-width:100%;
    }

}


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

@media(max-width:767px){

    .wordpress-section{
        padding:65px 0;
    }

    .wordpress-visual{
        min-height:370px;
    }

    .wordpress-main-card{
        top:35px;
    }

    .wordpress-dashboard{
        min-height:270px;
    }

    .wp-sidebar{
        width:48px;

        padding:12px 6px;
    }

    .wp-logo{
        width:30px;
        height:30px;

        font-size:18px;
    }

    .wp-menu{
        width:30px;
        height:30px;

        font-size:11px;
    }

    .wp-dashboard-content{
        padding:12px;
    }

    .wordpress-floating-badge{
        left:-5px;
    }

    .wordpress-performance{
        right:-5px;
    }

    .wordpress-content h2{
        font-size:31px;
    }

    .wordpress-intro{
        font-size:14px;
    }

    .wordpress-expertise{
        grid-template-columns:1fr;
    }

}


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

@media(max-width:480px){

    .wordpress-content h2{
        font-size:27px;
    }

    .wordpress-visual{
        min-height:320px;
    }

    .wordpress-dashboard{
        min-height:220px;
    }

    .wordpress-floating-badge{
        padding:8px 10px;
    }

    .wp-badge-icon{
        width:35px;
        height:35px;

        font-size:19px;
    }

    .wordpress-performance{
        padding:8px 10px;
    }

    .wordpress-performance > i{
        width:33px;
        height:33px;
    }

    .wp-stat strong{
        font-size:16px;
    }

    .wp-chart{
        padding:12px;
    }

    .chart-bars{
        height:80px;
    }

}

/**Section 6**/
/* =====================================================
   SHOPIFY DEVELOPMENT SECTION
===================================================== */

.shopify-section{
    position:relative;

    padding:95px 0;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(8,120,245,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 20%,
            rgba(91,196,106,.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #FFFAF6,
            #ffffff 55%,
            #f2f9ff
        );

    overflow:hidden;
}


/* =====================================================
   BACKGROUND CIRCLES
===================================================== */

.shopify-bg-circle{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    border:1px solid rgba(8,120,245,.10);
}

.shopify-circle-1{
    width:420px;
    height:420px;

    left:-270px;
    top:-150px;

    animation:shopifyFloat 8s ease-in-out infinite;
}

.shopify-circle-2{
    width:300px;
    height:300px;

    right:-180px;
    bottom:-130px;

    border-color:rgba(87,190,91,.13);

    animation:shopifyFloat 10s ease-in-out infinite reverse;
}


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

.shopify-content{
    max-width:680px;
}


/* KICKER */

.shopify-kicker{
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#F85800;

    font-size:12px;

    font-weight:800;

    letter-spacing:2.5px;
}

.shopify-kicker i{
    width:32px;
    height:2px;

    display:block;

    background:#F85800;

    border-radius:10px;
}


/* HEADING */

.shopify-content h2{
    margin:12px 0 16px;

    color:#0d203b;

    font-size:43px;

    line-height:1.1;

    font-weight:850;

    letter-spacing:-1px;
}

.shopify-content h2 span{
    display:block;

    color:#F85800;
}


/* INTRO */

.shopify-intro{
    max-width:620px;

    margin:0 0 25px;

    color:#60758e;

    font-size:14px;

    line-height:1.75;
}


/* =====================================================
   EXPERTISE TITLE
===================================================== */

.shopify-expertise-title{
    display:flex;

    align-items:center;

    margin-bottom:15px;

    padding-bottom:11px;

    border-bottom:1px solid #F8E5D9;
}

.shopify-expertise-title strong{
    display:block;

    color:#122944;

    font-size:17px;
}

.shopify-expertise-title span{
    display:block;

    margin-top:2px;

    color:#8a99aa;

    font-size:10px;
}


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

.shopify-expertise{
    display:grid;

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

    gap:9px 12px;

    margin-bottom:24px;
}


/* ITEM */

.shopify-item{
    display:flex;

    align-items:center;

    gap:10px;

    min-height:62px;

    padding:9px 10px;

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

    border:1px solid #F8E5D9;

    border-radius:10px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.shopify-item:hover{
    transform:
        translateY(-3px)
        translateX(2px);

    background:#fff;

    border-color:#c7e0f6;

    box-shadow:
        0 10px 24px rgba(20,75,125,.09);
}


/* ITEM ICON */

.shopify-item-icon{
    width:37px;
    height:37px;

    min-width:37px;

    display:flex;

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

    border-radius:9px;

    color:#fff;

    font-size:14px;

    transition:.3s;
}

.shopify-item:hover .shopify-item-icon{
    transform:rotate(-6deg) scale(1.08);
}


/* COLORS */

.shopify-item-icon.green{
    background:
        linear-gradient(
            135deg,
            #72d65d,
            #45b84b
        );
}

.shopify-item-icon.blue{
    background:
        linear-gradient(
            135deg,
            #39a4ff,
            #F85800
        );
}

.shopify-item-icon.purple{
    background:
        linear-gradient(
            135deg,
            #9a68ff,
            #6736df
        );
}

.shopify-item-icon.orange{
    background:
        linear-gradient(
            135deg,
            #ff9a3d,
            #f36b0a
        );
}

.shopify-item-icon.pink{
    background:
        linear-gradient(
            135deg,
            #ff619f,
            #e72d73
        );
}


/* ITEM TEXT */

.shopify-item strong{
    display:block;

    margin-bottom:2px;

    color:#001848;

    font-size:11.5px;

    line-height:1.25;
}

.shopify-item span{
    display:block;

    color:#7a899a;

    font-size:9.5px;

    line-height:1.35;
}


/* =====================================================
   BUTTON
===================================================== */

.shopify-btn{
    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #F85800,
            #F85800
        );

    color:#fff;

    font-size:12px;

    font-weight:800;

    text-decoration:none;

    box-shadow:
        0 10px 25px rgba(8,120,245,.24);

    transition:.35s;
}

.shopify-btn:hover{
    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 15px 30px rgba(8,120,245,.32);
}

.shopify-btn i{
    transition:.3s;
}

.shopify-btn:hover i{
    transform:translateX(5px);
}


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

.shopify-visual{
    position:relative;

    min-height:560px;

    max-width:590px;

    margin:auto;
}


/* =====================================================
   MAIN IMAGE
===================================================== */

.shopify-image-wrap{
    position:absolute;

    right:0;
    top:25px;

    width:92%;

    height:500px;

    overflow:hidden;

    border-radius:
        35px
        10px
        35px
        10px;

    border:7px solid rgba(255,255,255,.9);

    background:#dcecff;

    box-shadow:
        0 25px 65px rgba(15,68,120,.16);

    transform:
        rotate(1deg);

    transition:.5s;
}

.shopify-visual:hover .shopify-image-wrap{
    transform:
        rotate(0deg)
        translateY(-5px);

    box-shadow:
        0 30px 75px rgba(15,68,120,.21);
}

.shopify-image-wrap img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .8s ease;
}

.shopify-visual:hover
.shopify-image-wrap img{
    transform:scale(1.04);
}


/* IMAGE OVERLAY */

.shopify-image-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(8,120,245,.10),
            transparent 50%,
            rgba(72,190,77,.10)
        );

    pointer-events:none;
}


/* =====================================================
   SHOPIFY LOGO CARD
===================================================== */

.shopify-logo-card{
    position:absolute;

    left:-20px;
    top:15px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:10px;

    padding:11px 15px;

    background:#fff;

    border:1px solid #e2edf5;

    border-radius:13px;

    box-shadow:
        0 15px 35px rgba(15,70,115,.13);

    animation:
        shopifyFloat 4s ease-in-out infinite;
}

.shopify-logo-icon{
    width:45px;
    height:45px;

    display:flex;

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

    border-radius:11px;

    background:#e8f8e9;

    color:#55a947;

    font-size:27px;
}

.shopify-logo-card strong{
    display:block;

    color:#001848;

    font-size:13px;
}

.shopify-logo-card span{
    display:block;

    margin-top:2px;

    color:#8391a1;

    font-size:9px;
}


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

.shopify-sales-card{
    position:absolute;

    right:-25px;
    top:125px;

    z-index:6;

    display:flex;

    align-items:center;

    gap:11px;

    padding:13px 16px;

    min-width:170px;

    background:#fff;

    border:1px solid #e1ecf5;

    border-radius:13px;

    box-shadow:
        0 15px 35px rgba(15,70,115,.13);

    animation:
        shopifyFloat 5s ease-in-out infinite reverse;
}

.sales-icon{
    width:42px;
    height:42px;

    display:flex;

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

    border-radius:10px;

    background:#FFF1E8;

    color:#F85800;

    font-size:16px;
}

.shopify-sales-card span{
    display:block;

    color:#8493a4;

    font-size:9px;
}

.shopify-sales-card strong{
    display:block;

    margin:2px 0;

    color:#102945;

    font-size:16px;
}

.shopify-sales-card small{
    color:#16a24d;

    font-size:9px;

    font-weight:800;
}


/* =====================================================
   CART FLOAT
===================================================== */

.shopify-cart-float{
    position:absolute;

    right:-20px;
    bottom:145px;

    z-index:6;

    width:55px;
    height:55px;

    display:flex;

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

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #68d65a,
            #42a846
        );

    color:#fff;

    font-size:21px;

    box-shadow:
        0 12px 25px rgba(61,164,65,.25);

    animation:
        shopifyFloat 4s ease-in-out infinite;
}


/* =====================================================
   SECURE BADGE
===================================================== */

.shopify-secure{
    position:absolute;

    left:5px;
    bottom:30px;

    z-index:7;

    display:flex;

    align-items:center;

    gap:10px;

    padding:11px 15px;

    background:#fff;

    border-radius:12px;

    border:1px solid #e1edf5;

    box-shadow:
        0 15px 35px rgba(15,70,115,.13);
}

.shopify-secure > i{
    width:39px;
    height:39px;

    display:flex;

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

    border-radius:10px;

    background:#FFF1E8;

    color:#F85800;

    font-size:15px;
}

.shopify-secure strong{
    display:block;

    color:#18324e;

    font-size:10px;
}

.shopify-secure span{
    display:block;

    margin-top:2px;

    color:#8593a3;

    font-size:8px;
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes shopifyFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}


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

@media(max-width:1100px){

    .shopify-content h2{
        font-size:37px;
    }

    .shopify-visual{
        min-height:500px;
    }

    .shopify-image-wrap{
        height:450px;
    }

}


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

@media(max-width:991px){

    .shopify-visual{
        min-height:470px;

        margin-top:15px;
    }

    .shopify-image-wrap{
        width:90%;

        height:430px;

        right:5%;
    }

    .shopify-sales-card{
        right:0;
    }

    .shopify-logo-card{
        left:0;
    }

}


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

@media(max-width:767px){

    .shopify-section{
        padding:65px 0;
    }

    .shopify-content h2{
        font-size:31px;
    }

    .shopify-intro{
        font-size:13px;
    }

    .shopify-expertise{
        grid-template-columns:1fr;
    }

    .shopify-visual{
        min-height:390px;
    }

    .shopify-image-wrap{
        height:350px;

        width:94%;

        right:3%;

        border-radius:25px 8px 25px 8px;
    }

    .shopify-logo-card{
        left:-2px;
        top:0;
    }

    .shopify-sales-card{
        right:-2px;
        top:80px;

        min-width:150px;
    }

    .shopify-cart-float{
        right:-2px;
        bottom:100px;

        width:48px;
        height:48px;
    }

    .shopify-secure{
        left:0;
        bottom:10px;
    }

}


/* =====================================================
   EXTRA SMALL
===================================================== */

@media(max-width:480px){

    .shopify-content h2{
        font-size:28px;
    }

    .shopify-visual{
        min-height:330px;
    }

    .shopify-image-wrap{
        height:300px;
    }

    .shopify-logo-card{
        padding:8px 10px;
    }

    .shopify-logo-icon{
        width:35px;
        height:35px;

        font-size:21px;
    }

    .shopify-sales-card{
        padding:9px 11px;

        min-width:135px;
    }

    .shopify-sales-card strong{
        font-size:13px;
    }

}

/**Section 7**/

/* =====================================================
   E-COMMERCE CMS SECTION
===================================================== */

.ecommerce-cms-section{
    position:relative;

    padding:100px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(8,120,245,.09),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(34,150,243,.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #FFFAF6 0%,
            #ffffff 55%,
            #f2f8ff 100%
        );
}


/* =====================================================
   BACKGROUND SHAPES
===================================================== */

.ecom-bg-shape{
    position:absolute;

    border-radius:50%;

    pointer-events:none;
}

.ecom-shape-1{
    width:420px;
    height:420px;

    left:-260px;
    top:120px;

    border:1px solid rgba(8,120,245,.12);

    animation:ecomFloat 9s ease-in-out infinite;
}

.ecom-shape-2{
    width:300px;
    height:300px;

    right:-170px;
    bottom:50px;

    border:1px solid rgba(8,120,245,.10);

    animation:ecomFloat 11s ease-in-out infinite reverse;
}


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

.ecommerce-heading{
    max-width:850px;

    margin:0 auto 50px;

    text-align:center;
}

.ecommerce-heading .section-kicker{
    color:#F85800;

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;
}

.ecommerce-heading h2{
    margin:12px 0 15px;

    color:#001848;

    font-size:44px;

    line-height:1.1;

    font-weight:850;

    letter-spacing:-1px;
}

.ecommerce-heading h2 span{
    color:#F85800;
}

.ecommerce-heading p{
    max-width:700px;

    margin:auto;

    color:#6e8095;

    font-size:14px;

    line-height:1.75;
}


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

.ecommerce-platforms{
    display:grid;

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

    gap:18px;

    position:relative;

    z-index:2;
}


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

.ecom-platform-card{
    position:relative;

    min-height:375px;

    padding:27px 22px 24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #FFFAF6
        );

    border:1px solid #dfebf6;

    border-radius:20px;

    box-shadow:
        0 15px 45px rgba(15,65,110,.07);

    overflow:hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.ecom-platform-card::before{
    content:"";

    position:absolute;

    width:120px;
    height:120px;

    right:-55px;
    top:-55px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(8,120,245,.10),
            transparent 70%
        );

    transition:.5s;
}

.ecom-platform-card::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #F85800,
            #4db4ff
        );

    transition:.45s;
}

.ecom-platform-card:hover{
    transform:
        translateY(-10px);

    border-color:#FFD2B8;

    box-shadow:
        0 25px 55px rgba(15,75,125,.13);
}

.ecom-platform-card:hover::before{
    transform:scale(2);
}

.ecom-platform-card:hover::after{
    width:100%;
}


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

.ecom-card-top{
    display:flex;

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

    margin-bottom:22px;
}

.ecom-icon{
    width:62px;
    height:62px;

    display:flex;

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

    border-radius:16px;

    color:#fff;

    font-size:27px;

    box-shadow:
        0 10px 22px rgba(8,120,245,.15);

    transition:.4s;
}

.ecom-platform-card:hover .ecom-icon{
    transform:
        rotate(-5deg)
        scale(1.08);
}


/* ICON COLORS */

.woo-icon{
    background:
        linear-gradient(
            135deg,
            #F85800,
            #F85800
        );
}

.shopify-icon{
    background:
        linear-gradient(
            135deg,
            #72d84e,
            #42a945
        );
}

.presta-icon{
    background:
        linear-gradient(
            135deg,
            #ff4f9a,
            #e60070
        );
}

.magento-icon{
    background:
        linear-gradient(
            135deg,
            #ff7733,
            #e84b14
        );
}

.opencart-icon{
    background:
        linear-gradient(
            135deg,
            #2eb9f5,
            #F85800
        );
}


/* NUMBER */

.ecom-number{
    color:#a9b8c8;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;
}


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

.ecom-platform-card h3{
    margin:0 0 10px;

    color:#112944;

    font-size:20px;

    font-weight:800;
}

.ecom-platform-card p{
    min-height:80px;

    margin:0 0 17px;

    color:#728398;

    font-size:11.5px;

    line-height:1.65;
}


/* =====================================================
   FEATURES
===================================================== */

.ecom-features{
    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:21px;
}

.ecom-features span{
    display:flex;

    align-items:center;

    gap:7px;

    color:#4d647d;

    font-size:10.5px;

    font-weight:600;
}

.ecom-features i{
    width:17px;
    height:17px;

    display:flex;

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

    border-radius:50%;

    background:#FFF1E8;

    color:#F85800;

    font-size:8px;

    flex-shrink:0;
}


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

.ecom-link{
    display:inline-flex;

    align-items:center;

    gap:9px;

    color:#F85800;

    font-size:11px;

    font-weight:800;

    text-decoration:none;

    transition:.3s;
}

.ecom-link i{
    font-size:12px;

    transition:.3s;
}

.ecom-link:hover{
    color:#F85800;
}

.ecom-link:hover i{
    transform:translateX(5px);
}


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

.ecommerce-cta{
    position:relative;

    z-index:3;

    margin-top:28px;

    padding:24px 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    border-radius:18px;

    background:
        linear-gradient(
            110deg,
            #082d58,
            #F85800
        );

    box-shadow:
        0 20px 45px rgba(8,82,155,.18);

    overflow:hidden;
}

.ecommerce-cta::after{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    right:-80px;
    top:-120px;

    border-radius:50%;

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

.ecommerce-cta-content{
    display:flex;

    align-items:center;

    gap:15px;

    position:relative;

    z-index:2;
}

.ecommerce-cta-icon{
    width:52px;
    height:52px;

    display:flex;

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

    border-radius:14px;

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

    color:#fff;

    font-size:21px;

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

.ecommerce-cta-content span{
    display:block;

    margin-bottom:3px;

    color:rgba(255,255,255,.72);

    font-size:10px;

    letter-spacing:.5px;
}

.ecommerce-cta-content h3{
    margin:0;

    color:#fff;

    font-size:20px;

    font-weight:800;
}


/* CTA BUTTON */

.ecommerce-cta-btn{
    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 20px;

    border-radius:9px;

    background:#fff;

    color:#F85800;

    font-size:11px;

    font-weight:800;

    text-decoration:none;

    white-space:nowrap;

    transition:.3s;
}

.ecommerce-cta-btn:hover{
    color:#F85800;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);
}

.ecommerce-cta-btn i{
    transition:.3s;
}

.ecommerce-cta-btn:hover i{
    transform:translateX(4px);
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes ecomFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}


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

@media(max-width:1200px){

    .ecommerce-platforms{
        grid-template-columns:
            repeat(3,1fr);
    }

    .ecom-platform-card{
        min-height:350px;
    }

}


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

@media(max-width:768px){

    .ecommerce-cms-section{
        padding:75px 0;
    }

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

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

    .ecommerce-cta{
        padding:22px;

        align-items:flex-start;

        flex-direction:column;
    }

    .ecommerce-cta-btn{
        width:100%;

        justify-content:center;
    }

}


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

@media(max-width:576px){

    .ecommerce-heading{
        margin-bottom:35px;
    }

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

    .ecommerce-heading p{
        font-size:13px;
    }

    .ecommerce-platforms{
        grid-template-columns:1fr;

        gap:15px;
    }

    .ecom-platform-card{
        min-height:auto;

        padding:24px 20px;
    }

    .ecom-platform-card p{
        min-height:auto;
    }

    .ecommerce-cta-content h3{
        font-size:17px;
    }

}


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

@media(max-width:400px){

    .ecommerce-heading h2{
        font-size:27px;
    }

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

        font-size:23px;
    }

    .ecommerce-cta{
        padding:20px;
    }

}

/**section 8**/
/* =====================================================
   CUSTOM CMS DEVELOPMENT
===================================================== */

.custom-cms-section{
    position:relative;

    padding:100px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(8,120,245,.09),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 10%,
            rgba(30,157,255,.07),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #FFFAF6 0%,
            #ffffff 55%,
            #FFF7F0 100%
        );
}


/* =====================================================
   BACKGROUND
===================================================== */

.custom-cms-bg{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    border:1px solid rgba(8,120,245,.10);
}

.bg-one{
    width:430px;
    height:430px;

    left:-280px;
    top:-160px;

    animation:customFloat 9s ease-in-out infinite;
}

.bg-two{
    width:300px;
    height:300px;

    right:-190px;
    bottom:-120px;

    animation:customFloat 11s ease-in-out infinite reverse;
}


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

.custom-cms-content{
    max-width:680px;
}

.custom-cms-kicker{
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#F85800;

    font-size:12px;

    font-weight:800;

    letter-spacing:2.5px;
}

.custom-cms-kicker i{
    width:32px;
    height:2px;

    display:block;

    background:#F85800;

    border-radius:10px;
}


/* HEADING */

.custom-cms-content h2{
    margin:13px 0 18px;

    color:#001848;

    font-size:43px;

    line-height:1.1;

    font-weight:850;

    letter-spacing:-1px;
}

.custom-cms-content h2 span{
    display:block;

    color:#F85800;
}


/* TEXT */

.custom-cms-intro{
    margin:0 0 12px;

    color:#506983;

    font-size:15px;

    line-height:1.7;

    font-weight:600;
}

.custom-cms-description{
    margin:0 0 25px;

    color:#73869a;

    font-size:13px;

    line-height:1.75;
}


/* =====================================================
   FEATURES
===================================================== */

.custom-cms-features{
    display:grid;

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

    gap:8px 12px;

    margin-bottom:27px;
}

.custom-feature{
    display:flex;

    align-items:center;

    gap:9px;

    min-height:44px;

    padding:7px 10px;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #FFFAF6,
            #ffffff
        );

    border:1px solid #e1ecf6;

    color:#001848;

    transition:.3s;
}

.custom-feature span{
    width:29px;
    height:29px;

    min-width:29px;

    display:flex;

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

    border-radius:8px;

    background:#e6f3ff;

    color:#F85800;

    font-size:11px;

    transition:.3s;
}

.custom-feature strong{
    font-size:11px;

    font-weight:700;
}

.custom-feature:hover{
    transform:
        translateX(4px)
        translateY(-2px);

    background:#fff;

    border-color:#FFD2B8;

    box-shadow:
        0 8px 20px rgba(8,120,245,.08);
}

.custom-feature:hover span{
    background:#F85800;

    color:#fff;

    transform:rotate(-5deg);
}


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

.custom-cms-btn{
    display:inline-flex;

    align-items:center;

    gap:11px;

    padding:14px 22px;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #F85800,
            #F85800
        );

    color:#fff;

    font-size:12px;

    font-weight:800;

    text-decoration:none;

    box-shadow:
        0 10px 25px rgba(8,120,245,.24);

    transition:.35s;
}

.custom-cms-btn:hover{
    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 16px 30px rgba(8,120,245,.30);
}

.custom-cms-btn i{
    transition:.3s;
}

.custom-cms-btn:hover i{
    transform:translateX(5px);
}


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

.custom-cms-visual{
    position:relative;

    min-height:535px;

    max-width:600px;

    margin:auto;
}


/* =====================================================
   DASHBOARD
===================================================== */

.custom-dashboard{
    position:absolute;

    left:0;
    top:30px;

    width:100%;

    min-height:470px;

    display:flex;

    overflow:hidden;

    border-radius:20px;

    background:#fff;

    border:1px solid #dceaf7;

    box-shadow:
        0 28px 70px rgba(15,70,120,.15);

    transform:
        perspective(1200px)
        rotateY(-2deg);

    transition:.5s;
}

.custom-cms-visual:hover .custom-dashboard{
    transform:
        perspective(1200px)
        rotateY(0)
        translateY(-5px);

    box-shadow:
        0 35px 80px rgba(15,70,120,.20);
}


/* =====================================================
   SIDEBAR
===================================================== */

.custom-sidebar{
    width:67px;

    flex-shrink:0;

    padding:17px 10px;

    display:flex;

    align-items:center;

    flex-direction:column;

    gap:10px;

    background:
        linear-gradient(
            180deg,
            #092c56,
            #0b3e74
        );
}

.custom-logo{
    width:40px;
    height:40px;

    display:flex;

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

    margin-bottom:13px;

    border-radius:11px;

    background:#fff;

    color:#F85800;

    font-size:19px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.12);
}

.custom-side-item{
    width:39px;
    height:39px;

    display:flex;

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

    border-radius:9px;

    color:#91b2d3;

    font-size:13px;

    transition:.3s;
}

.custom-side-item:hover,
.custom-side-item.active{
    background:#F85800;

    color:#fff;

    box-shadow:
        0 6px 15px rgba(8,120,245,.3);
}


/* =====================================================
   DASHBOARD MAIN
===================================================== */

.custom-dashboard-main{
    flex:1;

    min-width:0;

    padding:21px;

    background:#FFFAF6;
}


/* TOP */

.custom-dashboard-top{
    display:flex;

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

    margin-bottom:18px;
}

.custom-dashboard-top small{
    display:block;

    margin-bottom:3px;

    color:#8495a8;

    font-size:7px;

    letter-spacing:1.2px;
}

.custom-dashboard-top strong{
    color:#112b47;

    font-size:15px;
}

.custom-user{
    width:34px;
    height:34px;

    display:flex;

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

    border-radius:9px;

    background:#FFF1E8;

    color:#F85800;

    font-size:12px;
}


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

.custom-stats{
    display:grid;

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

    gap:10px;

    margin-bottom:12px;
}

.custom-stat-card{
    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    padding:11px;

    border-radius:10px;

    background:#fff;

    border:1px solid #F8E5D9;

    transition:.3s;
}

.custom-stat-card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 8px 18px rgba(8,120,245,.07);
}

.stat-icon{
    width:32px;
    height:32px;

    display:flex;

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

    border-radius:8px;

    color:#fff;

    font-size:11px;
}

.stat-icon.blue{
    background:#F85800;
}

.stat-icon.green{
    background:#26ad62;
}

.stat-icon.purple{
    background:#7956dc;
}

.custom-stat-card span{
    display:block;

    color:#8a98a8;

    font-size:7px;
}

.custom-stat-card strong{
    display:block;

    color:#122b47;

    font-size:13px;
}

.custom-stat-card small{
    position:absolute;

    right:8px;
    top:8px;

    color:#18a250;

    font-size:7px;

    font-weight:800;
}


/* =====================================================
   DASHBOARD BODY
===================================================== */

.custom-dashboard-body{
    display:grid;

    grid-template-columns:
        1.45fr .75fr;

    gap:11px;
}


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

.custom-chart-card,
.custom-activity-card{
    padding:15px;

    border-radius:11px;

    background:#fff;

    border:1px solid #F8E5D9;
}

.custom-card-heading{
    display:flex;

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

    margin-bottom:14px;
}

.custom-card-heading strong{
    display:block;

    color:#193450;

    font-size:10px;
}

.custom-card-heading span{
    display:block;

    margin-top:2px;

    color:#8a99aa;

    font-size:7px;
}

.custom-card-heading button{
    border:1px solid #e0eaf3;

    background:#f8fbfe;

    color:#64778d;

    padding:5px 7px;

    border-radius:5px;

    font-size:7px;
}

.custom-card-heading button i{
    margin-left:4px;

    font-size:6px;
}


/* =====================================================
   CHART
===================================================== */

.custom-chart{
    position:relative;

    height:190px;

    display:flex;

    align-items:flex-end;

    gap:9px;

    padding:15px 8px 0;

    overflow:hidden;

    border-bottom:1px solid #edf2f7;
}

.chart-bars{
    width:100%;

    height:100%;

    display:flex;

    align-items:flex-end;

    justify-content:space-around;

    gap:8px;
}

.chart-bars span{
    width:18px;

    display:block;

    border-radius:
        5px
        5px
        0
        0;

    background:
        linear-gradient(
            180deg,
            #5ab9ff,
            #F85800
        );

    opacity:.16;

    animation:
        customChartGrow 1.4s ease forwards;
}


/* LINE */

.chart-line{
    position:absolute;

    left:10px;
    right:10px;

    top:38px;

    height:80px;

    border-top:2px solid #F85800;

    transform:
        skewY(-8deg);

    opacity:.8;
}

.chart-points{
    position:absolute;

    left:14px;
    right:14px;

    bottom:25px;

    display:flex;

    justify-content:space-around;
}

.chart-points i{
    width:7px;
    height:7px;

    display:block;

    border-radius:50%;

    background:#F85800;

    border:2px solid #fff;

    box-shadow:
        0 2px 7px rgba(8,120,245,.3);
}


/* =====================================================
   ACTIVITY
===================================================== */

.activity-item{
    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 0;

    border-bottom:1px solid #edf2f7;
}

.activity-item:last-child{
    border-bottom:0;
}

.activity-icon{
    width:29px;
    height:29px;

    display:flex;

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

    border-radius:8px;

    color:#fff;

    font-size:9px;
}

.activity-icon.blue{
    background:#F85800;
}

.activity-icon.green{
    background:#27ad61;
}

.activity-icon.purple{
    background:#7854dc;
}

.activity-item strong{
    display:block;

    color:#304963;

    font-size:8px;
}

.activity-item small{
    display:block;

    margin-top:2px;

    color:#9aa7b6;

    font-size:6.5px;
}


/* =====================================================
   API FLOATING CARD
===================================================== */

.custom-api-card{
    position:absolute;

    right:-28px;
    top:5px;

    z-index:8;

    display:flex;

    align-items:center;

    gap:9px;

    padding:11px 14px;

    background:#fff;

    border:1px solid #F8E5D9;

    border-radius:12px;

    box-shadow:
        0 15px 35px rgba(15,70,120,.14);

    animation:
        customFloat 4s ease-in-out infinite;
}

.api-icon{
    width:38px;
    height:38px;

    display:flex;

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

    border-radius:9px;

    background:#FFF1E8;

    color:#F85800;

    font-size:14px;
}

.custom-api-card strong{
    display:block;

    color:#17324e;

    font-size:10px;
}

.custom-api-card span{
    display:block;

    margin-top:2px;

    color:#8493a4;

    font-size:7px;
}

.api-check{
    color:#18a653;

    font-size:12px;
}


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

.custom-security-card{
    position:absolute;

    left:-27px;
    bottom:12px;

    z-index:8;

    display:flex;

    align-items:center;

    gap:9px;

    padding:11px 14px;

    background:#fff;

    border:1px solid #F8E5D9;

    border-radius:12px;

    box-shadow:
        0 15px 35px rgba(15,70,120,.14);

    animation:
        customFloat 5s ease-in-out infinite reverse;
}

.security-icon{
    width:38px;
    height:38px;

    display:flex;

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

    border-radius:9px;

    background:#FFF1E8;

    color:#F85800;

    font-size:14px;
}

.custom-security-card strong{
    display:block;

    color:#17324e;

    font-size:10px;
}

.custom-security-card span{
    display:block;

    margin-top:2px;

    color:#8493a4;

    font-size:7px;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes customFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

@keyframes customChartGrow{

    from{
        transform:scaleY(0);

        transform-origin:bottom;
    }

    to{
        transform:scaleY(1);

        transform-origin:bottom;
    }

}


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

@media(max-width:1100px){

    .custom-cms-content h2{
        font-size:36px;
    }

    .custom-cms-visual{
        min-height:500px;
    }

    .custom-dashboard{
        min-height:440px;
    }

    .custom-dashboard-body{
        grid-template-columns:1fr;
    }

}


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

@media(max-width:991px){

    .custom-cms-section{
        padding:75px 0;
    }

    .custom-cms-visual{
        min-height:480px;

        margin-top:20px;
    }

    .custom-api-card{
        right:0;
    }

    .custom-security-card{
        left:0;
    }

}


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

@media(max-width:767px){

    .custom-cms-content h2{
        font-size:31px;
    }

    .custom-cms-intro{
        font-size:14px;
    }

    .custom-cms-features{
        grid-template-columns:1fr;
    }

    .custom-cms-visual{
        min-height:400px;
    }

    .custom-dashboard{
        top:25px;

        min-height:370px;

        border-radius:15px;
    }

    .custom-sidebar{
        width:50px;

        padding:13px 6px;
    }

    .custom-logo{
        width:32px;
        height:32px;

        font-size:15px;
    }

    .custom-side-item{
        width:31px;
        height:31px;

        font-size:10px;
    }

    .custom-dashboard-main{
        padding:13px;
    }

    .custom-stats{
        grid-template-columns:1fr;
    }

    .custom-stat-card{
        padding:8px;
    }

    .custom-dashboard-body{
        display:block;
    }

    .custom-chart-card{
        margin-bottom:10px;
    }

    .custom-chart{
        height:130px;
    }

    .custom-api-card{
        top:0;

        padding:8px 10px;
    }

    .custom-security-card{
        bottom:0;

        padding:8px 10px;
    }

}


/* =====================================================
   EXTRA SMALL
===================================================== */

@media(max-width:480px){

    .custom-cms-content h2{
        font-size:27px;
    }

    .custom-cms-visual{
        min-height:340px;
    }

    .custom-dashboard{
        min-height:315px;
    }

    .custom-dashboard-main{
        padding:10px;
    }

    .custom-dashboard-top strong{
        font-size:12px;
    }

    .custom-chart{
        height:100px;
    }

    .custom-api-card{
        transform:scale(.85);
        transform-origin:right top;
    }

    .custom-security-card{
        transform:scale(.85);
        transform-origin:left bottom;
    }

}

/**section 9**/
/* =====================================================
   WHY CHOOSE US
===================================================== */

.why-cms-section{
    position:relative;

    padding:100px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 5% 25%,
            rgba(8,120,245,.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 95% 75%,
            rgba(45,157,255,.08),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #FFFAF6 0%,
            #ffffff 52%,
            #FFF7F0 100%
        );
}


/* =====================================================
   BACKGROUND SHAPES
===================================================== */

.why-cms-shape{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    border:1px solid rgba(8,120,245,.10);
}

.why-shape-one{
    width:430px;
    height:430px;

    left:-290px;
    top:-160px;

    animation:
        whyFloat 9s ease-in-out infinite;
}

.why-shape-two{
    width:340px;
    height:340px;

    right:-210px;
    bottom:-160px;

    animation:
        whyFloat 11s ease-in-out infinite reverse;
}


/* =====================================================
   CENTER HEADING
===================================================== */

.why-cms-heading{
    position:relative;

    z-index:2;

    max-width:850px;

    margin:0 auto 35px;

    text-align:center;
}

.why-cms-kicker{
    display:inline-flex;

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

    gap:11px;

    color:#F85800;

    font-size:11px;

    font-weight:800;

    letter-spacing:2.8px;
}

.why-cms-kicker i{
    width:28px;
    height:2px;

    display:block;

    border-radius:10px;

    background:#F85800;
}

.why-cms-heading h2{
    margin:13px 0 15px;

    color:#0b203a;

    font-size:44px;

    line-height:1.1;

    font-weight:850;

    letter-spacing:-1px;
}

.why-cms-heading h2 span{
    color:#F85800;
}

.why-cms-heading p{
    max-width:700px;

    margin:0 auto;

    color:#718398;

    font-size:13px;

    line-height:1.75;
}


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

.why-cms-stats{
    position:relative;

    z-index:2;

    display:flex;

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

    width:max-content;

    max-width:100%;

    margin:0 auto 45px;

    padding:12px 20px;

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

    border:1px solid #F8E5D9;

    border-radius:16px;

    box-shadow:
        0 12px 35px rgba(20,70,115,.06);

    backdrop-filter:blur(10px);
}

.why-stat{
    display:flex;

    align-items:center;

    gap:10px;

    padding:5px 24px;
}

.why-stat-icon{
    width:40px;
    height:40px;

    display:flex;

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

    border-radius:10px;

    background:#FFF1E8;

    color:#F85800;

    font-size:14px;
}

.why-stat strong{
    display:block;

    color:#102a47;

    font-size:22px;

    line-height:1;

    font-weight:850;
}

.why-stat strong span{
    color:#F85800;

    font-size:14px;
}

.why-stat small{
    display:block;

    margin-top:4px;

    color:#8292a4;

    font-size:8px;

    font-weight:600;
}

.why-stat-line{
    width:1px;
    height:38px;

    background:#dfe8f1;
}


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

.why-cms-grid{
    position:relative;

    z-index:2;

    max-width:1080px;

    margin:0 auto;

    display:grid;

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

    gap:16px;
}


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

.why-feature-card{
    position:relative;

    display:flex;

    align-items:flex-start;

    gap:14px;

    min-height:150px;

    padding:21px;

    overflow:hidden;

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #FFFAF6
        );

    border:1px solid #F8E5D9;

    box-shadow:
        0 10px 30px rgba(20,70,115,.055);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.why-feature-card::before{
    content:"";

    position:absolute;

    width:130px;
    height:130px;

    right:-70px;
    bottom:-70px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(8,120,245,.10),
            transparent 70%
        );

    transition:.5s;
}

.why-feature-card::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #F85800,
            #55b6ff
        );

    transition:.4s;
}

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

    border-color:#b9daf7;

    box-shadow:
        0 22px 45px rgba(15,75,125,.11);
}

.why-feature-card:hover::before{
    transform:scale(2);
}

.why-feature-card:hover::after{
    width:100%;
}


/* =====================================================
   FEATURE ICON
===================================================== */

.why-feature-icon{
    width:51px;
    height:51px;

    min-width:51px;

    display:flex;

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

    border-radius:13px;

    color:#fff;

    font-size:17px;

    box-shadow:
        0 9px 20px rgba(0,0,0,.10);

    transition:.4s;
}

.why-feature-card:hover .why-feature-icon{
    transform:
        rotate(-7deg)
        scale(1.08);
}


/* =====================================================
   ICON COLORS
===================================================== */

.why-feature-icon.blue{
    background:
        linear-gradient(
            135deg,
            #42aaff,
            #F85800
        );
}

.why-feature-icon.purple{
    background:
        linear-gradient(
            135deg,
            #a06cff,
            #6735dc
        );
}

.why-feature-icon.cyan{
    background:
        linear-gradient(
            135deg,
            #2bd7e2,
            #0099ab
        );
}

.why-feature-icon.green{
    background:
        linear-gradient(
            135deg,
            #50d97b,
            #17a34a
        );
}

.why-feature-icon.orange{
    background:
        linear-gradient(
            135deg,
            #ffb052,
            #ed6b08
        );
}

.why-feature-icon.pink{
    background:
        linear-gradient(
            135deg,
            #ff70aa,
            #e52d73
        );
}

.why-feature-icon.indigo{
    background:
        linear-gradient(
            135deg,
            #668fff,
            #255ddc
        );
}


/* =====================================================
   FEATURE CONTENT
===================================================== */

.why-feature-content{
    position:relative;

    z-index:2;

    padding-right:25px;
}

.why-feature-content > span{
    display:block;

    margin-bottom:4px;

    color:#b0bfce;

    font-size:8px;

    font-weight:800;

    letter-spacing:1px;
}

.why-feature-content h3{
    margin:0 0 7px;

    color:#152d49;

    font-size:15px;

    line-height:1.3;

    font-weight:800;
}

.why-feature-content p{
    margin:0;

    max-width:380px;

    color:#78899c;

    font-size:10.5px;

    line-height:1.6;
}


/* =====================================================
   ARROW
===================================================== */

.why-feature-arrow{
    position:absolute;

    right:14px;
    top:14px;

    width:27px;
    height:27px;

    display:flex;

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

    border-radius:50%;

    background:#FFF1E8;

    color:#F85800;

    font-size:9px;

    opacity:0;

    transform:
        translate(-5px,5px);

    transition:.35s;
}

.why-feature-card:hover .why-feature-arrow{
    opacity:1;

    transform:
        translate(0,0);
}


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

.why-bottom-cta{
    position:relative;

    z-index:3;

    max-width:1080px;

    margin:25px auto 0;

    padding:21px 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    overflow:hidden;

    border-radius:17px;

    background:
        linear-gradient(
            110deg,
            #001848,
            #F85800
        );

    box-shadow:
        0 20px 45px rgba(8,82,155,.17);
}

.why-bottom-cta::after{
    content:"";

    position:absolute;

    width:230px;
    height:230px;

    right:-80px;
    top:-130px;

    border-radius:50%;

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

.why-bottom-content{
    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:13px;
}

.why-bottom-icon{
    width:48px;
    height:48px;

    display:flex;

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

    border-radius:12px;

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

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

    color:#fff;

    font-size:18px;
}

.why-bottom-content span{
    display:block;

    margin-bottom:3px;

    color:rgba(255,255,255,.68);

    font-size:9px;
}

.why-bottom-content h3{
    margin:0;

    color:#fff;

    font-size:18px;

    font-weight:800;
}


/* CTA BUTTON */

.why-bottom-btn{
    position:relative;

    z-index:3;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 19px;

    border-radius:8px;

    background:#fff;

    color:#F85800;

    font-size:10px;

    font-weight:800;

    text-decoration:none;

    white-space:nowrap;

    transition:.3s;
}

.why-bottom-btn:hover{
    color:#F85800;

    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.14);
}

.why-bottom-btn i{
    transition:.3s;
}

.why-bottom-btn:hover i{
    transform:translateX(5px);
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes whyFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}


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

@media(max-width:1100px){

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

    .why-cms-grid{
        max-width:900px;
    }

}


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

@media(max-width:767px){

    .why-cms-section{
        padding:75px 0;
    }

    .why-cms-heading h2{
        font-size:32px;
    }

    .why-cms-heading p{
        font-size:12px;
    }

    .why-cms-stats{
        width:100%;

        padding:10px;

        margin-bottom:35px;
    }

    .why-stat{
        padding:5px 12px;

        gap:7px;
    }

    .why-stat-icon{
        width:34px;
        height:34px;

        font-size:11px;
    }

    .why-stat strong{
        font-size:19px;
    }

    .why-stat small{
        font-size:7px;
    }

    .why-cms-grid{
        grid-template-columns:1fr;

        gap:12px;
    }

    .why-feature-card{
        min-height:125px;

        padding:17px;
    }

    .why-bottom-cta{
        align-items:flex-start;

        flex-direction:column;

        padding:20px;
    }

    .why-bottom-btn{
        width:100%;

        justify-content:center;
    }

}


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

@media(max-width:480px){

    .why-cms-heading h2{
        font-size:28px;
    }

    .why-cms-kicker{
        font-size:9px;

        letter-spacing:2px;
    }

    .why-cms-kicker i{
        width:20px;
    }

    .why-cms-stats{
        display:grid;

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

        gap:0;
    }

    .why-stat{
        flex-direction:column;

        text-align:center;

        padding:5px;
    }

    .why-stat-line{
        height:45px;
    }

    .why-stat-icon{
        width:31px;
        height:31px;
    }

    .why-stat strong{
        font-size:17px;
    }

    .why-feature-icon{
        width:43px;
        height:43px;

        min-width:43px;

        font-size:14px;
    }

    .why-feature-content h3{
        font-size:13px;
    }

    .why-feature-content p{
        font-size:9.5px;
    }

    .why-bottom-content h3{
        font-size:15px;
    }

}
/**Section 10**/
/* =========================================================
   CMS DEVELOPMENT PROCESS
========================================================= */

.cms-process-section {
    position: relative;
    padding: 100px 0;
    background: #f6f9fd;
    overflow: hidden;
}

/* Background Shapes */
.cms-process-bg {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: .45;
}

.cms-process-bg-1 {
    width: 420px;
    height: 420px;
    background: rgba(8, 120, 245, .06);
    top: -180px;
    left: -160px;
}

.cms-process-bg-2 {
    width: 360px;
    height: 360px;
    background: rgba(8, 120, 245, .05);
    right: -150px;
    bottom: -150px;
}

/* Heading */
.cms-process-heading {
    max-width: 800px;
    margin: 0 auto 65px;
    text-align: center;
}

.cms-process-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #F85800;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.cms-process-kicker i {
    font-size: 14px;
}

.cms-process-heading h2 {
    margin: 0 0 15px;
    color: #001848;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
}

.cms-process-heading h2 span {
    color: #F85800;
}

.cms-process-heading p {
    margin: 0 auto;
    max-width: 700px;
    color: #66758a;
    font-size: 16px;
    line-height: 1.8;
}

/* Timeline */
.cms-process-timeline {
    position: relative;
    max-width: 1050px;
    margin: auto;
}

/* Center Line */
.cms-process-timeline::before {
    content: "";
    position: absolute;
    top: 35px;
    bottom: 35px;
    left: 50%;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        #F85800 8%,
        #F85800 92%,
        transparent
    );
    transform: translateX(-50%);
}

/* Item */
.cms-process-item {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 35px;
}

/* Alternate Cards */
.cms-process-item:nth-child(odd) {
    justify-content: flex-start;
    padding-right: 53%;
}

.cms-process-item:nth-child(even) {
    justify-content: flex-end;
    padding-left: 53%;
}

/* Number */
.cms-process-number {
    position: absolute;
    top: 25px;
    left: 50%;
    width: 52px;
    height: 52px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #F85800;
    border: 5px solid #f6f9fd;
    box-shadow: 0 8px 25px rgba(8, 120, 245, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.cms-process-number span {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

/* Card */
.cms-process-card {
    position: relative;
    width: 100%;
    padding: 28px 28px;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 16px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 12px 35px rgba(8, 46, 89, .06);
    transition: all .35s ease;
}

/* Connector */
.cms-process-card::after {
    content: "";
    position: absolute;
    top: 48px;
    width: 45px;
    height: 2px;
    background: #F85800;
}

.cms-process-item:nth-child(odd) .cms-process-card::after {
    right: -45px;
}

.cms-process-item:nth-child(even) .cms-process-card::after {
    left: -45px;
}

/* Hover */
.cms-process-card:hover {
    transform: translateY(-7px);
    border-color: rgba(8, 120, 245, .25);
    box-shadow: 0 20px 45px rgba(8, 46, 89, .12);
}

/* Icon */
.cms-process-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #F85800,
        #0055bd
    );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 10px 22px rgba(8, 120, 245, .20);
    transition: .35s ease;
}

.cms-process-card:hover .cms-process-icon {
    transform: rotate(-7deg) scale(1.08);
}

/* Content */
.cms-process-content {
    flex: 1;
}

.cms-process-step {
    display: block;
    color: #F85800;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.cms-process-content h3 {
    margin: 0 0 9px;
    color: #001848;
    font-size: 20px;
    font-weight: 750;
}

.cms-process-content p {
    margin: 0;
    color: #6c7b8f;
    font-size: 14px;
    line-height: 1.7;
}

/* CTA */
.cms-process-cta {
    max-width: 1050px;
    margin: 55px auto 0;
    padding: 28px 32px;
    background: linear-gradient(
        135deg,
        #001848,
        #F85800
    );
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    box-shadow: 0 18px 45px rgba(8, 46, 89, .16);
}

.cms-process-cta span {
    color: rgba(255,255,255,.7);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.cms-process-cta h3 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 24px;
    font-weight: 750;
}

.cms-process-cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #001848;
    padding: 14px 22px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: .3s ease;
}

.cms-process-cta a:hover {
    color: #F85800;
    transform: translateY(-3px);
}

.cms-process-cta a i {
    transition: .3s ease;
}

.cms-process-cta a:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 991px) {

    .cms-process-section {
        padding: 80px 0;
    }

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

    .cms-process-timeline::before {
        left: 25px;
    }

    .cms-process-item:nth-child(odd),
    .cms-process-item:nth-child(even) {
        justify-content: flex-start;
        padding: 0 0 0 70px;
    }

    .cms-process-number {
        left: 25px;
    }

    .cms-process-item:nth-child(odd) .cms-process-card::after,
    .cms-process-item:nth-child(even) .cms-process-card::after {
        left: -45px;
        right: auto;
    }

    .cms-process-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {

    .cms-process-section {
        padding: 65px 0;
    }

    .cms-process-heading {
        margin-bottom: 45px;
    }

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

    .cms-process-heading p {
        font-size: 14px;
    }

    .cms-process-item {
        margin-bottom: 25px;
    }

    .cms-process-card {
        padding: 22px;
        gap: 15px;
        border-radius: 13px;
    }

    .cms-process-icon {
        flex: 0 0 45px;
        width: 45px;
        height: 45px;
        font-size: 17px;
        border-radius: 11px;
    }

    .cms-process-content h3 {
        font-size: 17px;
    }

    .cms-process-content p {
        font-size: 13px;
    }

    .cms-process-number {
        width: 46px;
        height: 46px;
    }

    .cms-process-number span {
        font-size: 11px;
    }

    .cms-process-cta {
        padding: 24px;
    }

    .cms-process-cta h3 {
        font-size: 20px;
    }

    .cms-process-cta a {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {

    .cms-process-heading h2 {
        font-size: 27px;
    }

    .cms-process-item:nth-child(odd),
    .cms-process-item:nth-child(even) {
        padding-left: 58px;
    }

    .cms-process-timeline::before {
        left: 20px;
    }

    .cms-process-number {
        left: 20px;
        width: 40px;
        height: 40px;
    }

    .cms-process-number span {
        font-size: 10px;
    }

    .cms-process-card {
        padding: 18px;
        display: block;
    }

    .cms-process-icon {
        margin-bottom: 14px;
    }

    .cms-process-card::after {
        display: none;
    }
}

/**Section 11**/
/* =====================================================
   12. PREMIUM INDUSTRIES SECTION
===================================================== */

.industries-modern {
    position: relative;
    padding: 105px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(8,120,245,.12),
            transparent 24%
        ),
        radial-gradient(
            circle at 94% 25%,
            rgba(66,165,255,.10),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #f4f9ff 0%,
            #ffffff 55%,
            #f5f9ff 100%
        );
}


/* =====================================================
   DECORATIVE ELEMENTS
===================================================== */

.industry-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(8,120,245,.10);
}

.orb-1 {
    width: 420px;
    height: 420px;
    left: -240px;
    top: -80px;
}

.orb-2 {
    width: 500px;
    height: 500px;
    right: -300px;
    top: 100px;
}

.industry-dots {
    position: absolute;
    width: 90px;
    height: 65px;
    opacity: .45;

    background-image: radial-gradient(
        #F85800 1.5px,
        transparent 1.5px
    );

    background-size: 15px 15px;
}

.dots-1 {
    left: 45px;
    top: 100px;
}

.dots-2 {
    right: 45px;
    top: 250px;
}


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

.industry-modern-heading {
    position: relative;
    z-index: 2;

    max-width: 850px;
    margin: 0 auto 58px;

    text-align: center;
}

.industry-modern-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 20px;

    border: 1px solid #F85800;
    border-radius: 50px;

    color: #F85800;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;

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

    box-shadow:
        0 8px 25px rgba(8,120,245,.07);
}

.industry-modern-kicker i {
    font-size: 13px;
}

.industry-modern-heading h2 {
    margin: 18px 0 15px;

    color: #001848;

    font-size: 52px;
    line-height: 1.05;
    font-weight: 850;
    letter-spacing: -1.5px;
}

.industry-modern-heading h2 span {
    display: block;
    color: #F85800;
}

.industry-modern-heading p {
    max-width: 720px;
    margin: auto;

    color: #63738a;

    font-size: 15px;
    line-height: 1.8;
}


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

.industry-modern-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;

    max-width: 1200px;
    margin: auto;
}


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

.industry-modern-card {
    position: relative;

    min-height: 225px;
    padding: 22px 22px 24px;

    display: flex;
    flex-direction: column;

    text-decoration: none;

    border-radius: 18px;

    border: 1px solid rgba(154,188,225,.40);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(244,249,255,.82)
        );

    box-shadow:
        0 10px 35px rgba(8,46,89,.06);

    overflow: hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


/* Glass shine */
.industry-modern-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background: rgba(8,120,245,.07);

    transition: .45s ease;
}

.industry-modern-card:hover::before {
    transform: scale(2);
}


/* Bottom Glow */
.industry-modern-card::after {
    content: "";

    position: absolute;

    width: 80%;
    height: 2px;

    left: 10%;
    bottom: 0;

    background: linear-gradient(
        90deg,
        transparent,
        #F85800,
        transparent
    );

    opacity: 0;

    transition: .35s ease;
}

.industry-modern-card:hover::after {
    opacity: 1;
}


/* Hover */
.industry-modern-card:hover {
    transform: translateY(-9px);

    border-color: rgba(8,120,245,.30);

    box-shadow:
        0 24px 50px rgba(8,46,89,.13);
}


/* =====================================================
   NUMBER
===================================================== */

.industry-modern-number {
    position: absolute;

    top: 18px;
    left: 20px;

    color: #8db9ef;

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

    z-index: 3;

    transition: .3s ease;
}

.industry-modern-card:hover .industry-modern-number {
    color: #F85800;
}


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

.industry-modern-visual {
    position: relative;

    width: 100%;
    height: 92px;

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

    margin-top: 5px;
}


/* Icon */
.industry-modern-icon {
    position: relative;
    z-index: 2;

    width: 70px;
    height: 70px;

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

    border-radius: 22px;

    color: #F85800;

    font-size: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #e9f3ff
        );

    border: 1px solid rgba(8,120,245,.12);

    box-shadow:
        0 12px 30px rgba(8,120,245,.12);

    transition:
        transform .45s ease,
        color .35s ease,
        background .35s ease;
}

.industry-modern-card:hover .industry-modern-icon {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #F85800,
            #0759c8
        );

    transform:
        translateY(-5px)
        rotate(-6deg);

    box-shadow:
        0 15px 30px rgba(8,120,245,.28);
}


/* Glow */
.industry-glow {
    position: absolute;

    width: 75px;
    height: 35px;

    left: 50%;
    bottom: 5px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(8,120,245,.14);

    filter: blur(13px);

    transition: .4s ease;
}

.industry-modern-card:hover .industry-glow {
    width: 100px;
    opacity: .8;
}


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

.industry-modern-content {
    position: relative;
    z-index: 3;

    padding-right: 38px;
}

.industry-modern-content h3 {
    margin: 0 0 7px;

    color: #001848;

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

    transition: .3s ease;
}

.industry-modern-card:hover .industry-modern-content h3 {
    color: #F85800;
}

.industry-modern-content p {
    margin: 0;

    color: #687991;

    font-size: 12px;
    line-height: 1.6;
}


/* =====================================================
   ARROW
===================================================== */

.industry-modern-arrow {
    position: absolute;

    right: 20px;
    bottom: 23px;

    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    color: #F85800;

    background: #fff;

    border: 1px solid #dceafa;

    font-size: 12px;

    transition: .4s ease;

    z-index: 4;
}

.industry-modern-card:hover .industry-modern-arrow {
    color: #fff;

    background: #F85800;

    border-color: #F85800;

    transform: translate(3px,-3px);
}


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

.industry-premium-cta {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    min-height: 175px;

    margin: 25px auto 0;

    padding: 28px 35px;

    display: flex;
    align-items: center;
    gap: 35px;

    border-radius: 22px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(71,161,255,.30),
            transparent 25%
        ),
        linear-gradient(
            110deg,
            #073c9d,
            #0755c8 50%,
            #F85800
        );

    box-shadow:
        0 25px 55px rgba(8,46,89,.20);
}


/* CTA Decorative */
.industry-cta-decoration {
    position: absolute;

    width: 300px;
    height: 300px;

    left: -100px;
    bottom: -210px;

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

    border-radius: 50%;
}

.industry-cta-content {
    position: relative;
    z-index: 2;

    flex: 1;
}

.industry-cta-kicker {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    color: rgba(255,255,255,.72);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.industry-cta-kicker i {
    color: #fff;
}

.industry-cta-content h3 {
    max-width: 650px;

    margin: 0 0 7px;

    color: #fff;

    font-size: 27px;
    line-height: 1.15;
    font-weight: 800;
}

.industry-cta-content h3 span {
    color: #bfe0ff;
}

.industry-cta-content p {
    max-width: 600px;

    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 12px;
    line-height: 1.65;
}


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

.industry-cta-action {
    position: relative;
    z-index: 3;

    min-width: 260px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
}

.industry-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 15px 23px;

    border-radius: 50px;

    background: #fff;
    color: #001848;

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

    text-decoration: none;

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

    transition: .35s ease;
}

.industry-cta-button:hover {
    color: #F85800;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(0,0,0,.18);
}

.industry-cta-button i {
    transition: .3s ease;
}

.industry-cta-button:hover i {
    transform: translateX(5px);
}


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

.industry-trust {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trust-avatars {
    display: flex;
}

.trust-avatars span {
    width: 29px;
    height: 29px;

    margin-left: -7px;

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

    border-radius: 50%;

    background: #fff;

    color: #F85800;

    border: 2px solid #F85800;

    font-size: 7px;
    font-weight: 800;
}

.trust-avatars span:first-child {
    margin-left: 0;
}

.industry-trust small {
    color: rgba(255,255,255,.78);

    font-size: 10px;
    white-space: nowrap;
}


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

@media (max-width: 1100px) {

    .industry-modern-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

}


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

@media (max-width: 991px) {

    .industries-modern {
        padding: 85px 0;
    }

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

    .industry-premium-cta {
        flex-wrap: wrap;
    }

    .industry-cta-content {
        min-width: calc(100% - 90px);
    }

    .industry-cta-action {
        width: 100%;
        min-width: auto;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

}


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

@media (max-width: 767px) {

    .industries-modern {
        padding: 65px 0;
    }

    .industry-modern-heading {
        margin-bottom: 40px;
    }

    .industry-modern-heading h2 {
        font-size: 34px;
        letter-spacing: -.8px;
    }

    .industry-modern-heading p {
        font-size: 13px;
    }

    .industry-modern-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .industry-modern-card {
        min-height: 205px;
    }

    .industry-premium-cta {
        display: block;
        padding: 27px 24px;
    }

    .industry-cta-content h3 {
        font-size: 22px;
    }

    .industry-cta-action {
        display: block;
        margin-top: 20px;
    }

    .industry-cta-button {
        width: 100%;
    }

    .industry-trust {
        justify-content: center;
        margin-top: 17px;
    }

}


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

@media (max-width: 480px) {

    .industry-modern-heading h2 {
        font-size: 29px;
    }

    .industry-modern-kicker {
        padding: 7px 14px;
        font-size: 9px;
    }

    .industry-modern-card {
        min-height: 195px;
        padding: 20px;
    }

    .industry-modern-icon {
        width: 62px;
        height: 62px;
        font-size: 24px;
    }

    .industry-modern-content h3 {
        font-size: 16px;
    }

    .industry-modern-content p {
        font-size: 11px;
    }

}

/* stats */
/* =====================================================
   ADVANCED STATS SECTION
===================================================== */

.advanced-stats-section {
    position: relative;
    padding: 58px 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(62, 163, 255, .25),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(0, 84, 190, .30),
            transparent 30%
        ),
        linear-gradient(
            115deg,
            #061f47 0%,
            #073d91 48%,
            #F85800 100%
        );

    overflow: hidden;
}


/* =====================================================
   BACKGROUND CIRCLES
===================================================== */

.stats-bg-circle {
    position: absolute;

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

    border-radius: 50%;

    pointer-events: none;
}

.stats-circle-one {
    width: 420px;
    height: 420px;

    left: -260px;
    top: -170px;
}

.stats-circle-two {
    width: 500px;
    height: 500px;

    right: -310px;
    bottom: -300px;
}


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

.stats-grid-pattern {
    position: absolute;

    top: 0;
    right: 0;

    width: 250px;
    height: 180px;

    opacity: .15;

    background-image:
        radial-gradient(
            rgba(255,255,255,.8) 1px,
            transparent 1px
        );

    background-size: 14px 14px;

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

    pointer-events: none;
}


/* =====================================================
   WRAPPER
===================================================== */

.advanced-stats-wrap {
    position: relative;
    z-index: 2;

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

    gap: 0;

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

    border-radius: 20px;

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

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

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

    overflow: hidden;
}


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

.advanced-stat-card {
    position: relative;

    min-height: 145px;

    padding: 27px 25px;

    display: flex;
    align-items: center;

    gap: 18px;

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

    transition:
        background .35s ease,
        transform .35s ease;
}

.advanced-stat-card:last-child {
    border-right: 0;
}

.advanced-stat-card:hover {
    background: rgba(255,255,255,.09);
}


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

.stat-icon-box {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

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

    border-radius: 16px;

    color: #F85800;

    background: #fff;

    font-size: 21px;

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

    transition: .4s ease;
}

.advanced-stat-card:hover .stat-icon-box {
    transform:
        translateY(-5px)
        rotate(-6deg);

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


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

.stat-content {
    min-width: 0;
}

.stat-number-wrap {
    display: flex;
    align-items: baseline;

    line-height: 1;
}

.stat-number-wrap strong {
    color: #fff;

    font-size: 38px;
    line-height: 1;

    font-weight: 850;

    letter-spacing: -1px;
}

.stat-number-wrap span {
    margin-left: 3px;

    color: #9ed0ff;

    font-size: 21px;
    font-weight: 800;
}

.stat-content p {
    margin: 9px 0 0;

    color: rgba(255,255,255,.70);

    font-size: 12px;
    line-height: 1.4;

    font-weight: 600;
}


/* =====================================================
   BOTTOM CARD LINE
===================================================== */

.stat-card-line {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 0;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    opacity: .45;
}


/* =====================================================
   COUNTER GLOW
===================================================== */

.advanced-counter {
    text-shadow:
        0 0 20px rgba(255,255,255,.10);
}


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

@media (max-width: 991px) {

    .advanced-stats-section {
        padding: 45px 0;
    }

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

    .advanced-stat-card:nth-child(2) {
        border-right: 0;
    }

    .advanced-stat-card:nth-child(1),
    .advanced-stat-card:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .stat-number-wrap strong {
        font-size: 34px;
    }

}


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

@media (max-width: 767px) {

    .advanced-stats-section {
        padding: 35px 0;
    }

    .advanced-stats-wrap {
        grid-template-columns: 1fr;

        border-radius: 16px;
    }

    .advanced-stat-card {
        min-height: 115px;

        padding: 22px;

        border-right: 0;

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

    .advanced-stat-card:last-child {
        border-bottom: 0;
    }

    .stat-icon-box {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        font-size: 18px;
    }

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

    .stat-number-wrap span {
        font-size: 18px;
    }

}


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

@media (max-width: 480px) {

    .advanced-stat-card {
        padding: 20px;
    }

    .stat-icon-box {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        border-radius: 13px;

        font-size: 17px;
    }

    .stat-number-wrap strong {
        font-size: 29px;
    }

    .stat-content p {
        font-size: 11px;
    }

}

/* blog */
.blog-section{background:#fff}
.blog-card{border:1px solid #e7ecf3;border-radius:14px;overflow:hidden;background:#fff;transition:.4s;height:100%}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.blog-img{height:230px;overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:.7s}
.blog-card:hover .blog-img img{transform:scale(1.07)}
.blog-body{padding:25px}
.blog-body small{color:var(--blue);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:1px}
.blog-body h3{font-size:19px;line-height:1.4;margin:10px 0 20px}
.blog-body a{color:var(--navy);font-weight:700;font-size:13px}
.blog-body a i{color:var(--blue);margin-left:6px}

/* cta */
.cta-section{background:var(--navy);padding:80px 0;position:relative;overflow:hidden}
.cta-glow{position:absolute;width:600px;height:600px;border-radius:50%;right:-250px;top:-350px;background:radial-gradient(circle,rgba(30,119,255,.6),transparent 65%)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.cta-inner h2{font-size:45px;color:#fff;margin-bottom:15px}
.cta-inner p{color:#aab9ce;max-width:650px;margin:0}
.btn-white{background:#fff;color:var(--navy);white-space:nowrap}
.btn-white:hover{background:#dfeaff;color:var(--navy);transform:translateY(-3px)}

/* footer */
.footer{background:#061126;color:#93a1b5;padding:75px 0 0}
.footer-brand{color:#fff;margin-bottom:20px}
.footer-brand .brand-mark i{border-color:#fff;border-right-color:transparent}
.footer h4{color:#fff;font-size:16px;margin-bottom:22px}
.footer>div>div>div>p{max-width:350px;font-size:14px}
.footer a{display:block;font-size:14px;margin-bottom:11px;transition:.25s}
.footer a:hover{color:#fff}
.socials{display:flex;gap:9px;margin-top:22px}
.socials a{width:39px;height:39px;border-radius:50%;background:rgba(255,255,255,.07);display:grid;place-items:center;margin:0;color:#fff}
.socials a:hover{background:var(--blue)}
.footer-contact{display:flex;gap:12px;margin-bottom:15px;font-size:14px}
.footer-contact i{color:#5e9dff;margin-top:5px}
.footer-contact a{margin:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:55px;padding:20px 0;display:flex;justify-content:space-between;font-size:12px}
.footer-bottom a{display:inline;margin:0}

/* back top */
.back-top{position:fixed;right:25px;bottom:25px;width:48px;height:48px;border:0;border-radius:50%;background:var(--blue);color:#fff;z-index:500;opacity:0;visibility:hidden;transform:translateY(20px);transition:.35s;box-shadow:0 10px 25px rgba(18,96,216,.3)}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-top:hover{background:var(--blue-dark);transform:translateY(-4px)}

/* reveal */
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}

/* responsive */
@media(max-width:1200px){
    .brand{min-width:245px;padding-right:45px}
    .desktop-nav{margin-left:10px}
    .nav-link{padding-left:9px;padding-right:9px}
    .header-actions{gap:12px}
    .header-cta{padding:17px 20px}
}
@media(max-width:991px){
    .topbar{display:none}
    .header-container{height:82px}
    .brand{height:82px;min-width:215px;padding-left:20px;padding-right:35px}
    .brand:after{height:82px;width:55px}
    .desktop-nav{display:none}
    .header-actions{margin-left:auto}
    .mobile-toggle{display:block}
    .search-btn{width:48px;height:48px}
    .header-cta{display:none}
    .hero{height:auto;min-height:680px}
    .hero h1{font-size:58px}
    .hero-scroll,.slider-count{display:none}
    .feature-cell{border-right:0;border-bottom:1px solid var(--line)}
    .platform-grid{grid-template-columns:repeat(3,1fr)}
    .process-line{display:none}
    .portfolio-grid{grid-template-columns:1fr 1fr}
    .portfolio-item.large{height:310px;grid-row:auto;grid-column:span 2}
    .stats-wrap{grid-template-columns:1fr 1fr;gap:35px}
    .stats-wrap>div:nth-child(2){border:0}
    .cta-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:767px){
    .brand{min-width:auto;padding-right:30px}
    .brand-name{font-size:25px}
    .hero{min-height:650px}
    .hero h1{font-size:44px;letter-spacing:-1.5px}
    .hero-copy>p{font-size:16px}
    .hero-trust{gap:14px;flex-wrap:wrap}
    .trust-line{display:none}
    .section{padding:80px 0}
    .section-heading h2,.about-copy h2,.cta-inner h2{font-size:35px}
    .about-visual{padding-right:0}
    .about-image-main{height:420px}
    .check-grid{grid-template-columns:1fr}
    .platform-grid{grid-template-columns:repeat(2,1fr)}
    .portfolio-grid{display:block}
    .portfolio-item,.portfolio-item.large{height:300px;margin-bottom:18px}
    .stats-wrap{grid-template-columns:1fr 1fr}
    .stats-wrap>div{border-right:0}
    .footer-bottom{display:block}
    .footer-bottom>span{display:block;margin-bottom:8px}
}
@media(max-width:575px){
    .brand-mark{transform:scale(.82)}
    .brand-name{font-size:22px}
    .header-actions{gap:7px}
    .hero{min-height:620px}
    .hero h1{font-size:38px}
    .hero-buttons{flex-direction:column;align-items:flex-start}
    .hero-trust{margin-top:38px}
    .section-heading h2,.about-copy h2,.cta-inner h2{font-size:30px}
    .platform-grid{grid-template-columns:1fr 1fr}
    .stats-wrap strong{font-size:34px}
    .search-box input{font-size:22px}
    .search-close{right:20px;top:20px}
}


/* =========================================================
   WEBFINIA COMPLETE BRAND THEME
   Exact palette: Navy #001848 | Orange #F85800 | Gold #FFB800
   Applied globally to buttons, icons, gradients, links and accents.
========================================================= */
:root {
    --blue: #F85800 !important;
    --blue-dark: #001848 !important;
    --blue-light: #FFB800 !important;
    --navy: #001848 !important;
    --brand-navy: #001848;
    --brand-orange: #F85800;
    --brand-gold: #FFB800;
}
button, .btn, [class*="btn-primary"], .header-cta, .hero-btn-primary,
.cms-about-btn, .platform-bottom a, .search-box button, .feature-icon,
.cms-about-experience {
    background-image: linear-gradient(135deg, #F85800 0%, #FFB800 100%);
    border-color: #F85800;
}
button:hover, .btn:hover, [class*="btn-primary"]:hover, .header-cta:hover,
.hero-btn-primary:hover, .cms-about-btn:hover, .platform-bottom a:hover {
    background-image: linear-gradient(135deg, #001848 0%, #F85800 100%);
    border-color: #001848;
}
.feature-icon, .cms-platform-icon, .cms-about-feature-icon, .platform-icon,
[class*="-icon"], .cms-about-checks i, .cms-platform-link i {
    color: #F85800;
}
.feature-icon, .cms-about-experience, .cms-about-btn {
    color: #FFFFFF;
}
[class*="icon"]:not(.fa):not(.bi):not(.brand-mark) {
    border-color: #FFD2B8;
}
a:hover, .nav-link:hover, .section-kicker, .cms-kicker,
.cms-about-kicker, .platform-heading .section-kicker,
.cms-section-heading h2 span, .cms-about-content h2 span,
.platform-heading h2 span, .section-heading h2 span,
.about-copy h2 span, .cta-inner h2 span {
    color: #F85800;
}
.platform-card:before, .hero-progress span, .feature-cell h4:after,
.cms-kicker i, .cms-about-kicker i {
    background: linear-gradient(90deg, #F85800, #FFB800);
}