@import "tailwindcss";

:root {
  --white: #ffffff;
  --secondary: #1E1E1E;
  --inter-font: 'Inter';
  --syne-font: 'Syne';
}

@theme {
  --breakpoint-2xl: 1440px;
  --breakpoint-xl: 1200px;
  --breakpoint-lg: 1024px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 640px;
  /* color */
  --color-primary: #F5F3ED;
  --color-secondary: #1E1E1E;

  /*fonts  */
  --font-inter: 'Inter';
  --font-syne: 'Syne';
}

@utility container {
  margin-inline: auto;
  max-width: 1138px;
  padding-inline: 16px;
}

body {
  font-family: var(--inter-font);
  font-feature-settings: 'pnum' on, 'lnum' on;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--syne-font);
}

.btns {
  box-shadow: 0px 1px 1px 0px #1F1F1F17, 0px 1px 1px 0px #1F1F1F0D, 0px 2px 1px 0px #1F1F1F03, 0px 3px 1px 0px #1F1F1F00, 0px 0px 0px 2px #FFFFFF26 inset;
  border: 1px solid #151515;
  background: linear-gradient(0deg, #272727, #272727), linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.12) 100%);
  width: 100%;
  border-radius: 8px;
  padding: 9px 15px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btns:hover {
  box-shadow: 0px 1px 1px 0px #1F1F1F17, 0px 1px 1px 0px #1F1F1F0D, 0px 2px 1px 0px #1F1F1F03, 0px 3px 1px 0px #1F1F1F00;
  border: 1px solid #E5E5E5;
  color: var(--secondary);
  background: var(--white);
}

.form-checkbox input:checked~span::before {
  background-color: #272727;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.2698 3.35245C13.6273 3.61245 13.7073 4.11245 13.4473 4.46995L7.04727 13.27C6.90977 13.46 6.69727 13.5775 6.46227 13.5975C6.22727 13.6175 5.99977 13.53 5.83477 13.365L2.63477 10.165C2.32227 9.85245 2.32227 9.34495 2.63477 9.03245C2.94727 8.71995 3.45477 8.71995 3.76727 9.03245L6.30477 11.57L12.1548 3.52745C12.4148 3.16995 12.9148 3.08995 13.2723 3.34995L13.2698 3.35245Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: top center;
}

.new-btns {
  border: 1px solid #1E1E1E33;
  background: var(--secondary);
  box-shadow: 0px 2px 12px -10px #1A1A1829, 0px 2px 8px 0px #AFAFAF40;
  font-size: 14px;
  line-height: 20px;
  padding: 9px 15px;
  font-weight: 700;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

.new-btns span {
  background: linear-gradient(180deg, #FFFFFF 50%, #1F1F1F 290.91%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  transition: all 0.3s ease-in-out;
}

.new-btns::before {
  content: '';
  position: absolute;
  top: -163px;
  left: 50%;
  transform: translateX(-50%);
  width: 153px;
  height: 153px;
  border-radius: 50%;
  background: var(--white);
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
}

.new-btns:hover {
  background: var(--white);
}

.new-btns:hover span {
  background: linear-gradient(180deg, var(--secondary) 50%, var(--white) 290.91%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.white-btns {
  border: 1px solid #1E1E1E33;
  box-shadow: 0px 3px 6px 0px #A8A8A829, 0px 2px 6px 0px #8686860F;
  background: var(--white);
  padding: 9px 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--secondary);
  font-weight: 700;
  transition: all 0.3s ease-in-out;
}

.white-btns:hover {
  background: var(--secondary);
  color: var(--white);
  box-shadow: 0 2px 12px -10px rgba(26, 26, 24, .16), 0 2px 8px rgba(175, 175, 175, .25);
}


.launch-every-section {
  background-color: var(--secondary);
  background-image: url("../../public/assets/image/launch-left.svg"), url("../../public/assets/image/launch-right.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: bottom left, bottom right;
}

.launch-every-section::before{
  content: '';
  width: 100%;
  height: 890px;
  background: url(../../public/assets/image/start-bg.png) no-repeat top center/ cover;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.custom-scroll::-webkit-scrollbar {
  width: 2px;
}

/* Track */
.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--secondary); 
}