/* ==========================================================
   Performance Monitoring & Continuous Digital Growth
   Advanced CSS
   Part 1 : Base Layout + Funnel Structure

   Namespace:
   ra-performance-growth
========================================================== */


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

.ra-performance-growth-section {

    --ra-primary-blue: #003b8f;
    --ra-secondary-blue: #0066d6;
    --ra-light-blue: #eef6ff;
    --ra-dark-text: #071b35;
    --ra-body-text: #526174;
    --ra-border: rgba(0,59,143,0.15);

    width:100%;
    position:relative;

    background:#ffffff;

    padding:120px 20px;

    overflow:hidden;

}



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


.ra-performance-container {

    width:min(1200px,100%);

    margin:0 auto;

    position:relative;

}



/* ================================
   Header Section
================================ */


.ra-performance-header {


    max-width:850px;

    margin:0 auto 80px;

    text-align:center;


}



.ra-performance-tag {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:8px 22px;


    border-radius:50px;


    background:

    linear-gradient(

        135deg,

        rgba(0,59,143,.12),

        rgba(0,102,214,.08)

    );


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


    font-size:14px;

    font-weight:700;


    letter-spacing:1px;


    margin-bottom:25px;


}



.ra-performance-header h2 {


    margin:0 0 25px;


    font-size:clamp(34px,4vw,56px);


    line-height:1.15;


    font-weight:800;


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


}



.ra-performance-header h2 span {


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


}



.ra-performance-header p {


    max-width:780px;


    margin:auto;


    font-size:18px;


    line-height:1.8;


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


}



/* ================================
   Funnel Main Wrapper
================================ */


.ra-growth-funnel {


    position:relative;


    width:100%;


    padding-left:90px;


}



/* ================================
   Connecting Growth Line
================================ */


.ra-growth-funnel::before {


    content:"";


    position:absolute;


    left:35px;


    top:35px;


    bottom:35px;


    width:4px;


    border-radius:20px;



    background:

    linear-gradient(

        180deg,

        #003b8f,

        #008cff,

        #003b8f

    );


    background-size:100% 300%;


    animation:

    raGrowthFlow 5s linear infinite;


}



@keyframes raGrowthFlow {


    0% {

        background-position:0 0;

    }


    100% {

        background-position:0 300%;

    }

}



/* ================================
   Funnel Item Card
================================ */


.ra-growth-item {


    position:relative;


    margin-bottom:25px;


    background:#ffffff;


    border-radius:24px;


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


    overflow:hidden;


    transition:

    transform .4s ease,

    box-shadow .4s ease,

    border-color .4s ease;


}



.ra-growth-item:hover {


    transform:translateX(10px);


    border-color:

    rgba(0,102,214,.35);



    box-shadow:

    0 25px 60px rgba(0,59,143,.12);


}



/* ================================
   Number Circle
================================ */


.ra-growth-number {


    position:absolute;


    left:-90px;


    top:50%;


    transform:translateY(-50%);



    width:62px;


    height:62px;



    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50%;



    background:

    linear-gradient(

        135deg,

        #003b8f,

        #0066d6

    );



    color:#ffffff;


    font-size:17px;


    font-weight:800;



    box-shadow:

    0 0 0 10px rgba(0,102,214,.12);



}


/* ==========================================================
   Performance Monitoring & Continuous Digital Growth
   Advanced CSS
   Part 2 : Interactive Card Design + Effects
========================================================== */



/* ================================
   Growth Button / Heading Area
================================ */


.ra-growth-title {


    width:100%;


    display:flex;


    align-items:center;


    gap:20px;



    padding:28px 32px;



    background:transparent;


    border:none;


    cursor:pointer;


    text-align:left;


    position:relative;


    z-index:2;


}



.ra-growth-title:focus {


    outline:none;


}




/* ================================
   Heading Text
================================ */


.ra-growth-heading {


    flex:1;



    font-size:22px;


    line-height:1.4;


    font-weight:750;


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



    transition:

    color .35s ease,

    transform .35s ease;


}



.ra-growth-item:hover 

.ra-growth-heading {


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


}




/* ================================
   Plus Icon
================================ */


.ra-growth-icon {


    width:42px;


    height:42px;



    flex-shrink:0;



    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50%;



    background:

    linear-gradient(

        135deg,

        #eef6ff,

        #ffffff

    );



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



    font-size:28px;


    font-weight:400;



    border:1px solid rgba(0,59,143,.12);



    transition:

    transform .45s ease,

    background .45s ease,

    color .45s ease;



}



/* ================================
   Content Wrapper
================================ */


.ra-growth-content {


    max-height:0;


    overflow:hidden;


    opacity:0;



    padding:

    0 32px;



    transition:


    max-height .6s ease,


    opacity .4s ease,


    padding .4s ease;



}



/* ================================
   Content Paragraph
================================ */


.ra-growth-content p {


    margin:0;


    padding-top:5px;


    padding-bottom:10px;



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



    font-size:16px;


    line-height:1.8;



}



/* ================================
   Active Card State
================================ */


.ra-growth-item.active {


    border-color:

    rgba(0,102,214,.5);



    background:


    linear-gradient(

        135deg,

        #ffffff 20%,

        #f2f8ff

    );



    box-shadow:


    0 25px 70px rgba(0,59,143,.14);



}



/* Active Number Animation */


.ra-growth-item.active 

.ra-growth-number {


    animation:

    raPulseNumber 2s infinite;


}



@keyframes raPulseNumber {


    0%,100% {


        box-shadow:

        0 0 0 10px rgba(0,102,214,.12);


    }


    50% {


        box-shadow:

        0 0 0 18px rgba(0,102,214,.05);


    }


}



/* ================================
   Open Content State
================================ */


.ra-growth-item.active 

.ra-growth-content {


    max-height:300px;


    opacity:1;



    padding:


    0 32px 32px;



}




/* ================================
   Active Plus Icon Rotation
================================ */


.ra-growth-item.active 

.ra-growth-icon {


    transform:rotate(45deg);



    background:


    linear-gradient(

        135deg,

        #003b8f,

        #0066d6

    );



    color:#ffffff;



}



/* ================================
   Premium Glow Border Effect
================================ */


.ra-growth-item.active::before {


    content:"";


    position:absolute;


    inset:0;



    border-radius:24px;



    padding:1px;



    background:


    linear-gradient(

        120deg,

        transparent,

        rgba(0,140,255,.8),

        transparent

    );



    -webkit-mask:


    linear-gradient(#fff 0 0)

    content-box,

    linear-gradient(#fff 0 0);



    -webkit-mask-composite:xor;



    mask-composite:exclude;



    animation:


    raBorderMove 3s linear infinite;



    pointer-events:none;


}




@keyframes raBorderMove {


    0% {


        transform:rotate(0deg);


    }


    100% {


        transform:rotate(360deg);


    }


}



/* ================================
   Background Floating Effects
================================ */


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


    content:"";


    position:absolute;


    width:400px;


    height:400px;



    top:-150px;


    right:-150px;



    background:


    radial-gradient(

        circle,

        rgba(0,102,214,.12),

        transparent 70%

    );



    border-radius:50%;


    animation:

    raFloatEffect 8s ease-in-out infinite;


}



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


    content:"";


    position:absolute;


    width:300px;


    height:300px;



    bottom:-120px;


    left:-120px;



    background:


    radial-gradient(

        circle,

        rgba(0,59,143,.08),

        transparent 70%

    );



    border-radius:50%;


    animation:

    raFloatEffect 10s ease-in-out infinite reverse;


}



@keyframes raFloatEffect {


    0%,100% {


        transform:translateY(0);


    }


    50% {


        transform:translateY(40px);


    }


}



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


.ra-growth-item {


    animation:


    raCardReveal .8s ease both;


}



.ra-growth-item:nth-child(1){

    animation-delay:.1s;

}


.ra-growth-item:nth-child(2){

    animation-delay:.2s;

}


.ra-growth-item:nth-child(3){

    animation-delay:.3s;

}



@keyframes raCardReveal {


    from {


        opacity:0;


        transform:translateY(30px);


    }



    to {


        opacity:1;


        transform:translateY(0);


    }


}

/* ==========================================================
   Performance Monitoring & Continuous Digital Growth
   Advanced CSS
   Part 3 : Complete Responsive Optimization
========================================================== */


/* ==========================================================
   Large Desktop Screens
   1440px +
========================================================== */

@media (min-width:1440px){


    .ra-performance-growth-section{

        padding:140px 40px;

    }


    .ra-performance-header h2{

        font-size:60px;

    }


    .ra-growth-heading{

        font-size:24px;

    }


    .ra-growth-title{

        padding:32px 40px;

    }


}




/* ==========================================================
   Desktop / Laptop
   1200px - 1439px
========================================================== */


@media (max-width:1439px){


    .ra-performance-growth-section{

        padding:110px 30px;

    }


    .ra-growth-funnel{

        padding-left:85px;

    }


}





/* ==========================================================
   Medium Laptop
   1024px - 1199px

   Optimized for:
   1024 x 768
========================================================== */


@media (max-width:1199px){


    .ra-performance-growth-section{

        padding:95px 25px;

    }



    .ra-performance-header{

        margin-bottom:60px;

    }



    .ra-performance-header h2{

        font-size:42px;

    }



    .ra-performance-header p{

        font-size:17px;

    }



    .ra-growth-funnel{

        padding-left:75px;

    }



    .ra-growth-funnel::before{

        left:30px;

    }



    .ra-growth-number{


        left:-75px;


        width:55px;


        height:55px;


        font-size:15px;


    }



    .ra-growth-heading{

        font-size:20px;

    }



    .ra-growth-title{

        padding:25px;

    }



}




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

   Special Fix
========================================================== */


@media (min-width:900px) and (max-width:1100px)
and (max-height:650px){



    .ra-performance-growth-section{

        padding:70px 25px;

    }



    .ra-performance-header{

        margin-bottom:45px;

    }



    .ra-performance-header h2{

        font-size:38px;

    }



    .ra-performance-header p{

        font-size:16px;

        line-height:1.6;

    }



    .ra-growth-item{

        margin-bottom:15px;

    }



    .ra-growth-title{

        padding:18px 25px;

    }



    .ra-growth-heading{

        font-size:18px;

    }



    .ra-growth-icon{

        width:36px;

        height:36px;

        font-size:22px;

    }



    .ra-growth-number{

        width:48px;

        height:48px;

        left:-68px;

    }



    .ra-growth-funnel::before{

        left:24px;

    }



}





/* ==========================================================
   Tablet Portrait
   768px - 899px
========================================================== */


@media (max-width:899px){



    .ra-performance-growth-section{

        padding:85px 20px;

    }



    .ra-performance-header h2{

        font-size:36px;

    }



    .ra-performance-header p{

        font-size:16px;

    }



    .ra-growth-funnel{

        padding-left:65px;

    }



    .ra-growth-number{


        left:-65px;


        width:48px;


        height:48px;


    }



    .ra-growth-heading{

        font-size:18px;

    }



    .ra-growth-title{

        padding:22px;

    }




}





/* ==========================================================
   Mobile Devices
   Up To 767px
========================================================== */


@media (max-width:767px){



    .ra-performance-growth-section{


        padding:70px 15px;


    }



    .ra-performance-header{

        margin-bottom:45px;

    }



    .ra-performance-tag{


        font-size:12px;


        padding:7px 18px;


    }



    .ra-performance-header h2{


        font-size:32px;


        line-height:1.25;


    }



    .ra-performance-header p{


        font-size:15px;


        line-height:1.7;


    }



    .ra-growth-funnel{


        padding-left:45px;


    }



    .ra-growth-funnel::before{


        left:18px;


        width:3px;


    }



    .ra-growth-item{


        border-radius:18px;


        margin-bottom:18px;


    }



    .ra-growth-number{


        left:-45px;


        width:36px;


        height:36px;


        font-size:12px;


        box-shadow:


        0 0 0 7px rgba(0,102,214,.12);


    }



    .ra-growth-title{


        padding:18px 15px;


        gap:10px;


    }



    .ra-growth-heading{


        font-size:16px;


        line-height:1.4;


    }



    .ra-growth-icon{


        width:32px;


        height:32px;


        font-size:20px;


    }



    .ra-growth-content{


        padding:0 15px;


    }



    .ra-growth-item.active 

    .ra-growth-content{


        padding:


        0 15px 20px;


    }



    .ra-growth-content p{


        font-size:14px;


        line-height:1.7;


    }




}





/* ==========================================================
   Small Mobile Devices
   320px - 420px
========================================================== */


@media (max-width:420px){



    .ra-performance-growth-section{


        padding:55px 12px;


    }



    .ra-performance-header h2{


        font-size:28px;


    }



    .ra-growth-funnel{


        padding-left:38px;


    }



    .ra-growth-funnel::before{


        left:15px;


    }



    .ra-growth-number{


        left:-38px;


        width:30px;


        height:30px;


        font-size:10px;


    }



    .ra-growth-heading{


        font-size:14px;


    }



    .ra-growth-title{


        padding:16px 12px;


    }



    .ra-growth-icon{


        width:28px;


        height:28px;


        font-size:18px;


    }




}





/* ==========================================================
   Extra Small Devices
   Below 320px
========================================================== */


@media (max-width:319px){



    .ra-growth-heading{


        font-size:13px;


    }



    .ra-performance-header h2{


        font-size:24px;


    }



    .ra-growth-title{


        gap:5px;


    }



}