@font-face {
  font-family: Visual Sans;
  src: url("./assets/Visual\ Sans\ Regular.woff2");
}

@font-face {
  font-family: Visual Sans Semibold;
  src: url("./assets/Visual\ Sans\ Semi\ Bold.woff2");
}

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

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
  user-select: none;
}

img {
  -webkit-user-drag: none;
}

/* layout */

main {
  min-height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "left left top-right top-right"
    "left left bottom-left bottom-right";
  padding: 1rem 2rem;
  grid-gap: 1rem;
}

.left {
  grid-area: left;
}

.top-right {
  grid-area: top-right;
  background-image: url("./assets/purple.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.bottom-left {
  grid-area: bottom-left;
  background: url("./assets/blue.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.bottom-right {
  grid-area: bottom-right;
  background: url("./assets/pink.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Navigation Bar */

header nav {
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

.nav-left h5 {
  font-size: 20px;
  color: black;
  font-family: Visual Sans Semibold, Gilroy, Arial, Helvetica, sans-serif;
}

.nav-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: Visual Sans Semibold, Gilroy, Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.nav-middle a {
  text-decoration: none;
  color: black;
}

.nav-right {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.nav-right button {
  font-size: 16px;
  font-family: Visual Sans Semibold, Gilroy, Arial, Helvetica, sans-serif;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.primary {
  background-color: #9dcbfc !important;
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  transition: background-color 0.4s ease;
}

.primary:hover {
  background-color: #5fa0e6 !important;
}

/* left side */

.left {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  padding: 0 1rem;
}

.left-top {
  width: 100%;
}

.left-top h1 {
  font-size: 60px;
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
  color: #272727;
  font-weight: 100;
  line-height: 1.2;
}

.btn-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
  border-radius: 50px;
  padding: 8px 16px;
  background-color: transparent;
  gap: 0.4rem;
  font-weight: bold;
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.text-btn svg {
  height: 24px;
  width: 24px;
}

.text-btn:hover {
  background-color: black;
  color: white;
}

.btn-container {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.btn-container button {
  font-size: 16px;
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-weight: bold;
}

.btn-container .cta {
  background-color: #9dcbfc;
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cta:hover {
  background-color: #5fa0e6 !important;
}

.cta svg {
  height: 16px;
  width: 16px;
  color: white;
  margin-left: 0.5rem;
}

.btn-container .secondary {
  text-decoration: underline;
}

.left-bottom {
  width: 100%;
}

.brands {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brands img {
  width: 100px;
  filter: grayscale(100%) contrast(200%) brightness(50%);
}

/* Right Side */

/* Top Right Card */

.top-start {
}

.top-start h3 {
  font-size: 36px;
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
  font-weight: 100;
  line-height: 1.2;
  color: white;
}

.top-end {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-end p {
  color: white;
  font-size: 16px;
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
}

.top-end .big-arrow {
  background-color: white;
  border-radius: 50% !important;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.big-arrow:hover {
  background-color: black;
  color: white;
}

.top-end button svg {
  height: 24px;
  width: 24px;
}

/* Bottom Left Card */

.left-start {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left-start button {
  border: none;
  color: black;
  background-color: white;
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.mini-btn {
  border-radius: 50px;
  padding: 8px 16px;
}

.arrow-btn {
  background-color: white;
  border-radius: 50% !important;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.arrow-btn:hover {
  background-color: black;
  color: white;
}

.left-start button svg {
  height: 16px;
  width: 16px;
}

.left-end h5 {
  color: white;
  font-size: 24px;
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
  font-weight: 300;
}

.left-end p {
  color: white;
  font-size: 16px;
  margin-top: 0.5rem;
}

/* Bottom Right Card */

.right-start {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right-start button {
  border: none;
  color: black;
  background-color: white;
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.mini-btn {
  border-radius: 50px;
  padding: 8px 16px;
}

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

.profiles img {
  border-radius: 50%;
  border: 1px solid rgb(255, 141, 198);
  cursor: pointer;
}

.second {
  margin-left: -0.4rem;
}

.third {
  margin-left: -0.4rem;
}

.right-end h5 {
  color: white;
  font-size: 60px;
  font-family: Visual Sans, Gilroy, Arial, Helvetica, sans-serif;
  font-weight: 300;
}

.right-end p {
  color: white;
  font-size: 16px;
  margin-top: 0.5rem;
}