.about-banner {
    background: url(../images/about-us/about-banner.jpg) no-repeat center center;
    background-size: cover
}

.about-banner h1 {
    color: #fff
}

.about-banner p {
    color: #fff
}

.btn-light-blue {
    background: var(--color-blue);
    color: #fff;
    padding: 10px 25px
}

.btn-light-blue:hover {
    color: #fff
}

.number-highlight-blue {
    font-size: 26px;
    color: var(--color-blue)
}

.number-highlight-black {
    font-size: 26px;
    color: #000
}

.count-border {
    border-bottom: 1px solid rgb(0 0 0 / .3)
}

.counts-sec {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 30px
}

.counts-sec-last {
    padding-bottom: 0
}

.abt-why-choose {
    background: #000
}

.abt_s_box {
    position: relative;
    margin-bottom: 10px;
    text-align: center
}

.abt_s_Box_txt {
    position: absolute;
    bottom: 30px;
    left: 40px;
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.color-bg-black {
    background: #000
}

.color-bg-red {
    background: #D21143
}

.color-bg-orange {
    background: #F1595F
}

.color-bg-blue {
    background: #543D7F
}

.client-say-caption p,
.client-say-caption h6 {
    color: #fff
}

.main-para {
    text-align: justify
}

input.error {
    border: 1px solid red
}

@media(max-width:767px) {
    .main-para {
        text-align: left;
        padding-left: 15px
    }

    .main-para::before {
        top: 0px !important;
        left: -15px !important
    }

    .wmbox1,
    .wmbox2,
    .wmbox3,
    .wmbox4,
    .wmbox5 {
        margin-bottom: 30px
    }

    .sp-impact-pic {
        text-align: center
    }

    .seo-pages-impact .ps-0 {
        padding-left: calc(var(--bs-gutter-x) * .5) !important
    }
}

.emcd--box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(0 0 0 / .3);
    width: 100%
}

.emcd-col:nth-last-of-type(1) .emcd--box {
    border-bottom: 0
}

.emcd--box-icon {
    flex-shrink: 0;
    width: 80px;
    margin-right: 10px
}

.emcd--box-icon img {
    margin: 0 !important
}

.emcd--box-txt {
    text-align: left;
    flex-grow: 1;
    font-size: 16px;
    font-weight: 600
}

@media(max-width:767px) {
    .emcd--box-icon {
        text-align: center
    }

    .emcd--box-icon img {
        max-width: 60px
    }
}

@media(min-width:768px) {

    .emcd-col:nth-last-of-type(1) .emcd--box,
    .emcd-col:nth-last-of-type(2) .emcd--box,
    .emcd-col:nth-last-of-type(3) .emcd--box {
        border-bottom: 0
    }
}

@media(min-width:1200px) {
    .emcd--box-txt {
        font-size: 18px
    }

    .emcd-col:nth-last-of-type(1) .emcd--box,
    .emcd-col:nth-last-of-type(2) .emcd--box,
    .emcd-col:nth-last-of-type(3) .emcd--box,
    .emcd-col:nth-last-of-type(4) .emcd--box {
        border-bottom: 0
    }
}

.ui-ux-main-page .sp-impact-image .sp-impact-pic::before {
    left: -20px;
    bottom: -20px
}

.main-para::before {
    content: url(../images/about-us/client-say-quote.png);
    position: absolute;
    top: -20px;
    left: -25px
}

.client-say-caption {
    margin: 160px 30px 50px 30px;
    position: relative;
    border-bottom: 1px solid rgb(255 255 255 / .3)
}

.client-say-logo {
    position: absolute;
    top: -280px;
    width: 100%;
    text-align: center
}

.blank-left {
    height: 160px
}

.abt-client-say .swiper {
    width: 100%;
    height: 100%
}

.abt-client-say .swiper-slide {
    text-align: center;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

.client-say-slide .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: url(../images/about-us/client-say-arrow-right.png)
}

.client-say-slide .swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: url(../images/about-us/client-say-arrow-left.png)
}

.client-say-slide .swiper-button-next {
    right: 90px;
    left: auto;
    top: auto;
    bottom: 108px
}

.client-say-slide .swiper-button-prev {
    left: 90px;
    right: auto;
    top: auto;
    bottom: 108px
}

.client-say-slide .swiper-pagination-bullet {
    background: #fff
}

@media(min-width:576px) {
    .client-say-logo {
        top: -300px
    }
}

@media(min-width:768px) {
    .satisfied-text {
        margin-bottom: 60px
    }

    .counts-sec {
        text-align: left;
        margin-top: 0;
        padding-bottom: 0
    }

    .count-border {
        border-right: 1px solid rgb(0 0 0 / .3);
        border-bottom: none
    }

    .abt_s_box {
        text-align: left
    }

    .abt_s_Box_txt {
        left: 20px;
        font-size: 15px;
        bottom: 15px
    }

    .client-say-caption {
        margin: 84px 20px 50px 160px
    }

    .client-say-logo {
        top: -45px;
        left: -330px;
        width: auto
    }

    .client-say-slide .swiper-button-next {
        right: 280px;
        bottom: 60px
    }

    .client-say-slide .swiper-button-prev {
        left: 280px;
        bottom: 60px
    }
}

@media(min-width:992px) {
    .about-banner p {
        font-size: 24px;
        line-height: 31px;
        padding: 30px 0 30px
    }

    .number-highlight-blue {
        font-size: 48px
    }

    .number-highlight-black {
        font-size: 36px
    }

    .abt_s_Box_txt {
        font-size: 24px
    }

    .client-say-caption {
        margin: 84px 100px 110px 230px
    }

    .client-say-slide .swiper-button-next {
        right: 390px;
        bottom: 62px
    }

    .client-say-slide .swiper-button-prev {
        left: 390px;
        bottom: 62px
    }

    .client-say-logo {
        top: -45px;
        left: -390px
    }
}

@media(min-width:1200px) {
    .abt_s_Box_txt {
        bottom: 30px
    }

    .client-say-slide .swiper-button-next {
        right: 467px;
        bottom: 42px
    }

    .client-say-slide .swiper-button-prev {
        left: 467px;
        bottom: 42px
    }

    .client-say-caption {
        margin: 84px 100px 50px 230px
    }
}

@media(min-width:1366px) {
    .client-say-slide .swiper-button-next {
        right: 530px;
        bottom: 42px
    }

    .client-say-slide .swiper-button-prev {
        left: 530px;
        bottom: 42px
    }

    .client-say-caption {
        margin: 84px 100px 50px 230px
    }
}

@media(min-width:1600px) {
    .client-say-slide .swiper-button-next {
        right: 640px;
        bottom: 42px
    }

    .client-say-slide .swiper-button-prev {
        left: 640px;
        bottom: 42px
    }

    .client-say-caption {
        margin: 84px 100px 50px 230px
    }
}

.ui-ux-banner {
    background: url(../images/service/ui-ux/ui-ux-banner.jpg) no-repeat center;
    background-size: cover
}

.ui-ux-approach {
    background: #252525
}

.ui-ux-btn {
    background: #000;
    color: #fff;
    padding: 10px 30px
}

.ui-ux-btn:hover {
    color: #fff
}

.ui-ux-abt h2 {
    margin-bottom: 30px
}

.ui-ux-process {
    background: rgb(106 215 195 / .1)
}

.ui-ux-design-services p {
    position: relative;
    display: flex
}

.ui-ux-design-services p::before {
    content: url(../images/service/ui-ux/arrow-points.png);
    margin-right: 15px
}

@media (max-width:767px) {
    .ui-ux-abt .row {
        flex-direction: column-reverse
    }
}

@media(min-width:1200px) {
    .ui-ux-design-left-img {
        position: absolute;
        left: 0;
        width: 575px;
        height: auto
    }
}

@media(min-width:1366px) {
    .ui-ux-design-left-img {
        width: 630px
    }
}

@media(min-width:1600px) {
    .ui-ux-design-left-img {
        position: relative;
        left: auto;
        width: auto;
        height: auto
    }
}

.website-design-banner {
    background: url(../images/service/website-design/website-design-banner.jpg) no-repeat center;
    background-size: cover
}

.web-design-process {
    background: #252525
}

.web-design-abt h2 {
    margin-bottom: 30px
}

.web-design-workflow {
    background: rgb(106 215 195 / .1)
}

.create-positive-box {
    background: #F2F2F2;
    padding: 30px 40px
}

.types-of-web .nav-tabs {
    border-bottom: 1px solid #fff0;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden
}

.wd-btn {
    padding: 10px 22px;
    color: #000000 !important;
    border-radius: 8.5px !important;
    border-color: transparent !important;
    border: 1px solid transparent !important;
    margin-right: 20px;
    font-size: 14px
}

.wd1-btn {
    background-color: rgb(0 133 255 / .1) !important
}

.wd1-btn.active {
    background: #0085FF !important
}

.wd2-btn {
    background-color: rgb(255 199 0 / .1) !important
}

.wd2-btn.active {
    background: #FFC700 !important
}

.wd3-btn {
    background-color: rgb(255 128 11 / .1) !important
}

.wd3-btn.active {
    background: #FF800B !important
}

.wd4-btn {
    background-color: rgb(106 215 195 / .1) !important
}

.wd4-btn.active {
    background: #6AD7C3 !important
}

.wd5-btn {
    background-color: rgb(195 61 171 / .1) !important
}

.wd5-btn.active {
    background: #C33DAB !important
}

.wd6-btn {
    background-color: rgb(219 222 44 / .1) !important
}

.wd6-btn.active {
    background: #D4D900 !important
}

.type-body-box {
    padding: 30px 30px;
    border-radius: 20px;
    margin-top: 30px
}

.perks-box {
    background: #F2F2F2;
    padding: 30px 40px
}

.industries-power {
    background: rgb(106 215 195 / .1)
}

.industries-content p {
    position: relative;
    display: flex;
    align-items: flex-start
}

.industries-content p::before {
    content: url(../images/service/website-design/industries-arrow-right.png);
    margin-right: 10px
}

.industries-btn {
    background: #2E63D8;
    color: #fff;
    padding: 10px 25px;
    margin-top: 20px
}

.industries-btn:hover {
    color: #fff
}

.web-why-choose {
    background: #000
}

.web-why-choose h2,
.web-why-choose h4,
.web-why-choose p {
    color: #fff
}

.logo-section {
    display: flex;
    overflow-x: scroll
}

.logo-section img {
    margin-right: 20px
}

.web-why-choose-box {
    color: rgb(255 255 255 / .2)
}

.web-why-choose-box h4 {
    text-transform: uppercase
}

.web-img-sec {
    display: flex;
    align-items: flex-start
}

.web-img-sec img {
    margin-right: 20px
}

@media (max-width:767px) {
    .web-design-abt .row {
        flex-direction: column-reverse
    }
}

@media(min-width:768px) {
    .type-body-box {
        padding: 50px 70px
    }
}

@media(min-width:992px) {
    .create-positive-box h4 {
        font-size: 20px
    }

    .perks-box h4 {
        font-size: 20px
    }

    .web-why-choose-box h4 {
        font-size: 18px
    }
}

@media(min-width:1200px) {
    .types-of-web .nav-tabs {
        overflow-x: hidden;
        overflow-y: hidden
    }

    .industries-content {
        margin-left: 80px
    }

    .industries-img {
        margin-left: -100px
    }

    .web-why-choose-box h3 {
        font-size: 36px
    }
}

.blogs-listing-banner {
    background: url(../images/blog/blog-listing-banner.jpg) no-repeat center
}

.blogs-single-banner-1 {
    background: url(../images/blog/blogs-single-banner-1.jpg) no-repeat center
}

.blogs-single-banner-2 {
    background: url(../images/blog/blogs-single-banner-2.jpg) no-repeat center
}

.blogs-single-banner-3 {
    background: url(../images/blog/blogs-single-banner-3.jpg) no-repeat center
}

.blogs-single-banner-4 {
    background: url(../images/blog/blogs-single-banner-4.jpg) no-repeat center
}

.blogs-single-banner-5 {
    background: url(../images/blog/blogs-single-banner-5.jpg) no-repeat center
}

.blogs-single-banner-6 {
    background: url(../images/blog/blogs-single-banner-6.jpg) no-repeat center
}

.blogs-single-banner-7 {
    background: url(../images/blog/blogs-single-banner-7.jpg) no-repeat center
}

.blogs-single-banner-8 {
    background: url(../images/blog/blogs-single-banner-8.jpg) no-repeat center
}

.blogs-single-banner-9 {
    background: url(../images/blog/blogs-single-banner-9.jpg) no-repeat center
}

.blogs-single-banner-10 {
    background: url(../images/blog/blogs-single-banner-10.jpg) no-repeat center
}

.blogs-common-banner {
    background-size: cover
}

.blogs-content h6,
.blogs-content p,
.blogs-content h5,
.blogs-content h4,
.blogs-content h2 {
    color: #000000 !important
}

.blogs-content li {
    margin-bottom: 20px
}

.blog-box-link a {
    color: #000;
    font-weight: 600
}

.blog-date {
    font-size: 14px;
    color: #000;
    margin-bottom: 10px
}

.blogs-single-common-banner {
    height: 100px
}

.blogs-content {
    background: rgb(106 215 195 / .1)
}

.blogs-content-box {
    background: #fff;
    padding: 30px 30px;
    margin-top: -80px
}

.blogs-content-box p {
    color: #000
}

.blog-publisher-area p {
    font-size: 14px
}

.publisher-name {
    color: #E83A25;
    font-weight: 700
}

.blog-body-area h5 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 18px
}

.popular-search-box {
    padding: 30px 30px
}

.popular-search-box a {
    color: #000
}

.popular-search-box a:hover {
    color: #E83A25;
    text-decoration: underline
}

@media(min-width:768px) {
    .blogs-common-banner {
        height: 170px
    }

    .blogs-content-box {
        padding: 50px 50px;
        margin-top: -100px
    }

    .popular-search-box {
        padding: 50px 50px
    }
}

@media(min-width:992px) {
    .blogs-common-banner {
        height: 250px
    }

    .blogs-content-box {
        margin-top: -150px
    }
}

@media(min-width:1200px) {
    .blogs-common-banner {
        height: 320px
    }

    .blogs-content-box {
        margin-top: -190px
    }
}

.pr-banner {
    background: url(../images/service/pr/pr-banner.jpg) no-repeat center;
    background-size: cover
}

.pr-banner-points h4 {
    position: relative;
    display: flex;
    text-align: left
}

.pr-banner-points h4::before {
    content: url(../images/service/pr/tick-point.png);
    margin-right: 12px
}

.pr-public-relation {
    background: #252525
}

.pr-abt h2 {
    margin-bottom: 30px
}

.pr-abt a {
    color: #000;
    font-weight: 600
}

.wt-is-pr {
    background: url(../images/service/pr/wt-is-pr-bg.jpg) no-repeat center;
    background-size: cover
}

.wt-is-pr-box {
    padding: 30px 30px;
    background: #fff
}

.what-do-public h4 {
    color: rgb(0 0 0 / .5);
    border-bottom: 1px solid rgb(0 0 0 / .5);
    padding-bottom: 15px
}

.pr-qualities {
    background: #000
}

.pr-qualities h2,
.pr-qualities h5 {
    color: #fff
}

.pr-qualities h5 {
    font-weight: 400;
    font-size: 18px;
    position: relative;
    border-bottom: 1px solid rgb(255 255 255 / .3);
    padding-bottom: 8px;
    margin-left: 20px
}

.pr-qualities h5::before {
    content: url(../images/service/pr/quality-points-arrow.png);
    position: absolute;
    left: -27px
}

.quality-img {
    margin-bottom: -170px
}

.pr-process {
    background: rgb(106 215 195 / .1);
    padding: 165px 0 30px 0
}

.pr-why-choose a {
    color: #fff;
    font-weight: 600
}

.pr-right-border,
.pr-right-border-mob {
    border-bottom: 1px solid rgb(255 255 255 / .3)
}

@media (max-width:767px) {
    .pr-abt .row {
        flex-direction: column-reverse
    }
}

@media(min-width:768px) {
    .wt-is-pr-box {
        padding: 40px 60px
    }

    .pr-process {
        padding: 50px 0 50px 0
    }

    .pr-right-border {
        border-right: 1px solid rgb(255 255 255 / .3);
        border-bottom: 1px solid #fff0
    }

    .pr-right-border-mob {
        border-bottom: 1px solid #fff0
    }
}

@media(min-width:992px) {
    .pr-banner-points h4 {
        font-size: 20px
    }

    .wt-is-pr-box h4 {
        font-size: 32px
    }

    .what-do-public h4 {
        font-size: 36px
    }

    .pr-qualities h5 {
        font-size: 20px
    }
}

@media(min-width:1200px) {
    .quality-content {
        margin-right: 225px
    }

    .pr-process {
        padding: 100px 0 50px 0
    }
}

@media(min-width:1366px) {
    .pr-process {
        padding: 211px 0 50px 0
    }
}

.b2b-banner {
    background: url(../images/service/b2b/b2b-banner.jpg) no-repeat center;
    background-size: cover
}

.b2b-points p {
    position: relative;
    display: flex;
    align-items: flex-start
}

.b2b-points p::before {
    content: url(../images/service/b2b/b2b-points.png);
    margin-right: 12px
}

.research-study {
    padding: 30px 0 30px 0
}

.color-box {
    padding: 30px 50px;
    border-radius: 10px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center
}

.color-box h4 {
    margin-bottom: 0;
    text-align: center
}

.b2-color-1 {
    background: #6AD7C3
}

.b2-color-2 {
    background: #FC5271
}

.b2-color-3 {
    background: #FFC700
}

.b2-color-4 {
    background: #C33DAB
}

.b2-color-5 {
    background: #FF800B
}

.b2-color-6 {
    background: #0085FF
}

.b2-color-7 {
    background: #FC7F6C
}

.b2-color-8 {
    background: #DBDE2C
}

.offer-box {
    background: #FFF;
    box-shadow: 0 4px 25px rgb(0 0 0 / .05);
    border-radius: 10px;
    padding: 30px 50px;
    width: 100%
}

.b2-border-color-1 {
    border-left: 10px solid #0085FF
}

.b2-border-color-2 {
    border-left: 10px solid #FC5271
}

.b2-border-color-3 {
    border-left: 10px solid #FFC700
}

.b2-border-color-4 {
    border-left: 10px solid #FC7F6C
}

.b2-border-color-5 {
    border-left: 10px solid #6AD7C3
}

.b2-border-color-6 {
    border-left: 10px solid #C33DAB
}

.b2b-principles h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(0 0 0 / .5);
    margin-bottom: 0;
    padding-bottom: 15px
}

.principle-color-1 {
    color: #FF800B
}

.principle-color-2 {
    color: #FC5271
}

.principle-color-3 {
    color: #0085FF
}

@media(min-width:992px) {
    .research-study {
        padding: 100px 0 50px 0
    }

    .color-box h4 {
        font-size: 20px
    }

    .offer-box h4 {
        font-size: 20px
    }

    .b2b-principles h4 {
        font-size: 20px
    }

    .b2b-principles h3 {
        font-size: 36px
    }
}

.cw-banner {
    background: url(../images/service/cw/cw-banner.jpg) no-repeat center;
    background-size: cover
}

.cw-process {
    background: #252525
}

.cw-btn {
    padding: 10px 25px;
    background: #2E63D8;
    color: #fff
}

.cw-btn:hover {
    color: #fff
}

.why-choose-cw {
    padding: 30px 0 30px 0
}

.additional-content h5 {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 20px
}

.additional-content img {
    margin-right: 10px
}

@media(min-width:768px) {
    .additional-content-border {
        border-bottom: 1px solid rgb(0 0 0 / .3)
    }
}

@media(min-width:1200px) {
    .why-choose-cw {
        padding: 270px 0 50px 0
    }
}

.ff-banner {
    background: url(../images/service/ff/ff-banner.jpg) no-repeat center;
    background-size: cover;
    padding: 30px 0 30px
}

.wt-is-ff-points p {
    position: relative;
    display: flex;
    align-items: flex-start
}

.wt-is-ff-points p::before {
    content: url(../images/service/ff/wt-is-ff-points.png);
    margin-right: 10px
}

.dif-content h4 {
    font-weight: 400
}

.dif-right-img {
    margin: 30px 0 30px 0
}

.ff-essential {
    background: #111D30
}

.ff-essential h2,
.ff-essential p {
    color: #fff
}

.ff-essential p::before {
    content: '';
    margin-right: 0
}

@media(max-width:767px) {
    .full-funnel-page .web-why-choose-box {
        text-align: center
    }

    .full-funnel-page .ff-img-sec h4 {
        margin-top: 10px
    }
}

@media(min-width:768px) {
    .ff-banner {
        padding: 106px 0 120px
    }

    .dif-right-img {
        margin: 143px 0 30px 0
    }

    .ff-border-right {
        border-right: 1px solid #C4C4C4
    }
}

@media(min-width:992px) {
    .dif-content h4 {
        font-size: 20px
    }

    .dif-right-img {
        margin: 87px 0 117px 0
    }

    .ff-img-sec h4 {
        font-size: 18px;
        margin-top: 10px
    }

    .ff-essential h2 {
        font-size: 32px;
        line-height: 44px
    }
}

.pm-banner {
    background: url(../images/service/pm/pm-banner.jpg) no-repeat center;
    background-size: cover;
    padding: 30px 0 30px
}

.pm-helps-box h4 {
    font-weight: 500;
    margin-top: 13px
}

.wt-is-pm {
    padding: 30px 30px 30px 30px;
    background: rgb(106 215 195 / .1);
    margin-top: 30px
}

.wt-is-pm p {
    position: relative;
    display: flex;
    align-items: flex-start
}

.wt-is-pm p::before {
    content: url(../images/service/pm/wt-is-pm-points.png);
    margin-right: 12px
}

.wt-makes-pm {
    background: #000
}

.wt-makes-pm h2,
.wt-makes-pm h3,
.wt-makes-pm h4,
.wt-makes-pm p,
.wt-makes-pm li {
    color: #fff
}

.wt-makes-content-box {
    background: #363A41;
    border-radius: 20px;
    padding: 30px 30px 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.wt-makes-content-box p {
    position: relative;
    display: flex
}

.wt-makes-content-box p::before {
    content: '';
    border-left: 2px solid #fff;
    margin-right: 13px;
    height: 20px
}

.wt-makes-pm h3 {
    font-weight: 500
}

.wt-makes-border-color-1 p::before {
    border-left: 2px solid #FF8080
}

.wt-makes-border-color-2 p::before {
    border-left: 2px solid #0085FF
}

.wt-makes-border-color-3 p::before {
    border-left: 2px solid #FFC700
}

.wt-makes-border-color-4 p::before {
    border-left: 2px solid #6AD7C3
}

.wt-makes-color-1 {
    color: #FF8080 !important
}

.wt-makes-color-2 {
    color: #0085FF !important
}

.wt-makes-color-3 {
    color: #FFC700 !important
}

.wt-makes-color-4 {
    color: #6AD7C3 !important
}

.how-we-help h4 {
    margin: 20px 0 10px 0
}

@media(min-width:768px) {
    .pm-banner {
        padding: 80px 0 120px
    }

    .wt-is-pm {
        margin-top: 80px
    }

    .wt-makes-content-box {
        min-height: 300px
    }
}

@media(min-width:992px) {
    .pm-helps-box h4 {
        font-size: 20px;
        line-height: 28px
    }

    .wt-makes-pm h3 {
        font-weight: 22px
    }

    .wt-makes-content-box {
        min-height: 270px
    }

    .how-we-help h4 {
        font-size: 20px
    }
}

@media(min-width:1200px) {
    .wt-is-pm {
        padding: 50px 50px 50px 30px
    }

    .wt-makes-content-box {
        min-height: 195px
    }
}

.em-banner {
    background: url(../images/service/em/em-banner.jpg) no-repeat center;
    background-size: cover
}

.em-points p {
    position: relative;
    display: flex;
    align-items: flex-start
}

.em-points p::before {
    content: url(../images/service/em/em-points.png);
    margin-right: 12px
}

.em-services {
    background: #000
}

.em-services h2,
.em-services h5,
.em-services a {
    color: #fff
}

.em-service-box {
    display: flex;
    align-items: flex-start
}

.em-service-box img {
    margin-right: 25px
}

.em-service-box h5 {
    text-transform: uppercase
}

.em-service-box a::after {
    content: url(../images/service/em/know-more-arrow-right.png);
    margin-left: 10px
}

.em-btn {
    background: #2E63D8;
    padding: 10px 25px;
    color: #fff
}

.em-btn:hover {
    color: #fff
}

@media(min-width:768px) {
    .benefits-of-choosing h4 {
        min-height: 70px
    }
}

.ppc-banner {
    background: url(../images/service/ppc/ppc-banner.jpg) no-repeat center;
    background-size: cover
}

.google-adwords {
    background: rgb(106 215 195 / .1)
}

.google-adwords h4 {
    margin-top: 20px;
    margin-bottom: 10px
}

.read-more-state {
    display: none
}

.read-more-target {
    display: none;
    max-height: 0;
    font-size: 0;
    transition: .25s ease
}

.read-more-state:checked~.read-more-target {
    display: block;
    font-size: inherit;
    max-height: 999em
}

.read-more-state~.trigger-button-sec p>label.read-more-trigger::before {
    content: 'View All \2193'
}

.read-more-state:checked~.trigger-button-sec p>label.read-more-trigger::before {
    content: 'View less \2191'
}

.read-more-trigger {
    cursor: pointer;
    display: inline-block;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px
}

.trigger-button-sec {
    border-top: 1px solid rgb(0 0 0 / .5)
}

.ppc-benefits-slide img {
    display: block;
    width: auto;
    height: auto;
    object-fit: none
}

.ppc-benefits-slide h4 {
    margin-top: 20px;
    margin-bottom: 20px
}

@media(min-width:768px) {
    .google-adwords h4 {
        min-height: 70px
    }
}

.ui-ux-abu-dhabi-banner {
    background: url(../images/seo/ui-ux/ui-ux-abu-dhabi-banner.jpg) no-repeat center;
    background-size: cover
}

.ui-ux-ajman-banner {
    background: url(../images/seo/ui-ux/ui-ux-ajman-banner.jpg) no-repeat center;
    background-size: cover
}

.ui-ux-fujairah-banner {
    background: url(../images/seo/ui-ux/ui-ux-fujairah-banner.jpg) no-repeat center;
    background-size: cover
}

.ui-ux-sharjah-banner {
    background: url(../images/seo/ui-ux/ui-ux-sharjah-banner.jpg) no-repeat center;
    background-size: cover
}

.ui-ux-al-ain-banner {
    background: url(../images/seo/ui-ux/ui-ux-al-ain-banner.jpg) no-repeat center;
    background-size: cover
}

.ui-ux-al-khaimah-banner {
    background: url(../images/seo/ui-ux/ui-ux-al-khaimah-banner.jpg) no-repeat center;
    background-size: cover
}

.ui-ux-al-quwain-banner {
    background: url(../images/seo/ui-ux/ui-ux-al-quwain-banner.jpg) no-repeat center;
    background-size: cover
}

.seo-service-box {
    margin: 30px
}

.seo-service-box p {
    text-align: justify;
    margin-top: 20px
}

.parent-position {
    position: relative
}

@media(min-width:768px) {
    .ss-border-right {
        border-right: 1px solid rgb(0 0 0 / .3)
    }

    .ss-border-bottom {
        border-bottom: 1px solid rgb(0 0 0 / .3)
    }

    .white-circle {
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 25px;
        position: absolute;
        right: -25px;
        bottom: -22px
    }
}

@media(min-width:992px) {
    .ui-ux-seo-abt h2 {
        font-size: 32px
    }
}

.em-sharjah-banner {
    background: url(../images/seo/em/em-sharjah-banner.jpg) no-repeat center;
    background-size: cover
}

.em-ras-al-khaimah-banner {
    background: url(../images/seo/em/em-ras-al-khaimah-banner.jpg) no-repeat center;
    background-size: cover
}

.em-al-quwain-banner {
    background: url(../images/seo/em/em-al-quwain-banner.jpg) no-repeat center;
    background-size: cover
}

.em-ajman-banner {
    background: url(../images/seo/em/em-ajman-banner.jpg) no-repeat center;
    background-size: cover
}

.em-fujairah-banner {
    background: url(../images/seo/em/em-fujairah-banner.jpg) no-repeat center;
    background-size: cover
}

.em-abu-dhabi-banner {
    background: url(../images/seo/em/em-abu-dhabi-banner.jpg) no-repeat center;
    background-size: cover
}

.seo-banner-aden {
    background: url(../images/seo/seo/seo-agency/seo-banner-aden.jpg) no-repeat center;
    background-size: cover
}

.seo-banner-al-khobar {
    background: url(../images/seo/seo/seo-agency/seo-banner-al-khobar.jpg) no-repeat center;
    background-size: cover
}

.seo-banner-medina {
    background: url(../images/seo/seo/seo-agency/seo-banner-medina.jpg) no-repeat center;
    background-size: cover
}

.seo-banner-dhahran {
    background: url(../images/seo/seo/seo-agency/seo-banner-dhahran.jpg) no-repeat center;
    background-size: cover
}

.seo-banner-mecca {
    background: url(../images/seo/seo/seo-agency/seo-banner-mecca.jpg) no-repeat center;
    background-size: cover
}

.seo-process-box {
    border-top: 3px solid gray;
    text-align: center
}

.seo-process-box h4 {
    padding-top: 22px;
    padding-bottom: 7px;
    text-transform: uppercase
}

.seo-box-top-border-color-1 {
    border-top: 3px solid #0085FF
}

.seo-box-top-border-color-2 {
    border-top: 3px solid #FF800B
}

.seo-box-top-border-color-3 {
    border-top: 3px solid #FFC700
}

.seo-box-top-border-color-4 {
    border-top: 3px solid #6AD7C3
}

.seo-box-top-border-color-5 {
    border-top: 3px solid #C33DAB
}

.seo-box-top-border-color-6 {
    border-top: 3px solid #EA5454
}

.seo-box-top-border-color-7 {
    border-top: 3px solid #F181D8
}

.seo-box-top-border-color-8 {
    border-top: 3px solid #DBDE2C
}

.seo-box-top-border-color-9 {
    border-top: 3px solid #0085FF
}

.seo-box-top-border-color-10 {
    border-top: 3px solid #FF800B
}

.seo-package h2,
.seo-package li,
.seo-package p {
    color: #000
}

@media(min-width:768px) {
    .seo-process-box {
        text-align: left
    }

    .seo-process-box h4 {
        min-height: 100px
    }

    .benefits-of-seo .sp-impact-image .sp-impact-pic::before {
        left: -20px
    }
}

@media(min-width:992px) {
    .seo-process-box h4 {
        font-size: 20px
    }
}

@media(min-width:1366px) {
    .seo-process-box h4 {
        min-height: 0
    }
}

.price_card {
    flex-flow: row wrap;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    transform: translate3d(0, -2px, 0);
    border: none
}

.list_icon,
.list_icon_x {
    list-style-type: none;
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px
}

.list_icon:before {
    content: url(https://www.brandstory.ae/assets/images/Vector.png);
    position: absolute;
    left: 0;
    top: 0
}

.list_icon_x:before {
    content: url(https://www.brandstory.ae/assets/images/cross1.png);
    position: absolute;
    left: 0;
    top: 0
}

.list_text_mb5 {
    margin-top: -5px;
    margin-left: 5px
}

.float-right {
    float: right !important
}

.box-main.d-flex {
    padding: 30px 40px;
    margin-bottom: 40px;
    border: 1px solid #092067;
    border-radius: 26px;
    align-items: center;
    justify-content: space-between
}

a.applybtn-link {
    background: #000;
    border-radius: 26px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    padding: 7px 40px 10px;
    font-family: var(--font-main);
    line-height: 18px
}

a.applybtn-link:hover {
    background: #6C2DC7
}

@media screen and (max-width:768px) {
    .box-main.d-flex {
        display: block !important;
        border-radius: 26px;
        padding: 20px 20px;
        margin-bottom: 20px
    }

    .box-para {
        margin-top: 5px !important;
        margin-bottom: 25px
    }

    .applybtn {
        margin-bottom: 10px
    }
}

@media (min-width:1200px) {
    .careers .contact-page--sec {
        background: linear-gradient(to bottom, #e83a25 0%, #e83a25 52%, #ffffff 32%, #ffffff 100%)
    }
}

.dxb-seo-banner {
    background: url(../images/seo-lp/dubai-seo-banner-newupload.jpg) no-repeat center center;
    background-size: cover
}

.border-box-orange {
    border-left: 2px solid #FD7E14
}

.border-box-magenta {
    border-left: 2px solid #D63384
}

.border-box-purple {
    border-left: 2px solid #5227FF
}

.border-box-blue {
    border-left: 2px solid #0DCAF0
}

.border-box-green {
    border-left: 2px solid #076856
}

.border-box-red {
    border-left: 2px solid #E83A25
}

.dxb-seo-banner {
    background: url(../images/seo-lp/dubai-seo-banner-newupload.jpg) no-repeat center center;
    background-size: cover
}

.illustration-dxb {
    background: url(../images/seo-lp/illustration-banner-dxb.jpg) no-repeat center center;
    background-size: cover
}

.bg-dxb-blue {
    background-color: #CDD8EF
}

.br-8 {
    border-radius: 8px
}

.dxb-process .nav-link {
    font-weight: 500
}

.dxb-process .process-tabs-txt {
    font-size: 16px
}

@media (min-width:768px) {
    .dxb-process .nav-tabs .nav-link {
        padding: 10px 0 12px 0px !important
    }

    .counter .count-border {
        border-right: 1px solid #fff;
        border-bottom: none
    }
}

@media (min-width:1200px) {
    .col-lg-4-5 {
        width: 20% !important
    }

    .keyword-list {
        width: 85%;
        margin: auto
    }

    .dxb-w-95 {
        width: 95%;
        margin: auto
    }
}

.dxb-bg-cream {
    background-color: #FFF3EF
}

.dxb-bg-red {
    background-color: #E83A25
}

.fs-18 {
    font-size: 18px
}

.lh-23 {
    line-height: 23px
}

.lh-27 {
    line-height: 27px
}

.dxb-fw-500 {
    font-weight: 500
}

.dxb-text-ggrey {
    color: #808080 !important;
    font-weight: 500
}

.keywords .list {
    border: 1px solid #fff;
    padding: 12px 20px
}

.dxb-box .iws-seo-box-img h3 {
    top: 46% !important;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff
}

.fs-16 {
    font-size: 16px !important;
    line-height: 24px !important
}

.counter-sec-dxb {
    background: url(../images/seo-lp/counter-banner.jpg) no-repeat center center;
    background-size: cover
}

.dxb-bg-grey {
    background-color: #F4F4F4
}

.crypto-service-banner {
    background: url(../images/seo-lp/crypto-banner.jpg) no-repeat center center;
    background-size: cover
}

.fs-14 {
    font-size: 14px;
    line-height: 21px
}

.tsti-box {
    box-shadow: 0 2px 4px 0 #0000001A
}

.newtestSwiper .swiper-slide {
    display: flex;
    height: auto;
    margin-bottom: 50px
}

@media (min-width:1200px) {
    .w-1000 {
        width: 1000px;
        margin: auto
    }
}

.other-services.text-center a {
    display: block !important
}

.other-services.text-center img {
    width: 100%
}

.newtestSwiper .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    width: 8px;
    height: 8px
}

.newtestSwiper .swiper-pagination-bullet-active {
    background: #000
}

.iws-seo-box-img {
    position: relative
}

.iws-seo-box-img:before {
    content: " ";
    width: 100%;
    height: 100%;
    background-color: #00000070;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    border-radius: 20px;
    transition: 0.5s
}

.iws-seo-box-img:hover:before {
    opacity: 1 !important;
}


.bg-service-green {
    background-color: #F0FBF9;
}

.bg-service-blue {
    background-color: #E6F9FF;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.text-service-grey {
    color: #6A6A6A;
}

.blogs-improve-new-banner {
    background: url(../images/seo-lp/blogs-improve-new-banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.blogs-cms-single-banner {
    background: url(../images/seo-lp/blog-cms-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.blogs-single-banner-299 {
    background: url(../images/seo-lp/sixty-percent-wide.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.ui-ux-nw-banner {
    background: url(../images/seo-lp/ui-ux-home-new-banner.jpg) no-repeat center;
    background-size: cover;
}

.bg-lpurple {
    background-color: #F8E8FF;
}

.text-ppurple {
    color: #5227FF;
}

@media (min-width: 1200px) {
    .max-550 {
        max-width: 550px;
    }
}

.ui-ux-new-test .grey-box {
    border-radius: 16px;
    background-color: #D9D9D933;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ui-ux-new-test .grey-box img {
    border-radius: 0 0 0 16px;
}

@media (min-width: 768px) {
    .ui-ux-new-test .sptab-links .nav-tabs .nav-link {
        margin-bottom: 10px;
        width: 100%;
        border-bottom: unset !important;
        text-align: center;
    }

    .ui-ux-new-test .sptab-links .nav-tabs .nav-link {
        font-size: 24px;
        line-height: 31.2px;
        font-weight: 500;
        padding: 10px !important;
        border-radius: 0;
    }

    .ui-ux-new-test .sprocess-tabs .sptab-links {
        overflow-y: scroll;
        height: 550px;
        margin-right: 50px;
        padding-right: 50px;
        flex-basis: inherit;
    }

    .ui-ux-new-test .sprocess-tabs .tab-content {
        flex-basis: inherit;
        margin-top: 10px;
    }

    .ui-ux-new-test .sprocess-tabs .sptab-links::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .ui-ux-new-test .sprocess-tabs .sptab-links::-webkit-scrollbar-track {
        background: #CED4DA;
        border-radius: 10px;
    }

    .ui-ux-new-test .sprocess-tabs .sptab-links::-webkit-scrollbar-thumb {
        background: #AD00FF;
        border-radius: 10px;
    }

    .ui-ux-new-test .sprocess-tabs .sptab-links::-webkit-scrollbar-thumb:hover {
        background: #7a00b3;
    }
}

@media (min-width: 1200px) {
    .ui-ux-new-test .sprocess-tabs .sptab-links {
        overflow-y: scroll;
        height: 550px;
        margin-right: 100px;
        padding-right: 100px;
        flex-basis: inherit;
    }
}

.ui-ux-new-test .sptab-links .nav-tabs .nav-link.active {
    color: #ffffff;
    background: #AD00FF;
}

.ui-ux-new-test .fw-semibold {
    font-weight: 600 !important;
}

.ui-ux-new-test .black-grad-box {
    background-image: url(../images/seo-lp/black-grad.png) !important;
    background-size: cover;
    background-position: center;
    height: 100%;
    border-radius: 16px;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.ui-ux-new-test .black-grad-banner {
    background-image: url(../images/seo-lp/black-grad-banner.jpg) !important;
    background-size: cover;
    background-position: center;
    height: 100%;
    border-radius: 16px;
    padding: 100px 30px;
    position: relative;
}

@media (max-width: 600px) {
    .ui-ux-new-test .black-grad-banner:before {
        content: '';
        width: 100%;
        height: 100%;
        background-color: #00000093;
        position: absolute;
        top: 0;
        left: 0;
        ;
    }

    .grad-text-frnt {
        position: relative;
        z-index: 1;
    }
}

.testi-ux-box {
    box-shadow: 0px 7px 7px 0px #00000017;
    height: 100%;
}

.testiuxSwiper .swiper-slide {
    height: auto !important;
}


@media (min-width: 1200px) {
    .seo-page-agency .service-process .tab-content img {
        max-width: 300px;
        height: 100%;
        object-fit: cover;
    }

    .seo-page-agency .service-process .tab-content div {
        height: 100%;
    }
}

.bblogSwiper .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    width: 8px;
    height: 8px;
}

.bblogSwiper .swiper-pagination-bullet-active {
    background: #000;
}

.bblogSwiper .blog-box {
    margin-bottom: 50px !important;
}

.case-box {
    border: 1px solid #00000034;
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.case-study .swiper-slide {
    display: flex;
    align-items: stretch;
    height: auto;
}

@media (max-width: 1200px) {
    .case-study .swiper-slide {
        margin-bottom: 50px;
    }
}




.exclusive-benefits-wrapper {
    background: #FFE8E8;
    background-image: repeating-conic-gradient(from 0deg at 50% 50%, #FFE8E8 0deg 15deg, #FFDADA 15deg 30deg);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    padding: 60px 40px;
}

.benefits-title {
    font-size: 38px;
    font-weight: 600;
    color: #1A3760;
    margin-bottom: 40px;
}

.benefit-sub-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.badge-promise {
    background: #E85B2F;
    color: #fff;
    padding: 8px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
}

.expert-badge {
    background: #F0F4F8;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #1A3760;
}

.expert-badge img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.stat-box h3 {
    font-size: 32px;
    font-weight: 700;
    color: #1A3760;
    margin-bottom: 5px;
}

.stat-box p {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 0;
}

.feature-item .feature-title {
    font-size: 22px;
    font-weight: 700;
    color: #1A3760;
    margin-bottom: 5px;
}

.feature-item .feature-desc {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 767px) {
    .exclusive-benefits-wrapper {
        padding: 40px 20px;
        border-radius: 20px;
    }

    .benefits-title {
        font-size: 28px;
    }

    .stat-box h3 {
        font-size: 24px;
    }

    .feature-item .feature-title {
        font-size: 18px;
    }

    .benefit-sub-card {
        padding: 20px;
    }
}

.comparison-card {
    border: 1px solid #E6EEF5;
    border-radius: 20px;
    height: 100%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

.comp-header {
    padding: 15px 25px;
    font-size: 20px;
    font-weight: 700;
}

.other-agencies .comp-header {

    color: #F87171;
}

.brandstory-card .comp-header {
    background: #F0FDF4;
    color: #16A34A;
}

.comp-body {
    padding: 10px 0;
}

.comp-item {
    border-bottom: 1px solid #F1F5F9;
    padding: 20px 25px;
}

.comp-item:last-child {
    border-bottom: none;
}

.comp-item-header {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.comp-item-header h6 {
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1A3760;
    flex-grow: 1;
}

.comp-item-body {
    padding-left: 45px;
    padding-top: 15px;
    font-size: 14px;
    line-height: 1.6;
    color: #64748B;
    display: none;
}

.comp-item.active .comp-item-body {
    display: block;
}

.comp-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.comp-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.comp-item.active .comp-arrow {
    transform: rotate(180deg);
}

.packages-comparison-section {}

.comparison-table-wrapper {
    background: #FFFFFF;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

.comp-table {
    width: 100%;
    border-collapse: collapse;
}

.comp-table th {
    background: #FFDADA;
    color: #1A3760;
    font-weight: 700;
    font-size: 18px;
    padding: 25px 20px;
}

.comp-table td {
    padding: 20px;
    color: #4A5568;
    font-size: 16px;
    border: none;
    text-align: center;
}

.comp-table tr.peach-row td {
    background: #FFDADA;
}

.comp-table tr.white-row td {
    background: #FFFFFF;
}

.comp-table td.feature-name {
    text-align: left;
    padding-left: 40px;
    font-weight: 700;
    color: #1A3760;
}

.select-option-btn-wrapper {
    margin-top: 40px;
}

.select-option-btn {
    background: #000 !important;
    border-radius: 12px;
    color: #fff !important;
    padding: 12px 35px;
    text-align: center;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
    transition: transform 0.2s ease;
    text-decoration: none;
}

.select-option-btn:hover {
    transform: scale(1.05);
}

@media (max-width: 767px) {
    .comparison-table-wrapper {
        border-radius: 15px;
        overflow-x: scroll;
    }

    .comp-table {
        min-width: 600px;
    }

    .comp-table td.feature-name {
        padding-left: 15px;
    }
}

.additional-ppc-services {
    background: #fdfdfd;
    padding: 80px 0;
}

.title-line {
    width: 60px;
    height: 3px;
    background: #0084FF;
    margin: 15px auto 40px;
}

.ppc-service-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 25px 20px;
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s;
    border: 1px solid #f2f2f2;
    margin-top: 30px;
    height: calc(100% - 30px);
}

.ppc-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.ppc-stack-icon-wrap {
    position: absolute;
    top: -26px;
    left: 20px;
}

.ppc-main-icon {
    width: 48px;
    height: 48px;
    display: block;
}

.card-num-badge {
    position: absolute;
    bottom: -10px;
    left: -10px;
    background: #FFDFDB;
    /* Matching the SVG circle color */
    color: #E33925;
    /* Matching the SVG number color */
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: none;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stacked-layers-css {
    width: 32px;
    height: 24px;
    position: relative;
    margin-top: -8px;
}

.layer-shape {
    position: absolute;
    width: 100%;
    height: 12px;
    background: #E83A25;
    border-radius: 2px;
    transform: perspective(100px) rotateX(45deg) rotateZ(-10deg);
}

.layer-1 {
    top: 0;
    z-index: 3;
}

.layer-2 {
    top: 6px;
    z-index: 2;
    opacity: 0.7;
}

.layer-3 {
    top: 12px;
    z-index: 1;
    opacity: 0.4;
}

.ppc-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.ppc-card-body h6 {
    font-size: 17px;
    font-weight: 700;
    color: #1A3760;
    margin: 0;
    line-height: 1.2;
}

.card-arr-btn {
    width: 28px;
    height: 28px;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E83A25;
    flex-shrink: 0;
    margin-left: 10px;
    padding: 4px;
}

.load-more-btn-container {
    margin-top: 60px;
}

.load-more-custom {
    border: 1px solid #0084FF;
    background: #fff;
    color: #0084FF;
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: 0.3s;
}

.load-more-custom:hover {
    background: #0084FF;
    color: #fff;
}

/* Explore More About PPC Services Section */
.explore-more-section {
    background: #fdfdfd;
    padding: 80px 0;
}

.explore-section-title {
    color: #1A3760;
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 40px;
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.explore-card {
    background: #FFF0ED;
    /* Reference image background color */
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.explore-card:hover {
    background: #FFE8E4;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.explore-card span {
    color: #1A3760;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    text-align: left;
}

.explore-icon-img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.view-more-btn-wrap {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.view-more-custom {
    border: 1.5px solid #0065FF;
    /* From reference image stroke */
    background: #fff;
    color: #0065FF;
    border-radius: 50px;
    padding: 10px 35px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.view-more-custom:hover {
    background: #0065FF;
    color: #fff;
}

@media (max-width: 1199px) {
    .explore-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .explore-grid {
        grid-template-columns: 1fr;
    }
}

/* PPC Trends Section Styles */
.ppc-trends-section {

    /* Soft peach background from reference */
    padding: 80px 0;
}

.trends-table-wrapper {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
}

.trends-table {
    width: 100%;
    border-collapse: collapse;
}

.trends-table th {
    background: #FFDADA;
    /* Peach header background */
    color: #1A3760;
    font-weight: 700;
    font-size: 18px;
    padding: 20px 30px;
    text-align: left;
    border-bottom: 1px solid #FFC9C0;
}

.trends-table td {
    padding: 20px 30px;
    color: #4A5568;
    font-size: 16px;
    border-bottom: 1px dashed #E2E8F0;
    vertical-align: top;
}

.trends-table tr:last-child td {
    border-bottom: none;
}

.trends-table td.trend-col {
    font-weight: 700;
    color: #1A3760;
    width: 25%;
}

.trends-table td:nth-child(2),
.trends-table td:nth-child(3) {
    width: 37.5%;
}

.trends-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.trends-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    color: #4A5568;
    font-size: 17px;
    line-height: 1.5;
}

.trends-list-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.explore-options-btn-wrap {
    margin-top: 40px;
    text-align: center;
}

.explore-options-btn {
    background: #000;
    color: #fff;
    padding: 12px 40px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: none;
}

.explore-options-btn:hover {
    background: #252525;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
    .trends-table-wrapper {
        overflow-x: auto;
    }

    .trends-table {
        min-width: 800px;
    }
}

/* Launch PPC Campaign Section Styles */
.launch-ppc-section {

    /* Soft peach background */
    padding: 80px 0;
}

.launch-title {
    color: #1A3760;
    font-weight: 700;
    font-size: 32px;
}

.launch-desc {
    color: #4A5568;
    font-size: 18px;
    line-height: 1.6;
    max-width: 900px;
}

.method-switcher-wrap {
    margin: 40px 0;
}

.method-switcher {
    display: inline-flex;
    background: #fff;
    border: 1px solid #FFC9C0;
    padding: 6px;
    border-radius: 50px;
}

.method-btn {
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none !important;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.method-btn.active {
    background: #E83A25;
    /* Brand Red */
    color: #fff;
}

.method-btn:not(.active) {
    background: transparent;
    color: #4A5568;
}

.ppc-steps-list {
    margin-top: 30px;
}

.ppc-step-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px dashed #E2E8F0;
}

.ppc-step-item:last-child {
    border-bottom: none;
}

.step-num-box {
    background: #FFDADA;
    width: 65px;
    height: 65px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-number {
    font-size: 24px;
    font-weight: 800;
    color: #E83A25;
    line-height: 1;
}

.step-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1A3760;
    margin-top: 2px;
}

.step-content {
    color: #4A5568;
    font-size: 17px;
    line-height: 1.5;
    padding-top: 10px;
}

.launch-illustration-wrap {
    position: relative;
    text-align: right;
}

.launch-illustration-wrap img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}

.learn-more-black-btn {
    background: #000;
    color: #fff;
    padding: 12px 35px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    transition: all 0.3s;
    margin-top: 30px;
}

.learn-more-black-btn:hover {
    background: #252525;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .launch-illustration-wrap {
        margin-top: 50px;
        text-align: center;
    }
}

/* ─────────────────────────────────────────────────────────────
   SEO PILLAR PAGE REFRESH - [MODERN & PREMIUM]
   Scoped under .seo-pillar-page
───────────────────────────────────────────────────────────────── */
.seo-pillar-page {
    --gold: #D4AF37;
    --primary: #2E63D8;
    --accent: #E83A25;
    --dark: #131313;
    --text: #1a1a1a;
    --text-muted: #666666;
    --white: #ffffff;
    --bg-alt: #f8fafc;
    --border: #f1f5f9;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --ff-mono: 'Courier New', Courier, monospace;
}

.seo-pillar-page section:not(.footer-top):not(.footer-partners):not(.sp-50):not(.footer-btm) {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

/* Restore normal behaviour for footer and sp-50 sections */


.seo-pillar-page section.sp-50 {
    padding: 50px 0;
}

.seo-pillar-page .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* SECTION 1 - HERO */
#hero {
    padding-top: 140px;
    background: #fff;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.hero-bg-circle {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(46, 99, 216, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
}

.hero-badge {
    background: rgba(46, 99, 216, 0.08);
    color: var(--primary);
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 24px;
    border: 1px solid rgba(46, 99, 216, 0.15);
}

#hero h1 {
    font-size: 4.8rem;
    line-height: 1.05;
    font-weight: 800;
    color: var(--dark);
    margin: 0;
}

#hero p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 520px;
    margin-top: 24px;
}

.btn-group {
    display: flex;
    gap: 16px;
    margin-top: 40px;
}

#hero .btn {
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#hero .btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 30px rgba(46, 99, 216, 0.3);
}

#hero .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(46, 99, 216, 0.4);
}

#hero .btn-outline {
    background: #fff;
    border: 2px solid var(--border);
    color: var(--dark);
}

#hero .btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.hero-stats {
    display: flex;
    gap: 48px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}

.hero-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
}

.hero-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 4px;
}

.hero-visual {
    position: relative;
    z-index: 2;
}

.hero-card {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f8fafc;
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-label {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.metric-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
}

.metric-up {
    color: #10b981;
    font-weight: 700;
    font-size: 0.8rem;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
}

/* SECTION 2 - WHY DUBAI */
#why-dubai {
    background: var(--bg-alt);
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

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

.why-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border);
    transition: all 0.4s ease;
}

.why-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.why-icon {
    font-size: 2.5rem;
    margin-bottom: 24px;
    display: block;
}

/* SECTION 3 - LANDSCAPE */
.landscape-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin: 64px 0;
}

.l-num {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.l-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 12px;
    line-height: 1.4;
}

/* SECTION 4 - SERVICES */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
}

.svc-card {
    background: #fff;
    padding: 48px;
    border-radius: 20px;
    border: 1px solid var(--border);
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svc-card:hover {
    transform: scale(1.02);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.svc-number {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.02);
}

.svc-icon {
    font-size: 2.5rem;
    margin-bottom: 24px;
}

.svc-tag {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    background: var(--bg-alt);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* SECTION 5 - INDUSTRIES */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
}

.ind-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.ind-emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 24px;
}

.ind-card ul {
    list-style: none;
    padding: 0;
    margin-top: 24px;
}

.ind-card li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.ind-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 900;
}

/* SECTION 6 - PROOF BAR */
#proof {
    background: var(--dark);
    padding: 64px 0;
}

.proof-inner {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 50px 0px;
}

.proof-num {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--white);
    margin-bottom: 8px;
}

.proof-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

/* SECTION 7 - PACKAGES */
.pkg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 64px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
}

.pkg-table th,
.pkg-table td {
    padding: 24px;
    border-bottom: 1px solid var(--border);
}

.pkg-table thead th {
    background: var(--bg-alt);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark);
}

.pkg-header-featured {
    background: var(--primary) !important;
    color: #fff !important;
    position: relative;
}

.pkg-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 100px;
    box-shadow: 0 4px 10px rgba(232, 58, 37, 0.3);
}

.featured-col {
    background: rgba(46, 99, 216, 0.02);
}

.tick {
    color: #10b981;
    font-weight: 900;
    font-size: 1.2rem;
}

.cross {
    color: #ef4444;
    font-weight: 900;
    font-size: 1.2rem;
}

/* SECTION 8 - PROCESS */
.process-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 80px;
    position: relative;
}

.process-track::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 50px;
    right: 50px;
    height: 2px;
    background: var(--border);
}

.step-box {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-circle {
    width: 60px;
    height: 60px;
    background: #fff;
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
}

/* SECTION 9 - LOCAL SEO MAP */
.local-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-top: 56px;
}

.local-list {
    list-style: none;
    padding: 0;
}

.local-list li {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.local-icon {
    font-size: 2rem;
    background: var(--bg-alt);
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-mock {
    background: #fff;
    border: 1px solid var(--border);
    padding: 48px;
    border-radius: 32px;
    box-shadow: var(--shadow-lg);
}

.map-pin {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-alt);
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

.pin-dot {
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent);
}

.pin-rank {
    margin-left: auto;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
}

/* SECTION 10 - CONTENT CLUSTER */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-top: 64px;
}

.cluster-visual {
    background: var(--bg-alt);
    padding: 64px;
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cluster-center {
    background: var(--primary);
    color: #fff;
    padding: 24px 48px;
    border-radius: 16px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 15px 40px rgba(46, 99, 216, 0.3);
    margin-bottom: 48px;
    z-index: 2;
}

.cluster-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
}

.cluster-item {
    background: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cluster-item:hover {
    transform: scale(1.05);
    border-color: var(--primary);
}

.cluster-item strong {
    display: block;
    font-size: 0.65rem;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* SECTION 11 - TECH CARDS */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.tech-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.tech-score {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 12px;
}

.progress-bar {
    height: 8px;
    background: var(--bg-alt);
    border-radius: 100px;
    margin-top: 24px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    border-radius: 100px;
}

/* SECTION 12 - CASE STUDIES */
.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 56px;
}

.case-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.4s ease;
}

.case-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.case-header {
    background: var(--bg-alt);
    padding: 32px;
}

.case-industry {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.case-body {
    padding: 32px;
}

.case-metric {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.case-metric-val {
    color: var(--dark);
    font-weight: 800;
}

/* SECTION 13 - COMPARISON */
.compare-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 64px;
}

.compare-col {
    padding: 64px;
    border-radius: 32px;
}

.compare-col.theirs {
    background: #fff;
    border: 1px solid var(--border);
}

.compare-col.ours {
    background: var(--dark);
    color: #fff;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
}

.compare-head {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 40px;
}

.compare-item {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    line-height: 1.5;
    font-weight: 500;
}

.ci-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* SECTION 14 - FACTORS / TOOLS GRID */
.factors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 64px;
}

.factor-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.factor-num {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--primary);
    background: rgba(46, 99, 216, 0.08);
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 20px;
}

/* SECTION 15 - TRENDS TABLE */
.trends-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 64px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.trends-table th {
    background: var(--dark);
    color: #fff;
    padding: 24px;
    text-align: left;
    font-weight: 700;
}

.trends-table td {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    font-weight: 500;
}

.trend-new {
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

/* SECTION 16 - ROI CHART */
.roi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 64px;
}

.roi-points {
    list-style: none;
    padding: 0;
}

.roi-points li {
    display: flex;
    gap: 24px;
    margin-bottom: 40px;
}

.roi-dot {
    width: 16px;
    height: 16px;
    background: var(--primary);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(46, 99, 216, 0.5);
}

.roi-chart {
    background: #fff;
    padding: 48px;
    border-radius: 32px;
    border: 1px solid var(--border);
}

.roi-bar-row {
    margin-bottom: 24px;
}

.roi-bar-label {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.roi-bar-track {
    height: 32px;
    background: var(--bg-alt);
    border-radius: 8px;
    overflow: hidden;
}

.roi-bar-fill {
    height: 100%;
    transition: width 1.5s ease;
}

.fill-gold {
    background: var(--gold);
}

.fill-green {
    background: #10b981;
}

.fill-red {
    background: var(--accent);
}

/* SECTION 18 - TESTIMONIALS */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
}

.testi-card {
    background: #fff;
    padding: 48px;
    border-radius: 32px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.testi-stars {
    color: #f59e0b;
    font-size: 1.25rem;
    margin-bottom: 24px;
}

.testi-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 32px;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.testi-avatar {
    width: 56px;
    height: 56px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
}

.testi-name {
    display: block;
    font-weight: 800;
    font-size: 1.1rem;
}

.testi-role {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* SECTION 19 - ONBOARDING */
.onboard-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 64px;
}

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

.onboard-circle {
    width: 80px;
    height: 80px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.onboard-step:hover .onboard-circle {
    border-color: var(--primary);
    transform: translateY(-8px) scale(1.1);
}

/* SECTION 21 - SERVICES HUB */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.hub-card {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.hub-card:hover {
    border-color: var(--primary);
    background: var(--bg-alt);
}

.hub-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

/* SECTION 22 - FAQ TABS */
.faq-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 56px;
}

.faq-tab {
    padding: 12px 32px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 100px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.faq-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 16px;
    padding: 0 32px;
}

.faq-q {
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.15rem;
}

.faq-a {
    padding-bottom: 32px;
    color: var(--text-muted);
    line-height: 1.7;
    display: none;
}

/* SECTION 23 - BLOG / GLOSSARY */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.blog-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.blog-thumb {
    height: 160px;
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.blog-body {
    padding: 24px;
}

.terms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.term-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.term-abbr {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 8px;
}

/* SECTION 24 - FINAL CTA FORM */
#cta-final {
    background: var(--dark);
    color: #fff;
    padding: 120px 0;
}

#cta-final h2 {
    color: #fff;
}

.cta-form {
    background: #fff;
    padding: 64px;
    border-radius: 40px;
    margin-top: 64px;
    color: var(--dark);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.seo-pillar-page .site-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.seo-pillar-page .site-form .form-control,
.seo-pillar-page .site-form .form-select {
    width: 100%;
    padding: 14px 20px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: #fcfdfe;
    margin-bottom: 20px;
}

.seo-pillar-page .site-form .form-control:focus,
.seo-pillar-page .site-form .form-select:focus {
    border-color: var(--primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(46, 99, 216, 0.1);
    outline: none;
}

.seo-pillar-page .site-form .btn-blue {
    background: var(--primary);
    color: #fff;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.1rem;
    width: 100%;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 20px rgba(46, 99, 216, 0.2);
    margin-top: 10px;
}

.seo-pillar-page .site-form .btn-blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(46, 99, 216, 0.3);
    background: #2552b7;
}

.seo-pillar-page .form-hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 20px 0 30px;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1440px) {
    #hero h1 {
        font-size: 3.8rem;
    }
}

@media (max-width: 1200px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-visual {
        display: none;
    }

    .services-grid,
    .testi-grid,
    .hub-grid,
    .blog-grid,
    .terms-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-track {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .process-track::before {
        display: none;
    }

    .onboard-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    #hero h1 {
        font-size: 2.8rem;
    }

    .landscape-row,
    .industry-grid,
    .local-grid,
    .content-grid,
    .tech-grid,
    .case-grid,
    .compare-wrap,
    .roi-grid,
    .faq-tabs,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .services-grid,
    .testi-grid,
    .hub-grid,
    .blog-grid,
    .terms-grid,
    .onboard-steps {
        grid-template-columns: 1fr;
    }

    .form-field.full,
    .form-field {
        grid-column: span 1;
    }

    .cluster-items {
        grid-template-columns: 1fr;
    }

    .proof-inner {
        flex-direction: column;
        gap: 40px;
    }
}


/* SECTION 18 - RATING BAR REFINEMENT */
.seo-pillar-page .rating-bar {
    margin-top: 64px;
    background: var(--bg-alt);
    padding: 48px;
    border-radius: 32px;
    display: flex;
    align-items: center;
    gap: 80px;
}

.seo-pillar-page .aggregate-score {
    text-align: center;
    border-right: 1px solid var(--border);
    padding-right: 80px;
}

.seo-pillar-page .aggregate-num {
    font-size: 4rem;
    font-weight: 900;
    color: var(--dark);
    line-height: 1;
}

.seo-pillar-page .aggregate-stars {
    color: #f59e0b;
    font-size: 1.5rem;
    margin: 12px 0;
}

.seo-pillar-page .aggregate-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.seo-pillar-page .rating-breakdown {
    flex-grow: 1;
}

.seo-pillar-page .rating-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}

.seo-pillar-page .mini-bar {
    flex-grow: 1;
    height: 6px;
    background: var(--border);
    border-radius: 100px;
}

.seo-pillar-page .mini-fill {
    height: 100%;
    background: #f59e0b;
    border-radius: 100px;
}

/* SECTION 20 - CHECKLIST */
.seo-pillar-page .checklist-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 56px;
}

.seo-pillar-page .checklist {
    background: #fff;
    padding: 48px;
    border-radius: 32px;
    border: 1px solid var(--border);
}

.seo-pillar-page .checklist ul {
    list-style: none;
    padding: 0;
}

.seo-pillar-page .checklist li {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.seo-pillar-page .check-icon {
    color: var(--gold);
    font-weight: 900;
}

/* SECTION 23 - BLOG REFINEMENTS */
.seo-pillar-page .blog-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--primary);
    background: rgba(46, 99, 216, 0.08);
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.seo-pillar-page .blog-meta {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: auto;
    padding-top: 24px;
}

.seo-pillar-page .blog-link,
.seo-pillar-page .term-link {
    display: inline-block;
    margin-top: 16px;
    color: var(--primary);
    font-weight: 800;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s;
}

.seo-pillar-page .blog-link:hover,
.seo-pillar-page .term-link:hover {
    gap: 12px;
    transform: translateX(4px);
}

/* SECTION 24 - CONTACT ALT */
.seo-pillar-page .contact-alt {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 48px;
}

.seo-pillar-page .contact-item {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.seo-pillar-page .contact-item strong {
    color: #fff;
    margin-left: 8px;
}

/* MOBILE REFINEMENTS */
@media (max-width: 992px) {
    .seo-pillar-page .rating-bar {
        flex-direction: column;
        gap: 40px;
    }

    .seo-pillar-page .aggregate-score {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 40px;
    }

    .seo-pillar-page .checklist-wrap {
        grid-template-columns: 1fr;
    }

    .seo-pillar-page .contact-alt {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

/* ══════════════════════════════════════════════════════════════
   SEO PILLAR PAGE — DARK / BLACK PREMIUM THEME OVERRIDE
   All rules scoped to .seo-pillar-page — no global impact.
   Font sizes & font families are NOT changed here.
══════════════════════════════════════════════════════════════ */

/* ── GLOBAL DARK VARS ─────────────────────────────────────── */
.seo-pillar-page {
    --gold: #D4AF37;
    --primary: #2E63D8;
    --accent: #E83A25;
    --dark: #0a0a0a;
    --dark-2: #111111;
    --dark-3: #1a1a1a;
    --dark-4: #222222;
    --dark-5: #2a2a2a;
    --text: #e8e8e8;
    --text-muted: #999999;
    --border: rgba(255, 255, 255, 0.08);
    --border-2: rgba(255, 255, 255, 0.12);
    --white: #ffffff;
    --bg-alt: #111111;
    --glow-blue: 0 0 40px rgba(46, 99, 216, 0.2);
    --glow-gold: 0 0 40px rgba(212, 175, 55, 0.15);
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* ── BODY / PAGE BG ───────────────────────────────────────── */
.seo-pillar-page {
    background: var(--dark);
    color: var(--text);
}

.seo-pillar-page section:not(.footer-top):not(.footer-partners):not(.sp-50) {
    background: var(--dark);
}

/* Alternating section backgrounds */
.seo-pillar-page section:not(.footer-top):not(.footer-partners):not(.sp-50):nth-child(even) {
    background: var(--dark-2);
}

/* ── HEADINGS ─────────────────────────────────────────────── */
.seo-pillar-page h1,
.seo-pillar-page h2,
.seo-pillar-page h3,
.seo-pillar-page h4,
.seo-pillar-page h5 {
    color: var(--white);
}

.seo-pillar-page p,
.seo-pillar-page li {
    color: var(--text-muted);
}

/* ── HERO SECTION ─────────────────────────────────────────── */
.seo-pillar-page #hero {
    background: radial-gradient(ellipse at 60% 0%, rgba(46, 99, 216, 0.15) 0%, var(--dark) 65%),
        var(--dark);
    border-bottom: 1px solid var(--border);
    min-height: 90vh;
    padding-top: 100px;
}

.seo-pillar-page .hero-bg-circle {
    background: radial-gradient(circle, rgba(46, 99, 216, 0.12) 0%, transparent 70%);
}

.seo-pillar-page .hero-badge {
    background: rgba(46, 99, 216, 0.15);
    color: #7f9ef3;
    border: 1px solid rgba(46, 99, 216, 0.3);
}

.seo-pillar-page #hero h1 {
    color: var(--white);
}

.seo-pillar-page #hero p {
    color: #b0b0b0;
}

.seo-pillar-page .hero-stat-num {
    color: var(--white);
}

.seo-pillar-page .hero-stat-label {
    color: var(--text-muted);
}

.seo-pillar-page .hero-stats {
    border-top: 1px solid var(--border);
}

.seo-pillar-page .hero-card {
    background: var(--dark-3);
    border: 1px solid var(--border-2);
    box-shadow: var(--glow-blue), var(--shadow-lg);
}

.seo-pillar-page .metric-label {
    color: #888;
}

.seo-pillar-page .metric-val {
    color: var(--white);
}

.seo-pillar-page .metric-up {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.seo-pillar-page .metric-row {
    border-bottom: 1px solid var(--border);
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.seo-pillar-page .btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 30px rgba(46, 99, 216, 0.4);
}

.seo-pillar-page .btn-primary:hover {
    background: #3b72e8;
    box-shadow: 0 12px 40px rgba(46, 99, 216, 0.6);
}

.seo-pillar-page .btn-outline {
    background: transparent;
    border: 2px solid var(--border-2);
    color: var(--text);
}

.seo-pillar-page .btn-outline:hover {
    border-color: var(--primary);
    color: #7f9ef3;
    background: rgba(46, 99, 216, 0.08);
}

/* ── SECTION LABELS ───────────────────────────────────────── */
.seo-pillar-page .section-label {
    color: #7f9ef3;
    background: rgba(46, 99, 216, 0.08);
    border: 1px solid rgba(46, 99, 216, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── CARDS (WHY / IND / SVC / FACTOR / HUB / ONBOARD etc) ── */
.seo-pillar-page .why-card,
.seo-pillar-page .ind-card,
.seo-pillar-page .svc-card,
.seo-pillar-page .factor-card,
.seo-pillar-page .hub-card,
.seo-pillar-page .tech-card,
.seo-pillar-page .blog-card,
.seo-pillar-page .term-card,
.seo-pillar-page .case-card,
.seo-pillar-page .testi-card,
.seo-pillar-page .checklist,
.seo-pillar-page .map-mock,
.seo-pillar-page .roi-chart {
    background: var(--dark-3);
    border: 1px solid var(--border);
    color: var(--text);
}

.seo-pillar-page .why-card:hover,
.seo-pillar-page .svc-card:hover,
.seo-pillar-page .hub-card:hover,
.seo-pillar-page .case-card:hover {
    border-color: rgba(46, 99, 216, 0.5);
    box-shadow: var(--glow-blue), var(--shadow-lg);
    background: var(--dark-4);
}

.seo-pillar-page .why-card h4,
.seo-pillar-page .ind-card h4,
.seo-pillar-page .svc-card h4,
.seo-pillar-page .tech-card h3,
.seo-pillar-page .factor-card h4,
.seo-pillar-page .hub-card h4,
.seo-pillar-page .blog-card h4,
.seo-pillar-page .term-card h4,
.seo-pillar-page .testi-card h5 {
    color: var(--white);
}

.seo-pillar-page .why-card p,
.seo-pillar-page .ind-card li,
.seo-pillar-page .svc-card p,
.seo-pillar-page .factor-card p {
    color: var(--text-muted);
}

/* ── SVC CARD NUMBER & TAG ────────────────────────────────── */
.seo-pillar-page .svc-number {
    color: rgba(255, 255, 255);
}

.seo-pillar-page .svc-tag {
    background: rgba(46, 99, 216, 0.15);
    color: #7f9ef3;
}

.seo-pillar-page .factor-num {
    background: rgba(46, 99, 216, 0.12);
    color: #7f9ef3;
}

/* ── PROOF BAR ────────────────────────────────────────────── */
.seo-pillar-page #proof {
    background: #080808;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.seo-pillar-page .proof-num {
    background: linear-gradient(135deg, var(--white) 0%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.seo-pillar-page .proof-label {
    color: rgba(255, 255, 255, 0.5);
}

/* ── LANDSCAPE STATS ──────────────────────────────────────── */
.seo-pillar-page .l-num {
    background: linear-gradient(135deg, var(--primary), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.seo-pillar-page .l-desc {
    color: var(--text-muted);
}

/* ── PACKAGES TABLE ───────────────────────────────────────── */
.seo-pillar-page .pkg-table {
    background: var(--dark-3);
    border: 1px solid var(--border);
}

.seo-pillar-page .pkg-table thead th {
    background: var(--dark-4);
    color: var(--white);
    border-bottom: 1px solid var(--border);
}

.seo-pillar-page .pkg-table td {
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.seo-pillar-page .pkg-header-featured {
    background: var(--primary) !important;
    color: #fff !important;
}

.seo-pillar-page .featured-col {
    background: rgba(46, 99, 216, 0.05);
}

/* ── PROCESS STEPS ────────────────────────────────────────── */
.seo-pillar-page .process-track::before {
    background: var(--border);
}

.seo-pillar-page .step-circle {
    background: var(--dark-3);
    border-color: var(--primary);
    color: #7f9ef3;
    box-shadow: var(--glow-blue);
}

.seo-pillar-page .step-box p,
.seo-pillar-page .step-box h5 {
    color: var(--text-muted);
}

.seo-pillar-page .step-box h5 {
    color: var(--text);
}

/* ── LOCAL SEO MAP ────────────────────────────────────────── */
.seo-pillar-page .local-icon {
    background: var(--dark-4);
}

.seo-pillar-page .map-pin {
    background: var(--dark-4);
    border: 1px solid var(--border);
    color: var(--text);
}

.seo-pillar-page .pin-rank {
    color: #7f9ef3;
}

/* ── CONTENT CLUSTER ──────────────────────────────────────── */
.seo-pillar-page .cluster-visual {
    background: var(--dark-3);
    border: 1px solid var(--border);
}

.seo-pillar-page .cluster-item {
    background: var(--dark-4);
    border: 1px solid var(--border);
    color: var(--text);
}

.seo-pillar-page .cluster-item:hover {
    border-color: rgba(46, 99, 216, 0.5);
    background: var(--dark-5);
}

.seo-pillar-page .cluster-item strong {
    color: #7f9ef3;
}

/* ── TECH SCORE ───────────────────────────────────────────── */
.seo-pillar-page .tech-score {
    color: var(--gold);
}

.seo-pillar-page .progress-bar {
    background: var(--dark-4);
}

/* ── CASE STUDIES ─────────────────────────────────────────── */
.seo-pillar-page .case-header {
    background: var(--dark-4);
    border-bottom: 1px solid var(--border);
}

.seo-pillar-page .case-body {
    background: var(--dark-3);
}

.seo-pillar-page .case-metric {
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.seo-pillar-page .case-metric-val {
    color: var(--white);
}

/* ── COMPARISON ───────────────────────────────────────────── */
.seo-pillar-page .compare-col.theirs {
    background: var(--dark-3);
    border: 1px solid var(--border);
}

.seo-pillar-page .compare-col.theirs .compare-head,
.seo-pillar-page .compare-col.theirs .compare-item {
    color: var(--text);
}

.seo-pillar-page .compare-col.ours {
    background: linear-gradient(135deg, #0d1828 0%, #162250 100%);
    border: 1px solid rgba(46, 99, 216, 0.3);
    box-shadow: var(--glow-blue), var(--shadow-lg);
}

/* ── TRENDS TABLE ─────────────────────────────────────────── */
.seo-pillar-page .trends-table {
    background: var(--dark-3);
    box-shadow: var(--shadow-md);
}

.seo-pillar-page .trends-table th {
    background: var(--dark-4);
    color: var(--white);
    border-bottom: 1px solid var(--border);
}

.seo-pillar-page .trends-table td {
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.seo-pillar-page .trends-table tr:hover td {
    background: var(--dark-4);
    color: var(--text);
}

/* ── ROI CHART ────────────────────────────────────────────── */
.seo-pillar-page .roi-bar-track {
    background: var(--dark-4);
}

.seo-pillar-page .roi-bar-label {
    color: var(--text);
}

/* ── TESTIMONIALS ─────────────────────────────────────────── */
.seo-pillar-page .testi-text {
    color: var(--text);
}

.seo-pillar-page .testi-name {
    color: var(--white);
}

.seo-pillar-page .testi-role {
    color: var(--text-muted);
}

/* ── ONBOARDING ───────────────────────────────────────────── */
.seo-pillar-page .onboard-circle {
    background: var(--dark-3);
    border: 2px solid var(--border);
}

.seo-pillar-page .onboard-step h5 {
    color: var(--white);
}

.seo-pillar-page .onboard-step p {
    color: var(--text-muted);
}

.seo-pillar-page .onboard-step:hover .onboard-circle {
    border-color: var(--gold);
    box-shadow: var(--glow-gold);
    background: var(--dark-4);
}

/* ── CHECKLIST ────────────────────────────────────────────── */
.seo-pillar-page .checklist li {
    color: var(--text-muted);
}

.seo-pillar-page .check-icon {
    color: var(--gold);
}

/* ── FAQ ──────────────────────────────────────────────────── */
.seo-pillar-page .faq-tab {
    background: var(--dark-3);
    border: 2px solid var(--border);
    color: var(--text);
}

.seo-pillar-page .faq-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: var(--glow-blue);
}

.seo-pillar-page .faq-item {
    background: var(--dark-3);
    border: 1px solid var(--border);
}

.seo-pillar-page .faq-item:hover {
    border-color: var(--border-2);
}

.seo-pillar-page .faq-q {
    color: var(--white);
}

.seo-pillar-page .faq-a {
    color: var(--text-muted);
}

/* ── BLOG / GLOSSARY ──────────────────────────────────────── */
.seo-pillar-page .blog-card {
    background: var(--dark-3);
}

.seo-pillar-page .blog-thumb {
    background: var(--dark-4);
}

.seo-pillar-page .blog-body h5 {
    color: var(--white);
}

.seo-pillar-page .blog-tag {
    background: rgba(46, 99, 216, 0.15);
    color: #7f9ef3;
}

.seo-pillar-page .blog-link,
.seo-pillar-page .term-link {
    color: #7f9ef3;
}

.seo-pillar-page .blog-link:hover,
.seo-pillar-page .term-link:hover {
    color: var(--gold);
}

.seo-pillar-page .blog-meta {
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.seo-pillar-page .term-abbr {
    color: var(--gold);
}

/* ── RATING BAR ───────────────────────────────────────────── */
.seo-pillar-page .rating-bar {
    background: var(--dark-3);
    border: 1px solid var(--border);
}

.seo-pillar-page .aggregate-num {
    color: var(--white);
}

.seo-pillar-page .aggregate-score {
    border-right: 1px solid var(--border);
}

.seo-pillar-page .mini-bar {
    background: var(--dark-4);
}

.seo-pillar-page .mini-fill {
    background: var(--gold);
}

/* ── FINAL CTA SECTION ────────────────────────────────────── */
.seo-pillar-page #cta-final {
    background: radial-gradient(ellipse at 50% 0%, rgba(46, 99, 216, 0.12) 0%, #050505 60%),
        #050505;
    border-top: 1px solid var(--border);
}

.seo-pillar-page #cta-final h2 {
    color: var(--white);
}

.seo-pillar-page #cta-final>div>p {
    color: #888;
}

.seo-pillar-page .cta-form {
    background: var(--dark-3);
    border: 1px solid var(--border-2);
    box-shadow: var(--glow-blue), var(--shadow-lg);
    color: #000;
}

/* ── CONTACT FORM INSIDE CTA ──────────────────────────────── */
.seo-pillar-page .site-form label {
    color: #888;
}

.seo-pillar-page .site-form .form-control,
.seo-pillar-page .site-form .form-select {
    background: var(--dark-4);
    border: 2px solid var(--border);
    color: var(--white);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
}

.seo-pillar-page .site-form .form-control:focus,
.seo-pillar-page .site-form .form-select:focus {
    border-color: var(--primary);
    background: var(--dark-5);
    box-shadow: 0 0 0 4px rgba(46, 99, 216, 0.15);
    outline: none;
}

.seo-pillar-page .site-form .form-control::placeholder {
    color: #555;
}

.seo-pillar-page .site-form select option {
    background: var(--dark-4);
    color: var(--white);
}

.seo-pillar-page .site-form .btn-blue {
    background: linear-gradient(135deg, var(--primary) 0%, #1a45a8 100%);
    color: #fff;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 800;
    width: 100%;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(46, 99, 216, 0.4);
    margin-top: 8px;
}

.seo-pillar-page .site-form .btn-blue:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(46, 99, 216, 0.6);
}

.seo-pillar-page .form-hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 12px 0 24px;
}

/* ── CONTACT ALTS ─────────────────────────────────────────── */
.seo-pillar-page .contact-item {
    color: #666;
}

.seo-pillar-page .contact-item strong {
    color: var(--white);
}

/* ── MARQUEE (existing ) ──────────────────────────────────── */
.seo-pillar-page .seo-marquee {
    background: var(--dark-3);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ── SCROLLBAR ────────────────────────────────────────────── */
.seo-pillar-page ::-webkit-scrollbar {
    width: 6px;
}

.seo-pillar-page ::-webkit-scrollbar-track {
    background: var(--dark);
}

.seo-pillar-page ::-webkit-scrollbar-thumb {
    background: var(--dark-5);
    border-radius: 3px;
}

/* ── SELECTION ────────────────────────────────────────────── */
.seo-pillar-page ::selection {
    background: rgba(46, 99, 216, 0.4);
    color: #fff;
}

/* ── GLOW LINES / DECORATION ──────────────────────────────── */
/* .seo-pillar-page section::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(46, 99, 216, 0.15), transparent);
} */

/* ── ONBOARD GLOW on hover ────────────────────────────────── */
.seo-pillar-page .why-card:hover {
    background: var(--dark-4);
}

/* ── HUBGRID DARK ─────────────────────────────────────────── */
.seo-pillar-page .hub-card:hover {
    background: var(--dark-4);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: var(--glow-gold);
}

/* ── ADD GLOW ACCENT TO HEADINGS IN SECTIONS ─────────────── */
.seo-pillar-page .section-label+h2 {
    margin-top: 16px;
}

/* ── ANIMATION: override fade-in to work on dark bg ──────── */
.seo-pillar-page .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.seo-pillar-page .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── GOLD → PURPLE OVERRIDE (#855BFF) ──────────────────────── */
.seo-pillar-page {
    --gold: #855BFF;
    --glow-gold: 0 0 40px rgba(133, 91, 255, 0.2);
}

/* Update all gold-referencing elements to purple */
.seo-pillar-page .check-icon {
    color: #855BFF;
}

.seo-pillar-page .mini-fill {
    background: #855BFF;
}

.seo-pillar-page .term-abbr {
    color: #855BFF;
}

.seo-pillar-page .fill-gold {
    background: #855BFF;
}

.seo-pillar-page .tech-score {
    color: #855BFF;
}

.seo-pillar-page .onboard-step:hover .onboard-circle {
    border-color: #855BFF;
    box-shadow: 0 0 30px rgba(133, 91, 255, 0.25);
}

.seo-pillar-page .hub-card:hover {
    border-color: rgba(133, 91, 255, 0.35);
    box-shadow: 0 0 40px rgba(133, 91, 255, 0.15);
}

/* Gradient numbers: blue → purple */
.seo-pillar-page .l-num {
    background: linear-gradient(135deg, #2E63D8, #855BFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.seo-pillar-page .proof-num {
    background: linear-gradient(135deg, #ffffff 0%, #855BFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* H1 span accent colour → purple */
.seo-pillar-page #hero h1 span[style*="gold"] {
    color: #855BFF !important;
}


/* ── HERO CARD METRIC ROW ALIGNMENT FIX ─────────────────────── */
/* header mono line: centered */
.seo-pillar-page .hero-card>div:first-child {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}

/* 3-cell layout: label | value (centered) | badge */
.seo-pillar-page .metric-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.seo-pillar-page .metric-label {
    text-align: left;
}

.seo-pillar-page .metric-val {
    text-align: center;
    font-weight: 800;
    color: var(--white);
}

.seo-pillar-page .metric-up {
    text-align: right;
    margin-left: auto;
}

/* ── PHONE FIELD (intl-tel-input) DARK THEME FIX ─────────────
   Scoped to .seo-pillar-page — fixes the split white/dark look
   and restores consistent border-radius on the full field.
──────────────────────────────────────────────────────────────── */

/* Wrapper */
.seo-pillar-page .site-form .iti {
    display: block;
    width: 100% !important;
    margin-bottom: 20px;
}

/* The actual phone input */
.seo-pillar-page .site-form #phone {
    background: #222222 !important;
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 14px 20px 14px 95px !important;
    width: 100% !important;
    font-size: 1rem;
    font-weight: 500;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 0 !important;
}

.seo-pillar-page .site-form #phone:focus {
    border-color: #2E63D8 !important;
    box-shadow: 0 0 0 4px rgba(46, 99, 216, 0.15) !important;
    outline: none !important;
}

/* Flag selector button — dark background matching the input */
.seo-pillar-page .site-form .iti__selected-flag,
.seo-pillar-page .site-form .iti--separate-dial-code .iti__selected-flag {
    background-color: #2a2a2a !important;
    border-radius: 10px 0 0 10px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 10px !important;
}

.seo-pillar-page .site-form .iti__selected-flag:hover,
.seo-pillar-page .site-form .iti__selected-flag:focus {
    background-color: #333333 !important;
}

/* Dial code text colour */
.seo-pillar-page .site-form .iti__selected-dial-code {
    color: #cccccc !important;
    font-size: 0.9rem;
}

/* Dropdown arrow */
.seo-pillar-page .site-form .iti__arrow {
    border-top-color: #888 !important;
}

/* Country dropdown panel */
.seo-pillar-page .site-form .iti__country-list {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e8e8e8 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

.seo-pillar-page .site-form .iti__country {
    color: #e8e8e8 !important;
}

.seo-pillar-page .site-form .iti__country:hover,
.seo-pillar-page .site-form .iti__country--highlight {
    background: #2a2a2a !important;
}

.seo-pillar-page .site-form .iti__divider {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.seo-pillar-page .site-form .iti__search-input {
    background: #222222 !important;
    color: #e8e8e8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}