/**
* Template Name: PhotoFolio - v1.1.1
* Template URL: https://bootstrapmade.com/photofolio-bootstrap-photography-website-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Set main reusable colors and fonts using CSS variables
# Learn more about CSS variables at https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
--------------------------------------------------------------*/
/* Fonts */
:root {
  --font-default: "Roboto", "Open Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: "Roboto", "Inter", sans-serif;
  --font-secondary: "Roboto", "Cardo", sans-serif;
}

/* Colors */
:root {
  --color-default: #F2F2F2;
  --color-primary: #27a776;
  --color-secondary: #161718;
  --color-secondary-fade: #65696c;
  --color-default-fade: rgb(242, 242, 242, 0.8);
  --color-secondary-background-fade: #3e4043;
  --color-primary-25-opage: rgba(39, 167, 118, 0.25);
  --color-primary-50-opage: rgba(39, 167, 118, 0.50);
  --color-secondary-fade-25-opage: rgba(101, 105, 108, 0.25);
  --color-red-fade: #FF9696;
  --image-fluid-60-fill: 60%;
  --image-fluid-48-fill: 48%;
  --image-fluid-32-fill: 32%;
}

/* Smooth scroll behavior */
:root {
  scroll-behavior: smooth;
}

/* font-size */
:root {
  --bs-body-font-size: 1.1rem;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  /** Override Variables */
  --bs-body-font-weight: 200;
  font-family: var(--font-default);
  color: var(--color-default);
  background-color: #000;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: #32cf93;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
.section-header {
  padding-bottom: 40px;
}

.section-header h2,
.section-header.thin-line {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0 0 5px 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-primary);
}

.section-header h2::after,
.section-header.thin-line:after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: #5bd9a9;
  margin: 4px 10px;
}

.section-header p {
  margin: 0;
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  font-family: var(--font-secondary);
  color: #fff;
}

/*--------------------------------------------------------------
# Page Header
--------------------------------------------------------------*/
.page-header {
  padding: 120px 0 60px 0;
  min-height: 30vh;
  position: relative;
}

.page-header h2 {
  font-size: 42px;
  line-height: 52px;
  font-weight: 400;
  color: var(--color-default);
  font-family: var(--font-secondary);
}

@media (max-width: 768px) {
  .page-header h2 {
    font-size: 36px;
  }
  .footer-post {
    display: none;
  }
}

.page-header p {
  color: rgba(255, 255, 255, 0.8);
}

.page-header .cta-btn {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.3s;
  color: #fff;
  background: var(--color-primary);
}

.page-header .cta-btn:hover {
  background: #2cbc85;
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background: var(--color-primary);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

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

.scroll-top:hover {
  background: rgba(39, 167, 118, 0.8);
  color: #fff;
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  display: flex;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
}

#preloader:before,
#preloader:after {
  content: "";
  background-color: var(--color-secondary);
  position: absolute;
  inset: 0;
  width: 50%;
  height: 100%;
  transition: all 0.3s ease 0s;
  z-index: -1;
}

#preloader:after {
  left: auto;
  right: 0;
}

#preloader .line {
  position: relative;
  overflow: hidden;
  margin: auto;
  width: 1px;
  height: 280px;
  transition: all 0.8s ease 0s;
}

#preloader .line:before {
  content: "";
  position: absolute;
  background-color: #fff;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0%;
  transform: translateY(-50%);
  -webkit-animation: lineincrease 1000ms ease-in-out 0s forwards;
  animation: lineincrease 1000ms ease-in-out 0s forwards;
}

#preloader .line:after {
  content: "";
  position: absolute;
  background-color: #999;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateY(-100%);
  -webkit-animation: linemove 1200ms linear 0s infinite;
  animation: linemove 1200ms linear 0s infinite;
  -webkit-animation-delay: 2000ms;
  animation-delay: 2000ms;
}

#preloader.loaded .line {
  opacity: 0;
  height: 100% !important;
}

#preloader.loaded .line:after {
  opacity: 0;
}

#preloader.loaded:before,
#preloader.loaded:after {
  -webkit-animation: preloaderfinish 300ms ease-in-out 500ms forwards;
  animation: preloaderfinish 300ms ease-in-out 500ms forwards;
}

@-webkit-keyframes lineincrease {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

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

  100% {
    height: 100%;
  }
}

@-webkit-keyframes linemove {
  0% {
    transform: translateY(200%);
  }

  100% {
    transform: translateY(-100%);
  }
}

@keyframes linemove {
  0% {
    transform: translateY(200%);
  }

  100% {
    transform: translateY(-100%);
  }
}

@-webkit-keyframes preloaderfinish {
  0% {
    width: 5 0%;
  }

  100% {
    width: 0%;
  }
}

@keyframes preloaderfinish {
  0% {
    width: 5 0%;
  }

  100% {
    width: 0%;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
  transition: all 0.5s;
  z-index: 997;
  padding: 30px 0;
  background-color: #000;
}

.header .logo {
  transition: 0.3s;
}

.header .logo img {
  max-height: 40px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 32px;
  margin: 0;
  font-weight: 400;
  color: #fff;
  font-family: var(--font-secondary);
}

.header .logo i {
  font-size: 32px;
  margin-right: 8px;
  line-height: 0;
}

@media (max-width: 575px) {
  .header .logo h1 {
    font-size: 26px;
  }

  .header .logo i {
    font-size: 24px;
  }
}

.header .header-social-links {
  padding-right: 15px;
}

.header .header-social-links a {
  color: rgba(255, 255, 255, 0.5);
  padding-left: 15px;
  display: inline-block;
  line-height: 0px;
  transition: 0.3s;
  font-size: 16px;
}

.header .header-social-links a:hover {
  color: #fff;
}

@media (max-width: 575px) {
  .header .header-social-links a {
    padding-left: 5px;
  }
}

/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
@media (min-width: 1280px) {
  .navbar {
    padding: 0;
  }

  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navbar li {
    position: relative;
  }

  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 10px 30px;
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    transition: 0.3s;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: #fff;

    font-size: 18px;
  }

  .navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: var(--color-secondary);
    transition: 0.3s;
    border-radius: 4px;
  }

  .navbar .dropdown ul li {
    min-width: 200px;
  }

  .navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
  }

  .navbar .dropdown ul a i {
    font-size: 12px;
  }

  .navbar .dropdown ul a:hover,
  .navbar .dropdown ul .active:hover,
  .navbar .dropdown ul li:hover>a {
    color: #fff;
  }

  .navbar .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
  }

  .navbar .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
  }
}

@media (min-width: 1280px) and (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

@media (min-width: 1280px) {

  .mobile-nav-show,
  .mobile-nav-hide {
    display: none;
  }
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width: 1279px) {
  .navbar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    bottom: 0;
    transition: 0.3s;
    z-index: 9997;
  }

  .navbar ul {
    position: absolute;
    inset: 0;
    padding: 50px 0 10px 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.9);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navbar a,
  .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-family: var(--font-primary);
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
  }

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: #fff;
  }

  .navbar .dropdown ul,
  .navbar .dropdown .dropdown ul {
    position: static;
    display: none;
    padding: 10px 0;
    margin: 10px 20px;
    transition: all 0.5s ease-in-out;
    border: 1px solid black;
  }

  .navbar .dropdown>.dropdown-active,
  .navbar .dropdown .dropdown>.dropdown-active {
    display: block;
  }

  .mobile-nav-show {
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
    z-index: 9999;
    margin: 0 10px 0 10px;
  }

  .mobile-nav-hide {
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 0;
    transition: 0.5s;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 9999;
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .navbar {
    right: 0;
  }

  .mobile-nav-active .navbar:before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(22, 23, 24, 0.8);
    z-index: 9996;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h2 {
  font-weight: 700;
  font-size: 24px;
  color: var(--color-primary);
}

.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: var(--color-primary);
  line-height: 0;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  margin-top: 80px;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  padding: 30px;
  margin: 40px 30px;
  background: var(--color-secondary);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: 0.3s;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

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

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

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

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

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: rgba(255, 255, 255, 0.5);
}

.testimonials .swiper-slide {
  opacity: 0.3;
}

@media (max-width: 1199px) {
  .testimonials .swiper-slide-active {
    opacity: 1;
  }

  .testimonials .swiper-pagination {
    margin-top: 0;
  }

  .testimonials .testimonial-item {
    margin: 40px 20px;
  }
}

@media (min-width: 1200px) {
  .testimonials .swiper-slide-next {
    opacity: 1;
    transform: scale(1.12);
  }
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.gallery {
  margin-top: 40px;
}

.gallery .gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.gallery .gallery-item img {
  transition: 0.3s;
}

.gallery .gallery-links {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.gallery .gallery-links .preview-link,
.gallery .gallery-links .details-link {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  transition: 0.3s;
  line-height: 1.2;
  margin: 30px 8px 0 8px;
}

.gallery .gallery-links .preview-link:hover,
.gallery .gallery-links .details-link:hover {
  color: #fff;
}

.gallery .gallery-links .details-link {
  font-size: 30px;
  line-height: 0;
}

.gallery .gallery-item:hover .gallery-links {
  opacity: 1;
}

.gallery .gallery-item:hover .preview-link,
.gallery .gallery-item:hover .details-link {
  margin-top: 0;
}

.gallery .gallery-item:hover img {
  transform: scale(1.1);
}

.glightbox-clean .gslide-description {
  background: #222425;
}

.glightbox-clean .gslide-title {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/*--------------------------------------------------------------
# Gallery Single Section
--------------------------------------------------------------*/
.gallery-single .portfolio-details-slider img {
  width: 100%;
}

.gallery-single .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}

.gallery-single .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

.gallery-single .swiper-button-prev,
.gallery-single .swiper-button-next {
  width: 48px;
  height: 48px;
}

.gallery-single .swiper-button-prev:after,
.gallery-single .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.gallery-single .swiper-button-prev:hover:after,
.gallery-single .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 575px) {

  .gallery-single .swiper-button-prev,
  .gallery-single .swiper-button-next {
    display: none;
  }
}

.gallery-single .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  font-family: var(--font-secondary);
}

.gallery-single .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--color-primary);
  left: 0;
  bottom: 0;
}

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

.gallery-single .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.gallery-single .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: #6b7075;
  font-size: 14px;
}

.gallery-single .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50px;
  transition: 0.3s;
}

.gallery-single .portfolio-info .btn-visit:hover {
  background: #2cbc85;
}

.gallery-single .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
  font-family: var(--font-secondary);
}

.gallery-single .portfolio-description p {
  padding: 0;
}

.gallery-single .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: var(--color-secondary);
  height: 100%;
  margin-bottom: 50px;
}

.gallery-single .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid #2e3133;
  float: left;
  margin: 0 10px 0 0;
}

.gallery-single .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.gallery-single .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.gallery-single .portfolio-description .testimonial-item .quote-icon-left,
.gallery-single .portfolio-description .testimonial-item .quote-icon-right {
  color: #5bd9a9;
  font-size: 26px;
  line-height: 0;
}

.gallery-single .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.gallery-single .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.gallery-single .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  padding: 50px 30px;
  transition: all ease-in-out 0.4s;
  background: var(--color-secondary);
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.services .service-item:before {
  content: "";
  position: absolute;
  background: #1d1f20;
  top: -200px;
  transition: all 0.3s;
  z-index: -1;
}

.services .service-item i {
  background: var(--color-primary);
  color: #fff;
  font-size: 24px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.services .service-item h4 {
  font-weight: 600;
  margin: 15px 0 0 0;
  transition: 0.3s;
  font-size: 20px;
}

.services .service-item h4 a {
  color: #fff;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin: 15px 0 0 0;
}

.services .service-item:hover:before {
  background: var(--color-primary);
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.services .service-item:hover p {
  color: #fff;
}

.services .service-item:hover i {
  background: #fff;
  color: var(--color-primary);
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
  margin-top: 80px;
}

.pricing .pricing-item {
  border-bottom: 1px dashed #474a4d;
  width: 100%;
  height: 100%;
  padding: 0 0 15px 0;
}

.pricing .pricing-item h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.pricing .pricing-item h4 {
  margin: 0;
  font-size: 16px;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--color-primary);
  float: left;
  width: 44px;
  height: 44px;
  background: #222425;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h4 {
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.5);
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: #fff;
}

.contact .info-item:hover i {
  background: var(--color-primary);
  color: #fff;
}

.contact .php-email-form {
  width: 100%;
}

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

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #df1529;
  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: var(--color-primary);
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--color-secondary);
  text-align: center;
  padding: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.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 var(--color-primary);
  border-top-color: var(--color-secondary);
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 4px;
  box-shadow: none;
  font-size: 14px;
  background-color: var(--color-secondary);
  border: 1px solid #2e3133;
  color: #fff;
}

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

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

.contact .php-email-form button[type=submit] {
  background: var(--color-primary);
  border: 0;
  padding: 10px 35px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: rgba(39, 167, 118, 0.8);
}

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

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

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

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 30vh;
  background: #000;
  background-size: cover;
  position: relative;
  padding: 140px 0 60px 0;
}

.hero h2 {
  margin: 0 0 10px 0;
  font-size: 42px;
  line-height: 52px;
  font-weight: 700;
  color: #F2F2F2;
  font-family: var(--font-secondary);
}

.hero h2 span {
  position: relative;
  z-index: 1;
  padding: 0 5px;
  display: inline-block;
}

.hero h2 span:before {
  content: "";
  position: absolute;
  height: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-primary);
  z-index: -1;
}

.hero p {
  color: var(--color-default-fade);
  margin-bottom: 30px;
  font-size: 18px;
}

.hero .btn-get-started {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.3s;
  color: #fff;
  background: var(--color-primary);
}

.hero .btn-get-started:hover {
  background: #2cbc85;
}

.hero .btn-get-started-secondary {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.3s;
  color: var(--color-primary);
  background: var(--color-secondary);
  border: 1px solid var(--color-primary)
}

.hero .btn-get-started-secondary:hover {
  font-weight: 700;
  border: 2px solid var(--color-primary)
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  margin-top: 30px;
  padding: 30px 0;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer .copyright {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.footer .credits {
  padding-top: 6px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.footer .credits a {
  color: var(--color-primary);
}

/** Custom CSS */
.experience li {
  flex-direction: column;
  align-items: baseline !important;
}

.experience i {
  font-size: 30px!important;
}

.experience li .description {
  padding-left: 1.25rem;
}

.career-highlights,
.currently {
  margin-top: 80px;
}

.currently .service-item.loud:before {
  background: var(--color-primary);
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.currently .service-item.loud p {
  color: #fff;
}

.currently .service-item.loud i {
  background: #fff;
  color: var(--color-primary);
}

.about-me {
  padding-bottom: 1rem;
}

.about-me span {
  border-bottom: 5px solid var(--color-primary);
}

/** Override */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.8!important;
}

.line-item {
  display: flex;
  flex-direction: row;
  align-content: space-around;
  flex-wrap: wrap;
}

.line-item i {
  background: none !important;
  color: #FFF !important;
  width: auto !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: 18px !important;
  padding: .25rem !important;
}

.line-item i:before {
  font-size: 24px !important;
  padding-right: 8px !important;
}

.cz-bs-card {
  background-color: transparent !important;
}

.cz-bs-btn.btn-primary {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  display: inline-block;
  padding: 15px;
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.3s;
  color: #fff;
  background: var(--color-primary);
  border: none;
}

.cz-bs-btn.btn-primary:hover {
  background: #2cbc85;
  font-weight: bold !important;
}

.cz-bs-btn.btn-primary:hover i::before {
  transform: translateX(10px);
  transition: 0.3s transform cubic-bezier(0.19, 0.1, 0.22, 1),
    0.3s -webkit-transform cubic-bezier(0.19, 0.1, 0.22, 1);
}

.cz-bs-submenu a i {
  color: var(--color-primary) !important;
  font-size: 16px;
}

.cz-bs-submenu a:hover {
  font-weight: bold !important;
}

.cz-primary-colour {
  color: var(--color-primary) !important;
}

.cz-default-colour {
  color: var(--color-default) !important;
}

.cz-red-fade-colour {
  color: var(--color-red-fade) !important;
}

.cz-icon-18 {
  font-size: 18px;
}

.cz-font-14 {
  font-size: 14px;
}

.cz-text-bold {
  font-weight: bold;
}

.cz-bt-primary-1 {
  border-top: 1px solid var(--color-primary);
}

.cz-bb-primary-1 {
  border-bottom: 1px solid var(--color-primary);
}

/** Deprecated */
.cz-post-toc {
  width: 75px;
  height: 75px;
  cursor: pointer;
}

.cz-post-toc svg {
  fill: currentColor;
  height: auto;
  max-width: 66vmin;
  transform-origin: center;
  width: 85%;
}

.cz-post-toc .cz-circle-menu {
  display: block;
}

.cz-post-toc .cz-circle-menu.active {
  display: block;
}

.cz-goto-nav select {
  border-radius: 4px;
  box-shadow: none;
  font-size: 14px;
  background-color: var(--color-secondary);
  border: 1px solid #2e3133;
  color: var(--color-primary);
}

.cz-themed-component {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
}

.cz-thin-underline {
  border-bottom: 1px solid var(--color-primary) !important;
}

.cz-medium-leftline {
  border-left: 2px solid var(--color-primary) !important;
}

.cz-medium-leftline-default {
  border-left: 2px solid var(--color-default) !important;
}

.cz-tag-pill {
  color: var(--color-default) !important;
  border: 2px solid var(--color-primary) !important;
}

.cz-post-banner {
  min-height: 20rem;
  background-position: center;
}

.post-everyoneactive .cz-post-banner {
  background-image: url("../img/posts/everyoneactive/banners/EA-Banner-lg.png");
}

.post-nextrust .cz-post-banner {
  background-image: url("../img/posts/nextrust/banners/NT-Banner-lg.png");
}

.post-hirengo .cz-post-banner {
  background-image: url("../img/posts/hirengo/banners/HG-Banner-LG.png");
}

.cz-post-section-header {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-secondary-fade);
}

.cz-font-small {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

.cz-bg-oddeven-darkmode-fade {
  background-color: var(--color-secondary-background-fade);
}

.cz-bg-oddeven-darkmode-dark {
  background-color: var(--color-secondary);
}

@media (max-width: 820px) {
  .post-everyoneactive .cz-post-banner {
    background-image: url("../img/posts/everyoneactive/banners/EA-Banner-md.png");
  }

  .post-nextrust .cz-post-banner {
    background-image: url("../img/posts/nextrust/banners/NT-Banner-md.png");
  }

  .post-hirengo .cz-post-banner {
    background-image: url("../img/posts/hirengo/banners/HG-Banner-MD.png");
  }
}

@media (max-width: 600px) {
  .post-everyoneactive .cz-post-banner {
    background-image: url("../img/posts/everyoneactive/banners/EA-Banner-sm.png");
  }

  .post-nextrust .cz-post-banner {
    background-image: url("../img/posts/nextrust/banners/NT-Banner-sm.png");
  }

  .post-hirengo .cz-post-banner {
    background-image: url("../img/posts/hirengo/banners/HG-Banner-SM.png");
  }

  .cz-sm-fs-7 {
    font-size: 0.5rem !important;
  }
}

/** Custom View Port Breakppoint Styles - Start */
.cz-img-fluid-60 {
  max-width: var(--image-fluid-60-fill);
  height: auto;
}

.cz-img-fluid-48 {
  max-width: var(--image-fluid-48-fill);
  height: auto;
}

.cz-img-fluid-32 {
  max-width: var(--image-fluid-32-fill);
  height: auto;
}

/** Custom View Port Breakppoint Styles - End */

/** Tabs */
.cz-tab {
  display: flex;
  list-style: none;
}

.cz-tab .cz-tab-item {
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-primary);
}

.cz-tab .cz-tab-item a {
  color: var(--color-default);
}

.cz-tab .cz-tab-item a p {
  font-size: 10px;
}

.cz-tab .cz-tab-item a i {
  font-size: 20px;
  color: var(--color-primary);
  float: left;
  width: 44px;
  height: 44px;
  background: #222425;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.cz-tab .cz-tab-item.active {
  background-color: var(--color-primary);
}

/** Accordion */
.accordion {
  --bs-accordion-btn-bg: var(--color-secondary);
  --bs-accordion-btn-color: var(--color-default);
  --bs-accordion-border-color: var(--color-primary);
  --bs-accordion-active-bg: var(--color-secondary-fade);
  --bs-accordion-active-color: var(--color-default);
  --bs-accordion-color: var(--color-default);
  --bs-accordion-bg: var(--color-secondary);
  --bs-accordion-btn-focus-border-color: var(--color-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgb(39 167 118 / 25%);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2327a776'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FAFAFA'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  /** Transition */
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.5s ease-in-out;
  --bs-accordion-transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out, border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out, border-radius 0.5s ease;
}

/** Gallery */
.cz-gallery-expand-link {
  color: var(--color-primary) !important;
  font-weight: bolder;
  border-radius: 30px;
  background-color: var(--color-default);
  padding: 5px;
}

/** Carousel */
.carousel-nav-icon i {
  color: var(--color-default);
  background: var(--color-primary);
  font-size: 2rem;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.carousel-nav-icon i:hover {
  color: var(--color-primary);
  background: var(--color-default);
}

.carousel-item img {
  max-height: 45rem;
}

@media (max-width: 600px) {
  .carousel-item img {
    height: auto;
    width: 70%;
  }
}

.carousel-item .cz-carousel-caption {
  width: 100%;
  color: var(--color-default);
  border-left: 1px solid var(--color-primary);
}

.cz-oneliner-contact h4 {
  line-height: 50px;
}

.cz-oneliner-contact a:hover h4 {
  text-decoration: underline !important;
}

/** Footer Links */
.cz-footer-links a:hover {
  color: var(--color-primary) !important;
}

.cz-footer-links a:hover i.cz-goto::before {
  transform: translateX(10px);
  transition: 0.3s transform cubic-bezier(0.19, 0.1, 0.22, 1),
    0.3s -webkit-transform cubic-bezier(0.19, 0.1, 0.22, 1);
}


.cz-footer-links i {
  color: var(--color-primary);
  font-size: medium;
}

/** Card */
.card {
  --bs-card-bg: transparent;
}

/** Alert */
.alert-info {
  --bs-alert-color: var(--color-primary);
  --bs-alert-bg: var(--color-secondary-background-fade);
  --bs-alert-border-color: var(--color-secondary-background-fade);
}

/** Special Cards */
.cz-card {
  border: 1px solid var(--color-primary-50-opage);
  box-shadow: 0.5rem 0.5rem 1rem var(--color-primary-25-opage) !important;
}

/** Gutter Overrides **/
.mb2 {
  margin-bottom: 2px!important;
}

.mb10 {
  margin-bottom: 10px!important;
}

.mb15 {
  margin-bottom: 15px!important;
}

.mb20 {
  margin-bottom: 20px!important;
}

.mt15 {
  margin-top: 15px!important;
}

.mt30 {
  margin-top: 30px!important;
}

.mt50 {
  margin-top: 50px!important;
}

.ml30 {
  margin-left: 30px!important;
}

.pt10 {
  padding-top: 10px!important;
}

.pb10 {
  padding-bottom: 10px!important;
}

.pb15 {
  padding-bottom: 15px!important;
}

.ml25 {
  margin-left: 25px!important;
}

.ml30 {
  margin-left: 30px!important;
}

.pr10 {
  padding-right: 10px;
}

.pl10 {
  padding-left: 10px;
}

.pl15 {
  padding-left: 15px;
}

/** Page Element Overrides **/
.sub-header {
  font-size: 22px!important;
  line-height: 28px!important;
  color: var(--color-default);
}

/** Highlight Style */
.cz-highlight-primary {
  font-weight: 700;
  font-style: italic;
  color: var(--color-primary);
}

.cz-highlight-secondary {
  font-weight: 700;
  font-style: italic;
  color: var(--color-default);
}

.cz-highlight-screen-header {
  border-bottom: 3px solid var(--color-primary);
}

.cz-highlight-new-screen {
  background-color: var(--color-primary);
  padding: 10px;
  margin-bottom: 10px;
}

.cz-highlight-left {
  border: 2px solid var(--color-primary);
}

/** Section With icon Style */
.cz-post-section-header i {
  padding-right: 15px;
}
.cz-no-border-bottom {
  border-bottom: none!important;
}
.cz-sub-section {
  border-left: 2px groove var(--color-primary-50-opage);
}

/** Override Gutter **/
@media (min-width: 1400px) {
  .container, 
  .container-lg, 
  .container-md, 
  .container-sm, 
  .container-xl, 
  .container-xxl {
    max-width: 1200px !important;
  }
}

@media (min-width: 1200px) {
  .container, 
  .container-lg, 
  .container-md, 
  .container-sm, 
  .container-xl, 
  .container-xxl {
    max-width: 1000px !important;
  }
}

/** About Page */
.about-split {
  display: block;
}
.about-full {
  display: none;
}
@media (max-width: 768px) {
  .about-split {
    display: none;
  }

  .about-full {
    display: block;
  }
}

.skill ul li i {
  font-size: 14px!important;
}

/** Disclaimer */
p.disclaimer {
  font-size: 12px;
  font-style: italic;
}
p.disclaimer i {
  color: #FFB400;
  font-size: 14px;
  padding-right: 10px;
}

/** notes */
p.notes {
  font-size: 12px;
  font-style: italic;
}
p.notes i {
  color: var(--color-primary);
  font-size: 14px;
  padding-right: 10px;
}

.cz-bullet {
  color: var(--color-primary);
  padding-right: 10px;
}

/** White Header */
.cz-secondary-header {
  color: var(--color-default)!important;
}

/** Color Primary */
.cz-primary-color-text {
  color: var(--color-primary);
}

/** Align Override */
.cz-lg-right {
  text-align: right;
}

.cz-lg-left {
  text-align: left;
}

@media (max-width: 768px) {
  .cz-lg-right,
  .cz-lg-left {
    padding-bottom: 15px;
    text-align: center!important;
  }
}