/* === 2. CRITICAL FONT FIXES === */

/* Apply font to everything EXCEPT icons */

/* FORCE FIX FOR ICONS (The Squares Issue) */

.fas, .fa-solid, .fa-regular {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* === 3. CUTE JUMPING BUNNY LOGO === */

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bunny-icon {
  width: 40px;
  height: 40px;
  fill: var(--accent);
  filter: drop-shadow(0 4px 6px rgba(219, 39, 119, 0.2));
  animation: bunnyJump 3s infinite ease-in-out;
  transform-origin: bottom center;
}

@keyframes bunnyJump {
  0%, 10%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  5% {
    transform: translateY(5px) scale(1.1, 0.9);
  }
  15% {
    transform: translateY(-15px) scale(0.9, 1.1);
  }
  20% {
    transform: translateY(0) scale(1, 1);
  }
}

.logo-text {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.5px;
}

/* === 4. GLASS MENU === */

nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.1) !important;
  border-radius: 100px !important;
  padding: 1rem 2.5rem !important;
  margin-top: 2rem !important;
  margin-bottom: 5rem !important;
  width: 100% !important;
}

.nav-links a {
  text-decoration: none !important;
  color: var(--text-muted) !important;
  margin-left: 2.5rem !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  transition: 0.2s !important;
}

.nav-links a:hover {
  color: var(--accent) !important;
}

/* === 5. HERO SECTION & PROFILE CARD === */

.hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  align-items: center !important;
  margin-bottom: 8rem !important;
}

.hero-eyebrow {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

h1 {
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--text-main) !important;
  margin-bottom: 1.5rem !important;
}

/* FIX FOR BUTTONS "Looking Weird" -> Now Aesthetic Pink Pills */

.button-group {
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
}

.btn-main {
  padding: 14px 32px !important;
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
  color: white !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: 0.3s !important;
  box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3) !important;
  border: none !important;
}

.btn-main:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 30px rgba(236, 72, 153, 0.5) !important;
}

.btn-secondary {
  padding: 14px 32px !important;
  background: white !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: 0.3s !important;
}

.btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* === FIX FOR "NO CARD ON RIGHT" === */

.profile-container {
  display: flex !important;
  justify-content: center !important;
}

.profile-card {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  width: 100% !important;
  max-width: 500px !important;
  border-radius: 40px !important;
  padding: 3rem !important;
  position: relative !important;
  text-align: center !important;
  border: 2px solid white !important;
  box-shadow: 0 20px 60px -10px rgba(236, 72, 153, 0.15) !important;
}

/* Profile Image */

.image-wrapper {
  position: relative !important;
  display: inline-block !important;
  width: 280px !important;
  height: 280px !important;
  margin-bottom: 2rem !important;
}

.profile-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 8px solid #ffffff !important;
  box-shadow: 0 20px 50px -10px rgba(251, 207, 232, 1) !important;
}

/* Floating Badges */

.floating-badge {
  position: absolute !important;
  padding: 10px 22px !important;
  border-radius: 50px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid transparent !important;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #fbcfe8 0%, #db2777 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 10px 20px rgba(236, 72, 153, 0.15) !important;
  z-index: 10 !important;
  animation: badgeFloat 6s ease-in-out infinite !important;
}

.badge-1 {
  top: 10%;
  left: -25%;
  animation-delay: 0s;
}

.badge-2 {
  top: 5%;
  right: -25%;
  animation-delay: 1.5s;
}

.badge-3 {
  bottom: 15%;
  left: -30%;
  animation-delay: 3s;
}

.badge-4 {
  bottom: 10%;
  right: -25%;
  animation-delay: 4.5s;
}

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

/* Stats */

.stats-row {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 2rem;
}

.stat-number {
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  line-height: 1 !important;
}

.stat-label {
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* === 6. TECH STACK (Fixed Glass & Icons) === */

.section-header-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  position: relative;
  margin-top: 2rem;
}

.section-header-wrapper::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 50px;
  background: var(--accent);
  opacity: 0.3;
  filter: blur(40px);
  border-radius: 50%;
  z-index: -1;
}

.section-pill {
  background: white;
  padding: 12px 40px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-main);
  border: 2px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #fbcfe8, #be185d);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.skills-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 8rem auto !important;
  padding: 0 15px !important;
}

.skill-item {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 2px solid white !important;
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.05) !important;
  height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 28px !important;
  transition: all 0.3s !important;
  padding: 15px !important;
  text-align: center !important;
}

.skill-item:hover {
  transform: translateY(-10px) scale(1.05) !important;
  background: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 25px 50px -12px rgba(190, 24, 93, 0.2) !important;
  z-index: 100 !important;
}

/* BIG ICONS FIX */

.skill-icon {
  font-size: 4rem !important;
  margin-bottom: 18px !important;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.08)) !important;
  display: inline-block !important;
}

.skill-name {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

/* Orbs */

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.5;
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #fbcfe8 0%, rgba(255,255,255,0) 70%);
  top: -15%;
  left: -10%;
}

.orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #e9d5ff 0%, rgba(255,255,255,0) 70%);
  bottom: -10%;
  right: -10%;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #ffe4e6 0%, rgba(255,255,255,0) 70%);
  top: 30%;
  left: 30%;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}

/* Responsive */

@media (max-width: 1200px) {
  .skills-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 992px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 992px) {
  .hero {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none !important;
  }
}

@media (max-width: 768px) {
  nav {
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  .floating-badge {
    position: relative !important;
    display: inline-block !important;
    margin: 5px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .profile-card {
    padding: 2rem !important;
  }
}

@media (max-width: 768px) {
  .button-group {
    justify-content: center !important;
  }
}

/* --- 2. CRITICAL ICON FIX (Restores the logos) --- */

/* This forces icons to use the FontAwesome font, ignoring the global font rule */

.fas, .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  display: inline-block !important;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  display: inline-block !important;
}

/* --- 3. FIX TECH STACK GLASS & LAYOUT --- */

.skills-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  padding: 10px !important;
}

.skill-item {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 10px 30px rgba(190, 24, 93, 0.1) !important;
  height: 180px !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix the Icon Size inside the cards */

.skill-icon {
  font-size: 3.5rem !important;
  margin-bottom: 15px !important;
  color: #374151 !important;
}

/* Hover Effect: Turns Pink */

.skill-item:hover {
  background: #ffffff !important;
  transform: translateY(-5px) !important;
  border-color: var(--accent) !important;
}

/* --- 4. FIX "WEIRD" BUTTONS (Make them Aesthetic Pills) --- */

.button-group {
  display: flex !important;
  gap: 15px !important;
  margin-top: 2rem !important;
}

/* Primary Button (Gradient Pink) */

.btn-main {
  background: linear-gradient(135deg, #f472b6 0%, #be185d 100%) !important;
  color: white !important;
  padding: 14px 35px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 10px 20px rgba(190, 24, 93, 0.25) !important;
}

/* Secondary Button (White with Pink Border) */

.btn-secondary {
  background: #ffffff !important;
  color: var(--accent) !important;
  border: 2px solid #fce7f3 !important;
  padding: 14px 35px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
}

/* --- RESPONSIVE FIXES (Mobile) --- */

@media (max-width: 992px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .button-group {
    flex-direction: column !important;
  }
}

:root {
  --accent: #be185d !important;
  --accent-gradient: linear-gradient(135deg, #fbcfe8 0%, #be185d 100%) !important;
}

/* --- 2. CRITICAL ICON FIX (Restores the logos) --- */

/* This forces icons to use the FontAwesome font, ignoring the global font rule */

.fas, .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  display: inline-block !important;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  display: inline-block !important;
}

/* --- 3. FIX TECH STACK GLASS & LAYOUT --- */

.skills-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  padding: 10px !important;
}

.skill-item {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 10px 30px rgba(190, 24, 93, 0.1) !important;
  height: 180px !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix the Icon Size inside the cards */

.skill-icon {
  font-size: 3.5rem !important;
  margin-bottom: 15px !important;
  color: #374151 !important;
}

/* Hover Effect: Turns Pink */

.skill-item:hover {
  background: #ffffff !important;
  transform: translateY(-5px) !important;
  border-color: var(--accent) !important;
}

/* --- 4. FIX "WEIRD" BUTTONS (Make them Aesthetic Pills) --- */

.button-group {
  display: flex !important;
  gap: 15px !important;
  margin-top: 2rem !important;
}

/* Primary Button (Gradient Pink) */

.btn-main {
  background: linear-gradient(135deg, #f472b6 0%, #be185d 100%) !important;
  color: white !important;
  padding: 14px 35px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 10px 20px rgba(190, 24, 93, 0.25) !important;
}

/* Secondary Button (White with Pink Border) */

.btn-secondary {
  background: #ffffff !important;
  color: var(--accent) !important;
  border: 2px solid #fce7f3 !important;
  padding: 14px 35px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
}

/* --- RESPONSIVE FIXES (Mobile) --- */

@media (max-width: 992px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .button-group {
    flex-direction: column !important;
  }
}

.fas, .fa-solid, .fa-server, .fa-database, .fa-shield-alt, .fa-bolt, .fa-chart-line {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  display: inline-block !important;
}

.fab, .fa-brands, .fa-laravel, .fa-html5, .fa-python, .fa-wordpress, .fa-google, .fa-hubspot, .fa-figma {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  display: inline-block !important;
}

/* 2. FORCE GLASS CARDS (Make them see-through & Pink) */

.skill-item {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 15px 35px rgba(219, 39, 119, 0.1) !important;
  height: 190px !important;
  border-radius: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

/* 3. HOVER EFFECT (Pop Up + White Background) */

.skill-item:hover {
  transform: translateY(-10px) !important;
  background: #ffffff !important;
  border-color: #db2777 !important;
  box-shadow: 0 20px 50px rgba(219, 39, 119, 0.25) !important;
}

/* 4. ENSURE ICON SIZE IS BIG */

.skill-item i {
  font-size: 4rem !important;
  margin-bottom: 15px !important;
  color: #374151 !important;
  font-style: normal !important;
}

/* 5. ENSURE GRID IS 6 COLUMNS (Desktop) */

@media (min-width: 992px) {
  .skills-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

.page-header {
  text-align: center;
  margin-top: 120px;
  margin-bottom: 60px;
  padding: 0 20px;
}

.page-title {
  font-size: 3rem;
  font-weight: 800;
  background: -webkit-linear-gradient(45deg, #be185d, #db2777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #6b7280;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* FEATURED CARD */

.featured-wrapper {
  max-width: 1000px;
  margin: 0 auto 4rem auto;
  padding: 0 20px;
}

.featured-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 !important;
  overflow: hidden;
}

.featured-img-col {
  flex: 1.2;
  height: 350px;
}

.featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-content {
  flex: 1;
  padding: 2.5rem;
}

/* GRID LAYOUT */

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto 5rem auto;
  padding: 0 20px;
}

/* RESOURCE CARD */

.resource-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}

.resource-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(219, 39, 119, 0.15);
}

.res-img-box {
  height: 200px;
  width: 100%;
  background: #fce7f3;
  position: relative;
}

.res-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.res-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(255,255,255,0.9);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.res-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.res-date {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}

.res-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 10px;
  line-height: 1.3;
}

.res-excerpt {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.read-more {
  margin-top: auto;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}

.read-more:hover {
  gap: 12px;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .featured-card {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .featured-img-col {
    height: 250px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2.2rem;
  }
}

.fa-laravel {
  color: #F05340 !important;
}

/* Laravel Red */

.fa-html5 {
  color: #E34F26 !important;
}

/* HTML Orange */

.fa-python {
  color: #3776AB !important;
}

/* Python Blue */

.fa-database {
  color: #00758F !important;
}

/* MySQL Teal */

.fa-server {
  color: #64748b !important;
}

/* DNS Slate */

.fa-wordpress {
  color: #21759B !important;
}

/* WP Blue */

.fa-shield-alt {
  color: #10B981 !important;
}

/* Security Green */

.fa-google {
  color: #4285F4 !important;
}

/* Google Blue */

.fa-bolt {
  color: #FF4F00 !important;
}

/* Zapier Orange */

.fa-hubspot {
  color: #ff7a59 !important;
}

/* HubSpot Orange */

.fa-chart-line {
  color: #F59E0B !important;
}

/* PowerBI Gold */

.fa-figma {
  color: #A259FF !important;
}

/* Figma Purple */

.fa-laravel {
  color: #F05340 !important;
  filter: drop-shadow(0 4px 10px rgba(240, 83, 64, 0.3));
}

/* Red */

.fa-html5 {
  color: #E34F26 !important;
  filter: drop-shadow(0 4px 10px rgba(227, 79, 38, 0.3));
}

/* Orange */

.fa-python {
  color: #3776AB !important;
  filter: drop-shadow(0 4px 10px rgba(55, 118, 171, 0.3));
}

/* Blue */

.fa-database {
  color: #00758F !important;
  filter: drop-shadow(0 4px 10px rgba(0, 117, 143, 0.3));
}

/* Teal (MySQL) */

.fa-server {
  color: #64748b !important;
  filter: drop-shadow(0 4px 10px rgba(100, 116, 139, 0.3));
}

/* Slate (DNS) */

.fa-wordpress {
  color: #21759B !important;
  filter: drop-shadow(0 4px 10px rgba(33, 117, 155, 0.3));
}

/* WP Blue */

.fa-shield-alt {
  color: #10B981 !important;
  filter: drop-shadow(0 4px 10px rgba(16, 185, 129, 0.3));
}

/* Green (Security) */

.fa-google {
  color: #4285F4 !important;
  filter: drop-shadow(0 4px 10px rgba(66, 133, 244, 0.3));
}

/* Google Blue */

.fa-bolt {
  color: #FF4F00 !important;
  filter: drop-shadow(0 4px 10px rgba(255, 79, 0, 0.3));
}

/* Zapier Orange */

.fa-hubspot {
  color: #ff7a59 !important;
  filter: drop-shadow(0 4px 10px rgba(255, 122, 89, 0.3));
}

/* HubSpot Orange */

.fa-chart-line {
  color: #F59E0B !important;
  filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.3));
}

/* Gold (PowerBI) */

.fa-figma {
  color: #A259FF !important;
  filter: drop-shadow(0 4px 10px rgba(162, 89, 255, 0.3));
}

/* Figma Purple */

/* 2. MAKE THEM BOUNCE & GLOW ON HOVER */

.skill-item:hover .skill-icon {
  transform: scale(1.15) rotate(5deg) !important;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.2)) !important;
}

/* 3. OPTIONAL: Add a subtle border color change on hover */

.skill-item:hover {
  border-color: rgba(219, 39, 119, 0.3) !important;
}

@media (max-width: 768px) {
  nav {
    padding: 0.8rem 1rem !important;
    gap: 10px !important;
    justify-content: space-between !important;
  }
}

/* Shrink the "Contact Me" Button on Mobile */

@media (max-width: 768px) {
  .btn-main {
    padding: 10px 18px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }
}

/* Shrink the Logo slightly */

@media (max-width: 768px) {
  .logo-text {
    font-size: 1.2rem !important;
  }
}

@media (max-width: 768px) {
  .bunny-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Keep the logo and bunny together */

@media (max-width: 768px) {
  .logo-wrapper {
    gap: 8px !important;
  }
}

/* 3. FIX HERO TEXT SIZE ON PHONE */

@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem !important;
  }
}

/* 4. CONTROL THE BACKGROUND ORBS ON MOBILE */

/* Shrink orbs so they don't cause scrolling issues */

@media (max-width: 768px) {
  .orb-1 {
    width: 300px !important;
    height: 300px !important;
    left: -50px !important;
  }
}

@media (max-width: 768px) {
  .orb-2 {
    width: 250px !important;
    height: 250px !important;
    right: -50px !important;
  }
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* 1. UN-HIDE THE BUTTONS */

@media (max-width: 768px) {
  .nav-btn {
    display: flex !important;
    width: 35px !important;
    height: 35px !important;
    font-size: 0.9rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    color: var(--accent) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 50 !important;
  }
}

/* 2. POSITION THEM ON THE EDGES */

@media (max-width: 768px) {
  .prev-btn {
    left: 5px !important;
  }
}

@media (max-width: 768px) {
  .next-btn {
    right: 5px !important;
  }
}

/* 3. ADD PADDING TO TRACK SO CARDS AREN'T COVERED */

@media (max-width: 768px) {
  .slider-track {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* 4. ENSURE CONTAINER IS RELATIVE (So arrows stay inside) */

@media (max-width: 768px) {
  .carousel-section {
    position: relative !important;
    padding: 0 !important;
  }
}

/* --- A. FIX THE CONTAINER WIDTH --- */

@media (max-width: 768px) {
  .container {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* --- B. FIX THE NAVIGATION BAR --- */

@media (max-width: 768px) {
  nav {
    width: 100% !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }
}

/* Shrink the button so it fits */

@media (max-width: 768px) {
  .btn-main {
    padding: 8px 15px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
}

/* --- C. FIX HERO TEXT ALIGNMENT --- */

@media (max-width: 768px) {
  .hero {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 2rem !important;
  }
}

@media (max-width: 768px) {
  .hero-text {
    width: 100% !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
  }
}

/* --- D. FIX PROFILE PICTURE & BADGES (Crucial!) --- */

/* This stops the badges from hanging off the screen */

@media (max-width: 768px) {
  .profile-card {
    width: 100% !important;
    padding: 2rem 1rem !important;
    box-sizing: border-box !important;
    margin: 2rem 0 !important;
  }
}

@media (max-width: 768px) {
  .image-wrapper {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 768px) {
  .profile-img {
    width: 180px !important;
    height: 180px !important;
    margin-bottom: 20px !important;
  }
}

/* FORCE BADGES TO SIT UNDER IMAGE (Not float outside) */

@media (max-width: 768px) {
  .floating-badge {
    position: static !important;
    display: inline-block !important;
    margin: 5px !important;
    transform: none !important;
    animation: none !important;
  }
}

body {
}

/* 1. RESET THE MENU BUTTON (Make it small again) */

@media (max-width: 992px) {
  nav .btn-main {
    width: auto !important;
    display: inline-block !important;
    padding: 8px 18px !important;
    font-size: 0.8rem !important;
    height: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* 2. KEEP HERO BUTTONS BIG (Target only them) */

@media (max-width: 992px) {
  .button-group .btn-main, .button-group .btn-secondary {
    width: 100% !important;
    height: 55px !important;
  }
}

/* Specific fix for the overlap in your screenshot */

@media (max-width: 450px) {
  nav {
    gap: 10px !important;
    padding: 10px 15px !important;
  }
}

/* Make the logo slightly smaller so everything fits */

@media (max-width: 450px) {
  .logo-text {
    font-size: 1.1rem !important;
  }
}

@media (max-width: 450px) {
  .bunny-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Target the button inside the Hero Group only */

@media (max-width: 992px) {
  .button-group .btn-main {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 55px !important;
  }
}

/* Match the Secondary Button (Download Resume) */

@media (max-width: 992px) {
  .button-group .btn-secondary {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    height: 55px !important;
  }
}

.experience-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  max-width: 800px !important;
  margin: 0 auto 5rem auto !important;
}

.experience-card {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 2px solid white !important;
  border-radius: 24px !important;
  padding: 2.5rem !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  gap: 2rem !important;
  align-items: flex-start !important;
}

.experience-card:hover {
  transform: translateY(-5px) !important;
  background: white !important;
  box-shadow: 0 20px 40px rgba(190, 24, 93, 0.1) !important;
  border-color: var(--accent) !important;
}

/* The "Pill" Date */

.exp-date {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
  min-width: 120px !important;
  text-align: center !important;
}

.exp-content h3 {
  margin: 0 0 5px 0 !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
}

.company-name {
  display: block !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  margin-bottom: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.exp-content p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--text-main) !important;
  margin-bottom: 1.5rem !important;
}

/* Tech Tags (Little bubbles) */

.tag-container {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.tech-tag {
  background: white !important;
  border: 1px solid #fce7f3 !important;
  color: var(--accent) !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

/* --- 2. PORTFOLIO GRID --- */

.portfolio-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  margin-bottom: 8rem !important;
}

.portfolio-card {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 2px solid white !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.portfolio-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05) !important;
}

/* Placeholder Image Box */

.portfolio-img-box {
  width: 100% !important;
  height: 200px !important;
  background: linear-gradient(135deg, #fbcfe8 0%, #f472b6 100%) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Arrow Icon Overlay */

.portfolio-overlay i {
  color: white !important;
  font-size: 2rem !important;
  opacity: 0.5 !important;
  transition: 0.3s !important;
}

.portfolio-card:hover .portfolio-overlay i {
  transform: scale(1.2) !important;
  opacity: 1 !important;
}

.portfolio-content {
  padding: 1.5rem !important;
  text-align: left !important;
}

.portfolio-content h3 {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.5rem !important;
}

.portfolio-content p {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 1.5rem !important;
}

.btn-link {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: 0.3s !important;
}

.btn-link:hover {
  border-bottom-color: var(--accent) !important;
}

/* --- 3. FOOTER STYLES --- */

footer {
  border-top: 1px solid rgba(0,0,0,0.05) !important;
  padding: 4rem 0 !important;
  text-align: center !important;
  background: rgba(255,255,255,0.5) !important;
}

.footer-links {
  display: flex !important;
  justify-content: center !important;
  gap: 2rem !important;
  margin-bottom: 2rem !important;
}

.footer-links a {
  text-decoration: none !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: 0.3s !important;
}

.footer-links a:hover {
  color: var(--accent) !important;
}

.copyright {
  font-size: 0.8rem !important;
  color: #9ca3af !important;
  line-height: 1.6 !important;
}

/* --- 4. RESPONSIVE FIXES FOR NEW SECTIONS --- */

@media (max-width: 992px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .experience-card {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

@media (max-width: 768px) {
  .exp-date {
    align-self: flex-start !important;
    margin-bottom: 0.5rem !important;
  }
}

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .footer-links {
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
  }
}

.slider-container {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 20px !important;
  padding: 20px 5% 40px 5% !important;
  width: 100% !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.slider-container::-webkit-scrollbar {
  display: none !important;
}

/* 2. CARD SIZING (Fixing "Too Big") */

.slider-card {
  min-width: 300px !important;
  max-width: 300px !important;
  scroll-snap-align: center !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 2px solid white !important;
  border-radius: 24px !important;
  transition: 0.3s !important;
  margin: 0 !important;
}

/* Hover Effect (Lift) */

.slider-card:hover {
  transform: translateY(-10px) !important;
  background: white !important;
  box-shadow: 0 15px 40px rgba(190, 24, 93, 0.15) !important;
  border-color: var(--accent) !important;
}

/* 3. EXPERIENCE CARD SPECIFICS */

.experience-card {
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.exp-header {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 1rem !important;
}

/* 4. PORTFOLIO CARD SPECIFICS */

.portfolio-card {
  padding: 0 !important;
  overflow: hidden !important;
}

.portfolio-img-box {
  height: 160px !important;
  background: linear-gradient(135deg, #fbcfe8 0%, #f472b6 100%) !important;
  width: 100% !important;
}

.portfolio-content {
  padding: 1.5rem !important;
}

/* 5. FOOTER FIX (Make it small) */

footer {
  padding: 2rem 0 1rem 0 !important;
  margin-top: 2rem !important;
  background: transparent !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
}

.footer-links {
  gap: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.copyright {
  font-size: 0.75rem !important;
}

/* 6. RESPONSIVE (Mobile) */

@media (max-width: 768px) {
  .slider-card {
    min-width: 280px !important;
  }
}

@media (max-width: 768px) {
  .section-header-wrapper {
    margin-top: 3rem !important;
  }
}

.carousel-section {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 25px;
  padding: 20px 10px 40px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

/* 2. NAVIGATION BUTTONS (Glassy Arrows) */

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  color: var(--accent);
  font-size: 1.2rem;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.prev-btn {
  left: -20px;
}

.next-btn {
  right: -20px;
}

/* 3. NEW EXPERIENCE CARD LAYOUT (Image + Text) */

.experience-card {
  min-width: 320px;
  max-width: 320px;
  padding: 0 !important;
  overflow: hidden;
  flex-direction: column !important;
}

.exp-img-container {
  width: 100%;
  height: 140px;
  background: #fce7f3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.exp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exp-content-body {
  padding: 1.5rem;
}

/* 4. RESPONSIVE */

/* Hide arrows on mobile (swipe is better) */

@media (max-width: 768px) {
  .nav-btn {
    display: none;
  }
}

@media (max-width: 768px) {
  .carousel-section {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .slider-track {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.modal-content {
  background: #ffffff !important;
  width: 90%;
  max-width: 900px;
  padding: 0 !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-close {
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  font-size: 1.5rem;
  transition: 0.3s;
}

.modal-close:hover {
  background: white;
  transform: rotate(90deg);
}

/* --- MODAL HERO GALLERY --- */

.modal-hero-gallery {
  height: 300px;
  position: relative;
  background: #f0f0f0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.modal-hero-gallery::-webkit-scrollbar {
  display: none;
}

.modal-hero-img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}

/* Simple gallery navigation dots */

.gallery-nav {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.gallery-dot {
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
}

.gallery-dot.active {
  background: white;
}

/* --- MODAL BODY CONTENT --- */

.modal-body-content {
  padding: 2.5rem;
}

.modal-badges {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
}

.modal-badge {
  padding: 6px 14px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-date {
  background: #fce7f3;
  color: var(--accent);
}

.badge-role {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
}

.modal-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 0.5rem 0;
  color: #1f2937;
}

.modal-company {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 1.5rem;
}

.modal-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4b5563;
  margin-bottom: 2.5rem;
  max-width: 800px;
}

/* --- DUAL ROLE SPLIT LAYOUT --- */

.dual-split-container {
  display: flex;
  gap: 3rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 2.5rem;
}

.split-column {
  flex: 1;
}

.split-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
}

.company-logo-small {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.split-header h4 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent);
}

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

.responsibility-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.6;
}

.list-icon {
  color: var(--accent);
  font-size: 1.1rem;
  margin-top: 3px;
}

/* --- SIMPLE PROJECT GALLERY (For Freelance/Uni) --- */

.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 2rem;
}

.gallery-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  transition: 0.3s;
  cursor: pointer;
}

.gallery-item img:hover {
  transform: scale(1.03);
}

.gallery-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 5px;
  text-align: center;
}

/* --- RESPONSIVE --- */

@media (max-width: 768px) {
  .modal-hero-gallery {
    height: 200px;
  }
}

@media (max-width: 768px) {
  .modal-body-content {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .modal-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .dual-split-container {
    flex-direction: column;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .split-column + .split-column {
    border-top: 1px solid #e5e7eb;
    padding-top: 2rem;
  }
}

.experience-card {
  min-width: 300px !important;
  max-width: 300px !important;
}

.exp-img-container {
  height: 130px !important;
  position: relative;
}

.exp-content-body {
  padding: 1.2rem !important;
}

.exp-content-body h3 {
  font-size: 1.2rem !important;
  margin: 0.5rem 0 !important;
}

.exp-content-body p {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

/* --- 2. CLICKABLE CARD STYLES --- */

.clickable-card {
  cursor: pointer;
}

.click-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(219, 39, 119, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.3s;
}

.click-overlay span {
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
}

.clickable-card:hover .click-overlay {
  opacity: 1;
}

/* --- 3. POP-UP MODAL STYLES --- */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal-content {
  background: white !important;
  width: 100%;
  max-width: 700px;
  padding: 2.5rem !important;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalPopUp 0.3s ease-out;
}

@keyframes modalPopUp {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-header {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
}

.modal-body {
  margin-top: 1.5rem;
}

.modal-split-section {
  display: flex;
  gap: 20px;
  margin-top: 2rem;
}

.modal-half {
  flex: 1;
}

.modal-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid rgba(0,0,0,0.1);
}

.modal-half h4 {
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.modal-half ul {
  padding-left: 20px;
  font-size: 0.95rem;
  color: var(--text-main);
}

/* Mobile fix for modal */

@media (max-width: 768px) {
  .modal-split-section {
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .modal-half:last-child {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 1.5rem;
  }
}

.exp-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 15px !important;
  border-bottom: 1px solid rgba(0,0,0,0.03) !important;
  padding-bottom: 10px !important;
}

/* 2. THE DATE (Soft Pink Pill) */

.exp-date {
  background: #fce7f3 !important;
  color: #be185d !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
}

/* 3. THE "DUAL ROLE" / TECH BADGE (Gradient Gem) */

.tech-tag {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  border: none !important;
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

/* Special Style for the "Dual Role" Badge (Targeting via style attribute or specific class) */

/* Since you used inline style in HTML, this adds the glow effect to it */

.tech-tag[style*="var(--accent)"] {
  background: linear-gradient(135deg, #f472b6 0%, #db2777 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

/* 4. JOB TITLE (Punchy & Dark) */

.experience-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

/* 5. COMPANY NAME (Elegant Subtitle) */

.company-name {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 12px !important;
}

/* 6. DESCRIPTION TEXT (Clean & Readable) */

.experience-card p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #4b5563 !important;
  font-weight: 500 !important;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

.active-link {
  color: var(--accent) !important;
  font-weight: 800 !important;
}

.progress-container {
  width: 100%;
  height: 4px;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.progress-bar {
  height: 4px;
  background: var(--accent);
  width: 0%;
}

/* ARTICLE LAYOUT */

.article-wrapper {
  max-width: 800px;
  margin: 120px auto 5rem auto;
  padding: 0 20px;
}

/* HEADER STYLES */

.breadcrumb {
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  transition: 0.3s;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 1rem;
}

.article-date {
  font-size: 0.9rem;
  color: #9ca3af;
  font-weight: 600;
}

.article-title {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1f2937;
  margin-bottom: 2rem;
}

.article-hero-box {
  width: 100%;
  height: 400px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  margin-bottom: 3rem;
}

.article-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONTENT TYPOGRAPHY */

.article-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #374151;
}

.article-content p {
  margin-bottom: 1.5rem;
}

.article-content h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #111827;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.article-content h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2937;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

.article-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.article-content li {
  margin-bottom: 0.5rem;
}

/* CODE BLOCK STYLE (For Devs) */

.code-block {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1.5rem;
  border-radius: 12px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  margin: 2rem 0;
  overflow-x: auto;
  border-left: 4px solid var(--accent);
}

/* HIGHLIGHT BOX */

.highlight-box {
  background: #fce7f3;
  border-radius: 12px;
  padding: 1.5rem;
  border-left: 4px solid var(--accent);
  margin: 2rem 0;
  color: #831843;
}

/* AUTHOR BIO AT BOTTOM */

.author-box {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.author-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .article-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .article-hero-box {
    height: 250px;
  }
}

I see the issues in the screenshot. The "Huge Gap" is because the desktop margin (120px) is too much for a mobile screen, and the "Missing Icon" (the square box) happens because your main font (Plus Jakarta Sans) is accidentally trying to style the icon instead of Font Awesome. Here is the CSS fix for both. 🔧 CSS Fix (Paste inside the <style > block of article.html) Add this code at the very end of your CSS (inside the <style > tags). CSS .fas, .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 2. REDUCE THE HUGE GAP ON MOBILE */

@media (max-width: 768px) {
  .article-wrapper {
    margin-top: -20px !important;
    margin-bottom: 3rem !important;
  }
}

/* Optional: Make the title slightly smaller on phone so it fits better */

@media (max-width: 768px) {
  .article-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
  }
}

.breadcrumb i, .breadcrumb .fa-arrow-left {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* 2. Global Override for all Solid Icons (Just to be safe) */

.fas, .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.author-box {
  margin-top: 4rem !important;
  margin-bottom: 1rem !important;
  padding: 2.5rem !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(252, 231, 243, 0.4)) !important;
  border: 1px solid white !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
  border-radius: 24px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 30px !important;
}

/* 2. LARGE PROFILE IMAGE */

.author-img-large {
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 4px solid white !important;
  box-shadow: 0 8px 20px rgba(219, 39, 119, 0.25) !important;
}

/* 3. TYPOGRAPHY UPDATES */

.author-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 5px;
}

.author-name {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #1f2937 !important;
  margin: 0 0 10px 0 !important;
  line-height: 1 !important;
}

.author-bio {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #4b5563 !important;
  margin-bottom: 1.2rem !important;
}

/* 4. SOCIAL LINKS INSIDE BIO */

.author-socials {
  display: flex;
  gap: 15px;
}

.author-social-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1f2937;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.3s;
  background: white;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.05);
}

.author-social-link:hover {
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 5. FIX THE FOOTER GAP */

.footer-spacer {
  height: 20px !important;
}

.article-wrapper {
  margin-bottom: 2rem !important;
}

/* MOBILE ADJUSTMENT */

@media (max-width: 768px) {
  .author-box {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .author-socials {
    justify-content: center;
  }
}

I see the issue in the screenshots. Just like the article page, your website is trying to use your text font ("Plus Jakarta Sans") to render the arrow icons, resulting in those empty squares. Here is the HTML & CSS Fix for resources.html. 1. The CSS Fix (Paste inside <style > in resources.html) Add this code at the very bottom of your CSS block (inside the <style > tags). This forces the icons to use the correct font family and fixes the big mobile gap. CSS .fas, .fa-solid, .fa-arrow-right {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 2. FIX BRAND ICONS (Like LinkedIn/Github in footer) */

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* 3. MOBILE SPACING FIX */

@media (max-width: 768px) {
  .page-header {
    margin-top: 80px !important;
    padding: 0 15px !important;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2.2rem !important;
  }
}

/* Stack the Featured Card nicely on mobile */

@media (max-width: 768px) {
  .featured-card {
    flex-direction: column !important;
  }
}

@media (max-width: 768px) {
  .featured-img-col {
    height: 250px !important;
    width: 100% !important;
  }
}

.fas, .fa-solid, .fa-arrow-right {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 2. FIX BRAND ICONS (Like LinkedIn/Github in footer) */

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* 3. MOBILE SPACING FIX */

@media (max-width: 768px) {
  .page-header {
    margin-top: 80px !important;
    padding: 0 15px !important;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2.2rem !important;
  }
}

/* Stack the Featured Card nicely on mobile */

@media (max-width: 768px) {
  .featured-card {
    flex-direction: column !important;
  }
}

@media (max-width: 768px) {
  .featured-img-col {
    height: 250px !important;
    width: 100% !important;
  }
}

#modal-booking .modal-content {
  width: 95% !important;
  max-width: 850px !important;
  height: 90vh !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  display: block !important;
}

/* 2. Container for the widget */

.calendly-wrapper {
  margin-top: 2rem;
  min-height: 750px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 3. Mobile adjustments */

@media (max-width: 768px) {
  #modal-booking .modal-content {
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
}

.filter-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.filter-btn {
  border: none;
  background: white;
  padding: 10px 24px;
  border-radius: 50px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Hover State */

.filter-btn:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

/* Active State (When clicked) */

.filter-btn.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 10px 20px rgba(219, 39, 119, 0.3);
}

/* Animation for cards appearing */

.show {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.resource-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* 2. FIX THE IMAGE CONTAINER HEIGHT */

.res-img-box {
  width: 100%;
  height: 240px;
  position: relative;
}

/* 3. FIX THE IMAGE STRETCHING (The Magic Part) */

.res-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

/* Optional: Add a gentle zoom hover effect for polish */

.resource-card:hover .res-img {
  transform: scale(1.05);
}

/* Ensure the content area looks good below the image */

.res-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Push the "Read Guide" button to the bottom */

.res-content .read-more {
  margin-top: auto;
  padding-top: 1rem;
}

.res-img-box {
  width: 100%;
  height: 240px;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1), inset 0 0 20px rgba(255, 255, 255, 0.5);
  /*Optional: Pull it slightly outside the card padding for depth;*/
  margin: -10px -10px 20px -10px;
  width: calc(100% + 20px);
}

/* 2. The Image itself */

.res-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 3. Hover Effect - Make the glass "lift" */

.resource-card:hover .res-img-box {
  box-shadow: 0 20px 40px rgba(219, 39, 119, 0.2), inset 0 0 30px rgba(255, 255, 255, 0.7);
  transform: translateY(-5px);
}

/* 4. Hover Effect - Gentle image zoom inside the glass */

.resource-card:hover .res-img {
  transform: scale(1.08);
}

/* 2. Hover Effect for the Whole Card */

.featured-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(255, 255, 255, 0.9);
}

/* 3. The Image Column (Inside the Glass) */

.featured-img-col {
  flex: 1;
  min-width: 45%;
  height: 350px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 4. The Image Itself */

.featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s ease;
}

.featured-card:hover .featured-img {
  transform: scale(1.05);
}

/* 5. The Content Column */

.featured-content {
  flex: 1;
}

/* 📱 MOBILE FIXES */

@media (max-width: 900px) {
  .featured-card {
    flex-direction: column;
    padding: 1.5rem;
    text-align: left;
    gap: 1.5rem;
  }
}

@media (max-width: 900px) {
  .featured-img-col {
    width: 100%;
    min-height: 250px;
  }
}

.quote-box {
  border-left: 4px solid var(--accent);
  background: rgba(255, 255, 255, 0.5);
  padding: 1.5rem;
  font-style: italic;
  margin: 2rem 0;
  border-radius: 0 12px 12px 0;
  color: #4b5563;
}

.cake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 2rem 0;
}

.cake-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.6);
  transition: transform 0.3s ease;
}

.cake-img:hover {
  transform: scale(1.02);
}

.newsletter-box {
  background: linear-gradient(135deg, #fff 0%, #fce7f3 100%);
  padding: 2.5rem;
  border-radius: 20px;
  text-align: center;
  margin-top: 4rem;
  border: 1px solid rgba(255,255,255,0.8);
}

.newsletter-input {
  padding: 12px 20px;
  border-radius: 50px;
  border: 1px solid #ddd;
  width: 60%;
  margin-right: 10px;
  outline: none;
}

/* Mobile adjustment for newsletter */

@media (max-width: 600px) {
  .newsletter-input {
    width: 100%;
    margin-bottom: 10px;
  }
}

.quote-box {
  border-left: 4px solid var(--accent);
  background: rgba(255, 255, 255, 0.5);
  padding: 1.5rem;
  font-style: italic;
  margin: 2rem 0;
  border-radius: 0 12px 12px 0;
  color: #4b5563;
  font-size: 1.1rem;
}

.lesson-box {
  background: #fdf2f8;
  border: 1px dashed var(--accent);
  padding: 1.5rem;
  border-radius: 12px;
  margin: 2rem 0;
}

.lesson-title {
  color: #be185d;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  display: block;
}

.cake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 2rem 0;
}

.cake-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.6);
  transition: transform 0.3s ease;
}

.cake-img:hover {
  transform: scale(1.02);
}

.newsletter-box {
  background: linear-gradient(135deg, #fff 0%, #fce7f3 100%);
  padding: 2.5rem;
  border-radius: 20px;
  text-align: center;
  margin-top: 4rem;
  border: 1px solid rgba(255,255,255,0.8);
}

.newsletter-input {
  padding: 12px 20px;
  border-radius: 50px;
  border: 1px solid #ddd;
  width: 60%;
  margin-right: 10px;
  outline: none;
}

@media (max-width: 600px) {
  .newsletter-input {
    width: 100%;
    margin-bottom: 10px;
  }
}

.cake-img {
  height: 250px;
  object-fit: cover;
}