/* Css Variables */

/* Global font setting */
body, html {
  font-family: 'Poppins', sans-serif;
}

:root{
  /* CIEL Color Palette - Professional Gradient Theme */
  
  /* Primary CIEL Gradient Colors from Logo */
  --ciel-teal: #01F5D7;
  --ciel-blue: #3366FF;
  --ciel-purple: #8A2BE2;
  
  /* Enhanced Gradient Backgrounds */
  --primary-color: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%);
  --secondary-gradient: linear-gradient(135deg, var(--ciel-teal) 0%, var(--ciel-blue) 50%, var(--ciel-purple) 100%);
  --hero-gradient: linear-gradient(135deg, #000000 0%, #0d1b2a 25%, #1b263b 50%, #415a77 75%, #778da9 100%);
  
  /* Updated Color Variables */
  --title-color: var(--ciel-teal);
  --secondary-text-color: var(--ciel-blue);
  --accent-color: var(--ciel-purple);
  --primary-button-color: var(--ciel-teal);
  --text-color: #ffffff;
  --body-color: hsl(0,0%,100%);
  --container-color: hsl(0,0%,93%);
  --border-color: hsl(0,0%,87%);
  --text-white: #fff;
  --table-color: rgba(1, 245, 215, 0.1);
  --table-border-color: var(--ciel-teal);
  --table-header: var(--ciel-blue);
  --text-black: #0B0B0B;
  
  /* New CIEL Theme Colors with Logo Gradient */
  --glass-bg: rgba(1, 245, 215, 0.05);
  --glass-border: rgba(51, 102, 255, 0.2);
  --hover-glow: var(--secondary-gradient);

  /* font and typography */
  --body-font: 'Poppins', sans-serif;
  --second-font: 'Poppins', sans-serif;
  --location-font: 'Poppins', sans-serif;

  --big-font-size: 56px;
  --h1-font-size: 45px;
  --h2-font-size: 32px;
  --h3-font-size: 24px;
  --large-font-size: 18px;
  --normal-font-size: 16px;
  --small-font-size: 15px;
  --smaller-font-size: 14px;
  --tiny-font-size: 12px;

  /* Font weight */
  --weight-400 : 400;
  --weight-500 : 500;
  --weight-600 : 600;
  --weight-700 : 700;
  --weight-800 : 800;


}

/* Base */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  background: #000000;
  position: relative;
  overflow-x: hidden;
}

/* CIEL Brand Background Animation */
/* body::before removed for plain black background */

/* Hero Simple Image */
.hero-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.hero-simple-image {
  width: 100%;
  height: auto;
  max-width: 600px;
  border-radius: 10px;
}

/* Keep center content stationary */
.hero-wrap .banner-section-info,
.hero-wrap .cta-group,
.hero-wrap .cta-meta {
  position: relative;
  z-index: 10;
  transform: rotate(0deg) !important;
}

/* Professional Animated Image Styles */
.professional-image-container {
  position: relative;
  display: inline-block;
  max-width: 800px;
  width: 100%;
}

.professional-animated-image {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(1, 245, 215, 0.3);
  transition: all 0.5s ease;
  animation: professionalFloat 6s ease-in-out infinite;
}

.professional-animated-image:hover {
  transform: scale(1.02);
  box-shadow: 0 25px 80px rgba(1, 245, 215, 0.5);
}

/* Floating Elements */
.floating-element {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, #01F5D7, #3366FF);
  opacity: 0.7;
  animation: floatAround 8s ease-in-out infinite;
}

.floating-element-1 {
  width: 20px;
  height: 20px;
  top: 10%;
  left: 15%;
  animation-delay: 0s;
}

.floating-element-2 {
  width: 15px;
  height: 15px;
  top: 20%;
  right: 10%;
  animation-delay: 2s;
}

.floating-element-3 {
  width: 25px;
  height: 25px;
  bottom: 15%;
  left: 10%;
  animation-delay: 4s;
}

.floating-element-4 {
  width: 18px;
  height: 18px;
  bottom: 25%;
  right: 15%;
  animation-delay: 6s;
}

/* Image Glow Effect */
.image-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(circle, rgba(1, 245, 215, 0.1) 0%, transparent 70%);
  border-radius: 30px;
  animation: glowPulse 4s ease-in-out infinite;
  z-index: -1;
}

/* Feature Highlights */
.feature-highlight {
  text-align: center;
  padding: 2rem;
  border-radius: 15px;
  background: rgba(1, 245, 215, 0.05);
  border: 1px solid rgba(1, 245, 215, 0.2);
  transition: all 0.3s ease;
}

.feature-highlight:hover {
  transform: translateY(-5px);
  background: rgba(1, 245, 215, 0.1);
  border-color: rgba(1, 245, 215, 0.4);
  box-shadow: 0 10px 30px rgba(1, 245, 215, 0.2);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  animation: iconBounce 2s ease-in-out infinite;
}

/* Hero Animations */
@keyframes heroFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(1deg);
  }
  66% {
    transform: translateY(-5px) rotate(-1deg);
  }
}

@keyframes heroFloatAround {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translate(30px, -20px) scale(1.2);
    opacity: 0.8;
  }
  50% {
    transform: translate(-20px, -30px) scale(0.8);
    opacity: 0.4;
  }
  75% {
    transform: translate(-30px, -10px) scale(1.1);
    opacity: 0.7;
  }
}

@keyframes heroGlowPulse {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.08);
  }
}

@keyframes gradientShift {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}
section.pt-\[150px\]::before {
  content: "";
  position: fixed; /* instead of absolute → stays across page */
  top: 0;
  left: 0;
  width: 100vw;   /* full viewport width */
  height: 100vh;  /* full viewport height */
  background: url('../images/source-2.gif') center center / cover no-repeat;
  opacity: 0.1; /* transparent overlay */
  z-index: -2;
  animation: animateBackground 15s infinite alternate ease-in-out;
}
/* Hero enhancements */
.hero-wrap {
position: relative;
isolation: isolate;
}

.hero-wrap::before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -2;
background: url('../images/source-2.gif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.1; /* 90% opacity */
animation: animateBackground 15s infinite alternate ease-in-out;
}

.glass-card {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
box-shadow: 
  0 20px 60px rgba(0, 0, 0, 0.4),
  0 0 0 1px rgba(1, 245, 215, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--ciel-teal),
    0 0 20px rgba(1, 245, 215, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cta-group .primary-cta {
border: 1px solid var(--ciel-teal);
color: var(--ciel-teal);
background: transparent;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}

.cta-group .primary-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--secondary-gradient);
  transition: left 0.3s ease;
  z-index: -1;
}

.cta-group .primary-cta:hover::before {
  left: 0;
}

.cta-group .primary-cta:hover {
  color: white;
  border-color: var(--ciel-teal);
  box-shadow: 0 0 20px rgba(1, 245, 215, 0.4);
}

.cta-group .secondary-cta {
border: 1px solid rgba(255,255,255,0.25);
color: white;
background: transparent;
transition: all 0.3s ease;
}

.cta-group .secondary-cta:hover {
border-color: var(--ciel-blue);
color: var(--ciel-blue);
box-shadow: 0 0 15px rgba(51, 102, 255, 0.3);
}



.trust-card {
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
border-radius: 12px;
padding: 10px 14px;
}
.trust-card h4 { font-weight: 800; color: #dff6ef; font-size: 18px; }
.trust-card p { color: #c7d7d5; font-size: 12px; }

.banner-header h1:nth-child(odd){
color: var(--secondary-text-color);
}

.hero-title { text-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.hero-subtitle { text-shadow: 0 2px 0 rgba(0,0,0,0.25); }

.header.scrolled {
  background-color: white;
  color: var(--text-black);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header.scrolled .mobile-view-nav-menu svg {
fill: black; /* Changes the SVG fill color to black */
color: black; /* Also changes the stroke color if needed */
}

.header.scrolled .contact-button:hover{
border: 1px solid var(--secondary-text-color);
background-color: white;
color:var(--secondary-text-color);
}

/* navbar section */
.brand-name h1{
  font-weight: 100;
  letter-spacing: 10px;
}

.desktop-menu-items a:hover{
  display: inline-block;
  padding: 5px 20px;
  border-radius: 30px;
  background-color: var(--third-color);
}

#active{
  padding: 5px 20px;
  border-radius: 30px;
  background-color: var(--third-color);
  color:white;
}

.desktop-menuItems-contactButton{
  background-color: var(--primary-button-color);
  padding: 5px 30px;
}

/* Banner Section */
.banner-section-info{
  font-family: var(--body-font);
}

.banner-section-info .banner-header h1{ line-height: 1.25em; outline: none; }
.banner-section-info .banner-header p{ line-height: 1.25em; }

/* Global heading scale */
h1, .title { font-family: var(--body-font); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-family: var(--body-font); font-weight: 700; }
h3 { font-family: var(--body-font); font-weight: 600; }
p, a, li, button, input, label, small { font-family: var(--body-font); }

/* Smooth entrance animations */
.fade-up { opacity: 0; transform: translateY(12px); animation: fadeUpUnified .6s ease-out forwards; }
.fade-in { opacity: 0; animation: fadeInUnified .6s ease-out forwards; }
.rise { opacity: 0; transform: translateY(6px); animation: riseUnified .5s ease-out forwards; }

@keyframes fadeUpUnified { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUnified { to { opacity: 1; } }
@keyframes riseUnified { to { opacity: 1; transform: translateY(0); } }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.banner-shadow{
box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}

.hover-shadow:hover{
box-shadow: 0px 10px 50px rgba(97, 96, 96, 0.5);
}

.banner-shadow-dashboard{
/* box-shadow: 0px 5px 70px rgba(196, 194, 194, 0.5); */
border-radius: 10px;
}

/* CIEL Orbit decorative rings with brand colors */
.orbit { position: relative; }
.orbit::before, .orbit::after {
content: ""; position: absolute; inset: -40px; border-radius: 9999px; pointer-events: none;
background:
  radial-gradient(closest-side, rgba(1,245,215,0.25), rgba(0,0,0,0) 60%),
  radial-gradient(closest-side, rgba(51,102,255,0.2), rgba(0,0,0,0) 70%),
  radial-gradient(closest-side, rgba(138,43,226,0.15), rgba(0,0,0,0) 80%);
filter: blur(3px);
z-index: -1;
animation: orbitPulse 6s ease-in-out infinite;
}
@keyframes orbitPulse { 
  0%,100%{opacity:.7; transform: scale(1);} 
  50%{opacity:1; transform: scale(1.05);} 
}

/* Unique illustration motion */
.hero-illustration {
transform-origin: 50% 60%;
animation: gentleTilt 8s ease-in-out infinite;
}
@keyframes gentleTilt {
0%   { transform: rotate(-0.6deg) translateY(0); }
25%  { transform: rotate(0.6deg) translateY(-4px); }
50%  { transform: rotate(-0.4deg) translateY(1px); }
75%  { transform: rotate(0.4deg) translateY(-3px); }
100% { transform: rotate(-0.6deg) translateY(0); }
}

/* CIEL Floating badges with brand styling */
.badge-card {
position: absolute;
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
padding: 12px 16px;
border-radius: 16px;
box-shadow: 
  0 10px 30px rgba(0,0,0,0.3),
  0 0 0 1px rgba(1, 245, 215, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
transition: all 0.3s ease;
}
.badge-card:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(0,0,0,0.4),
    0 0 0 1px var(--ciel-teal),
    0 0 15px rgba(1, 245, 215, 0.3);
}
.badge-card ion-icon { color: var(--ciel-teal); font-size: 18px; }
.badge-text { color: #e9faf5; font-size: 12px; font-weight: 600; }
.badge-dot { 
  width: 10px; height: 10px; border-radius: 50%; 
  background: var(--secondary-gradient); 
  box-shadow: 0 0 15px rgba(1, 245, 215, 0.6); 
}
.float-y { animation: floatY 5s ease-in-out infinite; }
.float-y.delay-2 { animation-delay: .9s; }
@keyframes floatY { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

/* marquee */
marquee{
  color: transparent !important;
  -webkit-text-stroke: 1px grey;
  font-family: var(--second-font);
}

/* table */
.custom-table{
  background-color: white;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none; 
}

.scrollbar-hide {
  -ms-overflow-style: none;  
  scrollbar-width: none; 
}

.custom-table .custom-table-cell{
  padding: 20px;
  border-bottom: 1px solid var(--table-border-color);
  background-color: var(--table-color);
  width:300px;
  height: 100px;
  display: flex;
  align-items: center;
}

.custom-empty-cell{
  padding: 32.5px;
  height: 100px;
}

.custom-table-row-first .custom-table-cell:nth-child(3){
  border-top-left-radius: 14px;
}

.custom-table-row-1 .custom-table-cell{
  border-left: 1px solid var(--table-border-color);
}

.custom-table-row-2 .custom-table-cell{
  border-left: 1px solid var(--table-border-color);
}

.custom-table-row-1 .custom-table-cell:nth-child(2){
  border-top-left-radius: 14px;
}

.custom-table-row-1 .custom-table-cell:nth-child(2), .custom-table-row-2 .custom-table-cell:nth-child(2) {
  background-color:  #01F5D7;
}

.custom-table-cell-3, .custom-empty-cell-3{
  background-color: #0a1a2a !important;
  border-bottom: none !important;
  color:white;
  width: 350px !important;
}

.custom-empty-cell-3{
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.custom-table-cell-3{
  border-bottom: 1px solid #ddd !important;
}

/* tree */

.tree ul {
  padding-top: 20px; 
  position: relative;
  transition: all 0.5s;
}

.tree ul ul::before {
  content: '';
  position: absolute; 
  top: 0px; 
  left: 50%;
  border-left: 3px solid #ccc;
  width: 0; 
  height: 41px;
}

.tree li {
  float: left; 
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 10px; /* Adjust padding to add spacing between nodes */
  transition: all 0.5s;
}

.tree li::before, .tree li::after {
  content: '';
  position: absolute; 
  top: 20px; 
  right: 50%;
  border-top: 3px solid #ccc;
  width: 50%; 
  height: 40px;
}

.tree li::after {
  right: auto; 
  left: 50%;
  border-left: 3px solid #ccc;
}

.tree li:only-child::before, .tree li:only-child::after {
  display: none;
}

.tree li:only-child { 
  padding-top: 0;
}

.tree li:first-child::before, .tree li:last-child::after {
  border: 0 none;
}

.tree li:last-child::before {
  border-right: 3px solid #ccc;
  border-radius: 0 15px 0 0;
}

.tree li:first-child::after {
  border-radius: 15px 0 0 0;
}

.tree .node {
  width: 70px;
  height:70px;
  padding: 20px;
  border: 1px solid #666;
  display: inline-block;
  border-radius: 5px;
  background-color: #fff;
  transition: all 0.5s;
  margin-left: 60px; /* Adds space between nodes */
  margin-right: 60px; 
  text-align: left;
  margin-top: 40px;
  position: relative;
}

@media screen and (min-width: 300px) and (max-width:608px) {
  .tree ul:nth-child(2){
    padding-top: 0px;
  }
  .tree ul ul::before {
    border-left: none;
    height: 0px;
    }

  .tree li{
    padding: 0px;
  }

  .tree ul li ul {
    padding: 0px 20px;
  }

  .tree li ul li {
    padding: 10px ; 
  }

  .tree li::before, .tree li::after {
    border-top: none;
    top: 0px; 
    height: 0px;
  }
  
  .tree li::after {
    border-left: none;
  }

  .tree li:last-child::before {
    border-right: none;
  }
  
  .tree .node {
    width: 70px;
  height:70px;
    margin-left: 0px; /* Adds space between nodes */
    margin-right: 0px; 
    margin-top: 0px;
  }

  .node-para{
    display: none;
  }

  .tree .node {
    padding: 20px;
  }
}

@media screen and (min-width: 609px) and (max-width:700px) {
  .tree .node {
    margin-left: 0px; /* Adds space between nodes */
    margin-right: 0px; 
  }
}


@media screen and (min-width: 700px) and (max-width:808px) {
  .tree .node {
    margin-left: 5px; /* Adds space between nodes */
    margin-right: 5px; 
  }
}

@media screen and (min-width: 809px) and (max-width:1000px) {
  .tree .node {
    margin-left: 10px; /* Adds space between nodes */
    margin-right: 10px; 
  }
}

@media screen and (min-width: 1001px) and (max-width:1165px) {
  .tree .node {
    margin-left: 25px; /* Adds space between nodes */
    margin-right: 25px; 
  }
}

@media screen and (min-width: 1409px) and (max-width: 3009px) {
  .node-para{
    position: absolute;
    width:300px;
    bottom: -70px !important;
    left:0px;
  }
}

@media screen and (min-width: 1169px) and (max-width: 1409px) {
  .tree .node {
    margin-left: 40px; /* Adds space between nodes */
    margin-right: 40px; 
  }
}

.tree .node:hover{
  background-color: var(--third-color);
  border: 1px solid rgb(255, 255, 255);
}

.tree .node:hover span{
  color:white !important;
}

.node-para{
  position: absolute;
  width:200px;
  bottom: -55px;
  left:0px;
}

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

/* footer */
footer .ciel{
  position: relative;
}

@media screen and (min-width: 649px) {
  .load {
    display: inline-block;
  }
  .load span {
    font-family: Arial;
    font-size: 35px;
  }
 
}


.address{
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.address button{
  color:black;
  background-color: transparent;
  border-radius:60px;
  padding:10px ;
  font-weight:bolder;
  letter-spacing: 2px;
  position:relative;
  border: 1px solid black;
}
.address button span{
  height:0%;
  width:100%;
  background-color:black;
  position:absolute;
  z-index:-1;
  border-radius:20px;
  left:0;
  bottom:0;
  transition:0.3s;
  color:white;
}
.address button:hover span{
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.hiring-section {
  padding: 30px;
  text-align: center;
}

.hiring-title {
  font-size: 3.5vw;
  color: #333;
  margin-bottom: 10px;
}

.hiring-description {
  font-size: 16px;
  color: #666;
}

.apply-button {
  background-color: #070707;
  padding: 10px 20px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  font-size: 16px;
}

.apply-button:hover {
  background-color: #353738;
}

.logo{
white-space: nowrap;
position: relative;
}

.logo::before{
position: absolute;
top:0;
left:0;
width:250px;
height: 100%;
/* background: linear-gradient(to left, rgba(255,255,255,0), white); */
content:"";
z-index: 2;
}

.logo::after{
position: absolute;
top:0;
right:0;
width:250px;
height: 100%;
/* background: linear-gradient(to right, rgba(255,255,255,0), white); */
content:"";
z-index: 2;
}

.logo-track {
display: flex;
width: max-content;
animation: loopscroll 35s linear infinite;
}

.logo:hover .logo-track{
animation-play-state: paused;
}

.clients{
display: flex;
align-items: center;
gap: 0;
white-space: nowrap;
}

.clients img{
display: inline-block;
height: 70px;
width: auto;
object-fit: contain;
margin: 0 40px !important;
vertical-align: middle;
}

@keyframes loopscroll {
from {
  transform: translateX(0);
}
to {
  transform: translateX(-100%);
}
}

@keyframes sparkle {
0%, 100% {
    opacity: 0.8;
    filter: brightness(1);
    transform: scale(1);
}
50% {
    opacity: 1;
    filter: brightness(1.5);
    transform: scale(1.1);
}
}

@keyframes subtleSparkle {
0%, 100% {
    opacity: 1;
    filter: brightness(1);
}
50% {
    opacity: 1;
    filter: brightness(1.2);
}
}

/* New Animations for Images */

/* 1. Zoom-In Effect (Image 1) */
.animation-zoom-in {
animation: zoomIn 1s cubic-bezier(0.47, 0, 0.75, 0.72) forwards;
}

@keyframes zoomIn {
0% {
    transform: scale(0.8);
    opacity: 0;
}
50% {
    transform: scale(1.05);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}

/* 2. Slide-In-From-Right Effect (Image 2) */
.animation-slide-right {
animation: slideInRight 1s ease-in-out forwards;
}

@keyframes slideInRight {
0% {
    transform: translateY(100px);
    opacity: 0;
}
100% {
    transform: translateY(0);
    opacity: 1;
}
}

/* 3. Fade-Up Effect (Image 3) */
.animation-fade-up {
animation: fadeUp 1s ease-in-out forwards;
}

@keyframes fadeUp {
0% {
    transform: translateY(100px);
    opacity: 0;
}
100% {
    transform: translateY(0);
    opacity: 0.4;
}
}

/* Wiggle and Drop Effect (Image 4) */
.animation-drop {
animation: drop 1s ease-out forwards;
}

@keyframes drop {
0% {
    transform: translateY(-300px) ; /* Start from above */
    opacity: 0; /* Invisible initially */
}
100% {
    transform: translateY(0) ; /* Settle in the final position */
}
}

/* 5. Pulse Effect (Image 5) */
.animation-pulse {
animation: pulseEffect 1s ease-in-out forwards;
}

@keyframes pulseEffect {
0% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 0;
}
50% {
    transform: scale(1.1);
    filter: brightness(1.2);
    opacity: 0.5;
}
100% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 1;
}
}

.location-title{
font-family: var(--location-font);
font-size: 20px;
}

/* Shorts by CIEL - Creative cards */
.shorts-section { position: relative; }
.reel-card { position: relative; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.reel-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.reel-frame { position: relative; }
.reel-media { width: 100%; height: 94; object-fit: cover; display: block; }
.reel-frame::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 20%, rgba(72,197,167,.12), rgba(0,0,0,0)); opacity:0; transition: opacity .3s ease; }
.reel-card:hover .reel-frame::before { opacity:1; }
.reel-play { position:absolute; inset:auto auto 12px 12px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(49,174,144,0.85); color:white; border:1px solid rgba(255,255,255,0.35); box-shadow: 0 10px 25px rgba(49,174,144,.5); transition: transform .2s ease; }
.reel-play:hover { transform: scale(1.06); }
.reel-badge { position:absolute; top:12px; right:12px; font-size:12px; color:#dff6ef; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.02em; }

.footer-box-3{
border-bottom-right-radius: 100px !important;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(8px);
transition: all 0.3s ease;
}

.footer-box-3:hover {
  border-color: var(--ciel-purple);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.2);
}

.level-up div{
background: var(--glass-bg);
border-radius: 16px;
border: 1px solid var(--glass-border);
padding: 30px;
height:300px;
backdrop-filter: blur(8px);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.level-up div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--secondary-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.level-up div:hover::before {
  opacity: 1;
}

.level-up div:hover {
  transform: translateY(-5px);
  border-color: var(--ciel-teal);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(1, 245, 215, 0.2),
    0 0 20px rgba(1, 245, 215, 0.1);
}

.level-up{
height:600px;
}


.circle-parent-container{
margin: 140px 0px;
position: relative;
z-index: -2;
}

.circle-container {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index: 1;
}

/* Circle animation */
.circle {
position: absolute;
fill: none;
stroke: white;
stroke-width: 1px;
opacity: 1;
animation: growAndFade 4s ease-in-out infinite;
}

/* Each circle with a slight delay */
.circle1 { animation-delay: 0s; }
.circle2 { animation-delay: 2s; }
.circle3 { animation-delay: 4s; }


/* Center circle */
.center-circle {
position: absolute;
cx: 250px;
cy: 250px;
r: 150px;
fill: rgb(3, 3, 3); /* White background */
}

@keyframes growAndFade {
0% {
  r: 150; /* Start size */
  opacity: 1;
  stroke-width: 1px;
}
50% {
  r: 175; /* Grow size */
  stroke-width: 1px;
  opacity: 0.8;
}
100% {
  r: 200; /* Largest size */
  stroke-width: 1px;
  opacity: 0; /* Fade out */
}
}

.grid-container {
width: 100%;
display: flex;
z-index: -1;
}

.text-container {
width: 50%; /* Ensure containers take the full width */
}


.scroll-wrapper {
overflow: hidden; /* Hide the overflow to create a scrolling effect */
transform: rotate(180deg);
}

.scroll-inner-text {
display: flex;
gap: 1rem; /* Space between the elements */
white-space: nowrap; /* Prevent line breaks */
animation: loopscroll 5s linear infinite;
}

.scroll-inner-text-2 {
display: flex;
gap: 1rem; /* Space between the elements */
white-space: nowrap; /* Prevent line breaks */
animation: loopscroll 8s linear infinite;
}

.scroll-inner-text-3 {
display: flex;
gap: 1rem; /* Space between the elements */
white-space: nowrap; /* Prevent line breaks */
animation: loopscroll 12s linear infinite;
}

.scrolling-text .scroll-inner-text div, .scroll-inner-text-2 div, .scroll-inner-text-3  div {
border-radius: 30px;
transform: rotate(180deg);
border: 0.1px solid rgb(12, 12, 12);
color:black;
}

@keyframes loopscroll {
from {
  transform: translateX(0); /* Start from the initial position */
}
to {
  transform: translateX(-50%); /* Move halfway to scroll the entire set */
}
}

.second-container .scroll-inner-text div, .second-container .scroll-inner-text-2 div , .second-container .scroll-inner-text-3 div{
background: var(--secondary-gradient);
color: white;
border: none;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}

.second-container .scroll-inner-text div:hover, .second-container .scroll-inner-text-2 div:hover, .second-container .scroll-inner-text-3 div:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(1, 245, 215, 0.4);
}

.blog-post{
position: relative;
}

.blog-post::before , .blog-post::after{
content:"";
position: absolute;
left:-2px;
top:-2px;
background : linear-gradient(45deg , #e6fb04);
}

@media (max-width: 1400px) {
.level-up div{
  height:350px;
}
}

@media (max-width: 700px) {
.level-up div{
  height:250px;
}
}

@media (max-width: 500px) {

.circle-parent-container {
  margin: 140px 0px;
    height: 150px; /* Reduced height */
}

.circle-container {
    width: 100%;
    height: 100%;
}

.circle {
    r: 100; /* Reduce radius for smaller screens */
}

.scroll-inner-text,
.scroll-inner-text-2,
.scroll-inner-text-3 {
    font-size: 12px; /* Reduce font size */
    display: none;
}

/* Optional: Reduce overall text container height */
.text-container {
    max-height: 200px; /* Set a max height for scrolling */
    overflow-y: auto; /* Allow scrolling if text exceeds max height */
}

/* Mobile CIEL Theme Enhancements */
.badge-card {
    padding: 8px 12px;
    font-size: 10px;
}

.trust-card {
    padding: 8px 12px;
    font-size: 12px;
}

.cta-group {
    flex-direction: column;
    gap: 20px;
}

.contact-button {
    width: 100%;
    justify-content: center;
}

.hero-title {
    font-size: 28px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 24px;
    line-height: 1.2;
}
}

@media (max-width: 370px) {
.circle-parent-container {
  margin: 60px 0px;
    height: 150px; /* Reduced height */
}
}

@media (max-width: 200px) {
.circle-parent-container {
  margin: 60px 0px;
    height: 300px; /* Further reduced height */
}

.circle {
    r: 75; /* Further reduce radius */
}

.scroll-inner-text,
.scroll-inner-text-2,
.scroll-inner-text-3 {
    padding: 6px 3px; /* Further reduce padding */
    font-size: 10px; /* Further reduce font size */
}

.text-container {
    max-height: 150px; /* Further limit max height */
}
}

/* CIEL Modern Button Styles */
.contact-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--ciel-teal);
  color: var(--ciel-teal);
  background: transparent;
}

.contact-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--secondary-gradient);
  transition: left 0.3s ease;
  z-index: -1;
}

.contact-button:hover::before {
  left: 0;
}

.contact-button:hover {
  color: white;
  border-color: var(--ciel-teal);
  box-shadow: 0 0 25px rgba(1, 245, 215, 0.4);
  transform: translateY(-2px);
}

/* Enhanced Menu Styles */
.active-menu {
background: var(--glass-bg);
color: #01F5D7;
border: 1px solid var(--glass-border);
backdrop-filter: blur(8px);
}

#website-menu:hover,
#marketing-menu:hover,
#advanced-menu:hover {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(8px);
color: #01F5D7;
}

#website-menu::before,
#marketing-menu::before,
#advanced-menu::before {
content: '/ /';
color: #01F5D7;
font-weight: bolder;
margin-right: 20px;
}

#data-science-sm select {
border: none;
outline: none;
background: var(--secondary-gradient);
cursor: pointer;
color: white;
font-weight: 600;
}

#data-form form input::placeholder {
overflow: visible;
transition: transform 200ms linear;
}

#data-form form input:focus::placeholder {
transform: translateY(-50px);
}

#data-form form input[type='checkbox'] {
border-radius: 5px;
width: 15px;
height: 15px;
} 

.timeline {
position: relative;
padding-left: 20px;
}

.timeline .item::before {
content: " ";
width: 14px;
height: 14px;
background: #f5f5f5;
border: 3px solid #aeaeae;
border-radius: 50px;
position: absolute;
top: 0px;
left: -12px;
}

@media (min-width: 320px) and (max-width: 990px) {
#sidebar {
  padding-right: 30px;
  padding-left: 30px;
}

}



/* Additional CIEL Theme Enhancements */

/* Enhanced Typography with Logo Gradient */
.hero-title, .hero-subtitle {
  background: linear-gradient(135deg, #01F5D7 0%, #0974F6 50%, #952AFE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Enhanced Navigation */
.header, .navbar-glass {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid var(--glass-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.navbar-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(1, 245, 215, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(51, 102, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.menu-item:hover {
  color: #01F5D7;
  text-shadow: 0 0 10px rgba(1, 245, 215, 0.5);
}

/* Enhanced Cards with Logo Colors */
.level-up div h1 {
  font-weight: 700;
}

/* Enhanced Footer */
footer, .footer-glass {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(26, 26, 46, 0.9) 100%);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}

footer::before, .footer-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(1, 245, 215, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(51, 102, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Enhanced Blog Cards with Logo Colors */
.blog-post {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.blog-post:hover {
  transform: translateY(-5px);
  border-color: #01F5D7;
  box-shadow: 0 10px 30px rgba(1, 245, 215, 0.2);
}

/* Enhanced FAQ */
.faq-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}

/* Enhanced Video Cards */
.reel-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}

/* Enhanced Comparison Table */
.comparison-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}

.comparison-card:hover {
  border-color: #01F5D7;
  box-shadow: 0 10px 30px rgba(1, 245, 215, 0.2);
}