@font-face{font-family:Product; src:url("../fonts/Product Sans Regular.ttf");}
@font-face{font-family:Luxia; src:url("../fonts/Luxia-Display.otf");}

:root{
    --vh: 1vh;
    --nav-height: 80px;
    /* Palette */
    --bg: #0f0f10;
    --panel: #0b0b0c;
    --text: #3a3838;
    --muted: #ffffff;
    --accent-gold: #d4af37;
    --accent-gold-2: linear-gradient(90deg, rgba(212,175,55,1) 0%, rgba(230,192,86,1) 100%);
    --glass: rgba(255,255,255,0.03);
    /* Typography scale */
    --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    --ff-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --heading-weight: 600;
    --body-weight: 300;
}

/* Keep the nav fixed and reserve space for it using the --nav-height variable */
body{padding-top: calc(var(--nav-height, 80px));}

/* Anchor offset helpers: make browser scrolls and fragment jumps leave the nav visible */
html{scroll-padding-top: calc(var(--nav-height, 80px) + 8px);}

/* Ensure headings used as anchor targets are offset from the top */
h1, h2, h3, h4, h5{
    scroll-margin-top: calc(var(--nav-height, 80px) + 12px);
}

html{margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text);}
body{margin: 0; padding: 0; border: 0; font-family: var(--ff-body); font-weight: var(--body-weight); color: var(--text); background: var(--bg);}

a{color:black !important;}
a:hover, .fa-2x:hover{color: #C8992e !important;text-decoration: none !important;}
.about .nav-item a, .spage .nav-item a{font-weight: bold;padding-bottom: 35px;}
.mva a{font-size: 30px; border-right: 2px solid black;padding: 0px 50px;font-family: Product !important;}
.copy a , .contact a{color: white !important;}
.map a{letter-spacing: .1em !important;}

ul {margin: 0;padding: 0;}
li .active:hover{color: black !important;}


.video-box{
    background: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, rgba(20,20,30,0.95) 100%);
    padding: 12px;
    border-radius: 8px;
    border: 2px solid #d4af37;
    box-shadow: 0 8px 32px rgba(212,175,55,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    margin-bottom: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.video-box:hover{
    box-shadow: 0 12px 48px rgba(212,175,55,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-4px);
    border-color: #e6c200;
}

.video-box::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(212,175,55,0.1), transparent);
    pointer-events: none;
}

.video-box iframe{
    width: 100%;
    height: 240px;
    border-radius: 4px;
    display: block;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(212,175,55,0.4);
}

.page-btn{
    transition: all 0.3s ease;
}

.page-btn:hover{
    border-color: #d4af37;
    color: #d4af37;
}

.prev-btn, .next-btn{
    transition: all 0.3s ease;
}

.prev-btn:hover:not(:disabled), .next-btn:hover:not(:disabled){
    background-color: #d4af37 !important;
    color: #000 !important;
    border-color: #d4af37 !important;
}

.prev-btn:disabled, .next-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

.lux-card{
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,245,0.95) 100%);
    border-left: 4px solid #d4af37;
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.lux-card:hover{
    box-shadow: 0 12px 36px rgba(212,175,55,0.2);
}

.lux-text{
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    letter-spacing: 0.5px;
}

.spage h2{
    color: white;
}



.about{background-image: url('../img/gem.png'); background-repeat: no-repeat;}

.about h2{
    color: var(--muted) !important;
    text-shadow: -1px -1px 1px #111, 2px 2px 1px #2e2a2a;
}

.textw h2{
    color: var(--muted) !important;
    text-shadow: -1px -1px 1px #111, 2px 2px 1px #2e2a2a;
}

.about > .container > .row:first-child p{
    color: var(--muted) !important;
    text-shadow: -1px -1px 1px #111, 1px 1px 1px #2e2a2a;
    font-size: 1.1rem;
}

.about .nav-tabs{
    border-bottom: 2px solid #d4af37;
    margin-bottom: 0;
    background: rgba(255,255,255,0.95);
    padding: 10px 0;
    border-radius: 4px 4px 0 0;
    justify-content: center;
    display: flex;
}

.about .nav-link{
    color: #333 !important;
    border: none !important;
    border-bottom: 3px solid transparent;
    padding: 12px 24px !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.about .nav-link:hover{
    border-bottom-color: #d4af37;
    color: #d4af37 !important;
}

.about .nav-link.active{
    border-bottom-color: #d4af37 !important;
    color: #d4af37 !important;
    background: transparent;
}

.about .tab-content{
    background: rgba(255,255,255,0.98);
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    margin-bottom: 40px;
}

.about .tab-content p{
    font-size: 1.05rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 15px;
    letter-spacing: 0.3px;
}

.about .card{
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-top: 3px solid #d4af37;
}

.about .card:hover{
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(212,175,55,0.25);
}

.about .card img{
    border-radius: 0;
    transition: all 0.3s ease;
}

.about .card:hover img{
    opacity: 0.9;
}

.about .card-text{
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
}

.about h5{
    color: #d4af37;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.guide{
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(245,245,245,0.98) 100%);
    padding: 60px 0;
}

.guide .container{
    max-width: 1200px;
}

.guide h2{
    color: #000;
    margin-bottom: 10px;
    font-family: Luxia;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-shadow: none;
}

.guide > .container > .row:first-child p{
    color: var(--muted) !important;
    text-shadow: -1px -1px 1px #111, 1px 1px 1px #2e2a2a;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-family: Product;
}

.guide-content{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Typography refinements */
h1, h2, h3, h4, h5 {
    font-family: var(--ff-head);
    color: var(--text);
    letter-spacing: 0.02em;
    font-weight: var(--heading-weight);
}
h4, h5{
    color: white;
}

/* Buttons & CTAs */
.btn-rlg {
    background: var(--accent-gold-2);
    color: #0b0b0c;
    border: none;
    box-shadow: 0 6px 18px rgba(13,10,8,0.14);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn-rlg:hover, .btn-rlg:focus { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(13,10,8,0.2); }

/* Hero polish */
header.slider { position: relative; overflow: hidden; }
header.slider::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45)); pointer-events: none; z-index:1; }
.carousel-caption{ z-index:2; text-shadow: 0 4px 18px rgba(0,0,0,0.6); }
.carousel-caption h1{ font-size: 2.4rem; letter-spacing: .08em; }
.carousel-caption p{ color: rgba(255,255,255,0.92); max-width: 720px; }

/* Card & product styling */
.collections .card{ border: 1px solid rgba(212,175,55,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); transition: transform 220ms ease, box-shadow 220ms ease; }
.collections .card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.35); border-color: rgba(212,175,55,0.22); }
.collections .card-body{ background: transparent; }
.collections .card .card-text{ color: var(--text); }

/* Micro-interactions & performance */
img{transition: transform 220ms ease, opacity 220ms ease;}
img:hover{transform: scale(1.01);} 

/* Decorative divider */
.section-divider{ height: 6px; width: 100%; background: linear-gradient(90deg, rgba(212,175,55,0.0), rgba(212,175,55,0.35), rgba(212,175,55,0.0)); margin: 30px 0 10px; }

/* Footer refinements */
.copy{ background: transparent; color: var(--muted); }
.contact{ background: linear-gradient(180deg, rgba(11,11,12,0.98), rgba(10,10,12,0.98)); }

/* Right-align the small footer credit on larger screens; center on mobile */
.copy.web { text-align: right; }
@media (max-width: 576px) {
    .copy.web { text-align: center; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

.guide-text{
    background: rgba(255,255,255,0.95);
    padding: 40px;
    border-left: 4px solid #d4af37;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.guide-text p{
    font-size: 1.05rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
    font-family: Product;
}

.guide-text strong{
    color: #d4af37;
    font-weight: 600;
}

.guide-image{
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(212,175,55,0.2);
    transition: all 0.4s ease;
}

.guide-image:hover{
    transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(212,175,55,0.3);
}

.guide-image img{
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px){
    .guide-content{
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .about .tab-content{
        padding: 25px;
    }
}
.ratings{background-image: url('../img/ratings.jpg'); background-repeat: no-repeat;}
.clients{background-image: url('../img/ratings.jpg'); background-repeat: no-repeat;}
.mva{background-color:#f5f5f5;}

.collections h2,.about h2,.ratings h2,.videos h2, .clients h2, .mva a, .team h2, .spage h2{text-transform: uppercase;font-family:Luxia; letter-spacing: .1em;}
.collections h2{text-shadow: -1px -1px 1px #111, 2px 2px 1px #716f6f;}
.about h2, .ratings h2, .videos h2, .clients h2, .team h2{color: black;}

.collections p, .spage p{font-size: 14px;}
.about p, .ratings p, .videos p, .clients p{font-family:Product;letter-spacing: 0em;font-size: 15px;}
.mva p{font-family:Product;}
.carousel-inner p, .contact p, .copy p{font-family:Product;font-size: 1rem;letter-spacing: 0em;}
.social p{letter-spacing: .1em;font-size: 19px;}

.about h5{letter-spacing: 0.2em;font-size: 1.2rem !important;}

.sbtn, .vbtn, .cbtn, .pbtn{border-radius: 0 !important;font-family:Product;font-size: 1.2rem !important; color: black !important;}
.sbtn{letter-spacing: .1em;}
.sbtn:hover, .cbtn:hover, .pbtn:hover{background-color: #C8992e !important; color: white !important; border: 1px solid #C8992e !important;}
.vbtn:hover{background-color: red !important; color: white !important; border: 1px solid red !important;}
.vbtn, .cbtn{letter-spacing: .3em;}
.cbtn{width: 100% !important;}

.carousel {margin: 0;background: #f5f5f5;position: relative}
.carousel .item {text-align: center;overflow: hidden;}
.carousel .item img {max-width: 100%;margin: 0 auto;}
.carousel-caption h1, .carousel-caption p {color: #fff;display: inline-block;font-family: Luxia;letter-spacing: .1em;text-shadow: none;}
.carousel-caption h1 {background: rgba(0,0,0,0.7);padding: 12px 24px;text-transform: uppercase;}
.carousel-caption p {background: #C8992e;padding: 10px 20px;}
.carousel .nav {background: #f5f5f5;}
.carousel .nav a {color: white;border-radius: 0;font-size: 100%;letter-spacing: .1em;padding: 10px 16px;background: transparent;border-right: 1px solid black;}
.carousel .nav .r{border: 0 !important;}
.carousel .nav .nav-item.active a {color: #fff !important;background: #C8992e;}
.carousel .nav strong {display: block;font-family:Product;font-size: 110%;text-transform: uppercase;}

.carousels {width: 100% !important;}

#multi-item-example{background: transparent;}
.fa-3x{font-size: 50px;color: #C8992e;}


nav{background:rgb(0,0,0,1);border: 0;margin: 0;padding: 10px !important;}
nav{position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1050;}
nav a{color: white !important;}
nav img{width: 240px;}
nav a{font-family:Luxia;text-transform: uppercase;letter-spacing: .2em;}
.navbar-toggler{border: white !important;}

.nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #d4af37 !important;
}

.nav-link.active {
    color: #d4af37 !important;
    font-weight: 600;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 3px;
    background: #d4af37;
}



-------
.gem-section {
  display: flex;
  gap: 40px;
  padding: 30px 0;
  align-items: center;
}

.gem-video-box {
  flex: 1;
}

.gem-thumb {
  width: 100%;
  max-width: 350px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.gem-details {
  flex: 1.2;
}

.video-btn {
  padding: 10px 18px;
  background: black;
  color: white;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

/* Popup */
.video-popup {
  display: none;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.75);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.video-popup-content {
  position: relative;
  width: 80%;
  max-width: 800px;
}

.video-popup video {
  width: 100%;
  border-radius: 12px;
}

.close {
  position: absolute;
  top: -30px;
  right: 0;
  font-size: 30px;
  color: white !important;
  cursor: pointer;
}

.close:hover {
  color: black !important;
}

--------



/* Make each main section fill the visible viewport minus the nav height */
section, .collections, .about, .guide, .spage, .ratings, .videos, .clients, .mva, .contact{
    /*min-height: calc((var(--vh, 1vh) * 100) - var(--nav-height, 80px));*/
    padding-top: 0;
    padding-bottom: 0px;
}

/* Mobile fallback: allow content to size naturally and add top padding so nav won't overlap */
@media (max-width: 992px){
    section, .collections, .about, .guide, .spage, .ratings, .videos, .clients, .mva, .contact{
        min-height: auto;
        padding-top: calc(var(--nav-height, 0px) + -100px);
        padding-bottom: 30px;
    }
    .video-box iframe{max-height: none}
}

.ratings .carousel{background-color: transparent !important;height: 438px !important;}
.ratings .carousel .img-box {width: 200px;height: 200px;margin: 0 auto;border-radius: 50%;}
.ratings .carousel .img-box img {width: 100%;height: 100%;display: block;border-radius: 50%;}
.ratings .carousel .star-rating i {font-size: 18px;color: #ffdc12;}

.counter {background-color:#f5f5f5;padding: 20px 0;border-radius: 5px;}
.count-title {font-size: 40px;font-weight: normal;margin-top: 10px;margin-bottom: 0;text-align: center;}
.count-text {font-size: 13px;font-weight: normal;margin-top: 10px;margin-bottom: 0;text-align: center;}
.fa-2x {margin: 0 auto;float: none;display: table;}

.videos h5{font-size: 15px;}
.videos i{font-size: 45px; color: red;}
.videos span{font-size: 29px; font-family:Luxia;}

.social, .copy{color: white;background-color: black;font-family:Product;}
.social .fa-2x{color: white;}
.social img{width: 80px;}

.contact {color: white;background-color: #15151e;}

.facebook-embed {
    background: rgba(255,255,255,0.08);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #d4af37;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.facebook-embed h5 {
    color: #d4af37;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.map h2{text-align: center;text-transform: uppercase;font-family:Luxia; letter-spacing: .1em;}

.footer_widget > li {display: inline-block;}
.footer_widget a {border: 1px solid #333;border-radius: 6px;color: #888;display: inline-block;font-size: 13px;margin-bottom: 4px;padding: 7px 12px;}

.form-control, .form-control:focus, .input-group-addon {border-color: #e1e1e1;border-radius: 0;}
.signup-form {margin: 0 auto;}
.signup-form form {background: #fff;}
.signup-form .form-group {margin-bottom: 20px;}
.signup-form label {font-weight: normal;font-size: 13px;}
.signup-form .form-control {min-height: 38px;box-shadow: none !important;border-width: 0 0 1px 0;}
.signup-form .input-group-addon {max-width: 42px;text-align: center;background: none;border-width: 0 0 1px 0;padding-left: 5px;}

.scroll-top{
        position: fixed;
        bottom: 18px;
        right: 18px;
        z-index: 1200;
        background: var(--accent-gold-2);
        color: #0b0b0c;
        border: none;
        border-radius: 40px;
        width: 56px;
        height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(13,10,8,0.18);
        padding: 0;
        cursor: pointer;
        font-size: 22px;
        opacity: 0;
        transform: translateY(12px) scale(0.98);
        transition: opacity 220ms ease, transform 220ms ease;
}
.scroll-top.visible{ opacity: 1; transform: translateY(0) scale(1); }
.scroll-top:focus{ outline: 3px solid rgba(212,175,55,0.35); outline-offset: 4px; }
.scroll-top .label{ display: none; }
@media (max-width: 576px){
        .scroll-top{ width: 64px; height: 64px; font-size: 26px; }
}

/* SVG icon sizing inside the return button */
.scroll-top svg.icon-up{ width: 22px; height: 22px; display: block; }
@media (max-width: 576px){
    .scroll-top svg.icon-up{ width: 26px; height: 26px; }
}

/* Subtle gem shine (pseudo-element) and hover sparkle */
.scroll-top::before{
        content: '';
        position: absolute;
        top: 8px;
        left: 10px;
        width: 14px;
        height: 14px;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), rgba(255,255,255,0.15) 40%, transparent 60%);
        border-radius: 50%;
        pointer-events: none;
        opacity: 0.6;
        transform: translateY(-3px) scale(0.95);
        transition: transform 220ms ease, opacity 220ms ease;
}
.scroll-top:hover::before{ transform: translateY(0) scale(1); opacity: 0.95; }

@media (prefers-reduced-motion: reduce){
    .scroll-top::before, .scroll-top:hover::before { transition: none; }
}

/* For non-js fallback, keep it visible */
html.no-js .scroll-top{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
    .scroll-top, .scroll-top.visible { transition: none; }
}

@media only screen and (max-width: 2000px) {
    h2{font-size: 3.5em !important;margin-top:20px !important;}
    .map h2{margin-top:0 !important;}
}
@media only screen and (max-width: 1440px) {
    h2{font-size: 3.5em !important;margin-top:40px !important;}
    .map h2{margin-top:0 !important;}
}

@media only screen and (max-width: 1366px) {
    h2{font-size: 3em !important;margin-top:20px !important;}
    .map h2{margin-top:0 !important;}
    .slider h1{font-size: 46px;}
    .slider p{font-size: 15px;}
    .nav-pills a{font-size: 15px !important;}
}

@media only screen and (max-width: 640px) {
    .slider h1{font-size: 15px;padding: 5px;}
    h2{font-size: 2em !important;}
    .slider p{font-size: 7px;padding: 5px;}
    .nav-pills a{font-size: 7px !important;}
    #vid{padding-bottom: 0rem !important;}
    .mva a {font-size: 20px;padding: 0px 8px;}
    .mva p{font-size: 13px;}
    .clients img{margin-bottom: 30px;}
}

/* Tighter Collections layout on small screens */
@media (max-width: 768px) {
    .collections .card{
        margin-bottom: 12px;
        padding: 6px;
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }
    .collections .card img{
        width: 100%;
        height: calc(var(--nav-height, 0px) + 200px);
        object-fit: cover;
        border-radius: 4px;
    }
    .collections .card-body{
        padding: 10px;
    }
    .collections h3{
        font-size: 1.5rem;
        margin-bottom: 6px;
    }
    .collections .card-text{
        font-size: 0.95rem;
        line-height: 1.4;
        max-height: none;
        margin-bottom: 8px;
    }
    .collections .sbtn{
        padding: .3rem .8rem;
        font-size: .95rem;
    }
}

/* ========== MEDIA QUERY: 375×812 (iPhone X/11/12 mini-like portrait) ========== */
@media (min-width: 300px) and (max-width: 400px) {
    :root { --nav-height: 64px; }

    /* Navbar adjustments for narrow viewport */
    nav { padding: 8px; }
    nav img { width: 200px; height: auto; }
    nav li{font-size: 12px;}

    /* Hero / Carousel caption */
    .carousel-caption { 
        left: 50%; 
        top: 38%;
        transform: translate(-12%, -78%); 
        padding: 0px;
        max-width: 92%;
        text-align: center;
        width: 100%;
    }
    .carousel-caption h1 { 
        font-size: 16px; 
        line-height: 1.15; 
        padding: 0; 
        margin: 0 0 4px 0;
        display: block;
    }
    .carousel-caption p { 
        font-size: 10px; 
        line-height: 1.3;
        padding: 5;
        margin: 0;
        display: block;
    }

    /* Collections grid → 1 column on mobile */
    .collections { 
        padding-top: 8px !important; 
    }
    .collections .col-md-3 { 
        flex: 0 0 100% !important; 
        max-width: 100% !important; 
        margin-bottom: 12px;
    }
    .collections .card { 
        margin-bottom: 10px; 
        padding: 8px;
    }
    .collections .card img { 
        height: 120px; 
        object-fit: cover; 
    }
    .collections .card-body { 
        padding: 8px; 
    }
    .collections h3 { 
        font-size: 1rem; 
        margin: 4px 0;
    }
    .collections .card-text { 
        font-size: 0.85rem; 
        line-height: 1.3;
        margin-bottom: 6px;
    }
    .collections .sbtn { 
        font-size: 0.9rem; 
        padding: 0.3rem 0.6rem;
    }

    /* Hero nav pills → horizontal layout on narrow viewport */
    .carousel .nav { 
        flex-direction: row; 
        gap: 0;
        flex-wrap: nowrap;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #f5f5f5;
    }
    .carousel .nav .nav-item {
        flex: 1 1 25%;
        margin: 0;
    }
    .carousel .nav a { 
        border: none; 
        padding: 8px 4px; 
        font-size: 0.55rem;
        display: block;
        width: 100%;
        text-align: center;
        margin: 0 2px;
        background: #f5f5f5;
        line-height: 1.4;
    }
    .carousel .nav strong {
        display: block;
        font-size: 0.6rem;
        font-family: Product;
        text-transform: uppercase;
    }
    .carousel .nav .nav-item.active a { 
        background: #C8992e; 
        color: #fff;
        width: 100%;
    }

    /* About section → single column */
    .about .nav-tabs { 
        flex-direction: column; 
        gap: 0;
    }
    .about .nav-link { 
        border: none; 
        border-left: 4px solid transparent;
        padding: 10px 12px !important;
        width: 100%;
        text-align: left;
    }
    .about .nav-link.active { 
        border-left-color: #d4af37;
        background: rgba(212,175,55,0.1);
    }
    .about .tab-content { 
        padding: 15px; 
    }
    .about .tab-content p { 
        font-size: 0.9rem; 
        line-height: 1.5;
    }

    /* Guide section → single column */
    .guide-content { 
        grid-template-columns: 1fr !important; 
        gap: 20px;
    }
    .guide-text { 
        padding: 12px; 
    }
    .guide-text p { 
        font-size: 0.9rem; 
        line-height: 1.5;
    }

    /* Video boxes */
    .video-box { 
        padding: 8px; 
        margin-bottom: 12px;
    }
    .video-box iframe { 
        height: 160px; 
    }

    /* Form layout */
    .signup-form { 
        margin: 8px auto; 
    }
    .signup-form .form-control { 
        font-size: 0.9rem; 
        min-height: 32px;
    }
    .signup-form .input-group-addon { 
        font-size: 0.8rem; 
    }
    .signup-form button { 
        font-size: 0.9rem; 
        padding: 0.4rem 0.8rem;
    }

    /* Footer and contact sections */
    .contact { 
        padding: 12px 0; 
    }
    .contact .col-md-3,
    .contact .col-md-4,
    .contact .col-md-5 { 
        flex: 0 0 100% !important; 
        max-width: 100% !important; 
        margin-bottom: 12px;
    }
    .contact h4, .contact h5 { 
        font-size: 1rem; 
    }
    .contact p { 
        font-size: 0.85rem; 
    }

    /* Scroll-to-top button positioning */
    .scroll-top { 
        bottom: 10px; 
        right: 10px; 
        width: 48px; 
        height: 48px; 
        font-size: 20px;
    }
    .scroll-top svg.icon-up { 
        width: 20px; 
        height: 20px; 
    }

    /* Heading sizes for 375 viewport */
    h2 { 
        font-size: 1.6rem !important; 
        margin: 12px 0 !important;
    }
    h3 { 
        font-size: 1.2rem; 
    }
    h4 { 
        font-size: 1rem; 
    }
    h5 { 
        font-size: 0.95rem; 
    }

    /* Ratings carousel */
    .ratings .carousel { 
        height: auto !important; 
    }
    .ratings .carousel .img-box { 
        width: 100px; 
        height: 100px; 
    }
    .ratings .carousel .star-rating i { 
        font-size: 14px; 
    }

    /* General utility margins and padding */
    .container { 
        padding: 8px; 
    }
    .row { 
        margin-left: -4px; 
        margin-right: -4px; 
    }
}
/* ========== END MEDIA QUERY: 375×812 ========== */




        :root{ --rlg-gold: #c59b2f; --rlg-gold-dark: #a67f1f; }
        /* Layout: make video column match description height using flexbox */
        .video-card > .row.no-gutters {
            display: flex;
            align-items: stretch;
        }
        .video-card > .row.no-gutters > .col-6 {
            display: flex;
            flex-direction: column;
        }
        .video-thumb {
            display: flex;
            flex: 1 1 auto;
            height: 370px;
            background: #000; /* fallback behind video */
            border-radius: 0;
            margin-top: 0;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(11, 38, 60, 0.18);
            transition: transform .28s ease, box-shadow .28s ease;
        }
        .video-thumb:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(11,38,60,0.24); }
        .video-details {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 14px;
            margin-left: 12px;
            background: transparent;
            border-radius: 0;
            border: none;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
        }
        .video-thumb .thumb-player {
            width: 100% !important;
            height: 100% !important; /* fill the column to match description */
            object-fit: cover !important;
            display: block !important;
            transition: transform .35s ease;
        }
        .video-thumb:hover .thumb-player { transform: scale(1.03); }

        /* Title and description styling */
        .vd-title { font-family: 'Playfair Display', serif; font-size: 1.05rem; margin-bottom: 6px; color: #0b2b3b; }
        .vd-desc { color: #3b3b3b; margin-bottom: 8px; font-style: italic; }
        .vd-specs { color: #444; margin-bottom: 8px; font-size: 13px;}
        .vd-specs li { margin-bottom: 3px; }
        .vd-specs li strong { color: #222; }
        .vd-long { color: #555; margin-top: 6px; }

        /* Video card wrapper styling: single border around thumb + details */
        .video-card { padding: 10px; border-radius: 12px; background: transparent; border: 1px solid var(--rlg-gold); overflow: hidden; }
        .video-card { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
        .video-card:focus { outline: 2px solid rgba(198,155,47,0.25); }
        .video-card:hover { transform: translateY(-4px); }

        /* Pagination spacing */
        .text-center.mt-4 { margin-bottom: 2.5rem; display:flex; justify-content:center; gap:8px; }
        .text-center.mt-4 .page-btn, .text-center.mt-4 .prev-btn, .text-center.mt-4 .next-btn {
            width:48px; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0; box-sizing:border-box;
        }
        /* Active pagination styled in gold */
        .page-btn.active, .page-btn.active:focus, .page-btn.active:hover {
            background: var(--rlg-gold) !important;
            border-color: var(--rlg-gold) !important;
            color: #fff !important;
            box-shadow: 0 6px 18px rgba(198,155,47,0.18);
        }
        .prev-btn.active, .next-btn.active { background: var(--rlg-gold); border-color: var(--rlg-gold); color: #fff; }

        /* Page title styling (spinellike) */
        .about.spage h2 { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 600; margin-bottom: 6px; }
        .about.spage .card-text { color: #555; margin-bottom: 0; }

        /* Small screens: stack and reduce paddings */
        @media (max-width: 767.98px) {
            .video-card > .row.no-gutters { flex-direction: column; }
            /* ensure inner cols go full-width on small screens */
            .video-card > .row.no-gutters > .col-6 { flex: 0 0 100%; max-width: 100%; }
            /* make video items display in two columns on small screens */
            .video-item { flex: 0 0 50%; max-width: 50%; }
            .video-thumb { border-radius: 8px; height: auto; min-height: 0; }
            /* slightly smaller mobile thumb height to fit screens and remove white gaps */
            .video-thumb .thumb-player { height: 120px !important; }
            .video-details { margin-left: 0; margin-top: 8px; padding: 10px; }
            .video-details .vd-title { font-size: 1rem; }
            .video-details .vd-desc { font-size: 0.95rem; }
            .video-card { padding: 8px; }
            /* pagination: keep buttons on one line; allow horizontal scroll on narrow screens */
            .text-center.mt-4 { display:flex; flex-wrap:nowrap; gap:8px; justify-content:center; margin-bottom:3rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:8px 0; }
            .text-center.mt-4 .page-btn, .text-center.mt-4 .prev-btn, .text-center.mt-4 .next-btn { flex:0 0 auto; width:48px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
        }

        /* small landscape phones / narrow tablets - slightly larger thumbs */
        @media (min-width: 568px) and (max-width: 767.98px) {
            .video-thumb .thumb-player { height: 180px !important; }
        }