/*=====================================
GOOGLE FONT FALLBACK
======================================*/

:root{

--gold:#C9A227;
--gold-light:#D4AF37;
--gold-dark:#9E7D16;

--black:#050505;
--dark:#111111;
--dark-2:#1A1A1A;
--grey:#777777;
--light:#F5F5F5;
--white:#FFFFFF;

--success:#22c55e;
--danger:#ef4444;

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

--shadow-gold:
0 10px 40px rgba(201,162,39,.35);

--radius:18px;

--transition:.35s ease;

--max-width:1400px;

}

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

*{

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

}

html{

scroll-behavior:smooth;

}

body{

background:var(--black);

color:var(--white);

font-family:Poppins,sans-serif;

line-height:1.7;

overflow-x:hidden;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:50px;

}

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

h1,
h2,
h3,
h4,
h5{

font-family:"Cormorant Garamond",serif;

font-weight:700;

line-height:1.1;

}

h1{

font-size:70px;

}

h2{

font-size:50px;

}

h3{

font-size:34px;

}

p{

font-size:17px;

color:#d2d2d2;

}

a{

text-decoration:none;

color:inherit;

}

img{

display:block;

max-width:100%;

}

/*=====================================
LAYOUT
======================================*/

.container{

width:90%;

max-width:var(--max-width);

margin:auto;

}

.section{

padding:120px 0;

}

.dark-section{

background:#0e0e0e;

padding:120px 0;

}

/*=====================================
SECTION TITLES
======================================*/

.section-title{

text-align:center;

margin-bottom:80px;

}

.section-title span{

display:inline-block;

color:var(--gold);

font-weight:600;

letter-spacing:4px;

font-size:14px;

margin-bottom:15px;

}

.section-title h2{

margin-bottom:20px;

}

.section-title p{

max-width:760px;

margin:auto;

}

.section-title.light p{

color:#d8d8d8;

}

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

.gold-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

background:linear-gradient(
135deg,
var(--gold-light),
var(--gold)
);

border-radius:50px;

font-weight:600;

transition:var(--transition);

color:#111;

box-shadow:var(--shadow-gold);

}

.gold-btn:hover{

transform:translateY(-5px);

box-shadow:
0 20px 60px rgba(201,162,39,.55);

}

.outline-btn{

display:inline-flex;

padding:18px 40px;

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

border-radius:50px;

transition:var(--transition);

color:white;

}

.outline-btn:hover{

background:var(--gold);

color:black;

}

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

#preloader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#050505;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

transition:.8s;

}

.loader-logo{

text-align:center;

}

.loader-logo img{

width:130px;

margin:auto;

animation:float 3s infinite;

}

.loader-logo h2{

margin-top:30px;

}

.loader-logo span{

color:var(--gold);

letter-spacing:4px;

}

/*=====================================
PARTICLES
======================================*/

#particles{

position:fixed;

width:100%;

height:100%;

top:0;

left:0;

z-index:-1;

background:
radial-gradient(circle at top,
#181818,
#050505);

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:5000;

backdrop-filter:blur(20px);

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

border-bottom:
1px solid rgba(255,255,255,.05);

}

.navbar{

height:90px;

display:flex;

align-items:center;

}

.navbar .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:62px;

}

.nav-links{

display:flex;

list-style:none;

gap:45px;

}

.nav-links a{

position:relative;

font-size:15px;

font-weight:500;

transition:.3s;

}

.nav-links a:hover{

color:var(--gold);

}

.nav-links a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}

.nav-buttons{

display:flex;

align-items:center;

gap:20px;

}

.hamburger{

display:none;

cursor:pointer;

}

.hamburger span{

display:block;

width:28px;

height:3px;

margin:5px;

background:white;

transition:.3s;

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

#hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding-top:120px;

background:
linear-gradient(
135deg,
rgba(0,0,0,.85),
rgba(10,10,10,.92)
);

}

.hero-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:
radial-gradient(circle at top right,
rgba(201,162,39,.12),
transparent 40%);

pointer-events:none;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

position:relative;

z-index:5;

}

.hero-subtitle{

letter-spacing:6px;

color:var(--gold);

font-size:14px;

margin-bottom:20px;

}

.hero-left h1{

font-size:76px;

margin-bottom:15px;

}

.hero-left h2{

font-size:36px;

font-weight:500;

margin-bottom:25px;

color:#E5E5E5;

}

.hero-left p{

max-width:620px;

margin-bottom:40px;

font-size:18px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:50px;

flex-wrap:wrap;

}

.hero-badges{

display:grid;

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

gap:18px;

}

.hero-badges div{

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

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

padding:18px;

border-radius:14px;

display:flex;

align-items:center;

gap:15px;

backdrop-filter:blur(10px);

transition:.35s;

}

.hero-badges div:hover{

transform:translateY(-8px);

border-color:var(--gold);

box-shadow:0 15px 40px rgba(201,162,39,.20);

}

.hero-badges i{

font-size:22px;

color:var(--gold);

}

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

.hero-card{

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

backdrop-filter:blur(18px);

border-radius:30px;

padding:60px;

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

box-shadow:var(--shadow);

text-align:center;

transition:.4s;

}

.hero-card:hover{

transform:translateY(-12px);

box-shadow:

0 25px 60px rgba(201,162,39,.30);

}

.hero-card img{

width:170px;

margin:auto;

margin-bottom:35px;

}

.hero-card h3{

margin-bottom:20px;

}

.hero-card p{

color:#d8d8d8;

}

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

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.image-frame{

background:linear-gradient(
145deg,
#151515,
#090909);

padding:40px;

border-radius:30px;

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

box-shadow:var(--shadow);

}

.image-frame img{

width:100%;

}

.about-content h3{

margin-bottom:25px;

}

.about-content p{

margin-bottom:25px;

}

.about-features{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

margin-top:35px;

}

.feature-item{

display:flex;

align-items:center;

gap:15px;

background:#101010;

padding:18px;

border-radius:14px;

transition:.3s;

}

.feature-item:hover{

background:#181818;

transform:translateX(10px);

}

.feature-item i{

color:var(--gold);

font-size:20px;

}

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

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

background:#141414;

padding:40px;

border-radius:25px;

text-align:center;

transition:.35s;

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

}

.why-card:hover{

transform:translateY(-12px);

border-color:var(--gold);

box-shadow:0 20px 50px rgba(201,162,39,.20);

}

.why-card i{

font-size:45px;

color:var(--gold);

margin-bottom:25px;

}

.why-card h3{

margin-bottom:18px;

}

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

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-box{

background:#111;

padding:50px;

border-radius:22px;

text-align:center;

transition:.35s;

}

.stat-box:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-gold);

}

.stat-box h2{

font-size:60px;

color:var(--gold);

margin-bottom:15px;

}

.stat-box p{

font-size:16px;

}

/*==================================================
 MISSION
==================================================*/

.mission-grid{

display:grid;

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

gap:35px;

}

.mission-card{

background:#141414;

padding:45px;

border-radius:24px;

transition:.35s;

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

}

.mission-card:hover{

transform:translateY(-12px);

border-color:var(--gold);

}

.mission-card i{

font-size:48px;

color:var(--gold);

margin-bottom:25px;

}

.mission-card h3{

margin-bottom:20px;

}

/*==================================================
 SERVICES
==================================================*/

.services-grid{

display:grid;

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

gap:35px;

}

.service-card{

background:linear-gradient(
145deg,
#141414,
#0c0c0c);

padding:45px;

border-radius:28px;

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

transition:.4s;

box-shadow:var(--shadow);

}

.service-card:hover{

transform:translateY(-14px);

border-color:var(--gold);

box-shadow:

0 25px 70px rgba(201,162,39,.25);

}

.service-icon{

width:80px;

height:80px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--gold-light),
var(--gold));

margin-bottom:30px;

}

.service-icon i{

font-size:34px;

color:#111;

}

.service-card h3{

margin-bottom:25px;

}

.service-card ul{

list-style:none;

}

.service-card li{

padding:12px 0;

border-bottom:1px solid rgba(255,255,255,.05);

color:#d8d8d8;

transition:.25s;

}

.service-card li:last-child{

border-bottom:none;

}

.service-card li:hover{

padding-left:12px;

color:var(--gold);

}
/*==================================================
 INDUSTRIES SECTION
==================================================*/

.industry-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.industry-card{

background:linear-gradient(145deg,#141414,#0c0c0c);

padding:45px 30px;

text-align:center;

border-radius:24px;

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

transition:.35s ease;

cursor:pointer;

position:relative;

overflow:hidden;

}

.industry-card::before{

content:"";

position:absolute;

top:-100%;

left:0;

width:100%;

height:100%;

background:linear-gradient(

180deg,

transparent,

rgba(201,162,39,.18),

transparent

);

transition:.6s;

}

.industry-card:hover::before{

top:100%;

}

.industry-card:hover{

transform:translateY(-12px);

border-color:var(--gold);

box-shadow:0 20px 60px rgba(201,162,39,.25);

}

.industry-card i{

font-size:48px;

color:var(--gold);

margin-bottom:20px;

}

.industry-card h4{

font-size:24px;

}

/*==================================================
 CTA SECTION
==================================================*/

.cta-section{

padding:120px 0;

background:linear-gradient(

135deg,

#0d0d0d,

#171717

);

}

.cta-box{

background:linear-gradient(

145deg,

rgba(255,255,255,.05),

rgba(255,255,255,.02)

);

padding:80px;

text-align:center;

border-radius:30px;

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

backdrop-filter:blur(16px);

box-shadow:var(--shadow);

}

.cta-box h2{

margin-bottom:20px;

}

.cta-box p{

max-width:700px;

margin:auto;

margin-bottom:40px;

}

/*==================================================
 CONSULTATION FORM
==================================================*/

#consultation{

background:#080808;

}

#consultationForm{

background:#121212;

padding:60px;

border-radius:30px;

box-shadow:var(--shadow);

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

}

.form-grid{

display:grid;

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

gap:25px;

}

.form-group{

display:flex;

flex-direction:column;

}

.full-width{

grid-column:1/-1;

}

.form-group label{

margin-bottom:12px;

font-weight:600;

color:var(--gold);

}

.form-group input,

.form-group textarea,

.form-group select{

background:#1b1b1b;

border:1px solid #2b2b2b;

padding:18px;

border-radius:14px;

color:white;

font-size:16px;

transition:.3s;

font-family:Poppins,sans-serif;

}

.form-group textarea{

resize:vertical;

min-height:180px;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

outline:none;

border-color:var(--gold);

box-shadow:

0 0 20px rgba(201,162,39,.25);

}

.submit-btn{

margin-top:10px;

width:100%;

font-size:18px;

cursor:pointer;

border:none;

}

/*==================================================
 CONTACT
==================================================*/

.contact-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.contact-card{

background:#141414;

padding:45px;

border-radius:24px;

text-align:center;

transition:.35s;

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

}

.contact-card:hover{

transform:translateY(-10px);

border-color:var(--gold);

}

.contact-card i{

font-size:42px;

margin-bottom:20px;

color:var(--gold);

}

.contact-card h3{

margin-bottom:15px;

}

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

#map{

height:500px;

background:#111;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}

.map-placeholder{

width:100%;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:

linear-gradient(

135deg,

#111,

#191919

);

}

.map-placeholder h2{

margin-bottom:15px;

}

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

footer{

background:#050505;

padding:90px 0 40px;

}

.footer-grid{

display:grid;

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

gap:50px;

margin-bottom:50px;

}

.footer-logo{

width:160px;

margin-bottom:25px;

}

footer h3{

margin-bottom:20px;

color:var(--gold);

}

footer ul{

list-style:none;

}

footer li{

padding:8px 0;

color:#d0d0d0;

transition:.3s;

cursor:pointer;

}

footer li:hover{

padding-left:10px;

color:var(--gold);

}

footer hr{

border:none;

height:1px;

background:#242424;

margin:30px 0;

}

.copyright{

text-align:center;

color:#888;

}

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

.whatsapp-float{

position:fixed;

bottom:30px;

right:30px;

width:70px;

height:70px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:white;

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

z-index:5000;

transition:.3s;

}

.whatsapp-float:hover{

transform:scale(1.12);

}

#backToTop{

position:fixed;

bottom:120px;

right:36px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--gold);

color:#111;

font-size:20px;

cursor:pointer;

display:none;

transition:.3s;

z-index:5000;

}

#backToTop:hover{

transform:translateY(-5px);

box-shadow:var(--shadow-gold);

}
/*=====================================
GLASSMORPHISM UTILITIES
======================================*/

.glass{

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

backdrop-filter:blur(20px);

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

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

box-shadow:0 15px 45px rgba(0,0,0,.25);

}

.glass-light{

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

backdrop-filter:blur(12px);

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

}

/*=====================================
FADE IN ANIMATIONS
======================================*/

.fade-up{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.fade-up.active{

opacity:1;

transform:translateY(0);

}

.fade-left{

opacity:0;

transform:translateX(-80px);

transition:.8s ease;

}

.fade-left.active{

opacity:1;

transform:translateX(0);

}

.fade-right{

opacity:0;

transform:translateX(80px);

transition:.8s ease;

}

.fade-right.active{

opacity:1;

transform:translateX(0);

}

.zoom-in{

opacity:0;

transform:scale(.9);

transition:.7s ease;

}

.zoom-in.active{

opacity:1;

transform:scale(1);

}

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

.image-frame{

overflow:hidden;

}

.image-frame img{

transition:.7s ease;

}

.image-frame:hover img{

transform:scale(1.05);

}

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

.service-card,
.contact-card,
.why-card,
.stat-box,
.industry-card,
.mission-card{

will-change:transform;

}

.service-card:hover{

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

}

.contact-card:hover{

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

}

/*=====================================
INPUT PLACEHOLDER
======================================*/

::placeholder{

color:#9d9d9d;

}

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

::selection{

background:var(--gold);

color:#111;

}

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

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

@keyframes shimmer{

0%{

background-position:-400px 0;

}

100%{

background-position:400px 0;

}

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/*=====================================
BUTTON EFFECTS
======================================*/

.gold-btn{

position:relative;

overflow:hidden;

}

.gold-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transition:.8s;

}

.gold-btn:hover::before{

left:120%;

}

/*=====================================
HERO EFFECTS
======================================*/

.hero-card{

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

}

.hero-left h1{

animation:fadeIn 1s ease;

}

.hero-left h2{

animation:slideUp 1.2s ease;

}

/*=====================================
SECTION SPACING
======================================*/

section{

position:relative;

overflow:hidden;

}

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

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-badges{

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

}

.about-grid{

grid-template-columns:1fr;

}

.services-grid{

grid-template-columns:1fr;

}

.why-grid{

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

}

.stats-grid{

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

}

.mission-grid{

grid-template-columns:1fr;

}

.industry-grid{

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

}

.contact-grid{

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

}

.footer-grid{

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

}

}

/*=====================================
TABLETS
======================================*/

@media(max-width:900px){

.nav-links{

display:none;

}

.nav-buttons{

display:none;

}

.hamburger{

display:block;

}

.hero-left h1{

font-size:58px;

}

.hero-left h2{

font-size:30px;

}

.section{

padding:90px 0;

}

.dark-section{

padding:90px 0;

}

.form-grid{

grid-template-columns:1fr;

}

.hero-badges{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.industry-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

}

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

@media(max-width:600px){

.container{

width:92%;

}

h1{

font-size:42px;

}

h2{

font-size:34px;

}

h3{

font-size:26px;

}

.hero-left h2{

font-size:24px;

}

.hero-card{

padding:35px;

}

#consultationForm{

padding:30px;

}

.cta-box{

padding:40px 25px;

}

.whatsapp-float{

width:60px;

height:60px;

font-size:28px;

bottom:20px;

right:20px;

}

#backToTop{

right:22px;

bottom:95px;

}

}

/* Scroll Progress */

#scrollProgress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(90deg,#D4AF37,#C9A227);

z-index:999999;

}

/* Particles */

.particle{

position:absolute;

border-radius:50%;

background:rgba(201,162,39,.35);

animation:floatParticle linear infinite;

pointer-events:none;

}

@keyframes floatParticle{

0%{

transform:translateY(0) scale(1);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-120vh) scale(.2);

opacity:0;

}

}

/*==================================================
NOTIFICATIONS
==================================================*/

.notification{

position:fixed;

top:30px;

right:-450px;

background:#111;

color:white;

padding:20px 30px;

border-left:5px solid #C9A227;

border-radius:12px;

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

transition:.4s;

z-index:999999;

max-width:350px;

}

.notification.show{

right:30px;

}

.notification.success{

border-color:#22c55e;

}

.notification.error{

border-color:#ef4444;

}

/*=====================================
END OF STYLESHEET
======================================*/