@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import "tailwindcss";

@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
:root {
  --animate-pulse: pulse 2s cubic-bezier(1, -0.1, 0, 1.21) infinite;
}

html,
body {
  overflow-x: hidden;
  font-family: "Geist", sans-serif;
}

a {
  display: inline-block;
}
h1,
h2,
h3,
h4 {
  font-family: "Anton", sans-serif;
}

/* Loader */

.loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 99999;
  overflow: hidden;
}

/* Curtains */
.loader-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff4925;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
}

/* Content stays above curtains */
.loader-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* Curtain animation trigger */
.loader-overlay.curtain-up::before {
  transform: translateY(-100%);
}

/* Hide loader content with curtain */
.loader-overlay.curtain-up .loader-content {
  opacity: 0;
  transform: translateY(-90px) scale(0.4);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.loader-logo-img {
  width: 600px;
  opacity: 0;
  transform: translateY(-1000px);
  animation: logoSlideIn 1.2s ease forwards;
}

@keyframes logoSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cntnthidden {
  display: none;
}
/* Header Section */
#toggler-btn.tilted .toggle-line1 {
  transition: all 0.3s ease-in-out;
  transform: rotate(45deg) translate(6px, 6px);
}
#toggler-btn.tilted .toggle-line2 {
  transition: all 0.3s ease-in-out;
  transform: rotate(-45deg) translate(-4px, -6px);
}

/* Banner Section */

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}
/* Social list */

/* Auto scroll */
.auto-scroll {
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 11%,
    rgb(0, 0, 0) 23.5%,
    rgb(0, 0, 0) 36.5%,
    rgba(0, 0, 0, 0) 90%
  );
}
.auto-scroll:hover > .auto-scroll-itms {
  cursor: pointer;
  animation-play-state: paused;
}
.auto-scroll-itms {
  animation: rightTOLeft 16s linear infinite;
}
.auto-scroll-itms:nth-child(1) {
  animation-delay: -0s;
}
.auto-scroll-itms:nth-child(2) {
  animation-delay: -2s;
}
.auto-scroll-itms:nth-child(3) {
  animation-delay: -4s;
}
.auto-scroll-itms:nth-child(4) {
  animation-delay: -6s;
}
.auto-scroll-itms:nth-child(5) {
  animation-delay: -8s;
}
.auto-scroll-itms:nth-child(6) {
  animation-delay: -10s;
}
.auto-scroll-itms:nth-child(7) {
  animation-delay: -12s;
}
.auto-scroll-itms:nth-child(8) {
  animation-delay: -14s;
}
.auto-scroll2 {
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 11%,
    rgb(0, 0, 0) 23.5%,
    rgb(0, 0, 0) 36.5%,
    rgba(0, 0, 0, 0) 68%
  );
  margin-top: -50px;
  margin-left: -60px;
  margin-bottom: 100px;
}

.auto-scroll-itms2 {
  animation: rightTOLeft2 12s linear infinite;
}
.auto-scroll-itms2:nth-child(1) {
  animation-delay: -0s;
}
.auto-scroll-itms2:nth-child(2) {
  animation-delay: -2s;
}
.auto-scroll-itms2:nth-child(3) {
  animation-delay: -4s;
}
.auto-scroll-itms2:nth-child(4) {
  animation-delay: -6s;
}
.auto-scroll-itms2:nth-child(5) {
  animation-delay: -8s;
}
.auto-scroll-itms2:nth-child(6) {
  animation-delay: -10s;
}
/* About Section */

.parallax-img {
  will-change: transform;
}

/* Project Section */
.mySwiper {
  mask-image: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 1) 1%,
    rgba(0, 0, 0, 1) 99%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 1) 1%,
    rgba(0, 0, 0, 1) 99%,
    transparent
  );
}
@keyframes rightTOLeft {
  0% {
    right: -4%;
  }
  100% {
    right: 100%;
  }
}
@keyframes rightTOLeft2 {
  0% {
    right: -4%;
  }
  100% {
    right: 100%;
  }
}
/* Service Section */

.parallax-card-img {
  margin-top: -350px;
}
/* Project Page */
.pr-h1 {
  /* font-family: "Poppins", sans-serif; */
  letter-spacing: -0.05em;
}
@media screen and (max-width: 1400px) {
  @keyframes rightTOLeft {
    0% {
      right: -20%;
    }

    100% {
      right: 100%;
    }
  }
  @keyframes rightTOLeft2 {
    0% {
      right: -20%;
    }

    100% {
      right: 100%;
    }
  }
}
@media screen and (max-width: 1024px) {
  .auto-scroll2 {
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 11%,
      rgb(0, 0, 0) 23.5%,
      rgb(0, 0, 0) 36.5%,
      rgba(0, 0, 0, 0) 68%
    );
    margin-top: -134px;
    margin-left: -30px;
  }
  @keyframes rightTOLeft {
    0% {
      right: -16%;
    }

    100% {
      right: 100%;
    }
  }
  @keyframes rightTOLeft2 {
    0% {
      right: -16%;
    }

    100% {
      right: 100%;
    }
  }
  /* Service Section */

  .parallax-card-img {
    margin-top: 0px;
  }
}
@media screen and (max-width: 992px) {
  .nav-collapsed > li {
    margin-right: 23px;
  }
  /* Auto Scroll Section */
  .auto-scroll {
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 7%,
      rgb(0, 0, 0) 23.5%,
      rgb(0, 0, 0) 36.5%,
      rgba(0, 0, 0, 0) 93%
    );
  }
  .auto-scroll2 {
    margin-top: -40px;
    margin-left: -1px;
    margin-bottom: 25px;
  }
  @keyframes rightTOLeft {
    0% {
      right: -50%;
    }

    100% {
      right: 100%;
    }
  }
  @keyframes rightTOLeft2 {
    0% {
      right: -50%;
    }

    100% {
      right: 100%;
    }
  }
}

@media screen and (max-width: 768px) {
  .loader-logo-img {
    width: 450px;
  }
  @keyframes rightTOLeft {
    0% {
      right: -86%;
    }

    100% {
      right: 100%;
    }
  }
  @keyframes rightTOLeft2 {
    0% {
      right: -86%;
    }

    100% {
      right: 100%;
    }
  }
}
@media screen and (max-width: 640px) {
  .loader-logo-img {
    width: 300px;
  }
  .auto-scroll2 {
    margin-top: -40px;
    margin-left: -1px;
    margin-bottom: 5px;
  }

  @keyframes rightTOLeft {
    0% {
      right: -100%;
    }

    100% {
      right: 100%;
    }
  }
  @keyframes rightTOLeft2 {
    0% {
      right: -35%;
    }

    100% {
      right: 100%;
    }
  }
}
@media screen and (max-width: 400px) {
  .title1 {
    font-size: 65px;
  }
  .title4 {
    font-size: 30px;
  }
  /* Header Section */
  .navbar-collapsed {
    width: 310px;
  }
  .nav-btn > a {
    font-size: 26px;
    padding: 16px;
  }
  /* Banner Section */
  .bnnr-right {
    margin-top: -80px;
  }

  .bigname1 {
    top: 36px;
  }
  .bigname2 {
    top: 100px;
  }
  .banner-cntn {
    margin-top: 148px;
  }
  .scroll-down {
    margin-block: 30px 16px;
  }
  /* Autoscroll Section */
  @keyframes rightTOLeft {
    0% {
      right: -170%;
    }

    100% {
      right: 100%;
    }
  }
  .pr-h1 {
    font-size: 58px;
    margin-left: -4px;
    margin-top: -12px;
  }
  /* About Section */
  .about-hdr > .title2::after {
    left: 83%;
    top: 62%;
  }
  .about-cntn {
    font-size: 17px;
    line-height: 126%;
  }
  /* Project Section */
  .Project-hdr > .title2::after {
    left: 94%;
  }
  .count {
    left: 95%;
  }
  /* Service Section */
  .service-hdr > .title2::after {
    left: 94%;
    top: 63%;
  }
  /* F&Q Section */
  .fq-hdr > .title2::after {
    left: 71%;
  }
  /* Contact Section */
  .contact-hdr > .title2::after {
    left: 94%;
  }
}