@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'MADE Soulmaze Outline Regular';
  src: url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap') format('font-format');
  
}

 ::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background-color: black;
  }

  ::-webkit-scrollbar-thumb {
    background: #00d8ff;
    border-radius: 10px;
  }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body{
  color: white;

  ::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: #00d8ff;
    border-radius: 10px;
  }
} 

  .one {
    position: relative;
   
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;

    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/372053a4-0bc9-423c-9ebc-7dfa2005bbcc/dg0y4rc-d7e7726d-550f-4333-8fbe-e760070a9971.png/v1/fill/w_1194,h_669,q_70,strp/neon_ball_by_nischalcha_dg0y4rc-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzE4IiwicGF0aCI6IlwvZlwvMzcyMDUzYTQtMGJjOS00MjNjLTllYmMtN2RmYTIwMDViYmNjXC9kZzB5NHJjLWQ3ZTc3MjZkLTU1MGYtNDMzMy04ZmJlLWU3NjAwNzBhOTk3MS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.pFBomPi3B72FRp9_EJbMl35TbToRj9jzsDLWO9Ba_oY');
    background-size: cover;
    background-position: center;
  }

  .video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;

    animation: fadeOut 5s cubic-bezier(0, 0.33, 0.07, 1.03) 2.2s forwards;
    -webkit-animation: fadeOut 5s cubic-bezier(0, 0.33, 0.07, 1.03) 2.2s forwards;
  }

  .video-bg-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.17);
  }
  .linear-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      135deg,
      rgba(1, 3, 5, 0.2) 0%,
      rgb(9, 3, 15, 0.2) 100%
    );
    animation: fadeOut 5s cubic-bezier(0, 0.33, 0.07, 1.03) 1.9s forwards;
    -webkit-animation: fadeOut 5s cubic-bezier(0, 0.33, 0.07, 1.03) 1.9s forwards;
  }
  nav {
    position: absolute;
    top: 0;
    display: flex;
    padding-top: 20px;

    align-items: center;
    opacity: 0;

    gap: 20px;
    z-index: 5;

    animation: fadeEaseIn 3s cubic-bezier(0, 0.33, 0.07, 1.03) 0s forwards;
    -webkit-animation: fadeEaseIn 3s cubic-bezier(0, 0.33, 0.07, 1.03) 0s forwards;
  }

  .navbar-link {
    display: flex;
    align-items: center;
    gap: 90px;
    font-weight: bold;
  }
  .d-flex {
    display: flex;
  }
  .logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    font-weight: lighter;
  }
  .circle-border {
    width: 53px;
    height: 53px;
    text-align: center;
    display: flex;
    box-shadow: 0px 0px 21px rgb(255 255 255 / 26%);

    justify-content: center;
    align-items: center;
    font-weight: 900;
    margin: 0 auto;

    border-radius: 50px;
    border: 1.7px solid white;
  }
  .XL-text {
    position: absolute;
    text-transform: uppercase;
    opacity: 0;
  font-weight:bolder;

    text-align: center;
    color: #ffffff;
    /* transform: translateY(-50px); */
    font-family: "MADE Soulmaze Outline Regular";
    font-size: min(10vw, 85px);

    line-height: min(10vw, 81px);
    text-shadow: 0px 0px 21px rgb(255 255 255 / 65%);
    z-index: 1;
    animation: fadeIn 2s ease-in 0s forwards;
  }
  .L-text {
    position: absolute;
    font-family: "MADE Soulmaze Outline Regular";

    text-transform: uppercase;
    text-align: center;

    font-size: min(10vw, 85px);
  font-weight:bolder;

    line-height: min(10vw, 81px);

    color: transparent;
    -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.497);

    transform: translateY(-25px);
  }
  .fab {
    font-size: 24px;
    font-weight: lighter;
  }

  .social-icons {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    color: white;

    z-index: 2;
  }
  .M-text {
    transform: rotate(90deg);
    transform-origin: 0 0;
    font-size: 0.7rem;
    letter-spacing: 2px;
    font-weight: bold;
  font-weight:bolder;
    
  }

  .container-center {
    width: 80vw;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
  }
  .GetStarted {
    background-color: #e93dd600;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-color: #ffffff;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 32px 32px 5px rgb(4 4 4 / 42%);
    padding: 12px 75px 12px 75px;
    position: absolute;
    margin-top: 190px;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
          backdrop-filter: blur(2px);

    text-transform: uppercase;
  }
  .GetStarted:hover {
    background-image: linear-gradient(
      135deg,
      rgba(6, 147, 227, 0.2) 0%,
      rgb(155, 81, 224, 0.2) 100%
    );
    background-color: transparent;
    text-transform: uppercase;
  }
  .text-M {
    position: absolute;
    margin-top: 90px;
    font-size: 1.5rem;
    font-weight: bolder;
    color: #ab89c7;
    letter-spacing: 4px;
    font-family: "Kanit", sans-serif;
  }

  .featured {
    position: absolute;
    bottom: 20px;
    font-family: "MADE Soulmaze Outline Regular";
  font-weight:bolder;
    transform: translateY(-10vh);

    left: 10vw;
    font-size: 2rem;

    text-transform: uppercase;
    animation: fadeIn 2s ease-in 0s forwards;
  }
  .featured::after {
    content: "Featured";
    font-family: inherit;

    position: absolute;
    bottom: -25px;
    left: 0;
    font-size: 2rem;
    color: transparent;
    -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.497);

    text-transform: uppercase;
  }

  .two {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: black;
    padding: 9%;
    padding-top: 2%;
    column-gap: 2%;
    row-gap: 2%; */
  }

  .two > img {
    max-height: 172px;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  .three {
    background-color: black;
    padding-right: 4%;
    display: flex;
    align-items: center;
    justify-content: end;

    & > span {
      position: absolute;
      margin-right: clamp(10px, 10%, 47px);
      text-transform: uppercase;
      font-weight: lighter;
      font-family: "MADE Soulmaze Outline Regular";
    }
    & > svg {
      margin-left: auto;
      display: block;

      height: 150px;
      letter-spacing: 0.52em;

      & > text {
        transform-origin: 50% 50%;
        animation: rotate 10s linear infinite;
      }
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(-360deg);
    }
  }

  .four {
    background-color: blue;

    background-color: black;
    padding-inline: 10%;
    margin-bottom: 0;

    & > .Patners {
      padding-top: 10px;
      font-family: "MADE Soulmaze Outline Regular";
      font-size: 2rem;
      position: relative;
      bottom: -10px;
  font-weight:bolder;
      

      &::after {
        content: "patners with";
        font-family: inherit;

        position: relative;
        bottom: -25px;
        left: 0;
        font-size: 2rem;
        color: transparent;
        -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.497);

        text-transform: uppercase;
      }

      &::before {
        content: "patners with";
        font-family: inherit;
        color: #d2d4f2;

        position: absolute;
        bottom: -15px;
        left: 0;
        font-size: 2rem;

        text-transform: uppercase;
      }
    }

    .line-left {
      background-color: white;
      height: 1px;
      width: 100%;
      margin-top: 40px;
    }
    .line-right {
      background-color: white;
      height: 1px;
      width: 100%;
      margin-bottom: 10px;
    }

    .getstarted-btn {
      margin-top: 20px;
      white-space: nowrap;
      justify-content: center;
      display: flex;
      font-family: Arial, Helvetica, sans-serif;
      word-wrap: normal;
      font-weight: bolder;

      align-items: center;

      width: clamp(90px, 50%, 270px);
      text-transform: uppercase;
      color: white;
      background-color: transparent;

      border-style: solid;
      border-width: 1px 1px 1px 1px;
      border-color: #00d8ff;
      border-radius: 5px 5px 5px 5px;
      box-shadow: 0px 32px 32px 5px rgb(4 4 4 / 42%);
      padding: 12px 87px 12px 87px;
    }

    .million {
      color: #00d8ff;
    }

    .brands {
      background-color: black;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      & > img {
        width: 100%;
     
      

      }
    }
  }

  .five {
    background-color: black;
    padding-inline: 10%;
    padding-top: 5%;
    margin-top: -10px;
    /* margin-top: 0; */
    /* background-color: #ab89c7; */
    height: max-content;
    overflow: hidden;

    & > .five-p {
      font-size: clamp(0.4rem, calc(0.4rem + 2vw), 21px);
      line-height: clamp(1.5rem, calc(1.5rem + 1vw), 40px);
      font-style: inherit;
      padding-right: 5%;
      padding-top: 30px;
    }

    & > .bigimg-left {
      max-width: 70%;
      max-height: 470px;
      margin-block: 30px;
      object-fit:contain;
    }
    & > .bigimg-right {
      max-width: 70%;
      max-height: 470px;
      text-align: end;
      float: right;
      object-fit:contain;
      
    }

    & > .five-content {
      display: flex;
      align-items: center;

      gap: 10px;

      .circle-b {
        min-width: 53px;
        min-height: 53px;

        display: flex;
        box-shadow: 0px 0px 21px rgb(255 255 255 / 26%);

        justify-content: center;
        align-items: center;
        font-weight: 900;

        border-radius: 50px;
        border: 1.7px solid white;
      }

      & > .Why {
        font-family: "MADE Soulmaze Outline Regular";
        font-size: clamp(1.5rem, calc(0.3rem + 2vw), 2rem);
        position: relative;
        top: -20px;
        color: wheat;
  font-weight:bolder;
        
      }

      & > .Why::before {
        content: "Why choose AiPro";
        font-size: inherit !important;
        white-space: nowrap;
        width: 100%;
        font-family: inherit;
        color: #d2d4f2;
        word-break: keep-all;

        position: absolute;
        bottom: -15px;
        left: 0;
        font-size: 2rem;

        text-transform: uppercase;
      }

      & > .Why::after {
        content: "Why choose AiPro";
        font-size: inherit !important;
        white-space: nowrap;

        position: relative;
        bottom: -25px;
        left: 0;
        font-size: 2rem;
        color: transparent;
        -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.497);

        text-transform: uppercase;
      }
    }
  }

  .six {
    background-color: black;
    padding-inline: 10%;
    position: relative;
    padding-block: 80px;

    & > .barcode {
      width: 70px;
    }

    & > .about {
      font-family: "MADE Soulmaze Outline Regular";
      font-size: 2rem;
      position: relative;
      color: wheat;
      margin-bottom: 30px;
  font-weight:bolder;

      &::before {
        content: "about";
        white-space: nowrap;
        width: 100%;
        font-family: inherit;
        color: #d2d4f2;
        word-break: keep-all;

        font-size: 2rem;

        text-transform: uppercase;
      }

      &::after {
        content: "about";
        font-family: inherit;
        white-space: nowrap;
        position: absolute;
        left: 0;
        top: 20px;

        font-size: 2rem;
        color: transparent;
        -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.497);

        text-transform: uppercase;
      }
    }

    & > .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      row-gap: 20px;
      padding-bottom: 40px;

      & > .bnumber {
        color: #00d8ff;
        font-family: "MADE Soulmaze Outline Regular";
        font-size: clamp(25px, calc(25px + 3vw), 4rem);
  font-weight:bolder;
        
      }
      & > .mtext {
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 0.2rem;
        text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.662);
      }
    }

    & > .six-p {
      font-size: clamp(0.4rem, calc(0.4rem + 2vw), 21px);
      line-height: 40px;
      font-style: inherit;
      padding-right: 5%;
      padding-top: 30px;
    }
  }

  .seven {
    position: relative;
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    /* min-height: 100vh; */
    width: 100%;
    overflow: hidden;

    background-size: cover;
    background-position: center;

    & > .footer-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & > .linear-gradient {
      height: 100%;
      width: 100%;
      z-index: 2;
      background-image: linear-gradient(
        135deg,
        rgb(1, 3, 0.2) 0%,
        rgb(9, 3, 15, 0.3) 100%
      ) !important;
    }

    & > .quote {
      padding: 10%;
      position: absolute;
      text-align: center;
      font-family: "MADE Soulmaze Outline Regular";
  font-weight:bolder;
      
      color: #d1d3f2;
      font-size: clamp(1rem, calc(1rem + 2vw), 2.5rem);
      z-index: 3;
      text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.662);
    }
  }
  .footer {
    background-color: black;
    padding-inline: 10%;
    padding-block: 7%;
    text-align: center;

    & > .footer-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 50px;

      & .footer-title {
        font-weight: bold;
        font-size: 0.8rem;
        margin-top: 20px;
        text-align: end;
      }

      & .footer-text {
        font-weight: normal;
        font-size: 0.8rem;
        margin-top: 5px;
        color: white;
        text-align: end;
      }
    }

    & > .line-right {
      background-color: white;
      height: 1px;
      width: 100%;
      margin-bottom: 10px;
    }
  }

  @media screen and (max-width: 700px) {
    .two {
      grid-template-columns: repeat(2, 1fr);
    }
    .two > img {
      max-height: 104px;
    }
  }

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    transform: translateY(-120px);
    opacity: 1;
  }

  100% {
    transform: translateY(-50px);
    opacity: 1;
  }
}

@keyframes fadeEaseIn {
  0% {
    transform: translateY(-180px);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.miscare{
  position: fixed;
  z-index: 100;
}

.fixed-login {
  position: fixed;
  top: 50%; /* Poziționează la mijlocul ecranului pe verticală */
  right: 10px;
  transform: translateY(-50%); /* Ajustează pentru a centra complet vertical */
  z-index: 1000; /* Asigură-te că este deasupra altor elemente */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;  /* Setează o lățime fixă */
  height: 150px; /* Setează o înălțime fixă */
  cursor: pointer;
  text-align: center;
  background: transparent; /* Fundal transparent */
  text-decoration: none; /* Elimină sublinierea */
}

.fixed-login span {
  color: #28a745; /* Verde */
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  text-shadow: 0 0 5px #28a745, 0 0 10px #28a745, 0 0 20px #28a745, 0 0 40px #28a745;
}

.fixed-login svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  width: 150px;
  display: block;
  background: transparent; /* Fundal transparent */
}

.fixed-login text {
  transform-origin: 50% 50%;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from {
      transform: rotate(0);
  }
  to {
      transform: rotate(-360deg);
  }
}

/* Media queries pentru ecrane mai mici */
@media (max-width: 600px) {
  .fixed-login {
      width: 100px; /* Dimensiuni mai mici pentru ecrane mici */
      height: 100px;
  }

  .fixed-login span {
      font-size: 12px; /* Font-size mai mic pentru ecrane mici */
  }

  .fixed-login svg {
      height: 100px; /* Dimensiuni mai mici pentru ecrane mici */
      width: 100px;
  }
}

@media (max-width: 400px) {
  .fixed-login {
      width: 80px; /* Dimensiuni și mai mici pentru ecrane foarte mici */
      height: 80px;
  }

  .fixed-login span {
      font-size: 10px; /* Font-size și mai mic pentru ecrane foarte mici */
  }

  .fixed-login svg {
      height: 80px; /* Dimensiuni și mai mici pentru ecrane foarte mici */
      width: 80px;
  }
}