/*------------------------------------------------------------------
Project: Ciri AI
Author: The_Krishna
Last change: 21/2/2025
Primary use:
------------------------------------------------------------------ */
/*-----------------------[Table of contents]------------------------
1.Default CSS
2.Preloader CSS
3.Buttons CSS
4.Header CSS
5.Section One CSS 
6.Section Two CSS
7.Section Three CSS
8.Brand Marquee Section CSS
9.Section Four CSS
10.Section Five CSS
11.Section Six CSS
12.Why Choose Us CSS
13.Section Seven CSS
14.Pricing Page CSS
15.Section Eight CSS
16.Section Subscribe CSS
17.Section Blog CSS
18.Footer CSS
19.Form CSS
20.Bottom top button CSS
21.Features Page CSS
22.
 Page CSS
23.Blog Detail Page CSS
24.404Page CSS
25.Coming Soon CSS
------------------------------------------------------------------ */
/*-----------------------[ 1.Default CSS ]------------------------*/
.col-xl-6 {
  flex: 0 0 auto;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: "Poppins";
  font-style: normal;
}
html {
  scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
a {
  text-decoration: none;
}
dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0rem;
}
ul {
  padding-left: 0;
}
ul li {
  list-style: none;
}
button {
  border: none;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-corner {
  display: none;
}
::-webkit-scrollbar-thumb {
  background: #5c33ff;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background-color: #02000b;
}
body {
  overflow-x: hidden;
  background: #02000b;
}
/*-----------------------[ 2.Preloader CSS ]------------------------*/
.page-loader {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #02000b;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.page-loader p {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 3px;
  padding-top: 20px;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spinner {
  width: 80px;
  height: 80px;
  animation: spinner-y0fdc1 2s infinite ease;
  transform-style: preserve-3d;
}
.spinner > div {
  background-color: #5c33ff6e;
  height: 100%;
  position: absolute;
  width: 100%;
  border: 2px solid #ffffff;
}
.spinner div:nth-of-type(1) {
  transform: translateZ(-40px) rotateY(180deg);
}
.spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}
.spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}
.spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}
.spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}
.spinner div:nth-of-type(6) {
  transform: translateZ(40px);
}
@keyframes spinner-y0fdc1 {
  0% {
    transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }
  50% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }
  100% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
}
/*-----------------------[ 3.Buttons CSS ]------------------------*/
/* Buttton 1 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  position: relative;
  transition: all 0.2s;
  cursor: pointer;
  color: #fff;
  z-index: 1;
  border-radius: 10px;
  background: linear-gradient(
    270deg,
    rgba(0, 255, 177, 0.75) 0%,
    rgba(0, 255, 177, 0) 49.65%
  );
  border: 2px solid transparent;
  justify-content: center;
  align-items: center;
}
.button::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(90deg, #5c33ff, #00ffb1);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
.button:active {
  transform: scale(0.97);
}
.hoverEffect {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  overflow: hidden;
  border-radius: 8px;
}
.hoverEffect span {
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  width: 12rem;
  height: 12rem;
  transition: 0.4s;
  filter: blur(20px);
  animation: effect infinite 3s linear;
  opacity: 0.5;
  overflow: hidden;
}
@keyframes effect {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Buttton 2 */
.button2 {
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: conic-gradient(
    from var(--r) at var(--x) 50%,
    #222 0%,
    #00ffb1 20%,
    #1a1a1a 25%
  );
  animation:
    rotateAnimation 5s linear infinite,
    moveX 5s ease-in-out infinite alternate;
  padding: 12px 24px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.button2:hover {
  color: #00ffb1;
}
.button2::after {
  content: "";
  display: block;
  position: absolute;
  background: #1a1a1a;
  inset: 2px;
  border-radius: 10px;
  z-index: 0;
  transition: opacity 0.3s ease;
}
.button2 span {
  position: relative;
  z-index: 2;
}
@property --r {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@keyframes rotateAnimation {
  0% {
    --r: 0deg;
  }
  100% {
    --r: 360deg;
  }
}
/* Smooth infinite horizontal movement */
@keyframes moveX {
  0% {
    --x: 10%;
  }
  100% {
    --x: 90%;
  }
}
/*-----------------------[ 4.Header CSS ]------------------------*/
header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 500;
  padding: 20px 9px;
}
.top-navbar.fixed {
  background: rgba(23, 27, 34, 0.3);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.he-btn {
  display: none;
}
.header-buttons-main {
  display: flex;
  align-items: nowrap;
  gap: 17px;
}
.side-menu-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  display: none;
}
.menu-icon {
  display: none;
  cursor: pointer;
}
.nav-links-mn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}
.nav-links {
  list-style: none;
  display: flex;
  align-items: nowrap;
  gap: 20px;
}
.nav-links li {
  white-space: nowrap;
}
.nav-links .a-link,
.select-btn {
  color: var(--1, #fff);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  cursor: pointer;
}
.a-link.active,
.select-btn.active {
  filter: brightness(0) saturate(100%) invert(77%) sepia(100%) saturate(2242%)
    hue-rotate(91deg) brightness(100%) contrast(104%);
}
.select-btn.active {
  color: #00ffb1 !important;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.dropdown-content.active {
  display: block;
  opacity: 1;
  visibility: visible;
}
.select-menu .options {
  position: absolute;
  top: 40px;
  overflow-y: auto;
  padding: 12px 16px;
  border-radius: 8px;
  background: #1a1a1a;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation-name: fadeInDown;
  -webkit-animation-name: fadeInDown;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.35s;
  -webkit-animation-fill-mode: both;
}
.select-menu.active .options {
  opacity: 0;
  z-index: 10;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  width: 372px;
  display: flex;
  flex-direction: column;
}
.options a {
  padding: 10px;
  color: var(--1, #fff);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.select-menu .options {
  display: none;
}
@keyframes fadeInUp {
  from {
    transform: translate3d(0, 30px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInDown {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 20px, 0);
    opacity: 0;
  }
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo on left, nav on right */
  padding: 10px 20px;
  background: #fff; /* or your header background color */
}

.logo img {
  height: 190px; /* adjust logo size */
  width: 190px;
}

.nav-links ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links a {
  text-decoration: none;
  color: #f6f2f2;
  font-weight: 500;
}

/*-----------
------------[ 5.Section One CSS ]------------------------*/

/* Flip animation */
@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.blue-gardient1 {
  position: absolute;
  left: 0;
  top: -110px;
  max-width: 100%;
  z-index: -1;
  max-width: 670px;
}
.blue-gardient2 {
  position: absolute;
  right: 0;
  top: -50px;
  max-width: 725px;
  z-index: -1;
}
.elevate {
  color: var(--1, #fff);
  text-align: center;
  font-size: 64px;
  font-weight: 400;
  line-height: 100px;
  padding-top: 100px;
}
.bestAI {
  background: linear-gradient(
    to right,
    #5c33ff 20%,
    #00ffb1 30%,
    #5c33ff 70%,
    #00ffb1 80%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-size: 64px;
  font-weight: 700;
  line-height: 100px;
  background-size: 500% auto;
  animation: gradientMove 6s ease-in-out infinite alternate;
}
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.olut {
  color: var(--1, #fff);
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  max-width: 850px;
  margin: 0 auto;
  padding-top: 20px;
}
.inputGenerate {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--11, #1a1a1a);
  max-width: 1000px;
  margin: 40px auto 20px auto;
  position: relative;
}
.inputGenerate input {
  width: 100%;
  background: #1a1a1a;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  border: none;
  outline: none;
  padding: 28px 30px;
  border-radius: 10px;
}
.generate-btn {
  margin-right: 10px;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  border: none;
  padding: 18px 24px;
}
a.button.generate-btn::before {
  display: none;
}
.hometags-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.popTg {
  color: var(--1, #fff);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.hometags {
  color: var(--12, #6f6f6f);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  border-radius: 5px;
  background: var(--11, #1a1a1a);
  padding: 5px 12px;
  transition: all 0.3s ease-in-out;
}
.hometags:hover {
  background: #fff;
  color: #000;
}
.single-img img {
  max-width: 100%;
}
.single-img {
  margin: 60px 15px 0 15px;
}
.multi-img img:nth-child(1) {
  margin-bottom: 30px;
}
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 80px;
  background: #131313;
}

.hero-text {
  flex: 1;
}

.hero-text h1 {
  font-size: 32px;
  font-weight: 700;
  color: #f1f1f1;
  margin-bottom: 15px;
}

.hero-text p {
  font-size: 18px;
  line-height: 28px;
  color: #f9f0f0;
}

.hero-image {
  flex: 1;
  text-align: right;
}

/* Image animation */
.hero-image img {
  height: 400px;
  width: 500px;
  animation: float 3s ease-in-out infinite;
}

/* Keyframes for smooth movement */
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px) scale(1.03);
  }
  100% {
    transform: translateY(0);
  }
}
/*-----------------------[ 6.Section Two CSS ]------------------------*/
.logos-wrapper {
  overflow: hidden;
}
body {
  overflow-x: hidden; /* optional safety */
}

.logos-slide.ltr {
  display: flex;

  width: max-content;
  gap: 40px;
  animation: scroll-left 20s linear infinite;
}

.logos-slide.ltr img {
  height: 100px;
  width: auto;
}
.logos-wrapper {
  overflow: hidden;
}
.logos-slide.rtl {
  display: flex;
  width: max-content;
  gap: 40px;
  animation: scroll-right 20s linear infinite;
}

.logos-slide.rtl img {
  height: 100px;
  width: auto;
  padding-top: 10px;
}
@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.settitle {
  color: #dd4343;
  text-align: center;
  font-size: 18px;
}
.set {
  color: beige;
  text-align: center;
}
.text {
  color: #a5a5a5;
  font-size: 15px;
  text-align: center;
  padding-bottom: 50px;
  align-items: center;
  justify-content: center;
}

/* Continuous leftward scroll */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.section-two {
  overflow: hidden;
}
.sec-heding {
  color: var(--1, #fff);
  text-align: center;
  font-size: 48px;
  font-weight: 400;
  line-height: 72px;
}
.sec-heding span {
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  line-height: 72px;
  background-size: 500% auto;
  animation: gradientMove 6s ease-in-out infinite alternate;
}
.sub-heding {
  color: var(--1, #fff);
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  max-width: 850px;
  margin: 0 auto;
  padding-top: 20px;
}
.home-features-row {
  gap: 30px 0;
  margin-top: 60px;
}
.round-gradient1 {
  position: absolute;
  max-width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  mix-blend-mode: hard-light;
}
.round-gradient2 {
  position: absolute;
  max-width: 100%;
  right: 0;
  top: -300px;
  z-index: -1;
  mix-blend-mode: hard-light;
}
.features-cir-main {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}
.features-cir {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: linear-gradient(
    146deg,
    rgba(255, 255, 255, 0.1) 20.09%,
    rgba(255, 255, 255, 0.05) 79.91%
  );
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.img-bg-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  mix-blend-mode: hard-light;
  filter: blur(10px);
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
  animation: circularMotion 3s linear infinite;
}
@keyframes circularMotion {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(15px) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg) translateX(15px)
      rotate(-90deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) translateX(15px)
      rotate(-180deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg) translateX(15px)
      rotate(-270deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(15px)
      rotate(-360deg);
  }
}
.gendseratio {
  color: var(--1, #fff);
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}
.eugiat {
  color: var(--12, #6f6f6f);
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  padding-top: 10px;
}
.section-three {
  padding: 100px 0;
}
.ering {
  color: #fff;
  font-size: 48px;
  font-weight: 400;
  line-height: 72px;
  text-align: center;
  transition: color 0.5s ease-in-out;
}
.community-btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0 60px 0;
}
.glob {
  font-weight: 500;
}
.logos1 {
  margin-top: 30px;
}
.ltr {
  animation: slide-ltr 50s linear infinite;
}
@keyframes slide-ltr {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.rtl {
  animation: slide-rtl 50s linear infinite;
}
@keyframes slide-rtl {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.marquee__content {
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  align-items: center;
  padding-top: 30px;
}
.marquee-img-main {
  background: #1a1a1a;
  border-radius: 10px;
  cursor: pointer;
  height: 10px;
  width: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee-img-main {
  margin: 0 1px;
}
.brand-logos {
  height: 60px;
  width: auto;
}
.courses {
  text-align: center;
  padding: 60px 40px;

  color: #fff;
}

@media screen and (min-width: 1024px) {
  .course-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, auto);
    gap: 20px;
    width: 100%;
  }

  .course-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90%;
    box-sizing: border-box;
  }

  .course-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
  }
}

.course-card {
  background: #1a1a1a;
  border-radius: 15px;
  padding: 20px;
  transition:
    transform 0.6s ease,
    box-shadow 0.6s ease;
  perspective: 1000px;
}

.course-card img {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.6s ease;
}

.course-card:hover {
  transform: rotateY(12deg) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 255, 177, 0.3);
}

.course-card:hover img {
  transform: translateY(-10px);
}

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

.course-card {
  animation: float 6s ease-in-out infinite;
}

/*-----------------------[ 9.Section Four CSS ]------------------------*/
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 90%;
  margin: 50px auto;
  max-width: 1400px;
  justify-content: center;
}

.feature-card {
  background: #0f0e0e;
  border-radius: 8px;
  padding: 50px 30px;
  min-width: 350px;
  min-height: auto;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.tsize {
  font-size: 25px;
}
.feature-card img {
  width: 100px;
  height: auto;

  margin-bottom: 15px;
}

.feature-card h3 {
  font-size: 16px;
  color: #e7e4e4;
  font-weight: bold;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-demo {
  display: inline-block;
  padding: 12px 30px;
  background: #ff4d4d;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.btn-demo:hover {
  background: #e60000;
  transform: scale(1.05);
}

.section-four {
  padding: 50px 0;
}
.sugg-box {
  display: flex !important;
  gap: 80px;
  margin-top: 60px;
  margin-left: 12px;
  margin-right: 12px;
}
.setpSugg {
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  padding-bottom: 20px;
  background-size: 500% auto;
  animation: gradientMove 6s ease-in-out infinite alternate;
}
.flex-pri {
  text-align: left;
}
.tryImage-btn-main {
  margin-top: 60px;
}
.blue-gardient3 {
  position: absolute;
  top: -87px;
  left: 0;
  max-width: 100%;
  z-index: -1;
}
.blue-gardient4 {
  position: absolute;
  top: 150px;
  right: 0;
  max-width: 100%;
  z-index: -1;
}
/*-----------------------[ 10.Section Five CSS ]------------------------*/
.section-five {
  padding: 50px 0;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.logos-setion {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background: linear-gradient(
    90deg,
    #02000b 10%,
    rgba(26, 26, 26, 0.7) 49.5%,
    #02000b 90%
  );
  padding: 20px 0;
}
.logos-setion::before,
.logos-setion::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #02000b 10%, #fff 49.5%, #02000b 90%);
  opacity: 0.5;
  animation: pulseGlow 2.5s ease-in-out infinite;
}
.logos-setion::before {
  top: 0;
}
.logos-setion::after {
  bottom: 0;
}
@keyframes pulseGlow {
  0% {
    opacity: 0.3;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.1);
  }
  100% {
    opacity: 0.3;
    transform: scaleX(1);
  }
}
.vis-tex {
  display: flex;
  align-items: center;
}
.vis-tex img {
  margin: 0 40px;
}
.vis-tex h2 {
  color: var(--1, #fff);
  text-align: center;
  font-size: 64px;
  font-weight: 700;
  line-height: 100px;
}
.vis-tex2 {
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vis-tex3 h2 {
  text-align: center;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--1, #fff);
  will-change: transform;
  color: transparent;
}
.logos-slide {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.marquee__content {
  display: flex;
  flex-direction: row;
  gap: 40px;
  white-space: nowrap;
}
/*-----------------------[ 11.Section Six CSS ]------------------------*/

.video-banner {
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-position: center;
  object-fit: cover;
  z-index: -1;
  opacity: 0.4;

  animation: slowVideoZoom 12s infinite alternate ease-in-out;
}

@keyframes slowVideoZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.video-overlay {
  text-align: center;
  color: white;
  z-index: 1;

  background: rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 10px;
}

.video-overlay h2 {
  font-size: 3rem;
  margin-bottom: 10px;
  text-shadow: 2px 2px 10px rgba(255, 254, 254, 0.5);
}

.video-overlay p {
  font-size: 1.5rem;
  font-weight: 300;
}

.features-container {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

.feature-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 15px;
  width: 200px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;

  transition: all 0.3s ease-in-out;
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.05);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  border-color: #00d2ff;
}

.feature-card .icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.feature-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 14px;
  opacity: 0.8;
}
.section-six {
  padding: 100px 0;
}
.marketingRow {
  margin-top: 60px;
  margin-bottom: 40px;
}
.dui {
  color: var(--12, #f8f6f6);
  font-size: 16px;
  font-weight: 400;

  padding-left: 40px;
  line-height: 1.6;
}
.quis-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}
.quis,
.quis-main {
  width: 60px;
  height: 60px;
  overflow: hidden;
  margin: 0;
}
.quis-bg-cir {
  width: 30px;
  height: 30px;
}
.quis-text-list {
  color: var(--1, #fff);
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}
.home-sec-one-video {
  width: 100%;
  height: 450px;
  object-fit: cover;
}
.home-sec-two-video2 {
  width: 90%;
  height: 450px;
  object-fit: cover;
  opacity: 1;
}
.video-container {
  position: relative;
}
#video-container {
  margin-top: 60px;
}
.blue-gardient5 {
  position: absolute;
  top: 0;
  left: -300px;
  z-index: -1;
}
.blue-gardient6 {
  position: absolute;
  bottom: 100px;
  right: -260px;
  z-index: -1;
}
.text-circle-main {
  position: relative;
  z-index: 1;
  width: 250px;
  height: 250px;
  margin: -6px auto;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -90px;
}
.text-circle {
  width: 250px;
  height: 250px;
  animation: rotation infinite 30s linear;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.bg-down-arrow {
  position: absolute;
}
/*-----------------------[ 12.Why Choose Us CSS ]------------------------*/
.whyChoose {
  text-align: start;
  max-width: 560px;
  padding-bottom: 20px;
  padding-left: 40px;
  line-height: 1.6;
}
.whyChooseSec {
  padding-top: 24px;
}
.excellent {
  display: flex;
  align-items: center;
}
.exce-box {
  padding: 40px;
  border-radius: 30px;
  background: linear-gradient(
    101deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  backdrop-filter: blur(2px);
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.excellent img {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
  object-fit: contain;
}
.exce-box-ciecl {
  width: 550px;
  height: 200px;
  border-radius: 550px;
  opacity: 0.5;
  filter: blur(100px);
  position: absolute;
  left: 50%;
  bottom: -70px;
  transform: translate(-50%);
  z-index: -1;
}
#exce-box1 {
  background: #00ffb1;
}
#exce-box2 {
  background: #ffa361;
}
#exce-box3 {
  background: #e10fcc;
}
.excellent p {
  color: var(--1, #fff);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.rnaip {
  color: var(--1, #fff);
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  padding-top: 15px;
}

.genai-banner {
  position: relative;
  height: 500px;
  background: url("assets/images/genai-robot-data.png") no-repeat center
    center/cover;
  overflow: hidden;
}

/* Optional subtle animation effect */
.genai-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  animation: pulseGlow 6s infinite alternate;
}

@keyframes pulseGlow {
  0% {
    background: rgba(0, 0, 0, 0.3);
  }
  100% {
    background: rgba(0, 0, 0, 0.6);
  }
}

/* Overlay for future text */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

/*-----------------------[ 13.Section Seven CSS ]------------------------*/

.people-sa {
  max-width: 650px;
  margin: 0 auto;
}
.sayAboutSlider {
  margin-top: 60px;
}

.slide-box {
  text-align: center;
  padding: 20px;
}
.beco {
  color: var(--1, #fff);
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  line-height: 48px;
  max-width: 1070px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 40px;
}
.hoea {
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mave {
  color: var(--12, #6f6f6f);
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}
.single-slick-arrow {
  width: 70px;
  height: 70px;

  background: none;
  border: none;
}
.single-slick-arrow.slick-prev {
  position: absolute;
  top: 110px;
  left: 0;
  z-index: 10;
  background: none;
  border: none;
  display: none;
}
.single-slick-arrow.slick-next {
  position: absolute;
  top: 110px;
  right: 0;
  z-index: 10;
  display: none;
  background: none;
  border: none;
}
.single-slick-arrow.slick-prev {
  left: -40px;
}
.single-slick-arrow.slick-next {
  right: -40px;
}
.slider-gardient-blue {
  position: absolute;
  left: 100px;
  top: -80px;
  max-width: 500px;
  z-index: -1;
}
.slider-gardient-blue2 {
  position: absolute;
  right: 0;
  top: 40px;
  z-index: -1;
}
.client-img1 {
  position: absolute;
  top: 50px;
  left: 280px;
  border-radius: 50%;
  animation: mover 4s infinite alternate;
}
.client-img2 {
  position: absolute;
  top: 250px;
  left: 30px;
  border-radius: 50%;
  animation: mover 3s infinite alternate;
}
.client-img3 {
  position: absolute;
  bottom: -10px;
  left: 110px;
  border-radius: 50%;
  animation: mover 2s infinite alternate;
}
.client-img4 {
  position: absolute;
  top: 50px;
  right: 280px;
  border-radius: 50%;
  animation: mover 4s infinite alternate;
}
.client-img5 {
  position: absolute;
  top: 250px;
  right: 30px;
  border-radius: 50%;
  animation: mover 3s infinite alternate;
}
.client-img6 {
  position: absolute;
  bottom: -10px;
  right: 110px;
  border-radius: 50%;
  animation: mover 2s infinite alternate;
}
@keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}
.curve-svg {
  width: 100%;
  margin-top: 100px;
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/*-----------------------[ 14.Pricing Page CSS ]------------------------*/
.section-eight {
  padding: 100px 0;
}
.tabs-btn {
  margin: 40px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.tabs-btn a {
  display: inline-block;
  border-radius: 10px;
  background: var(--11, #1a1a1a);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  max-width: 132px;
  width: 100%;
  padding: 18px 0;
  text-align: center;
}
.monthly {
  border-radius: 30px 0 0 30px;
}
.yearly {
  border-radius: 0 30px 30px 0;
}
.tabContainer {
  width: 100%;
  position: relative;
}
.Tabcondent {
  position: absolute;
  opacity: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition:
    opacity 0.3s ease-in-out,
    transform 0.6s ease-in-out;
  transform: translateY(20px);
}
.tabs-btn a.active {
  border-radius: 10px;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  color: #ffffff;
}
.Tabcondent.active {
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: translateY(0);
  position: relative;
  z-index: 1;
}
.plan-header {
  border-radius: 30px;
  background: linear-gradient(
    101deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  backdrop-filter: blur(2px);
  padding: 20px;
  position: relative;
  overflow: hidden;
  filter: blur();
}
.plain-greiesd-bg {
  width: 384px;
  height: 200px;
  border-radius: 384px;
  filter: blur(100px);
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translate(-50%);
  z-index: -1;
}
#price1 {
  background: #00ffb1;
}
#price2 {
  background: #ffa361;
}
#price3 {
  background: #e10fcc;
}
#price4 {
  background: #1bfefd;
}
#price5 {
  background: #88e64a;
}
#price6 {
  background: #5c33ff;
}
.plan-body {
  border-radius: 30px;
  background: var(--11, #1a1a1a);
  position: relative;
}
.plan-text {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 20px;
}
.plan-price {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: 64px;
  text-align: center;
}
.plan-price sub {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}
.basicLevelPro {
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  padding-top: 20px;
}
.plan-body ul {
  padding: 30px 30px 0 30px;
}
.plan-body ul li {
  color: var(--12, #6f6f6f);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  position: relative;
}
.plan-body ul li:before {
  content: url("../images/svg/check.svg");
  width: 100%;
  max-width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(
    146deg,
    rgba(255, 255, 255, 0.1) 20.09%,
    rgba(255, 255, 255, 0.05) 79.91%
  );
  backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 5;
}
.plan-body ul li::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  mix-blend-mode: hard-light;
  position: absolute;
  left: 7px;
  bottom: 10px;
  z-index: 0;
  filter: blur(5px);
}
.pricing-btn {
  padding: 10px 30px 30px 30px;
}
.pricing-btn a {
  width: 100%;
}
/*-----------------------[ 15.Section Eight CSS ]------------------------*/
.quest {
  text-align: center;
  max-width: 520px;
}
.seci {
  color: #fff;
  padding-top: 10px;
}
.accordion {
  --bs-accordion-bg: transparent;
  border: none;
}
.accordion-item {
  border: none;
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  box-shadow: none;
  border-bottom: none;
  padding-bottom: 20px;
}
.asd button {
  padding: 30px 0;
  color: var(--12, #e1e7ec);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  border-bottom: 2px solid #1a1a1a;
}
.faq .accordion-body {
  padding: 0 0 30px 0;
  border-bottom: 2px solid #1a1a1a;
  color: var(--12, #faebeb);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}
.accordion-button::after {
  background-image: url("../images/svg/accor-close.svg");
  --bs-accordion-btn-icon-width: 2rem;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("../images/svg/accor-open.svg");
}
.ref-demo {
  margin-top: 50px;
}

/*-----------------------[ 16.Section Subscribe CSS ]------------------------*/
/* Container & Typography */
.logo-section {
  padding: 50px 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  text-color: white;
}

.logo-section h2 {
  color: #003366;
  font-size: 28px;
  margin-bottom: 15px;
}

.disclaimer {
  font-size: 12px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 40px auto;
  line-height: 1.5;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 10px;
}

.logo-card {
  border: 1px solid #fcf6f6;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  height: 100px;
}

.logo-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.settitle {
  color: #dd4343;
  text-align: center;
  font-size: 18px;
}
.set {
  color: rgb(248, 248, 245);
  justify-content: center;

  align-items: center;
}
.text1 {
  color: #d0d0d0;
  font-size: 12px;
  justify-content: center;

  align-items: center;
}

.section-subscribe {
  padding: 90px 0;
}
.blurek {
  position: absolute;
  top: -390px;
  z-index: -1;
}
.blurek2 {
  position: absolute;
  bottom: -150px;
  right: 0;
  z-index: -1;
}
.cretive-box {
  background-image: url("../images/home-page/Pattern.png");
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 30px;
  background-color: rgb(217 217 217 / 10%);
  backdrop-filter: blur(15px);
  padding: 100px 0;
  overflow: hidden;
}
.robot {
  position: absolute;
  top: -50px;
  right: 70px;
  z-index: 1;
  border-radius: 50%;
  animation: mover 2s infinite alternate;
}

.subs-sec {
  background-image: url("../images/svg/sub-curve.svg");
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  margin-bottom: 100px;
  padding-bottom: 70px;
  padding-top: 40px;
}
.sub-scjsd-inp-main {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 40px 0 30px 0;
}
.sub-scjsd-inp-main input {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  width: 100%;
  background: transparent;
  outline: none;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 2px solid #1a1a1a;
  height: 50px;
}
.sub-scjsd-inp-main input::placeholder {
  color: var(--12, #6f6f6f);
}
.subscribeBtn {
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
}
.footer-checkbox-input + .footer-chec-txt {
  position: relative;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-checkbox-input {
  position: absolute;
  opacity: 0;
}
.footer-chec-txt {
  color: var(--12, #6f6f6f);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.footer-chec-txt a {
  color: var(--1, #fff);
  font-weight: 500;
}
.footer-checkbox-input:checked + .footer-chec-txt:before {
  background: #02000b;
  border: 2px solid #6f6f6f;
}
.footer-checkbox-input + .footer-chec-txt:before {
  content: "";
  display: inline-block;
  vertical-align: text-top;
  width: 18px;
  height: 18px;
  border: 2px solid #6f6f6f;
  border-radius: 5px;
}
.footer-checkbox-input:checked + .footer-chec-txt:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  background: #fff;
  width: 2px;
  height: 2px;
  box-shadow:
    2px 0 0 white,
    4px 0 0 white,
    4px -2px 0 white,
    4px -4px 0 white,
    4px -6px 0 white,
    4px -8px 0 white;
  transform: rotate(45deg);
}
.faasd {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  position: relative;
}
.fantasy1 {
  max-width: 100%;
  border-radius: 30px;
}
.fantasy2 {
  position: absolute;
  bottom: 40px;
  left: -50px;
  border-radius: 50%;
  animation: mover 2s infinite alternate;
}

/*---------------------------------------------------------------*/

.site-footer {
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 40px 20px 20px 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-heading {
  color: #f1c40f;

  font-size: 18px;
  text-align: center;
}

.footer-links {
  font-size: 14px;
  color: #f2eded;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  margin-bottom: 5px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.footer-links a {
  color: #f2eded;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-divider {
  border: 0;
  border-top: 1px solid #333;
}

.area-text {
  font-size: 14px;
  color: #f2eded;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  margin-top: 0%;
  text-transform: uppercase;
  margin-bottom: 5px;
  line-height: 1.7;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.designed-by {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
.box-footer {
  border-radius: 20px;
  background: var(--11, #1a1a1a);
  padding: 20px;
  width: 100%;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.nowrap {
  white-space: nowrap;
}
.form-container {
  width: 350px;
  margin: 20px auto;

  padding: 20px;
  border: 1px solid #0a0a0a;
  border-radius: 8px;
  background: #0b0b0b;
}

.form-container h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-container label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-container input,
.form-container select {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #171717;
  border-radius: 4px;
}

.form-container button {
  width: 100%;
  padding: 10px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-container button:hover {
  background: #100f0f;
}

/*-----------------------[ 17.Section Blog CSS ]------------------------*/
.blog-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}
.blog-btn {
  display: inline-block;
  padding: 10px 20px;

  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-btn:hover {
  background: linear-gradient(
    270deg,
    rgba(0, 255, 177, 0.75) 0%,
    rgba(0, 255, 177, 0) 49.65%
  );
  transform: scale(1.05);
}

.section-blog {
  padding: 100px 0;
}
.blog-img {
  max-width: 100%;
  border-radius: 20px;
}
.blog-box-col:hover .blog-img {
  filter: blur(1px);
}
.blog-img-box {
  position: relative;
}
.date-blog {
  padding: 12px 15px;
  background: var(--3, #5c33ff);
  color: var(--1, #fff);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  position: absolute;
  bottom: -22px;
  left: 30px;
  transition: bottom 0.3s ease;
}
.blog-box-col:hover .date-blog {
  left: 0;
  bottom: 0px;
  width: 100%;
  border-radius: 0 0 30px 30px;
  text-align: center;
}
.eque {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--1, #fff);
  font-size: 23px;
  font-weight: 500;
  line-height: 32px;
  margin: 50px 0 15px 0;
  transition: all 0.3s ease;
}
.blog-box-col:hover .eque {
  color: #5c33ff;
}
.ilisis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--12, #6f6f6f);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}
.blog-box-col:hover .ilisis {
  color: #fff;
}
.home-blog-row {
  margin-top: 60px;
}
.blog-gardient {
  position: absolute;
  top: -100px;
  z-index: -1;
  max-width: 100%;
}
/*-----------------------[ 18.Footer CSS ]------------------------*/
/* Footer Main Layout */
.footer-main {
  background-color: #0b0b0c;
  padding: 80px 0 30px 0;
  overflow: hidden;
}

.footer-main .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.footer-col-fir,
.footer-col-sec {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  margin-bottom: 30px;
}

.box-footer {
  padding-left: 15px;
}

.resour {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

.foot-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.foot-links li {
  margin-bottom: 15px;
}

.foot-links li a {
  color: #a0a0a5;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
  display: inline-block;
  text-transform: uppercase;
}

.foot-links li a:hover {
  color: #00ffb1;
}

.footer-col-fir .djks {
  position: absolute;
  left: -15px;
  top: 0;
}

@media (max-width: 991px) {
  .footer-col-fir,
  .footer-col-sec {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .footer-col-fir .djks {
    display: none;
  }

  .box-footer {
    padding-left: 0;
  }
}
.advice {
  text-align: left;
  font-size: 36px;
  line-height: 48px;
  max-width: 500px;
}
.dsos {
  max-width: 80%;
  max-height: auto;
}
.ref-demo {
  margin-top: 130px;
}
.footer-logo {
  position: absolute;
  left: 0;
  top: 4px;
  z-index: -1;
  max-width: 100%;
}
.box-footer {
  border-radius: 20px;
  background: var(--11, #1a1a1a);
  padding: 20px;
  width: 100%;
}

.resour {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-bottom: 25px;
  text-transform: uppercase;
  text-align: center;
}
.foot-links li a {
  color: var(--12, #6f6f6f);
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
  line-height: 24px;
  font-family: "Poppins", sans-serif;
}
.foot-links li a:hover {
  color: #fff;
  padding-left: 5px;
}
.foot-links li {
  position: relative;
  width: 130%;
  padding: 2% 70px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}
.foot-links li::before {
  width: 100%;
  max-width: 36px;
  height: 36px;
  backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 5;
  border-radius: 50%;
  background: linear-gradient(
    146deg,
    rgba(255, 255, 255, 0.1) 20.09%,
    rgba(255, 255, 255, 0.05) 79.91%
  );
}
.foot-links li::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  mix-blend-mode: hard-light;
  position: absolute;
  left: 7px;
  bottom: 10px;
  z-index: 0;
  filter: blur(5px);
}
.footer-col-fir,
.footer-col-sec {
  padding-top: 0 !important;
  padding-bottom: 60px;
  padding-left: 12px;
  padding-right: 12px;
}
.footer-col-fir {
  position: relative;
  overflow: hidden;
}
.footer-col-fir::after {
  content: "";
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 80px;
  background: #1a1a1a;
  z-index: -1;
}
.djks {
  position: absolute;
  right: 80px;
  animation: moveTopToBottom 8s infinite linear alternate;
}
@keyframes moveTopToBottom {
  0% {
    transform: translateY(-70px);
  }
  100% {
    transform: translateY(310px);
  }
}
.footer-col-sec {
  display: flex;
  gap: 30px;
  justify-content: center;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}
.coprights-main {
  border-top: 2px solid #1a1a1a;
  position: relative;
}
.das {
  position: absolute;
  top: -2px;
  animation: moveLeftToRight 10s infinite linear alternate;
  width: 100%;
}
@keyframes moveLeftToRight {
  0% {
    transform: translateX(-950px);
  }
  100% {
    transform: translateX(950px);
  }
}
.rights-reserved {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 0px !important;
}
.rights-reserved h2 {
  color: var(--12, #6f6f6f);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}
.rights-reserved a {
  color: var(--1, #fff);
  font-weight: 500;
}
.footer-media {
  display: flex;
  align-items: center;
  gap: 25px;
}
.footer-media a {
  color: var(--12, #6f6f6f);
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-media a:hover {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7485%)
    hue-rotate(322deg) brightness(101%) contrast(100%);
}
.footer-gefdo {
  position: absolute;
  bottom: 0;
  right: -1000px;
  z-index: -1;
  width: 100%;
  max-width: 320px;
}
.feature-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 400;
  max-width: 300px;
  height: 300px;
  line-height: 29px;
  margin-top: 20px;
  padding-top: 0;
  position: relative;
}
.sec-heding.advice {
  margin-top: 0;
  padding-top: 0;
  line-height: 1.2;
  padding-left: 30px;
}

.footer-col-fir,
.col-left-side {
  padding-top: 0 !important;
  margin-top: 0 !important;
  max-width: 500px;
}

.resour {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.nowrap {
  white-space: nowrap;
}
.inforow {
  padding-top: 100px !important;
  padding-bottom: 85px;
  padding-left: 12px;
  padding-right: 12px;
  color: aliceblue;
  margin-top: 0 !important;
  z-index: 10;
  font-size: 24px;
  font-weight: 500;
  position: relative;
  display: block;
  align-items: flex-start;
  max-width: 300px;
  height: auto;
  line-height: 1.5;
  margin-top: 15px;
}

.contact-row i {
  font-size: 20px;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 25px;
  text-align: center;
}

.contact-row span,
.contact-row address {
  color: #6f6f6f;
  font-size: 15px;
  line-height: 1.4;
}

.contact-info-section {
  padding: 70px 30px;
  background: #1a1a1a;
  border-top: 2px solid #333;
}

/*-----------------------[ 19.Form CSS ]------------------------*/
.modal-dialog {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 840px;
}
.modal-content {
  background: rgba(2, 0, 11, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
}
.form-close-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  filter: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(3%)
    hue-rotate(144deg) brightness(102%) contrast(102%);
}
.btn-close:focus {
  box-shadow: none;
  z-index: 100;
}
.form-modal-body {
  padding-top: 35px;
}
.container-demo {
  position: relative;
  width: 800px;
  height: 500px;
  overflow: hidden;
}
.container-demo .user {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
.container-demo .user .imgBx {
  position: relative;
  width: 50%;
  height: 100%;
  transition: 0.5s;
}
.container-demo .user .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.container-demo .user .formBx {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  transition: 0.5s;
}
.container-demo .user .formBx form h2 {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}
.container-demo .user .formBx form input {
  position: relative;
  width: 100%;
  padding: 12px;
  background: #f5f5f5;
  color: #333;
  border: none;
  outline: none;
  box-shadow: none;
  margin: 10px 0 15px 0;
  font-size: 16px;
  font-weight: 400;
}
.container-demo .user .formBx form .signup {
  position: relative;
  margin-top: 20px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #6f6f6f;
  text-transform: uppercase;
  font-weight: 500;
}
.container-demo .user .formBx form .signup a {
  font-weight: 600;
  text-decoration: none;
  color: #fff;
}
.container-demo .signupBx {
  pointer-events: none;
}
.container-demo.active .signupBx {
  pointer-events: initial;
}
.container-demo .signupBx .formBx {
  left: 100%;
}
.container-demo.active .signupBx .formBx {
  left: 0;
}
.container-demo .signupBx .imgBx {
  left: -100%;
}
.container-demo.active .signupBx .imgBx {
  left: 0%;
}
.container-demo .signinBx .formBx {
  left: 0%;
}
.container-demo.active .signinBx .formBx {
  left: 100%;
}
.container-demo .signinBx .imgBx {
  left: 0%;
}
.container-demo.active .signinBx .imgBx {
  left: -100%;
}
/*-----------------------[ 20.Bottom top button CSS ]------------------------*/
button.bottom-top-button {
  position: fixed;
  right: 30px;
  bottom: 20px;
  z-index: 999;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 30px;
  transform: translateY(0%);
  transition: ease-out 200ms;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  padding: 0;
  border-radius: 50%;
}
.slick-dots li button {
  font-size: 0;
}
.slick-dots li button:before {
  content: "";
  font-size: 20px;
  color: #fff;
}

/*-----------------------[ 21.Features Page CSS ]------------------------*/
.stie {
  padding: 40px 0;
  border-bottom: 2px solid #1a1a1a;
}
.blue-gardient8sa {
  position: absolute;
  top: 0;
  z-index: -1;
  max-width: 100%;
}
.blue-gardient9sa {
  position: absolute;
  top: -100px;
  right: 0;
  z-index: -1;
}
.faq-pag-sec {
  padding: 100px 0;
}
.ante {
  max-width: 440px;
  text-align: left;
  margin: 0;
}
.faq-img {
  max-width: 100%;
  border-radius: 20px;
  margin-top: 40px;
}
.faq-page-row {
  margin-top: 80px;
}
.blog-page-row {
  margin-top: 60px;
  gap: 40px 0;
}
/*-----------------------[ 22.Contact Page CSS ]------------------------*/
.numb-con {
  color: var(--4, #00ffb1);
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
  display: block;
}
.shoot-fanta {
  border-radius: 30px;
  max-width: 100%;
  height: 100%;
  max-height: 760px;
  animation: floatImage 4s ease-in-out infinite;
}
@keyframes floatImage {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

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

@media (max-width: 991px) {
  .shoot-fanta {
    display: block !important;
    width: 90%;
    max-width: 300px;
    height: auto;
    margin: 20px auto;
  }
}
.form-row {
  padding-top: 100px;
}
.from-main {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 30px;
  background: linear-gradient(90deg, #1f0487 0%, #006b4b4d 100%);
  backdrop-filter: blur(15px);
  padding: 40px;
  overflow: hidden;
}
.lkkfs {
  max-width: 500px;
  padding-bottom: 30px;
}
.conta-input-main,
textarea {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  padding: 15px 20px;
  background: #e2e0e9;
  border-radius: 10px;
  border: none;
  width: 100%;
  outline: none;
  margin-bottom: 25px;
}
textarea {
  resize: none;
  height: 180px;
}
.submit-btn a {
  width: 100%;
}
.askjm-sa {
  position: absolute;
  bottom: 50px;
  left: -150px;
  z-index: -1;
  max-width: 450px;
}
/*-----------------------[ 23.Blog Detail Page CSS ]------------------------*/
.blog-main-date {
  color: var(--12, #6f6f6f);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  padding-top: 20px;
}
.blog-singl-img {
  margin: 60px 0;
  max-width: 100%;
}
.signgle-blog-row {
  justify-content: center;
}
.sodales {
  color: #6f6f6f;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  padding-bottom: 10px;
}
.cott-main {
  background: var(--5, #171b22);
  padding: 40px;
  margin: 30px auto;
  border-left: 10px solid #5c33ff;
}
.cott-main p {
  color: var(--1, #fff);
  font-size: 25px;
  font-style: italic;
  font-weight: 400;
  line-height: 36px;
  padding-top: 20px;
}
.wildlife-img-group-sub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 30px 0;
}
.wildlife-img-group img {
  max-width: 100%;
}
.blog-singl-img4 {
  margin-bottom: 30px;
}
.approach {
  color: var(--1, #fff);
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  margin: 30px auto 15px auto;
}
.Singleblog-media {
  margin-top: 30px;
  justify-content: center;
}
.Singleblog-media a {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1577%)
    hue-rotate(136deg) brightness(109%) contrast(100%);
}
.Singleblog-media a:hover {
  filter: brightness(0) saturate(100%) invert(27%) sepia(87%) saturate(6826%)
    hue-rotate(252deg) brightness(101%) contrast(101%);
}
.diamond-nextbtn-head {
  display: flex;
  justify-content: space-between;
  border-top: 2px solid rgba(168, 169, 173, 0.2);
  border-bottom: 2px solid rgba(168, 169, 173, 0.2);
  margin-top: 50px;
}
.diamond-next-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  cursor: pointer;
}
.diamond-next-btn h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
}
.leave-input {
  display: flex;
  align-items: center;
  gap: 30px;
}
.form-siglblog {
  margin-top: 60px;
  position: relative;
}
/*-----------------------[ 24. 404Page CSS ]------------------------*/
.error-page-main {
  text-align: center;
  position: relative;
  padding-bottom: 30px;
}
.error-img1 {
  width: 100%;
  max-width: 500px;
}
.error-img2 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 400px;
  animation: floating 3s infinite ease-in-out;
}
@keyframes floating {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: -10px;
  }
  100% {
    margin-top: 0;
  }
}
/*-----------------------[ 25.Coming Soon CSS ]------------------------*/
.coming-soon-body {
  width: 100%;
  display: block;
  overflow: hidden;
  position: fixed;
  left: 0px;
  right: 0px;
}
.count-down-col {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.coming-soon-section {
  min-height: 90vh;
}
.count-down {
  display: flex;
  gap: 55px;
  padding: 10px 0;
}
.count-down .box {
  padding: 5px;
  text-align: center;
}
.count-down .box h3 {
  color: var(--5, #fff);
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
}
.count-down .box span {
  color: var(--8, #a8a9ad);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}
.coming-soon-box {
  padding: 10px 20px;
  color: var(--5, #fff);
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  max-width: 280px;
  margin: 40px 0;
}
.our-website {
  color: var(--5, #fff);
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
  margin-bottom: 50px;
}
.notified {
  color: var(--5, #fff);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}
.coming-soon-subscribe {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin-top: 20px;
}
.coming-soon-subscribe input {
  padding: 15px;
}
.coming-soon-subscribe .generate-btn {
  width: 100%;
  max-width: 160px;
  margin-right: 0;
}
#rights-reserved {
  position: absolute;
  bottom: 30px;
}
/*-----------------------[ 22.custom-cursor ]------------------------*/
.wrapper {
  position: relative;
}
.custom-cursor {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #5c33ff;
  pointer-events: none;
  z-index: 9999;
  display: none;
}
.custom-cursor img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cursor {
  cursor: none;
}

.footer-section {
  color: #fff;
  padding: 20px 20px;
}

.footer-section .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.footer-section .col {
  flex: 1 1 30%;
  min-width: 280px;
}

.footer-section h2,
.footer-section h3 {
  color: #00ffb1;
  margin-bottom: 15px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.btn-demo,
.btn-submit {
  display: inline-block;
  padding: 10px 20px;
  background: #ff3333;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 10px;
}

.demo-form {
  margin-top: 30px;
}

.demo-form form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-form input,
.demo-form select {
  padding: 10px;
  border-radius: 5px;
  border: none;
}

/*----------------------------------------about us-------------------------------*/

.holo-counter {
  background: #0a0f1c;

  text-align: center;
  color: #fff;

  font-family: "Arial", sans-serif;
}
.heading {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #00e0ff;
  text-shadow: 0 0 15px #00e0ff;
}
.counter-row {
  display: flex;
  justify-content: center;
  gap: 60px;
}
.counter-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 224, 255, 0.4);
  border-radius: 15px;
  padding: 20px 30px;
  width: 500px;
  height: auto;
  box-shadow: 0 0 25px rgba(0, 224, 255, 0.6);
}
.counter {
  font-size: 2.5rem;
  font-weight: bold;
  color: #00e0ff;
  text-shadow:
    0 0 20px #00e0ff,
    0 0 40px #7d00ff;
}
.counter-box p {
  margin-top: 10px;
  font-size: 1rem;
  color: #ccc;
}
.contain {
  margin: 0 auto;
  padding: 0 20px;
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.texting {
  flex: 1;
  text-align: left;
}
.subtitle1 {
  color: #8f10e3;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: left;
}
.main-title1 {
  color: #00e0ff;
  text-shadow:
    0 0 20px #00e0ff,
    0 0 40px #7d00ff;
  font-size: 48px;
  font-weight: 800;
  margin: 0;
  text-align: left;
}
.texting1 {
  flex: 1.9;
  padding-top: 10px;
  text-align: left;
}
.texting1 p {
  color: #ceeef3;

  font-size: 20px;
  line-height: 1.6;
  margin: 0;
  text-align: justify;
}
@media (max-width: 768px) {
  .head {
    flex-direction: column;
    gap: 20px;
  }
  .main-title1 {
    font-size: 32px;
  }
}
/*robo-----*/
#robotBox {
  justify-content: right;
}

.robot-assembly-container {
  position: relative;
  width: 140%;
  height: 600px;
  margin-top: -70px;
  background-color:
    0 0 20px #00e0ff,
    0 0 40px #7d00ff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.robot-part {
  position: absolute;
  opacity: 0;
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.robot-part img {
  width: 500px;
  display: block;
  object-fit: contain;
}

.robot-part p {
  position: absolute;
  width: 150px;
  background: #e74c3c;
  color: white;
  font-size: 11px;
  padding: 5px;
  border-radius: 4px;
  opacity: 0;
  transition: 0.5s;
}

#head {
  top: 10%;
  left: 10%;
  transform: rotate(-20deg);
}
#chest {
  top: 40%;
  left: 80%;
  transform: scale(1.5);
}
#left-arm {
  top: 80%;
  transform: rotate(45deg);
}
#right-arm {
  top: 10%;
  right: 15%;
  transform: scaleX(-1) rotate(-45deg);
}
#left-leg {
  top: 80%;
  transform: translateY(50px);
}
#right-leg {
  top: 70%;
  transform: rotate(15deg);
}

.start-assembly #chest {
  opacity: 1;
  top: 230px;
  left: calc(50% - 65px);
  transform: scale(1);
  animation: glow 2s infinite 1s;
}

.start-assembly #head {
  opacity: 1;
  top: 150px;
  left: calc(50% - 65px);
  transform: rotate(0deg);
  transition-delay: 0.8s;
}

.start-assembly #left-arm {
  opacity: 1;
  top: 270px;
  left: calc(50% - 0.9px);
  transform: rotate(0deg);
  transition-delay: 1.5s;
}

.start-assembly #right-arm {
  opacity: 1;
  top: 270px;
  right: calc(50% + 123px);
  transform: scaleX(-1) rotate(0deg);
  transition-delay: 2s;
  opacity: 1;
  margin-right: -480px;
}

.start-assembly #left-leg {
  opacity: 1;
  top: 350px;
  left: calc(50% - 90px);
  transform: scaleX(-1) rotate(0deg);
  transition-delay: 2.6s;
}

.start-assembly #right-leg {
  opacity: 1;
  top: 350px;
  right: calc(50% + 0.05px);
  transform: rotate(0);
  transition-delay: 3.2s;
  margin-right: -450px;
}

.start-assembly .robot-part p {
  opacity: 1;
  transition-delay: 4s;
}

@keyframes glow {
  50% {
    filter: drop-shadow(0 0 10px rgba(231, 76, 60, 0.4));
  }
}

.trigger-btn {
  padding: 10px 20px;
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  margin: 20px;
}

/* --- MESSAGES (p) COMPLETE CSS --- */

.robot-part p {
  position: fixed;
  left: 10px;
  width: 450px;
  opacity: 0;
  transform: translateX(-150px);

  /* Look & Feel */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-left: 5px solid #00d4ff;
  padding: 15px 20px;
  color: #ffffff;
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
  pointer-events: none;
}

/* 1. Vertical Stacking */
#chest p {
  top: 120px;
  margin-left: -600px;
}
#head p {
  top: 100px;
  margin-left: -600px;
}
#left-arm p {
  top: 120px;
  margin-left: -600px;
}
#right-arm p {
  top: 120px;
  margin-left: 500px;
}
#left-leg p {
  top: 520px;
  margin-left: 500px;
}
#right-leg p {
  top: 620px;
  margin-left: -600px;
}

/* 2. Show Messages when Animation Starts (Sequential Delays) */
.start-assembly .robot-part p {
  opacity: 1;
  transform: translateX(0);
}
#right-arm p,
#left-leg p {
  transform: scaleX(-1) translateX(0);
}

.start-assembly #chest p {
  transition-delay: 0.8s;
}

.start-assembly #head p {
  transition-delay: 0.9s;
}

.start-assembly #left-arm p {
  transition-delay: 1.5s;
}

.start-assembly #right-arm p {
  transition-delay: 2s;
}

.start-assembly #left-leg p {
  transition-delay: 2.6s;
}

.start-assembly #right-leg p {
  transition-delay: 2.9s;
}
#final-para {
  position: absolute;
  top: 170px;
  left: 80px;
  width: 550px;
  display: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.3s ease-in;
  color: #e8fafc;

  font-size: small;
  font-weight: 600;
  margin: 0;
  text-align: left;

  background: linear-gradient(90deg, #000000 0%, #010102 100%);

  border-left: 4px solid #00d4ff;
  padding: 20px;

  border-radius: 8px;
}

#final-para.visible {
  display: block !important;
  opacity: 1 !important;
}

.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.home-sec-two-video2 {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

.video-overlay-content {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  height: 70%;
  z-index: 10;

  display: flex;
  justify-content: center;
  align-items: center;
}

.text-overlay {
  font-weight: bolder;
  max-height: 100%;
  max-width: 80%;
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 71px;
}

.text-overlay p {
  font-weight: bold;
  font-size: 19px;
  line-height: 1.6;
  margin: 0;
}

.glass-container {
  display: flex;
  align-items: center;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

.glass-card {
  flex: 1;
  padding: 40px;
  color: white;
  font-weight: bold;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.glass-card h2 {
  color: #00d4ff;
  margin-bottom: 20px;
}

.video-side {
  flex: 1;
}

.side-video {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
}

/* Mobile Responsive */
@media (max-width: 992px) {
  .glass-container {
    flex-direction: column;
    text-align: center;
  }
}
.glass-card {
  font-family: "Poppins", sans-serif;
}
.hero-buttons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.book-btn {
  padding-bottom: 30px;
  padding-top: 20px;
  text-align: center;
  align-content: center;
  text-decoration: none;
  background: #00d4ff;
  color: #000;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.3s;
}

.book-btn:hover {
  background: #00b8df;
  transform: translateY(-2px);
}

.enroll-btn {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: bold;
  cursor: not-allowed;
  opacity: 0.7;
}
.explore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
  padding-top: 20px;
  text-align: center;
  align-content: center;
  text-decoration: none;
  color: #fff;
  padding-top: 20px;
  padding: 14px 32px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);

  font-weight: 600;
  font-size: 18px;

  transition: 0.3s ease;
}

.explore-btn:hover {
  background: #fff;
  color: #000;
  transform: translateY(-3px);
}
.para {
  font-size: medium;
  color: #ccc;
  padding-top: 10px;
  padding-bottom: 5px;
}
.about-section {
  width: 100%;
  margin: 70px auto;

  display: grid;
  grid-template-columns: 200px 2fr 150px;

  background: #45107e;
  border-radius: 10px;
  overflow: hidden;
}

/* Left Side */
.about-left {
  background: #3c0258;

  display: flex;
  align-items: center;
  justify-content: center;
}

.about-left h2 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-size: 55px;
  font-weight: bold;
  color: #f7f1f1;
}

/* Center Content */
.about-content {
  background: #070707;
  padding: 60px 50px;
}

.about-content h3 {
  font-size: 38px;
  margin-bottom: 25px;
  color: #f8f3f3;
}

.about-content p {
  font-size: 17px;
  line-height: 1.9;
  color: #fbf2f2;
  margin-bottom: 20px;
}

/* Right Color Box */
.about-right {
  background-color: #00e0ff;
  background:
    0 0 20px #00e0ff,
    0 0 40px #7d00ff;
}

.review-section {
  width: 100%;
  padding: 80px 7%;
  background: #0d2a4a;
}

.review-section h2 {
  text-align: center;
  color: #fff;
  font-size: 50px;
  margin-bottom: 50px;
}

.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.review-slider {
  display: flex;
  gap: 25px;

  overflow-x: auto;
  scroll-behavior: smooth;

  width: 100%;
  padding: 10px;

  scrollbar-width: none;
}

.review-slider::-webkit-scrollbar {
  display: none;
}

/* Cards */
.review-card {
  width: 320px;
  height: 250px;

  background: #8173a7;
  border-radius: 15px;

  padding: 25px;

  flex-shrink: 0;
}

/* Top Section */
.review-top {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.profile {
  min-width: 55px;
  min-height: 55px;

  border-radius: 50%;
  background: #8b5cf6;
  color: #fff;
  font-size: 24px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.review-info h3 {
  font-size: 22px;
  margin-bottom: 5px;
}

.review-info span {
  color: #777;
  font-size: 14px;
}

.google-icon {
  margin-left: auto;
  font-size: 26px;
  color: #4285f4;
}

/* Stars */
.stars {
  color: gold;
  font-size: 20px;
  margin-bottom: 18px;
}

.review-card p {
  color: #fdfdfd;
  line-height: 1.7;
  font-size: 16px;
}

/* Buttons */
.slide-btn {
  position: absolute;
  z-index: 10;

  width: 55px;
  height: 55px;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.2);
  color: #fff;

  font-size: 30px;
  cursor: pointer;

  backdrop-filter: blur(8px);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.slide-btn:hover {
  background: #00d4ff;
  color: #000;
}
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal sliding */
}

/*---------------------------contact us------------------*/
.hero1-banner1 {
  background: linear-gradient(to right, #f8f4ff, #ffffff);
  border-bottom: 2px solid #00e5ff;
  padding: 55px 10%;
}

.hero1-container1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.hero1-text1 {
  flex: 1 1 50%;
  text-align: center;
}

.hero1-text1 h1 {
  font-size: 2.4rem;
  font-weight: 800;
  color: #333;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero1-text1 p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 20px;
}
/* Main wrapper container */
.contactphotos-main {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contactphotos {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(81, 45, 168, 0.2);
}

.contactphotos img {
  width: 70px;
  height: auto;
  object-fit: contain;
}

.img-bg-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65px;
  height: 65px;
  border-radius: 50%;
  z-index: 1;
}

.gendseratio {
  font-size: 30px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 600;
}

.numb-con {
  display: block;
  text-align: center;
  color: #e0d4ff;
  text-decoration: none;
  font-size: 20px;
  transition: all 0.3s ease;
}

.numb-con:hover {
  color: #ffffff;
  text-decoration: underline;
}

.breadcrumb {
  font-size: 1rem;
  color: #888;
  gap: 4px;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.breadcrumb a {
  text-decoration: none;
  color: #6c5ce7;
  font-weight: 600;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  z-index: 11;
}

.breadcrumb a:hover {
  color: #00e5ff;
  text-decoration: underline;
}

.img12 {
  max-width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.course-item12 {
  border-radius: 54px;
  padding: 19px 16px;
  width: 250px;
  line-height: 110%;
  margin-top: 1px;
  background: rgb(236, 220, 235);
}
.sidebar-box2s {
  background: #ffffff;
  border: 15px solid #bcb8d8;
  border-radius: 50px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 20px;
  width: 320px;
  height: 2260px;
}

.sidebar-box2s h3 {
  font-size: 2.4 rem;
  color: #1a1a1a;
  border-bottom: 2px solid #6c5ce7;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.sidebar-box2s ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.sidebar-box2s li {
  font-size: 2.4 rem;
  line-height: 110%;
  padding: 15px 0;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 12px;
}

.sidebar-box2s a {
  text-decoration: none;
  color: #4b5563;
  font-weight: 500;
  display: block;
  transition: all 0.3s ease;
}

.sidebar-box2s a:hover {
  color: #6c5ce7;
  padding-left: 8px;
}

.benefit-list {
  list-style: none;
  padding: 0;
}

.benefit-list li::before {
  content: " ➣ ";
  color: #aaa2e6;
  margin-right: 10px;
  font-weight: bold;
}
[data-aos] {
  pointer-events: none;
}

[data-aos].aos-animate {
  pointer-events: auto;
  transition-property: transform, opacity;
}
.content-wrapper {
  padding-left: 20px;
  margin-left: 20px;
  margin-top: 20px;
}
.content-wrapper1 {
  padding-left: 20px;
  margin-left: 20px;
  padding-top: 0;
  margin-top: 30px !important;
  padding-top: 0 !important;
}
.content-wrapper1 p {
  margin-bottom: 15px;
  line-height: 1.8;
  text-align: center;
}
.content-wrapper1 h2 {
  margin-top: 20px;
}
/*----------------sectiontwio--------------*/

.sectwodata {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 50px 20px;
  background-color: #070707;
  max-width: 1200px;
  margin: 0 auto;
}

.sectwo-title {
  text-align: center;
  color: #f4f0f0;
  font-size: 26px;
  margin-bottom: 40px;
  line-height: 1.4;
}

.sectwo {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.sectwo-cards {
  flex: 1;
  min-width: 340px;
  background-color: #f3f0ff;
  border-radius: 12px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding-left: 1px;
  height: 590px;
}

.sectwo-cards .sectwo-cardtitle {
  color: #3f1dcb;
  font-size: 18px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.4;
}

.sectwo-cards .sectwopara {
  color: #555555;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 25px;
}

.innersecttwobox {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 15px;
}

.inner-title {
  color: #0a0909;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 15px;
}

.sectwo-highlighted {
  background-color: #512da8;
  box-shadow: 0 10px 20px rgba(81, 45, 168, 0.2);
  width: 340px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sectwo-highlighted .sectitle {
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.4;
}

.sectwo-highlighted .sectwopara {
  color: #e0d4ff;
}

.sectwo-highlighted .innersecttwobox {
  background-color: rgba(255, 255, 255, 0.1);
}

.sectwo-highlighted .inner-title {
  color: #ffffff;
}

.sectwo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sectwo-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333333;
  line-height: 1.4;
}

.sectwo-highlighted .sectwo-list li {
  color: #ffffff;
}

.sectwo-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -2px;
  width: 18px;
  height: 18px;
  background-color: #512da8;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sectwo-highlighted.sectwo-list li::before {
  background-color: #ffffff;
  color: #512da8;
}
/*-----------sectionthree-----*/

.faq-section {
  font-family: "Segoe UI", sans-serif;
  padding: 60px 20px;
  background-color: #0a0404;
  max-width: 900px;
  margin: 0 auto;
}

.faq-title {
  text-align: center;
  color: #f9f5f5;
  font-size: 24px;
  margin-bottom: 40px;
  font-weight: 600;
}

.faq-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(90deg, #352671 0%, #014530 100%);
  transition: all 0.3s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary {
  list-style: none;
}

.faq-question {
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #f5f1f1;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.faq-arrow {
  font-size: 16px;
  transition: transform 0.2s;
}

.faq-answer {
  padding: 0 24px 18px 24px;
  font-size: 14px;
  line-height: 1.6;
}

.faq-answer p {
  margin: 0;
}

/* ------------------------------------------------------------- */

.faq-item[open] {
  background-color: #000000;
  border-color: #512da8;
}

.faq-item[open] .faq-question {
  color: #ffffff;
}

.faq-item[open] .faq-answer {
  color: #f5f4f7;
}

/*--------------------last--------------*/

.cta-section {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #512da8;
  padding: 60px 20px;
  text-align: center;
  color: #ffffff;
}

.cta-container {
  max-width: 800px;
  margin: 0 auto;
}

.cta-title {
  font-size: 36px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.cta-subtitle {
  font-size: 14px;
  color: #e0d4ff;
  margin-top: 0;
  margin-bottom: 30px;
  font-weight: 400;
}

.btn-area {
  display: flex;
  justify-content: center;
}

.header-btn1 {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  color: #512da8;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 8px 8px 24px;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.header-btn1 .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #512da8;
  color: #ffffff;
  border-radius: 50%;
  margin-left: 15px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.header-btn1:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.header-btn1:hover .btn-icon {
  background-color: #3f1dcb;
}
.illustration-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    padding: 20px;
    height: auto;
    overflow: hidden;
  }

  .hero-text {
    width: 100%;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 28px;
    line-height: 1.3;
  }

  .hero-text p {
    font-size: 14px;
    line-height: 1.6;
  }

  .hero-image {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .hero-image img {
    width: 85%;
    height: auto;
  }
}
@media (max-width: 768px) {
  .features {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .feature-card {
    width: 90%;
    height: auto;
  }
}
@media (max-width: 768px) {
  .features-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .feature-card {
    width: 90%;
    height: auto;
  }
}

@media (max-width: 575px) {
  #video-container {
    height: auto !important;
    min-height: 80vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  #video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transform: none;
  }

  .video-overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 20px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.65);
    box-sizing: border-box;
  }

  .text-overlay {
    width: 100% !important;
    max-height: none !important;
    text-align: center;
  }

  .text-overlay p {
    font-size: 15px !important;
    color: #ffffff;
    margin: -26px -114px 34px -100px !important;
    line-height: 1.2;
    padding-top: 0px;
  }

  .text-overlay .book-btn,
  .text-overlay a.btn {
    display: inline-block;
    width: 190%;
    max-width: 280px;
    margin: 9px -56px;
    padding: 11px;
    box-sizing: border-box;
    text-decoration: none;
  }
}

@media (max-width: 768px) {
  .about-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
  }

  .about-left {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .about-left h2 {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 28px;
  }

  .about-content {
    width: 100%;
    text-align: left;
    padding: 0 10px;
  }

  .about-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }

  .about-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
  }

  .about-right {
    display: none;
  }
}

/* ================= Mobile View Responsive CSS ================= */
/* ==========================================================================
   MOBILE & TABLET VIEW (Responsive Styles)
   ========================================================================== */
@media screen and (max-width: 768px) {
  .robot-assembly-container {
    width: 100% !important;
    height: 500px;
    margin-top: 0;
  }

  /* 2. Robot Parts and Images Scaling */
  .robot-part img {
    width: 280px !important;
  }

  /* 3. Initial  */
  #head {
    top: 5%;
    left: 5%;
  }
  #chest {
    top: 30%;
    left: 70%;
    transform: scale(1.2);
  }
  #left-arm {
    top: 70%;
    left: 5%;
  }
  #right-arm {
    top: 5%;
    right: 5%;
    transform: scaleX(-1) rotate(-45deg);
  }
  #left-leg {
    top: 75%;
  }
  #right-leg {
    top: 65%;
  }

  /* 4. Final Assembly Positions */
  .start-assembly #chest {
    top: 150px;
    left: calc(50% - 140px);
  }

  .start-assembly #head {
    top: 98px;
    left: calc(50% - 140px);
  }

  .start-assembly #left-arm {
    top: 170px;
    left: calc(50% - 100px);
  }

  .start-assembly #right-arm {
    top: 170px;
    right: calc(50% + 183px);
    margin-right: -280px;
  }

  .start-assembly #left-leg {
    top: 225px;
    left: calc(50% - 160px);
  }

  .start-assembly #right-leg {
    top: 225px;
    right: calc(50% - -130px);
    margin-right: -280px;
  }

  /* 5. Messages (p tags) Layout for Mobile */

  .robot-part p {
    position: fixed !important;
    bottom: 20px !important;
    top: auto !important;
    left: 5% !important;
    right: 5% !important;
    width: 90% !important;
    margin: 0 !important;
    font-size: 13px;
    padding: 10px 15px;
    transform: translateY(100px) !important;
  }
  #right-arm p,
  #left-leg p {
    right: auto !important;
    left: 5% !important;
    transform: translateY(100px) scaleX(-1) !important;
  }

  .start-assembly #right-arm p,
  .start-assembly #left-leg p {
    opacity: 1 !important;
    transform: translateY(0) scaleX(-1) !important;
  }

  .start-assembly .robot-part p {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* 6. Final Paragraph Block Adjustments */
  #final-para {
    width: 100%;

    top: -7px;
    margin: 20px auto;

    left: 0 !important;

    transform: none !important;
    height: 116%;

    box-sizing: border-box;
  }
}
/* ==========================================================================
   COUNTER ROW MOBILE VIEW
   ========================================================================== */
@media screen and (max-width: 768px) {
  .counter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 10px;
  }

  .counter-box {
    flex: 0 0 calc(50% - 15px);
    min-width: 140px;
    padding: 15px 10px;
    text-align: center;
    box-sizing: border-box;
  }

  .counter-box:last-child {
    flex: 0 0 100%;
    max-width: 250px;
  }

  .counter-box h3.counter {
    font-size: 28px !important;
    margin-bottom: 5px;
  }

  .counter-box p {
    font-size: 11px !important;
    letter-spacing: 1px;
    line-height: 1.4;
    margin: 0;
  }
}

.video-overlay-content {
  margin-top: 80px !important;
}

.text-overlay {
  top: 50% !important;
}
.dui1 {
  color: var(--12, #f8f6f6);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.quest {
}
.row-nine {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-3.5 * var(--bs-gutter-x));
  margin-left: calc(-3.5 * var(--bs-gutter-x));
}
/* Heading Style */
.section-title12 {
  text-align: center;
  margin-bottom: 50px;
  color: white;
  margin-top: -70px;
}

.section-title12 h2 {
  font-size: 42px;
  font-weight: 700;
  background: linear-gradient(90deg, #00d2ff, #7c4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.section-title12 p {
  font-size: 18px;
  color: #d0d0d0;
  max-width: 700px;
  margin: auto;
  line-height: 1.6;
}
/*---------------------------------------new footer------------------------------*/
/* ==========================================================================
   1. Footer Layout Base
   ========================================================================== */
.footer-main {
  background-color: #0b0b0c;
  padding: 80px 0 30px 0;
  overflow: hidden;
  position: relative;
}

.footer-main .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Columns Base Setup */
.footer-col-fir,
.footer-col-sec {
  padding-top: 0 !important;
  padding-bottom: 40px;
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.footer-col-fir {
  position: relative;
  max-width: 500px;
}

/* Background Logo Blur/Watermark */
.footer-logo {
  position: absolute;
  left: 0;
  top: 4px;
  z-index: 1;
  max-width: 100%;
  opacity: 0.1; /* Translucent fallback */
  pointer-events: none;
}

/* ==========================================================================
   2. Left Column (About / Intro)
   ========================================================================== */
.sec-heding.advice {
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}

.sec-heding.advice span {
  color: #00ffb1;
}

.dui.seci.dsos {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.6;
  max-width: 100%;
  padding-left: 10px;
  margin-top: 15px;
}

/* Vertical Animated Line */
.footer-col-fir::after {
  content: "";
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0px;
  background: #1a1a1a;
  z-index: 1;
}

.djks {
  position: absolute;
  right: 30px;
  z-index: 2;
  animation: moveTopToBottom 8s infinite linear alternate;
}

@keyframes moveTopToBottom {
  0% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(280px);
  }
}

/* ==========================================================================
   3. Middle Column (Box Container & Links)
   ========================================================================== */
.box-footer {
  border-radius: 20px;
  background: #1a1a1a;
  padding: 30px 25px;
  width: 100%;
  position: relative;
  z-index: 5;
}

.resour {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 25px;
  text-transform: uppercase;
  text-align: center;
}

.foot-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.foot-links li {
  position: relative;
  width: 100%;
  padding: 10px 10px 10px 45px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.foot-links li::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 5px;
  width: 28px;
  height: 28px;
  backdrop-filter: blur(5px);
  border-radius: 50%;
  background: linear-gradient(
    146deg,
    rgba(255, 255, 255, 0.1) 20.09%,
    rgba(255, 255, 255, 0.05) 79.91%
  );
  z-index: 1;
}

.foot-links li::after {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  mix-blend-mode: hard-light;
  position: absolute;
  left: 12px;
  z-index: 2;
  filter: blur(2px);
}

.foot-links li a {
  color: #6f6f6f;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.3s ease;
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.foot-links li a:hover {
  color: #fff;
  padding-left: 5px;
}

/* ==========================================================================
   4. Right Column (Information & Request Form)
   ========================================================================== */
.contact-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.contact-row i {
  font-size: 18px;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 25px;
  text-align: center;
  flex-shrink: 0;
}

.contact-row span,
.contact-row address {
  color: #6f6f6f;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 0;
  font-style: normal;
}

.nowrap {
  white-space: nowrap;
}

.form-container {
  margin-top: 25px;
  background: rgb(18, 17, 17);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(16, 15, 15, 0.976);
}

.form-container h2 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
}

.form-container form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-container input {
  background: #fbf9f9;
  border: 1px solid #222;
  padding: 10px 15px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
}

.form-container button {
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.footer-gefdo {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  max-width: 280px;
  opacity: 0.5;
}

/* ==========================================================================
   5. Bottom Copyrights Section
   ========================================================================== */
.coprights-main {
  border-top: 2px solid #1a1a1a;
  position: relative;
  padding: 25px 0;
  background: #060607;
  overflow: hidden;
}

.das {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  animation: moveLeftToRight 10s infinite linear alternate;
}

@keyframes moveLeftToRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(50%);
  }
}

.rights-reserved {
  display: contents;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.rights-reserved h2 {
  color: #6f6f6f;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0 !important;
}

.rights-reserved a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.footer-media {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-media a {
  color: #6f6f6f;
  font-size: 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.footer-media a img {
  width: 16px;
  height: 16px;
}

.footer-media a:hover {
  color: #fff;
}

/* ==========================================================================
   6. Ultra-Responsive Media Queries (Perfect Mobile/Tablet View)
   ========================================================================== */
@media (max-width: 991px) {
  .footer-main {
    padding: 50px 0 20px 0;
  }

  .footer-col-fir,
  .footer-col-sec {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
  }

  .sec-heding.advice {
    font-size: 28px;
    max-width: 100%;
  }

  .dui.seci.dsos {
    max-width: 81%;
    margin: 12px 64px auto auto;
    padding-left: 10px;
  }

  .footer-col-fir::after,
  .djks {
    display: none !important;
  }

  .box-footer {
    padding: 25px 20px;
  }

  .foot-links li {
    padding-left: 30px;
    justify-content: center;
    text-align: center;
  }

  .foot-links li::before,
  .foot-links li::after {
    display: none;
  }

  .contact-row {
    justify-content: center;
  }

  .rights-reserved {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 15px;
  }

  .footer-media {
    justify-content: center;
    width: 100%;
  }
}
/* ==========================================================================
   Contact Info & Icons Alignments (Perfect Mobile Fix)
   ========================================================================== */

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin-bottom: 25px;
  text-align: left !important;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
}

.contact-row span,
.contact-row address {
  color: #6f6f6f;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 0;
  font-style: normal;
  text-align: left;
  display: inline-block;
}

.nowrap {
  white-space: nowrap;
}

.contact-row i {
  font-size: 18px;
  background: linear-gradient(90deg, #5c33ff 0%, #00ffb1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  width: 25px;
  text-align: center;
  flex-shrink: 0;
  display: inline-block;
}

/* ==========================================================================
   Mobile Responsive Adjustment (Media Query Updates)
   ========================================================================== */
@media (max-width: 991px) {
  .box-footer {
    padding: 25px 20px !important;
    text-align: left !important;
  }

  .resour {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .info-grid {
    align-items: flex-start;
    padding-left: 20px;
  }
  .contact-row {
    justify-content: flex-start;
  }
}

.course-grid {
  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1200px;
  margin: 0 auto !important;
}

/* iPad / Tablet View Fix */
@media (max-width: 991px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 653px) {
  .course-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 16px !important;
  }

  .course-card {
    width: 100% !important;
  }
}
/*================================================================*/
/* Unique container using a custom namespace to avoid conflicts */
.cine-course-wrapper {
  position: relative;
  width: 100%;
  height: 117vh; /* Full screen viewport height */
  background-color: #000000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  bottom: 52px;
}

/* Background looping asset configuration */
.cine-course-media {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: 1;
}

/* Unique dark shading protection layer */
.dark-shading-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Adds a 50% dark tint over the video */
  z-index: 2;
}

/* Content block positioning */
.cine-course-info {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #ffffff;
  pointer-events: none; /* Allows user clicks to pass right through text elements */
}

/* Wide-tracked uppercase subtitle styling */
.cine-course-tagline {
  font-size: 14px;
  letter-spacing: 10px;
  color: #b3b3b3;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 400;
}

/* Prominent, bold block-level heading */
.cine-course-heading {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 4px;
  margin: 0;

  text-transform: uppercase;
}

/* Creates the muted, atmospheric transparency blend seen in the reference */
.cine-course-muted-txt {
  opacity: 0.35;
}

/* Responsive breakout parameters for mobile screens */
@media (max-width: 768px) {
  .cine-course-heading {
    font-size: 36px;
    letter-spacing: 2px;
  }
  .cine-course-tagline {
    font-size: 11px;
    letter-spacing: 6px;
  }
}
/* Base style for the changing text with smooth fade transition class */
.cine-course-muted-txt {
  opacity: 0.35;
  transition: opacity 0.4s ease-in-out;
  display: inline-block;
}

/* JS toggles this class to create a smooth fade-out and fade-in effect */
.text-fade-out {
  opacity: 0 !important;
}

@media (max-width: 768px) {
  .cine-course-heading {
    font-size: 34px;
    letter-spacing: 2px;
  }
  .cine-course-tagline {
    font-size: 10px;
    letter-spacing: 5px;
  }
}

.cine-description {
  font-size: 16px;
  font-weight: 400;
  color: #cccccc;
  text-align: center;
  margin: 20px auto 0 auto;
  letter-spacing: 1px;

  /* One-liner desktop layouts adjustments */

  overflow: hidden;
  text-overflow: ellipsis; /* Agar space kam pade toh safe cutoff design */
  max-width: 900px;
}

/* Responsive breakout parameters for smaller mobile screens */
@media (max-width: 768px) {
  .cine-description {
    font-size: 13px;
    white-space: normal; /* Mobile screens par text automatic line break le sake */
    max-width: 90%;
    line-height: 1.5;
  }
}

/* Base Style for Floating Icons */
.cine-floating-icon {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  z-index: 5; /* Taaki ye video ke upar dikhein aur text ke niche/sath rahein */
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* Left Side Positions */
.icon-top-left {
  width: 65px;
  height: 65px;
  top: 15%;
  left: 8%;
}
.icon-mid-left {
  width: 71px;
  height: 70px;
  top: 45%;
  left: 2%;
}
.icon-bottom-left {
  width: 60px;
  height: 60px;
  bottom: 15%;
  left: 6%;
}
.icon-bottom1 {
  width: 60px;
  height: 60px;
  bottom: 6%;
  left: 20%;
}
.icon-bottom3 {
  width: 60px;
  height: 60px;
  bottom: 90%;
  left: 75%;
}
.icon-bottom7 {
  width: 71px;
  height: 70px;
  top: 61%;
  left: 61%;
}
.icon-bottom8 {
  width: 71px;
  height: 70px;
  top: 65%;
  left: 29%;
}
/* Right Side Positions */
.icon-button {
  width: 70px;
  height: 69px;
  top: 25%;
  right: 28%;
}
.icon-top-right {
  width: 55px;
  height: 55px;
  top: 18%;
  right: 10%;
}
.icon-mid-right {
  width: 75px;
  height: 75px;
  top: 40%;
  right: 3%;
}
.icon-bottom-right {
  width: 60px;
  height: 60px;
  bottom: 88%;
  right: 2%;
}
.icon-bottom-right1 {
  width: 70px;
  height: 75px;
  bottom: 87%;
  left: 20%;
}
.icon-bottom {
  width: 84px;
  height: 78px;
  bottom: 12%;
  right: 7%;
}
.icon-bottom2 {
  width: 67px;
  height: 72px;
  bottom: 2%;
  left: 73%;
}
.icon-bottom12 {
  width: 80px;
  height: 85px;
  top: 20%;
  left: 25%;
}
/* Mobile Compatibility: Choti screens par icons text se na takrayein */
@media (max-width: 768px) {
  .cine-floating-icon {
    display: none;
  }
}

/* =================================================== */
/* MOBILE RESPONSIVE MEDIA QUERY (For Screens <= 768px) */
/* =================================================== */
@media (max-width: 768px) {
  /* Icons ki size ko badha diya hai */
  .cine-floating-icon {
    display: block !important;
    width: 40px !important; /* Size increased from 30px to 40px */
    height: 40px !important; /* Size increased from 30px to 40px */
    padding: 3px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) !important;
  }

  /* ------------------------------------------------- */
  /* LEFT SIDE & INNER LEFT ICONS POSITIONING          */
  /* ------------------------------------------------- */

  /* Filmora (Top Left Corner) */
  .icon-top-left {
    top: 2% !important;
    left: 3% !important;
  }

  /* Chatbot (Upper Mid Left) */
  .icon-mid-left {
    top: 22% !important;
    left: 1% !important;
  }

  /* Jasper AI (Center Left) */
  .icon-bottom-left {
    top: 45% !important;
    left: 2% !important;
  }

  /* Gemini (Lower Mid Left) */
  .icon-bottom1 {
    bottom: 32% !important;
    left: 1% !important;
  }

  /* Replit (Bottom Left Corner) */
  .icon-bottom3 {
    bottom: 14% !important;
    left: 3% !important;
  }

  /* InVideo AI (Heading ke paas thoda left-center) */
  .icon-bottom7 {
    top: 13% !important;
    left: 22% !important;
  }

  /* Paradox AI (Lower Bottom near center-left) */
  .icon-bottom8 {
    top: 77% !important;
    left: 41% !important;
  }

  /* ------------------------------------------------- */
  /* RIGHT SIDE & INNER RIGHT ICONS POSITIONING         */
  /* ------------------------------------------------- */

  /* ChatGPT (Top Right Corner) */
  .icon-top-right {
    top: 2% !important;
    right: 3% !important;
  }

  /* Claude AI (Upper Mid Right) */
  .icon-mid-right {
    top: 22% !important;
    right: 1% !important;
  }

  /* Cursor AI (Center Right) */
  .icon-bottom-right {
    top: 45% !important;
    right: 2% !important;
  }

  /* AI Generated Image (Lower Mid Right) */
  .icon-bottom-right1 {
    bottom: 32% !important;
    right: 1% !important;
  }

  /* GitHub (Bottom Right Corner) */
  .icon-bottom {
    bottom: 14% !important;
    right: 3% !important;
  }

  /* Midjourney (Heading ke paas thoda right-center) */
  .icon-bottom2 {
    top: 13% !important;
    right: 22% !important;
  }

  /* Perplexity AI (Slightly lower inner right) */
  .icon-button {
    bottom: 24% !important;
    right: 15% !important;
  }

  /* GIMP (Lower Bottom near center-right) */
  .icon-bottom12 {
    bottom: 3% !important;
    right: 24% !important;
  }
}

/* =================================================== */
/* EXTRA SMALL PHONES OPTIMIZATION (For Screens <= 420px) */
/* =================================================== */
@media (max-width: 420px) {
  /* Bohot chhote phones par scale perfectly balance rakhne ke liye */
  .cine-floating-icon {
    width: 35px !important;
    height: 35px !important;
  }
}
/*===============================filmmaker=========================*/
.cine-course-text {
  color: #ffffff;
  font-size: 18px;
  max-width: 700px;
  margin: 20px auto;
  line-height: 1.7;
  margin-top: 110px;
}

.cine-course-btn {
  display: inline-block;
  padding: 14px 35px;
  background: linear-gradient(90deg, #00d4ff, #7b61ff);
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  margin-top: 15px;
  transition: 0.3s ease;
}

.cine-course-btn:hover {
  transform: translateY(-3px);
}

.cine-course-info {
  position: relative;
  z-index: 1000;
}

.cine-course-btn {
  display: inline-block;
  position: relative;
  z-index: 1001;
  pointer-events: auto;
}

.dark-shading-layer {
  pointer-events: none;
}
/*=================================section four===============================*/
/* Students Work Section Styling */
.students-work-section {
  padding: 60px 0;
  background-color: #030712; /* Dark background to match your theme */
  color: #ffffff;
  font-family: sans-serif;
  text-align: center;
  padding-bottom: 10%;
}

.contain {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Video Container Rules */
.video-wrapper {
  cursor: pointer;
  position: relative;
  background-color: #000000;
}

/* Centered Play Button */
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(218, 37, 28, 0.9); /* Brand red background */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.video-wrapper:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: #da251c;
}

/* YouTube Iframe Container */
.youtube-player-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: none; /* Hidden until clicked */
}

.youtube-player-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.inst-post-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Enforces exactly 2 columns */
  gap: 30px;
}

/* Container grid configured for 2 columns across, making 2 rows for 4 videos */
.inst-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Forces exactly 2 videos per line */
  gap: 25px; /* Spacing between the video blocks */
  /* Optional: keeps the videos from getting too wide on large screens */
  margin: 0 40px;
}

/* Styling your text/iframe wrapper element */
.inst-post-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 15px;
  overflow: hidden;
}

/* Ensuring the iframe stays fluid and fits inside its 2-column space */
.inst-post-title iframe {
  width: 100% !important; /* Overrides the fixed width="560" */
  height: auto;
  aspect-ratio: 16 / 9; /* Maintains perfect video proportions */
  border-radius: 4px;
  display: block;
}

/* Responsive fallback for mobile screens */
@media (max-width: 600px) {
  .inst-post-grid {
    grid-template-columns: 1fr; /* Drops to 1 column on mobile phones for readability */
  }
}

.inst-post-grid1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Forces exactly 2 videos per line */
  gap: 25px; /* Spacing between the video blocks */
  max-width: 1399px; /* Optional: keeps the videos from getting too wide on large screens */
  margin: 0 auto;
}
/* Forces the iframe to have a natural vertical YouTube Shorts size */
.inst-post-title1 iframe {
  width: 100% !important; /* Forces it to fit the column width */
  height: auto;
  aspect-ratio: 9 / 16; /* Crucial: This gives it the exact vertical Shorts proportions */
  border-radius: 8px;
  display: block;
}
@media (max-width: 768px) {
  .inst-post-grid1 {
    grid-template-columns: 1fr; /* Stacks them in a single column on mobile so they stay readable */
    max-width: 320px; /* Keeps the vertical player slim on mobile screens */
    padding-bottom: 20px;
  }
}
/* 2. Logos Row Layout (Directly underneath the button) */
.social-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px; /* Icons ke beech ka distance thoda badha diya hai */
  margin-top: 12px; /* Button se gap thoda enhance kiya hai */
}

.view-more-container .connect-text {
  color: #9ca3af;
  font-family: sans-serif;
  font-size: 1rem; /* Text size thodi badi ki hai */
  font-weight: 500;
  margin-right: 8px;
}

/* Individual Icon layout size customization (Bigger scale configuration) */
.social-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px; /* Size increased from 48px to 58px */
  height: 58px; /* Size increased from 48px to 58px */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #9ca3af;
  font-size: 1.7rem; /* Inside logo size increased from 1.4rem to 1.7rem */
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Hover behaviors */
.social-logo-icon.yt:hover {
  color: #ff0000;
  background: rgba(255, 0, 0, 0.1);
  border-color: rgba(255, 0, 0, 0.3);
}

.social-logo-icon.insta:hover {
  color: #e1306c;
  background: rgba(225, 48, 108, 0.1);
  border-color: rgba(225, 48, 108, 0.3);
}

.social-logo-icon.twitter:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 3D bounce scale shift layout definition on hover actions */
.social-logo-icon:hover {
  transform: translateY(-4px) scale(1.08);
} /* Container to center the button under your shorts grid */
.view-more-container {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 100%;
}

/* The View More Button Styling */
.view-more-btn {
  display: inline-block;
  padding: 12px 32px;
  background: linear-gradient(
    45deg,
    #3b82f6,
    #8b5cf6
  ); /* Beautiful blue-purple gradient */
  color: #ffffff !important; /* Forces text color to stay white */
  font-family: sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none !important; /* Removes default underline */
  border-radius: 30px; /* Pill shaped design */
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); /* Ambient glow effect */
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease;
  cursor: pointer;
}

/* Interactive Hover Effects */
.view-more-btn:hover {
  transform: translateY(-3px); /* Button lifts slightly up */
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5); /* Ambient glow intensifies */
}

/* Click Active Effect */
.view-more-btn:active {
  transform: translateY(-1px);
}

/* Style for the FontAwesome YouTube icon inside the button */
.view-more-btn i {
  margin-right: 8px;
  font-size: 1.1rem;
  vertical-align: middle;
}

.faq-wrapper {
  display: flex;
  gap: 30px;
  align-items: flex-start; /* Most Important */
  margin-right: 50px;
  margin-left: 50px;
}

.faq-column {
  flex: 6;
}

.faq-item {
  margin-bottom: 20px;
  background: #0a0a0a;
  border-radius: 6px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 20px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 20px;
  color: #b9ccf0;
}

.faq-item.active .faq-answer {
  max-height: 400px;
  padding: 20px;
}
.faq-ans {
  color: #f4f5f8;
  text-align: justify;
}
/* 1. Main Background Wrapper (Applies a subtle cinematic grid + ambient light) */
.faq-section-wrapper {
  position: relative;
  background-color: #09070f; /* Deep studio obsidian background */
  padding: 80px 20px;
  overflow: hidden;

  /* Subtitle grid lines to mimic an editing timeline/software canvas */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* 2. Ambient Lens Glows (The colorful blurry lights behind your content) */
.faq-section-wrapper::before {
  content: "";
  position: absolute;
  top: 10%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.15) 0%,
    transparent 70%
  ); /* Deep Purple Glow */
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.faq-section-wrapper::after {
  content: "";
  position: absolute;
  bottom: 5%;
  right: -5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.12) 0%,
    transparent 70%
  ); /* Neon Cyan Glow */
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

/* 3. Upgraded Glassmorphism Cards (Keeps text perfectly readable over glows) */
.faq-card {
  position: relative;
  z-index: 1; /* Sits cleanly on top of the glowing background background */
  max-width: 850px;
  margin: 0 auto 24px auto;
  background: rgba(19, 17, 28, 0.75); /* Dark translucent layer */
  backdrop-filter: blur(12px); /* Premium frosted glass effect */
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover glow effect for the active open card */
.faq-card:hover {
  border-color: rgba(168, 85, 247, 0.4); /* Purple border highlight */
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.1);
}

/* 4. Typography Clean-up for Better Scannability */
.faq-card h2,
.faq-card .question-title {
  font-size: 1.3rem;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-card p,
.faq-card .answer-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #cbd5e1; /* Off-white for reduced eye strain */
  letter-spacing: 0.3px;
  text-align: justify;
}
/*==================ai for film making==========*/
/* Container Layout */
.course-intro-container {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 60px 40px;
  background-color: #0d0b14; /* Deep dark cinematic background */
  color: #ffffff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.content-left {
  flex: 1.2;
}

.content-right {
  flex: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Typography */
.main-heading {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.highlight-text {
  background: linear-gradient(
    45deg,
    #a855f7,
    #06b6d4
  ); /* Sleek purple to cyan gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tagline {
  font-size: 1.2rem;
  color: #a78bfa; /* Soft purple accent */
  margin-bottom: 25px;
  font-weight: 500;
}

.description {
  font-size: 1rem;
  line-height: 1.6;
  color: #cbd5e1; /* Clear, readable off-white */
  margin-bottom: 30px;
}

/* Mini Features Grid */
.pipeline-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-icon {
  font-size: 1.5rem;
}

.feature-item p {
  margin: 0;
  font-size: 0.9rem;
  color: #94a3b8;
}

.feature-item strong {
  color: #ffffff;
  display: block;
  margin-bottom: 4px;
}

/* Futuristic Visual Graphic (Replaces Excel Illustration) */
.hero-graphic {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4/3;
  background: #1e1b2e;
  border-radius: 16px;
  padding: 15px;
  border: 1px solid rgba(168, 85, 247, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.glow-effect {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.15) 0%,
    transparent 60%
  );
  z-index: 0;
  pointer-events: none;
}

.interface-mockup {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
}

.prompt-bar {
  background: #0d0b14;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.8rem;
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-preview {
  flex: 1;
  background: linear-gradient(
    135deg,
    #2e1065,
    #3b0764
  ); /* Deep cinematic purple gradient */
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.play-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.2rem;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.play-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
}

/* Responsive adjustments */
@media (max-width: 968px) {
  .course-intro-container {
    flex-direction: column;
    padding: 40px 20px;
  }
  .content-right {
    width: 100%;
  }
  .hero-graphic {
    max-width: 100%;
  }
}
/* Base Page Wrap & Resets */
.course-page-wrapper {
  background-color: #09070f;
  color: #ffffff;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  padding: 40px 20px;
}

/* Breadcrumb & Header Navigation */
.course-header-section {
  max-width: 1200px;
  margin: 0 auto 30px auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 20px;
}

.breadcrumb-nav {
  font-size: 0.85rem;
  color: #8b85a3;
  margin-bottom: 12px;
}

.breadcrumb-nav a {
  color: #a78bfa;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-nav a:hover {
  text-decoration: underline;
  color: #c084fc;
}

.current-crumb {
  color: #94a3b8;
}

.course-main-title {
  font-size: 2.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #ffffff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Core Split Layout Grid */
.course-intro-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
}

/* Text Content - Left Column styling */
.content-left {
  display: flex;
  flex-direction: column;
}

.tagline {
  font-size: 1.4rem;
  font-weight: 600;
  color: #22d3ee; /* Vibrant Cyan Text Accent */
  margin-bottom: 20px;
  line-height: 1.3;
}

.description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 35px;
}

/* AI Feature Row Layout */
.pipeline-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.feature-item {
  display: flex;
  gap: 15px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(167, 139, 250, 0.15);
  padding: 20px;
  border-radius: 12px;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.feature-item:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.4);
}

.icon-wrapper {
  font-size: 1.8rem;
  line-height: 1;
}

.feature-text h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.feature-text p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #94a3b8;
  margin: 0;
}

/* Cinematic Video Prompt UI - Right Column styling */
.content-right {
  display: flex;
  justify-content: center;
}

.hero-graphic-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #13111c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

/* Adds a movie studio atmospheric lighting haze effect behind the frame */
.lens-glow {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(
    circle,
    rgba(167, 139, 250, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.interface-mockup {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* UI Card Decorative Dots */
.window-header {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 10px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot.red {
  background-color: #ef4444;
}
.dot.yellow {
  background-color: #eab308;
}
.dot.green {
  background-color: #22c55e;
}

.window-title {
  font-size: 0.75rem;
  font-family: monospace;
  color: #64748b;
  margin-left: 8px;
}

/* Artificial Intelligence Prompt Display Box */
.prompt-bar-container {
  background: #09070f;
  border: 1px solid rgba(34, 211, 238, 0.2);
  padding: 12px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  display: flex;
  gap: 8px;
}

.prompt-prefix {
  color: #22d3ee;
  font-weight: bold;
}

.prompt-text {
  color: #e2e8f0;
  margin: 0;
}

/* Simulated AI Media Player Interface */
.video-preview-window {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1e1b4b 0%, #311042 100%);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.play-button-overlay {
  width: 54px;
  height: 54px;
  background: rgba(9, 7, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.play-button-overlay:hover {
  transform: scale(1.1);
  background: rgba(167, 139, 250, 0.4);
  border-color: #ffffff;
}

.play-icon {
  color: #ffffff;
  font-size: 1.1rem;
  margin-left: 2px;
}

/* Render Overlay Data bar */
.rendering-bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(9, 7, 15, 0.85);
  padding: 6px 12px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-family: monospace;
  color: #22d3ee;
  border-left: 2px solid #22d3ee;
}

/* Responsiveness for Smaller Screen Monitors */
@media (max-width: 992px) {
  .course-intro-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .content-right {
    order: -1; /* Puts the graphic preview on top on mobile/tablets */
  }

  .hero-graphic-card {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .pipeline-features {
    grid-template-columns: 1fr;
  }
  .course-main-title {
    font-size: 1.8rem;
  }
}