/*
|--------------------------------------------------------------------------
| Nexora Digital Main Responsive Style
| Part 1 - Global + Navbar + Hero
|--------------------------------------------------------------------------
*/


/* =========================
   Global Reset
========================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}



body{

    font-family:"Poppins", Arial, sans-serif;

    color:#333;

    background:#fff;

    line-height:1.6;

    overflow-x:hidden;

}



a{

    text-decoration:none;

    color:inherit;

}



img{

    max-width:100%;

    height:auto;

    display:block;

}



ul{

    list-style:none;

}




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


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}




/* =========================
   Buttons
========================= */


.btn{

    display:inline-block;

    padding:12px 30px;

    border-radius:30px;

    background:#2563eb;

    color:#fff;

    font-weight:600;

    transition:.3s;

}



.btn:hover{

    transform:translateY(-3px);

}



/* =========================
   Navbar
========================= */


.navbar{

    width:100%;

    background:#fff;

    padding:20px 0;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    position:sticky;

    top:0;

    z-index:999;

}




.navbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo img{

    height:50px;

}




.logo h2{

    color:#2563eb;

}




.nav-menu{

    display:flex;

    gap:30px;

}



.nav-menu li a{

    font-weight:500;

    transition:.3s;

}



.nav-menu li a:hover{

    color:#2563eb;

}




.mobile-menu{

    display:none;

    font-size:25px;

    cursor:pointer;

}




/* =========================
   Hero Section
========================= */


.hero{

    padding:100px 0;

    background:

    linear-gradient(
    135deg,
    #eff6ff,
    #ffffff
    );

}




.hero-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}




.hero-text{

    flex:1;

}




.hero-text h1{

    font-size:52px;

    line-height:1.2;

    margin-bottom:20px;

}



.hero-text h1 span{

    color:#2563eb;

}




.hero-text p{

    font-size:18px;

    color:#666;

    margin-bottom:30px;

}




.hero-image{

    flex:1;

}





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


@media(max-width:992px){


.container{

    width:92%;

}



.hero-text h1{

    font-size:42px;

}



.nav-menu{

    gap:20px;

}


}




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


@media(max-width:768px){



.container{

    width:100%;

    padding-left:15px;

    padding-right:15px;

}




.navbar{

    padding:15px 0;

}




.nav-menu{

    display:none;

    flex-direction:column;

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    background:#fff;

    padding:20px;

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

}



.mobile-menu{

    display:block;

}




.hero{

    padding:50px 0;

}




.hero-content{

    flex-direction:column;

    text-align:center;

    gap:25px;

}




.hero-text h1{

    font-size:32px;

}



.hero-text p{

    font-size:16px;

}



.hero-image{

    width:100%;

}



}
/* ==========================================
   Part 2
   Features + Services + Portfolio + Team + Blog
========================================== */


/* =========================
   Features Section
========================= */


.features-section{

    padding:40px 0;

}



.features-wrapper{

    background:#f8fafc;

    border-radius:20px;

    padding:30px;

    display:grid;

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

    gap:25px;

}



.feature-item{

    text-align:center;

    padding:20px;

}



.feature-icon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:15px;

}



.feature-item h3{

    font-size:20px;

    margin-bottom:10px;

}



.feature-item p{

    color:#64748b;

    font-size:15px;

}





/* =========================
   Services
========================= */


.service-grid{


    display:grid;

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

    gap:30px;


}



.service-card{


    background:#fff;

    padding:35px;

    border-radius:18px;

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

    transition:.3s;


}



.service-card:hover{

    transform:translateY(-8px);

}



.service-card i{


    font-size:40px;

    color:#2563eb;

    margin-bottom:20px;


}



.service-card h3{

    margin-bottom:15px;

    font-size:22px;

}



.service-card p{

    color:#64748b;

}





/* =========================
   Portfolio
========================= */


.portfolio-grid{


    display:grid;

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

    gap:30px;


}




.portfolio-card{


    background:#fff;

    border-radius:18px;

    overflow:hidden;

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


}




.portfolio-card img{


    width:100%;

    height:250px;

    object-fit:cover;


}



.portfolio-info{


    padding:25px;


}



.portfolio-info h3{

    font-size:20px;

    margin-bottom:10px;

}



.portfolio-info p{

    color:#64748b;

}





/* =========================
   Team Section
========================= */


.team-grid{


    display:grid;

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

    gap:25px;


}




.team-card{


    background:#fff;

    border-radius:18px;

    overflow:hidden;

    text-align:center;

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


}



.team-card img{


    width:100%;

    height:260px;

    object-fit:cover;


}



.team-content{


    padding:20px;


}



.team-content h3{

    font-size:20px;

}



.team-content p{

    color:#64748b;

}





/* =========================
   Blog Section
========================= */


.blog-grid{


    display:grid;

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

    gap:30px;


}




.blog-card{


    background:#fff;

    border-radius:18px;

    overflow:hidden;

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


}




.blog-card img{


    width:100%;

    height:240px;

    object-fit:cover;


}



.blog-content{


    padding:25px;


}



.blog-content h3{


    font-size:21px;

    margin-bottom:12px;


}



.blog-content p{


    color:#64748b;

}





/* =========================
   Tablet Responsive
========================= */


@media(max-width:992px){



.features-wrapper{

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

}



.service-grid{

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

}



.portfolio-grid{

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

}



.team-grid{

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

}



.blog-grid{

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

}



}





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


@media(max-width:600px){



.features-wrapper{

    grid-template-columns:1fr;

}



.service-grid{

    grid-template-columns:1fr;

}



.portfolio-grid{

    grid-template-columns:1fr;

}



.team-grid{

    grid-template-columns:1fr;

}



.blog-grid{

    grid-template-columns:1fr;

}




.service-card,
.portfolio-card,
.team-card,
.blog-card{

    width:100%;

}



.portfolio-card img,
.blog-card img{

    height:220px;

}



}
/* ==========================================
   Part 3
   Testimonials + FAQ + Demo + Contact + Footer
========================================== */


/* =========================
   Testimonials
========================= */


.testimonial-grid{

    display:grid;

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

    gap:30px;

}



.testimonial-card{

    background:#f8fafc;

    padding:30px;

    border-radius:18px;

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

}



.testimonial-image{

    width:80px;

    height:80px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:20px;

}



.testimonial-card h3{

    margin-top:15px;

    color:#2563eb;

}



.testimonial-card span{

    color:#64748b;

}



.testimonial-message{

    color:#475569;

    line-height:1.7;

}





/* =========================
   FAQ
========================= */


.faq-section{

    padding:80px 0;

    background:#f8fafc;

}



.faq-wrapper{

    max-width:900px;

    margin:auto;

}



.faq-item{

    background:#fff;

    padding:25px;

    margin-bottom:20px;

    border-radius:15px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}



.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.faq-question h3{

    font-size:18px;

    color:#111827;

}



.faq-answer p{

    margin-top:15px;

    color:#64748b;

    line-height:1.7;

}





/* =========================
   Demo Showcase
========================= */


.demos-section{

    padding:80px 0;

    background:#f8fafc;

}



.demo-grid{

    display:grid;

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

    gap:30px;

}



.demo-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.3s;

}



.demo-card:hover{

    transform:translateY(-8px);

}



.demo-image{

    width:100%;

    height:230px;

    overflow:hidden;

}



.demo-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.demo-content{

    padding:25px;

}



.demo-category{

    display:inline-block;

    background:#dcfce7;

    color:#15803d;

    padding:6px 15px;

    border-radius:30px;

    font-size:13px;

}



.demo-content h3{

    margin:15px 0;

    font-size:22px;

}



.demo-content p{

    color:#64748b;

    line-height:1.7;

    margin-bottom:20px;

}





/* =========================
   Contact
========================= */


.contact-box{

    background:#fff;

    padding:50px;

    border-radius:25px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}



.contact-form input,
.contact-form textarea{

    width:100%;

    padding:15px;

    margin-bottom:15px;

    border:1px solid #ddd;

    border-radius:10px;

}



.contact-form textarea{

    height:150px;

}





/* =========================
   Footer
========================= */


.modern-footer{

    background:#0f172a;

    color:#fff;

    padding:70px 0 20px;

}



.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:40px;

}



.footer-column h3{

    margin-bottom:20px;

}



.footer-column p,
.footer-column a{

    color:#cbd5e1;

}



.footer-social{

    display:flex;

    gap:12px;

    margin-top:20px;

}



.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2563eb;

    border-radius:50%;

    color:#fff;

}





/* =========================
   Final Responsive Fix
========================= */


@media(max-width:992px){


.testimonial-grid{

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

}



.demo-grid{

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

}



.contact-box{

    grid-template-columns:1fr;

}



.footer-grid{

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

}



}





@media(max-width:600px){



.testimonial-grid{

    grid-template-columns:1fr;

}



.demo-grid{

    grid-template-columns:1fr;

}



.demo-image{

    height:200px;

}



.contact-box{

    padding:25px;

}



.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}



.footer-social{

    justify-content:center;

}



.section-title{

    font-size:28px;

}



}
/* ==========================
   Mobile Navbar Fix
========================== */


@media(max-width:768px){


.navbar .container{

    position:relative;

}



.nav-menu.active{

    display:flex;

}



.nav-menu li{

    padding:12px 0;

}



.mobile-menu{

    display:block;

}



}
/* ==================================
   Hero Background Image
================================== */


.hero{

    position:relative;

    padding:90px 0;

    background-image:

    linear-gradient(
        rgba(255,255,255,0.88),
        rgba(255,255,255,0.88)
    ),

    url("../images/hero-bg.jpg");


    background-size:cover;

    background-position:center;

    overflow:hidden;

}




.hero-content{

    position:relative;

    z-index:2;

}
@media(max-width:768px){


.hero{

    background-position:center;

    background-image:

    linear-gradient(
    rgba(255,255,255,.92),
    rgba(255,255,255,.92)
    ),

    url("../images/hero-bg.jpg");


}


}
/* ==============================
 Dynamic Hero Slider
============================== */


.hero-slider{
min-height:520px;
}



.hero-background{

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

}



.hero-bg-slide{

position:absolute;

width:100%;

height:100%;

background-size:cover;

background-position:center;

opacity:0;

transition:opacity 1.5s ease;

}



.hero-bg-slide.active{

opacity:1;

}



.hero-bg-slide:after{

content:"";

position:absolute;

inset:0;

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

}



.hero-slider .container{

position:relative;

z-index:2;

}



.hero-content{

display:flex;

align-items:center;

justify-content:space-between;

min-height:650px;

gap:40px;

}



.hero-text{

max-width:600px;

}



.hero-text h1{

font-size:55px;

line-height:1.2;

font-weight:700;

}



.hero-text p{

font-size:18px;

margin:25px 0;

color:#475569;

}



.hero-image img{

width:450px;

}



@media(max-width:768px){


.hero-slider{

min-height:auto;

}



.hero-content{

flex-direction:column;

text-align:center;

padding:60px 0;

}



.hero-text h1{

font-size:34px;

}



.hero-text p{

font-size:16px;

}



.hero-image img{

width:300px;

}


}
/* ==========================================
   Premium Hero Animation Design
========================================== */


.hero-slider{

    position:relative;

    overflow:hidden;

}



.hero-background{

    animation:heroFlow 18s ease-in-out infinite;

}



@keyframes heroFlow{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}



/* Hero Text */


.hero-text{

    animation:heroTextShow 1s ease;

}



@keyframes heroTextShow{


from{

    opacity:0;

    transform:translateY(40px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}




.hero-text h1{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed,
        #16a34a
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:titleGlow 4s ease-in-out infinite;

}




@keyframes titleGlow{


0%,100%{

filter:drop-shadow(0 0 0px transparent);

}


50%{

filter:drop-shadow(0 8px 25px rgba(37,99,235,.35));

}


}




.hero-text p{

    font-size:19px;

    color:#475569;

    animation:paraShow 1.3s ease;

}



@keyframes paraShow{


from{

opacity:0;

transform:translateX(-30px);

}


to{

opacity:1;

transform:translateX(0);

}


}





/* Button Animation */


.hero-text .btn{

    animation:pulseButton 3s infinite;

}



@keyframes pulseButton{


0%{

box-shadow:0 0 0 0 rgba(37,99,235,.5);

}


70%{

box-shadow:0 0 0 18px rgba(37,99,235,0);

}


100%{

box-shadow:0 0 0 0 rgba(37,99,235,0);

}


}





/* Main Hero Image Bigger */


.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}



.hero-image img{


    width:620px;

    max-width:120%;

    position:relative;

    z-index:2;

    animation:floatHeroImage 5s ease-in-out infinite;


}




@keyframes floatHeroImage{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-25px);

}


}





/* Waterfall Floating Effect */


.hero-slider::before{


content:"";

position:absolute;

width:500px;

height:500px;

right:-150px;

top:100px;

background:linear-gradient(
135deg,
rgba(37,99,235,.25),
rgba(124,58,237,.15)
);


border-radius:50%;

filter:blur(70px);

animation:waterMove 8s infinite alternate;


}



@keyframes waterMove{


from{

transform:translateY(-50px);

}


to{

transform:translateY(80px);

}


}





/* Mobile */


@media(max-width:768px){



.hero-content{

    flex-direction:column;

    text-align:center;

}



.hero-text h1{


    font-size:34px;


}



.hero-text p{


    font-size:16px;


}



.hero-image img{


    width:360px;

    max-width:100%;


}



.hero-image{


    margin-top:40px;


}



}
.hero-changing{

animation:textChange .8s ease;

}


@keyframes textChange{

from{

opacity:0;

transform:translateY(25px);

}


to{

opacity:1;

transform:translateY(0);

}

}
/* ==================================================
   Nexora Digital Premium Hero Design
================================================== */



.hero-slider{

    position:relative;

    overflow:hidden;

    min-height:650px;

}





.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

}





.hero-bg-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transition:opacity 1.5s ease;

    transform:scale(1);

}





.hero-bg-slide.active{

    opacity:1;

    animation:bgZoom 12s infinite;

}





@keyframes bgZoom{


0%{

transform:scale(1);

}


50%{

transform:scale(1.08);

}


100%{

transform:scale(1);

}


}




.hero-bg-slide::after{


content:"";

position:absolute;

inset:0;


background:linear-gradient(

90deg,

rgba(255,255,255,.90),

rgba(255,255,255,.75)

);


}






.hero-content{


position:relative;

z-index:2;

display:flex;

align-items:center;

justify-content:space-between;

gap:50px;

min-height:650px;


}





/* Small Hero Title */


.hero-small-title{


display:inline-block;

padding:8px 18px;

border-radius:30px;


background:linear-gradient(

90deg,

#dbeafe,

#ede9fe

);


color:#2563eb;


font-size:14px;

font-weight:600;


margin-bottom:20px;


letter-spacing:.5px;


animation:smallFade 1s ease;


}



@keyframes smallFade{


from{

opacity:0;

transform:translateY(-15px);

}


to{

opacity:1;

transform:translateY(0);

}


}





/* Hero Text */


.hero-text{


max-width:600px;


}





.hero-text h1{


font-size:58px;

line-height:1.15;

font-weight:800;


background:linear-gradient(

90deg,

#2563eb,

#7c3aed,

#16a34a

);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


animation:titleShow .8s ease;


}





@keyframes titleShow{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}


}





.hero-text p{


font-size:18px;

line-height:1.7;

color:#475569;

margin:25px 0;


animation:paraShow 1s ease;


}





@keyframes paraShow{


from{

opacity:0;

transform:translateX(-30px);

}


to{

opacity:1;

transform:translateX(0);

}


}






/* Button */


.hero-text .btn{


padding:14px 35px;

border-radius:35px;

font-weight:600;


animation:buttonGlow 3s infinite;


}




@keyframes buttonGlow{


0%{

box-shadow:0 0 0 0 rgba(37,99,235,.4);

}


70%{

box-shadow:0 0 0 18px rgba(37,99,235,0);

}


100%{

box-shadow:0 0 0 0 rgba(37,99,235,0);

}


}







/* Main Banner Image */


.hero-image{


display:flex;

justify-content:center;

align-items:center;


}



.hero-image img{


width:650px;

max-width:120%;


animation:imageFloat 5s ease-in-out infinite;


filter:drop-shadow(0 25px 35px rgba(0,0,0,.15));


}





@keyframes imageFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-25px);

}


}







/* Mobile Responsive */


@media(max-width:768px){



.hero-slider{


min-height:auto;


}



.hero-content{


flex-direction:column;

text-align:center;

padding:60px 15px;

}



.hero-text{


max-width:100%;


}



.hero-small-title{


font-size:12px;


}



.hero-text h1{


font-size:34px;


}



.hero-text p{


font-size:16px;


}



.hero-image{


margin-top:35px;


}



.hero-image img{


width:360px;

max-width:100%;


}



.hero-bg-slide::after{


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


}



}
.hero-highlight{

display:inline-flex;

align-items:center;

gap:8px;

background:#eff6ff;

color:#2563eb;

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:600;

margin:20px 0;

animation:fadeSlide .8s ease;

}


@keyframes fadeSlide{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}



.hero-image img{

width:var(--hero-width);

max-width:100%;

height:auto;

}



@media(max-width:768px){


.hero-content{

padding-top:20px;

gap:20px;

min-height:auto;

}



.hero-text h1{

font-size:34px;

line-height:1.2;

}



.hero-text p{

margin:15px 0;

}



.hero-image img{

width:350px;

max-width:95%;

}



.hero-slider{

min-height:auto;

}


}
.hero-main-image{

width:var(--desktop-width);

max-width:100%;

height:auto;

margin:auto;

display:block;

}


.hero-change{

animation:heroTextAnimation .6s ease;

}


@keyframes heroTextAnimation{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}



@media(max-width:768px){


.hero-main-image{

width:var(--mobile-width);

max-width:90%;

}


.hero-content{

flex-direction:column;

text-align:center;

gap:25px;

}


.hero-slider{

min-height:auto;

}



}
.hero-image{

display:flex;

justify-content:center;

align-items:center;

width:50%;

}



.hero-main-image{

width:var(--desktop-width);

max-width:none;

height:auto;

object-fit:contain;

display:block;

animation:imageFloat 5s ease-in-out infinite;

}



@keyframes imageFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}



@media(max-width:768px){


.hero-content{

padding-bottom:20px;

}



.hero-image{

width:100%;

margin-top:10px;

}



.hero-main-image{

width:var(--mobile-width);

max-width:none;

}



.hero-slider{

min-height:auto;

padding-bottom:30px;

}


}
/* FINAL HERO IMAGE FIX */

.hero-content{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}


.hero-text{
    width:50%;
}


.hero-image{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}


.hero-main-image{

    width:var(--desktop-width) !important;

    max-width:none !important;

    height:auto;

    object-fit:contain;

}




@media(max-width:768px){


.hero-content{

    flex-direction:column !important;

    text-align:center;

}


.hero-text,
.hero-image{

    width:100%;

}



.hero-main-image{

    width:var(--mobile-width) !important;

    max-width:100% !important;

}



}
/* =====================================================
   NEXORA DIGITAL - FEATURES SECTION
===================================================== */



.features-section{

    padding:80px 0;

    background:#ffffff;

    position:relative;

}




/* Heading */


.section-heading{

    text-align:center;

    max-width:750px;

    margin:0 auto 50px;

}



.section-heading span{

    display:inline-block;

    background:#eff6ff;

    color:#2563eb;

    padding:7px 20px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:15px;

}



.section-heading h2{

    font-size:38px;

    line-height:1.3;

    font-weight:800;

    color:#0f172a;

    margin-bottom:15px;

}



.section-heading p{

    color:#64748b;

    font-size:17px;

    line-height:1.7;

}






/* Features Grid */


.features-wrapper{


display:grid;


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


gap:25px;


}





/* Feature Card */


.feature-item{


background:#ffffff;


padding:35px 25px;


border-radius:20px;


text-align:center;


border:1px solid #e2e8f0;


transition:.4s ease;


position:relative;


overflow:hidden;


}





.feature-item:hover{


transform:translateY(-10px);


box-shadow:0 20px 40px rgba(0,0,0,.10);


}





/* Icon */


.feature-icon{


width:75px;


height:75px;


margin:0 auto 20px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


font-size:30px;


color:white;


transition:.4s;


}





.feature-item:hover .feature-icon{


transform:rotateY(360deg);


}






/* Colors */


.icon-blue{


background:linear-gradient(

135deg,

#2563eb,

#60a5fa

);


}



.icon-orange{


background:linear-gradient(

135deg,

#ea580c,

#fb923c

);


}



.icon-purple{


background:linear-gradient(

135deg,

#7c3aed,

#a78bfa

);


}



.icon-green{


background:linear-gradient(

135deg,

#16a34a,

#4ade80

);


}





/* Text */


.feature-item h3{


font-size:22px;


font-weight:700;


color:#0f172a;


margin-bottom:12px;


}





.feature-item p{


font-size:15px;


line-height:1.7;


color:#64748b;


margin:0;


}







/* Animation */


.feature-item{


animation:featureShow .8s ease;


}



@keyframes featureShow{


from{


opacity:0;


transform:translateY(30px);


}


to{


opacity:1;


transform:translateY(0);


}


}







/* Tablet */


@media(max-width:992px){


.features-wrapper{


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


}


}






/* Mobile */


@media(max-width:768px){



.features-section{


padding:50px 15px;


}



.section-heading h2{


font-size:28px;


}



.section-heading p{


font-size:15px;


}



.features-wrapper{


grid-template-columns:1fr;


gap:20px;


}



.feature-item{


padding:30px 20px;


}



.feature-icon{


width:65px;


height:65px;


font-size:25px;


}



.feature-item h3{


font-size:20px;


}



}
.feature-blue .feature-icon{
background:linear-gradient(135deg,#2563eb,#60a5fa);
}

.feature-blue h3,
.feature-blue .feature-link{
color:#2563eb;
}



.feature-orange .feature-icon{
background:linear-gradient(135deg,#ea580c,#fb923c);
}

.feature-orange h3,
.feature-orange .feature-link{
color:#ea580c;
}



.feature-purple .feature-icon{
background:linear-gradient(135deg,#7c3aed,#c084fc);
}

.feature-purple h3,
.feature-purple .feature-link{
color:#7c3aed;
}



.feature-green .feature-icon{
background:linear-gradient(135deg,#16a34a,#4ade80);
}

.feature-green h3,
.feature-green .feature-link{
color:#16a34a;
}
/* Features Main Heading Color Animation */

.gradient-heading{

font-size:38px;

font-weight:800;

line-height:1.3;

background:linear-gradient(
90deg,
#2563eb,
#7c3aed,
#ec4899,
#f97316,
#16a34a
);

background-size:300% 300%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:headingColorMove 6s ease infinite;

}



.gradient-heading span{

font-weight:900;

}



@keyframes headingColorMove{


0%{

background-position:0% 50%;

}


50%{

background-position:100% 50%;

}


100%{

background-position:0% 50%;

}


}




@media(max-width:768px){


.gradient-heading{

font-size:28px;

}


}
/* =====================================================
   NEXORA DIGITAL - FEATURES COMPLETE CSS
===================================================== */


/* FEATURES SECTION */

.features-section{

    padding:80px 0;

    background:#ffffff;

}



.section-heading{

    text-align:center;

    max-width:750px;

    margin:0 auto 50px;

}



.section-heading span{

    display:inline-block;

    background:#eef2ff;

    color:#2563eb;

    padding:8px 22px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;

    margin-bottom:15px;

}





/* COLORFUL HEADING */


.section-heading h2{


    font-size:40px;

    font-weight:900;

    line-height:1.3;


    background:linear-gradient(

    90deg,

    #2563eb,

    #7c3aed,

    #ec4899,

    #f97316,

    #16a34a

    );


    background-size:300%;


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:featureTitleColor 6s infinite;


}



@keyframes featureTitleColor{


0%{

background-position:0%;

}


50%{

background-position:100%;

}


100%{

background-position:0%;

}


}




.section-heading p{

    color:#64748b;

    font-size:17px;

    line-height:1.7;

}





/* FEATURES GRID */


.features-wrapper{


display:grid;


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


gap:25px;


}





/* CARD */


.feature-item{


padding:35px 25px;


min-height:350px;


border-radius:25px;


display:flex;


flex-direction:column;


align-items:center;


text-align:center;


border:1px solid #e2e8f0;


transition:.4s;


}




.feature-item:hover{


transform:translateY(-10px);


box-shadow:0 20px 40px rgba(0,0,0,.12);


}





/* CARD BACKGROUND COLOR */


.feature-blue{


background:linear-gradient(

145deg,

#ffffff,

#dbeafe

);


}


.feature-orange{


background:linear-gradient(

145deg,

#ffffff,

#ffedd5

);


}



.feature-purple{


background:linear-gradient(

145deg,

#ffffff,

#ede9fe

);


}



.feature-green{


background:linear-gradient(

145deg,

#ffffff,

#dcfce7

);


}






/* ICON */


.feature-icon{


width:80px;


height:80px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


font-size:32px;


color:white;


margin-bottom:20px;


}



.feature-blue .feature-icon{

background:linear-gradient(
135deg,
#2563eb,
#60a5fa
);

}



.feature-orange .feature-icon{

background:linear-gradient(
135deg,
#ea580c,
#fb923c
);

}



.feature-purple .feature-icon{

background:linear-gradient(
135deg,
#7c3aed,
#a855f7
);

}



.feature-green .feature-icon{

background:linear-gradient(
135deg,
#16a34a,
#4ade80
);

}





/* TITLE */


.feature-item h3{


font-size:22px;


font-weight:800;


margin-bottom:15px;


}



.feature-blue h3,
.feature-blue .feature-link{

color:#2563eb;

}



.feature-orange h3,
.feature-orange .feature-link{

color:#ea580c;

}



.feature-purple h3,
.feature-purple .feature-link{

color:#7c3aed;

}



.feature-green h3,
.feature-green .feature-link{

color:#16a34a;

}






/* DESCRIPTION */


.feature-item p{


font-size:15px;


line-height:1.7;


color:#64748b;


margin-bottom:15px;


}






/* LEARN MORE */


.feature-link{


margin-top:auto;


text-decoration:none;


font-weight:700;


font-size:16px;


}








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


@media(max-width:992px){


.features-wrapper{


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


}


}









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


@media(max-width:768px){


.features-section{


padding:50px 12px;


}



.section-heading h2{


font-size:28px;


}



.section-heading p{


font-size:15px;


}





.features-wrapper{


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


gap:15px;


}





.feature-item{


padding:22px 12px;


min-height:270px;


border-radius:22px;


}





.feature-icon{


width:60px;


height:60px;


font-size:25px;


margin-bottom:15px;


}




.feature-item h3{


font-size:17px;


line-height:1.3;


margin-bottom:10px;


}




.feature-item p{


font-size:13px;


line-height:1.5;


}



.feature-link{


font-size:14px;


}



}








/* SMALL MOBILE */


@media(max-width:420px){


.features-wrapper{


gap:10px;


}



.feature-item{


padding:18px 10px;


min-height:250px;


}




.feature-item h3{


font-size:15px;


}



.feature-item p{


font-size:12px;


}



}
/* =====================================================
   FINAL FEATURE MOBILE OVERRIDE
===================================================== */


.features-section .features-wrapper{

display:grid;

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

gap:25px;

width:100%;

}




.features-section .feature-item{

width:100%;

min-width:0;

}





@media(max-width:768px){


.features-section .container{

width:100%;

padding-left:12px;

padding-right:12px;

}



.features-section .features-wrapper{


display:grid !important;


grid-template-columns:repeat(2, minmax(0,1fr)) !important;


gap:14px !important;


}




.features-section .feature-item{


padding:20px 12px !important;


min-height:240px !important;


height:auto !important;


border-radius:22px !important;


}



.features-section .feature-icon{


width:58px !important;


height:58px !important;


font-size:24px !important;


margin-bottom:12px !important;


}



.features-section .feature-item h3{


font-size:17px !important;


line-height:1.3 !important;


word-break:normal !important;


}



.features-section .feature-item p{


font-size:13px !important;


line-height:1.5 !important;


}



.features-section .feature-link{


font-size:14px !important;


}



}





@media(max-width:420px){



.features-section .features-wrapper{


gap:10px !important;


}



.features-section .feature-item{


padding:18px 8px !important;


min-height:220px !important;


}



.features-section .feature-item h3{


font-size:15px !important;


}



.features-section .feature-item p{


font-size:12px !important;


}



}
@media(max-width:768px){

.feature-item{

min-height:280px;

padding:20px 15px;

}

.features-wrapper{

gap:21px;

}

}
/* =====================================================
   NEXORA DIGITAL - SERVICES SECTION
===================================================== */


.services-section{

    padding:80px 0;

    background:#ffffff;

}




/* Services Grid */


.services-wrapper{


display:grid;


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


gap:25px;


}





/* Service Card */


.service-card{


padding:30px 22px;


border-radius:25px;


text-align:center;


border:1px solid #e5e7eb;


transition:.4s;


display:flex;


flex-direction:column;


align-items:center;


overflow:hidden;


}



.service-card:hover{


transform:translateY(-10px);


box-shadow:0 20px 40px rgba(0,0,0,.12);


}







/* Card Colors */


.service-blue{


background:linear-gradient(

145deg,

#ffffff,

#eff6ff

);


}



.service-orange{


background:linear-gradient(

145deg,

#ffffff,

#fff7ed

);


}



.service-purple{


background:linear-gradient(

145deg,

#ffffff,

#faf5ff

);


}



.service-green{


background:linear-gradient(

145deg,

#ffffff,

#f0fdf4

);


}






/* Service Image */


.service-image{


width:100%;


height:180px;


overflow:hidden;


border-radius:18px;


margin-bottom:20px;


}




.service-image img{


width:100%;


height:100%;


object-fit:cover;


transition:.4s;


}



.service-card:hover .service-image img{


transform:scale(1.08);


}






/* Icon */


.service-icon{


width:75px;


height:75px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


font-size:30px;


color:white;


margin-bottom:20px;


}




.service-blue .service-icon{


background:#2563eb;


}



.service-orange .service-icon{


background:#f97316;


}



.service-purple .service-icon{


background:#7c3aed;


}



.service-green .service-icon{


background:#16a34a;


}






/* Title */


.service-card h3{


font-size:22px;


font-weight:800;


margin-bottom:15px;


}



.service-blue h3{


color:#2563eb;


}


.service-orange h3{


color:#ea580c;


}



.service-purple h3{


color:#7c3aed;


}



.service-green h3{


color:#16a34a;


}






/* Description */


.service-card p{


font-size:15px;


line-height:1.7;


color:#64748b;


margin-bottom:20px;


}






/* Button */


.service-btn{


margin-top:auto;


text-decoration:none;


font-size:15px;


font-weight:700;


padding:10px 22px;


border-radius:30px;


background:white;


}





.service-blue .service-btn{


color:#2563eb;

border:1px solid #2563eb;

}


.service-orange .service-btn{


color:#ea580c;

border:1px solid #ea580c;

}


.service-purple .service-btn{


color:#7c3aed;

border:1px solid #7c3aed;

}


.service-green .service-btn{


color:#16a34a;

border:1px solid #16a34a;

}






.service-btn:hover{


background:#111827;

color:white !important;


}







/* Tablet */


@media(max-width:992px){


.services-wrapper{


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


}


}







/* Mobile */


@media(max-width:768px){



.services-section{


padding:50px 12px;


}




.services-wrapper{


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


gap:15px;


}




.service-card{


padding:22px 12px;


border-radius:22px;


}





.service-image{


height:130px;


}



.service-icon{


width:60px;


height:60px;


font-size:24px;


}



.service-card h3{


font-size:17px;


}



.service-card p{


font-size:13px;


line-height:1.5;


}



.service-btn{


font-size:13px;


padding:8px 15px;


}



}






/* Small Mobile */


@media(max-width:420px){


.services-wrapper{


gap:10px;


}



.service-card{


padding:18px 10px;


}



.service-card h3{


font-size:15px;


}



.service-card p{


font-size:12px;


}



}
/* =====================================================
   SERVICES FINAL UNIQUE CSS
===================================================== */


.services-section{

padding:80px 0;

background:#fff;

}



.services-heading{

text-align:center;

max-width:750px;

margin:0 auto 45px;

}



.services-heading span{

display:inline-block;

background:#eef2ff;

color:#2563eb;

padding:8px 20px;

border-radius:30px;

font-weight:700;

}




.services-gradient-heading{


font-size:40px;

font-weight:900;


background:linear-gradient(
90deg,
#2563eb,
#7c3aed,
#ec4899,
#f97316,
#16a34a
);


background-size:300%;


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


animation:serviceHeadingColor 6s infinite;


}



@keyframes serviceHeadingColor{


0%{
background-position:0%;
}


50%{
background-position:100%;
}


100%{
background-position:0%;
}


}



.services-heading p{

color:#64748b;

font-size:17px;

}





.services-wrapper{


display:grid;

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

gap:25px;


}





.service-card{


padding:30px 20px;

border-radius:25px;

text-align:center;

min-height:330px;

display:flex;

flex-direction:column;

align-items:center;

border:1px solid #e5e7eb;

}



.service-card:hover{

transform:translateY(-8px);

}





.service-blue{

background:#eff6ff;

}


.service-orange{

background:#fff7ed;

}


.service-purple{

background:#faf5ff;

}


.service-green{

background:#f0fdf4;

}





.service-icon{

width:75px;

height:75px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:30px;

margin-bottom:20px;

}



.service-blue .service-icon{

background:#2563eb;

}


.service-orange .service-icon{

background:#f97316;

}


.service-purple .service-icon{

background:#7c3aed;

}


.service-green .service-icon{

background:#16a34a;

}




.service-card h3{

font-size:22px;

font-weight:800;

margin-bottom:15px;

}



.service-card p{

font-size:15px;

line-height:1.6;

color:#64748b;

}



.service-btn{

margin-top:auto;

padding:10px 20px;

border-radius:30px;

text-decoration:none;

font-weight:700;

}





@media(max-width:992px){


.services-wrapper{

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

}

}



@media(max-width:768px){


.services-wrapper{

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

gap:15px;

}



.service-card{

min-height:280px;

padding:20px 12px;

}



.services-gradient-heading{

font-size:28px;

}



.service-icon{

width:60px;

height:60px;

font-size:24px;

}



.service-card h3{

font-size:17px;

}


.service-card p{

font-size:13px;

}


}