@import 'header.css';
@import 'hero.css';
@import 'footer.css';
@import 'nos-ref.css';
@import 'card-products.css';
@import 'marketplace-section.css';


/* ===================================
   VARIABLES CSS (Custom Properties)
   =================================== */
   :root {
    /* Colors */
    --primary-color: #234D96;
    --primary-dark: #234D96;
    --secondary-color: #234D96;
    --accent-color: #0066cc;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-light: #999999;
    --white: #ffffff;
    --background-light: #f5f5f5;
    --border-light: #eeeeee;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    
    /* Typography */
    --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 14px;
    --font-size-large: 18px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --letter-spacing: 0.5px;
    
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    
    /* Layout */
    --header-height: 60px;
    --logo-width: 180px;
    --logo-height: 60px;
    --search-max-width: 600px;
    
    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-header: 0 2px 10px var(--shadow-light);
    --shadow-search: 0 2px 5px var(--shadow-light);
  }
  
  /* ===================================
     RESET & BASE STYLES
     =================================== */
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background-light);
    margin: 0 auto;
  }
  @media (min-width: 1200px) {
    body {
      max-width: 1200px;
      margin: 0 auto;
    }
  }
  
  /* Large screens - 1500px and above */
  @media (min-width: 1500px) {
    :root {
      --font-size-base: 16px;
      --font-size-large: 20px;
      --spacing-lg: 30px;
      --spacing-xl: 40px;
      --logo-width: 220px;
      --logo-height: 70px;
      --search-max-width: 700px;
    }
    
    body {
      max-width: 1600px;
      font-size: var(--font-size-base);
    }
    
    .section-header {
      padding: 1.5rem 0;
    }
    
    .section-title {
      font-size: 2rem;
      padding-bottom: 10px;
    }
    
    .section-header h2 {
      font-size: 2rem;
    }
    
    .section-header p {
      font-size: 1.1rem;
    }
  }


 /* ===================================
    H2 SECTIONS
    =================================== */

.section-header {
  text-align: start; /* Centers the text and inline/block elements */
  padding: 1rem 0; /* Optional: Adds some vertical spacing */
}

.section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-variant: all-petite-caps; 
  border-bottom: #c0392b 2px solid;
  width: max-content;
  margin: 0 auto; 
  color: rgb(32, 30, 30);
}

.section-header {
  text-align: center; /* Centers the text and inline/block elements */
  padding: 1rem 0; /* Optional: Adds some vertical spacing */
}

.section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-variant: all-petite-caps; 
  border-bottom: #c0392b 2px solid;
  width: max-content;
  margin: 0 auto; 
  color: rgb(32, 30, 30);
}

.section-header h2 {
  font-variant: all-petite-caps; 
  width: max-content;
  color: var(--accent-color); 
  margin: 0 auto; 
}

.section-header p {
  width: max-content;
  color: black;
  text-decoration: none; 
  margin: 0 auto; 
}