/* ==========================================================
   Social Media Marketing & Paid Advertising
   Growth Engine Section
   Advanced Responsive CSS
   Part 1
========================================================== */


/* ================================
   Root Variables
================================ */

:root {

    --ra-white: #ffffff;

    --ra-dark-blue: #0b1f3a;

    --ra-primary-blue: #123c73;

    --ra-light-blue: #eaf2ff;

    --ra-text-dark: #172033;

    --ra-text-light: #5f6b7a;

    --ra-border: rgba(11,31,58,0.12);

    --ra-shadow:
    0 20px 60px rgba(11,31,58,0.12);

    --ra-soft-shadow:
    0 10px 30px rgba(11,31,58,0.08);

    --ra-transition:
    all .45s cubic-bezier(.22,1,.36,1);

}




/* ================================
   Main Section
================================ */


.ra-growth-engine-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
    #ffffff;

    padding:
    clamp(70px,8vw,130px)
    20px;

    isolation: isolate;

}




/* Soft Background Effects */

.ra-growth-engine-section::before {


    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    right:-160px;

    background:
    radial-gradient(
    circle,
    rgba(18,60,115,.10),
    transparent 70%
    );

    border-radius:50%;

    z-index:-1;

    animation:
    raFloat 8s ease-in-out infinite;


}




.ra-growth-engine-section::after {


    content:"";

    position:absolute;

    width:300px;

    height:300px;

    bottom:-120px;

    left:-100px;

    background:
    radial-gradient(
    circle,
    rgba(11,31,58,.07),
    transparent 70%
    );

    border-radius:50%;

    z-index:-1;

}




/* ================================
   Container
================================ */


.ra-growth-container {


    width:100%;

    max-width:1280px;

    margin:auto;

}




/* ================================
   Intro Section
================================ */


.ra-growth-intro {


    max-width:850px;

    margin:
    0 auto 80px;

    text-align:center;

    animation:
    raFadeUp .9s ease forwards;


}




/* Tag */

.ra-growth-tag {


    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
    10px 22px;

    border-radius:50px;

    background:
    var(--ra-light-blue);

    color:
    var(--ra-primary-blue);

    font-size:14px;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

    margin-bottom:25px;

    position:relative;

    overflow:hidden;


}




.ra-growth-tag::before {


    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.8),
    transparent
    );

    transform:
    translateX(-120%);

    transition:
    .8s;


}



.ra-growth-tag:hover::before {

    transform:
    translateX(120%);

}




/* Heading */


.ra-growth-intro h2 {


    margin:0;

    font-size:
    clamp(34px,5vw,62px);

    line-height:1.12;

    font-weight:800;

    color:
    var(--ra-dark-blue);

    letter-spacing:-1.5px;


}




.ra-growth-intro h2 span {


    display:inline-block;

    background:
    linear-gradient(
    90deg,
    #0b1f3a,
    #1c5da8
    );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    position:relative;


}




.ra-growth-intro h2 span::after {


    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:4px;

    border-radius:10px;

    background:
    linear-gradient(
    90deg,
    #0b1f3a,
    #1c5da8
    );

    transform:
    scaleX(0);

    transform-origin:left;

    transition:
    .5s;


}



.ra-growth-intro:hover h2 span::after {


    transform:
    scaleX(1);


}




/* Description */


.ra-growth-intro p {


    max-width:780px;

    margin:
    30px auto 0;

    color:
    var(--ra-text-light);

    font-size:
    clamp(16px,1.4vw,19px);

    line-height:1.8;

}




/* ================================
   Animations
================================ */


@keyframes raFadeUp {


    from {

        opacity:0;

        transform:
        translateY(40px);

    }


    to {

        opacity:1;

        transform:
        translateY(0);

    }


}



@keyframes raFloat {


    0%,
    100% {

        transform:
        translateY(0);

    }


    50% {

        transform:
        translateY(35px);

    }


}




/* ================================
   Responsive Base
================================ */


@media(max-width:1024px){


    .ra-growth-intro {

        margin-bottom:60px;

    }


    .ra-growth-intro h2 {

        letter-spacing:-1px;

    }


}




@media(max-width:768px){


    .ra-growth-engine-section {

        padding:
        70px 18px;

    }


    .ra-growth-intro {

        margin-bottom:50px;

    }


    .ra-growth-intro p {

        line-height:1.7;

    }


}




@media(max-width:480px){


    .ra-growth-tag {

        font-size:12px;

        padding:
        8px 16px;

    }


    .ra-growth-intro h2 {

        font-size:34px;

    }


}

/* ==========================================================
   Social Media Marketing & Paid Advertising
   Growth Engine Section
   Advanced Responsive CSS
   Part 2
========================================================== */



/* ================================
   Growth Journey Wrapper
================================ */


.ra-growth-journey {

    position:relative;

    width:100%;

    min-height:620px;

    margin-bottom:100px;

    display:flex;

    justify-content:center;

    align-items:center;

}




/* ================================
   Center Growth Circle
================================ */


.ra-growth-center {


    width:190px;

    height:190px;

    border-radius:50%;

    background:
    linear-gradient(
    145deg,
    #0b1f3a,
    #123c73
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:32px;

    font-weight:800;

    letter-spacing:.5px;

    position:relative;

    z-index:5;

    box-shadow:

    0 25px 60px rgba(11,31,58,.35);

    animation:
    raPulse 4s infinite;


}




/* Inner Glow */


.ra-growth-center::before {


    content:"";

    position:absolute;

    inset:-15px;

    border-radius:50%;

    border:

    2px solid rgba(18,60,115,.25);

    animation:

    raRotate 8s linear infinite;


}




.ra-growth-center::after {


    content:"";

    position:absolute;

    inset:-35px;

    border-radius:50%;

    border:

    1px dashed rgba(18,60,115,.25);

    animation:

    raRotateReverse 14s linear infinite;


}





/* ================================
   Growth Steps
================================ */


.ra-growth-step {


    position:absolute;

    width:220px;

    padding:25px;

    background:

    rgba(255,255,255,.85);

    backdrop-filter:

    blur(12px);

    border-radius:24px;

    border:

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

    box-shadow:

    var(--ra-soft-shadow);

    transition:

    var(--ra-transition);

    z-index:3;


}





.ra-growth-step span {


    display:flex;

    width:45px;

    height:45px;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    var(--ra-light-blue);

    color:

    var(--ra-primary-blue);

    font-weight:800;

    margin-bottom:15px;


}



.ra-growth-step h3 {


    margin:0;

    color:

    var(--ra-dark-blue);

    font-size:18px;

    font-weight:750;


}




/* Hover Effect */


.ra-growth-step:hover {


    transform:

    translateY(-15px)
    scale(1.04);

    box-shadow:

    0 30px 70px rgba(11,31,58,.18);

    border-color:

    rgba(18,60,115,.35);


}




/* Positioning */


.step-1 {

    top:20px;

    left:8%;

}


.step-2 {

    top:180px;

    left:2%;

}


.step-3 {

    bottom:80px;

    left:10%;

}


.step-4 {

    top:180px;

    right:2%;

}


.step-5 {

    bottom:80px;

    right:10%;

}





/* Connecting Lines */


.ra-growth-journey::before {


    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    border:

    1px dashed rgba(18,60,115,.18);

    animation:

    raRotate 20s linear infinite;


}




/* ================================
   Service Grid
================================ */


.ra-service-grid {


    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:30px;

    margin-bottom:80px;


}





/* ================================
   Service Cards
================================ */


.ra-service-card {


    position:relative;

    padding:35px 30px;

    background:#ffffff;

    border-radius:28px;

    border:

    1px solid rgba(11,31,58,.10);

    overflow:hidden;

    transition:

    var(--ra-transition);

    box-shadow:

    0 10px 35px rgba(11,31,58,.06);


}





/* Moving Gradient */


.ra-service-card::before {


    content:"";

    position:absolute;

    width:120px;

    height:120px;

    top:-50px;

    right:-50px;

    background:

    radial-gradient(
    circle,
    rgba(18,60,115,.15),
    transparent 70%
    );

    border-radius:50%;

    transition:

    .5s;


}



.ra-service-card:hover::before {


    transform:

    scale(2.5);


}





.ra-service-card:hover {


    transform:

    translateY(-12px);

    box-shadow:

    0 35px 80px rgba(11,31,58,.15);


}




/* Number */


.ra-service-number {


    font-size:50px;

    font-weight:900;

    line-height:1;

    color:

    rgba(11,31,58,.08);

    margin-bottom:20px;

    transition:.4s;


}



.ra-service-card:hover .ra-service-number {


    color:

    rgba(18,60,115,.25);

    transform:

    translateX(8px);


}





/* Title */


.ra-service-card h3 {


    font-size:21px;

    color:

    var(--ra-dark-blue);

    margin-bottom:15px;

    line-height:1.3;


}




/* Description */


.ra-service-card p {


    color:

    var(--ra-text-light);

    font-size:15px;

    line-height:1.7;

    margin:0;


}





/* ================================
   Advanced Animations
================================ */


@keyframes raPulse {


    0% {

        transform:scale(1);

    }


    50% {

        transform:scale(1.08);

    }


    100% {

        transform:scale(1);

    }


}



@keyframes raRotate {


    from {

        transform:rotate(0deg);

    }


    to {

        transform:rotate(360deg);

    }


}



@keyframes raRotateReverse {


    from {

        transform:rotate(360deg);

    }


    to {

        transform:rotate(0deg);

    }


}





/* ================================
   Desktop Adjustment
================================ */


@media(max-width:1200px){


    .ra-service-grid {

        grid-template-columns:

        repeat(2,1fr);

    }


    .ra-growth-step {

        width:190px;

    }


}




/* ================================
   Tablet 1024x600 / 1024x768
================================ */


@media(max-width:1024px){


    .ra-growth-journey {

        min-height:700px;

    }


    .step-1 {

        left:0;

    }


    .step-3 {

        left:0;

    }


    .step-4 {

        right:0;

    }


    .step-5 {

        right:0;

    }


}




/* ================================
   Mobile
================================ */


@media(max-width:768px){


    .ra-growth-journey {


        min-height:auto;

        display:flex;

        flex-direction:column;

        gap:25px;

    }


    .ra-growth-journey::before {

        display:none;

    }


    .ra-growth-step {


        position:relative;

        top:auto;

        left:auto;

        right:auto;

        bottom:auto;

        width:100%;

        max-width:350px;


    }


    .ra-growth-center {

        width:150px;

        height:150px;

        font-size:25px;

        margin-bottom:20px;

    }


    .ra-service-grid {


        grid-template-columns:

        1fr;

        gap:22px;


    }


}

/* ==========================================================
   Social Media Marketing & Paid Advertising
   Growth Engine Section
   Advanced Responsive CSS
   Part 3
========================================================== */



/* ================================
   Platform List Wrapper
================================ */


.ra-platform-list {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

    padding-top:20px;

}




/* Platform Pills */


.ra-platform-list span {


    position:relative;

    padding:

    14px 28px;

    border-radius:50px;

    background:#ffffff;

    border:

    1px solid rgba(11,31,58,.12);

    color:

    var(--ra-dark-blue);

    font-size:15px;

    font-weight:650;

    letter-spacing:.3px;

    cursor:pointer;

    overflow:hidden;

    transition:

    var(--ra-transition);

    box-shadow:

    0 8px 25px rgba(11,31,58,.06);


}





/* Shine Animation */


.ra-platform-list span::before {


    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.9),

    transparent

    );

    transition:.8s;


}





.ra-platform-list span:hover::before {


    left:140%;


}




.ra-platform-list span:hover {


    background:

    linear-gradient(

    135deg,

    #0b1f3a,

    #123c73

    );

    color:#ffffff;

    transform:

    translateY(-8px);

    box-shadow:

    0 20px 45px rgba(11,31,58,.25);


}







/* ================================
   Floating Background Elements
================================ */


.ra-growth-engine-section .ra-growth-container::before {


    content:"";

    position:absolute;

    width:80px;

    height:80px;

    right:12%;

    bottom:18%;

    border-radius:50%;

    background:

    rgba(18,60,115,.08);

    animation:

    raSmallFloat 6s ease-in-out infinite;


}




.ra-growth-engine-section .ra-growth-container::after {


    content:"";

    position:absolute;

    width:45px;

    height:45px;

    left:15%;

    top:35%;

    border-radius:50%;

    background:

    rgba(11,31,58,.10);

    animation:

    raSmallFloat 5s ease-in-out infinite reverse;


}





@keyframes raSmallFloat {


    0%,
    100% {

        transform:

        translateY(0);

    }


    50% {

        transform:

        translateY(-25px);

    }


}







/* ================================
   Card Entrance Animation
================================ */


.ra-service-card {


    animation:

    raCardReveal .8s ease both;


}



.ra-service-card:nth-child(1){

    animation-delay:.1s;

}


.ra-service-card:nth-child(2){

    animation-delay:.2s;

}


.ra-service-card:nth-child(3){

    animation-delay:.3s;

}


.ra-service-card:nth-child(4){

    animation-delay:.4s;

}


.ra-service-card:nth-child(5){

    animation-delay:.5s;

}


.ra-service-card:nth-child(6){

    animation-delay:.6s;

}


.ra-service-card:nth-child(7){

    animation-delay:.7s;

}


.ra-service-card:nth-child(8){

    animation-delay:.8s;

}




@keyframes raCardReveal {


    from {

        opacity:0;

        transform:

        translateY(50px);

    }


    to {

        opacity:1;

        transform:

        translateY(0);

    }


}








/* ================================
   Tablet Optimization
   1024 x 600
   1024 x 768
================================ */


@media (min-width:769px) and (max-width:1100px){


    .ra-growth-journey {


        min-height:760px;

    }



    .ra-growth-center {


        width:160px;

        height:160px;

        font-size:28px;

    }



    .ra-growth-step {


        width:180px;

        padding:22px;

    }



    .ra-growth-step h3 {


        font-size:16px;

    }



    .ra-service-grid {


        grid-template-columns:

        repeat(2,1fr);

    }



    .ra-platform-list span {


        padding:

        12px 22px;

    }


}







/* ================================
   Small Tablet
================================ */


@media(max-width:900px){


    .ra-growth-journey {


        margin-bottom:70px;

    }



    .ra-growth-step {


        padding:20px;

    }


}







/* ================================
   Mobile Optimization
================================ */


@media(max-width:768px){


    .ra-platform-list {


        flex-direction:column;

        align-items:center;

    }



    .ra-platform-list span {


        width:100%;

        max-width:330px;

        text-align:center;

    }



    .ra-growth-engine-section .ra-growth-container::before,
    .ra-growth-engine-section .ra-growth-container::after {


        display:none;

    }



    .ra-service-card {


        padding:

        30px 24px;

    }



    .ra-service-number {


        font-size:42px;

    }



}







/* ================================
   Extra Small Mobile
================================ */


@media(max-width:420px){


    .ra-growth-engine-section {


        padding-left:15px;

        padding-right:15px;

    }



    .ra-service-card h3 {


        font-size:19px;

    }



    .ra-platform-list span {


        font-size:14px;

        padding:

        12px 18px;

    }



}





/* ================================
   Accessibility
================================ */


@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after {


        animation-duration:

        .01ms!important;

        animation-iteration-count:

        1!important;

        transition-duration:

        .01ms!important;

    }


}

/* ================================
   JavaScript Animation States
================================ */


.ra-growth-step,
.ra-service-card {

    opacity:0;

    transform:
    translateY(40px);

}


.ra-visible {


    opacity:1!important;

    transform:
    translateY(0)!important;

}



.ra-active-card {


    border-color:
    rgba(18,60,115,.5)!important;

    transform:
    translateY(-18px)
    scale(1.03)!important;


}



.ra-node-focus {


    z-index:10;

    box-shadow:

    0 40px 90px
    rgba(11,31,58,.25)!important;


}

/* ================================
   JS Part 2 Effects
================================ */


/* Cursor Glow */

.ra-cursor-glow {


    position:fixed;

    width:35px;

    height:35px;

    border-radius:50%;

    pointer-events:none;

    background:
    rgba(18,60,115,.15);

    transform:
    translate(-50%,-50%);

    z-index:9999;

    filter:
    blur(10px);

    transition:
    .08s linear;


}



/* Growth Button */

.ra-growth-button {


    display:inline-flex;

    padding:
    16px 34px;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    #0b1f3a,
    #123c73
    );

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;


}



.ra-growth-button:hover {


    box-shadow:

    0 20px 50px
    rgba(11,31,58,.35);


}





/* Mobile Touch */

.ra-touch-active {


    transform:
    scale(.97)!important;

}




/* Disable Cursor Glow on Touch Devices */

@media(max-width:768px){


    .ra-cursor-glow {

        display:none;

    }


}