/* Layout components extracted/adapted from Profolio theme-1.css:
   side-panel nav, menu-toggler, mode-toggle (theme switch), top-bar,
   page-intro-section, and body.light-mode overrides.
   Custom CSS (no inline styles). */

/* Layout */
.top-bar {min-height: 60px;
  padding-top: 1rem;}
.top-bar .top-bar-cta {position: absolute;
  left: 110px;
  top: 1.2rem;
  right: auto;
  height: 26px;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  padding: 0 0.9rem;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 13px;}
.menu-toggler {position: absolute;
  display: block;
  left: 0;
  top: 1rem;
  color: #d7dde9;
  border-radius: 6px;
  text-align: center;
  z-index: 1050;}
.menu-toggler:hover {color: white;}
.side-panel .navbar {padding: 0;}
.side-panel .offcanvas {width: auto;
  border: none;
  background: none;
  color: #a5b3ce;
  top: 0;}
.side-panel .offcanvas-body {padding: 0;
  padding-left: 1rem;}
.side-panel .main-nav {background: rgba(0, 0, 0, 0.1);
  padding: 1rem 0.5rem;
  border-radius: 6px;}
.side-panel a {color: #a5b3ce;}
.side-panel a:hover {text-decoration: none;}
.side-panel .icon-holder {font-size: 1.125rem;
  min-height: 25px;}
.side-panel .nav-text {text-transform: uppercase;
  font-size: 0.675rem;}
.side-panel .navbar-nav .nav-link.active {color: #fe655c;}
.side-panel .navbar-nav .nav-link.active:hover {color: #fe655c;}
.side-panel .navbar-nav .nav-link:hover {color: white;}
.side-panel .nav-item-close .btn-close {color: #d7dde9;
  background-image: none;
  font-weight: 900;
  font-size: 2rem;
  outline: none;}
.side-panel .nav-item-close .btn-close:hover, .side-panel .nav-item-close .btn-close:focus {color: white;
  box-shadow: none;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;}
.section.has-profile-image .profile-pic {max-width: 160px;
  height: auto;
  position: absolute;
  left: 50%;
  margin-left: -80px;
  top: -80px;
  border: 8px solid #1e2738;}
.page-intro-section .intro-name {font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 0.1rem;}
.page-intro-section .intro-content {margin-top: 1rem;}
.page-intro-section .profile-intro {position: relative;}
/* Dark/Light Mode Toggle */
.mode-toggle {position: absolute;
  left: 50px;
  top: 1.2rem;
  z-index: 1050;}
.mode-toggle .toggle {display: none;}
.mode-toggle .toggle + .toggle-btn {outline: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 47px;
  height: 26px;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s ease-in-out;
  border: 2px solid #a5b3ce;
  border-radius: 54px;}
@media (prefers-reduced-motion: reduce) {
  .mode-toggle .toggle + .toggle-btn {transition: none;}
}
.mode-toggle .toggle + .toggle-btn .toggle-icon {color: #a5b3ce;
  font-size: 10.25px;
  display: flex;}
.mode-toggle .toggle + .toggle-btn::-moz-selection {background: none;}
.mode-toggle .toggle + .toggle-btn::selection {background: none;}
.mode-toggle .toggle + .toggle-btn:after, .mode-toggle .toggle + .toggle-btn:before {position: absolute;
  display: block;
  content: "";
  width: 50%;
  height: 100%;}
.mode-toggle .toggle + .toggle-btn:after {left: 4px;
  top: 2.5px;
  transition: all 0.2s ease-in-out;
  content: "";
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background: #d7dde9;}
@media (prefers-reduced-motion: reduce) {
  .mode-toggle .toggle + .toggle-btn:after {transition: none;}
}
.mode-toggle .toggle + .toggle-btn:before {display: none;}
.mode-toggle .toggle:checked + .toggle-btn {border: 2px solid #354765;
  background: none;}
.mode-toggle .toggle:checked + .toggle-btn:after {left: 50%;
  background: #354765;}
.mode-toggle .toggle:checked + .toggle-btn .toggle-icon {color: #354765;}
.resume-profile-pic {max-width: 160px;
  height: auto;
  position: absolute;
  left: 50%;
  margin-left: -80px;
  top: -80px;
  border: 8px solid #1e2738;}
/* Left slide-in offcanvas opened by the hamburger, at ALL breakpoints. */
.side-panel .offcanvas {width: 260px;}
.side-panel .offcanvas-body {align-items: flex-start;
  padding: 1.5rem 1rem;}
.side-panel .offcanvas .main-nav {background: rgba(7, 9, 13, 0.95);
  border-radius: 0;
  padding: 0.5rem;
  width: 100%;}
.side-panel .offcanvas .navbar-nav {width: 100%;}
/* ============= Light More  ============= */
.light-mode {background: #F5F7FA;
  color: #354765;}
.light-mode hr {border-color: #c2cee1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;}
.light-mode .form-control {background: none;
  border-color: #c2cee1;
  color: #354765;}
.light-mode .menu-toggler {color: #354765;}
.light-mode h1, .light-mode .h1, .light-mode h2, .light-mode .h2, .light-mode h3, .light-mode .h3, .light-mode h4, .light-mode .h4, .light-mode h5, .light-mode .h5, .light-mode h6, .light-mode .h6 {color: #121822;}
.light-mode .footer .copyright a {color: #354765;}
.light-mode .social-list a {background: white;
  color: #4f6591;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);}
.light-mode .social-list a:hover {color: #629feb;}
.light-mode .side-panel .main-nav {background: white;
  box-shadow: 0 0 0.4rem 0.2rem rgba(0, 0, 0, 0.05);}
.light-mode .side-panel .navbar-nav .nav-link {color: #354765;}
.light-mode .side-panel .navbar-nav .nav-link:hover {color: #121822;}
.light-mode .side-panel .navbar-nav .nav-link.active {color: #fe655c;}
.light-mode .side-panel .navbar-nav .nav-link.active:hover {color: #fe655c;}
.light-mode .side-panel .nav-item-close .btn-close {color: #354765;}
.light-mode .section {background: white;
  color: #354765;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);}
.light-mode .section.has-profile-image .profile-pic {border-color: white;}
.light-mode .featured-project-list .card-title a {color: #000001;}
.light-mode .featured-project-list .card-text {color: #354765;}
.light-mode .client-logo-list .logo-holder {background: #8fa5c7;}
.light-mode .client-logo-list .logo-holder .logo-image {-webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;}
.light-mode .slider-container .quote-icon {color: #b1c1d8;}
.light-mode .slider-container .source-holder {color: #5976a7;}
.light-mode .slider-container .slider-custom-controls div {background: #F5F7FA;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
  color: #5976a7;}
.light-mode .slider-container .slider-custom-controls div:hover {color: #121822;
  background: #eef2f7;}
.light-mode .slider-container .tns-nav button.tns-nav-active {background-color: #5976a7;}
.light-mode .slider-container .tns-nav button {background-color: #d3dce9;}
.light-mode .projects-section .project-item .title a {color: #121822;}
.light-mode .projects-section .project-item .title a:hover {color: #629feb;}
.light-mode .skill-blocks .item-icon-holder {color: #4f6591;
  border-color: #d3dce9;
  background-color: #F5F7FA;}
.light-mode .skill-blocks .item-title {color: #354765;}
.light-mode .leadgen-section .section-heading {color: #121822 !important;}
.light-mode .featured-post-item {background: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);}
.light-mode .featured-post-item:hover {box-shadow: 0 0.125rem 0.3rem rgba(0, 0, 0, 0.1);}
.light-mode .post-item .post-item-inner {background: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);}
.light-mode .post-item .post-item-inner:hover {box-shadow: 0 0.125rem 0.3rem rgba(0, 0, 0, 0.1);}
.light-mode .post-item .post-item-footer {color: #5976a7;
  border-color: #F5F7FA;}
.light-mode .blog-breadcrumb {color: #354765;}
.light-mode .blog-breadcrumb a {color: #354765;}
.light-mode .blog-entry .post-meta li {border-color: #e4e9f2;
  color: #5976a7;}
.light-mode .blog-quote-holder {background: #F5F7FA;}
.light-mode .blog-quote-holder .blockquote {color: #121822;}
.light-mode .blog-quote-holder .blockquote .quote-icon {color: #5976a7;}
.light-mode .blog-quote-holder .blockquote-footer {color: #4f6591;}
.light-mode .blog-quote-holder .blockquote-footer cite {color: #4f6591;}
.light-mode .blog-entry .post-content .text-highlight {color: #3583e5 !important;}
.light-mode .blog-comment-area .comment-container .comment-item .comment-item-box {background: #F5F7FA;}
.light-mode .blog-comment-area .comment-container .comment-item .comment-body .name {color: #354765;}
.light-mode .blog-comment-area .comment-container .comment-item .comment-body .time {color: #6d8ab6;}
.light-mode .blog-comment-area .comment-container .comment-item .comment-body .comment-reply-link {border-color: #5870a2;
  background-color: #5870a2;}
.light-mode .blog-comment-area .comment-container .comment-item .comment-body .comment-reply-link:hover {color: white;
  border-color: #4f6591;
  background-color: #4f6591;}
.light-mode .comment-reply-holder {background: white;}
.light-mode .comment-reply-holder .reply-title {color: #354765;}
.light-mode .key-results .item .key-data {color: #121822;}
.light-mode .result-item .result-data {color: #121822;
  border-color: #121822;}
.light-mode .resume-wrapper {background: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);}
.light-mode .resume-profile-pic {border-color: white;}
.light-mode .resume-contact {border-color: #c2cee1;}
.light-mode .resume-role-title {color: #354765;}
.light-mode .resume-company-name {background: #e4e9f2;}
.light-mode .resume-section-heading-icon {background: #8497bc;
  color: white;
  font-weight: bold;}
.light-mode .resume-progress {background: #e4e9f2;}
.light-mode .resume-skill-name {color: #121822;}
.light-mode .resume-skill-badge {background: #4f6591;
  color: white;}
.light-mode .resume-level-indicator .item {background: #e4e9f2;}
.light-mode .resume-level-indicator .item.item-full {background: #8497bc;}
.light-mode .resume-projects-section .item-heading a {color: #354765;}
.light-mode .resume-degree {color: #121822;}
.light-mode .resume-lang-name {color: #121822;}
.light-mode .resume-timeline-item:before {border-color: #b1c1d8;
  background-color: #e4e9f2;}
.light-mode .resume-timeline:before {background: #b1c1d8;
  top: 12px;}
@media (max-width: 991.98px) {
  .light-mode .side-panel .offcanvas {box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.07);}
  .light-mode .blog-comment-area .comment-container .comment-item .comment-item-box {background: none;}
}

/* Footer */
.footer-heart {color: #fe655c;}

/* Section panels + responsive centering (from theme; centers content and clears the side-panel) */
.section {background: #1e2738;
  padding: 3rem;
  border-radius: 0.5rem;
  color: #a5b3ce;
  margin-bottom: 2.5rem;}
.section.has-profile-image {margin-top: 90px;
  position: relative;
  padding-top: calc(75px + 1rem);}
.limit-max-width {max-width: 700px;}
@media (min-width: 992px) {
  .section {max-width: 815px;}
}
@media (min-width: 1200px) {
  .section {max-width: 940px;}
}
@media (min-width: 1400px) {
  .section {max-width: 980px;}
}
@media (max-width: 575.98px) {
  .section {padding: 3rem 1.5rem;}
}
.light-mode .section {background: #fff;
  color: #354765;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);}

/* Contact form: dark inputs to match the theme */
.contact-form .form-control {background: #141a24;
  border: 1px solid rgba(215, 221, 233, 0.1);
  color: #d7dde9;
  padding: 0.75rem 1rem;}
.contact-form .form-control::placeholder {color: #6b788f;}
.contact-form .form-control:focus {background: #141a24;
  color: #fff;
  border-color: #fe655c;
  box-shadow: none;}
.light-mode .contact-form .form-control {background: #fff;
  border-color: rgba(53, 71, 101, 0.15);
  color: #354765;}

/* Contact flash spacing */
.contact-flash {margin-bottom: 1rem;}

/* Skills tech-list icon sizing (from theme) */
.tech-list .icon-item {width: 80px;}
.tech-list .icon-item img {max-width: 100%;
  height: auto;}
@media (max-width: 991.98px) {
  .tech-list .icon-item {max-width: 100%;}
}

/* Section heading + intro (centered, from theme) */
.section-heading {font-size: 1.75rem;
  text-align: center;
  color: #fff;
  font-weight: 900;}
.section-intro {margin: 0 auto;}
.light-mode .section-heading {color: #121822;}

/* Project thumbnail: never overflow its column */
.projects-section .project-thumb {max-width: 100%;
  height: auto;
  display: block;}

/* Projects tech-stack icon sizing (from theme) */
.tech-stack img {width: auto;
  height: 25px;}
.tech-stack .list-label {color: #a5b3ce;}

/* Simplified tech-stack list (text pills) */
.tech-stack-list {margin-bottom: 1rem;}
.tech-stack-list .list-inline-item {display: inline-block;
  margin: 0 .35rem .5rem 0;
  padding: .2rem .6rem;
  font-size: .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #d7dde9;}
.light-mode .tech-stack-list .list-inline-item {background: #eef2f8;
  border-color: #d3dce9;
  color: #4f6591;}

/* Monochrome white icons: invert to dark in light mode */
.light-mode .tech-mono {filter: invert(1);}

/* Skill blocks icons (from theme) */
.skill-blocks .item-icon-holder {width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #d7dde9;
  margin-bottom: 1.125rem;}
.skill-blocks .item-icon-holder .item-icon {font-size: 2rem;}
.skill-blocks .item-title {font-size: 1.125rem;}
/* Mobile: the three skill blocks stack, so space them apart. */
@media (max-width: 767.98px) {
  .skill-blocks .item {margin-bottom: 2.5rem;}
  .skill-blocks .item:last-child {margin-bottom: 0;}
}
.light-mode .skill-blocks .item-icon-holder {color: #4f6591;
  border-color: #d3dce9;
  background-color: #F5F7FA;}

/* ============= Mobile-only fixes ============= */
@media (max-width: 767.98px) {
  /* Language switcher was left-pinned: it's an inline-flex pill, so center it
     with auto margins (flex item) instead of stretching it full width. */
  .content-top-bar {justify-content: center;}
  .content-top-bar .language-switcher {margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;}

  /* Skill blocks: center text and icons (theme only centers from md up) */
  .skill-blocks .item {text-align: center;}
  .skill-blocks .item-icon-holder {margin-left: auto;
    margin-right: auto;}

  /* Name overflows on narrow screens: tighten tracking only, keep it clearly
     larger than the role title below it. */
  .resume-name {letter-spacing: 0.35rem;
    font-size: 2rem;}
}

/* Hamburger toggler visible at all breakpoints (panel toggles open/closed). */
.menu-toggler {display: block;}

/* Language switcher in light mode: dark pill + light text is low-contrast,
   so lighten the track and darken the inactive label. */
.light-mode .language-switcher {background: rgba(53, 71, 101, 0.08);}
.light-mode .language-switcher .language-link {color: #354765;}
.light-mode .language-switcher .language-link:hover,
.light-mode .language-switcher .language-link:focus {color: #121822;
  background: rgba(53, 71, 101, 0.1);}
.light-mode .language-switcher .language-link.active {color: #fff;
  background: #629feb;}