/* =====================================================
   GLOBIFYTRADE INTERNATIONAL
   Premium Glass Export Theme
   Part 1
===================================================== */

:root{

--primary:#ffb400;
--secondary:#0ea5e9;
--dark:#07111f;
--dark2:#0d1b2a;
--white:#ffffff;
--text:#d7dde7;
--glass:rgba(255,255,255,.08);
--glass2:rgba(255,255,255,.12);
--border:rgba(255,255,255,.15);

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

--radius:18px;

--transition:.4s ease;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:
linear-gradient(135deg,#07111f,#10243d,#173b63);

color:var(--white);

overflow-x:hidden;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#07111f;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--primary),#ffcf33);

border-radius:50px;

}

/* Links */

a{

text-decoration:none;
transition:var(--transition);

}

img{

max-width:100%;
display:block;

}

/* Section */

section{

position:relative;
padding:100px 0;

}

.container{

position:relative;
z-index:2;

}

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

.glass-nav{

background:rgba(5,18,34,.55);

backdrop-filter:blur(18px);

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

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

transition:.4s;

padding:12px 0;

}

.glass-nav.scrolled{

background:#081421;

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

}

.navbar-brand{

display:flex;

align-items:center;

gap:12px;

font-size:26px;

font-weight:700;

color:#fff!important;

}

.navbar-brand span{

letter-spacing:.5px;

}

.nav-link{

color:#fff!important;

margin:0 10px;

font-weight:500;

position:relative;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--primary);

transition:.4s;

}

.nav-link:hover::after,

.nav-link.active::after{

width:100%;

}

.navbar-toggler{

border:none;

box-shadow:none!important;

color:#fff;

}

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

.btn-warning{

background:var(--primary);

border:none;

border-radius:50px;

padding:14px 30px;

font-weight:600;

transition:.35s;

}

.btn-warning:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(255,180,0,.4);

}

.btn-outline-light{

border-radius:50px;

padding:14px 30px;

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:650px;

height:650px;

background:radial-gradient(circle,
rgba(255,180,0,.18),
transparent 70%);

top:-180px;

right:-150px;

}

.hero::after{

content:"";

position:absolute;

width:550px;

height:550px;

background:radial-gradient(circle,
rgba(14,165,233,.16),
transparent 70%);

bottom:-220px;

left:-120px;

}

.hero-overlay{

position:absolute;

inset:0;

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

}

.hero h1{

font-size:64px;

font-weight:800;

line-height:1.15;

margin-bottom:25px;

}

.hero h1 span{

color:var(--primary);

}

.hero p{

font-size:19px;

line-height:1.8;

color:var(--text);

margin-bottom:35px;

max-width:620px;

}

.hero-btn{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.hero-image{

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

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/* Loader */

#loader{
display:none !important;
}

.loader-globe{

width:80px;

height:80px;

border-radius:50%;

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

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

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

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

.section-title{
font-size:42px;
font-weight:700;
margin-bottom:15px;
color:#fff;
}

.section-subtitle{
color:#cfd8e3;
max-width:700px;
margin:auto;
line-height:1.8;
}

.glass-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.10);
border-radius:20px;
padding:40px 30px;
text-align:center;
transition:.45s;
overflow:hidden;
position:relative;
height:100%;
box-shadow:0 15px 40px rgba(0,0,0,.20);
}

.glass-card::before{
content:"";
position:absolute;
top:-100%;
left:-100%;
width:220%;
height:220%;
background:linear-gradient(45deg,
transparent,
rgba(255,255,255,.08),
transparent);
transform:rotate(35deg);
transition:.8s;
}

.glass-card:hover::before{
top:100%;
left:100%;
}

.glass-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 55px rgba(0,0,0,.40);
border-color:rgba(255,180,0,.45);
}

.feature-icon{
font-size:55px;
margin-bottom:20px;
color:var(--primary);
transition:.4s;
}

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

.glass-card h4{
font-size:24px;
margin-bottom:15px;
font-weight:600;
}

.glass-card p{
color:#d7dde7;
line-height:1.8;
}

/* =====================================================
   PRODUCTS
===================================================== */

.products{
background:linear-gradient(180deg,#0b1728,#08111d);
}

.product-card{
background:#fff;
border-radius:20px;
overflow:hidden;
transition:.45s;
box-shadow:0 15px 35px rgba(0,0,0,.20);
height:100%;
}

.product-card img{
height:260px;
width:auto;
object-fit:cover;
transition:.5s;
}

.product-card:hover img{
transform:scale(1.10);
}

.product-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.product-content{
padding:25px;
text-align:center;
}

.product-content h5{
font-size:22px;
font-weight:700;
margin-bottom:18px;
color:#0d1b2a;
}

.product-content .btn{
border-radius:40px;
padding:10px 24px;
}

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

.counter-section{
background:linear-gradient(135deg,#ffb400,#f8a400);
color:#111;
}

.counter-section .counter{
font-size:60px;
font-weight:800;
margin-bottom:10px;
}

.counter-section p{
font-size:18px;
font-weight:600;
margin:0;
}

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

.export-cta{
padding:110px 0;
text-align:center;
background:
linear-gradient(rgba(4,12,22,.70),
rgba(4,12,22,.70)),
url("world-map.jpg") center/cover;
}

.export-cta h2{
font-size:46px;
font-weight:700;
margin-bottom:20px;
}

.export-cta p{
max-width:700px;
margin:auto;
font-size:19px;
color:#d7dde7;
margin-bottom:35px;
line-height:1.8;
}

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

.fade-up{
animation:fadeUp 1s ease forwards;
}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(50px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

/* Hover Glow */

.glow:hover{
box-shadow:0 0 35px rgba(255,180,0,.45);
}

/* Border Animation */

.border-animation{
position:relative;
overflow:hidden;
}

.border-animation::after{
content:"";
position:absolute;
left:-100%;
bottom:0;
width:100%;
height:3px;
background:var(--primary);
transition:.5s;
}

.border-animation:hover::after{
left:0;
}

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

.footer{
background:#050b14;
padding:80px 0 25px;
position:relative;
overflow:hidden;
}

.footer::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:350px;
height:350px;
background:rgba(255,180,0,.08);
border-radius:50%;
filter:blur(60px);
}

.footer-logo{
font-size:30px;
font-weight:700;
color:#fff;
margin-bottom:20px;
}

.footer p{
color:#b8c2d1;
line-height:1.9;
}

.footer h5{
color:#fff;
margin-bottom:20px;
font-weight:600;
}

.footer-links{
list-style:none;
padding:0;
margin:0;
}

.footer-links li{
margin-bottom:12px;
}

.footer-links a{
color:#cfd8e3;
transition:.35s;
}

.footer-links a:hover{
color:var(--primary);
padding-left:8px;
}

.footer hr{
border-color:rgba(255,255,255,.08);
margin:40px 0 20px;
}

/* =====================================================
   SOCIAL ICONS
===================================================== */

.social-icons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.social-icons a{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.08);
color:#fff;
font-size:20px;
transition:.4s;
border:1px solid rgba(255,255,255,.10);
}

.social-icons a:hover{
background:var(--primary);
color:#111;
transform:translateY(-6px) rotate(360deg);
}

/* =====================================================
   WHATSAPP BUTTON
===================================================== */

.whatsapp{
position:fixed;
right:25px;
bottom:25px;
width:65px;
height:65px;
border-radius:50%;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
color:#fff;
z-index:999;
text-decoration:none;
box-shadow:0 10px 35px rgba(0,0,0,.35);
animation:whatsappPulse 2s infinite;
}

@keyframes whatsappPulse{

0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(37,211,102,.55);
}

70%{
box-shadow:0 0 0 20px rgba(37,211,102,0);
}

100%{
transform:scale(1);
}

}

.whatsapp:hover{
color:#fff;
transform:scale(1.12);
}

/* =====================================================
   BACK TO TOP
===================================================== */

#topBtn{
position:fixed;
right:25px;
bottom:105px;
width:55px;
height:55px;
border:none;
border-radius:50%;
background:var(--primary);
color:#111;
font-size:22px;
cursor:pointer;
display:none;
z-index:999;
transition:.35s;
box-shadow:0 10px 25px rgba(0,0,0,.35);
}

#topBtn:hover{
transform:translateY(-6px);
}

/* =====================================================
   FLOATING BACKGROUND
===================================================== */

.floating-elements{
position:fixed;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:0;
}

.floating-elements span{
position:absolute;
display:block;
border-radius:50%;
background:rgba(255,255,255,.05);
animation:floatBg 20s linear infinite;
}

.floating-elements span:nth-child(1){
width:90px;
height:90px;
left:10%;
top:80%;
}

.floating-elements span:nth-child(2){
width:40px;
height:40px;
left:25%;
top:40%;
animation-duration:14s;
}

.floating-elements span:nth-child(3){
width:120px;
height:120px;
left:70%;
top:90%;
animation-duration:22s;
}

.floating-elements span:nth-child(4){
width:60px;
height:60px;
left:82%;
top:25%;
animation-duration:18s;
}

.floating-elements span:nth-child(5){
width:35px;
height:35px;
left:55%;
top:65%;
animation-duration:16s;
}

@keyframes floatBg{

0%{
transform:translateY(0) rotate(0);
opacity:0;
}

50%{
opacity:1;
}

100%{
transform:translateY(-1200px) rotate(360deg);
opacity:0;
}

}

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

.text-gradient{
background:linear-gradient(90deg,#ffb400,#ffd95a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.shadow-lg-custom{
box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.rounded-xl{
border-radius:25px;
}

.glass{
background:rgba(255,255,255,.08);
backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.10);
}

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

@media (max-width:992px){

.hero{
text-align:center;
padding-top:120px;
}

.hero h1{
font-size:48px;
}

.hero-image{
margin-top:40px;
}

.section-title{
font-size:34px;
}

.export-cta h2{
font-size:36px;
}

.social-icons{
justify-content:center;
}

}

@media (max-width:768px){

.hero h1{
font-size:38px;
}

.hero p{
font-size:17px;
}

.hero-btn{
justify-content:center;
}

.section-title{
font-size:30px;
}

.counter-section .counter{
font-size:44px;
}

.footer{
text-align:center;
}

.whatsapp{
width:58px;
height:58px;
font-size:28px;
}

#topBtn{
width:48px;
height:48px;
font-size:18px;
bottom:95px;
}

}

@media (max-width:576px){

.hero h1{
font-size:32px;
}

.section-title{
font-size:26px;
}

.export-cta h2{
font-size:30px;
}

.btn-warning,
.btn-outline-light{
width:100%;
margin-bottom:12px;
}

}

/* Scroll Progress */

#progressBar{

position:fixed;
top:0;
left:0;
height:4px;
width:0;
background:#ffb400;
z-index:999999;
transition:.15s;

}

/* Mouse Glow */

#mouseGlow{

position:fixed;
width:250px;
height:250px;
background:radial-gradient(circle,
rgba(255,180,0,.18),
transparent 70%);
pointer-events:none;
transform:translate(-50%,-50%);
z-index:0;

}

/* Ripple */

.btn{

position:relative;
overflow:hidden;

}

.ripple{

position:absolute;
border-radius:50%;
background:rgba(255,255,255,.45);
transform:scale(0);
animation:ripple .6s linear;

}

@keyframes ripple{

to{

transform:scale(4);
opacity:0;

}

}