/*This is the main css for custom styling
* Insert here all the correct sizes and colors for the project.
*/

:root {
  --blue: #005dcd;
  --darkerblue: #123e8c;
  --darkblue: #012858;
  --teal: #2dccd3;
  --cyan: #18f5ff;
  --yellow: #fff531;
  --grey: #7d7d80;
  --light: #fbfaf9;
  --dark: #171411;
}

html {
  font-size: 62.5%;
}

@font-face {
  font-family: "Satoshi-Variable";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2"),
    url("../fonts/Satoshi-Variable.woff") format("woff"),
    url("../fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  font-weight: 400;
  font-style: normal;
  color: var(--darkerblue);
}

p {
  margin: 0;
  margin-bottom: 1rem;
}

ul.v-list {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

ul.h-list {
  display: flex;
  gap: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: capitalize;
  letter-spacing: -4%;
  font-family: "Satoshi-Variable";
  font-weight: 700;
  line-height: 120%;
  color: var(--darkblue);
}

h1 {
  font-size: clamp(4rem, 4vw, 4.4rem);
}

h2 {
  font-size: clamp(2.8rem, 4vw, 3.8rem);
}

.gradient-text {
  background: linear-gradient(45deg, var(--blue) 20%, var(--teal) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-2 {
  background: linear-gradient(45deg, var(--yellow) 20%, var(--teal) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dl-btn {
  display: inline-flex;
}

.dl-btn:hover {
  filter: drop-shadow(4px 4px 100px var(--cyan));
}

.bg-noise {
  /* background: url(https://grainy-gradients.vercel.app/noise.svg);
  opacity: 0.1; */
}

.gradient-line {
  height: 2px;
  width: 40%;
  background: linear-gradient(
    45deg,
    rgba(0, 93, 205, 1) 20%,
    rgba(24, 245, 255, 1) 70%
  );
  background-clip: border-box;
}

label {
  color: var(--darkblue);
  font-size: 1.4rem;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
textarea,
select {
  border: 2px solid #18f3ff45;
  height: 4rem;
  border-radius: 2rem !important;
  padding: 0.4rem 2rem;
}

.select2-selection {
  background-color: white !important;
  border: 2px solid #18f3ff45 !important;
  border-radius: 2rem !important;
}

.select2-results__option,
.select2-results__option--selected {
  background-color: #fefefe !important;
  color: var(--darkblue) !important;
}

.forminator-select.forminator-select-dropdown-container--open
  .forminator-select-dropdown.forminator-dropdown--basic {
  padding: 0 !important;
  border: 2px solid #18f3ff45 !important;
}

.forminator-ui.forminator-custom-form[data-design="basic"]
  select.forminator-select2
  + .forminator-select {
  width: 100% !important;
}

.forminator-ui#forminator-module-565.forminator-design--basic .forminator-response-message.forminator-success{
	background: var(--blue) !important;
  color: white !important;
  border-left-color: var(--cyan) !important;
}

*::placeholder {
  font-size: 1.4rem;
}

.tag {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  color: white;
  line-height: 1;
  background-color: var(--blue);
  border-radius: 3rem;
  letter-spacing: 1px;
  /* filter: drop-shadow(2px 2px 4px #00000055); */
}

.tag.ghost {
  background-color: transparent;
  border: 1px solid var(--blue);
  color: var(--blue);
}

@media all and (max-width: 1000px) {
  h1 {
    font-size: clamp(3rem, 4vw, 4rem);
  }
}