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

}

html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: "BebasNeue";
  src: url("./font/BebasKai.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.Mont{
    font-family: "Montserrat", sans-serif;
}

.Int{
    font-family: "Inter", sans-serif;
}

.marquee {
  animation: marquee 8s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.marquee2 {
  animation: marqueetwo 8s linear infinite;
}

@keyframes marqueetwo {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

.orangegradient{
  border-radius: 12px;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(90deg, #F42708, #F56A0D) border-box;
  border: 2px solid transparent;
}
.orangegradientborder{
  border-radius: 12px;
  background:
    linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)) padding-box,
    linear-gradient(90deg, #F42708, #F56A0D) border-box;
  border: 2px solid transparent;
}


.gradient-btn {
  background-color: transparent;
  color: #F9E6E6;
  border-radius: 9999px; /* full rounded */
  position: relative;
  z-index: 1;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
}

.gradient-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px; /* border thickness */
  border-radius: 9999px;
  background: linear-gradient(to bottom, #F42708, #F56A0D);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}



.input {
  width: 100%;
  padding:8px 12px;
  background-color: transparent;
  color: white;

  border: none;
  outline: none;

  background-image: linear-gradient(
    to right,
    #F42708,
    #F56A0D
  );
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: bottom;
}

/* Utility: make dark SVG icons render as white */
.icon-white {
  filter: brightness(0) invert(1);
}

/* Masked white arrow icon (uses section3arrow.svg as mask) */
.icon-arrow-up-white {
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  display: inline-block;
  transform: rotate(-90deg);
  -webkit-mask: url('./assets/svgs/section3arrow.svg') no-repeat center / contain;
  mask: url('./assets/svgs/section3arrow.svg') no-repeat center / contain;
}


input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 1;
  cursor: pointer;
}


input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 1;
  cursor: pointer;

}