/* =====================================================
   BJ LAW ASSOCIATES
   style.css
   Author : ChatGPT
====================================================== */

:root{

--primary:#0B2C5F;
--secondary:#C8A45D;
--dark:#111111;
--light:#F7F8FA;
--white:#ffffff;
--gray:#666666;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#ffffff;
color:#222;
line-height:1.7;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
background:rgba(11,44,95,.96);
z-index:999;
box-shadow:0 3px 15px rgba(0,0,0,.15);

}

header .container{

display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;

}

.logo h2{

color:#fff;
font-size:30px;
font-weight:700;
letter-spacing:1px;

}

.logo p{

color:#d9d9d9;
font-size:13px;

}

nav ul{

display:flex;
list-style:none;

}

nav ul li{

margin-left:35px;

}

nav ul li a{

color:#fff;
text-decoration:none;
font-weight:500;
transition:.3s;

}

nav ul li a:hover{

color:var(--secondary);

}

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

.hero{

height:100vh;

background:

linear-gradient(rgba(8,25,60,.70),
rgba(8,25,60,.70)),

url('../images/law-bg.jpg');

background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:center;
text-align:center;

position:relative;

}

.hero-content{

max-width:850px;
color:#fff;
padding:20px;

}

.hero h1{

font-size:60px;
margin-bottom:20px;
font-weight:700;

}

.hero p{

font-size:22px;
margin-bottom:40px;

}

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

.buttons{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

display:inline-block;
padding:15px 35px;
text-decoration:none;
border-radius:5px;
font-weight:600;
transition:.3s;

}

.btn-primary{

background:var(--secondary);
color:#fff;

}

.btn-primary:hover{

background:#a8823f;

}

.btn-secondary{

background:#fff;
color:var(--primary);

}

.btn-secondary:hover{

background:#ececec;

}

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

section{

padding:90px 0;

}

section h2{

font-size:40px;
color:var(--primary);
text-align:center;
margin-bottom:25px;

}

section p{

font-size:18px;
color:#555;

}

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

.about{

background:#fff;
text-align:center;

}

.about p{

max-width:900px;
margin:auto;

}

/* ==========================================
PRACTICE AREA
========================================== */

.practice{

background:var(--light);

}

.grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:50px;

}

.card{

background:#fff;

padding:35px;

border-radius:8px;

transition:.4s;

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

text-align:center;

}

.card:hover{

transform:translateY(-8px);

}

.card i{

font-size:55px;

color:var(--secondary);

margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

color:var(--primary);

font-size:24px;

}

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

.features{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:50px;

}

.features div{

padding:30px;

background:#fff;

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

border-left:5px solid var(--secondary);

}

.features h3{

margin-bottom:12px;

color:var(--primary);

}

/* ==========================================
STATS
========================================== */

.stats{

background:var(--primary);

color:#fff;

}

.stats .container{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:30px;

text-align:center;

}

.counter h2{

font-size:55px;

color:var(--secondary);

margin-bottom:10px;

}

.counter p{

color:#fff;

}

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

.cta{

background:#F5F5F5;

text-align:center;

}

.cta h2{

margin-bottom:15px;

}

.cta p{

margin-bottom:30px;

}

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

footer{

background:#111827;

color:#ddd;

padding:70px 0 25px;

}

.footer-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

footer h3{

color:#fff;

margin-bottom:20px;

}

footer ul{

list-style:none;

}

footer ul li{

margin-bottom:12px;

}

footer a{

color:#ddd;

text-decoration:none;

transition:.3s;

}

footer a:hover{

color:var(--secondary);

}

footer i{

margin-right:8px;

color:var(--secondary);

}

footer hr{

margin:40px 0;

border:none;

height:1px;

background:#444;

}

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

footer .fab{

font-size:22px;

margin-right:15px;

transition:.3s;

}

footer .fab:hover{

transform:scale(1.2);

color:var(--secondary);

}

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

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

color:#fff;

font-size:32px;

box-shadow:0 8px 25px rgba(0,0,0,.3);

z-index:9999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}

/* ==========================================
ANIMATIONS
========================================== */

.card,
.features div{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:992px){

.hero h1{

font-size:45px;

}

.hero p{

font-size:18px;

}

}

@media(max-width:768px){

header .container{

flex-direction:column;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

margin-top:15px;

}

nav ul li{

margin:10px;

}

.hero{

padding:100px 20px;

}

.hero h1{

font-size:36px;

}

.hero p{

font-size:17px;

}

.buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

max-width:280px;

margin:auto;

}

section{

padding:70px 0;

}

section h2{

font-size:32px;

}

}

@media(max-width:500px){

.logo h2{

font-size:24px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:16px;

}

.counter h2{

font-size:40px;

}

}


background: url('../images/law-bg.jpg');