@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

body {
    font-family: 'Jost', sans-serif;
}

.html5-video-player .video-click-tracking, .html5-video-player .video-stream {
width: 100% !important; height: 100% !important; left: 0px !important; top: 0px;
}

video {
    width: 100% !important; height: 100% !important; left: 0px !important; top: 0px;

}

/* ===== GRADIENT BORDER FRAME ===== */
.grad-frame{
    position:relative;
    background:none;
    padding:15px;
}

.grad-frame::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
    linear-gradient(#C6A664,#C6A664) top/100% 5px no-repeat,
    linear-gradient(#C6A664,#C6A664) right/5px 100% no-repeat,
    linear-gradient(to bottom,#C6A664,transparent) left/5px 100% no-repeat,
    linear-gradient(transparent,transparent) bottom/100% 5px no-repeat;
}

.grad-frame.reverse::before{
    background:
    linear-gradient(transparent,transparent) left/5px 100% no-repeat,
    linear-gradient(#C6A664,#C6A664) bottom/100% 5px no-repeat,
    linear-gradient(to top,#C6A664,transparent) right/5px 100% no-repeat,
    linear-gradient(transparent,transparent) top/100% 5px no-repeat;
}


/* MOBILE ONLY */
@media (max-width:768px){

/* NORMAL FRAME */
.grad-frame::before{
    background:
    /* TOP FULL */
    linear-gradient(#C6A664,#C6A664) top/100% 5px no-repeat,

    /* LEFT FADE DOWN (TOP→0) */
    linear-gradient(to bottom,#C6A664,transparent) left/5px 100% no-repeat,

    /* RIGHT FADE DOWN (TOP→0) */
    linear-gradient(to bottom,#C6A664,transparent) right/5px 100% no-repeat,

    /* BOTTOM NONE */
    linear-gradient(transparent,transparent) bottom/100% 5px no-repeat;
}


/* REVERSE FRAME */
.grad-frame.reverse::before{
    background:
    /* TOP NONE */
    linear-gradient(transparent,transparent) top/100% 5px no-repeat,

    /* LEFT FADE UP (BOTTOM→0) */
    linear-gradient(to top,#C6A664,transparent) left/5px 100% no-repeat,

    /* RIGHT FADE UP (BOTTOM→0) */
    linear-gradient(to top,#C6A664,transparent) right/5px 100% no-repeat,

    /* BOTTOM FULL */
    linear-gradient(#C6A664,#C6A664) bottom/100% 5px no-repeat;
}

}

/* ===== CUSTOM ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    -webkit-animation: fadeInUp 0.8s ease-out forwards;
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.delay-100 { animation-delay: 0.2s; }
.delay-200 { animation-delay: 0.4s; }

/* ===== MARQUEE ANIMATION ===== */
@-webkit-keyframes marquee {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(calc(-50% - 15px)); transform: translateX(calc(-50% - 15px)); }
}
@keyframes marquee {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(calc(-50% - 15px)); transform: translateX(calc(-50% - 15px)); }
}

.review-track {
    display: flex;
    width: max-content;
    gap: 30px;
    -webkit-animation: marquee 40s linear infinite;
    animation: marquee 40s linear infinite;
    padding: 20px 0;
    will-change: transform;
}

@media (hover: hover) {
    .review-track:hover { animation-play-state: paused; }
    .review-card:hover { transform: translateY(-5px); }
}

.review-card {
    flex-shrink: 0;
    width: 310px;
    height: 310px;
    background: white;
    border: 2px solid #3B0A0A;
    border-radius: 15px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 10px 30px rgba(59, 10, 10, 0.1);
    transition: transform 0.3s ease;
}

/* ===== UTILITIES ===== */
/* ===== CUSTOM SCROLLBAR FOR DRAWER ===== */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #FAF5EA;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #C6A664;
    border-radius: 10px;
}

.custom-scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.custom-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@keyframes slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.animate-slide-up {
    animation: slide-up 0.4s ease-out forwards;
}

#mobileMenu.active .mobile-link-anim {
    opacity: 1;
    transform: translateY(0);
}


/* ==============================
   HERO SLIDER — HEIGHT ONLY
   ============================== */

/* Mobile (up to 767px) */
.hero-slider-img {
    width: 100%;
    height: 584px;
    object-fit: cover;
    object-position: center;
}

/* Tablet (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-slider-img {
        height: 700px;
    }
}

/* Desktop (1024px and above) */
@media (min-width: 1024px) {
    .hero-slider-img {
        height: 800px;
    }
}

.custom-checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 180px;
    height: 55px;

    padding: 10px;
    border-radius: 8px;

    background-color: #3B0A0A;
    color: #ffffff;

    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;

    text-decoration: none;
    opacity: 1;
    transition: background-color 0.3s ease;
}

.custom-checkout-btn:hover {
    border: 3px solid #3B0A0A;
    background-color: #C6A664;
    color: #3B0A0A;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}