:root {
  --primary: #c52f33;
  --secondary: #fc8f90;
  --color: #7c7979;
  --color2: #a2a1a1;
  --dark: #f7f3ea;
  --light: #f3f3f3;
  --button: #b44446;
}

.text-button {
  color: var(--button);
}

.text-primary {
  color: var(--primary);
}
.text-secondary {
  color: var(--secondary);
}
.text-color {
  color: var(--color);
}
.text-color2 {
  color: var(--color2);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-dark {
  background-color: var(--dark);
}
.bg-light {
  background-color: var(--light);
}

/* body classes */
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  background-color: white;
  font-family: "poppins";
  color: #202020;
}

.font-akaya {
  font-family: "Akaya Kanadaka", cursive;
}

.font-vidaloka {
  font-family: "Vidaloka", serif;
}

/* custom classes */
.main_width {
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

/* .web_width {
  max-width: 1274px;
  width: 88%;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
} */

@media (min-width: 100px) {
  .web_width {
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
  .paddingly {
    padding-top: 25px;
    padding-bottom: 25px;
  }
   .marginy {
    margin-top: 25px;
    margin-bottom: 25px;
  }
}

@media (min-width: 768px) {
  .web_width {
    max-width: 1440px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .paddingly {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .marginy {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

@media (min-width: 1024px) {
  .web_width {
    max-width: 1274px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .paddingly {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .marginy {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media (min-width: 1280px) {
  .web_width {
    max-width: 1274px;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
  }
  .paddingly {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .marginy {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

@layer utilities {
  .text-stroke-white {
    text-shadow:
      2px 0 white,
      -2px 0 white,
      0 2px white,
      0 -2px white,
      2px 2px white,
      -2px 2px white,
      2px -2px white,
      -2px -2px white;
  }

  @media (max-width: 1024px) {
    .text-stroke-white {
      text-shadow:
        1px 0 white,
        -1px 0 white,
        0 1px white,
        0 -1px white,
        1px 1px white,
        -1px 1px white,
        1px -1px white,
        -1px -1px white;
    }
  }
}