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

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 3;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    /* font-weight: 400 !important; */
}
@media all and (min-width: 992px) {   
    /* Home page starts white */
    .header-home .nav-link { color: #ffffff !important; }
}
@media(max-width: 991px){
    .header-home .nav-link { color: #021227 !important; }
    main {
        margin-top: 0 !important; /* Remove the top margin on mobile */
    }
}

h1, h2, h3, h4, h5, h6, .page-title {
    font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* font-weight: 700 !important; */
    /* text-transform: uppercase; */
}

.footer-contact-details {
    font-size: 14px;
}

/* Smooth transition for the header background */
.header-transition {
    /* background-color: rgba(0, 0, 0, 0.08) !important; */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* --- 1. Header Backgrounds --- */

/* Home page starts transparent */
.header-home {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-bottom: none !important;
}

/* Scrolled state OR Internal pages (White background) */
.header-scrolled {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* --- 2. Logo Toggling --- */

/* Default: Hide the dark logo, show the white one */
.logo-scrolled { display: none !important; }
.logo-transparent { display: block !important; }

/* In the Scrolled state (or on internal pages): Flip them */
.header-scrolled .logo-scrolled { display: block !important; }
.header-scrolled .logo-transparent { display: none !important; }

/* --- 3. Navigation Link Colors --- */

/* Home page starts white */
/* .header-home .nav-link { color: #ffffff !important; } */

/* Scrolled state or Internal pages (Dark text) */
.header-scrolled .nav-link { color: #021227 !important; }

/* Pull the hero section up to sit behind the transparent header */
/* .video-hero {
    margin-top: -158px; 
} */

/* 1. Default State (Transparent Header - White Text) */
.nav-link {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

/* 2. Scrolled State (White Header - Dark Text) */
.header-scrolled .nav-link {
    color: #021227 !important;
}

/* 3. Hover & Active States */
/* Adjust these colors to ensure they are visible on both backgrounds */
.nav-link:hover, 
.nav-link.active, 
.header-scrolled .nav-link:hover {
    /* color: #E32C2B !important;  */
    font-weight: 600 !important;
}

/* 4. Dropdown Items */
/* Usually, dropdown menus have their own white background, so keep text dark */
.dropdown-item {
    color: #021227;
}
.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #666 !important;
}

.hero-vignette {
    /* radial-gradient(shape at position, color stop 1, color stop 2) */
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
}

.custom-animated-button {
    /* Basic Styling */
    -webkit-appearance: none;
    appearance: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05rem;
    text-shadow: none;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    column-gap: 1.125rem;
    padding: .65rem 1.75rem;
    /* border-radius: 4px; */

    /* Smooth Transition */
    transition: background-size .45s cubic-bezier(.785, .135, .15, .86), 
                background-position .45s step-end, 
                color .45s cubic-bezier(.785, .135, .15, .86), 
                border .45s cubic-bezier(.785, .135, .15, .86);
}

.custom-animated-button:hover {
    background-size: 0% 101%, 101% 101%;
    background-position: 0% 0%; /* Matches transform-origin-start */
    border-color: #aaa;
}

.custom-red-button {
    /* Colors */
    color: #ffffff;
    border: 1px solid #E32C2B;
    background-color: transparent;

    /* The Animation Logic (Converted from variables) */
    /* Initial state: Red background covering the button */
    background-image: linear-gradient(#E32C2B, #E32C2B), linear-gradient(transparent, transparent);
    background-size: 101% 101%, 0 101%;
    background-position: 100% 0%; /* Matches transform-origin-end */
    background-repeat: no-repeat;
}

/* Hover State */
.custom-red-button:hover {
    background-color: #ffffff;
    color: #000;
}

.custom-dark-button {
    /* Colors */
    color: #ffffff;
    border: 1px solid #222;
    background-color: transparent;

    /* The Animation Logic (Converted from variables) */
    /* Initial state: Red background covering the button */
    background-image: linear-gradient(#222, #222), linear-gradient(transparent, transparent);
    background-size: 101% 101%, 0 101%;
    background-position: 100% 0%; /* Matches transform-origin-end */
    background-repeat: no-repeat;
}

/* Hover State */
.custom-dark-button:hover {
    background-color: #ffffff;
    color: #000;
}

/* --- INVERTED WHITE BUTTON (Starts White, Slides to Black) --- */
.custom-white-button {
    color: #222;
    border: 1px solid #222;
    background-color: transparent;

    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#222, #222);
    background-size: 101% 101%, 0 101%;
    background-position: 100% 0%;
    background-repeat: no-repeat;
}

/* Hover State */
.custom-white-button:hover {
    background-color: #222;
    color: #ffffff;
}

/* --- ACTIVE / SELECTED STATE --- */
/* We force the button to look like the 'Hover' state permanently */
.custom-white-button.active,
.custom-dark-button.active {
    background-size: 0% 101%, 101% 101% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    /* Optional: Add a thicker border or a different color to show it is 'Selected' */
    border: 1px solid #222;
    box-shadow: inset 0 0 0 2px #222; /* Adds a double-border effect */
}


/* The container for the button */
.slideshow__next-section-button {
    z-index: 10;
    position: absolute;
    /* Half of the button height (22px) so it straddles the line */
    bottom: -22px; 
    left: 50%;
    transform: translateX(-50%);
    border: none;
    padding: 0;
}

/* The container button */
.circle-button,
.circle-button-up {
    width: 44px;
    height: 44px;
    background-color: rgb(239,239,239);
    color: rgb(227,44,43);
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    overflow: hidden; /* This creates the "window" for the slide effect */
    border: none;
    box-shadow: 0 .125rem .625rem rgba(0,0,0, 0.15);
    padding: 0;
}

/* Style the icon size */
.circle-button i,
.circle-button-up i {
    font-size: 1.2rem;
    display: block;
    line-height: 1;
}

/* The animation logic - now targeting the 'i' tag */
.circle-button:hover i {
    animation: icon-slide-out-in 0.4s forwards;
}

.circle-button-up:hover i {
    animation: icon-slide-in-out 0.4s forwards;
}

/* This ensures the screen reader text doesn't take up space in the grid */
.circle-button .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes icon-slide-out-in {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    45% {
        transform: translateY(25px); /* Slides out the bottom */
        opacity: 0;
    }
    46% {
        transform: translateY(-25px); /* Teleports to the top */
        opacity: 0;
    }
    100% {
        transform: translateY(0); /* Slides back to center */
        opacity: 1;
    }
}
@keyframes icon-slide-in-out {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    45% {
        transform: translateY(-25px); /* Slides out the top */
        opacity: 0;
    }
    46% {
        transform: translateY(25px); /* Teleports to the bottom */
        opacity: 0;
    }
    100% {
        transform: translateY(0); /* Slides back to center */
        opacity: 1;
    }
}
/* Ensure the carousel slide can contain absolute elements */
.f-carousel__slide {
    position: relative;
}

.hero-carousel {
    position: relative;
    /* This allows the button to 'pop out' of the bottom */
    overflow: visible !important; 
}

/* Ensure the SVG is centered in the grid */
.circle-button svg {
    display: block;
    margin: 0 auto;
}


#our-collections {
    /* Adjust '158px' to match the actual height of your sticky header */
    scroll-margin-top: 150px; 
}

.text-tw-red {
  color: lab(49.87% 67.57 46.64) !important;
}

.animatedProduct {
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    /* Ensure the image doesn't look blurry during rotation */
    backface-visibility: hidden; 
}

.animatedProduct:hover {
    /* rotate(0deg) assumes you want it perfectly vertical. 
       If it starts at 5deg, you might need to rotate(-5deg) to counter it. 
       We add scale(1.05) to give it that TW Steel premium feel. */
    transform: rotate(-7.25deg) scale(1.05);
}

/* CUSTOM FONT SIZES */
/* body p {
    font-size: 18px !important;
} */
.nav-link {
    font-size: 14px;
}
/* .footer-link {
    font-size: 14px;
} */

h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.2rem;
}
h4 {
    font-size: 1.2rem;
}

h1.page-title {
  font-size: 1.5rem; /* same as h6 */
}


.navbar-nav li a,
#search-button,
.footer li a {
  font-family: "Euclid", Sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.footer li a {
  font-weight: 300;
  font-size: 14px !important;
}

.zoom-block {
  overflow: hidden;
  position: relative;
}

.zoom-block .zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* ensures it fills container */
  transition: transform 0.4s ease;
  display: block;
}

.zoom-block:hover .zoom-img {
  transform: scale(1.05); /* zoom in */
}


.zoom-block .zoom-img-slow {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Define the transition here for both "hover-in" and "hover-out" */
  transition: transform 8s cubic-bezier(.25,.46,.45,.94);
  transform: scale(1); /* Starting state */
}

.zoom-block:hover .zoom-img-slow {
  /* Use the same property defined in the transition */
  transform: scale(1.5); 
  transform-origin: center;
}



/* Add this CSS */
.collection-col img {
    transition: transform 0.4s; /* Smooth transition for movement */
}

.collection-col a:hover img {
    transform: translateY(5px); /* Moves the image down 5px on hover */
}

/* Base link styling */
.nav-tabs .tab-link.tab-underline {
    border: none !important;
    background: transparent !important;
    color: #666;
    position: relative; /* Required for the pseudo-element to anchor */
    padding-bottom: 12px; /* Space for the underline */
}


/* Create the underline, but keep it hidden/width-0 by default */
.nav-tabs .tab-link.tab-underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Centers the underline */
    height: 2px;
    width: 3; /* Hidden initially */
    background-color: #e32c2b;
    transition: width 0.3s ease; /* Optional: adds a nice growth animation */
}

/* Active State: Define the specific length here */
.nav-tabs .tab-link.tab-underline.active {
    color: #000 !important;
    font-weight: 600 !important;
}

.nav-tabs .tab-link.tab-underline.active::after {
    width: 50%; /* Change this to 40px, 80%, etc., for exact length */
}


.tw-dark {
    color: #222 !important;
    /*#021227*/
}
.bg-tw-dark {
    background-color: #222 !important;
}
.bg-tw-red {
    background-color: #E32C2B !important;
}
 

.text-tw-dark {
    color: #222 !important;
}
.border-tw-dark {
    border-color: #222 !important;
}
.btn-tw-dark {
  /*color: #fff;*/
  /*background-color: #002245;*/
  border-color: #222;
}
.btn-tw-dark:hover {
  color: #fff;
  background-color: #222; /* darker version of base */
  border-color: #222;
}
.btn-tw-dark:focus,
.btn-tw-dark.focus {
  color: #fff;
  background-color: #222;
  border-color: #222;
  box-shadow: 0 0 0 0.25rem rgba(3, 31, 68, 0.5);
}
.btn-tw-dark:active,
.btn-tw-dark.active,
.show > .btn-tw-dark.dropdown-toggle {
  color: #fff;
  background-color: #222;
  border-color: #222;
}
.btn-tw-dark:active:focus,
.btn-tw-dark.active:focus,
.show > .btn-tw-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);
}
.btn-tw-dark.disabled,
.btn-tw-dark:disabled { 
  color: #fff;
  background-color: #222;
  border-color: #222;
  opacity: 0.65;
}

.btn-tw-dark-inverted {
  color: #fff;                  /* dark blue text */
  background-color: #222;          /* white background */
  border-color: #222;           /* dark blue border */
}

.btn-tw-dark-inverted:hover {
  color: #222;                     /* invert to white text */
  background-color: #fff;       /* dark blue background */
  border-color: #222;
}

.btn-tw-dark-inverted:focus,
.btn-tw-dark-inverted.focus {
  color: #fff;
  background-color: #222;
  border-color: #222;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);
}

.btn-tw-dark-inverted:active,
.btn-tw-dark-inverted.active,
.show > .btn-tw-dark-inverted.dropdown-toggle {
  color: #222;                     /* invert to white text */
  background-color: #fff;       /* dark blue background */
  border-color: #222;
}

.btn-tw-dark-inverted:active:focus,
.btn-tw-dark-inverted.active:focus,
.show > .btn-tw-dark-inverted.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);
}

.btn-tw-dark-inverted.disabled,
.btn-tw-dark-inverted:disabled { 
  color: #222;                  /* keep dark blue text */
  background-color: #fff;          /* keep white bg */
  border-color: #222;
  opacity: 0.65;
}


.bg-luxco-gradient {
  background: linear-gradient(to bottom, #001b45 60%, #000a1a);
}
.bg-luxco-gradient-dark {
  background: linear-gradient(to bottom, #000a1a 5%, #001b45);
}
.text-luxco-gold {
    color: #e5d0b1 !important;
}
.text-luxco-blue {
    color: #001b45 !important;
}

/* Custom Luxco Gold Button */
.btn-luxco-gold {
    color: #000; /* Text color, adjust for contrast */
    background-color: #e5d0b1;
    border: 1px solid #d2b98f; /* Slightly darker border for depth */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-luxco-gold:hover,
.btn-luxco-gold:focus {
    background-color: #d2b98f; /* Darker shade on hover */
    color: #000; /* Keep text readable */
    transform: translateY(-2px); /* Subtle lift effect */
}

.btn-luxco-gold:active {
    background-color: #c9a872; /* Even darker on click */
    transform: translateY(0);
}

.btn-luxco-gold:disabled {
    background-color: #f0e1cc; /* Lighter disabled color */
    border-color: #e5d0b1;
    color: #aaa;
    cursor: not-allowed;
}

/* Start invisible */
.collection-overlay {
    opacity: 1;
    transition: opacity 0.3s ease;
    background-color: rgba(0, 0, 0, 0.5) !important; /* Fixed dark tint */
}

/* Show on hover */
.position-relative:hover .collection-overlay {
    opacity: 0;
}

/*
a.nav-link { color: #fff !important; }
a.nav-link:hover, a.nav-link.active, .dropdown-item:hover { color: #666 !important; }
*/

a.link-body-emphasis { color: #021227 !important; }
a.link-body-emphasis:hover { color: #b8a484 !important; }


a.nav-link.animated,
a.footer-link.animated {
  position: relative;
  text-decoration: none;
  color: inherit;
  padding-bottom: 4px; /* for spacing from underline */
}

/* Create the animated underline */
a.nav-link.animated::after,
a.footer-link.animated::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0; /* Start drawing from the right side */
  width: 0;
  height: 2px; /* thickness of underline */
  background-color: #E32C2B;
  transition: width 0.3s ease, right 0.3s ease;
}

/* On hover - grow underline from right to left */
a.nav-link.animated:hover::after,
a.footer-link.animated:hover::after {
  width: 50%; /* adjust this to control underline length */
  right: 50%; /* keeps the animation from right to left */
}

a.nav-link.draw-center,
.tab-link.draw-center {
  position: relative;
  display: inline-block;
}

a.nav-link.draw-center::after,
.tab-link.draw-center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #E32C2B;
  transform: translateX(-50%);
  transition: width 0.4s ease;
}

a.nav-link.draw-center:hover::after,
.tab-link.draw-center:hover::after {
  width: 100%;
}


.dropdown-item.active, .dropdown-item:active {
    color: #021227 !important; /*var(--bs-dropdown-link-active-color);*/
    text-decoration: none;
    background-color: unset !important; /*var(--bs-dropdown-link-active-bg);*/
    font-weight: bold !important;
}
/*
.dropdown-menu {
  margin-top: 15px !important;
}
*/

/* ===== Desktop (≥992px) — Show on hover ===== */
@media (min-width: 992px) {
  .dropdown:hover > .dropdown-menu, .mega-dropdown:hover > .dropdown-menu {
    display: block;
  }

  .mega-dropdown .dropdown-menu {
    display: none; 
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    padding-top: 0.5rem;
  }
}


/*
@media (max-width: 991.98px) {
  .mega-dropdown .dropdown-menu {
    display: none;
    position: static;
    width: 100%;
    box-shadow: none;
    padding: 1rem;
  }

  .mega-dropdown .dropdown-menu.show {
    display: block;
  }

  .mega-dropdown:hover > .dropdown-menu {
    display: none !important;
  }
}
*/


/* ===== Common Styling ===== */
.mega-dropdown .dropdown-menu {
  transition: all 0.3s ease;
}



/* General hover effect for top-level links */
ul.footer > li > a.footer-link:hover,
ul.footer > li > a.footer-link.active { 
    font-weight: 600 !important;
}

/* Disable hover effect only for the ones with .no-hover */
ul.footer > li > a.footer-link.no-hover:hover,
ul.footer > li > a.footer-link.no-hover.active {
    color: #002245 !important;
    font-weight: normal !important;
}

/* Hover effect for nested items */
ul.footer ul li a.footer-link:hover,
ul.footer ul li a.footer-link.active { 
    color: #002245 !important; 
    font-weight: bold !important; 
}
.bg-gradient-reverse {
    background-image: var(--bs-gradient) !important;
    transform: scaleY(-1);
}
.bg-body-tertiary {
    --bs-bg-opacity: 1;
    background-color: rgba(43,48,53,1) !important;
    color:#dee2e6 !important;
}
.accordion-button:not(.collapsed) { 
    box-shadow: none; 
    background-color: rgba(43,48,53,1) !important;
    color:#dee2e6 !important;
}
.accordion-button.collapsed { 
    box-shadow: none; 
} 
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

}	
/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media(max-width: 991px){
  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
    overflow-y: auto;
      max-height: 90vh;
      margin-top:10px;
  }
}
/* ============ mobile view .end// ============ */

.top-10 {
  top: 10% !important;
}
.top-20 {
  top: 20% !important;
}
.top-30 {
  top: 30% !important;
}
.top-40 {
  top: 40% !important;
}
.w-5 {
  width: 5% !important;
}
.w-8 {
  width: 8% !important;
}
.w-10 {
    width: 10% !important;
}
.w-20 {
    width: 20% !important;
}
.w-30 {
    width: 30% !important;
}
.w-40 {
    width: 40% !important;
}
.navbar-toggler:focus {
  /*box-shadow: 0 0 0 0.15rem rgba(229, 208, 177, 0.7);  subtle Luxco gold glow */
  box-shadow: none !important; /* Bootstrap uses box-shadow, not outline */
  outline: none !important;
}

.custom-hr {
  /* Remove default Bootstrap transparency */
  opacity: 1 !important; 
  
  /* Set the line thickness and color */
  border: 0;
  border-top: 3px solid #E32C2B;
  
  /* Alignment logic */
  margin-left: 0;
  display: block; /* Standard hr behavior */
}

.custom-hr::before {
  content: "";
  flex: 1;                  /* line expands to fill space */
  border-top: 3px solid #E32C2B;
  margin: 0 10px;           /* space between line and image */
}

.custom-hr img {
  /* width: 16px; */
  /* height: 16px; */
  display: block;
}

/* 1. Set the initial state of the HR */
.custom-hr.animated {
  background-color: #E32C2B;
  border: none;
  height: 3px;
  opacity: 1; /* Reset Bootstrap's default opacity */
  transition: width 0.4s ease; /* Smoothly animate the width */
  margin-left: auto;
  margin-right: auto;
}

/* 2. When the parent link is hovered, grow the HR inside it */
a:hover .custom-hr.animated {
  width: 20% !important; /* Forces it to override the inline style */
}



.video-responsive-container {
    /* Required for the aspect ratio padding trick */
    position: relative;
    
    /* Set the container to take full width up to the max-width (1320px) */
    width: 100%;
    
    /* This padding is the 'magic' that sets the height based on the width.
       For a 16:9 ratio, it is (9 / 16) * 100 = 56.25% */
    padding-bottom: 56.25%; /* (Height / Width) * 100 = (742 / 1320) * 100 ≈ 56.21% */
    
    /* Hide any overflow caused by the iframe potentially bleeding out */
    overflow: hidden; 
}

.video-responsive-container iframe {
    /* Position the iframe absolutely to cover the padded area */
    position: absolute;
    top: 0;
    left: 0;
    
    /* Make the iframe fill the entire container */
    width: 100%;
    height: 100%;
}

/* Update the responsive container class */
.youtube-lite {
    position: relative;
    width: 100%;
    /* 16:9 Aspect Ratio */
    padding-bottom: 56.25%; 
    overflow: hidden; 
    cursor: pointer;
    background-size: cover;
    background-position: center;
    max-width: 1320px; /* From your previous code */
    /* Add a transition for a smoother visual effect */
    transition: filter 0.2s ease-in-out; 
}

/* Play button styling (simple circle with a triangle) */
.youtube-lite .playbtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: #ff0000e0;
    border-radius: 50%;
}
.youtube-lite .playbtn:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid #fff;
    margin-left: 2px;
}

/* Once clicked, hide the button and replace with iframe */
.youtube-lite.active {
    cursor: auto;
}
.youtube-lite.active .playbtn {
    display: none;
}