.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-9e45104:#FFFFFF;--e-global-color-199b107:#FFFFFF;--e-global-color-e422400:#0B5084;--e-global-color-dd2f939:#FF6B6B;--e-global-color-b3dac84:#FFB56B;--e-global-color-800ea4e:#808080;--e-global-color-b130cf0:#232424;--e-global-color-e72dda9:#0B5084;--e-global-color-5627171:#73C491;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:29px;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:#1F1B1B;font-family:"Poppins", Sans-serif;font-size:18px;font-weight:400;line-height:26px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 p{margin-block-end:25px;}.elementor-kit-6 h1{color:var( --e-global-color-dd2f939 );font-family:"Poppins", Sans-serif;font-size:35px;font-weight:500;letter-spacing:-1px;}.elementor-kit-6 h2{color:var( --e-global-color-800ea4e );font-family:"Poppins", Sans-serif;font-size:22px;}.elementor-kit-6 h4{color:#773699;font-family:"Gotham", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//***********************************************************
 * Sticky Header – Transparent to Solid on Scroll
 * Works with Elementor Pro 3.33.2
 * Target section: .main-header (set in Section → Advanced → CSS Classes)
 ***********************************************************/

/* Base header styles – initial state (top of page, not sticky yet) */
.main-header {
  position: relative;
  width: 100%;
  background-color: transparent;          /* Start fully transparent */
  transition:
    background-color 1s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
  /* Optional: padding for comfortable hit area */
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Optional inner container width & alignment */
.main-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* When Elementor’s sticky effects kick in (after 150px scroll) 
   Elementor automatically adds .elementor-sticky--effects to the section */
.elementor-sticky--effects.main-header {
  background-color: rgba(46, 46, 46, 0.87); /* Solid (or nearly solid) background */
  backdrop-filter: blur(12px);                 /* Nice frosted effect (supported in modern browsers) */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);  /* Subtle shadow to separate header from content */
}

/* Ensure sticky header always sits above page content */
.elementor-sticky--effects.main-header,
.elementor-sticky--active.main-header {
  z-index: 999;
}

/* Optional: different styling for mobile (if header height or color should differ) */
@media (max-width: 767px) {
  .main-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* --- Optional: Change link color once solid --- */

/* Normal (top of page) navigation link color */
.main-header .elementor-nav-menu a {
  color: #ffffff;        /* White over transparent hero image, for example */
  transition: color 0.3s ease;
}

/* Link color after header becomes solid */
.elementor-sticky--effects.main-header .elementor-nav-menu a {
  color: #222222;        /* Dark text over light solid header */
}
/* Smooth scrolling only, no layout changes to body */
html {
  scroll-behavior: smooth;
}

/* Use the main page as the snapping container
   but don't override its height/overflow (Elementor handles that) */
body {
  scroll-snap-type: y mandatory;
}

/* Each full-screen section */
.snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;          /* make snapping more “magnetic” */
  min-height: 100vh;                 /* full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;           /* optional: vertical centering */
}

/* If you have a sticky header, prevent content from hiding under it 
   – set this to your header’s approximate height */
.snap-section {
  scroll-margin-top: 100px;          /* adjust to match header height */
}

/* Optional safety for tiny screens */
@media (max-height: 600px) {
  .snap-section {
    min-height: 600px;
  }
}


/* Each section should fill the viewport and act as a snap point */
.snap-section {
  scroll-snap-align: start;
  min-height: 100vh;
  height: 100vh; /* strong enforcement */
  display: flex;
  flex-direction: column;
  justify-content: center; /* optional: vertically center content */
}

/* Prevent sections from cutting off content on small screens */
@media (max-height: 600px) {
  .snap-section {
    min-height: 600px; /* fallback for tiny screens */
  }
}
.snap-section {
  scroll-margin-top: -30px; /* adjust to your header height */
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://57brands.com/wp-content/uploads/2025/12/poppins-v24-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: ;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://57brands.com/wp-content/uploads/2025/12/poppins-v24-latin-regular-1.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Gotham';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://57brands.com/wp-content/uploads/2025/12/Gotham-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Gotham';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://57brands.com/wp-content/uploads/2025/12/Gotham-Bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */