@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap");

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

body {
  background: linear-gradient(to bottom, #000000, #111111, #0c0c0c);
  font-family: "Geist", sans-serif;
}

/* Create a wrapper for main content only */
.main-content {
  display: grid;
  grid-template-columns: 1fr min(1400px, 90%) 1fr;
  gap: 2rem;
  margin-top: 80px;
}

.main-content > * {
  grid-column: 2;
}

/* Keep navbar and footer full width */
.navbar,
.footer {
  
  width: 100%;
}


html,
body {
  overflow-x: hidden;
}

section {
  padding: 0rem 0;
}

.text-container {
  overflow: visible;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  background: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.3s ease;
}

/* Add class for scroll state */
.navbar.scrolled {
  background: rgba(0, 0, 0, 0.7);
}

/* Add a container div for the content */
.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2rem;
  transition: padding 0.3s ease;
}

/* Optional: Add a class for scrolled state to adjust padding */
.navbar.scrolled .navbar-container {
  padding: 0.75rem 2rem;
}

.footer-container {
  margin: 0 auto;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 3.5rem;
}

.logo {
  width: 120px;
  height: auto;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: rgba(136, 136, 136, 0.9);
  text-decoration: none;
  font-family: "Geist Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #fff;
  transition: width 0.2s ease;
}

.nav-links a:hover {
  color: #fff;
}

.nav-links a:hover::after {
  width: 100%;
}

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

.social-links {
  display: flex;
  gap: 0.75rem;
}

.social-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  font-family: "Geist Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.social-links a:hover {
  background: rgba(255, 255, 255, 0.075);
}

.social-links img {
  width: 20px;
  height: 20px;
}


.register-btn {
  background: transparent;
  border: 1px solid #ffffff67;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.login-btn {
  padding: 0.5rem 1rem;
  background: #fff;
  color: #000;
  border-radius: 6px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.login-btn:hover {
  opacity: 0.9;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  transform: translateY(0px);
}

.mobile-menu {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  position: relative;
  width: 30px;
  height: 30px;
}

.mobile-menu .line {
  display: block;
  width: 120%;
  height: 2px;
  background-color: white;
  margin: 4px 0;
  transition: transform 0.1s ease-in-out, opacity 0.2s ease-in-out;
}

.mobile-menu.active .line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu.active .line:nth-child(2) {
  opacity: 0;
}

.mobile-menu.active .line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  z-index: 999;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav.active {
  display: block;
}

.mobile-nav-content {
  padding: 5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.95),
    rgba(0, 0, 0, 0.98)
  );
}

.mobile-nav-content a {
  color: rgba(136, 136, 136, 0.9);
  text-decoration: none;
  font-family: "Geist Mono", monospace;
  font-size: 16px;
  font-weight: 500;
  padding: 1rem 0;
  transition: color 0.2s ease;
}

.mobile-nav-content a:hover {
  color: #fff;
}

.mobile-social-links {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mobile-register-btn {
  background: transparent;
  color: #fff;
  border: 1px solid #ffffff67;
  border-radius: 6px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: 1rem;
  text-align: center;
} 

.mobile-nav-content .mobile-login {
  margin-top: 2rem;
  color: #000;
  background: #fff;
  text-align: center;
  padding: 0.75rem;
  border-radius: 6px;
  font-family: "Geist", sans-serif;
  transition: all 0.2s ease;
}

.mobile-nav-content .mobile-login:hover {
  opacity: 0.9;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.hero {
  padding: 6rem 0 0 0;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.hero-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.hero h1 {
  text-align: center;
  font-size: 5rem;
  font-weight: Bold;
  margin-bottom: 0;
  line-height: 1;
  background: linear-gradient(to right, #eaeaea, #c8c8c8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  position: relative;
  padding: 1.5rem 4rem;
  width: 100%;
  border: 1.5px dashed #3030308e;
}

/* Corner decorations */
.hero h1::before,
.hero h1::after,
.hero h1 > span::before,
.hero h1 > span::after,
.hero h1 > span > span::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H4V4H0V5H4V9H5V5H9V4H5V0Z' fill='%23D9D9D9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Top left corner with dashed border and plus */
.hero h1::before {
  content: "";
  position: absolute;
  top: -65px;
  left: -79px;
  width: 79px;
  height: 65px;
  background-image: url("data:image/svg+xml,%3Csvg width='79' height='65' viewBox='0 0 79 65' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_47_202' fill='white'%3E%3Cpath d='M0 0H78.8122V65H0V0Z'/%3E%3C/mask%3E%3Cpath d='M78.8122 65V65.5H79.3122V65H78.8122ZM0 65.5H1.94598V64.5H0V65.5ZM6.81093 65.5H10.7029V64.5H6.81093V65.5ZM15.5678 65.5H19.4598V64.5H15.5678V65.5ZM24.3247 65.5H28.2167V64.5H24.3247V65.5ZM33.0816 65.5H36.9736V64.5H33.0816V65.5ZM41.8386 65.5H45.7305V64.5H41.8386V65.5ZM50.5955 65.5H54.4874V64.5H50.5955V65.5ZM59.3524 65.5H63.2443V64.5H59.3524V65.5ZM68.1093 65.5H72.0012V64.5H68.1093V65.5ZM76.8662 65.5H78.8122V64.5H76.8662V65.5ZM79.3122 65V62.9365H78.3122V65H79.3122ZM79.3122 57.7778V53.6508H78.3122V57.7778H79.3122ZM79.3122 48.4921V44.3651H78.3122V48.4921H79.3122ZM79.3122 39.2064V35.0794H78.3122V39.2064H79.3122ZM79.3122 29.9206V25.7937H78.3122V29.9206H79.3122ZM79.3122 20.6349V16.5079H78.3122V20.6349H79.3122ZM79.3122 11.3492V7.22223H78.3122V11.3492H79.3122ZM79.3122 2.0635V0H78.3122V2.0635H79.3122Z' fill='url(%23paint0_linear_47_202)' mask='url(%23path-1-inside-1_47_202)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_47_202' x1='0' y1='32.5' x2='78.8122' y2='32.5' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.45' stop-color='%230C0C0C'/%3E%3Cstop offset='1' stop-color='%23303030'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Top left plus */
.hero h1 > span > span:last-child::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H4V4H0V5H4V9H5V5H9V4H5V0Z' fill='%23D9D9D9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}

/* Circular dash with plus on top right */
.hero h1::after {
  content: "";
  position: absolute;
  top: -66px;
  right: -44px;
  width: 44px;
  height: 66px;
  background-image: url("data:image/svg+xml,%3Csvg width='44' height='66' viewBox='0 0 44 66' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_100_256)'%3E%3Cmask id='path-1-inside-1_100_256' fill='white'%3E%3Cpath d='M78.812 1H-0.000144958V66H78.812V1Z'/%3E%3C/mask%3E%3Cpath d='M-0.000144958 66V66.5H-0.500145V66H-0.000144958ZM78.812 66.5H76.866V65.5H78.812V66.5ZM72.0011 66.5H68.1091V65.5H72.0011V66.5ZM63.2442 66.5H59.3522V65.5H63.2442V66.5ZM54.4873 66.5H50.5953V65.5H54.4873V66.5ZM45.7304 66.5H41.8384V65.5H45.7304V66.5ZM36.9735 66.5H33.0815V65.5H36.9735V66.5ZM28.2166 66.5H24.3246V65.5H28.2166V66.5ZM19.4597 66.5H15.5677V65.5H19.4597V66.5ZM10.7028 66.5H6.81079V65.5H10.7028V66.5ZM1.94585 66.5H-0.000144958V65.5H1.94585V66.5ZM-0.500145 66V63.9365H0.499855V66H-0.500145ZM-0.500145 58.7778V54.6508H0.499855V58.7778H-0.500145ZM-0.500145 49.4921V45.3651H0.499855V49.4921H-0.500145ZM-0.500145 40.2064V36.0794H0.499855V40.2064H-0.500145ZM-0.500145 30.9206V26.7937H0.499855V30.9206H-0.500145ZM-0.500145 21.6349V17.5079H0.499855V21.6349H-0.500145ZM-0.500145 12.3492V8.22223H0.499855V12.3492H-0.500145ZM-0.500145 3.0635V1H0.499855V3.0635H-0.500145Z' fill='url(%23paint0_linear_100_256)' mask='url(%23path-1-inside-1_100_256)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_100_256' x1='78.812' y1='33.5' x2='-0.000144958' y2='33.5' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.45' stop-color='%230C0C0C'/%3E%3Cstop offset='1' stop-color='%23303030'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_100_256'%3E%3Crect width='44' height='66' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Top right plus (overlays the circular dash) */
.hero h1 > span::before {
  top: -4px;
  right: -4px;
  transform: rotate(90deg);
  z-index: 2;
}

/* Bottom corners */
.hero h1 > span::after {
  bottom: -4px;
  right: -4px;
  transform: rotate(180deg);
}

.hero h1 > span::before:last-child {
  bottom: -4px;
  left: -4px;
  transform: rotate(-90deg);
}

/* Add new circular dash on top right */
.hero h1 > span > span::before {
  content: "";
  position: absolute;
  top: -26px;
  right: -26px;
  width: 54px;
  height: 53px;
  background-image: url("data:image/svg+xml,%3Csvg width='54' height='53' viewBox='0 0 54 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 26.5C1 40.5833 12.6406 52 27 52C41.3594 52 53 40.5833 53 26.5C53 12.4167 41.3594 1 27 1' stroke='%23202020' stroke-dasharray='4 4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Add new curved line SVG */
.hero h1 > span > span > span::before {
  content: "";
  position: absolute;
  top: -31px;
  left: -45px;
  width: 45px;
  height: 62px;
  background-image: url("data:image/svg+xml,%3Csvg width='45' height='62' viewBox='0 0 45 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 60.7558L43.75 30.8779L1 1' stroke='%23343434' stroke-dasharray='4 5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero h1 > span > span::after {
  content: "";
  position: absolute;
  top: -25%;
  right: 97%;
  width: 54px;
  height: 53px;
  background-image: url("data:image/svg+xml,%3Csvg width='54' height='53' viewBox='0 0 54 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 26.5C1 40.5833 12.6406 52 27 52C41.3594 52 53 40.5833 53 26.5C53 12.4167 41.3594 1 27 1' stroke='%23202020' stroke-dasharray='4 4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

.preview-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.device-frame {
  width: 100%;
  max-width: 950px;
  padding: 1.8rem;
  margin: -40px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px dashed rgba(255, 255, 255, 0.1);
  border-right: 1px dashed rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-top: none;
}

.inner-container {
  width: 100%;
  padding: 0 8rem;
}

.video-player {
  position: relative;
  width: 100%;
  padding-top: 45%;
  background-color: rgba(53, 53, 53, 0.938);
  border-radius: 16px;
  border: 10px solid rgba(26, 26, 26, 0.966);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-player:hover {
  transform: scale(1.05);
}

.video-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.text-container {
  width: 100%;
  position: relative;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  min-height: 95px; /* adjust as needed */
  text-align: center;
}

.text-container::before,
.text-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H4V4H0V5H4V9H5V5H9V4H5V0Z' fill='%23D9D9D9'/%3E%3C/svg%3E");
}

.text-container::before {
  left: -4px;
  transform: translate(-1px, 1px);
}

.text-container::after {
  right: -4px;
  transform: translate(1px, 1px);
}

.border-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  z-index: 1;
  /* New responsive sizing */
  width: auto;
}

.border-line svg {
  height: 100%;
  width: auto;
  display: block;
}

.border-line.left {
  left: -75px;
}

.border-line.right {
  right: -75px;
  transform: translateY(-50%) scaleX(-1);
}

.text-frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding: 1rem;
  margin: -34px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px dashed rgba(255, 255, 255, 0.1);
  border-right: 1px dashed rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-top: none;
}

.hero-description {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.brand {
  color: white;
  font-weight: 500;
}

.highlight {
  color: white;
  font-family: "Geist Mono", monospace;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.featured-products {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.section-header {
  text-align: center;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-header h2 {
  font-family: "Geist Mono", monospace !important;
  font-weight: 300;
  color: #888;
  font-size: 1rem;
  margin: 0;
  padding: 0.5rem 3rem;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  display: inline-block;
}

.section-header h3 {
  font-family: "Geist", sans-serif !important;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  padding: 1.5rem 3rem;
  line-height: 1.2;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: inline-block;
  margin-top: -1px;
  position: relative;
}

.section-header h3::before,
.section-header h3::after,
.section-header h3 span::before,
.section-header h3 span::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background-image: url("/images/plus.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.section-header h3::before {
  top: -4px;
  left: -4px;
}

.section-header h3::after {
  top: -4px;
  right: -4px;
  transform: rotate(90deg);
}

.section-header h3 span::before {
  bottom: -4px;
  right: -4px;
  transform: rotate(180deg);
}

.section-header h3 span::after {
  bottom: -4px;
  left: -4px;
  transform: rotate(-90deg);
}

.products-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  justify-items: center;
}

.card-container {
  background: #0b0b0b;
  border-radius: 14px;
  padding: 6px 6px;
  border: 0.75px solid rgba(255, 255, 255, 0.1);
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card-container:hover {
  cursor: pointer;
}

.card-container:nth-child(1):hover {
  transform: translateY(-8px);
  border-left: 1px solid rgba(59, 130, 246, 0.5);
  border-bottom: 1px solid rgba(59, 130, 246, 0.5);
  box-shadow: -4px 0 15px -3px rgba(59, 130, 246, 0.2),
    0 4px 15px -3px rgba(59, 130, 246, 0.2);
}

.card-container:nth-child(2):hover {
  transform: translateY(-8px);
  border-left: 1px solid rgba(249, 115, 22, 0.5);
  border-bottom: 1px solid rgba(249, 115, 22, 0.5);
  box-shadow: -4px 0 15px -3px rgba(249, 115, 22, 0.2),
    0 4px 15px -3px rgba(249, 115, 22, 0.2);
}

.card-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card-content {
  background: linear-gradient(180deg, #1d1d1d 0%, #121212 100%);
  border-radius: 11px;
  padding: 2rem;
  transition: background 0.3s ease;
}

.card-container:nth-child(1):hover .card-content {
  background: linear-gradient(180deg, #242424, #161616);
}

.card-container:nth-child(2):hover .card-content {
  background: linear-gradient(180deg, #242424, #161616);
}

.card-content img {
  transform: scale(1.3);
}

.product-logo {
  width: 64px;
  height: 64px;
  margin-bottom: 1.5rem;
}

.product-logo-2 {
  width: 64px;
  height: 64px;
  margin-bottom: 1.5rem;
}

.card-content h4 {
  font-family: "Geist", sans-serif;
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.card-content p {
  font-family: "Geist", sans-serif;
  color: #888;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.card-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Version Select Dropdown Styles */
.version-select {
  background: rgba(8, 8, 8, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  color: #888;
  font-family: "Geist Mono", monospace;
  font-size: 0.875rem;
  width: 100%;
  appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  transition: all 0.2s ease;
}

.version-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.version-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.version-select option {
  background: #0a0a0a;
  color: #888;
  padding: 1rem;
  font-family: "Geist Mono", monospace;
}

.version-select option:hover,
.version-select option:focus {
  background: #1a1a1a;
  color: #fff;
}

.version-select.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-image: none;
}

.download-btn {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-family: "Geist Mono", monospace;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.download-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

.download-btn.disabled {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  border: 2px dashed rgba(255, 255, 255, 0.2);
}

@media (max-width: 1024px) {
  .products-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1400px) {
  .navbar-container {
    margin: 0 3rem;
  }
}

@media (max-width: 1200px) {
  .navbar-container {
    margin: 0 2rem;
  }

  .hero {
    padding: 5rem 0;
    min-height: auto;
  }

  .hero h1 {
    font-size: 3.5rem;
    padding: 1rem 3rem;
    margin: 0 auto;
  }

  /* Adjust SVGs for 1200px */
  .hero h1::before {
    top: -55px;
    left: -65px;
    width: 65px;
    height: 55px;
  }

  .hero h1::after {
    top: -55px;
    right: -35px;
    width: 35px;
    height: 55px;
  }

  .hero h1 > span > span::before {
    top: -20px;
    right: -20px;
    width: 40px;
    height: 39px;
  }

  .hero h1 > span > span::after {
    top: -28px;
    left: -40px;
    width: 40px;
    height: 55px;
  }

  .featured-products {
    margin-top: -2.5rem;
    padding: 0rem 4rem 3rem 4rem;
  }
}

@media (max-width: 900px) {
  .nav-links,
  .social-links,
  .login-btn,
  .register-btn {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .nav-right {
    gap: 0.5rem;
  }

  .navbar-container {
    margin: 0 1rem;
  }

  .mobile-nav {
    transform: translateX(-100%);
  }

  .mobile-nav.active {
    transform: translateX(0);
  }

  .hero {
    padding: 5rem 0;
  }

  .hero h1 {
    font-size: 3rem;
    padding: 1rem 2rem;
    margin: 0 auto;
  }

  /* Adjust SVGs for 900px */
  .hero h1::before {
    top: -50px;
    left: -60px;
    width: 60px;
    height: 50px;
  }

  .hero h1::after {
    top: -50px;
    right: -32px;
    width: 32px;
    height: 50px;
  }

  .hero h1 > span > span::before {
    top: -18px;
    right: -18px;
    width: 36px;
    height: 35px;
  }

  .hero h1 > span > span::after {
    top: -25px;
    left: -36px;
    width: 36px;
    height: 50px;
  }

  .featured-products {
    margin-top: -2rem;
    padding: 0rem 3rem 3rem 3rem;
  }

  .footer {
    padding: 4rem 3rem 2rem;
  }
  .footer-content {
    margin: 0 8rem;

    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .footer-links {
    gap: 2rem;
  }
  .payment-methods {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
  }
  .payment-methods img {
    width: 40px;
  }
}

@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr min(100%, 89%) 1fr;
    gap: 1rem;
    margin-top: 60px;
  }

  .navbar-container {
    padding: 0 1rem;
    margin: 0;
  }

  .mobile-nav-content {
    padding: 5rem 1rem;
  }

  .hero,
  .featured-products,
  .developers,
  .footer {
    padding: 3rem 0;
  }

  .nav-links,
  .social-links,
  .login-btn,
  .register-btn {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .nav-right {
    gap: 0.5rem;
  }

  .navbar-container {
    margin: 0 1rem;
  }

  .hero {
    padding: 4rem 0;
  }

  .hero h1 {
    font-size: 2.75rem;
    padding: 1rem 1.5rem;
    margin: 0 auto;
  }

  /* Adjust SVGs for 768px */
  .hero h1::before {
    top: -45px;
    left: -55px;
    width: 55px;
    height: 45px;
  }

  .hero h1::after {
    top: -45px;
    right: -30px;
    width: 30px;
    height: 45px;
  }

  .hero h1 > span > span::before {
    width: 40px;
    height: 39px;
    top: -20px;
    right: -20px;
  }

  .hero h1 > span > span::after {
    top: -22px;
    left: -32px;
    width: 32px;
    height: 44px;
    display: none; /* Hide the curved line SVG */
  }

  .preview-container {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 2rem;
    position: relative;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.1);
  }

  .device-frame {
    width: 100%;
    max-width: 800px;
    padding: 1rem;
    margin: -34px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: none;
  }

  .inner-container {
    width: 100%;
    padding: 0 0rem;
  }

  .video-player {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: rgba(53, 53, 53, 0.938);
    border-radius: 16px;
    border: 10px solid rgba(26, 26, 26, 0.966);
  }

  .video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .text-container {
    width: 100%;
    position: relative;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.1);
  }

  .text-frame {
    width: 100%;
    max-width: 900px;
    padding: 1rem;
    margin: -34px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: none;
  }

  .featured-products {
    margin-top: -1.5rem;
    padding: 0rem 2rem 2rem 2rem;
  }

  .footer {
    padding: 4rem 2rem 2rem;
  }
  .footer-links {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-meta {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .payment-methods {
    grid-template-columns: repeat(3, 0.1fr);
    gap: 0.25rem;
  }
  .payment-methods img {
    width: 36px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 3rem 0;
  }

  .hero-container {
    padding: 0 1.1rem;
  }

  .hero h1 {
    font-size: 2.5rem;
    padding: 1rem 0.5rem;
    margin: 0 auto;
    border: 1px dashed #3030308e;
  }

  .navbar-container {
    margin: 0 0.75rem;
  }

  .logo {
    width: 100px;
  }

  .login-btn {
    padding: 0.5rem 0.75rem;
    font-size: 13px;
  }

  .register-btn {
    padding: 0.5rem 0.75rem;
    font-size: 13px;
  }

  /* Adjust top left SVG */
  .hero h1::before {
    top: -32px;
    left: -40px;
    width: 40px;
    height: 32px;
  }

  /* Adjust top right SVG */
  .hero h1::after {
    top: -32px;
    right: -22px;
    width: 22px;
    height: 32px;
    transform: scale(1); /* Reset any transforms */
  }

  /* Adjust plus icons positions */
  .hero h1 > span > span::before,
  .hero h1 > span > span:last-child::before {
    width: 6px;
    height: 6px;
  }

  .hero-description {
    font-size: 0.9rem;
    padding: 0 1rem;
  }

  .highlight {
    font-size: 0.8em;
  }

  /* Adjust new circular dash */
  .hero h1 > span > span::before {
    width: 30px;
    height: 29px;
    top: -15px;
    right: -15px;
  }

  .hero h1 > span > span::after {
    top: -16px;
    left: -24px;
    width: 24px;
    height: 33px;
  }

  .preview-container {
    padding: 0.5rem;
    margin: 0.5rem;
  }

  .device-frame {
    margin: -10px auto;
    padding: 0.25rem;
  }

  .inner-container {
    padding: 0 0.5rem;
  }

  .video-player {
    border: 4px solid rgba(26, 26, 26, 0.966);
    border-radius: 8px;
  }

  .video-player iframe {
    border-radius: 4px;
  }

  .preview-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.1);
  }

  .device-frame {
    width: 100%;
    max-width: 800px;
    padding: 1rem;
    margin: -34px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: none;
  }

  .inner-container {
    width: 100%;
    padding: 0 0rem;
  }

  .video-player {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: rgba(53, 53, 53, 0.938);
    border-radius: 16px;
    border: 6px solid rgba(26, 26, 26, 0.966);
  }

  .video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .text-container {
    width: 100%;
    position: relative;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.1);
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .hero h1::before {
    top: -45px;
    left: -55px;
    width: 55px;
    height: 45px;
  }

  .hero h1::after {
    top: -45px;
    right: -30px;
    width: 30px;
    height: 45px;
  }

  .preview-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.1);
  }

  .device-frame {
    width: 100%;
    max-width: 800px;
    padding: 1rem;
    margin: -34px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: none;
  }

  .inner-container {
    width: 100%;
    padding: 0 0rem;
  }

  .video-player {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: rgba(53, 53, 53, 0.938);
    border-radius: 16px;
    border: 10px solid rgba(26, 26, 26, 0.966);
  }

  .video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .text-container {
    width: 100%;
    position: relative;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.1);
  }

  .text-frame {
    width: 100%;
    max-width: 900px;
    padding: 1rem;
    margin: -34px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: none;
  }
}

@media (min-width: 769px) {
  .hero h1::before {
    top: -65px;
    left: -79px;
    width: 79px;
    height: 65px;
  }

  .hero h1::after {
    top: -66px;
    right: -44px;
    width: 44px;
    height: 66px;
  }
}

@media (max-width: 999px) {
  .border-line {
    display: none;
  }
}

@media (min-width: 1000px) and (max-width: 1150px) {
  .border-line.left {
    left: -43px;
  }

  .border-line.right {
    right: -75px;
    transform: translateY(-50%) scaleX(-1);
  }
}

@media (min-width: 1201px) {
  .hero-container {
    padding: 0 1rem;
  }
}

.developers {
  padding: 2rem 0;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.team-description {
  text-align: center;
  color: #888;
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
}

.dev-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin: 0 auto;
  width: 90%;
  max-width: 1200px;
}

.dev-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: #0a0a0a;
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  width: 100%;
  transition: all 0.3s ease;
  position: relative;
}

.dev-card:hover {
  cursor: pointer;
}

.dev-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-bottom: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.dev-card h4 {
  color: #fff;
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  font-family: "Geist", sans-serif;
}

.dev-card p {
  color: #bbbbbb;
  font-size: 0.75rem;
  margin-bottom: 1.25rem;
  font-family: "Geist Mono", monospace;
}

.dev-card img {
  transform: scale(1.1);
}

.dev-social-links {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.dev-social-links img {
  width: 18px;
  height: 18px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.dev-social-links img:hover {
  opacity: 1;
}

.dev-card:hover {
  cursor: pointer;
  box-shadow: 0 0 15px 2px rgba(3, 107, 107, 0.7);
}

@media (max-width: 1200px) {
  .developers {
    padding: 4rem 4rem;
  }
}

@media (max-width: 992px) {
  .developers {
    padding: 4rem 3rem;
  }
  .dev-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .developers {
    padding: 4rem 2rem;
  }
  .dev-cards {
    grid-template-columns: 1fr;
  }
}

.footer {
  background-color: #000000;
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6rem;
  margin-bottom: 2rem;
}

.footer-logo {
  width: 120px;
  height: auto;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-column h4 {
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
}

.footer-column a {
  display: block;
  width: fit-content;
  color: #888;
  font-family: "Geist Mono", monospace;
  font-size: 16px;
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color 0.2s ease;
  position: relative;
}

.footer-column a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #fff;
  transition: width 0.2s ease;
}

.footer-column a:hover {
  color: #fff;
}

.footer-column a:hover::after {
  width: 100%;
}

.footer-right h4 {
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.payment-methods img {
  width: 48px;
  height: auto;
}

.footer-bottom {
  padding-top: 0;
}

.legal-notice {
  color: #666;
  font-family: "Geist Mono", monospace;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  margin: 0 auto 2rem 218px; /* Aligns with footer links */
  max-width: 1000px;
  padding-bottom: 2rem;
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-meta p {
  color: #888;
  font-family: "Geist Mono", monospace;
  font-size: 14px;
}

.footer-meta a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-meta a:hover {
  color: #fff;
}

.footer-meta a:hover::after {
  width: 100%;
}

.footer-socials {
  display: flex;
  gap: 1rem;
}

.footer-socials img {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.footer-socials img:hover {
  opacity: 1;
}

@media (max-width: 1200px) {
  .footer {
    padding: 4rem 4rem 2rem;
  }
  .footer-content {
    gap: 4rem;
  }
}

@media (max-width: 992px) {
  .footer {
    padding: 4rem 3rem 2rem;
  }
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-links {
    gap: 1.5rem;
  }
  .payment-methods {
    grid-template-columns: repeat(3, 0.1fr);
    gap: 0.5rem;
  }
  .payment-methods img {
    width: 40px;
  }
  .legal-notice {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 4rem 2rem 2rem;
  }
  .footer-links {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .footer-meta {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .payment-methods {
    grid-template-columns: repeat(3, 0.1fr);
    gap: 0.25rem;
  }
  .payment-methods img {
    width: 36px;
  }
}

.legal-notice span {
  color: #fff;
  font-weight: 500;
}

/* Large screens */
@media (min-width: 1200px) {
  .hero h1 > span > span::after {
    width: 54px;
    height: 53px;
    top: -30%;
    left: 97.5%;
  }
}

/* Medium screens */
@media (max-width: 1199px) and (min-width: 768px) {
  .hero h1 > span > span::after {
    width: 44px;
    height: 43px;
    top: -16%;
    left: 97.5%;
  }
}

/* Small screens */
@media (max-width: 767px) and (min-width: 480px) {
  .hero h1 > span > span::after {
    width: 36px;
    height: 35px;
    top: -20%;
    left: 95%;
  }
}

/* Extra small screens */
@media (max-width: 479px) {
  .hero h1 > span > span::after {
    width: 30px;
    height: 29px;
    top: -15%;
    left: 94%;
  }
}

@keyframes svgDropIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animations to the SVGs with different delays */
.hero h1::before {
  animation: svgDropIn 0.6s ease-out 0.2s forwards;
  opacity: 0;
}

.hero h1::after {
  animation: svgDropIn 0.6s ease-out 0.4s forwards;
  opacity: 0;
}

.hero h1 > span::before {
  animation: svgDropIn 0.6s ease-out 0.6s forwards;
  opacity: 0;
}

.hero h1 > span::after {
  animation: svgDropIn 0.6s ease-out 0.8s forwards;
  opacity: 0;
}

.hero h1 > span > span::before {
  animation: svgDropIn 0.6s ease-out 1s forwards;
  opacity: 0;
}

.hero h1 > span > span:last-child::before {
  animation: svgDropIn 0.6s ease-out 1.2s forwards;
  opacity: 0;
}

@keyframes svgCircularIn {
  0% {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Update the animation for the semi-circle SVG */
.hero h1 > span > span::after {
  animation: svgCircularIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
  opacity: 0;
  transform-origin: center center;
}

@keyframes svgTriangleIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
    transform-origin: center center;
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75) rotate(-22.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* Update the animation for the curved line SVG */
.hero h1 > span > span > span::before {
  animation: svgTriangleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
  opacity: 0;
  transform-origin: center center;
}

@keyframes svgDrawTriangle {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 0 100%);
  }
}

/* Update the animation for the triangle SVG */
.hero h1 > span > span > span::before {
  animation: svgDrawTriangle 1s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards;
  opacity: 0;
  transform-origin: left center;
}

@keyframes svgPlusIn {
  0% {
    opacity: 0;
    transform: rotate(180deg) scale(0);
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Apply animations to all plus signs */
.hero h1::before,
.hero h1::after,
.hero h1 > span::before,
.hero h1 > span::after,
.hero h1 > span > span::before,
.hero h1 > span > span:last-child::before,
.text-container::before,
.text-container::after,
.text-container > span::before,
.text-container > span::after {
  animation: svgPlusIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay)
    forwards;
  opacity: 0;
  transform-origin: center center;
}

/* Set different delays for each plus sign */
.hero h1::before {
  --delay: 0.2s;
}
.hero h1::after {
  --delay: 0.4s;
}
.hero h1 > span::before {
  --delay: 0.6s;
}
.hero h1 > span::after {
  --delay: 0.8s;
}
.hero h1 > span > span::before {
  --delay: 1s;
}
.hero h1 > span > span:last-child::before {
  --delay: 1.2s;
}

/* Text container plus signs delays */
.text-container::before {
  --delay: 1.4s;
}
.text-container::after {
  --delay: 1.6s;
}
.text-container > span::before {
  --delay: 1.8s;
}
.text-container > span::after {
  --delay: 2s;
}

@keyframes drawBorderLine {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.border-line {
  animation: drawBorderLine 1s cubic-bezier(0.65, 0, 0.35, 1) 2.2s forwards;
  opacity: 0;
}

.border-line.right {
  animation-delay: 2.4s;
}

@media (min-width: 300px) and (max-width: 1000px) {
  .footer-container {
    margin: 0 0;
  }
  .footer-content {
    margin: 5% 0;
  }
}