/**
 * Template Name: Fungi
 * Template Url: http://ethemestudio.com/demo/fungi
 * Author: eThemeStudio
 * Author Url: http://procodr.com
 * Version: 2.2.7
 * Initial Release: November 22, 2022
 * Last Update: December 13, 2023
 * 
 */
/* 

====================
  Table of Contents 
====================

1. Variables
2. Common Styles
3. General Style
4. Header
5. Hero Area
6. Intro Section
7. Facts Section
8. About Section
9. Skill Section 
10. Portfolio Section 
11. Service Section
12. Resume Section
13. Testimonial Section
14. Blog Section
15. Partner Section
16. Contact Section
17. Site Footer
18. Libraries
19. Media Queries

/***********************************************************
  1. Variables 
************************************************************/
/* brand colors */
/***********************************************************
  2. Common Styles 
************************************************************/
.section-title {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 72px;
}
.section-title h2 {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.section-title h2:before,
.section-title h2:after {
  content: '';
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: #0195ba;
  position: absolute;
  top: 2.5px;
}
.section-title h2:before {
  border-left-color: #0195ba;
  right: -30px;
}
.section-title h2:after {
  border-right-color: #0195ba;
  left: -30px;
}
body.dark-mode .section-title h2:before,
body.dark-mode .section-title h2:after {
  content: '';
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: #c17fff;
  position: absolute;
  top: 2.5px;
}
body.dark-mode .section-title h2:before {
  border-left-color: #c17fff;
  right: -30px;
}
body.dark-mode .section-title h2:after {
  border-right-color: #c17fff;
  left: -30px;
}
.section-title.dark h2 {
  color: #fff;
}
.section-title.dark .lead {
  color: #fff;
}
.block-title {
  font-size: 48px;
  margin-bottom: 30px;
}
.block-title span {
  display: block;
  font-size: 18px;
  text-transform: uppercase;
  color: #adff00;
}
.lead {
  color: #c2c2c2;
}
.lead.dark {
  color: #b0aac0;
}
.btn-main {
  padding: 15px 42px;
  background: #0195ba;
  color: #222;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
}
body.dark-mode .btn-main {
  padding: 15px 42px;
  background: #c17fff;
  color: #222;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
}
.btn-main:hover {
  background: #0195ba;
  color: #fff;
}
body.dark-mode .btn-main:hover {
  background: #3b1c58;
  color: #fff;
}
.btn-ghost {
  padding: 13px 40px;
  background: transparent;
  color: #fff;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  border: 2px solid #0195ba;
}
.btn-ghost:hover {
  background: #0195ba;
  color: #fff;
}
body.dark-mode .btn-ghost {
  padding: 13px 40px;
  background: transparent;
  color: #fff;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  border: 2px solid #3b1c58;
}
body.dark-mode .btn-ghost:hover {
  background: #3b1c58;
  color: #fff;
}
.btn-text {
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
}
/*navbar fixed styling */
.fixed-top {
  background: #222;
  z-index: 1001 !important;
}
.fixed-top > .container {
  padding-left: var(--bs-gutter-x, 0.75rem) !important;
  padding-right: var(--bs-gutter-x, 0.75rem) !important;
}
.fixed-top .navbar-brand img {
  width: 108px;
}
.top-padding {
  padding-top: 80px;
}
/***********************************************************
  3. General Style 
************************************************************/
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: #615978;
  background: #F0F0F0;
}
body.dark-mode {
  background: #1A1A1A;
}
a {
  color: #0195ba;
  text-decoration: none;
  transition: 0.3s;
}
body.dark-mode a {
  color: #3b1c58;
  text-decoration: none;
  transition: 0.3s;
}
a:hover {
  color: #0195ba;
}
p:last-of-type {
  margin-bottom: 0;
}
ul {
  padding-left: 0;
}
li {
  list-style: none;
}
/* Light mode */
.hero-area,
.about-section,
.skill-section,
.portfolio-section,
.partner-section,
.contact-section,
.resume-section,
.site-footer .footer-main,
.section-block {
  background-color: #004D61 !important;
}
/* Dark mode overrides */
.dark-mode .hero-area,
.dark-mode .about-section,
.dark-mode .skill-section,
.dark-mode .portfolio-section,
.dark-mode .partner-section,
.dark-mode .contact-section,
.dark-mode .resume-section,
.dark-mode .site-footer .footer-main,
.dark-mode .section-block {
  background-color: #6D38A0 !important;
}
.section-block {
  padding-top: 72px;
  padding-bottom: 12px;
  margin-bottom: 60px;
  background: #004D61;
  border-radius: 18px;
}
.dark-mode .section-block {
  padding-top: 72px;
  padding-bottom: 12px;
  margin-bottom: 60px;
  border-radius: 18px;
  background: #6D38A0; /* Dark mode box / container background */
}
.section-block .row > div {
  margin-bottom: 60px;
}
/* dark mode */
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
  color: #222;
}
/* Dark Mode Styling */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: #fff;
}
.dark-mode p {
  color: #b0aac0;
}
.dark-mode .modal .modal-content {
  background: #2f2f2f;
}
.dark-mode .modal .meta-wrapper {
  background: #414141;
  color: #b0aac0;
}
.dark-mode .modal .meta-wrapper .meta-value {
  color: #fff;
}
/***********************************************************
  4. Header
************************************************************/
.site-header {
  width: 100%;
  z-index: 1001;
  left: 0;
}
.site-header .navbar {
  padding-top: 24px;
  padding-bottom: 24px;
  z-index: 1;
  transition: 0.3s;
}
.site-header .navbar.fixed-top {
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-header .nav-item .nav-link {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
.site-header .nav-item .active {
  color: #0195ba;
}
.site-header a {
  color: #222;
  text-transform: capitalize;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}
.site-header a:hover,
.site-header a:focus {
  color: #0195ba;
}
.site-header .navbar-brand {
  width: 160px;
}
.site-header .nav-social {
  margin-bottom: 0;
}
.site-header .nav-social li {
  display: inline-block;
  margin-right: 24px;
}
.site-header .nav-social li:last-child {
  margin-right: 0;
}
.site-header .nav-social .list-inline-item {
  margin-right: 24px;
}
.site-header .nav-social .list-inline-item:last-child {
  margin-right: 0;
}
.site-header .nav-social a {
  font-size: 18px;
  color: #fff;
  transition: 0.3s;
}
.site-header .nav-social a:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
body.site-header .header-btn {
  padding: 12px 12px;
  text-transform: uppercase;
}
body.dark-mode .site-header .header-btn {
  padding: 12px 12px;
  text-transform: uppercase;
}
.site-header .header-btn:hover {
  color: #fff;
}
.site-header .navbar-toggler {
  margin-left: 18px;
}
body:not(.dark-mode) .site-header .navbar-toggler {
  color: #1a1a1a;
  border-color: #1a1a1a;
}

/* Dark mode: white icon */
body.dark-mode .site-header .navbar-toggler {
  color: #fff;
  border-color: #c17fff;
}
/* ensure size/position match bootstrap default */
.site-header .navbar-toggler .navbar-toggler-icon {
  width: 1.5em;
  height: 1.5em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
body.dark-mode .site-header .navbar-toggler .navbar-toggler-icon {
  width: 1.5em;
  height: 1.5em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
/*------------------------------------------------------------------
  Dark-mode: collapsed (mobile) menu — ensure items and icons are
  readable (white) and keep a visible hover state.
------------------------------------------------------------------*/
@media (max-width: 1199px) {
  /* make the collapsed menu background follow dark mode if needed */
  body.dark-mode .site-header .navbar-collapse {
    background: transparent; /* keep existing bg, color rules below handle text */
  }

  /* force nav link text and icons to white so they're readable */
  body.dark-mode .site-header .navbar-collapse .nav-link,
  body.dark-mode .site-header .navbar-collapse .nav-link i,
  body.dark-mode .site-header .navbar-collapse .nav-link span {
    color: #ffffff !important;
  }

  /* hovered/focused state: keep the accent (adjust if you prefer different) */
  body.dark-mode .site-header .navbar-collapse .nav-link:hover,
  body.dark-mode .site-header .navbar-collapse .nav-link:focus {
    color: #adff00 !important;
    background: rgba(255,255,255,0.03) !important;
    text-decoration: none;
  }

  /* ensure the theme toggle/button label inside the collapsed menu is visible */
  body.dark-mode #theme-switch,
  body.dark-mode #theme-switch .visually-hidden {
    color: #ffffff !important;
  }
}

/*------------------------------------------------------------------
  Collapsed menu: align theme toggle with other nav items
  - Make nav-links use flex so icon and text line up
  - Ensure the theme button uses the same sizing and no vertical
    translate so it aligns perfectly with other items.
------------------------------------------------------------------*/
@media (max-width: 1199px) {
  .site-header .navbar-collapse .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important; /* space between icon and text */
    padding: 0.65rem 1rem !important;
    font-weight: 600;
  }

  /* Icon sizing — keep a fixed width so text lines up */
  .site-header .navbar-collapse .nav-link i,
  .site-header .navbar-collapse .nav-link .nav-icon {
    width: 30px !important;
    min-width: 30px !important;
    text-align: center !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    display: inline-block !important;
  }

  /* Theme-switch should match the same flex layout as other links */
  .site-header .navbar-collapse #theme-switch {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.65rem 1rem !important;
    transform: none !important; /* remove any lift that breaks alignment */
    margin: 0 !important;
  }

  .site-header .navbar-collapse #theme-switch i {
    width: 30px !important;
    min-width: 30px !important;
    text-align: center !important;
  }

  /* If the theme switch uses a visually-hidden label, ensure spacing matches */
  .site-header .navbar-collapse #theme-switch .visually-hidden {
    position: static !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* keep the same baseline for icons and text across light/dark */
  .site-header .navbar-collapse .nav-link,
  .site-header .navbar-collapse .nav-link i {
    vertical-align: middle !important;
  }
}

/*------------------------------------------------------------------
  Make theme icon bolder and normalize collapsed items alignment
  - Ensure icons (font, svg, img) share the same fixed width
  - Strengthen theme icon appearance with size + subtle text-shadow
  - Reset margins on label nodes so all labels start at same x
------------------------------------------------------------------*/
@media (max-width: 1199px) {
  /* Target icon fonts (Font Awesome, Bootstrap Icons), inline svgs and img icons */
  .site-header .navbar-collapse .nav-link i,
  .site-header .navbar-collapse .nav-link .fa,
  .site-header .navbar-collapse .nav-link .fas,
  .site-header .navbar-collapse .nav-link .bi,
  .site-header .navbar-collapse .nav-link svg,
  .site-header .navbar-collapse .nav-link img {
    width: 30px !important;
    min-width: 30px !important;
    height: auto !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }

  /* If any icons are SVG, ensure they scale to the width */
  .site-header .navbar-collapse .nav-link svg {
    max-width: 100% !important;
    height: 1.05rem !important;
  }

  /* Slightly enlarge and bold the theme-switch icon to make it stand out */
  .site-header .navbar-collapse #theme-switch i,
  .site-header .navbar-collapse #theme-switch .fa,
  .site-header .navbar-collapse #theme-switch .fas,
  .site-header .navbar-collapse #theme-switch .bi {
    font-size: 1.18rem !important;
    line-height: 1 !important;
    /* visual bolding: text-shadow gives perceived weight for icon glyphs */
    text-shadow: 0 0 0.6px currentColor, 0 0 0.6px currentColor !important;
    color: inherit !important;
  }

  /* Make sure icon containers don't add unexpected margin */
  .site-header .navbar-collapse .nav-link > i,
  .site-header .navbar-collapse .nav-link > svg,
  .site-header .navbar-collapse .nav-link > img {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Force label elements (common wrappers/spans) to align */
  .site-header .navbar-collapse .nav-link > span,
  .site-header .navbar-collapse .nav-link .nav-label,
  .site-header .navbar-collapse .nav-link .label {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
    align-self: center !important;
  }

  /* If any links had extra left padding, normalize so all labels align uniformly */
  .site-header .navbar-collapse .nav-item {
    padding-left: 0 !important;
  }

  /* Slight visual strengthening for label text (optional) */
  .site-header .navbar-collapse .nav-link {
    font-weight: 600 !important;
  }
}
/***********************************************************
  5. Hero Area
************************************************************/
.hero-area {
  background-color: #004D61;
  background-size: cover;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-left: 36px;
  padding-right: 36px;
  border-radius: 18px;
  margin-bottom: 60px;
}
.dark-mode .hero-area {
  background-size: cover;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-left: 36px;
  padding-right: 36px;
  border-radius: 18px;
  margin-bottom: 60px;
  background-color: #6D38A0; /* dark-mode hero bg */
}
.hero-area:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: -1;
}
.hero-area .hero-content {
  min-height: 83vh;
  position: relative;
  z-index: 10;
}
.hero-area .hero-content > .row {
  width: 100%;
}
.hero-area .hero-head {
  padding-top: 25px;
  color: #fff;
  font-size: 90px;
}
.hero-area .hero-head small {
  font-size: 24px;
  margin-bottom: 12px;
  display: block;
}
.hero-area .hero-head strong {
  color: #0195ba;
}

body.dark-mode .hero-area .hero-head strong {
  color: #3b1c58;
}
.hero-area .content-block {
  text-align: center;
}
.hero-area .content-block p {
  font-size: 24px;
}
.hero-area .image-wrapper {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: visible;              /* allow the ring to show outside the image */
  display: inline-block;
  position: relative;
  transform: translateY(-32px);   /* lift image up - adjust value to taste */
  transition: transform .18s ease;
  z-index: 5;                      /* keep it above nearby content */
  box-shadow: 0 0 0 6px #0195ba;  
}
body.dark-mode .hero-area .image-wrapper {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: visible;              /* allow the ring to show outside the image */
  display: inline-block;
  position: relative;
  transform: translateY(-32px);   /* lift image up - adjust value to taste */
  transition: transform .18s ease;
  z-index: 5;                      /* keep it above nearby content */
  box-shadow: 0 0 0 6px #3b1c58;  
}
.hero-area .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  box-shadow: none;  
}
.hero-area .link-group {
  margin-top: 60px;
}
.hero-area .btn-main {
  margin-right: 12px;
}
.hero-area .btn-ghost:hover {
  color: #222;
}
.hero-area .btn-text:hover {
  color: #fff;
}
.hero-area .typer {
  color: #fff !important;
  font-weight: bold;
}
/* Dark Mode Styling */
.dark-mode .hero-area .hero-facts li {
  background: #6D38A0;
}
/***********************************************************
  8. About Section 
************************************************************/
.about-section {
  background-color: #004D61;
  padding-bottom: 30px;
  padding-left: 42px;
  padding-right: 42px;
  position: relative;
}
.about-section .img-wrapper {
  width: 550px;                 /* smaller than hero */
  height: 625px;
  border-radius: 14px;          /* rounded rectangle — matches .about-section look */
  overflow: visible;            /* allow the outline (ring) to show outside the image */
  display: block;
  position: relative;
  margin: 0;                    /* keep existing alignment (change to auto for centered) */
  z-index: 5;
  box-shadow: 0 0 0 6px #0195ba; /* white outline similar to hero */
  transition: transform .18s ease;
}

body.dark-mode .about-section .img-wrapper {
  width: 550px;                 /* smaller than hero */
  height: 625px;
  border-radius: 14px;          /* rounded rectangle — matches .about-section look */
  overflow: visible;            /* allow the outline (ring) to show outside the image */
  display: block;
  position: relative;
  margin: 0;                    /* keep existing alignment (change to auto for centered) */
  z-index: 5;
  box-shadow: 0 0 0 6px #3b1c58; /* white outline similar to hero */
  transition: transform .18s ease;
}
.about-section .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;          /* match wrapper radius */
  box-shadow: none;
}
body.dark-mode .about-section .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;          /* match wrapper radius */
  box-shadow: none;
}
.about-section .content-block h2 {
  color: #fff;
  font-size: 48px;
  margin-bottom: 30px;
}
.about-section .content-block h2 span {
  display: block;
  font-size: 18px;
  text-transform: uppercase;
  color: #0195ba;
}
body.dark-mode .about-section .content-block h2 span {
  display: block;
  font-size: 18px;
  text-transform: uppercase;
  color: #c17fff;
}
.about-section .content-block p {
  color: #c2c2c2;
  margin-bottom: 24px;
}
.about-section .content-block h2 strong {
  display: block;
  font-size: 30px;
  margin-top: 24px;
}
.about-section .personal-details {
  margin-top: 36px;
  margin-bottom: 36px;
}
.about-section .personal-details > div {
  margin-bottom: 0;
}
.about-section .personal-info p {
  color: #c2c2c2;
  padding-left: 0;
}
.about-section .personal-info li {
  margin-bottom: 18px;
}
.about-section .personal-info h4 {
  color: #FFF;
  font-size: 16px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
/* Dark Mode Styling */
.dark-mode .about-section {
  padding-bottom: 30px;
  padding-left: 42px;
  padding-right: 42px;
  position: relative;
  background: #6D38A0;
}
/***********************************************************
  9. Skill Sections
************************************************************/
.skill-section {
  background-size: cover;
  position: relative;
  z-index: 1;
  padding-left: 42px;
  padding-right: 42px;
  padding-top: 42px;
  padding-bottom: 42px;
}
body.dark-mode .skill-section {
  background-size: cover;
  position: relative;
  z-index: 1;
  padding-left: 42px;
  padding-right: 42px;
  padding-top: 42px;
}
.skill-section:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: -1;
  border-radius: 18px;
}
.skill-section h2 {
  color: #fff;
  font-size: 48px;
  margin-bottom: 36px;
}
.skill-section h2 span {
  display: block;
  font-size: 18px;
  text-transform: uppercase;
  color: #0195ba;
}
body.dark-mode .skill-section h2 span {
  display: block;
  font-size: 18px;
  text-transform: uppercase;
  color: #c17fff;
}
.skill-section .lead {
  color: #c2c2c2;
}
.skill-section .content-block {
  padding-right: 72px;
}
.skill-section .progress-block {
  margin-top: 30px;
}
.skill-section .progress-block h4 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 12px;
}
.skill-section .progress-wrapper {
  margin-bottom: 24px;
  position: relative;
}
.skill-section .progress {
  height: 0.5rem;
  position: relative;
}
body.dark-mode .skill-section .lead {
  color: #c2c2c2;
}
body.dark-mode .skill-section .content-block {
  padding-right: 72px;
}
body.dark-mode .skill-section .progress-block {
  margin-top: 30px;
}
body.dark-mode .skill-section .progress-block h4 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 12px;
}
body.dark-mode .skill-section .progress-wrapper {
  margin-bottom: 24px;
  position: relative;
}
body.dark-mode .skill-section .progress {
  height: 0.5rem;
  position: relative;
}
.skill-section .progress-bar {
  background-color: #0195ba;
}
body.dark-mode .skill-section .progress-bar {
  background-color: #c17fff;
}
.skill-section .progress-value {
  position: absolute;
  right: 0;
  top: 2px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
body.dark-mode .skill-section .progress-value {
  position: absolute;
  right: 0;
  top: 2px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.progress-bar {
  transition-duration: 3s;
}
/***********************************************************
  10. Portfolio Section
************************************************************/
.portfolio-section {
  padding-bottom: 100px;
  padding-left: 42px;
  padding-right: 42px;
  position: relative;
  /* portfolio detials styling */
}
.portfolio-section h2{
  color: #fff;
  font-size: 42px;
  margin-bottom: 36px;
}
.portfolio-section .lead {
  color: #c2c2c2;
  margin-bottom: 48px;
}
.portfolio-section .row > div {
  margin-bottom: 24px;
}
.portfolio-section .filter-button-group {
  text-align: center;
  margin-bottom: 48px;
}
.portfolio-section .filter-button-group button {
  border: 2px solid #fff;
  border-radius: 4px;
  background: transparent;
  padding: 6px 12px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  transition: 0.3s;
}
.portfolio-section .filter-button-group button:hover {
  border-color: #0195ba;
}
body.dark-mode .portfolio-section .filter-button-group button:hover {
  border-color: #c17fff;
}
.portfolio-section .filter-button-group .active {
  background: #0195ba;
  color: #fff;
  border-color: #0195ba;
}
body.dark-mode .portfolio-section .filter-button-group .active {
  background: #c17fff;
  color: #fff;
  border-color: #c17fff;
}
.portfolio-section .box {
  background-color: #774691;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
.portfolio-section .box:before,
.portfolio-section .box:after {
  content: '';
  background: #0195ba41;
  height: 50%;
  width: 100%;
  opacity: 0.8;
  position: absolute;
  top: -50%;
  left: 0;
  z-index: 1;
  transition: all 0.3s ease-in 0s;
}
.dark-mode .portfolio-section .box:before,
.dark-mode .portfolio-section .box:after {
  background: #c17fff40; /* dark-mode overlay color — change to taste (eg. #6D38A0 or #c17fff) */
  opacity: 0.8;
  transition: all 0.3s ease-in 0s;
}
.portfolio-section .box:after {
  top: auto;
  bottom: -50%;
}
.portfolio-section .box img {
  width: 100%;
  height: auto;
}
.portfolio-section .box .box-content {
  color: #fff;
  text-align: center;
  width: 100%;
  opacity: 0;
  position: absolute;
  bottom: 40%;
  left: 0;
  z-index: 2;
  transition: all 0.3s ease-out 0.1s;
  padding: 36px;
}
.portfolio-section .box .title {
  font-size: 21px;
  line-height: 1.3;
  color: #222;
  text-transform: capitalize;
  margin: 0;
}
.portfolio-section .box .category {
  color: #fff;
  opacity: 0.8;
  font-size: 20px;
  text-transform: uppercase;
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}
.portfolio-section .box .icon-box {
  padding: 0;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 70%;
  z-index: 2;
  transition: all 0.3s ease-out 0.1s;
}
.portfolio-section .box .icon-box a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 12px; /* keep circular feel but allow text */
  line-height: 1;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  border-radius: 30px; /* pill shape to contain icon + text */
  transition: 0.3s;
  color: #fff;
  min-width: 48px; /* ensure icon-only still looks correct */
}
.portfolio-section .box .icon-box a i {
  font-size: 1.25rem; /* larger icon */
  line-height: 1;
  font-weight: 800; /* bolder glyph appearance for icon fonts */
  text-shadow: 0 0 0.8px currentColor, 0 0 0.8px currentColor; /* visual weight */
}
.portfolio-section .box .icon-box a:hover {
  background: #004D61;
  color: #0195ba;
}
body.dark-mode .portfolio-section .box .icon-box a:hover {
  background: #3b1c58; /* dark-mode hover background */
  color: #c17fff;         /* icon color on hover */
}

/* 'View' text styling */
.portfolio-section .box .icon-box a .view-text {
  margin-left: 0.35rem;
  font-size: 1rem;
  font-weight: 800; /* make the label bold */
  color: inherit; /* follow anchor color and hover state */
  line-height: 1;
  display: inline-block;
  letter-spacing: 0.2px;
}

/* Hide the text on very small screens to preserve layout */
@media (max-width: 576px) {
  .portfolio-section .box .icon-box a .view-text {
    display: none;
  }
  .portfolio-section .box .icon-box a {
    padding: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    justify-content: center;
  }
}
.portfolio-section .box:hover:before {
  top: 0;
}
.portfolio-section .box:hover:after {
  bottom: 0;
}
.portfolio-section .box:hover .box-content {
  opacity: 1;
  bottom: 0;
}
.portfolio-section .box:hover .icon-box {
  opacity: 1;
  top: 50%;
}

/* Ensure all text and link colors inside the portfolio box become white on hover
   This targets the overlay content (title, category, paragraphs) and icon links
   to guarantee readable contrast against the overlay background. */
.portfolio-section .box:hover,
.portfolio-section .box:hover .box-content,
.portfolio-section .box:hover .box-content .title,
.portfolio-section .box:hover .box-content .category,
.portfolio-section .box:hover .box-content p,
.portfolio-section .box:hover .icon-box a,
.portfolio-section .box:hover .box .icon li a {
  color: #ffffff !important;
}
.portfolio-section .box .icon li {
  margin: 0 3px;
  display: inline-block;
}
.portfolio-section .box .icon li a {
  color: #444;
  background-color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 36px;
  height: 35px;
  width: 35px;
  border-radius: 10px;
  display: block;
  transition: all 0.3s ease 0s;
}
.portfolio-section .box .icon li a:hover {
  color: #fff;
  background: #12c2e9;
}
.portfolio-section .btn-close {
  position: absolute;
  right: 54px;
  top: 54px;
  background: #004D61;
  color: #fff;
  text-align: center;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  transition: 0.3s;
}
body.dark-mode .portfolio-section .btn-close {
  background: #3b1c58;
  color: #fff;
 
}
.portfolio-section .item-content > div {
  margin-bottom: 0;
}
.portfolio-section .content-wrapper {
  padding: 30px 12px 24px 0;
}
.portfolio-section .content-wrapper .item-title {
  font-size: 36px;
  margin-bottom: 24px;
}
.portfolio-section .content-wrapper h2,
.modal .content-wrapper h2 {
  color: #004D61 !important;
}
body.dark-mode .portfolio-section .content-wrapper h2,
body.dark-mode .modal .content-wrapper h2 {
  color: #c17fff !important;
}
.portfolio-section .content-wrapper p,
.modal .content-wrapper p {
  color: #1a1a1a !important;
}
body.dark-mode .portfolio-section .content-wrapper p,
body.dark-mode .modal .content-wrapper p {
  color: #fff !important;
}
.portfolio-section .modal-body {
  padding: 36px 36px 12px;
}
.portfolio-section .modal-body img {
  border-radius: 12px;
}
.portfolio-section .meta-wrapper {
  background: #f6f6f6;
  padding: 30px;
  margin-top: 42px;
  border-radius: 8px;
}
.portfolio-section .item-meta {
  font-size: 16px;
}
.portfolio-section .item-meta li {
  color: #0195ba;
  font-weight: 700;
  margin-bottom: 18px;
}
body.dark-mode .portfolio-section .item-meta li {
  color: #c17fff;
}
.portfolio-section .item-meta li span {
  font-weight: bold;
  color: #222;
  margin-left: 8px;
}
/* Dark Mode Styling */
.dark-mode .portfolio-section {
  padding-bottom: 50px;
  padding-left: 42px;
  padding-right: 42px;
  position: relative;
}
.dark-mode .filter-button-group button {
  border: 2px solid #fff;
  border-radius: 4px;
  background: transparent;
  padding: 6px 12px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  transition: 0.3s;
}
/***********************************************************
  12. Resume Section
************************************************************/
.resume-section {
  padding-left: 42px;
  padding-right: 42px;
  position: relative;
  z-index: 1;
}
.resume-section .section-title h2 {
  font-size: 30px;
  color: #fff !important;
}

.resume-section h3 {
  color:#fff !important;
  margin-bottom: 48px;
}
.resume-section h4 {
  color:#fff;
  font-size: 21px;
  margin-bottom: 12px;
}
.resume-section h4 span {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: #0195ba;
  font-size: 60%;
  float: right;
}
.resume-section h5 {
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.resume-section p {
  color: #c2c2c2;
}
.resume-section .education-block {
  padding-right: 72px;
}
.resume-section ul {
  margin-bottom: 0;
}
.resume-section li {
  margin-bottom: 36px;
}
.resume-section li:last-child {
  margin-bottom: 0;
}
.resume-section li:last-child .icon-box:after {
  content: none;
}
.resume-section .icon-block {
  margin-right: 24px;
}
.resume-section .icon-box {
  width: 60px;
  height: 60px;
  background: #0195ba;
  color: #fff;
  font-size: 24px;
  text-align: center;
  border-radius: 50%;
  line-height: 60px;
  position: relative;
}
body.dark-mode .resume-section .icon-box {
  width: 60px;
  height: 60px;
  background: #c17fff;
  color: #fff;
  font-size: 24px;
  text-align: center;
  border-radius: 50%;
  line-height: 60px;
  position: relative;
}
.resume-section .icon-box:after {
  content: '';
  width: 1px;
  height: 200px;
  background: #dadada;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: -1;
}
/* Dark Mode Styling */
.dark-mode .resume-section {
  background: #282930;
}
.dark-mode .resume-section h4 span {
  color: #c17fff;
}
.dark-mode .resume-section .icon-box:after {
  background: #535353;
}
/***********************************************************
  15. Partner Section  
************************************************************/
.partner-section {
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: 18px;
  margin-bottom: 60px;
}
.partnerCarousel .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.partnerCarousel .image-wrapper {
  width: 150px;         /* box width (adjust to taste) */
  height: 150px;        /* box height (adjust to taste) */
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;              /* optional consistent backdrop for logos */
  border-radius: 25px;          /* rounded corners for the square */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06); /* subtle lift */
}

.partnerCarousel .image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;  /* keep aspect ratio, fit inside box */
  display: block;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .partnerCarousel .image-wrapper { width: 140px; height: 60px; padding: 6px; }
}
@media (max-width: 576px) {
  .partnerCarousel .image-wrapper { width: 110px; height: 50px; padding: 4px; }
}
/***********************************************************
  16. Contact Section
************************************************************/
.contact-section {
  padding-bottom: 60px;
  padding-left: 42px;
  padding-right: 42px;
  position: relative;
  /* contact form message */
}
.contact-section .icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #0195ba;
  line-height: 60px;
  text-align: center;
  color: #fff;
  margin-right: 24px;
  font-size: 24px;
}
body.dark-mode .contact-section .icon-box {
  background: #c17fff;
}
.contact-section a {
  font-family: 'Open Sans', sans-serif;
  color: #c2c2c2;
  text-transform: initial;
  transition: 0.3s;
}
.contact-section a:hover {
  color: #0195ba;
}
.contact-section address {
  color: #c2c2c2;
  margin-bottom: 0;
}
.contact-section h2 {
  color: #fff;
}
.contact-section h3 {
  color: #fff;
  font-size: 36px;
  margin-bottom: 48px;
}
.contact-section h4 {
  color: #fff;
}
.contact-section .map-wrapper {
  min-height: 396px;
  background: #f9f9f9;
  margin-right: 25px;
  border-radius: 10px;
}
.contact-section form > div {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
.contact-section input,
.contact-section textarea {
  border-radius: 4px !important;
}
.contact-section textarea {
  min-height: 183px;
}
.contact-section .form-control {
  transition: border-color .14s ease, box-shadow .14s ease;
  padding: 12px 18px;
}
.contact-section .form-control:focus {
  border: 3px solid #0195ba;                 /* thicker border */
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(1,149,186,0.12); /* subtle glow to emphasize focus */
  outline: none;
}
body.dark-mode .contact-section .form-control:focus {
  border: 3px solid #c17fff;
  box-shadow: 0 6px 18px rgba(193,127,255,0.12);
  outline: none;
}
.contact-section button {
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
}
.contact-section .form-message p {
  font-size: 14px;
}
.contact-section .form-message p.error,
.contact-section .form-message p.success {
  padding-bottom: 24px;
}
.contact-section .form-message p.success {
  color: #00b300;
}
.contact-section .form-message p.error {
  color: #ff3333;
}
/* Dark Mode Styling */
.dark-mode .contact-section {
  background: #282930;
}
.dark-mode .contact-section address {
  color: #c2c2c2;
}
.dark-mode .contact-section a {
  color: #c2c2c2;
}
.dark-mode .contact-section a:hover {
  color: #c17fff;
}
.dark-mode .contact-section .form-control {
  border-color: #474747;
  background: #2a2c33;
  color: #b0aac0;
}

/***********************************************************
  17. Site Footer 
************************************************************/
.site-footer {
  position: relative;
}
.site-footer .footer-main {
  background-color: #212228;
  background-size: cover;
  padding-top: 90px;
  padding-bottom: 60px;
  padding-left: 42px;
  padding-right: 42px;
  position: relative;
  z-index: 1;
  border-radius: 18px;
}
.site-footer .footer-main:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: -1;
  border-radius: 18px;
}
.site-footer .container {
  position: relative;
}
.site-footer h3 {
  color: #fff;
  font-size: 21px;
  margin-bottom: 30px;
}
.site-footer p {
  color: #c2c2c2;
}
.site-footer input {
  padding-left: 24px;
  padding-right: 24px;
}
.site-footer input:focus {
  border-color: #adff00;
  box-shadow: none;
}
.site-footer .footer-brand {
  margin-bottom: 36px;
  display: inline-block;
}
.site-footer .footer-brand img {
  width: 148px;
}
.site-footer .footer-social {
  margin-top: 48px;
}
.site-footer .footer-social li {
  margin-right: 24px;
}
.site-footer .footer-social li:last-child {
  margin-right: 0;
}
.site-footer .footer-social a {
  color: #fff;
  transition: 0.3s;
  font-size: 24px;
  display: inline-block;
}
.site-footer .footer-social a:hover {
  color: #0195ba;
  transform: translateY(-5px);
}
body.dark-mode .site-footer .footer-social a:hover {
  color: #c17fff;
  transform: translateY(-5px);
}
.site-footer .back-to-top {
  position: absolute;
  top: -30px;
  right: 42px;
  z-index: 100;
}
.site-footer .back-to-top a {
  color: #fff;
  width: 60px;
  height: 60px;
  background: #0195ba;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  overflow: visible;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
  animation: backToTopFloat 4s ease-in-out infinite;
}
.site-footer .back-to-top a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(1,149,186,0.18);
  animation: backToTopPulse 2.6s infinite;
}
.site-footer .back-to-top a:hover,
.site-footer .back-to-top a:focus {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  outline: none;
}
.dark-mode .site-footer .back-to-top a {
  color: #fff;
  background: #c17fff;
}
.site-footer .footer-bottom {
  margin-top: 48px;
  color: #c2c2c2;
  padding-bottom: 48px;
}
.site-footer .footer-bottom p {
  font-weight: bold;
  font-size: 12px;
  color: #1a1a1a;
}
.site-footer .footer-bottom a {
  font-weight: bold;
}
.site-footer .footer-bottom ul {
  margin-bottom: 0;
  color: #1a1a1a;
}
.site-footer .footer-bottom ul a {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  color: #1a1a1a;
  text-transform: capitalize;
  font-size: 12px;
}
/* dark mode styling */
.dark-mode .footer-bottom p {
  font-weight: bold;
  color: #fff;
}
.dark-mode .footer-bottom ul a {
  font-weight: bold;
  color: #fff;
}
/***********************************************************
  18. Libraries
************************************************************/
/* PRE LOADER */
.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #222;
  z-index: 10000;
}
.dots .dot {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 0 10px 0 10px;
  border-radius: 50%;
  background: #FFF;
  -webkit-animation: dot-dot-dot 1.4s linear infinite;
  animation: dot-dot-dot 1.4s linear infinite;
}
.dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes dot-dot-dot {
  0%,
  60%,
  100% {
    -webkit-transform: initial;
    -ms-transform: initial;
    transform: initial;
  }
  30% {
    -webkit-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    transform: translateY(-25px);
  }
}
/* swiper */
.swiper {
  width: 100%;
  height: 420px;
}
.swiper .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 0.5;
  width: 8px;
  height: 8px;
}
.swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #0195ba;
  opacity: 1;
}
.partnerCarousel {
  overflow: hidden;
  width: 100%;
}

/***********************************************************
  19. Media Queries 
************************************************************/
/* max-width: 1599px and min-width:992px */
@media (max-width: 1599px) and (min-width: 992px) {
  .hero-area .hero-head {
    font-size: 90px;
  }
}
/* max-width: 1599px and min-width:1200px */
@media (max-width: 1599px) and (min-width: 1200px) {
  .site-header .navbar {
    z-index: 1000;
  }
  .site-header .navbar .navbar-nav {
    right: 12px;
  }
  .site-header .navbar .nav-social {
    left: 12px;
  }
  .hero-area .hero-facts li {
    padding: 16px;
  }
  .hero-area .hero-facts li:first-child {
    left: 96px;
  }
  .hero-area .hero-facts li:nth-child(2) {
    right: -90px;
  }
  .hero-area .hero-facts li p {
    font-size: 36px;
  }
  .hero-area .hero-facts li h4 {
    font-size: 15px;
  }
  .about-section .img-wrapper:before {
    left: 24px;
  }
  .service-section .content-wrapper {
    padding: 48px 36px;
  }
  .testimonial-section .swiper {
    height: 480px;
  }
}
/* Max-width: 1399px and Min-width: 1200px */
@media (max-width: 1399px) and (min-width: 1200px) {
  .hero-area .hero-content > .row {
    margin-top: 72px;
  }
}
/* min-width: 1200px */
@media (min-width: 1200px) {
  .site-header .navbar-expand-xl .navbar-collapse {
    flex-direction: column;
  }
  .site-header .navbar-expand-xl .navbar-nav {
    flex-direction: column;
  }
  .site-header .navbar-nav {
    position: fixed;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Theme button: lift and create vertical gap below (affects only this button) */
  #theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    line-height: 1;
    padding: 0;
    margin: 0;                    /* remove margin that expanded the column */
    transform: translateY(-280px); /* lift only the button (adjust value to taste) */
    z-index: 10;
    transition: transform .18s ease;
  }
  .site-header .nav-item {
    margin-bottom: 14px;
  }
  .site-header .nav-item:last-child {
    margin-bottom: 0;
  }
  .site-header .navbar-nav > .nav-item:nth-child(2) .nav-link { background: #EA4335; color: #fff; } /* Home */
  .site-header .navbar-nav > .nav-item:nth-child(3) .nav-link { background: #4285F4; color: #fff; } /* About */
  .site-header .navbar-nav > .nav-item:nth-child(4) .nav-link { background: #FBBC05; color: #fff; } /* Portfolio */
  .site-header .navbar-nav > .nav-item:nth-child(5) .nav-link { background: #34A853; color: #fff; } /* Contact */

  /* Theme button is last item — keep it distinct (adjust nth-child index if your list differs) */
  .site-header .navbar-nav > .nav-item:first-child .nav-link,
  #theme-switch {
    background: transparent !important;
    color: #fff;                      /* adjust icon color if needed */
    box-shadow: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

  #theme-switch:hover,
  #theme-switch:focus {
    background: rgba(0, 0, 0, 0.65);  /* opaque circular background on hover */
    color: #fff;                      /* ensure icon stays visible */
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    transform: translateY(-280px) scale(1.03); /* visual lift only */
    border-radius: 50%;
    outline: none;
}
  body:not(.dark-mode) #theme-switch i.bi-moon {
  color: #000 !important;
}
  .site-header .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: #222;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    box-sizing: border-box;
    line-height: 48px;
    position: relative;
    font-size: 18px;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    transform-origin: center;
  }
    /* Per-button hover/active effects (scale + shadow + slightly darker bg) */
  .site-header .navbar-nav > .nav-item:nth-child(2) .nav-link:hover,
  .site-header .navbar-nav > .nav-item:nth-child(2) .nav-link:focus,
  .site-header .navbar-nav > .nav-item:nth-child(2) .nav-link.active {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    background: #d33b2b; /* darker red */
    color: #fff;
  }

  .site-header .navbar-nav > .nav-item:nth-child(3) .nav-link:hover,
  .site-header .navbar-nav > .nav-item:nth-child(3) .nav-link:focus,
  .site-header .navbar-nav > .nav-item:nth-child(3) .nav-link.active {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    background: #357ae8; /* darker blue */
    color: #fff;
  }

  .site-header .navbar-nav > .nav-item:nth-child(4) .nav-link:hover,
  .site-header .navbar-nav > .nav-item:nth-child(4) .nav-link:focus,
  .site-header .navbar-nav > .nav-item:nth-child(4) .nav-link.active {
    transform: scale(1.1);
    box-shadow: 0 8px 18px rgba(0,0,0,0.20);
    background: #f0a700; /* darker yellow */
    color: #fff;
  }

  .site-header .navbar-nav > .nav-item:nth-child(5) .nav-link:hover,
  .site-header .navbar-nav > .nav-item:nth-child(5) .nav-link:focus,
  .site-header .navbar-nav > .nav-item:nth-child(5) .nav-link.active {
    transform: scale(1.1);
    box-shadow: 0 8px 18px rgba(0,0,0,0.20);
    background: #2e8f43; /* darker green */
    color: #fff;
  }
  .site-header .nav-link span {
    font-size: 16px;
    display: inline-block;
    padding: 4px 24px;
    position: absolute;
    right: 104%;
    top: 50%;
    transform: translateY(-50%);
    background: #222;
    border-radius: 50px;
    display: none;
    color: #fff;
  }
  .site-header .nav-link:hover span {
    display: block;
  }
  /* Selected / active side-nav appearance: use theme colors instead of neon green */
  .site-header .nav-link.active {
    background: #0195ba; /* light-mode selected background */
    color: #fff;
  }
  .site-header .nav-link.active span {
    color: #0195ba; /* label accent for light mode */
  }

  /* Dark-mode override for desktop floating side-nav (min-width:1200px)
     Ensure active item uses purple accent and label shows matching purple */
  body.dark-mode .site-header .nav-link.active {
    background: #c17fff; /* dark-mode selected background */
    color: #fff;
  }
  body.dark-mode .site-header .nav-link.active span {
    color: #c17fff; /* label accent for dark mode */
  }
  .site-header .nav-social {
    position: fixed;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
  }
  .site-header .nav-social li {
    display: block;
    margin-bottom: 12px;
  }
  .site-header .nav-social li.facebook-link a {
    background: #1877F2;
  }
  .site-header .nav-social li.discord-link a {
    background: #5865F2;
  }
  .site-header .nav-social li.instagram-link a {
  /* fallback */
  background-color: #405de6;
  /* gradient — adjust colors/angle to taste */
  background-image: linear-gradient(45deg, #515bd4 10%, #8134af 35%, #dd2a7b 65%, #feda77 90%);
  color: #fff;
  }
  .site-header .nav-social li.github-link a {
    background: #333;
  }
  .site-header .nav-social li.youtube-link a {
    background: #FF0000;
  }
  .site-header .nav-social li:last-child {
    margin-bottom: 0;
  }
  .site-header .nav-social a {
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #adff00;
    border-radius: 50%;
  }
  .about-section.section-block .row > div {
    margin-bottom: 0;
  }
  .skill-section.section-block {
    padding-bottom: 1px;
  }
  .portfolio-section {
    padding-bottom: 48px;
  }
  .contact-section {
    padding-bottom: 1px;
  }
}
/* max-width: 1199px */
@media (max-width: 1199px) {
  .btn-main {
    padding: 12px 30px;
  }
  .btn-ghost {
    padding: 10px 28px;
  }
  .section-title {
    width: 80%;
  }
  .site-header .navbar-toggler:focus {
    box-shadow: none;
  }
  .site-header .navbar-toggler-icon {
    line-height: 1.5em;
  }
  body.dark-mode .site-header .navbar-toggler:focus {
    box-shadow: none;
  }
  body.dark-mode .site-header .navbar-toggler-icon {
    line-height: 1.5em;
  }
  .site-header .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 18px;
    color: #222;
    background: transparent;
    border-radius: 10px;
    margin-bottom: 10px;            /* space between buttons */
    width: 100%;
    box-sizing: border-box;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  body.dark-mode .site-header .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 18px;
    color: #222;
    background: transparent;
    border-radius: 10px;
    margin-bottom: 10px;            /* space between buttons */
    width: 100%;
    box-sizing: border-box;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .site-header .nav-link span {
    margin-left: 12px;
  }
  body.dark-mode .site-header .nav-link span {
    margin-left: 12px;
  }
  .site-header .nav-link.active,
  .site-header .nav-link:hover {
    color: #0195ba;
  }
  body.dark-mode .site-header .nav-link.active,
  body.dark-mode .site-header .nav-link:hover {
    color: #c17fff;
  }
  .site-header .navbar-collapse {
    background: #fff;               /* mobile menu background (light) */
    padding: 16px;
  }
  .site-header .nav-social {
    padding: 1.2rem;
  }
  .site-header .nav-social:before {
    content: none;
  }
  .site-header .nav-social a {
    color: #0195ba;
  }
  .site-header .nav-social .facebook-link a {
    color: #1877f2;
  }
  .site-header .nav-social .discord-link a {
    color: #5865F2;
  }
  .site-header .nav-social .instagram-link a {
    color: rgb(179, 23, 101);
  }
  .site-header .nav-social .youtube-link a {
    color: #FF0000;
  }
  body:not(.dark-mode) .site-header .nav-social .github-link a {
  color: #1a1a1a !important;
  }
  body.dark-mode .site-header .nav-social .github-link a {
    color: #ffffff !important;
  }
  #theme-switch {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;        /* vertical center */
    gap: 12px;
    padding: 24px 24px;
    width: 100%;
    justify-content: flex-start;
    border-radius: 10px;
    box-sizing: border-box;
    color: inherit;
    font-size: 18px;            /* same as other items */
    font-weight: 700;           /* bold like anchors */
    line-height: 1;
    cursor: pointer;
  }
  body:not(.dark-mode) #theme-switch,
  body:not(.dark-mode) .site-header .navbar-nav > .nav-item:first-child .nav-link {
  color: #000 !important;
  } 

  body.dark-mode #theme-switch,
  body.dark-mode .site-header .navbar-nav > .nav-item:first-child .nav-link {
  color: #fff !important;
  }
  #theme-switch i {
    font-size: 20px;
    width: 34px;
    text-align: center;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    color: inherit !important;
  }
  #theme-switch:hover,
  #theme-switch:focus {
    background: rgba(0,0,0,0.08);
    color: inherit;
  }
  #theme-switch .visually-hidden {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
    margin: 0;
    padding: 0;
    opacity: 1 !important;
    display: inline-block !important;
    vertical-align: middle;
    font-weight: 700;
    color: inherit;
  }

  /* Dark-mode collapsed overrides */
  .dark-mode .site-header .navbar-collapse {
    background: #282930;
  }
  .dark-mode .site-header .nav-link {
    color: #fff;
  }
  .dark-mode .site-header .nav-link:hover,
  .dark-mode #theme-switch:hover {
    background: rgba(255,255,255,0.04);
    color: #fff;
  }
  .hero-area {
    text-align: center;
  }
  .hero-area .content-block {
    margin-bottom: 120px;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
  .hero-area .hero-head {
    font-size: 60px;
  }
  .about-section .img-wrapper {
    text-align: center;
  }
  .about-section .content-block h2 {
    font-size: 48px;
  }
  .about-section .content-block h2 span {
    margin-bottom: 12px;
  }
  .about-section .content-block h2 strong {
    font-size: 24px;
  }
  .skill-section .content-block {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }
  .skill-section h2 span {
    margin-bottom: 12px;
  }
  .portfolio-section .meta-wrapper {
    margin-top: 12px;
    margin-bottom: 30px;
  }
  .resume-section .experience-block,
  .resume-section .education-block {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }
  .resume-section h4 span {
    display: block;
    margin-top: 12px;
    float: none;
  }
  .resume-section .icon-box:after {
    content: none;
  }
  .contact-section .icon-box {
    flex-shrink: 0;
  }
  .contact-section .map-wrapper {
    margin-right: 0;
  }
  .site-footer .social-block li {
    margin-right: 15px;
  }
  /* Dark mode styling */
  .dark-mode .site-header .navbar-collapse {
    background: #282930;
    padding: 16px;
  }
  .dark-mode .site-header .nav-link {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  /* Dark-mode: make selected side-nav use purple accent instead of neon green */
  body.dark-mode .site-header .nav-link.active {
    background: #c17fff;
    color: #fff;
  }
  body.dark-mode .site-header .nav-link.active span {
    color: #c17fff;
  }
}
/* max-width: 1199px and min-width:992px */
@media (max-width: 1199px) and (min-width: 992px) {
  .blog-section .post-group h3 {
    line-height: 1.2;
    margin-top: 24px;
  }
}
/* max-width: 991px and min-width:768px */
@media (max-width: 991px) and (min-width: 768px) {
  .site-footer .row > div {
    margin-bottom: 48px;
  }
  .site-footer .row > div:last-child {
    margin-bottom: 0;
  }
}
/* max-width: 767px */
@media (max-width: 767px) {
  .btn-main,
  .btn-ghost,
  .bt-text {
    font-size: 16px;
  }
  body.dark-mode .btn-main,
  .btn-ghost,
  .bt-text {
    font-size: 16px;
  }
  .block-title {
    font-size: 36px;
  }
  .fixed-top .navbar-brand img {
    width: 96px;
  }
  .hero-area .content-block {
    margin-top: 0;
  }
  .hero-area .link-group {
    white-space: nowrap;
  }
  .hero-area .btn-main {
    margin-right: 0;
    margin-bottom: 30px;
    display: inline-block;
  }
  .hero-area .hero-social {
    display: block;
  }
  .hero-area .hero-social li:last-child {
    margin-right: 0;
  }
  .hero-area .hero-social a {
    font-size: 21px;
  }
  .hero-area .hero-head {
    font-size: 48px;
  }
  .hero-area .hero-head small {
    font-size: 21px;
    margin-bottom: 12px;
  }
  .hero-area .content-block p {
    font-size: 18px;
  }
  .about-section .img-wrapper {
    width: 300px;
    height: 325px;
    box-shadow: 0 0 0 4px #0195ba;
    margin: 0 auto;
  }
  body.dark-mode .about-section .img-wrapper {
    width: 300px;
    height: 325px;
    box-shadow: 0 0 0 4px #3b1c58;
    margin: 0 auto;
  }
  .intro-section .row > div {
    margin-bottom: 36px;
  }
  .facts-section .row > div {
    margin-bottom: 36px;
  }
  .skill-section {
    padding-top: 80px;
    padding-bottom: 20px;
  }
  .skill-section .row > div {
    margin-bottom: 36px;
  }
  .skill-section h2 {
    font-size: 30px;
  }
  .skill-section .content-block {
    margin-bottom: 36px;
  }
  .portfolio-section .content-wrapper {
    padding-top: 24px;
  }
  .portfolio-section .content-wrapper .item-title {
    font-size: 30px;
  }
  .portfolio-section .modal-body {
    padding: 18px 18px 6px;
  }
  .portfolio-section .meta-wrapper {
    margin-top: 0;
    margin-bottom: 12px;
  }
  .portfolio-section .btn-close {
    right: 30px;
    top: 30px;
  }
  .resume-section .education-block,
  .resume-section .experience-block {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }
  .contact-section .contact-options > div {
    margin-bottom: 30px;
  }
  .contact-section form > div {
    margin-top: 0;
  }
  .contact-section form > div:first-child {
    margin-bottom: 0;
  }
  .site-footer .footer-main {
    padding-top: 72px;
    padding-bottom: 12px;
  }
  .site-footer .btn-main {
    padding-left: 21px;
    padding-right: 21px;
  }
  .site-footer input {
    padding-left: 12px;
    padding-right: 12px;
  }
  .site-footer .row > div {
    margin-bottom: 48px;
  }
  .site-footer .footer-bottom {
    text-align: center;
  }
  .site-footer .footer-bottom > div {
    margin-bottom: 24px;
  }
  .site-footer .footer-bottom > div:last-child {
    margin-bottom: 0;
  }
}
/* max-width: 576px */
@media (max-width: 576px) {
  section {
    padding-left: 15px;
    padding-right: 15px;
  }
  .section-title {
    width: 90%;
    margin-bottom: 48px;
  }
  .lead {
    font-size: 1.1rem;
  }
  .site-header .navbar-brand {
    width: 108px;
  }
  
  .hero-area {
    padding-left: 24px;
    padding-right: 24px;
  }
  .hero-area .image-wrapper {
    transform: translateY(-8px);
    margin-top: 35px;
  }
  .hero-area .content-block {
    margin-bottom: 96px;
  }
  .hero-area .hero-facts {
    display: none;
  }
  .hero-area .link-group {
    margin-top: 36px;
  }
  .intro-section {
    padding-top: 80px;
    padding-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .intro-section .item-wrapper {
    padding: 30px;
  }
  .intro-section .content-wrapper {
    margin-left: 0;
  }
  .intro-section .icon-box {
    float: none;
  }
  .about-section {
    padding-top: 80px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .about-section .content-block h2 {
    font-size: 36px;
  }
  .about-section .content-block h2 span {
    margin-bottom: 8px;
  }
  .about-section .image-block {
    margin-bottom: 36px !important;
  }
  .skill-section {
    padding-left: 24px;
    padding-right: 24px;
  }
  .portfolio-section {
    padding-top: 80px;
    padding-bottom: 60px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .portfolio-section .filter-button-group button {
    margin-bottom: 6px;
  }
  .resume-section {
    padding-top: 80px;
    padding-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .features-section {
    padding-top: 80px;
    padding-bottom: 20px;
  }
  .features-section .image-wrapper img {
    width: 90%;
    left: -10px;
  }
  .partner-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .contact-section {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .contact-section .row .form-block {
    margin-bottom: 0;
  }
  .site-footer .footer-brand img {
    width: 130px;
  }
  .site-footer .footer-social a {
    font-size: 21px;
  }
}
/* max-width: 360px */
@media (max-width: 360px) {
  .block-title {
    font-size: 30px;
  }
  .section-title h2 {
    font-size: 16px;
  }
  .section-title h2:before,
  .section-title h2:after {
    display: none;
  }
  .hero-area .hero-head {
    font-size: 36px;
  }
  .hero-area .hero-head small {
    font-size: 18px;
  }
  .hero-area .link-group .btn-main {
    margin-bottom: 12px;
  }
  .hero-area .link-group a {
    display: block;
  }
  .about-section .content-block h2 {
    font-size: 30px;
  }
  .about-section .content-block h2 strong {
    font-size: 21px;
  }
  .skill-section .progress-block h4 {
    font-size: 14px;
  }
}