/* ==========================
   CARDS OF ANARCHY
   STYLE.CSS
========================== */

:root{

    --orange:#d85a00;
    --orange-glow:#ff7b22;
    --cream:#f3e7c3;

    --black:#0b0b0b;
    --dark:#111111;
    --dark2:#181818;

    --white:#ffffff;

}

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

html{
    scroll-behavior:smooth;
}

body{

    background:#0b0b0b;

    color:white;

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

    overflow-x:hidden;
}

/* ==========================
   NAVIGATION
========================== */

.navbar{

    position:sticky;

    top:0;

    z-index:999;

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

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(216,90,0,.4);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 40px;
}

.logo-area img{

    height:55px;

    width:auto;
}

.nav-links{

    display:flex;

    gap:30px;

    list-style:none;
}

.nav-links a{

    color:white;

    text-decoration:none;

    text-transform:uppercase;

    font-weight:500;

    transition:.3s;
}

.nav-links a:hover{

    color:var(--orange);
}

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

.hero{

    min-height:340px;

    background:
    linear-gradient(
        rgba(0,0,0,.60),
        rgba(0,0,0,.82)
    ),
    url('../images/hero_bg.png');

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    position:relative;
}

.hero-content{

    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    padding:30px 50px;
}

.hero-text{

    max-width:800px;
}

.hero h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:5rem;

    line-height:.9;

    color:var(--orange);

    margin-bottom:15px;

    text-shadow:
        0 0 10px rgba(216,90,0,.8),
        0 0 25px rgba(216,90,0,.5);
}

.hero h1 span{

    color:var(--cream);
}

.hero p{

    font-size:1.25rem;

    color:white;

    margin-bottom:25px;

    letter-spacing:1px;
}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

.hero-logo img{

    width:220px;

    filter:
        drop-shadow(0 0 15px rgba(216,90,0,.8))
        drop-shadow(0 0 30px rgba(216,90,0,.6))
        drop-shadow(0 0 60px rgba(216,90,0,.3));
}

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

.btn-primary,
.btn-secondary{

    padding:14px 24px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.btn-primary{

    background:var(--orange);

    color:white;
}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 15px rgba(216,90,0,.6);
}

.btn-secondary{

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

    color:white;
}

.btn-secondary:hover{

    background:rgba(216,90,0,.15);
}

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

.social-section{

    padding:60px 5%;

    background:#101010;
}

.social-section h2{

    text-align:center;

    font-family:'Bebas Neue';

    font-size:3rem;

    color:var(--orange);

    margin-bottom:30px;
}

.social-grid{

    display:grid;

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

    gap:25px;
}

.social-card{

    background:#171717;

    border:1px solid rgba(216,90,0,.4);

    border-radius:12px;

    padding:30px;

    text-align:center;

    transition:.3s;

    text-decoration:none;

    color:white;
}

.social-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 0 20px rgba(216,90,0,.3);
}

.social-card img{

    height:90px;

    margin-bottom:15px;
}

.social-card h3{

    margin-bottom:10px;
}

.social-card p{

    color:var(--orange);
}

/* ==========================
   EVENTS
========================== */

.events-section{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    padding:70px 5%;
}

.calendar-column,
.events-column{

    background:#161616;

    border:1px solid rgba(216,90,0,.3);

    border-radius:12px;

    padding:25px;
}

.events-section h2{

    font-family:'Bebas Neue';

    font-size:2.4rem;

    color:var(--orange);

    margin-bottom:20px;
}

.calendar-wrapper iframe{

    width:100%;

    height:650px;

    border:none;

    border-radius:10px;
}

.event-card{

    background:#202020;

    border-left:4px solid var(--orange);

    padding:18px;

    margin-bottom:15px;

    border-radius:8px;
}

/* ==========================
   INSTAGRAM
========================== */

.instagram-section{

    padding:70px 5%;
}

.instagram-section h2{

    text-align:center;

    font-family:'Bebas Neue';

    font-size:3rem;

    color:var(--orange);

    margin-bottom:25px;
}

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

.about-section{

    padding:70px 5%;

    text-align:center;
}

.about-section h2{

    font-family:'Bebas Neue';

    font-size:3rem;

    color:var(--orange);

    margin-bottom:30px;
}

.family-grid{

    display:grid;

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

    gap:15px;

    margin-bottom:30px;
}

.family-grid img{

    width:100%;

    border-radius:12px;

    transition:.3s;
}

.family-grid img:hover{

    transform:scale(1.03);
}

.about-text{

    max-width:900px;

    margin:auto;

    font-size:1.1rem;

    line-height:1.7;

    color:#ddd;
}

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

.sell-section{

    padding:80px 5%;

    text-align:center;

    background:#111;
}

.sell-section h2{

    font-family:'Bebas Neue';

    font-size:3rem;

    color:var(--orange);

    margin-bottom:20px;
}

.sell-section p{

    max-width:700px;

    margin:auto auto 30px;

    color:#ddd;
}

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

footer{

    background:#080808;

    border-top:1px solid rgba(216,90,0,.3);

    text-align:center;

    padding:40px 20px;
}

footer h3{

    color:var(--orange);

    margin-bottom:10px;
}

footer p{

    margin:5px 0;

    color:#aaa;
}

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

@media(max-width:900px){

    .navbar{

        flex-direction:column;

        gap:15px;
    }

    .nav-links{

        flex-wrap:wrap;

        justify-content:center;
    }

    .hero-content{

        flex-direction:column;

        text-align:center;
    }

    .hero h1{

        font-size:3.2rem;
    }

    .hero-logo img{

        width:180px;
    }

    .social-grid{

        grid-template-columns:1fr;
    }

    .events-section{

        grid-template-columns:1fr;
    }
}