:root {
  /**
   * colors
   */

  --raw-seinna: #e38445;
  /* --sizzling-sunrise: hsl(51, 95%, 54%); */
  --sizzling-sunrise: #f9ba1a;
  --scarlet: hsl(13, 96%, 47%);
  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);

  /**
   * typography
   */

  --ff-saira-stencil-one: "Saira Stencil One", sans-serif;
  --ff-poppins: "Poppins", sans-serif;
  --ff-roboto: "Roboto", sans-serif;

  --fs-1: 2rem;
  --fs-2: calc(1.813rem + 1vw);
  --fs-3: calc(1.313rem + 1vw);
  --fs-4: 1.4rem;
  --fs-5: 1rem;
  --fs-6: 0.813rem;
  --fs-7: 0.75rem;

  --fw-400: 400;
  --fw-700: 700;

  /**
   * transition
   */

  --transition-1: 0.25s ease-in-out;

  /**
   * spacing
   */

  --section-padding: 80px;

  /**
   * radius
   */

  --radius-4: 4px;
  --radius-12: 12px;
}

/*-----------------------------------*\
 * #THEME COLORS
\*-----------------------------------*/

body.dark_theme {
  --bg-primary: hsl(0, 0%, 12%);
  --bg-secondary: hsl(0, 0%, 19%);
  --color-primary: hsl(0, 0%, 100%);
  /* --color-secondary: hsl(0, 0%, 80%); */
  --color-secondary: hsl(191, 53%, 82%);
  --card-shadow: hsla(240, 100%, 100%, 0.648);
  --color-dark: white;
  --input-bg: hsl(0, 0%, 16%);

  --shadow-1: 1px 1px 10px var(--card-shadow);
}

body.light_theme {
  /* --bg-primary: hsl(0, 0%, 90%); */
  --bg-primary: #efefef;
  --bg-secondary: hsl(0, 0%, 100%);
  --color-primary: hsl(0, 0%, 12%);
  --color-dark: hsl(0, 0%, 0%);
  --color-secondary: hsl(0, 0%, 37%);
  --card-shadow: hsla(0, 0%, 0%, 0.1);
  --input-bg: hsl(0, 0%, 93%);

  --shadow-1: 10px 10px 40px var(--card-shadow);
}
/* utilities */

.d-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.u-center-text {
  text-align: center !important;
}
.u-margin-bottom-small {
  margin-bottom: 0.5rem !important;
}
.u-margin-bottom-medium {
  margin-bottom: 2.5rem !important;
}
.u-margin-bottom-big {
  margin-bottom: 8rem !important;
}
.u-margin-top-medium {
  margin-top: 2rem !important;
}
.u-margin-top-small {
  margin-top: 1rem !important;
}

.u-margin-top-big {
  margin-top: 5rem !important;
}
.u-margin-top-huge {
  margin-top: 9rem !important;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited {
  cursor: pointer;
  position: relative;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.7rem 1.5rem;
  border-radius: 7rem;
  font-weight: 700;
  color: #fff;
  background-image: linear-gradient(
    to bottom,
    rgb(249, 197, 52),
    #fdbb04
  );
  transition: all 0.2s;
}
.btn-primary::after {
  content: "";
  width: 40%;
  position: absolute;
  top: 1.5rem;
  left: 30%;
  /* box-shadow: 0rem 0.5rem 1rem 1rem rgba(250, 221, 92, 0.4); */
  transition: all 0.2s;
}
.btn-primary:active {
  transform: translateY(0.7rem);
}
.btn-primary:active::after {
  box-shadow: 0rem 0.5rem 1.5rem 1.2rem rgba(249, 196, 52, 0.24);
}
.btn-secondary--light,
.btn-secondary--light:link,
.btn-secondary--light:visited {
  cursor: pointer;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 1rem;
  padding: 0.7rem 1.3rem;
  color: #2f68ec;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0.1rem 0.12rem rgba(0, 0, 0, 0.5);
  transition: all 0.2s;
}
.btn-secondary--light:active {
  color: #000;
  transform: translateY(0.1rem);
  box-shadow: 0rem 0rem rgba(0, 0, 0, 0.5);
}
.Head_light{
  color: #fdbb04;
  display: inline;
}
/*-----------------------------------*\
 * #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a,
img,
time,
span,
input,
label,
select,
button,
textarea,
ion-icon {
  display: block;
}

input,
button,
select,
textarea {
  background: none;
  border: none;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

input,
textarea {
  width: 100%;
}

ion-icon {
  pointer-events: none;
}

:is(a, button, select) {
  outline-color: var(--scarlet);
  outline-offset: 3px;
}

::selection {
  background: var(--color-primary);
  color: var(--bg-primary);
}

html {
  font-family: var(--ff-roboto);
  scroll-behavior: smooth;
}

body {
  background: var(--bg-primary);
  transition: var(--transition-1);
  /* margin: 0 10px 10px 10px; */
  /* overflow: hidden; */
}

body.active {
  overflow: hidden;
}

/*-----------------------------------*\
 * #REUSED STYLE
\*-----------------------------------*/

.container {
  padding-inline: 10px;
}

.h1 {
  font-size: var(--fs-1);
  line-height: 1.2;
  font-weight: 400;
}

.h2,
.h3,
.h4 {
  color: var(--color-primary);
  font-family: var(--ff-poppins);
  line-height: 1.2;
}

.h2 {
  font-size: var(--fs-2);
}

.h3 {
  font-size: var(--fs-3);
}

.h4 {
  font-size: var(--fs-5);
}

.w-100 {
  width: 100%;
}

.btn {
  max-width: max-content;
  color: var(--color-primary);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 25px;
  border: 1px solid transparent;
  border-radius: var(--radius-4);
  transition: var(--transition-1);
}

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

.btn-primary:is(:hover, :focus) {
  background: var(--color-primary);
  color: var(--bg-primary);
}

.btn-secondary {
  background: var(--raw-seinna);
  border-color: var(--raw-seinna);
  color: var(--black);
}

.btn-secondary:is(:hover, :focus) {
  --raw-seinna: hsl(24, 74%, 64%);
}

.section-subtitle {
  position: relative;
  color: var(--color-secondary);
  text-transform: uppercase;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.section-subtitle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--color-secondary);
}

.section-title {
  max-width: 350px;
  margin-bottom: 30px;
}

.section-text {
  color: var(--color-secondary);
  line-height: 1.8;
  margin-bottom: 30px;
}

.tooltip {
  position: absolute;
  top: -40px;
  background: var(--raw-seinna);
  min-width: max-content;
  color: var(--white);
  font-size: 15px;
  font-weight: var(--fw-700);
  padding: 5px 10px;
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-1);
  z-index: 1;
}