html {
  scroll-behavior: smooth;
  font-family: "Poppins", sans-serif;
}

@font-face {
  font-family: "Beckman-new";
  src: url("./assets/fonts/beckman-free1.otf");
  font-weight: normal;
  font-style: normal;
}
.beckman-font {
  font-family: "Beckman-new" !important;
  font-weight: 300 !important;
}
.container {
  max-width: 1200px;
  margin-inline: auto;
}
@media (max-width: 1280px) {
  .container {
    max-width: 100%;
    padding-inline: 50px;
  }
}
@media (max-width: 767.98px) {
  .container {
    max-width: 100%;
    padding-inline: 24px;
  }
}
@media (max-width: 639.98px) {
  .container {
    max-width: 100%;
    padding-inline: 16px;
  }
}
@media (min-width: 1500px) {
  .container {
    max-width: 1300px;
  }
}

header {
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease;
}
header.sticky-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  background-color: #1a2334;
  opacity: 1;
  visibility: visible;
}

/* @media (max-width: 767.98px) {
  header {
    opacity: 1;
    visibility: visible;
  }
} */

.home-banner-section {
  background-image: linear-gradient(
    to right top,
    #1a2334,
    #182338,
    #17243c,
    #15243f,
    #132443,
    #112549,
    #0e2650,
    #0b2756,
    #072961,
    #032b6c,
    #022d76,
    #032f81
  );
}
.cap-main-head {
  color: #ffffff;
  /* background: linear-gradient(to right, #e9c54c, #be9d33, #9d8023) ;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; */
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.8s ease-in !important; */
}

.card-small {
  background-color: #ffffff10;
  backdrop-filter: 10px;
}

.card-small:hover {
  background-color: #ffffff2b;
}

.ag-format-container {
  width: 100%;
  margin: 0 auto;
}
.ag-animate-text-block {
  margin-bottom: 50px;
}
@media (max-width: 639.98px) {
  .ag-animate-text-block {
    margin-bottom: 36px;
  }
}
.ag-toggle_title {
  line-height: 1.2;
  /* margin: 0 0 50px; */
  text-align: center;
  color: #fff;
}
.ag-toggle_tagline {
  margin: 0 0 20px;

  text-align: center;
  color: #fff;
}
.cd-words-wrapper {
  color: #be9d33;
}

/* @media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 96%;
  }
}
@media only screen and (max-width: 639px) {
  .ag-toggle_title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 479px) {
}
@media (min-width: 768px) and (max-width: 979px) {
  .ag-format-container {
    width: 750px;
  }
}

@media (min-width: 980px) and (max-width: 1161px) {
  .ag-format-container {
    width: 900px;
  }
} */

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}
.no-js .cd-words-wrapper b {
  opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}

/* xslide  */

.cd-headline.slide span {
  display: inline-block;
}
.cd-headline.slide .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.slide b {
  opacity: 0;
  top: 0.2em;
}
.cd-headline.slide b.is-visible {
  top: 0;
  opacity: 1;
  -webkit-animation: slide-in 0.6s;
  -moz-animation: slide-in 0.6s;
  animation: slide-in 0.6s;
}
.cd-headline.slide b.is-hidden {
  -webkit-animation: slide-out 0.6s;
  -moz-animation: slide-out 0.6s;
  animation: slide-out 0.6s;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}
@-moz-keyframes slide-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}
@keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
    -moz-transform: translateY(120%);
    -ms-transform: translateY(120%);
    -o-transform: translateY(120%);
    transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

body:has(.is-visible.trans-x) .cap-main-head {
  transform: translateX(68px);
  transition: 0.6s;
}
body:has(.trans-x) .cap-main-head {
  transform: translateX(0);
  transition: 0.6s;
}

@media (max-width: 1023.98px) {
  body:has(.is-visible.trans-x) .cap-main-head {
    transform: translateX(50px);
  }
  .cd-words-wrapper {
    width: 145px !important;
  }
}
@media (max-width: 767.98px) {
  body:has(.is-visible.trans-x) .cap-main-head {
    transform: translateX(38px);
  }
  .cd-words-wrapper {
    width: 116px !important;
  }
}

@media (max-width: 639.98px) {
  body:has(.is-visible.trans-x) .cap-main-head {
    transform: translateX(26px);
  }
  .cd-words-wrapper {
    width: 78px !important;
  }
}

#scroll-down {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5vh;
  height: 2.5vh;
  transform: translate(-50%, -50%);
  /* perspective: 10vh; */
}

#scroll-down svg {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  fill: currentColor;
  color: #ffffff;
  /* filter: blur(1vh) drop-shadow(0 0 3vh #0fb); */
  animation: scroll-down 2s infinite cubic-bezier(0.8, 0, 0.2, 1);
  opacity: 0;
}

#scroll-down svg:nth-child(0) {
  animation-delay: 0s;
}
#scroll-down svg:nth-child(1) {
  animation-delay: 0.5s;
}
#scroll-down svg:nth-child(2) {
  animation-delay: 1s;
}
#scroll-down svg:nth-child(3) {
  animation-delay: 1.5s;
}

@keyframes scroll-down {
  0% {
    /* filter: blur(1vh) drop-shadow(0 0 6vh #00f); */
    opacity: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0.5) rotateX(45deg);
    color: #b9f;
  }
  50% {
    /* filter: blur(0) drop-shadow(0 0 3vh rgba(38, 74, 255, 0)); */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateX(0);
    color: #fff;
  }
  100% {
    /* filter: blur(0.2vh) drop-shadow(0 0 2vh rgba(0, 4, 255, 0)); */
    opacity: 0;
    top: 100%;
    transform: translate(-50%, -50%) scale(0.5) rotateX(0);
    color: #b9f;
  }
}

.slider > div {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* About designs */
.about-banner,
.vision-card {
  background-image: linear-gradient(
    to right top,
    #1a2334,
    #182338,
    #17243c,
    #15243f,
    #132443,
    #112549,
    #0e2650,
    #0b2756,
    #072961,
    #032b6c,
    #022d76,
    #032f81
  );
}
.about-banner::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-image: linear-gradient(to bottom, #1a2334, #1a233400, #1a233400);
}

@media (max-width: 639.98px) {
  .about-banner {
    background-image: url("./assets/images/image1.png");
    background-size: cover;
    background-position: center;
  }
  .about-banner::after {
    background-image: linear-gradient(
      to bottom,
      #1a2334b9,
      #1a23348a,
      #1a233439
    );
  }
}

.about-body header {
  opacity: 100;
  visibility: visible;
}

.vision-card .gradient-yellow {
  background: linear-gradient(to right, #ebd457, #c3a133);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* .bar {
transition: all 0.3s ease;
}
.open .bar1 {
transform: rotate(45deg) translateY(11px);
}
.open .bar2 {
opacity: 0;
}
.open .bar3 {
transform: rotate(-45deg) translateY(-11px);
} */

#menu-btn.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
  background-color: #fff;
}
#menu-btn.open span:nth-child(2) {
  opacity: 0;
}
#menu-btn.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
  background-color: #fff;
}
#sidebar {
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
}
#sidebar.show {
  right: 0;
  box-shadow: 0px 0px 100vw 300px rgba(0, 0, 0, 0.208);
  display: block;
}

.-right-full {
  right: -100%;
}

/* Contact page styles */
.contact-wrapper {
  box-shadow: rgba(17, 12, 46, 0.1) 0px 24px 50px 0px;
}
.contact-left::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #000000, #0000004b, #00000000);
}

@media (max-width: 1023.98px) {
  .contact-mob-img {
    background-position: 50% 25%;
    padding-top: 160px;
    padding-bottom: 30px;
  }
}

/* .why-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.3); 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
} */

.grad {
  background: linear-gradient(to bottom, #f8e785, #826916);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 
.slow-section .content > div {
  position: sticky;
  top: 80px;
  z-index: 10; 
  background: #fff; 
} */

.perspective-1000 {
  perspective: 1000px;
}

.custom-spin3d {
  animation: spin3d 5s linear infinite;
  transform-origin: center;
  transform-style: preserve-3d;
}

@keyframes spin3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.custom-spin3d-reverse {
  animation: spin3d-reverse 4s linear infinite;
  transform-origin: center;
  transform-style: preserve-3d;
}

@keyframes spin3d-reverse {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg); /* reversed direction */
  }
}

.video-wrap-slop {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 55px), calc(100% - 55px) 100%, 0 100%);
  background-color: #fff;
  position: relative;
  overflow: hidden;
}