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

body{
    background:#f5f5f5;
}
html {
    scroll-behavior: smooth;
}



header{
position:fixed;
width:100%;
top:0;
left:0;
z-index:1000;
height: 100px;
transition:0.4s;
padding:15px 0;
}



header.transparent{
background:transparent;
}



header.scrolled{
background:#111;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
padding:0px 0;
}








nav{
display:flex;
gap:30px;
}

nav a{
color:white;
text-decoration:none;
font-size:15px;
position:relative;
}


nav a::after{
content:"";
position:absolute;

width:0;
height:2px;

background:#d4af37;

left:0;
bottom:-5px;

transition:0.3s;
}

nav a:hover::after{
width:100%;
}


.container{
    
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 10% 20px 10%;
}



.logo{
font-size:22px;
font-weight:bold;
}
.logo img {
    height: 90px;
    transition:0.3s;
    margin-top: 5px;
}

nav{
display:flex;
gap:30px;
}

nav a{
color:white;
text-decoration:none;
font-size:15px;
}

.hamburger{
display:none;
font-size:28px;
cursor:pointer;
}


.hero{
height:100vh;

background-image:url("../img/hero.jpg");
background-size:cover;
background-position:center;

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

text-align:center;

position:relative;
overflow:hidden;
}



.hero::before{
content:"";
position:absolute;

width:100%;
height:100%;

background:rgba(0,0,0,0.55);
}







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



.hero-title{
font-size:55px;
margin-bottom:20px;

opacity:0;
transform:translateY(40px);
animation:fadeUp 1s forwards;
}



.hero-subtitle{
font-size:20px;
margin-bottom:35px;

opacity:0;
transform:translateY(40px);
animation:fadeUp 1s 0.3s forwards;
}



@keyframes fadeUp{

to{
opacity:1;
transform:translateY(0);
}

}


.hero-buttons{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

.btn-primary{

background:#d4af37;
color:black;

padding:14px 30px;
border-radius:4px;

text-decoration:none;
font-weight:bold;

transition:0.3s;
}

.btn-primary:hover{
background:#c19b2f;
transform:translateY(-3px);
}

.btn-outline{

border:2px solid white;
color:white;

padding:12px 28px;
text-decoration:none;

transition:0.3s;
}

.btn-outline:hover{

background:white;
color:black;

}




.hero{
height:90vh;
/* margin-top: -200px; */
background-image:url("../img/hero.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
/* padding-top: 120px; */
display:flex;
align-items:center;
justify-content:center;
text-align:center;

color:white;
position:relative;
}
.hero::before{
content:"";
position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.5);
}

.hero .slider{
position:relative;
z-index:2;
}


.slide{
display:none;
animation:fade 1s;
}

.slide.active{
display:block;
}

@keyframes fade{
from{opacity:0}
to{opacity:1}
}

.slide h1{
font-size:50px;
}

.slide p{
margin-top:15px;
font-size:18px;
}



.practice{

padding:120px 10%;
background:#f9f9f9;

}



.section-title{

text-align:center;
font-size:38px;
margin-bottom:70px;
position:relative;

}

.section-title::after{

content:"";
width:60px;
height:3px;

background:#d4af37;

display:block;
margin:15px auto 0;

}



.practice-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:35px;

}



.practice-card{

background:white;
padding:45px 30px;

border-radius:8px;

text-align:center;

transition:0.4s;

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

position:relative;

overflow:hidden;

}



.practice-card::before{

content:"";

position:absolute;

width:100%;
height:4px;

background:#d4af37;

top:0;
left:-100%;

transition:0.4s;

}

.practice-card:hover::before{

left:0;

}



.practice-card i{

font-size:38px;
color:#d4af37;
margin-bottom:20px;

}



.practice-card h3{

margin-bottom:10px;
font-size:20px;

}



.practice-card p{

font-size:14px;
color:#666;

}



.practice-card:hover{

transform:translateY(-10px);

box-shadow:0 15px 35px rgba(0,0,0,0.1);

}


.lawyers{
padding:80px 10%;
text-align:center;
background:white;
}

.lawyers h2{
font-size:32px;
margin-bottom:50px;
}

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

.lawyer{
background:#f8f8f8;
padding:20px;
border-radius:10px;
transition:0.3s;
}

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

.lawyer img{
width:100%;
border-radius:10px;
}

.lawyer h3{
margin-top:15px;
}



.lawyer-card{

position:relative;
overflow:hidden;
border-radius:10px;
cursor:pointer;

}

.lawyer-card img{

width:100%;
display:block;

}

.lawyer-info{

position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.7);

color:white;

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

padding:20px 120px;

opacity:0;
transform:translateY(100%);
transition:0.4s;

}

.lawyer-card:hover .lawyer-info{

opacity:1;
transform:translateY(0);

}
.lawyer-card.active .lawyer-info{

opacity:1;
transform:translateY(0);

}



.about{

padding:120px 10%;
background:white;

}

.about-container{

max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}



.about-image{

position:relative;

}

.about-image img{

width:100%;
border-radius:8px;

box-shadow:0 20px 40px rgba(0,0,0,0.1);

transition:0.4s;

}

.about-image:hover img{

transform:scale(1.05);

}



.about-content h2{

font-size:38px;
margin-bottom:25px;
position:relative;

}

.about-content h2::after{

content:"";

width:60px;
height:3px;

background:#d4af37;

display:block;
margin-top:10px;

}

.about-content p{

margin-bottom:15px;
color:#1a1a1a;
line-height:1.7;

}



.about-highlights{

display:flex;
gap:40px;
margin-top:25px;

}

.about-highlights h3{

color:#d4af37;
margin-bottom:5px;

}



.about-btn{

display:inline-block;
margin-top:30px;

background:#d4af37;
color:black;

padding:14px 28px;

font-weight:bold;

text-decoration:none;

border-radius:4px;

transition:0.3s;

}

.about-btn:hover{

background:#c59a2c;
transform:translateY(-2px);

}



.contact{

padding:120px 10%;
background:#111;
color:white;

}

.contact-container{

max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;

}



.contact-info h2{

font-size:36px;
margin-bottom:20px;

}

.contact-info p{

margin-bottom:20px;
color:#ccc;

}

.contact-info ul{

list-style:none;

}

.contact-info li{

margin-bottom:10px;

}



.contact-form form{

display:flex;
flex-direction:column;
gap:15px;

}

.contact-form input,
.contact-form textarea{

padding:12px;
border:none;
outline:none;

background:#222;
color:white;

}

.contact-form button{

background:#d4af37;
color:black;

padding:14px;

border:none;
cursor:pointer;

font-weight:bold;

transition:0.3s;

}

.contact-form button:hover{

background:#c59a2c;

}



.footer{

background:#000;
color:white;

}

.footer-container{

max-width:1200px;
margin:auto;

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

gap:40px;

padding:60px 10%;

}

.footer-col h4,
.footer-col h3{

margin-bottom:15px;

}

.footer-col ul{

list-style:none;

}

.footer-col ul li{

margin-bottom:10px;

}

.footer-col ul li a{

color:#ccc;
text-decoration:none;

transition:0.3s;

}

.footer-col ul li a:hover{

color:#d4af37;

}



.footer-bottom{

text-align:center;
padding:20px;

border-top:1px solid #222;

font-size:14px;

}


.whatsapp{

position:fixed;
bottom:20px;
right:20px;

background:#25D366;
color:white;

font-size:28px;

width:60px;
height:60px;

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

border-radius:50%;

text-decoration:none;

box-shadow:0 5px 15px rgba(0,0,0,0.3);

z-index:1000;

transition:0.3s;

}

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



@media(max-width:768px){

    header{
        height: 105px;
    }

    nav{
    transition: 0.7s ease-in-out;
    position:absolute;
    top:70px;
    left:0;
    /* background: #111111a2; */
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    width:100%;
    flex-direction:column;
    display:none;
    padding-top: 30px ;

    }

    nav a{
    padding:15px 150px;
    
    
    width: 100vw;
    
    }
    nav a::after{

    background:none;


    }

    nav.active{
    transition: 0.7s ease-in-out;
    display:flex;
    margin-top: 30px;  
    height: 100vh;
    
    

    }
    nav.active a{
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
        /* align-items: center; */
        /* border-bottom:2px solid  #000000; */
        font-weight: 600;
        /* color: #D7BFBB; */
    
    }

    .hamburger{
    display:block;
    color: #D7BFBB;
    }



    .slide h1{
    font-size:35px;
    }

    


    .about-container{

    grid-template-columns:1fr;

    }
    .lawyer-info{
        padding: 20px;
    }

    .experience-badge{

    left:10px;
    bottom:-20px;

    }

    .about-highlights{

    flex-direction:column;
    gap:15px;

    }


    .contact-container{

    grid-template-columns:1fr;

    }

}