@import "nav.css";
@import "banner.css";
@import "sections.css";
@import "footer.css";

@font-face {
  font-family: Inter;
  src: url(fonts/Inter/Inter-VariableFont_slnt\,wght.woff2) format("woff2");
}

@font-face {
  font-family: Pacifico;
  src: url(fonts/Pacifico/Pacifico-Regular.woff2) format("woff2");
}

@font-face {
  font-family: Playfair;
  src: url(fonts/Playfair/Playfair-VariableFont_opsz,wdth,wght.woff2)
    format("woff2");
}

:root {
  /* Theme Colors */
  --clr-blue-1: 250, 253, 255;
  --clr-blue-2: 242, 250, 255;
  --clr-blue-3: 228, 245, 255;
  --clr-blue-4: 209, 239, 255;
  --clr-blue-5: 187, 231, 255;
  --clr-blue-6: 158, 219, 255;
  --clr-blue-7: 122, 203, 255;
  --clr-blue-8: 51, 180, 252;
  --clr-blue-9: 55, 183, 255;
  --clr-blue-10: 37, 172, 243;
  --clr-blue-11: 0, 124, 191;
  --clr-blue-12: 0, 55, 95;

  --clr-gray-1: 252, 252, 252;
  --clr-gray-2: 249, 249, 249;
  --clr-gray-3: 240, 240, 240;
  --clr-gray-4: 232, 232, 232;
  --clr-gray-5: 225, 225, 225;
  --clr-gray-6: 217, 217, 217;
  --clr-gray-7: 206, 206, 206;
  --clr-gray-8: 187, 187, 187;
  --clr-gray-9: 140, 140, 140;
  --clr-gray-10: 129, 129, 129;
  --clr-gray-11: 99, 99, 99;
  --clr-gray-12: 31, 31, 31;

  /* Font Sizes & Line Heights */
  --fs-3xl: 1.875rem;
  --lh-3xl: 2.25rem;

  --fs-2xl: 1.5rem;
  --lh-2xl: 2rem;

  --fs-xl: 1.25rem;
  --lh-xl: 1.75rem;

  --fs-lg: 1.125rem;
  --lh-lg: 1.75rem;

  --fs-md: 1rem;
  --lh-md: 1.5rem;

  --fs-base: 0.875rem;
  --lh-base: 1.25rem;

  --fs-sm: 0.75rem;
  --lh-sm: 1rem;

  /* Font Weights */
  --fw-black: 900;
  --fw-extrabold: 800;
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;

  /* Miscellaneous Colors */
  --clr-border: var(--clr-gray-6);
  --clr-red: 229, 77, 46;
}

/* start of CSS reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

ul,
ol,
li {
  list-style: none;
}

html,
html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  html,
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* end of CSS reset */

/* start of utility classes */
.font-black {
  font-weight: var(--fw-black);
}

.font-bold {
  font-weight: var(--fw-bold);
}

.font-semibold {
  font-weight: var(--fw-semibold);
}

.font-medium {
  font-weight: var(--fw-medium);
}

.font-normal {
  font-weight: var(--fw-normal);
}

.font-light {
  font-weight: var(--fw-light);
}

.text-3xl {
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
}

.text-2xl {
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
}

.text-xl {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
}

.text-lg {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
}

.text-md {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}

.text-base {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.text-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
/* end of utility classes */

body {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Open Sans",
    sans-serif;
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background-color: rgb(var(--clr-gray-1));
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
textarea,
input {
  color: rgb(var(--clr-gray-12));
}

.gradient-text-top-bottom {
  background: linear-gradient(
    to bottom,
    rgb(var(--clr-blue-11)),
    rgb(var(--clr-blue-8))
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-left-right {
  background: linear-gradient(
    to right,
    rgb(var(--clr-blue-11)),
    rgb(var(--clr-blue-8))
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-bg-left-right {
  background: linear-gradient(
    to right,
    rgb(var(--clr-blue-11)),
    rgb(var(--clr-blue-8))
  );
}

.gradient-bg-right-left {
  background: linear-gradient(
    to left,
    rgb(var(--clr-blue-11)),
    rgb(var(--clr-blue-8))
  );
}

.container {
  width: min(1440px, 100% - 2rem);
  margin: 0 auto;
}

.container-2 {
  width: min(1080px, 100% - 2rem);
  margin: 5rem auto;
}

.container-3 {
  width: min(1080px, 100% - 2rem);
  margin: 0 auto;
}

.link {
  color: rgb(var(--clr-gray-12));
  text-decoration: none;
}

.content-separator-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 192px;
  background: linear-gradient(
    to right,
    transparent,
    rgb(var(--clr-gray-3)),
    transparent
  );
  font-family: Playfair, "Times New Roman", Times, serif;
  font-size: 3rem;
  line-height: 1;
  font-weight: var(--fw-black);
}

.icon-sm {
  width: 14px;
  height: 14px;
}

.icon {
  width: 16px;
  height: 16px;
  color: rgb(var(--clr-gray-12));
}

.icon-md {
  width: 18px;
  height: 18px;
  color: rgb(var(--clr-gray-12));
}

.icon-lg {
  width: 24px;
  height: 24px;
  color: rgb(var(--clr-gray-12));
}

.nav-mobile-button {
  display: none;
}

.nav-mobile {
  display: none;
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 4rem;
  }

  .nav-links-container {
    display: none;
  }

  .banner-card {
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    height: fit-content;
    width: min(400px, 100% - 2rem);
    padding: 1rem;
    gap: 2rem 0;
  }

  .card-content-wrapper {
    gap: 1rem 0;
    padding: 1rem 1rem 0;
  }

  .card-title {
    font-size: var(--fs-3xl);
    line-height: var(--lh-3xl);
  }

  .card-text {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
  }

  .card-author {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  .group {
    flex-wrap: wrap;
    gap: 1rem 0;
  }

  .group:first-child,
  .group:last-child {
    flex-direction: column-reverse;
  }

  .services {
    flex-wrap: wrap;
    gap: 3rem 0;
  }

  .contact-form {
    flex: 1;
  }

  .contact {
    flex-wrap: wrap;
    gap: 4rem 0;
  }

  .banner {
    height: 50vh;
    background-position: center;
  }

  .line-vertical,
  .line-vertical-2 {
    display: none;
  }

  .input-field-group {
    gap: 1rem 0;
    flex-wrap: wrap;
  }

  .input-field-group .input-field {
    width: 100%;
  }

  .content-separator-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
    height: 160px;
  }

  .selfie {
    width: auto;
    height: auto;
  }

  .person-content {
    gap: 1rem 0;
  }

  .icon-sm {
    width: 16px;
    height: 16px;
  }

  .group-content-2 {
    font-size: var(--fs-md);
    line-height: var(--lh-md);
  }

  .group-content-2:first-child .icon-sm {
    display: none;
  }

  .group-content-2:first-child {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
  }

  .person {
    gap: 2rem 0;
  }

  .header {
    top: 0;
  }

  .nav-mobile-button[data-toggled="false"] #nav-mobile-icon-close {
    display: none;
  }

  .nav-mobile-button[data-toggled="true"] #nav-mobile-icon-open {
    display: none;
  }

  .nav-mobile {
    display: block;
    position: fixed;
    left: -85vw; /* Start off-screen to the left */
    z-index: 1;
    height: calc(100lvh - 64px);
    width: 85vw;
    background-color: rgb(var(--clr-gray-1));
    box-shadow: 10px 40px 40px rgb(var(--clr-gray-12), 0.5);
    transition: left 150ms ease;
  }

  .nav-mobile[data-open="false"] {
    box-shadow: none;
    left: -85vw;
  }

  .nav-mobile[data-open="true"] {
    left: 0; /* Slide in from the left */
  }

  .nav-mobile[data-open="false"] .nav-links-container {
    display: none;
  }

  .nav-mobile-button {
    display: block;
    outline: transparent;
    border: 1px solid rgb(var(--clr-border));
    background-color: transparent;
    padding: 0.25rem;
    border-radius: 0.375rem;
  }

  .nav-mobile .nav-links-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(1440px, 100% - 2rem);
    margin: 2rem auto;
    gap: 1rem 0;
  }

  .nav-links {
    flex-direction: column;
  }

  .nav-links {
    gap: 1rem 0;
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
  }

  .nav-button {
    font-size: var(--fs-xl);
    line-height: var(--lh-xl);
    color: rgb(var(--clr-gray-12));
    background: transparent;
    padding: 0;
  }

  .group-image {
    width: auto;
    height: auto;
  }
}