/*====================================================
    SHIRLEY ROBINSON LAW FIRM
    Premium Luxury Theme
=====================================================*/

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

/*====================
Variables
=====================*/

:root{

    --gold:#C9A227;
    --gold-light:#E6C865;
    --black:#0d1117;
    --black2:#161b22;
    --white:#ffffff;
    --gray:#8d939d;
    --light:#f7f7f7;

    --shadow:0 15px 40px rgba(0,0,0,.18);

    --radius:18px;

    --transition:.35s ease;

}

/*====================
Reset
=====================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:#333;

    background:#fff;

    line-height:1.8;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

ul{

    list-style:none;

}

a{

    text-decoration:none;

    color:inherit;

}

section{

    padding:100px 10%;

}

::selection{

    background:var(--gold);

    color:white;

}

/*====================
Typography
=====================*/

h1,
h2,
h3,
h4,
h5{

    font-family:'Cinzel',serif;

    font-weight:700;

}

h2{

    font-size:45px;

    margin-bottom:20px;

}

p{

    color:#555;

}

/*====================
Utility
=====================*/

.container{

    max-width:1300px;

    margin:auto;

}

.gold{

    color:var(--gold);

}

/*====================
Header
=====================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:.4s;

    background:rgba(10,10,10,.75);

    backdrop-filter:blur(18px);

}

header.sticky{

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

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

}

/*====================
Navbar
=====================*/

.navbar{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 10%;

}

/*====================
Logo
=====================*/

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    color:white;

}

.logo i{

    color:var(--gold);

    font-size:40px;

}

.logo h2{

    font-size:24px;

    margin-bottom:0;

}

.logo span{

    display:block;

    color:var(--gold);

    letter-spacing:4px;

    font-size:11px;

    margin-top:2px;

}

/*====================
Navigation Links
=====================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-links li{

    position:relative;

}

.nav-links a{

    color:white;

    font-size:15px;

    font-weight:500;

    transition:var(--transition);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:var(--transition);

}

.nav-links a:hover{

    color:var(--gold);

}

.nav-links a:hover::after{

    width:100%;

}

/*====================
Consultation Button
=====================*/

.btn-nav{

    background:var(--gold);

    color:white;

    padding:13px 28px;

    border-radius:40px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.btn-nav:hover{

    background:white;

    color:black;

    transform:translateY(-4px);

}

/*====================
Mobile Menu
=====================*/

.menu-btn{

    display:none;

    color:white;

    font-size:30px;

    cursor:pointer;

}

/*====================
Scroll Progress Bar
=====================*/

.progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(90deg,var(--gold),#f7e48c);

    z-index:2000;

}

/*====================
Buttons
=====================*/

.gold-btn{

    display:inline-block;

    background:var(--gold);

    color:white;

    padding:16px 35px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.gold-btn:hover{

    background:white;

    color:black;

    transform:translateY(-5px);

}

.outline-btn{

    display:inline-block;

    padding:16px 35px;

    border-radius:50px;

    border:2px solid white;

    color:white;

    transition:var(--transition);

}

.outline-btn:hover{

    background:white;

    color:black;

}

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

.hero{

    position:relative;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    padding:0 10%;

    overflow:hidden;

    background:
    linear-gradient(rgba(10,10,10,.75),rgba(10,10,10,.65)),
    url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=1800&q=80")
    center center/cover no-repeat;

}

/* Dark Overlay */

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.80),
        rgba(0,0,0,.45),
        rgba(0,0,0,.20)
    );

    z-index:1;

}

/* Hero Content */

.hero-content{

    position:relative;

    z-index:5;

    max-width:720px;

    animation:fadeUp 1.2s ease;

}

/* Small Heading */

.hero h4{

    color:var(--gold);

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:20px;

    font-size:17px;

}

/* Main Heading */

.hero h1{

    color:white;

    font-size:68px;

    line-height:1.15;

    margin-bottom:30px;

    text-shadow:0 8px 30px rgba(0,0,0,.4);

}

/* Gold Highlight */

.hero h1 span{

    color:var(--gold);

    display:block;

}

/* Hero Description */

.hero p{

    color:#e5e5e5;

    font-size:18px;

    margin-bottom:45px;

    max-width:620px;

}

/* CTA Buttons */

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/* Floating Gold Button */

.hero .gold-btn{

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

}

/* Decorative Gold Line */

.hero-content::before{

    content:"";

    position:absolute;

    left:-40px;

    top:8px;

    width:6px;

    height:140px;

    background:linear-gradient(var(--gold),transparent);

    border-radius:50px;

}

/* Hero Glow */

.hero::after{

    content:"";

    position:absolute;

    right:-120px;

    top:50%;

    transform:translateY(-50%);

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(
        rgba(201,162,39,.18),
        transparent 70%
    );

    filter:blur(10px);

    z-index:1;

}

/*=========================================
Hero Scroll Indicator
=========================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    z-index:10;

}

.scroll-indicator span{

    display:block;

    width:28px;

    height:46px;

    border:2px solid white;

    border-radius:50px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    width:6px;

    height:6px;

    background:var(--gold);

    border-radius:50%;

    animation:scrollDown 2s infinite;

}

/*=========================================
Animations
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes scrollDown{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translate(-50%,18px);

    }

}

/*=========================================
Hero Image Zoom Effect
=========================================*/

.hero{

    animation:heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

    from{

        background-size:100%;

    }

    to{

        background-size:108%;

    }

}

/*=========================================
Responsive Hero
=========================================*/

@media(max-width:1200px){

.hero h1{

    font-size:58px;

}

}

@media(max-width:992px){

.hero{

    justify-content:center;

    text-align:center;

}

.hero-content{

    max-width:100%;

}

.hero-content::before{

    display:none;

}

.hero-buttons{

    justify-content:center;

}

.hero h1{

    font-size:50px;

}

.hero p{

    margin-left:auto;

    margin-right:auto;

}

}

@media(max-width:768px){

.hero{

    padding:0 8%;

}

.hero h1{

    font-size:42px;

}

.hero h4{

    font-size:14px;

    letter-spacing:3px;

}

.hero p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.gold-btn,

.outline-btn{

    width:100%;

    max-width:300px;

    text-align:center;

}

}

@media(max-width:480px){

.hero h1{

    font-size:34px;

}

.hero{

    padding:0 6%;

}

.hero p{

    font-size:15px;

}

}

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

.features{

    display:grid;

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

    gap:30px;

    margin-top:-90px;

    position:relative;

    z-index:20;

}

/* Feature Card */

.feature-card{

    background:white;

    padding:50px 35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    text-align:center;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

/* Hover Effect Background Glow */

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:radial-gradient(
        circle at top,
        rgba(201,162,39,.15),
        transparent 70%
    );

    opacity:0;

    transition:var(--transition);

}

.feature-card:hover::before{

    opacity:1;

}

/* Hover Lift */

.feature-card:hover{

    transform:translateY(-12px);

}

/* Icons */

.feature-card i{

    font-size:45px;

    color:var(--gold);

    margin-bottom:20px;

    transition:var(--transition);

}

.feature-card:hover i{

    transform:scale(1.15) rotate(-5deg);

}

/* Title */

.feature-card h3{

    font-size:22px;

    margin-bottom:15px;

    color:#111;

}

/* Text */

.feature-card p{

    color:#666;

    font-size:15px;

    line-height:1.6;

}

/* Responsive */

@media(max-width:992px){

.features{

    grid-template-columns:1fr;

    margin-top:-60px;

}

}

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

.about{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/* Image */

.about-image{

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

}

.about-image img{

    transition:1s ease;

}

.about-image:hover img{

    transform:scale(1.08);

}

/* Text */

.about-text h5{

    color:var(--gold);

    letter-spacing:4px;

    margin-bottom:15px;

    font-size:14px;

}

.about-text h2{

    font-size:46px;

    line-height:1.2;

    margin-bottom:25px;

    color:#111;

}

.about-text p{

    margin-bottom:18px;

    color:#555;

}

/* Stats Grid */

.about-grid{

    display:grid;

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

    gap:25px;

    margin-top:35px;

}

.about-grid div{

    background:var(--light);

    padding:30px;

    border-radius:16px;

    text-align:center;

    transition:var(--transition);

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.about-grid div:hover{

    background:var(--gold);

    color:white;

    transform:translateY(-6px);

}

.about-grid h3{

    font-size:32px;

    margin-bottom:5px;

}

/*====================================================
                UTILITY CLASSES
====================================================*/

.text-center{

    text-align:center;

}

.mt-5{

    margin-top:50px;

}

.mb-5{

    margin-bottom:50px;

}

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:0.8s ease;

}

.fade-up.active{

    opacity:1;

    transform:translateY(0);

}

/* Scrollbar */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:50px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

.practice{

    text-align:center;

    background:#f9f9f9;

}

.practice h5{

    color:var(--gold);

    letter-spacing:4px;

    margin-bottom:10px;

}

.practice h2{

    margin-bottom:60px;

}

.practice-grid{

    display:grid;

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

    gap:30px;

}

.practice-card{

    background:white;

    padding:40px;

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.practice-card:hover{

    transform:translateY(-10px);

}

.practice-card i{

    font-size:40px;

    color:var(--gold);

    margin-bottom:20px;

}

.practice-card h3{

    margin-bottom:15px;

}

.practice-card p{

    color:#666;

}

.attorney{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.attorney-content h5{

    color:var(--gold);

    letter-spacing:4px;

    margin-bottom:10px;

}

.attorney-content h2{

    margin-bottom:20px;

}

.attorney-content ul{

    margin:25px 0;

}

.attorney-content li{

    margin-bottom:10px;

    color:#444;

}

.attorney-image img{

    border-radius:20px;

    box-shadow:var(--shadow);

}

.results{

    background:#111;

    color:white;

    text-align:center;

}

.results h2{

    color:white;

}

.results-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.results-grid h3{

    font-size:40px;

    color:var(--gold);

}

.testimonials{

    text-align:center;

}

.testimonial-slider{

    max-width:700px;

    margin:50px auto 0;

    position:relative;

}

.testimonial{

    display:none;

    padding:40px;

    background:white;

    box-shadow:var(--shadow);

    border-radius:18px;

}

.testimonial.active{

    display:block;

}

.testimonial p{

    font-style:italic;

    margin-bottom:20px;

}

.faq{

    background:#f9f9f9;

    text-align:center;

}

.faq h5{

    color:var(--gold);

    letter-spacing:4px;

    margin-bottom:10px;

}

.faq h2{

    margin-bottom:50px;

}

.faq-item{

    max-width:800px;

    margin:0 auto 15px;

    background:white;

    border-radius:12px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

.faq-question{

    width:100%;

    padding:20px;

    border:none;

    background:white;

    text-align:left;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.faq-question:hover{

    color:var(--gold);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

    padding:0 20px;

}

.faq-item.active .faq-answer{

    max-height:200px;

    padding:20px;

}

.contact{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.contact-info h5{

    color:var(--gold);

    letter-spacing:4px;

    margin-bottom:10px;

}

.contact-info h2{

    margin-bottom:20px;

}

.contact-info p{

    margin-bottom:20px;

}

.info p{

    margin-bottom:12px;

    font-weight:500;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:15px;

}

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

    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    font-family:inherit;

    outline:none;

    transition:.3s;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    border-color:var(--gold);

}

.contact-form button{

    background:var(--gold);

    color:white;

    padding:15px;

    border:none;

    border-radius:10px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.contact-form button:hover{

    background:black;

}

.map iframe{

    width:100%;

    height:400px;

    border:none;

    filter:grayscale(20%);

}

footer{

    background:#0d1117;

    color:white;

    text-align:center;

    padding:60px 10%;

}

.footer-logo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin-bottom:15px;

}

.footer-logo i{

    color:var(--gold);

    font-size:30px;

}

.socials{

    margin-top:20px;

}

.socials a{

    display:inline-block;

    margin:0 10px;

    color:white;

    font-size:18px;

    transition:.3s;

}

.socials a:hover{

    color:var(--gold);

}

/*================ MOBILE =================*/

@media(max-width:992px){

.practice-grid{

    grid-template-columns:1fr 1fr;

}

.attorney{

    grid-template-columns:1fr;

}

.contact{

    grid-template-columns:1fr;

}

.results-grid{

    grid-template-columns:1fr 1fr;

}

}

/*================ SMALL TABLETS =================*/

@media(max-width:768px){

.nav-links{

    display:none;

}

.menu-btn{

    display:block;

}

.features{

    grid-template-columns:1fr;

}

.about{

    grid-template-columns:1fr;

}

.practice-grid{

    grid-template-columns:1fr;

}

.hero h1{

    font-size:38px;

}

}

/*================ MOBILE =================*/

@media(max-width:480px){

h2{

    font-size:32px;

}

.hero h1{

    font-size:32px;

}

.gold-btn,
.outline-btn{

    width:100%;

    text-align:center;

}

}

/* Smooth reveal support */
.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* Button hover glow */
.gold-btn:hover{

    box-shadow:0 15px 40px rgba(201,162,39,.4);

}