/* =====================================
   BEELY TECH SOLUTIONS
   PROFESSIONAL CORPORATE THEME
===================================== */

:root{

--primary:#2563EB;
--secondary:#06B6D4;
--accent:#F59E0B;

--dark:#0F172A;
--dark-card:#1E293B;

--light:#FFFFFF;
--light-card:#F8FAFC;

--text:#111827;

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

--radius:15px;

}

/* RESET */

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

html{
scroll-behavior:smooth;
}

body{

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

background:#ffffff;

color:var(--text);

line-height:1.7;

}

/* HEADER */

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 6%;

background:#ffffff;

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

}

.logo img{

height:60px;

}

nav ul{

list-style:none;

display:flex;

gap:25px;

}

nav ul li a{

text-decoration:none;

font-weight:600;

color:#111827;

transition:.3s;

}

nav ul li a:hover{

color:var(--primary);

}

/* MOBILE MENU */

.menu-toggle{

display:none;

font-size:30px;

cursor:pointer;

color:var(--primary);

}

@media(max-width:768px){

.menu-toggle{

display:block;

}

nav ul{

display:none;

position:absolute;

top:80px;

left:0;

width:100%;

background:white;

flex-direction:column;

padding:20px;

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

}

nav ul.active{

display:flex;

}

}

/* HERO */

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:120px 20px;

background:

linear-gradient(
135deg,
rgba(37,99,235,.95),
rgba(6,182,212,.85)
);

color:white;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

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

top:-100px;

right:-100px;

}

.hero-content{

max-width:900px;

position:relative;

z-index:2;

}

.hero h1{

font-size:4rem;

line-height:1.2;

margin-bottom:20px;

}

.hero p{

font-size:1.2rem;

margin-bottom:30px;

}

@media(max-width:768px){

.hero h1{

font-size:2.3rem;

}

}

/* BUTTONS */

.btn{

display:inline-block;

padding:14px 30px;

background:var(--primary);

color:white;

text-decoration:none;

border-radius:50px;

font-weight:600;

margin:10px;

transition:.3s;

}

.btn:hover{

transform:translateY(-5px);

background:var(--secondary);

}

.btn-secondary{

background:var(--accent);

}

/* SECTIONS */

section{

padding:100px 8%;

}

section h2{

text-align:center;

font-size:2.5rem;

margin-bottom:40px;

}

/* SERVICES */

.service-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.card{

background:white;

padding:35px;

border-radius:15px;

box-shadow:var(--shadow);

transition:.3s;

}

.card:hover{

transform:
translateY(-10px);

}

.card img{

width:100%;

border-radius:10px;

margin-bottom:15px;

}

.card i{

font-size:3rem;

color:var(--primary);

margin-bottom:15px;

}

.card h3{

margin-bottom:10px;

}

/* MISSION */

.mission{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(350px,1fr));

gap:30px;

}

.mission-box,
.vision-box{

padding:40px;

background:white;

border-radius:15px;

box-shadow:var(--shadow);

}

/* STATS */

.stats{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));

gap:30px;

background:var(--primary);

color:white;

text-align:center;

}

.stat{

padding:30px;

}

.stat h2{

font-size:3rem;

}

/* TESTIMONIALS */

.testimonials{

background:#f5f7fb;

}

.testimonial{

background:white;

padding:35px;

max-width:900px;

margin:20px auto;

border-radius:15px;

box-shadow:var(--shadow);

}

/* PHOTOGRAPHY SECTION */

.photography{

text-align:center;

background:#f8fafc;

}

/* CONTACT */

.contact-preview{

text-align:center;

}

/* FOOTER */

footer{

background:#0F172A;

color:white;

text-align:center;

padding:60px 20px;

}

.socials{

margin-bottom:20px;

}

.socials a{

font-size:1.6rem;

margin:0 10px;

color:white;

transition:.3s;

}

.socials a:hover{

color:var(--secondary);

}

/* WHATSAPP */

.whatsapp{

position:fixed;

bottom:25px;

right:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

color:white;

text-decoration:none;

box-shadow:
0 5px 20px rgba(0,0,0,.3);

z-index:9999;

}

.whatsapp:hover{

transform:scale(1.1);

}.blog-card{
    background:#ffffff;
}

.blog-content h3{
    color:#111827;
}

.blog-content p{
    color:#4B5563;
}

.blog-date{
    color:#6B7280;
}