/*!  - - - - - - - - - - - -   Customizations   - - - - - - - - - - - - - - - */
/* ---------------------------------------------- /*
 *               Theme covers
/* ---------------------------------------------- */
body {
  /* font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; */
  font-family: 'Roboto', 'Lato', Helvetica, 'sans-serif';
  font-weight: 400;
  font-display: swap;
  position: relative;
}

.h4 {
  font-weight: 600;
}

.release {
  top:  1px;
  left: 1px;
  position: fixed;
  overflow-y: auto;
  font: 400 100%/140% Tahoma;
  font-size: 10px;
  color: #ccc;
  z-index: 200;
}

.copyright {
  font-family: 'Lato', Calibri, Tahoma, 'sans-serif';
  font-weight: 400;
  font-size: 12px;
  /* font-display: swap; */
}

.copyright > span.label {
  font-weight: 400;
  font-size: 10px;
}

.footer-wrapper {
  background: #1a1e23;
  color: #ccc;
  padding: 16px 0;
}

.footer-wrapper small {
  color: #1a1e23;
}

/* .noty-container { */
  /* font-size: 14px; */
/* } */


/* ---------------------------------------------- /*
 *               About Section
/* ---------------------------------------------- */
.short-info h3 {
  margin-top: 25px;
  margin-bottom: 20px;
}

/* Gradient text for headings that also need a fly-in animation.
   Omits the `animation` property so the Waypoints fly-in can win the cascade. */
.hue-heading {
  background-image: linear-gradient(92deg, #f35626 0%, #feab3a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------- /*
 *               Resume Section
/* ---------------------------------------------- */

/* === Resume Timeline === */
.timeline-content {
  padding: 0;
}

.timeline-content .panel-body p {
  line-height: 24px;
}

.timeline-heading h3 {
  /*font-size: 22px;*/
  line-height: 26px;
}

.timeline-heading span {
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
}

.timeline-heading span a.h4 {
  text-decoration: none;
}

/* ---------------------------------------------- /*
 *               Skill Section
/* ---------------------------------------------- */
.skill-icon {
  width: 15%;
}

.skill-title {
  width: 55%;
}

  .skill-title span
, .skill-title i {
  float: left;
  margin-top: -6px;
  line-height: 24px;
}
.skill-title i {
  margin-right: 4px;
}

.skill-title span {
  font-size: 16px;
  font-weight: 400;
  margin-top: -4px;
  text-transform: capitalize;
}


/* ---------------------------------------------- /*
 *  progress-bar
/* ---------------------------------------------- */
.skill-progress .progress {
  background-image: none;
}

.progress-bar span {
  position: absolute;
  top: -20px;
  right: 15px;
}

.progress-bar.six-sec-ease-in-out {
  background-image: linear-gradient(to bottom,#3b8269 0,#68c3a3 100%);
}

.progress .progress-bar.six-sec-ease-in-out {
  -webkit-transition: width 4s ease-in-out;
     -moz-transition: width 4s ease-in-out;
       -o-transition: width 4s ease-in-out;
          transition: width 4s ease-in-out;
}


/* ---------------------------------------------- /*
 *               Chart CSS
/* ---------------------------------------------- */
.percent {
  font-size: 28px;
  font-weight: 500;
}

.chart-text span {
  font-size: 18px;
}


/* ---------------------------------------------- */
/* Shuffle Filter                                 */
/* ---------------------------------------------- */
#filter li a.active {
  border-radius: 25px;
}

#filter li a:hover {
  border-radius: 50%;
}


/* ---------------------------------------------- /*
 *               Cusomizations
/* ---------------------------------------------- */
.navbar-brand {
  transform: translate3d(0px, 0px, 0px);
  transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
}

@media(min-width:992px) {
  .grow { transition: all .02s ease-in-out; }
  .grow:hover { transform: scale(1.2); }
}

/* ul.list-check li {
  font-family: "Helvetica";
  font-weight: 100;
} */

ul.list-check li i {
  color: #68c3a3;
  margin-right: 5px;
}

.scroll-up a {
  opacity: 0.6;
  font-size: 26px;
}

form {
  margin-bottom: 15px;
}

#current {
  color: #f35626;
}

.hue {
  background-image: linear-gradient(92deg, #f35626 0%,#feab3a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hue 10s infinite linear;
}

.hue-violet {
  background-image: linear-gradient(92deg, #4facfe 0%, #a855f7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hue 10s infinite linear;
}

.hue-aurora {
  background-image: linear-gradient(92deg, #43e97b 0%, #38f9d7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hue 10s infinite linear;
}

.hue-rose {
  background-image: linear-gradient(92deg, #f953c6 0%, #ff6b6b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hue 10s infinite linear;
}

.hue-gold {
  background-image: linear-gradient(92deg, #f7971e 0%, #ffd200 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hue 10s infinite linear;
}

.ellipse {
  border-radius: 50%;
}

.pill {
  border-radius: 9999px;
}

.media-object {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------- */
/* Contact — split layout                          */
/* ---------------------------------------------- */
.contact-split {
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.contact-split-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 30px;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-split-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(44, 62, 80, 0.08);
}

.contact-split-item > i {
  float: none;
  margin: 0 0 18px;
  font-size: 40px;
  color: #68c3a3;
  transition: transform 0.3s ease;
}

.contact-split-item:hover > i {
  transform: scale(1.15) rotate(-6deg);
}

.contact-split-item .contact-number {
  margin-bottom: 0;
  overflow: visible;
}

.contact-split-item strong {
  color: #2c3e50;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.contact-split-item span,
.contact-split-item a {
  font-size: 18px;
}

.contact-split-divider {
  flex: 0 0 auto;
  position: relative;
  width: 1px;
  margin: 0 10px;
  background: linear-gradient(to bottom, transparent, #e2e2e2 15%, #e2e2e2 85%, transparent);
}

.contact-split-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #68c3a3;
  color: #68c3a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

@media (max-width: 767px) {
  .contact-split {
    flex-direction: column;
    max-width: 320px;
  }

  .contact-split-item {
    padding: 25px 15px;
  }

  .contact-split-divider {
    width: auto;
    height: 1px;
    margin: 10px 0;
    background: linear-gradient(to right, transparent, #e2e2e2 15%, #e2e2e2 85%, transparent);
  }
}

/* ---------------------------------------------- */
/* Bio photo — reined in on mobile                 */
/* ---------------------------------------------- */
@media (max-width: 767px) {
  .myphoto {
    max-width: 220px;
    margin: 0 auto 20px;
  }
}