/* ==============================
   1. CSS Variables
============================== */
:root {
  /* Colors */
  --background: hsl(0, 0%, 98%);
  --color-primary: #6fb327;
  --light-color-primary: #6fb32712;
  --light-color-primary-md: #6fb32722;
  /* --light-color-primary: #6fb32737; */
  --light-primary: #e9eef5;
  --light-primary-hover: #e9eef5;
  --light-bg-color-secondary: rgba(111, 157, 241, 0.104);
  --light-hover-bg: #f8f8f8;
  --light-color: #e9e9e9;
  --danger-color: #dc3545;
  --form-border: #aaa;
  --form-shadow: 0 0 3px -1px #67bb3a;
  --form-shadow-color: #67bb3a;
  --color-grey: #e9eef5;
  --text-color: #555;
  --text-color-dark: #333;

  /* Typography */
  --fs-small: 12px;
  --fs-medium: 14px;
  --fs-large: 16px;

  /* Misc */
  --radius-15: 15px;
  --shadow: 0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04);
  --transition-time-animate: .3s ease-out;
  --gray1:hsl(0, 0%, 99%);
  --gray2:hsl(0, 0%, 97.3%);
  --gray3:hsl(0, 0%, 95.1%);
  --gray4:hsl(0, 0%, 93%);
  --gray5:hsl(0, 0%, 90.9%);
  --gray6:hsl(0, 0%, 88.7%);
  --gray7:hsl(0, 0%, 85.8%);
  --gray8:hsl(0, 0%, 78%);
  --gray9:hsl(0, 0%, 56.1%);
  --gray10:hsl(0, 0%, 52.3%);
  --gray11:hsl(0, 0%, 43.5%);
  --gray12:hsl(0, 0%, 9%);

    --color-gray-150:#e9eef5;
    --color-slate-50:oklch(98.4% .003 247.858);
    --color-slate-100:oklch(96.8% .007 247.896);
    --color-slate-200:oklch(92.9% .013 255.508);
    --color-slate-300:oklch(86.9% .022 252.894);
    --color-slate-400:oklch(70.4% .04 256.788);
    --color-slate-500:oklch(55.4% .046 257.417);
    --color-slate-600:oklch(44.6% .043 257.281);
    --color-slate-700:oklch(37.2% .044 257.287);
    --color-slate-800:oklch(27.9% .041 260.031);
    --color-slate-900:oklch(20.8% .042 265.755);
    --color-slate-950:oklch(12.9% .042 264.695);

    --color-gray-50:var(--color-slate-50);
    --color-gray-100:var(--color-slate-100);
    --color-gray-200:var(--color-slate-200);
    --color-gray-300:var(--color-slate-300);
    --color-gray-400:var(--color-slate-400);
    --color-gray-500:var(--color-slate-500);
    --color-gray-600:var(--color-slate-600);
    --color-gray-700:var(--color-slate-700);
    --color-gray-800:var(--color-slate-800);
    --color-gray-900:var(--color-slate-900);
    --color-gray-950:var(--color-slate-950);
}
.bg-gray{
  background-color: var(--color-slate-400);
}
/* ==============================
   2. Reset / Base Styles
============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* font-family: 'Inter', ui-sans-serif, system-ui, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  /* font-size: 0.9rem; */
  line-height: 1.5;
  background-color: var(--background);
  color: var(--text-color);
}
.text-color-dark{
  color: var(--text-color-dark);
}

/* container  */
.custom-container{
  width: 100%;
  max-width: 85%;
  /* padding-inline: 20px; */
  margin: 0 auto;
}
.custom-sm-container{
  width: 100%;
  max-width: 75%;
  margin: 0 auto;
}
/* section */
section, footer{
  padding: 68px 10px 68px;
  
}

/* list */
ul{
  margin: 0;
  padding: 0;
}
ul li{
  list-style: none;
}

/* heading */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0;
}
.subheading{
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--text-color-dark);
  margin-bottom: 15px;
}
/* ==============================
   3. Headings Sizes
============================== */
/* h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; } */

/* ==============================
   4. Buttons
============================== */
.btn {
  cursor: pointer;
  transition: var(--transition-time-animate);
  outline: none;
  box-shadow: none;
  border-radius: 10px;
  font-weight: 700;
  /* border: none; */
}

.btn-primary {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:visited {
  outline: none;
  box-shadow: none;
}

.btn-outline-primary {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-secondary {
  background-color: var(--light-primary);
  border-color: var(--light-primary);
}

.btn-secondary:hover {
  background-color: var(--light-primary-hover);
}

.btn-outline-secondary {
  background-color: #fff;
  color: var(--light-primary);
  border-color: var(--light-primary);
}

.btn-outline-secondary:hover {
  background-color: var(--light-primary-hover);
  border-color: var(--light-primary);
}

/* ==============================
   5. Cards
============================== */
.myCard {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 20px;
}

/* ==============================
   6. Forms & Inputs
============================== */
input[type="checkbox"] {
  accent-color: var(--color-primary);
}

/* ==============================
   7. Tables
============================== */
table td,
table th {
  vertical-align: middle;
  border-bottom: inherit !important;
}

/* ==============================
   8. Links & Images
============================== */
a {
  display: inline-block;
  text-decoration: none;
  color: initial;
}

a:hover {
  color: initial;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.line-height-1{
  line-height: 1.5;
}


/* ==============================
   10. Utilities
============================== */
.text-primary { color: var(--color-primary) !important; }
.color-primary { color: var(--color-primary); }
.color-grey { color: var(--color-grey); }

.small-text { font-size: 14px; }

.fs-sm { font-size: var(--fs-small) !important; }
.fs-md { font-size: var(--fs-medium) !important; }
.fs-lg { font-size: var(--fs-large) !important; }

.fw-500 { font-weight: 500; }


@media screen and (max-width:998px) {
  .custom-container{
    max-width: 90%;
  }
}