/*
Theme Name: RankZento
Theme URI: https://rankzento.com
Author: RankZento
Author URI: https://rankzento.com
Description: Custom theme for RankZento digital marketing agency, built to match the agency's brand design system.
Version: 1.0
Requires PHP: 7.4
Text Domain: rankzento
*/
:root {
    --bs-primary: #387afb; /* Logo Blue */
    --bs-primary-rgb: 2, 87, 251; /* Logo Blue - drives Bootstrap's .bg-primary/.text-primary/.border-primary utilities */
    --bs-primary-bg-subtle: #DCE8FF;
    --bs-primary-border-subtle: #A8C4FF;
    --bs-primary-text-emphasis: #01308C;
    --bs-primary-hover: #1D4ED8; /* Deep Blue */
    --bs-emerald: #10B981; /* Emerald Green */
    --bs-indigo: #387afb; /* Indigo */
    --bs-dark-slate: #0F172A; /* Dark Slate */
    --bs-slate-gray: #475569; /* Slate Gray */
    --bs-soft-gray: #F8FAFC; /* Soft Gray */
    --bs-midnight: #020617; /* Midnight */
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--bs-dark-slate);
    background-color: #FFFFFF;
}

/* Color Overrides */
.text-emerald { color: var(--bs-emerald) !important; }
.bg-emerald { background-color: var(--bs-emerald) !important; }
.bg-indigo { background-color: var(--bs-indigo) !important; }
.bg-soft-gray { background-color: var(--bs-soft-gray) !important; }
.bg-midnight { background-color: var(--bs-midnight) !important; }
.text-slate { color: var(--bs-slate-gray) !important; }
.bg-midnight .text-slate { color: #c3c3c3 !important; }
.bg-dark .text-slate { color: #c3c3c3 !important; }

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(2, 87, 251, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
    transform: translateY(-2px);
}

.btn-outline-dark {
    border-color: #E2E8F0;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 8px;
}

.btn-outline-dark:hover {
    border-color: var(--bs-primary);
    background-color: transparent;
    color: var(--bs-primary);
    transform: translateY(-2px);
}

.btn-light:not(.rounded-circle),
.btn-outline-light:not(.rounded-circle) {
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-light:not(.rounded-circle):hover,
.btn-outline-light:not(.rounded-circle):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(255, 255, 255, 0.15);
}

/* Navbar */
.navbar {
    background: #fefdfd;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #E2E8F0;
}

.logo-mark {
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -1px;
}

.nav-link {
    font-weight: 600;
    color: var(--bs-dark-slate);
    margin: 0 8px;
}

.nav-link:hover {
    color: var(--bs-primary);
}

/* =========================================
   RANK ZENTO HERO SECTION
========================================= */

.rz-hero {
    position: relative;
    overflow: hidden;
    padding: 75px 0 80px;
    background:
        radial-gradient(circle at 85% 45%, rgba(2, 87, 251, 0.09), transparent 32%),
        linear-gradient(135deg, #F8FAFC 0%, #EEF5FF 55%, #F8FAFC 100%);
    border-bottom: 1px solid #E2E8F0;
}

/* Subtle background glow */

.rz-hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -180px;
    top: -180px;
    background: rgba(2, 87, 251, 0.07);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.rz-hero::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    left: -180px;
    bottom: -200px;
    background: rgba(16, 185, 129, 0.04);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}


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

.rz-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    margin-bottom: 22px;

    color: var(--bs-primary);
    background: rgba(220, 232, 255, 0.75);
    border: 1px solid var(--bs-primary-border-subtle);

    border-radius: 50px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.rz-badge i {
    font-size: 12px;
}


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

.rz-hero-title {
    max-width: 680px;
    margin: 0 0 22px;

    color: var(--bs-midnight);

    font-size: clamp(40px, 3vw, 45px);
    line-height: 1.04;
    letter-spacing: -2.2px;
    font-weight: 800;
}

.rz-hero-title span {
    display: inline;
    background: linear-gradient(
        90deg,
        #387afb 0%,
        #01308C 48%,
        #06A6D8 100%
    );

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


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

.rz-hero-text {
    max-width: 650px;
    margin-bottom: 18px;

    color: var(--bs-slate-gray);

    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
}


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

.rz-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
}

.rz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 45px;
    padding: 0 20px;

    border-radius: 10px;

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

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* Primary button */

.rz-btn-primary {
    color: #fff;

    background: linear-gradient(
        100deg,
        #387afb 0%,
        #01308C 100%
    );

    border: 1px solid transparent;

    box-shadow: 0 10px 25px rgba(2, 87, 251, 0.22);
}

.rz-btn-primary:hover {
    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(2, 87, 251, 0.30);
}

.rz-btn-primary i {
    transition: transform 0.25s ease;
}

.rz-btn-primary:hover i {
    transform: translateX(4px);
}


/* Outline button */

.rz-btn-outline {
    color: var(--bs-dark-slate);

    background: rgba(255, 255, 255, 0.75);

    border: 1px solid #94A3B8;
}

.rz-btn-outline:hover {
    color: var(--bs-primary);

    background: #fff;
    border-color: var(--bs-primary);

    transform: translateY(-2px);
}


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

.rz-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 26px;
}

.rz-stats-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 40px;
}

.rz-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rz-stat-label {
    color: var(--bs-primary);
    font-size: 13px;
    font-weight: 700;
}

.rz-stat-value {
    color: var(--bs-dark-slate);
    font-size: 26px;
    font-weight: 800;
}

.rz-stats-trust {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rz-stats-trust-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

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

    color: #fff;

    background: linear-gradient(100deg, #387afb 0%, #01308C 100%);

    border-radius: 50%;

    font-size: 17px;
}

.rz-stats-stars {
    color: #F59E0B;
    font-size: 14px;
    margin-bottom: 3px;
}

.rz-stats-trust-text {
    margin: 0;
    color: var(--bs-slate-gray);
    font-size: 14px;
}

@media (max-width: 575.98px) {
    .rz-stats-numbers {
        gap: 20px 28px;
    }

    .rz-stat-value {
        font-size: 22px;
    }
}


/* =========================================
   RIGHT HERO IMAGE
========================================= */

.rz-hero-image-wrapper {
    position: relative;

    min-height: 560px;

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

.rz-hero-image-wrapper .rz-hero-swiper,
.rz-hero-image-wrapper .swiper-wrapper,
.rz-hero-image-wrapper .swiper-slide {
    width: 100%;
}

.rz-hero-image-wrapper .swiper-slide .rz-hero-image {
    margin: 0 auto;
}


/* Glow behind image */

.rz-glow {
    position: absolute;

    width: 470px;
    height: 470px;

    background:
        radial-gradient(
            circle,
            rgba(2, 87, 251, 0.16) 0%,
            rgba(2, 87, 251, 0.07) 38%,
            transparent 72%
        );

    border-radius: 50%;

    filter: blur(5px);
}


/* Actual image */

.rz-hero-image {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 700px;
    height: auto;

    object-fit: contain;

    transform: translateX(10px);

    filter:
        drop-shadow(0 25px 35px rgba(2, 87, 251, 0.12));

    animation: rzFloat 5s ease-in-out infinite;
}


/* Floating animation */

@keyframes rzFloat {
    0%,
    100% {
        transform: translateY(0) translateX(10px);
    }

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


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width: 1400px) {

    .rz-hero {
        padding: 0px 0 5px;
    }

    .rz-hero-title {
        font-size: 45px;
    }

    .rz-hero-image {
        max-width: 750px;
    }

    .rz-hero-image-wrapper {
        min-height: 620px;
    }
}


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

@media (max-width: 991.98px) {

    .rz-hero {
        padding: 60px 0 70px;
    }

    .rz-hero-title {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .rz-hero-text {
        max-width: 100%;
    }

    .rz-hero-image-wrapper {
        min-height: auto;
        margin-top: 10px;
    }

    .rz-hero-image {
        max-width: 650px;
        transform: none;
    }

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

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


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

@media (max-width: 575.98px) {

    .rz-hero {
        padding: 45px 0 55px;
    }

    .rz-badge {
        font-size: 12px;
        padding: 7px 12px;
        margin-bottom: 18px;
    }

    .rz-hero-title {
        font-size: 30px;
        line-height: 1.08;
        letter-spacing: -1.4px;
        margin-bottom: 18px;
    }

    .rz-hero-text {
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 25px;
    }

    .rz-benefits {
        grid-template-columns: 1fr;
        gap: 13px;
        margin-bottom: 27px;
    }

    .rz-benefit {
        font-size: 14px;
    }

    .rz-benefit-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 15px;
    }

    .rz-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .rz-btn {
        width: 100%;
        min-height: 52px;
        font-size: 15px;
    }

    .rz-hero-image-wrapper {
        margin-top: 5px;
    }

    .rz-hero-image {
        width: 115%;
        max-width: none;
        margin-left: -7.5%;
    }

    .rz-glow {
        width: 300px;
        height: 300px;
    }

}

/* Section width helpers */
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }

/* Hero Cards */
.dashboard-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
}

.floating-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: var(--bs-midnight);
    border-radius: 12px;
}

.hero-visual-img {
    max-width: 620px;
    width: 100%;
    animation: heroFloat 5s ease-in-out infinite;
}

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

/* Arrow links (Learn More, Read Case Study) */
.link-arrow .arrow-icon {
    display: inline-block;
    transition: transform 0.25s ease;
}

.link-arrow:hover .arrow-icon {
    transform: translateX(5px);
}

.link-arrow:hover {
    color: var(--bs-primary-hover) !important;
}

/* Keyword/industry pill badges */
.badge.bg-white.text-dark.border {
    transition: all 0.25s ease;
    cursor: default;
}

.badge.bg-white.text-dark.border:hover {
    background-color: var(--bs-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--bs-primary) !important;
    transform: translateY(-2px);
}

.badge.bg-secondary,
.badge.bg-light.text-dark.border {
    transition: all 0.25s ease;
    cursor: default;
}

.badge.bg-secondary:hover,
.badge.bg-light.text-dark.border:hover {
    background-color: var(--bs-primary) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

/* Generic hover-lift for info/stat/portfolio boxes */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1);
    border-color: var(--bs-primary);
}

/* Service Cards */
.service-card {
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    background: #FFFFFF;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: var(--bs-primary);
    box-shadow: 0 16px 30px rgba(2, 87, 251, 0.12);
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.3s ease;
}

.logo-ticker-area {
    background: #FFFFFF;
    overflow: hidden;
}

.logo-slider-wrapper {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-slide-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    will-change: transform;
    animation: rz-logo-scroll 32s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
    .logo-slider-wrapper:hover .logo-slide-track {
        animation-play-state: paused;
    }
}

.slide-item {
    flex: 0 0 auto;
}

.ticker-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

@keyframes rz-logo-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 575.98px) {
    .logo-slide-track {
        gap: 40px;
    }

    .ticker-logo {
        width: 48px;
        height: 48px;
    }
}

.service-card:hover .icon-box {
    transform: scale(1.1) rotate(-4deg);
}

#services .icon-box {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    font-size: 26px;
}

.icon-box-sm {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.chip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px) {
    .chip-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Logo */
.navbar-logo {
    height: 60px;
    width: auto;
}

.footer-logo-badge {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
}

.footer-logo-badge img {
    height: 44px;
    width: auto;
}

/* Process Steps */
.process-step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.process-step:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--bs-emerald);
}

.process-step-num {
    font-size: 30px;
    font-weight: 800;
    color: var(--bs-emerald);
    margin-bottom: 6px;
    line-height: 1;
}

/* Career role cards */
.career-role-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.career-role-card:hover {
    transform: translateY(-6px);
    border-color: var(--bs-primary);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

.career-role-card ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.career-role-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: var(--bs-slate-gray);
    margin-bottom: 8px;
}

.career-role-card ul li i {
    color: var(--bs-emerald);
    margin-top: 3px;
    font-size: 11px;
}

/* Accordion */
.accordion-item {
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-soft-gray);
    color: var(--bs-primary);
    font-weight: 700;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: #E2E8F0;
}

.faq-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* FAQ - flat always-visible list (no collapse, fully crawlable) */
.max-w-1000 { max-width: 1000px; }

.faq-flat-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.faq-mark {
    font-size: 60px;
    font-weight: 800;
    line-height: 1;
    color: var(--bs-indigo);
    flex-shrink: 0;
}

/* Pricing Pills */
#pricingTabs .nav-link {
    border-radius: 999px;
    border: 2px solid var(--bs-primary);
    color: var(--bs-primary);
    background: #FFFFFF;
    transition: all 0.25s ease;
}

#pricingTabs .nav-link:hover {
    background: var(--bs-primary-subtle, #EFF6FF);
}

#pricingTabs .nav-link.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #FFFFFF;
    box-shadow: 0 6px 14px rgba(2, 87, 251, 0.3);
}

/* Pricing Cards */
.pricing-most-popular-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bs-primary);
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);
    white-space: nowrap;
}

.pricing-tier-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-primary);
    margin-bottom: 6px;
}

.pricing-card.pricing-featured .pricing-tier-label {
    color: rgba(255, 255, 255, 0.85);
}

.pricing-card {
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #FFFFFF;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

.pricing-card.pricing-featured {
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-hover) 100%);
    border: none;
    color: #FFFFFF;
    transform: scale(1.05);
    box-shadow: 0 25px 50px rgba(2, 87, 251, 0.28);
}

.pricing-card.pricing-featured:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: 0 30px 60px rgba(2, 87, 251, 0.4);
}

.pricing-card.pricing-featured .text-slate,
.pricing-card.pricing-featured .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

.pricing-card.pricing-featured .btn-primary {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--bs-primary);
}

.pricing-card.pricing-featured .btn-primary:hover {
    background: var(--bs-soft-gray);
    color: var(--bs-primary);
    transform: translateY(-2px);
}

.pricing-card.pricing-featured li i {
    color: #FFFFFF !important;
}

/* Testimonial Carousel (pagination dots only, no arrows) */
.testimonial-carousel .carousel-inner {
    padding-top: 12px;
    margin-top: -12px;
}

.testimonial-carousel .carousel-control-prev,
.testimonial-carousel .carousel-control-next {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    bottom: auto;
}

.testimonial-carousel .carousel-control-prev {
    left: -10px;
}

.testimonial-carousel .carousel-control-next {
    right: -10px;
}

.testimonial-carousel .carousel-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
    transition: all 0.25s ease;
}

.testimonial-carousel .carousel-control-prev:hover .carousel-nav-btn,
.testimonial-carousel .carousel-control-next:hover .carousel-nav-btn {
    background: var(--bs-primary);
    color: #FFFFFF;
    border-color: var(--bs-primary);
    transform: scale(1.08);
}

@media (max-width: 767.98px) {
    .testimonial-carousel .carousel-control-prev,
    .testimonial-carousel .carousel-control-next {
        display: none;
    }

    .testimonial-carousel .carousel-item .row > div:nth-child(2) {
        display: none;
    }
}

.testimonial-carousel .carousel-indicators {
    position: static;
    margin-top: 28px;
    margin-bottom: 0;
}

.testimonial-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #E2E8F0;
    opacity: 1;
    border: none;
    margin: 0 5px;
    transition: all 0.25s ease;
}

.testimonial-carousel .carousel-indicators .active {
    background-color: var(--bs-primary);
    width: 28px;
    border-radius: 5px;
}

/* Testimonial Cards */
.testimonial-card {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(2, 87, 251, 0.18);
    border-radius: 24px;
    box-shadow: 0 0 0 4px rgba(2, 87, 251, 0.05), 0 10px 24px rgba(2, 87, 251, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 2rem !important;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(2, 87, 251, 0.09), 0 16px 28px rgba(2, 87, 251, 0.1);
}

/* Quote icon / star rating hidden to match the flat reference card design */
.testimonial-quote-icon,
.testimonial-card .text-warning {
    display: none;
}

.testimonial-card h6 {
    color: var(--bs-primary);
    font-size: 1rem;
}

.testimonial-card p {
    color: var(--bs-slate-gray) !important;
    font-style: normal !important;
}

.testimonial-card .border-top {
    border-top: none !important;
    padding-top: 0 !important;
}

.testimonial-card .rounded-circle {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 auto;
    font-size: 15px;
}

.testimonial-card small,
.testimonial-card .text-muted,
.testimonial-card .card-text {
    color: var(--bs-slate-gray) !important;
    font-style: normal !important;
}

.testimonial-card small {
    font-size: 12px;
}

/* Testimonial Swiper (single-card continuous slide, replaces Bootstrap carousel) */
.testimonial-swiper {
    padding: 12px 12px 56px;
}

.testimonial-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.testimonial-swiper .swiper-slide > .testimonial-card {
    width: 100%;
}

.testimonial-swiper .swiper-button-prev,
.testimonial-swiper .swiper-button-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: var(--bs-primary);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
    transition: all 0.25s ease;
    top: 50%;
    margin-top: -22px;
}

.testimonial-swiper .swiper-button-prev::after,
.testimonial-swiper .swiper-button-next::after {
    font-size: 14px;
    font-weight: 900;
}

.testimonial-swiper .swiper-button-prev {
    left: -6px;
}

.testimonial-swiper .swiper-button-next {
    right: -6px;
}

.testimonial-swiper .swiper-button-prev:hover,
.testimonial-swiper .swiper-button-next:hover {
    background: var(--bs-primary);
    color: #FFFFFF;
    border-color: var(--bs-primary);
    transform: scale(1.08);
}

.testimonial-swiper .swiper-pagination {
    position: static;
    margin-top: 28px;
}

.testimonial-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #E2E8F0;
    opacity: 1;
    margin: 0 5px !important;
    transition: all 0.25s ease;
}

.testimonial-swiper .swiper-pagination-bullet-active {
    background-color: var(--bs-primary);
    width: 28px;
    border-radius: 5px;
}

.testimonial-swiper .swiper-button-prev,
.testimonial-swiper .swiper-button-next {
    display: none !important;
}

/* Certifications & Awards Swiper */
.certifications-swiper {
    padding: 12px 46px 56px;
}

.cert-logo {
    max-height: 150px;
    width: auto;
    object-fit: contain;
}

.certifications-swiper .swiper-button-prev,
.certifications-swiper .swiper-button-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: var(--bs-dark-slate);
    box-shadow: 0 6px 16px rgba(2, 87, 251, 0.08);
    top: 50%;
    margin-top: -22px;
}

.certifications-swiper .swiper-button-prev::after,
.certifications-swiper .swiper-button-next::after {
    font-size: 14px;
    font-weight: 900;
}

.certifications-swiper .swiper-button-prev {
    left: 0;
}

.certifications-swiper .swiper-button-next {
    right: 0;
}

.certifications-swiper .swiper-button-prev:hover,
.certifications-swiper .swiper-button-next:hover {
    background: var(--bs-primary);
    color: #FFFFFF;
    border-color: var(--bs-primary);
    transform: scale(1.08);
}

.certifications-swiper .swiper-pagination {
    position: static;
    margin-top: 28px;
}

.portfolio-swiper .swiper-pagination {
    position: static;
    margin-top: 32px;
}

.portfolio-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #E2E8F0;
    opacity: 1;
    margin: 0 5px !important;
    transition: all 0.25s ease;
}

.portfolio-swiper .swiper-pagination-bullet-active {
    background-color: var(--bs-primary);
    width: 28px;
    border-radius: 5px;
}

.certifications-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #E2E8F0;
    opacity: 1;
    margin: 0 5px !important;
    transition: all 0.25s ease;
}

.certifications-swiper .swiper-pagination-bullet-active {
    background-color: var(--bs-primary);
    width: 28px;
    border-radius: 5px;
}

.certifications-swiper .swiper-button-lock {
    display: flex !important;
}

@media (max-width: 767.98px) {
    .certifications-swiper .swiper-button-prev,
    .certifications-swiper .swiper-button-next {
        display: none !important;
    }
}

/* Blogs & Resources Swiper */
.blog-swiper-shell {
    position: relative;
    padding: 12px 46px 56px;
}

.blog-swiper {
    overflow: hidden;
}

.blog-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.blog-swiper .swiper-slide > .card {
    width: 100%;
}

.blog-swiper-shell .swiper-button-prev,
.blog-swiper-shell .swiper-button-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: var(--bs-dark-slate);
    box-shadow: 0 6px 16px rgba(2, 87, 251, 0.08);
    top: 50%;
    margin-top: -22px;
}

.blog-swiper-shell .swiper-button-prev::after,
.blog-swiper-shell .swiper-button-next::after {
    font-size: 14px;
    font-weight: 900;
}

.blog-swiper-shell .swiper-button-prev {
    left: 0;
}

.blog-swiper-shell .swiper-button-next {
    right: 0;
}

.blog-swiper-shell .swiper-button-prev:hover,
.blog-swiper-shell .swiper-button-next:hover {
    background: var(--bs-primary);
    color: #FFFFFF;
    border-color: var(--bs-primary);
    transform: scale(1.08);
}

.blog-swiper-shell .swiper-pagination {
    position: static;
    margin-top: 28px;
}

.blog-swiper-shell .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #E2E8F0;
    opacity: 1;
    margin: 0 5px !important;
    transition: all 0.25s ease;
}

.blog-swiper-shell .swiper-pagination-bullet-active {
    background-color: var(--bs-primary);
    width: 28px;
    border-radius: 5px;
}

.blog-swiper-shell .swiper-button-lock {
    display: flex !important;
}

@media (max-width: 575.98px) {
    .blog-swiper-shell {
        padding: 12px 12px 56px;
    }

    .blog-swiper-shell .swiper-button-prev,
    .blog-swiper-shell .swiper-button-next {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }

    .blog-swiper-shell .swiper-button-prev {
        left: -4px;
    }

    .blog-swiper-shell .swiper-button-next {
        right: -4px;
    }
}


/* Gutenberg button color bridge: rz-btn-primary/outline land on the wrapping .wp-block-button div, not the inner link */
.wp-block-button.rz-btn-primary > .wp-block-button__link {
    color: #fff;
    background: linear-gradient(100deg, #387afb 0%, #01308C 100%);
}
.wp-block-button.rz-btn-primary:hover > .wp-block-button__link {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(2, 87, 251, 0.30);
}
.wp-block-button.rz-btn-outline > .wp-block-button__link {
    color: var(--bs-dark-slate);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #94A3B8;
}
.wp-block-button.rz-btn-outline:hover > .wp-block-button__link {
    color: var(--bs-primary);
    background: #fff;
    border-color: var(--bs-primary);
    transform: translateY(-2px);
}
.wp-block-image.rz-hero-image img {
    width: 100%;
}


/* Gutenberg content-grid helper classes used on injected pages */
.rz-card-grid { column-gap: 20px; row-gap: 20px; }
.rz-card-grid > .why-item {
    flex: 1 1 260px;
    padding: 16px 20px;
    background: #fff;
    border-left: 3px solid var(--bs-primary);
    border-radius: 0 10px 10px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.rz-card-grid > .service-card { flex: 1 1 260px; }
.rz-process-grid { column-gap: 12px; row-gap: 12px; }
.rz-process-grid > .process-step { flex: 1 1 150px; max-width: 190px; }
.rz-cta-light .wp-block-button__link {
    background: #fff !important;
    color: var(--bs-primary) !important;
}


/* WPForms - match original Bootstrap contact form */
.rz-form-card .wpforms-container { margin: 0; }
.rz-form-card .wpforms-field-container { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.rz-form-card .wpforms-field { width: 100%; padding: 0 8px 16px; margin: 0; }
@media (min-width: 768px) {
    .rz-form-card .wpforms-field.wpforms-one-half { width: 50%; }
}
.rz-form-card .wpforms-field-label {
    display: block; font-size: .875em; font-weight: 600; color: #0F172A; margin-bottom: .5rem;
}
.rz-form-card .wpforms-required-label { color: #dc3545; margin-left: 2px; }
.rz-form-card input[type=text], .rz-form-card input[type=email], .rz-form-card input[type=tel],
.rz-form-card select, .rz-form-card textarea {
    display: block; width: 100%; max-width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5;
    color: #212529; background-color: #fff; border: 1px solid #dee2e6; border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; font-family: inherit;
}
.rz-form-card select {
    appearance: none; padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
}
.rz-form-card textarea { height: auto; min-height: 120px; resize: vertical; }
.rz-form-card input:focus, .rz-form-card select:focus, .rz-form-card textarea:focus {
    border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.rz-form-card label.wpforms-error, .rz-form-card em.wpforms-error { display: block; color: #dc3545; font-size: .8rem; font-style: normal; margin-top: 4px; }
.rz-form-card input.wpforms-error, .rz-form-card select.wpforms-error, .rz-form-card textarea.wpforms-error { border-color: #dc3545; }
.rz-form-card .wpforms-submit-container { padding: 0; margin: 0; position: relative; }
.rz-form-card button.wpforms-submit {
    width: 100%; color: #fff; background-color: var(--bs-primary); border: 1px solid var(--bs-primary);
    font-weight: 700; font-size: 1rem; padding: 12px 28px; border-radius: 8px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 87, 251, 0.3); transition: all 0.3s ease;
}
.rz-form-card button.wpforms-submit:hover { background-color: var(--bs-primary-hover); border-color: var(--bs-primary-hover); transform: translateY(-2px); }
.rz-form-card .wpforms-submit-spinner { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; }
.rz-form-card .wpforms-confirmation-container-full {
    background: #ECFDF5; border: 1px solid #10B981; color: #065F46; border-radius: 8px; padding: 16px 20px;
}
.rz-form-card .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }
.rz-form-card .wpforms-field-hp { display: none !important; }

/* Blog single post (dbpagency-style layout) */
.rz-post-hero { background: #EEF4FF; padding: 64px 0; }
.rz-post-hero-img { box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08); width: 100%; }
.rz-post-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1.15; color: var(--bs-dark-slate); margin-bottom: 16px; }
.rz-post-meta { display: flex; flex-wrap: wrap; gap: 20px; color: var(--bs-slate-gray); font-size: .95rem; margin-bottom: 24px; }
.rz-post-section { padding: 64px 0; }
.rz-post-section.rz-bg-tint { background: #EEF4FF; }
.rz-post-section.rz-bg-white { background: #FFFFFF; }
.rz-post-intro { background: #FFFFFF; }
.rz-post-intro-img { width: 100%; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08); }
.rz-post-body .rz-post-h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.2; color: var(--bs-dark-slate); margin-bottom: 18px; }
.rz-post-body .rz-post-h3 { font-size: 1.3rem; font-weight: 700; color: var(--bs-dark-slate); margin: 28px 0 12px; }
.rz-post-body .rz-post-text { color: #1E293B; font-size: 1.02rem; line-height: 1.75; margin-bottom: 16px; }
.rz-post-body .rz-post-lead { margin-top: 24px; margin-bottom: 10px; }
.rz-post-body .rz-post-list { padding-left: 1.4rem; margin-bottom: 20px; color: #1E293B; line-height: 1.8; }
.rz-post-body .rz-post-list li::marker { color: var(--bs-primary); }
.rz-post-body .rz-post-example { background: #FFFFFF; border-left: 4px solid var(--bs-primary); border-radius: 8px; padding: 14px 18px; font-style: italic; color: var(--bs-dark-slate); margin-bottom: 16px; }
.rz-post-body .rz-bg-white .rz-post-example { background: #EEF4FF; }
.rz-post-cta { padding: 72px 0; background: linear-gradient(100deg, #387afb 0%, #01308C 100%); color: #FFFFFF; }
.rz-post-body .rz-post-cta-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: #FFFFFF; margin-bottom: 12px; }
.rz-post-body .rz-post-cta-text { color: rgba(255, 255, 255, 0.85); max-width: 720px; margin: 0 auto 24px; }
.rz-post-faq { background: var(--bs-soft-gray); }
@media (max-width: 767px) {
    .rz-post-hero, .rz-post-section { padding: 44px 0; }
    .rz-post-cta { padding: 52px 0; }
}

/* Blog page hero: background image + title only */
.rz-blog-hero {
    position: relative;
    padding: 120px 0;
    background: url('/wp-content/uploads/2026/09/hero-sec-image.png') center / cover no-repeat;
}
.rz-blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(1, 48, 140, 0.88) 0%, rgba(56, 122, 251, 0.75) 100%);
}
.rz-blog-hero .container { position: relative; z-index: 1; }
.rz-blog-hero-title { color: #FFFFFF; font-weight: 800; font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: 4px; margin: 0; }
@media (max-width: 767px) { .rz-blog-hero { padding: 80px 0; } }

/* ===== Elementor pages =====
   Elementor's base CSS is loaded inside @layer elementor (see functions.php), so Bootstrap and theme
   rules always win over it. These zero-specificity defaults make containers and widgets behave like
   the original plain HTML; anything set in the Elementor panel still overrides them. */
:where(.rz-elementor-page .e-con) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--gap: 0px;
	--width: auto;
	--container-widget-width: auto;
	--flex-wrap: nowrap;
	--flex-wrap-mobile: nowrap;
}
:where(.rz-elementor-page .elementor-widget-image) {
	text-align: inherit;
}
:where(.rz-elementor-page .elementor-widget-image img) {
	max-width: none;
	display: inline;
}
:where(.rz-elementor-page .elementor-widget-button .elementor-button-content-wrapper) {
	display: inline-flex;
	align-items: center;
	gap: inherit;
}
/* Containers converted from plain divs keep normal block flow (margins collapse, sliders size correctly) */
:where(.rz-elementor-page .e-con.rz-block) {
	display: block;
}
:where(.rz-elementor-page .e-con) {
	min-width: 0;
}
:where(.rz-elementor-page .e-con > .elementor-widget) {
	min-width: auto;
}
/* Inline items (links, badges) that sat directly in a flex layout were block boxes there; keep that */
:where(.rz-elementor-page .rz-flex-item > :is(a, span, i, strong, small, em, b)),
:where(.rz-elementor-page .rz-flex-item > .elementor-widget-container > :is(a, span, i, strong, small, em, b)) {
	display: block;
}
/* Blocks that sat directly in a flex layout kept their inner margins; flow-root does the same inside the widget */
:where(.rz-elementor-page .e-con:not(.rz-block) > .elementor-widget-text-editor > :is(p, ul, ol, div, blockquote)),
:where(.rz-elementor-page .e-con:not(.rz-block) > .elementor-widget-text-editor > .elementor-widget-container > :is(p, ul, ol, div, blockquote)) {
	display: flow-root;
}


/* =========================================
   WHATSAPP / CALL BUTTONS
========================================= */

.btn-whatsapp-outline {
    border: 1px solid #E2E8F0;
    color: var(--bs-dark-slate);
    background: #ffffff;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Navbar Call Now / Whatsapp: match padding so both buttons are the same, compact size */
.navbar .btn-primary,
.navbar .btn-whatsapp-outline {
    padding: 10px 18px;
}

.btn-whatsapp-outline i {
    color: #25D366;
}

.btn-whatsapp-outline:hover {
    border-color: #25D366;
    color: #128C7E;
    background: #ffffff;
}

.rz-float-btn {
    position: fixed;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 1050;
    text-decoration: none;
}

.rz-float-btn:hover,
.rz-float-btn:focus,
.rz-float-btn:active {
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.3);
}

.rz-float-call {
    left: 24px;
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-hover) 100%);
}

.rz-float-whatsapp {
    right: 24px;
    background: #25D366;
}

@media (max-width: 576px) {
    .rz-float-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
        bottom: 16px;
    }
    .rz-float-call {
        left: 16px;
    }
    .rz-float-whatsapp {
        right: 16px;
    }
}

.testimonial-card h3 {
    color: var(--bs-primary);
    font-size: 1rem;
}