/*==================================================
AEROSOL CAPS WEBSITE
STYLE.CSS
PART 1
==================================================*/


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

:root{

--primary:#165DFF;
--primary-dark:#0B57D0;
--secondary:#0F172A;
--light:#F8FAFC;
--white:#ffffff;
--text:#475569;
--heading:#0F172A;

--radius:22px;

--shadow-sm:0 8px 25px rgba(0,0,0,.06);
--shadow-md:0 15px 40px rgba(0,0,0,.08);
--shadow-lg:0 30px 80px rgba(0,0,0,.12);

--transition:.35s;

}



/*==============================
RESET
==============================*/

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
background:#fff;
color:var(--text);
overflow-x:hidden;
line-height:1.7;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;
padding:0;
margin:0;

}



/*==============================
COMMON
==============================*/

.container-custom{

width:92%;
max-width:1380px;
margin:auto;

}

section{

padding:35px 0;
position:relative;

}

.section-heading{

max-width:760px;
margin:auto auto 70px;
text-align:center;

}

.section-heading span{

display:inline-block;
color:var(--primary);
font-weight:700;
letter-spacing:2px;
margin-bottom:18px;

}

.section-heading h2{

font-size:52px;
font-weight:900;
color:var(--heading);
margin-bottom:20px;

}

.section-heading p{

font-size:18px;
line-height:32px;
color:#64748B;

}



/*==============================
BUTTONS
==============================*/

.primary-btn{

display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;

padding:16px 34px;

background:linear-gradient(135deg,#165DFF,#3B82F6);

color:#fff;

font-weight:700;

border-radius:50px;

transition:var(--transition);

box-shadow:0 15px 35px rgba(22,93,255,.28);

}

.primary-btn:hover{

transform:translateY(-4px);

box-shadow:0 25px 50px rgba(22,93,255,.35);

color:#fff;

}



.secondary-btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:16px 34px;

border:2px solid var(--primary);

border-radius:50px;

font-weight:700;

color:var(--primary);

transition:var(--transition);

}

.secondary-btn:hover{

background:var(--primary);

color:#fff;

}



/*==============================
PRELOADER
==============================*/

.preloader{

position:fixed;

inset:0;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

}

.loader{

width:70px;

height:70px;

border-radius:50%;

border:7px solid #e5e7eb;

border-top:7px solid var(--primary);

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}



/*==============================
HEADER
==============================*/

header{

position:fixed;

left:0;

top:0;

width:100%;

z-index:999;

transition:.4s;

}

header.scrolled{

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

backdrop-filter:blur(18px);

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

}

.navbar-custom{

display:flex;

justify-content:space-between;

align-items:center;

height:95px;

}

.logo img{

height:92px;

}



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

.nav-links{

display:flex;

align-items:center;

gap:34px;

}

.nav-links a{

font-weight:600;

color:#0F172A;

position:relative;

transition:.3s;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-links a:hover::after{

width:100%;

}
.nav-links a.active{

color:#165DFF;

}

.nav-links a.active::after{

width:100%;

}
.quote-btn{

padding:14px 28px;

background:linear-gradient(135deg,#165DFF,#3B82F6);

border-radius:40px;

color:#fff!important;

font-weight:700;

box-shadow:0 15px 35px rgba(22,93,255,.25);

transition:.35s;

}

.quote-btn:hover{

transform:translateY(-4px);

}



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

.menu-toggle{

display:none;

font-size:30px;

border:none;

background:none;

cursor:pointer;

color:#0F172A;

}

@media(max-width:991px){

.menu-toggle{

display:block;

z-index:9999;

}

.nav-links{

position:fixed;

left:-100%;

top:90px;

width:100%;

height:calc(100vh - 90px);

background:#fff;

display:flex;

flex-direction:column;

justify-content:flex-start;

align-items:center;

padding-top:50px;

gap:28px;

transition:.4s;

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

}

.nav-links.active{

left:0;

}

}


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

.hero{

position:relative;

padding:100px 0 80px;

overflow:hidden;

background:
radial-gradient(circle at left,#dff1ff 0%,transparent 40%),
radial-gradient(circle at right,#d9f2ff 0%,transparent 35%),
#f8fbff;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background-image:

linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),

linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);

background-size:50px 50px;

opacity:.55;

pointer-events:none;

}

.hero-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1.05fr 1fr;

gap:70px;

align-items:center;

}

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

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:5px 22px;

border-radius:50px;

background:#edf4ff;

color:#2563eb;

font-weight:700;

margin-bottom:10px;

font-size:15px;

}

.hero-badge i{

font-size:16px;

}

.hero-left h1{

font-size:50px;

line-height:1.02;

font-weight:900;

letter-spacing:-3px;

margin-bottom:8px;

color:#111827;

}

.hero-left h1 span{

background:linear-gradient(90deg,#2563eb,#18b4ff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

display:block;

}

.hero-left p{

font-size:15px;

line-height:32px;

color:#5b6475;

max-width:720px;

margin-bottom:11px;

}

/*========================
BUTTONS
=========================*/

.hero-buttons{

display:flex;

gap:20px;
margin-top: 15px;
margin-bottom:15px;

flex-wrap:wrap;

}

.btn-primary{

display:flex;

align-items:center;

gap:14px;

padding:10px 25px;

border-radius:60px;

background:linear-gradient(135deg,#2563eb,#0ea5ff);

color:#fff;

text-decoration:none;

font-weight:700;

font-size:18px;

box-shadow:0 20px 45px rgba(37,99,235,.28);

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-6px);

}

.btn-secondary{

display:flex;

align-items:center;

gap:12px;

padding:20px 36px;

border-radius:60px;

border:2px solid #2563eb;

text-decoration:none;

font-weight:700;

font-size:18px;

background:#fff;

color:#2563eb;

transition:.35s;

}

.btn-secondary:hover{

background:#2563eb;

color:#fff;

}

/*========================
FEATURE BOXES
=========================*/

.hero-feature-box{

display:grid;

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

gap:18px;

margin-bottom:35px;

}

.feature{

background:#fff;

border-radius:22px;

padding:22px 16px;

text-align:center;

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

transition:.35s;

}

.feature:hover{

transform:translateY(-8px);

}

.feature-icon{

width:62px;

height:62px;

margin:auto;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:24px;

margin-bottom:15px;

}

.blue{

background:#2563eb;

}

.green{

background:#22c55e;

}

.purple{

background:#8b5cf6;

}

.orange{

background:#fb923c;

}

.feature h4{

font-size:18px;

margin-bottom:5px;

font-weight:800;

}

.feature span{

font-size:14px;

color:#6b7280;

}

/*========================
TRUST BAR
=========================*/

.trust-bar{

display:flex;

align-items:center;

gap:18px;

padding:5px 22px;

background:#fff;

border-radius:70px;

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

width:max-content;

}

.trust-stars{

font-size:22px;

color:#fbbf24;

}
/*=========================================
HERO RIGHT
=========================================*/

.hero-right{

position:relative;

height:760px;

display:flex;

justify-content:center;

align-items:center;

}


/*==========================
BIG BLUE GLOW
==========================*/

.hero-circle{

position:absolute;

width:620px;

height:620px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(96,165,250,.95) 0%,

rgba(59,130,246,.75) 40%,

rgba(22,93,255,.08) 100%

);

filter:blur(10px);

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

z-index:1;

}

@keyframes glowPulse{

50%{

transform:scale(1.08);

opacity:.85;

}

}

/*==========================
WHITE PLATFORM
==========================*/

.hero-right::after{

content:"";

position:absolute;

bottom:85px;

width:480px;

height:95px;

border-radius:100px;

background:white;

box-shadow:

0 35px 70px rgba(0,0,0,.15);

z-index:2;

}

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

.hero-product{

position:relative;

width:520px;

max-width:100%;

z-index:5;

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

filter:

drop-shadow(0 45px 60px rgba(0,0,0,.22));

}

@keyframes floatProduct{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

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

.floating-card{

position:absolute;

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

backdrop-filter:blur(18px);

padding:18px 22px;

border-radius:22px;

display:flex;

align-items:center;

gap:15px;

box-shadow:

0 18px 45px rgba(0,0,0,.10);

z-index:20;

transition:.35s;

min-width:220px;

}

.floating-card:hover{

transform:translateY(-8px);

}

.floating-card i{

width:52px;

height:52px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:white;

background:linear-gradient(135deg,#165DFF,#3B82F6);

flex-shrink:0;

}

.floating-card h4{

margin:0;

font-size:18px;

font-weight:800;

color:#111827;

}

.floating-card span{

font-size:14px;

color:#64748B;

}

/*==========================
POSITION
==========================*/

.card1{

top:90px;

left:-30px;

}

.card2{

top:280px;

right:-40px;

}

.card3{

bottom:120px;

left:20px;

}

/*==========================
BOTTOM COUNTER
==========================*/

.hero-counter{

margin-top:10px;

display:grid;

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

gap:25px;

background:white;

border-radius:28px;

padding:35px;

box-shadow:

0 25px 60px rgba(0,0,0,.08);

position:relative;

z-index:5;

}

.hero-counter div{

text-align:center;

}

.hero-counter h2{

font-size:42px;

font-weight:900;

color:#165DFF;

margin-bottom:10px;

}

.hero-counter p{

margin:0;

font-size:16px;

color:#64748B;

}

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

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-right{

margin-top:60px;

height:650px;

}

.hero-feature-box{

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

}

.hero-counter{

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

}

.card1{

left:20px;

}

.card2{

right:20px;

}

.card3{

left:50%;

transform:translateX(-50%);

}

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

.hero{
    padding:90px 0 40px;
}

.hero-grid{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.hero-left{
    order:2;
    text-align:center;
}

.hero-right{
    order:1;
    height:auto;
    margin:0;
}

.hero-product{
    width:260px;
    margin:auto;
}

.hero-circle{
    width:260px;
    height:260px;
}

.hero-right::after{
    width:220px;
    height:45px;
    bottom:30px;
}

.hero-left h1{
    font-size:40px;
    line-height:1.08;
    letter-spacing:-1px;
}

.hero-left p{
    font-size:16px;
    line-height:28px;
}

.hero-badge{
    font-size:12px;
    padding:8px 14px;
}

.trust-bar{
    width:100%;
    justify-content:center;
}

.hero-buttons{
    flex-direction:column;
}

.btn-primary,
.btn-secondary{
    width:100%;
    justify-content:center;
}

.hero-feature-box{
    grid-template-columns:repeat(2,1fr);
}

.hero-counter{
    grid-template-columns:repeat(2,1fr);
    padding:20px;
}

.hero-counter div:last-child{
    grid-column:1/3;
}

.floating-card{
    display:none;
}

}

/*==============================
BLUR CIRCLES
==============================*/

.blur-circle{

position:absolute;

border-radius:50%;

filter:blur(90px);

opacity:.45;

}

.circle1{

width:260px;

height:260px;

background:#60A5FA;

right:-80px;

top:-50px;

}

.circle2{

width:240px;

height:240px;

background:#38BDF8;

left:-80px;

bottom:-70px;

}
/*==================================================
STYLE.CSS
PART 2
ABOUT • STATS • WHY CHOOSE US
==================================================*/


/*==============================
ABOUT SECTION
==============================*/

.about-company{

background:#fff;

position:relative;

overflow:hidden;

}

.about-company::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:radial-gradient(circle,#dbeafe 0%,transparent 70%);

right:-250px;

top:-180px;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

width:100%;

border-radius:30px;

box-shadow:0 30px 70px rgba(0,0,0,.12);

transition:.5s;

}

.about-image:hover img{

transform:scale(1.03);

}

.experience-card{

position:absolute;

right:-25px;

bottom:40px;

background:linear-gradient(135deg,#165DFF,#3B82F6);

color:#fff;

padding:28px;

border-radius:22px;

text-align:center;

box-shadow:0 20px 45px rgba(22,93,255,.35);

}

.experience-card h2{

font-size:52px;

font-weight:900;

margin-bottom:5px;

}

.experience-card p{

margin:0;

font-size:15px;

}



/*==============================
ABOUT CONTENT
==============================*/

.about-content span{

display:inline-block;

color:#165DFF;

font-weight:700;

letter-spacing:2px;

margin-bottom:18px;

}

.about-content h2{

font-size:50px;

font-weight:900;

line-height:1.2;

color:#0F172A;

margin-bottom:25px;

}

.about-content p{

font-size:17px;

line-height:32px;

margin-bottom:20px;

color:#64748B;

}



/*==============================
ABOUT FEATURES
==============================*/

.about-features{

display:grid;

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

gap:18px;

margin:35px 0;

}

.about-features div{

background:#fff;

padding:18px 20px;

border-radius:16px;

font-weight:600;

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

transition:.35s;

}

.about-features div:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(22,93,255,.12);

}

.about-features i{

color:#165DFF;

margin-right:10px;

}



/*==============================
COUNTER SECTION
==============================*/

.stats-section{

background:#F8FAFC;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

background:#fff;

padding:45px 30px;

text-align:center;

border-radius:24px;

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

transition:.4s;

}

.stat-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(22,93,255,.15);

}

.stat-card i{

font-size:48px;

color:#165DFF;

margin-bottom:18px;

}

.stat-card h2{

font-size:54px;

font-weight:900;

color:#0F172A;

margin-bottom:8px;

}

.stat-card p{

margin:0;

font-size:16px;

color:#64748B;

}



/*==============================
WHY CHOOSE US
==============================*/

.why-section{

background:#fff;

position:relative;

overflow:hidden;

}

.why-section::after{

content:"";

position:absolute;

width:450px;

height:450px;

background:radial-gradient(circle,#bfdbfe 0%,transparent 70%);

left:-220px;

bottom:-200px;

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

background:#fff;

padding:45px;

border-radius:24px;

text-align:left;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.why-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:0;

background:#165DFF;

transition:.4s;

}

.why-card:hover::before{

height:100%;

}

.why-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 70px rgba(22,93,255,.15);

}

.why-card i{

font-size:48px;

color:#165DFF;

margin-bottom:25px;

transition:.35s;

}

.why-card:hover i{

transform:scale(1.1);

}

.why-card h3{

font-size:25px;

font-weight:800;

color:#0F172A;

margin-bottom:15px;

}

.why-card p{

font-size:16px;

line-height:30px;

color:#64748B;

}



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

@media(max-width:1200px){

.about-grid{

grid-template-columns:1fr;

gap:60px;

}

.stats-grid{

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

}

.why-grid{

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

}

}

@media(max-width:768px){

.about-content h2{

font-size:36px;

}

.section-heading h2{

font-size:36px;

}

.about-features{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.experience-card{

position:static;

margin-top:20px;

display:inline-block;

}

}
/*==================================================
STYLE.CSS
PART 3
PRODUCTS SECTION
==================================================*/


/*==============================
PRODUCT SECTION
==============================*/

.products-section{

background:linear-gradient(180deg,#F8FBFF,#EEF5FF);

position:relative;

overflow:hidden;

}

.products-section::before{

content:"";

position:absolute;

width:600px;

height:600px;

border-radius:50%;

background:radial-gradient(circle,#DBEAFF 0%,transparent 70%);

right:-280px;

top:-220px;

}

.products-section::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:radial-gradient(circle,#DBEAFF 0%,transparent 70%);

left:-250px;

bottom:-180px;

}



/*==============================
SEARCH BAR
==============================*/

.product-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

margin-bottom:60px;

flex-wrap:wrap;

}

.search-box{

display:flex;

align-items:center;

gap:15px;

padding:18px 25px;

background:#fff;

border-radius:60px;

box-shadow:0 12px 30px rgba(0,0,0,.06);

min-width:340px;

}

.search-box i{

color:#165DFF;

font-size:18px;

}

.search-box input{

border:none;

outline:none;

background:none;

width:100%;

font-size:16px;

}



/*==============================
FILTER BUTTONS
==============================*/

.filter-buttons{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.filter-buttons button{

padding:13px 22px;

border:none;

background:#fff;

border-radius:40px;

font-weight:700;

cursor:pointer;

transition:.35s;

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

}

.filter-buttons button:hover,
.filter-buttons button.active{

background:linear-gradient(135deg,#165DFF,#3B82F6);

color:#fff;

transform:translateY(-3px);

}



/*==============================
GRID
==============================*/

.product-grid{

display:grid;

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

gap:35px;

}



/*==============================
CARD
==============================*/

.product-card{

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:0 18px 40px rgba(0,0,0,.07);

transition:.45s;

position:relative;

border:1px solid #edf2ff;

}

.product-card:hover{

transform:translateY(-15px);

box-shadow:0 35px 70px rgba(22,93,255,.18);

}



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

.product-image{

padding:45px;

background:linear-gradient(180deg,#fff,#EDF5FF);

position:relative;

overflow:hidden;

}

.product-image::before{

content:"";

position:absolute;

width:240px;

height:240px;

border-radius:50%;

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

left:50%;

top:50%;

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

}

.product-image img{

position:relative;

z-index:2;

transition:.45s;

}

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

transform:translateY(-10px) scale(1.08);

}



/*==============================
BADGES
==============================*/

.badge-new,
.badge-hot{

position:absolute;

left:18px;

top:18px;

padding:8px 16px;

border-radius:30px;

font-size:12px;

font-weight:700;

color:#fff;

z-index:5;

}

.badge-new{

background:#16A34A;

}

.badge-hot{

background:#EF4444;

}
.badge-upcoming{
    position:absolute;
    top:15px;
    left:15px;
    padding:8px 16px;
    border-radius:30px;
    background:linear-gradient(135deg,#f59e0b,#f97316);
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    box-shadow:0 8px 20px rgba(249,115,22,.35);
    z-index:5;
}


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

.product-content{

padding:30px;

}

.product-content h3{

font-size:28px;

font-weight:800;

margin-bottom:10px;

color:#0F172A;

}

.product-subtitle{

font-size:15px;

color:#64748B;

margin-bottom:20px;

}



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

.product-tags{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-bottom:20px;

}

.product-tags span{

padding:8px 14px;

background:#EDF5FF;

color:#165DFF;

border-radius:30px;

font-size:13px;

font-weight:700;

}



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

.product-content ul{

margin-bottom:25px;

}

.product-content li{

padding:7px 0;

font-size:15px;

color:#475569;

}



/*==============================
BUTTONS
==============================*/

.product-buttons{

display:flex;

gap:15px;

}

.view-btn{

flex:1;

height:54px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50px;

border:2px solid #165DFF;

background:#fff;

font-weight:700;

transition:.35s;

color:#165DFF;

}

.view-btn:hover{

background:#165DFF;

color:#fff;

}

.quote-btn-small{

flex:1;

display:flex;

align-items:center;

justify-content:center;

height:54px;

border-radius:50px;

background:linear-gradient(135deg,#165DFF,#3B82F6);

color:#fff;

font-weight:700;

transition:.35s;

}

.quote-btn-small:hover{

transform:translateY(-3px);

box-shadow:0 18px 35px rgba(22,93,255,.28);

color:#fff;

}



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

@media(max-width:1200px){

.product-grid{

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

}

}

@media(max-width:768px){

.product-grid{

grid-template-columns:1fr;

}

.product-toolbar{

flex-direction:column;

align-items:stretch;

}

.search-box{

min-width:100%;

}

.product-buttons{

flex-direction:column;

}

}
/*==================================================
STYLE.CSS
PART 4
INDUSTRIES • PROCESS • QUALITY • CTA
==================================================*/


/*==================================
INDUSTRIES
==================================*/

.industry-section{

background:#fff;

position:relative;

overflow:hidden;

}

.industry-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.industry-card{

background:#fff;

padding:45px 35px;

border-radius:28px;

text-align:center;

box-shadow:0 18px 40px rgba(0,0,0,.06);

transition:.45s;

border:1px solid #edf2ff;

position:relative;

overflow:hidden;

}

.industry-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:0;

background:linear-gradient(135deg,#165DFF,#3B82F6);

transition:.45s;

z-index:0;

}

.industry-card:hover::before{

height:100%;

}

.industry-card>*{

position:relative;

z-index:2;

}

.industry-card i{

font-size:54px;

color:#165DFF;

margin-bottom:22px;

transition:.35s;

}

.industry-card h3{

font-size:25px;

font-weight:800;

margin-bottom:12px;

color:#0F172A;

transition:.35s;

}

.industry-card p{

color:#64748B;

line-height:30px;

transition:.35s;

}

.industry-card:hover{

transform:translateY(-12px);

}

.industry-card:hover i,
.industry-card:hover h3,
.industry-card:hover p{

color:#fff;

}



/*==================================
PROCESS
==================================*/

.process-section{

background:#F8FAFC;

}

.process-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.process-card{

background:#fff;

padding:35px;

border-radius:24px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.06);

transition:.4s;

}

.process-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(22,93,255,.14);

}

.process-icon{

width:80px;

height:80px;

margin:auto auto 25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

font-weight:800;

background:linear-gradient(135deg,#165DFF,#3B82F6);

color:#fff;

box-shadow:0 12px 30px rgba(22,93,255,.30);

}

.process-card h3{

font-size:22px;

font-weight:800;

margin-bottom:12px;

color:#0F172A;

}

.process-card p{

font-size:15px;

line-height:28px;

color:#64748B;

}



/*==================================
QUALITY
==================================*/

.quality-section{

background:#fff;

}

.quality-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.quality-image{

position:relative;

}

.quality-image img{

width:100%;

border-radius:28px;

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.quality-content span{

display:inline-block;

color:#165DFF;

font-weight:700;

letter-spacing:2px;

margin-bottom:18px;

}

.quality-content h2{

font-size:50px;

font-weight:900;

margin-bottom:20px;

color:#0F172A;

}

.quality-content p{

font-size:17px;

line-height:32px;

margin-bottom:30px;

color:#64748B;

}

.quality-content ul{

display:grid;

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

gap:18px;

}

.quality-content li{

padding:18px;

background:#F8FAFC;

border-radius:18px;

font-weight:600;

transition:.35s;

}

.quality-content li:hover{

background:#165DFF;

color:#fff;

transform:translateX(8px);

}

.quality-content i{

margin-right:10px;

color:#165DFF;

}

.quality-content li:hover i{

color:#fff;

}



/*==================================
PREMIUM CTA
==================================*/

.premium-cta{

padding:120px 0;

background:linear-gradient(135deg,#0F172A,#165DFF);

text-align:center;

color:#fff;

position:relative;

overflow:hidden;

}

.premium-cta::before{

content:"";

position:absolute;

width:650px;

height:650px;

border-radius:50%;

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

left:-250px;

top:-250px;

}

.premium-cta::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

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

right:-180px;

bottom:-180px;

}

.premium-cta h2{

font-size:56px;

font-weight:900;

margin-bottom:20px;

position:relative;

z-index:2;

}

.premium-cta p{

max-width:760px;

margin:auto auto 40px;

font-size:18px;

line-height:34px;

position:relative;

z-index:2;

}

.premium-cta .hero-buttons{

justify-content:center;

position:relative;

z-index:2;

}



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

@media(max-width:1200px){

.industry-grid{

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

}

.process-grid{

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

}

.quality-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.industry-grid{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:1fr;

}

.quality-content ul{

grid-template-columns:1fr;

}

.premium-cta h2{

font-size:36px;

}

}
/*==================================================
STYLE.CSS
PART 5
TESTIMONIAL • FAQ • CONTACT • FOOTER
==================================================*/


/*==================================
TESTIMONIAL
==================================*/

.testimonial-section{

background:#F8FAFC;

position:relative;

overflow:hidden;

}

.testimonial-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:28px;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.testimonial-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(22,93,255,.14);

}

.quote-icon{

width:70px;

height:70px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#165DFF,#3B82F6);

color:#fff;

font-size:26px;

margin-bottom:25px;

}

.testimonial-card p{

font-size:16px;

line-height:30px;

color:#64748B;

}

.client-info{

margin-top:30px;

padding-top:20px;

border-top:1px solid #e5e7eb;

}

.client-info h4{

font-size:20px;

font-weight:800;

margin-bottom:4px;

color:#0F172A;

}

.client-info span{

font-size:14px;

color:#64748B;

}



/*==================================
FAQ
==================================*/
.faq-item{
    background:#fff;
    border-radius:16px;
    margin-bottom:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.faq-question{
    width:100%;
    border:none;
    background:#fff;
    padding:22px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    font-size:18px;
    font-weight:700;
}

.faq-question i{
    transition:.35s;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease, padding .4s ease;
    padding:0 25px;
    line-height:1.8;
}

.faq-item.active .faq-answer{
    padding:0 25px 22px;
}

.faq-item.active .faq-question i{
    transform:rotate(45deg);
}
/*==================================
CONTACT
==================================*/

.contact-section{

background:#F8FAFC;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1.3fr;

gap:60px;

align-items:start;

margin-top:60px;

}

.contact-info{

background:#fff;

padding:40px;

border-radius:28px;

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

}

.contact-info h3{

font-size:32px;

font-weight:900;

margin-bottom:30px;

color:#0F172A;

}

.contact-info p{

display:flex;

align-items:center;

gap:15px;

margin-bottom:22px;

font-size:17px;

color:#475569;

}

.contact-info i{

width:48px;

height:48px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#EDF5FF;

color:#165DFF;

font-size:20px;

}



.contact-form{

background:#fff;

padding:40px;

border-radius:28px;

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

}

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

width:100%;

padding:16px 20px;

border:1px solid #e5e7eb;

border-radius:16px;

margin-bottom:18px;

font-size:15px;

outline:none;

transition:.3s;

}

.contact-form textarea{

resize:none;

}

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

border-color:#165DFF;

box-shadow:0 0 0 4px rgba(22,93,255,.10);

}

.contact-form button{

border:none;

cursor:pointer;

}
   /* Spinner */
    .spinner {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }

    /* Snackbar styling */
    #snackbar {
      visibility: hidden;
      min-width: 250px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      left: 50%;
      top: 20px; /* Move snackbar to the top of the screen */
      transform: translateX(-50%); /* Center the snackbar horizontally */
      font-size: 17px;
    }

    #snackbar.show {
      visibility: visible;
      animation: fadein 0.5s, fadeout 0.5s 3s;
    }



/*==================================
GOOGLE MAP
==================================*/

.map-section iframe{

width:100%;

height:450px;

border:none;

display:block;

}



/*==================================
FOOTER
==================================*/

footer{

background:#0F172A;

color:#CBD5E1;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-grid h3{

color:#fff;

margin-bottom:22px;

font-size:22px;

}

.footer-grid p{

line-height:30px;

}

.footer-grid ul{

padding:0;

margin:0;

list-style:none;

}

.footer-grid li{

margin-bottom:14px;

}

.footer-grid a{

color:#CBD5E1;

transition:.3s;

}

.footer-grid a:hover{

color:#fff;

padding-left:6px;

}

.footer-bottom{

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

font-size:15px;

}



/*==================================
FLOATING BUTTONS
==================================*/

.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#25D366;

color:#fff;

font-size:34px;

box-shadow:0 20px 45px rgba(37,211,102,.35);

z-index:999;

transition:.35s;

}

.floating-whatsapp:hover{

transform:translateY(-6px) scale(1.08);

}



#backTop{

position:fixed;

left:25px;

bottom:25px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#165DFF;

color:#fff;

font-size:22px;

display:none;

cursor:pointer;

box-shadow:0 20px 40px rgba(22,93,255,.28);

transition:.35s;

z-index:999;

}

#backTop:hover{

transform:translateY(-6px);

}



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

@media(max-width:1200px){

.testimonial-grid{

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

}

.footer-grid{

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

}

.contact-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.testimonial-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.contact-info,
.contact-form{

padding:28px;

}

.contact-info h3{

font-size:26px;

}

}
/*==================================================
STYLE.CSS
PART 6 (FINAL)
MODAL • GALLERY • UTILITIES • ANIMATIONS
==================================================*/


/*==================================
CUSTOM SCROLLBAR
==================================*/

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#eef3ff;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#165DFF,#3B82F6);
border-radius:50px;
}

::-webkit-scrollbar-thumb:hover{
background:#0B57D0;
}



/*==================================
SELECTION
==================================*/

::selection{
background:#165DFF;
color:#fff;
}



/*==================================
QUICK VIEW MODAL
==================================*/

.quick-modal{

position:fixed;
inset:0;

display:flex;
justify-content:center;
align-items:center;

background:rgba(0,0,0,.75);

backdrop-filter:blur(12px);

z-index:999999;

animation:fadeIn .35s;

padding:30px;

}

.quick-content{

width:min(1150px,96vw);

background:#fff;

border-radius:28px;

overflow:hidden;

display:grid;

grid-template-columns:1.1fr .9fr;

box-shadow:0 40px 90px rgba(0,0,0,.30);

position:relative;

animation:popup .35s ease;

}

.close-modal{

position:absolute;

right:20px;
top:18px;

width:42px;
height:42px;

display:flex;
align-items:center;
justify-content:center;

background:#F3F6FC;

border-radius:50%;

font-size:26px;

cursor:pointer;

transition:.3s;

z-index:20;

}

.close-modal:hover{

background:#165DFF;
color:#fff;

}



/*==================================
LEFT GALLERY
==================================*/

.gallery{

background:#F8FAFC;

padding:40px;

display:flex;

justify-content:center;
align-items:center;

position:relative;

overflow:hidden;

}

.gallery img{

max-width:100%;
max-height:420px;

object-fit:contain;

transition:.35s;

}

.gallery img:hover{

transform:scale(1.05);

}



/*==================================
NEXT PREVIOUS
==================================*/

.prev,
.next{

position:absolute;

top:50%;

transform:translateY(-50%);

width:52px;
height:52px;

border:none;

border-radius:50%;

background:#165DFF;

color:#fff;

font-size:22px;

cursor:pointer;

transition:.35s;

}

.prev{

left:20px;

}

.next{

right:20px;

}

.prev:hover,
.next:hover{

transform:translateY(-50%) scale(1.08);

background:#0B57D0;

}



/*==================================
THUMBNAILS
==================================*/

.thumbs{

display:flex;

gap:12px;

overflow-x:auto;

padding:20px;

background:#fff;

border-top:1px solid #EEF2F7;

}

.thumb{

width:78px;
height:78px;

object-fit:cover;

border-radius:12px;

cursor:pointer;

border:2px solid transparent;

transition:.3s;

flex-shrink:0;

}

.thumb:hover{

transform:scale(1.08);

}

.thumb.active{

border-color:#165DFF;

}



/*==================================
RIGHT CONTENT
==================================*/

.product-details{

padding:45px;

overflow:auto;

}

.product-details h2{

font-size:38px;

font-weight:900;

color:#0F172A;

margin-bottom:18px;

}

.product-details p{

font-size:16px;

line-height:30px;

color:#64748B;

margin-bottom:30px;

}



/*==================================
FEATURES
==================================*/

.product-features{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin-bottom:35px;

}

.product-features li{

background:#F8FAFC;

padding:15px;

border-radius:16px;

font-weight:600;

transition:.3s;

}

.product-features li:hover{

background:#165DFF;

color:#fff;

transform:translateX(6px);

}

.product-features i{

color:#165DFF;

margin-right:10px;

}

.product-features li:hover i{

color:#fff;

}



/*==================================
QUOTE BUTTON
==================================*/

.product-details .quote-btn{

display:inline-flex;

padding:16px 35px;

margin-top:10px;

}



/*==================================
ANIMATIONS
==================================*/

.fade-up{

animation:fadeUp .8s ease forwards;

}

.zoom{

animation:zoom .7s ease;

}

.rotate{

animation:rotate360 10s linear infinite;

}



/*==================================
KEYFRAMES
==================================*/

@keyframes popup{

from{

opacity:0;

transform:translateY(40px) scale(.92);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}



@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}



@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}



@keyframes zoom{

from{

transform:scale(.9);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}



@keyframes rotate360{

100%{

transform:rotate(360deg);

}

}



/*==================================
UTILITY CLASSES
==================================*/

.text-center{

text-align:center;

}

.mt-30{

margin-top:30px;

}

.mt-50{

margin-top:50px;

}

.mb-30{

margin-bottom:30px;

}

.mb-50{

margin-bottom:50px;

}

.shadow{

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

}

.radius{

border-radius:24px;

}

.bg-light{

background:#F8FAFC;

}



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

@media(max-width:991px){

.quick-content{

grid-template-columns:1fr;

max-height:90vh;

overflow:auto;

}

.gallery{

padding:25px;

}

.gallery img{

max-height:280px;

}

.product-details{

padding:30px;

}

.product-details h2{

font-size:30px;

}

.product-features{

grid-template-columns:1fr;

}

}



@media(max-width:768px){

.quick-modal{

padding:15px;

}

.prev,
.next{

width:42px;
height:42px;

font-size:18px;

}

.thumb{

width:60px;
height:60px;

}

.product-details{

padding:22px;

}

.product-details h2{

font-size:26px;

}

}
/*==================================================
STYLE.CSS
PART 7 (BONUS PREMIUM EFFECTS)
==================================================*/


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

.glass-card{

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

backdrop-filter:blur(18px);

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

box-shadow:0 20px 50px rgba(0,0,0,.08);

}



/*==============================
APPLE HOVER
==============================*/

.lift{

transition:.4s cubic-bezier(.22,.61,.36,1);

}

.lift:hover{

transform:translateY(-12px) scale(1.02);

}



/*==============================
IMAGE ZOOM
==============================*/

.zoom-img{

overflow:hidden;

}

.zoom-img img{

transition:transform .6s ease;

}

.zoom-img:hover img{

transform:scale(1.12);

}



/*==============================
GRADIENT TEXT
==============================*/

.gradient-text{

background:linear-gradient(
90deg,
#165DFF,
#00C2FF,
#6A5BFF
);

background-size:200%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:gradientMove 5s linear infinite;

}

@keyframes gradientMove{

100%{

background-position:200%;

}

}


/*==============================
SHINE BUTTON
==============================*/

.primary-btn{

padding:18px 38px;

border-radius:60px;

background:linear-gradient(
135deg,
#165DFF,
#2F80ED
);

color:#fff;

font-weight:700;

box-shadow:

0 20px 40px rgba(22,93,255,.35);

transition:.4s;

}

.primary-btn:hover{

transform:translateY(-6px);

box-shadow:

0 35px 60px rgba(22,93,255,.45);

}

.primary-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

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

transform:skewX(-25deg);

transition:.8s;

}

.primary-btn:hover::before{

left:140%;

}



/*==============================
CARD BORDER GLOW
==============================*/

.product-card:hover{

border-color:#165DFF;

}



/*==============================
ICON ROTATION
==============================*/

.industry-card i,

.why-card i,

.process-icon{

transition:.45s;

}

.industry-card:hover i,

.why-card:hover i{

transform:rotateY(180deg);

}



/*==============================
FADE DELAY
==============================*/

.delay-1{

animation-delay:.1s;

}

.delay-2{

animation-delay:.2s;

}

.delay-3{

animation-delay:.3s;

}

.delay-4{

animation-delay:.4s;

}



/*==============================
SMOOTH SHADOW
==============================*/

.soft-shadow{

box-shadow:

0 15px 35px rgba(0,0,0,.05),

0 30px 60px rgba(22,93,255,.08);

}



/*==============================
BORDER ANIMATION
==============================*/

.border-hover{

position:relative;

overflow:hidden;

}

.border-hover::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:3px;

background:#165DFF;

transition:.35s;

}

.border-hover:hover::after{

width:100%;

}



/*==============================
FLOATING ICON
==============================*/

.float-icon{

animation:floating 3s ease-in-out infinite;

}

@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}



/*==============================
SECTION TRANSITION
==============================*/

section{

transition:background .4s;

}



/*==============================
PREMIUM DIVIDER
==============================*/

.divider{

width:120px;

height:5px;

background:linear-gradient(90deg,#165DFF,#00C2FF);

border-radius:30px;

margin:25px auto;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

.primary-btn,
.quote-btn,
.quote-btn-small,
.view-btn{

position:relative;

overflow:hidden;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}
/*==============================
APPLE EFFECTS
==============================*/

#mouseGlow{

mix-blend-mode:multiply;

filter:blur(25px);

}
img[data-src]{
    opacity:0;
}

img.loaded{
    opacity:1;
    transition:opacity .5s ease;
}

.product-card{

transform-style:preserve-3d;

will-change:transform;

}

header{

transition:top .35s;

}



@media (max-width:768px){

.navbar-custom{
    height:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo img{
    height:52px;
    width:auto;
}

.menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-left:auto;
    font-size:28px;
}

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

.navbar-custom{
    height:70px;
}

.logo img{
    height:55px;
}

.menu-toggle{
    font-size:28px;
}

.nav-links{
    top:70px;
    height:calc(100vh - 70px);
}

}