@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

/* =========================================================
   1. FONTS LOADING
   ========================================================= */
@font-face {
  font-family: "PP Mori";
  src: url("../fonts/PPMori-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "PP Mori";
  src: url("../fonts/PPMori-Light.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("../fonts/PPMori-Light.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("../fonts/PPMori-Light.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("../fonts/PPMori-Light.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("../fonts/PPMori-Light.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("../fonts/PPMori-Light.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

/* =========================================================
   2. ROOT VARIABLES (Professional Scaling)
   ========================================================= */
:root {
  --bg-color: #0b0b0b;
  --card-bg: #1a1a1a;
  --slide-width: 340px;
  --slide-height: 352px;
  --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  /* --- Global Theme Colors --- */
  --accent-blue: #3b82f6;
  --bg-dark: #080808;
  --primary-color: #3b82f6;
  --main-bg: #000000;
  --secondary-bg: #121212;
  --card-bg: rgba(20, 20, 30, 0.6);
  --section-dark-bg: #080808;
  --slider-bg: #111111;
  --hover-bg: #181818;
  --text-gray: #9ca3af;
  --input-bg: rgba(255, 255, 255, 0.03);
  --border-color: rgba(255, 255, 255, 0.15);
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  /* --- Typography & Borders --- */
  --font-color: #ffffff;
  --body-font: #54616b;
  --text-muted: #888888;
  --stroke-color: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(18, 18, 18, 0.8);
  --border-dim: rgba(51, 51, 51, 0.5);

  /* Default Desktop Padding (100px) */
  --section-padding: 6.25rem;
  --spacing-xs: 0.3125rem; /* 5px */
  --spacing-sm: 0.625rem; /* 10px */
  --spacing-md: 1.25rem; /* 20px */
  --spacing-lg: 1.875rem; /* 30px */
  --spacing-xl: 3.125rem; /* 50px */

  /* Responsive Font Sizes */
  --h1-size: clamp(2rem, 5vw, 2.8rem) !important;
  --loader-font-size: clamp(2rem, 10vw, 7rem);
  --h2-size: clamp(1.75rem, 4vw, 3rem);
  --body-font-size: clamp(1rem, 2vw, 1.125rem);

  --transition-speed: 0.5s;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-speed: 0.5s;
  --step-speed: 0.3s;
  --btn-padding: 0.625rem 1.5625rem; /* 10px 25px */
  --sub-heading: 1.125rem; /* 18px */
  --font-weight: 400;

  /* --- Skill Colors --- */
  --speed: 20s;
  --color-html: #e34f26;
  --color-css: #1572b6;
  --color-js: #f7df1e;
  --color-node: #339933;
  --color-python: #3776ab;
  --color-sass: #cc6699;
  --color-react: #61dafb;
  --color-aws: #ff9900;
  --color-docker: #2496ed;
  --color-git: #f05032;
  --color-github: #181717;
  --color-php: #777bb4;
  --color-laravel: #ff2d20;
  --color-java: #007396;
  --color-bootstrap: #7952b3;
  --color-wordpress: #21759b;
  --color-angular: #dd0031;
  --color-tailwind: #06b6d4;
  --color-mongodb: #47a248;
  --color-typescript: #3178c6;

  /* --- Design Colors --- */
  --design-speed: 20s;
  --color-ps: #31a8ff;
  --color-ai: #ff9a00;
  --color-figma: #f24e1e;
  --color-xd: #ff61f6;
  --color-ae: #9999ff;
  --color-pr: #ea77ff;
  --color-sketch: #fdb300;
  --color-indesign: #ff3366;
  --color-corel: #009b44;
  --color-canva: #00c4cc;
  --icon-filmora: #52debf;
  --icon-audition: #9494f7;
  --color-blender: #f5792a;
  --color-creative: #ed1c24;

  /* --- UI Specific --- */
  --edu-accent: #007bff;
  --edu-accent-rgb: 0, 123, 255;
  --shadow-color: rgba(0, 0, 0, 0.5);

  /* --- Master Control for Orbit Size --- */
  --orbit-size: clamp(18.75rem, 90vw, 30.25rem);
  --radius-inner: calc(var(--orbit-size) * 0.33);
  --radius-outer: calc(var(--orbit-size) * 0.5);
  --icon-small: calc(var(--orbit-size) * 0.07);
  --icon-large: calc(var(--orbit-size) * 0.14);
}
/* =========================================================
   Modern Floating Scrollbar (With Good Height)
   ========================================================= */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--main-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
  border: 2px solid var(--main-bg);
  background-clip: padding-box;
  min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}
/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "PP Mori", sans-serif;
  color: var(--font-color);
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 700;
}

h1 {
  font-size: var(--h1-size);
}
h2 {
  font-size: var(--h2-size);
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.75rem;
}
h5 {
  font-size: 1.35rem;
}
h6 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

p,
li,
span,
a {
  font-family: "Outfit", sans-serif;
  font-size: var(--body-font-size);
  line-height: 1.6;
  color: var(--body-font);
}

h1 span,
h2 span,
h3 span {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}
small,
.text-small {
  font-size: 0.875rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--main-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}
/* =========================================================
   4. GLOBAL RESET & BASE
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth !important;
  font-size: clamp(0.875rem, 0.9vw + 0.75rem, 1rem);
  overflow-x: hidden !important;
}

body {
  font-family: "Outfit", sans-serif;
  background-color: var(--secondary-bg);
  color: #333;
  line-height: 1.6;
  font-size: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow-x: hidden !important;
}

body.loaded {
  visibility: visible;
  opacity: 1;
}

/* Container scaling for larger screens */
@media (min-width: 75rem) {
  .container {
    max-width: 71.25rem !important; /* 1140px */
  }
}

/* =========================================================
   5. NAVBAR CSS
   ========================================================= */
.mainNavbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--glass-bg);
  border-bottom: 0.0625rem solid var(--border-dim);
  backdrop-filter: blur(0.75rem);
}

.mainNavbar .navbar-brand {
  font-family: "PP Mori", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--font-color);
}
.navbar-nav {
  margin: 0 auto;
  text-align: center;
}
.navbar-nav .nav-item .nav-link {
  text-decoration: none;
  color: var(--font-color) !important;
  font-size: 1rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  line-height: 1.8em;
  height: 1.8em;
  position: relative;
  padding: 0 0.625rem !important;
  margin: 0 0.3125rem;
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0.0625rem;
  left: 0;
  width: 100%;
  height: 0.09375rem;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.navbar-nav .nav-item .nav-link span {
  color: var(--font-color);
}

/* Hover Text Animation */
.space {
  display: inline-block;
  width: 0.5rem;
}
.char {
  font-size: 1rem;
  font-weight: 500;
  display: inline-block;
  position: relative;
  transform: translateY(0);
  transition: transform var(--step-speed) cubic-bezier(0.3, 0, 0.2, 1);
}
.char::before {
  content: attr(data-char);
  position: absolute;
  top: -1.8em;
  left: 0;
  color: var(--primary-color);
  text-shadow: 0 0 0.5rem rgba(59, 130, 246, 0.5);
}
.nav-link:hover .char {
  transform: translateY(1.8em);
}
/* Stagger delays */
.char:nth-child(1) {
  transition-delay: 0.05s;
}
.char:nth-child(2) {
  transition-delay: 0.1s;
}
.char:nth-child(3) {
  transition-delay: 0.15s;
}
.char:nth-child(4) {
  transition-delay: 0.2s;
}
.char:nth-child(5) {
  transition-delay: 0.25s;
}
.char:nth-child(6) {
  transition-delay: 0.3s;
}
.char:nth-child(7) {
  transition-delay: 0.35s;
}
.char:nth-child(8) {
  transition-delay: 0.4s;
}
.char:nth-child(9) {
  transition-delay: 0.45s;
}
.char:nth-child(10) {
  transition-delay: 0.5s;
}

/* Button Styles */
.btn-collision {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: var(--btn-padding);
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.075rem;
  color: var(--primary-color);
  border: 0.0625rem solid var(--primary-color);
  background: transparent;
  transition: var(--transition-speed) ease-in-out;
  z-index: 1;
  border-radius: 0.25rem;
  text-decoration: none;
}
.btn-collision:hover {
  color: var(--font-color);
}
.btn-collision:before,
.btn-collision:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--primary-color);
  border-radius: 50%;
  z-index: -1;
  transition: all var(--transition-speed) ease-in-out;
}
.btn-collision:before {
  left: -1.875rem;
  transform: translate(-50%, -50%);
}
.btn-collision:after {
  right: -1.875rem;
  transform: translate(50%, -50%);
}
.btn-collision:hover:before {
  animation: collision-left 0.8s both;
}
.btn-collision:hover:after {
  animation: collision-right 0.8s both;
}

@keyframes collision-left {
  0% {
    left: -1.875rem;
  }
  50% {
    left: 50%;
    width: 1.5625rem;
    height: 1.5625rem;
  }
  100% {
    left: 50%;
    width: 21.875rem;
    height: 21.875rem;
  }
}
@keyframes collision-right {
  0% {
    right: -1.875rem;
  }
  50% {
    right: 50%;
    width: 1.5625rem;
    height: 1.5625rem;
  }
  100% {
    right: 50%;
    width: 21.875rem;
    height: 21.875rem;
  }
}

/* Mobile Toggle Logic */
.toggle-btn {
  display: none;
}
.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
  padding: 0;
}

@media (max-width: 48rem) {
  .navbar-collapse {
    display: none !important;
  }
  .toggle-btn {
    display: block !important;
    width: 1.875rem;
    height: 1.875rem;
    position: relative;
    cursor: pointer;
    z-index: 10001;
  }
}

.toggle-btn span {
  display: block;
  position: absolute;
  height: 0.125rem;
  width: 1.5rem;
  background: white;
  right: 0;
  transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.toggle-btn span:nth-child(1) {
  top: 0.375rem;
  width: 1rem;
}
.toggle-btn span:nth-child(2) {
  top: 0.875rem;
  width: 1.5rem;
}
.toggle-btn span:nth-child(3) {
  top: 1.375rem;
  width: 0.75rem;
}

.toggle-btn.open span:nth-child(1) {
  width: 1.5rem;
  top: 0.875rem;
  transform: rotate(45deg);
  background: var(--primary-color);
}
.toggle-btn.open span:nth-child(2) {
  opacity: 0;
}
.toggle-btn.open span:nth-child(3) {
  width: 1.5rem;
  top: 0.875rem;
  transform: rotate(-45deg);
  background: var(--primary-color);
}

/* Sidebar & Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(0.5rem);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
}
.overlay.active {
  opacity: 1;
  visibility: visible;
}

.hidden_pannel {
  position: fixed;
  top: 0;
  left: 0;
  width: 18.75rem;
  height: 100vh;
  background-color: var(--secondary-bg);
  z-index: 9999;
  padding: 2.5rem 1.875rem;
  box-shadow: 0.625rem 0 1.875rem rgba(0, 0, 0, 0.5);
  transform: translateX(-110%);
  visibility: hidden;
  transition:
    transform 0.6s cubic-bezier(0.85, 0, 0.15, 1),
    visibility 0.6s;
}

.hidden_pannel.active {
  transform: translateX(0%);
  visibility: visible;
}

.phone_navigation ul {
  list-style: none;
  padding: 0;
  margin-top: 2.5rem;
}
.phone_navigation li {
  margin-bottom: 1.25rem;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: 0.4s ease;
}

.phone_navigation a {
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 300;
  display: block;
  transition: 0.3s;
  position: relative;
}
.phone_navigation a::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 50%;
  width: 0px;
  height: 0.125rem;
  background: var(--primary-color);
  transition: 0.3s;
  opacity: 0;
}
.phone_navigation a:hover {
  color: var(--primary-color);
  transform: translateX(0.625rem);
}
.phone_navigation a:hover::before {
  width: 0.75rem;
  opacity: 1;
}

.hidden_pannel.active li {
  opacity: 1;
  transform: translateY(0);
}
.hidden_pannel.active li:nth-child(1) {
  transition-delay: 0.2s;
}
.hidden_pannel.active li:nth-child(2) {
  transition-delay: 0.3s;
}
.hidden_pannel.active li:nth-child(3) {
  transition-delay: 0.4s;
}
.hidden_pannel.active li:nth-child(4) {
  transition-delay: 0.5s;
}
.hidden_pannel.active li:nth-child(5) {
  transition-delay: 0.6s;
}

.close-circle {
  width: 2.1875rem;
  height: 2.1875rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  color: white;
}
.close-circle:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: rotate(90deg);
}

/* =========================================================
   6. HERO BANNER
   ========================================================= */
.heroBanner {
  background-color: var(--secondary-bg);
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: var(--section-padding);
  cursor: pointer !important;
  will-change: transform;
}

.grid-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgb(199 199 199 / 13%) 1px, transparent 1px),
    linear-gradient(rgba(16, 104, 244, 0.133) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  pointer-events: none;
  z-index: 1;
}

/* Lines Container */
.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  background: rgba(37, 99, 235, 0.05);
  overflow: hidden;
}

.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 25vh;
  width: 100%;
  top: -25%;
  left: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #2563eb 50%,
    #2563eb 100%
  );
  box-shadow: 0 0 0.9375rem 0.125rem var(--primary-color);
  animation: drop 6s infinite ease-in-out;
}

/* Line Alignment */
.line:nth-child(1) {
  left: calc(50% - 29.5625rem);
}
.line:nth-child(2) {
  left: calc(50% - 14.5625rem);
}
.line:nth-child(3) {
  left: calc(50% - 2.0625rem);
}
.line:nth-child(4) {
  left: calc(50% + 5.4375rem);
}
.line:nth-child(5) {
  left: calc(50% + 17.9375rem);
}
.line:nth-child(6) {
  left: calc(50% + 30.4375rem);
}
.line:nth-child(1)::after {
  animation-delay: 0.2s;
}
.line:nth-child(2)::after {
  animation-delay: 2.5s;
}
.line:nth-child(3)::after {
  animation-delay: 1s;
}
.line:nth-child(4)::after {
  animation-delay: 4.2s;
}
.line:nth-child(5)::after {
  animation-delay: 1.8s;
}
.line:nth-child(6)::after {
  animation-delay: 3.5s;
}

@keyframes drop {
  0% {
    top: -25%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Glow Effect */
.cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  background-image:
    linear-gradient(to right, rgb(16, 104, 244) 1px, transparent 1px),
    linear-gradient(rgb(16, 104, 244) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  mask-image: radial-gradient(
    circle 15.625rem at center,
    white 0%,
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    circle 15.625rem at center,
    white 0%,
    transparent 80%
  );
}

.heroContent {
  z-index: 10;
  padding-block: 3.125rem;
}
.heroContent .hero-content {
  flex: 1;
  max-width: 34.375rem;
}
.heroContent .hero-content h1 {
  font-family:
    pp mori,
    sans-serif;
  font-size: var(--h1-size);
  font-weight: 700 !important;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  color: var(--font-color);
}
#scramble-title {
  font-family: "PP Mori", sans-serif;
  font-size: var(--h1-size);
  font-weight: 700 !important;
  line-height: 1.2;
  margin-bottom: 1.3rem;
  color: var(--font-color);
  min-height: 2.4em;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

.hero-content #scramble-title .fixed-text,
.hero-content #scramble-title .change-text {
  color: var(--primary-color);
  font-size: var(--h1-size) !important;
  white-space: nowrap;
  display: inline-block;
}
.change-text {
  display: inline-block;
  white-space: nowrap;
}
.description {
  font-size: var(--body-font-size) !important;
  color: var(--font-color);
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 2.1875rem;
  width: 94%;
}
.btn-group .heroBtn {
  text-decoration: none;
  position: relative;
  display: inline-block;
  margin-left: 0.625rem;
  overflow: hidden;
  color: var(--font-color);
  padding: var(--btn-padding);
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.075rem;
  color: var(--primary-color);
  border: 0.0625rem solid var(--primary-color);
  background: transparent;
  transition: var(--transition-speed) ease-in-out;
  z-index: 1;
  border-radius: 0.25rem;
}
.btn-group .heroBtn:hover {
  color: var(--font-color);
}
.btn-group .heroBtn::before,
.btn-group .heroBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--primary-color);
  border-radius: 50%;
  z-index: -1;
  transition: all var(--transition-speed) ease-in-out;
}
.btn-group .heroBtn::before {
  left: -1.875rem;
  transform: translate(-50%, -50%);
}
.btn-group .heroBtn::after {
  right: -1.875rem;
  transform: translate(50%, -50%);
}
.btn-group .heroBtn:hover::before {
  animation: heroBtn-left 0.8s both;
}
.btn-group .heroBtn:hover::after {
  animation: heroBtn-right 0.8s both;
}

@keyframes heroBtn-left {
  0% {
    left: -1.875rem;
  }
  50% {
    left: 50%;
    width: 1.5625rem;
    height: 1.5625rem;
  }
  100% {
    left: 50%;
    width: 21.875rem;
    height: 21.875rem;
  }
}
@keyframes heroBtn-right {
  0% {
    right: -1.875rem;
  }
  50% {
    right: 50%;
    width: 1.5625rem;
    height: 1.5625rem;
  }
  100% {
    right: 50%;
    width: 21.875rem;
    height: 21.875rem;
  }
}

/* Orbit Animation */
@keyframes orbit-rotate {
  0% {
    transform: rotate(var(--start-angle)) translate(var(--radius))
      rotate(calc(-1 * var(--start-angle)));
  }
  to {
    transform: rotate(calc(var(--start-angle) + 360deg))
      translate(var(--radius)) rotate(calc(-1 * (var(--start-angle) + 360deg)));
  }
}

.scrolling-images-container {
  width: 100%;
  height: 37rem;
  min-height: 35rem;
  padding-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.orbit-system {
  position: relative;
  width: var(--orbit-size);
  height: var(--orbit-size);
}
.orbit-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(rgba(59, 130, 246, 0.4) 0px 0px 0.9375rem);
  pointer-events: none;
}
.orbit-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.icon-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: calc(var(--icon-size) / -2);
  margin-left: calc(var(--icon-size) / -2);
  width: var(--icon-size);
  height: var(--icon-size);
  pointer-events: auto;
  animation: orbit-rotate var(--duration) linear infinite;
}
.icon-wrapper img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  display: block;
}
.icon-wrapper:hover img {
  transform: scale(1.2);
}

/* Profile Image */
.profile-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}

.profile-img {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 110%;
  width: auto;
  object-fit: cover;
  pointer-events: none;
}

/* =========================================================
   7. THREEBOX SECTION
   ========================================================= */
.threeBox {
  width: 100%;
  height: auto;
  background-color: var(--main-bg);
  padding-block: var(--section-padding); /* Dynamic Padding */
}
#performanceSection > [class*="col-"] {
  display: flex;
  align-items: stretch;
}
#performanceSection .fastPerformance,
#performanceSection .card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
#performanceSection .performanceHeading {
  flex-grow: 1;
}
.fastPerformance .card {
  background: var(--secondary-bg) !important;
  border-radius: 1rem;
  box-shadow: 0 0.25rem 0.75rem var(--shadow-color);
  position: relative;
  padding: 1.875rem;
  overflow: hidden;
  justify-content: center;
  cursor: pointer;
  z-index: 99 !important;
}
.fastPerformance .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  background: radial-gradient(
    37.5rem circle at var(--x) var(--y),
    rgba(0, 98, 255, 0.9),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
}
.card:hover::before {
  opacity: 1;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0.125rem;
  background: var(--secondary-bg);
  border-radius: 1.125rem;
  z-index: -1;
}

.fastPerformance .cardIcon {
  background-color: var(--primary-color) !important;
  width: 4.375rem;
  height: 4.375rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fastPerformance .cardIcon li {
  list-style: none;
}
.fastPerformance .cardIcon li img {
  transition: transform 0.3s ease;
  display: block;
  width: 2.8125rem;
}

.fastPerformance:hover img {
  animation: simpleShake 0.4s ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes simpleShake {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(-0.25rem) translateX(0.125rem);
  }
  50% {
    transform: translateY(0.25rem) translateX(-0.125rem);
  }
  75% {
    transform: translateY(-0.125rem) translateX(0.0625rem);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}
.performanceHeading h2 {
  font-size: 1.375rem;
  color: var(--font-color);
  font-weight: 500;
  font-family:
    pp mori,
    sans-serif;
}
.performanceHeading p {
  font-size: 1rem;
  color: var(--font-color);
}

/* =========================================================
   8. ABOUT ME SECTION
   ========================================================= */
.aboutMe {
  width: 100%;
  height: auto;
  background-color: var(--main-bg);
  padding-bottom: var(--section-padding);
}

.aboutMe-img {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 20px;
  background: #1a1a1a;
  border: 2px solid #333;
  transition: all 0.4s ease;
  cursor: pointer;
}

.AboutIMg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.8);
  transition: all var(--transition-speed) var(--ease);
  display: block;
}

.about-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  color: var(--font-color);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s var(--ease);
}

.aboutMe-img:hover {
  border-color: var(--primary-color);
  box-shadow:
    0 5px 18px var(--accent-blue),
    0 0 10px rgba(0, 210, 255, 0.2);
}

.aboutMe-img:hover .AboutIMg {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.1);
}

.aboutMe-img:hover .about-overlay {
  opacity: 1;
  transform: translateY(0);
  color: var(--accent-blue);
}

.aboutMe-img:focus {
  outline: none;
  border-color: var(--primary-color);
}

@media (max-width: 480px) {
  .aboutMe-img {
    max-width: 100%;
  }
}
.aboutMe-subTitle span {
  display: inline-block;
  position: relative;
  font-weight: var(--font-weight);
  color: var(--primary-color);
  text-transform: capitalize;
  z-index: 1;
  padding-left: 4.375rem;
  font-family: var(--heading-font);
}
.aboutMe-subTitle span::after {
  position: absolute;
  top: 0.8125rem;
  content: "";
  left: 0;
  width: 3.125rem;
  height: 0.0625rem;
  background: var(--primary-color);
}
.aboutMe-heading h2 {
  margin-block: 0.625rem;
  font-weight: 500;
  display: block;
  color: var(--font-color);
  line-height: 1.2;
  font-size: var(--h2-size);
}
.aboutMe-mainContent h5 {
  font-size: 1.125rem;
  color: var(--font-color);
  font-weight: 400;
  margin-block: 0.9375rem;
  line-height: 1.8;
  display: block;
}
.aboutMe-mainContent p {
  color: var(--body-font);
  font-size: var(--body-font-size);
  margin-top: 0.625rem;
}

/* Button Styles */
.btn-AboutME {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: var(--font-color);
  padding: var(--btn-padding);
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.075rem;
  color: var(--primary-color);
  border: 0.0625rem solid var(--primary-color);
  background: transparent;
  transition: var(--transition-speed) ease-in-out;
  z-index: 1;
  margin-top: 0.625rem;
  border-radius: 0.25rem;
}
.btn-AboutME:hover {
  color: var(--font-color);
}
.btn-AboutME:before,
.btn-AboutME:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--primary-color);
  border-radius: 50%;
  z-index: -1;
  transition: all var(--transition-speed) ease-in-out;
}
.btn-AboutME:before {
  left: -1.875rem;
  transform: translate(-50%, -50%);
}
.btn-AboutME:after {
  right: -1.875rem;
  transform: translate(50%, -50%);
}
.btn-AboutME:hover:before {
  animation: aboutMe-left 0.8s both;
}
.btn-AboutME:hover:after {
  animation: aboutMe-right 0.8s both;
}

@keyframes aboutMe-left {
  0% {
    left: -1.875rem;
  }
  50% {
    left: 50%;
    width: 1.5625rem;
    height: 1.5625rem;
  }
  100% {
    left: 50%;
    width: 21.875rem;
    height: 21.875rem;
  }
}
@keyframes aboutMe-right {
  0% {
    right: -1.875rem;
  }
  50% {
    right: 50%;
    width: 1.5625rem;
    height: 1.5625rem;
  }
  100% {
    right: 50%;
    width: 21.875rem;
    height: 21.875rem;
  }
}

/* =========================================================
   9. TECHNICAL SKILLS SECTION
   ========================================================= */
.TechnicalSkills {
  width: 100%;
  background-color: var(--main-bg);
  padding-bottom: var(--section-padding);
  color: var(--font-color);
}
.technical-Heading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 9.375rem;
  margin-bottom: 5rem;
}
.technical-Heading h2 {
  font-size: clamp(3.125rem, 10vw, 7.5rem);
  text-transform: uppercase;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 0.0625rem var(--stroke-color);
  position: absolute;
  z-index: 1;
  white-space: nowrap;
}
.technical-Heading span {
  font-size: clamp(1.875rem, 5vw, 3.125rem);
  color: var(--font-color);
  font-weight: 500;
  letter-spacing: 0.3125rem;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
}

.webDevolpment span {
  display: inline-block;
  position: relative;
  font-weight: var(--font-weight);
  color: var(--primary-color);
  text-transform: capitalize;
  z-index: 1;
  padding-left: 4.375rem;
  font-family: var(--heading-font);
}
.webDevolpment span::after {
  position: absolute;
  top: 50%;
  content: "";
  left: 0;
  width: 3.125rem;
  height: 0.0625rem;
  background: var(--primary-color);
}
.webDevolpment-skill h5 {
  font-size: 1.75rem;
  margin-block: 1.25rem;
  font-weight: 700;
}
.webDevolpment-skill p {
  color: var(--body-font);
  font-size: var(--body-font-size);
  line-height: 1.6;
}

/* Visual Container */
.visual-container {
  height: 31.25rem;
  display: flex;
  justify-content: center;
  gap: 1.875rem;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}
.scroll-column {
  width: 6.25rem;
  display: flex;
  flex-direction: column;
}
.track {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  padding: 1.25rem 0;
  align-items: center;
}
.track img {
  width: 5rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  filter: drop-shadow(0 0 0.3125rem rgba(0, 0, 0, 0.3));
}
.track img:hover {
  transform: scale(1.3) rotate(-5deg);
  filter: drop-shadow(0 0 0.9375rem currentColor);
  z-index: 10;
}

/* Skill Icons Colors */
.icon-html {
  color: var(--color-html);
}
.icon-css {
  color: var(--color-css);
}
.icon-js {
  color: var(--color-js);
}
.icon-node {
  color: var(--color-node);
}
.icon-sass {
  color: var(--color-sass);
}
.icon-react {
  color: var(--color-react);
}
.icon-php {
  color: var(--color-php);
}
.icon-bootstrap {
  color: var(--color-bootstrap);
}
.icon-wordpress {
  color: var(--color-wordpress);
}
.icon-angular {
  color: var(--color-angular);
}
.icon-tailwind {
  color: var(--color-tailwind);
}
.icon-mongodb {
  color: var(--color-mongodb);
}
.icon-typescript {
  color: var(--color-typescript);
}

/* Animations */
.move-down {
  animation: scrollDown var(--speed) linear infinite;
}
.move-up {
  animation: scrollUp var(--speed) linear infinite;
}

@keyframes scrollUp {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-50%);
  }
}
@keyframes scrollDown {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0%);
  }
}

/* =========================================================
   10. GRAPHIC DESIGN SKILLS SECTION
   ========================================================= */
.GraphicDesignSkills {
  width: 100%;
  background-color: var(--main-bg);
  padding-bottom: var(--section-padding); /* Dynamic Padding */
  color: var(--font-color);
}
.design-Heading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 9.375rem;
  margin-bottom: 5rem;
}
.design-Heading h2 {
  font-size: clamp(3.125rem, 10vw, 7.5rem);
  text-transform: uppercase;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 0.0625rem var(--stroke-color);
  position: absolute;
  z-index: 1;
  white-space: nowrap;
}
.design-Heading span {
  font-size: clamp(1.875rem, 5vw, 3.125rem);
  color: var(--font-color);
  font-weight: 500;
  letter-spacing: 0.3125rem;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
}

/* Visual Container for Design */
.design-visual-container {
  height: 31.25rem;
  display: flex;
  justify-content: center;
  gap: 1.875rem;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 85%,
    transparent
  );
}
.design-scroll-column {
  width: 6.25rem;
  display: flex;
  flex-direction: column;
}
.design-track {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  padding: 1.25rem 0;
  align-items: center;
}
.design-track img {
  width: 5rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  filter: drop-shadow(0 0 0.3125rem rgba(0, 0, 0, 0.3));
}
.design-track img:hover {
  transform: scale(1.3) rotate(-5deg);
  filter: drop-shadow(0 0 0.9375rem currentColor);
  z-index: 10;
}

/* Design Brand Colors */
.clr-photoshop {
  color: var(--color-ps);
}
.clr-illustrator {
  color: var(--color-ai);
}
.clr-figma {
  color: var(--color-figma);
}
.clr-indesign {
  color: var(--color-indesign);
}
.clr-corel {
  color: var(--color-corel);
}
.clr-aftereffects {
  color: var(--color-ae);
}
.clr-premiere {
  color: var(--color-pr);
}
.clr-canva {
  color: var(--color-canva);
}
.clr-xd {
  color: var(--color-xd);
}
.clr-lightroom {
  color: var(--color-ps);
}
.icon-filmora {
  color: var(--icon-filmora);
}
.icon-audition {
  color: var(--icon-audition);
}

.design-move-down {
  animation: designScrollDown var(--design-speed) linear infinite;
}
.design-move-up {
  animation: designScrollUp var(--design-speed) linear infinite;
}

@keyframes designScrollDown {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes designScrollUp {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-50%);
  }
}

/* Creative Design CSS */
.creativeDesign span {
  display: inline-block;
  position: relative;
  font-weight: var(--font-weight);
  color: var(--primary-color);
  text-transform: capitalize;
  z-index: 1;
  padding-left: 4.375rem;
  font-family: var(--heading-font);
}
.creativeDesign span::after {
  position: absolute;
  top: 50%;
  content: "";
  left: 0;
  width: 3.125rem;
  height: 0.0625rem;
  background: var(--primary-color);
}
.creativeDesign-skill h5 {
  font-size: 1.75rem;
  margin-block: 1.25rem;
  font-weight: 700;
}
.creativeDesign-skill p {
  color: var(--body-font);
  font-size: var(--body-font-size);
  line-height: 1.6;
}

/* =========================================================
   11. HORIZONTAL SLIDER
   ========================================================= */
.hero-section {
  width: 100%;
  /* Change from 115vh to min-height */
  min-height: 100vh;
  height: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--slider-bg);
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.hero-container {
  width: 100%;
  height: 100%; /* Keeps it relative to hero-section */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.slider-wrapper {
  /* Change top: 15% to something more flexible */
  position: relative;
  display: flex;
  align-items: center; /* Keeps images centered vertically */
  gap: 20px !important;
  padding: 0 50vw;
  width: max-content;
  /* REMOVE fixed height: 80vh; */
  height: auto;
  opacity: 0;
  will-change: transform;
}

.slide {
  width: 28rem;
  height: 28rem;
  max-width: 80vw;
  max-height: 80vw;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  overflow: hidden;
  transform: scale(0.9) perspective(1000px) rotateY(0deg);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  position: relative;
  cursor: pointer;
}
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow 0.4s ease;
  z-index: 2;
  pointer-events: none;
}

.slide:hover {
  transform: scale(1) perspective(1000px) rotateY(0deg) translateY(-15px);
  box-shadow:
    0 25px 45px rgba(59, 130, 246, 0.3),
    0 0 25px rgba(59, 130, 246, 0.2);
  z-index: 10;
}

.slide:hover::after {
  box-shadow: inset 0 0 0 2px var(--primary-color); /* Blue Border */
}

.slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  filter: grayscale(100%) brightness(0.5);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide:hover img {
  display: block;
  filter: grayscale(0%) brightness(1.1);
  transform: scale(1.15);
}

.overlay-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--font-color);
  mix-blend-mode: exclusion;
  z-index: 10;
  pointer-events: none;
}

#project-text {
  font-size: 15vw;
  font-weight: 900;
  margin: 0;
  color: black;
  text-transform: uppercase;
  line-height: 1;
  transform: scale(0);
  white-space: nowrap;
}

/* ===============================================================
            Web Dovelopment CSS
================================================================== */

#portfolio-slider {
  width: 100%;
  background: var(--bg-dark);
  padding: var(--section-padding);
  overflow: hidden !important;
}
.Portfolio-Heading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 9.375rem;
  margin-bottom: 5rem;
}
.Portfolio-Heading h2 {
  font-size: clamp(3.125rem, 10vw, 7.5rem);
  text-transform: uppercase;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 0.0625rem var(--stroke-color);
  position: absolute;
  z-index: 1;
  white-space: nowrap;
}
.Portfolio-Heading span {
  font-size: clamp(1.875rem, 5vw, 3.125rem);
  color: var(--font-color);
  font-weight: 500;
  letter-spacing: 0.3125rem;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
}
#portfolio-slider .swiper {
  width: 100%;
  padding-bottom: 60px;
}
#portfolio-slider .swiper-slide {
  height: 370px;
  width: 352px;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}

#portfolio-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: top;
  transition: transform 0.3s ease;
}

#portfolio-slider .swiper-slide:hover img {
  transform: scale(1.05);
}

#portfolio-slider .swiper-button-next,
#portfolio-slider .swiper-button-prev {
  display: none !important;
}

#portfolio-slider .swiper-pagination {
  bottom: 0px !important;
}

#portfolio-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #bbb;
  opacity: 1;
  transition: all 0.3s ease;
  border-radius: 50%;
  margin: 0 6px !important;
}

#portfolio-slider .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 20px;
  background: var(--primary-color);
}

.fancybox__content img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  display: block !important;
  pointer-events: auto !important;
}

.fancybox__content {
  background: #fff !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.fancybox__container.is-closing {
  opacity: 0 !important;
  transition: opacity 0.1s ease-out !important;
}

.f-button.is-close-btn {
  transition: none !important;
}
.fancybox__content::-webkit-scrollbar {
  width: 6px;
}
.fancybox__content::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}
/* =========================================================
   12. SERVICES CSS
   ========================================================= */
.services {
  width: 100%;
  background-color: var(--main-bg);
}
.servicesContent {
  background-color: var(--main-bg);
  padding-block: var(--section-padding); /* Dynamic Padding */
  overflow: hidden !important;
}

.service-card {
  padding-block: 0.625rem;
  background-color: var(--secondary-bg) !important;
  border-radius: 1.5rem;
  overflow: hidden !important;
  position: relative;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    border-color 0.3s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.3) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.3) 1.5px, transparent 1.5px);
  background-size: 1.875rem 1.875rem;
  mask-image: radial-gradient(
    13.75rem circle at var(--mouse-x) var(--mouse-y),
    black 0%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    13.75rem circle at var(--mouse-x) var(--mouse-y),
    black 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 1.5rem;
  padding: 0.125rem;
  background: radial-gradient(
    21.875rem circle at var(--mouse-x) var(--mouse-y),
    var(--primary-color),
    transparent 60%
  );
  -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;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.service-card:hover::before,
.service-card:hover::after {
  opacity: 1;
}
.service-card:hover {
  transform: scale(1.03);
  border-color: rgba(59, 130, 246, 0.5);
}

.service-inner {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
}
.service-icon {
  font-size: 3rem;
  margin-bottom: 1.25rem;
  color: #ffffff;
  transition: all 0.4s ease;
  display: inline-block;
}
.service-card:hover .service-icon {
  color: var(--primary-color);
  filter: drop-shadow(0 0 0.9375rem var(--primary-color));
  animation: iconShake 1.5s ease-in-out infinite;
}
@keyframes iconShake {
  0% {
    transform: translateY(-0.625rem) scale(1.15) rotate(0deg);
  }
  25% {
    transform: translateY(-0.625rem) scale(1.15) rotate(5deg);
  }
  50% {
    transform: translateY(-0.625rem) scale(1.15) rotate(-5deg);
  }
  75% {
    transform: translateY(-0.625rem) scale(1.15) rotate(3deg);
  }
  100% {
    transform: translateY(-0.625rem) scale(1.15) rotate(0deg);
  }
}

.service-title {
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--font-color);
  margin: 0;
  letter-spacing: -0.03125rem;
}
.service-count {
  color: var(--body-font);
  font-size: 1rem;
  margin-top: 0.625rem;
  font-weight: 400;
  transition: all 0.5s ease-in-out;
}
.service-card:hover .service-count {
  color: var(--primary-color);
}

/* =========================================================
   13. EDUCATION SECTION
   ========================================================= */
.education {
  background-color: var(--main-bg);
  padding-bottom: var(--section-padding); /* Dynamic Padding */
  width: 100%;
}
.education-Heading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 9.375rem;
  margin-bottom: 3.75rem;
}
.education-Heading h2 {
  font-size: clamp(3.125rem, 10vw, 7.5rem);
  text-transform: uppercase;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 0.0625rem var(--stroke-color);
  position: absolute;
  z-index: 1;
  white-space: nowrap;
}
.education-Heading span {
  font-size: clamp(1.875rem, 5vw, 3.125rem);
  color: var(--font-color);
  font-weight: 500;
  letter-spacing: 0.3125rem;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
}

.education-section {
  background-color: var(--section-dark-bg);
  position: relative;
}
.edu-item {
  background: linear-gradient(145deg, var(--secondary-bg) 0%, #1a1a1a 100%);
  padding: 3.125rem 1.875rem;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 0.0625rem solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: default;
  z-index: 1;
}
.edu-icon-container {
  min-width: 4.375rem;
  height: 4.375rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1.5625rem;
  position: relative;
  overflow: hidden;
  z-index: 2;
  transition: 0.4s ease;
  box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.3);
}
.edu-icon-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--edu-accent);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.edu-icon-container i {
  font-size: 1.75rem;
  color: var(--edu-accent);
  transition: 0.4s ease;
  z-index: 3;
}
.edu-info {
  z-index: 2;
  flex: 1;
}
.edu-info h3 {
  color: var(--font-color);
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  letter-spacing: 0.03125rem;
}
.edu-info p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
}

.edu-step-number {
  position: absolute;
  right: 0.625rem;
  bottom: -0.9375rem;
  top: auto;
  transform: none;
  font-size: 5rem;
  font-weight: 900;
  -webkit-text-stroke: 0.0625rem rgba(255, 255, 255, 0.05);
  color: transparent;
  pointer-events: none;
  transition: 0.4s;
  z-index: 0;
  font-family: sans-serif;
}
.edu-item:hover {
  background: #1f1f1f;
  transform: translateY(-0.4375rem);
  border-color: var(--edu-accent);
  box-shadow: 0 0.9375rem 2.5rem rgba(0, 0, 0, 0.4);
}
.edu-item:hover .edu-icon-container::before {
  transform: scale(1);
}
.edu-item:hover .edu-icon-container i {
  color: var(--font-color);
  transform: scale(1.1);
}
.edu-item:hover .edu-icon-container {
  border-color: transparent;
  box-shadow: 0 0 1.5625rem rgba(var(--edu-accent-rgb), 0.4);
}
.edu-item:hover .edu-step-number {
  color: rgba(255, 255, 255, 0.05);
  -webkit-text-stroke: 0px;
  transform: scale(1.1) translateX(-0.625rem);
}

@media (max-width: 36rem) {
  .edu-item {
    flex-direction: column;
    text-align: center;
    padding: 1.875rem 1.25rem;
    align-items: center;
  }
  .edu-icon-container {
    margin-right: 0;
    margin-bottom: 0.9375rem;
  }
  .edu-step-number {
    top: 0.625rem;
    right: 0.625rem;
    bottom: auto;
    font-size: 3.125rem;
  }
}

/* =========================================================
   14. FORM SECTION
   ========================================================= */
.formSection {
  background-color: var(--main-bg);
  color: var(--font-color);
  font-family: "Outfit", sans-serif;
  position: relative;
  overflow: hidden;
  padding-bottom: var(--section-padding); /* Dynamic Padding */
}
.glow-shape {
  position: absolute;
  width: 37.5rem;
  height: 37.5rem;
  background: var(--primary-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(11.25rem);
  opacity: 0.3;
  z-index: 1 !important;
  pointer-events: none;
}

.glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(2.5rem);
  border: 0.0625rem solid var(--border-color);
  border-radius: 1.25rem;
  box-shadow: 0 1.875rem 3.75rem rgba(0, 0, 0, 0.6);
  overflow: hidden;
  width: 100%;
}

.info-col {
  padding: 2.5rem;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.02), transparent);
  border-right: 0.0625rem solid var(--border-color);
}

.highlight-text {
  font-size: 2.125rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-secondary {
  color: var(--body-font);
  font-size: 0.875rem;
}
.contact-box {
  background: rgba(255, 255, 255, 0.02);
  padding: 0.625rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 0.0625rem solid transparent;
}

.icon-square {
  width: 2.1875rem;
  height: 2.1875rem;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue);
}
.social-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-gray);
  border: 0.0625rem solid var(--border-color);
  transition: all 0.3s ease;
  text-decoration: none;
}
.social-icon:hover {
  background: var(--accent-blue);
  color: white;
  transform: translateY(-0.1875rem);
  border-color: var(--accent-blue);
  box-shadow: 0 0.3125rem 0.9375rem rgba(59, 130, 246, 0.4);
}

.form-col {
  padding: 2.5rem;
  background: rgba(0, 0, 0, 0.4);
}
.form-label {
  color: var(--body-font);
  font-size: 0.8rem;
  margin-bottom: 0.3125rem;
  margin-left: 0.125rem;
}
.form-control,
.form-select {
  background-color: var(--input-bg);
  border: 0.0625rem solid var(--border-color);
  color: white;
  padding: 0.75rem 0.9375rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-blue);
  color: white;
  box-shadow: 0 0 0 0.1875rem rgba(59, 130, 246, 0.2);
  outline: none;
}
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233B82F6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option {
  background-color: #000000;
  color: white;
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #ef4444;
  background-image: none;
  animation: shake 0.3s;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.3125rem);
  }
  75% {
    transform: translateX(0.3125rem);
  }
}

.btn-gradient {
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  border-radius: 0.5rem;
  width: 100%;
  transition: 0.3s;
}
.btn-gradient:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.625rem 1.5625rem -0.3125rem rgba(59, 130, 246, 0.5);
  color: white;
}

/* Popup */
.custom-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  backdrop-filter: blur(0.5rem);
}
.custom-popup.active {
  opacity: 1;
  pointer-events: all;
}
.popup-content {
  background: #0a0a0f;
  padding: 2.5rem;
  border-radius: 1rem;
  text-align: center;
  border: 0.0625rem solid var(--border-color);
  transform: scale(0.9);
  transition: 0.3s;
  width: 90%;
  max-width: 21.875rem;
}
.custom-popup.active .popup-content {
  transform: scale(1);
}

@media (max-width: 62rem) {
  .info-col {
    border-right: none;
    border-bottom: 0.0625rem solid var(--border-color);
    padding: 1.875rem;
  }
  .form-col {
    padding: 1.875rem;
  }
}

/* =========================================================
   15. FOOTER CSS
   ========================================================= */
@keyframes rotate-center {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes float-vertical {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.875rem);
  }
}
@keyframes float-horizontal {
  0%,
  100% {
    transform: translateX(0) rotate(45deg);
  }
  50% {
    transform: translateX(2.5rem) rotate(55deg);
  }
}

.creative-footer {
  background-color: #050505;
  color: #ffffff;
  padding-top: var(--section-padding); /* Dynamic Padding */
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.shape-ring {
  position: absolute;
  top: -6.25rem;
  right: -6.25rem;
  width: 31.25rem;
  height: 31.25rem;
  border: 0.125rem dashed rgba(13, 110, 253, 0.15);
  border-radius: 50%;
  z-index: -1;
  animation: rotate-center 60s linear infinite;
  pointer-events: none;
}
.shape-glow {
  position: absolute;
  bottom: -3.125rem;
  left: -6.25rem;
  width: 25rem;
  height: 25rem;
  background: radial-gradient(
    circle,
    rgba(13, 110, 253, 0.4) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(3.125rem);
  z-index: -1;
  animation: float-vertical 8s ease-in-out infinite;
}
.shape-poly {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 6.25rem;
  height: 6.25rem;
  border: 0.3125rem solid rgba(255, 255, 255, 0.03);
  border-radius: 0.9375rem;
  z-index: -1;
  transform: rotate(45deg);
  animation: float-horizontal 10s ease-in-out infinite;
  backdrop-filter: blur(0.125rem);
}
.bg-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px
  );
  background-size: 2.5rem 2.5rem;
  opacity: 0.3;
  z-index: -2;
  pointer-events: none;
}
.logo-text,
.logo-highlight {
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.0625rem;
  margin-bottom: 0;
}
.logo-highlight {
  color: #0d6efd;
  text-shadow: 0 0 0.9375rem rgba(13, 110, 253, 0.6);
}
.footer-tagline {
  color: #bbb;
  margin-top: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 90%;
}

.social-icons-creative {
  margin-top: 1.5625rem;
}
.social-icons-creative a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.625rem;
  height: 2.625rem;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ccc;
  border-radius: 50%;
  margin-right: 0.625rem;
  text-decoration: none;
  transition: all 0.4s;
  border: 0.0625rem solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.social-icons-creative a:hover {
  background-color: #0d6efd;
  color: #fff;
  transform: translateY(-0.3125rem);
  border-color: #0d6efd;
  box-shadow: 0 0.3125rem 1.25rem rgba(13, 110, 253, 0.4);
}
.footer-heading {
  font-size: 1.2rem;
  margin-bottom: 1.5625rem;
  font-weight: 600;
  position: relative;
  display: inline-block;
}
.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 2.5rem;
  height: 0.1875rem;
  background: linear-gradient(90deg, #0d6efd, transparent);
  border-radius: 0.125rem;
}
.footer-links-creative {
  list-style: none;
  padding: 0;
}
.footer-links-creative li {
  margin-bottom: 0.75rem;
}
.footer-links-creative a {
  color: #aaa;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}
.footer-links-creative a:hover {
  color: #fff;
  transform: translateX(0.625rem);
  text-shadow: 0 0 0.3125rem rgba(255, 255, 255, 0.2);
}
.footer-links-creative a i {
  margin-right: 0.625rem;
  color: #0d6efd;
  font-size: 0.8rem;
  transition: 0.3s;
}
.footer-links-creative a:hover i {
  margin-right: 0.9375rem;
}

.contact-info-creative li {
  display: flex;
  margin-bottom: 1.125rem;
  color: #aaa;
  align-items: center;
  font-size: 0.95rem;
}
.contact-icon-box {
  min-width: 2.375rem;
  height: 2.375rem;
  background: rgba(13, 110, 253, 0.08);
  color: #0d6efd;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  margin-right: 0.9375rem;
  font-size: 1rem;
  transition: 0.3s;
  border: 0.0625rem solid rgba(13, 110, 253, 0.1);
}
.contact-info-creative li:hover .contact-icon-box {
  background: #0d6efd;
  color: #fff;
  box-shadow: 0 0 0.9375rem rgba(13, 110, 253, 0.4);
  transform: rotate(10deg);
}

.newsletter-box-creative {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(0.9375rem);
  padding: 1.875rem;
  border-radius: 1.25rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.5);
  position: relative;
}
.newsletter-box-creative::before {
  content: "";
  position: absolute;
  top: -1.25rem;
  right: -1.25rem;
  width: 5rem;
  height: 5rem;
  background: #0d6efd;
  filter: blur(3.125rem);
  opacity: 0.4;
  z-index: -1;
}
.newsletter-text {
  color: #aaa;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.custom-input-group-creative {
  background: rgba(0, 0, 0, 0.4);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 3.125rem;
  padding: 0.3125rem;
  display: flex;
  align-items: center;
  transition: 0.3s;
}
.custom-input-group-creative:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 0 0.9375rem rgba(13, 110, 253, 0.2);
}
.custom-input-group-creative input {
  background: transparent;
  border: none;
  color: var(--font-color);
  padding-left: 1.25rem;
  width: 100%;
  outline: none;
  font-size: 0.9rem;
}
.custom-input-group-creative button {
  background: linear-gradient(135deg, #0d6efd, #0043a8);
  color: var(--font-color);
  border: none;
  border-radius: 50%;
  width: 2.625rem;
  height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  cursor: pointer;
  flex-shrink: 0;
}
.custom-input-group-creative button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0.9375rem rgba(13, 110, 253, 0.5);
}

.copyright-area {
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(0.3125rem);
  padding: 1.5625rem 0;
  margin-top: 3.75rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.copyright-text {
  color: #888;
  font-size: 0.9rem;
  margin: 0;
}
.copyright-highlight {
  color: var(--font-color);
  font-weight: 500;
}

/* ---------------------------------------------------------
   XL Devices (Desktops, less than 1200px / 75rem)
   --------------------------------------------------------- */
@media screen and (max-width: 75rem) {
  :root {
    --section-padding: 5rem; /* 80px */
  }
}
/* ---------------------------------------------------------
   DESKTOP FIX (993px and up)
   Scales BOTH Orbit and Hero Content dynamically.
   Does not affect anything below 992px.
   --------------------------------------------------------- */
@media screen and (min-width: 993px) {
  :root {
    --orbit-size: clamp(21.875rem, 35vw, 30.25rem);
    --h1-size: clamp(2.2rem, 3.5vw, 2.8rem);
    --body-font-size: clamp(1rem, 1.2vw, 1.2rem);
  }

  .heroContent .hero-content {
    max-width: clamp(28rem, 40vw, 38rem);
  }

  .btn-group .heroBtn {
    font-size: clamp(0.9rem, 1.1vw, 1.15rem);
    padding: clamp(0.6rem, 1vw, 0.8rem) clamp(1.5rem, 2vw, 2rem);
  }
  .heroBannerRow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
  }

  .scrolling-images-container {
    height: auto;
    min-height: 35rem;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* ---------------------------------------------------------
   LG Devices (Laptops/Small Desktops, less than 992px / 62rem)
   --------------------------------------------------------- */
@media screen and (min-width: 48rem) and (max-width: 62rem) {
  :root {
    --section-padding: 4.375rem; /* 70px */
  }

  .container,
  .container-md,
  .container-sm {
    max-width: 920px !important;
  }
  .Fixed_Container {
    padding-inline: 3rem !important;
  }
  .GraphicVideoSkill,
  .heroBannerRow {
    flex-direction: column-reverse !important;
    gap: 60px !important;
  }
  .heroBannerRow,
  .aboutMe .row,
  .TechnicalSkills .row,
  #performanceSection > [class*="col-"] {
    flex-direction: column;
  }
  .navbar-brand img {
    width: 4rem;
  }
  .nav-link {
    padding: 0 !important;
  }
  .nav-link span {
    font-size: 0.9rem;
  }
  .navBtn {
    font-size: 0.9rem;
    padding: 10px 14px !important;
  }
  .heroContent .hero-content {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .heroBanneContaint {
    justify-content: center !important;
    width: 100%;
    text-align: center;
  }

  .heroContent .hero-content h1,
  .heroContent .description {
    text-align: center;
  }
  .heroContent .hero-content h1 {
    text-align: center;
  }
  .heroContent .description {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .btn-group {
    justify-content: center;
    display: flex;
  }
  .fastPerformance .cardIcon {
    margin: auto !important;
  }
}

/* ---------------------------------------------------------
   MD Devices (less than 768px / 48rem)
   --------------------------------------------------------- */
@media screen and (max-width: 48rem) {
  :root {
    --section-padding: 3.75rem; /* 60px */
  }
  .container,
  .container-sm {
    max-width: 38.75rem !important;
  }
  #scramble-title #fixed-text,
  #scramble-title #change-text,
  #scramble-title {
    font-size: 2.6rem !important;
    line-height: 1.5;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .GraphicVideoSkill,
  .heroBannerRow {
    flex-direction: column-reverse !important;
    gap: 5rem !important;
  }

  .heroBanneContaint {
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .hero-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 100% !important;
  }

  #scramble-title,
  .description {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .btn-group {
    justify-content: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .btn-group .heroBtn {
    margin-left: 0 !important;
  }

  .navbar-nav {
    margin-right: 0 !important;
  }

  .navbar-collapse {
    display: none;
  }

  .scrolling-images-container {
    height: auto !important;
    min-height: 28rem !important;
    padding-top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .orbit-system {
    transform: scale(0.95) !important;
  }
}
/* ===============================================================================
                         mEDIA QUery 0rem nd 20rem only h1 nd h2 size
==================================================================================== */
@media screen and (min-width: 20rem) and (max-width: 38rem) {
  :root {
    --h1-size: clamp(1.6rem, 0.35rem + 6.27vw, 2.6rem) !important;
    --h2-size: clamp(2rem, 0.5rem + 7.53vw, 3.2rem) !important;
  }
  #scramble-title #fixed-text,
  #scramble-title #change-text,
  #scramble-title {
    font-size: var(--h1-size) !important;
    line-height: 1.5;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .Portfolio-Heading h2,
  .technical-Heading h2,
  .design-Heading h2,
  .education-Heading h2 {
    font-size: var(--h2-size) !important;
  }
}
/* ---------------------------------------------------------
   SM Devices (Large Phones, less than 576px / 36rem)
   --------------------------------------------------------- */
@media screen and (max-width: 36rem) {
  :root {
    --section-padding: 3.125rem;
  }

  .container {
    padding-inline: 1rem;
    max-width: 32rem !important;
  }

  .GraphicVideoSkill,
  .heroBannerRow {
    flex-direction: column-reverse !important;
    gap: 4rem !important;
  }

  h2 {
    font-size: 2.4rem !important;
  }
  .card {
    text-align: center !important;
  }
  .fastPerformance .cardIcon {
    margin: auto !important;
  }
  .performanceHeading H2 {
    font-size: 1.8rem !important;
  }
  .aboutMe-mainContent h5 {
    font-size: 1.4rem;
    line-height: 2rem !important;
  }
  .technical-Heading,
  .design-Heading,
  .education-Heading {
    margin-bottom: 0 !important;
  }
  .edu-step-number {
    font-size: 2rem !important;
  }
  .Portfolio-Heading span,
  .technical-Heading span,
  .design-Heading span,
  .education-Heading span {
    font-size: 0.8rem;
  }
  .edu-step-number {
    font-size: 1.4rem;
  }
  .FooterSecondCol,
  .FooterThreeCol {
    display: flex !important;
    justify-content: center !important;
  }

  .orbit-system {
    transform: scale(0.85) !important;
  }
  .scrolling-images-container {
    height: auto !important;
    min-height: 25rem !important;
    padding-top: 0 !important;
  }
  .lines {
    display: none;
  }
}
/* ===============================================================================
                         mEDIA QUery 0rem nd 20rem only h1 nd h2 size
==================================================================================== */
@media screen and (min-width: 0rem) and (max-width: 20rem) {
  :root {
    --h1-size: clamp(0.6rem, 8vw, 1.6rem) !important;
    --h2-size: clamp(1rem, 10vw, 2rem) !important;
  }
  #scramble-title #fixed-text,
  #scramble-title #change-text,
  #scramble-title {
    font-size: var(--h1-size) !important;
    line-height: 2;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .Portfolio-Heading h2,
  .technical-Heading h2,
  .design-Heading h2,
  .education-Heading h2 {
    font-size: var(--h2-size) !important;
  }
}
/* ---------------------------------------------------------
   XS Devices (Small Phones, less than 320px / 20rem)
   --------------------------------------------------------- */
@media screen and (max-width: 20rem) {
  :root {
    --orbit-size: 85vw !important;
    --section-padding: 2rem;
  }
  .GraphicVideoSkill,
  .heroBannerRow {
    flex-direction: column-reverse !important;
    gap: 3rem !important;
  }
}

/* ---------------------------------------------------------
   XS Devices (Small Phones, less than 320px / 20rem)
   --------------------------------------------------------- */
@media screen and (max-width: 20rem) {
  :root {
    --orbit-size: 85vw !important;
    --section-padding: 2rem; /* 32px */
  }
  .GraphicVideoSkill,
  .heroBannerRow {
    flex-direction: column-reverse !important;
  }
  p,
  span,
  li,
  a,
  .description,
  .aboutMe-mainContent p,
  .footer-tagline,
  .copyright-text {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5 !important;
  }

  .btn-collision,
  .heroBtn,
  .btn-AboutME {
    padding: 0.5rem 1rem;
    font-size: 0.75rem; /* 12px for buttons */
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    margin-bottom: 0.5rem;
  }

  .btn-group {
    flex-direction: column;
    width: 80%;
  }
  .heroBtn {
    margin-top: 0.5rem;
  }

  .performanceHeading h2 {
    font-size: 1.3rem !important;
  }
  .aboutMe-heading h2 {
    font-size: 2rem !important;
  }
  .aboutMe-mainContent h5 {
    font-size: 1rem !important;
    line-height: 1.6rem !important;
  }
  .technical-Heading,
  .design-Heading,
  .education-Heading {
    margin-bottom: 0 !important;
  }
  .webDevolpment-skill h5,
  .creativeDesign-skill h5 {
    font-size: 1.3rem;
    line-height: 2rem;
  }
  .slide {
    width: 22.125rem;
    height: 22.125rem;
  }
  .logo-highlight {
    font-size: 2rem !important;
    font-weight: 600;
    font-style: oblique;
  }
  .design-visual-container,
  .visual-container {
    gap: 0.8rem !important;
  }
  .design-track,
  .track {
    gap: 2rem;
  }

  .design-track img,
  .track img {
    width: 4.5rem;
  }
  .edu-step-number {
    font-size: 1.5rem !important;
  }
  .btn-gradient {
    font-size: 0.8rem !important;
    font-weight: 500;
  }

  /* =====================Icon ROtate Mobile================== */
  .orbit-system {
    transform: scale(0.8) !important;
  }
  .scrolling-images-container {
    min-height: 20rem !important;
    padding-top: 1rem !important;
  }
}

/* =============================PreLoader CSS============== ============= */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-dark);
  z-index: 9999;
  visibility: visible !important;
  opacity: 1 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.8s cubic-bezier(0.87, 0, 0.13, 1);
  will-change: transform;
}
#PreLOader-Text {
  font-family: "PP Mori", sans-serif;
  font-size: clamp(2.5rem, 12vw, 8rem) !important;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--font-color);
  margin: 0;
  line-height: 1;
  text-align: center;
  opacity: 0;
}

body.preloader-active {
  overflow: hidden !important;
  height: 100vh;
}

.reveal-site {
  transform: translateY(-100%);
}
.bg-flash {
  animation: flash-screen 0.2s ease-out;
}

@keyframes flash-screen {
  0% {
    background-color: #111b2e;
  }
  100% {
    background-color: var(--bg-dark);
  }
}
.text-wrapper {
  width: 90%;
  max-width: 1400px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#loader-text {
  font-size: var(--loader-font-size);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--font-color);
  opacity: 0;
  line-height: 1;
  word-wrap: break-word;
  text-shadow: 0 0 20px rgba(41, 121, 255, 0.2);
}

#loader-text::after {
  content: ".";
  color: var(--accent-blue);
  text-shadow: 0 0 25px var(--accent-blue);
}

.highlight-last {
  color: var(--accent-blue) !important;
  text-shadow: 0 0 50px rgba(41, 121, 255, 0.6) !important;
}
.highlight-last::after {
  content: "" !important;
}

/* --- ANIMATIONS --- */
@keyframes impact-in {
  0% {
    opacity: 0;
    transform: scale(2);
    filter: blur(15px);
  }
  50% {
    opacity: 1;
    transform: scale(0.9);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes quick-cut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
    filter: blur(8px);
  }
}

.anim-in {
  animation: impact-in 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.anim-out {
  animation: quick-cut 0.15s ease-in forwards;
}

.reveal-site {
  transform: translateY(-100%);
}
@media (max-width: 320px) {
  #PreLOader-Text {
    letter-spacing: -1px;
  }
  :root {
    --loader-font-size: clamp(1.4rem, 12vw, 3rem) !important;
  }
}
/* =========================================================================
             HorizontAL sLIDER mEDIA qUERY 
============================================================================= */

@media (max-width: 768px) {
  .slide {
    width: 20rem; /* Mobile par thoda chhota */
    height: 20rem;
    max-width: 90vw; /* Phone screen se bahar na jaye */
  }

  #project-text {
    font-size: 25vw; /* Mobile par text thoda bada dikhega */
  }
}