@import "./companents.css";
@import "./clip-image.css";
@import "./text.css";
@import './devices.css';


:root {
  --bg-url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC';
  --bg-width: 64px;
  --bg-height: 64px;
}


@font-face {
  font-family: 'Open-sans-regular';
  src: url(../fonts/Open_Sans/OpenSans-Regular.ttf);
}

@font-face {
  font-family: 'Open-sans-medium';
  src: url(../fonts/Open_Sans/OpenSans-Medium.ttf);
}

@font-face {
  font-family: 'Open-sans-semibold';
  src: url(../fonts/Open_Sans/OpenSans-SemiBold.ttf);
}

@font-face {
  font-family: 'Rubik-regular';
  src: url(../fonts/Rubik/Rubik-Regular.ttf);
}

@font-face {
  font-family: 'Rubik-semibold';
  src: url(../fonts/Rubik/Rubik-SemiBold.ttf);
}

@font-face {
  font-family: 'Inter-regular';
  src: url(../fonts/Inter/Inter-Regular.ttf);
}

.section-animation {
  background-color:  #000 ;
}

.open-sans-regular {
  font-family: 'Open-sans-regular';
  font-weight: 400;
}

.open-sans-medium {
  font-family: 'Open-sans-medium';
  font-weight: 500;
}

.open-sans-semibold {
  font-family: 'Open-sans-semibold';
  font-weight: 600;
}

.rubik-regular {
  font-family: 'Rubik-regular';
  font-weight: 400;
}

.rubik-semibold {
  font-family: 'Rubik-semibold';
  font-weight: 600;
}

.inter-regular {
  font-family: 'Inter-regular';
  font-weight: 400;
}
* {
  line-height: normal !important;
}

/*section*/

.animation-section{
  background: black;
  overflow: hidden;
}


/* bg animation */
@-webkit-keyframes bg-scrolling-reverse {
  100% { background-position: var(--bg-width) var(--bg-height); }
}
@-moz-keyframes    bg-scrolling-reverse {
  100% { background-position: var(--bg-width) var(--bg-height); }
}
@-o-keyframes      bg-scrolling-reverse {
  100% { background-position: var(--bg-width) var(--bg-height); }
}
@keyframes         bg-scrolling-reverse {
  100% { background-position: var(--bg-width) var(--bg-height); }
}

@-webkit-keyframes bg-scrolling {
  0% { background-position: var(--bg-width) var(--bg-height); }
}
@-moz-keyframes    bg-scrolling {
  0% { background-position: var(--bg-width) var(--bg-height); }
}
@-o-keyframes      bg-scrolling {
  0% { background-position: var(--bg-width) var(--bg-height); }
}
@keyframes         bg-scrolling {
  0% { background-position: var(--bg-width) var(--bg-height); }
}

/* Main styles */
.section-white {
  background: url('../Image/Frame 19.png') repeat 0 0 ,#000;
  background-size: 32px;
  -webkit-animation: bg-scrolling-reverse .92s infinite; /* Safari 4+ */
  -moz-animation:    bg-scrolling-reverse .92s infinite; /* Fx 5+ */
  -o-animation:      bg-scrolling-reverse .92s infinite; /* Opera 12+ */
  animation:         bg-scrolling-reverse .92s infinite; /* IE 10+ */
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function:    linear;
  -o-animation-timing-function:      linear;
  animation-timing-function:         linear;

}


/* text animation  */

.gradient-background {
  background: linear-gradient(90deg, rgba(255, 189, 89, 0.50) 0%, #FFBD59 15.61%, rgba(255, 189, 89, 0.50) 53.76%);

  background-size: 200%;
  /* Background Text Clip */
  /* webkit vendor prefix start */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* webkit vendor prefix end */
  background-clip: text;
  animation: gradient-text-animation 5s alternate infinite;
  
}

@keyframes gradient-text-animation {
  from {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}
.current-btn{
  top: 0;
  left: 0;
  transition: all .15s linear 0s;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 15px 25px;
  background :transparent;
  font-size: 18px;
  color: #fff;
  border: 1px solid white;
  font-family: 'Open-sans-semibold';
  font-weight: 600; 
   letter-spacing: 1px;
}
 .current-btn:hover {
  border-color: #997407;
  color: #997407;
}
.current-btn_white{
  background-color: #fff;
  color: #1A1A1A;
}
.current-btn_white:hover{
  background :transparent;
  border-color: #fff;
  color: #fff;
}
@media screen and (max-width:768px) {
  .current-btn{
    font-size: 14px;
  }
}