@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  margin: 0px;
  height: 100%;
}


:root {
  /* navbar height */
  --nav-height: clamp(56px, 10vh, 80px);

  --background-color: #0b1220;
  --text-color: #ffffff;
  --primary-color: white;
  --primary-color-dark: #000000;
  --secondary-color: #9aa6b2;
  --card-background-color: #ffffff;
  --card-box-shadow: 1px 6px 12px #208ac2;
  --card-box-shadow-hover: 0 12px 36px rgba(6, 15, 30, 0.12);
  --spacing-unit: clamp(1rem, 2vw, 2rem);
  --font-main: "Lexend Deca", sans-serif;
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-regular: 400;
  --font-weight-black: 900;

  --btn-bg-primary: #208BC3;
  --btn-bg-secondary: #fff;
  --btn-bg-primary-hover: #156b9d;
  --btn-border: white;
}



/*
:root {
  --primary-color: #ffffff;
  --secondary-color: #BABABA;
  --background-color: #000000;
  --card-background-color: hsla(0, 0%, 100%, 0.1);
  --text-color: #333333;
  --font-main: "Lexend Deca", sans-serif;
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-regular: 400;
  --font-weight-black: 900;
  --spacing-unit: clamp(1rem, 2vw, 2rem);

  --btn-bg-primary: #208BC3;
  --btn-bg-primary-hover: #156b9d;
}*/

strong {
  font-weight: var(--font-weight-regular);
}

/* Button Styles */

button {
  color: var(--primary-color);
  font-family: var(--font-main);
  font-weight: var(--font-weight-extralight);
  font-style: normal;
  font-size: clamp(1rem, 1.5vw, 25px);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border-radius: 44px;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2.5rem);
  min-width: fit-content;
  height: auto;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.btn-primary {
  border: none;
  background: var(--btn-bg-primary);
}

.btn-secondary {
  color: black;
  background: var(--btn-bg-secondary);
  border: 1px solid var(--btn-border);
}

/* Laptop (schermi fino a 1440px) */
@media (max-width: 1440px) {
  button {
    font-size: clamp(0.9rem, 1.3vw, 20px);
    padding: clamp(0.65rem, 1.8vw, 0.9rem) clamp(1.3rem, 3.5vw, 2rem);
    border-radius: 38px;
  }
}

/* Tablet (schermi fino a 768px) */
@media (max-width: 768px) {
  button {
    font-size: clamp(0.85rem, 2vw, 18px);
    padding: clamp(0.6rem, 1.5vw, 0.8rem) clamp(1.2rem, 3vw, 1.5rem);
    border-radius: 32px;
  }
}

/* Mobile (schermi fino a 480px) */
@media (max-width: 480px) {
  button {
    font-size: clamp(1rem, 4vw, 20px)*2;
    padding: clamp(0.8rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    border-radius: 32px;
  }
}





/* a blue color as a generic focus style */
.btn-primary:hover {
  background-color: var(--btn-bg-primary-hover);
  transform: scale(1.05);
}

.btn-secondary:hover {
  transform: scale(1.05);
}

a {
  text-decoration: none;
  color: inherit;
}


/* Section Styles */
section {
  padding: clamp(2rem, 5vw, 6rem) clamp(1.5rem, 5vw, 8rem);
  background-color: var(--section-background-color);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-unit);
}

/* Tablet (schermi fino a 768px) */
@media (max-width: 768px) {
  section {
    align-items: center;
    text-align: center;
  }
}


.section-header {
  color: var(--primary-color);
  font-family: var(--font-main);
  font-weight: var(--font-weight-thin);
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(2.5rem, 5.2vw, 100px);
}

.section-subtext {
  color: var(--secondary-color);
  font-family: var(--font-main);
  font-weight: var(--font-weight-extralight);
  font-style: normal;
  text-align: center;
  font-size: clamp(1rem, 2.5vw, 20px);
}

/* Form Styles */

input {
  font-family: var(--font-main);
  font-size: clamp(1rem, 2.5vw, 20px);
  padding: clamp(0.75rem, 2vw, 1rem);
  border: none;
  border-radius: 8px;
  background: none;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

textarea {
  font-family: var(--font-main);
  font-size: clamp(1rem, 2.5vw, 20px);
  padding: clamp(0.75rem, 2vw, 1rem);
  border: none;
  border-radius: 8px;
  background: none;
  border: 1px solid var(--primary-color);
  resize: vertical;
  color: var(--primary-color);
}