@import "./fonts.css";
:root {
  --primary-color: #14cabc;
  --grad-color: linear-gradient(#2fd5c7, #15b2df);
  --dark: #000;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

p {
  font-size: 17px;
}

a {
  text-decoration: none !important;
}
ul {
  list-style: none;
}
/* presets  */
.text-light {
  color: #fff !important;
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-dark {
  color: #010101 !important;
}
.bg-primary {
  background-color: #e5fffd !important;
}
.bg-gradient {
  background: var(--grad-color) !important;
}
.bg-light {
  background: #fff !important;
}
.para {
  color: #555;
  font-family: "GeneralSans", sans-serif;
  font-weight: 400;
}
.theme__border {
  border: 1px solid var(--primary-color);
  border-radius: 20px;
}
.border-rounded {
  border-radius: 20px;
}
.level-1 {
  font-size: 48px;
  font-weight: 700;
  color: #000;
  font-family: "Tomato Grotesk", sans-serif;
}
.level-2 {
  font-size: 44px;
  font-weight: 700;
  font-family: "Tomato Grotesk", sans-serif;
  text-transform: capitalize;
  color: #000
}
.level-3 {
  font-size: 34px;
  font-weight: 700;
  font-family: "Tomato Grotesk", sans-serif;
  text-transform: capitalize;
  color: #000;
  margin-bottom: 20px;
}

.level-4 {
  font-size: 32px;
  font-weight: 700;
  font-family: "Tomato Grotesk", sans-serif;
  text-transform: capitalize;
  color: #000;
  margin-bottom: 20px;
}
.norm {
  text-transform: unset;
}
.level-5 {
  font-size: 22px;
  font-weight: 600;
  font-family: "Tomato Grotesk", sans-serif;
  text-transform: capitalize;
  color: #000
}

.theme__btn {
  display: inline-block;
  /* max-width: 150px; */
  width: 150px;
  height: 50px;
  line-height: 45px;
  text-align: center;
  font-size: 16px;
  border-radius: 30px;
  transition: 0.3s ease;
  font-family: "GeneralSans", sans-serif;
  font-weight: 500;
}

.btn__transparent {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}
.btn__transparent:hover {
  background: var(--primary-color);
  color: #fff;
}
.btn__grad {
  background: var(--grad-color);
  color: #fff;
  border: 1px solid transparent;
}
.btn__grad:hover {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.theme__btn.bg-light:hover {
  background: var(--primary-color) !important;
}

figure {
  margin-bottom: 0;
}
.img_rounded {
  border-radius: 20px;
}
/* presets  */

@media (max-width: 991px) {
  .level-1 {
    font-size: 40px;
  }
  .level-2 {
    font-size: 30px;
  }
  .level-3 {
    font-size: 26px;
  }
  .level-4 {
    font-size: 22px;
    margin-bottom: 10px;
  }
  .level-5 {
    font-size: 20px;
  }
}
@media (max-width: 575px) {
  .theme__btn {
    width: 130px;
    height: 40px;
    line-height: 35px;
    font-size: 14px;
}
  .img_rounded {
    border-radius: 10px;
  }
  .level-1 {
    font-size: 28px;
  }
  .level-2 {
    font-size: 22px;
  }
  .level-3 {
    font-size: 20px;
  }
  .level-4 {
    font-size: 20px;
  }
  .level-5 {
    font-size: 18px;
  }
  p, .para {
    font-size: 15px;
  }
}