/* =====================================================================
   MODERN DARK THEME - FULL STYLES (DROP-IN REPLACEMENT)
   Palette embedded:
     - bg primary:  #121212
     - bg secondary:#1e1e1e
     - card:        #1f1f1f
     - text primary:#e8e8e8
     - text muted:  #a6a6a6
     - border:      #2b2b2b
     - accent:      #4dabf7
     - accent-hover:#339af0
     - success:     #51cf66
     - danger:      #ff6b6b
   Modernized: rounded corners, subtle shadows, transitions, slight glassy surfaces.
   ===================================================================== */

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: "Open Sans", sans-serif;
  color: #e8e8e8;
  background: #121212;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  transition: background 0.2s ease, color 0.2s ease;
  font-size: 15px;
}

a {
  color: #4dabf7;
  text-decoration: none;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

a:hover {
  color: #339af0;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(51,154,240,0.12);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

/* small helpers */
.text-muted { color: #a6a6a6; }
.small { font-size: 0.9rem; color: #bdbdbd; }

/* subtle container */
.site-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0)) ;
}

/* --------------------------------------------------------------
   Utility / Reset
   -------------------------------------------------------------- */
* { box-sizing: border-box; }
img { display: block; max-width: 100%; height: auto; }

/* --------------------------------------------------------------
   Buttons common
   -------------------------------------------------------------- */
button,
.btn,
input[type="submit"],
a.btn {
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  background: #4dabf7;
  color: #0a0a0a;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 600;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  box-shadow: 0 6px 18px rgba(13,13,13,0.45), 0 0 18px rgba(77,171,247,0.06);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
button:hover,
.btn:hover,
input[type="submit"]:hover,
a.btn:hover {
  transform: translateY(-3px);
  background: #339af0;
  box-shadow: 0 10px 28px rgba(13,13,13,0.55), 0 0 26px rgba(51,154,240,0.09);
}
button:active,
.btn:active {
  transform: translateY(-1px) scale(0.997);
}

/* secondary button (ghost) */
.btn-ghost {
  background: transparent;
  color: #dcdcdc;
  border: 1px solid #2b2b2b;
  box-shadow: none;
}
.btn-ghost:hover {
  border-color: #3b3b3b;
  color: #fff;
  background: rgba(255,255,255,0.02);
}

/* small round icon button */
.icon-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:#1f1f1f;color:#e8e8e8;border:1px solid #2b2b2b;
}
.icon-btn:hover { background:#232323; transform: translateY(-2px); }

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 18px;
  bottom: 20px;
  z-index: 996;
  background: #4dabf7;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  transition: all 0.35s cubic-bezier(.2,.9,.2,1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(77,171,247,0.08);
  border: 1px solid rgba(255,255,255,0.03);
}

.back-to-top i {
  font-size: 20px;
  color: #0b0b0b;
  line-height: 0;
}

.back-to-top:hover {
  background: #339af0;
  transform: translateY(-3px);
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #0e0e0e;
  display: flex;
  align-items: center;
  justify-content: center;
}
#preloader:before {
  content: "";
  display:block;
  border: 6px solid #1f1f1f;
  border-top-color: #4dabf7;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  animation: animate-preloader 1s linear infinite;
  box-shadow: 0 8px 30px rgba(77,171,247,0.08);
}
@keyframes animate-preloader {
  0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] { transition-delay: 0 !important; }
}

/*--------------------------------------------------------------
# Header (sidebar style preserved)
--------------------------------------------------------------*/
#header {
  position: fixed;
  top: 14px;
  left: 14px;
  bottom: 14px;
  z-index: 9997;
  transition: all 0.45s cubic-bezier(.2,.9,.2,1);
  padding: 18px;
  overflow-y: auto;
  width: 92px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 14px;
  border: 1px solid #232323;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

/* mobile header adjustments */
@media (max-width: 991px) {
  #header {
    width: 300px;
    left: -320px;
    background: #171717;
    border-right: 1px solid #262626;
    padding: 20px;
    border-radius: 0 12px 12px 0;
  }
}

/* main content spacing when sidebar exists on desktop */
@media (min-width: 991px) {
  #main { margin-left: 120px; padding: 24px; }
}

/* smooth scrollbar theme */
#header::-webkit-scrollbar { width:6px; }
#header::-webkit-scrollbar-thumb { background:#2b2b2b; border-radius:6px; }

/*--------------------------------------------------------------
# Navigation Menu (keeping structure)
--------------------------------------------------------------*/
.nav-menu { padding: 0; display: block; }
.nav-menu * { margin:0; padding:0; list-style:none; }
.nav-menu>ul>li { position: relative; white-space: nowrap; margin-bottom: 6px; }

.nav-menu a,
.nav-menu a:focus {
  display:flex;
  align-items:center;
  color:#dcdcdc;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: all 0.22s ease;
  font-size: 14px;
  border-radius: 14px;
  background: transparent;
  height:48px;
  width:100%;
  overflow:hidden;
  border:1px solid transparent;
}
.nav-menu a i,
.nav-menu a:focus i { font-size: 18px; color: #bfc7d0; min-width: 22px; }

.nav-menu a span,
.nav-menu a:focus span { padding: 0 6px 0 10px; color:#d0d6db; display: inline-block; }

/* collapsed style on large screens: keep icons-only */
@media (min-width: 992px) {
  .nav-menu a,
  .nav-menu a:focus { width:56px; justify-content:center; padding: 12px; }
  .nav-menu a span,
  .nav-menu a:focus span { display:none; }
}

/* active / hover */
.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu li:hover>a {
  color: #0b0b0b;
  background: #4dabf7;
  box-shadow: 0 8px 30px rgba(77,171,247,0.08);
  border: 1px solid rgba(255,255,255,0.02);
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu li:hover>a span { color:#0b0b0b; }

/* expand labels on hover for desktop */
.nav-menu a:hover,
.nav-menu li:hover>a {
  width:100%;
}
.nav-menu a:hover span,
.nav-menu li:hover>a span {
  display:block;
}

/* Mobile toggle */
.mobile-nav-toggle {
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 26px;
  transition: all 0.35s;
  outline: none !important;
  line-height: 0;
  cursor: pointer;
  border-radius: 12px;
  padding: 6px;
}
.mobile-nav-toggle i { color: #d6d6d6; }
.mobile-nav-active { overflow:hidden; }
.mobile-nav-active #header { left: 14px; }
.mobile-nav-active .mobile-nav-toggle { color:#0b0b0b; background-color:#4dabf7; box-shadow:0 8px 24px rgba(77,171,247,0.12); }

/*--------------------------------------------------------------
# Home Section
--------------------------------------------------------------*/
#home {
  width:100%;
  min-height: 100vh;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)), url("../Graphics/img/about.jpg") top right no-repeat;
  background-size: cover;
  display:flex;
  align-items:center;
  padding: 36px 18px;
  border-radius: 12px;
}

/* left-inset on desktop to align with header */
@media (min-width: 992px) {
  #home { padding-left: 200px; }
}

#home:before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(18,18,18,0.6), rgba(18,18,18,0.7));
  border-radius: 12px;
  pointer-events:none;
}

#home h1 {
  margin:0;
  font-size: clamp(28px, 5vw, 64px);
  font-weight:700;
  line-height:1.05;
  color: #ffffff;
  text-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
#home p {
  color:#cfcfcf;
  margin:14px 0 0 0;
  font-size: clamp(16px, 2.2vw, 26px);
  font-family: "Poppins", sans-serif;
}
#home p span { color:#4dabf7; letter-spacing:1px; font-weight:700; }

#home .social-links { margin-top: 22px; }
#home .social-links a {
  font-size:20px;
  display:inline-block;
  color:#dcdcdc;
  line-height:1;
  margin-right: 14px;
  transition: all 0.3s;
  background: rgba(255,255,255,0.02);
  padding:8px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,0.02);
}
#home .social-links a:hover {
  color:#0b0b0b;
  background:#4dabf7;
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(77,171,247,0.06);
}

/* responsive home text center */
@media (max-width: 992px) {
  #home { text-align:center; padding-left:24px; padding-right:24px; }
  #home h1 { font-size: 32px; line-height: 36px; }
  #home p { font-size: 18px; line-height: 24px; margin-top:10px; }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
  background: transparent;
}

.section-title { text-align:center; padding-bottom:30px; }
.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #ffffff;
}
.section-title h2::before {
  content: "";
  position:absolute;
  display:block;
  width:120px;
  height:1px;
  background: #2b2b2b;
  bottom:1px;
  left:calc(50% - 60px);
}
.section-title h2::after {
  content: "";
  position:absolute;
  display:block;
  width:40px;
  height:3px;
  background: #4dabf7;
  bottom:0;
  left:calc(50% - 20px);
}
.section-title p { margin-bottom:0; color:#bdbdbd; }

.line { border-bottom: 1px solid rgba(255,255,255,0.04); }

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h3 {
  font-weight:700;
  font-size: 26px;
  color: #f5f5f5;
}
.about .content ul { list-style:none; padding:0; margin:0; }
.about .content ul li {
  margin-bottom: 18px;
  display:flex;
  align-items:center;
  color:#d7d7d7;
}
.about .content ul strong { margin-right:10px; color:#fff; }
.about .content ul i {
  font-size:16px;
  margin-right:8px;
  color:#4dabf7;
  line-height:0;
}
.about .content p:last-child { margin-bottom:0; color:#cfcfcf; }

.col-lg-4 { position:relative; }

.image-container {
  position:relative;
  overflow:hidden;
  background:#1f1f1f;
  border-radius:12px;
  border:1px solid #262626;
}
.about-overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(77,171,247,0.08), rgba(0,0,0,1));
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  opacity:0; transition: opacity 0.28s ease;
}
.col-lg-4:hover .about-overlay { opacity:1; }
.experience-text { color:#fff; font-size:1.25rem; font-weight:700; text-align:center; }

/*--------------------------------------------------------------
# Facts
--------------------------------------------------------------*/
.facts .count-box {
  padding: 28px 30px 26px 30px;
  margin-top: 22px;
  width: 100%;
  position: relative;
  text-align: center;
  background: #1f1f1f;
  border: 1px solid #292929;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.facts .count-box i {
  position:absolute;
  top:-24px;
  left:50%;
  transform:translateX(-50%);
  font-size:20px;
  background:#4dabf7;
  color:#0b0b0b;
  border-radius:50px;
  display:inline-flex;
  align-items:center; justify-content:center;
  width:48px;height:48px;
  box-shadow: 0 8px 22px rgba(77,171,247,0.08);
}
.facts .count-box span {
  font-size:36px;
  display:block;
  font-weight:700;
  color:#ffffff;
}
.facts .count-box p {
  padding:0; margin:0;
  font-family:"Raleway", sans-serif;
  font-size:14px;
  color:#bdbdbd;
}

/*--------------------------------------------------------------
# Experience / Team
--------------------------------------------------------------*/
.team-item {
  background:#1f1f1f;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #2b2b2b;
}
.team-item .team-img { position:relative; overflow:hidden; }
.team-item .team-img::before,
.team-item .team-img::after {
  position:absolute; content:""; width:0; height:100%; top:0; left:0; background:#339af0aa; transition: .36s;
}
.team-item .team-img::after { left:auto; right:0; }
.team-item:hover .team-img::before,
.team-item:hover .team-img::after { width:50%; }
.team-item .team-img .team-social {
  position:absolute; width:100%; height:100%; top:0; left:0; display:flex; align-items:center; justify-content:center;
  transition:.45s; z-index:3; opacity:0; gap:10px; padding:0 12px;
}
.team-item:hover .team-img .team-social { transition-delay:.1s; opacity:1; }
.team-item .team-social .btn {
  display:inline-flex; margin:0 3px; color:#0b0b0b; background:#e6eefc; border-radius:8px; padding:8px 10px;
}
.team-item .team-social .btn:hover { color:#ffffff; background:#4dabf7; }

/*--------------------------------------------------------------
# skills
--------------------------------------------------------------*/
.skills .progress { height:60px; display:block; background:transparent; border-radius:10px; padding:6px; }
.skills .progress .skill {
  padding: 8px 0; margin:0; text-transform:uppercase; display:block; font-weight:700; font-family:"Poppins",sans-serif; color:#e8e8e8;
}
.skills .progress .skill .val { float:right; font-style:normal; color:#a6a6a6; font-weight:600; }
.skills .progress-bar-wrap { background:#161616; border-radius:12px; padding:6px; border:1px solid #262626; }
.skills .progress-bar {
  height:14px; display:block; border-radius:10px; transition: width 0.9s ease;
  background-color:#4dabf7; box-shadow: 0 6px 18px rgba(77,171,247,0.06);
}

/*--------------------------------------------------------------
# Resume
--------------------------------------------------------------*/
.resume .resume-title { font-size:26px; font-weight:700; margin-top:20px; margin-bottom:20px; color:#ffffff; }
.resume .resume-item {
  padding: 12px 0 20px 20px;
  margin-top: -2px;
  border-left: 3px solid #4dabf7;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  border-radius: 8px;
  margin-bottom: 18px;
  padding-left: 18px;
}
.resume .resume-item h4 {
  line-height:18px; font-size:18px; font-weight:700; text-transform:uppercase; font-family:"Poppins",sans-serif; color:#ffffff; margin-bottom:8px;
}
.resume .resume-item h5 {
  font-size:15px; background:#171717; padding:6px 12px; display:inline-block; font-weight:600; margin-bottom:10px; color:#dcdcdc; border-radius:8px; border:1px solid #262626;
}
.resume .resume-item ul { padding-left:18px; color:#bdbdbd; }
.resume .resume-item ul li { padding-bottom:8px; }
.resume .resume-item:last-child { padding-bottom:0; }
.resume .resume-item::before {
  content:""; position:absolute; width:14px; height:14px; border-radius:50px; left:-11px; top:8px; background:#121212; border:3px solid #4dabf7;
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item { margin-bottom:26px; }
.portfolio #portfolio-flters {
  padding:0; margin:0 auto 22px auto; list-style:none; text-align:center;
  background: rgba(255,255,255,0.01);
  border-radius:50px; padding: 6px 10px; display:inline-flex; gap:8px; align-items:center; border:1px solid #252525;
}
.portfolio #portfolio-flters li {
  cursor:pointer; display:inline-block; padding:8px 14px; font-size:13px; font-weight:700; text-transform:uppercase;
  color:#cfcfcf; margin-bottom:0; transition: all 0.26s ease-in-out; border-radius: 40px;
  background: transparent;
}
.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color:#0b0b0b;
  background:#4dabf7;
  box-shadow: 0 8px 22px rgba(77,171,247,0.06);
}

.portfolio .portfolio-wrap {
  transition:0.3s; position:relative; overflow:hidden; z-index:1;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  border-radius: 12px;
  border:1px solid #262626;
  padding: 10px;
}
.portfolio .portfolio-wrap::before {
  content:""; position:absolute; left:20px; right:20px; top:20px; bottom:20px; transition:all .3s; z-index:2; opacity:0; border-radius:8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.portfolio .portfolio-wrap .portfolio-info {
  opacity:0; position:absolute; inset:0; text-align:center; z-index:3; transition: all .32s ease-in-out;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; padding:18px;
}
.portfolio .portfolio-wrap .portfolio-info::before,
.portfolio .portfolio-wrap .portfolio-info::after {
  content:""; width:48px; height:48px; position:absolute; border: 3px solid rgba(255,255,255,0.03);
  transition: all 0.5s ease; z-index:9994; border-radius:8px;
}
.portfolio .portfolio-wrap .portfolio-info::before { top:28px; left:28px; border-top-color: rgba(255,255,255,0.05); border-left-color: rgba(255,255,255,0.05); }
.portfolio .portfolio-wrap .portfolio-info::after { bottom:28px; right:28px; border-bottom-color: rgba(255,255,255,0.05); border-right-color: rgba(255,255,255,0.05); }

.portfolio .portfolio-wrap .portfolio-info h4 { font-size:20px; color:#ffffff; font-weight:700; }
.portfolio .portfolio-wrap .portfolio-info p { color:#cfcfcf; font-size:13px; text-transform:uppercase; margin:0; }
.portfolio .portfolio-wrap .portfolio-links { text-align:center; z-index:4; }
.portfolio .portfolio-wrap .portfolio-links a { color:#cfcfcf; margin: 0 6px; font-size:24px; display:inline-block; transition:.28s; }
.portfolio .portfolio-wrap .portfolio-links a:hover { color:#339af0; transform: translateY(-4px); }

/* hover reveals */
.portfolio .portfolio-wrap:hover::before { top:0; left:0; right:0; bottom:0; opacity:1; }
.portfolio .portfolio-wrap:hover .portfolio-info { opacity:1; }
.portfolio .portfolio-wrap:hover .portfolio-info::before { top: 16px; left: 16px; }
.portfolio .portfolio-wrap:hover .portfolio-info::after { bottom: 16px; right: 16px; }

/* portfolio image */
.portfolio-img { width:100%; object-fit:cover; border-radius:8px; display:block; }

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details { padding-top:40px; }
.portfolio-details .portfolio-details-slider img { width:100%; border-radius:12px; }
.portfolio-details .portfolio-details-slider .swiper-pagination { margin-top:20px; position:relative; }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width:12px; height:12px; background-color:#2b2b2b; opacity:1; border:1px solid #4dabf7;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color:#4dabf7;
}
.portfolio-details .portfolio-info {
  padding:30px; background:#171717; border-radius:12px; border:1px solid #232323; box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
.portfolio-details .portfolio-info h3 {
  font-size:22px; font-weight:700; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.03); color:#fff;
}
.portfolio-details .portfolio-info ul { list-style:none; padding:0; font-size:15px; color:#cfcfcf; }
.portfolio-details .portfolio-info ul li+li { margin-top:10px; }
.portfolio-details .portfolio-description { padding-top:30px; color:#d6d6d6; }
.portfolio-details .portfolio-description h2 { font-size:26px; font-weight:700; margin-bottom:20px; color:#fff; }
.portfolio-details .portfolio-description p { padding:0; color:#cfcfcf; }

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  text-align:center;
  padding:50px 20px 58px 20px;
  transition: all .28s ease-in-out;
  background:#171717;
  box-shadow: 0 8px 40px rgba(0,0,0,0.65);
  border-radius:12px;
  border:1px solid #262626;
}
.services .icon-box .icon { margin:0 auto; width:92px; height:92px; display:flex; align-items:center; justify-content:center; position:relative; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)); border:1px solid #2b2b2b; }
.services .icon-box .icon i { font-size:36px; transition: .32s; color:#dcdcdc; }
.services .icon-box .icon svg { position:absolute; top:0; left:0; width:100%; height:100%; }
.services .icon-box .icon svg path { transition:.4s; fill: rgba(255,255,255,0.02); }
.services .icon-box h4 { font-weight:700; margin:10px 0 14px 0; font-size:20px; color:#fff; }
.services .icon-box h4 a { color:#ffffff; transition:.28s; }
.services .icon-box p { line-height:24px; font-size:14px; margin-bottom:0; color:#cfcfcf; }
.services .icon-box:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.02); }

/* per-color icon boxes - modernized to fill icon backgrounds on hover */
.services .iconbox-blue i { color:#47aeff; }
.services .iconbox-blue:hover .icon i { color:#fff; }
.services .iconbox-blue:hover .icon path { fill:#47aeff; }

.services .iconbox-orange i { color:#ffa76e; }
.services .iconbox-orange:hover .icon i { color:#fff; }
.services .iconbox-orange:hover .icon path { fill:#ffa76e; }

.services .iconbox-pink i { color:#e80368; }
.services .iconbox-pink:hover .icon i { color:#fff; }
.services .iconbox-pink:hover .icon path { fill:#e80368; }

.services .iconbox-yellow i { color:#ffbb2c; }
.services .iconbox-yellow:hover .icon i { color:#fff; }
.services .iconbox-yellow:hover .icon path { fill:#ffbb2c; }

.services .iconbox-red i { color:#ff5828; }
.services .iconbox-red:hover .icon i { color:#fff; }
.services .iconbox-red:hover .icon path { fill:#ff5828; }

.services .iconbox-teal i { color:#11dbcf; }
.services .iconbox-teal:hover .icon i { color:#fff; }
.services .iconbox-teal:hover .icon path { fill:#11dbcf; }

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .section-header { margin-bottom:40px; }
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider { overflow:hidden; }
.testimonials .testimonial-item { text-align:center; background:#171717; padding:20px; border-radius:12px; border:1px solid #232323; color:#dcdcdc; }
.testimonials .testimonial-item .testimonial-img { width:120px; border-radius:50%; border:4px solid #1f1f1f; margin:0 auto; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.testimonials .testimonial-item h3 { font-size:20px; font-weight:700; margin:10px 0 6px 0; color:#fff; }
.testimonials .testimonial-item h4 { font-size:14px; color:#a6a6a6; margin:0 0 15px 0; }
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right { color:#90c8fc; font-size:26px; }
.testimonials .testimonial-item p { font-style:italic; margin:0 auto 15px auto; color:#cfcfcf; max-width:720px; }
.testimonials .swiper-pagination { margin-top:20px; position:relative; }
.testimonials .swiper-pagination .swiper-pagination-bullet { width:12px; height:12px; background-color:#2b2b2b; opacity:1; border:1px solid #4dabf7; }
.testimonials .swiper-pagination .swiper-pagination-bullet-active { background-color:#4dabf7; }

@media (min-width: 992px) {
  .testimonials .testimonial-item p { width:80%; }
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
  width:100%;
  background: #1f1f1f;
  border-radius:12px;
  padding:18px;
  border:1px solid #262626;
}
.contact .info i {
  font-size:20px;
  color:#0b0b0b;
  float:left;
  width:44px;height:44px;
  background:#4dabf7;
  display:flex;justify-content:center;align-items:center;border-radius:12px;transition:all .28s;
  box-shadow: 0 8px 18px rgba(77,171,247,0.06);
}
.contact .info h4 { padding:0 0 0 60px; font-size:20px; font-weight:700; margin-bottom:6px; color:#ffffff; }
.contact .info p { padding:0 0 0 60px; margin-bottom:0; font-size:14px; color:#bdbdbd; }
.contact .info .email, .contact .info .phone { margin-top:18px; }
.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
  background:#339af0; color:#fff;
}

.contact .php-email-form { width:100%; background:#1f1f1f; border-radius:12px; padding:14px; border:1px solid #272727; }
.contact .php-email-form .form-group { padding-bottom:10px; }
.contact .php-email-form .error-message { display:none; color:#fff; background:#ff6b6b; text-align:left; padding:12px; font-weight:700; border-radius:8px; }
.contact .php-email-form .sent-message { display:none; color:#fff; background:#51cf66; text-align:center; padding:12px; font-weight:700; border-radius:8px; }
.contact .php-email-form .loading { display:none; background:#1f1f1f; text-align:center; padding:12px; border-radius:8px; }
.contact .php-email-form .loading:before {
  content:""; display:inline-block; border-radius:50%; width:18px;height:18px;margin-right:8px; border:3px solid #51cf66; border-top-color:#1f1f1f; animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius:10px; box-shadow:none; font-size:14px; background:#161616; color:#e8e8e8; border:1px solid #222;
  padding:10px 12px;
}
.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email] { height:44px; }
.contact .php-email-form textarea { padding:12px 14px; min-height:120px; resize:vertical; }
.contact .php-email-form button[type=submit] {
  background:#4dabf7; border:0; padding:10px 28px; color:#0b0b0b; transition:0.28s; border-radius:14px; font-weight:700;
  box-shadow: 0 8px 28px rgba(77,171,247,0.06);
}
.contact .php-email-form button[type=submit]:hover { background:#339af0; transform: translateY(-3px); }

@keyframes animate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #101010;
  color: #bdbdbd;
  font-size:14px;
  text-align:center;
  padding:30px 0;
  border-top: 1px solid #222;
  margin-top: 40px;
}
#footer h3 {
  font-size:28px;
  font-weight:700;
  position:relative;
  font-family: "Poppins", sans-serif;
  padding:0;
  margin:0 0 15px 0;
  color:#ffffff;
}
#footer p {
  font-size:14px;
  font-style:italic;
  padding:0;
  margin:0 0 20px 0;
  color:#bdbdbd;
}
#footer .social-links { margin:0 0 20px 0; display:flex; gap:10px; justify-content:center; align-items:center;}
#footer .social-links a {
  font-size:16px;
  display:inline-block;
  background:#4dabf7;
  color:#0b0b0b;
  line-height:1;
  padding:8px 0;
  margin-right:4px;
  border-radius:10px;
  text-align:center;
  width:36px;height:36px;
  transition:0.28s;
  box-shadow: 0 8px 20px rgba(77,171,247,0.06);
}
#footer .social-links a:hover { background:#339af0; color:#fff; transform: translateY(-3px); }
#footer .copyright { margin:0 0 5px 0; color:#9a9a9a; }
#footer .credits { font-size:13px; color:#8f8f8f; }

/*--------------------------------------------------------------
# Custom CSS for Contact Section misc
--------------------------------------------------------------*/
.contact .meet { text-align:right; margin-top:20px; }
.contact .btn-get-started {
  background-color:#4dabf7; color:#0b0b0b; border:none; padding:10px 20px; border-radius:10px; font-size:14px; text-transform:uppercase; transition: background-color .22s;
}
.contact .btn-get-started:hover { background-color:#339af0; }

/*--------------------------------------------------------------
# Project Card (modernized)
--------------------------------------------------------------*/
.project-container { display:flex; flex-direction:column; gap:20px; }
.project-card {
  display:flex; background:#161616; border-radius:14px; overflow:hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  transition: transform .28s ease, box-shadow .28s ease;
  border:1px solid #232323;
}
.project-card:hover { transform: translateY(-8px); box-shadow: 0 18px 48px rgba(0,0,0,0.7); }

.project-image img {
  width:320px; height:220px; object-fit:cover; display:block;
  border-top-left-radius:12px; border-bottom-left-radius:12px;
}
@media (max-width:768px) { .project-image img { width:100%; height:220px; border-radius:12px 12px 0 0; } }

.project-details { padding:22px; flex-grow:1; display:flex; flex-direction:column; justify-content:space-between; }
.project-details h2 { font-size:1.6rem; margin-bottom:8px; color:#ffffff; }
.project-details p { font-size:1rem; color:#bfbfbf; margin-bottom:16px; }
.buttons { display:flex; gap:14px; flex-wrap:wrap; }
.btn {
  text-decoration:none; padding:12px 20px; background:#4dabf7; color:#0b0b0b; border-radius:999px; font-weight:600;
  transition: background .22s, transform .22s; box-shadow: 0 8px 24px rgba(77,171,247,0.06); text-transform:uppercase; letter-spacing:1px;
}
.btn:hover { background:#339af0; transform: translateY(-3px); }

/*--------------------------------------------------------------
# Responsive Project Card tweaks
--------------------------------------------------------------*/
@media (max-width: 768px) {
  .project-container { padding: 10px; }
  .project-card { flex-direction:column; }
  .project-details { padding:16px; }
  .project-details h2 { font-size:1.3rem; }
  .buttons { flex-direction:column; }
  .btn { width:100%; padding:12px; }
}
@media (max-width:480px) {
  .project-details h2 { font-size:1.1rem; }
  .project-details p { font-size:0.9rem; }
  .btn { padding:10px; font-size:0.95rem; }
}

/*--------------------------------------------------------------
# Blog Preview Section
--------------------------------------------------------------*/
.blog-preview-section { margin: 40px auto; max-width:1200px; text-align:center; }
.blog-slider .slide {
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px;
  background:#171717; border-radius:12px; box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  border:1px solid #262626; color:#dcdcdc;
}

/* blog date */
.blog-date { font-size:0.9em; color:#9a9a9a; margin-bottom:10px; }

/* Blog Listing Page */
.blog-list .blog-item {
  background:#171717; padding:20px; border-radius:12px; box-shadow: 0 8px 28px rgba(0,0,0,0.6);
  margin-bottom:20px; display:flex; gap:20px; border:1px solid #262626; color:#dcdcdc;
}

/* Blog Image Styling */
.blog-image, .blog-item img, .modal-blog-image {
  width:100%; height:200px; object-fit:cover; border-radius:8px;
}

/* Specific to Modal Display */
.modal-blog-image {
  width:100%; height:600px; object-fit:cover; display:block; margin:0 auto; padding-top:10px; padding-bottom:10px; border-radius:10px;
}

/*--------------------------------------------------------------
# Modal (modernized)
--------------------------------------------------------------*/
.modal {
  display:none; position:fixed; inset:0; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(4px); justify-content:center; align-items:center; z-index:1000;
  padding: 22px;
}
.modal.open { display:flex; }
.modal-content {
  background:#141414; padding:20px; width: 95%; max-width: 1100px; max-height: 86vh; overflow-y:auto;
  border-radius:12px; box-shadow: 0 20px 60px rgba(0,0,0,0.7); border:1px solid #262626; position:relative;
}
.close-btn {
  position:absolute; top:12px; right:12px; font-size:22px; cursor:pointer; color:#cfcfcf; background:transparent; border-radius:8px; padding:6px;
}
.close-btn:hover { color:#fff; transform: translateY(-2px); }

/* hide modal internals until opened */
.modal-blog-content { display:none; }
.modal.open .modal-blog-content { display:block; }

/*--------------------------------------------------------------
# Misc small components & forms, tables, lists
--------------------------------------------------------------*/

/* inputs / selects general */
input[type="text"], input[type="email"], textarea, select {
  background:#161616; color:#e8e8e8; border:1px solid #272727; padding:10px 12px; border-radius:10px; outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, textarea:focus, select:focus { border-color:#4dabf7; box-shadow: 0 6px 20px rgba(77,171,247,0.06); }

/* form labels */
label { color:#cfcfcf; display:block; margin-bottom:6px; font-weight:600; }

/* table basics */
table { width:100%; border-collapse:collapse; background:transparent; border-radius:10px; overflow:hidden; }
th, td { padding:14px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.03); color:#d6d6d6; }
th { background:#171717; color:#fff; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.03); }

/* table row hover */
tr:hover { background: rgba(255,255,255,0.02); }

/* lists */
ul.simple-list { list-style: none; padding-left: 0; }
ul.simple-list li { padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.02); color:#cfcfcf; }

/* badges */
.badge { display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; color:#0b0b0b; background:#4dabf7; }
.badge-muted { background:#2b2b2b; color:#dcdcdc; }

/* alerts */
.alert { padding:12px 16px; border-radius:10px; margin-bottom:12px; color:#fff; }
.alert-info { background: rgba(77,171,247,0.08); color:#4dabf7; border:1px solid rgba(77,171,247,0.06); }
.alert-success { background: rgba(81,207,102,0.08); color:#51cf66; border:1px solid rgba(81,207,102,0.05); }
.alert-danger { background: rgba(255,107,107,0.08); color:#ff6b6b; border:1px solid rgba(255,107,107,0.05); }

/* small cards */
.card { background:#1f1f1f; border-radius:12px; padding:16px; border:1px solid #262626; box-shadow: 0 8px 36px rgba(0,0,0,0.65); color:#dcdcdc; }

/* code blocks */
pre, code {
  background:#0f0f0f; color:#d6d6d6; padding:12px; border-radius:8px; overflow:auto; border:1px solid #1f1f1f;
  font-family: "Source Code Pro", monospace; font-size:0.95rem;
}

/* small helpers */
.kv { display:flex; align-items:center; gap:8px; color:#cfcfcf; }
.kv strong { color:#fff; }

/*--------------------------------------------------------------
# Responsive and small tweaks
--------------------------------------------------------------*/
@media (max-width: 1200px) {
  #header { width:100px; left: 12px; top:12px; bottom:12px; padding:12px; }
  #main { margin-left: 110px; padding: 18px; }
}
@media (max-width: 768px) {
  #header { left:-320px; top:0; bottom:0; border-radius:0 12px 12px 0; }
  #main { margin-left: 0; padding: 14px; }
  .section-title h2 { font-size:22px; }
  .project-image img { height:220px; }
}

/*--------------------------------------------------------------
# Accessibility / Focus states
--------------------------------------------------------------*/
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid rgba(77,171,247,0.12);
  outline-offset: 2px;
  box-shadow: 0 8px 26px rgba(77,171,247,0.06);
}

/*--------------------------------------------------------------
# Finishing touches: micro interactions
--------------------------------------------------------------*/

/* subtle float animation for floating elements */
.floating {
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

/* fade-in util */
.fade-in { animation: fadeIn .45s ease both; }
@keyframes fadeIn {
  from { opacity:0; transform: translateY(6px); }
  to { opacity:1; transform: translateY(0); }
}

/* tiny helper to visually separate sections */
.section-pad { padding-top: 42px; padding-bottom: 42px; }

/* End of large dark-theme CSS */