/* ==========================================================
   WIIZBERG IT SOLUTIONS
   Premium Corporate Website
   Version 1.0
========================================================== */

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#071322;
    color:#ffffff;
    overflow-x:hidden;
    line-height:1.7;
}

/* ===========================
   COLORS
=========================== */

:root{

--primary:#0ea5e9;

--secondary:#1e293b;

--dark:#071322;

--dark-light:#0f172a;

--white:#ffffff;

--text:#dbeafe;

--border:rgba(255,255,255,.08);

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

--radius:18px;

--transition:.35s ease;

}

/* ===========================
   CONTAINER
=========================== */

.container{

width:90%;

max-width:1280px;

margin:auto;

}

/* ===========================
   LINKS
=========================== */

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

}

img{

max-width:100%;

display:block;

}

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

.btn-primary{

display:inline-block;

padding:16px 34px;

background:var(--primary);

color:#fff;

border-radius:50px;

font-weight:600;

transition:var(--transition);

box-shadow:0 15px 35px rgba(14,165,233,.35);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

display:inline-block;

padding:16px 34px;

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

color:#fff;

border-radius:50px;

margin-left:15px;

transition:var(--transition);

}

.btn-secondary:hover{

background:var(--primary);

}

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

section{

padding:90px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

font-weight:700;

margin-bottom:15px;

position:relative;

display:inline-block;

}

.section-title h2::after{

content:"";

width:100px;

height:4px;

background:linear-gradient(90deg,var(--primary),transparent);

display:block;

margin:12px auto 0;

border-radius:999px;

}
.section-title p{

max-width:700px;

margin:auto;

color:#b7c4d8;

}

.section-tag{

display:inline-block;

padding:8px 20px;

background:rgba(14,165,233,.15);

color:var(--primary);

border-radius:40px;

font-size:.85rem;

margin-bottom:20px;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(7,19,34,.92);

backdrop-filter:blur(14px);

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

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

height:90px;

}

.logo{
	display:inline-flex;

align-items:center;

justify-content:center;

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

padding:8px;

border-radius:50%;

box-shadow:0 12px 28px rgba(0,0,0,.18);

width:78px;

height:78px;

overflow:hidden;

}

.logo img{

height:100%;

width:100%;

max-width:none;

object-fit:cover;

border-radius:50%;

}

.nav-links{

display:flex;

gap:35px;

align-items:center;

}

.nav-links a{

color:#fff;

font-weight:500;

position:relative;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-links a.active{

color:var(--primary);

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:var(--primary);

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}

.mobile-toggle{

display:none;

font-size:28px;

cursor:pointer;

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

background:
linear-gradient(135deg, rgba(5,15,30,.94), rgba(8,28,52,.90)),
radial-gradient(circle at top right, rgba(14,165,233,.35), transparent 32%),
radial-gradient(circle at bottom left, rgba(0,184,255,.12), transparent 26%);

background-size:cover;

background-position:center;

padding-top:90px;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:38px 38px;

pointer-events:none;

opacity:.35;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.hero-content h1{

font-size:64px;

line-height:1.15;

margin:20px 0;

font-weight:800;

}

.hero-content h1 span{

color:var(--primary);

}

.hero-content p{

font-size:18px;

color:#d0d9e7;

margin-bottom:35px;

}

.badge{

display:inline-block;

padding:10px 22px;

background:rgba(14,165,233,.15);

border:1px solid rgba(14,165,233,.25);

color:var(--primary);

border-radius:50px;

font-size:.9rem;

}

.hero-buttons{

margin-bottom:35px;

}

.hero-features{

display:flex;

gap:30px;

flex-wrap:wrap;

font-size:.95rem;

}

.hero-features i{

color:var(--primary);

margin-right:8px;

}

.hero-image{

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

justify-content:center;

align-items:center;

}

.hero-icon{

font-size:220px;

color:#00B8FF;

text-shadow:0 20px 40px rgba(0,184,255,.25);

}

.hero-image img{

max-width:100%;

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

}

/* Floating animation */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}
/* =====================================================
   SERVICES SECTION
===================================================== */

.services-preview{
    background:#0b1628;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:50px;
}

.service-card{
    background:#111f35;
    border-radius:18px;
    padding:40px 30px;
    text-align:center;
    transition:.4s;
    border:1px solid rgba(255,255,255,.05);
    box-shadow:0 10px 30px rgba(0,0,0,.20);
}

.service-card:hover{
    transform:translateY(-10px);
    border-color:#00B8FF;
    box-shadow:0 20px 45px rgba(0,184,255,.20);
}

.service-card i{
    font-size:55px;
    color:#00B8FF;
    margin-bottom:20px;
}

.service-card h3{
    margin-bottom:15px;
    font-size:24px;
    color:#fff;
}

.service-card p{
    color:#c9d3df;
}

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

.about-preview{
    background:#071323;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.about-content h2{
    font-size:42px;
    margin:20px 0;
}

.about-content p{
    color:#cbd5e1;
    margin-bottom:20px;
}

.about-list{
    margin:30px 0;
}

.about-list li{
    margin-bottom:15px;
    color:#fff;
}

.about-list i{
    color:#00B8FF;
    margin-right:10px;
}

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

.stats{
    background:#0b1628;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    text-align:center;
}

.stat{
    background:#111f35;
    border-radius:15px;
    padding:35px;
}

.stat h2{
    font-size:52px;
    color:#00B8FF;
    margin-bottom:10px;
}

.stat p{
    color:#d8e3ef;
}

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

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.why-card{
    background:#111f35;
    padding:35px;
    border-radius:18px;
    text-align:center;
    transition:.35s;
}

.why-card:hover{
    transform:translateY(-8px);
}

.why-card i{
    font-size:45px;
    color:#00B8FF;
    margin-bottom:20px;
}

.why-card h3{
    margin-bottom:15px;
}

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

.cta{
    background:linear-gradient(135deg,#0099ff,#0057d9);
    text-align:center;
}

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

.cta p{
    max-width:700px;
    margin:0 auto 35px;
}

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

footer{
    background:#050d18;
    padding:70px 0 20px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:40px;
}

.footer-logo{
    width:180px;
    margin-bottom:20px;
}

footer h3{
    margin-bottom:20px;
}

footer ul li{
    margin-bottom:12px;
}

footer a{
    color:#d7e2ee;
}

footer a:hover{
    color:#00B8FF;
}

footer p{
    color:#c8d3de;
    margin-bottom:12px;
}

.copyright{
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    padding-top:25px;
    margin-top:50px;
}

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

.whatsapp{
    position:fixed;
    right:25px;
    bottom:25px;
    width:60px;
    height:60px;
    background:#25D366;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    z-index:999;
    box-shadow:0 15px 30px rgba(0,0,0,.25);
}

.whatsapp:hover{
    transform:scale(1.08);
}

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

@media(max-width:991px){

.hero-grid,
.about-grid{
    grid-template-columns:1fr;
    text-align:center;
}

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

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.btn-secondary{
    margin-left:0;
}

.nav-links{
    display:none;
    position:absolute;
    top:90px;
    right:5%;
    background:#071322;
    padding:20px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 45px rgba(0,0,0,.25);
    flex-direction:column;
    min-width:220px;
}

.nav-links.show{
    display:flex;
}

.mobile-toggle{
    display:block;
}

section{
    padding:70px 0;
}

}

@media(max-width:600px){

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

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

.cta h2{
    font-size:32px;
}

.stat h2{
    font-size:40px;
}

}
/* CONTACT FORM */

.contact-form{
    max-width:800px;
    margin:40px auto 0;
    display:grid;
    gap:20px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:16px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    background:#111f35;
    color:#fff;
    font-family:Poppins,sans-serif;
    font-size:16px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#b8c4d3;
}

.contact-form textarea{
    resize:vertical;
    min-height:180px;
}

.contact-form button{
    border:none;
    cursor:pointer;
    width:220px;
}

.form-message{
    margin-top:10px;
    min-height:24px;
    color:#9dd8ff;
    font-size:15px;
}

.form-message.error{
    color:#ff8f8f;
}