@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200;6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800;6..12,900&family=Poppins:wght@300;400;500;600&family=Roboto:wght@400;500;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Nunito Sans', sans-serif;
}

html,
body {
    width: 99.6159%;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #ffffff;
}

input:hover,input:focus,select:focus,select:hover{
    outline: none;
}

header nav {
    background-color: white;
}

.hero-image{
    margin-left:25px;
    margin-bottom:5px;
}

header input {
    display: none;
}

header label {
    font-size: 1.5rem;
    color: rgb(0, 0, 0);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
}
.dropdown-menu{
    background: rgba(29, 29, 31, 0.6);
    color: white;
    backdrop-filter: blur(80px);
}

.dropdown-item:focus, .dropdown-item:hover,.dropdown-item{
    background: inherit;
    color: white;
}
.navbar {
    padding: 13px 16px;
    /*box-shadow: 0 0 10px #fff;*/
    
    background: rgba(29, 29, 31, 0.6);
    backdrop-filter: blur(25px);
}

.bgcolor.scrolled {
    background-color: #000000;
}

.navbar .navbar-brand {
    font-family: 'Roboto', sans-serif;
    margin-right: 25px;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    color: #ffffff;
    padding-top: 7px;
    padding-bottom: 5px;
}

.navbar .navbar-brand img {
    margin-top: -6px;
    margin-right: 12px;
}

.navbar .navbar-toggler {
    padding: 0;
}

.navbar .social {
    margin-left: auto;
    margin-right: 0;
}

.navbar .social a {
    margin-left: 40px;
    background-color: #0054DE;
    color: white;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 12px;
    border-radius: 100px;
}

.navbar .social a:hover,.Hero .btn-1:hover {
    background: rgb(37, 139, 255);
}

#navbarSupportedContent>ul>li:nth-child(n)>a {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    /*   margin-left: 44px;*/
}

.hero-line-area{

}

.text-animation {
  display: inline-block;
  position: relative;
  color: transparent;
    margin-right: -25px;
  &:before {
    content: "";
    color: black;
     position: absolute;
    top: 50%;
    left: 50%;
    background: #0e182d;
    width: 0;
    height: 1.2em;
    -webkit-transform: translate(-50%, -55%);
    -ms-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%);
  }

  &.state-1 {
    &:before {
      width: 1px;
    }
  }
  &.state-2 {
    &:before {
      width: 0.9em;
    }
  }
  &.state-3 {
    color: black;
    &:before {
      width: 0;
    }
  }
}



.navbar .btn-dropdown {
    color: white;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    font-family: 'Roboto', sans-serif;
}

#navbarSupportedContent>button {
    background: rgb(0, 204, 255);
    font-weight: 600;
    padding: 0.4rem 1.4rem;
    border-radius: 30px;
}

#navbarSupportedContent>button:hover {
    background: white;
}

.Hero {
    background-color: #E1E8FA;
    padding-top: 7rem !important;
    padding-bottom: 5rem !important;
}

.Hero .container {
    margin: 0 16px;
    display: block;
    margin: auto;
}

p.hero-title-logo {
    margin-bottom: 1em !important;
}

.Hero h2 {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    text-align: center;
    font-size: 80px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.Hero p {
    /*max-width: 909px;
     margin: auto; */
    color: #000000;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 12px;
    margin: 0px 22%;
}

.Hero .Hero-text {
    margin-top: 32px;
    display: inline-flex;
    /* flex-direction: column;
    justify-content: center; */
}

.Hero .btn-1 {
    width: fit-content;
    margin-left: 10px;
    background-color: #0054DE;
    color: white;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 4px 16px;
    padding-right: 4px;
    border-radius: 100px;
    text-align: center;
}

.Hero .btn-2 {
    width: fit-content;
    /* font-family: 'Poppins', sans-serif; */
    margin-left: 10px;
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 192.75%;
    padding: 11px 16px;
    text-align: center;
    border-radius: 100px;
    border: 2px solid #000;
    background: #FFF;
    /* backdrop-filter: blur(15px); */
}



.Hero a i {
    margin-left: 10px;
    margin-top: -16px;
    font-size: 44px;
}

.Hero-Video {
    padding: 96px 0;
    padding-top: 496px;
    padding-bottom: 0;
    background-image: url('../images/hero-video-back-2.png');
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-size: 100% 100%;
}

.Hero-Video .row {
    align-content: center;
    display: flex;
    flex-direction: column;
}

.Hero-Video .card {
    width: fit-content;
    border: none;
    border-radius: 16px;
    position: relative;
}


.Hero-Video #video  {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: 1074px;
    height: 604px;
    border-radius: 16px;
}


.cta-btn-area:nth-of-type(1),
.cta-btn-area:nth-of-type(2),
.cta-btn-area:nth-of-type(3),
.cta-btn-area:nth-of-type(4) {
	position: relative;
	display: block;
	view-timeline-name: --section;
}

.cta {
  position: sticky;
  z-index: 10;
  top: calc(100% - 6rem);
  display: inline-block;
  width: 100%;
  display: none;
  place-items: center;
  cursor: pointer;
  /* Activates showing the CTA */
  animation: activate both linear, activate linear reverse;
  animation-timeline: --section, view();
  animation-range: entry, cover 80%;
}

.cta__content {
	position: relative;
}

/* Word */
.cta span:nth-of-type(1) {
  opacity: var(--scale, 0);
  transition: opacity 0.2s 1.6s;
  white-space: nowrap;
  padding: 0 0 0 0.5rem;
}

/* The Bloom */
.cta__content::before {
  --back: linear(
    0, 0.3412 4.06%, 0.6411 8.2%,
    0.9005 12.43%, 1.1205 16.77%,
    1.3013 21.22%, 1.4438 25.8%,
    1.549 30.54%, 1.5878 32.98%,
    1.6175 35.47%, 1.6457 39.41%,
    1.6518 41.44%, 1.6528 43.52%,
    1.6391 47.83%, 1.6042 52.44%,
    1.5562 56.74%, 1.4899 61.5%,
    1.202 78.86%, 1.0988 85.97%,
    1.0551 89.79%, 1.0244 93.36%,
    1.0061 96.75%, 1
  );
  content: "";
  background: hsl(210 100% 45%);
  position: absolute;
  inset: 0;
  border-radius: 100px;
  z-index: -1;
}

/* The icon holder */
.cta span:nth-of-type(2) {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(210 100% 45%);
  color: white;
  padding: 0.25rem;
  display: grid;
  place-items: center;
}

.cta svg {
  width: 20px;
  fill: hsl(0 0% 100% / 0.75);
}

.cta a:is(:hover, :focus-visible) svg {
  fill: white;
}

.cta a {
  --elastic: linear(
    0, 0.4789 7.06%, 0.7612 12.38%,
    0.8693 15.13%, 0.9538 17.95%,
    1.0165 20.89%, 1.059 24.04%,
    1.0829 27.58%, 1.0884 31.64%,
    1.0769 36.44%, 1.0202 50.6%,
    1.0005 59.62%, 0.9945 70.6%, 1
  );
  text-decoration-line: none;
  overflow: hidden;
  border-radius: 100px;
  padding: 1rem;
  background: hsl(240 2% 20% / 1);
  box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
  color: white !important;
  display: grid;
  align-items: center;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.1rem;
  grid-template-columns: 0 36px;
}


@keyframes activate {
  0% { --active: 0; }
  100% { --active: 1; }
}




/* Use style queries to dictate the timing, etc. */
@container style(--active: 0) {
  .cta__content::before {
    scale: 0;
    opacity: 0;
    transition: scale 0.5s var(--back);
  }
  .cta a {
    scale: 0;
    transition: scale 0.2s 0.7s, grid-template-columns 0.5s 0.2s var(--elastic);
    grid-template-columns: 0 36px;
  }
  .cta__content span:first-of-type {
    opacity: 0;
    transition: opacity 0.2s 0s;
  }
  .cta__content span:last-of-type {
    scale: 0;
    opacity: 0;
    transition: scale 0.2s, opacity 0.2s;
  }
}
@container style(--active: 1) {
  .cta__content::before {
    scale: 0.99;
    opacity: 1;
    transition: scale 0.5s var(--back);
  }
  .cta a {
    scale: 1;
    transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic);
    grid-template-columns: var(--content-size, auto) 36px;
  }
  .cta__content span:first-of-type {
    opacity: 1;
    transition: opacity 0.2s 0.7s;
  }
  .cta__content span:last-of-type {
    scale: 1;
    opacity: 1;
    transition: scale 0.2s 0.4s, opacity 0.2s 0.4s;
  }
}


.Hero-Video a {
    width: fit-content;
    font-family: 'Poppins', sans-serif;
    margin-left: 10px;
    background-color: #333335;
    color: white;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 192.75%;
    padding: 10px 16px;
    border-radius: 100px;
    text-align: center;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Hero-Video a i {
    color: #0054DE;
    margin-right: 10px;
    margin-top: -6px;
    font-size: 32px;
}

.Hero-Video img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}

.Studios {
    padding: 20px 0px;
    
}
.home-studio-section-area{
    background-color: #E1E8FA;
}
.Studios .Studios-text {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Studios p {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 8px;
    border: 2px solid rgba(18, 18, 18, 0.52);
    width: fit-content;
    padding: 12px;
}

.Studios .d-flex {
    width: 2px;
    height: 84px;
}

.Studios h2 {
    color: #000;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.mobile-studio {
    display: none;
}

.Studios .Studios-logo {
    margin: 48px 0;
}

.Studios .Studios-logo .card {
    width: fit-content;
    height: fit-content;
    border: none;
    background: transparent;
    margin: 1rem 2.5rem !important;
}


.Studios .Studios-logo .card-mobile {
    display: none;
}

.Studios .Studios-logo img {
    width: 144px;
    height: 144px;
    border-radius: 1000%;
}

.first-tab-hero-image-area {
    width: 470px;
    height: 470px;
    border-radius: 25px;
    background: #000;
}

.third-tab-hero-image-area {
    width: 470px;
    height: 470px;
    border-radius: 25px;
    background: #000;
}

.first-tab-img {
    position: absolute;
}

.the-best {
    padding-top: 48px;
    margin: 0px;
    background-color: #E1E8FA;
}

.the-best .the-best-container {
    margin: 52px;
    padding-bottom: 100px;
}

.the-best .the-best-text {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.the-best .the-best-text .the-best-line {
    width: 100%;
    height: 84px;
    display: flex;
    justify-content: center;
}

.the-best .the-best-text .the-best-line .vr {
    width: 2px;
    /* opacity: 1; */
    color: rgba(0, 0, 0, 0.72);
}

.the-best .the-best-text .the-best-line h1 {
    color: #ffffff;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.the-best p {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 8px;
    color: #000;
    border: 2px solid rgba(0, 0, 0, 0.72);
    width: fit-content;
    padding: 12px;
}

.the-best h2 {
    color: #12275E;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.the-best h2 span {
    position: relative;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.the-best h2 span img {
    position: absolute;
    top: 51.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.the-best h2 span p1 {
    width: 300px;
    position: absolute;
    top: -25%;
    left: 72%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.the-best .the-best-animation {
    padding: 48px 40px;
    background-image: url('../images/the-best-back-4.png');
    background-repeat: no-repeat;
    /* background-position-y: -91px;
    background-position-x: 224px; */
    background-color: black;
    /* background-attachment: fixed; */
    background-size: 100% 100%;
    margin-top: 72px;
    border-radius: 20px;
    /* background: url(../images/the-best-back.jpg), lightgray 0px -103.965px / 116.556% 121.933% no-repeat; */
}

.the-best .the-best-animation .the-best-container-1 {
    /* margin-right: 16px;
        margin-left: 16px; */
}

.the-best .the-best-animation h3 {
    width: fit-content;
    color: #ffffff;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.the-best .the-best-animation .col-lg-6 {
    display: flex;
}

.the-best .the-best-animation .col-lg-6-1 {
    justify-content: left;
}

.the-best .the-best-animation .col-lg-6-2 {
    justify-content: right;
    align-items: center;
}

.the-best .the-best-animation .the-best-tab {
    width: fit-content;
    height: fit-content;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    border-radius: 100px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--Black, #121212);
}

/* -- */

.the-best .the-best-animation .tab-toggle {
    display: none;
}

.the-best .the-best-animation .tab-content-1,
.the-best .the-best-animation .tab-content-2,
.the-best .the-best-animation .tab-content-3 {
    display: none;
}

.the-best .the-best-animation .tab-trigger {
    color: var(--White, #FFF);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 100px;
    margin: auto;
    padding: 12px 24px;
    cursor: pointer;
}

.the-best .the-best-animation .tab-trigger-bc {
    background: var(--White, #FFF);
    color: var(--Black, #121212);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* -- */

.the-best .the-best-animation .the-best-tab a {
    width: fit-content;
    color: rgb(255, 255, 255);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 14px 24px;
    border-radius: 100px;
    text-align: center;
    margin-right: 4px;
}

.the-best .the-best-animation .the-best-animation-img {
    margin: 48px 0;
}

.the-best .the-best-animation .col-lg-5-grid {
    width: 470px;
    height: 470px;
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
    border-radius: 25px;
    background: #000;
    padding: 0;
}

.the-best .the-best-animation img {
    width: 470px;
    height: 470px;
    flex-shrink: 0;
    border-radius: 25px;
}

.the-best .the-best-animation .the-best-img-2 {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 0px;
    margin: 12px;
}

.the-best .the-best-animation .the-best-img-3 {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 0px;
    margin: 12px;
}

img#first-tab-hero-image-1 {
    padding: 110px;
}

.the-best-img-2 {
    opacity: 0;
}

.first-img {
    opacity: 1;
}


.the-best .the-best-animation .the-best-animation-text {
    /* margin: 48px 0;
    display: flex; */
    margin: auto;
}

.the-best .the-best-animation .animation-1 {
    /* padding-left: 88px; */
}

.the-best .the-best-animation .the-best-animation-text p {
    color: #FFF;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    border: none;
    text-align: left;
    margin: 0 8px;
    padding: 0;
}

.the-best .the-best-animation .the-best-animation-text .p-1 {
    /* width: 552px; */
}

.the-best .the-best-animation .the-best-animation-text .btn-1 {
    width: fit-content;
    margin-left: 8px;
    margin-top: 28px;
    background-color: white;
    color: #0054DE;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 4px 24px;
    padding-right: 4px;
    border-radius: 100px;
    text-align: center;
    border: 3px solid #FFF;
}

.the-best .the-best-animation .the-best-animation-text a i {
    margin-left: 16px;
    margin-top: -16px;
    font-size: 44px;
}

.the-best .the-best-animation .the-best-animation-btn {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    padding: 12px 16px;
    border-radius: 25px;
}

.the-best .the-best-animation .the-best-animation-btn a {
    width: fit-content;
    margin-left: 10px;
    background-color: #333335;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    line-height: 197.25%;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 12px 16px;
    border-radius: 100px;
    text-align: center;
    color: rgba(255, 255, 255, 0.70);
}

.the-best .the-best-animation .the-best-animation-btn a img {
    margin-right: 12px;
    width: 32px;
    height: 32px;
}

.third-tab-hero-image-area {
    background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url("./../images/the-best-3.png");
    background-size: contain !important;
}

.third-tab-cpu-img-area-1 {
    background: none !important;
}

@keyframes wipe-in-right {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

[transition-style="in:wipe:right"] {
    animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}


[transition-style="in:wipe:right1"] {
    animation: 3.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}

.Appreciates .Appreciates-text {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Appreciates .Appreciates-text .d-flex {
    width: 2px;
    height: 84px;
}

.Appreciates .Appreciates-text .d-flex .vr {
    color: rgba(0, 0, 0, 0.72);
    opacity: 1;
}


@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.Appreciates p {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #121212;
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.72);
    width: fit-content;
    padding: 12px;
}

.Appreciates h2 {
    color: #000;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.Appreciates .Appreciates-logo {
    max-width: 1029px;
    margin: 48px auto;
}

.Appreciates .Appreciates-logo .card {
    width: fit-content;
    height: fit-content;
    border: none;
    margin: 1rem !important;
}

.Appreciates .Appreciates-logo .card-mobile {
    display: none;
}

.Appreciates .Appreciates-logo img {
    width: 258px;
    height: 90px;
    object-fit: contain;
}

.tools-3D {
    padding: 0;
    margin: 0;
    background-color: #033678;
}

.tools-3D .tools-3D-mobile {
    display: none;
}

.tools-3D .tools-3D-container {
    margin: 0px 32px;
}

.tools-3D h1 {
    color: var(--White, #FFF);
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.tools-3D h2 {
    color: rgba(255, 255, 255, 0.70);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.tools-3D .tools-3D-link {
    display: none;
    color: rgba(255, 255, 255, 0.70);
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-decoration-line: underline;
    background-color: transparent;
    padding: 0;
}

.tools-3D .tools-3D-text {
    margin-top: 32px;
    display: flex;
    /* flex-direction: column; */
    /* justify-content: center; */
}

.tools-3D p {
    color: rgba(255, 255, 255, 0.70);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: auto;
    margin-bottom: auto;
}

.tools-3D a {
    width: fit-content;
    /* margin-left: 10px; */
    background-color: #333335;
    color: white;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 4px 16px;
    padding-right: 4px;
    border-radius: 100px;
    text-align: center;
}

.tools-3D a i {
    margin-left: 10px;
    margin-top: -16px;
    font-size: 44px;
}

.tools-3D .tools-3D-animation {
    position: relative;
    padding-bottom: 250px;
    margin: 80px 0px 20px 0px;
    overflow: hidden;
    height: 480px;

}

.tools-3D .tools-3D-animation .tools-3D-shadow-div-1 {
    position: absolute;
    width: 100%;
    height: 192px;
    background: linear-gradient(180deg, #033678 0%, rgba(17, 17, 17, 0.00) 100%);
    top: 0;
    z-index: 1000;
}

.tools-3D .tools-3D-animation .tools-3D-shadow-div-2 {
    position: absolute;
    width: 100%;
    height: 192px;
    background: linear-gradient(360deg, #033678 0%, rgba(17, 17, 17, 0.00) 100%);
    bottom: 0;
    z-index: 1000;
}

.tools-3D .tools-3D-slider {
    display: flex;
    flex-direction: row;
    margin-bottom: 24px;
}

.tools-3D .tools-3D-slider img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.25) inset;
}

.tools-3D .tools-3D-slider .tools-3D-slider-box-1 p {
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 20px;
}

.tools-3D .tools-3D-slider .tools-3D-slider-box-2 p {
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-left: 20px;
}

.tools-3D .tools-3D-slider .tools-3D-slider-box-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    padding-top: 20px;
    border-radius: 32px;
}

.tools-3D .tools-3D-slider .tools-3D-slider-box-2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    padding-top: 20px;
    border-radius: 32px;
}

.tools-3D .tools-3D-slider .tools-3D-slider-box-11 {
    margin-right: 24px;
}

.tools-3D .tools-3D-slider .tools-3D-slider-box-12 {
    margin-left: 24px;
}

.tools-3D .tools-3D-slider .box-1 {
    background: #C72828;
}

.tools-3D .tools-3D-slider .box-2 {
    background: #143645;
}

.tools-3D .tools-3D-slider .box-3 {
    background: #143645;
}

.tools-3D .tools-3D-slider .box-4 {
    background: #B53515;
}

.tools-3D .tools-3D-slider .box-5 {
    background: #005193;
}

.tools-3D .tools-3D-slider .box-6 {
    background: #143645;
}

.tools-3D .tools-3D-slider .box-7 {
    background: #2C004E;
    margin-left: 24px;
    margin-right: 0px;
}

.tools-3D .tools-3D-slider .box-8 {
    background: #010F3D;
}

.tools-3D .tools-3D-slider .box-9 {
    background: #0F1D71;
}

.tools-3D .tools-3D-slider .box-10 {
    background: #CB5D18;
}

.tools-3D .tools-3D-slider .box-11 {
    background: #000;
    margin-left: 24px;
    margin-right: 0px;
}

.tools-3D .tools-3D-slider .box-12 {
    background: #B93403;
}

.tools-3D .tools-3D-slider .box-13 {
    background: #363639;
}

.tools-3D .tools-3D-slider .box-14 {
    background: #814D10;
}

.tools-3D .tools-3D-slider .box-15 {
    background: #006BB5;
    margin-left: 24px;
    margin-right: 0px;
}

.tools-3D .tools-3D-slider .box-16 {
    background: #0F3987;
}

.tools-3D .tools-3D-slider .box-17 {
    background: #363639;
}

.tools-3D .tools-3D-slider .box-18 {
    background: #814D10;
}

.tools-3D .tools-3D-slider .box-19 {
    background: #0F3987;
}

.tools-3D .tools-3D-slider .box-20 {
    background: #006BB5;
}

.Statistics {
    padding: 100px 0;
    padding-bottom: 40px;
    /* background-image: url('../images/statistics-background.png');
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    /* background-size: 100% 100%; */
}

.Statistics .Statistics-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Statistics .Statistics-text .d-flex {
    width: 2px;
    height: 84px;
}

.Statistics .Statistics-text .d-flex {
    opacity: 1;
    color: rgba(0, 0, 0, 0.72);
}

.Statistics p {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #121212;
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.72);
    width: fit-content;
    padding: 12px;
}

.Statistics h1 {
    color: #121212;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.Statistics .Statistics-logo {
    margin-top: 60px;
}

.Statistics .Statistics-logo .card {
    width: fit-content;
    height: fit-content;
    border: none;
    margin: 2rem !important;
    background: none;
}

.Statistics .Statistics-logo h2 {
    text-align: center;
    font-size: 84px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: linear-gradient(87deg, #0C89FF 5.81%, #005699 93.95%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.Statistics .Statistics-logo h3 {
    color: rgba(17, 17, 17, 0.70);
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.Statistics .Statistics-logo img {
    width: 150px;
    height: 150px;
}

.Quotes {
    margin: 48px 0;
}

.Quotes .row {
    align-content: center;
    display: flex;
    flex-direction: column;
}

.Quotes .card {
    border: none;
    border-radius: 16px;
}

.Quotes .card .container {
    /* background-color: black; */
    position: relative;
    text-align: center;
    /* width: fit-content; */
    padding-right: 0;
    padding-left: 0;
    border-radius: 50px;
}

.Quotes img {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    max-width: 1336px;
    max-height: 506.035px;
    border-radius: 16px;
    opacity: 1;
    background: #121212;
    border-radius: 50px;
}

.Quotes p {
    width: 100%;
    max-height: 256.035px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.Quotes p span {
    color: #F70;
    font-family: 'Roboto', sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.Comments {
    padding: 56px 0;
}

.Comments .Comments-mobile {
    display: none;
}

.Comments .Comments-text {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Comments p {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #121212;
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.72);
    width: fit-content;
    padding: 12px;
}

.Comments h1 {
    color: #121212;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.Comments .Comments-div {
    margin: 48px 0;
    margin-bottom: 0;
}

.Comments .Comments-div-1,
.Comments .Comments-div-2 {
    width: fit-content;
    padding: 8px;
}

.Comments .Comments-div-2 {
    margin-top: 137px;
}

.Comments .Comments-div p {
    text-align: center;
    width: fit-content;
    padding: 12px;
    color: var(--White, #FFF);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
}

.Comments .Comments-div .card {
    max-width: 460px;
    width: fit-content;
    height: fit-content;
    border: none;
    margin: 2rem;
    background: black;
    border-radius: 8px;
}

.Comments .Comments-div .card-1 {
    background: #161616;
    margin-right: 0;
    margin-bottom: 16px;
}

.Comments .Comments-div .card-2 {
    background: #12117B;
    margin-right: 0;
    margin-top: 16px;
}

.Comments .Comments-div .card-3 {
    background: #1F3053;
    margin-left: 0;
    margin-bottom: 16px;
}

.Comments .Comments-div .card-4 {
    background: #4E2816;
    margin-left: 0;
    margin-top: 16px;
}

.Comments .Comments-div img {
    width: 140px;
    height: 140px;
    border-radius: 140px;
    margin: 36px;
}

.Comments .Comments-div .card-body {
    margin: 0 40px;
}

.Comments .Comments-div h2 {
    color: var(--White, #FFF);
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0;
}

.Comments .Comments-div h3 {
    color: rgba(255, 255, 255, 0.70);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.upload {
    padding: 96px 0;
    background-color: #033678;
}

.upload .upload-mobile {
    display: none;
}

.upload h1 {
    color: var(--White, #FFF);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 100px;
    border: 2px solid rgba(255, 255, 255, 0.50);
    width: fit-content;
    padding: 12px;
    margin-bottom: 20px;
}

.upload h2 {
    color: var(--White, #FFF);
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.upload .tab-toggle-upload {
    display: none;
}

.comparision .tab-upload-2-content {
    display: none;
}

.bold-row {
    font-weight: bold !important;
}

.upload .upload-text-1 {
    margin-top: 32px;
    border-left: 4px solid #0054DE;
    padding-left: 16px;
    padding-right: 88px;
}

.upload .active-tab {
    margin-top: 32px;
    border-left: none;
    /* border-left: 4px solid #0054DE; */
    padding-left: 16px;
    padding-right: 88px;
}

.upload .upload-text-1 h3 {
    color: var(--White, #FFF);
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px;
}

.upload .upload-text-1 p {
    color: rgba(255, 255, 255, 0.70);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.upload .active-tab h3 {
    color: rgba(255, 255, 255, 0.20);
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.upload .active-tab p {
    color: rgba(255, 255, 255, 0.20);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.upload .upload-animation {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.upload .upload-animation img {
    border-radius: 25px;
}

.Img-Div {
    margin: 0;
    background: #033678;
}

.Img-Div img {
    width: 100%;
}

.black-layer {
    display: unset;
}

.wall {
    background-color: black;
    background: linear-gradient(102deg, #005699 0.05%, #0C89FF 98.48%);
    padding-top: 88px;
}

.wall .wall-top {
    width: 100%;
    height: 190.453px;
    background: linear-gradient(180deg, #111 0%, rgba(17, 17, 17, 0.00) 100%);
}

.wall h1 {
    color: var(--White, #FFF);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin-bottom: 128px;
}

.wall .wall-div {
    margin: 0 9.5%;
}

.wall .row-1,
.wall .row-2,
.wall .row-3,
.wall .row-4,
.wall .row-5,
.wall .row-6 {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.wall .row-1 .div-1 {
    width: 32.52%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 5.14%;
}

.wall .row-1 .div-1 .img-1 {
    width: 100%;
    border-radius: 40px;
}

.wall .row-1 .div-2 {
    width: 62.34%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wall .row-1 .div-2 .img-2-div {
    width: 100%;
}

.wall .row-1 .div-2 .img-2-div .img-2 {
    width: 100%;
    border-radius: 25px;
}

.wall .row-1 .div-2 .img-3-div {
    width: 41.11%;
    margin-top: 8.75%;
    margin-bottom: 8.75%;
}

.wall .row-1 .div-2 .img-3-div .img-3 {
    width: 100%;
    border-radius: 40px;
}

.wall .row-2 .div-1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wall .row-2 .div-1 .img-4 {
    width: 100%;
    border-radius: 25px;
}

.wall .row-3 .div-1 {
    width: 40.73%;
    margin-top: 11.54%;
    margin-right: 26.75%;
}

.wall .row-3 .div-2 {
    width: 32.52%;
    margin-top: 38.43%;
    margin-bottom: 3.44%;
}

.wall .row-3 .div-1 .img-5 {
    width: 100%;
    border-radius: 40px;
}

.wall .row-3 .div-2 .img-6 {
    width: 100%;
    border-radius: 40px;
}

.wall .row-4 .div-1 {
    width: 100%;
}

.wall .row-4 .div-1 .img-7 {
    width: 100%;
    border-radius: 25px;
}

.wall .row-5 .div-1 {
    width: 62.42%;
    margin-top: 12.89%;
    margin-bottom: 12.89%;
}

.wall .row-5 .div-1 .img-8 {
    width: 100%;
    border-radius: 25px;
}

.wall .row-6 {
    justify-content: end;
}

.wall .row-6 .div-1 {
    width: 62.42%;
    margin-bottom: 14.98%;
}

.wall .row-6 .div-1 .img-9 {
    width: 100%;
    border-radius: 25px;
}

.layer {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

#wall-of-fame-ctoo {
    margin: auto;
    margin-bottom: 120px;
    color: white;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1000;
    top: 40%;
    font-size: 72px;
    font-weight: 700;
    
}

.wall-of-fame-ctoo-btn-css {
    border-radius: 40px;
    font-style: normal;
    line-height: normal;
    border-radius: 80px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(17, 25, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.125);
}



.arrow-get-start::before {
    vertical-align: sub;
}

.arrow-get-start {
    font-size: 100px;
    position: relative;
    bottom: 18px;
    margin-left: 30px;
}


.arrow-get-start-mobile::before {
    vertical-align: sub;
}

.arrow-get-start-mobile {
    font-size: 32px;
    position: relative;
    bottom: 1px;
    margin-left: 10px;
}

.wall-of-fame-img {
    opacity: 0.7;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

*/ .question {
    padding: 96px 0;
}

.question .container-1 {
    margin-right: 48px;
    margin-left: 48px;
}

.question .container-1 .col-lg-6 {
    margin: auto;
    padding-right: 48px;
}

.question h1 {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 900;
    line-height: 70.4px;
    margin-bottom: 48px;
    /* 146.667% */
}

.question .question-line-mobile {
    display: none;
}

.question .question-line {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    height: 100%;
}

.question .faq-container {}

.question .faq {
    padding: 16px 20px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #F8F9FA;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}

.question .faq.active {
    /* background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); */
}

.question .faq.active::before,
.question .faq.active::after {
    /* content: '\f075';
    font-family: 'Font awesome 5 free';
    color: #2ecc71; */
    font-size: 7rem;
    position: absolute;
    opacity: 0.2;
    top: 20px;
    left: 20px;
    z-index: 0;
}

.question .faq.active::before {
    color: #3498db;
    top: -10px;
    left: -30px;
    transform: rotateY(180deg);
}

.question .faq-title {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.04px;
    margin-bottom: 0;
}

.question .faq-text {
    display: none;
    margin: 30px 0 0;
}

.question .faq.active .faq-text {
    display: block;
}

.question .faq-toggle {
    background-color: transparent;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding: 4px;
    position: absolute;
    top: 8px;
    right: 24px;
}

.question .faq-toggle:focus {
    outline: none;
}

.question .faq-toggle .bi-x-circle {
    display: none;
}

.question .faq.active .faq-toggle .bi-x-circle {
    display: block;
    font-size: 36px;
    margin-top: -16px;
}

.question .faq.active .faq-toggle .bi-arrow-down-circle {
    display: none;
}

.question .faq.active .faq-toggle {
    /* background-color: #9fa4a8; */
}

.question .contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 48px;
    padding-right: 48px;
}

.question .contact h1 {
    display: none;
}

.question .contact .field-1 {
    margin-top: 24px;
}

.question .contact .field {
    margin-bottom: 52px;
}

.question .contact .label {
    color: var(--Black, #111);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px;
    margin-bottom: 6px;
}

.question .contact input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.question .contact textarea {
    width: 100%;
    height: 132px;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.question .contact .control-mobile {
    display: flex;
    border-radius: 4px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.question .contact select {
    padding: 12px 12px 12px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border: none;
    width: auto;
    max-width: 200px;
}

.question .contact a {
    width: fit-content;
    background-color: #0054DE;
    color: white;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 4px 16px;
    padding-right: 4px;
    border-radius: 100px;
    text-align: center;
}

.question .contact a i {
    margin-left: 10px;
    margin-top: -16px;
    font-size: 44px;
}

.nextstep {
    border-radius: 50px 50px 0px 0px;
    background: #033678;
}

.nextstep h1 {
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 900;
    line-height: 180%;
    /* 129.6px */
    margin-top: 20px;
    margin-bottom: 0;
}

.nextstep h2 {
    color: rgba(255, 255, 255, 0.70);
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 180%;
    /* 43.2px */
}

.nextstep .nextstep-btn {
    display: flex;
    flex-direction: row;
    margin: 16px 0;
}

.nextstep a {
    color: var(--Black, #121212);
    width: fit-content;
    /* margin-left: 10px; */
    background-color: white;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 4px 16px;
    padding-right: 4px;
    border-radius: 100px;
    text-align: center;
}

.nextstep a i {
    color: #121212;
    margin-left: 10px;
    margin-top: -16px;
    font-size: 44px;
}

.nextstep .btn-2 {
    width: fit-content;
    margin-left: 10px;
    padding-right: 4px;
    border-radius: 100px;
    text-align: center;
    background-color: #121212;
    color: white;
    padding: 11px 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 192.75%;
}


.error-class{
    border: 1px solid red !important;
} 

footer {
    background-color: #111;
    color: #FFF;
    padding: 0px 100px 0px 100px
}

footer p {
    margin-bottom: 0;
}

footer .div-1 {
    display: flex;
    flex-direction: row;
    align-items: center;
}

footer .div-1-1 {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

footer .div-1-1 img {
    width: 72px;
    height: 72px;
}

footer .div-1-1 h1 {
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 24px;
}

footer .div-1 p {
    max-width: 508px;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 64px;
}

footer .div-2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

footer .div-2-1 {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

footer .div-2-1 i {
    font-size: 24px;
}

footer .div-2-1 p {
    width: 278px;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 16px;
}

footer .div-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

footer .div-3 p {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

footer .div-3 .p1 {
    margin-bottom: 26.5px
}

footer .div-3 img {
    width: 24px;
    height: 24px;
    margin-right: 16px;
}

.p1 a,
.p2 a {
    color: white;
    text-decoration: none;
}

.footer-copyright.text-center.py-3 {
    font-size: 14px;
    font-family: 'Nunito Sans', sans-serif;
    margin-top: -50px;
}

.privacy-policy,
.refund-policy,
.pricing-policy {
    color: white;
}


@media (max-width: 991.2px) {
    header label {
        visibility: visible;
        opacity: 1;
    }

    header input:checked~label::before {
        content: '\f00d';
    }

    .navbar {
        /* width: 100vw; */
        padding: 20px 16px;
    }

    .navbar .container-fluid {
        padding: 0;
    }
}

@media (max-width: 456px) {

    html,
    body {
        width: 99.61%;
    }

    .navbar {
        /* width: 100vw; */
        padding: 20px 16px;
    }

    .navbar .social a {
        margin-left: 0px;
        color: white;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding: 7px;
        border-radius: 100px;
    }

    header label {
        font-size: 1.5rem;
        color: rgb(0, 0, 0);
        cursor: pointer;
        visibility: visible;
        opacity: 1;
    }

    .Hero {
        padding-bottom: 24px;
    }

    .Hero .container {
        margin: 0;
    }

    .Hero h2 {
        font-size: 26px;
        text-align: center;
    }
    .text-animation {
        margin-right: -10px;
    }

    .hero-image {
        
        margin-bottom: 5px; 
        margin: auto;
    }
    .Hero p {
        width: 75vw;
        font-size: 14px;
        margin: auto;
        text-align: center;
        /* margin-left: 4px; */
    }

    .Hero .Hero-text {
        justify-content: left;
    }


    .Hero .btn-1 {
        margin-left: 0px;
        font-size: 12px;
    }

    .Hero .btn-2 {
        font-size: 12px;
        padding: 5.5px 12px;
    }

    .Hero a i {
        margin-left: 8px;
        margin-top: -10px;
        font-size: 28px;
    }

    .Hero-Video {
        margin: 0;
        padding: 12px 0;
    }

    .Hero-Video #video {
        width: 328px;
        height: 183px;
        border-radius: 8px;
    }

    .Hero-Video a {
        font-size: 12px;
        margin-left: 0px;
        padding: 5px 8px;
        top: 86%;
    }

    .Hero-Video a i {
        margin-right: 8px;
        margin-top: -2px;
        font-size: 28px;
    }

    .Hero-Video img {
        width: 28px;
        height: 28px;
        margin-right: 8px;
    }

    .Studios {
        margin: 64px 0;
    }
    .home-studio-section-area{
        margin: 0px;
    }
    header .navbar .nav-link {
        text-align: left;
        padding: .375rem .75rem;
    }

    .Studios p {
        font-size: 12px;
        margin-bottom: 4px;
        border: 1px solid rgba(18, 18, 18, 0.52);
    }

    .Studios .d-flex {
        width: 1px;
        height: 84px;
    }

    .Studios h2 {
        font-size: 24px;
    }

    .desktop-studio {
        display: none;
    }

    .mobile-studio {
        display: flex;
    }

    .Studios .Studios-logo {
        margin: 32px 0;
    }

    .Studios .Studios-logo .card {
        margin: 1rem !important;
    }

    .Studios .Studios-logo img {
        width: 120px;
        height: 120px;
        border-radius: 1000%;
    }

    .Studios .Studios-logo .card-mobile {
        display: block;
    }

    .the-best-img-2 {
        opacity: 1;
    }

    .third-tab-hero-image-area {
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("./../images/the-best-3.png");
        background-size: contain !important;
        width: 328px;
        height: 328px;
    }

    .third-tab-cpu-img-area-1 .the-best-img-3 {
        opacity: 0;
        border: none;
    }

    .the-best .the-best-container {
        margin: 20px 16px;
        padding-bottom: 32px;
    }

    .the-best .the-best-text {
        margin-top: 40px;
    }

    .the-best p {
        font-size: 12px;
        /* border: 1px solid rgb(255, 255, 255); */
        margin-bottom: 4px;
    }

    .the-best h2 {
        font-size: 20px;
    }

    .the-best h2 span {
        font-size: 20px;
    }

    .first-tab-hero-image-area {
        width: 328px;
        height: 328px;
    }

    .the-best h2 span p1 {
        width: 100px;
        left: 45%;
        font-size: 20px;
        top: -40%;
    }

    .the-best h2 span img {
        width: 55px;
        height: 8px;
        top: 55%;
        left: 47%;
    }

    .the-best .the-best-animation {
        padding: 48px 10px;
        padding-bottom: 10px;
        margin-top: 8px;
        border: none;
        /* background: none; */
    }

    .the-best .the-best-animation .the-best-tab a {
        font-size: 12px;
        padding: 12px;
    }

    .the-best .the-best-animation .tab-trigger {
        font-size: 12px;
        padding: 12px;
    }

    .the-best .the-best-animation .col-lg-6-2 {
        justify-content: center;
    }

    .the-best .the-best-animation .col-lg-6-1 {
        justify-content: center;
        margin-top: 40px;
    }

    .the-best .the-best-animation h3 {
        width: unset;
        font-size: 20px;
        text-align: center;
        /* color: #000; */
    }

    .the-best .the-best-animation .row {
        --bs-gutter-x: 0rem;
    }

    .the-best .the-best-animation .animation-1 {
        padding-left: 0px;
    }

    .the-best .the-best-animation .the-best-animation-text .p-1 {
        width: fit-content;
    }

    .the-best .the-best-animation .the-best-animation-text .btn-1 {
        margin-top: 16px;
        font-size: 12px;
        padding: 4px 16px;
        padding-right: 4px;
        border: 2px solid white;
        margin-left: 0;
    }

    .the-best .the-best-animation .the-best-animation-text a i {
        margin-left: 8px;
        margin-top: -10px;
        font-size: 28px;
    }

    .the-best .the-best-animation .the-best-animation-img {
        display: flex;
        flex-direction: column;
        margin-top: 12px;
        margin-bottom: 0;
    }

    .the-best .the-best-animation .col-lg-5-grid {
        width: 328px;
        height: 328px;
    }

    .the-best .the-best-animation .the-best-img-2 {
        width: 66px;
        height: 66px;
        flex-shrink: 0;
        border-radius: 0px;
        margin: 8px;
    }

    .the-best .the-best-animation .the-best-img-3 {
        width: 66px;
        height: 66px;
        flex-shrink: 0;
        border-radius: 0px;
        margin: 8px;
    }

    .the-best .the-best-animation img {
        width: 328px;
        height: 328px;
    }

    .the-best .the-best-animation .the-best-animation-text p {
        font-size: 14px;
        /* color: #000; */
        text-align: left;
        width: 95%;
        margin: auto;
    }

    .the-best .the-best-animation .the-best-animation-text {
        margin-top: 22px;
        margin-bottom: 0;
        width: 328px;
    }

    .the-best .the-best-animation .the-best-animation-btn a {
        font-size: 12px;
        margin-top: 40px;
        margin-left: 0;
        color: rgba(0, 0, 0, 0.70);
        line-height: 197.25%;
        background: #FFF;
        backdrop-filter: blur(15px);
        height: 40px;
    }

    .the-best .the-best-animation .the-best-animation-btn a img {
        width: 24px;
        height: 24px;
    }




    .Appreciates {
        margin: 0;
    }

    .Appreciates p {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .Appreciates .Appreciates-text {
        margin-top: 15px;
    }

    .Appreciates .Appreciates-text .d-flex {
        width: 1px;
        height: 84px;
    }

    .Appreciates h2 {
        font-size: 24px;
    }

    .Appreciates .Appreciates-logo {
        margin: 0;
    }

    .Appreciates .Appreciates-logo .card-mobile {
        display: block;
    }

    .Appreciates .Appreciates-logo .card {
        margin: 1rem !important;
        padding: 0;
    }

    .Appreciates .Appreciates-logo img {
        width: 140px;
        height: 80px;
    }

    .tools-3D {
        padding: 52px 0;
    }

    .tools-3D .tools-3D-link {
        font-size: 14px;
    }

    .tools-3D .tools-3D-desktop {
        display: none;
    }

    .tools-3D .tools-3D-mobile {
        display: block;
    }

    .tools-3D .tools-3D-mobile h1 {
        font-size: 24px;
        text-align: center;
    }

    .tools-3D .tools-3D-animation {
        width: 334px;
        padding: 28px 0;
        margin: auto;
        height: 250px;
    }



    .tools-3D .tools-3D-animation .tools-3D-shadow-div-1 {
        position: absolute;
        width: 31px;
        height: 100%;
        background: linear-gradient(90deg, #033678 0%, rgba(17, 17, 17, 0.00) 100%);
        left: 0;
        z-index: 1000;
    }

    .tools-3D .tools-3D-animation .tools-3D-shadow-div-2 {
        position: absolute;
        width: 31px;
        height: 100%;
        background: linear-gradient(270deg, #033678 0%, rgba(17, 17, 17, 0.00) 100%);
        right: 0;
        z-index: 1000;
    }

    .tools-3D .tools-3D-mobile .tools-3D-slider {
        justify-content: left;
        margin-bottom: 12px;
        height: 125px;
    }

    .tools-3D .tools-3D-mobile .tools-3D-slider img {
        width: 57px;
        height: 57px;
        border-radius: 12px;
    }

    .tools-3D .tools-3D-slider .tools-3D-slider-box-1 {
        padding: 10px 12px;
        padding-top: 10px;
        border-radius: 15.452px;
        width: 120px;
    }

    .tools-3D .tools-3D-slider .box-7 {
        margin-left: 11.59px;
    }

    .tools-3D .tools-3D-slider .box-11 {
        margin-left: 11.59px;
    }

    .tools-3D .tools-3D-slider .box-15 {
        margin-left: 11.59px;
    }

    .tools-3D .tools-3D-slider .tools-3D-slider-box-2 {
        border-radius: 15.452px;
        padding: 12px 20px;
        padding-top: 12px;
        width: 200px;
    }

    .tools-3D .tools-3D-slider .tools-3D-slider-box-11 {
        margin-right: 11.59px;
        height: 125px;
    }

    .tools-3D .tools-3D-slider .tools-3D-slider-box-12 {
        margin-left: 11.59px;
        height: 125px;
    }

    .tools-3D .tools-3D-mobile .tools-3D-slider .tools-3D-slider-box-1 p {
        font-size: 16px;
        margin-top: 9.66px;
    }

    .tools-3D .tools-3D-mobile .tools-3D-slider .tools-3D-slider-box-2 p {
        font-size: 16px;
        margin-left: 20px;
    }

    .tools-3D h2 {
        color: rgba(255, 255, 255, 0.70);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: left;
        margin-top: 12px;
    }

    .tools-3D .tools-3D-text {
        margin-top: 36px;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
    }

    .tools-3D a {
        background-color: #FFF;
        color: #000;
        font-size: 12px;
        padding: 4px 16px;
        padding-right: 4px;
        border-radius: 100px;
    }

    .tools-3D a i {
        color: #0054DE;
        margin-left: 8px;
        margin-top: -10px;
        font-size: 28px;
    }

    .Statistics {
        padding: 28px 0;
        background-size: 100%;
        background-position-y: 64px;
    }

    .Statistics p {
        font-size: 12px;
        border: 1px solid rgba(18, 18, 18, 0.52);
        margin-bottom: 4px;
    }

    .Statistics .Statistics-text .d-flex {
        width: 1px;
        height: 84px;
    }

    .Statistics h1 {
        font-size: 24px;
    }

    .Statistics .Statistics-logo .card {
        margin: 12px !important;
        padding: 0;
    }

    .Statistics .Statistics-logo {
        margin-top: 0px;
    }

    .Statistics .Statistics-logo h2 {
        font-size: 24px;
    }

    .Statistics .Statistics-logo h3 {
        font-size: 12px;
    }

    .Quotes .card .container {
        border-radius: 18px;
    }

    .Quotes {
        margin: 0;
    }

    .Quotes img {
        max-width: 330px;
        max-height: 200px;
        border-radius: 18px;
    }

    .Quotes p {
        font-size: 20px;
    }

    .Quotes p span {
        color: #F70;
        font-size: 20px;
    }

    .Comments {
        padding: 56px 0;
        padding-top: 0;
    }

    .Comments p {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .Comments h1 {
        max-width: 218px;
        font-size: 24px;
    }

    .Comments .Comments-desktop {
        display: none;
    }

    .Comments .Comments-mobile {
        display: block;
    }

    .Comments .Comments-mobile .carousel {
        margin: 16px;
    }

    .Comments .Comments-mobile .carousel .carousel-item {
        padding: 10px;
        border-radius: 10px;
        background-color: #ffffff;
    }

    .Comments .Comments-mobile .carousel .carousel-item .card {
        height: 545px;
    }

    .Comments .Comments-mobile img {
        width: 104px;
        height: 104px;
        border-radius: 104px;
        margin: 24px;
    }

    .Comments .Comments-mobile p {
        font-size: 12px;
        border: 1px solid rgba(18, 18, 18, 0.52);
        margin-bottom: 4px;
        text-align: center;
        font-family: 'Roboto', sans-serif;
        border-radius: 8px;
        border: 2px solid rgba(18, 18, 18, 0.52);
        width: fit-content;
        padding: 12px;
        color: #000;
    }

    .Comments .Comments-mobile .card p {
        color: #FFF;
        text-align: center;
        width: fit-content;
        padding: 12px;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 210%;
        border: none;
        font-family: 'Nunito Sans', sans-serif;
    }

    .Comments .Comments-mobile .card-1 {
        background-color: #161616;
        border-radius: 8px;
    }

    .Comments .Comments-mobile .card-2 {
        background-color: #1F3053;
        border-radius: 8px;
    }

    .Comments .Comments-mobile .card-3 {
        background-color: #12117B;
        border-radius: 8px;
    }

    .Comments .Comments-mobile .card-4 {
        background-color: #4E2816;
        border-radius: 8px;
    }

    .Comments .Comments-mobile .card-body {
        margin: 0 8px;
        padding: 0;
    }

    .Comments .Comments-mobile h2 {
        color: #FFF;
        text-align: center;
        padding: 16px;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        border: none;
        font-family: 'Nunito Sans', sans-serif;
    }

    /* .carousel .carousel-item img {
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    } */

    .Comments .Comments-mobile .carousel .carousel-item video {
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

    .Comments .Comments-mobile .carousel .carousel-indicators {
        bottom: -50px;
    }

    .Comments .Comments-mobile .carousel .carousel-control-next,
    .Comments .Comments-mobile .carousel .carousel-control-prev {
        width: 5%;
    }

    .upload {
        padding: 32px 0;
    }

    .upload .upload-desktop {
        display: none;
    }

    .upload .upload-mobile {
        display: block;
    }

    .upload .row {
        --bs-gutter-x: 0rem;
    }

    .upload h1 {
        font-size: 12px;
        margin: auto;
        margin-bottom: 20px;
    }

    .upload h2 {
        font-size: 24px;
        margin: auto;
        margin-bottom: 0px;
        text-align: center;
    }

    .upload .upload-mobile img {
        /* max-width: 328px; */
        border-radius: 25px;
        margin: 36px 0;
    }

    .upload .upload-text-1 {
        margin-top: 0px;
        border-left: 2px solid #0054DE;
        padding-right: 16px;
    }

    .upload .active-tab {
        margin-top: 0px;
        border-left: none;
        /* border-left: 4px solid #0054DE; */
        padding-right: 16px;
    }

    .upload .upload-text-1 h3 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .upload .upload-text-1 p {
        font-size: 12px;
    }

    .upload .active-tab h3 {
        font-size: 16px;
        font-weight: 500;
    }

    .upload .active-tab p {
        font-size: 12px;
    }

    .wall-of-fame-ctoo-btn-css-mobile {
        border-radius: 40px;
        font-style: normal;
        line-height: normal;
        border-radius: 80px;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        background-color: rgba(17, 25, 40, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.125);
    }

    #wall-of-fame-ctoo {
        margin: auto;
        margin-bottom: 120px;
        color: white;
        position: -webkit-sticky;
        position: sticky;
        z-index: 1000;
        top: 50%;
        width: 300px;
    }

    #wall-of-fame-ctoo {
        font-size: 24px;
        margin-bottom: 34.88px;
    }

    .wall .wall-top {
        height: 44.435px;
    }

    .wall h1 {
        font-size: 24px;
        margin-bottom: 34.88px;
    }

    .wall .row-1 .div-1 .img-1 {
        border-radius: 7px;
    }

    .wall .row-1 .div-2 .img-2-div .img-2 {
        border-radius: 5px;
    }

    .wall .row-1 .div-2 .img-3-div .img-3 {
        border-radius: 7px;
    }

    .wall .row-2 .div-1 .img-4 {
        border-radius: 5px;
    }

    .wall .row-3 .div-1 .img-5 {
        border-radius: 7px;
    }

    .wall .row-3 .div-2 .img-6 {
        border-radius: 7px;
    }

    .wall .row-4 .div-1 .img-7 {
        border-radius: 5px;
    }

    .wall .row-5 .div-1 .img-8 {
        border-radius: 5px;
    }

    .wall .row-6 .div-1 .img-9 {
        border-radius: 5px;
    }

    .question {
        padding: 36px 0;
    }

    .question .container-1 {
        margin-right: 16px;
        margin-left: 16px;
    }

    .question h1 {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: left;
        margin-left: 12px;
    }

    .question .faq-title {
        font-size: 16px;
        letter-spacing: -0.028px;
    }

    .question .container-1 .col-lg-6 {
        padding-right: 0px;
        padding-left: 0px;
    }

    .question .faq-toggle {
        font-size: 24px;
        top: 1.3px;
        right: 16px;
    }

    .question .faq-toggle img {
        width: 24px;
    }

    .question .faq.active .faq-toggle .bi-x-circle {
        display: block;
        font-size: 24px;
        margin-top: -9.8px;
    }

    .question .faq {
        padding: 8px 16px;
    }

    .question .faq h3 {
        margin-bottom: 0;
        margin-right: 28px;
    }

    .question .question-line-desktop {
        display: none;
    }

    .question .question-line-mobile {
        display: block;
    }

    .question .contact {
        padding-left: 16px;
        padding-right: 16px;
    }

    .question .contact h1 {
        display: block;
        margin-left: 0;
    }

    .question .container-1 .col-lg-5 .control-btn {
        display: flex;
        flex-direction: column;
    }

    .question .contact a {
        font-size: 12px;
        padding: 4px 12px;
        padding-right: 4px;
    }

    .question .contact a i {
        margin-left: 8px;
        margin-top: -10px;
        font-size: 28px;
    }

    .question .contact .field-1 {
        margin-top: 0px;
    }

    .question .contact .field {
        margin-bottom: 36px;
    }

    .nextstep {
        border-radius: 25px 25px 0px 0px;
    }

    .nextstep h1 {
        font-size: 24px;
        margin-top: 28px;
    }

    .nextstep h2 {
        font-size: 12px;
    }

    .nextstep a {
        color: white;
        background-color: #121212;
        margin-left: 0px;
        font-size: 12px;
        padding: 4px 12px;
        padding-right: 4px;
    }

    .nextstep a i {
        color: #FFF;
        margin-left: 8px;
        margin-top: -10px;
        font-size: 28px;
    }

    .nextstep .btn-2 {
        margin-left: 0px;
        padding: 7px 12px;
        font-size: 12px;
    }

    .nextstep .nextstep-btn {
        margin: 24px 0;
    }

    .question .contact select {
        max-width: 100px;
    }

    footer {
        padding: 8px 32px;
    }

    footer .div-1 {
        flex-direction: column;
        align-items: start;
    }

    footer .div-1-1 {
        align-items: start;
        display: -webkit-inline-box;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    footer .div-1-1 img {
        width: 44px;
        height: 44px;
    }

    footer .div-1-1 h1 {
        font-size: 14px;
        margin-top: 16px;
        margin-left: 10px;
    }

    footer .div-1 p {
        font-size: 12px;
        margin-left: 0px;
    }

    footer .div-2 {
        margin-top: 12px;
        margin-bottom: 7px;
        display: none;
    }

    footer .div-2-1 i {
        font-size: 24px;
        margin-top: -10px;
    }

    footer .div-2-1 p {
        width: 100%;
        font-size: 12px;
        margin: 16px;
    }

    footer .div-3 {
        display: -webkit-inline-box;
        margin-top: 20px;
    }

    footer .div-3 p {
        font-size: 12px;
    }

    footer .div-3 img {
        width: 24px;
        height: 24px;
    }

    footer .div-3 .p1 {
        margin-bottom: 29px
    }

    .footer-copyright {
        margin-top: 0px !important;
    }

    .py-3 {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    p.p2 {
        margin-left: 20px;
    }

    footer .div-3 img {
        margin-right: 5px;
    }
}