/*=========================================================
    RESPONSIVE.CSS
    PART 1
    Enterprise Responsive Layout
==========================================================*/


/*=========================================================
    LARGE DESKTOP
    1600px+
==========================================================*/

@media (min-width:1600px){

.container{
    max-width:1500px;
}

.hero{
    min-height:950px;
}

.hero-content{
    max-width:760px;
}

.hero-title{
    font-size:5rem;
    line-height:1.15;
}

.hero-subtitle{
    font-size:1.45rem;
}

.section-title{
    font-size:3.5rem;
}

.section-subtitle{
    font-size:1.35rem;
}

.navbar{
    padding:20px 60px;
}

.logo img{
    height:72px;
}

.service-grid,
.product-grid,
.feature-grid{
    gap:40px;
}

.btn{
    padding:18px 40px;
    font-size:1rem;
}

}


/*=========================================================
    DESKTOP
    1400px
==========================================================*/

@media (max-width:1400px){

.container{
    max-width:1320px;
}

.hero{
    min-height:880px;
}

.hero-title{
    font-size:4.4rem;
}

.hero-subtitle{
    font-size:1.25rem;
}

.section-title{
    font-size:3rem;
}

.section-padding{
    padding:110px 0;
}

.navbar{
    padding:18px 40px;
}

.nav-menu{
    gap:28px;
}

.logo img{
    height:64px;
}

.hero-buttons{
    gap:18px;
}

}


/*=========================================================
    LAPTOP
    1200px
==========================================================*/

@media (max-width:1200px){

.container{
    max-width:1140px;
    padding:0 25px;
}

.section-padding{
    padding:90px 0;
}

.hero{
    min-height:760px;
}

.hero-title{
    font-size:3.7rem;
}

.hero-subtitle{
    font-size:1.15rem;
}

.hero-content{
    max-width:650px;
}

.section-title{
    font-size:2.7rem;
}

.section-subtitle{
    font-size:1.05rem;
}

.logo img{
    height:58px;
}

.btn{
    padding:15px 34px;
}

}


/*=========================================================
    CONTAINERS
==========================================================*/

@media (max-width:1400px){

.container-xl{

max-width:1280px;

}

}

@media (max-width:1200px){

.container-lg{

max-width:1140px;

}

}

@media (max-width:992px){

.container,
.container-lg,
.container-xl{

max-width:960px;
padding:0 20px;

}

}

@media (max-width:768px){

.container,
.container-lg,
.container-xl{

max-width:100%;
padding:0 18px;

}

}

@media (max-width:576px){

.container{

padding:0 16px;

}

}


/*=========================================================
    TYPOGRAPHY
==========================================================*/

@media (max-width:1400px){

h1{
font-size:3.8rem;
}

h2{
font-size:2.8rem;
}

}

@media (max-width:1200px){

h1{
font-size:3.2rem;
}

h2{
font-size:2.5rem;
}

h3{
font-size:1.8rem;
}

p{
font-size:1rem;
}

}

@media (max-width:992px){

h1{
font-size:2.8rem;
}

h2{
font-size:2.2rem;
}

h3{
font-size:1.6rem;
}

}

@media (max-width:768px){

h1{
font-size:2.4rem;
}

h2{
font-size:2rem;
}

h3{
font-size:1.45rem;
}

p{
font-size:.96rem;
}

}

@media (max-width:576px){

h1{
font-size:2rem;
line-height:1.3;
}

h2{
font-size:1.7rem;
}

h3{
font-size:1.25rem;
}

p{
font-size:.95rem;
}

}


/*=========================================================
    NAVIGATION
==========================================================*/

@media (max-width:1200px){

.navbar{

padding:15px 24px;

}

.nav-menu{

gap:22px;

}

.nav-menu a{

font-size:.95rem;

}

.mega-menu{

width:1000px;

}

}

@media (max-width:992px){

.navbar{

height:80px;

}

.logo img{

height:52px;

}

.nav-menu{

display:none;

}

.mobile-toggle{

display:flex;

}

}

@media (max-width:768px){

.navbar{

padding:12px 18px;

height:74px;

}

.logo img{

height:46px;

}

.mobile-toggle{

width:42px;
height:42px;

}

}

@media (max-width:576px){

.logo img{

height:40px;

}

.navbar{

padding:10px 15px;

}

}


/*=========================================================
    HERO SECTION
==========================================================*/

@media (max-width:1400px){

.hero{

min-height:820px;

}

.hero-content{

max-width:680px;

}

}

@media (max-width:1200px){

.hero{

min-height:720px;

}

.hero-content{

max-width:620px;

}

.hero-title{

font-size:3.5rem;

}

.hero-video{

object-position:center;

}

}

@media (max-width:992px){

.hero{

min-height:680px;
text-align:center;
padding:140px 0 80px;

}

.hero-content{

margin:auto;

}

.hero-title{

font-size:3rem;

}

.hero-subtitle{

font-size:1.05rem;

}

.hero-buttons{

justify-content:center;
flex-wrap:wrap;

}

.hero-video{

opacity:.35;

}

}

@media (max-width:768px){

.hero{

min-height:620px;
padding:120px 0 70px;

}

.hero-title{

font-size:2.5rem;

}

.hero-subtitle{

font-size:1rem;
line-height:1.7;

}

.hero-buttons{

flex-direction:column;
align-items:center;

}

.hero-buttons .btn{

width:100%;
max-width:280px;

}

}

@media (max-width:576px){

.hero{

min-height:560px;

}

.hero-title{

font-size:2rem;

}

.hero-subtitle{

font-size:.95rem;

}

.hero-content{

max-width:100%;

}

.hero-scroll{

display:none;

}

}


/*=========================================================
    HERO VIDEO OVERLAY
==========================================================*/

@media (max-width:992px){

.hero-video{

filter:brightness(.45);

}

.hero-overlay{

background:rgba(5,15,35,.55);

}

}

@media (max-width:768px){

.hero-video{

display:block;

object-fit:cover;

}

}


/*=========================================================
    BUTTON SPACING
==========================================================*/

@media (max-width:768px){

.btn{

padding:14px 28px;

font-size:.95rem;

}

.btn-lg{

padding:16px 34px;

}

}


/*=========================================================
    RESPONSIVE UTILITIES
==========================================================*/

.hide-xl{

display:none;

}

@media (max-width:992px){

.hide-lg{

display:none !important;

}

.show-lg{

display:block !important;

}

}

@media (max-width:768px){

.hide-md{

display:none !important;

}

.show-md{

display:block !important;

}

}

@media (max-width:576px){

.hide-sm{

display:none !important;

}

.show-sm{

display:block !important;

}

}

/*=========================================================
    END PART 1
==========================================================*/
/*=========================================================
    RESPONSIVE.CSS
    PART 2A-1
    SERVICE CARDS
=========================================================*/


/*=========================================================
    LARGE DESKTOP (1600px+)
=========================================================*/

@media (min-width:1600px){

.service-grid{
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.service-card{
    padding:45px 35px;
    min-height:420px;
}

.service-card .service-icon{
    width:90px;
    height:90px;
    font-size:42px;
}

.service-card h3{
    font-size:1.7rem;
}

.service-card p{
    font-size:1.05rem;
}

}


/*=========================================================
    DESKTOP (1400px)
=========================================================*/

@media (max-width:1400px){

.service-grid{
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.service-card{
    padding:35px 28px;
}

.service-card .service-icon{
    width:80px;
    height:80px;
}

.service-card h3{
    font-size:1.45rem;
}

}


/*=========================================================
    LAPTOP (1200px)
=========================================================*/

@media (max-width:1200px){

.service-grid{
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.service-card{
    padding:32px 25px;
}

.service-card .service-icon{
    width:72px;
    height:72px;
    font-size:34px;
}

.service-card h3{
    font-size:1.3rem;
}

.service-card p{
    font-size:.95rem;
}

}


/*=========================================================
    TABLET (992px)
=========================================================*/

@media (max-width:992px){

.service-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.service-card{
    min-height:unset;
    text-align:center;
}

.service-card .service-icon{
    margin:0 auto 20px;
}

.service-card .btn{
    width:100%;
}

}


/*=========================================================
    MOBILE (768px)
=========================================================*/

@media (max-width:768px){

.service-grid{
    grid-template-columns:1fr;
    gap:22px;
}

.service-card{
    padding:28px 22px;
}

.service-card h3{
    font-size:1.25rem;
}

.service-card p{
    font-size:.92rem;
}

.service-card .service-icon{
    width:64px;
    height:64px;
    font-size:30px;
}

.service-card:hover{
    transform:none;
}

}


/*=========================================================
    SMALL MOBILE (576px)
=========================================================*/

@media (max-width:576px){

.service-section{
    padding:70px 0;
}

.service-grid{
    gap:18px;
}

.service-card{
    padding:24px 18px;
    border-radius:18px;
}

.service-card h3{
    font-size:1.15rem;
}

.service-card p{
    font-size:.90rem;
    line-height:1.7;
}

.service-card .service-icon{
    width:58px;
    height:58px;
    font-size:26px;
}

.service-card .btn{
    width:100%;
    padding:12px 20px;
}

}


/*=========================================================
    GLASSMORPHISM SERVICE CARDS
=========================================================*/

@media (max-width:1200px){

.service-card.glass{

    backdrop-filter:blur(16px);

}

}

@media (max-width:768px){

.service-card.glass{

    backdrop-filter:blur(10px);

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

}

}


/*=========================================================
    SERVICE ICONS
=========================================================*/

@media (max-width:992px){

.service-icon svg,
.service-icon img{

    width:36px;
    height:36px;

}

}

@media (max-width:576px){

.service-icon svg,
.service-icon img{

    width:28px;
    height:28px;

}

}


/*=========================================================
    SERVICE CONTENT
=========================================================*/

@media (max-width:768px){

.service-card ul{

    text-align:left;

    padding-left:18px;

}

.service-card li{

    margin-bottom:8px;

    font-size:.9rem;

}

}


/*=========================================================
    HOVER OPTIMIZATION
=========================================================*/

@media (hover:hover){

.service-card{

    transition:all .35s ease;

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,87,217,.15);

}

}


/*=========================================================
    TOUCH DEVICES
=========================================================*/

@media (hover:none){

.service-card:hover{

    transform:none;

    box-shadow:none;

}

.service-card:active{

    transform:scale(.98);

}

}


/*=========================================================
    END SERVICE CARDS
=========================================================*/
/*=========================================================
    RESPONSIVE.CSS
    PART 2A-2
    FEATURE CARDS
=========================================================*/


/*=========================================================
    LARGE DESKTOP (1600px+)
=========================================================*/

@media (min-width:1600px){

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.feature-card{
    padding:45px 35px;
    min-height:420px;
}

.feature-icon{
    width:90px;
    height:90px;
    margin-bottom:30px;
}

.feature-icon img,
.feature-icon svg{
    width:46px;
    height:46px;
}

.feature-card h3{
    font-size:1.7rem;
}

.feature-card p{
    font-size:1.05rem;
    line-height:1.9;
}

}


/*=========================================================
    DESKTOP (1400px)
=========================================================*/

@media (max-width:1400px){

.feature-grid{
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.feature-card{
    padding:36px 28px;
}

.feature-icon{
    width:82px;
    height:82px;
}

.feature-card h3{
    font-size:1.45rem;
}

}


/*=========================================================
    LAPTOP (1200px)
=========================================================*/

@media (max-width:1200px){

.feature-grid{
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.feature-card{
    padding:32px 24px;
}

.feature-icon{
    width:72px;
    height:72px;
}

.feature-icon img,
.feature-icon svg{
    width:36px;
    height:36px;
}

.feature-card h3{
    font-size:1.3rem;
}

.feature-card p{
    font-size:.95rem;
}

}


/*=========================================================
    TABLET (992px)
=========================================================*/

@media (max-width:992px){

.feature-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.feature-card{
    text-align:center;
    min-height:auto;
}

.feature-icon{
    margin:0 auto 20px;
}

.feature-card .btn{
    width:100%;
}

}


/*=========================================================
    MOBILE (768px)
=========================================================*/

@media (max-width:768px){

.feature-grid{
    grid-template-columns:1fr;
    gap:22px;
}

.feature-card{
    padding:28px 22px;
}

.feature-icon{
    width:64px;
    height:64px;
}

.feature-icon img,
.feature-icon svg{
    width:30px;
    height:30px;
}

.feature-card h3{
    font-size:1.2rem;
}

.feature-card p{
    font-size:.92rem;
}

.feature-card:hover{
    transform:none;
}

}


/*=========================================================
    SMALL MOBILE (576px)
=========================================================*/

@media (max-width:576px){

.feature-section{
    padding:70px 0;
}

.feature-grid{
    gap:18px;
}

.feature-card{
    padding:24px 18px;
    border-radius:18px;
}

.feature-card h3{
    font-size:1.1rem;
}

.feature-card p{
    font-size:.90rem;
    line-height:1.7;
}

.feature-icon{
    width:56px;
    height:56px;
}

.feature-icon img,
.feature-icon svg{
    width:26px;
    height:26px;
}

.feature-card .btn{
    width:100%;
}

}


/*=========================================================
    FEATURE LIST
=========================================================*/

@media (max-width:768px){

.feature-list{
    padding-left:20px;
    text-align:left;
}

.feature-list li{
    margin-bottom:8px;
    font-size:.9rem;
}

}


/*=========================================================
    GLASS FEATURE CARDS
=========================================================*/

@media (max-width:1200px){

.feature-card.glass{
    backdrop-filter:blur(16px);
}

}

@media (max-width:768px){

.feature-card.glass{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
}

}


/*=========================================================
    HOVER EFFECTS
=========================================================*/

@media (hover:hover){

.feature-card{
    transition:all .35s ease;
}

.feature-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 50px rgba(0,87,217,.15);
}

.feature-card:hover .feature-icon{
    transform:rotate(8deg) scale(1.08);
}

.feature-icon{
    transition:all .35s ease;
}

}


/*=========================================================
    TOUCH DEVICES
=========================================================*/

@media (hover:none){

.feature-card:hover{
    transform:none;
    box-shadow:none;
}

.feature-card:active{
    transform:scale(.98);
}

}


/*=========================================================
    EQUAL HEIGHT SUPPORT
=========================================================*/

@media (min-width:992px){

.feature-grid.equal-height{
    align-items:stretch;
}

.feature-grid.equal-height .feature-card{
    display:flex;
    flex-direction:column;
}

.feature-card .btn{
    margin-top:auto;
}

}


/*=========================================================
    END FEATURE CARDS
=========================================================*/
/*=========================================================
    RESPONSIVE.CSS
    PART 2A-3
    STATISTICS SECTION
=========================================================*/


/*=========================================================
    LARGE DESKTOP (1600px+)
=========================================================*/

@media (min-width:1600px){

.statistics-section{
    padding:140px 0;
}

.statistics-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.stat-card{
    padding:50px 35px;
    min-height:320px;
}

.stat-icon{
    width:95px;
    height:95px;
    font-size:42px;
}

.stat-number{
    font-size:4rem;
}

.stat-title{
    font-size:1.35rem;
}

.stat-description{
    font-size:1.05rem;
}

}


/*=========================================================
    DESKTOP (1400px)
=========================================================*/

@media (max-width:1400px){

.statistics-grid{
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.stat-card{
    padding:40px 28px;
}

.stat-number{
    font-size:3.4rem;
}

.stat-icon{
    width:82px;
    height:82px;
}

}


/*=========================================================
    LAPTOP (1200px)
=========================================================*/

@media (max-width:1200px){

.statistics-grid{
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.stat-card{
    padding:34px 22px;
}

.stat-icon{
    width:72px;
    height:72px;
    font-size:34px;
}

.stat-number{
    font-size:3rem;
}

.stat-title{
    font-size:1.15rem;
}

.stat-description{
    font-size:.95rem;
}

}


/*=========================================================
    TABLET (992px)
=========================================================*/

@media (max-width:992px){

.statistics-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.stat-card{
    text-align:center;
    min-height:auto;
}

.stat-icon{
    margin:0 auto 20px;
}

.stat-number{
    font-size:2.8rem;
}

}


/*=========================================================
    MOBILE (768px)
=========================================================*/

@media (max-width:768px){

.statistics-section{
    padding:80px 0;
}

.statistics-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.stat-card{
    padding:28px 22px;
}

.stat-number{
    font-size:2.5rem;
}

.stat-title{
    font-size:1.1rem;
}

.stat-description{
    font-size:.92rem;
}

.stat-icon{
    width:64px;
    height:64px;
    font-size:28px;
}

}


/*=========================================================
    SMALL MOBILE (576px)
=========================================================*/

@media (max-width:576px){

.statistics-section{
    padding:70px 0;
}

.statistics-grid{
    gap:16px;
}

.stat-card{
    padding:24px 18px;
    border-radius:18px;
}

.stat-number{
    font-size:2.2rem;
}

.stat-title{
    font-size:1rem;
}

.stat-description{
    font-size:.90rem;
}

.stat-icon{
    width:56px;
    height:56px;
    font-size:24px;
}

}


/*=========================================================
    GLASSMORPHISM STATISTICS CARDS
=========================================================*/

@media (max-width:1200px){

.stat-card.glass{
    backdrop-filter:blur(16px);
}

}

@media (max-width:768px){

.stat-card.glass{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
}

}


/*=========================================================
    ICON SCALING
=========================================================*/

@media (max-width:992px){

.stat-icon svg,
.stat-icon img{
    width:34px;
    height:34px;
}

}

@media (max-width:576px){

.stat-icon svg,
.stat-icon img{
    width:26px;
    height:26px;
}

}


/*=========================================================
    COUNTER ALIGNMENT
=========================================================*/

@media (max-width:768px){

.stat-number,
.stat-title,
.stat-description{
    text-align:center;
}

.stat-prefix,
.stat-suffix{
    font-size:.9em;
}

}


/*=========================================================
    HOVER EFFECTS
=========================================================*/

@media (hover:hover){

.stat-card{
    transition:all .35s ease;
}

.stat-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,87,217,.15);
}

.stat-card:hover .stat-icon{
    transform:scale(1.1) rotate(8deg);
}

.stat-icon{
    transition:all .35s ease;
}

}


/*=========================================================
    TOUCH DEVICES
=========================================================*/

@media (hover:none){

.stat-card:hover{
    transform:none;
    box-shadow:none;
}

.stat-card:active{
    transform:scale(.98);
}

}


/*=========================================================
    KPI DASHBOARD LAYOUT
=========================================================*/

@media (min-width:992px){

.statistics-dashboard{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    align-items:stretch;
}

.statistics-sidebar{
    display:flex;
    flex-direction:column;
    gap:24px;
}

}

@media (max-width:992px){

.statistics-dashboard{
    display:block;
}

.statistics-sidebar{
    margin-top:30px;
}

}


/*=========================================================
    ANIMATED COUNTER RESPONSIVENESS
=========================================================*/

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

.stat-card,
.stat-icon,
.counter{
    transition:none !important;
    animation:none !important;
}

}


/*=========================================================
    END STATISTICS
=========================================================*/

/*=========================================================
    RESPONSIVE.CSS
    PART 2B-1
    CLIENT LOGOS & TECHNOLOGY STACK
==========================================================*/

/*=========================================================
    CLIENT LOGOS SECTION
==========================================================*/

/*--------------- Large Desktop ---------------*/

@media (min-width:1600px){

.client-section{
    padding:130px 0;
}

.client-carousel{
    gap:60px;
}

.client-logo{
    width:180px;
    height:90px;
    padding:20px;
}

.client-logo img{
    max-width:150px;
    max-height:60px;
}

}

/*--------------- Desktop ---------------*/

@media (max-width:1400px){

.client-carousel{
    gap:45px;
}

.client-logo{
    width:165px;
    height:85px;
}

}

/*--------------- Laptop ---------------*/

@media (max-width:1200px){

.client-carousel{
    gap:30px;
}

.client-logo{
    width:150px;
    height:80px;
    padding:18px;
}

.client-logo img{
    max-width:130px;
}

}

/*--------------- Tablet ---------------*/

@media (max-width:992px){

.client-section{
    padding:90px 0;
}

.client-carousel{
    gap:20px;
}

.client-logo{
    width:135px;
    height:75px;
}

}

/*--------------- Mobile ---------------*/

@media (max-width:768px){

.client-section{
    padding:70px 0;
}

.client-carousel{
    gap:16px;
}

.client-logo{
    width:120px;
    height:70px;
    padding:15px;
}

.client-logo img{
    max-width:95px;
}

}

/*--------------- Small Mobile ---------------*/

@media (max-width:576px){

.client-logo{
    width:100px;
    height:60px;
    padding:12px;
}

.client-logo img{
    max-width:80px;
}

}

/*=========================================================
    LOGO CAROUSEL
==========================================================*/

@media (hover:hover){

.client-logo{

transition:all .35s ease;

filter:grayscale(100%);
opacity:.65;

}

.client-logo:hover{

filter:none;
opacity:1;

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,87,217,.15);

}

}

@media (hover:none){

.client-logo{

filter:none;
opacity:1;

}

.client-logo:active{

transform:scale(.96);

}

}

/*=========================================================
    INFINITE MARQUEE
==========================================================*/

@media(max-width:768px){

.client-marquee{

animation-duration:28s;

}

}

/*=========================================================
    TECHNOLOGY STACK
==========================================================*/

/*--------------- Large Desktop ---------------*/

@media(min-width:1600px){

.tech-grid{

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

gap:40px;

}

.tech-card{

padding:40px;

min-height:220px;

}

.tech-icon{

width:90px;
height:90px;

}

.tech-icon img{

width:56px;
height:56px;

}

.tech-card h4{

font-size:1.3rem;

}

}

/*--------------- Desktop ---------------*/

@media(max-width:1400px){

.tech-grid{

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

gap:28px;

}

.tech-card{

padding:32px;

}

}

/*--------------- Laptop ---------------*/

@media(max-width:1200px){

.tech-grid{

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

gap:24px;

}

.tech-card{

padding:28px;

}

.tech-icon{

width:72px;
height:72px;

}

.tech-icon img{

width:42px;
height:42px;

}

}

/*--------------- Tablet ---------------*/

@media(max-width:992px){

.tech-grid{

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

gap:20px;

}

.tech-card{

padding:24px;
text-align:center;

}

}

/*--------------- Mobile ---------------*/

@media(max-width:768px){

.tech-section{

padding:80px 0;

}

.tech-grid{

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

gap:18px;

}

.tech-card{

padding:22px 18px;

}

.tech-icon{

width:64px;
height:64px;

margin:auto auto 18px;

}

.tech-icon img{

width:36px;
height:36px;

}

.tech-card h4{

font-size:1rem;

}

}

/*--------------- Small Mobile ---------------*/

@media(max-width:576px){

.tech-grid{

grid-template-columns:1fr;

}

.tech-card{

padding:22px;

}

.tech-icon{

width:58px;
height:58px;

}

.tech-icon img{

width:30px;
height:30px;

}

}

/*=========================================================
    TECHNOLOGY ICONS
==========================================================*/

@media(hover:hover){

.tech-card{

transition:all .35s ease;

}

.tech-card:hover{

transform:translateY(-10px);

box-shadow:0 22px 50px rgba(0,87,217,.15);

}

.tech-card:hover .tech-icon{

transform:rotate(10deg) scale(1.08);

}

.tech-icon{

transition:.35s;

}

}

@media(hover:none){

.tech-card:hover{

transform:none;
box-shadow:none;

}

.tech-card:active{

transform:scale(.98);

}

}

/*=========================================================
    TECHNOLOGY CATEGORY GRID
==========================================================*/

@media(max-width:1200px){

.tech-category{

margin-bottom:45px;

}

}

@media(max-width:768px){

.tech-category{

margin-bottom:35px;

}

.tech-category-title{

text-align:center;

}

}

/*=========================================================
    TECHNOLOGY FILTERS
==========================================================*/

@media(max-width:768px){

.tech-filters{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;

}

.tech-filter{

font-size:.9rem;
padding:10px 16px;

}

}

/*=========================================================
    RESPONSIVE UTILITIES
==========================================================*/

@media(max-width:992px){

.hide-tech-tablet{

display:none !important;

}

}

@media(max-width:768px){

.hide-tech-mobile{

display:none !important;

}

.show-tech-mobile{

display:block !important;

}

}

/*=========================================================
    END PART 2B-1
==========================================================*/
/*=========================================================
    RESPONSIVE.CSS
    PART 2B-2A-1
    FEATURED PRODUCTS
    Product Grid • Product Cards • Product Images
    Glassmorphism Cards
==========================================================*/


/*=========================================================
    LARGE DESKTOP (1600px+)
==========================================================*/

@media (min-width:1600px){

.products-section{
    padding:140px 0;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.product-card{
    min-height:560px;
    border-radius:28px;
    overflow:hidden;
}

.product-image{
    height:260px;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.product-content{
    padding:35px;
}

.product-title{
    font-size:1.7rem;
}

.product-description{
    font-size:1.05rem;
    line-height:1.9;
}

}


/*=========================================================
    DESKTOP
==========================================================*/

@media(max-width:1400px){

.product-grid{
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.product-card{
    min-height:520px;
}

.product-image{
    height:240px;
}

.product-content{
    padding:30px;
}

.product-title{
    font-size:1.45rem;
}

}


/*=========================================================
    LAPTOP
==========================================================*/

@media(max-width:1200px){

.product-grid{
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.product-card{
    min-height:500px;
}

.product-image{
    height:220px;
}

.product-content{
    padding:26px;
}

.product-title{
    font-size:1.3rem;
}

.product-description{
    font-size:.95rem;
}

}


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

@media(max-width:992px){

.product-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.product-card{
    min-height:auto;
}

.product-content{
    text-align:center;
}

.product-image{
    height:210px;
}

}


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

@media(max-width:768px){

.products-section{
    padding:80px 0;
}

.product-grid{
    grid-template-columns:1fr;
    gap:22px;
}

.product-card{
    border-radius:22px;
}

.product-image{
    height:220px;
}

.product-content{
    padding:24px;
}

.product-title{
    font-size:1.2rem;
}

.product-description{
    font-size:.92rem;
}

}


/*=========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:576px){

.products-section{
    padding:70px 0;
}

.product-grid{
    gap:18px;
}

.product-card{
    border-radius:18px;
}

.product-image{
    height:190px;
}

.product-content{
    padding:20px;
}

.product-title{
    font-size:1.1rem;
}

.product-description{
    font-size:.90rem;
}

}


/*=========================================================
    PRODUCT IMAGE
==========================================================*/

.product-image{
    position:relative;
    overflow:hidden;
}

.product-image img{

    display:block;
    transition:transform .6s ease;

}

@media(hover:hover){

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

    transform:scale(1.08);

}

}

@media(hover:none){

.product-card:active .product-image img{

    transform:scale(1.03);

}

}


/*=========================================================
    GLASSMORPHISM PRODUCT CARD
==========================================================*/

.product-card.glass{

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

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

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

box-shadow:0 18px 45px rgba(0,0,0,.08);

transition:all .35s ease;

}

@media(max-width:768px){

.product-card.glass{

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

backdrop-filter:blur(10px);

}

}


/*=========================================================
    PRODUCT GRID EQUAL HEIGHT
==========================================================*/

@media(min-width:992px){

.product-grid.equal-height{

align-items:stretch;

}

.product-grid.equal-height .product-card{

display:flex;
flex-direction:column;

}

.product-content{

display:flex;
flex-direction:column;
flex-grow:1;

}

}


/*=========================================================
    PRODUCT IMAGE OVERLAY
==========================================================*/

.product-image::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:90px;

background:linear-gradient(
transparent,
rgba(0,0,0,.35)
);

pointer-events:none;

}


/*=========================================================
    PRODUCT CARD ANIMATION
==========================================================*/

@media(hover:hover){

.product-card{

transition:all .35s ease;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:0 28px 65px rgba(0,87,217,.15);

}

}

@media(hover:none){

.product-card:hover{

transform:none;

box-shadow:none;

}

.product-card:active{

transform:scale(.98);

}

}


/*=========================================================
    RESPONSIVE IMAGE OPTIMIZATION
==========================================================*/

@media(max-width:992px){

.product-image img{

object-position:center;

}

}


/*=========================================================
    END PART 2B-2A-1
==========================================================*/
/*=========================================================
    RESPONSIVE.CSS
    PART 2B-2A-2A
    PRODUCT TAGS • PRODUCT PRICING • CTA BUTTONS
==========================================================*/


/*=========================================================
    PRODUCT TAGS
==========================================================*/

/* Large Desktop */
@media (min-width:1600px){

.product-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:24px;
}

.product-tag{
    padding:10px 18px;
    font-size:.95rem;
    font-weight:600;
    border-radius:999px;
}

}

/* Desktop */
@media (max-width:1400px){

.product-tags{
    gap:10px;
}

.product-tag{
    padding:9px 16px;
    font-size:.90rem;
}

}

/* Laptop */
@media (max-width:1200px){

.product-tags{
    gap:8px;
}

.product-tag{
    padding:8px 14px;
    font-size:.85rem;
}

}

/* Tablet */
@media (max-width:992px){

.product-tags{
    justify-content:center;
}

.product-tag{
    padding:8px 12px;
    font-size:.82rem;
}

}

/* Mobile */
@media (max-width:768px){

.product-tags{
    gap:8px;
    margin-bottom:18px;
}

.product-tag{
    padding:7px 12px;
    font-size:.78rem;
}

}

/* Small Mobile */
@media (max-width:576px){

.product-tags{
    justify-content:flex-start;
}

.product-tag{
    padding:6px 10px;
    font-size:.75rem;
}

}


/*=========================================================
    PRODUCT PRICING
==========================================================*/

/* Large Desktop */
@media (min-width:1600px){

.product-price{

display:flex;
align-items:flex-end;
gap:14px;
margin:28px 0;

}

.price{

font-size:2.5rem;
font-weight:700;

}

.price-old{

font-size:1.2rem;

}

.price-note{

font-size:1rem;

}

}

/* Desktop */
@media (max-width:1400px){

.price{

font-size:2.2rem;

}

.price-old{

font-size:1.1rem;

}

}

/* Laptop */
@media (max-width:1200px){

.price{

font-size:2rem;

}

.price-old{

font-size:1rem;

}

.price-note{

font-size:.9rem;

}

}

/* Tablet */
@media (max-width:992px){

.product-price{

justify-content:center;

}

.price{

font-size:1.9rem;

}

}

/* Mobile */
@media (max-width:768px){

.product-price{

flex-direction:column;
align-items:center;
gap:6px;

}

.price{

font-size:1.8rem;

}

.price-old{

font-size:.95rem;

}

}

/* Small Mobile */
@media (max-width:576px){

.price{

font-size:1.6rem;

}

.price-old{

font-size:.85rem;

}

.price-note{

font-size:.82rem;

}

}


/*=========================================================
    PRODUCT CTA BUTTONS
==========================================================*/

/* Large Desktop */
@media (min-width:1600px){

.product-actions{

display:flex;
gap:18px;
margin-top:32px;

}

.product-actions .btn{

padding:16px 34px;

font-size:1rem;

}

}

/* Desktop */
@media (max-width:1400px){

.product-actions{

gap:16px;

}

}

/* Laptop */
@media (max-width:1200px){

.product-actions{

flex-wrap:wrap;

}

.product-actions .btn{

flex:1;

}

}

/* Tablet */
@media (max-width:992px){

.product-actions{

justify-content:center;

}

.product-actions .btn{

min-width:180px;

}

}

/* Mobile */
@media (max-width:768px){

.product-actions{

flex-direction:column;
gap:12px;

}

.product-actions .btn{

width:100%;

}

}

/* Small Mobile */
@media (max-width:576px){

.product-actions{

margin-top:20px;

}

.product-actions .btn{

padding:13px 18px;
font-size:.9rem;

}

}


/*=========================================================
    BUTTON ICONS
==========================================================*/

@media (max-width:768px){

.product-actions .btn i,
.product-actions .btn svg{

margin-right:8px;

font-size:1rem;

}

}


/*=========================================================
    RESPONSIVE BUTTON GROUPS
==========================================================*/

@media (max-width:576px){

.button-group{

display:flex;
flex-direction:column;
gap:10px;

}

.button-group .btn{

width:100%;

}

}


/*=========================================================
    ACCESSIBILITY
==========================================================*/

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

.product-actions .btn{

transition:none !important;

}

}

/*=========================================================
    END PRODUCT TAGS • PRODUCT PRICING • CTA BUTTONS
==========================================================*/
/*=========================================================
    RESPONSIVE.CSS
    PART 2B-2A-2B
    PRODUCT HOVER EFFECTS
    FEATURED PRODUCT BANNER
==========================================================*/


/*=========================================================
    PRODUCT HOVER EFFECTS
==========================================================*/

.product-card{
    position:relative;
    overflow:hidden;
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .35s ease;
}

/* Hover Lift */

@media (hover:hover){

.product-card:hover{

    transform:translateY(-14px);

    box-shadow:
        0 30px 80px rgba(0,87,217,.18),
        0 10px 30px rgba(0,0,0,.08);

}

}

/*---------------------------------------------------------
    IMAGE ZOOM
---------------------------------------------------------*/

.product-image{

overflow:hidden;

}

.product-image img{

transition:
transform .8s ease,
filter .5s ease;

}

@media (hover:hover){

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

transform:scale(1.08);

filter:brightness(1.08);

}

}

/*---------------------------------------------------------
    OVERLAY
---------------------------------------------------------*/

.product-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
180deg,
rgba(0,0,0,0),
rgba(0,0,0,.45)
);

opacity:0;

transition:.45s;

}

@media (hover:hover){

.product-card:hover .product-overlay{

opacity:1;

}

}

/*---------------------------------------------------------
    CONTENT ANIMATION
---------------------------------------------------------*/

.product-content{

transition:.35s ease;

}

@media (hover:hover){

.product-card:hover .product-content{

transform:translateY(-6px);

}

}

/*---------------------------------------------------------
    PRODUCT TITLE
---------------------------------------------------------*/

.product-title{

transition:.35s;

}

@media (hover:hover){

.product-card:hover .product-title{

color:var(--primary-color);

}

}

/*---------------------------------------------------------
    PRODUCT TAGS
---------------------------------------------------------*/

.product-tag{

transition:.35s ease;

}

@media (hover:hover){

.product-card:hover .product-tag{

background:var(--primary-color);

color:#fff;

}

}

/*---------------------------------------------------------
    CTA BUTTON
---------------------------------------------------------*/

.product-actions .btn{

transition:all .35s ease;

}

@media (hover:hover){

.product-card:hover .btn-primary{

transform:translateY(-2px);

box-shadow:0 15px 35px rgba(0,87,217,.25);

}

}

/*---------------------------------------------------------
    SHINE EFFECT
---------------------------------------------------------*/

.product-card::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transform:skewX(-25deg);

transition:1s;

pointer-events:none;

}

@media (hover:hover){

.product-card:hover::before{

left:140%;

}

}

/*---------------------------------------------------------
    GLOW BORDER
---------------------------------------------------------*/

.product-card::after{

content:"";

position:absolute;

inset:0;

border-radius:inherit;

padding:1px;

background:
linear-gradient(
135deg,
rgba(0,122,255,.5),
rgba(255,122,0,.4)
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:0;

transition:.4s;

pointer-events:none;

}

@media (hover:hover){

.product-card:hover::after{

opacity:1;

}

}

/*---------------------------------------------------------
    TOUCH DEVICES
---------------------------------------------------------*/

@media (hover:none){

.product-card:hover{

transform:none;

box-shadow:none;

}

.product-card:active{

transform:scale(.985);

}

}


/*=========================================================
    FEATURED PRODUCT BANNER
==========================================================*/

.featured-banner{

position:relative;

overflow:hidden;

padding:100px 70px;

border-radius:28px;

background:
linear-gradient(
135deg,
var(--primary-color),
#003d9f,
#0055d4
);

color:#fff;

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

}

/* Decorative Background */

.featured-banner::before{

content:"";

position:absolute;

top:-120px;
right:-120px;

width:320px;
height:320px;

border-radius:50%;

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

}

.featured-banner::after{

content:"";

position:absolute;

bottom:-90px;
left:-90px;

width:240px;
height:240px;

border-radius:50%;

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

}

/* Banner Content */

.banner-content{

position:relative;

z-index:2;

max-width:700px;

}

.banner-title{

font-size:3rem;

font-weight:700;

margin-bottom:18px;

}

.banner-subtitle{

font-size:1.2rem;

line-height:1.8;

opacity:.95;

margin-bottom:35px;

}

.banner-actions{

display:flex;

gap:18px;

flex-wrap:wrap;

}

/* Banner Image */

.banner-image{

position:relative;

z-index:2;

flex-shrink:0;

}

.banner-image img{

max-width:480px;

width:100%;

animation:bannerFloat 6s ease-in-out infinite;

}

/* Floating Animation */

@keyframes bannerFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/*=========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1400px){

.featured-banner{

padding:80px 60px;

}

.banner-title{

font-size:2.6rem;

}

}

@media(max-width:1200px){

.featured-banner{

padding:70px 50px;

gap:40px;

}

.banner-title{

font-size:2.3rem;

}

.banner-image img{

max-width:380px;

}

}

@media(max-width:992px){

.featured-banner{

flex-direction:column;

text-align:center;

padding:60px 40px;

}

.banner-content{

max-width:100%;

}

.banner-actions{

justify-content:center;

}

.banner-image{

margin-top:20px;

}

}

@media(max-width:768px){

.featured-banner{

padding:50px 30px;

border-radius:22px;

}

.banner-title{

font-size:2rem;

}

.banner-subtitle{

font-size:1rem;

}

.banner-actions{

flex-direction:column;

}

.banner-actions .btn{

width:100%;

}

.banner-image img{

max-width:280px;

}

}

@media(max-width:576px){

.featured-banner{

padding:40px 24px;

}

.banner-title{

font-size:1.6rem;

}

.banner-subtitle{

font-size:.95rem;

}

.banner-image img{

max-width:220px;

}

}

/*=========================================================
    REDUCED MOTION
==========================================================*/

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

.product-card,
.banner-image img{

animation:none !important;

transition:none !important;

}

}

/*=========================================================
    END PART 2B-2A-2B
==========================================================*/