.success-overview-section {
    padding: 120px 0;
    background: #fff;
    overflow: hidden;
}
.brand-image-wrapper {
    position: relative;
}
.brand-main-image {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .15);
}
.story-label {
    color: #c40025;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 13px;
    display: block;
    margin-bottom: 15px;
}
.story-content h2 {
    font-size: 58px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
}
.story-content h2 span {
    color: #c40025;
}
.story-content p {
    color: #666;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 20px;
}
.brand-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.info-card {
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid #eee;
    transition: .4s;
}
.info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}
.info-card small {
    color: #999;
    display: block;
    margin-bottom: 10px;
}
.info-card h5 {
    margin: 0;
    font-weight: 700;
}
.floating-result {
    position: absolute;
    background: #111;
    color: #fff;
    padding: 20px 25px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    animation: floatCard 4s ease-in-out infinite;
}
.floating-result h3 {
    color: #c40025;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 5px;
}
.floating-result span {
    font-size: 14px;
}
.revenue-box {
    top: 40px;
    right: -20px;
}
.traffic-box {
    bottom: 40px;
    left: -20px;
    animation-delay: 1s;
}
@keyframes floatCard {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}
@media(max-width:991px) {
    .story-content h2 {
        font-size: 40px;
    }
    .brand-info-grid {
        grid-template-columns: 1fr;
    }
    .revenue-box,
    .traffic-box {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin-top: 20px;
    }
}
.before-growth-section {
    background: #070707;
    padding: 140px 0;
    position: relative;
    overflow: hidden;
}
.before-growth-section::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    background: #c40025;
    filter: blur(250px);
    opacity: .12;
    left: -300px;
    top: -250px;
}
.before-content {
    position: relative;
}
.section-badge {
    color: #c40025;
    font-size: 13px;
    letter-spacing: 3px;
    font-weight: 700;
    display: block;
    margin-bottom: 20px;
}
.before-content h2 {
    color: #fff;
    font-size: 58px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
}
.before-content p {
    color: #bdbdbd;
    font-size: 18px;
    line-height: 1.9;
}
.year-bg {
    position: absolute;
    left: 0;
    top: -80px;
    font-size: 220px;
    font-weight: 900;
    color: rgba(255, 255, 255, .03);
    z-index: 0;
}
.before-card {
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 45px;
    border-radius: 25px;
    transition: .4s;
    height: 100%;
}
.before-card:hover {
    transform: translateY(-10px);
    border-color: #c40025;
}
.before-card h3 {
    font-size: 50px;
    font-weight: 800;
    color: #c40025;
    margin-bottom: 10px;
}
.before-card span {
    color: #fff;
    font-size: 17px;
}
@media(max-width:991px) {
    .before-content h2 {
        font-size: 40px;
    }
    .year-bg {
        display: none;
    }
}
.growth-strategy-section {
    padding: 140px 0;
    background: #fff;
    overflow: hidden;
}
.strategy-label {
    color: #c40025;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 20px;
}
.growth-strategy-section h2 {
    font-size: 58px;
    font-weight: 800;
    margin-bottom: 25px;
}
.growth-strategy-section p {
    color: #666;
    line-height: 1.9;
    font-size: 18px;
}
.dashboard-showcase {
    position: relative;
    min-height: 650px;
}
.dashboard-img {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .12);
}
.dashboard-one {
    position: absolute;
    width: 85%;
    top: 0;
    left: 0;
}
.dashboard-two {
    position: absolute;
    width: 85%;
    bottom: 0;
    right: 0;
}
.floating-stat {
    position: absolute;
    background: #111;
    color: #fff;
    padding: 20px 30px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
    animation: floatCard 4s infinite ease-in-out;
}
.floating-stat h3 {
    color: #c40025;
    font-size: 36px;
    font-weight: 800;
}
.stat-one {
    top: 40px;
    right: 0;
}
.stat-two {
    bottom: 40px;
    left: 0;
}
.strategy-item {
    display: flex;
    gap: 25px;
    margin-bottom: 35px;
}
.strategy-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    background: #c40025;
    color: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.strategy-item h4 {
    font-weight: 700;
    margin-bottom: 10px;
}
.growth-result {
    color: #c40025;
    font-weight: 700;
    display: block;
    margin-top: 10px;
}
@media(max-width:991px) {
    .dashboard-showcase {
        min-height: auto;
    }
    .dashboard-one,
    .dashboard-two {
        position: relative;
        width: 100%;
        margin-bottom: 20px;
    }
    .stat-one,
    .stat-two {
        display: none;
    }
    .growth-strategy-section h2 {
        font-size: 38px;
    }
}
.results-dashboard-section,
.meta-results-section,
.revenue-growth-section {
    padding: 120px 0;
}
.dashboard-title {
    font-size: 60px;
    font-weight: 800;
}
.dashboard-tag {
    color: #c40025;
    letter-spacing: 3px;
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
}
.analytics-card,
.meta-dashboard,
.revenue-chart {
    position: relative;
}
.analytics-card img,
.meta-dashboard img,
.revenue-chart img {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);
}
.dashboard-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    background: #111;
    padding: 20px 25px;
    border-radius: 20px;
    color: #fff;
}
.dashboard-badge h3 {
    color: #c40025;
    font-size: 40px;
    font-weight: 800;
}
.result-stat-card {
    background: #fff;
    padding: 35px;
    margin-bottom: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
}
.result-stat-card h2 {
    font-size: 50px;
    color: #c40025;
    font-weight: 800;
}
.meta-floating-card {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: #111;
    color: #fff;
    padding: 25px 35px;
    border-radius: 20px;
}
.meta-floating-card h3 {
    color: #c40025;
    font-size: 45px;
    font-weight: 800;
}
.revenue-highlight {
    margin-top: 40px;
}
.revenue-highlight h1 {
    font-size: 120px;
    color: #c40025;
    font-weight: 900;
    line-height: 1;
}
.revenue-highlight span {
    font-size: 22px;
    font-weight: 700;
}
.marketing-hero {
    position: relative;
    overflow: hidden;
    padding: 180px 0 120px;
    background: #050505;
}
/* Animated Background */
.marketing-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(136, 0, 25, .30), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(136, 0, 25, .22), transparent 35%),
        linear-gradient(180deg, #050505, #0d0d0d);
}
.marketing-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 25s linear infinite;
}
@keyframes gridMove {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(60px);
    }
}
.page-header__inner {
    position: relative;
    z-index: 5;
    text-align: center;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    border-radius: 50px;
    backdrop-filter: blur(15px);
    margin-bottom: 30px;
}
.hero-badge i {
    color: #880019;
}
.marketing-hero h1 {
    font-size: 50px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 25px;
}
.marketing-hero h1 span {
    background: linear-gradient(90deg,
            #880019,
            #ff2d55,
            #ffffff,
            #880019);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 6s linear infinite;
}
@keyframes textGradient {
    100% {
        background-position: 300%;
    }
}
.marketing-hero p {
    color: #bfbfbf;
    font-size: 19px;
    line-height: 1.9;
    max-width: 780px;
    margin: 0 auto 45px;
}
.hero-btns {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 60px;
}
.thm-btn {
    background: #880019;
    border: none;
    padding: 17px 36px;
    border-radius: 50px;
    transition: .35s;
}
.thm-btn:hover {
    background: #a80021;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(136, 0, 25, .45);
}
.hero-outline-btn {
    padding: 17px 36px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(15px);
    transition: .35s;
}
.hero-outline-btn:hover {
    background: #fff;
    color: #111;
}
.hero-icons {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 55px;
}
.hero-icons i {
    width: 72px;
    height: 72px;
    line-height: 72px;
    text-align: center;
    font-size: 28px;
    color: #fff;
    border-radius: 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .35);
    transition: .4s;
    animation: float 5s ease-in-out infinite;
}
.hero-icons i:nth-child(even) {
    animation-delay: 1s;
}
.hero-icons i:hover {
    background: #880019;
    transform: translateY(-10px) rotate(8deg);
    box-shadow: 0 15px 40px rgba(136, 0, 25, .5);
}
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
    100% {
        transform: translateY(0);
    }
}
.marketing-hero .thm-breadcrumb li,
.marketing-hero .thm-breadcrumb li a {
    color: #d8d8d8;
}
.marketing-hero .thm-breadcrumb li span {
    color: #880019;
}
.marketing-inner {
    padding: 50px 0 0px !important;
}
.analytics-card {
    position: absolute;
    padding: 18px 26px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .25);
    animation: floatCard 8s ease-in-out infinite;
    z-index: 2;
}
.analytics-card span {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
}
.analytics-card small {
    color: #bbb;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.card1 {
    top: 24%;
    left: 7%;
}
.card2 {
    top: 22%;
    right: 10%;
    animation-delay: 1.5s;
}
.card3 {
    bottom: 18%;
    left: 15%;
    animation-delay: 3s;
}
.card4 {
    bottom: 18%;
    right: 15%;
    animation-delay: 4.5s;
}
@keyframes floatCard {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-18px);
    }
    100% {
        transform: translateY(0);
    }
}
/* Bar Chart */
.bars {
    position: absolute;
    bottom: 18%;
    right: 34%;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    height: 180px;
    opacity: .25;
}
.bars span {
    width: 18px;
    background: #880019;
    border-radius: 8px 8px 0 0;
    animation: grow 3s ease-in-out infinite;
}
.bars span:nth-child(1) {
    height: 40px;
}
.bars span:nth-child(2) {
    height: 70px;
    animation-delay: .2s;
}
.bars span:nth-child(3) {
    height: 100px;
    animation-delay: .4s;
}
.bars span:nth-child(4) {
    height: 140px;
    animation-delay: .6s;
}
.bars span:nth-child(5) {
    height: 170px;
    animation-delay: .8s;
}
@keyframes grow {
    0%,
    100% {
        transform: scaleY(.75);
    }
    50% {
        transform: scaleY(1);
    }
}
/* Floating Icons */
.bg-icon {
    position: absolute;
    font-size: 42px;
    color: #880019;
    opacity: .18;
    animation: floatIcon 10s ease-in-out infinite;
}
.icon1 {
    left: 32%;
    top: 18%;
}
.icon2 {
    right: 30%;
    top: 58%;
}
.icon3 {
    left: 58%;
    bottom: 18%;
}
.icon4 {
    right: 18%;
    top: 18%;
}
.icon5 {
    left: 70%;
    top: 38%;
}
@keyframes floatIcon {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(8deg);
    }
    100% {
        transform: translateY(0);
    }
}
/* ===========================
   Tablet
=========================== */
@media (max-width:991px) {
    .marketing-hero {
        padding: 140px 0 80px;
    }
    .marketing-hero h1 {
        font-size: 40px;
    }
    .marketing-hero p {
        font-size: 17px;
        line-height: 1.7;
        padding: 0 20px;
    }
    .hero-btns {
        flex-wrap: wrap;
    }
    .hero-icons {
        gap: 15px;
    }
    .hero-icons i {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 22px;
    }
    .analytics-card {
        transform: scale(.85);
    }
    .card1 {
        top: 15%;
        left: 2%;
    }
    .card2 {
        top: 18%;
        right: 2%;
    }
    .card3 {
        bottom: 10%;
        left: 4%;
    }
    .card4 {
        bottom: 10%;
        right: 4%;
    }
    .bars {
        right: 50%;
        transform: translateX(50%) scale(.8);
        bottom: 12%;
    }
    .bg-icon {
        font-size: 34px;
    }
}
/* ===========================
   Mobile
=========================== */
@media (max-width:767px) {
    .marketing-hero {
        padding: 120px 0 60px;
    }
    .marketing-inner {
        padding-top: 20px !important;
    }
    .hero-badge {
        font-size: 13px;
        padding: 10px 18px;
    }
    .marketing-hero h1 {
        font-size: 30px;
        line-height: 1.25;
    }
    .marketing-hero p {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 30px;
        padding: 0 10px;
    }
    .hero-btns {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-bottom: 35px;
    }
    .hero-btns a {
        width: 220px;
        text-align: center;
    }
    .hero-icons {
        gap: 12px;
        margin-bottom: 20px;
    }
    .hero-icons i {
        width: 52px;
        height: 52px;
        line-height: 52px;
        font-size: 18px;
        border-radius: 15px;
    }
    /* Background Elements */
    .analytics-card {
        transform: scale(.65);
        padding: 12px 18px;
    }
    .analytics-card span {
        font-size: 22px;
    }
    .analytics-card small {
        font-size: 10px;
    }
    /* Position */
    .card1 {
        top: 12%;
        left: -5%;
    }
    .card2 {
        top: 12%;
        right: -5%;
    }
    .card3 {
        bottom: 12%;
        left: -5%;
    }
    .card4 {
        bottom: 12%;
        right: -5%;
    }
    /* Small Bars */
    .bars {
        transform: scale(.55);
        right: 50%;
        bottom: 8%;
        opacity: .18;
    }
    /* Background Icons */
    .bg-icon {
        font-size: 24px;
        opacity: .12;
    }
    .icon1 {
        left: 15%;
        top: 18%;
    }
    .icon2 {
        right: 15%;
        top: 55%;
    }
    .icon3 {
        left: 55%;
        bottom: 12%;
    }
    .icon4 {
        right: 10%;
        top: 28%;
    }
    .icon5 {
        left: 65%;
        top: 40%;
    }
}
/* ===========================
   Small Mobile
=========================== */
@media (max-width:480px) {
    .marketing-hero {
        padding: 110px 0 50px;
    }
    .marketing-hero h1 {
        font-size: 26px;
    }
    .hero-icons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 220px;
        margin: auto;
        gap: 12px;
    }
    .analytics-card {
        display: none;
    }
    .bars {
        display: none;
    }
    .bg-icon {
        opacity: .08;
    }
}
.growth-section {
    padding: 110px 0;
    background: #fff;
}
.section-tag {
    display: inline-block;
    padding: 8px 20px;
    background: #88001910;
    color: #880019;
    border-radius: 40px;
    font-weight: 600;
    margin-bottom: 20px;
}
.growth-section h2 {
    font-size: 46px;
    font-weight: 700;
    margin-bottom: 20px;
}
.growth-section h2 span {
    color: #880019;
}
.growth-section p {
    color: #666;
    line-height: 1.9;
    margin-bottom: 35px;
}
.growth-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 40px;
}
.growth-list div {
    color: black;
    font-weight: 600;
}
.growth-list i {
    color: #880019;
    margin-right: 10px;
}
.dashboard-card {
    background: #0b0b0b;
    padding: 35px;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);
    position: relative;
    overflow: hidden;
}
.dashboard-card::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    background: #880019;
    filter: blur(120px);
    opacity: .35;
    top: -120px;
    right: -80px;
}
.top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.top h5 {
    color: #fff;
}
.status {
    width: 12px;
    height: 12px;
    background: #00ff84;
    border-radius: 50%;
    box-shadow: 0 0 15px #00ff84;
}
.traffic h3 {
    font-size: 52px;
    color: #fff;
}
.traffic small {
    color: #aaa;
}
.chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 170px;
    margin: 40px 0;
}
.chart span {
    flex: 1;
    background: #880019;
    border-radius: 10px 10px 0 0;
    animation: growBars 3s infinite ease-in-out;
}
.chart span:nth-child(1) {
    height: 40%;
}
.chart span:nth-child(2) {
    height: 55%;
}
.chart span:nth-child(3) {
    height: 70%;
}
.chart span:nth-child(4) {
    height: 85%;
}
.chart span:nth-child(5) {
    height: 95%;
}
.chart span:nth-child(6) {
    height: 100%;
}
@keyframes growBars {
    50% {
        transform: scaleY(.75);
    }
}
.stats {
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.stats strong {
    display: block;
    color: #fff;
    font-size: 24px;
}
.stats small {
    color: #aaa;
}
@media(max-width:991px) {
    .growth-section {
        text-align: center;
    }
    .growth-list {
        grid-template-columns: 1fr;
    }
    .dashboard-card {
        margin-top: 50px;
    }
}
@media(max-width:576px) {
    .growth-section {
        padding: 70px 0;
    }
    .growth-section h2 {
        font-size: 32px;
    }
    .dashboard-card {
        padding: 25px;
    }
    .stats {
        flex-direction: column;
        gap: 20px;
    }
}
.dm-overview {
    position: relative;
    background: #f1f1f1;
    overflow: hidden;
}
.dm-overview::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(136, 0, 25, .05);
    border-radius: 50%;
    top: -180px;
    right: -120px;
    filter: blur(100px);
}
.dm-overview::after {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(136, 0, 25, .05);
    border-radius: 50%;
    bottom: -120px;
    left: -120px;
    filter: blur(80px);
}
.section-badge {
    display: inline-block;
    padding: 10px 22px;
    background: #88001910;
    color: #880019;
    font-weight: 600;
    border-radius: 40px;
}
.section-title {
    font-size: 46px;
    font-weight: 700;
    color: #111;
}
.section-title span {
    color: #880019;
}
.section-text {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.9;
    color: #666;
}
.feature-box {
    background: #fff;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .06);
    transition: .4s;
    height: 100%;
    border: 1px solid #eee;
}
.feature-box:hover {
    transform: translateY(-10px);
    border-color: #880019;
    box-shadow: 0 25px 60px rgba(136, 0, 25, .15);
}
.feature-box i {
    font-size: 42px;
    color: #880019;
    margin-bottom: 20px;
}
.feature-box h5 {
    font-weight: 700;
    margin-bottom: 15px;
}
.feature-box p {
    color: #666;
    line-height: 1.8;
    margin: 0;
}
.content-card {
    background: #111;
    padding: 55px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .18);
}
.content-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 35px;
    height: 180px;
    opacity: .25;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180'%3E%3Cpath d='M0 145 L80 130 L150 135 L230 95 L300 105 L390 70 L470 80 L550 35 L600 45' fill='none' stroke='%23880019' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
    animation: graphFloat 6s ease-in-out infinite;
    pointer-events: none;
}
.content-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(136, 0, 25, .30), transparent 45%),
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size:
        100% 100%,
        35px 35px,
        35px 35px;
    animation: gridMove 18s linear infinite;
    opacity: .45;
}
@keyframes gridMove {
    0% {
        background-position:
            center,
            0 0,
            0 0;
    }
    100% {
        background-position:
            center,
            35px 35px,
            35px 35px;
    }
}
@keyframes graphFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}
.top-line {
    width: 70px;
    height: 5px;
    background: #880019;
    margin-bottom: 25px;
    border-radius: 20px;
}
.content-card h3 {
    color: #fff;
    font-size: 34px;
    margin-bottom: 20px;
}
.content-card p {
    color: #cfcfcf;
    line-height: 1.9;
}
.mini-stat {
    margin-top: 20px;
}
.mini-stat h4 {
    color: #fff;
    font-size: 34px;
    margin-bottom: 5px;
}
.mini-stat span {
    color: #bbb;
}
.content-card .thm-btn {
    margin-top: 35px;
    display: inline-block;
}
/* Mobile */
@media(max-width:991px) {
    .section-title {
        font-size: 36px;
    }
    .content-card {
        margin: 40px 0;
        padding: 40px;
    }
    .feature-box {
        text-align: center;
    }
}
@media(max-width:767px) {
    .dm-overview {
        padding: 70px 0;
    }
    .section-title {
        font-size: 30px;
    }
    .content-card {
        padding: 30px;
    }
    .content-card h3 {
        font-size: 26px;
    }
    .feature-box {
        padding: 25px;
    }
}
/*=========================================
    BUSINESS TRANSFORMATION
=========================================*/
.business-transformation {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: #050505;
    z-index: 1;
}
/* Background Glow */
.business-transformation::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite;
}
.business-transformation::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(136, 0, 25, .15);
    border-radius: 50%;
    right: -200px;
    bottom: -200px;
    filter: blur(120px);
}
/* Heading */
.bt-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: #ffffff21;
    color: #880019;
    font-weight: 700;
    border-radius: 40px;
    letter-spacing: .5px;
}
.bt-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ffffff;
}
.bt-title span {
    color: #880019;
}
.bt-desc {
    font-size: 18px;
    line-height: 1.9;
    color: #bdbdbd;
    /* max-width:780px; */
    margin: auto;
}
/* Cards */
.growth-card {
    position: relative;
    padding: 45px;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #ececec;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .07);
    transition: .45s;
    height: 100%;
}
/* Glow */
.growth-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: #880019;
    opacity: .06;
    border-radius: 50%;
    top: -120px;
    right: -120px;
    filter: blur(40px);
}
/* Top Label */
.card-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 30px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.card-label.success {
    background: #880019;
}
/* Icon */
.card-icon {
    width: 85px;
    height: 85px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid #eee;
    margin-bottom: 30px;
}
.card-icon i {
    font-size: 38px;
    color: #880019;
}
/* Title */
.growth-card h3 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #fff;
}
.growth-card p {
    font-size: 16px;
    line-height: 1.9;
    color: #bdbdbd;
    margin-bottom: 30px;
}
/* List */
.growth-list {
    margin: 0;
    padding: 0;
}
.growth-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ececec;
    border-color: rgba(255, 255, 255, .08);
    padding: 13px 0;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px dashed #ececec;
}
.growth-list li:last-child {
    border: none;
}
.before-card .growth-list i {
    color: #e63946;
    font-size: 18px;
}
.after-card .growth-list i {
    color: #27ae60;
    font-size: 18px;
}
/* Progress */
.growth-meter {
    margin-top: 35px;
}
.meter-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.meter {
    height: 10px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50px;
    overflow: hidden;
}
.meter span {
    display: block;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, #880019, #d4002a);
}
/* Center */
.transform-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}
.circle {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: #880019;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 45px rgba(136, 0, 25, .35);
    margin-bottom: 18px;
}
.circle i {
    font-size: 36px;
    color: #fff;
}
.transform-arrow span {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
}
.arrow-line {
    position: relative;
    width: 4px;
    height: 170px;
    background: #eee;
    margin-top: 20px;
    border-radius: 20px;
    overflow: hidden;
}
.arrow-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    background: #880019;
    border-radius: 20px;
}
/* Bottom Result */
.growth-result {
    margin-top: 40px;
    padding: 45px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(20px);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
}
.growth-result::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: #880019;
    opacity: .15;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    filter: blur(70px);
}
.result-item {
    position: relative;
    z-index: 2;
}
.result-item h3 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}
.result-item span {
    color: #bbb;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/*=========================================
    PREMIUM ANIMATIONS
=========================================*/
/* Floating Animation */
@keyframes floatCard {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0);
    }
}
/* Rocket */
@keyframes rocketFloat {
    0% {
        transform: translateY(0) rotate(-8deg);
    }
    50% {
        transform: translateY(-15px) rotate(8deg);
    }
    100% {
        transform: translateY(0) rotate(-8deg);
    }
}
/* Progress */
@keyframes progressMove {
    from {
        width: 0;
    }
}
/* Shine */
@keyframes shine {
    0% {
        left: -120%;
    }
    100% {
        left: 120%;
    }
}
/* Arrow */
@keyframes arrowMove {
    0% {
        top: -70px;
    }
    100% {
        top: 170px;
    }
}
/* Glow */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 rgba(136, 0, 25, .25);
    }
    50% {
        box-shadow: 0 0 35px rgba(136, 0, 25, .45);
    }
    100% {
        box-shadow: 0 0 0 rgba(136, 0, 25, .25);
    }
}
/*=========================================
    CARD EFFECTS
=========================================*/
.growth-card {
    animation: floatCard 6s ease-in-out infinite;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .45);
}
.after-card {
    animation-delay: 1.5s;
}
.growth-card:hover {
    transform: translateY(-12px);
    border-color: #880019;
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 35px 90px rgba(136, 0, 25, .25);
}
.growth-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70px;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .5),
            transparent);
    transform: skewX(-25deg);
}
.growth-card:hover::after {
    animation: shine .9s linear;
}
/*=========================================
    ICON
=========================================*/
.card-icon {
    transition: .45s;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}
.growth-card:hover .card-icon {
    background: #880019;
    transform: rotate(-8deg) scale(1.08);
}
.growth-card:hover .card-icon i {
    color: #fff;
}
/*=========================================
    LIST
=========================================*/
.growth-list li {
    transition: .35s;
}
.growth-card:hover .growth-list li {
    padding-left: 8px;
}
/*=========================================
    PROGRESS BAR
=========================================*/
.meter span {
    animation: progressMove 2.2s ease;
}
/*=========================================
    CENTER
=========================================*/
.circle {
    animation: pulseGlow 3s infinite;
}
.circle i {
    animation: rocketFloat 3s ease-in-out infinite;
}
.arrow-line::before {
    animation: arrowMove 2s linear infinite;
}
/*=========================================
    RESULT BOX
=========================================*/
.result-item {
    transition: .35s;
}
.result-item:hover {
    transform: translateY(-8px);
}
.result-item h3 {
    transition: .35s;
}
.result-item:hover h3 {
    color: #fff;
    text-shadow: 0 0 20px rgba(136, 0, 25, .7);
}
/*=========================================
    MOBILE
=========================================*/
@media(max-width:1199px) {
    .bt-title {
        font-size: 44px;
    }
    .growth-card {
        padding: 35px;
    }
}
/* Tablet */
@media(max-width:991px) {
    .business-transformation {
        padding: 90px 0;
    }
    .bt-title {
        font-size: 38px;
    }
    .bt-desc {
        font-size: 16px;
    }
    .transform-arrow {
        margin: 20px 0 40px;
    }
    .arrow-line {
        width: 150px;
        height: 4px;
        margin-top: 25px;
    }
    .arrow-line::before {
        width: 60px;
        height: 100%;
        animation: arrowHorizontal 2s linear infinite;
    }
    .result-item {
        margin-bottom: 30px;
    }
}
/* Mobile */
@media(max-width:767px) {
    .business-transformation {
        padding: 70px 0;
    }
    .bt-title {
        font-size: 30px;
        line-height: 1.3;
    }
    .bt-desc {
        font-size: 15px;
        line-height: 1.8;
    }
    .growth-card {
        padding: 28px;
        border-radius: 22px;
    }
    .card-icon {
        width: 70px;
        height: 70px;
    }
    .card-icon i {
        font-size: 30px;
    }
    .growth-card h3 {
        font-size: 24px;
    }
    .growth-list li {
        font-size: 15px;
    }
    .circle {
        width: 75px;
        height: 75px;
    }
    .circle i {
        font-size: 28px;
    }
    .arrow-line {
        width: 110px;
    }
    .growth-result {
        padding: 30px;
    }
    .result-item h3 {
        font-size: 28px;
    }
    .result-item span {
        font-size: 13px;
    }
}
/* Small Mobile */
@media(max-width:480px) {
    .bt-tag {
        font-size: 12px;
        padding: 8px 18px;
    }
    .bt-title {
        font-size: 26px;
    }
    .growth-card {
        padding: 22px;
    }
}
/* Horizontal Arrow */
@keyframes arrowHorizontal {
    0% {
        left: -60px;
    }
    100% {
        left: 150px;
    }
}
/*==============================================
    PRICING SECTION
==============================================*/
.pricing-section {
    position: relative;
    padding: 120px 0;
    background: #ebebeb;
    overflow: hidden;
}
.pricing-section::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(136, 0, 25, .06);
    border-radius: 50%;
    left: -180px;
    top: -180px;
    filter: blur(100px);
}
.pricing-section::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(136, 0, 25, .05);
    border-radius: 50%;
    right: -150px;
    bottom: -150px;
    filter: blur(90px);
}
.pricing-section .container {
    position: relative;
    z-index: 2;
}
/* Heading */
.pricing-tag {
    display: inline-block;
    padding: 10px 22px;
    background: #88001910;
    color: #880019;
    border-radius: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.pricing-title {
    font-size: 48px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
}
.pricing-subtitle {
    color: #666;
    font-size: 18px;
    max-width: 700px;
    margin: auto;
}
/*==============================================
CARD
==============================================*/
.service-price-card {
    background: #fff;
    border-radius: 25px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
    transition: .4s;
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid #eee;
}
.service-price-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: #880019;
    opacity: .05;
    border-radius: 50%;
    right: -120px;
    top: -120px;
    transition: .5s;
}
.service-price-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 70px rgba(136, 0, 25, .18);
    border-color: #880019;
}
.service-price-card:hover::before {
    transform: scale(1.4);
}
/*==============================================
ICON
==============================================*/
.service-icon {
    width: 75px;
    height: 75px;
    border-radius: 20px;
    background: #880019;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 25px;
    transition: .4s;
}
.service-price-card:hover .service-icon {
    transform: rotate(-10deg) scale(1.08);
}
/*==============================================
TITLE
==============================================*/
.service-price-card h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 30px;
}
/*==============================================
PACKAGES
==============================================*/
.package-list {
    margin-bottom: 30px;
}
.package-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    border: 1px solid #eee;
    border-radius: 14px;
    margin-bottom: 15px;
    transition: .35s;
    background: #fff;
}
.package-item span {
    color: #666;
    font-weight: 600;
}
.package-item strong {
    font-size: 22px;
    color: #111;
}
.package-item:hover {
    border-color: #880019;
    background: #fff8f9;
    transform: translateX(6px);
}
.package-item.premium {
    background: #880019;
    border-color: #880019;
}
.package-item.premium span,
.package-item.premium strong {
    color: #fff;
}
/*==============================================
BUTTON
==============================================*/
.price-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 55px;
    background: #111;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    transition: .4s;
    font-weight: 600;
}
.price-btn i {
    transition: .4s;
}
.price-btn:hover {
    background: #880019;
    color: #fff;
}
.price-btn:hover i {
    transform: translateX(6px);
}
/*==============================================
CUSTOM CARD
==============================================*/
.custom-plan {
    height: 100%;
    border-radius: 25px;
    padding: 45px;
    background: #111;
    color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.custom-plan::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    background: #880019;
    opacity: .25;
    right: -120px;
    top: -120px;
    border-radius: 50%;
    filter: blur(70px);
}
.custom-plan h3 {
    font-size: 34px;
    margin-bottom: 20px;
    color: #fff;
}
.custom-plan p {
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 35px;
}
.custom-plan .thm-btn {
    width: max-content;
}
/*==============================================
ANIMATION
==============================================*/
.service-price-card {
    animation: floatCard 6s ease-in-out infinite;
}
.service-price-card:nth-child(even) {
    animation-delay: 1.5s;
}
@keyframes floatCard {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}
/*==============================================
RESPONSIVE
==============================================*/
@media(max-width:991px) {
    .pricing-section {
        padding: 90px 0;
    }
    .pricing-title {
        font-size: 38px;
    }
    .service-price-card {
        padding: 30px;
    }
    .custom-plan {
        padding: 35px;
        margin-top: 10px;
    }
}
@media(max-width:767px) {
    .pricing-section {
        padding: 70px 0;
    }
    .pricing-title {
        font-size: 30px;
    }
    .pricing-subtitle {
        font-size: 16px;
    }
    .service-price-card {
        padding: 25px;
    }
    .service-icon {
        width: 65px;
        height: 65px;
        font-size: 26px;
    }
    .service-price-card h3 {
        font-size: 22px;
    }
    .package-item strong {
        font-size: 18px;
    }
    .custom-plan h3 {
        font-size: 26px;
    }
    .custom-plan {
        text-align: center;
        align-items: center;
    }
}
/*=============================
 DIGITAL PARTS SECTION
=============================*/
.digital-parts {
    background: #fff;
    position: relative;
    overflow: hidden;
}
.digital-parts::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: #88001912;
    border-radius: 50%;
    top: -200px;
    right: -150px;
    filter: blur(100px);
}
.parts-tag {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 50px;
    background: #88001910;
    color: #880019;
    font-weight: 700;
    letter-spacing: 1px;
}
.parts-title {
    font-size: 48px;
    font-weight: 800;
    color: #111;
    margin-top: 20px;
}
.parts-title span {
    color: #880019;
}
.parts-desc {
    max-width: 650px;
    margin: auto;
    color: #666;
    font-size: 17px;
    line-height: 1.8;
}
/* GRID */
.parts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 70px;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
}
.part-box {
    position: relative;
    padding: 45px 35px;
    border-right: 1px solid #afafaf;
    border-bottom: 1px solid #afafaf;
    text-align: center;
    background: #fff;
    transition: .45s;
    overflow: hidden;
}
/* hover glow */
.part-box::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background: #880019;
    border-radius: 50%;
    top: -60px;
    right: -60px;
    opacity: 0;
    transition: .4s;
    filter: blur(25px);
}
.part-box:hover::before {
    opacity: .25;
}
.part-box:hover {
    transform: translateY(-8px);
}
.part-box h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 25px 0 15px;
    color: #111;
}
.part-box p {
    font-size: 15px;
    line-height: 1.9;
    color: #666;
    margin: 0;
}
/* ICON */
.part-icon {
    width: 75px;
    height: 75px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow:
        0 10px 35px rgba(0, 0, 0, .12);
    color: #880019;
    font-size: 28px;
    transition: .4s;
}
.part-box:hover .part-icon {
    background: #880019;
    color: #fff;
    transform: rotateY(360deg);
}
/* FEATURE */
.featured {
    background: #111;
}
.featured h4 {
    color: #fff;
}
.featured p {
    color: #bbb;
}
.featured .part-icon {
    background: #880019;
    color: #fff;
}
/*=====================
 RESPONSIVE
=====================*/
@media(max-width:991px) {
    .parts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .parts-title {
        font-size: 38px;
    }
}
@media(max-width:767px) {
    .parts-grid {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }
    .digital-parts {
        padding: 70px 0;
    }
    .parts-title {
        font-size: 30px;
    }
    .part-box {
        padding: 35px 25px;
    }
}
.digital-importance-section {
    background: #000;
    padding: 100px 0;
    overflow: hidden;
}
.digital-content .section-tag {
    color: #880019;
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 700;
}
.digital-content h2 span {
    color: #880019;
}
.digital-content p {
    color: #ccc;
    font-size: 17px;
    line-height: 1.8;
}
.growth-box {
    margin: 35px 0;
    padding-left: 25px;
    border-left: 3px solid #880019;
}
.growth-box h3 {
    font-size: 60px;
    color: #880019;
    margin: 0;
    font-weight: 800;
}
.growth-box p {
    color: #fff;
    margin: 0;
}
.digital-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #880019;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: .3s;
}
.digital-btn:hover {
    background: #fff;
    color: #880019;
}
.digital-timeline {
    position: relative;
    padding-left: 40px;
}
.digital-timeline:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: #880019;
}
.timeline-item {
    position: relative;
    display: flex;
    gap: 30px;
    padding: 0 0 45px 0;
}
.timeline-number {
    position: absolute;
    left: -65px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #880019;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.timeline-item h4 {
    color: #fff;
    font-size: 26px;
    margin-bottom: 10px;
}
.timeline-item p {
    color: #aaa;
    max-width: 500px;
    line-height: 1.7;
}
.timeline-item:hover h4 {
    color: #880019;
    transition: .3s;
}
/* Mobile */
@media(max-width:991px) {
    .digital-importance-section {
        padding: 70px 0;
    }
    .digital-content h2 {
        font-size: 36px;
    }
    .digital-timeline {
        margin-top: 50px;
    }
}
@media(max-width:576px) {
    .digital-timeline {
        /* padding-left: 30px; */
    }
    .timeline-number {
        left: -55px;
        width: 40px;
        height: 40px;
        font-size: 13px;
    }
    .timeline-item {
        gap: 15px;
    }
    .timeline-item h4 {
        font-size: 20px;
    }
    .growth-box h3 {
        font-size: 45px;
    }
}
/* Seo Page */
/*=========================================================
            SEO HERO SECTION
=========================================================*/
.seo-hero {
    position: relative;
    overflow: hidden;
    background: #050505;
    padding: 200px 0 120px;
}
/*=============================
        BACKGROUND
=============================*/
.seo-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 20%, rgba(136, 0, 25, .30), transparent 35%),
        radial-gradient(circle at 90% 15%, rgba(136, 0, 25, .18), transparent 30%),
        radial-gradient(circle at 80% 85%, rgba(255, 45, 85, .10), transparent 35%),
        linear-gradient(180deg, #050505, #0b0b0d 70%, #101114);
}
/* Moving Grid */
.grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 25s linear infinite;
}
@keyframes gridMove {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(60px);
    }
}
/*=============================
        GLOW EFFECTS
=============================*/
.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}
.glow-one {
    width: 420px;
    height: 420px;
    background: #880019;
    opacity: .20;
    left: -120px;
    top: -120px;
}
.glow-two {
    width: 350px;
    height: 350px;
    background: #ff2d55;
    opacity: .12;
    right: -100px;
    bottom: -80px;
}
/*=============================
      CONTENT
=============================*/
.seo-content {
    position: relative;
    z-index: 20;
}
/*=============================
      BADGE
=============================*/
.seo-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: 60px;
    backdrop-filter: blur(18px);
    margin-bottom: 28px;
    font-size: 15px;
    font-weight: 500;
}
.seo-badge i {
    color: #880019;
    font-size: 16px;
}
/*=============================
      HEADING
=============================*/
.seo-content h1 {
    color: #fff;
    font-size: 50px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 25px;
}
.seo-content h1 span {
    background: linear-gradient(90deg,
            #880019,
            #ff2d55,
            #ffffff,
            #880019);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 6s linear infinite;
}
@keyframes textGradient {
    100% {
        background-position: 300%;
    }
}
/*=============================
      PARAGRAPH
=============================*/
.seo-content p {
    color: #c9c9c9;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 35px;
    max-width: 560px;
}
/*=============================
      FEATURES
=============================*/
.seo-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 45px;
}
.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 15px 18px;
    border-radius: 14px;
    transition: .35s;
}
.feature i {
    color: #880019;
    font-size: 18px;
}
.feature:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(136, 0, 25, .35);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .35);
}
/*=============================
      BUTTONS
=============================*/
.hero-buttons {
    display: flex;
    gap: 18px;
    margin-top: 10px;
}
.hero-buttons .thm-btn {
    padding: 18px 34px;
    border-radius: 50px;
    background: #880019;
    color: #fff;
    font-weight: 600;
    transition: .35s;
}
.hero-buttons .thm-btn:hover {
    background: #a70020;
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(136, 0, 25, .40);
}
.outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 34px;
    border-radius: 50px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px);
    transition: .35s;
}
.outline-btn:hover {
    background: #fff;
    color: #111;
}
/*=============================
      FLOATING ICONS
=============================*/
.bg-icon {
    position: absolute;
    color: #880019;
    opacity: .15;
    font-size: 42px;
    animation: floatIcon 8s ease-in-out infinite;
}
.icon-1 {
    left: 8%;
    top: 25%;
}
.icon-2 {
    right: 14%;
    top: 16%;
}
.icon-3 {
    left: 42%;
    bottom: 14%;
}
.icon-4 {
    right: 28%;
    bottom: 18%;
}
.icon-5 {
    left: 60%;
    top: 20%;
}
@keyframes floatIcon {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-18px) rotate(8deg);
    }
    100% {
        transform: translateY(0);
    }
}
/*=============================
      DASHBOARD WRAPPER
=============================*/
.seo-dashboard {
    position: relative;
    min-height: 650px;
    z-index: 5;
}
/*=========================================================
                DASHBOARD BOX
=========================================================*/
.dashboard-box {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 430px;
    padding: 35px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(24px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    z-index: 5;
    animation: dashboardFloat 8s ease-in-out infinite;
}
@keyframes dashboardFloat {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-15px);
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}
/*=========================================================
                HEADER
=========================================================*/
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}
.dashboard-header span {
    color: #bbbbbb;
    font-size: 15px;
}
.dashboard-header strong {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}
/*=========================================================
                GRAPH AREA
=========================================================*/
.chart-area {
    position: relative;
    height: 220px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 35px;
}
/*=========================================================
                GRAPH BARS
=========================================================*/
.graph {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 180px;
}
.graph span {
    width: 42px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg,
            #ff2d55,
            #880019);
    box-shadow: 0 10px 30px rgba(136, 0, 25, .35);
    animation: barGrow 3.5s ease-in-out infinite;
}
.graph span:nth-child(1) {
    height: 55px;
}
.graph span:nth-child(2) {
    height: 85px;
    animation-delay: .2s;
}
.graph span:nth-child(3) {
    height: 115px;
    animation-delay: .4s;
}
.graph span:nth-child(4) {
    height: 150px;
    animation-delay: .6s;
}
.graph span:nth-child(5) {
    height: 125px;
    animation-delay: .8s;
}
.graph span:nth-child(6) {
    height: 175px;
    animation-delay: 1s;
}
@keyframes barGrow {
    0%,
    100% {
        transform: scaleY(.72);
    }
    50% {
        transform: scaleY(1);
    }
}
/*=========================================================
                GRAPH LINE
=========================================================*/
.graph-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 35px;
    height: 3px;
    background: linear-gradient(90deg,
            transparent,
            #ff2d55,
            #ffffff,
            #ff2d55,
            transparent);
    border-radius: 10px;
    animation: lineMove 3.5s linear infinite;
}
@keyframes lineMove {
    0% {
        transform: translateX(-40px);
        opacity: .3;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(40px);
        opacity: .3;
    }
}
/*=========================================================
                FOOTER STATS
=========================================================*/
.dashboard-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.dashboard-footer h4 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}
.dashboard-footer small {
    color: #bfbfbf;
    letter-spacing: .8px;
}
/*=========================================================
                FLOATING KPI CARDS
=========================================================*/
.floating-card {
    position: absolute;
    width: 180px;
    padding: 22px;
    text-align: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
    transition: .35s;
    animation: cardFloat 7s ease-in-out infinite;
}
.floating-card:hover {
    transform: translateY(-10px);
    border-color: rgba(136, 0, 25, .45);
    box-shadow: 0 25px 55px rgba(136, 0, 25, .25);
}
.floating-card i {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: #880019;
    color: #fff;
    font-size: 24px;
    margin-bottom: 15px;
}
.floating-card h5 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 6px;
    font-weight: 700;
}
.floating-card small {
    color: #bbbbbb;
}
/*=========================================================
                CARD POSITIONS
=========================================================*/
.card-one {
    top: 0;
    left: -20px;
}
.card-two {
    top: 70px;
    right: -35px;
    animation-delay: 1s;
}
.card-three {
    bottom: 60px;
    left: -10px;
    animation-delay: 2s;
}
.card-four {
    bottom: 10px;
    right: -25px;
    animation-delay: 3s;
}
@keyframes cardFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0);
    }
}
/*=========================================================
                SEO SCORE
=========================================================*/
.seo-score {
    position: absolute;
    left: 50%;
    bottom: -25px;
    transform: translateX(-50%);
    text-align: center;
    z-index: 20;
}
.circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: conic-gradient(#880019 0deg,
            #ff2d55 290deg,
            rgba(255, 255, 255, .08) 290deg);
    animation: circleRotate 5s linear infinite;
}
.circle::before {
    content: "";
    position: absolute;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #0b0b0d;
    border: 1px solid rgba(255, 255, 255, .08);
}
.circle span {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}
.seo-score p {
    margin-top: 15px;
    color: #cfcfcf;
    font-size: 16px;
    letter-spacing: 1px;
}
@keyframes circleRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.circle span {
    animation: counterFix 5s linear infinite;
}
@keyframes counterFix {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
/*=========================================================
                TABLET
=========================================================*/
@media (max-width:1199px) {
    .dashboard-box {
        width: 380px;
        padding: 28px;
    }
    .graph span {
        width: 34px;
    }
    .floating-card {
        width: 155px;
        padding: 18px;
    }
    .floating-card h5 {
        font-size: 24px;
    }
    .circle {
        width: 120px;
        height: 120px;
    }
    .circle::before {
        width: 92px;
        height: 92px;
    }
}
/*=========================================================
                TABLET
=========================================================*/
@media (max-width:991px) {
    .seo-hero {
        padding: 140px 0 80px;
    }
    .seo-content {
        text-align: center;
        margin-bottom: 80px;
    }
    .seo-content p {
        margin: 0 auto 35px;
    }
    .seo-content h1 {
        font-size: 46px;
    }
    .seo-features {
        max-width: 650px;
        margin: 0 auto 40px;
    }
    .hero-buttons {
        justify-content: center;
    }
    .seo-dashboard {
        min-height: 700px;
    }
    /* Dashboard Center */
    .dashboard-box {
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    /* Floating Cards */
    .card-one {
        top: -20px;
        left: 20px;
    }
    .card-two {
        top: 30px;
        right: 20px;
    }
    .card-three {
        bottom: 120px;
        left: 25px;
    }
    .card-four {
        bottom: 70px;
        right: 20px;
    }
    .bg-icon {
        font-size: 34px;
        opacity: .12;
    }
}
/*=========================================================
                MOBILE
=========================================================*/
@media (max-width:767px) {
    .seo-hero {
        padding: 120px 0 70px;
    }
    /* Heading */
    .seo-content h1 {
        font-size: 34px;
        line-height: 1.25;
    }
    .seo-content p {
        font-size: 15px;
        line-height: 1.8;
    }
    /* Badge */
    .seo-badge {
        font-size: 13px;
        padding: 10px 18px;
    }
    /* Features */
    .seo-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    /* Buttons */
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    .hero-buttons a {
        width: 240px;
        text-align: center;
    }
    /* Dashboard */
    .seo-dashboard {
        min-height: 760px;
    }
    .dashboard-box {
        width: 100%;
        max-width: 340px;
        padding: 22px;
    }
    /* Header */
    .dashboard-header strong {
        font-size: 22px;
    }
    /* Graph */
    .chart-area {
        height: 170px;
    }
    .graph {
        height: 130px;
    }
    .graph span {
        width: 24px;
    }
    /* Footer */
    .dashboard-footer h4 {
        font-size: 22px;
    }
    /* Floating Cards */
    .floating-card {
        width: 135px;
        padding: 14px;
    }
    .floating-card h5 {
        font-size: 20px;
    }
    .floating-card small {
        font-size: 11px;
    }
    .floating-card i {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
    }
    .card-one {
        left: 0;
    }
    .card-two {
        right: 0;
    }
    .card-three {
        left: 0;
        bottom: 120px;
    }
    .card-four {
        right: 0;
        bottom: 80px;
    }
    /* Score */
    .circle {
        width: 100px;
        height: 100px;
    }
    .circle::before {
        width: 78px;
        height: 78px;
    }
    .circle span {
        font-size: 24px;
    }
    /* Icons */
    .bg-icon {
        font-size: 24px;
        opacity: .08;
    }
}
/*=========================================================
            SMALL MOBILE
=========================================================*/
@media (max-width:575px) {
    .seo-content h1 {
        font-size: 30px;
    }
    .dashboard-box {
        max-width: 300px;
    }
    .graph span {
        width: 18px;
    }
    /* Hide floating cards */
    .floating-card {
        transform: scale(.85);
    }
    .card-one {
        top: -10px;
        left: -5px;
    }
    .card-two {
        right: -5px;
    }
    .card-three {
        left: -5px;
    }
    .card-four {
        right: -5px;
    }
}
/*=========================================================
            EXTRA SMALL
=========================================================*/
@media (max-width:480px) {
    .seo-hero {
        padding: 155px 0 60px;
    }
    .seo-content h1 {
        font-size: 27px;
    }
    .seo-content p {
        font-size: 14px;
    }
    /* Hide Cards */
    .floating-card {
        display: none;
    }
    /* Dashboard */
    .dashboard-box {
        max-width: 100%;
        padding: 20px;
    }
    .chart-area {
        height: 150px;
    }
    .graph {
        height: 115px;
    }
    .graph span {
        width: 16px;
    }
    .dashboard-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    /* Score */
    .seo-score {
        position: relative;
        margin-top: 35px;
        bottom: auto;
        left: auto;
        transform: none;
    }
    .circle {
        margin: auto;
    }
    /* Icons */
    .icon-2,
    .icon-4 {
        display: none;
    }
}
/*=========================================================
            LARGE DESKTOP
=========================================================*/
@media (min-width:1400px) {
    .dashboard-box {
        width: 370px;
    }
    .graph span {
        width: 45px;
    }
    .floating-card {
        width: 190px;
    }
}
/*=========================================
        SEO TECHNIQUES
=========================================*/
.seo-techniques {
    position: relative;
    padding: 110px 0;
    background: #f8f9fc;
    overflow: hidden;
}
/*------------------------
    Heading
-------------------------*/
.sec-title {
    margin-bottom: 80px;
}
.seo-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #880019;
    padding: 12px 24px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    margin-bottom: 20px;
}
.seo-tag i {
    color: #880019;
}
.sec-title h2 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: #111;
    margin-bottom: 20px;
}
.sec-title h2 span {
    color: #880019;
}
.sec-title p {
    max-width: 760px;
    margin: auto;
    color: #666;
    font-size: 17px;
    line-height: 1.9;
}
/*------------------------
      Wrapper
-------------------------*/
.seo-tech-wrapper {
    position: relative;
    min-height: 760px;
}
/*------------------------
      Center
-------------------------*/
.seo-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 20;
}
.center-ring {
    width: 170px;
    height: 170px;
    border: 2px dashed rgba(136, 0, 25, .25);
    border-radius: 50%;
    animation: rotateRing 18s linear infinite;
}
.center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: linear-gradient(135deg, #880019, #d90f39);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    box-shadow: 0 20px 45px rgba(136, 0, 25, .35);
}
.center-icon i {
    animation: floatIcon 3s ease-in-out infinite;
}
.seo-center h4 {
    margin-top: 22px;
    font-size: 24px;
    font-weight: 700;
    color: #111;
}
@keyframes rotateRing {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes floatIcon {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
/*------------------------
      Cards
-------------------------*/
.seo-card {
    position: absolute;
    width: 340px;
    background: #fff;
    padding: 38px;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
    transition: .45s;
    overflow: hidden;
}
.seo-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #880019, #ff2d55);
    transform: scaleX(0);
    transition: .4s;
    transform-origin: left;
}
.seo-card:hover::before {
    transform: scaleX(1);
}
.seo-card:hover {
    transform: translateY(-14px);
    box-shadow: 0 30px 70px rgba(136, 0, 25, .16);
}
.icon-box {
    width: 82px;
    height: 82px;
    border-radius: 22px;
    background: linear-gradient(135deg, #880019, #ff2d55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    margin-bottom: 24px;
    transition: .45s;
}
.seo-card:hover .icon-box {
    transform: rotate(-8deg) scale(1.08);
}
.card-number {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 55px;
    font-weight: 800;
    color: rgba(136, 0, 25, .08);
    line-height: 1;
}
.seo-card h3 {
    font-size: 28px;
    margin-bottom: 16px;
    color: #111;
}
.seo-card p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 22px;
}
.seo-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.seo-card ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    color: #333;
}
.seo-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #880019;
}
/*------------------------
      Position
-------------------------*/
.left-card {
    left: 0;
    top: 70px;
}
.right-card {
    right: 0;
    top: 70px;
}
.bottom-card {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.bottom-card:hover {
    transform: translateX(-50%) translateY(-14px);
}
/*------------------------
   Floating Icons
-------------------------*/
.float-icon {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #880019;
    font-size: 28px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    animation: floating 5s ease-in-out infinite;
}
.icon-one {
    left: 14%;
    bottom: 80px;
}
.icon-two {
    right: 14%;
    bottom: 70px;
    animation-delay: 1s;
}
.icon-three {
    left: 22%;
    top: -10px;
    animation-delay: 2s;
}
.icon-four {
    right: 22%;
    top: 0;
    animation-delay: 3s;
}
@keyframes floating {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
/*=========================================
        SEO TECHNIQUES
=========================================*/
.seo-techniques-section {
    position: relative;
    padding: 110px 0;
    background: #f8f9fc;
    overflow: hidden;
}
/* Background Glow */
.seo-techniques-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: rgba(136, 0, 25, .05);
    border-radius: 50%;
    top: -180px;
    left: -180px;
    filter: blur(80px);
}
.seo-techniques-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(136, 0, 25, .05);
    border-radius: 50%;
    bottom: -150px;
    right: -120px;
    filter: blur(80px);
}
/*=========================================
            Heading
=========================================*/
.seo-heading {
    margin-bottom: 70px;
}
.seo-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #fff;
    border-radius: 50px;
    color: #880019;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    margin-bottom: 22px;
}
.seo-subtitle i {
    font-size: 15px;
}
.seo-heading h2 span {
    color: #880019;
}
.seo-heading p {
    max-width: 760px;
    margin: auto;
    color: #666;
    font-size: 17px;
    line-height: 1.9;
}
/*=========================================
              Cards
=========================================*/
.seo-tech-card {
    position: relative;
    background: #fff;
    padding: 42px 35px;
    border-radius: 24px;
    height: 100%;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .07);
    /* transition:.45s; */
    overflow: hidden;
}
/* Top Gradient Line */
.seo-tech-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #880019, #ff2d55);
    /* transition:.6s; */
}
.seo-tech-card:hover::before,
.active-card::before {
    left: 0;
}
/* Soft Glow */
.seo-tech-card::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(136, 0, 25, .05);
    top: -80px;
    right: -80px;
    /* transition:.5s; */
}
.seo-tech-card:hover::after {
    /* transform:scale(1.4); */
}
/* Hover */
.seo-tech-card:hover {
    /* transform:translateY(-14px); */
    border-color: #880019;
    box-shadow: 0 30px 60px rgba(136, 0, 25, .15);
}
/*=========================================
          Card Number
=========================================*/
.card-count {
    position: absolute;
    top: 25px;
    right: 28px;
    font-size: 58px;
    font-weight: 800;
    color: rgba(136, 0, 25, .08);
    line-height: 1;
}
/*=========================================
            Icon
=========================================*/
.seo-icon {
    width: 90px;
    height: 90px;
    border-radius: 22px;
    background: linear-gradient(135deg, #880019, #c4002d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    margin-bottom: 28px;
    position: relative;
    z-index: 2;
    transition: .45s;
    animation: floatIcon 4s ease-in-out infinite;
}
.active-card .seo-icon {
    background: linear-gradient(135deg, #c4002d, #ff4069);
}
.seo-tech-card:hover .seo-icon {
    transform: rotate(-10deg) scale(1.08);
    box-shadow: 0 20px 40px rgba(136, 0, 25, .30);
}
/* Floating Animation */
@keyframes floatIcon {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}
/*=========================================
          Typography
=========================================*/
.seo-tech-card h3 {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    margin-bottom: 18px;
}
.seo-tech-card p {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 24px;
}
/*=========================================
   LIST STYLE
=========================================*/
.seo-tech-card ul {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}
.seo-tech-card ul li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: #444;
    font-size: 15px;
    font-weight: 500;
    transition: .35s;
}
.seo-tech-card ul li:last-child {
    margin-bottom: 0;
}
.seo-tech-card ul li i {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(136, 0, 25, .08);
    color: #880019;
    font-size: 13px;
    transition: .35s;
}
.seo-tech-card:hover ul li {
    transform: translateX(6px);
}
.seo-tech-card:hover ul li i {
    background: #880019;
    color: #fff;
    transform: rotate(360deg);
}
/*=========================================
            BUTTON
=========================================*/
.seo-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-radius: 50px;
    background: #f5f5f5;
    color: #111;
    font-weight: 600;
    text-decoration: none;
    transition: .4s;
    position: relative;
    overflow: hidden;
}
.seo-btn::before {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            #880019,
            #c4002d);
    transition: .45s;
    z-index: 0;
}
.seo-btn span,
.seo-btn i {
    position: relative;
    z-index: 2;
}
.seo-btn i {
    transition: .35s;
}
.seo-tech-card:hover .seo-btn {
    color: #fff;
}
.seo-tech-card:hover .seo-btn::before {
    left: 0;
}
.seo-tech-card:hover .seo-btn i {
    transform: translateX(6px);
}
/*=========================================
        CARD SHINE
=========================================*/
.seo-tech-card .shine {
    position: absolute;
    top: -120%;
    left: -80%;
    width: 90px;
    height: 220%;
    background: rgba(255, 255, 255, .45);
    transform: rotate(25deg);
    pointer-events: none;
}
.seo-tech-card:hover .shine {
    animation: shineMove 1s ease;
}
@keyframes shineMove {
    0% {
        left: -80%;
    }
    100% {
        left: 150%;
    }
}
/*=========================================
        ACTIVE CARD
=========================================*/
.active-card {
    border-color: #880019;
    transform: translateY(-15px);
    box-shadow: 0 25px 55px rgba(136, 0, 25, .16);
}
.active-card .seo-btn {
    background: #880019;
    color: #fff;
}
.active-card .seo-btn::before {
    display: none;
}
.active-card .seo-icon {
    box-shadow: 0 18px 40px rgba(136, 0, 25, .30);
}
/*=========================================
        HOVER GLOW
=========================================*/
.seo-tech-card:hover {
    box-shadow:
        0 25px 60px rgba(136, 0, 25, .16),
        0 0 0 1px rgba(136, 0, 25, .08);
}
/*=========================================
      ICON PULSE
=========================================*/
.seo-icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 24px;
    border: 2px solid rgba(136, 0, 25, .12);
    animation: iconPulse 2.8s infinite;
}
@keyframes iconPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}
/*=========================================
      CARD BORDER ANIMATION
=========================================*/
/*=========================================
        STAGGER ANIMATION
=========================================*/
.seo-tech-card {
    animation: cardUp .8s ease both;
}
.col-lg-4:nth-child(2) .seo-tech-card {
    animation-delay: .15s;
}
.col-lg-4:nth-child(3) .seo-tech-card {
    animation-delay: .3s;
}
@keyframes cardUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
}
/*=========================================
        RESPONSIVE CSS
=========================================*/
/*=============================
        Large Laptop
==============================*/
@media (max-width:1199px) {
    .seo-heading h2 {
        font-size: 42px;
    }
    .seo-tech-card {
        padding: 35px 28px;
    }
    .seo-icon {
        width: 80px;
        height: 80px;
        font-size: 30px;
    }
    .card-count {
        font-size: 48px;
    }
}
/*=============================
            Tablet
==============================*/
@media (max-width:991px) {
    .seo-techniques-section {
        padding: 90px 0;
    }
    .seo-heading {
        margin-bottom: 55px;
    }
    .seo-heading h2 {
        font-size: 36px;
    }
    .seo-heading p {
        font-size: 16px;
    }
    .seo-tech-card {
        padding: 32px 28px;
    }
    .seo-tech-card h3 {
        font-size: 24px;
    }
    .active-card {
        transform: none;
    }
    .seo-tech-card:hover {
        transform: translateY(-10px);
    }
}
/*=============================
            Mobile
==============================*/
@media (max-width:767px) {
    .seo-techniques-section {
        padding: 70px 0;
    }
    .seo-subtitle {
        font-size: 13px;
        padding: 10px 18px;
    }
    .seo-heading {
        margin-bottom: 40px;
    }
    .seo-heading h2 {
        font-size: 30px;
        line-height: 1.35;
    }
    .seo-heading p {
        font-size: 15px;
        line-height: 1.8;
    }
    .seo-tech-card {
        padding: 28px 24px;
        border-radius: 20px;
    }
    .seo-icon {
        width: 72px;
        height: 72px;
        font-size: 28px;
        border-radius: 18px;
        margin-bottom: 22px;
    }
    .card-count {
        font-size: 40px;
        right: 20px;
        top: 20px;
    }
    .seo-tech-card h3 {
        font-size: 23px;
    }
    .seo-tech-card p {
        font-size: 15px;
    }
    .seo-tech-card ul li {
        font-size: 14px;
    }
    .seo-btn {
        padding: 12px 22px;
        font-size: 14px;
    }
}
/*=============================
        Small Mobile
==============================*/
@media (max-width:575px) {
    .seo-techniques-section {
        padding: 60px 0;
    }
    .seo-heading h2 {
        font-size: 26px;
    }
    .seo-heading p {
        font-size: 14px;
    }
    .seo-tech-card {
        padding: 24px 20px;
    }
    .seo-icon {
        width: 65px;
        height: 65px;
        font-size: 24px;
    }
    .card-count {
        font-size: 34px;
    }
    .seo-tech-card h3 {
        font-size: 21px;
    }
    .seo-tech-card ul li {
        font-size: 13px;
        gap: 10px;
    }
    .seo-tech-card ul li i {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 11px;
    }
    .seo-btn {
        width: 100%;
        justify-content: center;
    }
}
/*=============================
        Animation Control
==============================*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =====================================
   WALL SEO TRUST SECTION DARK CSS
===================================== */
.wc-seo-trust-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: #050505;
    color: #fff;
    isolation: isolate;
}
/* GRID BACKGROUND */
.wc-seo-grid-bg {
    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: 50px 50px;
    opacity: .35;
    animation:
        wcGridMove 20s linear infinite;
    z-index: -3;
}
@keyframes wcGridMove {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(50px);
    }
}
/* GLOW EFFECT */
.wc-seo-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -2;
    opacity: .45;
}
.wc-seo-glow-one {
    width: 420px;
    height: 420px;
    background: #880019;
    top: -150px;
    right: -120px;
}
.wc-seo-glow-two {
    width: 350px;
    height: 350px;
    background: #880019;
    bottom: -150px;
    left: -120px;
}
/* TAG */
.wc-seo-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 50px;
    background: rgba(136, 0, 25, .15);
    border: 1px solid rgba(136, 0, 25, .6);
    color: #fff;
    font-weight: 600;
    backdrop-filter: blur(10px);
}
.wc-seo-tag i {
    color: #880019;
    font-size: 20px;
}
/* HEADING */
.wc-seo-heading {
    margin-top: 25px;
    font-size: 50px;
    line-height: 1.1;
    font-weight: 700;
    color: white;
    letter-spacing: -1px;
}
.wc-seo-heading span {
    color: #880019;
}
/* TEXT */
.wc-seo-text {
    color: #bdbdbd;
    font-size: 17px;
    line-height: 30px;
    max-width: 620px;
}
.wc-seo-text strong {
    color: #fff;
}
/* FEATURE CARDS */
.wc-seo-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    height: 100%;
    border-radius: 20px;
    background:
        rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    transition: .35s;
}
.wc-seo-feature:hover {
    transform: translateY(-8px);
    border-color: #880019;
    box-shadow:
        0 20px 40px rgba(136, 0, 25, .25);
}
.wc-seo-icon {
    min-width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #880019;
    color: #fff;
    font-size: 23px;
}
.wc-seo-feature h5 {
    font-size: 17px;
    color: #fff;
    font-weight: 700;
}
.wc-seo-feature p {
    margin: 5px 0 0;
    color: #999;
    font-size: 14px;
}
/* BUTTON */
.wc-seo-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 35px;
    padding: 16px 35px;
    border-radius: 50px;
    background: #880019;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: .35s;
}
.wc-seo-btn:hover {
    background: #fff;
    color: #880019;
    transform: translateY(-5px);
}
/* RIGHT DASHBOARD */
.wc-seo-dashboard {
    position: relative;
    padding: 40px;
}
.wc-seo-main-card {
    padding: 35px;
    border-radius: 35px;
    background:
        rgba(255, 255, 255, .07);
    border:
        1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(20px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .5);
}
.wc-seo-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wc-seo-card-top small {
    color: #aaa;
}
.wc-seo-card-top h3 {
    font-size: 48px;
    margin: 5px 0;
    color: #fff;
}
.wc-seo-growth-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background: #880019;
    font-size: 35px;
}
/* GRAPH */
.wc-seo-chart {
    position: relative;
    height: 230px;
    margin-top: 35px;
    border-radius: 25px;
    overflow: hidden;
    background: #080808;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .05) 1px,
            transparent 1px);
    background-size: 40px 40px;
}
.wc-seo-chart-line {
    position: absolute;
    width: 80%;
    height: 5px;
    left: 10%;
    bottom: 51%;
    background: #880019;
    border-radius: 20px;
    transform: rotate(341deg);
    box-shadow:
        0 0 30px #880019;
}
.wc-seo-point {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    border: 4px solid #880019;
}
.p-one {
    left: 12%;
    bottom: 55px;
}
.p-two {
    left: 35%;
    bottom: 90px;
}
.p-three {
    left: 60%;
    bottom: 125px;
}
.p-four {
    right: 12%;
    bottom: 170px;
}
/* STATS */
.wc-seo-stats {
    display: flex;
    gap: 20px;
    margin-top: 25px;
}
.wc-seo-stats div {
    width: 50%;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .05);
}
.wc-seo-stats strong {
    display: block;
    font-size: 20px;
}
.wc-seo-stats span {
    color: #999;
    font-size: 14px;
}
/* FLOATING BOXES */
.wc-seo-floating {
    position: absolute;
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 18px 22px;
    background: #111;
    border:
        1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, .4);
    animation:
        wcFloat 4s ease-in-out infinite;
}
.wc-seo-floating i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #880019;
    border-radius: 50%;
}
.wc-seo-floating small {
    display: block;
    color: #999;
}
.wc-floating-one {
    top: 10px;
    left: 0;
}
.wc-floating-two {
    right: 0;
    bottom: 30px;
    animation-delay: 1.5s;
}
@keyframes wcFloat {
    50% {
        transform: translateY(-15px);
    }
}
/* RESPONSIVE */
@media(max-width:991px) {
    .wc-seo-heading {
        font-size: 40px;
    }
    .wc-seo-dashboard {
        padding: 0;
        margin-top: 30px;
    }
    .wc-floating-one,
    .wc-floating-two {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 20px;
    }
}
@media(max-width:576px) {
    .wc-seo-trust-section {
        padding: 70px 0;
    }
    .wc-seo-heading {
        font-size: 32px;
    }
    .wc-seo-main-card {
        padding: 22px;
    }
    .wc-seo-card-top h3 {
        font-size: 38px;
    }
    .wc-seo-chart {
        height: 170px;
    }
    .wc-seo-stats {
        flex-direction: column;
    }
    .wc-seo-stats div {
        width: 100%;
    }
}
/* ==========================
 PREMIUM SEO PACKAGE FINAL
========================== */
.premium-seo-packages{
background:#f5f6fa;
padding:90px 0;
}
.seo-title{
text-align:center;
margin-bottom:45px;
}
.seo-title .sub-ss{
background:#be0026;
color:#fff;
padding:8px 25px;
border-radius:50px;
font-weight:700;
font-size:13px;
}
.seo-title h2 span{
color:#be0026;
}
.seo-title p{
color:#666;
}
.seo-package-card{
background:#fff;
padding:25px;
border-radius:28px;
box-shadow:
0 20px 60px rgba(0,0,0,.12);
}
/* plans */
.seo-plan-head{
display:grid;
grid-template-columns:1.2fr 1fr 1fr 1fr;
gap:12px;
background:#111;
padding:15px;
border-radius:22px;
}
.package-name,
.package{
background:#222;
padding:20px;
border-radius:18px;
}
.package-name h3,
.package h3{
color:#fff!important;
margin:0;
}
.package p,
.package-name p{
color:#ccc!important;
}
.package.active{
background:#be0026!important;
}
/* price */
.seo-row{
display:grid;
grid-template-columns:1.2fr 1fr 1fr 1fr;
padding:18px;
background:#fff;
border-bottom:1px solid #eee;
}
.seo-row div{
color:#222!important;
font-weight:600;
}
.seo-row div:first-child{
color:#be0026!important;
}
/* accordion box */
.seo-feature-box{
margin-top:25px;
border-radius:22px;
overflow:hidden;
box-shadow:
0 10px 35px rgba(0,0,0,.08);
background:#fff;
}
.accordion-button-custom{
display:flex!important;
justify-content:space-between;
align-items:center;
cursor:pointer;
background:#111!important;
color:#fff!important;
padding:20px 25px!important;
margin:0!important;
font-size:18px;
font-weight:800;
}
.accordion-button-custom i{
color:#ffffff!important;
margin-right:12px;
}
.accordion-button-custom span{
font-size:25px;
}
/* active */
.accordion-button-custom:not(.collapsed){
background:#be0026!important;
}
/* rows */
.seo-list{
list-style:none;
margin:0;
padding:0;
}
.seo-list li{
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;
align-items:center;
padding: 8px 22px;
border-bottom:1px solid #eee;
background:#fff;
}
.seo-list li:hover{
background:#fff5f7;
}
.seo-list span{
color:#222!important;
font-weight:600;
}
/* icons */
.seo-list .fa-check-circle{
color:#16a34a!important;
font-size:19px;
text-align:center;
}
.seo-list .fa-times-circle{
color:#dc2626!important;
font-size:19px;
text-align:center;
}
/* buttons */
.start-row a{
color:#be0026;
font-weight:800;
text-decoration:none;
text-align:center;
}
/* mobile */
@media(max-width:768px){
.seo-package-card{
overflow-x:auto;
}
.seo-plan-head,
.seo-row{
    min-width:850px;
}

.seo-list li{
    min-width:unset;
    width:100%;
    grid-template-columns: 0.8fr 1fr 1fr 1fr!important;
}
.seo-accordion{
    width: 850px!important;
}


.seo-title h2{
font-size:32px;
}
}

.seo-package-card{
    overflow-x:auto;
  
    padding: 0 15px;
}

.seo-table{
    min-width:850px;
}

.seo-plan-head,
.seo-row,
.seo-feature-box{
    width:100%;
}

.seo-list li{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
}

@media(max-width:768px){

.seo-package-card{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.seo-table{
    width:850px;
}

}

/* =========================
SEO PROCESS PREMIUM FINAL
========================= */
.seo-process-new{
    background:#e3e3e3;
    padding:90px 0;
}
/* heading */
.seo-process-heading{
    text-align:center;
    margin-bottom:55px;
}
.seo-process-heading .pro{
    display:inline-block;
    background:#be0026;
    color:#fff;
    padding:8px 24px;
    border-radius:50px;
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
}
.seo-process-heading p{
    color:#666;
    margin-top:10px;
}
/* card wrapper */
.seo-process-new .row{
    row-gap:30px;
}
/* cards */
.seo-process-card{
    height:100%;
    min-height:240px;
    background:#111;
    border-radius:25px;
    padding:35px 28px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    flex-direction:column;
    box-shadow:
    0 18px 45px rgba(0,0,0,.18);
    transition:.35s ease;
}
.seo-process-card:after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    background:#be0026;
    right:-70px;
    top:-70px;
    border-radius:50%;
    opacity:.18;
}
.seo-process-card:hover{
    transform:translateY(-10px);
    box-shadow:
    0 25px 60px rgba(190,0,38,.35);
    border-color:#be0026;
}
/* icon */
.seo-process-icon{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#be0026;
    color:#fff;
    border-radius:20px;
    font-size:28px;
    margin-bottom:25px;
    flex-shrink:0;
    box-shadow:
    0 12px 30px rgba(190,0,38,.35);
}
/* number */
.seo-process-no{
    position:absolute;
    right:22px;
    top:18px;
    font-size:42px;
    font-weight:900;
    color:rgba(255,255,255,.08);
}
/* text */
.seo-process-card h4{
    color:#fff;
    font-size:21px;
    font-weight:700;
    margin-bottom:12px;
}
.seo-process-card p{
    color:#cfcfcf;
    font-size:14px;
    line-height:1.7;
    margin:0;
}
/* remove arrows if old html has them */
.seo-process-arrow{
    display:none!important;
}
@media(max-width:991px){
.seo-process-heading h2{
    font-size:32px;
}
.seo-process-card{
    min-height:auto;
}
}


/* =========================
SEO SUCCESS SECTION
========================= */
.seo-success-section{
background:#080808;
padding:100px 0;
position:relative;
overflow:hidden;
color:#fff;
}
/* grid background */
.seo-success-section:before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:60px 60px;
animation:moveGrid 12s linear infinite;
}
@keyframes moveGrid{
0%{
background-position:0 0;
}
100%{
background-position:60px 60px;
}
}
.seo-success-title{
position:relative;
z-index:2;
}
.seo-success-title .ss{
background:#be0026;
padding:8px 22px;
border-radius:50px;
font-size:12px;
color: #fff;
font-weight:800;
}
.seo-success-title span{
color:#ff1748;
}
.seo-success-title p{
color:#aaa;
}
/* graph box */
.seo-result-box{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
border-radius:30px;
padding:40px;
height:350px;
position:relative;
overflow:hidden;
backdrop-filter:blur(10px);
}
.seo-result-box h3{
font-size:70px;
margin:0;
color:#fff;
}
.seo-result-box h4{
color:#ccc;
}
/* graph */
.seo-graph{
height:120px;
margin-top:30px;
position:relative;
}
/* floating icons */
.seo-floating-icon{
position:absolute;
width:65px;
height:65px;
display:flex;
align-items:center;
justify-content:center;
background:#be0026;
border-radius:20px;
font-size:26px;
animation:floatIcon 3s infinite ease-in-out;
}
.icon-one{
right:35px;
top:35px;
}
.icon-two{
left:35px;
bottom:35px;
animation-delay:1s;
}
@keyframes floatIcon{
50%{
transform:translateY(-15px);
}
}
/* cards */
.seo-success-cards{
display:grid;
gap:20px;
}
.seo-mini-card{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:22px;
padding:25px;
display:flex;
align-items:center;
gap:25px;
transition:.3s;
}
.seo-mini-card:hover{
transform:translateX(10px);
border-color:#be0026;
}
.seo-mini-card i{
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
background:#be0026;
border-radius:18px;
font-size:25px;
animation:iconPulse 2s infinite;
}
@keyframes iconPulse{
50%{
box-shadow:0 0 30px #be0026;
}
}
.seo-mini-card h3{
margin:0;
color:white;
font-size:30px;
}
.seo-mini-card p{
margin:0;
color:#bbb;
}
/* SEO REAL GROWTH GRAPH */
.seo-growth-chart{
height:170px;
margin-top:35px;
position:relative;
overflow:hidden;
background:rgba(255,255,255,.03);
border-radius:20px;
padding:15px;
}
.chart-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.06) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.06) 1px,
transparent 1px
);
background-size:35px 35px;
}
.seo-growth-chart svg{
width:100%;
height:100%;
position:relative;
z-index:2;
}
.seo-growth-chart polyline{
fill:none;
stroke:#be0026;
stroke-width:5;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray:700;
stroke-dashoffset:700;
animation:drawGraph 2.5s ease forwards;
filter:
drop-shadow(0 0 12px #be0026);
}
.seo-growth-chart circle{
fill:#fff;
stroke:#be0026;
stroke-width:5;
animation:pulseDot 1.8s infinite;
}
@keyframes drawGraph{
to{
stroke-dashoffset:0;
}
}
@keyframes pulseDot{
50%{
r:10;
}
}
@media(max-width:991px){
.seo-success-title h2{
font-size:32px;
}
.seo-result-box{
margin-bottom:30px;
}
}
/*==========================
SEO BENEFITS
==========================*/
.seo-benefits-pro{
background:#fff;
}
.seo-benefit-tag{
display:inline-block;
background:#be0026;
color:#fff;
padding:8px 24px;
border-radius:50px;
font-size:12px;
font-weight:700;
letter-spacing:1px;
}
.seo-benefits-pro h2{
font-size:44px;
font-weight:800;
color:#111;
}
.seo-benefits-pro h2 span{
color:#be0026;
}
.seo-benefits-pro p{
color:#666;
line-height:1.8;
}
.seo-benefit-btn{
background:#be0026;
color:#fff;
padding:14px 30px;
border-radius:50px;
font-weight:700;
transition:.3s;
}
.seo-benefit-btn:hover{
background:#111;
color:#fff;
}
.seo-benefit-card{
background:#fff;
padding:30px;
border-radius:20px;
height:100%;
transition:.35s;
box-shadow:0 12px 30px rgba(0,0,0,.08);
border:1px solid #eee;
}
.seo-benefit-card:hover{
transform:translateY(-8px);
border-color:#be0026;
box-shadow:0 20px 40px rgba(190,0,38,.15);
}
.seo-benefit-icon{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
background:#be0026;
color:#fff;
border-radius:18px;
font-size:28px;
margin-bottom:20px;
}
.seo-benefit-card h4{
font-size:22px;
font-weight:700;
color:#111;
margin-bottom:12px;
}
.seo-benefit-card p{
margin:0;
font-size:15px;
}
@media(max-width:991px){
.seo-benefits-pro h2{
font-size:34px;
}
}