/* Common Style starts */
:root {
    --page-primary-bg: #1778BE;
    --page-secondary-bg: #FAFAFA;
    --page-theme: #000000;
    --page-theme-secondary: #EF4335;
    --page-current: linear-gradient(225.7deg, #18384D 12.23%, #15181F 74.69%);
    --text-theme: #1E1E1E;
    --tick-icon: url(../images/outsource-ppc/tick.png);
    --tick-w-icon: url(../images/outsource-ppc/tick-w.png);
}

.page-primary-bg {
    background-color: var(--page-primary-bg);
}

.page-secondary-bg {
    background-color: var(--page-secondary-bg);
}

.page-theme {
    background-color: var(--page-theme);
}

.light-bg {
    background-color: #FAF4F4;
}

.page-current {
    background: var(--page-current);
}

.text-theme {
    color: var(--text-theme);
}

.bg-secondary {
    background-color: var(--page-theme-secondary) !important;
}

.rounded-20 {
    border-radius: 20px;
}

.text-secondary {
    color: var(--page-theme-secondary) !important;
}

.link-white {
    text-decoration: underline !important;
    color: var(--white-color) !important;
}

.object-cover {
    object-fit: cover;
}

.sections-wrapper h1,
.sections-wrapper .h1,
.sections-wrapper h2,
.sections-wrapper .h2,
.sections-wrapper h3,
.sections-wrapper .h3,
.sections-wrapper h4,
.sections-wrapper .h4,
.sections-wrapper h5,
.sections-wrapper .h5,
.sections-wrapper h6,
.sections-wrapper .h6 {
    color: var(--text-theme) !important;
}

.sections-wrapper .page-text {
    color: var(--page-primary-bg) !important;
}

.sections-wrapper .w-normal {
    font-weight: 400 !important;
}

.sections-wrapper .text-white {
    color: var(--white-color) !important;
}

.button-primary {
    color: var(--white-color);
    background-color: var(--page-theme) !important;
}

.button-primary:hover {
    color: var(--white-color) !important;
    background-color: var(--page-primary-bg) !important;
}

.button-primary.button-primary-light {
    background: var(--white-color) !important;
    color: var(--text-theme);
    border: 1px solid var(--white-color);
}

.button-primary.button-primary-light:hover {
    color: var(--white-color) !important;
    background-color: var(--page-theme) !important;
    border-color: var(--page-theme) !important;
}

.button svg {
    animation: pulso 2s infinite;
    border-radius: 100px;
}

.z-1 {
    position: relative;
    z-index: 1;
}

@keyframes pulso {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }

    70% {
        -moz-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }

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

.highlight-text {
    position: relative;
    padding-inline: 20px;
    margin-left: -20px;
    color: #FFF;
}

.highlight-text::before {
    height: 100%;
    content: '';
    background-color: var(--page-theme-secondary);
    padding: 20px;
    color: #FFF;
    width: 100%;
    position: absolute;
    border-radius: 100px;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Hero Section */

.hero-section {
    background-image: url(../images/outsource-ppc/hero-bg.webp);
    background-position: center;
    background-size: cover;
    position: relative;
}

.tick-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tick-list.listgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.tick-list li {
    font-size: 20px;
    padding: 0 0 0 38px;
    position: relative;
}

.tick-list li::before {
    content: '';
    background-image: url(../images/outsource-ppc/tick.png);
    display: inline-block;
    position: absolute;
    inset: 1px auto 0 0;
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
}

.tick-list.white li::before {
    background-image: var(--tick-w-icon);
}

.counter-wrap {
    background: #FFEBE9;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
}

.counter-wrap h2 {
    color: var(--page-theme-secondary) !important;
}

.counter img {
    min-height: 265px;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.about-content {
    padding: 50px;
    border-radius: 20px;
    background-color: var(--page-theme-secondary);
}

.cta-block {
    background-color: #FAF4F4;
    border-radius: 20px;
    padding: 70px 50px;
    position: relative;
}

.cta_img-left {
    position: absolute;
    left: 50px;
    top: 50%;
    height: 100%;
    transform: translateY(-50%);
}

.cta_img-right {
    position: absolute;
    right: 50px;
    top: 50%;
    height: 100%;
    transform: translateY(-50%);
}

.tab-pane {
    background-color: #FFF;
    padding: 50px;
    border-radius: 20px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-link {
    cursor: pointer;
    transition: 0.3s ease;
}

.tab-link p {
    transition: all 0.3s ease;
}

.tab-link.active p {
    color: var(--page-theme-secondary) !important;
    font-weight: 600;
}

.theme-box,
.step-content {
    padding: 30px;
    border: 4px solid #F7F4FF;
    border-radius: 20px;
    height: 100%;
}