/*
 * TEAM PAGE — CUSTOM THEME
 * --------------------------------------------------------------------------
 * This file contains visual overrides shared by desktop and mobile.
 * Responsive layout rules live in team-responsive.css.
 *
 * Maintenance map:
 *  1. Theme switch and dark mode
 *  2. Sidebar social links
 *  3. Shared cards and panels
 *  4. Skills
 *  5. Contact section
 *  6. Small-screen adjustments
 */

/* 1. Theme switch and dark mode
 * ----------------------------------------------------------------------- */
.theme-switch {
  position: fixed;
  z-index: 10000;
  top: 18px;
  right: 18px;
  display: flex;
  width: 74px;
  height: 36px;
  align-items: center;
  justify-content: space-between;
  padding: 3px;
  border: 0;
  border-radius: 20px;
  color: #f39c12;
  background: #e8eef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .22);
  cursor: pointer;
  transition: .3s;
}

.theme-switch .theme-icon {
  z-index: 2;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.theme-switch-knob {
  position: absolute;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
  transition: transform .3s;
}

body.theme-dark .theme-switch {
  color: #dce6f2;
  background: #293241;
}

body.theme-dark .theme-switch-knob {
  background: #111827;
  transform: translateX(38px);
}

html.theme-dark-preload,
html.theme-dark-preload body,
body.theme-dark {
  color: #d9e2ec;
  background: #10151d;
}

body.theme-dark #colorlib-page,
body.theme-dark .container-wrap,
body.theme-dark #colorlib-main,
body.theme-dark section {
  color: #d9e2ec;
  background-color: #10151d;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark p,
body.theme-dark .heading-meta {
  color: #eaf0f6;
}

body.theme-dark .panel,
body.theme-dark .panel-heading,
body.theme-dark .panel-body,
body.theme-dark .timeline-label,
body.theme-dark .blog-entry,
body.theme-dark .portfolio-project-card {
  color: #d9e2ec !important;
  border-color: #344150 !important;
  background: #18212c !important;
}

body.theme-dark .panel-title a { color: #eef5ff; }
body.theme-dark a { color: #72b7ff; }

body.theme-dark input,
body.theme-dark textarea {
  color: #fff;
  border-color: #445363;
  background: #17202a;
}

/* 2. Sidebar social links
 * ----------------------------------------------------------------------- */
#colorlib-aside .colorlib-footer .social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

#colorlib-aside .colorlib-footer .social-list li { display: block; }

#colorlib-aside .colorlib-footer .social-list li a {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 50%;
  color: #fff !important;
  background: rgba(5, 15, 26, .66);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  font-size: 17px;
  text-shadow: 0 1px 3px #000;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

#colorlib-aside .colorlib-footer .social-list li a:hover,
#colorlib-aside .colorlib-footer .social-list li a:focus {
  background: #2c98f0;
  box-shadow: 0 5px 15px rgba(44, 152, 240, .55);
  transform: translateY(-3px) scale(1.08);
}

/* 3. Shared cards and panels
 * ----------------------------------------------------------------------- */
.colorlib-skills .progress-wrap,
.colorlib-education .panel-default,
.colorlib-experience .timeline-label,
.colorlib-blog .portfolio-project-card {
  border: 1px solid transparent;
  border-radius: 9px;
  transition: transform .22s ease, border-color .22s ease,
    box-shadow .22s ease, background-color .22s ease;
}

.colorlib-skills .progress-wrap:hover,
.colorlib-education .panel-default:hover,
.colorlib-experience .timeline-label:hover,
.colorlib-blog .portfolio-project-card:hover {
  border-color: #2c98f0;
  box-shadow: 0 10px 24px rgba(44, 152, 240, .2);
  transform: translateY(-4px);
}

body.theme-dark .colorlib-skills .progress-wrap,
body.theme-dark .colorlib-education .panel-default,
body.theme-dark .colorlib-experience .timeline-label,
body.theme-dark .colorlib-blog .portfolio-project-card {
  border: 1px solid #3b4b5e !important;
  background: #18212c !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28) !important;
}

body.theme-dark .colorlib-skills .progress-wrap:hover,
body.theme-dark .colorlib-education .panel-default:hover,
body.theme-dark .colorlib-experience .timeline-label:hover,
body.theme-dark .colorlib-blog .portfolio-project-card:hover {
  border-color: #58a9ff !important;
  background: #202c39 !important;
  box-shadow: 0 10px 28px rgba(44, 152, 240, .32) !important;
}

body.theme-dark .fancy-collapse-panel .panel-default > .panel-heading {
  border: 0 !important;
  background: #18212c !important;
}

body.theme-dark .panel-heading a,
body.theme-dark .panel-heading a.collapsed {
  color: #f4f8fc !important;
  border: 1px solid #3b4b5e !important;
  background: #1d2936 !important;
}

body.theme-dark .panel-heading a:not(.collapsed) {
  color: #fff !important;
  border-color: #65b5f6 !important;
  background: #2c98f0 !important;
}

body.theme-dark .panel-body {
  color: #e6edf5 !important;
  border: 1px solid #3b4b5e !important;
  background: #18212c !important;
}

body.theme-dark .panel-body strong,
body.theme-dark .panel-body p,
body.theme-dark .panel-body a {
  color: #eaf2fb !important;
}

body.theme-dark .timeline-centered .timeline-label h2,
body.theme-dark .timeline-centered .timeline-label h2 a,
body.theme-dark .timeline-centered .timeline-label h2 span {
  color: #f0f5fa !important;
  opacity: 1 !important;
}

body.theme-dark .timeline-centered .timeline-label::after {
  border-color: transparent #3b4b5e transparent transparent !important;
}

/* Experience hierarchy: company → period → role → description. */
.colorlib-experience .experience-card { margin-right: 5px; padding: 24px 26px; }
.experience-company {
  margin: 0 0 10px;
  color: #15283b;
  font-family: 'Quicksand', Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}
.experience-period {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 11px;
  border-radius: 16px;
  color: #176baa;
  background: rgba(44, 152, 240, .11);
  font-size: 13px;
  font-weight: 600;
}
.experience-role {
  margin: 0 0 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(44, 152, 240, .2);
  color: #2c98f0;
  font-family: 'Quicksand', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
.experience-description p { margin: 0 0 8px; line-height: 1.75; }
.experience-description p:last-child { margin-bottom: 0; }
body.theme-dark .experience-company { color: #f3f7fb !important; }
body.theme-dark .experience-period { color: #8bc8ff; background: rgba(44, 152, 240, .17); }
body.theme-dark .experience-role { color: #72b7ff !important; border-color: #3b4b5e; }

body.theme-dark .blog-entry .desc h3,
body.theme-dark .blog-entry .desc h3 a,
body.theme-dark .blog-entry .desc span,
body.theme-dark .blog-entry .desc small,
body.theme-dark .blog-entry .desc p {
  color: #e7eef7 !important;
}

/* About and Contact share one interactive card language. */
.colorlib-about .about-desc,
.colorlib-about .services,
.colorlib-about .hire,
.colorlib-contact .colorlib-feature,
.colorlib-contact .contact-form-card {
  border: 1px solid rgba(44, 152, 240, .3);
  border-radius: 10px;
  transition: transform .22s ease, border-color .22s ease,
    box-shadow .22s ease, background-color .22s ease;
}

.colorlib-about .about-desc {
  margin-bottom: 20px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, .93);
}

.colorlib-about .services {
  min-height: 138px;
  background: #fff;
}

.colorlib-about .hire {
  overflow: hidden;
  padding: 18px !important;
}

.colorlib-about .about-desc:hover,
.colorlib-about .services:hover,
.colorlib-about .hire:hover,
.colorlib-contact .colorlib-feature:hover,
.colorlib-contact .contact-form-card:hover {
  border-color: #2c98f0;
  box-shadow: 0 10px 26px rgba(44, 152, 240, .28);
  transform: translateY(-4px);
}

body.theme-dark .colorlib-about .about-desc,
body.theme-dark .colorlib-about .services,
body.theme-dark .colorlib-about .hire,
body.theme-dark .colorlib-contact .colorlib-feature,
body.theme-dark .colorlib-contact .contact-form-card {
  color: #e7eef7 !important;
  border: 1px solid #3b4b5e !important;
  background: rgba(24, 33, 44, .94) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .32);
}

body.theme-dark .colorlib-about .about-desc:hover,
body.theme-dark .colorlib-about .services:hover,
body.theme-dark .colorlib-about .hire:hover,
body.theme-dark .colorlib-contact .colorlib-feature:hover,
body.theme-dark .colorlib-contact .contact-form-card:hover {
  border-color: #58a9ff !important;
  background: rgba(32, 44, 57, .97) !important;
  box-shadow: 0 10px 28px rgba(44, 152, 240, .34) !important;
}

body.theme-dark .colorlib-about .about-desc p,
body.theme-dark .colorlib-about .about-desc strong,
body.theme-dark .colorlib-about .services h3,
body.theme-dark .colorlib-about .hire h2 {
  color: #f0f5fa !important;
  text-shadow: none;
}

/* 4. Skills
 * ----------------------------------------------------------------------- */
.colorlib-skills .progress-wrap {
  min-height: 94px;
  margin-bottom: 14px;
  padding: 18px 18px 22px;
}

.colorlib-skills .progress-wrap h3 {
  margin: 0 0 27px !important;
  font-weight: 600;
  line-height: 1.35;
}

.colorlib-skills .progress {
  height: 7px;
  margin: 0 3px 3px;
  border-radius: 10px;
}

.colorlib-skills .progress-bar {
  height: 7px;
  border-radius: 10px;
}

.colorlib-skills .progress-bar::after {
  top: -3px;
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}

.colorlib-skills .progress-bar span {
  top: -30px;
  right: -5px;
  min-width: 38px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

body.theme-dark .progress { background: #354253 !important; }
body.theme-dark .progress-wrap h3 { color: #f1f6fb !important; }

body.theme-dark .colorlib-skills .progress-bar span {
  background: #111923 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
}

/* 5. Contact section
 * ----------------------------------------------------------------------- */
.colorlib-contact > .colorlib-narrow-content {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 38px 34px 42px !important;
  border-radius: 12px;
}

.colorlib-contact > .colorlib-narrow-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(120deg, rgba(4, 13, 25, .58),
    rgba(8, 22, 42, .2) 48%, rgba(4, 13, 25, .66));
  backdrop-filter: blur(1px);
}

.colorlib-contact > .colorlib-narrow-content > .row {
  margin-right: 0;
  margin-left: 0;
}

.colorlib-contact .contact-info-column { padding-right: 12px; }
.colorlib-contact .contact-form-column { padding-left: 12px; }

.colorlib-contact .colorlib-feature {
  display: flex;
  min-height: 82px;
  align-items: center;
  float: none;
  margin-bottom: 14px;
  padding: 13px 14px;
  background: rgba(8, 20, 35, .72);
  backdrop-filter: blur(3px);
}

.colorlib-contact .colorlib-feature .colorlib-icon {
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(98, 181, 255, .75);
  border-radius: 50%;
  background: rgba(44, 152, 240, .16) !important;
  transition: transform .22s ease, background .22s ease;
}

.colorlib-contact .colorlib-feature.colorlib-feature-sm .colorlib-icon i {
  display: block;
  height: auto;
  font-size: 27px;
  line-height: 1;
}

.colorlib-contact .colorlib-feature.colorlib-feature-sm .colorlib-text {
  min-width: 0;
  margin-top: 0;
  padding-left: 16px;
}

.colorlib-contact .colorlib-feature .colorlib-text p {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.colorlib-contact .colorlib-feature .colorlib-text p:last-child {
  margin-bottom: 0;
}

.colorlib-contact .colorlib-feature:hover .colorlib-icon {
  background: #2c98f0 !important;
  transform: scale(1.08);
}

.colorlib-contact .colorlib-feature:hover .colorlib-icon i {
  color: #fff !important;
}

.colorlib-contact .colorlib-text,
.colorlib-contact .colorlib-text p,
.colorlib-contact .colorlib-text a {
  color: #f7fbff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}

body.theme-dark .colorlib-contact .colorlib-feature,
body.theme-dark .colorlib-contact .colorlib-text,
body.theme-dark .colorlib-contact .colorlib-text p,
body.theme-dark .colorlib-contact .colorlib-text a {
  color: #f4f8fc !important;
  text-shadow: 0 1px 4px #000;
}

.colorlib-contact .contact-form-card {
  margin: 0;
  padding: 24px !important;
  border-radius: 12px;
  background: rgba(8, 20, 35, .76);
  backdrop-filter: blur(4px);
}

.colorlib-contact #contactForm .form-group { margin-bottom: 14px; }

.colorlib-contact #contactForm .form-control {
  height: 48px;
  padding: 11px 14px;
  border: 1px solid #58a9ff !important;
  border-radius: 8px !important;
  color: #fff;
  background: rgba(15, 27, 41, .9);
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.colorlib-contact #contactForm textarea.form-control {
  height: 150px;
  min-height: 150px;
  resize: vertical;
}

.colorlib-contact #sendMessageButton {
  min-width: 160px;
  padding: 12px 20px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #2c98f0, #6177ff);
  box-shadow: 0 6px 18px rgba(44, 152, 240, .35);
  letter-spacing: 1px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.colorlib-contact #sendMessageButton:hover,
.colorlib-contact #sendMessageButton:focus {
  box-shadow: 0 9px 24px rgba(44, 152, 240, .52);
  transform: translateY(-2px);
}

body.theme-dark .colorlib-contact input::placeholder,
body.theme-dark .colorlib-contact textarea::placeholder {
  color: #aebdcb;
  opacity: 1;
}

body.theme-dark .colorlib-contact input:focus,
body.theme-dark .colorlib-contact textarea:focus {
  border-color: #62b5ff !important;
  background: #202c39 !important;
  box-shadow: 0 0 0 3px rgba(44, 152, 240, .18) !important;
}

/* 6. Small-screen adjustments
 * ----------------------------------------------------------------------- */
@media (max-width: 991px) {
  .colorlib-contact .contact-info-column,
  .colorlib-contact .contact-form-column {
    padding-right: 0;
    padding-left: 0;
  }

  .colorlib-contact .contact-form-card { margin-top: 10px; }
}

@media (max-width: 768px) {
  .theme-switch {
    top: 12px;
    right: 58px;
  }
}

@media (max-width: 600px) {
  .colorlib-contact > .colorlib-narrow-content {
    padding: 28px 15px 32px !important;
  }

  .colorlib-contact .contact-form-card { padding: 17px !important; }
  .colorlib-skills .progress-bar span { right: -3px; }
}