/* ==========================================================
   Industry Digital Solutions Hero Section
   CSS Part 1
   Rajat Adhikari Website
========================================================== */


/* ==========================================================
   ROOT VARIABLES
========================================================== */

.ra-industry-hero {

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

    --ra-dark-bg: #050816;
    --ra-text-light: #ffffff;
    --ra-text-muted: rgba(255,255,255,0.75);

    --ra-border:
    rgba(255,255,255,0.12);

    --ra-glass:
    rgba(255,255,255,0.08);

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

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

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

    display:flex;

    align-items:center;

    padding:
    120px 40px 80px;

}



/* ==========================================================
   BACKGROUND EFFECTS
========================================================== */


.ra-hero-bg {

    position:absolute;

    inset:0;

    pointer-events:none;

}



.ra-glow {

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:0.6;

    animation:
    raGlowMove 10s infinite alternate ease-in-out;

}



.ra-glow-one {

    width:450px;

    height:450px;

    background:
    rgba(0,198,255,0.35);

    top:-120px;

    left:-120px;

}



.ra-glow-two {

    width:500px;

    height:500px;

    background:
    rgba(123,44,255,0.30);

    right:-150px;

    bottom:-150px;

    animation-delay:3s;

}



@keyframes raGlowMove {


    from {

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

    }


    to {

        transform:
        translate(40px,30px)
        scale(1.15);

    }

}





/* Animated Grid */


.ra-grid {

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        rgba(255,255,255,0.03) 1px,
        transparent 1px
    ),

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


    background-size:
    70px 70px;


    mask-image:
    radial-gradient(
        circle,
        black,
        transparent 75%
    );


    animation:
    raGridMove 20s linear infinite;

}



@keyframes raGridMove {


    from {

        transform:
        translateY(0);

    }


    to {

        transform:
        translateY(70px);

    }

}





/* ==========================================================
   MAIN CONTAINER
========================================================== */


.ra-hero-container {


    position:relative;

    z-index:2;

    width:100%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:

    1.05fr
    0.95fr;


    align-items:center;

    gap:70px;


}





/* ==========================================================
   LEFT CONTENT
========================================================== */


.ra-hero-content {


    max-width:720px;

}



.ra-hero-tag {


    display:inline-flex;

    align-items:center;

    gap:10px;


    padding:

    10px 22px;


    border-radius:50px;


    background:
    rgba(255,255,255,0.08);


    border:

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


    backdrop-filter:
    blur(15px);


    font-size:14px;


    letter-spacing:0.5px;


    color:
    var(--ra-accent);


    margin-bottom:25px;


}





/* Heading */


.ra-hero-title {


    font-size:

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


    line-height:

    1.08;


    font-weight:

    800;


    letter-spacing:

    -2px;


    margin:

    0 0 25px;


}



.ra-hero-title span {


    background:

    linear-gradient(

        90deg,

        var(--ra-primary),

        var(--ra-secondary),

        var(--ra-accent)

    );


    background-size:

    200%;


    -webkit-background-clip:

    text;


    background-clip:

    text;


    color:

    transparent;


    animation:

    raGradientText 5s infinite linear;


}



@keyframes raGradientText {


    0% {

        background-position:0%;

    }


    100% {

        background-position:200%;

    }


}





/* Description */


.ra-hero-description {


    font-size:

    18px;


    line-height:

    1.8;


    color:

    var(--ra-text-muted);


    max-width:

    620px;


    margin-bottom:

    35px;


}






/* ==========================================================
   TABLET RESPONSIVE FOUNDATION
========================================================== */


@media(max-width:1100px){


    .ra-industry-hero {


        padding:

        100px 30px 70px;

    }



    .ra-hero-container {


        grid-template-columns:

        1fr;


        text-align:center;


        gap:60px;

    }



    .ra-hero-content {


        margin:auto;

    }



    .ra-hero-description {


        margin-left:auto;

        margin-right:auto;

    }


}


/* ==========================================================
   Industry Digital Solutions Hero Section
   CSS Part 2
   Rajat Adhikari Website
========================================================== */



/* ==========================================================
   SERVICE LIST
========================================================== */


.ra-service-list {


    display:grid;


    grid-template-columns:

    repeat(2, minmax(220px,1fr));


    gap:15px;


    margin-bottom:40px;


}



.ra-service-item {


    display:flex;


    align-items:center;


    gap:12px;


    padding:

    14px 18px;


    border-radius:14px;


    background:

    rgba(255,255,255,0.05);


    border:

    1px solid rgba(255,255,255,0.10);


    color:

    rgba(255,255,255,0.85);


    font-size:15px;


    transition:

    all .35s ease;


    backdrop-filter:

    blur(12px);


}



.ra-service-item span {


    display:flex;


    align-items:center;


    justify-content:center;


    width:24px;


    height:24px;


    border-radius:50%;


    background:

    linear-gradient(

        135deg,

        var(--ra-primary),

        var(--ra-secondary)

    );


    color:white;


    font-size:13px;


    font-weight:700;


}



.ra-service-item:hover {


    transform:

    translateY(-5px);


    border-color:

    rgba(0,198,255,0.5);


    box-shadow:

    0 15px 35px rgba(0,198,255,0.15);


}






/* ==========================================================
   CTA BUTTON AREA
========================================================== */


.ra-hero-buttons {


    display:flex;


    align-items:center;


    gap:20px;


    flex-wrap:wrap;


}




/* Primary Button */


.ra-primary-btn {


    position:relative;


    overflow:hidden;


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:12px;


    padding:

    17px 34px;


    border:none;


    border-radius:50px;


    cursor:pointer;


    color:#ffffff;


    font-size:16px;


    font-weight:600;


    background:


    linear-gradient(

        135deg,

        var(--ra-primary),

        var(--ra-secondary)

    );


    box-shadow:


    0 15px 40px

    rgba(0,198,255,0.30);


    transition:

    all .4s ease;


}



.ra-primary-btn span {


    font-size:22px;


    transition:

    transform .3s ease;


}





/* Moving shine effect */


.ra-primary-btn::before {


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:70%;


    height:100%;


    background:


    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,0.5),

        transparent

    );


    transition:

    .6s;


}



.ra-primary-btn:hover::before {


    left:130%;


}




.ra-primary-btn:hover {


    transform:

    translateY(-5px)

    scale(1.04);


    box-shadow:


    0 25px 60px

    rgba(123,44,255,0.45);


}



.ra-primary-btn:hover span {


    transform:

    translateX(7px);


}






/* Secondary Button */


.ra-secondary-btn {


    padding:

    15px 30px;


    border-radius:50px;


    border:

    1px solid

    rgba(255,255,255,0.25);


    color:white;


    text-decoration:none;


    font-weight:500;


    backdrop-filter:

    blur(10px);


    transition:

    .35s ease;


}




.ra-secondary-btn:hover {


    background:

    rgba(255,255,255,0.12);


    transform:

    translateY(-4px);


    border-color:

    var(--ra-primary);


}






/* ==========================================================
   RIGHT VISUAL AREA
========================================================== */


.ra-hero-visual {


    position:relative;


    min-height:600px;


    display:flex;


    justify-content:center;


    align-items:center;


}






/* Main Device Card */


.ra-device-card {


    position:relative;


    width:

    min(100%,480px);


    height:

    360px;


    border-radius:30px;


    background:


    rgba(255,255,255,0.08);


    border:

    1px solid rgba(255,255,255,0.18);


    backdrop-filter:

    blur(20px);


    box-shadow:


    0 30px 80px

    rgba(0,0,0,0.35);


    overflow:hidden;


    animation:


    raDeviceFloat 6s ease-in-out infinite;


}



@keyframes raDeviceFloat {


    0%,100%{


        transform:

        translateY(0);

    }


    50%{


        transform:

        translateY(-20px);

    }

}







/* Device Header */


.ra-device-header {


    height:45px;


    display:flex;


    align-items:center;


    gap:8px;


    padding-left:20px;


    border-bottom:

    1px solid rgba(255,255,255,0.1);


}



.ra-device-header span {


    width:11px;


    height:11px;


    border-radius:50%;


    background:

    rgba(255,255,255,0.5);


}






/* Screen Content */


.ra-screen-content {


    padding:40px;


}



.ra-screen-title {


    font-size:28px;


    font-weight:700;


    margin-bottom:40px;


}





/* Chart */


.ra-screen-chart {


    height:120px;


    display:flex;


    align-items:end;


    gap:15px;


}



.ra-screen-chart div {


    flex:1;


    border-radius:10px 10px 0 0;


    background:


    linear-gradient(

        180deg,

        var(--ra-primary),

        var(--ra-secondary)

    );


}



.ra-screen-chart div:nth-child(1){

    height:40%;

}


.ra-screen-chart div:nth-child(2){

    height:70%;

}


.ra-screen-chart div:nth-child(3){

    height:55%;

}


.ra-screen-chart div:nth-child(4){

    height:90%;

}




.ra-screen-button {


    margin-top:35px;


    display:inline-block;


    padding:

    12px 25px;


    border-radius:30px;


    background:

    rgba(0,198,255,0.15);


    color:white;


}






/* ==========================================================
   FLOATING GLASS CARDS
========================================================== */


.ra-floating-card {


    position:absolute;


    display:flex;


    align-items:center;


    gap:15px;


    padding:

    18px;


    min-width:230px;


    border-radius:20px;


    background:

    rgba(255,255,255,0.10);


    border:

    1px solid rgba(255,255,255,0.15);


    backdrop-filter:

    blur(20px);


    box-shadow:


    0 20px 50px rgba(0,0,0,0.25);


}





.ra-growth-card {


    top:80px;


    left:-40px;


    animation:

    raCardFloat 5s infinite ease-in-out;


}



.ra-speed-card {


    bottom:80px;


    right:-40px;


    animation:

    raCardFloat 6s infinite ease-in-out;


}



@keyframes raCardFloat {


    0%,100%{


        transform:

        translateY(0);

    }


    50%{


        transform:

        translateY(-15px);

    }

}



.ra-card-icon {


    width:45px;


    height:45px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    linear-gradient(

        135deg,

        var(--ra-primary),

        var(--ra-secondary)

    );


}



.ra-card-number {


    font-size:32px;


    font-weight:800;


    color:

    var(--ra-accent);


}


.ra-floating-card strong {


    display:block;


    font-size:15px;


}


.ra-floating-card p {


    margin:5px 0 0;


    color:

    rgba(255,255,255,0.65);


    font-size:13px;


}
/* ==========================================================
   Industry Digital Solutions Hero Section
   CSS Part 3
   Responsive + Popup + Final Effects
   Rajat Adhikari Website
========================================================== */



/* ==========================================================
   POPUP MODAL
========================================================== */


.ra-popup-overlay {


    position:fixed;


    inset:0;


    z-index:9999;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(0,0,0,0.75);


    backdrop-filter:

    blur(12px);


    opacity:0;


    visibility:hidden;


    transition:

    all .4s ease;


}



.ra-popup-overlay.active {


    opacity:1;


    visibility:visible;


}




.ra-popup-box {


    position:relative;


    width:

    min(90%,480px);


    padding:

    45px;


    border-radius:30px;


    background:


    rgba(255,255,255,0.10);


    border:

    1px solid rgba(255,255,255,0.20);


    backdrop-filter:

    blur(25px);


    transform:

    translateY(40px);


    transition:

    .45s ease;


}



.ra-popup-overlay.active .ra-popup-box {


    transform:

    translateY(0);


}



.ra-popup-box h2 {


    margin-top:0;


    font-size:32px;


}



.ra-popup-box p {


    color:

    rgba(255,255,255,0.75);


}



.ra-popup-close {


    position:absolute;


    top:20px;


    right:25px;


    width:40px;


    height:40px;


    border-radius:50%;


    border:none;


    cursor:pointer;


    font-size:25px;


    color:white;


    background:

    rgba(255,255,255,0.15);


    transition:.3s;


}



.ra-popup-close:hover {


    transform:rotate(90deg);


    background:

    rgba(255,255,255,0.25);


}




.ra-popup-form {


    display:flex;


    flex-direction:column;


    gap:15px;


    margin-top:25px;


}



.ra-popup-form input,


.ra-popup-form textarea {


    width:100%;


    padding:

    15px 18px;


    border-radius:15px;


    border:

    1px solid rgba(255,255,255,0.15);


    background:

    rgba(255,255,255,0.08);


    color:white;


    outline:none;


}



.ra-popup-form textarea {


    min-height:120px;


    resize:none;


}



.ra-popup-form button {


    padding:

    16px;


    border:none;


    border-radius:50px;


    cursor:pointer;


    color:white;


    font-weight:600;


    background:

    linear-gradient(

        135deg,

        var(--ra-primary),

        var(--ra-secondary)

    );


}






/* ==========================================================
   SCROLL INDICATOR
========================================================== */


.ra-scroll-indicator {


    position:absolute;


    bottom:30px;


    left:50%;


    transform:

    translateX(-50%);


    display:flex;


    flex-direction:column;


    align-items:center;


    gap:12px;


    font-size:13px;


    letter-spacing:1px;


    color:

    rgba(255,255,255,0.65);


}



.ra-scroll-indicator span {


    width:2px;


    height:45px;


    background:

    linear-gradient(

        transparent,

        var(--ra-primary)

    );


    animation:

    raScrollMove 2s infinite;


}



@keyframes raScrollMove {


    0%{


        opacity:0;

        transform:

        translateY(-15px);

    }


    50%{


        opacity:1;

    }


    100%{


        opacity:0;

        transform:

        translateY(15px);

    }


}







/* ==========================================================
   TABLET OPTIMIZATION
   768px - 1100px
========================================================== */


@media(max-width:1100px){


    .ra-industry-hero {


        min-height:auto;


        padding:

        100px 25px;


    }



    .ra-hero-visual {


        min-height:520px;


    }



    .ra-floating-card {


        transform:scale(.9);


    }



    .ra-growth-card {


        left:0;


    }



    .ra-speed-card {


        right:0;


    }


}






/* ==========================================================
   SPECIAL FIX
   1024 x 600 Screens
========================================================== */


@media

(min-width:900px)

and

(max-width:1100px)

and

(max-height:650px){



    .ra-industry-hero {


        padding-top:70px;

        padding-bottom:50px;


    }



    .ra-hero-container {


        gap:35px;


    }



    .ra-hero-title {


        font-size:

        48px;


    }



    .ra-hero-description {


        font-size:

        16px;


    }



    .ra-service-list {


        gap:10px;


        margin-bottom:25px;


    }



    .ra-service-item {


        padding:

        10px 14px;


        font-size:14px;


    }



    .ra-hero-visual {


        min-height:430px;


    }



    .ra-device-card {


        height:300px;


    }


}







/* ==========================================================
   MOBILE DEVICES
   320px - 767px
========================================================== */


@media(max-width:767px){


    .ra-industry-hero {


        padding:

        80px 18px 90px;


        text-align:center;


    }



    .ra-hero-container {


        display:flex;


        flex-direction:column;


        gap:45px;


    }



    .ra-hero-tag {


        font-size:12px;


        padding:

        8px 16px;


    }



    .ra-hero-title {


        font-size:

        38px;


        letter-spacing:-1px;


    }



    .ra-hero-description {


        font-size:16px;


        line-height:1.7;


    }



    .ra-service-list {


        grid-template-columns:

        1fr;


    }



    .ra-service-item {


        justify-content:flex-start;


        text-align:left;


    }



    .ra-hero-buttons {


        flex-direction:column;


        width:100%;


    }



    .ra-primary-btn,


    .ra-secondary-btn {


        width:100%;


    }



    .ra-hero-visual {


        min-height:420px;


        width:100%;


    }



    .ra-device-card {


        width:100%;


        height:280px;


    }



    .ra-screen-content {


        padding:25px;


    }



    .ra-screen-title {


        font-size:22px;


    }



    .ra-floating-card {


        min-width:180px;


        padding:12px;


        transform:scale(.75);


    }



    .ra-growth-card {


        top:20px;


        left:-35px;


    }



    .ra-speed-card {


        bottom:20px;


        right:-35px;


    }



    .ra-scroll-indicator {


        display:none;


    }



    .ra-popup-box {


        padding:30px 22px;


    }



    .ra-popup-box h2 {


        font-size:26px;


    }


}






/* ==========================================================
   SMALL MOBILE DEVICES
   BELOW 400px
========================================================== */


@media(max-width:400px){



    .ra-hero-title {


        font-size:

        34px;


    }



    .ra-floating-card {


        display:none;


    }



    .ra-device-card {


        height:240px;


    }



    .ra-screen-chart {


        height:80px;


    }


}

.ra-primary-btn {
    position:relative;
    overflow:hidden;
}


.ra-ripple {

    position:absolute;

    width:20px;

    height:20px;

    background:
    rgba(255,255,255,0.7);

    border-radius:50%;

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

    animation:
    raRipple .6s linear;

}


@keyframes raRipple {


    to {

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

        opacity:0;

    }

}