/**
* Template Name: Day
* Template URL: https://bootstrapmade.com/day-multipurpose-html-template-for-free/
* Updated: Jun 14 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #191919; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #cc1616; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff; /* The default color of the main navmenu links */
  --nav-hover-color: #cc1616; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #cc1616; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

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

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: rgba(204, 22, 22, 0.7);
  text-decoration: none;
}

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: #242424;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --contrast-color: #ffffff;
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}

.header .topbar {
  background-color: var(--background-color);
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--accent-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--default-color);
}

@media (max-width: 575px) {
  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: rgba(68, 68, 68, 0.60);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--accent-color);
}

.header .branding {
  color: rgba(68, 68, 68, 0.05);
  min-height: 50px;
}

.header .logo {
  line-height: 1;
}

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

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--heading-color);
}

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

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

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 20px 15px;
    margin-left: 2px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

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

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

  .navmenu .dropdown ul {
    margin: 0;
    padding: 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 2px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
  }

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

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    margin: 0;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

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

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

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

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

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

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px
      rgba(68, 68, 68, 0.05);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: rgba(68, 68, 68, 0.10);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown > .dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

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

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.20);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu > ul {
    display: block;
  }
}

/* Listing Dropdown - Desktop */
@media (min-width: 1200px) {
  .navmenu .listing-dropdown {
    position: static;
  }

  .navmenu .listing-dropdown ul {
    margin: 0;
    padding: 10px;
    background: var(--nav-dropdown-background-color);
    box-shadow: 0px 0px 20px
      rgba(68, 68, 68, 0.05);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .listing-dropdown ul li {
    flex: 1;
  }

  .navmenu .listing-dropdown ul li a,
  .navmenu .listing-dropdown ul li:hover > a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
    background-color: var(--nav-dropdown-background-color);
  }

  .navmenu .listing-dropdown ul li a:hover,
  .navmenu .listing-dropdown ul li .active,
  .navmenu .listing-dropdown ul li .active:hover {
    color: var(--nav-dropdown-hover-color);
    background-color: var(--nav-dropdown-background-color);
  }

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

/* Listing Dropdown - Mobile */
@media (max-width: 1199px) {
  .navmenu .listing-dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .listing-dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .listing-dropdown > .dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #0c0c0c;
  --default-color: #ffffff;
  --heading-color: #f9f9f9;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid
    rgba(68, 68, 68, 0.05);
}

.footer .footer-about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(68, 68, 68, 0.05);
  border-top: 4px solid var(--accent-color);
  padding: 30px 20px;
}

.footer .footer-about .logo {
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-size: 36px;
  padding: 0;
  font-weight: 700;
}

.footer .footer-about p {
  font-size: 14px;
  text-align: center;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(68, 68, 68, 0.5);
  font-size: 16px;
  color: rgba(68, 68, 68, 0.70);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: rgba(255, 255, 255, 0.70);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  border-radius: 0;
  border: 1px solid rgba(68, 68, 68, 0.20);
  display: flex;
  background-color: var(--background-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type="email"] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--background-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type="email"]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type="submit"] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -8px -9px -8px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0;
}

.footer .footer-newsletter .newsletter-form input[type="submit"]:hover {
  background: rgba(68, 68, 68, 0.80);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

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

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

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid
    rgba(68, 68, 68, 0.05);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

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

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

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  left: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: rgba(68, 68, 68, 0.80);
  color: var(--contrast-color);
}

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

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: #0c0c0c;
  --default-color: var(--contrast-color);
  --heading-color: var(--contrast-color);
  --accent-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

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

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

.page-title .breadcrumbs ol li + li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: rgba(68, 68, 68, 0.7);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {
  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

.section-title span {
  position: absolute;
  top: 4px;
  color: rgba(25, 25, 25, 0.05);
  left: 0;
  right: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  line-height: 1;
}

.section-title p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 575px) {
  .section-title h2 {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .section-title span {
    font-size: 38px;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --background-color: #000000;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 160px 0 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}


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

.hero h2 {
  margin: 0;
  font-size: 48px;
  text-transform: uppercase;
  font-weight: 700;
}

.hero p {
  margin: 10px 0 0 0;
  font-size: 24px;
  color: var(--heading-color);
}

.hero .btn-get-started {
  color: var(--default-color);
  font-weight: 400;
  font-size: 15px;
  display: inline-block;
  padding: 8px 30px;
  margin: 30px 0 0 0;
  transition: 0.5s;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, 1);
}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
  border-color: var(--accent-color);
}

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

  .hero p {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

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

.about .content ul li {
  padding-bottom: 10px;
}

.about .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: var(--accent-color);
}

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

.about .content .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 30px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .content .read-more:hover {
  background: rgba(68, 68, 68, 0.80);
  padding-right: 25px;
}

.about .content .read-more:hover i {
  margin-left: 10px;
}

/*--------------------------------------------------------------
# Cards Section
--------------------------------------------------------------*/
.cards .card {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid rgba(68, 68, 68, 0.05);
  padding: 40px;
  margin: -1px;
  border-radius: 0;
}

.cards .card span {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: var(--accent-color);
}

.cards .card h4 {
  color: rgba(25, 25, 25, 0.80);
  font-size: 24px;
  font-weight: 600;
  padding: 0;
  margin: 20px 0;
}

.cards .card p {
  color: rgba(68, 68, 68, 0.60);
  font-size: 15px;
  margin: 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  --color: rgba(68, 68, 68, 0.05);
  padding: 15px 0;
}

.clients .swiper {
  padding: 10px 0;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-slide img {
  transition: 0.3s;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  border: 1px solid rgba(68, 68, 68, 0.15);
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: rgba(68, 68, 68, 0.20);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

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

.services .service-item:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.services .service-item:hover .icon {
  background: var(--contrast-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item:hover .icon::before {
  background: rgba(255, 255, 255, 0.7);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px rgba(68, 68, 68, 0.10);
  height: 100%;
  position: relative;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.pricing h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: rgba(68, 68, 68, 0.6);
  font-size: 18px;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: rgba(68, 68, 68, 0.70);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: rgba(68, 68, 68, 0.6);
}

.pricing ul .na i {
  color: rgba(68, 68, 68, 0.6);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: rgba(68, 68, 68, 0.60);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  border: 1px solid rgba(68, 68, 68, 0.6);
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.pricing .buy-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  z-index: 10;
}

.pricing .featured .pricing-item {
  background: var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured .pricing-item {
    transform: scale(1.02, 1.1);
  }
}

.pricing .featured h3,
.pricing .featured h4,
.pricing .featured h4 span,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul i,
.pricing .featured ul .na i {
  color: var(--contrast-color);
}

.pricing .featured .buy-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--contrast-color);
}

.pricing .featured .buy-btn:hover {
  background: rgba(255, 255, 255, 0.102);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px
    rgba(68, 68, 68, 0.05);
}

.contact .info-item i {
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted rgba(68, 68, 68, 0.60);
}

.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

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

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px
    rgba(68, 68, 68, 0.05);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

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

.contact .php-email-form input[type="text"],
.contact .php-email-form input[type="email"],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(68, 68, 68, 0.20);
}

.contact .php-email-form input[type="text"]:focus,
.contact .php-email-form input[type="email"]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type="text"]::placeholder,
.contact .php-email-form input[type="email"]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: rgba(68, 68, 68, 0.7);
}

.contact .php-email-form button[type="submit"] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 8px 30px 10px 30px;
  transition: 0.4s;
  border-radius: 0;
}

.contact .php-email-form button[type="submit"]:hover {
  background: rgba(68, 68, 68, 0.80);
}

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

  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/* WA */
.wptwa-container,
.wptwa-container * {
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.wptwa-container {
  position: fixed;
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  text-align: right;
  font-family: helvetica;
  font-size: 13px;
  line-height: 1.4em;
  max-width: 400px;
  max-height: 100%;
  overflow-y: auto;
  z-index: 100000;
}
.wptwa-container.left-side {
  right: auto;
  left: 0;
  text-align: left;
}
.wptwa-container p:first-child {
  margin-top: 0;
}
.wptwa-container p:last-child {
  margin-bottom: 0;
}
.wptwa-container a {
  text-decoration: none;
}
.wptwa-container .wptwa-clearfix:before,
.wptwa-container .wptwa-clearfix:after {
  content: "";
  display: block;
  clear: both;
}
/* --- */

.wptwa-container .wptwa-box {
  text-align: left;
  background: white;
  border: 1px solid #f5f5f5;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.02);
  padding: 20px 20px 10px;
  margin: 20px 20px 0;
  border-radius: 2px;
  position: relative;
  border-radius: 6px 6px 0 0;
  display: none;
  transition: all 0.2s;
}
.wptwa-container .wptwa-box.show {
  display: block;
}
.wptwa-container .wptwa-box:before,
.wptwa-container .wptwa-box:after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 22px;
  width: 13px;
  height: 13px;
  background: white;
  transform: rotate(45deg);
  z-index: 1;
  border: 1px solid #f5f5f5;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.02);
}
.wptwa-container.left-side .wptwa-box:before,
.wptwa-container.left-side .wptwa-box:after {
  right: auto;
  left: 22px;
}
.wptwa-container .wptwa-box:before {
  z-index: 2;
  box-shadow: none;
  background: white;
  transform: none;
  bottom: 0;
  width: 19px;
  right: 17px;
  border-color: white;
}
.wptwa-container .wptwa-box ul {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.wptwa-description {
  border-radius: 6px 6px 0 0;
  background: rgb(26 161 48);
  padding: 20px;
  padding-right: 30px;
  margin: -20px -20px 10px;
  color: white;
}
.wptwa-description p {
  color: inherit;
}
.wptwa-description p:last-child {
  margin-bottom: 0;
}

.wptwa-container .wptwa-account {
  color: inherit;
  display: block;
  padding: 10px 10px;
  margin: 0 -10px -1px;
  border-radius: 10px;
  position: relative;
  z-index: 3;
}
.wptwa-container .wptwa-account:not(:last-child):after {
  content: "";
  display: block;
  background: #f5f5f5;
  height: 1px;
  width: 100%;
  max-width: calc(100% - 20px);
  position: absolute;
  bottom: 0;
  left: 10px;
}
.wptwa-container .wptwa-account:first-child {
  margin-top: -10px;
}
.wptwa-container .wptwa-description ~ .wptwa-people .wptwa-account:first-child {
  margin-top: 0;
}
.wptwa-container .wptwa-account:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.wptwa-container .wptwa-account:hover {
  background: #f5f5f5;
  border-color: transparent;
}
.wptwa-container .wptwa-account .wptwa-face {
  width: 40px;
  height: 40px;
  margin-right: 15px;
  float: left;
  position: relative;
}
.wptwa-container .wptwa-account .wptwa-face.no-image:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent url("../images/logo-green-small.png") center center
    no-repeat;
  background-size: 100%;
  z-index: 1;
}
.wptwa-container .wptwa-account.wptwa-group .wptwa-face.no-image:before {
  background: transparent url("../images/logo-group.png") center center
    no-repeat;
}
.wptwa-container .wptwa-account .wptwa-face:after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  bottom: 0;
  right: -5px;
  background: transparent url("../images/logo-green-small.png") center center
    no-repeat;
  background-size: cover;
  z-index: 4;
}
.wptwa-container .wptwa-account.wptwa-group .wptwa-face:after {
  background: transparent url("../images/logo-group.png") center center
    no-repeat;
  background-size: contain;
}
.wptwa-container .wptwa-account .wptwa-face.no-image:after {
  content: none;
}
.wptwa-container .wptwa-account .wptwa-info {
  position: relative;
  top: 2px;
  color: inherit;
  float: left;
  width: calc(100% - 55px);
}
.wptwa-container .wptwa-account .wptwa-title {
  font-size: 11px;
  line-height: 100%;
  opacity: 0.5;
}
.wptwa-container .wptwa-account .wptwa-name {
  font-weight: bold;
  display: block;
}
.wptwa-container .wptwa-account .wptwa-name:only-child {
  position: relative;
  top: 10px;
}
.wptwa-container .wptwa-account img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.wptwa-container .wptwa-handler {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  color: white;
  background: rgb(26 161 48);
  padding: 10px 15px;
  border-radius: 50px;
  line-height: 120%;
  white-space: nowrap;
  text-align: center;
  transition: all 0.3s;
  position: relative;
  margin: 20px;
  z-index: 3;
}
.wptwa-container.circled-handler .wptwa-handler {
  width: 60px;
  height: 60px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 20px rgba(0, 0, 0, 0.16);
}
.wptwa-container.circled-handler .wptwa-handler:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09), 0 4px 20px rgba(0, 0, 0, 0.24);
}
.wptwa-container .wptwa-handler:hover {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.wptwa-container .wptwa-box ul a {
  padding: 7px 14px;
  background: #445963;
}
.wptwa-container .wptwa-handler svg {
  max-width: 15px;
  fill: #fff;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}
.wptwa-container.circled-handler svg {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(1.7);
}
.wptwa-container .wptwa-close {
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 7px;
  right: 7px;
  opacity: 0.5;
  visibility: hidden;
  transition: opacity 0.3s;
}
.wptwa-container .wptwa-description + .wptwa-close {
  visibility: visible;
}
.wptwa-container .wptwa-close:hover {
  cursor: pointer;
  opacity: 1;
}
.wptwa-container .wptwa-close:before,
.wptwa-container .wptwa-close:after {
  content: "";
  display: block;
  background: white;
  width: 15px;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
}
.wptwa-container .wptwa-close:after {
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
}

/* In page style */
.whatsapp-custom-styled {
  display: inline-block;
  line-height: 100%;
  padding: 10px 15px;
  margin: 2px 0;
  border-radius: 2px;
  text-decoration: none !important;
  border: none !important;
  transition: background 0.15s, color 0s;
}
.whatsapp-custom-styled:hover {
  text-decoration: none !important;
  border: none !important;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
}
.whatsapp-custom-styled svg {
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.whatsapp-custom-styled svg:only-child {
  margin-right: 0;
}

.whatsapp-custom-styled.no-icon {
  padding: 13px 15px;
}
.whatsapp-custom-styled.no-icon svg {
  display: none;
}

/* In widget */
.widget .whatsapp-custom-styled {
  transition: background 0.15s, color 0s;
}
.whatsapp-custom-styled.block-level {
  display: block;
  text-align: center;
  line-height: 1.3em;
  padding-top: 10px;
  padding-bottom: 10px;
}
.whatsapp-custom-styled.block-level.align-left {
  text-align: left;
}

@media screen and (min-width: 1025px) {
  .wptwa-flag:after {
    content: "desktop";
    display: none;
  }

  .wptwa-container.circled-handler-on-desktop .wptwa-handler {
    width: 60px;
    height: 60px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 20px rgba(0, 0, 0, 0.16);
  }
  .wptwa-container.circled-handler-on-desktop .wptwa-handler:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09), 0 4px 20px rgba(0, 0, 0, 0.24);
  }
  .wptwa-container.circled-handler-on-desktop .wptwa-handler .text {
    display: none;
  }
  .wptwa-container.circled-handler-on-desktop svg {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(1.7);
  }
}

@media screen and (max-width: 782px) {
  .wptwa-flag:after {
    content: "mobile";
    display: none;
  }

  .wptwa-container.circled-handler-on-mobile .wptwa-handler {
    width: 60px;
    height: 60px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 20px rgba(0, 0, 0, 0.16);
  }
  .wptwa-container.circled-handler-on-mobile .wptwa-handler:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09), 0 4px 20px rgba(0, 0, 0, 0.24);
  }
  .wptwa-container.circled-handler-on-mobile .wptwa-handler .text {
    display: none;
  }
  .wptwa-container.circled-handler-on-mobile svg {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) scale(1.7);
  }
}

/* Popup */
/* Styling for the modal overlay */
#myModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999; /* Ensure the modal overlay is on top */
}

/* Styling for the modal content */
#modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
}

/* Styling for the close button */
#close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}