@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed: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");

:root {
  --primary-gradient: linear-gradient(180deg, #307fe2 0%, #ea27c2 100%);
  --secondary-gradient: linear-gradient(180deg, #2c2929 100%, #0b0b0b 0%);
  --heading-font: "Barlow Condensed", sans-serif;
  --body-text-color: #c9cdd3;
}

body {
  color: var(--body-text-color);
  font-family: "Raleway", sans-serif;
  background-color: #000000;
}

@import url("navbar.css");
@import url("voices-icon.css");
@import url("loadingAnimation.css");

.hero h1 {
  font-family: var(--heading-font);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero p {
  font-size: 1rem;
  letter-spacing: 0.01em;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  margin-left: auto;
  margin-right: auto;
}

.pre-head {
  font-size: 1rem !important;
  font-weight: 200 !important;
  letter-spacing: 4px !important;
  color: #f4f5f6 !important;
  text-transform: uppercase;
}

.title,
h2 {
  color: #f4f5f6 !important;
  opacity: 0.9;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.1;
}

.title span,
h1 span,
h2 span {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3 {
  font-size: 1.5rem !important;
  font-weight: 500;
  color: #f4f5f6;
  opacity: 0.9;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (min-width: 992px) {
  .hero p {
    font-size: 1.5rem;
  }

  .pre-head {
    font-size: 1.4rem !important;
  }

  .title,
  h2 {
    font-size: 2rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 2rem !important;
  }
}

/* @media (min-width: 768px) {
    .pre-head{
        font-size: 1.2rem !important;
    }
    .title, h2 {
        font-size: 2.5rem;
        line-height: 1.3;
    }
    h3{
        font-size: 1.8rem !important;
    }
} */
.blur-50px {
  filter: blur(50px);
}

.grayscale {
  filter: grayscale(100%);
}

#menuDrop a {
  transition: all 0.3s ease-in-out;
}

#menuDrop a:hover {
  background: -webkit-linear-gradient(180deg, #307fe2 0%, #ea27c2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-wave {
  background-image: url("../images/wave-top.svg"), url("../images/wave-top.svg");
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
  background-position: center -120px, center -120px;
  background-blend-mode: color-burn;
}

@media (min-width: 576px) {
  .top-wave {
    background-position: center -10rem, center -14rem;
  }
}

@media (min-width: 768px) {
  .top-wave {
    background-position: center -16rem, center -18rem;
  }
}

@media (min-width: 992px) {
  .top-wave {
    background-position: center -23rem, center -23rem;
  }
}

@media (min-width: 1200px) {
  .top-wave {
    background-size: cover, cover;
    background-position: center -70rem, center -36rem;
  }
}

.section-topWeav {
  background-image: url("../images/background-images/crp-challenges1.svg"),
    url("../images/background-images/crp-challenges2.svg");
  background-position: center -35rem, center -35rem !important;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  -webkit-min-device-pixel-ratio: 2;
}

.section-midWeav {
  background-image: url("../images/background-images/crp-challenges1bottom.svg"),
    url("../images/background-images/crp-challenges2bottom.svg");
  background-position: center 15rem, center 15rem !important;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 50rem, 100% 50rem;
  -webkit-min-device-pixel-ratio: 2;
}

.featureChallage {
  background-image: url("../images/background-images/crp-challenges1.svg"),
    url("../images/background-images/crp-challenges2.svg"),
    url("../images/background-images/crp-challenges1bottom.svg"),
    url("../images/background-images/crp-challenges2bottom.svg");
  background-position: center -45rem, center -45rem, center calc(100% + 50rem),
    center calc(100% + 50rem);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover, cover;
  -webkit-min-device-pixel-ratio: 2;
}

.benefits {
  background-image: url("../images/background-images/crp-challenges1.svg"),
    url("../images/background-images/crp-challenges2.svg"),
    url("../images/background-images/crp-challenges1bottom.svg"),
    url("../images/background-images/crp-challenges2bottom.svg");
  background-position: center -55rem, center -55rem,
    /* center calc(100% + 50rem), 
        center calc(100% + 50rem);  */ center
      25rem,
    center 25rem;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  /* background-size: cover, cover, cover, cover; */
  background-size: cover, cover, 100% 50rem, 100% 50rem;
  -webkit-min-device-pixel-ratio: 2;
}

@media (max-width: 992px) {
  .featureChallage {
    background-position: center -28rem, center -28rem;
  }
}

@media (min-width: 240px) {
  .benefits {
    background-position: center -45rem, center -45rem, center 25rem,
      center 25rem !important;
    background-size: cover, cover, cover, cover;
  }
}

@media (max-width: 991px) {
  .featureChallage {
    background-position: center -32rem, center -32rem, center calc(100% + 30rem),
      center calc(100% + 30rem);
  }

  .benefits {
    background-position: center -45rem, center -45rem, center 12rem,
      center 12rem;
    background-size: cover, cover, 100% 50rem, 100% 50rem;
  }
}

@media (min-width: 992px) {
  .featureChallage {
    background-position: center -20rem, center -20rem, center calc(100% + 20rem),
      center calc(100% + 20rem);
  }

  .benefits {
    background-position: center -50rem, center -50rem, center 20rem,
      center 20rem !important;
    background-size: cover, cover, 100% 50rem, 100% 50rem;
  }
}

@media (min-width: 1224px) {
  .featureChallage {
    background-position: center -30rem, center -30rem, center calc(100% + 30rem),
      center calc(100% + 30rem);
  }

  .benefits {
    background-position: center -55rem, center -55rem, center 30rem,
      center 30rem !important;
    background-size: cover, cover, 100% 50rem, 100% 50rem;
  }
}

@media (min-width: 1400px) {
  .top-wave {
    background-position: center -70rem, center -36rem;
  }

  .featureChallage {
    background-position: center -32rem, center -32rem, center calc(100% + 35rem),
      center calc(100% + 35rem);
  }

  .benefits {
    background-position: center -58rem, center -58rem, center 25rem,
      center 25rem !important;
    background-size: cover, cover, 100% 50rem, 100% 50rem;
  }
}

@media (min-width: 1600px) {
  .top-wave {
    background-position: center -70rem, center -40rem;
  }

  .featureChallage {
    background-position: center -38rem, center -38rem, center calc(100% + 42rem),
      center calc(100% + 42rem);
  }

  .benefits {
    background-position: center -55rem, center -55rem, center 25rem,
      center 25rem !important;
    background-size: cover, cover, 100% 50rem, 100% 50rem;
  }
}

@media (min-width: 1920px) {
  .featureChallage {
    background-position: center -45rem, center -45rem, center calc(100% + 48rem),
      center calc(100% + 48rem);
  }
}

/* .top-wave::before{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 30%;
    pointer-events: none;
    background: linear-gradient(270deg, #307FE2 100%, #EA27C2 0%);
    filter: blur(100px);
} */

.contact-form-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary-gradient), var(--primary-gradient);
  background-size: 50% 50%, 125% 100%;
  background-position: center center, center -50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  z-index: 0;
  filter: blur(100px);
  background-blend-mode: overlay, hard-light;
}

#accridation img {
  height: 90px;
  /* or 100px/130px for md/lg screens as you use in your wrapper */
  width: auto;
  object-fit: contain;
  display: block;
}

/* Footer CSS START */
footer {
  transition: all 0.3s ease;
  /* background: var(--primary-gradient); */
  background-image: url("../images/footer-elipse.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* footer::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-gradient);
} */

@media (min-width: 1030px) and (max-width: 1280px) {
  footer {
    padding-bottom: 0.8rem;
  }
}

@media (min-width: 1080px) and (max-width: 1120px) {
  footer {
    padding-bottom: 3rem;
  }
}

@media (min-width: 1121px) and (max-width: 1180px) {
  footer {
    padding-bottom: 4rem;
  }
}

@media (min-width: 1181px) and (max-width: 1280px) {
  footer {
    padding-bottom: 6rem;
  }
}

.footer-marquee {
  width: 100%;
  overflow: hidden;
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
}

.footer-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
  gap: 3rem;
  /* space between items */
}

.footer-marquee-list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-marquee-list li {
  display: flex;
  align-items: center;
  background: -webkit-linear-gradient(180deg, #307fe2 0%, #ea27c2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  padding: 0 1rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  white-space: nowrap;
}

.footer-marquee-list li:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #6c63ff;
  margin-right: 2rem;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

footer .footer-nav p {
  font-family: "Raleway", sans-serif;
  color: #f4f5f6;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

footer .footer-nav ul {
  list-style-type: none;
}

footer .footer-nav ul li {
  color: #88909f;
  font-family: "Raleway", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 2rem;
}

footer .footer-nav ul li:hover {
  background: -webkit-linear-gradient(180deg, #307fe2 0%, #ea27c2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
}

footer .copy-right-area p {
  color: #f4f5f6;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

/* Newsletter subscribe form styles */
.newsletter-form {
  display: flex;
  width: 100%;
  height: 48px;
  background: #f4f5f6;
  border-radius: 0;
  overflow: hidden;
}

.newsletter-btn {
  /* width: 48px;
    height: 48px; */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #307fe2 0%, #ea27c2 100%);
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  transition: filter 0.2s;
}

.newsletter-btn:hover {
  filter: brightness(1.1);
}

.newsletter-btn img {
  rotate: 90deg;
}

.newsletter-input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding-left: 1.5rem;
  font-family: "Raleway", sans-serif;
  color: #23272b;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.newsletter-input::placeholder {
  color: #23272b;
  opacity: 0.8;
  font-size: 1.1rem;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
}

footer .icon-bg {
  background: #3d434c;
  transition: all 0.3s ease-in-out;
}

footer .icon-bg:hover {
  background: linear-gradient(#307fe2 20%, #ea27c2 96%);
  /* -webkit-background-clip: text; */
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  border: 1px solid #9e9e9e;
}

@media (min-width: 992px) {
  .footer-marquee-list li {
    font-size: 2.5rem;
    padding: 0 1.2rem;
  }

  .footer-marquee-list li:not(:first-child)::before {
    margin-right: 2.2rem;
  }
}

@media (min-width: 1200px) {
  .footer-marquee-list li {
    font-size: 3.5rem;
    padding: 0 2rem;
  }

  .footer-marquee-list li:not(:first-child)::before {
    margin-right: 3rem;
  }
}

/* Footer CSS END */
.boxes-corner-design-outer {
  clip-path: polygon(2% 0, 100% 0%, 100% 100%, 0 100%, 0 5%);
}

.boxes-corner-outer {
  clip-path: polygon(7% 0, 100% 0, 100% 94%, 94% 100%, 0 100%, 0 8%);
}

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

#our-mission .top-bottom-left-right-cut {
  clip-path: polygon(
    2rem 0,
    100% 0,
    100% 93%,
    94% 100%,
    0 100%,
    0 2rem
  ) !important;
}

.boxes-corner-outer-second {
  clip-path: polygon(3% 0, 100% 0, 100% 94%, 97% 100%, 0 100%, 0 8%);
}

@media (min-width: 992px) {
  #our-mission .top-bottom-left-right-cut {
    clip-path: polygon(
      2rem 0,
      100% 0,
      100% 93%,
      96% 100%,
      0 100%,
      0 2rem
    ) !important;
  }
}

@media (min-width: 1200px) {
  #our-mission .top-bottom-left-right-cut {
    clip-path: polygon(
      2rem 0,
      100% 0,
      100% 93%,
      97% 100%,
      0 100%,
      0 2rem
    ) !important;
  }
}

.infinite-slider-wrapper img {
  flex-shrink: 0;
}

.transparent-box-clip {
  clip-path: polygon(7% 0, 100% 0, 100% 94%, 94% 100%, 0 100%, 0 8%);
  background-color: #ffffff0a;
}

.color-gradeint-effect {
  border-radius: 308.066px;
  background: var(
    --Primary-Gradient-1,
    linear-gradient(270deg, #307fe2 0%, #ea27c2 100%)
  );
  mix-blend-mode: hard-light;
  filter: blur(106.8176040649414px);
}

.glassy-background {
  border-radius: 308.066px;
  /* background: var(--Primary-Gradient-1, linear-gradient(270deg, #307FE2 0%, #EA27C2 100%)); */
  background: linear-gradient(270deg, #1d18dd 20%, #ea27c2 80%);
  mix-blend-mode: hard-light;
  filter: blur(40px);
  width: 70%;
  height: 70%;
  left: 16%;
  top: 16%;
}

.right-crop-corner {
  clip-path: polygon(0 0, 96% 0, 100% 30px, 100% 100%, 0 100%);
}

.bottom-right-corner {
  --all: 0px;
  --b: #2f2d2d;
  --top-right: 20px;

  border: 2px solid var(--b);

  background: linear-gradient(
        45deg,
        var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px),
        transparent 0
      )
      bottom left / 50% 50%,
    linear-gradient(
        -45deg,
        var(--b) 0 calc(var(--bottom-right, var(--all)) + 0px),
        transparent 0
      )
      bottom right / 50% 50%,
    linear-gradient(
        135deg,
        var(--b) 0 calc(var(--top-left, var(--all)) + 0px),
        transparent 0
      )
      top left / 50% 50%,
    linear-gradient(
        -135deg,
        var(--b) 0 calc(var(--top-right, var(--all)) + 2px),
        transparent 0
      )
      top right / 50% 50%,
    linear-gradient(219deg, rgb(28 27 27) 0%, rgba(8, 7, 7, 1) 60%);

  background-origin: border-box;
  background-repeat: no-repeat;

  -webkit-mask: linear-gradient(
        45deg,
        transparent 0 var(--bottom-left, var(--all)),
        #fff 0
      )
      bottom left,
    linear-gradient(
        -45deg,
        transparent 0 var(--bottom-right, var(--all)),
        #fff 0
      )
      bottom right,
    linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0)
      top left,
    linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0)
      top right;

  -webkit-mask-size: 51.5% 50.5%;
  /* Updated from 50.5% to avoid overdraw */
  -webkit-mask-repeat: no-repeat;
}

.top-left-bottom-right-corner {
  --all: 0px;
  --b: #6a6a6a;
  --top-left: 20px;
  --bottom-right: 20px;

  border: 2px solid var(--b);

  background: linear-gradient(
        45deg,
        var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px),
        transparent 0
      )
      bottom left / 50% 50%,
    linear-gradient(
        -45deg,
        var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px),
        transparent 0
      )
      bottom right / 50% 50%,
    linear-gradient(
        135deg,
        var(--b) 0 calc(var(--top-left, var(--all)) + 2px),
        transparent 0
      )
      top left / 50% 50%,
    linear-gradient(
        -135deg,
        var(--b) 0 calc(var(--top-right, var(--all)) + 0px),
        transparent 0
      )
      top right / 50% 50%,
    linear-gradient(219deg, rgba(55, 45, 45, 0.19) 0%, rgb(0, 0, 0) 100%);

  background-origin: border-box;
  background-repeat: no-repeat;

  -webkit-mask: linear-gradient(
        45deg,
        transparent 0 var(--bottom-left, var(--all)),
        #fff 0
      )
      bottom left,
    linear-gradient(
        -45deg,
        transparent 0 var(--bottom-right, var(--all)),
        #fff 0
      )
      bottom right,
    linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0)
      top left,
    linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0)
      top right;

  -webkit-mask-size: 51.5% 50.5%;
  /* Updated from 50.5% to avoid overdraw */
  -webkit-mask-repeat: no-repeat;
}

.top-left-bottom-right-corner-form-input {
  --all: 0px;
  --b: #6a6a6a;
  --top-left: 19px;
  --bottom-right: 19px;

  border: 2px solid var(--b);

  background: linear-gradient(
        45deg,
        var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px),
        transparent 0
      )
      bottom left / 50% 50%,
    linear-gradient(
        -45deg,
        var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px),
        transparent 0
      )
      bottom right / 50% 50%,
    linear-gradient(
        135deg,
        var(--b) 0 calc(var(--top-left, var(--all)) + 2px),
        transparent 0
      )
      top left / 50% 50%,
    linear-gradient(
        -135deg,
        var(--b) 0 calc(var(--top-right, var(--all)) + 0px),
        transparent 0
      )
      top right / 50% 50%,
    linear-gradient(
      117deg,
      rgba(62, 62, 62, 0.43) 3.67%,
      rgba(8, 7, 7, 0.43) 76.95%
    );

  background-origin: border-box;
  background-repeat: no-repeat;

  -webkit-mask: linear-gradient(
        45deg,
        transparent 0 var(--bottom-left, var(--all)),
        #fff 0
      )
      bottom left,
    linear-gradient(
        -45deg,
        transparent 0 var(--bottom-right, var(--all)),
        #fff 0
      )
      bottom right,
    linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0)
      top left,
    linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0)
      top right;

  -webkit-mask-size: 51.5% 52.5%;
  /* Updated from 50.5% to avoid overdraw */
  -webkit-mask-repeat: no-repeat;
}

.color-btn-gradient-cut {
  --all: 0px;
  --b: #6a6a6a00;
  --top-left: 9px;
  --bottom-right: 9px;
  border: 2px solid var(--b);
  background: linear-gradient(
        45deg,
        var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px),
        transparent 0
      )
      bottom left / 50% 50%,
    linear-gradient(
        -45deg,
        var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px),
        transparent 0
      )
      bottom right / 50% 50%,
    linear-gradient(
        135deg,
        var(--b) 0 calc(var(--top-left, var(--all)) + 2px),
        transparent 0
      )
      top left / 50% 50%,
    linear-gradient(
        -135deg,
        var(--b) 0 calc(var(--top-right, var(--all)) + 0px),
        transparent 0
      )
      top right / 50% 50%,
    linear-gradient(270deg, #307fe2 0%, #ea27c2 100%);
  background-origin: border-box;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(
        45deg,
        transparent 0 var(--bottom-left, var(--all)),
        #fff 0
      )
      bottom left,
    linear-gradient(
        -45deg,
        transparent 0 var(--bottom-right, var(--all)),
        #fff 0
      )
      bottom right,
    linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0)
      top left,
    linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0)
      top right;
  -webkit-mask-size: 51.5% 52.5%;
  -webkit-mask-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}

.top-left-bottom-right-corner-form-input:focus {
  --b: #2354f7;
}

.color-btn-gradient-cut:hover {
  -all: 0px;
  --b: #d0d0d0;
  --top-left: 9px;
  --bottom-right: 9px;
  border: 2px solid var(--b);
  background: linear-gradient(
        45deg,
        var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px),
        transparent 0
      )
      bottom left / 50% 50%,
    linear-gradient(
        -45deg,
        var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px),
        transparent 0
      )
      bottom right / 50% 50%,
    linear-gradient(
        135deg,
        var(--b) 0 calc(var(--top-left, var(--all)) + 2px),
        transparent 0
      )
      top left / 50% 50%,
    linear-gradient(
        -135deg,
        var(--b) 0 calc(var(--top-right, var(--all)) + 0px),
        transparent 0
      )
      top right / 50% 50%,
    linear-gradient(18deg, #307fe2 0%, #ea27c2 100%);
  background-origin: border-box;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(
        45deg,
        transparent 0 var(--bottom-left, var(--all)),
        #fff 0
      )
      bottom left,
    linear-gradient(
        -45deg,
        transparent 0 var(--bottom-right, var(--all)),
        #fff 0
      )
      bottom right,
    linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0)
      top left,
    linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0)
      top right;
  -webkit-mask-size: 51.5% 52.5%;
  -webkit-mask-repeat: no-repeat;
}

:focus-visible {
  outline: none;
}

@media (max-width: 1280px) {
  .top-left-bottom-right-corner-form-input {
    --all: 0px;
    --b: #6a6a6a;
    --top-left: 15px;
    --bottom-right: 15px;

    border: 2px solid var(--b);

    background: linear-gradient(
          45deg,
          var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px),
          transparent 0
        )
        bottom left / 50% 50%,
      linear-gradient(
          -45deg,
          var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px),
          transparent 0
        )
        bottom right / 50% 50%,
      linear-gradient(
          135deg,
          var(--b) 0 calc(var(--top-left, var(--all)) + 2px),
          transparent 0
        )
        top left / 50% 50%,
      linear-gradient(
          -135deg,
          var(--b) 0 calc(var(--top-right, var(--all)) + 0px),
          transparent 0
        )
        top right / 50% 50%,
      linear-gradient(
        117deg,
        rgba(62, 62, 62, 0.43) 3.67%,
        rgba(8, 7, 7, 0.43) 76.95%
      );

    background-origin: border-box;
    background-repeat: no-repeat;

    -webkit-mask: linear-gradient(
          45deg,
          transparent 0 var(--bottom-left, var(--all)),
          #fff 0
        )
        bottom left,
      linear-gradient(
          -45deg,
          transparent 0 var(--bottom-right, var(--all)),
          #fff 0
        )
        bottom right,
      linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0)
        top left,
      linear-gradient(
          -135deg,
          transparent 0 var(--top-right, var(--all)),
          #fff 0
        )
        top right;

    -webkit-mask-size: 51.5% 52.5%;
    /* Updated from 50.5% to avoid overdraw */
    -webkit-mask-repeat: no-repeat;
  }
}

@media (max-width: 992px) {
  .top-left-bottom-right-corner-form-input {
    --all: 0px;
    --b: #6a6a6a;
    --top-left: 15px;
    --bottom-right: 15px;
    border: 2px solid var(--b);
    background: linear-gradient(
          45deg,
          var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px),
          transparent 0
        )
        bottom left / 50% 50%,
      linear-gradient(
          -45deg,
          var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px),
          transparent 0
        )
        bottom right / 50% 50%,
      linear-gradient(
          135deg,
          var(--b) 0 calc(var(--top-left, var(--all)) + 2px),
          transparent 0
        )
        top left / 50% 50%,
      linear-gradient(
          -135deg,
          var(--b) 0 calc(var(--top-right, var(--all)) + 0px),
          transparent 0
        )
        top right / 50% 50%,
      linear-gradient(
        117deg,
        rgba(62, 62, 62, 0.43) 3.67%,
        rgba(8, 7, 7, 0.43) 76.95%
      );
    background-origin: border-box;
    background-repeat: no-repeat;
    -webkit-mask: linear-gradient(
          45deg,
          transparent 0 var(--bottom-left, var(--all)),
          #fff 0
        )
        bottom left,
      linear-gradient(
          -45deg,
          transparent 0 var(--bottom-right, var(--all)),
          #fff 0
        )
        bottom right,
      linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0)
        top left,
      linear-gradient(
          -135deg,
          transparent 0 var(--top-right, var(--all)),
          #fff 0
        )
        top right;
    -webkit-mask-size: 51.5% 52.5%;
    -webkit-mask-repeat: no-repeat;
  }
}

@media (max-width: 640px) {
  .boxes-corner-outer-second {
    clip-path: polygon(9% 0, 100% 0, 100% 94%, 91% 100%, 0 100%, 0 8%);
  }
}

@media (max-width: 380px) {
  .boxes-corner-outer-second {
    clip-path: polygon(10% 0, 100% 0, 100% 94%, 91% 100%, 0 100%, 0 8%);
  }
}

#voiceContainerSecond {
  transition: transform 0.8s ease, bottom 0.8s ease, right 0.8s ease,
    opacity 0.8s ease;
}

.pinned {
  position: fixed !important;
  bottom: 50px !important;
  right: 0% !important;
  z-index: 50 !important;
  transform: translateY(0);
  /* Reset any translate if used before */
  opacity: 1;
}

#voiceContainerSecond:not(.pinned) {
  transform: translateY(30px);
  opacity: 0;
  pointer-events: none;
}

/* Custom positioning logic using transform instead of top/bottom directly */
.voice-container {
  opacity: 1;
  transform: translateY(0) translateX(0);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.voice-container.pinned {
  transform: translateY(calc(100vh - 50px - 136px)) translateX(calc(8% - 32%));
  opacity: 1;
}

/* Chrome-only background color override */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .chrome-bg {
    background-color: #29293f !important;
    /* Your Chrome-only color */
  }
}

.industries-corner-box {
  --all: 0px;
  --b: #c6c6c6;
  --top-left: 9px;
  --bottom-right: 9px;
  border: 1px solid var(--b);
  background: linear-gradient(
        45deg,
        var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px),
        transparent 0
      )
      bottom left / 50% 50%,
    linear-gradient(
        -45deg,
        var(--b) 0 calc(var(--bottom-right, var(--all)) + 1px),
        transparent 0
      )
      bottom right / 50% 50%,
    linear-gradient(
        135deg,
        var(--b) 0 calc(var(--top-left, var(--all)) + 1px),
        transparent 0
      )
      top left / 50% 50%,
    linear-gradient(
        -135deg,
        var(--b) 0 calc(var(--top-right, var(--all)) + 0px),
        transparent 0
      )
      top right / 50% 50%,
    linear-gradient(
      117deg,
      rgba(62, 62, 62, 0.21) 3.67%,
      rgba(255, 255, 255, 0.09) 76.95%
    );
  background-origin: border-box;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(
        45deg,
        transparent 0 var(--bottom-left, var(--all)),
        #fff 0
      )
      bottom left,
    linear-gradient(
        -45deg,
        transparent 0 var(--bottom-right, var(--all)),
        #fff 0
      )
      bottom right,
    linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0)
      top left,
    linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0)
      top right;
  -webkit-mask-size: 51.5% 52.5%;
  -webkit-mask-repeat: no-repeat;
}

.our-solution-corner-box {
  --all: 0px;
  --b: #737373;
  --top-left: 20px;
  --bottom-right: 20px;
  border: 2px solid var(--b);
  background: linear-gradient(
        45deg,
        var(--b) 0 calc(var(--bottom-left, var(--all)) + 0px),
        transparent 0
      )
      bottom left / 50% 50%,
    linear-gradient(
        -45deg,
        var(--b) 0 calc(var(--bottom-right, var(--all)) + 2px),
        transparent 0
      )
      bottom right / 50% 50%,
    linear-gradient(
        135deg,
        var(--b) 0 calc(var(--top-left, var(--all)) + 2px),
        transparent 0
      )
      top left / 50% 50%,
    linear-gradient(
        -135deg,
        var(--b) 0 calc(var(--top-right, var(--all)) + 0px),
        transparent 0
      )
      top right / 50% 50%,
    linear-gradient(117.09deg, #3e3e3ecc -17.33%, #080707 71.95%);
  background-origin: border-box;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(
        45deg,
        transparent 0 var(--bottom-left, var(--all)),
        #fff 0
      )
      bottom left,
    linear-gradient(
        -45deg,
        transparent 0 var(--bottom-right, var(--all)),
        #fff 0
      )
      bottom right,
    linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0)
      top left,
    linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0)
      top right;
  -webkit-mask-size: 51.5% 50.5%;
  -webkit-mask-repeat: no-repeat;
}

@keyframes smoothBlink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

#blinkingText {
  animation: smoothBlink 1.5s infinite;
}

/* Blinking Circle */

.circle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  position: relative;
  /* needed only if you add animations or tooltips */
}

.outer-circle {
  width: 35px;
  height: 35px;
  background: rgba(234, 39, 194, 0.3);
  border-radius: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-circle {
  width: 17px;
  height: 17px;
  background: rgba(234, 39, 194, 1);
  border-radius: 50%;
  z-index: 2;
}

/* .blink {
    animation: blink 1.2s infinite alternate;
}

@keyframes blink {
    0% {
        opacity: 0.9;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes icon-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}
.continue-bounce {
    animation: icon-bounce 0.5s infinite alternate;
} 
.group:hover img {
    animation: icon-bounce 0.5s;
} */

.gradientText {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* .continue-bounce {
    animation: icon-bounce 0.5s infinite alternate;
} */

/*......................... product-marketing .................*/
.prodMarketingCard {
  background: linear-gradient(
    117.09deg,
    rgba(62, 62, 62, 0.43) 3.67%,
    rgba(8, 7, 7, 0.43) 76.95%
  );
  border: 1px solid #f4f5f64c;
  padding: 15px 20px;
}
.downloadCls {
  width: 20px;
}

.lineMargin {
  left: 117px;
}
.solImgCls {
  width: 90%;
  object-fit: contain;
}

@media screen and (max-width: 500px) {
  .solImgCls {
    width: 50%;
  }
}
@media screen and (max-width: 639px) {
  .solImgCls {
    width: 50%;
  }
}

@media screen and (min-width: 1536px) {
  .lineMargin {
    left: 137px;
  }
}