: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: #FOF2F4; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #03315A; /* 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: #444444;  /* The default color of the main navmenu links */
  --nav-hover-color: #03315A; /* 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: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #03315A; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

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


    #cookie-banner {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #03315A;
      color: white;
      padding: 20px;
      text-align: center;
      z-index: 1000;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
      font-family: Arial, sans-serif;
    }

    #cookie-banner a {
      color: #fff;
      text-decoration: underline;
    }

    #cookie-banner button {
      background-color: white;
      color: #03315A;
      border: none;
      padding: 10px 20px;
      font-weight: bold;
      border-radius: 5px;
      margin-left: 20px;
      cursor: pointer;
    }

    #cookie-banner button:hover {
      background-color: #f0f0f0;
    }

.button-62 {
  background: linear-gradient(to bottom right, #03315A, #111);
  border: 0;
  border-radius: 12px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 2.5;
  outline: transparent;
  padding: 0 1rem;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}

.button-62:not([disabled]):focus {
  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(40, 50, 82, 0.5), .125rem .125rem 1rem rgba(11, 62, 227, 0.5);
}

.button-62:not([disabled]):hover {
  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(40, 50, 82, 0.5), .125rem .125rem 1rem rgba(11, 62, 227, 0.5);
}







/*--------------------------------------------------------------
# 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: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
  box-shadow: 0px 0px 20px 0px color-mix(in srgb, var(--default-color), transparent 90%);
}

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

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

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--contrast-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: color-mix(in srgb, var(--contrast-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

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

.header .branding {
  padding: 10px 0;
}

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

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

.header .logo h1 {
  font-size: 26px;
  padding: 0 0 0 8px;
  margin: 11px 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-left: 8px solid var(--accent-color);
}
/*--------------------------------------------------------------
# Navigation Menu - POPRAWIONE Z FLAGAMI
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
    display: flex;
    align-items: center;
  }

  .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: 18px 12px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 550;
    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:last-child a {
    padding-right: 0;
  }

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

  /* FLAGI W DESKTOP - w tej samej linii */
  .navmenu .language-flags-container {
    margin-left: 10px;
    padding-left: 15px;
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .navmenu .language-flags-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 1px;
    background-color: color-mix(in srgb, var(--nav-color), transparent 70%);
  }
  
  .navmenu .flag-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .navmenu .language-flags-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 32px;
    border-radius: 4px; /* Zaokrąglenie zmniejszone dla kwadratowego efektu */
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
  }
  
  .navmenu .language-flags-container a:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
  }
  
  .navmenu .language-flags-container a.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color), transparent 50%);
  }
  
  .navmenu .flag-img {
    width: 22px;
    height: 16px;
    border-radius: 2px;
    transition: transform 0.3s ease;
  }
  
  .navmenu .language-flags-container a:hover .flag-img {
    transform: scale(1.1);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

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

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    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(--nav-dropdown-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;
  }
}

/* Navmenu - Mobile - Z FLAGAMI NA DOLE */
@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;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .navmenu > ul {
    display: none;
    position: absolute;
    inset: 60px 0 70px 0; /* miejsce na flagi na dole */
    padding: 10px 0;
    margin: 0;
    background-color: var(--nav-dropdown-background-color);
    border: none;
    border-radius: 0;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    flex-direction: column;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 12px 20px;
    font-family: var(--nav-font);
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: normal;
    transition: 0.3s;
    border-bottom: 1px solid color-mix(in srgb, var(--nav-dropdown-color), transparent 90%);
  }

  .navmenu a:last-child {
    border-bottom: none;
  }

  .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: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .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: 0;
    margin: 0;
    background-color: color-mix(in srgb, var(--nav-dropdown-background-color), transparent 10%);
    transition: all 0.5s ease-in-out;
    border-left: 3px solid var(--accent-color);
  }

  .navmenu .dropdown ul a {
    padding-left: 30px;
    font-size: 15px;
  }

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

  .navmenu .dropdown>.dropdown-active {
    display: block;
  }

  /* FLAGI NA MOBILE - NA SAMYM DOLE */
  .navmenu .language-flags-container {
    display: none; /* ukryte domyślnie */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--nav-dropdown-background-color);
    padding: 15px 20px;
    border-top: 1px solid color-mix(in srgb, var(--nav-dropdown-color), transparent 80%);
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }

  .navmenu .flag-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }

  .navmenu .language-flags-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 40px;
    border-radius: 6px; /* Zaokrąglenie zmniejszone dla kwadratowego efektu */
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background-color: color-mix(in srgb, var(--nav-dropdown-background-color), transparent 20%);
    position: relative;
    overflow: hidden;
  }

  .navmenu .language-flags-container a:hover,
  .navmenu .language-flags-container a.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--accent-color), transparent 50%);
  }

  .navmenu .flag-img {
    width: 28px;
    height: 21px;
    border-radius: 3px;
  }

  .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.9);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu > ul {
    display: flex;
    animation: slideIn 0.3s ease-out;
  }

  /* POKAŻ FLAGI KIEDY MENU JEST OTWARTE */
  .mobile-nav-active .navmenu .language-flags-container {
    display: block;
    animation: slideUp 0.3s ease-out 0.1s both;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Styl dla scrollbar - opcjonalnie */
  .navmenu > ul::-webkit-scrollbar {
    width: 4px;
  }

  .navmenu > ul::-webkit-scrollbar-track {
    background: transparent;
  }

  .navmenu > ul::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-color), transparent 60%);
    border-radius: 10px;
  }
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #3c3c3c;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #0d6efd;
  --hover-color: #3399ff;
  --border-color: rgba(255, 255, 255, 0.1);
  --text-muted: rgba(255, 255, 255, 0.7);
  
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 30px;
  position: relative;
  background: linear-gradient(135deg, #3c3c3c 0%, #2d2d2d 100%);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
}

.footer .footer-newsletter {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 50px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.footer .footer-newsletter h4 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--heading-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
  display: flex;
  transition: all 0.3s ease;
  border-radius: 50px;
  backdrop-filter: blur(10px);
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
  transform: translateY(-2px);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 12px 20px;
  width: 100%;
  background-color: transparent;
  color: var(--default-color);
  font-size: 15px;
}

.footer .footer-newsletter .newsletter-form input[type=email]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.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: 12px 30px;
  margin: -7px -9px -7px 0;
  background: linear-gradient(135deg, var(--accent-color), var(--hover-color));
  color: var(--default-color);
  transition: all 0.3s ease;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: linear-gradient(135deg, var(--hover-color), var(--accent-color));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

.footer .footer-top {
  padding: 60px 0 30px;
}

.footer .footer-about {
  padding-right: 30px;
}

.footer .footer-about a {
  display: inline-block;
  transition: transform 0.3s ease;
}

.footer .footer-about a:hover {
  transform: translateY(-3px);
}

.footer .footer-about a img {
  transition: filter 0.3s ease;
}

.footer .footer-about a:hover img {
  filter: brightness(1.2);
}

.footer .footer-contact {
  margin-top: 20px;
}

.footer .footer-contact p {
  margin-bottom: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.footer .footer-contact strong {
  color: var(--heading-color);
  font-weight: 600;
}

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

.footer .footer-contact a:hover {
  color: var(--hover-color);
  text-decoration: underline;
}

.footer .social-links {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
  font-size: 16px;
  color: var(--default-color);
  transition: all 0.3s ease;
}

.footer .social-links a:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--default-color);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
}

.footer h4 {
  font-size: 18px;
  font-weight: 700;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 20px;
  color: var(--heading-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  border-radius: 2px;
}

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

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

.footer .footer-links ul i {
  margin-right: 10px;
  font-size: 14px;
  color: var(--accent-color);
  transition: transform 0.3s ease;
}

.footer .footer-links ul li {
  padding: 12px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

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

.footer .footer-links ul li:last-child {
  border-bottom: none;
}

.footer .footer-links ul li:hover {
  padding-left: 5px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.footer .footer-links ul li:hover i {
  transform: translateX(5px);
}

.footer .footer-links ul a {
  display: inline-block;
  color: var(--text-muted);
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.3s ease;
  flex-grow: 1;
}

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

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 10px;
  border-top: 1px solid var(--border-color);
  margin-top: 20px;
}

.footer .copyright p {
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.footer .copyright .sitename {
  color: var(--accent-color);
  font-weight: 700;
}

.footer .credits {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
}

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

.footer .credits a:hover {
  color: var(--hover-color);
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer {
    text-align: center;
  }
  
  .footer .footer-about {
    padding-right: 0;
    margin-bottom: 30px;
  }
  
  .footer h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer .footer-links ul li {
    justify-content: center;
  }
  
  .footer .social-links {
    justify-content: center;
  }
}

/* Animation for links */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer .footer-top > .row > div {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

.footer .footer-top > .row > div:nth-child(1) { animation-delay: 0.1s; }
.footer .footer-top > .row > div:nth-child(2) { animation-delay: 0.2s; }
.footer .footer-top > .row > div:nth-child(3) { animation-delay: 0.3s; }
.footer .footer-top > .row > div:nth-child(4) { animation-delay: 0.4s; }
/*--------------------------------------------------------------
# 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;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

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

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  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: color-mix(in srgb, var(--default-color), transparent 96%);
  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: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# 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-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}
/*--------------------------------------------------------------
# Hero Section - POPRAWIONA WERSJA Z DZIAŁAJĄCYMI PRZYCISKAMI
--------------------------------------------------------------*/
.hero {
  padding: 0;
  position: relative;
  overflow: hidden;
}

.hero .carousel {
  width: 100%;
  min-height: 85vh;
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  position: relative;
  z-index: 1;
}

@media (max-height: 400px) {
  .hero .carousel {
    min-height: 130vh;
  }
}

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

.hero .carousel-item {
  position: relative;
  height: 85vh;
  background-size: cover;
  background-position: center;
}

.hero .carousel-item::before {
  content: '';
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  padding: 20px;
}

.hero .carousel-container .container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .carousel-content {
  width: 100%;
  padding-bottom: 80px; /* Miejsce na kropki */
}

.hero .carousel-item h2 {
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  animation: fadeInDown 1s both;
}

.hero .carousel-item h2 span {
  color: var(--accent-color);
  display: inline-block;
}

.hero .carousel-item h2 .hero-logo {
  max-height: 60px;
  width: auto;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.hero .hero-description {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 30px;
  color: #111;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  animation: fadeInDown 1s both 0.2s;
  max-width: 1000px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  text-align: center;

}

.hero .btn-get-started {
  color: #fff;
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: all 0.3s ease;
  margin: 10px;
  animation: fadeInUp 1s both 0.4s;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid transparent;
  position: relative;
  z-index: 30; /* Wyższy z-index niż kropki */
}

.hero .btn-get-started:hover {
  background: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Kropki nawigacyjne */
.hero .carousel-indicators {
  position: absolute;
  bottom: 100px; /* Wyżej niż featured items */
  left: 0;
  right: 0;
  z-index: 15; /* Niższy niż przycisk */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.hero .carousel-indicators button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  margin: 0 5px;
  opacity: 1;
  transition: all 0.3s ease;
  cursor: pointer;
  box-sizing: content-box;
  background-clip: padding-box;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero .carousel-indicators button.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  transform: scale(1.2);
  width: 16px;
  height: 16px;
  box-shadow: 0 4px 12px rgba(3, 49, 90, 0.5);
}

.hero .carousel-indicators button:hover {
  background-color: #fff;
  border-color: #fff;
  transform: scale(1.25);
}

/* RESPONSYWNOŚĆ */

/* Duże desktopy */
@media (min-width: 1400px) {
  .hero .carousel-indicators {
    bottom: 120px;
  }
}

/* Standardowe desktopy */
@media (max-width: 1399px) and (min-width: 1200px) {
  .hero .carousel-indicators {
    bottom: 110px;
  }
  .hero .carousel-item h2 {
    font-size: 44px;
  }
  .hero .hero-description {
    font-size: 17px;
    max-width: 900px;
  }
}

/* Tablety poziome i małe desktopy */
@media (max-width: 1199px) {
  .hero .carousel-indicators {
    bottom: 90px;
  }
  
  .hero .carousel-item h2 {
    font-size: 40px;
    margin-bottom: 25px;
  }
  
  .hero .hero-description {
    font-size: 16px;
    margin-bottom: 25px;
    max-width: 850px;
    line-height: 1.6;
  }
  
  .hero .btn-get-started {
    padding: 11px 35px;
    font-size: 15px;
  }
}

/* Tablety pionowe */
@media (max-width: 991px) {
  .hero .carousel-indicators {
    bottom: 70px;
  }
  
  .hero .carousel-indicators button {
    width: 12px;
    height: 12px;
  }
  
  .hero .carousel-indicators button.active {
    width: 14px;
    height: 14px;
  }
  
  .hero .carousel-item h2 {
    font-size: 36px;
    margin-bottom: 20px;
  }
  
  .hero .hero-description {
    font-size: 15px;
    margin-bottom: 20px;
    max-width: 750px;
    width: 85%;
  }
  
  .hero .btn-get-started {
    padding: 10px 30px;
    font-size: 14px;
  }
}

/* Duże telefony */
@media (max-width: 768px) {
  .hero .carousel-indicators {
    bottom: 60px;
  }
  
  .hero .carousel-indicators {
    gap: 8px;
  }
  
  .hero .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
  }
  
  .hero .carousel-indicators button.active {
    width: 12px;
    height: 12px;
  }
  
  .hero .carousel-item h2 {
    font-size: 30px;
    margin-bottom: 15px;
  }
  
  .hero .carousel-item h2 .hero-logo {
    max-height: 40px;
    margin-bottom: 15px;
  }
  
  .hero .hero-description {
    font-size: 14px;
    margin-bottom: 15px;
    max-width: 650px;
    width: 90%;
    line-height: 1.5;
    text-align: center;
    padding: 0 15px;
  }
  
  .hero .btn-get-started {
    padding: 8px 24px;
    font-size: 13px;
  }
}

/* Małe telefony */
@media (max-width: 576px) {
  .hero .carousel-indicators {
    bottom: 50px;
  }
  
  .hero .carousel-indicators {
    gap: 6px;
  }
  
  .hero .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-width: 1.5px;
  }
  
  .hero .carousel-indicators button.active {
    width: 10px;
    height: 10px;
  }
  
  .hero .carousel-item h2 {
    font-size: 24px;
    margin-bottom: 12px;
    line-height: 1.3;
  }
  
  .hero .carousel-item h2 .hero-logo {
    max-height: 32px;
    margin-bottom: 10px;
  }
  
  .hero .hero-description {
    font-size: 13px;
    margin-bottom: 12px;
    max-width: 100%;
    width: 95%;
    padding: 0 10px;
    text-align: center;
  }
  
  .hero .btn-get-started {
    padding: 7px 20px;
    font-size: 12px;
  }
}

/* Bardzo małe telefony */
@media (max-width: 375px) {
  .hero .carousel-indicators {
    bottom: 45px;
  }
  
  .hero .carousel-indicators {
    gap: 4px;
  }
  
  .hero .carousel-indicators button {
    width: 6px;
    height: 6px;
    border-width: 1px;
  }
  
  .hero .carousel-indicators button.active {
    width: 8px;
    height: 8px;
  }
  
  .hero .carousel-item h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .hero .hero-description {
    font-size: 12px;
    margin-bottom: 8px;
    max-height: 80px;
    overflow-y: auto;
    padding: 0 5px;
  }
  
  .hero .btn-get-started {
    padding: 6px 16px;
    font-size: 11px;
  }
}

/* Dla ekranów o małej wysokości */
@media (max-height: 700px) {
  .hero .carousel-indicators {
    bottom: 45px;
  }
  .hero .hero-description {
    max-height: 100px;
    overflow-y: auto;
  }
}

@media (max-height: 550px) {
  .hero .carousel-indicators {
    bottom: 35px;
  }
  .hero .carousel-item {
    height: 100vh;
    min-height: 550px;
  }
  .hero .carousel-item h2 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .hero .hero-description {
    font-size: 12px;
    margin-bottom: 8px;
    max-height: 70px;
  }
  .hero .btn-get-started {
    padding: 6px 16px;
    font-size: 11px;
  }
}

/* Ukrywamy domyślne strzałki Bootstrap */
.hero .carousel-control-prev,
.hero .carousel-control-next {
  display: none;
}

/* Featured Items */
.hero .featured {
  margin-top: -80px;
  padding: 30px 0;
  position: relative;
  z-index: 10;
}

@media (max-width: 992px) {
  .hero .featured {
    margin-top: 0;
    padding: 60px 0 30px;
  }
}

.hero .featured-item {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  padding: 40px 30px;
  transition: all 0.3s ease;
  height: 100%;
  border-radius: 15px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}

.hero .featured-item::before {
  content: '';
  position: absolute;
  background: var(--accent-color);
  inset: 100% 0 0 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.hero .featured-item .icon {
  margin-bottom: 20px;
}

.hero .featured-item .icon i {
  color: var(--accent-color);
  font-size: 48px;
  transition: all 0.3s ease;
}

.hero .featured-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.hero .featured-item h4 a {
  color: var(--heading-color);
  transition: all 0.3s ease;
  text-decoration: none;
}

.hero .featured-item p {
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 0;
  transition: all 0.3s ease;
  color: #666;
}

.hero .featured-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 45px rgba(0,0,0,0.15);
}

.hero .featured-item:hover::before {
  inset: 0;
}

.hero .featured-item:hover .icon i,
.hero .featured-item:hover h4 a,
.hero .featured-item:hover p {
  color: #fff;
}

/* Animacje */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
    .symphony-section {
      background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
      padding: 60px 0;
    }
    
    .symphony-header {
      text-align: center;
      margin-bottom: 50px;
    }
    
    .symphony-header h1 {
      font-size: 2.5rem;
      font-weight: 700;
      color: #1a1f3a;
      margin-bottom: 15px;
    }
    
    .symphony-header h1 span {
      color: #2d5a9b;
      display: block;
      font-size: 1.8rem;
      font-weight: 500;
    }
    
    .symphony-subheader {
      font-size: 1.2rem;
      color: #5a6a7e;
      font-weight: 400;
    }
    
    .symphony-card {
      background: #ffffff;
      border: 1px solid #e5e9f0;
      border-radius: 15px;
      padding: 35px;
      margin-bottom: 30px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.02);
      transition: all 0.3s ease;
    }
    
    .symphony-card:hover {
      box-shadow: 0 10px 30px rgba(45, 90, 155, 0.08);
      border-color: #cbd5e0;
    }
    
    .symphony-card h2 {
      font-size: 1.6rem;
      font-weight: 600;
      color: #1a1f3a;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 2px solid #eef2f6;
    }
    
    .symphony-card h3 {
      font-size: 1.3rem;
      font-weight: 600;
      color: #2d5a9b;
      margin: 25px 0 15px 0;
    }
    
    .symphony-card p {
      font-size: 1rem;
      line-height: 1.7;
      color: #3a4a62;
      margin-bottom: 20px;
    }
    
    .symphony-list {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
    }
    
    .symphony-list li {
      margin-bottom: 15px;
      padding-left: 30px;
      position: relative;
      color: #3a4a62;
    }
    
    .symphony-list li:before {
      content: "•";
      color: #2d5a9b;
      font-weight: bold;
      font-size: 1.5rem;
      position: absolute;
      left: 0;
      top: -5px;
    }
    
    .symphony-list li strong {
      color: #1a1f3a;
      font-weight: 600;
    }
    
    .symphony-table {
      width: 100%;
      border-collapse: collapse;
      margin: 30px 0;
    }
    
    .symphony-table th {
      background: #f0f4fa;
      color: #1a1f3a;
      font-weight: 600;
      padding: 15px 20px;
      text-align: left;
      border-bottom: 2px solid #2d5a9b;
    }
    
    .symphony-table td {
      padding: 15px 20px;
      border-bottom: 1px solid #e5e9f0;
      color: #3a4a62;
    }
    
    .symphony-table td:first-child {
      font-weight: 600;
      color: #1a1f3a;
      width: 30%;
    }
    
    .symphony-table tr:hover td {
      background: #f8faff;
    }
    
    .symphony-badge {
      display: inline-block;
      background: #eef2f6;
      color: #2d5a9b;
      padding: 5px 15px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 500;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    
    .symphony-badge i {
      margin-right: 5px;
    }
    
    .symphony-stats {
      display: flex;
      gap: 40px;
      margin: 30px 0;
    }
    
    .symphony-stat {
      text-align: center;
    }
    
    .symphony-stat-number {
      font-size: 2rem;
      font-weight: 700;
      color: #2d5a9b;
      display: block;
    }
    
    .symphony-stat-label {
      font-size: 0.9rem;
      color: #7a8a9e;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .symphony-note {
      background: #f0f4fa;
      border-left: 4px solid #2d5a9b;
      padding: 20px 30px;
      border-radius: 10px;
      margin: 40px 0;
    }
    
    .symphony-note p {
      margin: 0;
      font-size: 1.1rem;
      color: #1a1f3a;
      font-weight: 500;
    }
    
    .symphony-footer-text {
      text-align: center;
      font-size: 1.2rem;
      color: #1a1f3a;
      font-weight: 500;
      margin: 40px 0 20px 0;
    }
    
    @media (max-width: 768px) {
      .symphony-header h1 {
        font-size: 2rem;
      }
      
      .symphony-header h1 span {
        font-size: 1.4rem;
      }
      
      .symphony-card {
        padding: 25px;
      }
      
      .symphony-stats {
        flex-direction: column;
        gap: 20px;
      }
      
      .symphony-table td:first-child {
        width: auto;
      }
    }
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

.about .content .fst-italic {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

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

.about .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 1.25rem;
}

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











/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about2 {
  padding-top: 100px;
}

.about2 .content h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
  border-radius: 7px;
  display: inline-block;
}

.about2 .content h2 {
  font-weight: 700;
}

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

.about2 .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 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.about2 .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 19px;
}

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

.about2 .icon-box {
  background-color: var(--surface-color);
  padding: 50px 40px;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease-out 0s;
}

.about2 .icon-box i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 0;
  transition: all 0.4s ease-out 0s;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.about2 .icon-box h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
}

.about2 .icon-box p {
  margin-bottom: 0;
}

.about2 .icon-box:hover i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.about2 .icon-boxes .col-md-6:nth-child(2) .icon-box,
.about2 .icon-boxes .col-md-6:nth-child(4) .icon-box {
  margin-top: -40px;
}

@media (max-width: 768px) {

  .about2 .icon-boxes .col-md-6:nth-child(2) .icon-box,
  .about2 .icon-boxes .col-md-6:nth-child(4) .icon-box {
    margin-top: 0;
  }
}



/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: #111;
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

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

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}




/*--------------------------------------------------------------
# Details Section
--------------------------------------------------------------*/
.details .features-item {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.details .features-item+.features-item {
  margin-top: 100px;
}

@media (max-width: 640px) {
  .details .features-item+.features-item {
    margin-top: 40px;
  }
}

.details .features-item h3 {
  font-weight: 700;
  font-size: 32px;
  color: #03315A;
}
.details .features-item p {
  font-weight: 400;
  font-size: 18px;
}

.details .features-item ul {
  list-style: none;
  padding: 0;
}

.details .features-item ul li {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

.details .features-item ul li:last-child {
  padding-bottom: 0;
}

.details .features-item ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.details .features-item p:last-child {
  margin-bottom: 0;
}

.details .features-item  i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}


/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  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);
  border-radius: 4px;
  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: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 5px;
  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 .readmore  {
  line-height: 24px;
  font-size: 18px;
  margin-bottom: 0;
}
.services .service-item:hover .readmore  {
  color: #fff;
}
.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: color-mix(in srgb, var(--background-color), transparent 70%);
}

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






/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services2 .img {
  border-radius: 8px;
  overflow: hidden;
}

.services2 .img img {
  transition: 0.6s;
}

.services2 .details {
  padding: 50px 30px;
  margin: -100px 30px 0 30px;
  transition: all ease-in-out 0.3s;
  position: relative;
  background: color-mix(in srgb, var(--contrast-color), transparent 5%);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px color-mix(in srgb, var(--default-color), transparent 92%);
}

.services2 .details .icon {
  margin: 0;
  width: 72px;
  height: 72px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 6px solid var(--contrast-color);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 28px;
  transition: ease-in-out 0.3s;
  position: absolute;
  top: -36px;
  left: calc(50% - 36px);
}

.services2 .details h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services2 .details p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services2 .service2-item:hover .details h3 {
  color: var(--accent-color);
}

.services2 .service2-item:hover .details .icon {
  background: var(--contrast-color);
  border: 2px solid var(--accent-color);
}

.services2 .service2-item:hover .details .icon i {
  color: var(--accent-color);
}

.services2 .service2-item:hover .img img {
  transform: scale(1.2);
}














/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

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

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

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item i {
  color: var(--accent-color);
  display: block;
  font-size: 44px;
  float: left;
  line-height: 0;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 48px;
  line-height: 40px;
  display: block;
  font-weight: 700;
  margin-left: 60px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0 0 0 60px;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  box-shadow: 0px 2px 12px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  position: relative;
  height: 100%;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

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

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

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

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.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;
  transform: scale(-1, -1);
}

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

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

.skills .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

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

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

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

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

.skills .progress .skill {
  color: var(--default-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

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

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

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

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

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

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.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: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

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

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.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;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}




/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action .container {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/era-capital-kontakt.jpg") center center;
  background-size: cover;
  padding: 100px 60px;
  border-radius: 15px;
  overflow: hidden;
}

.call-to-action h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.call-to-action p {
  color: #fff;
  margin-bottom: 20px;
}

.call-to-action .play-btn {
  width: 94px;
  height: 94px;
  margin-bottom: 20px;
  background: radial-gradient(var(--color-primary) 50%, rgba(0, 131, 116, 0.4) 52%);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.call-to-action .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(0, 131, 116, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.call-to-action .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.call-to-action .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.call-to-action .play-btn:hover:after {
  border-left: 15px solid var(--color-primary);
  transform: scale(20);
}

.call-to-action .cta-btn {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 48px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
}

.call-to-action .cta-btn:hover {
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

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







/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
  border-radius: 5px;
  transition: 0.5s;
  padding: 30px;
  height: 100%;
}

@media (max-width: 468px) {
  .team .team-member {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
  }
}

.team .team-member .pic {
  overflow: hidden;
  width: 150px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team .team-member .pic img {
  transition: ease-in-out 0.3s;
}

.team .team-member:hover {
  transform: translateY(-10px);
}

.team .team-member .member-info {
  padding-left: 30px;
}

@media (max-width: 468px) {
  .team .team-member .member-info {
    padding: 30px 0 0 0;
    text-align: center;
  }
}

.team .team-member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
}

.team .team-member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .team-member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  bottom: 0;
  left: 0;
}

@media (max-width: 468px) {
  .team .team-member span::after {
    left: calc(50% - 25px);
  }
}

.team .team-member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.team .team-member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
}

@media (max-width: 468px) {
  .team .team-member .social {
    justify-content: center;
  }
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 76px;
  height: 76px;
}

.team .team-member .social a i {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  margin: 0 2px;
}

.team .team-member .social a:hover {
  background: #ece4d9;
}

.team .team-member .social a:hover i {
  color: var(--contrast-color);
}

.team .team-member .social a+a {
  margin-left: 8px;
}








/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
  padding: 120px 0;
}

.pricing .section-title {
  margin-bottom: 40px;
}

.pricing .pricing-item {
  box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 60px 40px;
  height: 100%;
  position: relative;
  border-radius: 15px;
}

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

.pricing .icon {
  margin: 30px auto 20px auto;
  width: 70px;
  height: 70px;
  background: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.pricing .icon i {
  color: var(--background-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
  line-height: 0;
}

.pricing .icon::before {
  position: absolute;
  content: "";
  height: 86px;
  width: 86px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.pricing .icon::after {
  position: absolute;
  content: "";
  height: 102px;
  width: 102px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-2px);
}

.pricing h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-weight: 700;
  font-family: var(--heading-font);
  margin-bottom: 25px;
  text-align: center;
}

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

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
  font-weight: 400;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  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: color-mix(in srgb, var(--default-color), transparent 70%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

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

.pricing .buy-btn {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

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

.pricing .featured {
  z-index: 10;
  border: 3px solid var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured {
    transform: scale(1.15);
  }
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts {
  padding-top: 30px;
}

.blog-posts article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
}

.blog-posts .post-img {
  max-height: 440px;
  margin: -30px -30px 0 -30px;
  overflow: hidden;
}

.blog-posts .title {
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-posts .meta-top ul li+li {
  padding-left: 20px;
}

.blog-posts .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-posts .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-posts .content {
  margin-top: 20px;
}

.blog-posts .content .read-more {
  text-align: right;
}

.blog-posts .content .read-more a {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 30px;
  transition: 0.3s;
  font-size: 14px;
  border-radius: 4px;
}

.blog-posts .content .read-more a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-top: 30px;
  padding-bottom: 0;
}

.blog-details .article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding-top: 30px;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding-top: 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

.blog-comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog-comments .reply-form p {
  font-size: 14px;
}

.blog-comments .reply-form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.blog-comments .reply-form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.blog-comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog-comments .reply-form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.blog-comments .reply-form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

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

.contact .info-item h3 {
  font-size: 20px;
  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 color-mix(in srgb, var(--default-color), transparent 90%);
}

@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: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.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: color-mix(in srgb, var(--default-color), transparent 70%);
}

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

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

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

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

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  padding: 30px;
  margin: 30px 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

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

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}