/* =======================================================
   INARALICE CARVALHO
   ADVOCACIA CRIMINAL
   STYLE.CSS
=======================================================*/

/* RESET */

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

html{

    scroll-behavior:smooth;

}

body{

    background:#080808;

    color:#ffffff;

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

    overflow-x:hidden;

}

/* =======================================================
    VARIÁVEIS
=======================================================*/

:root{

--gold:#caa45b;

--gold-light:#e9c980;

--gold-dark:#9d742f;

--white:#ffffff;

--gray:#bfbfbf;

--dark:#080808;

--dark-2:#111111;

--dark-3:#181818;

--border:#242424;

--shadow:

0 15px 50px rgba(0,0,0,.35);

--transition:.35s;

}

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

.container{

width:min(1280px,90%);

margin:auto;

}

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

a{

text-decoration:none;

color:inherit;

}

/* =======================================================
    LISTAS
=======================================================*/

ul{

list-style:none;

}

/* =======================================================
    IMAGENS
=======================================================*/

img{

display:block;

max-width:100%;

}

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

.section{

padding:120px 0;

}

/* =======================================================
    TITULOS
=======================================================*/

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:var(--gold);

font-size:.9rem;

letter-spacing:3px;

text-transform:uppercase;

}

.section-title h2{

font-family:'Cormorant Garamond',serif;

font-size:3.5rem;

margin-top:15px;

font-weight:600;

}

.section-title p{

max-width:700px;

margin:25px auto 0;

color:var(--gray);

line-height:1.9;

}

/* =======================================================
    LINHA DOURADA
=======================================================*/

.gold-line{

width:120px;

height:2px;

background:linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);

margin:25px auto;

}

/* =======================================================
    BOTÕES
=======================================================*/

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

background:linear-gradient(

135deg,

var(--gold-light),

var(--gold)

);

color:black;

font-weight:600;

border-radius:8px;

transition:var(--transition);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 20px 40px rgba(202,164,91,.35);

}

.btn-secondary{

display:inline-flex;

padding:18px 42px;

border:1px solid var(--gold);

border-radius:8px;

transition:var(--transition);

}

.btn-secondary:hover{

background:var(--gold);

color:black;

}

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

header{

position:fixed;

width:100%;

top:0;

left:0;

z-index:999;

transition:.4s;

background:rgba(0,0,0,.55);

backdrop-filter:blur(15px);

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

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 0;

}

.logo h2{

font-family:'Cormorant Garamond',serif;

font-size:2rem;

color:var(--gold);

}

.logo span{

font-size:.72rem;

letter-spacing:3px;

color:var(--gray);

}

nav ul{

display:flex;

gap:35px;

}

nav a{

position:relative;

font-size:.95rem;

transition:.3s;

}

nav a:hover{

color:var(--gold);

}

nav a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

nav a:hover::after{

width:100%;

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,
    rgba(202,164,91,.12),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(202,164,91,.08),
    transparent 30%),

    #080808;

}

.hero .overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    90deg,
    rgba(8,8,8,.95) 20%,
    rgba(8,8,8,.75) 55%,
    rgba(8,8,8,.40) 100%);

    z-index:1;

}

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:70px;

    min-height:100vh;

}

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

.hero-content{

    max-width:680px;

}

.subtitle{

    display:inline-block;

    color:var(--gold);

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:25px;

    font-size:.9rem;

}

.hero-content h1{

    font-family:'Cormorant Garamond',serif;

    font-size:5.2rem;

    line-height:1.05;

    margin-bottom:30px;

    font-weight:600;

}

.hero-content p{

    font-size:1.1rem;

    line-height:2;

    color:var(--gray);

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/* =======================================================
   NÚMEROS HERO
=======================================================*/

.hero-numbers{

    margin-top:70px;

    display:flex;

    gap:60px;

}

.hero-numbers div{

    position:relative;

}

.hero-numbers div::before{

    content:"";

    position:absolute;

    left:-25px;

    top:5px;

    width:2px;

    height:45px;

    background:var(--gold);

}

.hero-numbers div:first-child::before{

    display:none;

}

.hero-numbers h3{

    font-size:2.3rem;

    color:var(--gold);

}

.hero-numbers span{

    color:var(--gray);

}

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

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:620px;
    border-radius:220px;

    position:relative;

    z-index:5;

    filter:

    drop-shadow(0 40px 80px rgba(0,0,0,.55));

}

/* =======================================================
   EFEITOS DA FOTO
=======================================================*/

.gold-circle{

    position:absolute;

    width:800px;

    height:800px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(202,164,91,.25),

    rgba(202,164,91,.08),

    transparent 70%);

    animation:pulse 6s infinite;

}

.blur-light{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(202,164,91,.20);

    filter:blur(100px);

    right:10%;

    top:15%;

}

/* =======================================================
   ANIMAÇÕES
=======================================================*/

@keyframes pulse{

0%{

transform:scale(1);

opacity:.65;

}

50%{

transform:scale(1.08);

opacity:1;

}

100%{

transform:scale(1);

opacity:.65;

}

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.hero-image img{

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

}

/* =======================================================
   SOBRE
=======================================================*/

.about{

    background:#0c0c0c;

    position:relative;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

/* =======================================================
   FOTO SOBRE
=======================================================*/

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.experience-box{

    position:absolute;

    bottom:-30px;

    right:-30px;

    width:220px;

    padding:35px;

    background:#111;

    border:1px solid rgba(202,164,91,.25);

    border-radius:14px;

    text-align:center;

    backdrop-filter:blur(15px);

}

.experience-box h3{

    font-size:3rem;

    color:var(--gold);

    font-family:'Cormorant Garamond',serif;

}

.experience-box p{

    color:var(--gray);

    margin-top:10px;

}

/* =======================================================
   TEXTO SOBRE
=======================================================*/

.about-content h3{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    margin-bottom:30px;

}

.about-content p{

    line-height:2;

    color:var(--gray);

    margin-bottom:25px;

}

.signature{

    margin-top:45px;

}

.signature h4{

    font-size:1.7rem;

    color:var(--gold);

    font-family:'Cormorant Garamond',serif;

}

.signature span{

    color:#b8b8b8;

}

/* =======================================================
   DIFERENCIAIS
=======================================================*/

.advantages{

    background:#080808;

}

.cards-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.adv-card{

    background:#101010;

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

    padding:45px;

    border-radius:18px;

    transition:.4s;

    text-align:center;

}

.adv-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:

    0 30px 60px rgba(202,164,91,.15);

}

.adv-card i{

    font-size:2.7rem;

    color:var(--gold);

    margin-bottom:30px;

}

.adv-card h3{

    margin-bottom:20px;

    font-size:1.3rem;

}

.adv-card p{

    color:var(--gray);

    line-height:1.8;

}

/* =======================================================
   BANNER
=======================================================*/

.banner-premium{

    position:relative;

    padding:170px 0;

    text-align:center;

    overflow:hidden;

    background:

    linear-gradient(

    rgba(8,8,8,.82),

    rgba(8,8,8,.82)

    ),

    url("../images/banner.jpg");

    background-size:cover;

    background-position:center;

}

.banner-premium h2{

    font-family:'Cormorant Garamond',serif;

    font-size:4rem;

    max-width:900px;

    margin:auto;

}

.banner-premium p{

    margin:35px auto;

    color:#d0d0d0;

    max-width:700px;

    line-height:2;

}

.banner-premium::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:3px;

background:linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);

}

.banner-premium::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:3px;

background:linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);

}

/* =======================================================
   ÁREAS DE ATUAÇÃO
=======================================================*/

.practice-area{

    background:#0a0a0a;

}

.practice-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:70px;

}

.practice-card{

    position:relative;

    overflow:hidden;

    padding:45px;

    background:#111;

    border-radius:18px;

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

    transition:.45s;

}

.practice-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:

    0 35px 70px rgba(202,164,91,.18);

}

.practice-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:4px;

    background:linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );

    transition:.6s;

}

.practice-card:hover::before{

    left:100%;

}

.practice-card .icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    rgba(202,164,91,.12);

    margin-bottom:30px;

}

.practice-card i{

    color:var(--gold);

    font-size:2rem;

}

.practice-card h3{

    font-size:1.5rem;

    margin-bottom:18px;

}

.practice-card p{

    color:var(--gray);

    line-height:1.9;

}

/* =======================================================
   ESTATÍSTICAS
=======================================================*/

.numbers{

    background:

    linear-gradient(

    180deg,

    #0b0b0b,

    #131313

    );

}

.numbers .container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

}

.number-card{

    padding:55px;

    background:#101010;

    border-radius:18px;

    text-align:center;

    transition:.4s;

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

}

.number-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:

    0 30px 60px rgba(202,164,91,.20);

}

.number-card h2{

    font-size:3.8rem;

    color:var(--gold);

    margin-bottom:18px;

    font-family:'Cormorant Garamond',serif;

}

.number-card span{

    color:#cfcfcf;

    font-size:1rem;

    letter-spacing:1px;

}

.practice-area::before{

content:"";

position:absolute;

left:0;

right:0;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(202,164,91,.25),

transparent

);

}

.practice-area::before{

content:"";

position:absolute;

left:0;

right:0;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(202,164,91,.25),

transparent

);

}

/* =======================================================
   DEPOIMENTOS
=======================================================*/

.testimonials{

    background:#080808;

}

.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:70px;

}

.testimonial-card{

    background:#111;

    padding:45px;

    border-radius:18px;

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

    transition:.35s;

    position:relative;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:

    0 30px 60px rgba(202,164,91,.15);

}

.stars{

    color:var(--gold);

    font-size:1.2rem;

    margin-bottom:25px;

}

.testimonial-card p{

    line-height:2;

    color:#d1d1d1;

    margin-bottom:35px;

}

.client{

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:25px;

}

.client strong{

    display:block;

    margin-bottom:8px;

}

.client span{

    color:var(--gray);

}

/* =======================================================
   FAQ
=======================================================*/

.faq{

    background:#0d0d0d;

}

.faq-box{

    max-width:900px;

    margin:70px auto 0;

}

.faq-item{

    background:#111;

    margin-bottom:20px;

    padding:35px;

    border-radius:14px;

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

    transition:.35s;

}

.faq-item:hover{

    border-color:var(--gold);

}

.faq-item h3{

    font-size:1.3rem;

    margin-bottom:18px;

}

.faq-item p{

    color:var(--gray);

    line-height:2;

}

/* =======================================================
   CALL TO ACTION
=======================================================*/

.cta{

    text-align:center;

    padding:140px 0;

    background:

    linear-gradient(

    rgba(8,8,8,.90),

    rgba(8,8,8,.90)

    ),

    url("../images/cta.jpg");

    background-size:cover;

    background-position:center;

}

.cta h2{

    font-family:'Cormorant Garamond',serif;

    font-size:4rem;

    max-width:900px;

    margin:auto;

}

.cta p{

    max-width:700px;

    margin:35px auto 50px;

    color:#d2d2d2;

    line-height:2;

}

.cta .btn-primary{

    font-size:1.05rem;

}

/* =======================================================
   CONTATO
=======================================================*/

.contact{

    background:#0b0b0b;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:60px;

    align-items:start;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.info-card{

    display:flex;

    gap:20px;

    align-items:flex-start;

    padding:30px;

    background:#111;

    border-radius:16px;

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

    transition:.35s;

}

.info-card:hover{

    border-color:var(--gold);

    transform:translateY(-5px);

}

.info-card i{

    font-size:1.8rem;

    color:var(--gold);

    min-width:35px;

}

.info-card h3{

    margin-bottom:8px;

}

.info-card p{

    color:var(--gray);

    line-height:1.8;

}

/* =======================================================
   FORMULÁRIO
=======================================================*/

.contact-form{

    background:#111;

    padding:40px;

    border-radius:18px;

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

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    background:#181818;

    color:#fff;

    border:1px solid #2d2d2d;

    padding:18px;

    border-radius:10px;

    outline:none;

    transition:.3s;

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

}

.contact-form textarea{

    resize:vertical;

    min-height:160px;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(202,164,91,.15);

}

.contact-form button{

    cursor:pointer;

    border:none;

    background:linear-gradient(135deg,var(--gold-light),var(--gold));

    color:#000;

    font-weight:600;

    padding:18px;

    border-radius:10px;

    transition:.35s;

}

.contact-form button:hover{

    transform:translateY(-3px);

}

/* =======================================================
   MAPA
=======================================================*/

.map iframe{

    width:100%;

    height:450px;

    border:0;

    filter:grayscale(100%) contrast(1.05);

}

/* =======================================================
   REDES SOCIAIS
=======================================================*/

.social{

    padding:90px 0;

    background:#080808;

    text-align:center;

}

.social h2{

    margin-bottom:40px;

    font-family:'Cormorant Garamond',serif;

    font-size:2.8rem;

}

.social-icons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.social-icons a{

    width:65px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.social-icons a:hover{

    background:var(--gold);

    color:#000;

    transform:translateY(-8px);

}

.social-icons i{

    font-size:1.4rem;

}

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

footer{

    background:#050505;

    border-top:1px solid rgba(255,255,255,.06);

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

    margin-bottom:50px;

}

footer h2{

    color:var(--gold);

    font-family:'Cormorant Garamond',serif;

    margin-bottom:15px;

}

footer h3{

    margin-bottom:20px;

}

footer ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

footer p,

footer li{

    color:var(--gray);

    line-height:1.8;

}

footer a:hover{

    color:var(--gold);

}

.copyright{

    text-align:center;

    border-top:1px solid rgba(255,255,255,.06);

    padding-top:30px;

    color:var(--gray);

}

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

.whatsapp{

    position:fixed;

    right:30px;

    bottom:30px;

    width:65px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    font-size:1.8rem;

    box-shadow:0 15px 35px rgba(37,211,102,.35);

    z-index:999;

    transition:.3s;

}

.whatsapp:hover{

    transform:scale(1.08);

}

/* =======================================================
   VOLTAR AO TOPO
=======================================================*/

#backToTop{

    position:fixed;

    left:20px;

    bottom:30px;

    width:40px;

    height:40px;

    border:none;

    border-radius:30%;

    background:var(--gold);

    color:#000;

    cursor:pointer;

    display:none;

    font-size:1.2rem;

    z-index:999;

    transition:.35s;

}

#backToTop:hover{

    transform:translateY(-5px);

}

/* =======================================================
   PREMIUM EFFECTS
=======================================================*/

.btn-primary,
.btn-secondary,
.practice-card,
.adv-card,
.number-card,
.testimonial-card,
.info-card{

    transition:
    transform .45s,
    box-shadow .45s,
    border-color .45s,
    background .45s;

}

.practice-card::after,
.adv-card::after,
.number-card::after{

content:"";

position:absolute;

inset:0;

opacity:0;

background:

radial-gradient(

circle at top,

rgba(202,164,91,.12),

transparent 65%

);

transition:.45s;

pointer-events:none;

}

.practice-card:hover::after,
.adv-card:hover::after,
.number-card:hover::after{

opacity:1;

}

.section{

position:relative;

}

.section::before{

content:"";

position:absolute;

top:0;

left:50%;

transform:translateX(-50%);

width:160px;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(202,164,91,.35),

transparent

);

}

::-webkit-scrollbar{

width:11px;

}

::-webkit-scrollbar-track{

background:#090909;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(

var(--gold),

var(--gold-dark)

);

border-radius:50px;

}

::selection{

background:var(--gold);

color:black;

}

.fade-up{

opacity:0;

transform:translateY(50px);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.fade-left{

opacity:0;

transform:translateX(-60px);

transition:1s;

}

.fade-left.show{

opacity:1;

transform:translateX(0);

}

.fade-right{

opacity:0;

transform:translateX(60px);

transition:1s;

}

.fade-right.show{

opacity:1;

transform:translateX(0);

}

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.btn-primary:hover::before{

left:150%;

}

header.scrolled{

background:#080808;

padding:0;

box-shadow:

0 15px 40px rgba(0,0,0,.35);

}

.hero-image{

perspective:1500px;

}

.hero-image img{

transition:.6s;

}

.hero-image:hover img{

transform:

rotateY(-5deg)

rotateX(2deg)

scale(1.03);

}

.hero-image::after{

content:"";

position:absolute;

bottom:-40px;

left:50%;

transform:translateX(-50%);

width:320px;

height:50px;

background:

rgba(0,0,0,.55);

filter:blur(30px);

border-radius:50%;

}

body::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:

radial-gradient(

circle,

rgba(202,164,91,.02),

transparent 65%

);

pointer-events:none;

animation:backgroundMove 18s infinite linear;

}

@keyframes backgroundMove{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-50px);

}

100%{

transform:translateY(0);

}

}

/* =======================================================
   LUXURY GLASS EFFECT
=======================================================*/

.contact-form,
.faq-item,
.practice-card,
.adv-card,
.testimonial-card,
.number-card,
.info-card,
.experience-box{
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

/* =======================================================
   LOADING SCREEN
=======================================================*/

#loader{
    position:fixed;
    inset:0;
    background:#050505;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.7s ease;
}

#loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-logo{
    text-align:center;
}

.loader-logo h2{
    font-family:'Cormorant Garamond',serif;
    font-size:3rem;
    color:var(--gold);
    letter-spacing:4px;
}

.loader-logo span{
    display:block;
    margin-top:10px;
    color:var(--gray);
    letter-spacing:5px;
    font-size:.8rem;
}

/* =======================================================
   CUSTOM CURSOR
=======================================================*/

.cursor-dot{
    width:8px;
    height:8px;
    background:var(--gold);
    border-radius:50%;
    position:fixed;
    top:0;
    left:0;
    pointer-events:none;
    z-index:10000;
    transform:translate(-50%,-50%);
}

.cursor-outline{
    width:38px;
    height:38px;
    border:1px solid rgba(202,164,91,.6);
    border-radius:50%;
    position:fixed;
    top:0;
    left:0;
    pointer-events:none;
    z-index:10000;
    transform:translate(-50%,-50%);
    transition:.12s ease-out;
}

/* =======================================================
   PARTICLES BACKGROUND
=======================================================*/

.particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}

.particle{
    position:absolute;
    width:3px;
    height:3px;
    background:rgba(202,164,91,.45);
    border-radius:50%;
    animation:particleFloat linear infinite;
}

@keyframes particleFloat{
    from{
        transform:translateY(100vh);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    to{
        transform:translateY(-20vh);
        opacity:0;
    }
}

/* =======================================================
   EXTRA DEPTH
=======================================================*/

header,
section,
footer{
    position:relative;
    z-index:2;
}

.hero-content,
.about-content,
.section-title{
    position:relative;
    z-index:3;
}

/* =======================================================
   PREMIUM CARD BORDER
=======================================================*/

.practice-card,
.adv-card,
.number-card,
.testimonial-card,
.info-card,
.faq-item,
.contact-form{
    background:
    linear-gradient(#111,#111) padding-box,
    linear-gradient(135deg,rgba(202,164,91,.25),transparent,rgba(255,255,255,.05)) border-box;
    border:1px solid transparent;
}

/* =======================================================
   IMAGE FINISH
=======================================================*/

.about-image img,
.hero-image img{
    object-fit:cover;
}

.about-image::before{
    content:"";
    position:absolute;
    inset:-15px;
    border:1px solid rgba(202,164,91,.18);
    border-radius:24px;
    z-index:-1;
}

/* =======================================================
   FORM PLACEHOLDER
=======================================================*/

::placeholder{
    color:#8d8d8d;
}

/* =======================================================
   ACCESSIBILITY FOCUS
=======================================================*/

a:focus,
button:focus,
input:focus,
textarea:focus{
    outline:2px solid var(--gold);
    outline-offset:4px;
}

/* =======================================================
   PRINT CLEANUP
=======================================================*/

@media print{
    header,
    .whatsapp,
    #backToTop,
    .cursor-dot,
    .cursor-outline,
    .particles,
    #loader{
        display:none !important;
    }

    body{
        background:white;
        color:black;
    }
}