/* ==========================================================
   Google Business & Analytics Solutions
   Premium Analytics Dashboard Section
   CSS Part 1
========================================================== */


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

:root {

    --ra-google-primary: #00c6ff;
    --ra-google-secondary: #7b2cff;
    --ra-google-accent: #00f5a0;

    --ra-google-dark:
    #050816;

    --ra-google-card:
    rgba(255,255,255,0.08);

    --ra-google-border:
    rgba(255,255,255,0.18);

    --ra-google-text:
    #ffffff;

    --ra-google-muted:
    rgba(255,255,255,0.72);

}



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

.ra-google-analytics-section {

    position: relative;

    width: 100%;

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

    overflow: hidden;

    background:
    radial-gradient(
        circle at top left,
        rgba(0,198,255,.18),
        transparent 35%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(123,44,255,.20),
        transparent 40%
    ),
    var(--ra-google-dark);

}



/* Animated Background Glow */

.ra-google-analytics-section::before {

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-200px;

    right:-150px;


    background:
    linear-gradient(
        135deg,
        var(--ra-google-primary),
        var(--ra-google-secondary)
    );


    filter:blur(140px);

    opacity:.25;

    animation:
    raGoogleGlow 8s infinite alternate;

}



@keyframes raGoogleGlow {

    from {

        transform:
        translate(0,0)
        scale(1);

    }


    to {

        transform:
        translate(-80px,60px)
        scale(1.2);

    }

}




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


.ra-google-container {

    position:relative;

    max-width:1400px;

    margin:auto;

    z-index:2;

}




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


.ra-google-header {

    max-width:850px;

    margin:
    0 auto 70px;

    text-align:center;

}




/* Badge */

.ra-google-badge {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
    10px 24px;

    border-radius:50px;


    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

    color:white;


    background:
    rgba(255,255,255,.08);


    border:
    1px solid
    rgba(255,255,255,.25);


    backdrop-filter:
    blur(15px);


    box-shadow:
    0 10px 30px
    rgba(0,0,0,.25);

}




/* Main Heading */

.ra-google-header h2 {


    margin-top:25px;


    font-size:
    clamp(32px,5vw,64px);


    line-height:1.15;


    font-weight:800;


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

}



.ra-google-header h2 span {


    background:
    linear-gradient(
        90deg,
        var(--ra-google-primary),
        var(--ra-google-secondary)
    );


    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}




/* Description */

.ra-google-header p {


    margin-top:25px;


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


    line-height:1.8;


    color:
    var(--ra-google-muted);

}




/* ================================
   Dashboard Grid
================================ */


.ra-google-dashboard {


    display:grid;


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


    gap:25px;


}




/* ================================
   Card Base
================================ */


.ra-google-card {


    position:relative;


    min-height:190px;


    padding:30px 25px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-align:center;



    background:
    var(--ra-google-card);



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



    border-radius:24px;



    backdrop-filter:
    blur(20px);



    overflow:hidden;



    transition:
    transform .45s ease,
    border .45s ease,
    box-shadow .45s ease;



}



/* Card Light Effect */

.ra-google-card::before {


    content:"";


    position:absolute;


    width:120px;

    height:120px;


    background:
    linear-gradient(
    135deg,
    var(--ra-google-primary),
    var(--ra-google-secondary)
    );


    filter:blur(45px);


    opacity:.15;


    top:-50px;

    right:-50px;


}



/* Icon */


.ra-google-icon {


    width:65px;

    height:65px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    margin-bottom:20px;


    font-weight:800;


    color:white;


    background:
    linear-gradient(
    135deg,
    var(--ra-google-primary),
    var(--ra-google-secondary)
    );


    box-shadow:

    0 10px 30px
    rgba(0,198,255,.35);


}




/* Card Heading */


.ra-google-card h3 {


    margin:0;


    font-size:18px;


    line-height:1.4;


    color:white;


    font-weight:700;


}



/* ==========================================================
   Google Business & Analytics Solutions
   CSS Part 2
   Advanced Hover Effects & Animations
========================================================== */



/* ================================
   Card Hover Interaction
================================ */


.ra-google-card:hover {


    transform:
    translateY(-14px)
    scale(1.04);



    border-color:
    rgba(0,198,255,.8);



    box-shadow:

    0 25px 60px
    rgba(0,198,255,.25),

    inset 0 0 25px
    rgba(123,44,255,.18);



}



/* ================================
   Animated Gradient Border
================================ */


.ra-google-card::after {


    content:"";


    position:absolute;


    inset:0;


    border-radius:24px;


    padding:1px;


    background:
    linear-gradient(
        120deg,
        transparent,
        var(--ra-google-primary),
        var(--ra-google-secondary),
        transparent
    );


    -webkit-mask:

    linear-gradient(#fff 0 0)
    content-box,

    linear-gradient(#fff 0 0);


    -webkit-mask-composite:
    xor;


    mask-composite:
    exclude;



    opacity:0;



    transition:
    opacity .4s ease;



}



.ra-google-card:hover::after {


    opacity:1;


    animation:
    raBorderMove 3s linear infinite;


}




@keyframes raBorderMove {


    from {

        transform:
        rotate(0deg);

    }


    to {

        transform:
        rotate(360deg);

    }

}





/* ================================
   Icon Animation
================================ */


.ra-google-card:hover 
.ra-google-icon {


    transform:
    rotateY(360deg)
    scale(1.12);



    box-shadow:

    0 15px 45px
    rgba(0,198,255,.55);



}



.ra-google-icon {


    transition:
    transform .7s ease,
    box-shadow .4s ease;


}





/* ================================
   Card Shine Effect
================================ */


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


    opacity:.35;


    transform:
    translate(-30px,30px);



}



.ra-google-card::before {


    transition:
    all .6s ease;


}





/* ================================
   Feature Highlight Card
================================ */


.ra-feature-card {


    background:

    linear-gradient(

    145deg,

    rgba(0,198,255,.18),

    rgba(123,44,255,.18)

    );



    border:

    1px solid

    rgba(0,198,255,.5);



}




.ra-feature-card h3 {


    font-size:22px;


}



.ra-feature-card p {


    margin-top:15px;


    font-size:15px;


    line-height:1.6;


    color:

    rgba(255,255,255,.75);


}




.ra-feature-card:hover {


    box-shadow:

    0 30px 80px

    rgba(123,44,255,.45);



}





/* ================================
   Floating Growth Badges
================================ */


.ra-growth-badge {


    position:absolute;


    padding:

    12px 22px;



    border-radius:50px;



    background:

    rgba(255,255,255,.08);



    border:

    1px solid

    rgba(255,255,255,.2);



    color:white;


    font-size:14px;


    font-weight:700;



    backdrop-filter:

    blur(15px);



    animation:

    raFloat 5s ease-in-out infinite;



}





.ra-growth-one {


    top:180px;

    left:-30px;

}




.ra-growth-two {


    bottom:220px;

    right:-20px;


    animation-delay:1.5s;


}




.ra-growth-three {


    bottom:80px;

    left:80px;


    animation-delay:3s;


}





@keyframes raFloat {


    0%,
    100% {

        transform:
        translateY(0);

    }


    50% {

        transform:
        translateY(-18px);

    }


}






/* ================================
   Smooth Card Entrance Ready
================================ */


.ra-google-card {


    animation:

    raCardAppear .8s ease both;



}



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

    animation-delay:.1s;

}


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

    animation-delay:.2s;

}


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

    animation-delay:.3s;

}


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

    animation-delay:.4s;

}


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

    animation-delay:.5s;

}


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

    animation-delay:.6s;

}


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

    animation-delay:.7s;

}


.ra-google-card:nth-child(9){

    animation-delay:.8s;

}


.ra-google-card:nth-child(10){

    animation-delay:.9s;

}





@keyframes raCardAppear {


    from {


        opacity:0;


        transform:

        translateY(50px);


    }


    to {


        opacity:1;


        transform:

        translateY(0);


    }


}

/* ==========================================================
   Google Business & Analytics Solutions
   CSS Part 3
   Responsive Design System
========================================================== */


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

@media (min-width:1600px){


    .ra-google-container{

        max-width:1500px;

    }



    .ra-google-dashboard{

        gap:30px;

    }



    .ra-google-card{

        min-height:220px;

    }



    .ra-google-card h3{

        font-size:20px;

    }



}






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


@media (max-width:1599px){


    .ra-google-dashboard{


        grid-template-columns:

        repeat(4,1fr);


    }


}






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

   Important:
   1024 x 600
   1024 x 768
========================================================== */


@media (max-width:1199px){



    .ra-google-analytics-section{


        padding-left:30px;

        padding-right:30px;


    }



    .ra-google-header{


        margin-bottom:55px;


    }



    .ra-google-dashboard{


        grid-template-columns:

        repeat(3,1fr);



        gap:22px;


    }





    .ra-google-card{


        min-height:180px;


        padding:

        28px 18px;


    }




    .ra-google-card h3{


        font-size:17px;


    }





    .ra-growth-badge{


        display:none;


    }



}







/* ==========================================================
   Special Fix
   1024 x 600 Landscape Screens
========================================================== */


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



    .ra-google-analytics-section{


        padding-top:60px;

        padding-bottom:60px;


    }



    .ra-google-header{


        margin-bottom:35px;


    }




    .ra-google-header h2{


        font-size:38px;


    }




    .ra-google-header p{


        font-size:16px;


    }




    .ra-google-card{


        min-height:150px;


    }




    .ra-google-icon{


        width:55px;

        height:55px;

        margin-bottom:12px;


    }




}







/* ==========================================================
   Tablet Landscape / Portrait

   768px - 1023px
========================================================== */


@media (max-width:1023px){



    .ra-google-dashboard{


        grid-template-columns:

        repeat(2,1fr);


    }




    .ra-google-header h2{


        font-size:

        clamp(30px,5vw,42px);


    }




    .ra-google-card{


        min-height:190px;


    }



}







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

   320px - 767px
========================================================== */


@media (max-width:767px){



    .ra-google-analytics-section{


        padding:

        70px 16px;


    }




    .ra-google-header{


        margin-bottom:40px;


    }




    .ra-google-badge{


        font-size:12px;


        padding:

        8px 18px;


    }





    .ra-google-header h2{


        margin-top:20px;


        font-size:

        32px;


        line-height:1.25;


    }





    .ra-google-header p{


        margin-top:18px;


        font-size:16px;


        line-height:1.7;


    }





    .ra-google-dashboard{


        grid-template-columns:

        1fr;


        gap:18px;


    }





    .ra-google-card{


        min-height:170px;


        width:100%;


        padding:

        25px 20px;


        border-radius:20px;


    }





    .ra-google-card:hover{


        transform:

        translateY(-8px)
        scale(1.02);


    }





    .ra-google-icon{


        width:60px;


        height:60px;


        font-size:14px;


    }





    .ra-google-card h3{


        font-size:17px;


    }



}







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

   Below 400px
========================================================== */


@media (max-width:400px){



    .ra-google-header h2{


        font-size:28px;


    }





    .ra-google-header p{


        font-size:15px;


    }





    .ra-google-card{


        padding:

        22px 15px;


    }





    .ra-google-card h3{


        font-size:16px;


    }



}





/* ==========================================================
   Touch Device Optimization
========================================================== */


@media (hover:none){



    .ra-google-card:hover{


        transform:none;


    }



    .ra-google-card:active{


        transform:

        scale(.97);


    }



}

/* ==========================================================
   Google Business & Analytics Solutions
   CSS Part 4
   Premium Final Visual Enhancement
========================================================== */


/* ==========================================================
   Animated Digital Grid Background
========================================================== */


.ra-google-analytics-section::after {


    content:"";


    position:absolute;


    inset:0;


    background-image:

    linear-gradient(
        rgba(255,255,255,.04) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.04) 1px,
        transparent 1px
    );



    background-size:

    60px 60px;



    opacity:.35;



    pointer-events:none;



    animation:

    raGridMove 25s linear infinite;



}



@keyframes raGridMove{


    from{


        background-position:

        0 0;


    }


    to{


        background-position:

        60px 60px;


    }


}







/* ==========================================================
   Premium Card Depth
========================================================== */


.ra-google-card {


    transform-style:

    preserve-3d;



    perspective:

    1000px;



}





.ra-google-card:hover 
.ra-google-icon{


    transform:

    translateZ(30px)

    rotateY(360deg)

    scale(1.12);



}







/* ==========================================================
   Text Glow On Hover
========================================================== */


.ra-google-card:hover h3{


    color:

    #00e5ff;



    text-shadow:


    0 0 20px

    rgba(0,198,255,.45);



}







/* ==========================================================
   Feature Card Pulse
========================================================== */


.ra-feature-card{


    animation:

    raFeaturePulse 4s infinite;


}



@keyframes raFeaturePulse{


    0%,
    100%{


        box-shadow:

        0 0 0

        rgba(0,198,255,0);


    }



    50%{


        box-shadow:

        0 0 45px

        rgba(0,198,255,.25);


    }


}







/* ==========================================================
   Header Animation
========================================================== */


.ra-google-header{


    animation:

    raHeaderReveal 1s ease both;


}



@keyframes raHeaderReveal{


    from{


        opacity:0;


        transform:

        translateY(-30px);


    }



    to{


        opacity:1;


        transform:

        translateY(0);


    }


}







/* ==========================================================
   Smooth Scrolling Feel
========================================================== */


.ra-google-card,
.ra-google-icon,
.ra-google-badge{


    will-change:

    transform;



}







/* ==========================================================
   Premium Button Style Support
   (Future CTA Ready)
========================================================== */


.ra-google-cta{


    display:inline-flex;


    align-items:center;


    justify-content:center;



    margin-top:45px;



    padding:

    16px 35px;



    border-radius:

    50px;



    color:white;



    font-weight:700;



    background:

    linear-gradient(

    135deg,

    var(--ra-google-primary),

    var(--ra-google-secondary)

    );



    text-decoration:none;



    transition:

    all .4s ease;



}




.ra-google-cta:hover{


    transform:

    translateY(-5px);



    box-shadow:


    0 20px 45px

    rgba(0,198,255,.35);



}







/* ==========================================================
   Reduced Motion Accessibility
========================================================== */


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


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


        animation-duration:

        .01ms!important;


        animation-iteration-count:

        1!important;


        scroll-behavior:auto!important;


        transition-duration:

        .01ms!important;


    }


}







/* ==========================================================
   High Resolution Screens
========================================================== */


@media(min-width:2000px){



    .ra-google-header h2{


        font-size:

        72px;


    }





    .ra-google-card{


        min-height:

        250px;


    }




    .ra-google-card h3{


        font-size:

        22px;


    }



}