*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
scroll-behavior:smooth;
}

body{
background: linear-gradient(135deg,#050816,#0f172a);
color:#fff;
overflow-x:hidden;
}

/* ===================== */
/* LOADER */
/* ===================== */

.loader{
position:fixed;
width:100%;
height:100%;
background:#000;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.spinner{
width:45px;
height:45px;
border:4px solid #38bdf8;
border-top:4px solid transparent;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
100%{transform:rotate(360deg);}
}

/* ===================== */
/* HEADER (FIXED MOBILE ISSUE) */
/* ===================== */

header{
position:sticky;
top:0;
z-index:1000;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
background:rgba(0,0,0,0.75);
backdrop-filter: blur(14px);
flex-wrap:wrap;
}

.logo img{
height:65px;
}

/* NAV */
nav{
display:flex;
gap:18px;
align-items:center;
}

nav a{
color:#fff;
text-decoration:none;
transition:0.3s;
font-size:15px;
white-space:nowrap;
}

nav a:hover{
color:#38bdf8;
}

/* HAMBURGER */
.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
color:#fff;
}

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

.hero{
min-height:70vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
background:url("https://plus.unsplash.com/premium_photo-1733317391601-b1651d6d4be9?w=1200") center/cover no-repeat;
}

.hero-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
}

.hero-content{
position:relative;
z-index:2;
max-width:800px;
padding:20px;
}

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

.hero p{
color:#cbd5e1;
margin:15px 0;
font-size:16px;
}

.cta{
background:#38bdf8;
color:#000;
padding:12px 22px;
border-radius:10px;
text-decoration:none;
display:inline-block;
font-weight:bold;
transition:0.3s;
}

.cta:hover{
transform:scale(1.05);
}

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

.section{
padding:70px 20px;
text-align:center;
}

.section h2{
margin-bottom:40px;
font-size:32px;
}

/* ===================== */
/* CARDS (IMPROVED RESPONSIVE) */
/* ===================== */

.split-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
max-width:950px;
margin:35px auto;
padding:22px;
background:rgba(255,255,255,0.04);
border-radius:18px;
backdrop-filter:blur(12px);
box-shadow:0 10px 30px rgba(0,0,0,0.25);
transition:0.3s ease;
}

.split-card:hover{
transform:translateY(-6px);
}

.split-card.reverse{
flex-direction:row-reverse;
}

.card-text{
flex:1;
text-align:left;
padding:10px;
}

.card-text h3{
color:#38bdf8;
margin-bottom:10px;
font-size:20px;
}

.card-text p{
color:#cbd5e1;
line-height:1.7;
font-size:15px;
}

.card-img{
flex:1;
display:flex;
justify-content:center;
align-items:center;
}

.card-img img{
width:100%;
max-width:420px;
height:260px;
object-fit:cover;
border-radius:14px;
transition:0.3s ease;
}

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

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

.contact-cta{
padding:70px 20px;
text-align:center;
background:#0b1220;
}

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

footer{
background:#0b1220;
padding:40px 20px 10px;
}

.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:20px;
max-width:1100px;
margin:auto;
}

.footer-box{
min-width:200px;
}

.footer-box h3{
color:#38bdf8;
margin-bottom:10px;
}

.footer-box a{
display:block;
color:#cbd5e1;
text-decoration:none;
margin:5px 0;
}

.footer-box a:hover{
color:#38bdf8;
}

.footer-bottom{
text-align:center;
margin-top:20px;
border-top:1px solid rgba(255,255,255,0.1);
padding-top:10px;
color:#94a3b8;
}

/* ===================== */
/* MOBILE FIX (MAIN FIXED PART) */
/* ===================== */

@media(max-width:768px){

.menu-toggle{
display:block;
}

nav{
display:none;
position:absolute;
top:70px;
right:0;
background:#000;
flex-direction:column;
width:200px;
padding:15px;
border-radius:10px;
z-index:999;
}

nav.active{
display:flex;
}

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

.split-card,
.split-card.reverse{
flex-direction:column;
text-align:center;
gap:15px;
padding:18px;
}

.card-text{
text-align:center;
padding:0;
}

.card-img img{
max-width:100%;
height:200px;
}
}