/* * {
  margin: 0;
  padding: 0;
} */

.wrapper {
  /* background-color: black; */
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.squre-frame {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-image: linear-gradient(to right, #D91F1F, #D66767) 1;
  border-radius: 5px;
  animation: rotate 5s linear infinite;
}

.squre-frame:nth-child(1) {
  animation-delay: 0s;
}

.squre-frame:nth-child(2) {
  animation-delay: 0.4s;
}

.squre-frame:nth-child(3) {
  animation-delay: 0.8s;
}

.squre-frame:nth-child(4) {
  animation-delay: 1.2s;
}

.squre-frame:nth-child(5) {
  animation-delay: 1.6s;
}

.squre-frame:nth-child(6) {
  animation-delay: 2s;
}

.squre-frame:nth-child(7) {
  animation-delay: 2.4s;
}


@keyframes rotate {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}








/* main css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;


}

html {
  scroll-behavior: smooth;
  background-color: black;
  color: white;
}


.clip-cut {
  clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
}

.arrow-cut {
  clip-path: polygon(0 38%, 0 0, 100% 0, 100% 32%, 93% 36%, 100% 43%, 100% 100%, 0 100%, 0 48%, 7% 43%);
}

.text-gradient {
  background: linear-gradient(90deg, #BD2429 38.5%, white 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* @font-face {
  font-family: "SF UI Display";
  src: url("fonts/sf-ui-display-cufonfonts.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
} */




body {
  /* font-family: "philosopher"; */
  line-height: auto;
  cursor: url("./image/ProfitSpaceX.png"), auto;
}

h1 {
  font-family: "philosopher";
  /* overflow: hidden; */
}

p,button{
  /* font-weight: 400; */
  font-family: "montserrat";
}


/* popup css start */

/* General Styles */

/* Popup Styles */
/* Popup Styling */
/* Popup Styling */
/* General Styles */
.active {
  background-color: red !important;
}

/* 
.hover-transform:hover{
      transform: translate(-2rem, -2rem) rotate(-20deg);
      transition: transform 500ms ease-in-out;
    } */





/* button css */

/* Tailwind-compatible custom CSS */
.bubble-button::before,
.bubble-button::after {
  content: '';
  position: absolute;
  width: 150%;
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  border-radius: 9999px;
  transform: scale(0);
  transition: transform 1000ms cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 1;
}

.bubble-button::before {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(0);
}

.bubble-button::after {
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%) scale(0);
}

.bubble-button:hover::before,
.bubble-button:hover::after {
  transform: translate(-50%, -50%) scale(1);
}