/*
Theme Name: NOO JobMonster Child Theme
Theme URI: http://nootheme.com/
Author: NooTheme
Author URI: http://nootheme.com/
Description: This is a custom child theme for NOO JobMonster
Template: noo-jobmonster
Version: 1.0.0
Tags: two-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, sticky-post, theme-options, translation-ready
Text Domain: noo
*/

/** own style begins  **/

/*<!-- cl-drag  handle & conntainer starts -->
<div class="cl-drag-handle">
<div id="cl-drag-container">
<!-- Enter Code below  -->  */

/* Chat popup container */
#cl-drag-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: transparent;
    padding: 10px;
    margin: 0;
    touch-action: none; /* Prevent scrolling interference on mobile */
}

/* Style for the draggable handle */
.cl-drag-handle {
    cursor: grab;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 50%;
    display: inline-block;
}

.cl-drag-handle:active {
    cursor: grabbing;
}

/*script in the footer */

/*<!-- Enter Code Above -->
</div> </div>
<!-- cl-drag  handle & conntainer ends --> */


/* seocss starts */

/* ConnectLabours brand colors only

- #26472c (Dark Green)
- #024f2b (Deep Green)
- #f4ae0b (Gold)
- #AAB03C (Light Green)
- #F9A620 (Amber)
- #FFD449 (Yellow)
- #000000 (Black)
- #ffffff (White)

*/

/* ==========================================================================
   ConnectLabours - Optimized Global CSS (2025+)
   ========================================================================== */

/* ============================= */
/* Root & Theming Variables      */
/* ============================= */
:root {
  --color-dark-green: #26472c;
  --color-deep-green: #024f2b;
  --color-gold: #f4ae0b;
  --color-light-green: #AAB03C;
  --color-amber: #F9A620;
  --color-yellow: #FFD449;
  --color-black: #000000;
  --color-white: #ffffff;


--color-day-bg: linear-gradient(
  circle at top center,
  #f4ae0b 0%,      /* bright golden core */
  #f9a620 25%,     /* deep amber warmth */
  #f5e0a7 60%,     /* soft buttery fade */
  #ffffff 100%     /* light airy white */
);


  --color-night-bg: radial-gradient(
  circle at bottom center,
  #024f2b 0%,        /* deep green core (moon glow) */
  #26472c 40%,       /* softer green spreading */
  #0a1a0f 80%,       /* very dark green fading */
  #000000 100%       /* space black at the top */
);



  --color-day-text: #111111;
  --color-night-text: #f4ae0b;

  --cursor-color: var(--color-gold);
  --glass-bg-day: rgba(255, 255, 255, 0.65);
  --glass-bg-night: rgba(0, 0, 0, 0.35);
  --glass-blur: blur(14px);
  --glow-color-night: rgba(244, 174, 11, 0.4);
  --glow-color-day: rgba(249, 166, 32, 0.5);

  --transition-speed: 0.4s ease;

  --step--1: clamp(0.875rem, 0.8rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1rem + 0.6vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.4vw, 2.25rem);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 6px color-mix(in srgb, var(--color-black) 10%, transparent);
  --shadow-md: 0 4px 12px color-mix(in srgb, var(--color-black) 15%, transparent);
  --shadow-lg: 0 8px 24px color-mix(in srgb, var(--color-black) 20%, transparent);
  --ring-color: color-mix(in srgb, var(--color-gold) 60%, transparent);
}

/* ==========================================================================
   Global Reset, Accessibility (A11y) & UX Baseline
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: var(--step-0);
   background: var(--color-night-bg);
  color: var(--color-night-text);
  transition: background var(--transition-speed), color var(--transition-speed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

body.light-mode {
  background: var(--color-day-bg);
  color: var(--color-day-text);
  --cursor-color: var(--color-amber);
}

/* Accessibility: Motion + Focus */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-block-end: 1rem;
  color: var(--color-gold);
  transition: color var(--transition-speed);
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
body.light-mode h1, body.light-mode h2, body.light-mode h3 { color: var(--color-yellow); }

p {font-size: 1rem; }
a { color: var(--color-amber); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--color-gold); }

/* ==========================================================================
   Layout
   ========================================================================== */
.container { width: 90%; max-width: 1200px; margin-inline: auto; }
.site-header { position: sticky; top: 1rem; z-index: 1000; padding-block: 1rem; }
main { padding-block: 1rem; }
section { padding-block: 1rem; margin-block: 2rem; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
 
 }

 

body.light-mode .navbar {
  background:var(--color-yellow);
}

body.dark-mode .navbar {
  background:var(--color-black);
}


.logo {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-gold);
  transition: color var(--transition-speed);
}

body.light-mode .logo {
  color: var(--color-dark-green);
}

.navbar a {
  font-weight: 600;
  padding: 0.5rem 1rem;
  position: relative;
  border-radius: var(--radius-sm);
}

.navbar a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-gold);
  transition: width 0.3s ease;
}

.navbar a:hover::after,
.navbar a:focus::after {
  width: 100%;
}

/* Blog Post Specifics */
.main-content {
  transition: background var(--transition-speed), color var(--transition-speed);
		  width: 100%;
  padding: 0.75rem;
   border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
   background-color: var(--color-white) !important;
  color: var(--color-black) !important;
}



/* 🌞 Light mode for main-content and all its children 
body.light-mode .main-content,
body.light-mode .main-content * {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
}

/* ✅ Keep proper styling for inputs, textarea, select in light mode 
body.light-mode .main-content input,
body.light-mode .main-content textarea,
body.light-mode .main-content select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--color-light-green);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
}

body.light-mode .main-content input:focus,
body.light-mode .main-content textarea:focus,
body.light-mode .main-content select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 4px var(--ring-color);
  outline: none;
}


/*
/* Dark mode for main-content and all its children 
body.dark-mode .main-content,
body.dark-mode .main-content * {
  background: var(--color-deep-green) !important;
  color: var(--color-gold) !important;
}
*/
/* ==========================================================================
   Buttons & Forms
   ========================================================================== */
button {
  padding: 0.8rem 1.8rem;
  border: 1px solid var(--color-gold);
  border-radius: 50px;
  background-color: transparent;
  color: var(--color-gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

button:hover, .btn:focus-visible {
  color: var(--color-deep-green);
  background-color: var(--color-gold);
  box-shadow: 0 0 20px var(--glow-color-night);
  transform: translateY(-3px);
}

body.light-mode button {
  border-color: var(--color-deep-green);
  color: var(--color-black);
}

body.light-mode button:hover,
body.light-mode button:focus-visible {
  color: var(--color-white);
  background-color: var(--color-amber);
  border-color: var(--color-amber);
  box-shadow: 0 0 25px var(--glow-color-day);
}

button:disabled {
  background-color: var(--color-light-green);
  color: var(--color-white);
  border-color: var(--color-light-green);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

input, textarea, select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--color-light-green);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--color-white);
  color: var(--color-black);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 4px var(--ring-color);
  outline: none;
}

/* ==========================================================================
   Glassmorphism Card
   ========================================================================== */
.glass-card {
  background: var(--glass-bg-night);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-lg);
  padding: clamp(1rem, 5vw, 2.5rem);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

body.light-mode .glass-card {
  background: var(--glass-bg-day);
  border: 1px solid rgba(0,0,0,0.1);
}

.glass-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 0 20px var(--glow-color-night);
}

body.light-mode .glass-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.2), 0 0 25px var(--glow-color-day);
}

/* ==========================================================================
   Animations & Effects
   ========================================================================== */
@media (pointer: fine) {
  #cursor, .cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    border-radius: 50%;
    transition: transform 0.1s ease-out, opacity 0.3s;
    will-change: transform;
  }
  #cursor {
    width: 8px;
    height: 8px;
    background: var(--cursor-color);
  }
  .cursor-follower {
    width: 20px;
    height: 20px;
    border: 1px solid var(--cursor-color);
  }
}

.ripple {
  position: fixed;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 9999;
  animation: rippleEffect 0.6s ease-out;
  will-change: transform, opacity;
}

@keyframes rippleEffect {
  to {
    transform: translate(-50%, -50%) scale(10);
    opacity: 0;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767.98px) {
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
  .navbar ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
  }
}

/* ==========================================================================
   Third-Party Overrides
   ========================================================================== */
.goog-te-banner-frame, body > .skiptranslate, .goog-te-banner-frame.skiptranslate { display: none !important; }
html, body { margin-top: 0px !important; }

/*seocss ends */

/* newcss starts */

/* --------------------------------
   Helpers
--------------------------------- */
.help-block {
  padding: 0.625rem;
  color: var(--color-day-text);
}

/* --------------------------------
   Benefits Section
--------------------------------- */
.benefit i {
  text-align: center;
  padding: 1.25rem;
  margin: 0;
  transition: transform var(--transition-speed), color var(--transition-speed), background-color var(--transition-speed);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-gold);
  background-color: var(--color-deep-green);
  inline-size: 100%;
  border-radius: 50%;
}
.benefit i:hover,
.benefit i:focus-visible,
.benefit i:focus {
  transform: scale(1.15);
  color: var(--color-yellow);
  outline: 3px solid var(--color-yellow);
  outline-offset: 4px;
}

/* --------------------------------
   About Us — Our Promise
--------------------------------- */
.bodyconnectlabourspromise {
  font-family: Arial, sans-serif;
  color: var(--color-dark-green);
  margin: 0;
  padding: 0;
}
.connect-labours-promise {
  background-color: var(--color-dark-green);
  color: var(--color-white);
  padding: 1.25rem;
  margin: 0.5rem;
  border-radius: 0.625rem;
  box-shadow: var(--shadow-sm);
}
.connect-labours-promise h2 {
  color: var(--color-gold);
  text-align: center;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}
.promise-item {
  background-color: var(--color-deep-green);
  margin-block: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
}
.promise-item h3 { color: var(--color-light-green); }
.promise-item p  { color: var(--color-amber); }

/* --------------------------------
   Body + Ribbon
--------------------------------- */
.Connectlaboursbodyribbon {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
  overflow-y: hidden;
  inline-size: auto;
  block-size: auto;
}
.Connectlaboursribboncontainer {
  inline-size: 100%;
  overflow: hidden;
  background-color: var(--color-deep-green);
  padding-block: 0.313rem;
  transform: rotate(-5deg);
  position: relative;
}
.Connectlaboursribbon {
  display: flex;
  animation: slide 25s linear infinite;
  block-size: 6.25rem;
  inline-size: 100%;
  scrollbar-width: none;
  align-items: center;
  justify-content: space-around;
  transition: transform var(--transition-speed);
}
.Connectlaboursribbon::-webkit-scrollbar { display: none; }

.Connectlabourscountry {
  display: inline-block;
  color: var(--color-white);
  font-size: 1.125rem;
  margin-inline-end: 0.625rem;
  padding: 0.313rem 0.625rem;
  transform: rotate(5deg);
  transition: transform var(--transition-speed), background-color var(--transition-speed);
  border-radius: var(--radius-sm);
}
.Connectlabourscountry:hover,
.Connectlabourscountry:focus-visible,
.Connectlabourscountry:focus {
  transform: scale(1.1) rotate(5deg);
  background: color-mix(in srgb, var(--color-white) 10%, var(--color-deep-green));
  outline: 2px dashed var(--color-gold);
  outline-offset: 3px;
}
@keyframes slide {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@media (max-width: 768px) {
  .Connectlabourscountry {
    font-size: 1.4em;
    margin-inline-end: 1.875rem;
    padding: 0.25rem 0.5rem;
  }
  .Connectlaboursribbon-container { padding-block: 0.188rem; }
}

/* --------------------------------
   Professions — Homepage
--------------------------------- */
.Connectlaboursprofession {
  color: var(--color-deep-green);
  padding: 1rem;
  font-family: 'Poppins', sans-serif;
  line-height: 1.5;
  column-count: 1;
  column-gap: 0.5rem;
  text-align: justify;
}
.Connectlaboursprofession ul { list-style: none; padding: 0; }
.Connectlaboursprofession li {
  margin-block-end: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gold);
}
.Connectlaboursprofession li:before { content: ''; }
.Connectlaboursprofession li span {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--color-amber);
}

/* Headings + Paragraphs container .my-8 */
.my-8 h2 {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  margin-block-end: 1rem;
  color: var(--color-dark-green);
}
.my-8 p {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--color-white);
}
.my-8 p span { margin: 0 0.5rem; position: relative; }
.my-8 p span::after { content: '|'; margin-inline-start: 0.5rem; }
.my-8 p span:last-child::after { content: ''; }


/* --------------------------------
   Category Grid / Slider stubs
--------------------------------- */
@media (max-width: 768px) {
  .noo-job-category-wrap.style-slider .noo-job-category .category-item a .title {
    font-size: 16px;
  }
}

/* Grid item anchor */
.noo-job-category-wrap.style-grid .noo-job-category .category-item a {
  background-color: var(--color-white);
  border: none;
  inline-size: 100%;
  margin-inline: 10px;
  block-size: 100px;
  border-radius: var(--radius-sm);
  align-content: center;
  transition: transform var(--transition-speed), background-color var(--transition-speed), box-shadow var(--transition-speed);
  animation: fadeInUp 0.5s ease forwards;
  box-shadow: var(--shadow-sm);
}
@keyframes fadeInUp {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.category-item {
  inline-size: 100%;
  font-size: 12px;
  border-radius: 30px;
  color: var(--color-white);
  transition: transform var(--transition-speed), background-color var(--transition-speed);
  animation: fadeInUp 0.5s ease forwards;
  block-size: 200px;
  margin: 20px;
}

.icon {
  background-color: color-mix(in srgb, var(--color-white) 96%, var(--color-yellow));
  inline-size: 100%;
  font-size: 20px;
  border-radius: var(--radius-sm);
  block-size: 100px;
  text-align: center;
  display: block;
  margin-inline: auto;
  margin-block-start: 5px;
}
.icon:hover,
.icon:focus-visible {
  background-color: var(--color-deep-green);
  color: var(--color-white);
  font-size: 30px;
  transition: transform var(--transition-speed), background-color var(--transition-speed), color var(--transition-speed);
}

.noo-job-category-wrap.style-slider .noo-job-category .category-item a .title {
  font-size: 12px;
  background-color: var(--color-white);
  block-size: 200px;
}

/* --------------------------------
   Toggle Categories (Container)
--------------------------------- */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-block-start: 20px;
}
.categorydepartmentsandlocation {
  flex: 1 1 calc(33.333% - 15px);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-white);
  border-radius: 2px;
  overflow: hidden;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  background: var(--color-white);
}
.categorydepartmentsandlocation:hover,
.categorydepartmentsandlocation:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* --------------------------------
   Registration Message Box
--------------------------------- */
.registration-message {
  background: color-mix(in srgb, var(--color-white) 96%, var(--color-yellow));
  border-inline-start: 4px solid var(--color-deep-green);
  padding: 15px 20px;
  margin: 20px 0;
  border-radius: var(--radius-sm);
  font-family: Arial, sans-serif;
  color: var(--color-dark-green);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-speed);
  text-decoration: none;
}
.registration-message .message-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-deep-green);
  margin-block-end: 10px;
}
.registration-message .message-text {
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-black) 65%, var(--color-white));
}
.registration-message .note {
  font-weight: 700;
  color: var(--color-amber);
  display: inline-block;
  margin-block-start: 10px;
}

/* --------------------------------
   Toggle Component
--------------------------------- */
.toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--color-white) 86%, var(--color-yellow));
  color: var(--color-deep-green);
  font-weight: 600;
  font-size: 25px;
  border-block-end: 5px solid var(--color-yellow);
  border-radius: 8px 8px 0 0;
  transition: background var(--transition-speed), color var(--transition-speed);
}
.toggle:hover,
.toggle:focus-visible {
  background: color-mix(in srgb, var(--color-white) 75%, var(--color-yellow));
}
.arrow {
  inline-size: 10px;
  block-size: 10px;
  border: solid var(--color-black);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  transition: transform var(--transition-speed);
}
.items { list-style: none; padding: 0; margin: 0; }

.subcategory-list {
  max-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-white) 92%, var(--color-yellow));
  border: 1px solid color-mix(in srgb, var(--color-black) 12%, var(--color-white));
  border-top: none;
  border-radius: 0 0 10px 10px;
  transition: max-height 0.5s ease, background var(--transition-speed);
  list-style: none;
  padding: 10px;
}
.subcategory-list.open {
  max-height: 1000000000000000000px; /* maintain original behavior */
  background-color: color-mix(in srgb, var(--color-white) 96%, var(--color-yellow));
}
.subcategory-list li:last-child { border-bottom: none; }
.subcategory-list li:hover { background-color: var(--color-yellow); }
.subcategory-list li a {
  color: var(--color-gold);
  font-weight: 600;
  text-decoration: none;
  display: block;
  transition: all var(--transition-speed);
  padding: 20px;
  border-radius: var(--radius-sm);
}
.subcategory-list li a:hover,
.subcategory-list li a:focus-visible {
  background-color: var(--color-yellow);
  color: var(--color-black);
  padding-inline-start: 18px;
}

/* Responsive Enhancements */
@media (max-width: 1024px) {
  .toggle { font-size: 18px; padding: 14px 18px; }
  .subcategory-list li { font-size: 14px; padding: 12px 18px; }
}
@media (max-width: 768px) {
  .category { flex: 1 1 100%; }
  .toggle { flex-direction: column; align-items: flex-start; }
  .arrow { align-self: flex-end; margin-block-start: 8px; }
}
@media (max-width: 480px) {
  .registration-message { font-size: 14px; padding: 16px; }
  .subcategory-list li { padding: 10px 14px; }
}

/* --------------------------------
   Full-Screen Spinner (FontAwesome)
--------------------------------- */
.fa.fa-spinner.fa-spin {
  inline-size: 100px;
  block-size: 100px;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: spinnerRotate 5s linear infinite;
  display: inline-block;
  z-index: 9999;
  box-shadow: inset 0 0 0 8px var(--color-deep-green);
}
.fa.fa-spinner.fa-spin::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--color-deep-green) 60%, var(--color-white));
  animation: pulseOutward 2.5s ease-out infinite;
  box-sizing: border-box;
  opacity: 0.8;
}
.fa.fa-spinner.fa-spin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid var(--color-deep-green);
  animation: pulseOutward 2.5s ease-out 1.25s infinite;
  box-sizing: border-box;
  opacity: 0.9;
}
@keyframes spinnerRotate {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes pulseOutward {
  0% { transform: scale(1);   opacity: 0.8; }
  50%{ transform: scale(1.4); opacity: 0.3; }
  100%{transform: scale(1.8); opacity: 0; }
}

/* --------------------------------
   Registration Form (Roles)
--------------------------------- */
.role-label {
  display: inline-block;
  background-color: color-mix(in srgb, var(--color-black) 25%, var(--color-white));
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-inline-end: 10px;
  color: var(--color-white);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}
.role-label:hover,
.role-label:focus-visible {
  background-color: color-mix(in srgb, var(--color-black) 35%, var(--color-white));
}
input[type="radio"]:checked + .role-label {
  background-color: var(--color-deep-green);
  color: var(--color-white);
}

/* Sections visibility */
#section-seller, #section-expert, #section-client, #section-instructor { display: none; }
#role-seller:checked ~ #section-seller { display: block; }
#role-expert:checked ~ #section-expert { display: block; }
#role-client:checked ~ #section-client { display: block; }
#role-instructor:checked ~ #section-instructor { display: block; }

/* --------------------------------
   Status Badges / Headings
--------------------------------- */
.noo-page-heading .page-title .count.applications { background: var(--color-deep-green); color: var(--color-white); }

.jm-status.jm-status-Approved,
.jm-status.jm-status-active,
.jm-status.jm-status-publish {
  background: var(--color-deep-green);
  color: var(--color-white);
}

/* --------------------------------
   Mobile Member Account Navbar
--------------------------------- */
@media (max-width: 768px) {
  .noo-user-navbar-collapse {
    background: color-mix(in srgb, var(--color-white) 94%, var(--color-yellow));
    padding: 20px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
  }
  .navbar-nav.sf-menu > li.menu-item {
    list-style: none;
    margin-block-end: 15px;
    color: var(--color-black);
  }
  .navbar-nav.sf-menu > li.menu-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-black);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 18px;
    border-radius: 6px;
    background: var(--color-gold);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-speed);
  }
  .navbar-nav.sf-menu > li.menu-item > a i {
    margin-inline-end: 12px;
    font-size: 20px;
    color: var(--color-deep-green);
  }
  .navbar-nav.sf-menu > li.menu-item > a:hover,
  .navbar-nav.sf-menu > li.menu-item > a:focus-visible {
    background: color-mix(in srgb, var(--color-amber) 70%, var(--color-yellow));
    color: var(--color-black);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .navbar-nav .divider {
    block-size: 1px;
    background: color-mix(in srgb, var(--color-black) 12%, var(--color-white));
    margin-block: 15px;
  }
  .navbar-nav.sf-menu > li.menu-item.current-menu-item > a {
    background: var(--color-deep-green);
    color: var(--color-white);
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--color-black) 25%, var(--color-white));
  }
  .navbar-nav.sf-menu .sub-menu {
    display: none;
    position: absolute;
    background: color-mix(in srgb, var(--color-yellow) 60%, var(--color-white));
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    padding: 10px 0;
  }
  .navbar-nav.sf-menu > li.menu-item:hover .sub-menu { display: block; animation: fadeIn 0.3s ease-in-out; }
  .navbar-nav.sf-menu .sub-menu > li.menu-item > a {
    padding: 10px 20px;
    font-size: 14px;
    color: var(--color-black);
    background: color-mix(in srgb, var(--color-white) 96%, var(--color-yellow));
    border-radius: 4px;
    transition: background var(--transition-speed);
  }
  .navbar-nav.sf-menu .sub-menu > li.menu-item > a:hover,
  .navbar-nav.sf-menu .sub-menu > li.menu-item > a:focus-visible {
    background: var(--color-deep-green);
    color: var(--color-gold);
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Tabs */
.nav-tabs>li.active>a {
  background: color-mix(in srgb, var(--color-yellow) 70%, var(--color-white)) !important;
  color: var(--color-black) !important;
}

/* --------------------------------
   WooCommerce / Product Grid
--------------------------------- */
.products { list-style: none; margin: 0; padding: 0; }
/* ============= PRODUCT GRID ============= */
.products-fullwidth {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 20px;
  list-style: none;
}

/* Product Card Container */
.product-container {
  position: relative;
  background:#FFCB51;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
  overflow: hidden;
  padding: 15px;
  text-align:center;
  margin:0 auto;
}

.product-container:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 10px;
}

/* ///////////////////////////////////////////////////// */
/* ======= CONNECTLABOURS PRODUCT GRID & FLIP EFFECT ==== */
/* ///////////////////////////////////////////////////// */

/* === PRODUCT GRID (3-cols desktop, stacked mobile) === */
.connectlabours-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 40px 0;
  padding: 0 15px;
}

/* === PRODUCT CARD === */
.connectlabours-product-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
.connectlabours-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

/* === IMAGE CONTAINER (FLIP EFFECT) === */
.connectlabours-product-images {
  position: relative;
  width: 100%;
  padding-top: 100%; /* Square aspect ratio */
  perspective: 1200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
}

.connectlabours-product-images a {
  position: absolute;
  inset: 0;
  display: block;
}

/* ======== IMAGE CONTAINER FLIP EFFECT ======== */
.product-images {
 position: relative;
  width: 100%;
  padding-top: 100%; /* Keeps square aspect ratio */
  perspective: 1000px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
 }

.product-images a {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.product-images .noo-product-thumbnail {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.noo-product-front-thumbnail {
  z-index: 2;
  transform: rotateY(0deg);
   margin: 0 auto;
}

.noo-product-back-thumbnail {
  transform: rotateY(180deg);
  z-index: 1;
   margin: 0 auto;
}

/* Flip on hover */
.product-images:hover .noo-product-front-thumbnail {
  transform: rotateY(180deg);
}

.product-images:hover .noo-product-back-thumbnail {
  transform: rotateY(0deg);
}

/* === IMAGE STYLE === */
.connectlabours-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.connectlabours-product-card:hover .connectlabours-thumbnail img {
  transform: scale(1.05);
}

/* ======== SALE BADGE ======== */
.onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #024f2b;
  color: white;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  z-index: 5;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
  .product-wrap {
    grid-template-columns: 1fr;
  }

  .product-images {
    padding-top: 100%; /* still square */
  }
}

/* ============= PRODUCT DETAILS ============= */
.product_title a {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #024f2b;
  text-decoration: none;
  margin: 10px 0 4px;
  transition: color 0.3s ease;
}

.product_title a:hover {
  color: #f4ae0b;
}

/* Star Rating */
.star-rating {
  color: #FFD063;
  font-size: 0.9em;
}

/* Price Styling */
.price {
  font-size: 16px;
  color: #024f2b;
  margin-top: 6px;
}

.price del {
  color: #a0a0a0;
  text-decoration: line-through;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  margin-right: 8px;
}

.price ins {
  font-size: 1.3rem;
  font-weight: bold;
  color: #024f2b;
}

.woocommerce-Price-amount {
  font-size: 26px;
}

.price-pkr {
  background: #024f2b;
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 4px;
  margin-top: 8px;
  display: inline-block;
}

/* ============= ACTION BUTTONS ============= */
.shop-loop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  text-align: center;
}

.shop-loop-actions .button {
  background: #f4ae0b;
  color: #fff;
  padding: 10px 20px;
  font-size: 0.9rem;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s;
}

.shop-loop-actions .button:hover {
  background: #024f2b;
}

.shop-loop-quickview {
  background-color: #FFD063;
  color: #024f2b;
}

.shop-loop-quickview:hover {
  background-color: #f4ae0b;
  color: #fff;
}

/* ============= RELATED PRODUCTS SECTION ============= */
.related-products {
  padding: 20px;
  margin-top: 20px;
  background-color: #f9f9f9;
  border-top: 2px solid #024f2b;
}

.related-products h2 {
  font-size: 1.8em;
  color: #024f2b;
  font-weight: bold;
  margin-bottom: 15px;
}

/* ============= CHECKOUT STYLING ============= */

/* === Layout & Container === */
.woocommerce-checkout .col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background-color: #f5f5f5;
  padding: 2rem;
  border-radius: 8px;
  width: 100%;
  margin: 2rem auto; /* CENTERED horizontally with vertical spacing */
  text-align: left; /* Avoid global center unless for text blocks */
  justify-content: space-between; /* Proper spacing between columns */
  align-items: flex-start;
}
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  flex: 1 1 300px;
}

/* === Headings & Titles === */
.woocommerce-checkout h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #333;
}

/* === Form Field Wrapper === */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  padding: 0.8rem;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
  background-color: #fff;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: #024f2b;
  outline: none;
}

/* === Labels & Required Star === */
.woocommerce-checkout label {
  font-weight: 600;
  display: block;
  color: #555;
	 padding:10px;
  gap:30px;
}
.woocommerce-checkout label .required {
  color: #daa520;
  margin-left: 0.25rem;
}
.woocommerce-checkout .optional {
  font-weight: normal;
  font-style: italic;
  color: #888;
}

/* === Checkbox & Radio - Larger & Improved UI === */
.woocommerce-checkout .input-checkbox,
.woocommerce-checkout .input-radio {
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.75rem;
  cursor: pointer;
  accent-color: #024f2b;
}
.woocommerce-checkout .woocommerce-form__label {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  cursor: pointer;
}

/* === Buttons === */
.woocommerce-checkout button.button,
.woocommerce input.button.alt {
  display: inline-block;
  background-color: #024f2b;
  color: #fff;
  padding: 0.8rem 1.4rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.woocommerce-checkout button.button:hover,
.woocommerce input.button.alt:hover {
  background-color: #036137;
}

/* === Notices Wrapper === */
.woocommerce-notices-wrapper {
  max-width: 800px;
  margin: 0 auto 2rem;
  padding: 1rem;
  background: #fffbea;
  border-left: 4px solid #daa520;
  color: #8b6c00;
  border-radius: 4px;
}

/* === Review Order Table === */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout-review-order-table tfoot tr td {
  font-size: 1.1rem;
  font-weight: 600;
}

/* === Payment Methods === */
.woocommerce-checkout .wc_payment_methods {
  margin-bottom: 1.5rem;
}
.woocommerce-checkout .payment_box {
  margin-left: 2rem;
  padding: 1rem;
  background: #f9f9f9;
  border-left: 3px solid #024f2b;
  border-radius: 4px;
}
.woocommerce-checkout .wc-credit-card-form input {
  width: 100%;
  margin-bottom: 1rem;
}
.woocommerce-checkout .wc-credit-card-form .form-row-first,
.woocommerce-checkout .wc-credit-card-form .form-row-last {
  width: calc(50% - 0.5rem);
  float: left;
}
.woocommerce-checkout .wc-credit-card-form .form-row-last {
  float: right;
}

/* === Terms & Conditions === */
.woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 1rem;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox {
  margin-right: 0.5rem;
}
.woocommerce-terms-and-conditions-checkbox-text a {
  color: #024f2b;
  text-decoration: underline;
}

/* === Map Container === */
#wcfmmp-user-locaton-map {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* === Responsive Mobile === */
@media (max-width: 768px) {
  .woocommerce-checkout .col2-set {
    flex-direction: column;
  }
  .woocommerce-checkout .wc-credit-card-form .form-row-first,
  .woocommerce-checkout .wc-credit-card-form .form-row-last {
    width: 100%;
    float: none;
  }
}

/* === Utility Helpers === */
.hidden {
  display: none !important;
}
.mb-1 { margin-bottom: 1rem; }
.wc_payment_methods {
     list-style: none;
}
/* ============= PRODUCT GALLERY / ZOOM IMAGE ============= */
.images {
  position: relative;
  overflow: hidden;
}

.images a {
  display: block;
  overflow: hidden;
}

.images a img {
  width: 100%;
  height: auto;
  transition: transform 4s ease-in-out;
  transform-origin: top left;
}

/* Pan and zoom effect */
.images a:hover img {
    transform: scale(1.6) translate(-20%, -20%);
}

.woocommerce-product-gallery__image {
  width: 33.3333%;
  padding: 10px;
  box-sizing: border-box;
  float: left;
}

@media (max-width: 768px) {
  .woocommerce-product-gallery__image {
    width: 50%;
    float: left;
  }
}

/* ============= ACCESSIBILITY ============= */
.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============= MEDIA QUERIES ============= */
@media (max-width: 768px) {
  .products-fullwidth {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }

  .product-images {
    height: 200px;
  }

  .shop-loop-actions {
    flex-direction: column;
  }
}

/* plugin wc-frontend views product or woocommerce products page ends */

/*--------------------------------------------- */

/* ================================
   islamabad to Seattle starts
   ================================ */

/* Base Styles */
.airport{
  font-family: 'Poppins', system-ui, sans-serif;
  margin: 0;
  line-height: 1.6;
  color: var(--color-day-text);
}

/* Header */
.airport-header {
  background: var(--color-deep-green);
  color: var(--color-white);
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 18px var(--shadow-weak);
}
.airport-header:focus-within {
  outline: 3px solid var(--ring);
  outline-offset: 4px;
}

/* Image Styles */
.airport-banner {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0 0 20px 20px;
}
.airport-square {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border: 3px solid var(--color-deep-green);
}
.airport-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin: 1rem auto;
}

/* Main Content Sections */
.airport-section {
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  background: var(--color-white);
}

/* Flight Guide Section */
.airport-guide {
  background: var(--color-yellow);
  color: var(--color-black);
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 0.75rem;
}

/* Two-Column Layout */
.airport-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem 0;
}
.airport-col {
  padding: 1.5rem;
  background: var(--color-white);
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px var(--shadow-weak);
}

/* Islamabad Airport Column */
.airport-isb {
  background: var(--color-yellow);
  border: 2px solid var(--color-deep-green);
  color: var(--color-black);
}

/* Seattle Airport Column */
.airport-sea {
  background: var(--color-dark-green);
  color: var(--color-white);
}

/* Mobile: stack columns */
@media (max-width: 768px) {
  .airport-columns { grid-template-columns: 1fr; }
}

/* Hotel Benefits Sections */
.airport-hotel {
  padding: 2rem;
  margin: 2rem 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}

/* Responsive Design */
@media (max-width: 768px) {
  .airport-columns,
  .airport-hotel { grid-template-columns: 1fr; }

  .airport-banner { height: 200px; }
}

/* Table Styles */
.airport-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: var(--color-white);
}
.airport-table th,
.airport-table td {
  padding: 1rem;
  border: 1px solid var(--color-deep-green);
  color: var(--color-day-text);
}

/* =========================
   amenities css starts
   ========================= */
.amenities {
  padding: 40px 20px;
  background-color: var(--color-white);
  color: var(--color-day-text);
  font-family: 'Poppins', system-ui, sans-serif;
}
.section-heading {
  text-align: center;
  margin-bottom: 40px;
}
.section-heading h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gold);
}
.section-heading p {
  color: var(--text-subtle);
  font-size: 1rem;
}
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.amenity-item {
  background: var(--color-white);
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 2px 12px var(--shadow-weak);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.amenity-item:hover,
.amenity-item:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px var(--shadow-med);
}
.amenity-item h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--color-dark-green);
}
.amenity-item p {
  font-size: 0.95rem;
  margin-bottom: 15px;
  color: var(--text-subtle);
}
.amenity-item a {
  text-decoration: none;
  background-color: var(--color-deep-green);
  color: var(--color-white);
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  display: inline-block;
  transition: background-color var(--transition-speed), transform var(--transition-speed);
}
.amenity-item a:hover,
.amenity-item a:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-deep-green);
  transform: translateY(-2px);
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* =========================
   siren button css starts
   ========================= */
@keyframes pulseEffect {
  0% {
    transform: scale(1);
    box-shadow: 0 0 15px color-mix(in srgb, var(--color-amber) 50%, transparent),
                0 0 30px color-mix(in srgb, var(--color-gold) 50%, transparent);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 25px color-mix(in srgb, var(--color-amber) 80%, transparent),
                0 0 50px color-mix(in srgb, var(--color-gold) 80%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 15px color-mix(in srgb, var(--color-amber) 50%, transparent),
                0 0 30px color-mix(in srgb, var(--color-gold) 50%, transparent);
  }
}
.siren-button {
  background: linear-gradient(45deg, var(--color-amber), var(--color-gold));
  color: var(--color-white);
  padding: 12px 22px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  animation: pulseEffect 2s ease-in-out infinite;
  box-shadow: 0 0 15px color-mix(in srgb, var(--color-amber) 70%, transparent),
              0 0 30px color-mix(in srgb, var(--color-gold) 70%, transparent);
  transition: box-shadow .5s ease, transform .3s ease;
}
.siren-button::before {
  font-size: 22px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
}
.siren-button:hover,
.siren-button:focus-visible {
  box-shadow: 0 0 50px color-mix(in srgb, var(--color-amber) 80%, transparent),
              0 0 100px color-mix(in srgb, var(--color-gold) 80%, transparent);
  transform: scale(1.06);
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

/* ==============================
   display total customers starts
   ============================== */

/* Container Styling */
.customers-container {
  margin: 0 auto;
  padding: 5px;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow-weak);
  font-family: 'Poppins', system-ui, sans-serif;
  text-align: center;
}

/* Previous Count - Top Corner */
.previous-count-container {
  background-color: var(--color-amber);
  color: var(--color-black);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 10px;
}

/* Counter Sections */
.counter-title1 { margin-bottom: 1px; }

.counter-value1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-deep-green);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}

.counter-value2 {
  font-size: 100px;
  color: var(--color-deep-green);
  font-weight: 900;
  text-shadow: 2px 2px var(--color-deep-green), -1px -1px var(--color-white);
  margin-top: 0;
}

.counter-message {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 5px;
  font-style: italic;
}

/* Emails Section */
.emails-section {
  margin-top: 5px;
  padding: 5px;
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-dark-green) 20%, transparent);
  border-radius: 8px;
  text-align: left;
  max-height: 200px;
  overflow-y: auto;
}
.luxury-ticker-wrapper {
  overflow: hidden;
  position: relative;
  background-color: var(--color-white);
  padding: 5px;
}
.luxury-ticker {
  display: flex;
  animation: tickerScroll 20s linear infinite;
  white-space: nowrap;
}
.luxury-ticker-item {
  font-size: 1.2rem;
  color: var(--color-deep-green);
  font-weight: bold;
  padding: 0 5px;
  display: inline-block;
  text-align: center;
}

/* Ticker Animation */
@keyframes tickerScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .counter-title1 { font-size: 1.1rem; }
  .counter-value { font-size: 2rem; }
  .emails-section { font-size: 0.9rem; }
}

/* =========================================
   events in Pakistan today page starts
   ========================================= */
.gradient-overlayplaces {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.zoom-hoverplaces img {
  transition: transform .4s ease, filter .4s ease;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.zoom-hoverplaces:hover img,
.zoom-hoverplaces:focus-within img {
  transform: scale(1.08);
  filter: brightness(0.95);
}
.gradient-overlayplaces::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-black) 0%, transparent) 40%, color-mix(in srgb, var(--color-black) 50%, transparent) 100%);
  z-index: 1;
  transition: opacity .3s ease;
}
.place-nameplaces {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 2;
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 1px 1px 4px var(--shadow-strong);
}
.img-responsiveplaces {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* =================================
   Top Bar Menu Styling starts
   ================================= */

/* Menu */
.topbar-menu2 {
  background-color: var(--color-day-text);
  padding: 10px 20px;
  text-align: center;
}
.topbar-menu2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.topbar-menu2 ul li a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 14px;
  display: inline-block;
  border-radius: 6px;
  transition: color var(--transition-speed), background-color var(--transition-speed), transform var(--transition-speed);
}
.topbar-menu2 ul li a:hover,
.topbar-menu2 ul li a:focus-visible {
  color: var(--color-yellow);
  background-color: color-mix(in srgb, var(--color-white) 12%, transparent);
  transform: translateY(-2px);
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Responsive links */
@media (max-width: 768px) {
  .topbar-menu2 ul { flex-direction: column; align-items: center; font-size: 14px; }
  .topbar-menu2 ul li a { font-size: 14px; width: 100%; text-align: center; }
}
@media (max-width: 480px) {
  .topbar-menu2 ul li a { font-size: 13px; padding: 10px 12px; }
}

/* ========== Responsive Table ========== */
/* Reset (scoped) */
.responsive-table, .table-row, .table-column { box-sizing: border-box; }

.responsive-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: transparent;
}
.table-row {
  display: flex;
  width: 100%;
}
.table-column {
  flex: 1 1 33.33%;
  padding: 10px;
  text-align: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-deep-green);
  height:100px;
}
@media (max-width: 1024px) {
  .table-column { flex: 1 1 50%; }
}
@media (max-width: 768px) {
  .table-column { flex: 1 1 100%; }
}

/* ========== AJAX Search Wrapper ========== */
.ajax-search-wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 768px) {
  .ajax-search-wrapper { width: 90%; }
}

/* =========================================
   Connect Labours Amazon Store page css starts
   ========================================= */

/* General Body Styles for Amazon Connect Labours store starts */
.amazonpagestart {
  font-family: 'Poppins', system-ui, sans-serif;
  margin: 0;
  background: var(--color-white);
  color: var(--color-dark-green);
  line-height: 1.6;
}

/* --- Amazon Page Specific Styles --- */
.amazonpagebody {
  font-family: 'Poppins', system-ui, sans-serif;
  margin: 0;
  background: var(--color-white);
  color: var(--color-dark-green);
}

.amazonpage .header {
  background: var(--color-dark-green);
  color: var(--color-white);
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  gap: 12px;
}

.amazonpage .header-logo {
  display: flex;
  align-items: center;
}
.amazonpage .header-logo img {
  height: 40px;
}

.amazonpage .header-search {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 20px;
  width: 40%;
  padding: 8px 10px;
  font-size: 16px;
  background: var(--color-gold);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-deep-green) 20%, transparent);
}

.amazonpage .header-user { margin-left: 16px; }

/* Sections */
.amazonpage .section {
  margin: 2rem auto;
  max-width: 100%;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--shadow-weak);
  padding: 1.2rem 2rem 2rem;
}
.amazonpage .section-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--color-dark-green);
  border-bottom: 3px solid var(--color-yellow);
  padding-bottom: 10px;
  display: inline-block;
}

/* Cards */
.amazonpage .card-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.amazonpage .category-card {
  background: var(--color-white);
  border-radius: 7px;
  box-shadow: 0 1px 3px var(--shadow-weak);
  padding: 10px;
  text-align: center;
  width: 30%;
  margin-bottom: 1.2rem;
  transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}
.amazonpage .product-card{
  background: var(--color-white);
  border-radius: 7px;
  box-shadow: 0 1px 3px var(--shadow-weak);
  padding: 10px;
  text-align: center;
  width: 30%;
  margin-bottom: 1.2rem;
  transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}
.amazonpage .category-card:hover,
.amazonpage .product-card:hover,
.amazonpage .category-card:focus-within,
.amazonpage .product-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px var(--shadow-med);
  background-color: var(--color-white);
}
.amazonpage .category-card img,
.amazonpage .product-card img {
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 0.7em;
  border-radius: 8px;
}
.amazonpage .category-card-title {
  font-size: 1.1em;
  font-weight: 800;
  color: var(--color-dark-green);
  margin-bottom: 0.6em;
}
.amazonpage .product-title {
  font-size: 1.1em;
  font-weight: 800;
  color: var(--color-gold);
  margin-bottom: 0.6em;
}
.amazonpage.category-card a {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
  padding-bottom: 15px;
}
.amazonpage .content-title {
  font-size: 1.6rem;
  margin: 1rem 0 .5rem;
  color: var(--color-deep-green);
}
.amazonpage .categories {
  font-size: 0.95rem;
  color: var(--color-gold);
  margin: .5rem 0;
}

/* Footer */
.amazonpage .footer-section {
  background: var(--color-dark-green);
  color: var(--color-white);
  padding: 3rem 0 1rem;
  margin-top: 2em;
}
.amazonpage .footer-grids {
  display: flex;
  max-width: 1200px;
  margin: 0 auto 1rem;
  gap: 3rem;
  justify-content: space-between;
}
.amazonpage .footer-col { flex: 1; }
.amazonpage .footer-col h4 {
  margin-top: 0;
  color: var(--color-yellow);
  margin-bottom: .8em;
  font-size: 1.3em;
}
.amazonpage .footer-col ul { list-style-type: none; padding-left: 0; }
.amazonpage .footer-col li {
  margin-bottom: .35em;
  color: var(--color-white);
  opacity: .85;
  font-size: .95em;
}
.amazonpage .footer-bottom {
  text-align: center;
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
  font-size: .95em;
  margin-top: 2rem;
}

/* --- Connect Labours Main Site Styles --- */
.connectlabours-header {
  background-color: var(--color-deep-green);
  color: var(--color-white);
  padding: 15px 0;
  text-align: center;
  box-shadow: 0 2px 5px var(--shadow-weak);
}
.connectlabours-header h2 {
  margin: 0;
  font-size: 2.8em;
  letter-spacing: 1.5px;
  text-shadow: 1px 1px 2px var(--shadow-weak);
}
.connectlabours-header p {
  font-size: 1.1em;
  opacity: .9;
}

.connectlabours-section {
  padding: 40px 20px;
  max-width: 1000px;
  margin: 30px auto;
  background-color: var(--color-black);
  border-radius: 8px;
  box-shadow: 0 4px 10px var(--shadow-weak);
  text-align: center;
}
.connectlabours-section h3 {
  color: var(--color-yellow);
  font-size: 2.2em;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}
.connectlabours-section h3::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 70px;
  height: 4px;
  background-color: var(--color-yellow);
  border-radius: 2px;
}
.connectlabours-section p {
  font-size: 1.1em;
  color: var(--color-white);
  margin-bottom: 20px;
}
.connectlabours-button {
  display: inline-block;
  background-color: var(--color-yellow);
  color: var(--color-black);
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.05em;
  transition: background-color var(--transition-speed), transform var(--transition-speed);
  box-shadow: 0 3px 6px var(--shadow-weak);
}
.connectlabours-button:hover,
.connectlabours-button:focus-visible {
  background-color: var(--color-gold);
  transform: translateY(-2px);
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.connectlabours-story-section {
  background-color: var(--color-gold);
  padding: 50px 20px;
  text-align: center;
}
.connectlabours-story-section h2 {
  color: var(--color-black);
  font-size: 2.8em;
  margin-bottom: 30px;
}
.connectlabours-story-section p {
  max-width: 800px;
  margin: 0 auto 20px;
  font-size: 1.15em;
  color: var(--color-dark-green);
  line-height: 1.8;
}
.connectlabours-story-section em {
  color: var(--color-deep-green);
  font-style: normal;
  font-weight: bold;
}
.connectlabours-story-quote {
  font-style: italic;
  margin-top: 30px;
  color: var(--text-muted);
  font-size: 1.2em;
  border-left: 5px solid var(--color-black);
  padding-left: 15px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.connectlabours-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 40px 20px;
  max-width: 100%;
  margin: 0 auto;
}
.connectlabours-feature-card {
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 5px 15px var(--shadow-weak);
  padding: 30px;
  text-align: center;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  text-decoration: none;
}
.connectlabours-feature-card a { text-decoration: none; }
.connectlabours-feature-card:hover,
.connectlabours-feature-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px var(--shadow-med);
}
.connectlabours-feature-card h4 {
  color: var(--color-deep-green);
  font-size: 1.6em;
  margin-bottom: 15px;
}
.connectlabours-feature-card p {
  color: var(--text-subtle);
  font-size: 1em;
}
.connectlabours-feature-card .icon {
  font-size: 3em;
  color: var(--color-yellow);
  margin-bottom: 15px;
}

.connectlabours-footer {
  background-color: var(--color-dark-green);
  color: var(--color-white);
  padding: 40px 20px;
  text-align: center;
  font-size: .95em;
}
.connectlabours-footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.connectlabours-footer-links li a {
  color: var(--color-white);
  text-decoration: none;
  opacity: .9;
  transition: opacity var(--transition-speed), text-decoration-color var(--transition-speed);
}
.connectlabours-footer-links li a:hover,
.connectlabours-footer-links li a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}
.connectlabours-footer p {
  opacity: .85;
  margin: 0;
}

/* Responsive Design for Connect Labours */
@media (max-width: 768px) {
  .connectlabours-header h2 { font-size: 2em; }
  .connectlabours-section { padding: 30px 15px; }
  .connectlabours-section h3 { font-size: 1.8em; }
  .connectlabours-story-section h2 { font-size: 2em; }
  .connectlabours-story-section p { font-size: 1em; }
  .connectlabours-features-grid { grid-template-columns: 1fr; }

  .amazonpage .header {
    flex-direction: column;
    min-height: auto;
    padding: 10px;
  }
  .amazonpage .header-search {
    margin: 10px 0;
    width: 100%;
  }
  .amazonpage .header-search input { width: 100%; }

  .amazonpage .section { padding: 1rem .5rem; }
  .amazonpage .card-row {
    flex-direction: column;
    align-items: center;
  }
  .amazonpage .category-card,
  .amazonpage .product-card {
    width: 90%;
    max-width: 320px;
  }
  .amazonpage .footer-grids {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .amazonpage .footer-col { text-align: center; }
}

.googleadsamazon { text-align: center; }

/* General Section Styling */
/* Parallax / hero */
.amazonbuildinglink-parallax-section {
  /* Keep image URL but ensure contrast layer handles brand compliance */
  background: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&w=1950&q=80') no-repeat center center fixed;
  background-size: cover;
  padding: 80px 20px;
  color: var(--color-white);
  text-align: center;
}
.amazonbuildinglink-content-wrapper {
  max-width: 100%;
  margin: 0 auto;
  background: color-mix(in srgb, var(--color-black) 70%, transparent);
  padding: 40px;
  border-radius: 12px;
}

/* Typography */
.amazonbuildinglink-main-title {
  font-size: 2.8em;
  color: var(--color-gold);
  margin-bottom: 15px;
  font-weight: 800;
}
.amazonbuildinglink-main-subtitle {
  font-size: 1.3em;
  color: color-mix(in srgb, var(--color-white) 92%, transparent);
  margin-bottom: 50px;
  line-height: 1.6;
}

/* Product Grid Layout */
.amazonbuildinglink-product-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
}

/* Product Card Styling */
.amazonbuildinglink-product-card {
  background-color: var(--color-white);
  color: var(--color-dark-green);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 15px var(--shadow-weak);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  display: flex;
  flex-direction: column;
  height: 700px;
}
.amazonbuildinglink-product-card:hover,
.amazonbuildinglink-product-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px var(--shadow-med);
}

/* Full and responsive images */
.amazonbuildinglink-product-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: color-mix(in srgb, var(--color-yellow) 20%, var(--color-white));
}

/* Flex container for text to push button to the bottom */
.amazonbuildinglink-product-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.amazonbuildinglink-product-title {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-deep-green);
  margin-bottom: 10px;
}

/* No fixed height to prevent text overflow */
.amazonbuildinglinkpara {
  text-align: justify;
  line-height: 1.5;
  flex-grow: 1;
  margin-bottom: 20px;
  padding: 10px;
  color: var(--text-subtle);
}

/* Call-to-Action Button */
.amazonbuildinglink-cta-button {
  background-color: var(--color-gold);
  color: var(--color-black);
  text-align: center;
  padding: 14px 20px;
  font-weight: 800;
  transition: background-color var(--transition-speed), color var(--transition-speed);
  border-top: 1px solid color-mix(in srgb, var(--color-dark-green) 15%, transparent);
  margin-bottom: 10px;
  margin-top: 5px;
  padding-top: 20px;
}
.amazonbuildinglink-cta-button:hover,
.amazonbuildinglink-cta-button:focus-visible {
  background-color: var(--color-deep-green);
  color: var(--color-white);
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* --- Media Queries for 100% Responsiveness --- */
@media (min-width: 600px) {
  .amazonbuildinglink-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .amazonbuildinglink-product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Adjust typography on smaller screens */
@media (max-width: 768px) {
  .amazonbuildinglink-main-title { font-size: 2.2em; }
  .amazonbuildinglink-main-subtitle { font-size: 1.1em; }
  .amazonbuildinglink-content-wrapper { padding: 30px 20px; }
}
/* Store page css ends */

/* ===========================
Testimonials (clts-*)
=========================== */
.clts-wrapper {
  width: 100%;
  margin-inline: auto;
  padding: 10px;
  background: var(--color-yellow);
  border-radius: 20px;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
  height: 650px;
  color: var(--color-deep-green);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-black) 8%, transparent);
}
.clts-swiper { width: 100%; margin: 0 auto; height: 100%; }
.clts-box { padding: 20px; box-sizing: border-box; display: grid; place-items: center; height: 100%; }
.clts-box img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 10px auto 15px;
  border: 4px solid var(--color-white);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-black) 10%, transparent);
  display: block;
}
.clts-box h4 {
  font-size: 20px;
  color: var(--color-deep-green);
  margin: 15px 0 10px;
}
.clts-box p {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-black) 55%, var(--color-white) 45%);
  max-width: 65ch;
  margin: 10px auto 20px;
  line-height: 1.6;
  padding: 0 15px;
}

/* Swiper pagination bullets */
.swiper-pagination-bullet {
  opacity: 1;
  width: 14px;
  height: 14px;
  background: color-mix(in srgb, var(--color-black) 60%, var(--color-white) 40%);
  border-radius: 50%;
  transition: background var(--transition-speed);
  margin-top: 70px;
}
.swiper-pagination-bullet-active { background-color: var(--color-gold); }

/* Responsive testimonial sizes */
@media (max-width: 575.98px) {
  .clts-wrapper { padding: 20px 10px; height: auto; }
  .clts-box img { width: 70px; height: 70px; }
  .clts-box h4 { font-size: 16px; }
  .clts-box p { font-size: 13px; padding: 0 10px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .clts-wrapper { padding: 25px 15px; }
  .clts-box img { width: 80px; height: 80px; }
  .clts-box h4 { font-size: 18px; }
  .clts-box p { font-size: 14px; padding: 0 12px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .clts-wrapper { padding: 30px 20px; height: auto; }
  .clts-box img { width: 90px; height: 90px; }
  .clts-box h4 { font-size: 20px; }
  .clts-box p { font-size: 15px; padding: 0 15px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .clts-wrapper { padding: 35px 25px; }
  .clts-box img { width: 100px; height: 100px; }
  .clts-box h4 { font-size: 21px; }
  .clts-box p { font-size: 16px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .clts-wrapper { padding: 40px; }
  .clts-box img { width: 110px; height: 110px; }
  .clts-box h4 { font-size: 22px; }
  .clts-box p { font-size: 17px; padding: 0 20px; }
}
@media (min-width: 1400px) {
  .clts-wrapper { max-width: 1100px; padding: 50px; height: 650px; }
  .clts-box img { width: 120px; height: 120px; }
  .clts-box h4 { font-size: 24px; }
  .clts-box p { font-size: 18px; padding: 0 25px; }
}


/* pop up home section starts   */

/* ConnectLabours Stylish Preloader */

.animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 4s infinite;
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  top: 0;
  position: absolute;
}

.animation-preloader .txt-loading .letters-loading {
  font-weight: 800;
  letter-spacing: 20px;
  display: inline-block;
  position: relative;
  font-size: 80px;
  line-height: 80px;
  text-transform: uppercase;
  color: #f4ae0b;
  font-family: 'Nunito Sans', sans-serif;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  transition: all 0.3s ease;
}

/* Responsive Typography */
@media (max-width: 1024px) {
  .animation-preloader .txt-loading .letters-loading {
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 12px;
  }
}
@media (max-width: 768px) {
  .animation-preloader .txt-loading .letters-loading {
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 8px;
  }
}
@media (max-width: 480px) {
  .animation-preloader .txt-loading .letters-loading {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 5px;
  }
}

/* Staggered animation delays */
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before { animation-delay: 0.2s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before { animation-delay: 0.4s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before { animation-delay: 0.6s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before { animation-delay: 0.8s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1.0s; }
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s; }

.handle-preloader .loader-section {
  background-color: #024f2b;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.preloader .loaded .animation-preloader {
  opacity: 0;
  transition: 0.5s ease-out;
}

/* Animated fill effect */
.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
  color: #FFD449;
}

/* Animation Keyframes */
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/*news alert css starts */
/* Style the section as a flex container */
.top-barsection {
    display: flex;
    justify-content: space-between; /* Space out the items */
    align-items: center; /* Align items vertically centered */
    margin: 0 15px; /* Margin at both ends */
}

/* Make sure the individual divs are spaced out correctly */

/* Style for news alert */
.newsalert {
    flex: 1; /* Take up remaining space . /* Takes up remaining space on the left */
    padding: 5px;
    position: relative;
	  overflow: hidden;
    color: #024f2b; /* Initial color */
    animation: colorChange 4s ease-in-out infinite;
}

/* Animation for color transition */
@keyframes colorChange {
    0% {
        color: #FFD063;  /* Yellow */
    }
    25% {
        color: #f5f5f5; /* Green */
    }
    50% {
        color: #024f2b; /* Green */
    }
    75% {
        color: #FFD063; /* Green */
    }
    100% {
        color: #f4ae0b; /* Yellow */
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .newsalert  {
        font-size: 1rem; /* Reduce font size on small screens */
        white-space: normal; /* Allow the text to wrap on smaller screens */
    }
}

/* pop up home section ends  */

/* ===========================
Frontpage main container baseline
=========================== */
.frontpagecl-main-container *,:where(.frontpagecl-main-container *::before, .frontpagecl-main-container *::after) { box-sizing: border-box; }
.frontpagecl-main-container {
  font-family: 'Roboto Flex', system-ui, sans-serif;
  color: color-mix(in srgb, var(--color-black) 8%, var(--color-white));
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.frontpagecl-main-container h1, .frontpagecl-main-container h2, .frontpagecl-main-container h3, .frontpagecl-main-container h4, .frontpagecl-main-container h5, .frontpagecl-main-container h6 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-block-end: 1rem;
  color: var(--color-deep-green);
}
.frontpagecl-main-container p { margin-block-end: 1rem; max-width: 65ch; color: color-mix(in srgb, var(--color-black) 55%, var(--color-white) 45%); }
.frontpagecl-main-container a { color: var(--color-yellow); text-decoration: none; transition: color var(--transition-speed); }
.frontpagecl-main-container a:hover, .frontpagecl-main-container a:focus-visible { color: var(--color-gold); outline: 3px solid var(--color-gold); outline-offset: 3px; }
.frontpagecl-main-container img { max-width: 100%; height: auto; display: block; }

/* Sections spacing */
.frontpagecl-main-container > section,
.frontpagecl-main-footer,
.frontpagecl-hero-section {
  padding: clamp(2rem, 8vw, 5rem) clamp(1rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}

/* Grid */
.frontpagecl-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 768px) { .frontpagecl-grid { grid-template-columns: repeat(2,1fr); align-items: center; } }

/* ===========================
Hero section (glass/card/search etc)
=========================== */
.frontpagecl-hero-section {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  background-color: var(--color-black);
  color: var(--color-white);
}
.frontpagecl-hero-bg-animation {
  position: absolute; inset: 0; z-index: 1;
  background:
  radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--color-deep-green) 45%, transparent 55%), transparent 60%),
  radial-gradient(ellipse at 30% 80%, color-mix(in srgb, var(--color-gold) 45%, transparent 55%), transparent 60%),
  var(--color-black);
  opacity: .36;
  animation: frontpagecl-slow-pan 20s cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes frontpagecl-slow-pan { 0%{ transform: scale(1.2) translate(10%,-10%);} 100%{ transform: scale(1.5) translate(-10%,10%);} }

.frontpagecl-hero-glass-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 650px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--color-white) 8%, transparent);
  border-radius: 24px;
  padding: clamp(1.5rem,4vw,3rem);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-black) 36%, transparent);
  text-align: center;
}
.frontpagecl-hero-content { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }

.frontpagecl-hero-title {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -1px;
  line-height: 1.1;
}
.frontpagecl-text-gradient {
  background: linear-gradient(45deg, var(--color-yellow), var(--color-gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
}
.frontpagecl-hero-subtitle {
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: color-mix(in srgb, var(--color-white) 92%, transparent);
  opacity: .95;
  max-width: 50ch;
  margin-top: -1rem;
}

/* Futuristic Search Bar */
/* Search Wrapper */
.frontpagecl-hero-search-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: 50px;
  background: var(--glass-bg-night);
  backdrop-filter: var(--glass-blur);
  transition: all var(--transition-speed);
  display: flex;
  max-width: 700px;
  box-shadow: 0 0 20px var(--glow-color-night);
  z-index:999;
}

.frontpagecl-hero-search-wrapper:focus-within {
  box-shadow: 0 0 20px var(--glow-color-night);
}

/* Search Input */
.frontpagecl-hero-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 16px;
  flex-grow: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-black);
}

.frontpagecl-hero-search-input::placeholder {
  color: var(--color-yellow);
}

/* Search Button */
.frontpagecl-hero-search-btn {
  background: var(--color-gold);
  border: none;
  border-radius: 0 50px 50px 0;
  padding: 0 1.5rem;
  cursor: pointer;
  color: var(--color-black);
  transition: background-color var(--transition-speed);
  display: grid;
  place-items: center;
  width:20%;
}

.frontpagecl-hero-search-btn:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* Results Container */
#predictive-results-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Result Item */
.predictive-result-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--color-gold);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: background 0.2s ease-in-out;
  z-index: 100000;
  background-color: var(--color-dark-green);
}

.predictive-result-item:hover {
  background-color: var(--color-light-green);
  color: var(--color-black);
}

/* Thumbnail Image */
.predictive-item-thumbnail img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}

/* Content Inside Result */
.predictive-item-content {
  flex: 1;
}

.predictive-item-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--color-yellow);
}

.predictive-item-excerpt {
  font-size: 13px;
  color: var(--color-day-text);
  line-height: 1.3;
}

/* Button Group */
.frontpagecl-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.frontpagecl-hero-btn {
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: all var(--transition-speed);
}

/* Base Buttons */
.frontpagecl-btn-primary,
.frontpagecl-btn-secondary,
.frontpagecl-btn-siren {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid transparent;
  transition: all var(--transition-speed);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Primary */
.frontpagecl-btn-primary {
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-black);
}
.frontpagecl-btn-primary:hover {
  background-color: var(--color-amber);
  color: var(--color-black);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px var(--glow-color-day);
}

/* Secondary */
.frontpagecl-btn-secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.frontpagecl-btn-secondary:hover {
  background-color: var(--color-gold);
  color: var(--color-black);
}

/* Hero Button Variants */
.frontpagecl-hero-btn.frontpagecl-btn-primary {
  background-color: transparent;
}

.frontpagecl-hero-btn.frontpagecl-btn-secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.1);
}
.frontpagecl-hero-btn.frontpagecl-btn-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* Responsive Adjustments */
@media (max-width: 575.98px) {
  .frontpagecl-hero-title { font-size: 2rem; }
  .frontpagecl-hero-subtitle { font-size: 1rem; }
  .frontpagecl-hero-search-wrapper { flex-direction: column; border-radius: 20px; max-width: 100%; }
  .frontpagecl-hero-search-input { padding: .8rem 1rem; font-size:.95rem; border-radius: 20px 20px 0 0; }
  .frontpagecl-hero-search-btn { width:100%; border-radius: 0 0 20px 20px; padding:.75rem; }
  .frontpagecl-hero-glass-card { padding: 1.5rem; }
  .frontpagecl-hero-section { padding: 2rem 1rem; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .frontpagecl-hero-title { font-size: 2.25rem; }
  .frontpagecl-hero-subtitle { font-size: 1.1rem; }
  .frontpagecl-hero-search-wrapper { max-width: 90%; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .frontpagecl-hero-title { font-size: 3rem; }
  .frontpagecl-hero-subtitle { font-size: 1.15rem; }
  .frontpagecl-hero-glass-card { max-width: 600px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .frontpagecl-hero-title { font-size: 3.5rem; }
  .frontpagecl-hero-subtitle { font-size: 1.2rem; }
}
@media (min-width: 1200px) {
  .frontpagecl-hero-title { font-size: 3.8rem; }
  .frontpagecl-hero-subtitle { font-size: 1.25rem; }
}

/* ===========================
Intro & Info Hub
=========================== */
.frontpagecl-intro-section,
.frontpagecl-info-hub-section {
  background-color: var(--color-gold);
  color: var(--color-black);
}
.frontpagecl-info-hub-section { width:100%; text-align:center; }
.frontpagecl-intro-section h2, .frontpagecl-info-hub-section h3, .frontpagecl-info-hub-section h4 { color: var(--color-deep-green); }
.frontpagecl-intro-content { text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.frontpagecl-intro-section .frontpagecl-btn-primary { background-color: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.frontpagecl-intro-section .frontpagecl-btn-primary:hover, .frontpagecl-intro-section .frontpagecl-btn-primary:focus-visible { background-color: color-mix(in srgb, var(--color-black) 80%, transparent); transform: translateY(-3px); box-shadow: 0 10px 20px color-mix(in srgb, var(--color-black) 12%, transparent); }
.frontpagecl-info-card, .frontpagecl-amazon-banner {
  background: rgba(255,255,255,0.06);
  padding: 2.5rem;
  border-radius: 1rem;
  margin-top: 20px;
}
.frontpagecl-info-hub-section a { color: var(--color-deep-green); font-weight: 700; }
.frontpagecl-info-hub-section a:hover, .frontpagecl-info-hub-section a:focus-visible { color: var(--color-black); outline: 3px solid var(--color-gold); outline-offset: 3px; }
.frontpagecl-marquee {
  background-color: var(--color-black); color: var(--color-white); padding: .5rem; border-radius: 50px; margin-bottom:1rem; text-align:center; overflow:hidden; white-space:nowrap;
}
.frontpagecl-siren-light {
  position: absolute; top:50%; left:10px; transform: translateY(-50%); width:10px; height:10px; background-color: var(--color-amber); border-radius:50%;
  animation: frontpagecl-siren-flash 1.5s infinite;
}
@keyframes frontpagecl-siren-flash { 0%,100%{ box-shadow: 0 0 5px 2px color-mix(in srgb,var(--color-amber)70%,transparent); opacity:1;} 50%{ box-shadow:none; opacity:.5;} }
.frontpagecl-amazon-banner { grid-column:1/-1; text-align:center; }
.frontpagecl-amazon-banner figcaption { font-size:.8rem; margin-top:.5rem; opacity:.85; color: color-mix(in srgb, var(--color-black) 55%, var(--color-white) 45%); }

/* Responsive Info/Intro */
@media (max-width: 575.98px) {
  .frontpagecl-info-card, .frontpagecl-amazon-banner { padding:1.5rem; }
  .frontpagecl-marquee { font-size:.85rem; border-radius:30px; }
  .frontpagecl-amazon-banner figcaption { font-size:.7rem; }
  .frontpagecl-siren-light { width:8px; height:8px; left:6px; }
}
@media (min-width: 576px) {
  .frontpagecl-info-card, .frontpagecl-amazon-banner { padding:2rem; }
  .frontpagecl-marquee { font-size:1rem; }
}
@media (min-width: 768px) {
  .frontpagecl-intro-content { flex-direction:row; justify-content:center; gap:2rem; }
  .frontpagecl-info-card, .frontpagecl-amazon-banner { padding:2.5rem; }
}

/* ===========================
Features & convertoshop glass section
=========================== */
.frontpagecl-features-section { background-color: color-mix(in srgb, var(--color-white) 96%, transparent); color: var(--color-black); }
.frontpagecl-feature-card {
  background: var(--color-white); padding:2.5rem; border-radius: 1rem;
  box-shadow: 0 10px 30px color-mix(in srgb,var(--color-black)12%,transparent);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.frontpagecl-feature-card:hover, .frontpagecl-feature-card:focus-within { transform: translateY(-10px); box-shadow: 0 20px 40px color-mix(in srgb,var(--color-black)20%,transparent); }
.frontpagecl-feature-card h2 { color: var(--color-deep-green); }
.frontpagecl-feature-card h6, .frontpagecl-feature-card h5 { color: var(--color-gold); }
.frontpagecl-feature-card .frontpagecl-btn-secondary { border-color: var(--color-deep-green); color: var(--color-deep-green); }
.frontpagecl-feature-card .frontpagecl-btn-secondary:hover, .frontpagecl-feature-card .frontpagecl-btn-secondary:focus-visible { background-color: var(--color-deep-green); color: var(--color-white); }

/* convertoshop */
.convertoshop-feature-section { background: linear-gradient(135deg, color-mix(in srgb,var(--color-black)40%,transparent), var(--color-black)); color: var(--color-white); padding: clamp(3rem,6vw,5rem) 1rem; text-align:center; }
.convertoshop-flex-wrapper { display:flex; flex-direction:column; gap:2rem; max-width:1200px; margin:0 auto; width:100%; background-color: var(--color-deep-green); padding: 1rem; border-radius: 1rem; }
.convertoshop-glass-card {
  background: rgba(255,255,255,0.06); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; box-shadow: 0 12px 40px color-mix(in srgb,var(--color-black)24%,transparent); transition: all .4s ease;
}
.convertoshop-img-card img { width: 100%; height: auto; border-radius: 20px; display:inline-block; padding: 20px; object-fit: cover; }
.convertoshop-content-card { padding: 2rem; }
.convertoshop-content-card h2 { color: var(--color-yellow); font-size: 1.8rem; margin-bottom:.5rem; }
.convertoshop-content-card h5 { color: color-mix(in srgb, var(--color-light-green) 60%, var(--color-white) 40%); margin-bottom:1rem; }
.convertoshop-content-card p { color: color-mix(in srgb, var(--color-white) 88%, transparent); line-height:1.6; font-size:1rem; }
.convertoshop-content-card .frontpagecl-btn-secondary { border-color: var(--color-yellow); color: var(--color-yellow); }
.convertoshop-content-card .frontpagecl-btn-secondary:hover, .convertoshop-content-card .frontpagecl-btn-secondary:focus-visible { background-color: var(--color-yellow); color: var(--color-black); box-shadow: 0 6px 18px color-mix(in srgb,var(--color-yellow) 24%,transparent); }

/* convertoshop responsive breakpoints */
@media (max-width: 575.98px) { .convertoshop-content-card { padding:1.25rem; } .convertoshop-img-card img { width:100%; } }
@media (min-width: 576px) { .convertoshop-content-card { padding:1.5rem; } .convertoshop-img-card img { width:100%; } }
@media (min-width: 768px) { .convertoshop-flex-wrapper { flex-direction: column; } .convertoshop-img-card img { width:100%; } }
@media (min-width: 992px) { .convertoshop-flex-wrapper { flex-direction: row; align-items:center; } .convertoshop-img-card, .convertoshop-content-card { flex: 1 1 50%; } .convertoshop-img-card img { height:auto; object-fit:cover; } }
@media (min-width: 1200px) { .convertoshop-content-card h2 { font-size:2rem; } .convertoshop-content-card p { font-size:1.1rem; } }

/* ===========================
Connect Experts section
=========================== */
.frontpagecl-connect-experts-section { background-color: var(--color-deep-green); color: var(--color-white); padding: 3rem 1rem; }
.frontpagecl-connect-text h2 { font-size: clamp(2.5rem,8vw,4.5rem); margin-bottom:1.5rem; font-weight: 800; color: var(--color-white); }
.frontpagecl-text-light { font-weight:400; opacity:.85; color: color-mix(in srgb,var(--color-white)85%,transparent); }
.frontpagecl-text-highlight { color: var(--color-gold); }
.frontpagecl-text-box { background-color: var(--color-white); color: var(--color-black); padding:.2rem 1rem; display:inline-block; border-radius:5px; }
.frontpagecl-connect-images { position: relative; display:grid; place-items:center; min-height:300px; }
.frontpagecl-img-fore { width: clamp(200px,60%,300px); z-index:2; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); }
.frontpagecl-img-back { position:absolute; width: clamp(250px,80%,380px); z-index:1; opacity:.5; animation: frontpagecl-rotate 20s linear infinite; }
@keyframes frontpagecl-rotate { from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

/* Connect Experts responsiveness */
@media (max-width: 575.98px) {
  .frontpagecl-feature-card { padding:1.5rem; }
  .frontpagecl-connect-text h2 { font-size:2rem; text-align:center; }
  .frontpagecl-connect-images { min-height:200px; }
  .frontpagecl-img-fore { width:70%; } .frontpagecl-img-back { width:80%; }
}
@media (min-width: 576px) { .frontpagecl-feature-card { padding:2rem; } .frontpagecl-connect-text h2 { font-size:2.5rem; } }
@media (min-width: 768px) { .frontpagecl-feature-card { padding:2.5rem; } .frontpagecl-connect-text h2 { font-size:3rem; } .frontpagecl-connect-images { min-height:300px; } .frontpagecl-img-fore{ width:60%; } .frontpagecl-img-back{ width:70%; } }
@media (min-width: 992px) { .frontpagecl-feature-card { padding:3rem; } .frontpagecl-connect-text h2 { font-size:3.5rem; } }
@media (min-width: 1200px) { .frontpagecl-feature-card { padding:3.5rem; } .frontpagecl-connect-text h2 { font-size:4rem; } }
@media (min-width: 1400px) { .frontpagecl-feature-card { padding:4rem; } .frontpagecl-connect-text h2 { font-size:4.5rem; } }

/* ===========================
Partners section
=========================== */
.frontpagecl-partners-section { padding:2rem 1rem; background-color: color-mix(in srgb,var(--color-white)96%,transparent); border-top:1px solid color-mix(in srgb,var(--color-black)6%,transparent); }
.frontpagecl-partners-section h2 { font-size:16px; font-weight:700; text-align:center; margin-bottom:1.5rem; color: color-mix(in srgb,var(--color-black)60%,transparent); text-transform:uppercase; letter-spacing:.5px; }
.frontpagecl-partners-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; }
.frontpagecl-partner-card {
  width:220px; height:220px; background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-black) 6%, transparent);
  border-radius:50%; padding:1rem; text-align:center;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-black) 8%, transparent);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
}
.frontpagecl-partner-card:hover, .frontpagecl-partner-card:focus-within { transform: translateY(-4px); box-shadow: 0 10px 20px color-mix(in srgb,var(--color-black)16%,transparent); }
.frontpagecl-partner-card img { max-height:100px; max-width:80%; margin-bottom:10px; object-fit:contain; margin-top:5px; }
.frontpagecl-partner-card h3 { font-size:14px; font-weight:700; color: color-mix(in srgb,var(--color-black)70%,transparent); margin: .5rem 0 .25rem; text-align:center; }
.frontpagecl-partner-card p { font-size:12px; color: color-mix(in srgb,var(--color-black)50%,transparent); line-height:1.4; text-align:center; margin:0; }
.frontpagecl-partner-card .frontpagecl-btn-secondary {
  font-size:12px; padding:6px 12px; border-radius:4px; display:inline-block; text-decoration:none; background-color: var(--color-deep-green); color: var(--color-white); transition: background-color var(--transition-speed);
}
.frontpagecl-partner-card .frontpagecl-btn-secondary:hover, .frontpagecl-partner-card .frontpagecl-btn-secondary:focus-visible { background-color: color-mix(in srgb,var(--color-deep-green) 85%, var(--color-black) 10%); color: var(--color-white); outline: 3px solid var(--color-gold); outline-offset: 3px; }

/* Partners responsiveness */
@media (max-width: 575.98px) {
  .frontpagecl-partner-card { padding:1.5rem; }
  .frontpagecl-partner-card img { height:60px; max-width:120px; margin-bottom:1rem; }
  .frontpagecl-footer-links a { display:block; margin:.3rem 0; text-align:center; }
}
@media (min-width: 576px) {
  .frontpagecl-partners-grid { gap:1.5rem; }
}
@media (min-width: 768px) {
  .frontpagecl-partners-grid { gap:2rem; }
  .frontpagecl-partner-card img { height:70px; max-width:140px; }
}
@media (min-width: 992px) { .frontpagecl-partner-card { padding:2.5rem; } }
@media (min-width: 1200px) { .frontpagecl-partners-grid { gap:2.5rem; } }
@media (min-width: 1400px) { .frontpagecl-partner-card { padding:3rem; } }

/* ===========================
Footer
=========================== */
.frontpagecl-main-footer { background-color: var(--color-black); border-top: 2px solid var(--color-deep-green); color: var(--color-white); padding: 3rem 1rem 1rem; }
.frontpagecl-footer-cta h3 { color: var(--color-gold); }
.frontpagecl-footer-links a { margin-right: 1rem; display:inline-block; margin-bottom:.5rem; text-align:left; color: var(--color-white); text-decoration: none; opacity:.9; }
.frontpagecl-footer-links a:hover, .frontpagecl-footer-links a:focus-visible { opacity: 1; text-decoration: underline; outline: 3px solid var(--color-gold); outline-offset: 3px; }
.frontpagecl-copyright { text-align:center; padding-top: 3rem; font-size:.9rem; opacity:.6; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 3rem; color: color-mix(in srgb,var(--color-white)85%,transparent); }

/* =============================
   ConnectLabours Universal Style
   SEO | Accessibility | Perf
   ============================= */

.circle-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding: 0 1rem;
}
.circle-menu a {
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-speed);
}
.circle-menu a:hover,
.circle-menu a:focus-visible {
  color: var(--color-black);
  outline: 2px dashed var(--color-gold);
  outline-offset: 4px;
}

.circle-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg-day);
  border: 2px solid var(--color-yellow);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  text-align: center;
  color: var(--color-white);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
  flex: 0 0 auto;
  cursor: pointer;
}
.circle-icon i {
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
}
.circle-icon:hover,
.circle-icon:focus-visible {
  background: var(--color-yellow);
  color: var(--color-black);
  transform: scale(1.05);
  box-shadow: 0 0 10px var(--glow-color-day);
}

.testimonials-heading {
  font-size: 2rem;
  margin: 50px 0 20px;
  text-align: center;
  color: var(--color-deep-green);
}
.testimonial-quote {
  color: var(--color-dark-green);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 30px;
  padding: 0 15px;
}
.testimonials-slider {
  margin: 0 auto 30px;
  text-align: center;
  padding: 20px;
}

/* Responsive typography */
@media (max-width: 575.98px) {
  .circle-icon { width: 70px; height: 70px; font-size: 0.7rem; }
  .circle-icon i { font-size: 1.1rem; }
  .testimonials-heading { font-size: 1.5rem; }
  .testimonial-quote { font-size: 0.9rem; padding: 0 10px; }
}
@media (min-width: 576px) {
  .circle-icon { width: 80px; height: 80px; font-size: 0.75rem; }
  .circle-icon i { font-size: 1.2rem; }
  .testimonials-heading { font-size: 1.75rem; }
}
@media (min-width: 768px) {
  .circle-icon { width: 90px; height: 90px; font-size: 0.8rem; }
  .circle-icon i { font-size: 1.3rem; }
  .testimonials-heading { font-size: 2rem; }
}
@media (min-width: 992px) {
  .circle-icon { width: 100px; height: 100px; font-size: 0.85rem; }
  .circle-icon i { font-size: 1.4rem; }
  .testimonials-heading { font-size: 2.2rem; }
}
@media (min-width: 1200px) {
  .testimonials-heading { font-size: 2.5rem; }
  .testimonial-quote { font-size: 1.1rem; }
}
@media (min-width: 1400px) {
  .circle-icon { width: 110px; height: 110px; font-size: 0.9rem; }
  .circle-icon i { font-size: 1.5rem; }
  .testimonials-heading { font-size: 2.75rem; }
  .testimonial-quote { font-size: 1.2rem; }
}

/* Blog Grid */
.connectlabours-post-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 20px 0;
}
.connectlabours-card {
  background-color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  max-width: 100%;
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.connectlabours-card:hover {
  transform: translateY(-5px);
}
.connectlabours-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.connectlabours-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.connectlabours-title {
  font-size: 1.2rem;
  margin: 0 0 10px;
}
.connectlabours-title a {
  text-decoration: none;
  color: var(--color-deep-green);
}
.connectlabours-date {
  font-size: 0.9rem;
  color: var(--color-dark-green);
  margin-bottom: 10px;
}
.connectlabours-excerpt {
  flex-grow: 1;
  font-size: 0.95rem;
  color: var(--color-black);
  margin-bottom: 15px;
}
.connectlabours-readmore {
  background-color: var(--color-deep-green);
  color: var(--color-white);
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: background var(--transition-speed);
}
.connectlabours-readmore:hover,
.connectlabours-readmore:focus-visible {
  background-color: var(--color-light-green);
  color: var(--color-black);
}

/* WCFM Store */
.wcfmStore-note {
  background: var(--color-yellow);
  border-left: 4px solid var(--color-gold);
  padding: 15px;
  margin: 20px 0;
  font-size: 0.95rem;
  color: var(--color-black);
}
.wcfmStore-vendor {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 2px solid var(--color-deep-green);
}
.wcfmStore-vendor-title {
  font-size: 1.6rem;
  color: var(--color-deep-green);
  margin-bottom: 20px;
}
.wcfmStore-product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.wcfmStore-product {
  background: var(--glass-bg-day);
  padding: 15px;
  border: 1px solid var(--color-light-green);
  border-radius: 8px;
  width: calc(25% - 20px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.3s ease;
}
.wcfmStore-product:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.wcfmStore-title {
  font-size: 1rem;
  margin: 10px 0 5px;
  color: var(--color-black);
}
.wcfmStore-price {
  margin-bottom: 10px;
}
.wcfmStore-price-sale {
  color: var(--color-gold);
  font-weight: bold;
  margin-right: 8px;
}
.wcfmStore-price-regular del {
  color: var(--color-dark-green);
}
.wcfmStore-price-normal {
  color: var(--color-deep-green);
  font-weight: bold;
}
.wcfmStore-addtocart {
  background-color: var(--color-deep-green);
  color: var(--color-white);
  padding: 8px 12px;
  display: inline-block;
  border-radius: 5px;
  margin-top: 5px;
  text-decoration: none;
  transition: background var(--transition-speed);
}
.wcfmStore-addtocart:hover,
.wcfmStore-addtocart:focus-visible {
  background-color: var(--color-light-green);
  color: var(--color-black);
}
.wcfmStore-quickview {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--color-gold);
  text-decoration: underline;
  background-color: var(--color-black);
  padding: 8px 12px;
}

@media (max-width: 768px) {
  .wcfmStore-product { width: 100%; }
}

/* Checkbox styling */
.checkbox {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  cursor: pointer;
  user-select: none;
  gap: 10px;
  color: var(--color-black);
}
.checkbox input[type="checkbox"] {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-deep-green);
  border-radius: 4px;
  background-color: var(--color-white);
  position: relative;
  transition: all 0.2s;
}
.checkbox input[type="checkbox"]::after {
  content: '';
  position: absolute;
  display: none;
  width: 6px;
  height: 12px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  top: 4px;
  left: 8px;
}
.checkbox input[type="checkbox"]:checked {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
}
.checkbox input[type="checkbox"]:checked::after {
  display: block;
}

.show-password-input {
  display: inline-block;
  cursor: pointer;
  margin-left: 8px;
  font-size: 1rem;
  user-select: none;
  color: var(--color-deep-green);
  transition: color 0.3s ease, transform 0.2s ease;
}
.show-password-input:hover,
.show-password-input:focus-visible {
  color: var(--color-gold);
  transform: scale(1.1);
}

/* newcss ends */