/*--------------------------------
  1.GENERAL
  2.PRELOADER
  3.OVERLAY MENU
  4.RIGHT SIDE
  5.LEFT SIDE
  6.NEXT & PREV PAGE
  7.HERO SECTION
  8.ABOUT SECTION
  9.SKILLS
  10.LANGUAGE SKILL
  11.SERVICES
  12.RESUME
  13.TESTIMONIALS
  14.PORTFOLIO
  15.BLOG
  16.CONTACT
  17.PORTFOLIO SINGLE
  18.BLOG SINGLE
  19.BACKGROUND ANIMATION
  20.MOUSE MAGIC CURSOR
  21.RESPONSIVE MEDIA
--------------------------------*/


/*------------------------- GENERAL -------------------------*/
body {
  font-family: "Muli", sans-serif;
  font-weight: 300;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.full-screen {
  height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  line-height: 1.618;
}

a,
a:hover {
  text-decoration: none !important;
}

a,
a:hover,
button {
  outline: none !important;
}

.my-6 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.mt-6 {
  margin-top: 80px;
}

.mb-6 {
  margin-bottom: 80px;
}

.t-green {
  color: #3cb371;
}

.t-purple {
  color: #9370db;
}

.t-red {
  color: #cd5c5c;
}

/* Center container and limit maximum width
.max-width-d {
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}  */

html {
  width: 100%;
  min-height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
}

html,
body {
  width: 100%;
  min-width: 100%;
  min-height: 100vh;
  margin: 0;
}

.secondary-button {
  transition: all .5s ease;
  display: inline-block;
  border-radius: 32px;
  padding: 12px 24px;
}

.primary-button {
  border-radius: 20px;
  padding: 10px 30px;
  font-size: 16px;
  display: inline-block;
}

.subtitle {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 16px;
  font-size: 31px;
  font-weight: 400;
}

.subtitle::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 55px;
  border-radius: 8px;
}

.subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 100%;
  max-width: 255px;
}

.heading-meta-container {
  text-align: center;
  position: relative;
}

.heading-meta-container .heading-title {
  font-size: 27px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 0;
}

.heading-meta-container .description {
  font-weight: 300;
  margin-bottom: 48px;
}

.heading-meta-container .description::before {
  width: 26px;
  height: 5px;
  display: block;
  content: "";
  position: absolute;
  bottom: -2px;
  left: calc(50% - 13px);
}

.heading-meta-container .description::after {
  width: 100px;
  height: 1px;
  display: block;
  content: "";
  position: relative;
  margin-top: 12px;
  left: calc(50% - 50px);
}

.vertical-line {
  position: relative;
}

.vertical-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -5%;
  width: 1px;
  height: 115%;
}

#main {
  width: 76%;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 12%;
  overflow: hidden;
  border-radius: 1.25rem;
}

#main>section:not(:first-child):not(:last-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 0;
  opacity: 0;
  animation-duration: 1s;
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
}

#main>section:first-child,
#main>section:last-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 0;
  opacity: 0;
  animation-duration: 1s;
  border-radius: 1.25rem;
  padding: 3rem 1.5rem;
}

#main>section.active {
  z-index: 2 !important;
  opacity: 1 !important;
}

/*------------------------- Hero -------------------------*/

#hero {
  position: relative;
  background: #0d0d0f !important;
  overflow: hidden !important;
  isolation: isolate;
}


/* Main dark aurora */
#hero::before {
  content: "";
  position: absolute;

  width: 140%;
  height: 140%;

  top: -20%;
  left: -20%;

  background:
    radial-gradient(ellipse at 20% 40%,
      rgba(15, 80, 70, 0.12) 0%,
      rgba(15, 80, 70, 0.04) 28%,
      transparent 55%),

    radial-gradient(ellipse at 60% 30%,
      rgba(35, 55, 95, 0.14) 0%,
      rgba(35, 55, 95, 0.05) 28%,
      transparent 55%),

    radial-gradient(ellipse at 82% 55%,
      rgba(70, 45, 90, 0.12) 0%,
      rgba(70, 45, 90, 0.04) 28%,
      transparent 55%),

    radial-gradient(ellipse at 45% 75%,
      rgba(235, 176, 32, 0.04) 0%,
      transparent 42%);

  filter: blur(70px);

  animation: heroAuroraMove 16s ease-in-out infinite alternate;

  opacity: 0.7;

  z-index: -2;
  pointer-events: none;
}


/* Secondary subtle moving layer */
/* ========================================
   HERO - DIGITAL ATMOSPHERE BACKGROUND
======================================== */

#hero {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;

  background:
    radial-gradient(circle at 50% 50%,
      #18191d 0%,
      #101114 55%,
      #090a0c 100%) !important;
}


/* ----------------------------------------
   MOVING SOFT LIGHTS
---------------------------------------- */

#hero::before {
  content: "";
  position: absolute;

  width: 150%;
  height: 150%;

  top: -25%;
  left: -25%;

  background:

    /* GOLD LIGHT */
    radial-gradient(ellipse at 20% 30%,
      rgba(235, 176, 32, 0.13) 0%,
      rgba(235, 176, 32, 0.05) 25%,
      transparent 50%),

    /* BLUE-GRAY LIGHT */
    radial-gradient(ellipse at 75% 25%,
      rgba(70, 100, 145, 0.12) 0%,
      rgba(50, 75, 110, 0.04) 28%,
      transparent 55%),

    /* NEUTRAL SILVER LIGHT */
    radial-gradient(ellipse at 55% 80%,
      rgba(180, 185, 195, 0.07) 0%,
      transparent 45%);

  filter: blur(45px);

  animation:
    heroLightDrift 15s ease-in-out infinite alternate;

  z-index: 0;

  pointer-events: none;
}


/* ----------------------------------------
   FAINT TECH GRID + PARTICLE FEEL
---------------------------------------- */

#hero::after {
  content: "";

  position: absolute;
  inset: 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.018) 1px,
      transparent 1px),

    linear-gradient(90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px),

    radial-gradient(circle at 15% 30%,
      rgba(235, 176, 32, 0.55) 0 1px,
      transparent 2px),

    radial-gradient(circle at 40% 18%,
      rgba(255, 255, 255, 0.35) 0 1px,
      transparent 2px),

    radial-gradient(circle at 68% 35%,
      rgba(235, 176, 32, 0.40) 0 1px,
      transparent 2px),

    radial-gradient(circle at 82% 15%,
      rgba(255, 255, 255, 0.28) 0 1px,
      transparent 2px);

  background-size:
    45px 45px,
    45px 45px,
    240px 220px,
    310px 260px,
    350px 300px,
    280px 250px;

  opacity: 0.55;

  animation:
    heroGridMove 22s linear infinite;

  z-index: 1;

  pointer-events: none;

  mask-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.25));

  -webkit-mask-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.25));
}


/* ========================================
   CONTENT LAYERS
======================================== */

#hero .hero-center {
  position: relative;
  z-index: 3;
}

#hero .hero-portrait-reveal {
  z-index: 5;
}


/* ========================================
   ANIMATIONS
======================================== */

@keyframes heroLightDrift {

  0% {
    transform:
      translate3d(-4%, -3%, 0) scale(1);
  }

  35% {
    transform:
      translate3d(4%, 2%, 0) scale(1.07);
  }

  70% {
    transform:
      translate3d(-1%, 6%, 0) scale(1.12);
  }

  100% {
    transform:
      translate3d(6%, -1%, 0) scale(1.05);
  }

}


@keyframes heroGridMove {

  from {
    background-position:
      0 0,
      0 0,
      0 0,
      20px 40px,
      80px 20px,
      40px 90px;
  }

  to {
    background-position:
      45px 45px,
      45px 45px,
      80px -120px,
      -80px 150px,
      140px -100px,
      -120px 170px;
  }

}

.hero {
  position: relative;
  z-index: 1;
}

#hero .hero-center {
  position: relative;
  z-index: 3;
}

.hero-portrait-reveal {
  z-index: 5;
}

/* ========================================
   HERO TYPOGRAPHY
======================================== */

.hero-main-title {
  font-weight: 600;
}


/* Luke Leona highlight */
.hero-name {
  color: #ebb020;
  font-weight: 700;
}


/* Roles */
.hero-role-line {
  margin-top: 10px;
  margin-bottom: 0;

  color: #ebb020;

  font-size: 17px;
  font-weight: 700;

  letter-spacing: 0.5px;
  text-transform: uppercase;
}


/* ========================================
   HERO CTA
======================================== */

.hero-actions {
  margin-top: 24px;
}


/* ========================================
   HOLLOW SEE MY WORK BUTTON
======================================== */

.hero-work-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 11px 28px;

  /* Hollow */
  background: transparent !important;

  /* Golden outline */
  border: 2px solid #ebb020 !important;

  color: #ebb020 !important;

  border-radius: 22px;

  font-weight: 600;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* Arrow */
.hero-work-arrow {
  color: #ebb020;

  display: inline-block;

  font-size: 18px;

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}


/* Hover */
.hero-work-btn:hover {
  background: rgba(235, 176, 32, 0.08) !important;

  color: #ebb020 !important;

  transform: translateY(-2px);

  box-shadow:
    0 0 10px rgba(235, 176, 32, 0.20),
    0 0 25px rgba(235, 176, 32, 0.10);
}


.hero-work-btn:hover .hero-work-arrow {
  color: #ebb020;

  transform: translateX(5px);
}

/* ========================================
   HERO TITLE
======================================== */

.hero-main-title {
  font-weight: 600;
  line-height: 1.55;
}

.hero-title-line {
  display: block;
}

.hero-title-second {
  margin-top: 4px;
}

.hero-name {
  color: #ebb020;
  font-weight: 700;
}

.mCSB_inside>.mCSB_container {
  margin-right: 2rem;
}

.cursor {
  display: inline-block;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/*------------------------- Preloader -------------------------*/
#line-loader {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  display: flex;
}

#line-loader:before,
#line-loader:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

#line-loader:after {
  left: auto;
  right: 0;
}

#line-loader .middle-line {
  margin: auto;
  width: 0;
  height: 250px;

  position: absolute;
  overflow: hidden;
  -webkit-transition: all 0.8s ease 0s;
  -o-transition: all 0.8s ease 0s;
  transition: all 0.8s ease 0s;
}

.middle-line:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
  -o-animation: lineheight 1000ms ease-in-out 0s forwards;
  animation: lineheight 1000ms ease-in-out 0s forwards;
}

.middle-line:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-animation: lineround 1200ms linear 0s infinite;
  -o-animation: lineround 1200ms linear 0s infinite;
  animation: lineround 1200ms linear 0s infinite;
  animation-delay: 2000ms;
}

@keyframes lineheight {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

@keyframes lineround {
  0% {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(200%);
    -ms-transform: translateY(200%);
    -o-transform: translateY(200%);
    transform: translateY(200%);
  }
}

.preloaded .middle-line:after {
  opacity: 0;
}

.preloaded .middle-line {
  opacity: 0;
  height: 100% !important;
}

.preloaded:before,
.preloaded:after {
  -webkit-animation: hide 300ms ease-in-out 500ms forwards;
  -o-animation: hide 300ms ease-in-out 500ms forwards;
  animation: hide 300ms ease-in-out 500ms forwards;
}

@keyframes hide {
  0% {
    width: 50%;
  }

  100% {
    width: 0%;
  }
}

/* ========================================
   DESKTOP SIDEBAR MENU ALIGNMENT
======================================== */

@media (min-width: 992px) {


  .left-side {

    overflow:
      hidden;

  }


  .left-side .menu {

    position:
      relative;

    width:
      100%;

  }


  .left-side .menu
  .list-group-item {

    width:
      88px;

    position:
      absolute;

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      none !important;

    background:
      transparent !important;

  }


  .left-side .menu
  .list-group-item a {

    position:
      relative;

    width:
      calc(100% - 12px);

    min-height:
      56px;

    margin:
      0 6px;

    padding:
      6px 2px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    border-radius:
      10px;

    text-align:
      center;

    transition:
      background .22s ease,
      color .22s ease,
      transform .22s ease;

  }


  /* Icon */

  .left-side .menu
  .list-group-item a i {

    display:
      block;

    margin:
      0 0 5px !important;

    line-height:
      1;

    font-size:
      21px;

    transform:
      none;

    transition:
      color .22s ease,
      transform .22s ease;

  }


  /* Label */

  .left-side .menu
  .list-group-item a span {

    display:
      block !important;

    width:
      100%;

    margin:
      0 !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    transform:
      none !important;

    white-space:
      nowrap;

    line-height:
      1.15;

    font-size:
      15px;

    font-weight:
      400;

    text-align:
      center;

  }


  /* Hover */

  .left-side .menu
  .list-group-item a:hover {

    background:
      rgba(235, 176, 32, .055);

  }


  .left-side .menu
  .list-group-item a:hover i {

    color:
      #ebb020;

    transform:
      translateY(-2px);

  }


  /* Active page */

  .left-side .menu
  .list-group-item a.active {

    background:
      rgba(235, 176, 32, .075);

  }


  .left-side .menu
  .list-group-item a.active::before {

    content:
      "";

    position:
      absolute;

    left:
      0;

    top:
      12px;

    bottom:
      12px;

    width:
      2px;

    border-radius:
      0 3px 3px 0;

    background:
      #ebb020;

  }


  .left-side .menu
  .list-group-item a.active i {

    color:
      #ebb020;

    transform:
      scale(1.08);

  }


  .left-side .menu
  .list-group-item a.active span {

    color:
      #fff;

    font-weight:
      700 !important;

  }

}

/*------------------------- OVERLAY MENU -------------------------*/
.menu-toggler {
  display: none;
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.menu .list-group-item {
  border: none;

}


.menu li a {
  padding: 5px 0;
}

.menu li a i {
  font-size: 2.2rem;
  margin-bottom: 4px;
}

.menu li a:hover i,
.menu li a.active i {
  transform: translateY(-20%);
}

.menu a:hover span,
.menu a.active span {
  opacity: 1;
  visibility: visible;
  transform: translateY(-20%);
}

.menu a.active i {
  transform: scale(1.15);
  color: #ebb020;
}

.menu a:hover span,
.menu a.active span {
  opacity: 1;
  visibility: visible;
  transform: translateY(-20%);
}

header,
.right-side {
  width: 80px;
  border-radius: 1.25rem;
  position: fixed;
  z-index: 1030;
  top: 10%;
  height: 80%;
}

header .navbar-brand {
  display: block;
  margin-right: 0;
  text-align: center;
}

header .navbar-brand span {
  display: block;
  text-align: center;
  width: 100%;
  font-weight: 700;
  font-size: 15px;
  margin-top: -1rem;
}

header .navbar-brand b {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 4rem;
}

/* ========================================
   RIGHT SIDEBAR LAYOUT
======================================== */

.right-side {
  right: 5%;
  text-align: center;
}


/* ========================================
   DATE
======================================== */

#date {
  margin-top: 15px;

  font-size: 18px;
  font-weight: 600;
}

#date span {
  display: block;
  font-size: 17px;
}

#date b {
  font-size: 27px;
  font-weight: 700;
}


/* ========================================
   SOCIAL ICONS
   Positioned directly below the date
======================================== */

.right-side .social-box {
  position: absolute;

  top: 145px;
  left: 50%;

  width: 24px;

  transform: translateX(-50%);
}


/* Social icon spacing */

.right-side .social {
  display: flex !important;

  flex-direction: column;
  align-items: center;

  gap: 18px;
}


.right-side .social a {
  display: flex !important;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
}


.right-side .social i {
  display: block;

  margin: 0 !important;

  text-align: center;
}


/* Old label completely removed */

.follow-label {
  display: none !important;
}


/* ========================================
   PREVIOUS / NEXT BUTTONS
   Move upward to leave room for robot
======================================== */

.right-side .next-prev-page {
  position: absolute;

  right: 50%;
  bottom: 90px;

  transform: translateX(50%);
}


/* ========================================
   CHATBOT
   Robot now sits BELOW arrow buttons
======================================== */

.portfolio-chatbot {
  position: absolute;

  left: 50%;
  bottom: 10px;

  transform: translateX(-50%);

  z-index: 1100;
}

.follow-label {
  padding-right: 5rem;
  position: absolute;
  bottom: 85%;
  right: 0;
  line-height: 1.5rem;
  height: 1.5rem;
  white-space: nowrap;
  transform-origin: 100% 0;
  text-align: right;
  transform: rotate(90deg);
}

.follow-label::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 60px;
  height: 2px;
}

.social i {
  display: block;
  margin-bottom: 1rem;
  text-align: center;
}

.social img {
  display: block;
  margin-bottom: 1rem;
  width: 24px !important;
  border-radius: 0 !important;
}

/* ========================================
   PORTFOLIO ROBOT CHATBOT
======================================== */


/* Remove old vertical Get In Touch label
   in case any old HTML remains */
.follow-label {
  display: none !important;
}



/* ========================================
   ROBOT BUTTON
======================================== */

.chatbot-robot-button {
  position: relative;

  width: 52px;
  height: 62px;

  padding: 0;

  border: none;
  background: transparent;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  animation:
    chatbotRobotFloat 3s ease-in-out infinite;

  transition:
    transform 0.3s ease;
}


.chatbot-robot-button:hover {
  transform: scale(1.08);
}


/* Robot wrapper */

.robot-icon {
  position: relative;

  display: block;

  width: 44px;
  height: 52px;
}


/* ========================================
   ROBOT ANTENNA
======================================== */

.robot-antenna {
  position: absolute;

  width: 2px;
  height: 8px;

  background: #ebb020;

  left: 50%;
  top: 0;

  transform:
    translateX(-50%);
}


.robot-antenna-dot {
  position: absolute;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #ebb020;

  left: 50%;
  top: -4px;

  transform:
    translateX(-50%);

  box-shadow:
    0 0 7px rgba(235, 176, 32, 0.8),
    0 0 14px rgba(235, 176, 32, 0.35);

  animation:
    chatbotAntennaPulse 1.8s ease-in-out infinite;
}


/* ========================================
   ROBOT HEAD
======================================== */

.robot-head {
  position: absolute;

  width: 40px;
  height: 29px;

  left: 2px;
  top: 8px;

  border:
    2px solid #ebb020;

  border-radius:
    10px;

  background:
    #292a2e;

  box-shadow:
    0 0 10px rgba(235, 176, 32, 0.15);
}


/* Eyes */

.robot-eye {
  position: absolute;

  top: 8px;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    #ebb020;

  box-shadow:
    0 0 5px rgba(235, 176, 32, 0.8);

  animation:
    chatbotRobotBlink 4s infinite;
}


.robot-eye-left {
  left: 8px;
}


.robot-eye-right {
  right: 8px;
}


/* Mouth */

.robot-mouth {
  position: absolute;

  width: 13px;
  height: 2px;

  border-radius: 5px;

  background:
    #cbccce;

  left: 50%;
  bottom: 6px;

  transform:
    translateX(-50%);
}


/* ========================================
   ROBOT BODY
======================================== */

.robot-body {
  position: absolute;

  width: 30px;
  height: 17px;

  left: 7px;
  top: 38px;

  border:
    2px solid #ebb020;

  border-radius:
    5px 5px 9px 9px;

  background:
    #292a2e;
}


.robot-body-light {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #ebb020;

  left: 50%;
  top: 4px;

  transform:
    translateX(-50%);

  box-shadow:
    0 0 7px rgba(235, 176, 32, 0.7);
}


/* Online indicator */

.chatbot-online-dot {
  position: absolute;

  width: 8px;
  height: 8px;

  right: 1px;
  bottom: 5px;

  background:
    #43d17a;

  border-radius: 50%;

  border:
    2px solid #343539;

  box-shadow:
    0 0 7px rgba(67, 209, 122, 0.5);
}


/* ========================================
   CHAT PANEL
======================================== */

.chatbot-panel {
  position: absolute;

  width: 340px;
  height: 430px;

  right: 57px;

  /* Open upward from robot */
  bottom: -5px;

  display: flex;
  flex-direction: column;

  background: rgba(31, 32, 35, 0.97);

  border: 1px solid rgba(235, 176, 32, 0.28);

  border-radius: 18px;

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(235, 176, 32, 0.05);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  overflow: hidden;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(15px) scale(0.96);

  transform-origin: bottom right;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;

  z-index: 2000;
}


.chatbot-panel.show {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0) scale(1);
}


/* ========================================
   CHAT HEADER
======================================== */

.chatbot-header {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    14px 16px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.07);

  background:
    rgba(52, 53, 57, 0.85);
}


.chatbot-header-profile {
  display: flex;
  align-items: center;

  gap: 11px;

  text-align: left;
}


.chatbot-mini-robot {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;

  border-radius: 12px;

  border:
    1px solid rgba(235, 176, 32, 0.4);

  background:
    rgba(235, 176, 32, 0.07);
}


.chatbot-header-profile strong {
  display: block;

  color: #fff;

  font-size: 17px;

  line-height: 1.4;
}


.chatbot-header-profile span {
  display: flex;
  align-items: center;

  gap: 5px;

  margin-top: 2px;

  color: #aeb0b4;

  font-size: 14px;
}


.chat-online-indicator {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    #43d17a;
}


.chatbot-close {
  border: none;
  background: transparent;

  color: #cbccce;

  font-size: 31px;
  font-weight: 300;

  cursor: pointer;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.chatbot-close:hover {
  color: #ebb020;

  transform:
    rotate(90deg);
}


/* ========================================
   CHAT MESSAGES
======================================== */

.chatbot-messages {
  flex: 1;

  padding:
    16px;

  overflow-y: auto;

  scrollbar-width:
    thin;

  scrollbar-color:
    #ebb020 transparent;
}


.chat-message {
  display: flex;

  margin-bottom:
    13px;

  gap: 8px;
}


.chat-message-avatar {
  flex: 0 0 28px;

  width: 28px;
  height: 28px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 21px;

  border-radius: 8px;

  background:
    rgba(235, 176, 32, 0.08);

  border:
    1px solid rgba(235, 176, 32, 0.25);
}


.chat-message-bubble {
  max-width: 240px;

  padding:
    10px 12px;

  border-radius:
    5px 14px 14px 14px;

  background:
    #343539;

  color:
    #e2e2e3;

  font-size:
    15px;

  line-height:
    1.55;

  text-align:
    left;
}


/* User message */

.user-message {
  justify-content:
    flex-end;
}


.user-message .chat-message-bubble {

  background:
    rgba(235, 176, 32, 0.13);

  border:
    1px solid rgba(235, 176, 32, 0.25);

  color:
    #fff;

  border-radius:
    14px 5px 14px 14px;
}


/* ========================================
   QUICK QUESTIONS
======================================== */

.chatbot-quick-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin:
    5px 0 15px 36px;
}


.chatbot-quick-btn {
  border:
    1px solid rgba(235, 176, 32, 0.45);

  background:
    transparent;

  color:
    #ebb020;

  border-radius:
    14px;

  padding:
    5px 10px;

  font-size:
    13px;

  cursor:
    pointer;

  transition:
    0.2s ease;
}


.chatbot-quick-btn:hover {
  background:
    rgba(235, 176, 32, 0.12);
}


/* ========================================
   CHAT INPUT
======================================== */

.chatbot-input-area {
  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    11px;

  border-top:
    1px solid rgba(255, 255, 255, 0.07);

  background:
    rgba(42, 43, 47, 0.95);
}


.chatbot-input-area input {
  flex: 1;

  height: 38px;

  padding:
    0 13px !important;

  border:
    1px solid rgba(255, 255, 255, 0.09) !important;

  border-radius:
    18px !important;

  background:
    rgba(20, 21, 23, 0.65) !important;

  color:
    #fff !important;

  font-size:
    15px;

  outline:
    none;
}


.chatbot-input-area input:focus {
  border-color:
    rgba(235, 176, 32, 0.55) !important;
}


.chatbot-send {
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  border:
    1px solid #ebb020;

  border-radius:
    50%;

  background:
    transparent;

  color:
    #ebb020;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor:
    pointer;

  transition:
    0.25s ease;
}


.chatbot-send:hover {
  background:
    #ebb020;

  color:
    #222;
}


/* ========================================
   ROBOT ANIMATIONS
======================================== */

@keyframes chatbotRobotFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-5px);
  }

}


@keyframes chatbotRobotBlink {

  0%,
  45%,
  55%,
  100% {

    transform:
      scaleY(1);

  }

  50% {

    transform:
      scaleY(0.15);

  }

}


@keyframes chatbotAntennaPulse {

  0%,
  100% {

    opacity: 0.6;

  }

  50% {

    opacity: 1;

    box-shadow:
      0 0 12px rgba(235, 176, 32, 1),

      0 0 20px rgba(235, 176, 32, 0.4);

  }

}


/*------------------------- LEFT SIDE -------------------------*/
#main {
  left: calc(3% + 330px);
}

.left-side {
  width: 80px;
  border-radius: 1.25rem;
  left: 5%;
  position: fixed;
  height: 80%;
  top: 10%;
  z-index: 10;
  text-align: center;
  padding-top: 16px;

}

.menu-content-align {
  margin-bottom: 20px;
}

.left-side img {
  width: 60px;
  height: auto;
  border-radius: 50%;
}

.left-side h1 {
  font-size: 15px;
  padding: 5px 0;
}

.left-side .menu {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.left-side .menu .list-group-item {
  width: 10px;
  position: absolute;
}

.left-side .menu-align {
  position: relative;
}

.menu-footer {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}

/*------------------------- Next & Prev Page -------------------------*/
.next-prev-page {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 1031;
}

.next-prev-page button {
  display: block;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 12px;
  text-align: center;
  position: relative;
}

.next-prev-page button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*------------------------- Hero -------------------------*/
.hero {
  position: relative;
  z-index: 1;
  overflow: none;
}

.hero .hero-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.hero-content {
  max-width: 450px;
  line-height: 1.618;
}

.hero .mCSB_container {
  overflow: initial;
}

.hero-image img {
  display: inline-block;
  width: 250px;
  height: auto;
  border-radius: 50%;
}

.hero-footer {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: auto;
  text-align: center;
  transform: translateX(-50%);
}

.hero-footer .primary-button {
  border-radius: 20px;
  display: inline-block;
  font-size: 19px;
  padding: 10px 30px;
}

/*------------------------- About -------------------------*/
.about-img {
  position: relative;
}

.about-img img {
  width: 90%;
  border-radius: 32px 32px 0;
  z-index: 2;
  position: relative;
  top: 16px;
}

.about-text {
  font-size: 17px;
}

.about-header {
  font-size: 22px;
}

.border-img {
  width: 75%;
  height: 100%;
  position: absolute;
  top: 0;
  border-radius: 32px 32px 0;
  right: 1rem;
}

.personal-info li {
  margin-bottom: 16px;
}

.count-up {
  margin-top: 58px;
  position: relative;
}

.count-up::before,
.count-up::after {
  content: "";
  width: 100%;
  height: 1px;
  margin: auto;
  position: absolute;
  left: 0;
}

.count-icon {
  font-size: 29px;
  margin-bottom: 16px;
}

.count-icon img {
  width: 45px;
}

/*------------------------- Skills -------------------------*/
#skills {
  margin-top: 28px;
}

.skills .skillbar {
  display: block;
  border-radius: 8px;
  height: 10px;
  margin-bottom: 8px;
  width: 100%;
}

.skills .skill-box:not(:last-child) .skillbar {
  margin-bottom: 40px;
}

.skills .skillbar-title {
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 4px;
}

.skills .skillbar-bar {
  border-radius: 6px;
  height: 8px;
  padding: 0;
  width: 0;
}

.skill-bar-percent {
  font-size: 16px;
  margin-left: auto;
}

.chart-box .chart {
  position: relative;
}

.chart-box .percent {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-20px) translateY(-20px);
  font-size: 27px;
}

.chart-box .percent::after {
  content: "%";
  font-size: 27px;
}

.knowledge-item {
  padding-left: 0;
  margin-top: 10px;
}

.knowledge-item li {
  margin-bottom: 24px;
  list-style: none;
}

.knowledge-item li:last-child {
  margin-bottom: 0;
}

.knowledge-item li::before {
  content: "\25C9";
  margin-right: 8px;
  font-size: 19px;
}

.skill-text {
  margin-bottom: 5px;
  display: flex;
}

/*------------------------- Language Skill -------------------------*/
.language-skill:not(:last-child) {
  margin-bottom: 30px;
}

.language-skill h4 {
  font-size: 19px;
}

.language-skill h6 span {
  font-size: 17px;
  font-weight: normal;
}

.language-skill ul {
  display: flex;
}

.language-skill ul li {
  margin-bottom: 0;
  flex: auto;
  margin-right: auto !important;
}

.language-skill ul li i {
  font-size: 15px;
}

/*------------------------- Services -------------------------*/
.services-box {
  margin: 16px 0;
}

.services .box {
  padding: 1rem 0;
  text-align: left;
  position: relative;
}

.boxes [class^="col-"] {
  position: relative;
}

.boxes [class^="col-"]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
}

.boxes [class^="col-"]:nth-last-child(-n+2)::after {
  display: none;
}

.services .services-icon {
  font-size: 39px;
  display: inline-block;
}

.services .services-box img {
  width: 45px;
  margin-bottom: 12px;
}

/*------------------------- RESUME -------------------------*/
.resume h3 i {
  padding-right: 0.75rem;
}

.resume .timeline-box {
  padding: 1rem 0;
}

.timeline-content p {
  margin-bottom: 0 !important;
}

.resume .timeline-year {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.timeline-title {
  margin-bottom: 4px;
}

.timeline-degree {
  font-size: 17px;
  margin-bottom: 2px;
}

.timeline-honor {
  font-size: 15px;
  letter-spacing: 1px;
  color: #d4af37;
  margin-bottom: 6px;
  font-weight: 700;

}

/*------------------------- Testimonial -------------------------*/
.testimonial-item {
  display: flex;
  justify-content: center;
}

.testimonial .testimonial-image img {
  width: 60px;
  border-radius: 50%;
}

.testimonial .testimonial-box {
  cursor: grab;
}

.testimonial .testimonial-comment {
  font-size: 25px;
  font-weight: 300;
  font-style: italic;
  text-align: center;
  margin-bottom: 24px;
}

.testimonial-info {
  margin-left: 12px;
  text-align: left;
}

.testimonial .owl-dots {
  text-align: center;
  margin-top: 24px;
}

.testimonial .owl-dot span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border-radius: 50%;
  transition: all 0.5s ease;
}

.testimonial .owl-dot.active span {
  transform: scale(1.5);
}

/*------------------------- Portfolio -------------------------*/
.portfolio-item {
  margin-bottom: 30px;
}

.portfolio .portfolio-filter {
  margin-bottom: 32px;
}

.portfolio .portfolio-image {
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
}

.portfolio .portfolio-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-15px) translateY(-15px);
  line-height: 44px;
  font-size: 33px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out;
  z-index: 1000000;
}

.portfolio .portfolio-image:hover .portfolio-icon {
  opacity: 1;
  visibility: visible;
}

.portfolio .portfolio-image::before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.portfolio .portfolio-image:hover::before {
  opacity: 1;
  visibility: visible;
}

.portfolio .portfolio-image:hover img {
  transform: scale(1.05);
}

.portfolio .portfolio-image img {
  width: 100%;
  transition: .5s ease-in-out;
}

.portfolio .portfolio-content {
  margin-top: 16px;
}

.portfolio .portfolio-content h6 {
  margin-bottom: 0;
  font-weight: 300;
}

.portfolio .portfolio-content p {
  margin-bottom: 0;
}

.portfolio-filter .list-inline-item:not(:last-child) {
  margin-right: 1rem;
}

/*------------------------- Blog -------------------------*/
.blog .blog-image {
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
}

.blog-icon {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.blog-icon i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-20px) translateY(-20px);
  line-height: 44px;
  font-size: 40px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out;
}

.blog-box:hover .blog-icon {
  opacity: 1;
  visibility: visible;
}

.blog-box:hover .blog-icon i {
  opacity: 1;
  visibility: visible;
}

.blog-box:hover .blog-image img {
  transform: scale(1.05);
}

.blog img {
  width: 100%;
  transition: .5s ease-in-out;
}

.blog-box {
  margin: 0.75rem 0;
  display: block;
}

.blog-dates {
  margin-bottom: 8px;
}

.blog-dates span {
  font-size: 18px;
  font-weight: 400;
  margin-top: 1rem;
  display: inline-block;
}

/*--------------------------- Contact ---------------------------*/
.contact-box {
  margin-top: 40px;
}

.contact-form {
  margin-top: -12px;
}

.form-group {
  margin-bottom: 24px;
}

.form-control {
  border-radius: 0;
  height: 32px;
  border: none;
  font-size: 17px;
  font-weight: 300;
  padding-left: 0;
  padding-bottom: 16px;
}

.form-control:focus {
  border-radius: 0;
  border: none;
  box-shadow: none;
  outline: 0;
}

.info-box {
  margin-top: 24px;
  padding-bottom: 24px;
  position: relative;
}

.item-icon {
  float: left;
}

.item-icon i {
  font-size: 39px;
  position: relative;
}

.item-icon img {
  width: 48px;
}

.info-text {
  margin-left: 3.75rem;
}

.info-text h5 {
  font-size: 19px;
  margin-bottom: 0;
}

textarea.form-control {
  min-height: 128px;
}

#my-map {
  width: 100%;
  height: 350px;
  border-radius: 1rem;
}

textarea:-moz-placeholder {
  bottom: 0;
  position: relative;
  line-height: 1.5em;
}

/*------------------------- Portfolio Single -------------------------*/
.ajax-page-content {
  height: 100%;
  overflow: auto;
}

.single-portfolio-wrapper {
  padding: 2rem 0;
}

.ajax-page-nav {
  text-align: right;
}

.ajax-page-nav div.nav-item {
  position: relative;
  display: inline-block;
  margin-right: 8px;
}

.ajax-page-nav div.nav-item a {
  display: inline-block;
  height: 40px;
  width: 40px;
  text-align: center;
  border-radius: 4px;
  transition: .3s all ease;
}

.ajax-page-nav div.nav-item a i {
  line-height: 40px;
  font-size: 25px;
}

.closed {
  display: none;
}

.single-portfolio-wrapper {
  position: relative;
}

.single-portfolio-wrapper .portfolio-page-title {
  margin: 32px 0 16px;
}

.single-portfolio-wrapper .portfolio-page-title h1 {
  margin-bottom: 0;
}

.single-portfolio-wrapper .entry-image img {
  width: 100%;
  border-radius: 8px;
}

.single-portfolio-wrapper .entry-content h2 {
  margin: 30px 0 16px;
}

.portfolio-page-carousel {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
}

.portfolio-page-carousel .owl-nav {
  position: absolute;
  top: calc(50% - 32px);
  width: 100%;
  text-align: center;
}

.portfolio-page-carousel .owl-nav [class*="owl-"]::before {
  display: block;
}

.portfolio-page-carousel .owl-nav [class*="owl-"] {
  display: inline-block;
  cursor: pointer;
  transition: all .3s ease-in-out;
  position: absolute;
  width: 35px;
  height: 35px;
}

.portfolio-page-carousel .owl-nav [class*="owl-"] span {
  font-size: 33px;
  line-height: 30px;
}

.portfolio-page-carousel .owl-nav .owl-prev {
  margin-left: -32px;
  left: 0;
  border-radius: 0 4px 4px 0;
}

.portfolio-page-carousel .owl-nav .owl-next {
  margin-right: -32px;
  right: 0;
  border-radius: 4px 0 0 4px;
}

.portfolio-page-carousel:hover .owl-nav .owl-prev {
  margin-left: 0;
}

.portfolio-page-carousel:hover .owl-nav .owl-next {
  margin-right: 0;
}

.portfolio-page-carousel .owl-dots {
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 8px 8px;
}

.portfolio-page-carousel .owl-dot span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border-radius: 50%;
  transition: all 0.5s ease;
}

.aside-item-portfolio ul li {
  font-size: 17px;
}

.aside-item-portfolio ul li:not(:last-child) {
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.aside-item-portfolio ul li a {
  margin-right: 4px;
}

.single-portfolio .aside-title {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.aside-title h6 {
  font-weight: 400;
  font-size: 27px;
  margin-bottom: 16px;
}

.aside-title h6::after {
  content: " ";
  display: block;
  height: 1px;
  margin-top: 8px;
}

/*------------------------- Blog Single -------------------------*/
.blog-page-header {
  background: url("../img/blog-header-img.html") no-repeat center;
  margin-top: 60px;
}

.blog-single .header-title {
  max-width: 600px;
}

.blog-single .entry-meta ul {
  margin-bottom: 0;
}

.blog-single .entry-meta ul li:not(:last-child) {
  margin-right: 16px;
}

.blog-single .entry-meta ul li i {
  margin-right: 6px;
}

.blog-single .entry-image img {
  width: 100%;
  border-radius: 8px;
}

.blog-single .entry-content {
  padding: 24px;
  padding-bottom: 0;
}

.blog-single .quotation {
  padding: 12px 24px;
  margin: 24px 0;
}

.blog-single .entry-content img {
  width: 100%;
  border-radius: 8px;
}

.blog-single .comments {
  padding-bottom: 64px;
}

.blog-single .comments ul {
  margin-left: 40px;
}

.blog-single .comments-list li {
  margin-top: 32px;
}

.blog-single .comment-wrap {
  padding: 24px;
  position: relative;
  border-radius: 8px;
}

.blog-single .comment-content {
  position: relative;
  padding-left: 32px;
}

.blog-single .comment-author p a {
  font-size: 15px;
  font-style: italic;
}

.blog-single .image-comment {
  position: absolute;
  left: -36px;
  border-radius: 50%;
  padding: 4px;
}

.blog-single .image-comment img {
  width: 65px;
  border-radius: 50%;
}

.blog-single .comment-reply-link {
  position: absolute;
  right: 32px;
  top: 14px;
}

.blog-single .about-description-box {
  list-style: none;
  padding-left: 32px;
  margin: 32px 0;
}

.blog-single .about-description-box li {
  position: relative;
}

.blog-single .blog-box {
  margin-bottom: 32px;
}

.blog-single .search-boxes .form-group {
  border-radius: 8px;
  display: flex;
}

.blog-single .search-boxes input {
  border: none;
  width: 100%;
  padding: 12px 22px;
  font-size: 17px;
  border-radius: 25px;
}

.blog-single .search-boxes input:focus {
  outline: none;
}

.blog-single .search-boxes button.btn {
  border: none;
  position: absolute;
  right: 6px;
  top: 5px;
}

.blog-single .search-boxes button.btn:focus {
  box-shadow: none;
}

.blog-single .aside-box {
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 32px;
}

.blog-single .aside-box ul {
  margin-bottom: 0;
}

.blog-single .aside-title {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.blog-single .aside-title h6 {
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  font-weight: 600;
}

.blog-single .aside-item ul li {
  display: flex;
  align-items: center;
  padding: 0 16px 12px 0;
  font-size: 17px;
}

.blog-single .aside-item ul li:not(:last-child) {
  margin-bottom: 12px;
}

.blog-single .aside-item ul li span {
  margin-left: auto;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  text-align: center;
}

.blog-single .post-list {
  display: flex;
}

.blog-single .post-list:not(:last-child) {
  margin-bottom: 24px;
  padding-bottom: 16px;
}

.blog-single .post-image {
  width: 125px;
  margin-right: 16px;
}

.blog-single .post-image img {
  width: 100%;
  border-radius: 8px;
}

.blog-single .post-title {
  font-size: 18px;
}

.blog-single .blog-date {
  font-size: 16px;
}

.blog-single .image-gallery {
  text-align: center;
}

.blog-single .image-gallery li {
  width: 28%;
  margin-bottom: 16px;
}

.blog-single .image-gallery img {
  width: 100%;
  border-radius: 8px;
}

.blog-single .tag-box {
  margin-left: 24px;
}

.blog-single .tagcloud a {
  padding: 4px 16px;
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 12px;
  border-radius: 30px;
}

.contact-01 .info-box {
  margin-bottom: 3rem;
}

.contact-01 .item-icon {
  float: left;
  font-size: 43px;
}

.contact-01 .info-text {
  margin-left: 3.75rem;
}

.contact-01 .info-text small {
  font-weight: 300;
}

.contact-01 .form-control {
  font-weight: 300;
  border-radius: 8px;
  height: 36px;
  padding: 4px 10px;
}

.blog-single .aside-title h6::after {
  width: 150%;
}

.blog-single .about-description-box p::before {
  content: "\f26e";
  font-family: bootstrap-icons, sans-serif;
  font-size: 12px;
  position: absolute;
  top: 2px;
  left: -30px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
}

.blog-single .comments h3::after,
.blog-single .contact-form h3::after {
  content: " ";
  display: block;
  height: 1px;
  margin-top: 8px;
  width: 80%;
}

.mobile-blog-nav.blog-next-prev-page {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
}

.mobile-blog-nav.blog-next-prev-page a {
  background-color: #e5e7ed;
  display: block;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  position: relative;
}

.mobile-blog-nav.blog-next-prev-page a i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



/* .blog-single-page .right-side .social-box{
  top: 57%;
} */
/* .blog-single-page .left-side{
  width: 80px !important;
}
.blog-single-page .left-side{
  width: 80px !important;
}
.blog-single-page .left-side img {
  width: 60px !important;
} */

/*------------------------- Background Animation -------------------------*/
/* .area{
  width: 100%;
  height:100vh;
  z-index: -1;
} */
.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;

  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.01);

  border: 2px solid #ebb020;
  box-shadow:
    0 0 8px rgba(255, 193, 7, 0.5),
    0 0 15px rgba(255, 193, 7, 0.35),
    0 0 25px rgba(255, 193, 7, 0.15),
    inset 0 0 10px rgba(255, 215, 0, 0.2);

  animation: animate 25s linear infinite;

  bottom: -150px;

  transform: rotate(45deg);
}


.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0.3;
    border-radius: 50%;
  }
}


/*------------------------- Mouse Magic Cursor -------------------------*/
.m-magic-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
  will-change: transform;
}

.mmc-inner {
  margin-left: -3px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  z-index: 1031;
  background-color: #ff451b;
  -webkit-transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
  transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
}

.mmc-inner.mmc-hover {
  margin-left: -15px;
  margin-top: -15px;

  width: 30px;
  height: 30px;

  background-color: #ebb020;
  opacity: 0.25;
}

.mmc-outer {
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  border: 2px solid #ff451b;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1031;
  opacity: .5;
  -webkit-transition: all .08s ease-out;
  transition: all .08s ease-out;
}

.mmc-outer.mmc-hover {
  opacity: 0;
}

.cursor-text {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1032;
  pointer-events: none;
  visibility: hidden;
  opacity: 1;

  color: #ebb020;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;

  transform: translate3d(0, 0, 0);
  transition: opacity 0.2s ease;
}

/*------------------------- ColorPallet -------------------------*/
.color-switcher .color-pallet {
  background-color: white;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
  top: 25px;
  z-index: 1100;
  position: fixed;
  transition: all 0.3s ease;
  right: 75px;
  width: 189px;
  border-radius: 0.75rem;
  opacity: 0;
  visibility: hidden;
}

.color-switcher .color-pallet.show {
  opacity: 1;
  visibility: visible;
}

.color-switcher .pallet-button {
  background-color: white;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
  top: 25px;
  z-index: 1000;
  position: fixed;
  transition: all 0.3s ease;
  display: block;
  height: 40px;
  right: 25px;
  width: 40px;
  border-radius: 0.75rem;
}

.color-switcher .pallet-button a {
  width: 40px;
  height: 40px;
  display: block;
  text-align: center;
}

.color-switcher .pallet-button i {
  color: #3c3c3c;
  font-size: 23px;
  line-height: 40px;
}

.color-switcher ul.pattern {
  list-style: none outside none;
  margin: 0 0 0;
  overflow: hidden;
  padding: 0;
}

.color-switcher ul.pattern li {
  float: left;
}

.color-switcher ul.pattern li a {
  cursor: pointer;
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 28px 18px 0 21px;
  transform: rotate(-135deg);
  margin: 15px 0 15px 25px;
}

.color-switcher ul.pattern .color1 {
  background: #1ab394;
}

.color-switcher ul.pattern .color2 {
  background: #ebbf0c;
}

.color-switcher ul.pattern .color3 {
  background: #dba423;
}

.color-switcher ul.pattern .color4 {
  background: #0cc0de;
}

.color-switcher ul.pattern .color5 {
  background: #028ac9;
}

.color-switcher ul.pattern .color6 {
  background: #d78fd6;
}

.color-switcher ul.pattern .color7 {
  background: #ff645e;
}

.color-switcher ul.pattern .color8 {
  background: #ff4274;
}

.color-switcher ul.pattern .color9 {
  background: #f13a3a;
}

/*------------------------- COLOR SCHEME -------------------------*/
.color-scheme {
  background-color: #f1f3f6;
  padding: 8px 0 16px;
}

.color-scheme li {
  width: 40%;
  margin: 0 !important;
}

.color-scheme li a {
  display: block;
  padding: 8px 0;
  background-color: #fff;
  border-radius: 0.75rem;
  color: #222;
  transition: all 0.5s ease;
  font-size: 17px;
}

.color-scheme li a.light-scheme:hover,
.color-scheme li a.light-scheme.active {
  background-color: #0fcae8;
  color: #fff;
}

.color-scheme li a.dark-scheme:hover,
.color-scheme li a.dark-scheme.active {
  background-color: #2c2d30;
  color: #fff;
}

.theme-skin-title {
  background-color: #f1f3f6;
  color: #818181;
  margin: 0;
  padding: 15px 0 0;
  border-radius: 0.75rem 0.75rem 0 0;
}

.theme-skin {
  background-color: #f1f3f6;
  margin: 0;
  padding: 8px 0 16px;
}

.theme-skin li {
  width: 40%;
  margin: 0 !important;
}

.theme-skin li:last-child {
  background-color: #f1f3f6;
  border-radius: 0.75rem;
  box-shadow: 3px 3px 3px #dadada, -3px -3px 3px #fafafa;
  padding: 1px;
}

.theme-skin li:last-child a:hover,
.theme-skin li:last-child a.active {
  border: none;
  box-shadow: inset 3px 3px 3px #dadada, inset -3px -3px 3px #fafafa;
}

.theme-skin li a {
  display: block;
  padding: 8px 0;
  border-radius: 0.75rem;
  color: #222;
  transition: all 0.5s ease;
  font-size: 17px;
}

.theme-skin li a.flat-skin {
  background-color: #fff;
  margin-right: 3px;
}

.scroll-button {
  display: none;
  background-color: white;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
  bottom: 15px;
  z-index: 1000;
  position: fixed;
  transition: all 0.3s ease;
  height: 100px;
  right: 15px;
  width: 40px;
  border-radius: 0.75rem;
}

.scroll-button a {
  width: 40px;
  height: 50px;
  line-height: 55px;
  display: inline-block;
  transition: all 0.3s ease;
  display: block;
}

.scroll-button a i {
  font-size: 27px;
}

/*------------------------- Media -------------------------*/
@media (min-width: 1440px) {
  
  .left-side {
    padding-top: 40px;
  }
}

@media (max-width: 1230px) {
  .extend-icon {
    display: none;
  }
}

@media (max-width: 991px) {
  .color-switcher .pallet-button {
    right: 20px;
    top: 65px;
  }

  .mCSB_scrollTools {
    top: 3%;
    bottom: 11%;
    right: 10px;
  }

  #main>section {
    padding: 2rem 0 !important;
    border-radius: 16px !important;
  }

  .next-prev-page button {
    width: 40px;
    height: 40px;
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border: none !important;
  }

  #main>section:not(:first-child):not(:last-child) {
    width: 100%;
  }

  .menu-align {
    left: 50%;
    transform: translateX(-50%);
    gap: 0.75rem;
  }

  .left-side-image {
    width: inherit;
    height: 63%;
  }

  /* .menu a.active {
    color: #c16926;
 } */
  .menu li a i {
    transform: translateY(-15%);
    font-size: 2.2rem;
    margin-bottom: 1px;
  }

  .menu a span {
    opacity: 1;
    visibility: visible;
    transform: translateY(-25%);
  }

  .menu a.active span {
    font-weight: 700 !important;
    letter-spacing: 1px;
    transform: translateY(-20%) scale(1.15) !important;
  }

  .menu a.active i {
    transform: translateY(-20%) scale(1.25) !important;
  }

  .services-boxes .row [class^="col-"]::after {
    display: none;
  }

  .services-boxes .row [class^="col-"]::before {
    display: initial !important;
  }

  .blog-single .entry-content {
    padding: 12px 0 !important;
  }

  .left-side {
    left: 200%;
    width: auto !important;
    z-index: 102;
    right: 15px;
    height: auto;
    bottom: 15px;
    top: 15px;
    overflow-y: hidden;
    border-radius: 16px;
  }

  .hero .hero-center {
    top: 3%;
    transform: translateY(0);
  }

  .about-img {
    margin-bottom: 2rem;
  }

  #main>section {
    padding-right: 0.75rem;
    border-radius: 16px;
  }

  .vertical-line::after {
    display: none;
  }

  .next-prev-page {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 100;
  }

  .nav-btn {
    position: fixed;
    top: 10px;
    right: 5px;
    display: block;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
  }

  .nav-btn i {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 4rem;
    transform: translate(-50%, -50%);
  }

  .menu-toggle {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    line-height: 46px;
    text-align: center;
    right: 20px;
    font-size: 22px;
    top: 20px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 900;
    border-radius: 12px;
  }

  .menu-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 50%;
    border-radius: 5px;
    opacity: 1;
    right: 24%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

  .menu-toggle span:nth-child(1) {
    top: 13px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .menu-toggle span:nth-child(2) {
    top: 19px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .menu-toggle span:nth-child(3) {
    top: 25px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .menu-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
  }

  .menu-toggle.menu-open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 12px;
    left: 13px;
  }

  .menu-toggle.menu-open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  .menu-toggle.menu-open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 26px;
    left: 13px;
  }

  .left-side.hide h1 {
    font-size: 3.75rem;
    padding: 15px 0 0 0;
    margin-bottom: 0.15rem;
    letter-spacing: 2px;
  }

  #date {
    margin-top: 0;
  }

  #date :first-child {
    font-size: 2.5rem;
    position: relative;
    top: 1px;
    display: inline-block;
  }

  .mobile-menu {
    margin: 25px 0;
  }

  .mobile-menu .list-group-item {
    border: none;
    margin-bottom: 0.25rem
  }

  .mobile-menu .list-group-item a {
    border: none;
  }

  .mobile-menu .list-group-item a.active {
    font-weight: bold;
  }

  #main {
    border-radius: 16px !important;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    width: inherit !important;
    height: inherit !important;
    transform: inherit !important;
    position: inherit;
  }



  @media (max-height: 620px) {
    .hero-image img {
      width: 200px;
    }

    .hero-content h2 {
      font-size: 27px;
    }

    .hero-footer .download-cv {
      margin-bottom: 1rem !important;
    }



    .hero-footer .social {
      margin-bottom: 0.5rem !important;
    }
  }

  @media (max-height: 600px) {
    .left-side {
      overflow-y: auto;
    }

    .left-side .menu-align {
      position: relative !important;
      height: auto !important;
      margin-top: 20px !important;
    }

    .menu-footer {
      position: relative !important;
      transform: inherit !important;
    }
  }

  @media (max-height: 560px) {
    #main>section#hero {
      padding-bottom: 0 !important;
    }

    .hero-footer {
      position: unset !important;
      transform: inherit !important;
      margin-top: 0.5rem;
    }
  }
}

@media (max-width: 767px) {
  .mCSB_scrollTools {
    right: 5px;
  }

  .boxes [class^="col-"]::after {
    display: initial !important;
  }

  .boxes [class^="col-"]:last-child::after {
    display: none !important;
  }
}

@media (max-width: 575px) {

  /* .menu-toggle {
    border-radius: 16px;
 } */
  .blog-single .comments ul {
    margin-left: 30px;
  }

  .blog-single .children {
    margin-left: 0 !important;
  }

  .testimonial .testimonial-comment {
    font-size: 23px;
    font-weight: 400;
    text-align: justify;
    hyphens: auto;
    padding: 0;
  }
}

/*------------------------- Dark -------------------------*/
body.dark-arshia,
.dark-arshia .ajax-page-content {
  background-color: #232324;
  color: #fff;
}

.dark-arshia .left-side,
.dark-arshia #main>section,
.dark-arshia .right-side {
  background-color: #343539;
  color: #fff;
}

.dark-arshia .personal-info li small,
.dark-arshia .services-description,
.dark-arshia .portfolio .portfolio-filter li a,
.dark-arshia .blog-header~p,
.dark-arshia .follow-label,
.dark-arshia .social a,
.dark-arshia .count-icon~p,
.dark-arshia .language-skill h6 span,
.dark-arshia .timeline-content p,
.dark-arshia .aside-item-portfolio ul li,
.dark-arshia .blog-single .entry-meta ul li a,
.dark-arshia .blog-single .comment-author p a,
.dark-arshia .menu li a span,
.dark-arshia .testimonial .testimonial-jub {
  color: #cbccce;
}

.dark-arshia .text-muted {
  color: #cbccce !important;
}

.dark-arshia .portfolio .portfolio-content h6,
.dark-arshia .blog-header,
.dark-arshia .primary-button,
.dark-arshia .primary-button:hover {
  color: #fff;
}

.dark-arshia .mCSB_scrollTools .mCSB_draggerRail {
  background-color: #818181;
}

.dark-arshia .menu a:hover span,
.dark-arshia .menu a.active span {
  color: #fff !important;
}

.dark-arshia input,
.dark-arshia textarea {
  background-color: transparent;
  border-bottom: 1px solid #cbccce;
  color: #fff;
}

.dark-arshia .skills .skillbar {
  background-color: #535455 !important;
}

.dark-arshia .skills .skillbar-bar {
  border: 2px solid #535455 !important;
}

@media (max-width: 991px) {

  .dark-arshia .menu-toggle,
  .dark-arshia .next-prev-page button,
  .dark-arshia .mobile-blog-nav.blog-next-prev-page a {
    background-color: #535455 !important;
  }
}

.dark-arshia .circles li {
  background: rgba(255, 255, 255, 0.01);
}

.dark-arshia .aside-item-portfolio ul li:not(:last-child) {
  border-bottom: 1px solid #535353;
}

.dark-arshia #line-loader:before,
.dark-arshia #line-loader:after {
  background-color: #343539;
}

.dark-arshia .middle-line:before {
  background-color: #fff;
}

.dark-arshia .middle-line:after {
  background-color: #818181;
}

.dark-arshia .contact-01 .form-control {
  background-color: transparent;
  border-bottom: 1px solid #cbccce;
  border-radius: 0;
}


@media (prefers-color-scheme: dark) {

  .theme-skin-title,
  .color-scheme {
    display: none;
  }

  body,
  .ajax-page-content {
    background-color: #232324 !important;
    color: #fff !important;
  }

  .left-side,
  #main>section,
  .right-side {
    background-color: #343539 !important;
    color: #fff !important;
  }

  .personal-info li small,
  .services-description,
  .portfolio .portfolio-filter li a,
  .blog-header~p,
  .follow-label,
  .social a,
  .count-icon~p,
  .language-skill h6 span,
  .timeline-content p,
  .aside-item-portfolio ul li,
  .blog-single .entry-meta ul li a,
  .blog-single .comment-author p a,
  .menu li a span,
  .testimonial .testimonial-jub {
    color: #cbccce !important;
  }

  .text-muted {
    color: #cbccce !important;
  }

  .portfolio .portfolio-content h6,
  .blog-header,
  .primary-button,
  .primary-button:hover {
    color: #fff !important;
  }

  .mCSB_scrollTools .mCSB_draggerRail {
    background-color: #818181 !important;
  }

  .menu a:hover span,
  .menu a.active span {
    color: #fff !important;
  }

  input,
  textarea {
    background-color: transparent !important;
    border-bottom: 1px solid #cbccce !important;
    color: #fff !important;
  }

  .skills .skillbar {
    background-color: #535455 !important;
  }

  .skills .skillbar-bar {
    border: 2px solid #535455 !important;
  }

  .circles li {
    background: rgba(255, 255, 255, 0.01) !important;
  }

  .aside-item-portfolio ul li:not(:last-child) {
    border-bottom: 1px solid #535353 !important;
  }

  #line-loader:before,
  #line-loader:after {
    background-color: #343539 !important;
  }

  .middle-line:before {
    background-color: #fff !important;
  }

  .middle-line:after {
    background-color: #818181 !important;
  }

  .contact-01 .form-control {
    background-color: transparent !important;
    border-bottom: 1px solid #cbccce !important;
    border-radius: 0;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 991px) {

  .menu-toggle,
  .next-prev-page button,
  .mobile-blog-nav.blog-next-prev-page a {
    background-color: #535455 !important;
  }
}

/* Mobile menu final alignment */
@media (max-width: 991px) {

  .left-side {
    width: 100% !important;
    max-width: calc(100vw - 30px);
    padding: 35px 20px 25px !important;
    overflow-y: auto !important;
  }

  .left-side .menu-align {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .left-side .menu {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 12px;
    row-gap: 25px;
    width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 0;
  }

  .left-side .menu .list-group-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .left-side .menu .list-group-item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    min-height: 52px;
    padding: 0 !important;
    text-align: center;
  }

  .left-side .menu .list-group-item a i {
    display: block !important;
    margin: 0 0 7px !important;
    transform: none !important;
    line-height: 1;
  }

  .left-side .menu .list-group-item a span {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: normal;
  }

  .left-side .menu .list-group-item a.active span {
    font-weight: 700 !important;
    transform: none !important;
  }

  .left-side .menu .list-group-item a.active i {
    transform: scale(1.1) !important;
  }

  .menu-footer {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    margin-top: 22px;
  }

  .menu-footer .download-cv {
    margin: 0 0 24px !important;
    padding: 12px 32px !important;
  }

  .menu-footer .social {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }

  .menu-footer .social a,
  .menu-footer .social i {
    margin: 0 !important;
  }
}

/* Desktop sidebar item structure */
@media (min-width: 992px) {
  .left-side {
    overflow: hidden;
  }

  .left-side .menu {
    position: relative;
  }

  .left-side .menu .list-group-item {
    position: absolute;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .left-side .menu .list-group-item a {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 2px !important;
    text-align: center;
  }

  .left-side .menu .list-group-item a i {
    display: block;
    margin: 0 0 6px !important;
  }

  .left-side .menu .list-group-item a span {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    text-align: center;
    white-space: nowrap;
  }

  .left-side .menu .list-group-item a.active span {
    font-weight: 700 !important;
  }
}


/* ========================================
   INTERACTIVE HERO PORTRAIT
======================================== */

.hero-portrait-reveal {
  --reveal-x: 50%;
  --reveal-y: 50%;
  --reveal-radius: 105px;

  position: absolute;

  /* Same general position as old .extend-icon */
  right: -3%;
  top: 55%;
  transform: translateY(-50%);

  width: 470px;
  height: 550px;

  z-index: 10;

  overflow: hidden;

  pointer-events: auto;
  cursor: none;
}

/*
  Both images occupy the EXACT same box.
  This is essential for alignment.
*/
.hero-portrait-base,
.hero-portrait-layer {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  pointer-events: none;
  user-select: none;

  -webkit-user-drag: none;
}

/* Normal image */
.hero-portrait-base {
  z-index: 1;
}

/* Alternate hidden image */
.hero-portrait-layer {
  z-index: 2;

  opacity: 0;

  -webkit-clip-path:
    circle(0px at var(--reveal-x) var(--reveal-y));

  transition: opacity 0.12s ease;
}


/* Reveal alternate image only around cursor */
.hero-portrait-reveal.is-revealing .hero-portrait-layer {

  opacity: 1;

  -webkit-clip-path:
    circle(var(--reveal-radius) at var(--reveal-x) var(--reveal-y));

  clip-path:
    circle(var(--reveal-radius) at var(--reveal-x) var(--reveal-y));
}


/* Yellow scanner circle */
.hero-scan-ring {
  display: none !important;
}


.hero-portrait-reveal.is-revealing .hero-scan-ring {
  opacity: 1;
}


/*
  Do not use hover effect on mobile/tablet.
  Your existing mobile hero image stays unchanged.
*/
@media (max-width: 991px) {

  .hero-portrait-reveal {
    display: none;
  }

}

/* ==========================================================
   FINAL RIGHT SIDEBAR LAYOUT
   KEEP THIS AT THE VERY BOTTOM OF style.css
========================================================== */


/* Sidebar itself */
.right-side {
  right: 5%;
  text-align: center;
}


/* ==========================================================
   DATE
========================================================== */

.right-side #date {
  margin-top: 14px !important;
  font-size: 18px;
  font-weight: 600;
}

.right-side #date span {
  display: block;
  font-size: 17px;
  line-height: 1.5;
}

.right-side #date b {
  font-size: 27px;
  font-weight: 700;
}


/* ==========================================================
   YELLOW DIVIDER LINES
========================================================== */

.right-side .sidebar-line {
  position: absolute;

  left: 50%;

  width: 2px;

  transform: translateX(-50%);

  background: #ebb020;

  border-radius: 10px;

  box-shadow:
    0 0 5px rgba(235, 176, 32, 0.45);

  pointer-events: none;
}


/* Line between DATE and SOCIALS */

.right-side .sidebar-line-top {
  top: 100px;
  height: 30px;
}


/* Line between SOCIALS and ARROWS */

.right-side .sidebar-line-bottom {
  top: 255px;
  bottom: 190px;
}


/* ==========================================================
   SOCIAL ICONS
========================================================== */

.right-side .social-box {
  position: absolute !important;

  top: 132px !important;
  left: 50% !important;

  width: 30px !important;

  transform: translateX(-50%) !important;
}


/* Vertical social layout */

.right-side .social-box .social {
  display: flex !important;

  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 12px !important;
}


/* Each social */

.right-side .social-box .social a {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 30px !important;
  height: 30px !important;

  padding: 0 !important;
  margin: 0 !important;
}


/* Social icons */

.right-side .social-box .social i {
  display: block !important;

  margin: 0 !important;

  line-height: 1 !important;

  text-align: center !important;
}


/* Old Get In Touch text */

.right-side .follow-label {
  display: none !important;
}


/* ==========================================================
   UP / DOWN NAVIGATION
========================================================== */

.right-side .next-prev-page {
  position: absolute !important;

  right: 50% !important;
  bottom: 88px !important;

  transform: translateX(50%) !important;

  z-index: 1031;
}


/* Keep navigation buttons centered */

/* ==========================================================
   UP / DOWN NAVIGATION BUTTONS
   Works for BOTH <button> and <a>
========================================================== */

.right-side .next-prev-page button,
.right-side .next-prev-page a {

  width: 35px;
  height: 35px;

  display: flex !important;

  align-items: center;
  justify-content: center;

  padding: 0 !important;

  background: transparent !important;

  border: 2px solid #ebb020 !important;

  border-radius: 12px;

  color: #ebb020 !important;

  box-shadow: none !important;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;

}

.right-side .next-prev-page button i,
.right-side .next-prev-page a i {

  color: #ebb020 !important;

  font-size: 21px;

  line-height: 1;

  margin: auto !important;

}

.right-side .next-prev-page button:hover,
.right-side .next-prev-page a:hover {

  background: rgba(235, 176, 32, 0.08) !important;

  border-color: #ebb020 !important;

  color: #ebb020 !important;

  box-shadow:
    0 0 10px rgba(235, 176, 32, 0.18);

}


.right-side .next-prev-page button:hover i,
.right-side .next-prev-page a:hover i {

  color: #ebb020 !important;

}


/* ==========================================================
   ROBOT
   BELOW BOTH NAVIGATION BUTTONS
========================================================== */

.right-side .portfolio-chatbot {
  position: absolute !important;

  left: 50% !important;
  bottom: 7px !important;

  transform: translateX(-50%) !important;

  z-index: 1100;
}


/* ==========================================================
   CHAT WINDOW
========================================================== */

.right-side .chatbot-panel {
  right: 57px !important;

  /*
    Negative value moves the opened
    chatbot slightly downward.
  */
  bottom: -5px !important;
}

/* ========================================
   ROBOT CUTE POP-UP MESSAGE
======================================== */

.chatbot-teaser {
  position: absolute;

  /* Places bubble on the LEFT of robot */
  right: 55px;
  bottom: 16px;

  min-width: 75px;
  max-width: 165px;

  padding: 8px 12px;

  background: rgba(45, 46, 50, 0.97);

  border: 1px solid rgba(235, 176, 32, 0.65);

  border-radius: 12px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 500;

  line-height: 1.4;

  text-align: left;

  white-space: nowrap;

  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(235, 176, 32, 0.08);

  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  transform:
    translateX(8px) scale(0.92);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;

  z-index: 1200;
}


/* Small speech-bubble arrow */
.chatbot-teaser::after {
  content: "";

  position: absolute;

  right: -6px;
  bottom: 14px;

  width: 11px;
  height: 11px;

  background: #2d2e32;

  border-top: 1px solid rgba(235, 176, 32, 0.65);
  border-right: 1px solid rgba(235, 176, 32, 0.65);

  transform: rotate(45deg);
}


/* Visible state */
.chatbot-teaser.show {
  opacity: 1;
  visibility: visible;

  transform:
    translateX(0) scale(1);
}


/* Cute tiny bounce when appearing */
.chatbot-teaser.show {
  animation: chatbotTeaserPop 0.35s ease;
}


@keyframes chatbotTeaserPop {

  0% {
    transform:
      translateX(8px) scale(0.85);
  }

  70% {
    transform:
      translateX(-2px) scale(1.04);
  }

  100% {
    transform:
      translateX(0) scale(1);
  }

}

/* =========================================================
   ABOUT V2 — CLIENT-FOCUSED REDESIGN
========================================================= */

#about.about-v2 {

  --about-gold: #ebb020;
  --about-bg: #343539;
  --about-card: #292a2e;
  --about-card-soft: #2d2e32;
  --about-border: rgba(255, 255, 255, 0.07);
  --about-muted: #9b9ca0;
  --about-text: #c5c6c8;

}


/* Prevent Iconify layout shift */

#about iconify-icon {

  display: inline-block;

  width: 1em;
  height: 1em;

}


/* =========================================================
   GLOBAL SECTION TYPOGRAPHY
========================================================= */

.about-v2-eyebrow {

  display: block;

  margin-bottom: 9px;

  color: var(--about-gold);

  font-size: 17px;

  font-weight: 700;

  letter-spacing: 1.8px;

}


.about-v2-section-heading {

  max-width: 720px;

  margin-bottom: 28px;

}


.about-v2-section-heading h2,
.about-v2-tools-header h2,
.about-v2-why-intro h2,
.about-v2-final h2 {

  margin: 0 0 10px;

  color: #fff;

  font-size: clamp(2px, 3vw, 35px);

  font-weight: 600;

  line-height: 1.25;

  letter-spacing: -0.6px;

}


.about-v2-section-heading h2 span,
.about-v2-tools-header h2 span,
.about-v2-why-intro h2 span,
.about-v2-final h2 span {

  color: var(--about-gold);

}


.about-v2-section-heading p,
.about-v2-why-intro p {

  max-width: 660px;

  margin: 0;

  color: var(--about-muted);

  font-size: 15px;

  line-height: 1.8;

}


/* =========================================================
   HERO
========================================================= */

.about-v2-hero {

  padding:
    20px 0
    48px;

}


/* Portrait */

.about-v2-visual {

  position: relative;

  max-width: 430px;

  margin: 0 auto;

  padding:
    12px
    20px
    30px
    0;

}


.about-v2-image {

  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(235, 176, 32, 0.17);

  border-radius:
    25px
    25px
    25px
    5px;

  background:
    var(--about-card);

  box-shadow:
    0 24px 50px
    rgba(0, 0, 0, 0.18);

}


.about-v2-image img {

  display: block;

  width: 100%;

  height: auto;

  margin: 0;

  object-fit: cover;

  transition:
    transform .7s ease;

}


.about-v2-image:hover img {

  transform:
    scale(1.035);

}


.about-v2-image-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(24, 25, 28, 0.34),
      transparent 48%
    );

  pointer-events: none;

}


/* Gold back frame */

.about-v2-visual::before {

  content: "";

  position: absolute;

  width: 76%;

  height: 76%;

  right: 0;

  bottom: 8px;

  border:
    1px solid
    rgba(235, 176, 32, 0.30);

  border-radius: 25px;

  z-index: -1;

}


/* Availability */

.about-v2-availability {

  position: absolute;

  top: 30px;

  left: -13px;

  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    8px
    12px;

  border:
    1px solid
    rgba(235, 176, 32, 0.23);

  border-radius: 30px;

  background:
    rgba(38, 39, 43, 0.94);

  backdrop-filter:
    blur(12px);

  color:
    #d3d4d6;

  font-size: 12px;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, 0.25);

  animation:
    aboutBadgeFloat
    4s
    ease-in-out
    infinite;

}


.availability-pulse {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #43d17a;

  box-shadow:
    0 0 8px
    rgba(67, 209, 122, 0.7);

  animation:
    aboutOnlinePulse
    2s
    ease-in-out
    infinite;

}


/* Floating skill card */

.about-v2-floating-card {

  position: absolute;

  right: -6px;

  bottom: 0;

  min-width: 205px;

  padding:
    13px
    16px;

  border:
    1px solid
    rgba(235, 176, 32, 0.20);

  border-radius: 14px;

  background:
    rgba(40, 41, 45, 0.97);

  box-shadow:
    0 15px 35px
    rgba(0, 0, 0, 0.25);

  animation:
    aboutCardFloat
    5s
    ease-in-out
    infinite;

}


.about-v2-floating-card small {

  display: block;

  margin-bottom: 4px;

  color:
    var(--about-gold);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.3px;

}


.about-v2-floating-card strong {

  color: #d8d9db;

  font-size: 13px;

  font-weight: 500;

}


/* Decorative orbit dots */

.about-v2-orbit {

  position: absolute;

  border-radius: 50%;

  background:
    var(--about-gold);

  box-shadow:
    0 0 12px
    rgba(235, 176, 32, 0.7);

}


.orbit-one {

  width: 6px;
  height: 6px;

  right: 3%;

  top: 10%;

  animation:
    aboutOrbitPulse
    3s
    infinite;

}


.orbit-two {

  width: 4px;
  height: 4px;

  left: -2%;

  bottom: 25%;

  opacity: .65;

  animation:
    aboutOrbitPulse
    3.8s
    infinite
    .5s;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.about-v2-content h2 {

  max-width: 670px;

  margin:
    0 0
    17px;

  color: #fff;

  font-size:
    clamp(33px, 3.7vw, 44px);

  font-weight: 600;

  line-height: 1.16;

  letter-spacing: -1px;

}


.about-v2-content h2 span {

  display: block;

  color:
    var(--about-gold);

}


.about-v2-lead {

  max-width: 660px;

  margin-bottom: 12px;

  color: #d7d8da;

  font-size: 18px;

  line-height: 1.65;

}


.about-v2-description {

  max-width: 680px;

  margin: 0;

  color:
    var(--about-muted);

  font-size: 13px;

  line-height: 1.8;

}


/* Specialties */

.about-v2-specialties {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 22px;

}


.about-v2-specialties > div {

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    10px
    12px;

  border:
    1px solid
    var(--about-border);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.015);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;

}


.about-v2-specialties > div:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(235, 176, 32, 0.25);

  background:
    rgba(235, 176, 32, 0.035);

}


.about-v2-specialties i {

  color:
    var(--about-gold);

  font-size: 18px;

}


.about-v2-specialties span {

  color: #c2c3c5;

  font-size: 13px;

}


/* =========================================================
   BUTTONS
========================================================= */

.about-v2-actions,
.about-v2-final-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 23px;

}


.about-v2-primary-btn,
.about-v2-outline-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    10px
    18px;

  border-radius: 25px;

  font-size: 13px;

  font-weight: 600;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;

}


.about-v2-primary-btn {

  background:
    var(--about-gold);

  color:
    #222 !important;

}


.about-v2-outline-btn {

  border:
    1px solid
    var(--about-gold);

  background:
    transparent;

  color:
    var(--about-gold) !important;

}


.about-v2-primary-btn:hover,
.about-v2-outline-btn:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 25px
    rgba(235, 176, 32, 0.15);

}


/* Contact */

.about-v2-contact {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 13px;

  margin-top: 21px;

  padding-top: 16px;

  border-top:
    1px solid
    var(--about-border);

}


.about-v2-contact a,
.about-v2-contact > div {

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    #8f9094;

  font-size: 11px;

}


.about-v2-contact i {

  color:
    var(--about-gold);

}


.about-v2-contact-line {

  width: 1px;

  height: 15px;

  background:
    var(--about-border);

}


/* =========================================================
   METRICS
========================================================= */

.about-v2-metrics {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 9px;

  margin:
    32px 0
    68px;

}


.about-v2-metric {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

  padding:
    16px;

  border:
    1px solid
    var(--about-border);

  border-radius: 14px;

  background:
    var(--about-card);

  transition:
    transform .25s ease,
    border-color .25s ease;

}


.about-v2-metric:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(235, 176, 32, .25);

}


.about-v2-metric-icon {

  width: 39px;
  height: 39px;

  flex:
    0 0
    39px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  background:
    rgba(235, 176, 32, 0.07);

  color:
    var(--about-gold);

  font-size: 21px;

}


.about-v2-metric strong {

  display: block;

  color: #fff;

  font-size: 23px;

  line-height: 1;

}


.about-v2-metric > div:last-child > span:last-child {

  display: block;

  margin-top: 4px;

  color: #85868a;

  font-size: 11px;

}


/* =========================================================
   CAPABILITIES
========================================================= */

.about-v2-capabilities {

  margin:
    68px 0;

}


.about-v2-capability-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 11px;

}


.about-v2-capability-card {

  position: relative;

  overflow: hidden;

  padding:
    23px;

  border:
    1px solid
    var(--about-border);

  border-radius: 16px;

  background:
    var(--about-card);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}


.about-v2-capability-card::before {

  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  top: -90px;
  right: -80px;

  border-radius: 50%;

  background:
    rgba(235, 176, 32, 0.055);

  filter:
    blur(5px);

  transition:
    transform .5s ease;

}


.about-v2-capability-card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(235, 176, 32, 0.28);

  box-shadow:
    0 16px 38px
    rgba(0, 0, 0, .17);

}


.about-v2-capability-card:hover::before {

  transform:
    scale(1.35);

}


.capability-number {

  position: absolute;

  top: 13px;

  right: 16px;

  color:
    rgba(235, 176, 32, 0.16);

  font-size: 31px;

  font-weight: 700;

}


.capability-icon {

  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 18px;

  border-radius: 10px;

  background:
    rgba(235, 176, 32, 0.07);

  color:
    var(--about-gold);

  font-size: 21px;

}


.about-v2-capability-card small {

  display: block;

  color:
    var(--about-gold);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.4px;

}


.about-v2-capability-card h3 {

  margin:
    4px 0
    7px;

  color: #fff;

  font-size: 19px;

}


.about-v2-capability-card p {

  margin: 0;

  color:
    #929397;

  font-size: 13px;

  line-height: 1.7;

}


.capability-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 15px;

}


.capability-tags span {

  padding:
    4px 8px;

  border:
    1px solid
    rgba(235, 176, 32, .13);

  border-radius: 20px;

  color:
    #aaa;

  font-size: 10px;

}


/* =========================================================
   TOOLS & PLATFORMS
========================================================= */

.about-v2-tools {

  margin:
    72px 0;

  padding:
    30px;

  border:
    1px solid
    var(--about-border);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(235, 176, 32, .025),
      rgba(255, 255, 255, .008)
    ),
    var(--about-card-soft);

}


.about-v2-tools-header {

  display: grid;

  grid-template-columns:
    1.1fr .9fr;

  gap: 32px;

  align-items: end;

  margin-bottom: 28px;

}


.about-v2-tools-header p {

  margin: 0;

  color:
    var(--about-muted);

  font-size: 13px;

  line-height: 1.7;

}


/* Tool category */

.about-tool-category {

  display: grid;

  grid-template-columns:
    145px
    1fr;

  gap: 22px;

  padding:
    23px 0;

  border-top:
    1px solid
    var(--about-border);

}


.about-tool-category:last-child {

  border-bottom:
    1px solid
    var(--about-border);

}


.about-tool-category-label {

  display: flex;

  gap: 11px;

  align-items: flex-start;

}


.about-tool-category-label > span {

  color:
    rgba(235, 176, 32, .32);

  font-size: 23px;

  font-weight: 700;

  line-height: 1;

}


.about-tool-category-label small {

  display: block;

  margin-bottom: 3px;

  color:
    var(--about-gold);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.2px;

}


.about-tool-category-label strong {

  color:
    #d1d2d4;

  font-size: 14px;

  font-weight: 500;

}


/* Tool cards */

.about-tool-grid {

  display: grid;

  grid-template-columns:
    repeat(6, minmax(70px, 1fr));

  gap: 7px;

}


.about-tool-card {

  position: relative;

  overflow: hidden;

  min-height: 88px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    11px
    7px;

  border:
    1px solid
    var(--about-border);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, .014);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}


.about-tool-card::before {

  content: "";

  position: absolute;

  width: 45px;
  height: 130%;

  top: -15%;

  left: -70px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(235, 176, 32, .05),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .55s ease;

}


.about-tool-card:hover::before {

  left:
    calc(100% + 30px);

}


.about-tool-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(235, 176, 32, .29);

  background:
    rgba(235, 176, 32, .03);

  box-shadow:
    0 10px 24px
    rgba(0, 0, 0, .15);

}


.about-tool-logo {

  color:
    var(--about-gold);

  font-size: 31px;

  transition:
    transform .3s ease,
    color .3s ease;

}


.about-tool-card:hover
.about-tool-logo {

  color: #fff;

  transform:
    scale(1.12)
    rotate(-3deg);

}


.about-tool-card > span {

  color: #a9aaad;

  font-size: 11px;

  text-align: center;

}


.about-tool-custom {

  width: 31px;
  height: 31px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(235, 176, 32, .35);

  border-radius: 8px;

  color:
    var(--about-gold);

  font-size: 12px;

  font-weight: 700;

}


/* =========================================================
   HOW I WORK
========================================================= */

.about-v2-process {

  margin:
    72px 0;

}


.about-process-flow {

  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 7px;

  align-items: stretch;

}


.about-process-step {

  position: relative;

  padding:
    20px;

  border:
    1px solid
    var(--about-border);

  border-radius: 15px;

  background:
    var(--about-card);

  transition:
    transform .25s ease,
    border-color .25s ease;

}


.about-process-step:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(235, 176, 32, .25);

}


.about-process-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

}


.about-process-top span {

  color:
    rgba(235, 176, 32, .28);

  font-size: 22px;

  font-weight: 700;

}


.about-process-top i {

  color:
    var(--about-gold);

  font-size: 21px;

}


.about-process-step small {

  color:
    var(--about-gold);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.2px;

}


.about-process-step h3 {

  margin:
    4px 0
    7px;

  color: #fff;

  font-size: 16px;

}


.about-process-step p {

  margin: 0;

  color: #909195;

  font-size: 12px;

  line-height: 1.7;

}


.about-process-arrow {

  display: flex;

  align-items: center;

  color:
    var(--about-gold);

  opacity: .55;

  animation:
    aboutArrowPulse
    1.8s
    ease-in-out
    infinite;

}


/* =========================================================
   WHY WORK WITH ME
========================================================= */

.about-v2-why {

  display: grid;

  grid-template-columns:
    .78fr
    1.22fr;

  gap: 42px;

  margin:
    78px 0;

  padding:
    32px;

  border:
    1px solid
    rgba(235, 176, 32, .15);

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(235, 176, 32, .045),
      rgba(255, 255, 255, .008)
    );

}


.about-v2-why-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 9px;

}


.about-v2-why-grid article {

  display: flex;

  gap: 12px;

  padding:
    16px;

  border:
    1px solid
    var(--about-border);

  border-radius: 13px;

  background:
    rgba(41, 42, 46, .75);

  transition:
    transform .25s ease,
    border-color .25s ease;

}


.about-v2-why-grid article:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(235, 176, 32, .23);

}


.about-v2-why-grid article > i {

  flex:
    0 0
    30px;

  color:
    var(--about-gold);

  font-size: 21px;

}


.about-v2-why-grid span {

  color:
    var(--about-gold);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1px;

}


.about-v2-why-grid h3 {

  margin:
    4px 0
    6px;

  color: #fff;

  font-size: 15px;

}


.about-v2-why-grid p {

  margin: 0;

  color: #929397;

  font-size: 12px;

  line-height: 1.65;

}


/* =========================================================
   FINAL CTA
========================================================= */

.about-v2-final {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  margin:
    70px 0
    35px;

  padding:
    30px;

  border:
    1px solid
    rgba(235, 176, 32, .20);

  border-radius: 19px;

  background:
    radial-gradient(
      circle at right,
      rgba(235, 176, 32, .075),
      transparent 45%
    ),
    var(--about-card);

}


.about-v2-final > div:first-child {

  max-width: 620px;

}


.about-v2-final h2 {

  font-size:
    clamp(27px, 3vw, 31px);

}


.about-v2-final p {

  max-width: 590px;

  margin: 0;

  color:
    var(--about-muted);

  font-size: 13px;

  line-height: 1.75;

}


.about-v2-final-actions {

  flex:
    0 0
    auto;

  margin: 0;

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

/*
  Content stays visible if JavaScript fails.
  Hidden state activates only when JS adds
  .about-animate-ready to #about.
*/

#about.about-animate-ready
.about-reveal {

  opacity: 0;

  transform:
    translateY(28px);

  transition:
    opacity .7s ease
    var(--reveal-delay, 0s),

    transform .7s
    cubic-bezier(.2,.8,.2,1)
    var(--reveal-delay, 0s);

}


#about.about-animate-ready
.about-reveal.is-visible {

  opacity: 1;

  transform:
    translateY(0);

}


/* =========================================================
   ABOUT ANIMATIONS
========================================================= */

@keyframes aboutBadgeFloat {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-5px);

  }

}


@keyframes aboutCardFloat {

  0%,
  100% {

    transform:
      translateY(0)
      rotate(0deg);

  }

  50% {

    transform:
      translateY(-5px)
      rotate(.5deg);

  }

}


@keyframes aboutOnlinePulse {

  0%,
  100% {

    opacity: .55;

    box-shadow:
      0 0 5px
      rgba(67, 209, 122, .4);

  }

  50% {

    opacity: 1;

    box-shadow:
      0 0 13px
      rgba(67, 209, 122, .85);

  }

}


@keyframes aboutOrbitPulse {

  0%,
  100% {

    transform:
      scale(.75);

    opacity:
      .35;

  }

  50% {

    transform:
      scale(1.35);

    opacity:
      1;

  }

}


@keyframes aboutArrowPulse {

  0%,
  100% {

    transform:
      translateX(0);

    opacity:
      .35;

  }

  50% {

    transform:
      translateX(3px);

    opacity:
      .85;

  }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

  #about
  .about-v2-visual {

    max-width:
      390px;

    margin-bottom:
      40px;

  }


  #about
  .about-v2-metrics {

    grid-template-columns:
      repeat(2, 1fr);

  }


  #about
  .about-v2-tools-header {

    grid-template-columns:
      1fr;

    gap:
      12px;

  }


  #about
  .about-tool-category {

    grid-template-columns:
      1fr;

    gap:
      13px;

  }


  #about
  .about-tool-grid {

    grid-template-columns:
      repeat(4, 1fr);

  }


  #about
  .about-process-flow {

    grid-template-columns:
      repeat(2, 1fr);

  }


  #about
  .about-process-arrow {

    display:
      none;

  }


  #about
  .about-v2-why {

    grid-template-columns:
      1fr;

  }


  #about
  .about-v2-final {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

  #about
  .about-v2-content h2 {

    font-size:
      33px;

  }


  #about
  .about-v2-specialties,

  #about
  .about-v2-metrics,

  #about
  .about-v2-capability-grid,

  #about
  .about-process-flow,

  #about
  .about-v2-why-grid {

    grid-template-columns:
      1fr;

  }


  #about
  .about-v2-actions {

    flex-direction:
      column;

  }


  #about
  .about-v2-primary-btn,

  #about
  .about-v2-outline-btn {

    width:
      100%;

  }


  #about
  .about-v2-contact {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  #about
  .about-v2-contact-line {

    display:
      none;

  }


  #about
  .about-v2-floating-card {

    right:
      3px;

  }


  #about
  .about-v2-tools {

    padding:
      22px
      17px;

  }


  #about
  .about-tool-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  #about
  .about-v2-why {

    padding:
      23px
      18px;

  }


  #about
  .about-v2-final {

    padding:
      24px
      19px;

  }


  #about
  .about-v2-final-actions {

    width:
      100%;

  }

}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #about
  * {

    animation:
      none !important;

    transition-duration:
      .01ms !important;

  }


  #about
  .about-reveal {

    opacity:
      1 !important;

    transform:
      none !important;

  }

}


/* =========================================================
   STABLE DESKTOP SHELL
========================================================= */

@media (min-width: 992px) {

  /*
   * HOME + CONTACT
   *
   * Preserves the same dimensions produced by your
   * existing openMenu() calculation.
   */

  body.layout-expanded #main {

    left:
      calc(5% + 315px) !important;

    right:
      calc(5% + 95px) !important;

    width:
      auto !important;

  }


  /*
   * ABOUT + RESUME + WORKS + BLOG
   *
   * Preserves the same dimensions produced by your
   * existing closeMenu() calculation.
   */

  body.layout-collapsed #main {

    left:
      calc(5% + 95px) !important;

    right:
      calc(5% + 95px) !important;

    width:
      auto !important;

  }


  /*
   * Every page always fills #main.
   */

  body.layout-expanded #main > section,
  body.layout-collapsed #main > section {

    left:
      0 !important;

    right:
      0 !important;

    width:
      100% !important;

    max-width:
      none !important;

  }

}

/* =========================================================
   RESPONSIVE COLLAPSED LEFT MENU
========================================================= */

@media (min-width: 992px) {


  body.layout-collapsed
  .left-side .menu-align {

    top:
      128px !important;

    bottom:
      12px !important;

    height:
      auto !important;

  }


  body.layout-collapsed
  .left-side .menu {

    display:
      flex !important;

    flex-direction:
      column !important;

    justify-content:
      space-evenly !important;

    align-items:
      stretch !important;

    height:
      100% !important;

  }


  body.layout-collapsed
  .left-side .menu
  .list-group-item {

    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    width:
      100% !important;

    flex:
      0 0 auto;

  }


  body.layout-collapsed
  .left-side .menu
  .list-group-item a {

    width:
      calc(100% - 10px);

    min-height:
      50px;

    margin:
      0 5px;

    padding:
      5px 2px !important;

  }

}




  /* =====================================================
     HERO PORTRAIT
  ===================================================== */

  #hero
  .hero-portrait-reveal {

    top:
      auto;

    bottom:
      -1px;

    right:
      -4%;

    transform:
      none;

    width:
      min(
        61%,
        620px
      );

    height:
      98%;

    max-width:
      none;

  }


  #hero
  .hero-portrait-base,

  #hero
  .hero-portrait-layer {

    width:
      100%;

    height:
      100%;

    object-fit:
      contain !important;

    object-position:
      right bottom !important;

  }



  /* =====================================================
     HERO TEXT AREA
  ===================================================== */

  #hero
  .hero-content {

    width:
      54%;

    max-width:
      560px;

  }



  /* =====================================================
     MAIN TITLE
  ===================================================== */

  #hero
  .hero-main-title {

    font-size:
      clamp(
        35px,
        3.15vw,
        43px
      );

    line-height:
      1.38;

    letter-spacing:
      -.6px;

  }



  /* =====================================================
     ROTATING ROLE
  ===================================================== */

  #hero
  .hero-role-line {

    margin-top:
      10px;

    font-size:
      15px;

    line-height:
      1.5;

    letter-spacing:
      .6px;

  }



  /* =====================================================
     CTA
  ===================================================== */

  #hero
  .hero-actions {

    margin-top:
      28px;

  }


  #hero
  .hero-work-btn {

    padding:
      12px 30px;

    font-size:
      16px;

  }


  #hero
  .hero-work-arrow {

    font-size:
      23px;

  }

/* =========================================================
   FINAL HERO RESPONSIVE OVERRIDE
   Taller laptop screens at roughly 1200–1500px wide.

   This targets the screen shown in your screenshot,
   while avoiding your short-height Win10 viewport.
========================================================= */

@media
(min-width: 1200px)
and
(max-width: 1500px)
and
(min-height: 560px) {


  /* =====================================================
     PORTRAIT WRAPPER
  ===================================================== */

  #hero .hero-portrait-reveal {

    /*
     * Fill almost the entire height of the Hero.
     */

    top:
      0 !important;

    bottom:
      0 !important;

    right:
      -3% !important;

    width:
      58% !important;

    height:
      100% !important;

    max-width:
      680px !important;

    transform:
      none !important;


    /*
     * Important:
     *
     * The old wrapper used overflow:hidden,
     * which can prevent the enlarged image
     * from visibly extending beyond its box.
     */

    overflow:
      visible !important;

  }



  /* =====================================================
     ACTUAL PORTRAIT IMAGES
  ===================================================== */

  #hero .hero-portrait-base,
  #hero .hero-portrait-layer {

    position:
      absolute;

    top:
      0;

    right:
      0;

    bottom:
      0;

    left:
      auto;


    width:
      100% !important;

    height:
      100% !important;


    object-fit:
      contain !important;

    object-position:
      right bottom !important;


    /*
     * This is what actually makes Luke visibly larger.
     *
     * Increasing only the wrapper was not enough because
     * object-fit:contain can preserve almost the same
     * apparent subject size depending on image proportions.
     */

    transform:
      scale(1.18) !important;

    transform-origin:
      right bottom !important;

  }



  /* =====================================================
     HERO TEXT AREA
  ===================================================== */

  #hero .hero-content {

    width:
      55% !important;

    max-width:
      590px !important;

  }



  /* =====================================================
     MAIN HEADLINE
  ===================================================== */

  #hero .hero-main-title {

    font-size:
      45px !important;

    line-height:
      1.38 !important;

    letter-spacing:
      -.7px;

  }



  /* =====================================================
     ROLE TEXT
  ===================================================== */

  #hero .hero-role-line {

    margin-top:
      14px;

    font-size:
      19px !important;

    line-height:
      1.5;

    letter-spacing:
      .5px;

  }



  /* =====================================================
     BUTTON
  ===================================================== */

  #hero .hero-actions {

    margin-top:
      27px;

  }


  #hero .hero-work-btn {

    padding:
      12px 30px;

    font-size:
      16px !important;

  }


  #hero .hero-work-arrow {

    font-size:
      23px;

  }

}