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

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --theme-color: #016992;
  --theme-color-red: #BF3127;
  --theme-color-green: #4AA181;
  --theme-color-purple: #7D51B5;
  --font-family-open-sans: 'Open Sans', sans-serif;
}

@layer base {
  body {
    font-family: var(--font-family-open-sans);

  }
}


@layer components {
  .custom-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    
  }
  
  @media (min-width: 320px) {
    .custom-container {
      max-width: 95%;
    }
  }
  
  @media (min-width: 480px) {
    .custom-container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .custom-container {
      max-width: 680px;
    }
  }
  @media (min-width: 992px) {
    .custom-container {
      max-width: 890px;
    }
  }
  
  @media (min-width: 1440px) {
    .custom-container {
      max-width: 1180px;
    }
  }
  @media (min-width: 1920px) {
    .custom-container {
      max-width: 1240px;
    }
  }
 
}