/* ==========================================================
   ODILLE'S CRAFTS
   Global Stylesheet
   Project Protea v1.0
========================================================== */
/* ---------- Google Fonts ---------- */
:root{
    --primary:#C8A165;
    --primary-dark:#A8844E;
    --cream:#F8F5F1;
    --sand:#EFE7DD;
    --white:#FFFFFF;
    --charcoal:#463F39;
    --grey:#6E6A66;
    --shadow:0 12px 35px rgba(0,0,0,.08);
    --radius:16px;
    --transition:.35s ease;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:'Poppins',sans-serif;
    color:var(--charcoal);
    background:var(--cream);
    line-height:1.8;
    overflow-x:hidden;
}
/* ==========================
Typography
========================== */
h1,h2,h3,h4,h5{
    font-family:'Playfair Display',serif;
    font-weight:600;
    color:var(--charcoal);
}
.section-label{
    display:inline-block;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--primary);
    font-size:.8rem;
    margin-bottom:12px;
}
.section-title{
    font-size:2.6rem;
    margin-bottom:20px;
}
.section-description{
    max-width:700px;
    margin:auto;
    color:var(--grey);
}
/* ==========================
Navigation
========================== */
.custom-navbar{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    transition:.4s;
    padding:1px 0;
}
.navbar-brand img{
    transition:.4s;
}
.nav-link{
    color:var(--charcoal);
    margin:0 12px;
    font-weight:500;
    transition:var(--transition);
}
.nav-link:hover{
    color:var(--primary);
}
/* ==========================
Buttons
========================== */
.btn{
    border-radius:40px;
    padding:14px 34px;
    transition:var(--transition);
    font-weight:500;
}
.btn-gold{
    background:var(--primary);
    color:#fff;
    border:none;
}
.btn-gold:hover{
    background:var(--primary-dark);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(0,0,0,.15);
}
.btn-outline-gold{
    border:2px solid var(--primary);
    color:var(--primary);
    background:white;
}
.btn-outline-gold:hover{
    background:var(--primary);
    color:white;
}
/* ==========================
Hero
========================== */
.hero-section{
    position:relative;
    background:url("../images/hero1.mp4") center center/cover;
    min-height:100vh;
    display:flex;
    align-items:center;
}
.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.38);
}
.hero-section .container{
    position:relative;
    z-index:5;
}
.hero-subtitle{
    letter-spacing:4px;
    color:white;
    text-transform:uppercase;
}
.hero-title{
    color:white;
    font-size:4rem;
    margin:20px 0;
}
.hero-text{
    color:#F4F4F4;
    font-size:1.15rem;
    max-width:650px;
    margin-bottom:40px;
}
.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}
.scroll-indicator{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    color:white;
}
.mouse{
    width:28px;
    height:48px;
    border:2px solid white;
    border-radius:20px;
    margin:auto;
    margin-top:10px;
}
.wheel{
    width:5px;
    height:10px;
    background:white;
    margin:auto;
    margin-top:8px;
    border-radius:20px;
    animation:scrollWheel 2s infinite;
}
@keyframes scrollWheel{
    0%{
        opacity:1;
        transform:translateY(0);
    }
    100%{
        opacity:0;
        transform:translateY(15px);
    }
}
/* ==========================
Feature Cards
========================== */
.feature-card{
    background:white;
    border-radius:var(--radius);
    padding:40px 30px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:var(--transition);
    height:100%;
}
.feature-card:hover{
    transform:translateY(-8px);
}
.feature-icon{
    font-size:2.5rem;
    margin-bottom:20px;
}
/* ==========================
Collection Cards
========================== */
.collection-card{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
}
.collection-card img{
    width:100%;
    transition:1s;
}
.collection-card:hover img{
    transform:scale(1.08);
}
.collection-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,.65),
        rgba(0,0,0,.05));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:35px;
    color:white;
}
/* ==========================
Product Cards
========================== */
.product-card{
    background:white;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.35s;
    height:100%;
}
.product-card:hover{
    transform:translateY(-8px);
}
.product-card img{
    width:100%;
}
.product-content{
    padding:30px;
}
.product-category{
    color:var(--primary);
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:2px;
}
/* ==========================
Gallery
========================== */
.gallery-image{
    transition:.6s;
    cursor:pointer;
}
.gallery-image:hover{
    transform:scale(1.04);
}
/* ==========================
Testimonials
========================== */
.testimonial-card{
    background:white;
    padding:60px;
    border-radius:var(--radius);
    text-align:center;
    box-shadow:var(--shadow);
}
.testimonial-text{
    font-size:1.2rem;
    font-style:italic;
}
/* ==========================
Newsletter
========================== */
.newsletter-box{
    background:white;
    padding:70px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
/* ==========================
Footer
========================== */
.site-footer{
    background:#35312E;
    color:#DDD;
    padding:90px 0 30px;
}
.site-footer h5{
    color:white;
    margin-bottom:25px;
}
.footer-links{
    list-style:none;
    padding:0;
}
.footer-links li{
    margin-bottom:12px;
}
.footer-links a{
    color:#DDD;
    text-decoration:none;
    transition:.3s;
}
.footer-links a:hover{
    color:var(--primary);
}
.site-footer hr{
    border-color:rgba(255,255,255,.1);
    margin:50px 0 30px;
}
/* ==========================
Responsive
========================== */
@media(max-width:992px){
.hero-title{
font-size:3rem;
}
.section-title{
font-size:2rem;
}
}
@media(max-width:768px){
.hero-title{
font-size:2.3rem;
}
.hero-buttons{
flex-direction:column;
}
.newsletter-box{
padding:40px 25px;
}
}
/* ===========================================
Animations
=========================================== */
.hidden{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}
.show{
    opacity:1;
    transform:translateY(0);
}
/* ===========================================
Navbar Scroll
=========================================== */
.navbar-scrolled{
    padding:12px 0;
    background:rgba(255,255,255,.98);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
/* ===========================================
Back To Top
=========================================== */
.back-to-top{
    position:fixed;
    right:25px;
    bottom:25px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#C8A165;
    color:white;
    font-size:22px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:9999;
}
.back-to-top.show{
    opacity:1;
    visibility:visible;
}
.back-to-top:hover{
    transform:translateY(-4px);
    background:#A8844E;
}
/* ===========================================
   Floating WhatsApp
=========================================== */
.whatsapp-float{
position:fixed;
right:25px;
bottom:90px;
width:65px;
height:65px;
background:#25D366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 12px 30px rgba(0,0,0,.25);
z-index:9999;
transition:.35s;
text-decoration:none;
}
.whatsapp-float:hover{
transform:translateY(-6px) scale(1.05);
box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.footer-links{
list-style:none;
padding:0;
margin:0;
}
.footer-links li{
margin-bottom:10px;
}
.footer-links a{
color:white;
text-decoration:none;
opacity:.85;
transition:.3s;
}
.footer-links a:hover{
opacity:1;
padding-left:6px;
}
/* ===========================================
   Image Lightbox
=========================================== */
.lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.92);
justify-content:center;
align-items:center;
z-index:10000;
padding:40px;
}
.lightbox img{
max-width:95%;
max-height:90%;
border-radius:16px;
box-shadow:0 25px 60px rgba(0,0,0,.45);
animation:zoomIn .3s ease;
}
.lightbox-close{
position:absolute;
top:25px;
right:35px;
font-size:48px;
color:#fff;
cursor:pointer;
line-height:1;
}
@keyframes zoomIn{
from{
opacity:0;
transform:scale(.85);
}
to{
opacity:1;
transform:scale(1);
}
}
.gallery-image{
cursor:pointer;
transition:.4s;
border-radius:18px;
}
.gallery-image:hover{
transform:scale(1.03);
box-shadow:0 20px 45px rgba(0,0,0,.18);
}
/* ===========================================
   Loading Screen
=========================================== */
#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#F8F5F0;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:opacity .8s ease, visibility .8s ease;
}
#loader.hide{
opacity:0;
visibility:hidden;
}
.loader-content{
text-align:center;
}
.loader-logo{
width:150px;
animation:logoFloat 2s ease-in-out infinite;
}
.loader-line{
width:120px;
height:3px;
background:#C8A165;
margin:30px auto;
border-radius:10px;
overflow:hidden;
position:relative;
}
.loader-line::after{
content:"";
position:absolute;
left:-100%;
top:0;
height:100%;
width:100%;
background:white;
animation:loading 1.8s infinite;
}
.loader-text{
font-family:'Poppins',sans-serif;
letter-spacing:3px;
font-size:.85rem;
color:#777;
text-transform:uppercase;
}
@keyframes loading{
0%{
left:-100%;
}
100%{
left:100%;
}
}
@keyframes logoFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-10px);
}
}
.filter-btn{
margin-right:10px;
margin-bottom:10px;
}
.product-item{
transition:.4s ease;
}
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes video behave like background */
  z-index: -1;       /* push behind content */
}