/* =========================================================
   PROJECTS + HOSTING — COLORS ONLY
   Existing design/layout is untouched
   ========================================================= */

/* ---------------- PROJECTS ---------------- */

/* Project cards */
#projects .project-card{
  border-color:rgba(62,183,255,.24) !important;
  background:
    linear-gradient(145deg,rgba(7,27,50,.94),rgba(3,15,30,.90)) !important;
  box-shadow:
    0 0 24px rgba(0,143,255,.08),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#projects .project-card:hover{
  border-color:rgba(42,226,255,.44) !important;
  box-shadow:
    0 16px 35px rgba(0,0,0,.20),
    0 0 28px rgba(42,226,255,.12) !important;
}

/* Individual project thumbnail colors */
#projects .thumb-college{
  background:
    radial-gradient(circle at 35% 25%,rgba(42,226,255,.18),transparent 42%),
    linear-gradient(145deg,#06223e,#0a4777) !important;
}

#projects .thumb-feedback{
  background:
    radial-gradient(circle at 30% 25%,rgba(143,140,255,.18),transparent 42%),
    linear-gradient(145deg,#0c1f42,#32306f) !important;
}

#projects .thumb-club{
  background:
    radial-gradient(circle at 30% 25%,rgba(57,230,170,.17),transparent 42%),
    linear-gradient(145deg,#08243b,#0d5360) !important;
}

#projects .thumb-alumni{
  background:
    radial-gradient(circle at 30% 25%,rgba(162,89,255,.18),transparent 42%),
    linear-gradient(145deg,#0b203b,#472b70) !important;
}

/* Thumbnail icons */
#projects .thumb-college i{color:#2ae2ff !important}
#projects .thumb-feedback i{color:#9b92ff !important}
#projects .thumb-club i{color:#39e6aa !important}
#projects .thumb-alumni i{color:#c084ff !important}

/* Titles and text */
#projects .project-title h4{
  color:#f1fbff !important;
}

#projects .project-title span{
  color:#55d7ff !important;
}

#projects .project-body p{
  color:#a9bfd1 !important;
}

/* Mini technology bubbles */
#projects .mini-tech span:nth-child(1){
  background:rgba(42,226,255,.12) !important;
  border-color:rgba(42,226,255,.35) !important;
  color:#75e8ff !important;
}

#projects .mini-tech span:nth-child(2){
  background:rgba(139,92,246,.12) !important;
  border-color:rgba(139,92,246,.34) !important;
  color:#b99cff !important;
}

#projects .mini-tech span:nth-child(3){
  background:rgba(57,230,170,.10) !important;
  border-color:rgba(57,230,170,.30) !important;
  color:#74edc2 !important;
}

/* Project buttons */
#projects .project-actions a{
  background:
    linear-gradient(135deg,rgba(42,226,255,.14),rgba(82,120,255,.13)) !important;
  border-color:rgba(42,226,255,.40) !important;
  color:#e6f9ff !important;
  box-shadow:0 0 14px rgba(42,226,255,.07);
}

#projects .project-actions button{
  background:rgba(124,92,246,.08) !important;
  border-color:rgba(139,92,246,.28) !important;
  color:#d8ccff !important;
}

/* Filters */
#projects .filter-btn{
  background:rgba(6,22,42,.68) !important;
  border-color:rgba(81,162,220,.18) !important;
  color:#a7c9de !important;
}

#projects .filter-btn:hover{
  border-color:rgba(42,226,255,.38) !important;
  color:#e7faff !important;
}

#projects .filter-btn.active{
  background:
    linear-gradient(135deg,rgba(42,226,255,.15),rgba(82,120,255,.14)) !important;
  border-color:rgba(42,226,255,.42) !important;
  color:#ffffff !important;
  box-shadow:0 0 16px rgba(42,226,255,.10);
}

/* Search */
#projects .project-search input{
  background:rgba(5,20,39,.82) !important;
  border-color:rgba(55,172,235,.24) !important;
  color:#e7f8ff !important;
}

#projects .project-search input:focus{
  border-color:rgba(42,226,255,.48) !important;
  box-shadow:0 0 15px rgba(42,226,255,.08) !important;
}

#projects .project-search i{
  color:#55dfff !important;
}

/* ---------------- HOSTING FLOW ---------------- */

#hosting .hosting-flow{
  position:relative;
}

/* Each flow circle keeps same size/shape — only color changes */
#hosting .flow-item:nth-of-type(1) .flow-icon{
  border-color:rgba(42,226,255,.48) !important;
  background:radial-gradient(circle,#0b405b,#041727 68%) !important;
  box-shadow:0 0 24px rgba(42,226,255,.20) !important;
}
#hosting .flow-item:nth-of-type(1) .flow-icon i{
  color:#2ae2ff !important;
}

#hosting .flow-item:nth-of-type(2) .flow-icon{
  border-color:rgba(77,156,255,.46) !important;
  background:radial-gradient(circle,#123961,#06172d 68%) !important;
  box-shadow:0 0 24px rgba(77,156,255,.18) !important;
}
#hosting .flow-item:nth-of-type(2) .flow-icon i{
  color:#4d9cff !important;
}

#hosting .flow-item:nth-of-type(3) .flow-icon{
  border-color:rgba(57,230,170,.44) !important;
  background:radial-gradient(circle,#0e4a42,#061b26 68%) !important;
  box-shadow:0 0 24px rgba(57,230,170,.16) !important;
}
#hosting .flow-item:nth-of-type(3) .flow-icon i{
  color:#39e6aa !important;
}

#hosting .flow-item:nth-of-type(4) .flow-icon{
  border-color:rgba(255,138,101,.44) !important;
  background:radial-gradient(circle,#573128,#1d1720 68%) !important;
  box-shadow:0 0 24px rgba(255,138,101,.15) !important;
}
#hosting .flow-item:nth-of-type(4) .flow-icon i{
  color:#ff8a65 !important;
}

#hosting .flow-item:nth-of-type(5) .flow-icon{
  border-color:rgba(143,140,255,.46) !important;
  background:radial-gradient(circle,#37345d,#151a34 68%) !important;
  box-shadow:0 0 24px rgba(143,140,255,.17) !important;
}
#hosting .flow-item:nth-of-type(5) .flow-icon i{
  color:#9b92ff !important;
}

#hosting .flow-item:nth-of-type(6) .flow-icon{
  border-color:rgba(49,198,255,.48) !important;
  background:radial-gradient(circle,#0d405d,#07192b 68%) !important;
  box-shadow:0 0 24px rgba(49,198,255,.18) !important;
}
#hosting .flow-item:nth-of-type(6) .flow-icon i{
  color:#31c6ff !important;
}

#hosting .flow-item:nth-of-type(7) .flow-icon{
  border-color:rgba(255,216,76,.44) !important;
  background:radial-gradient(circle,#4f4322,#1e1b19 68%) !important;
  box-shadow:0 0 24px rgba(255,216,76,.15) !important;
}
#hosting .flow-item:nth-of-type(7) .flow-icon i{
  color:#ffd84c !important;
}

/* Labels */
#hosting .flow-item span{
  color:#e9f8ff !important;
  text-shadow:0 0 10px rgba(255,255,255,.025);
}

/* Arrows use a cyan-blue gradient feel */
#hosting .flow-arrow{
  color:#59d7ff !important;
  text-shadow:
    0 0 8px rgba(42,226,255,.55),
    0 0 18px rgba(82,120,255,.30) !important;
}

/* Section subtitle */
#hosting .section-title span{
  color:#61d9ff !important;
}

/* Touch devices: preserve layout, just reduce glow intensity */
@media(hover:none),(pointer:coarse){
  #projects .project-card{
    box-shadow:
      0 0 18px rgba(0,143,255,.05),
      inset 0 1px 0 rgba(255,255,255,.02) !important;
  }
}