body {
  background-color: black;
}

.bg {
  background-image: url("../img/Banner.png");
}

.bannerImg {
  position: relative;
  z-index: 0;
  height: 300px;
  width: 100%;
}

.landingpgImg {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: -1;
}

.contentContainer {
  /* margin-top: 80px; */
}

.codeBtn {
  transform: translate(-50%);
  left: 50%;
  top: 95px;
}

.content1 {
  background: linear-gradient(to top, #0a0a0a, #000);
}

.content2 {
  background: linear-gradient(to bottom, #0a0a0a, #000);
  display: flex;
  justify-content: center;
}

.content3 {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to bottom, #0a0a0a, #000);
}

.benifitsBG {
  position: absolute;
  z-index: -1;
  top: 0;
  max-width: 100%;
  width: 990px;
  transform: translate(-50%);
  left: 50%;
  object-fit: contain;
}

.card4 {
  border-radius: 32px;
 background: linear-gradient(180deg, #000103 38.07%, rgba(0, 0, 0, 0) 100%),
    #000001;
  box-shadow: 0px 0px 36.413px 0px rgba(45, 72, 113, 0.5) inset;
  backdrop-filter: blur(9.103293418884277px);
  height: 438px;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  background-image: url("../img/card4.svg");
  background-repeat: no-repeat;
  background-position: calc(100%) bottom;
  background-size: 400px;
}

.card3 {
  min-height: 438px;
  width: 385px;
  max-width: 100%;
  display: flex;
  gap: 12px;
  
  
 
}

.card2 {
  border-radius: 32px;
  background: linear-gradient(
    144deg,
    rgba(137, 35, 185, 0.3) -18.84%,
    rgba(30, 105, 245, 0.3) 45.77%,
    rgba(35, 185, 172, 0.3) 126.78%
  );
  box-shadow: 0px 0px 36.413px 0px rgba(125, 174, 209, 0.3) inset;
  backdrop-filter: blur(7.28263521194458px);
  height: 438px;
  width: 385px;
  max-width: 100%;
  
}

.card1 {
  border-radius: 32px;
  height: 438px;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  background-image: url("../img/card1Bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.card3Top {
  flex: 1;
  border-radius: 32px;
  background: linear-gradient(189deg, rgba(0, 0, 0, 0) 19.26%, #0a0a0a 97.14%),
    linear-gradient(
      180deg,
      rgba(54, 56, 144, 0.65) 0%,
      rgba(43, 88, 104, 0.65) 100%
    );
  box-shadow: -45.516px 36.413px 91.033px 0px rgba(66, 63, 173, 0.25) inset;
  backdrop-filter: blur(7.28263521194458px);
  align-items: end;
  display: flex;
}






.keyFeatureCard1 {
  border-radius: 8px;
  box-shadow: 0 0px 0px rgba(94, 117, 240, 0.3),
    0 -3px 6px rgba(237, 94, 240, 0.3), 0 0px 0px rgba(255, 235, 247, 0.3),
    0 1px 6px rgba(231, 105, 35, 0.3);
}

.keyfeaturecodeImg {
  border-radius: 8px;
  box-shadow: 0 0px 0px rgba(94, 117, 240, 0.3),
    0 -3px 6px rgba(237, 94, 240, 0.3), 0 0px 0px rgba(255, 235, 247, 0.3),
    0 1px 6px rgba(231, 105, 35, 0.3);
}

.generate {
  background-image: url("../img/generategradient.svg");
  background-repeat: no-repeat;
  background-position-x: center;
  overflow: hidden;
}

.analyze {
  background-image: url("../img/analysegradient.svg");
  background-repeat: no-repeat;
  background-position-x: center;
  overflow: hidden;
}

.optimize {
  background-image: url("../img/optimizegenrate.svg");
  background-repeat: no-repeat;
  background-position-x: center;
  overflow: hidden;
}

.generateCode {
  background-image: url("../img/generateCode.svg");
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: contain;
  background-position-y: bottom;
  height: 100%;
  margin-left: 36px;
}

.analyzeCode {
  background-image: url("../img/analyseCode.svg");
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: contain;
  background-position-y: bottom;
  height: 100%;
}

.optimizeCode {
  background-image: url("../img/optimizeCode.svg");
  background-repeat: no-repeat;
  background-position-x: left;
  background-size: contain;
  background-position-y: bottom;
  height: 100%;
  margin-right: 36px;
}

.font-style {
  color: #fafbff;
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.footer_head {
  color: #8a8a8a;
}
.footer_sub {
  color: #fff;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; /* 235.294% */
  letter-spacing: -0.2px;
}
.footer_fonts {
  color: #a5a6a9;
}
.line_style {
  background: #8a8a8a;
}

.accDisable {
  display: none !important;
}

.downloadFileBtn {
  border-radius: 50px;
  box-shadow: 0 0px 0px rgba(94, 117, 240, 0.3),
    0 -3px 6px rgba(237, 94, 240, 0.3), 0 0px 0px rgba(255, 235, 247, 0.3),
    0 1px 6px rgba(231, 105, 35, 0.3);
  color: #fafbff;
  font-size: 16px;
  font-weight: 500;
}

.aurora{
  background: linear-gradient(270deg, rgba(168, 139, 255, 0.30) 0%, rgba(50, 74, 226, 0.30) 100%);

}

.ada{
  background: linear-gradient(270deg, rgba(57, 239, 248, 0.30) 0%, rgba(36, 55, 244, 0.30) 100%);
}

.visia{
  background: linear-gradient(270deg, rgba(255, 180, 0, 0.30) 0%, rgba(232, 89, 0, 0.30) 100%);
}

.accura{
  background: linear-gradient(270deg, rgba(218, 145, 62, 0.30) 0%, rgba(53, 182, 212, 0.30) 100%);
}

.juris{
  background: linear-gradient(270deg, rgba(243, 243, 243, 0.30) 0%, rgba(7, 85, 208, 0.30) 100%);
}

.aurora:hover .auroraNotHover{
  display: none;
}

.aurora:hover .auroraHover{
  animation: example 1s forwards;
  display: flex;
  flex-wrap: wrap;
}

.auroraHover{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.auroraHoverContent{
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: center;
}


.ada:hover .adaNotHover{
  display: none;
}

.ada:hover .adaHover{
  animation: example 1s forwards;
  display: flex;
  flex-wrap: wrap;
}

.adaHover{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.adaHoverContent{
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: center;
}

.visia:hover .visiaNotHover{
  display: none;
}

.visia:hover .visiaHover{
  animation: example 1s forwards;
  display: flex;
  flex-wrap: wrap;
}

.visiaHover{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.visiaHoverContent{
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: center;
}

.accura:hover .accuraNotHover{
  display: none;
}

.accura:hover .accuraHover {
  animation: example 1s forwards;
  display: flex;
  flex-wrap: wrap;
}

.accuraHover {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.accuraHoverContent{
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: center;
}

.juris:hover .jurisNotHover{
  display: none;
}

.juris:hover .jurisHover{
  animation: example 1s forwards;
  display: flex;
  flex-wrap: wrap;
}

.jurisHover{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.jurisHoverContent{
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: center;
}
.lumina {
  background: linear-gradient(
    270deg,
    rgba(210, 85, 50, 0.3) 0%,
    rgba(105, 23, 135, 0.3) 100%
  );
}
.lumina:hover .luminaNotHover {
  display: none;
}

.lumina:hover .luminaHover {
  animation: example 1s forwards;
  display: flex;
  flex-wrap: wrap;
}

.luminaHover {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.luminaHoverContent {
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: center;
}

.lumina:hover .luminaNotHover {
  display: none;
}

.lumina:hover .luminaHover {
  animation: example 1s forwards;
  display: flex;
  flex-wrap: wrap;
}

.luminaHover {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.luminaHoverContent {
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: center;
}


@keyframes example {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}