/* Apply box-sizing to all elements */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Base styles for the body */
body {
  font-family: var(--font2);
  line-height: 1.4;
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #000000 0%, #1c1c49 65%, #3b1b5d 100%);
  color: var(--colour2);
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: auto;
  position: relative;
  min-height: 100vh;
  width: 100%;
  height: 100%;
}

.site-wrapper {
  position: relative;
  z-index: 1;
}

/* Cosmic star layer */
html::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-color: transparent;
  background-image: url("/media/images/stars.png"); /* ✅ Use your starry PNG */
  background-repeat: repeat;
  background-size: cover;
  filter: blur(1px);
  opacity: 0.8;
  animation: twinkling 200s linear infinite;
}

@keyframes twinkling {
  0% {
    background-position: 10000px 10000px;
  }
  100% {
    background-position: -10000px -10000px;
  }
}

/* Shooting star styles */
.shooting-star {
  position: fixed;
  top: 100%;
  left: 100%;
  width: 150px;
  height: 3px;
  background: linear-gradient(135deg, yellow, transparent);
  transform: rotate(45deg);
  opacity: 1;
  z-index: -1000;
  animation: shooting-star 4s linear infinite;
}

@keyframes shooting-star {
  0% {
    top: 100%;
    left: 100%;
    opacity: 1;
  }
  100% {
    top: -20%;
    left: -20%;
    opacity: 0;
  }
}

#intro-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* No overflow */
}

#intro-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%); /* Center the video */
  object-fit: cover; /* Cover the screen while maintaining aspect ratio */
}

/* Style for the header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: rgba(0, 0, 0, 0.4); /* Keep nav background color as black */
  color: #fff;
  position: sticky !important;
  top: 0; /* Position it at the very top */
  z-index: 1000; /* Ensure it stays above other content */
  backdrop-filter: blur(
    10px
  ); /* Optional: adds a blur effect for glassmorphism */
}

/* Logo and name styling */
.logo {
  display: flex;
  align-items: center;

  transition: transform 0.3s ease; /* Smooth scaling transition */
}

.logo img {
  height: 75px; /* Keep this size for the logo */
  margin-right: 20px; /* Reduce the margin to create a gap without pushing nav */
  transition: transform 0.3s ease; /* Smooth scaling transition for the image */
}

.logo img:hover {
  transform: scale(1.1); /* Enlarge the image on hover */
  filter: drop-shadow(0 0 10px rgba(224, 176, 255, 0.8)) /* Glowing effect */;
}

/* Navigation styles */
nav {
  display: flex;
  justify-content: flex-end; /* Align nav links to the right */
  flex-grow: 1; /* Allow nav to occupy the remaining space */
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px; /* Keep gap between nav items */
}

@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy/Gilroy-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy/Gilroy-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy/Gilroy-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy/Gilroy-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

.nav-links li {
  list-style: none; /* Ensure no bullet points */
}

.nav-links a {
  position: relative;
  font-size: 1.3em;
  font-family: "gilroy", sans-serif;
  text-decoration: none; /* Remove default underline */
  color: #fff; /* Set your initial link color */
  transition: color 0.3s ease; /* Smooth color transition */
}

/* Apply underline effect only to regular links, not the .hire-me-nav button */
.nav-links a:not(.hire-me-nav)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px; /* Adjust the thickness of the underline */
  background-color: currentColor; /* Use the current text color */
  transition: width 0.3s ease, left 0.3s ease; /* Animate width and position */
}

/* Hover effects for all links except .hire-me-nav */
.nav-links a:hover {
  color: #e0b0ff; /* Mauve color on hover */
  text-shadow: 0 0 10px rgba(224, 176, 255, 0.8),
    0 0 20px rgba(224, 176, 255, 0.6); /* Glowing effect */
}

/* Expand underline on hover, excluding .hire-me-nav */
.nav-links a:not(.hire-me-nav):hover::after {
  width: 100%; /* Expand to full width on hover */
  left: 0; /* Shift to the left */
}

/* Specific styles for .hire-me-nav button to avoid underline */
.hire-me-nav {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

.cta-button {
  width: 125px;
  --cut: 0.1em;
  --active: 0;
  --spark: 3s;
  --transition: 0.4s ease;
  --hue: 260; /* Adjust this to set the base hue color */
  --bg: radial-gradient(
        120% 120% at 126% 126%,
        hsl(
            var(--hue) calc(var(--active) * 97%) 98% / calc(var(--active) * 0.9)
          )
          40%,
        transparent 50%
      )
      calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
    radial-gradient(
        120% 120% at 120% 120%,
        hsl(var(--hue) calc(var(--active) * 97%) 70% / calc(var(--active) * 1))
          30%,
        transparent 70%
      )
      calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
    hsl(var(--hue) calc(var(--active) * 100%) calc(12% - (var(--active) * 8%)));
  background: var(--bg);
  font-size: 1rem;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  padding: 0.5em 1.3em;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 0.25em;
  white-space: nowrap;
  border-radius: 2rem;
  position: relative;
  box-shadow: 0 0 calc(var(--active) * 6em) calc(var(--active) * 3em)
      hsl(var(--hue) 97% 61% / 0.5),
    0 0.05em 0 0
      hsl(
        var(--hue) calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)
      )
      inset,
    0 -0.05em 0 0 hsl(
        var(--hue) calc(var(--active) * 97%) calc(var(--active) * 10%)
      ) inset;
  transition: box-shadow var(--transition), scale var(--transition),
    background var(--transition);
  scale: calc(1 + (var(--active) * 0.1));
  transform-style: preserve-3d;
  perspective: 100vmin;
  overflow: hidden;
}

.cta-button:active {
  scale: 1;
}

.cta-button .star {
  height: calc(var(--size) * 1px);
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
  position: absolute;
  opacity: var(--alpha);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(10deg) rotate(0deg)
    translateY(calc(var(--distance) * 1px));
  animation: orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite
    linear;
}

@keyframes orbit {
  to {
    transform: translate(-50%, -50%) rotate(10deg) rotate(360deg)
      translateY(calc(var(--distance) * 1px));
  }
}

.cta-button .galaxy {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  overflow: hidden;
  opacity: var(--active);
  transition: opacity var(--transition);
}

.cta-button .galaxy__ring {
  height: 200%;
  width: 200%;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-28%, -40%) rotateX(-24deg) rotateY(-30deg)
    rotateX(90deg);
  transform-style: preserve-3d;
}

.cta-button .galaxy__container {
  position: absolute;
  inset: 0;
  opacity: var(--active);
  transition: opacity var(--transition);
  mask: radial-gradient(white, transparent);
}

.cta-button .star--static {
  animation: none;
  top: 50%;
  left: 50%;
  transform: translate(0, 0);
  max-height: 4px;
  filter: brightness(4);
  opacity: 0.9;
  animation: move-x calc(var(--duration) * 0.1s) calc(var(--delay) * -0.1s)
      infinite linear,
    move-y calc(var(--duration) * 0.2s) calc(var(--delay) * -0.2s) infinite
      linear;
}

.cta-button:hover .star--static {
  animation-play-state: paused;
}

@keyframes move-x {
  0% {
    translate: -100px 0;
  }
  100% {
    translate: 100px 0;
  }
}

@keyframes move-y {
  0% {
    transform: translate(0, -50px);
  }
  100% {
    transform: translate(0, 50px);
  }
}

.cta-button .spark {
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  rotate: 0deg;
  overflow: hidden;
  mask: linear-gradient(white, transparent 50%);
  animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

@keyframes flip {
  to {
    rotate: 360deg;
  }
}

.cta-button .spark:before {
  content: "";
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 0%;
  left: 50%;
  z-index: -1;
  translate: -50% -15%;
  rotate: 0;
  transform: rotate(-90deg);
  opacity: calc((var(--active)) + 0.4);
  background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
  transition: opacity var(--transition);
  animation: rotate var(--spark) linear infinite both;
}

.cta-button .spark:after {
  content: "";
  position: absolute;
  inset: var(--cut);
  border-radius: 2rem;
}

.cta-button .backdrop {
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: 2rem;
  transition: background var(--transition);
}

.cta-button:is(:hover, :focus-visible) {
  --active: 1;
  --play-state: running;
}

.galaxy-button {
  position: relative;
}

@keyframes float-out {
  to {
    rotate: 360deg;
  }
}

/* HAMBURGER BUTTON - Only visible on mobile */
.hamburger {
  display: none; /* Make sure it’s visible on mobile via media query */
  font-size: 2rem;
  background: none;
  border: none;
  color: white;
  z-index: 1001;
  position: absolute;
  right: 20px;
  top: 25px;
  cursor: pointer;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

img[src*="featured-project"] {
  transform: rotate(0deg) scaleX(1);
}

.hamburger:hover {
  color: #e0b0ff;
  text-shadow: 0 0 10px rgba(224, 176, 255, 0.8),
    0 0 20px rgba(224, 176, 255, 0.6);
}

.nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.969);
  backdrop-filter: blur(15px);
  z-index: 999;
  animation: slideInFromRight 0.5s ease forwards;
  padding: 60px 20px 20px;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.688);
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Close Button */
.hamburger-close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: white;
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}

/* Nav Links inside Overlay */
.mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center */
  align-items: center; /* Horizontally center */
  gap: 2rem;
  text-align: center;
}

.mobile-nav-link {
  position: relative;
  color: white;
  font-family: "gilroy", sans-serif;
  font-size: 1.5rem;
  font-weight: 200 !important;
  font-weight: bold;

  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.mobile-nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px; /* Adjust as needed */
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease, left 0.3s ease;
}

.mobile-nav-link:hover {
  color: #e0b0ff;
  text-shadow: 0 0 10px rgba(224, 176, 255, 0.8),
    0 0 20px rgba(224, 176, 255, 0.6);
}

.mobile-nav-link:hover::after {
  width: 100%;
  left: 0;
}

/* Disable scroll when menu is open */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.text {
  translate: 2% -6%;
  letter-spacing: 0.01ch;
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  font-family: "gilroy", sans-serif;
}

.cta-button svg {
  inline-size: 1.25em;
  translate: -25% -5%;
}

@keyframes rotate {
  to {
    transform: rotate(90deg);
  }
}

.intro-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: auto; /* Full height of the viewport */
  padding: 20px;
}

.disclaimer-note {
  font-size: 0.85rem;
  color: #e0e0e0;

  font-family: "Gilroy", sans-serif;
  text-align: center;
  opacity: 0.75;
  letter-spacing: 0.3px;
  width: 100%;
  margin-top: auto;
  margin-bottom: 5px;
}

.glassmorphism-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px; /* Set a max width */
  width: 100%;
  height: 500px;
  opacity: 90%;
}

.emoji-picture {
  position: relative; /* This allows absolute positioning of the eyelid */
  margin-right: 400px; /* Space between image and text */
  cursor: pointer; /* Change cursor on hover */
}

.emoji {
  width: 300px; /* Adjust size as needed */
  height: auto;
}

.eyelid {
  position: absolute; /* Position the eyelid over the emoji */
  top: 42%; /* Adjust based on your emoji's size */
  left: 54.2%; /* Adjust based on your emoji's size */
  width: 110px; /* Match or adjust to the emoji size */
  height: auto;
  pointer-events: none; /* Prevent mouse events on eyelid */
  opacity: 0; /* Start as invisible */
  transform: translateY(-10px); /* Slightly above its position */
  transition: opacity 1 ease, transform 1 ease; /* Smooth transition */
}

/* Show eyelid on hover */
.emoji-picture:hover .eyelid {
  opacity: 1; /* Make it visible */
  transform: translateY(0); /* Move it to its original position */
}

.eyelid img {
  width: 10% !important; /* Make eyelid fill the container */
  height: auto; /* Maintain aspect ratio */
}

.emoji-picture img {
  width: 370px; /* Adjust size as needed */
  height: auto;
}

/* Add animation for closing the eyelid */
@keyframes close-eyelid {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px); /* Move back up */
  }
}

/* Animate eyelid closing after a short delay */
.emoji-picture:hover .eyelid {
  animation: close-eyelid 0.3s forwards 0.3s; /* Delay the closing animation */
}

.arrow {
  position: absolute;
  top: 60px; /* Adjust for correct top-right positioning */
  right: -10px; /* Adjust for correct top-right positioning */
  width: 150px !important; /* Adjust arrow size as needed */
  height: auto;
}

#intro-text {
  position: absolute;
  top: 80px; /* Adjust to align with the arrow */
  right: -220px; /* Position text relative to the end of the arrow */
  font-size: 1.5em; /* Adjust font size */
  white-space: nowrap; /* Prevent text from wrapping */
  font-family: "gilroy", sans-serif;
  font-weight: bold;
}

.highlight {
  color: #fff; /* Change this to your preferred color for 'Hi, I'm' */
}

.name {
  color: #efefef; /* Change this to your preferred color for 'Raman' */
  text-shadow: 0 0 5px #a620ff, 0 0 10px #ad31ff, 0 0 15px #af37ff,
    0 0 20px #ae34ff; /* Glowing effect */
}

.text-info {
  font-family: "gilroy", sans-serif;
  position: absolute;
  letter-spacing: normal;
  font-weight: 400;
}

.text-info h2 {
  font-family: "gilroy-regular", sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
  background: linear-gradient(
    90deg,
    #b041ff,
    #fcf6ff
  ); /* Dark purple to light purple gradient */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* Safari support */
  color: transparent; /* Make the text itself transparent so only the gradient shows */
  text-fill-color: transparent; /* For Safari */
}

.text-info p {
  color: #fff;
  font-size: 1em;
  text-wrap: wrap;
  width: 350px;
  font-weight: 500;
  margin-top: 0px;
  line-height: 22px;
}

.reveal-text {
  display: none; /* Initially hide all texts */
  position: relative; /* For cursor positioning */
}

.reveal-text-container {
  font-weight: 700;
}

.cursor {
  display: inline-block;
  width: 2px; /* Width of the cursor */
  height: 1.2em; /* Height of the cursor */
  background: white; /* Cursor color */
  animation: blink 1.5s step-end infinite; /* Blinking effect */
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.download-resume {
  display: flex;
  gap: 10px; /* Adjust gap between buttons as needed */
  margin-top: 30px;
}

.cta-button[data-page="Download Resume"] {
  min-width: 200px; /* Set a minimum width to accommodate the text */
  white-space: nowrap; /* Ensure text stays in one line */
  font-weight: 400;
}

.divider img {
  width: 100%;
  display: block; /* Ensures the image is a block element for centering */
}

.glassmorphism-about {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  margin: 40px auto;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  width: 100%;
  color: white;
  opacity: 90%;
  overflow: hidden; /* Prevent content overflow */
  box-sizing: border-box; /* Ensure padding is considered in width */
}

.about-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.about-text {
  font-family: "gilroy", sans-serif;
  flex: 0 0 50%; /* Text takes 60% space */
  overflow-wrap: break-word; /* Break long words to prevent overflow */
  box-sizing: border-box;
}

.about-image img {
  flex: 0 0 50%; /* Image takes 40% space */
  max-width: 400px; /* Ensure image stays within the container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px;
  box-sizing: border-box; /* Include padding and borders in width */
}

.about-content h2 {
  font-family: "gilroy", sans-serif;
  font-weight: bold;
  text-align: center; /* Center the text */
  font-size: 2.6em;
  background: linear-gradient(90deg, #b041ff, #fcf6ff);
  background-clip: text;
  -webkit-background-clip: text; /* Safari support */
  color: transparent; /* Make the text itself transparent */
  width: fit-content; /* Limit the width to fit the text content */
  margin: 0 auto; /* Center the element itself */
  margin-bottom: 20px;
}

.about-me-h2 {
  font-family: "gilroy", sans-serif;
  margin-bottom: 20px !important;
}

.about-content p {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  line-height: 1.6;
}

.about-container {
  display: flex; /* Use Flexbox for layout */
  align-items: center; /* Align items vertically center */
  justify-content: space-around;
}

.gradient-line {
  height: 0.8px; /* Adjust height for the thickness of the line */
  background: linear-gradient(
    90deg,
    #b041ff,
    #fcf6ff,
    #b041ff
  ); /* Gradient from purple to white to purple */
  margin-top: 40px; /* Adjust margin as needed for spacing */
  margin-bottom: 20px;
}

.demoreel-h2 {
  font-family: "gilroy", sans-serif;
  margin-top: 40px !important;
}

.video-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically (if required) */
  margin-top: 20px; /* Adds space between heading and video */
}

.video-container video {
  cursor: pointer;
  max-width: 700px; /* Ensure the video is responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Optional: Add some border radius to the video */
}

.skills-h2 {
  font-family: "gilroy", sans-serif;
  margin-top: 40px !important;
}

.skills-h3 {
  font-family: "gilroy", sans-serif;
  text-align: left;
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 20px;
  color: #e681ff;
}

.skills-container {
  margin-top: 20px;
}

.skills-table {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between rows */
}

.skills-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 2px solid;
  border-image: linear-gradient(to right, #b041ff, #fcf6ff, #b041ff) 1; /* Gradient borders */
  border-radius: 10px;
  margin: 10px 0;
}

.skills-cell-left {
  flex: 1 1 30%; /* Adjust width for text */
  font-size: 1.5em;
  font-weight: bold;
  padding: 10px;
  color: #ffffff;
  font-family: "gilroy", sans-serif;
}

.skills-cell-center {
  flex: 1 1 50%; /* Bigger column for explanations */
  font-size: 1.2em;
  color: white;
  padding: 10px;
  font-family: "gilroy", sans-serif;
}

.skills-cell-right {
  flex: 1 1 20%; /* Adjust width for icons */
  display: flex;
  justify-content: center;
  padding: 10px;
  align-items: center;
}

.skills-cell-right img {
  max-width: 100px;
  height: auto;
  border-radius: 5px; /* Optional: add some styling to icons */
}

.technical-skills-table {
  width: 100%; /* Adjust as needed */
  margin-top: 20px; /* Add space above the table */
}

.technical-skills-row-th {
  display: flex;
  font-size: 1.3em;
  font-weight: bold;
  font-family: "gilroy", sans-serif;
}

.technical-skills-row {
  display: flex; /* Use flexbox for layout */
}

.technical-skills-cell {
  flex: 1; /* Make each cell take equal space */
  padding: 10px;
  border: 1.5px solid #ad31ff; /* Create space for the border image */
}

.technical-skills-cell ul {
  margin: 0; /* Remove margin */
}

.technical-skills-cell ul li {
  margin-bottom: 5px; /* Space between list items */
  font-size: 1.2em;
  font-family: "gilroy", sans-serif;
}

ul li::marker {
  color: #e681ff; /* Change to your desired bullet color */
  font-size: 18px; /* Optional: change bullet size */
}

.glassmorphism-contact {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  margin: 40px auto;
  align-items: center;
  justify-content: center;
  max-width: 1000px; /* Limits width as screen size decreases */
  width: 100%; /* Full width up to the max-width limit */
  color: white;
  opacity: 90%;
  overflow: hidden; /* Prevent content overflow */
  box-sizing: border-box; /* Ensure padding is included in width */
}

.contact-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.contact-content {
  display: flex;
  margin: 50px;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.contact-text {
  flex: 1;
}

.contact-heading {
  font-family: "gilroy", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 2.5em;
  margin: 0;
  line-height: 1.2;
}

.contact-heading-gradient {
  font-family: "gilroy", sans-serif;
  font-weight: bold;
  font-size: 2.5em;
  color: #fff;
  text-shadow: 0 0 10px #b041ff, 0 0 20px #b041ff, 0 0 40px #b041ff,
    0 0 80px #b041ff;
  /* background: linear-gradient(to right, #b041ff, #00c6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  margin: 0;
}

.contact-info {
  margin-top: 30px;
}

.contact-info p {
  font-family: "gilroy", sans-serif;
  font-weight: 400;
  font-size: 1.2em;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
}

.contact-icon {
  width: 20px;
  height: 20px;
}

.contact-find-me {
  font-family: "gilroy", sans-serif;
  font-weight: bold;
  font-size: 1.8em;
  color: white;
  margin-top: 30px;
  margin-bottom: 15px;
}

.contact-socials {
  display: flex;
  gap: 35px;
}

.social-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: transform 0.3s ease, background-image 0.3s ease; /* Smooth animation for scaling and image change */
}

.social-icon:hover {
  transform: scale(2); /* Slight expansion effect */
}

.social-icon:active {
  transform: scale(
    0.95
  ); /* Shrinks a bit on click to give a "pressed" effect */
  opacity: 0.9; /* Slight opacity change on active for feedback */
}

/* Specify different hover images for each social icon */
.social-icon.linkedin:hover {
  content: url("/media/images/linkedin-icon-hover.svg"); /* Replace with hover version of LinkedIn icon */
}

.social-icon.x:hover {
  content: url("/media/images/x-icon-hover.png"); /* Replace with hover version of X icon */
}

.social-icon.facebook:hover {
  content: url("/media/images/facebook-icon-hover.svg"); /* Replace with hover version of Facebook icon */
}

.contact-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-image img {
  max-width: 100%;
  border-radius: 15px;
}

.glassmorphism-services {
  position: relative;
  font-family: "gilroy", sans-serif;
  font-weight: 900;
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  margin: 40px auto;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  width: 100%;
  color: white;
  opacity: 90%;
  overflow: hidden; /* Prevent content overflow */
  box-sizing: border-box; /* Ensure padding is considered in width */
}

.services-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.services-section h2 {
  position: absolute;
  top: 20px; /* Adjust this value to move heading up or down */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-family: "gilroy", sans-serif;
  text-align: center;
  font-size: 2.6em;
  font-weight: bold;
  background: linear-gradient(90deg, #b041ff, #fcf6ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  width: fit-content;
  margin: 0 auto;
}

.all {
  display: flex;
  perspective: 10px;
  transform: perspective(300px) rotateX(20deg);
  will-change: perspective;
  perspective-origin: center center;
  transition: all 1.3s ease-out;
  justify-content: center;
  transform-style: preserve-3d;
}

.all:hover {
  perspective: 1000px;
  transition: all 1.3s ease-in;
  transform: perspective(10000px) rotateX(0deg);
}

.all:hover .services-text {
  opacity: 1;
}

.all:hover > div {
  opacity: 1;
  transition-delay: 0s;
}

.all:hover .explainer {
  opacity: 0;
}

.left,
.center,
.right,
.lefter,
.righter {
  width: 180px;
  height: 150px;
  transform-style: preserve-3d;
  border-radius: 10px;
  border: 1px solid #fff;
  box-shadow: 0 0 20px 5px rgba(234, 100, 255, 0.4);
  opacity: 0;
  transition: all 0.3s ease;
  transition-delay: 1s;
  position: relative;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgb(210, 143, 255);
  cursor: pointer;
  background-blend-mode: color-burn;
}

.left:hover,
.center:hover,
.right:hover,
.lefter:hover,
.righter:hover {
  box-shadow: 0 0 30px 10px rgba(230, 121, 247, 0.4);
  background-color: rgb(237, 204, 247);
}

.services-text {
  position: absolute;
  bottom: -30px; /* Adjust this to move text closer/further from the box */
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* Full width to center-align text */
  text-align: center; /* Center text within the box */
  color: #fff;
  text-shadow: 0 0 5px rgba(234, 100, 255, 0.4);
  font-size: 1.2em;
  font-weight: 500;
  opacity: 0;
  transition: all 0.3s ease;
  will-change: transform;
}

.lefter {
  transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);
  background-image: url(/media/images/web-design.png); /* Static image by default */
}

.left {
  transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);
  background-image: url(/media/images/ux-research.png); /* Static image by default */
}

.center {
  opacity: 1;
  background-image: url(/media/images/ux-design.png); /* Static image by default */
}

.right {
  transform: translateX(30px) translateZ(-25px) rotateY(5deg);
  background-image: url(/media/images/motion-graphics.png); /* Static image by default */
}

.righter {
  transform: translateX(60px) translateZ(-50px) rotateY(10deg);
  background-image: url(/media/images/graphic-design.png); /* Static image by default */
}

/* Hover state to switch to GIF */
.lefter:hover {
  background-image: url(/media/images/web-design.gif);
}

.left:hover {
  background-image: url(/media/images/ux-research.gif);
}

.center:hover {
  background-image: url(/media/images/ux-design.gif);
}

.right:hover {
  background-image: url(/media/images/motion-graphics.gif);
}

.righter:hover {
  background-image: url(/media/images/graphic-design.gif);
}

.explainer {
  font-weight: bold;
  font-size: 2em;
  color: #fff;
  transition: all 0.6s ease;
  width: 100%;
  height: 100%;
  background-color: #303050;
  background-image: radial-gradient(
    circle at center top,
    rgb(223, 204, 238),
    rgb(132, 51, 170)
  );
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5px;
}

.glassmorphism-service.fullscreen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  width: 70vw; /* smaller than Work section */
  max-width: 700px;
  height: auto;
  max-height: 85vh;
  color: white;
  overflow-y: auto;
  z-index: 9999;
  box-sizing: border-box;
  font-family: "Gilroy", sans-serif;
  box-shadow: 0 0 6px #e681ff;
}

/* Modal is hidden by default */
#service-modal {
  display: none;
}

/* Close button styling */
.close-service {
  float: right;
  z-index: 100;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px #e681ff;
}

.close-service:hover {
  background-color: #f0aaff;
  color: black;
  transform: scale(1.1);
  box-shadow: 0 0 12px #e681ff, 0 0 24px rgba(230, 129, 255, 0.8);
}

body.modal-open,
html.modal-open {
  overflow: hidden !important;
  height: 100vh !important;
  position: relative !important;
}

.glassmorphism-work {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px 20px 0 20px; /* No bottom padding */
  padding-bottom: 0 !important;
  margin: 40px auto;
  align-items: center;
  justify-content: center;
  max-width: 1100px; /* Limits width as screen size decreases */
  width: 100%; /* Full width up to the max-width limit */
  color: white;
  opacity: 90%;
  overflow: hidden; /* Enable scrolling inside the box */
  box-sizing: border-box; /* Ensure padding is included in width */
  max-height: 85vh;
  overflow-y: auto;
}

.glassmorphism-work.fullscreen {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px 20px 0 20px;
  width: 95vw;
  height: 95vh;
  color: white;
  opacity: 90%;
  overflow-y: auto;
  z-index: 9999;
  box-sizing: border-box;
}

.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(19, 19, 19, 0.955);
  z-index: 9998; /* just below the .glassmorphism-work z-index */
}

body.no-scroll {
  overflow: hidden !important;
}

.work-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.work-section h2 {
  font-family: "gilroy", sans-serif;
  font-weight: bold;
  text-align: center; /* Center the text */
  font-size: 2.6em;
  background: linear-gradient(90deg, #b041ff, #fcf6ff);
  background-clip: text;
  -webkit-background-clip: text; /* Safari support */
  color: transparent; /* Make the text itself transparent */
  width: fit-content; /* Limit the width to fit the text content */
  margin: 0 auto; /* Center the element itself */
}

.work-categories {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.work-category-container {
  display: flex;
  flex-direction: column; /* Stack the box and the text vertically */
  align-items: center; /* Center align the text and box horizontally */
  gap: 10px; /* Space between the box and the text */
}

.work-category {
  text-align: center;
  cursor: pointer;
  width: 180px;
  height: 180px; /* Adjust height to include the title space */
  border-radius: 10px;
  border: 1px solid #fff;
  box-shadow: 0 0 20px 5px rgba(234, 100, 255, 0.4);
  position: relative;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgb(210, 143, 255);
  display: flex;
  flex-direction: column; /* Stack content vertically */
  justify-content: flex-end; /* Align text to the bottom */
  align-items: center; /* Center align text horizontally */
  overflow: hidden;
}

.work-category-container p {
  font-family: "gilroy", sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  color: white;
  text-align: center;
  margin: 0;
}
.work-category:hover {
  box-shadow: 0 0 30px 10px rgba(230, 121, 247, 0.4);
  background-color: rgb(237, 204, 247);
}

.work-category:hover {
  transform: scale(1.05);
}

[data-section="featured-projects"] {
  background-image: url(/media/images/featured-project.png); /* Static image by default */
}

[data-section="ux-design"] {
  background-image: url(/media/images/ux-deign-work.png); /* Static image by default */
}

[data-section="web-design"] {
  background-image: url(/media/images/web-design-work.png); /* Static image by default */
}

[data-section="motion-graphics"] {
  background-image: url(/media/images/motion-graphics-work.png); /* Static image by default */
}

[data-section="graphic-design"] {
  background-image: url(/media/images/graphic-design-work.png); /* Static image by default */
}

/* Hide project details initially */
.project-details {
  display: none;
  margin-top: 80px;
  margin-bottom: 0px;
  text-align: center;
  color: white;
}

.project-image img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.project-navigation {
  position: sticky;
  bottom: 0;
  width: calc(100% + 40px); /* 20px left + 20px right = 40px total */
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 0px;
  padding: 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  z-index: 10;
  background: rgba(8, 8, 8, 0.766);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(39, 39, 39, 0.3);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 10px 10px; /* Optional */
}

/* Style for buttons */
.project-navigation button {
  padding: 5px 10px;
  font-size: 0.95rem;
  color: white;
  background-color: rgba(57, 32, 62, 0.581);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px #e681ff;
}

.project-navigation button:hover {
  background-color: #f0aaff;
  box-shadow: 0 0 12px #e681ff, 0 0 24px rgba(230, 129, 255, 0.8);
  transform: scale(1.05);
}

.pagination-dots {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.pagination-dot {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  background-color: rgba(57, 32, 62, 0.581);
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px #e681ff;
}

.pagination-dot:hover {
  background-color: #f0aaff;
  color: black;
  transform: scale(1.1);
  box-shadow: 0 0 12px #e681ff, 0 0 24px rgba(230, 129, 255, 0.8);
}

.pagination-dot.active {
  background-color: #e681ff;
  color: black;
  box-shadow: 0 0 12px #e681ff, 0 0 24px rgba(230, 129, 255, 0.4);
}

.expand-btn {
  position: sticky;
  top: 10px;
  float: right;
  z-index: 100;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-size: 30px;
  margin-left: auto;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px #e681ff;
}

.expand-btn:hover {
  background-color: #f0aaff;
  color: black;
  transform: scale(1.1);
  box-shadow: 0 0 12px #e681ff, 0 0 24px rgba(230, 129, 255, 0.8);
}

/* Featured Project 1 Styling */
[data-project="featured-project-1"] {
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  padding: 20px;
  text-align: left;
}

/* Title */
[data-project="featured-project-1"] h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  color: #e681ffdd;
  margin: 5px;
}

/* Heading */
[data-project="featured-project-1"] h4 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 5px;
}

/* Subheading */
[data-project="featured-project-1"] p {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 5px;
}

.project-info {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.image-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.image-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Ensures proper top alignment */
  width: 240px; /* Increased to match image width */
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  text-align: center;
}

.step-label {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  padding-top: 20px;
}

.image-box img {
  width: 300px; /* Matches content width */
  height: auto;
  border-radius: 10px;
}

.image-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 5px;
}

.image-text h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin: 0px;
}

.image-text p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  padding: 10px;
  color: #ccc;
  text-align: left; /* Centered text for uniformity */
  max-width: 260px; /* Matches image width */
}

/* Context Section Styling */
.context-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

a.lit-review {
  color: white;
  font-size: 1.1em;
}

a.lit-review:hover {
  color: #e681ff;
}

.context-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
}

.context-section p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: justify;
}

.objective-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.objective-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
}

.objective-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.objective-content {
  display: flex;
  align-items: flex-start; /* Align items to the top */
  gap: 0px;
  margin-bottom: 20px;
}

.objective-text {
  display: flex;
  flex-direction: column; /* Stacks p and ul vertically */
}

.emoji {
  font-size: 6em; /* Increased emoji size */
  line-height: 1;
  flex-shrink: 0.8;
}

.objective-content p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: #ccc;
  line-height: 1.6;
  text-align: justify;
  margin: 0 0 10px 0; /* Adds spacing below the paragraph */
}

.objective-box ul {
  list-style: disc;
  padding-left: 20px; /* Ensures proper bullet spacing */
  margin-top: 10px;
}

.objective-box li {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: justify;
}

.objective-box li strong {
  color: #e681ff;
  font-size: 1.2em;
  font-weight: 500;
}

.demographic-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.demographic-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.demographic-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

h4.age-label {
  font-family: "gilroy", sans-serif;
  font-size: 2.5em; /* Heading size */
  font-weight: 700;
  color: #e681ff;
  margin-bottom: 10px;
}

p.demographic-text {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: #ccc;
  line-height: 1.6;
  text-align: justify;
  margin: 0;
}

.text-content {
  max-width: 50%;
}

.image-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container img {
  width: 400px; /* Adjust size */
  height: auto;
  position: relative;
  z-index: 2; /* Ensures image appears above the line */
}

.image-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #b041ff, #fcf6ff, #b041ff);
  position: absolute;
  bottom: 0; /* Moves line below the image */
  left: 0;
  z-index: 1; /* Ensures line is behind the image */
}

.research-process-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.research-process-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.research-container {
  margin-top: 20px;
}

.research-table {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between rows */
}

.research-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 2px solid;
  border-image: linear-gradient(to right, #b041ff, #fcf6ff, #b041ff) 1; /* Gradient borders */
  border-radius: 10px;
  margin: 5px 0;
}

.research-cell-left {
  flex: 1 1 30%; /* Adjust width for text */
  font-size: 1.4em;
  font-weight: bold;
  padding: 10px;
  color: #ffffff;
  font-family: "gilroy", sans-serif;
}

.research-cell-center {
  flex: 1 1 50%; /* Bigger column for explanations */
  font-size: 1em;
  color: #ccc;
  padding: 10px;
  font-family: "gilroy", sans-serif;
}

.research-cell-right {
  flex: 1 1 20%; /* Adjust width for icons */
  display: flex;
  justify-content: center;
  padding: 10px;
  align-items: center;
}

.research-cell-right img {
  max-width: 125px;
  height: auto;
  border-radius: 5px; /* Optional: add some styling to icons */
}

.findings-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.findings-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
  margin: auto;
  margin-bottom: 40px;
}

.findings-content {
  display: flex;
  justify-content: space-between;
  width: 60%;
  gap: 40px;
}

.data-point {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligns content to the left */
  text-align: left;
}

.big-number {
  font-family: "gilroy", sans-serif;
  font-size: 4em;
  font-weight: 700;
  color: #e681ff;
  line-height: 1;
}

.data-point p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: #ccc;
  line-height: 1.5;
  text-align: left;
}

.findings-image {
  width: 30%;
}

.findings-image img {
  width: 100%;
  height: auto;
}

.findings-box-2 {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
  margin: auto;
  margin-bottom: 40px;
}

.findings-section-2 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 20px;
}

.findings-section-2 h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 600;
  color: #e681ff;
}

.findings-section-2 {
  text-align: left;
  font-family: "gilroy", sans-serif;
  color: #fff;
  font-size: 1.2em;
  font-weight: 500;
  margin-bottom: 20px;
}

.ellipse-wrapper {
  display: flex;
  gap: 40px;
  justify-content: left;
  flex-wrap: wrap;
}

.ellipse-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Image-based Ellipse */
.ellipse {
  position: relative;
  width: 120px;
  height: 120px;
}

.ellipse img {
  width: 100%;
  height: auto;
  display: block;
}

/* Labels Below */
.ellipse-label {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 500;
  color: #ccc;
  margin-top: 10px;
  text-align: center;
}

.findings-image-2 {
  width: 20%;
}

.findings-image-2 img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.findings-box-3 {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px;
  margin: auto;
  margin-bottom: 40px;
}

.findings-image3 {
  width: 20%;
}

.findings-image3 img {
  width: 100%;
  height: auto;
}

.findings-content2 {
  display: flex;
  justify-content: space-between;
  width: 80%;
  gap: 40px;
}

.key-insights-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.key-insights-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
  padding-right: 0px;
}

/* Left Side: Insight Boxes Aligned Horizontally */
.insights-content {
  width: 65%;
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.insight-box {
  position: relative;
  border-radius: 15px; /* Ensures rounded corners */
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  width: 32%; /* Ensures 3 boxes fit side by side */
  text-align: center;
  overflow: hidden; /* Ensures no overflow from pseudo-element */
}

.insight-box::before {
  content: "";
  position: absolute;
  inset: 0; /* Fills the whole box */
  border-radius: 15px; /* Matches the box */
  padding: 2px; /* Creates space for the border effect */
  background: linear-gradient(90deg, #b041ff, #fcf6ff, #b041ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.insight-box h4 {
  font-size: 1.2em;
  font-weight: 600;
  color: #e681ff;
  margin-bottom: 5px;
}

.insight-box p {
  font-size: 1em;
  color: rgb(25, 25, 25);
  margin: 0;
}

.insights-image {
  width: 35%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Ensure the image fills the container and aligns to the right */
.insights-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.how-might-we-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.how-might-we-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.how-might-we-content {
  width: 65%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.how-might-we-inner-box {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 15px; /* Ensures rounded corners */
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  width: 85%;
  text-align: center;
  overflow: hidden; /* Ensures no overflow from pseudo-element */
}

.how-might-we-inner-box::before {
  content: "";
  position: absolute;
  inset: 0; /* Fills the whole box */
  border-radius: 15px; /* Matches the box */
  padding: 2px; /* Creates space for the border effect */
  background: linear-gradient(90deg, #b041ff, #fcf6ff, #b041ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.how-might-we-inner-box h4 {
  font-size: 1.2em;
  font-weight: 600;
  color: #e681ff;
  margin-bottom: 5px;
}

.how-might-we-inner-box p {
  font-size: 1em;
  color: rgb(25, 25, 25);
  margin: 0;
}

/* Right Side: Image */

.hmw-image {
  width: 25%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Ensure the image fills the container and aligns to the right */
.hmw-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.hmw-icon {
  width: 80px; /* Adjust size */
  height: auto;
  margin-right: 10px; /* Space between icon and text */
}

.experience-principles-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.experience-principle-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
  padding-right: 0px;
}

.experience-principle-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two-column layout */
  gap: 40px; /* Spacing between items */
  width: 70%; /* Adjusts width for text */
}

.principle-item {
  font-size: 1.6em;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.principle-number {
  background: white;
  color: #e681ff;
  font-weight: bold;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 1em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.glassmorphism-hire-me h2 {
  z-index: 1;
  font-family: "gilroy", sans-serif;
  text-align: center;
  font-size: 2.6em;
  font-weight: bold;
  background: linear-gradient(90deg, #b041ff, #fcf6ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  width: fit-content;
  margin: 0 auto;
}

.experience-principle-image {
  width: 25%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Ensure the image fills the container and aligns to the right */
.experience-principle-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.solution-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.solution-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
  padding-right: 0px;
}

.solution-content {
  display: flex;
  align-items: center; /* Align items vertically */
  justify-content: space-between; /* Push text and video apart */
  gap: 20px; /* Adds spacing between text and video */
  width: 90%; /* Ensure full width */
}

.solution-text {
  width: 45%; /* Adjusts width of text container */
  font-family: "gilroy", sans-serif;
}

.solution-text h3 {
  font-size: 2.6em;
  color: #e681ff; /* Purple heading */
  margin-bottom: 30px;
}

.solution-text ul {
  list-style-type: disc; /* Standard bullet points */
  padding-left: 20px; /* Proper spacing for bullets */
}

.solution-text li {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #fff; /* White text */
}

.solution-text li::marker {
  color: #fff; /* Purple bullet */
}

/* Push the video to the right edge */
.solution-content video {
  margin-left: auto; /* Forces video to right edge */
  display: block;
}

.solution-map-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.solution-map-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.solution-map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px;
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  position: relative;
}

.map-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-item img {
  width: 100px;
  height: auto;
  object-fit: contain;
}

.map-item p {
  margin-top: 10px;
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  color: white;
  text-align: center;
}

.arrow2 {
  position: absolute;
  width: 30px; /* Reduce arrow size */
  height: auto; /* Maintain aspect ratio */
}

/* 1 → 2 */
.arrow-1-2 {
  top: 30%;
  right: -90px;
  transform: translateY(-50%);
}

/* 3 → 2 (Left) */
.arrow-3-2 {
  top: 30%;
  left: -120px;
  transform: translateY(-50%) rotate(180deg);
}

/* 2 → 5 (Down) */
.arrow-2-5 {
  top: 150%;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}

/* 3 → 5 (Diagonal Down-Left) */
.arrow-3-5 {
  top: 120%;
  left: -80px;
  transform: translateX(-60%) rotate(315deg);
}

/* 4 → 5 (Right) */
.arrow-4-5 {
  top: 50%;
  right: -140px;
  transform: translateY(-50%);
}

/* 5 → 6 (Right) */
.arrow-5-6 {
  top: 50%;
  right: -140px;
  transform: translateY(-50%);
}

.feedback-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px; /* Restrict overall width */
}

.feedback-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  width: 100%;
  overflow: hidden; /* Prevents content from overflowing */
  padding-bottom: 0px;
}

.feedback-content-left {
  width: 40%; /* Ensures equal size for both sections */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feedback-content-right {
  width: 40%; /* Ensures equal size for both sections */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feedback-content-right h4 {
  font-size: 1.6em;
  font-family: "gilroy", sans-serif;
  color: #e681ff;
  margin-bottom: 15px;
  white-space: nowrap; /* Prevents text from wrapping and overflowing */
}

.feedback-content-right p {
  font-size: 1em;
  font-family: "gilroy", sans-serif;
  color: #ccc;
  margin-bottom: 10px;
}

.feedback-content-left h4 {
  font-size: 1.6em;
  font-family: "gilroy", sans-serif;
  color: #e681ff;
  margin-bottom: 15px;
  white-space: nowrap; /* Prevents text from wrapping and overflowing */
}

.feedback-content-left p {
  font-size: 1em;
  font-family: "gilroy", sans-serif;
  color: #ccc;
  margin-bottom: 10px;
}

.feedback-content-right img {
  width: 100%;
  max-width: 250px; /* Set a fixed size for consistency */
  height: 250px;
  object-fit: cover;
  align-self: center;
}

.feedback-content-left img {
  width: 100%;
  max-width: 250px; /* Set a fixed size for consistency */
  height: 250px;
  object-fit: cover;
  align-self: center;
}

.implementation-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.implementation-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.implementation-item.large {
  width: 220px; /* Ensure equal width for alignment */
}

.implementation-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.implementation-item.large img {
  width: 200px; /* Larger size for img1 & img3 */
  height: 150px; /* Set a fixed height to keep images uniform */
  object-fit: contain; /* Ensures images retain aspect ratio without distortion */
}

.implementation-item.small img {
  width: 80px; /* Smaller size for the plus icon */
  height: auto;
}

.implementation-item p {
  margin-top: 10px;
  font-size: 1.2em;
  font-family: "gilroy", sans-serif;
  color: #ccc;
}

.glassmorphism-hire-me p {
  font-family: "gilroy", sans-serif;
  font-size: 1.3em;
  font-weight: 500;
  color: #e681ff;
}

.roadmap {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.roadmap-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  position: relative;
}

.roadmap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b041ff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Keeps it centered */
}

.circle img {
  width: 60px;
  height: 60px;
}

.line {
  width: 100px;
  height: 2px;
  background-color: white;
  position: relative;
  bottom: 50px;
}

.roadmap-item p {
  margin-top: 10px;
  font-size: 1em;
  font-family: "gilroy", sans-serif;
  color: #ccc;
}

.roadmap-item h4 {
  margin-top: 5px;
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
}

.success-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.success-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.success-content {
  display: flex;
  align-items: center; /* Align items vertically */
  justify-content: space-between; /* Push text and video apart */
  gap: 20px; /* Adds spacing between text and video */
  width: 90%; /* Ensure full width */
}

.success-text {
  width: 60%; /* Adjusts width of text container */
  font-family: "gilroy", sans-serif;
}

.success-text ul {
  list-style-type: none; /* Standard bullet points */
  padding-left: 20px; /* Proper spacing for bullets */
}

.success-text li {
  font-size: 1.4em;
  margin-bottom: 20px;
  color: #fff; /* White text */
  background-image: url("/media/images/tick.png"); /* Specify the image */
  background-size: 25px;
  background-repeat: no-repeat; /* Prevent the image from repeating */
  padding-left: 30px; /* Adjust to provide space for the bullet */
}

/* Push the video to the right edge */
.success-content img {
  margin-left: auto; /* Forces video to right edge */
  display: block;
}

/* motion graphics 1 Styling */
[data-project="motion-graphics-1"] {
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  padding: 20px;
  text-align: left;
}

/* Title */
[data-project="motion-graphics-1"] h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  color: #e681ffdd;
  margin: 5px;
}

/* Heading */
[data-project="motion-graphics-1"] h4 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 5px;
}

/* Subheading */
[data-project="motion-graphics-1"] p {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 5px;
}

.project-info-motiongraphics {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-motiongraphics {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-motiongraphics h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-motiongraphics p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.infographic-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.infographic-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
}

.infographic-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.infographic-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

h4.Covid19-label {
  font-family: "gilroy", sans-serif;
  font-size: 2em; /* Heading size */
  font-weight: 700;
  color: #e681ff;
  margin-bottom: 20px;
  line-height: 30px;
}

p.infographic-text {
  font-family: "gilroy", sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
}

.infographic-text-content {
  max-width: 60%;
}

.infographic-image-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.infographic-image-container img {
  width: 300px; /* Adjust size */
  height: auto;
  position: relative;
  z-index: 2; /* Ensures image appears above the line */
}

.project-link-container {
  border-top: 2px solid #007bff; /* Adds a top border (line) */
  margin-top: 15px; /* Spacing above the line */
  padding-top: 10px; /* Spacing between line and link */
  text-align: center;
}

a.project-link {
  padding: 0;
}

.project-link {
  display: inline-block;
  color: #e681ff;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.project-link:hover {
  color: white;
  background-color: #e681ff;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 0 10px #e681ff;
}

.explainer-video-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.explainer-video-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
}

.explainer-video-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.explainer-video-content {
  flex-direction: column; /* Stack video and text */
  align-items: center;
  text-align: left;
}

video {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
}

.video-explanation {
  width: 100%;
  margin-top: 20px; /* Space between video and text */
}

.video-explanation h4 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 10px;
}

.video-explanation p {
  font-family: "gilroy", sans-serif !important;
  font-size: 1.1em !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
}

.video-explanation ul {
  list-style-type: disc;
  padding-left: 1.4em;
  font-family: "gilroy", sans-serif !important;
  font-size: 1.1em !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
}

.video-explanation li {
  color: #ffff;
  font-size: 1.1em !important;
}

.video-explanation ul li::marker {
  color: #ffffff;
}

.video-explanation strong {
  color: #e681ff; /* Highlighted text in purple */
  font-weight: 500;
}

.video-explanation li {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  margin-bottom: 8px;
}

[data-project="motion-graphics-2"] {
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  padding: 20px;
  text-align: left;
}

[data-project="motion-graphics-2"] h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  color: #e681ffdd;
  margin: 5px;
}

/* Heading */
[data-project="motion-graphics-2"] h4 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 5px;
}

/* Subheading */
[data-project="motion-graphics-2"] p {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 5px;
}

.project-info-motiongraphics-2 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-motiongraphics-2 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-motiongraphics-2 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-motiongraphics-2 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.story-board-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.story-board-section h3 {
  font-family: "gilroy", sans-serif !important;
  font-size: 2em !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 15px !important;
}

.story-board-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.story-board-content {
  display: flex;
  flex-direction: column; /* ensures vertical stacking */
  align-items: center; /* centers content horizontally */
  width: 100%;
}

.storyboard-img {
  width: 100%;
  max-width: 800px;
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.storyboard-description {
  font-size: 1.1em !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  font-family: "gilroy", sans-serif !important;
  margin-top: 10px !important;
}

.demoreel-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.demoreel-section h3 {
  font-family: "gilroy", sans-serif !important;
  font-size: 2em !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 15px !important;
}

.demoreel-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.demoreel-content {
  display: flex;
  flex-direction: column; /* ensures vertical stacking */
  align-items: center; /* centers content horizontally */
  width: 100%;
}

.demoreel-video {
  width: 100%;
  max-width: 900px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  margin-bottom: 25px;
}

.demoreel-description {
  font-family: "gilroy", sans-serif !important;
  font-size: 1.1em !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
}

.demoreel-description strong {
  color: #e681ff;
}

[data-project="motion-graphics-3"] {
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  padding: 20px;
  text-align: left;
}

/* Title */
[data-project="motion-graphics-3"] h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  color: #e681ffdd;
  margin: 5px;
}

/* Heading */
[data-project="motion-graphics-3"] h4 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 5px;
}

/* Subheading */
[data-project="motion-graphics-3"] p {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 5px;
}

.project-info-motiongraphics-3 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-motiongraphics-3 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-motiongraphics-3 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-motiongraphics-3 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.project-info-motiongraphics-3 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-motiongraphics-3 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-motiongraphics-3 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-motiongraphics-3 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.UI-widget-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.UI-widget-section h3 {
  font-family: "gilroy", sans-serif !important;
  font-size: 2em !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 15px !important;
}

.UI-widget-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.UI-widget-content {
  display: flex;
  flex-direction: column; /* ensures vertical stacking */
  align-items: center; /* centers content horizontally */
  width: 100%;
}

.ui-widget-video {
  width: 100%;
  max-width: 900px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  margin-bottom: 25px;
}

.ui-widget-description {
  font-size: 1.1em !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
  font-family: "gilroy", sans-serif !important;
  margin-top: 10px !important;
}

.ui-widget-description strong {
  color: #e681ff;
}

[data-project="graphic-design-1"] {
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  padding: 20px;
  text-align: left;
}

/* Title */
[data-project="graphic-design-1"] h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  color: #e681ffdd;
  margin: 5px;
}

/* Heading */
[data-project="graphic-design-1"] h4 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 5px;
}

/* Subheading */
[data-project="graphic-design-1"] p {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 5px;
}

.project-info-graphic-design-1 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-graphic-design-1 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-graphic-design-1 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-graphic-design-1 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.project-info-graphic-design-1 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-graphic-design-1 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-graphic-design-1 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-graphic-design-1 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.poster-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.poster-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
}

.poster-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: block; /* ⛔️ Changed from flex to block */
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.poster-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

h4.Covid19-label {
  font-family: "gilroy", sans-serif;
  font-size: 2em; /* Heading size */
  font-weight: 700;
  color: #e681ff;
  margin-bottom: 20px;
  line-height: 30px;
}

p.poster-text {
  font-family: "gilroy", sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
}

.poster-text-content {
  max-width: 50%;
}

.poster-image-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poster-image-container img {
  width: 400px; /* Adjust size */
  height: auto;
  position: relative;
  z-index: 2; /* Ensures image appears above the line */
}

.poster-text-content strong {
  color: #e681ff;
}

.design-quality-section {
  margin-top: 30px;
}

.design-quality-heading {
  color: #e681ff !important;
}

.subsection-heading {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em !important;
  color: #ffffff;
  margin-bottom: 10px;
}

.design-description {
  font-family: "gilroy", sans-serif !important;
  font-size: 1em !important;
  color: #ffffff !important;
  line-height: 1.6;
  margin-bottom: 20px !important;
}

.design-description strong {
  color: #e681ff;
}

.color-palette {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "gilroy", sans-serif;
  font-size: 0.85em;
  font-weight: 500;
  color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.color-swatch span {
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 6px;
}

.typography-section {
  margin-top: 80px;
}

.visuals-section {
  margin-top: 80px;
}

.symptoms-icons {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: flex-start;
  margin: 20px 0;
}

.symptoms-icons img {
  height: 100px;
  width: auto;
}

.prevention-icons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.prevention-icons img {
  height: 70px;
  width: auto;
}

.layout-section {
  margin-top: 80px;
}

[data-project="graphic-design-2"] {
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  padding: 20px;
  text-align: left;
}

/* Title */
[data-project="graphic-design-2"] h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  color: #e681ffdd;
  margin: 5px;
}

/* Heading */
[data-project="graphic-design-2"] h4 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 5px;
}

/* Subheading */
[data-project="graphic-design-2"] p {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 5px;
}

.project-info-graphic-design-2 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-graphic-design-2 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-graphic-design-2 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-graphic-design-2 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.project-info-graphic-design-2 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-graphic-design-2 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-graphic-design-2 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-graphic-design-2 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.magazine-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.magazine-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
}

.magazine-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: block; /* ⛔️ Changed from flex to block */
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.magazine-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.magazine-text-content {
  flex: 1;
}

.magazine-image-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.magazine-image-stack img {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

[data-project="graphic-design-2"] .magazine-text-content p {
  font-family: "gilroy", sans-serif !important;
  font-size: 1em !important;
  color: #ffffff !important;
  margin: 0 !important;
}

[data-project="graphic-design-2"] .magazine-text-content h4 {
  margin: 0 !important;
  margin-bottom: 15px !important;
}

.magazine-text strong {
  color: #e681ff;
}

.color-palette-section {
  margin-top: 30px;
}

.subsection-heading {
  font-size: 1.5em;
  font-weight: 600;
  color: #e681ff;
  margin-bottom: 15px;
  font-family: "gilroy", sans-serif;
}

.color-palette-description {
  font-size: 1em;
  font-family: "gilroy", sans-serif;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 20px;
}

.color-swatch-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 25px;
}

.color-swatch {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "gilroy", sans-serif;
  font-size: 0.85em;
  font-weight: 500;
  color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.imagery-section {
  margin-top: 55px;
}

.reflections-section {
  margin-top: 55px;
}

.color-palette-section {
  margin-top: 55px;
}

[data-project="graphic-design-3"] {
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  padding: 20px;
  text-align: left;
}

/* Title */
[data-project="graphic-design-3"] h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  color: #e681ffdd;
  margin: 5px;
}

/* Heading */
[data-project="graphic-design-3"] h4 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 5px;
}

/* Subheading */
[data-project="graphic-design-3"] p {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 5px;
}

.project-info-graphic-design-3 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-graphic-design-3 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-graphic-design-3 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-graphic-design-3 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.project-info-graphic-design-3 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-graphic-design-3 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-graphic-design-3 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-graphic-design-3 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.logo-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.logo-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
}

.logo-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: block; /* ⛔️ Changed from flex to block */
  align-items: center;
  justify-content: space-between; /* Distributes text & image */
  padding: 40px;
  margin: auto;
}

.logo-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.logo-description {
  font-family: "gilroy", sans-serif;
  font-size: 1.1em !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
  margin-top: 15px;
}

.logo-heading {
  font-size: 2em;
  font-family: "gilroy", sans-serif;
  color: #ffffff;
  margin-bottom: 10px;
}

.logo-text {
  width: 60%;
}

.logo-image-container {
  width: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px; /* Push logo downward to align better */
}

.personal-logo {
  max-width: 100%;
  height: auto;
}

.top-five-thumbnail-image {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.top-five-thumbnail-image img {
  width: 100%;
  max-width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.logo-description {
  font-family: "gilroy", sans-serif;
  font-size: 1.1em;
  line-height: 1.7;
  color: #fff;
  text-align: justify;
  margin-top: 10px;
}

.logo-description strong {
  color: #e681ff;
}

.logo-process-section {
  margin-top: 40px;
}

.subsection-heading {
  font-family: "gilroy", sans-serif;
  font-size: 1.6em;
  font-weight: 600;
  color: #e681ff;
  margin-bottom: 20px !important;
  margin-top: 40px !important;
}

.thumbnail-images {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}

.thumbnail-images img {
  width: 100%;
  max-width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.logo-process-text {
  font-family: "gilroy", sans-serif;
  font-size: 1.1em !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
  text-align: justify;
}

.logo-process-text strong {
  color: #e681ff;
}

.final-thumbnails-images {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.final-thumbnails-images img {
  width: 100%;
  max-width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.logo-description {
  font-family: "gilroy", sans-serif;
  font-size: 1.1em;
  line-height: 1.7;
  color: #fff;
  text-align: justify;
  margin-top: 10px;
}

.logo-description strong {
  color: #e681ff;
}

.logo-feedback-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.logo-feedback-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 30px;
}

.logo-feedback-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.logo-feedback-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  align-items: flex-start;
}

.logo-feedback-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}

.logo-feedback-icon img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 0; /* Removed circular style */
  border: none;
}

.logo-feedback-name {
  color: #e681ff !important;
  font-family: "gilroy", sans-serif !important;
  font-size: 1.4em !important;
  margin-top: 10px !important;
  text-align: center;
  font-weight: 700 !important;
}

.logo-feedback-text p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  line-height: 1.6;
  color: #fff;
  text-align: justify;
}

.logo-feedback-text strong {
  color: #e681ff !important;
}

.logo-summary-section {
  margin-top: 60px;
  text-align: left;
}

.logo-summary-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
}

.logo-summary-text p {
  font-family: "gilroy", sans-serif !important;
  font-size: 1.1em !important;
  font-weight: 400;
  color: #ffffff !important;
  line-height: 1.7;
}

.logo-summary-text strong {
  color: #e681ff;
}

.logo-summary-list {
  font-family: "gilroy", sans-serif;
  font-size: 1.1em;
  color: #ffffff;
  padding-left: 20px;
  list-style-type: disc;
  margin-top: 10px;
}

.logo-summary-list li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.logo-summary-list li::marker {
  color: #e681ff;
}

[data-project="ux-design-1"] {
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  padding: 20px;
  text-align: left;
}

/* Title */
[data-project="ux-design-1"] h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  color: #e681ffdd;
  margin: 5px;
}

/* Heading */
[data-project="ux-design-1"] h4 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 5px;
}

/* Subheading */
[data-project="ux-design-1"] p {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 5px;
}

.project-info-ux-design-1 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-ux-design-1 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-ux-design-1 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-ux-design-1 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.project-info-ux-design-1 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-ux-design-1 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-ux-design-1 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-ux-design-1 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.retrostroll-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.retrostroll-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.retrostroll-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.retrostroll-text {
  flex: 1 1 40%;
}

.retrostroll-heading {
  font-size: 2em !important;
  font-family: "gilroy", sans-serif !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
}

.retrostroll-text p {
  font-family: "gilroy", sans-serif;
  font-size: 1em !important;
  color: #ffffff;
  line-height: 1.7;
}

.retrostroll-text strong {
  color: #e681ff;
}

.retrostroll-embed {
  flex: 1 1 20%;
}

.figma-link {
  display: inline-block;
  color: #e681ff;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.figma-link:hover {
  color: white;
  background-color: #e681ff;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 0 10px #e681ff;
}

.retrostroll-research-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.retrostroll-research-section h3 {
  font-size: 2.2em;
  color: #ffffff;
  font-weight: 500;
}

.subsection-heading {
  font-family: "gilroy", sans-serif !important;
  font-size: 1.8em !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  margin-bottom: 15px !important;
  margin-top: 80px !important;
}

.retrostroll-research-description {
  font-family: "gilroy", sans-serif;
  font-size: 1em !important;
  font-weight: 400;
  color: #ffffff !important;
  line-height: 1.7 !important;
  text-align: justify !important;
}

.retrostroll-client-description {
  margin-top: 40px;
  color: #fff;
  font-family: "gilroy", sans-serif;
}

.client-text {
  font-size: 1em !important;
  font-family: "gilroy", sans-serif !important;

  color: #ffffff !important;
  line-height: 1.7 !important;
}

.client-text strong {
  color: #e681ff;
}

.client-text ul {
  margin-left: 20px;
  padding-left: 20px;
  list-style-type: disc;
}

.custom-list li strong {
  display: block;
  font-size: 1.1em;
  font-weight: 600;
  color: #e681ff;
  margin-bottom: 5px;
}

.custom-list li {
  font-family: "Gilroy", sans-serif;
  margin-bottom: 20px;
  list-style-type: disc;
  padding-left: 10px;
}

.custom-list li p {
  font-family: "Gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
  line-height: 1.6;
}

.retrostroll-founders-image {
  text-align: center;
  margin-top: 30px;
}

.retrostroll-founders-image img {
  width: 300px;
  max-width: 90%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.founder-caption {
  margin-top: 10px;
  font-family: "gilroy", sans-serif;
  color: #ffffff !important;
  font-size: 0.95em !important;
  font-style: italic;
}

.retrostroll-text {
  font-family: "gilroy", sans-serif;
  font-size: 1em !important;
  color: #ffffff !important;
  line-height: 1.7;
  margin-bottom: 20px;
}

.retrostroll-decision-list {
  list-style-type: disc;
  padding-left: 20px;
}

.retrostroll-decision-list li {
  font-family: "gilroy", sans-serif;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.6;
}

.retrostroll-decision-list li strong {
  color: #e681ff;
}

.retrostroll-text strong {
  color: #e681ff;
}

.audience-block {
  margin-bottom: 30px;
  margin-top: 30px;
}

.audience-subheading {
  font-size: 1.4em !important;
  font-family: "gilroy", sans-serif;
  font-weight: 700 !important;
  color: #e681ff !important;
}

.persona-section {
  margin-top: 40px;
}

.persona-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.persona-image {
  max-width: 100%;
  width: 800px; /* Adjust as needed */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  margin-top: 20px;
}

.psychology-text {
  font-family: "gilroy", sans-serif;
  font-size: 1em !important;
  color: #ffffff !important;
  line-height: 1.7 !important;
  margin-bottom: 15px;
}

.psychology-list {
  list-style: disc;
  padding-left: 40px;
  color: #ffffff;
  margin-top: 10px;
  margin-bottom: 20px;
}

.psychology-list li {
  margin-bottom: 10px;
  font-size: 1em;
  font-family: "gilroy", sans-serif;
}

.psychology-list strong,
.psychology-text strong {
  color: #e681ff;
}

.web-psychology-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 25px;
  margin-bottom: 25px;
}

.cta-image {
  width: 25%;
  max-width: auto;
  height: auto;
  border-radius: 8px; /* optional for smooth corners */
}

.retrostroll-psychology-section-1 {
  margin-top: 40px;
}

.retrostroll-psychology-section-1 h3 {
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 1rem;
  text-align: left;
  font-weight: 500;
}

/* Subheadings for each psychological principle (h4) */
.retrostroll-psychology-section-1 h4 {
  font-size: 1.2rem;
  color: #e681ff;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.retrostroll-user-research-section h5 {
  font-family: "gilroy", sans-serif !important;
  font-size: 1.2em !important;
}

.research-text {
  font-family: "gilroy", sans-serif !important;
  font-size: 1em !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
}

.research-list {
  list-style: disc;
  padding-left: 40px;
  margin-bottom: 30px;
  color: #ffffff;
  font-size: 1em;
}

.research-list li {
  margin-bottom: 12px;
  font-size: 1em;
  font-family: "gilroy", sans-serif !important;
}

.research-list strong {
  color: #e681ff;
}

.research-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
}

.research-text-block {
  flex: 1;
}

.research-img {
  width: 150px;
  flex-shrink: 0;
}

.retrostroll-feedback-section h3 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 30px;
}

.feedback-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: box-shadow 0.3s ease;
}

.feedback-avatar {
  width: 100px;
  height: 100px;
}

.feedback-text {
  flex: 1;
  color: #ffffff;
}

.feedback-name {
  font-family: "gilroy", sans-serif;
  font-weight: 600;
  color: #e681ff;
  font-size: 1.1em;
  margin-bottom: 8px;
}

.feedback-content {
  font-family: "gilroy", sans-serif !important;
  font-size: 1em !important;
  color: #ffffff !important;
  line-height: 1.7;
}

.feedback-content strong {
  color: #e681ff;
}

.retrostroll-design-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.retrostroll-design-section h3 {
  font-size: 2.2em;
  color: #ffffff;
  font-weight: 500;
}

.design-text {
  font-size: 1rem !important;
  line-height: 1.7;
  color: #ffffff !important;
  margin-bottom: 1.5rem;
}

.design-text strong {
  color: #e681ff;
}

.retrostroll-logo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.retrostroll-logo-bg {
  background-color: #111; /* Very dark gray or black for strong contrast */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.retrostroll-logo-image {
  width: 220px;
  height: auto;
  display: block;
}

.retrostroll-color-container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.color-description {
  flex: 1;
  min-width: 250px;
}

.color-palette-image {
  width: 400px;
  height: auto;
}

.retrostroll-typography-container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.typography-description {
  flex: 1;
  min-width: 250px;
}

.typography-image {
  width: 400px;
  height: auto;
}

.structure-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.structure-subsection-heading {
  font-size: 1.5em !important;
  font-weight: lighter !important;
  margin-top: 50px !important;
}

.structure-description {
  flex: 1;
  min-width: 20px;
}

.structure-images {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.structure-image {
  width: 400px;
  height: auto;
}

.form-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.form-description {
  flex: 1;
  min-width: 280px;
}

.form-image-wrapper {
  flex-shrink: 0;
}

.form-image {
  width: 300px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.retrostroll-collab-section h3 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #7b2121;
  font-weight: 700;
}

.collab-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.collab-description {
  flex: 1;
  min-width: 280px;
}

.collab-image {
  width: 300px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.prototype-embed-wrapper {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  margin-top: 30px;
}

.summary-list {
  padding-left: 20px;
  margin-top: 10px;
  list-style-type: disc;
}

.summary-list li {
  margin-bottom: 10px;
  font-family: "gilroy", sans-serif !important;
  font-size: 1em !important;
  color: #fff;
}

.summary-list strong {
  color: #e681ff;
}

[data-project="web-design-1"] {
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  padding: 20px;
  text-align: left;
}

/* Title */
[data-project="web-design-1"] h3 {
  font-family: "gilroy", sans-serif;
  font-size: 1.8em;
  font-weight: 500;
  color: #e681ffdd;
  margin: 5px;
}

/* Heading */
[data-project="web-design-1"] h4 {
  font-family: "gilroy", sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin: 5px;
}

/* Subheading */
[data-project="web-design-1"] p {
  font-family: "gilroy", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 5px;
}

.project-info-web-design-1 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-web-design-1 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-web-design-1 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-web-design-1 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.project-info-web-design-1 {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.info-column-web-design-1 {
  flex: 1;
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
  min-width: 150px;
}

.info-column-web-design-1 h5 {
  font-family: "gilroy", sans-serif;
  font-size: 1.2em;
  font-weight: 500;
  color: #e681ff;
  margin-bottom: 0px;
  margin-top: 10px;
}

.info-column-web-design-1 p {
  font-family: "gilroy", sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgb(255, 255, 255, 0.7);
  margin: 0;
}

.OTD-section {
  margin-top: 60px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.OTD-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  margin: auto;
}

.OTD-content {
  display: flex;
  justify-content: space-between;
  align-items: center; /* ⬅️ Changed from flex-start to center */

  gap: 40px;
}

.OTD-text-content {
  max-width: 55%;
}

h3.OTD-label {
  font-family: "gilroy", sans-serif !important;
  font-size: 1.8em !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  margin-bottom: 15px !important;
}

.OTD-text strong {
  color: #e681ff;
}

.OTD-image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Ensures container stretches to match text height */
}

.OTD-image-container img {
  width: 450px;
  height: auto;
  object-fit: contain;
}

p.OTD-text {
  color: #ffffff !important;
  font-size: 1em !important;
  line-height: 1.7 !important;
  font-family: "Gilroy", sans-serif;
}

.otd-link {
  display: inline-block;
  color: #e681ff;
  font-weight: bold;
  text-decoration: underline;

  transition: all 0.3s ease;
}

.otd-link:hover {
  color: white;
  background-color: #e681ff;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 0 10px #e681ff;
}

.OTD-timeline-section {
  margin-top: 80px;
  text-align: left;
}

.timeline-image {
  max-width: 100%;
  margin: 20px 0;
}

.OTD-image-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: left;
  max-width: 40%;
}

.OTD-client-logo {
  width: 280px;
  height: auto;
  object-fit: contain;
}

.OTD-client-photo {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
}

.OTD-full-image {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

.OTD-full-image img {
  width: 30%;
  max-width: 100%;
}

.research-cell-center-2 {
  flex: 1 1 50%; /* Bigger column for explanations */
  font-size: 1em;
  color: #ffffff;
  padding: 10px;
  font-family: "gilroy", sans-serif;
}

.OTD-tools-section {
  margin-top: 60px;
  text-align: left;
}

.OTD-glass-box {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 900px;
  margin: 0 auto;
}

.OTD-tools-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align items at top to keep uniform height */
  gap: 80px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.OTD-tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  justify-content: flex-start;
  width: 120px; /* Ensure all tool blocks are same width */
  min-height: 150px; /* Optional: keeps consistent height */
  text-align: center;
}

.OTD-tool-item img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 20px;

  filter: drop-shadow(0 0 6px #e681ff);
}

.OTD-tool-item p {
  margin: 0;
  font-size: 1.2rem;
  color: white;
  font-family: "Gilroy", sans-serif;
}

.OTD-design-section {
  margin-top: 60px;
}

.OTD-design-content {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 40px;
}

.OTD-design-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.design-step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.step-info {
  flex: 1;
}

.step-info h4 {
  font-size: 1.2em;
  margin: 5px 0;
  color: white;
  font-family: "Gilroy", sans-serif;
}

.step-info p {
  font-size: 0.95em;
  line-height: 1.6;
  color: white;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.step-icon {
  width: 44px;
  height: 44px;
}

.step-info h4 {
  font-size: 1.2em;
  color: white;
  font-family: "Gilroy", sans-serif;
  margin: 0;
}

.step-icon img {
  width: 24px;
  height: 24px;
  margin-right: 6px;
  vertical-align: middle;
}

.OTD-design-image {
  flex: 1;
  max-width: 300px;
  display: flex;
  justify-content: center;
}

.OTD-design-image img {
  width: 100%;
}

/* Section container */
.header-footer-section {
  margin-top: 60px;
}

/* Heading styling */
.header-footer-heading {
  text-align: left;
  margin-bottom: 40px;
}

h3.header-footer-title {
  font-size: 1.6em;
  font-weight: 300;
  font-family: "Gilroy", sans-serif;
  color: #ffffff;
}

/* Centered image */
.header-footer-image {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.header-footer-image img {
  max-width: 1000px;
  width: 90%;
}

/* Paragraph styling */
.header-footer-description p {
  max-width: 950px;
  margin: 0 auto;
  color: #ffffff;
  font-size: 1em;
  line-height: 1.7;
  font-family: "Gilroy", sans-serif;
}

.header-footer-description strong {
  color: #e681ff;
}

/* Section Container */
.cta-illustration-section {
  margin-top: 80px;
}

/* CTA Description Text Block */
.cta-design-content {
  display: flex;
  margin-bottom: 40px;
}

.cta-design-text {
  margin-top: 20px;

  text-align: left;
}

h3.cta-subheading {
  font-size: 1.4em;
  font-weight: 200;
  color: #e681ff;
  margin-bottom: 15px;
  font-family: "Gilroy", sans-serif;
}

p.cta-description {
  font-size: 1em;
  color: #ffffff;
  line-height: 1.7;
  font-family: "Gilroy", sans-serif;
}

/* Full Image */
.cta-illustration-image {
  display: flex;
  justify-content: center;
  margin: 40px 0 20px;
}

.cta-illustration-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Description Below Image */
.cta-illustration-description p {
  font-size: 1em;
  color: #ffffff;
  line-height: 1.7;
  font-family: "Gilroy", sans-serif;
  margin-bottom: 40px;
}

.cta-illustration-description strong {
  color: #e681ff;
}

.accordion-section {
  margin-top: 80px;
}

.accordion-image-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 40px;
}

.accordion-image-container img {
  width: 100%;
  max-width: 900px;
}

.accordion-description p {
  font-family: "Gilroy", sans-serif;
  color: #ffffff;
  font-size: 1em;
  line-height: 1.7;
}

.accordion-description strong {
  color: #e681ff;
}

.responsive-section {
  margin-top: 80px;
}

.responsive-image {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 40px;
}

.responsive-image img {
  width: 100%;
  max-width: 900px;
}

.responsive-description p {
  font-family: "Gilroy", sans-serif;
  color: #eaeaea;
  font-size: 1em;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
}

.glassmorphism-hire-me {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  margin: 40px auto;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  width: 100%;
  color: rgb(255, 255, 255);
  opacity: 90%;
  overflow: hidden; /* Prevent content overflow */
  box-sizing: border-box; /* Ensure padding is considered in width */
}

.hire-me-form label {
  display: block;
  font-family: "gilroy", sans-serif;
  font-weight: 600;
  font-size: 1.2em;
  margin-top: 10px;
  color: #fff;
}

.hire-me-form input,
.hire-me-form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.cta-button[data-page="hire me"] {
  min-width: 200px; /* Set a minimum width to accommodate the text */
  white-space: nowrap; /* Ensure text stays in one line */
  font-weight: 400;
}

.buttons-row-hireme {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* Optional: adds spacing above the button */
}

.portfolio-disclaimer {
  text-align: center;
  font-size: 0.85rem;
  color: #cccccc;
  padding: 20px 10px;
  background: rgba(255, 255, 255, 0.05);
  margin-top: 60px;
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-family: "Gilroy", sans-serif;
}

/* Optional: Adjust for mid-sized screens (tablet and below) */
@media (max-width: 1200px) {
  .nav-links a {
    font-size: 1.2em;
    text-wrap: nowrap;
  }

  .nav-links {
    overflow: hidden;
    gap: 15px; /* Keep gap between nav items */
  }

  .logo img {
    height: 65px; /* Keep this size for the logo */
  }

  .video-container video {
    max-width: 500px; /* Ensure the video is responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add some border radius to the video */
  }

  .about-text,
  .about-content p,
  .skills-cell-left,
  .skills-cell-center,
  .skills-h3,
  .skills-row,
  .technical-skills-cell ul li {
    font-size: 1em; /* Adjust to desired size */
  }

  .skills-cell-right img {
    max-width: 80px;
  }

  .about-content h2 {
    font-size: 2.4em; /* Adjust heading size */
  }

  .skills-h3 {
    font-size: 1.6em;
  }

  .skills-cell-left {
    font-size: 1.2em;
  }

  .skills-cell-center {
    font-size: 1em;
  }

  .technical-skills-row-th,
  .technical-skills-cell ul li {
    font-size: 1.1em;
  }

  /* Adjust line heights for better readability if needed */
  .about-content p {
    line-height: 1.5;
  }

  .about-image img {
    max-width: 300px; /* Ensure image stays within the container */
  }

  .services-section {
    padding: 30px;
  }

  .services-section h2 {
    font-size: 2.4em;
    top: 15px;
  }

  .left,
  .center,
  .right,
  .lefter,
  .righter {
    width: 150px; /* Decrease width */
    height: 130px; /* Decrease height */
  }

  .services-text {
    bottom: -30px;
  }

  .explainer {
    font-size: 1.5em;
    padding: 3px;
  }
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth !important;
  }

  .site-wrapper {
    overflow-x: hidden;
    position: relative;
    z-index: 0;
  }

  .shooting-star {
    transform: rotate(55deg);
  }

  @keyframes shooting-star-mobile {
    0% {
      top: 105%;
      left: 90%;
      opacity: 1;
    }
    100% {
      top: -5%;
      left: -10%;
      opacity: 0;
    }
  }

  #intro-video {
    display: block !important;
    width: 100%;
    max-height: 100vh;
    object-fit: cover;
    background-color: black;
  }

  header {
    position: fixed !important; /* already added */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    height: 90px;
    align-items: center;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.9);
  }

  .logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
  }

  .logo img {
    width: 180px; /* Adjust size as needed */
    height: auto;
  }

  .hamburger {
    display: block;
  }

  .hire-button {
    transform: scale(1.5);
    font-size: 0.9em;
  }

  .hire-button .text {
    font-size: 1em;
  }

  .hire-button .galaxy,
  .hire-button .galaxy__container,
  .hire-button .galaxy__ring,
  .hire-button .star {
    transform: scale(0.1.5);
  }

  .desktop-nav {
    display: none;
  }

  .intro-section {
    margin-top: 100px;
  }

  .divider img {
    width: 100%;
    display: block;
    transform: scale(1.7);
    transform-origin: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .glassmorphism-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-width: 90%;
    padding: 20px;
    margin: 0 auto;
    height: auto; /* ✅ Fix */
    min-height: 750px; /* ✅ Optional: to ensure full screen look */
  }

  .emoji-picture {
    margin-right: 0; /* Reset margin */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .emoji-picture img {
    width: 300px;
    cursor: default;
  }

  .emoji {
    width: 100px;
    height: auto;
  }

  .eyelid {
    display: none;
  }

  .arrow {
    display: none; /* Hide arrow on mobile if not needed */
  }

  #intro-text {
    position: static;
    top: auto;
    right: auto;
    margin-top: 10px;
    cursor: default;
    text-align: center;
    align-items: center;
    font-size: 1.2em; /* Slightly smaller text for mobile */
    white-space: normal; /* Allow text to wrap */
  }

  .text-info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 12px;
  }
  .text-info h2 {
    text-align: center;
    margin-top: 10px;
  }

  .description {
    text-align: center;
  }

  .buttons-row {
    text-align: center;
    margin-top: 20px;
  }

  .disclaimer-note {
    text-align: center;
  }

  .glassmorphism-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-width: 90%;
    padding: 20px;
    margin: 0 auto;
  }

  .about-section {
    flex-direction: column; /* Stack content vertically */
    padding: 20px; /* Reduce padding for mobile */
    align-items: center;
  }

  .about-content h2 {
    text-align: center; /* Center the heading */
    font-size: 2em; /* Smaller font size for mobile */
  }

  .about-container {
    flex-direction: column; /* Stack image and text */
    align-items: center; /* Center content */
    text-align: center; /* Center-align text for readability */
  }

  .about-image img {
    order: 1;
    max-width: 300px; /* Make image responsive */
    margin-bottom: 10px; /* Add space below image */
  }

  .about-text {
    order: 2;
    flex: none; /* Remove fixed flex basis */
    font-size: 1em; /* Adjust text size for mobile */
    line-height: 1.4; /* Slightly smaller line-height */
    max-width: 70%;
    padding: 20px;
    margin: 0 auto;
    text-align: left;
  }

  /* Stack skills table in one column */
  .skills-table {
    flex-direction: column;
    gap: 10px; /* Adjust gap for mobile view */
    padding: 10px;
    margin: 0 auto;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .skills-h3 {
    font-size: 1.4em;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 0;
    padding-top: 0;
    align-items: center;
  }

  .skills-row {
    flex-direction: column; /* Stack cells vertically on smaller screens */
    padding: 10px;
    margin: 5px 0; /* Reduced margin for compact view */
  }

  .skills-cell-left,
  .skills-cell-center,
  .skills-cell-right {
    padding: 10px;
    text-align: left; /* Center-align text for stacked layout */
  }

  .technical-skills-table {
    max-width: 100%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto; /* Center the table */
  }

  .technical-skills-cell {
    padding: 6px; /* Reduce padding for a tighter layout */
    font-size: 0.9em; /* Slightly smaller font size for mobile */
    border: 1px solid #ad31ff;
    box-sizing: border-box;
  }

  .technical-skills-cell ul {
    padding-left: 10px; /* Adjust padding for better alignment */
  }

  .technical-skills-cell ul li {
    font-size: 0.8em; /* Smaller font for tighter spaces */
    margin-bottom: 3px; /* Reduced spacing between list items */
  }

  .skills-cell-right img {
    max-width: 100px; /* Scale down icon further for mobile view */
  }

  .gradient-line {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 90%;
    margin: 30px auto 15px auto; /* Center horizontally with auto margins */
  }

  .video-container {
    display: flex;
    flex-direction: column; /* Stack vertically if there are other elements */
    justify-content: center;
    align-items: center;
    margin-top: 15px; /* Adjust margin for spacing */
    width: 100%; /* Ensure the container takes full width */
  }

  .glassmorphism-services {
    max-width: 100%;
    height: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top */
  }

  .services-section {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Adjust header style to position it at the top */
  .services-section h2 {
    font-size: 2em;
    position: relative;
    top: 0;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    order: -1; /* Ensure heading appears first in mobile view */
  }

  .all {
    display: flex;
    flex-direction: column; /* Stack elements in a single column */
    align-items: center; /* Center align each service box */
    width: 100%; /* Full width for mobile */
    perspective: none;
    transform: none;
  }

  /* Hide explainer for mobile view */
  .explainer {
    display: none;
  }

  /* Service boxes styling for mobile */
  .left,
  .center,
  .right,
  .lefter,
  .righter {
    width: 150px; /* Decrease width */
    height: 130px; /* Decrease height */
    margin-bottom: 50px;
    transform: none;
    opacity: 1;
    transition: none;
    box-shadow: none;
    text-align: center; /* Center text within the box */
  }

  .services-text {
    position: relative;
    bottom: -125px; /* Adjust position if needed */
    font-size: 1em;
    margin-top: 10px;
    opacity: 1; /* Make text fully visible */
    transition: none; /* Remove any transition effect */
    text-shadow: none;
    color: #fff; /* Ensure text color is visible */
  }

  .glassmorphism-work {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 40px !important;
  }

  .work-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .work-categories button {
    flex: 0 1 45%;
    font-size: 0.95rem;
    padding: 12px;
  }

  /* FIX SCROLLABLE FULLSCREEN PROJECT AREA */
  .glassmorphism-work.fullscreen {
    position: fixed !important;
    top: 45% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    height: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 15px 40px !important;
    z-index: 9999;
  }

  .project-details {
    overflow: visible !important;
  }

  .project-navigation {
    position: sticky !important;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
  }

  /* ==== PROJECT DESCRIPTION PARAGRAPH ==== */
  [data-project="featured-project-1"] p,
  [data-project="ux-design-1"] p,
  [data-project="ux-design-2"] p,
  [data-project="web-design-1"] p,
  [data-project="motion-graphics-1"] p,
  [data-project="graphic-design-1"] p {
    font-family: "gilroy", sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 10px 5px;
    line-height: 1.6;
  }

  [data-project="featured-project-1"] h4,
  [data-project="ux-design-1"] h4,
  [data-project="ux-design-2"] h4,
  [data-project="web-design-1"] h4,
  [data-project="motion-graphics-1"] h4,
  [data-project="graphic-design-1"] h4 {
    font-size: 1.3em;
    margin: 10px 5px;
  }

  .project-info,
  .project-info-ux-design-1,
  .project-info-web-design-1,
  .project-info-motiongraphics,
  .project-info-motiongraphics-2,
  .project-info-motiongraphics-3,
  .project-info-graphic-design-1,
  .project-info-graphic-design-2,
  .project-info-graphic-design-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px;
    align-items: flex-start;
    margin-top: 5px;
    margin-bottom: 20px;
  }

  /* === WEB DESIGN === */
  [data-project="web-design-1"] {
    padding: 15px;
    box-sizing: border-box;
  }
  [data-project="web-design-1"] h4 {
    font-family: "gilroy", sans-serif;
    font-size: 1.3em;
    margin: 10px 5px;
    color: #ffffff;
  }
  [data-project="web-design-1"] p {
    font-family: "gilroy", sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 10px 5px;
    line-height: 1.6;
  }
  .project-info-web-design-1 {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
    align-items: flex-start;
    margin: 15px 0 20px;
  }
  .info-column-web-design-1 {
    width: 100% !important;
    padding: 0;
    margin-bottom: 10px;
    min-width: 0;
  }
  .info-column-web-design-1 h5 {
    font-family: "gilroy", sans-serif;
    font-size: 1.05em;
    font-weight: 500;
    color: #e681ff;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .info-column-web-design-1 p {
    font-family: "gilroy", sans-serif;
    font-size: 0.95em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }

  /* === UX DESIGN === */
  [data-project="ux-design-1"] h4,
  [data-project="ux-design-1"] p,
  .project-info-ux-design-1,
  .info-column-ux-design-1,
  .info-column-ux-design-1 h5,
  .info-column-ux-design-1 p {
    all: unset;
  }
  [data-project="ux-design-1"] {
    padding: 15px;
    box-sizing: border-box;
  }
  [data-project="ux-design-1"] h4 {
    font-family: "gilroy", sans-serif;
    font-size: 1.3em;
    margin: 10px 5px;
    color: #ffffff;
  }
  [data-project="ux-design-1"] p {
    font-family: "gilroy", sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 10px 5px;
    line-height: 1.6;
  }
  .project-info-ux-design-1 {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
    align-items: flex-start;
    margin: 15px 0 20px;
  }
  .info-column-ux-design-1 {
    width: 100% !important;
    padding: 0;
    margin-bottom: 10px;
    min-width: 0;
  }
  .info-column-ux-design-1 h5 {
    font-family: "gilroy", sans-serif;
    font-size: 1.05em;
    font-weight: 500;
    color: #e681ff;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .info-column-ux-design-1 p {
    font-family: "gilroy", sans-serif;
    font-size: 0.95em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }

  .glassmorphism-contact {
    padding: 15px;
    margin: 20px auto;
    max-width: 500px;
    width: 100%; /* Allows full width on mobile */
  }

  .contact-content {
    flex-direction: column;
    margin: 20px; /* Reduced margin */
    gap: 20px; /* Reduced gap between elements */
  }

  .contact-heading,
  .contact-heading-gradient {
    font-size: 2em; /* Adjusted font size for mobile */
    text-align: center; /* Center-align text */
  }

  .contact-image {
    order: 2; /* Ensure image appears first */
    width: 100%;
    margin-top: 20px; /* Add some spacing below the image */
  }

  .contact-image img {
    max-width: 80%; /* Fit image within mobile view */
    border-radius: 10px; /* Slightly smaller border radius */
  }

  .contact-text {
    order: 1;
    width: 100%; /* Full width for mobile */
    text-align: center; /* Center-align content */
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
  }

  .contact-find-me {
    font-size: 1.5em; /* Adjusted font size */
  }

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

  .social-icon {
    width: 25px; /* Slightly smaller icon for mobile */
    height: 25px;
  }

  .glassmorphism-hire-me {
    padding: 15px;
    margin: 20px auto;
  }

  .hire-me-section {
    padding: 20px;
  }

  .glassmorphism-hire-me h2 {
    font-size: 2em; /* Reduce font size for headings */
  }

  .glassmorphism-hire-me p {
    font-size: 1em; /* Reduce paragraph font size */
  }

  .hire-me-form label {
    font-size: 1em; /* Adjust label font size */
  }

  .hire-me-form input,
  .hire-me-form textarea {
    padding: 8px; /* Reduce padding */
    font-size: 1em; /* Adjust font size for readability */
  }

  .cta-button[data-page="hire me"] {
    min-width: 160px; /* Adjust button width */
    font-size: 1em; /* Adjust font size */
  }

  .buttons-row-hireme {
    margin-top: 15px;
  }
}