.elementor-299 .elementor-element.elementor-element-307154a{--display:flex;--justify-content:center;--margin-top:-11px;--margin-bottom:-11px;--margin-left:-11px;--margin-right:-11px;--padding-top:-3px;--padding-bottom:-3px;--padding-left:-3px;--padding-right:-3px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-7f6f330 *//* =========================================================
   CHINTHU SAJI JOSEPH
   SERVICES PAGE
   PREMIUM PERFORMANCE MARKETING PORTFOLIO
   ========================================================= */

.services-page {
    --teal: #13ADAD;
    --black: #000000;
    --dark: #050808;
    --dark-2: #091010;
    --white: #ffffff;
    --muted: #8b9999;
    --border: rgba(19, 173, 173, 0.18);

    background: var(--black);
    color: var(--white);

    font-family: Arial, Helvetica, sans-serif;

    overflow: hidden;
}


/* =========================================================
   GLOBAL
   ========================================================= */

.services-page * {
    box-sizing: border-box;
}

.services-page a {
    text-decoration: none;
    color: inherit;
}

.services-page p,
.services-page h1,
.services-page h2,
.services-page h3 {
    margin: 0;
}


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

.services-hero {
    position: relative;
    min-height: 88vh;

    display: flex;
    align-items: center;

    padding: 150px 7vw 100px;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(19, 173, 173, 0.13),
            transparent 32%
        ),
        var(--black);
}


.services-hero-grid {
    width: 100%;
    max-width: 1400px;

    margin: auto;

    display: grid;
    grid-template-columns: 1fr 280px;

    gap: 80px;

    align-items: end;
}


.services-eyebrow {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 30px;

    color: var(--teal);

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

    letter-spacing: 0.25em;
}


.services-eyebrow span {
    display: inline-flex;

    width: 34px;
    height: 34px;

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

    border: 1px solid var(--teal);

    border-radius: 50%;

    font-size: 10px;
}


.services-hero h1 {
    max-width: 850px;

    font-size: clamp(60px, 8vw, 125px);

    line-height: 0.9;

    letter-spacing: -0.065em;

    font-weight: 600;
}


.services-hero h1 span {
    color: var(--teal);
}


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

    margin-top: 45px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.8;
}


.services-main-btn {
    display: inline-flex;

    align-items: center;
    gap: 25px;

    margin-top: 40px;

    padding: 17px 24px;

    border: 1px solid rgba(19, 173, 173, 0.4);

    color: var(--white);

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

    transition: 0.35s ease;
}


.services-main-btn span {
    color: var(--teal);

    font-size: 18px;

    transition: transform 0.35s ease;
}


.services-main-btn:hover {
    background: var(--teal);
    border-color: var(--teal);

    color: var(--black);
}


.services-main-btn:hover span {
    color: var(--black);

    transform: translate(4px, -4px);
}


/* HERO SIDE */

.services-hero-side {
    padding-bottom: 15px;
}


.services-number {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.services-number span {
    color: var(--teal);

    font-size: 70px;

    line-height: 1;

    letter-spacing: -0.05em;
}


.services-number small {
    color: var(--muted);

    font-size: 9px;

    letter-spacing: 0.25em;
}


.services-line {
    width: 100%;
    height: 1px;

    margin: 30px 0;
    
    background: var(--border);
}


.services-hero-side p {
    color: #b5c0c0;

    font-size: 14px;

    line-height: 1.8;

    letter-spacing: 0.04em;
}


/* =========================================================
   SERVICES SECTION
   ========================================================= */

.services-list {
    padding: 120px 7vw;

    background: var(--dark);
}


.services-section-heading {
    max-width: 1400px;

    margin: auto auto 70px;

    display: grid;

    grid-template-columns: 1fr 350px;

    gap: 80px;

    align-items: end;
}


.section-label {
    display: block;

    margin-bottom: 25px;

    color: var(--teal);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.25em;
}


.services-section-heading h2,
.approach-heading h2 {
    font-size: clamp(42px, 5vw, 72px);

    line-height: 0.95;

    letter-spacing: -0.05em;

    font-weight: 500;
}


.services-section-heading h2 span,
.approach-heading h2 span {
    color: var(--teal);
}


.services-section-heading > p {
    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

.service-cards {
    max-width: 1400px;

    margin: auto;

    display: grid;

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

    gap: 1px;

    background: var(--border);

    border: 1px solid var(--border);
}


.service-card {
    position: relative;

    min-height: 510px;

    padding: 42px;

    display: flex;

    flex-direction: column;

    background: var(--black);

    transition:
        background 0.4s ease,
        transform 0.4s ease;
}


.service-card:hover {
    background: #071010;

    transform: translateY(-5px);

    z-index: 2;
}


.service-card.featured {
    background:
        linear-gradient(
            135deg,
            rgba(19, 173, 173, 0.09),
            transparent 55%
        ),
        var(--black);
}


.service-card-top {
    display: flex;

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

    margin-bottom: 75px;
}


.service-index {
    color: var(--teal);

    font-size: 11px;

    letter-spacing: 0.2em;
}


.service-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    border: 1px solid var(--border);

    border-radius: 50%;

    color: var(--teal);

    font-size: 18px;

    transition: 0.35s ease;
}


.service-card:hover .service-icon {
    background: var(--teal);

    color: var(--black);

    transform: rotate(45deg);
}


.service-card h3 {
    margin-bottom: 18px;

    font-size: 36px;

    font-weight: 500;

    letter-spacing: -0.04em;
}


.service-card-content > p {
    max-width: 500px;

    margin-bottom: 30px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}


.service-card ul {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.service-card li {
    position: relative;

    padding-left: 17px;

    color: #a9b5b5;

    font-size: 11px;

    letter-spacing: 0.03em;
}


.service-card li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 6px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--teal);
}


.service-link {
    display: flex;

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

    width: 100%;

    margin-top: auto;

    padding-top: 30px;

    border-top: 1px solid var(--border);

    color: var(--white);

    font-size: 11px;

    letter-spacing: 0.08em;

    transition: 0.3s ease;
}


.service-link span {
    color: var(--teal);

    font-size: 18px;

    transition: 0.3s ease;
}


.service-link:hover {
    color: var(--teal);
}


.service-link:hover span {
    transform: translateX(7px);
}


/* =========================================================
   APPROACH
   ========================================================= */

.service-approach {
    padding: 130px 7vw;

    background: var(--black);
}


.approach-heading {
    max-width: 1400px;

    margin: auto;
}


.approach-grid {
    max-width: 1400px;

    margin: 90px auto 0;

    display: grid;

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

    border-top: 1px solid var(--border);
}


.approach-item {
    min-height: 290px;

    padding: 30px 25px;

    border-right: 1px solid var(--border);

    transition: background 0.3s ease;
}


.approach-item:first-child {
    border-left: 1px solid var(--border);
}


.approach-item:hover {
    background: #061010;
}


.approach-item > span {
    color: var(--teal);

    font-size: 11px;

    letter-spacing: 0.15em;
}


.approach-item h3 {
    margin-top: 65px;

    margin-bottom: 18px;

    font-size: 22px;

    font-weight: 500;
}


.approach-item p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.8;
}


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

.services-cta {
    position: relative;

    min-height: 600px;

    padding: 120px 7vw;

    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 60px;

    align-items: center;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(19, 173, 173, 0.15),
            transparent 35%
        ),
        var(--dark-2);
}


.cta-number {
    color: var(--teal);

    font-size: 12px;

    letter-spacing: 0.2em;
}


.cta-content {
    max-width: 900px;
}


.cta-content h2 {
    font-size: clamp(55px, 7vw, 105px);

    line-height: 0.9;

    letter-spacing: -0.06em;

    font-weight: 500;
}


.cta-content h2 span {
    color: var(--teal);
}


.cta-content p {
    max-width: 550px;

    margin-top: 35px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}


.cta-button {
    display: inline-flex;

    align-items: center;

    gap: 25px;

    margin-top: 40px;

    padding: 18px 25px;

    background: var(--teal);

    color: var(--black);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.05em;

    transition: 0.3s ease;
}


.cta-button span {
    font-size: 18px;

    transition: 0.3s ease;
}


.cta-button:hover {
    background: var(--white);

    transform: translateY(-3px);
}


.cta-button:hover span {
    transform: translate(4px, -4px);
}


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

@keyframes servicesFadeUp {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.services-hero-content {
    animation: servicesFadeUp 1s ease forwards;
}


.services-hero-side {
    animation: servicesFadeUp 1s 0.2s ease both;
}


.service-card {
    animation: servicesFadeUp 0.8s ease both;
}


.service-card:nth-child(2) {
    animation-delay: 0.1s;
}


.service-card:nth-child(3) {
    animation-delay: 0.2s;
}


.service-card:nth-child(4) {
    animation-delay: 0.3s;
}


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

@media (max-width: 1000px) {

    .services-hero-grid {
        grid-template-columns: 1fr;
    }

    .services-hero-side {
        display: none;
    }

    .services-section-heading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .service-cards {
        grid-template-columns: 1fr;
    }

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

    .approach-item {
        border-bottom: 1px solid var(--border);
    }

    .services-cta {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


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

@media (max-width: 650px) {

    .services-hero {
        min-height: auto;

        padding: 130px 25px 80px;
    }


    .services-hero h1 {
        font-size: clamp(52px, 16vw, 80px);
    }


    .services-intro {
        font-size: 14px;

        margin-top: 30px;
    }


    .services-main-btn {
        margin-top: 30px;
    }


    .services-list {
        padding: 80px 20px;
    }


    .services-section-heading {
        margin-bottom: 50px;
    }


    .services-section-heading h2,
    .approach-heading h2 {
        font-size: 45px;
    }


    .service-card {
        min-height: 480px;

        padding: 30px 25px;
    }


    .service-card-top {
        margin-bottom: 55px;
    }


    .service-card h3 {
        font-size: 30px;
    }


    .service-card ul {
        grid-template-columns: 1fr;
    }


    .service-approach {
        padding: 80px 20px;
    }


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

        margin-top: 60px;
    }


    .approach-item {
        min-height: auto;

        padding: 30px 20px;

        border-left: 1px solid var(--border);
    }


    .approach-item h3 {
        margin-top: 40px;
    }


    .services-cta {
        min-height: 550px;

        padding: 80px 25px;
    }


    .cta-content h2 {
        font-size: 55px;
    }


    .cta-content p {
        font-size: 14px;
    }

}/* End custom CSS */