@font-face {
  font-family: "SFPro";
  src: url("./fonts/SF-Pro-Display-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "SFPro";
  src: url("./fonts/SF-Pro-Display-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "SFPro";
  src: url("./fonts/SF-Pro-Display-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "SFPro";
  src: url("./fonts/SF-Pro-Display-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

* {
  margin: 0;
  font-family: "SFPro", sans-serif;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: rgba(251, 249, 255, 1);
  color: rgba(45, 39, 57, 1);
}

header {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.header-container {
  display: flex;
  width: 95%;
  max-width: 1440px;
  justify-content: space-between;
  align-items: center;

  ul {
    display: flex;
    list-style: none;
    gap: 32px;
    li {
      a {
        color: black;
        font-size: 16px;
        font-weight: 400;
      }
    }
  }
}

.header-button {
  color: black;
  border: 1px solid black;
  padding: 11px 16px;
}

.logo-img {
	
}

main {
	display: flex;
	gap: 64px;
	flex-direction: column;
	width: 95%;
	max-width: 1180px;
	margin: 0 auto;
	margin-top: 64px;
}

.text-title {
	margin-bottom: 48px;
	h2 {
		font-size: 48px;
		font-weight: 400;
		margin-bottom: 24px;
	}
	p {
		font-size: 16px;
		font-weight: 500;
	}
}

.text-content p {
	font-size: 18px;
	font-weight: 400;
}
.text-content span {
	color: rgba(0, 108, 180, 1);
}

.text-content-gray-line {
	margin-top: 48px;
	padding: 24px;
	background-color: rgba(243, 243, 243, 1);
	a {
		color: rgba(0, 108, 180, 1);
	}
}
.bold-usb-text {
	font-weight: 500 !important;
}

.text-content-usb-list {
	list-style: square;
	display: grid;
	gap: 24px;
	margin-left: 42px;
	li {
		font-size: 18px;
		font-weight: 400;
	}
}
.learn-more-link {
	background-color: rgba(0, 108, 180, 1);
	padding: 9px 16px;	
	width: max-content;
	a {
		color: white !important;
		font-size: 16px !important;
		font-weight: 400 !important;
	}
}

.usb-type-2 {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.bold-usb-text {
	font-weight: 500 !important;
}

.faq-type-2 {
	display: flex;
	flex-direction: column;
	gap: 24px;
	.bold-faq-text {
		font-weight: 500 !important;
	}
}

.faq-question{
	display: flex;
	flex-direction: column;
	gap: 32px;
	.faq-question-content{
		display: flex;
		flex-direction: column;
		gap: 24px;
		p {
			font-size: 18px;
			font-weight: 500;
		}
		li {
			font-size: 18px;
			font-weight: 400;
			list-style: square;
			list-style-position: inside;

		}
	}
}


footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 68px auto;
	gap: 24px;
	width: 95%;
	max-width: 1180px;
}

/* Tablet styles */
@media (max-width: 1024px) {
	.header-container {
		flex-wrap: wrap;
		gap: 16px;
	}

	.header-container ul {
		gap: 24px;
	}

	main {
		gap: 48px;
		margin-top: 48px;
	}

	.text-title {
		margin-bottom: 32px;
	}

	.text-title h2 {
		font-size: 36px;
		margin-bottom: 16px;
	}

	.text-content p {
		font-size: 16px;
	}

	.text-content-usb-list li {
		font-size: 16px;
	}

	.faq-question .faq-question-content p,
	.faq-question .faq-question-content li {
		font-size: 16px;
	}
}

/* Mobile styles */
@media (max-width: 768px) {
	header {
		padding: 16px 0;
	}

	.header-container {
		flex-wrap: wrap;
		gap: 16px;
	}

	.header-container .logo {
		order: 1;
	}

	.header-container .header-button {
		order: 2;
	}

	.header-container nav {
		order: 3;
		width: 100%;
	}

	.header-container ul {
		flex-wrap: wrap;
		gap: 12px 24px;
		justify-content: flex-start;
	}

	.header-button {
		padding: 10px 14px;
		font-size: 14px;
	}

	main {
		gap: 40px;
		margin-top: 32px;
	}

	.text-title {
		margin-bottom: 24px;
	}

	.text-title h2 {
		font-size: 28px;
		margin-bottom: 12px;
		line-height: 1.3;
	}

	.text-title p {
		font-size: 14px;
	}

	.text-content p {
		font-size: 15px;
		line-height: 1.6;
	}

	.text-content-gray-line {
		margin-top: 32px;
		padding: 16px;
	}

	.text-content-usb-list {
		margin-left: 24px;
		gap: 16px;
	}

	.text-content-usb-list li {
		font-size: 15px;
	}

	.learn-more-link {
		padding: 8px 14px;
	}

	.learn-more-link a {
		font-size: 14px !important;
	}

	.faq-question {
		gap: 24px;
	}

	.faq-question .faq-question-content {
		gap: 16px;
	}

	.faq-question .faq-question-content p {
		font-size: 16px;
	}

	.faq-question .faq-question-content li {
		font-size: 15px;
		line-height: 1.6;
	}

	footer {
		flex-direction: column;
		align-items: flex-start;
		margin: 48px auto;
		gap: 16px;
	}

	footer img {
		max-width: 120px;
	}
}

/* Small mobile styles */
@media (max-width: 480px) {
	.header-container {
		gap: 16px;
	}

	.text-title h2 {
		font-size: 24px;
	}

	.text-content p {
		font-size: 14px;
	}

	.text-content-gray-line {
		padding: 12px;
	}

	.text-content-usb-list {
		margin-left: 20px;
		gap: 12px;
	}

	.text-content-usb-list li {
		font-size: 14px;
	}

	.faq-question .faq-question-content p {
		font-size: 15px;
	}

	.faq-question .faq-question-content li {
		font-size: 14px;
	}

	footer {
		margin: 32px auto;
	}

	footer img {
		max-width: 100px;
	}
}