/**
* Template Name: iPortfolio - v3.7.0
* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  margin: 0;
  padding: 0;
  color: #272829;
}

a {
  color: #149ddd;
  text-decoration: none;
}

a:hover {
  color: #37b3ed;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "", ;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #149ddd;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #2eafec;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Project buttons
--------------------------------------------------------------*/

.next-project {
  margin: auto;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #149ddd;
  width: 100px;
  height: 45px;
  color: #fff;
  transition: 0.4s;
  border-radius: 5px;
  padding: 10px 24px;
  text-align: center;
  vertical-align: middle;
}

.next-project:hover {
  background: #37b3ed;
  color: #fff;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
:root {
  --nav-color: #45505b;
  --nav-hover-color: #149ddd;
  --nav-font: "Open Sans", sans-serif;
  --background-color: #ffffff;
  --default-color: #272829;
  --contrast-color: #ffffff;
  --accent-color: #149ddd;
}

.header {
  color: var(--default-color);
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 15px;
  transition: all ease-in-out 0.3s;
  overflow-y: auto;
  z-index: 997;
  width: auto;
  pointer-events: none;
}

.header * {
  pointer-events: auto;
}

@media (max-width: 1199px) {
  .header {
    background-color: var(--background-color);
    border-right: 1px solid rgba(39, 40, 41, 0.1);
    width: 300px;
    left: -100%;
  }
}

@media (min-width: 1200px) and (max-width: 1600px) {
  .header~main {
    margin-left: 0;
  }

  .header~main .hero {
    margin-left: 0;
    width: 100vw;
  }
}

.header.header-show {
  left: 0;
}

.mobile-nav-toggle {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;
  transition: background-color 0.3s;
}

.mobile-nav-toggle:hover {
  color: var(--contrast-color);
  background-color: #2eafec;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.navmenu {
  padding: 0;
  z-index: 9997;
}

.navmenu ul {
  list-style: none;
  padding: 0 0 20px 0;
  margin: 0;
  width: 140px;
}

.navmenu a,
.navmenu a:focus {
  color: var(--nav-color);
  font-family: var(--nav-font);
  display: flex;
  align-items: center;
  padding: 10px 18px;
  margin-bottom: 8px;
  font-size: 15px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  height: 56px;
  width: 100%;
  overflow: hidden;
  transition: 0.3s;
}

.navmenu a i,
.navmenu a:focus i {
  font-size: 20px;
}

.navmenu a span,
.navmenu a:focus span {
  padding: 0 5px 0 7px;
}

@media (min-width: 992px) {

  .navmenu a,
  .navmenu a:focus {
    max-width: 56px;
  }

  .navmenu a span,
  .navmenu a:focus span {
    display: none;
  }
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus,
.navmenu li:hover>a {
  color: var(--contrast-color);
  background: var(--nav-hover-color);
}

.navmenu a:hover,
.navmenu li:hover>a {
  max-width: 100%;
  color: var(--contrast-color);
}

.navmenu a:hover span,
.navmenu li:hover>a span {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  left: 0;
  right: 0;
  margin-left: 0;
  background: url("../img/FXC_antisana.jpg") top center;
  background-size: cover;
}

#hero:before {
  content: "";
  background: rgba(5, 13, 24, 0.3);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#hero .hero-container {
  position: relative;
  z-index: 2;
  min-width: 300px;
}

#hero h1 {
  margin: 200px 0 30px 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: #fff;
}

#hero p {
  color: #fff;
  margin-bottom: 50px;
  font-size: 26px;
  font-family: "Poppins", sans-serif;
}

#hero p span {
  color: #fff;
  padding-bottom: 4px;
  letter-spacing: 1px;
  border-bottom: 3px solid #149ddd;
}

#hero .social-links {
  margin-top: 25px;
}

#hero .social-links a {
  font-size: 24px;
  display: inline-block;
  color: #fff;
  line-height: 1;
  margin-right: 20px;
  transition: 0.3s;
}

#hero .social-links a:hover {
  color: #149ddd;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background: #f5f8fd;
}

.section-title {
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #173b6c;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: #149ddd;
  bottom: 0;
  left: 0;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h3 {
  font-weight: 700;
  font-size: 26px;
  color: #173b6c;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.about .content ul strong {
  margin-right: 10px;
}

.about .content ul i {
  font-size: 16px;
  margin-right: 5px;
  color: #149ddd;
  line-height: 0;
}

.about .content p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Facts
--------------------------------------------------------------*/
.facts {
  padding-bottom: 30px;
}

.facts .count-box {
  padding: 30px;
  width: 100%;
}

.facts .count-box i {
  display: block;
  font-size: 44px;
  color: #149ddd;
  float: left;
  line-height: 0;
}

.facts .count-box span {
  font-size: 48px;
  line-height: 40px;
  display: block;
  font-weight: 700;
  color: #050d18;
  margin-left: 60px;
}

.facts .count-box p {
  padding: 15px 0 0 0;
  margin: 0 0 0 60px;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  color: #122f57;
}

.facts .count-box a {
  font-weight: 600;
  display: block;
  margin-top: 20px;
  color: #122f57;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  transition: ease-in-out 0.3s;
}

.facts .count-box a:hover {
  color: #1f5297;
}

/*--------------------------------------------------------------
# Akills
--------------------------------------------------------------*/
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: #050d18;
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: #dce8f8;
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: #149ddd;
}



/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio-wrap {
  position: relative;
  overflow: hidden;
}

/* Style for the hover overlay */
.hover-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  /* semi-transparent background */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  padding: 10px;
}

/* Show the overlay when hovering */
.portfolio-wrap:hover .hover-text {
  opacity: 1;
}

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

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 35px auto;
  list-style: none;
  text-align: center;
  background: #fff;
  border-radius: 50px;
  padding: 2px 15px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 15px 8px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #272829;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: #149ddd;
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  opacity: 1;
  left: 0;
  right: 0;
  bottom: -60px;
  z-index: 3;
  position: absolute;
  transition: all ease-in-out 0.3s;
  display: flex;
  justify-content: center;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #fff;
  font-size: 28px;
  text-align: center;
  background: rgba(20, 157, 221, 0.75);
  transition: 0.3s;
  width: 50%;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  background: rgba(20, 157, 221, 0.95);
}

.portfolio .portfolio-wrap .portfolio-links a+a {
  border-left: 1px solid #37b3ed;
}

.portfolio .portfolio-wrap:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-links {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider .swiper-slide {
  text-align: center;
}

.portfolio-details .portfolio-details-slider img {
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  display: block;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #149ddd;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #149ddd;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(5, 13, 24, 0.08);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .tech-stack {
  margin-top: 30px;
}

.portfolio-details .tech-stack h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .tech-badge {
  display: inline-block;
  background: #f3f3f3;
  color: #333;
  padding: 8px 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
}


/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  margin-bottom: 20px;
}

.services .icon {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: #149ddd;
  border-radius: 50%;
  transition: 0.5s;
  border: 1px solid #149ddd;
}

.services .icon i {
  color: #fff;
  font-size: 24px;
  line-height: 0;
}

.services .icon-box:hover .icon {
  background: #fff;
}

.services .icon-box:hover .icon i {
  color: #149ddd;
}

.services .title {
  margin-left: 80px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.services .title a {
  color: #343a40;
}

.services .title a:hover {
  color: #149ddd;
}

.services .description {
  margin-left: 80px;
  line-height: 24px;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  text-align: center;
  min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #111;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: #c3e8fa;
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 15px 15px;
  padding: 20px;
  background: #fff;
  position: relative;
  margin-bottom: 35px;
  border-radius: 6px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.testimonials .testimonial-item p::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid #fff;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 20px);
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #149ddd;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #149ddd;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact {
  padding-bottom: 130px;
}

.contact .info {
  padding: 30px;
  background: #fff;
  width: 100%;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
}

.contact .info i {
  font-size: 20px;
  color: #149ddd;
  float: left;
  width: 44px;
  height: 44px;
  background: #dff3fc;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #050d18;
}

.contact .info p {
  padding: 0 0 10px 60px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #173b6c;
}

.contact .info .email p {
  padding-top: 5px;
}

.contact .info .social-links {
  padding-left: 60px;
}

.contact .info .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #333;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  margin-right: 10px;
}

.contact .info .social-links a:hover {
  background: #149ddd;
  color: #fff;
}

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {
  background: #149ddd;
  color: #fff;
}

.contact .php-email-form {
  width: 100%;
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br+br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form .form-group {
  margin-bottom: 15px;
}

.contact .php-email-form label {
  padding-bottom: 8px;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 15px;
}

.contact .php-email-form button[type=submit] {
  background: #149ddd;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #37b3ed;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 20px 0;
  background: #f9f9f9;
}

.breadcrumbs h2 {
  font-size: 26px;
  font-weight: 300;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}

.breadcrumbs ol li+li {
  padding-left: 10px;
}

.breadcrumbs ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: #0e2442;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs ol {
    display: block;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }
}

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

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 35px auto;
  list-style: none;
  text-align: center;
  background: #fff;
  border-radius: 50px;
  padding: 2px 15px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.08);
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 15px 8px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #272829;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: #149ddd;
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 8px;
}

.portfolio .portfolio-wrap img {
  transition: all 0.3s ease-in-out;
  width: 100%;
  display: block;
}

.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
  margin: 20px 0 5px 0;
  order: 2;
  position: relative;
  flex-shrink: 0;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: #ffffff;
  font-size: 12px;
  padding: 0;
  margin: 0;
  order: 3;
  position: relative;
  flex-shrink: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
  display: flex;
  gap: 10px;
  order: 1;
  position: relative;
  flex-shrink: 0;
  justify-content: center;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #45505b;
  background: #ffffff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.3s ease;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  background: #149ddd;
  color: #ffffff;
  transform: scale(1.1);
}

.portfolio .portfolio-wrap:hover::before {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover img {
  filter: blur(3px);
  transform: scale(1.05);
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: #ffffff;
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
  position: relative;
}

.footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}

.footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 30px 0;
}

.footer .social-links {
  margin: 0 0 30px 0;
}

.footer .social-links a {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: var(--contrast-color);
  line-height: 1;
  margin: 0 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  text-decoration: none;
}

.footer .copyright {
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--default-color);
}

/*--------------------------------------------------------------
# Resume Tabs & Button
--------------------------------------------------------------*/
.resume .section-title {
  margin-bottom: 20px;
}

.btn-download-cv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050d18;
  background: transparent;
  padding: 0;
  border-radius: 0;
  transition: 0.3s;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  border-bottom: none;
  line-height: 1.5;
  font-family: "Poppins", sans-serif;
}

.btn-download-cv span {
  border-bottom: 2px solid #050d18;
  transition: 0.3s;
  margin-right: 6px;
}

.btn-download-cv i {
  margin-left: 8px;
  font-size: 24px;
  color: #149ddd;
}

.btn-download-cv:hover {
  background: transparent;
  color: #149ddd;
}

.btn-download-cv:hover span {
  border-bottom-color: #149ddd;
}

.resume-tabs {
  border-bottom: 2px solid #e4eaf9;
  margin-bottom: 30px;
  justify-content: center;
}

.resume-tabs .nav-item {
  margin-bottom: -2px;
}

.resume-tabs .nav-link {
  border: none;
  color: #45505b;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 25px;
  background: transparent;
  transition: 0.3s;
  border-bottom: 2px solid transparent;
}

.resume-tabs .nav-link:hover {
  color: #149ddd;
}

.resume-tabs .nav-link.active {
  color: #149ddd;
  background: transparent;
  border-bottom: 2px solid #149ddd;
}

.resume-content {
  min-height: 300px;
  padding: 20px 0;
  max-width: 900px;
  margin: 0 auto;
}

.resume-content .resume-title {
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 40px;
  color: #45505b;
  text-align: center;
}

.resume-content .resume-item {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #e4eaf9;
}

.resume-content .resume-item:last-child {
  border-bottom: none;
}

.resume-content .resume-item .item-date {
  flex: 0 0 80px;
  font-size: 20px;
  font-weight: 600;
  color: #45505b;
}

.resume-content .resume-item .item-content {
  flex: 1;
}

.resume-content .resume-item h4 {
  font-size: 20px;
  font-weight: 600;
  color: #45505b;
  margin-bottom: 5px;
}

.resume-content .resume-item h5 {
  font-size: 16px;
  color: #149ddd;
  margin-bottom: 10px;
  font-weight: 400;
}

.resume-content .resume-item p {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 10px;
}

.resume-content .resume-item ul {
  padding-left: 20px;
  margin-top: 10px;
}

.resume-content .resume-item ul li {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
}

.resume-content .resume-item .paper-link {
  color: #149ddd;
  font-size: 18px;
  margin-left: 8px;
  transition: 0.3s;
  text-decoration: none;
}

.resume-content .resume-item .paper-link:hover {
  color: #37b3ed;
}

@media (max-width: 768px) {
  .resume-tabs .nav-link {
    padding: 10px 15px;
    font-size: 14px;
  }

  .resume-content .resume-item {
    flex-direction: column;
    gap: 10px;
  }

  .resume-content .resume-item .item-date {
    flex: 0 0 auto;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  padding: 30px 0;
  font-size: 14px;
  text-align: center;
  background: #f7f8f9;
}

.footer h3 {
  font-size: 36px;
  font-weight: 700;
  color: #45505b;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}

.footer p {
  font-size: 15px;
  font-style: italic;
  padding: 0;
  margin: 0 0 30px 0;
  color: #6c757d;
}

.footer .social-links {
  margin: 0 0 30px 0;
}

.footer .social-links a {
  font-size: 18px;
  display: inline-block;
  color: #45505b;
  line-height: 1;
  margin: 0 8px;
  transition: 0.3s;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  background: #fff;
}

.footer .social-links a:hover {
  color: #fff;
  background: #149ddd;
}

.footer .copyright {
  margin: 0 0 5px 0;
  color: #45505b;
}

.footer .credits {
  font-size: 13px;
  color: #6c757d;
}

.footer .credits a {
  color: #149ddd;
  transition: 0.3s;
}

.footer .credits a:hover {
  text-decoration: underline;
}

/*--------------------------------------------------------------
# Lightbox Caption
--------------------------------------------------------------*/
/* The zoom view shows the description only, so drop the slide title */
.glightbox-clean .gslide-title {
  display: none;
}

/* Below 769px GLightbox pins the caption to the bottom of the screen with its
   own gradient, which it does by measuring .ginner-container. Leaving
   .gslide-media unpositioned there keeps that behaviour untouched.
   On desktop the media box hugs the image, so anchoring to it lines the
   caption up with the picture at any aspect ratio */
@media (min-width: 769px) {
  .glightbox-clean .gslide-media {
    position: relative;
  }

  .glightbox-clean .gslide-description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 45px 22px 18px 22px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
  }

  .glightbox-clean .gslide-desc {
    color: #ffffff;
    font-size: 0.95em;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
}

/*--------------------------------------------------------------
# Portfolio Paging
--------------------------------------------------------------*/
.portfolio-paged {
  /* The arrows centre on the grid, not on the whole wrapper, so they need to
     climb back up by half the dot row. Keep this in step with the height below */
  --portfolio-dots-h: 2.25rem;
  position: relative;
}

.portfolio-dots {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: var(--portfolio-dots-h);
}

.portfolio-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.portfolio-dot:hover {
  background: rgba(0, 0, 0, 0.35);
}

.portfolio-dot-active,
.portfolio-dot-active:hover {
  background: #149ddd;
  transform: scale(1.3);
}

.portfolio-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(0, 0, 0, 0.35);
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  /* Invisible against the pale section background, but keeps the chevron
     readable on the odd width where it still clips a dark figure */
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
}

/* Hairline inner ring, the detail that makes the button read as glass */
.portfolio-nav:hover:not(:disabled) {
  color: #149ddd;
}

.portfolio-nav:active:not(:disabled) {
  opacity: 0.7;
}

.portfolio-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

/* One page of figures means nothing to page through */
.portfolio-paging-idle {
  display: none;
}

/* Phones and tablets have no room beside the grid, so the arrows sit inline
   with the dots underneath it */
.portfolio-nav {
  position: relative;
  margin: 0 12px;
}

.portfolio-dots {
  order: 2;
}

@media (max-width: 991px) {
  .portfolio-paged {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  /* flex-shrink 0 stops the grid giving up width to squeeze an arrow onto its
     own line, which would leave the controls stranded beside the figures */
  .portfolio-container {
    flex: 0 0 100%;
  }

  .portfolio-dots {
    align-items: center;
    height: auto;
  }

  .portfolio-nav-prev {
    order: 1;
  }

  .portfolio-nav-next {
    order: 3;
  }
}

/* From large screens up the arrows lift onto the sides of the grid. Vertical
   centre lands in the gutter between the two rows, so they cover very little art */
@media (min-width: 992px) {
  .portfolio-paged .portfolio-nav {
    position: absolute;
    top: calc(50% - var(--portfolio-dots-h) / 2);
    transform: translateY(-50%);
    margin: 0;
    z-index: 5;
  }

  /* Sit the arrows as far clear of the artwork as the window allows. The calc
     is how much room is left outside the container at this width, so on a wide
     screen they pull out to the 3.25rem cap and on a narrow one they stop short
     of the viewport edge instead of forcing a horizontal scrollbar */
  .portfolio-nav-prev {
    left: max(-3.25rem, calc((100% - 100vw) / 2 + 1.5rem));
  }

  .portfolio-nav-next {
    right: max(-3.25rem, calc((100% - 100vw) / 2 + 1.5rem));
  }
}

/*--------------------------------------------------------------
# Portfolio Details Slider
--------------------------------------------------------------*/
.portfolio-details-figure {
  position: relative;
}

/* Swiper flags its own states with classes instead of the disabled attribute,
   so they have to be named alongside :disabled. The lock class is what it adds
   when there is only one figure and there is nothing to navigate to */
.portfolio-nav.swiper-button-disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.portfolio-nav.swiper-button-lock {
  display: none;
}

@media (max-width: 991px) {
  .portfolio-details-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .portfolio-details-figure .portfolio-details-slider {
    flex: 0 0 100%;
  }

  .details-nav-prev {
    order: 1;
  }

  .details-nav-next {
    order: 2;
  }
}

/* Same adaptive offset as the portfolio grid. The half-rem nudge upward accounts
   for the bullet row, which sits inside the slider and drags the midpoint down */
@media (min-width: 992px) {
  .details-nav-prev,
  .details-nav-next {
    position: absolute;
    top: calc(50% - 1rem);
    transform: translateY(-50%);
    margin: 0;
    z-index: 5;
  }

  .details-nav-prev {
    left: max(-3.25rem, calc((100% - 100vw) / 2 + 1.5rem));
  }

  .details-nav-next {
    right: max(-3.25rem, calc((100% - 100vw) / 2 + 1.5rem));
  }
}

/*--------------------------------------------------------------
# Figure Rights Notice
--------------------------------------------------------------*/
/* Deliberately quiet. It needs to be readable by anyone who looks for it
   without competing with the work it sits under */
.figure-rights {
  margin: 18px 0 0 0;
  color: rgba(0, 0, 0, 0.45);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.figure-rights i {
  position: relative;
  top: 2px;
  font-size: 15px;
}

.figure-rights a {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.figure-rights a:hover,
.figure-rights a:focus,
.figure-rights a:active {
  color: #149ddd;
}