/* style.css */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

* {
  font-family: "Plus Jakarta Sans";
  box-sizing: border-box;
}

*::selection {
  background-color: #b91f27;
}

html {
  font-size: calc(50% + 0.8vmin);
}

h1 {
  font-size: 2rem;
}

#section1 *::selection {
  background-color: #b91f27;
}
#section2 *::selection {
  background-color: #2a5c8a;
}
#section3 *::selection {
  background-color: #2e8b57;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: black;
}

.bold {
  font-weight: bold;
}

.sections {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  height: 100vh;
}

header {
  display: flex;
  justify-content: center;
}

nav.navbar {
  width: 800px;
  max-width: 90vw;
  position: fixed;
  top: 20px;
  color: white;
  font-weight: bold;
  z-index: 1000;
  display: flex;
}

nav.navbar .logo {
  font-size: 20pt;
}

nav.navbar .nav-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.snap-section {
  height: 100vh;
  scroll-snap-align: start;
  color: white;
  /* border-bottom: 1px solid white; */
}
.section-text-wrapper {
  /* width: 45vw; */
  width: 800px;
  max-width: 90vw;
}

/* @media (max-width: 768px) {
  .section-text-wrapper {
    width: 90vw;
  }
} */

.header-title {
  font-size: 4rem;
  font-weight: 800;
}
.header-title2 {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
}

#section1,
#section2,
#section3,
#section4,
#section5,
#section6 {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-left: 5vw;
  padding-right: 5vw;
  gap: 2rem;
  height: 100vh;
  background-size: auto 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

#section1 {
  align-items: start;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4), #b91f27),
    url("./images/jurins.png");
  background-position: right center;
}

#section2 {
  align-items: end;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.4), #2a5c8a),
    url("./images/sheetscreenshot.png");
  background-position: left center;
}
#section3 {
  align-items: start;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4), #2e8b57),
    url("./images/barloaded.png");
  background-position: right center;
}

/* #section4 {
background-color: black;
}

#section4 img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
} */

#section4 {
  color: white;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 50px;
}

#table img,
#table2 img {
  height: 60px;
}

#section4 #table,
#section4 #table2 {
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
  padding: 20px;
  border-radius: 30px;
}

#section4 #table .table-row,
#section4 #table2 .table-row {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
}
#section4 #table .table-row:first-child {
  align-items: end;
}
#section4 #table .table-row:last-child,
#section4 #table2 .table-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#section4 #table .table-row div,
#section4 #table2 .table-row div {
  width: 20vw;
  display: flex;
  justify-content: center;
}
#section4 #table .table-row div:first-child {
  width: 35vw;
  justify-content: start;
}

#section4 #table .table-row div:nth-child(2) {
  visibility: hidden;
}

#section4 #table .table-header-cell,
#section4 #table2 .table-header-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#section4 #table2 {
  position: absolute;
  left: calc(35vw + 10px);
  padding: 20px 0;
  top: -30px;
  background-color: rgba(185, 31, 39, 0.77);
}

#table2::before,
#table::before {
  border-radius: 30px;
}

#table2 .table-row:first-child {
  margin-top: 30px;
}
#table2 .table-row:last-child {
  margin-bottom: 30px;
}
#table2 .table-row {
  padding-left: 100px;
}
#section4 #table2 .table-row div {
  width: calc(20vw + 20px);
}

#table-wrapper {
  position: relative;
  width: fit-content;
}

#section5 {
  /* display: block; */
  min-height: 100vh;
  height: auto;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 120px;
}

#section5-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#section5 .cards {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: space-evenly;
  flex-wrap: wrap;
  gap: 20px;
  height: fit-content;
}

@media (max-width: 800px) {
  #section1,
  #section2,
  #section3,
  #section4,
  #section5 {
    min-height: fit-content;
  }
  #section5 .cards {
    /* flex-direction: column; */
    /* gap: 5vw; */
  }
}

@media (max-width: 500px) {
  #section1,
  #section2,
  #section3,
  #section4,
  #section5 {
    padding-left: 2.5vw;
    padding-right: 2.5vw;
  }
  nav .logo {
    width: 100px;
  }
  nav.navbar {
    max-width: 95vw;
  }
}

#section5 .card {
  /* min-width: 20vw; */
  width: 360px;
  padding: 30px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#section5 .card::before {
  border-radius: 30px;
}

#blue-card {
  background: linear-gradient(to bottom, #2a5c8a12, #2a5c8a04, #2a5c8a28);
}
#blue-card *::selection {
  background-color: #2a5c8a;
}
#red-card {
  background: linear-gradient(to bottom, #b91f2712, #b91f2704, #b91f2728);
}
#red-card *::selection {
  background-color: #b91f27;
}
#green-card {
  background: linear-gradient(to bottom, #2e8b5712, #2e8b5704, #2e8b5728);
}
#green-card *::selection {
  background-color: #2e8b57;
}

.card-label {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
}
.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 20px;
}
.card-icon {
  height: 40px;
}
.card-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.card-huge {
  font-weight: bold;
  font-size: 3rem;
}
.card-price {
  display: flex;
  align-items: center;
}
.card-link {
  text-decoration: none;
}
.card-button {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  border-radius: 15px;
  width: 100%;
  font-weight: 500;
  color: white;
  text-decoration: none;
}
#blue-button {
  background-color: #2a5c8a;
}
#red-button {
  background-color: #b91f27;
}
#green-button {
  background-color: #2e8b57;
}

.divider {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.card-perks {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-perks-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-perks-icon {
  height: 20px;
}

#section6 {
  min-height: 100vh;
  height: auto;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 120px;
  scroll-snap-type: y none;
}

#section6 .timeline {
  width: 100%;
}

#section6 .timeline-item {
  width: 100%;
  display: flex;
  flex: 1;
  gap: 30px;
}

#section6 .timeline-item .gap {
  flex: 1;
}

#section6 .timeline-item .timeline-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
} 

#section6 .timeline-item:nth-child(2) .timeline-info {
  align-items: end;
  text-align: end;
}

@media (max-width: 800px) {
  #section6 .timeline-item:nth-child(2) {
    flex-direction: row-reverse;
  }
  #section6 .timeline-item:nth-child(2) .timeline-info {
    align-items: start;
    text-align: start;
  }
  #section6 .timeline-item .gap {
    flex: 0;
  }
}

#section6 .timeline-item .timeline-info button {
  width: fit-content;
}

#section6 .timeline-item .timeline-info h1 {
  margin: 0;
  margin-top: 15px;
}

#section6 .timeline-item .timeline-progress {
  flex-shrink: 0;
  width: 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}

#section6 .timeline-item .timeline-progress .line1 {
  background-color: rgba(255, 255, 255, 0.5);
  width: 3px;
  height: 25px;
}

#section6 .timeline-item .timeline-progress .circle {
  background-color: rgba(255, 255, 255, 0.5);
  width: 15px;
  height: 15px;
  border-radius: 10px;
}

#section6 .timeline-item .timeline-progress .line2 {
  background-color: rgba(255, 255, 255, 0.5);
  width: 3px;
  flex: 1;
  /* height: 250px; */
}

#section6 .timeline-item:nth-child(1) .timeline-progress .line1,
#section6 .timeline-item:nth-child(1) .timeline-progress .circle {
  background-color: #ffffff;
}






button {
  all: unset;
  box-sizing: border-box;
}
#nav-actions {
  display: flex;
  gap: 10px;
}

.primary-button, .secondary-button {
  border-radius: 500px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}
.primary-link {
  text-decoration: none;
  color: black;
}

.secondary-link {
  text-decoration: none;
  color: white;
}

.primary-button {
  background-color: white;
  color: black;
}

.secondary-button {
  background-color: rgba(255, 255, 255, 0.1);
}

footer {
  scroll-snap-align: end;
  color: white;
  padding: 5vw;
}

.demo-form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* align-items: center; */
  align-items: start;
  /* margin-bottom: 30px; */
}

.demo-form #form-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.demo-form .input-container {
  border-radius: 500px;
  background: rgba(255, 255, 255, 0.1);
  flex: 1;
  min-width: 50%;
}

.demo-form input {
  all: unset;
  padding: 10px 20px;
  width: 100%;
}

footer .footer-row {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 30px;
  border-bottom: 1px solid white;
}

footer .legal-links {
  display: flex;
  justify-content: center;
  gap: 30px;
}
footer .legal-links * {
  font-size: 0.75rem;
}

footer .legal-links a {
  color: white;
  text-decoration-color: white;
}