/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21lVGdeOcEg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21lVF9eO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLufntAKPY.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLucHtA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmg1hVGdeOcEg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmg1hVF9eO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15VGdeOcEg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15VF9eO.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fonts */
:root {
  --default-font: "Poppins", sans-serif;
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #212529;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #32353a;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #e9e9e9;

  /* Contrast Color - This is a color used for text 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. */
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #3a3939;

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #e84545;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #3a3939;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #e84545;
}

/* Smooth scroll */
/* :root {
  scroll-behavior: smooth;
} */
html {
  scroll-behavior: auto !important;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  /* background: #f1f1f1; */
  background: #d3d3d3;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #FFC66D;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffa212;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html, body {
  font-display:swap!important;
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: #3a8bca;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #75aeda;
  text-decoration: none;
}

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: rgba(255, 255, 255, 0);
  padding: 10px 0;
  -webkit-transition: all 0.5s ease, top 0.5s ease-in-out;
  -moz-transition: all 0.5s ease, top 0.5s ease-in-out;
  -o-transition: all 0.5s ease, top 0.5s ease-in-out;
  transition: all 0.5s ease, top 0.5s ease-in-out;
  z-index: 997;
  /* border-top: 8px solid #3a8bca; */
  border-top: 8px solid;
  border-image: linear-gradient(to right,#3a8bca,#FFC66D) 1 0 0 0;
}

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

.header .logo img {
  max-width: 274px;
  height: auto;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 600;
  color: var(--heading-color);
}

.header .logo span {
  color: var(--accent-color);
  font-size: 24px;
  font-weight: 600;
  padding-left: 3px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: #fff;
  background-image: linear-gradient(to right, #314755 0%, #26a0da  51%, #314755  100%);
  font-weight: 700;
  /* font-size:16px!important; */
  font-size:13px!important;
  background-size: 200% auto;
  margin: 0 15px 0 0;
  padding: 10px 12px;
  border-radius: 33px;
  box-shadow: 0 0 20px #eee;
  transition: 0.3s;
  width: 274px;
}
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  background-position: right center;
}

@media only screen and (min-width: 1200px) {
  .header .btn-getstarted-desktop {
    display:block;
  }
  .header .btn-getstarted-mobile {
    display:none;
  }
}
@media only screen and (max-width: 1199px) {
  .header .btn-getstarted-desktop {
    display:none;
  }
  .header .btn-getstarted-mobile {
    display:block;
  }

  .header .logo img {
    max-width: 148px;
    height: auto;
    margin-right:8px!important;
  }
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    order: 2;
    font-size:12px!important;
    padding: 8px 10px!important;
    width: auto;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.2);
}

.scrolled .header::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(255, 255, 255, 0.7);
  /* --heading-color: #ffffff;
  --nav-color: rgba(255, 255, 255, 0.55);
  --nav-color: #32353a;
  --nav-hover-color: #ffffff; */
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  /* --background-color: rgba(0, 0, 0, 0.8); */
  --background-color: rgba(255, 255, 255, 0.7);
  /* --heading-color: #32353a;
  --nav-color: #32353a;
  --nav-hover-color: #e84545; */
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@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,
  .navmenu a i,
  .navmenu a:focus i {
    color: var(--nav-color);
    padding: 5px 5px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    color: var(--nav-color);
    padding: 9px 14px;
    font-size: 22px;
    /* margin-right:0.25rem!important; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a:not(.nohover),
  .navmenu a:not(.nohover):hover>i,
  .navmenu .active,
  .navmenu .active>i,
  .navmenu .active:focus,
  .navmenu .active:focus>i {
    color:#3a8bca;
    text-shadow: 0 0 1px #fff;
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 0;
    background: #fff;
    /* display: block; */
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    /* transition: 0.25s; */
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
    z-index: 99;
    border-radius: 15px;
    outline: 2px solid #32353a;
  }

  /* .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: #3a8bca;
  }

  .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 ul li div {
    display: none;
  }

  .mobile-nav-toggle {
    display:none!important;
  }

  .toggle-dropdown {
      margin-left: 0.5rem !important; /* Zamieniamy padding na margin, żeby box ikony był symetryczny */
      padding-left: 0 !important;
      padding-right: 0 !important;
      font-size: 18px !important;
      transition: transform 0.3s ease-in-out !important;
      transform-origin: center center; /* Wymuszamy obrót idealnie w środku */
    }

    /* Animacja rotacji idealnie w miejscu */
    .navmenu .dropdown:hover > a .toggle-dropdown {
      transform: rotate(180deg);
    }
}

/* Navmenu - Mobile (Zastąpiono nowym sposobem Bottom Sheet) */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: #32353a;
    font-size: 32px;
    line-height: 0;
    margin-right: 2px;
    cursor: pointer;
    -webkit-text-stroke: 1px!important;
    z-index: 9999;
  }

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

  /* Całkowicie ukrywamy stare mobilne menu */
  .navmenu > ul {
    display: none !important;
  }

  .toggle-dropdown {
    margin-left:1.0rem!important;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: #fff;
  font-size: 14px;
  padding-bottom: 84px;
  position: relative;
}
@media (min-width: 576px) {
  .footer .footer-top {
    padding-top: 50px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
    background-size: cover;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
}
@media (max-width: 991px) {
  .footer .footer-top {
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.8)), url(../img/footer-bg-v2-mobile.jpg) no-repeat center bottom;
  }
}
@media (min-width: 992px) {
  .footer .footer-top {
    padding-top: 50px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.65)), url(../img/footer-bg-v2.jpg) no-repeat center center;
    background-size: cover;
  }
}

.footer .footer-about .logo {
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  /* max-height: 52px; */
  max-height: 120px;
  height: auto;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer .footer-about p {
  font-size: 14px;
  color: #fff;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  margin-right: 10px;
  transition: 0.3s;
}

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

.footer .social-links span {
  font-size: 12px!important;
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
  color: var(--accent-color);
}

.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.85);
  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-contact p a {
  color: #fff!important;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  /* background-color: color-mix(in srgb, #FFC66D, transparent 85%); */
  background-color: #fff;
}
@media (min-width: 992px) {
  .footer .copyright {
    padding-top: 25px;
    padding-bottom: 25px;
    /* background-color: color-mix(in srgb, #FFC66D, transparent 85%); */
    background-color: #fff;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
}

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

.footer .copyright span {
  color: #000!important;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.wroc-do-gory {
  z-index: 996;
  position: fixed;
  right: 30px;
  bottom: 30px;
  height: 3.75rem;
  width: 3.75rem;
  border: none;
  outline: none;
  /* background: var(--accent-color);
  background-image:var(--bs-gradient)!important; */
  background: none;
  background-image:url('../img/scroll-top.png');
  background-size: cover;
  transform: scale(0);
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, .45); */
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.is_showing {
  display: block;
  transform: scale(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 {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

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

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

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  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%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  overflow: hidden; /* Zmieniamy clip na hidden dla lepszej wydajności podczas scrolla */
  /* USUNIĘTO scroll-margin-top - offset będzie liczył czysty JS */
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 64px;
  }
}

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

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  position: relative;
}
@media (max-width: 768px) {
  .section-title h2 {
    font-size: 22px;
    font-weight: 700;
    position: relative;
  }
}

/* .section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
} */

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

.section-title p {
  margin-bottom: 0;
  line-height: 1.35!important;
}

/*--------------------------------------------------------------
# Fullscreen Hero Section
--------------------------------------------------------------*/
.sekcja-startowa {
  height: 100svh;
  background: transparent linear-gradient(1deg, #EDEDED 0%, #E2E0E1 56%, #D4D0D1 100%) 0% 0%;
}

/* @media (min-width: 569px) {
  .sekcja-startowa:before {
    height: 100svh;
    content: "";
    background: rgba(0, 0, 0, 0.25);
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }
} */

@media (min-width: 1280px) {
  .sekcja-startowa .container p {
    text-align: justify;
  }
  .cta .content h3 {
    text-align: justify;
  }
  .features .tab-pane h4 {
    text-align: justify;
  }
}

.sekcja-startowa .sekcja-startowa-button {
  display: inline-block;
  /* background: var(--accent-color); */
  min-width: 160px;
  background-color: var(--accent-color);
  /* background-image:var(--bs-gradient); */
  border: 1px solid #464646;
  outline: none;
  border-radius: 10px;
}
.sekcja-startowa .sekcja-startowa-button > i {
  /* font-size: 24px!important; */
  /* font-size: 1.7em; */
  font-size: 1.75em!important;
  color: #000;
}

.sekcja-startowa .btn-continue {
  transition: 0.4s;
  color: #FFC66D;
  display: block;
  animation: btn-up-down 1s ease-in-out infinite alternate-reverse both;
}

.sekcja-startowa .btn-continue i {
  font-size: 48px;
  -webkit-text-stroke: 3px;
}

@media (hover: hover) {
  .sekcja-startowa .btn-continue:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
  }
}

@keyframes btn-up-down {
  0% {
    transform: translateY(5px);
  }

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

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

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

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

.features .features-item h3 {
  font-weight: 700;
  color:#32353a!important;
}

.features .features-item .btn-get-started {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 30px 10px 30px;
  border-radius: 4px;
}

.features .features-item .btn-get-started:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
}

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

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

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

.features .features-item i {
  font-size:38px!important;
  color:darkgreen!important;
}

.features .features-item h4 {
  font-size:16px!important;
  color:#212529!important;
}

.features .features-item img {
  border: 6px solid var(--contrast-color);
  box-shadow: 0 15px 30px -10px color-mix(in srgb, var(--default-color), transparent 75%);
}

.features .features-item .features-img-bg {
  position: relative;
  min-height: 500px;
}

@media (max-width: 640px) {
  .features .features-item .features-img-bg {
    min-height: 300px;
  }
}

.features .features-item .features-img-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features .features-item .image-stack {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
}

.features .features-item .image-stack .stack-back {
  grid-column: 4/-1;
  grid-row: 1;
  width: 100%;
  z-index: 1;
}

.features .features-item .image-stack .stack-front {
  grid-row: 1;
  grid-column: 1/span 8;
  margin-top: 15%;
  width: 100%;
  z-index: 2;
  border-top-right-radius: 100%;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  /* --background-color: #f4f4f4; */
  --background-color: #fff;
}

.services .service-item {
  box-shadow: 0px 5px 90px 0px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 50px 30px;
  transition: all ease-in-out 0.4s;
  background-color: var(--contrast-color);
  height: 100%;
}

.services .service-item .icon {
  margin-bottom: 10px;
}

.services .service-item .icon i {
  color: #3a8bca;
  font-size: 36px;
  transition: 0.3s;
}

.services .service-item h3 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

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

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --background-color: #3a8bca;
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 120px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 15%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-weight: 500;
  font-size: 16px;
  display: block;
  padding: 8px 16px;
  border-radius: 33px;
  border: none;
  transition: 0.5s;
  margin: 10px;
  color: #3a8bca;
  background: #FFC66D;
}

/* .call-to-action .cta-btn:hover {
  color: #FFC66D;
  background: #fff;
} */

.call-to-action .cta-btn-container a i {
  font-size: 22px!important;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Contact Section - Zmodernizowany UI
--------------------------------------------------------------*/
.contact {
  background-color: #f4f7f6 !important; /* Spójne z tłem FAQ, nadaje nowoczesny sznyt */
}

/* Stylowanie pojedynczego kafelka info */
.contact .info-item {
  background-color: #ffffff;
  padding: 40px 20px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

/* Efekt Hover na kafelku */
.contact .info-item:hover {
  transform: translateY(-5px);
  box-shadow: 0px 12px 30px rgba(58, 139, 202, 0.1) !important;
  border-color: rgba(58, 139, 202, 0.2);
}

/* Kontener na ikonę (koło) */
.contact .info-item .icon-box {
  width: 60px;
  height: 60px;
  background-color: rgba(58, 139, 202, 0.1); /* Delikatnie niebieskie tło */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.4s ease;
}

/* Sama ikona */
.contact .info-item .icon-box i {
  font-size: 28px;
  color: #3a8bca;
  line-height: 0;
  transition: all 0.4s ease;
}

/* Animacja ikony przy hoverze kafelka */
.contact .info-item:hover .icon-box {
  background-color: #3a8bca;
}
.contact .info-item:hover .icon-box i {
  color: #ffffff;
}

/* Tytuł w kafelku */
.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #32353a;
}

/* Tekst i linki w kafelku */
.contact .info-item p {
  padding: 0;
  line-height: 1.5;
  font-size: 14px;
  margin-bottom: 0;
  color: #606060 !important;
}

.contact .info-item p a {
  color: #606060 !important;
  transition: color 0.3s ease;
  text-decoration: none;
}

.contact .info-item p a:hover {
  color: #3a8bca !important;
}

/*--------------------------------------------------------------
# Contact Map
--------------------------------------------------------------*/
.contact .map {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04);
  /* Dodajemy subtelny border, żeby pasowało do reszty kart */
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.contact .map iframe {
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 400px; /* Dla urządzeń mobilnych, gdy flexbox się ułoży jedno pod drugim */
  display: block;
}

/* Responsywność dla mapy na tabletach/telefonach */
@media (max-width: 991px) {
  .contact .map {
    margin-top: 20px;
  }
  .contact .map iframe {
    height: 400px; /* Sztywna wysokość na mobile */
  }
}

hr.custom {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.home-motto-container{
    position: absolute;
    bottom: -50px;
}
.home-motto{
    width: 50%;
    color: #ffffff;
    /* background: #3a8bca; */
    background-image: linear-gradient(
      to right,
      rgba(49, 71, 85, 0.9) 0%,
      rgba(38, 160, 218, 0.9) 51%,
      rgba(49, 71, 85, 0.9) 100%
    );

    border-radius: 33px;    /* 46px */
    padding-top: 30px;
    padding-bottom: 40px;
}
.home-motto .bigger{
    font-size: 26px;    /* 48px */
    font-weight: 700;
    line-height: 1.1!important;
    color: rgba(255,255,255,0.85);
}
.home-motto .smaller{
    font-size: 16px;     /* 30px */
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    line-height: 1.2!important
}
.home-motto .button{
    border-radius: 14px;     /* 25px */
    font-size: 20px;     /* 28px */
    border: 0;
    background-color: var(--purpleColor);
    color: #ffffff;
}
/* CONTINUE*/
.home-motto{
    border-radius: 46px;    /* 46px */
}

.home-motto .bigger{
    font-size: 26px;    /* 48px */
    line-height: 1.1!important
}

.home-motto .smaller{
    font-size: 16px;     /* 30px */
}

.home-motto .button{
    border-radius: 25px;     /* 25px */
    font-size: 28px;     /* 28px */
}
/* MOBILE PHONES */
/* @media only screen and (max-width: 767px) {
    .home-motto-container{
      position: absolute;
      bottom: -50px;
    }
    .home-motto{
        width: 85%;
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .home-motto .bigger{
        font-size: 22px;
        color: rgba(255,255,255,0.85);
        line-height: 1.2!important
    }
    .home-motto .smaller{
        font-size: 16px;
        color: rgba(255,255,255,0.85);
    }
} */
/* @media only screen and (min-width: 768px) and (max-width: 1199px) {
    .home-motto-container{
      position: absolute!important;
      bottom: -50px!important;
    }
    .home-motto{
        width: 65%!important;
    }
} */
@media only screen and (max-width: 969px) {
    .home-motto-container{
      position: absolute;
      bottom: -50px;
    }
    .home-motto{
        width: 85%;
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .home-motto .bigger{
        font-size: 22px;
        color: rgba(255,255,255,0.85);
        line-height: 1.2!important
    }
    .home-motto .smaller{
        font-size: 16px;
        color: rgba(255,255,255,0.85);
    }
}
@media only screen and (min-width: 970px) and (max-width: 1199px) {
    .home-motto-container{
      position: absolute!important;
      bottom: -50px!important;
    }
    .home-motto{
        width: 65%!important;
    }
}

.nobr { white-space:nowrap!important; }

/*--------------------------------------------------------------
# Faq 2 Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Faq 2 Section (Modernized)
--------------------------------------------------------------*/
.faq-2 {
  padding-bottom: 0px !important;
  background-color: #f4f7f6 !important; /* Delikatnie chłodniejszy, nowocześniejszy odcień tła */
}

.faq-2 .faq-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Nowoczesne odstępy zamiast margin-bottom */
}

.faq-2 .faq-container .faq-item {
  background-color: #ffffff;
  position: relative;
  padding: 24px 60px 24px 60px; /* Dużo oddechu dla tekstu */
  border-radius: 16px; /* Nowoczesne, mocniejsze zaokrąglenie */
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02); /* Bardzo miękki cień */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Płynność w stylu Apple */
  cursor: pointer;
  overflow: hidden;
}

/* Nagłówek pytania */
.faq-2 .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  color: #32353a;
  transition: color 0.3s ease;
  user-select: none;
}

/* Ikona znaku zapytania (lewa) */
.faq-2 .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 24px;
  left: 20px;
  font-size: 22px;
  line-height: 1;
  color: #aebacf; /* Zgaszony kolor przed kliknięciem */
  transition: color 0.3s ease;
}

/* Ikona strzałki (prawa) */
.faq-2 .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 26px; /* Wyśrodkowane względem 1 linijki tekstu */
  right: 20px;
  font-size: 18px;
  line-height: 1;
  color: #aebacf;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s ease;
}

/* Ukryta treść odpowiedz (Grid Animation Trick) */
.faq-2 .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease, padding 0.4s ease;
}

.faq-2 .faq-container .faq-item .faq-content p {
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #212529;
}

/* Wymuszamy reset marginesów z klas Bootstrapowych dla idealnej symetrii wewnątrz boksu */
.faq-2 .faq-container .faq-item .faq-content p.ms-2,
.faq-2 .faq-container .faq-item .faq-content p.me-md-5 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================
   STAN AKTYWNY (OTWARTY)
   ========================================= */
.faq-2 .faq-container .faq-active {
  border-color: rgba(58, 139, 202, 0.3); /* Twój niebieski #3a8bca z alfą */
  background-color: #fcfdfe; /* Bardzo delikatne przyciemnienie tła po otwarciu */
  box-shadow: 0px 10px 30px rgba(58, 139, 202, 0.08);
  transform: translateY(0); /* Reset transformu na otwartym */
}

.faq-2 .faq-container .faq-active h3 {
  color: #3a8bca; /* Zmiana koloru tekstu na primary */
}

.faq-2 .faq-container .faq-active .faq-icon {
  color: #3a8bca; /* Zapalenie ikony po lewej */
}

.faq-2 .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: #3a8bca; /* Zapalenie strzałki */
}

.faq-2 .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 16px; /* Odstęp treści od nagłówka płynnie się dodaje */
}

/* =========================================
   RESPONSYWNOŚĆ (MOBILE)
   ========================================= */
@media (max-width: 768px) {
  .faq-2 .faq-container .faq-item {
    padding: 20px 45px 20px 45px; /* Mniejsze paddingi na komórkach */
    border-radius: 12px;
  }

  .faq-2 .faq-container .faq-item h3 {
    font-size: 16px;
  }

  .faq-2 .faq-container .faq-item .faq-icon {
    left: 15px;
    top: 20px;
    font-size: 20px;
  }

  .faq-2 .faq-container .faq-item .faq-toggle {
    right: 15px;
    top: 20px;
  }

  .faq-2 .faq-container .faq-item .faq-content p {
    font-size: 14px;
  }
}

@media screen and (min-width: 769px) {
  .justify-text-md {
    text-align: justify;
    text-justify: inter-word;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .info h3 {
  font-weight: 700;
  font-size: 32px;
}

.testimonials .swiper {
  background-color: #f4f4f4;
  border-radius: 15px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  min-height: 140px;
  position: relative;
  margin: 30px;
}

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

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

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

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 2px;
  font-size: 24px;
}


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

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

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

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
  border: none;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #32353a;
}

@media (max-width: 767px) {

  .testimonials .testimonials-carousel,
  .testimonials .testimonials-slider {
    overflow: hidden;
  }

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

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts {
  background-color:#f4f4f4!important;
}
.recent-posts .post-item {
  background: #fff;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

.recent-posts .post-item .post-img img {
  transition: 0.5s;
}

.recent-posts .post-item .post-date {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #3a8bca;
  background-image: var(--bs-gradient);
  color: #fff;
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.recent-posts .post-item .post-content {
  padding: 30px;
}

.recent-posts .post-item .post-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.recent-posts .post-item .meta i {
  font-size: 16px;
  color: var(--accent-color);
}

.recent-posts .post-item .meta span {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.recent-posts .post-item hr {
  color: color-mix(in srgb, var(--default-color), transparent 80%);
  margin: 20px 0;
}

.recent-posts .post-item .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.recent-posts .post-item .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}

.recent-posts .post-item:hover .post-title {
  color: #7d848f;
}

/* .recent-posts .post-item:hover .post-img img {
  transform: scale(1.1);
} */

.sticky-call {
	background-color: #fff;
	border-radius: 50%;
	bottom: 30px;
	box-shadow: 0 2px 6px 0 rgba(28, 1, 1, 0.4);
	color: #3a8bca!important;
	/* font-size: 1.375rem; */
  font-size: 2rem;
  left: 30px;
	height: 3.75rem;
  width: 3.75rem;
	position: fixed;
  opacity:0;
  transition: opacity 0.3s;
	z-index: 996!important;
}

.sticky-call.active {
  display: block;
  opacity:1;
}

.sticky-call>i {
	-webkit-animation: phone-ringing 2.2s ease-in-out infinite!important;
	animation: phone-ringing 2.2s ease-in-out infinite!important;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	transition: all .3s ease-out 0s;
}

@-webkit-keyframes phone-ringing {
	0% {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg)
	}

	5% {
		-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
		transform: rotate(-25deg) scale(1) skew(1deg)
	}

	10% {
		-webkit-transform: rotate(25deg) scale(1) skew(1deg);
		transform: rotate(25deg) scale(1) skew(1deg)
	}

	15% {
		-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
		transform: rotate(-25deg) scale(1) skew(1deg)
	}

	20% {
		-webkit-transform: rotate(25deg) scale(1) skew(1deg);
		transform: rotate(25deg) scale(1) skew(1deg)
	}

	25% {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg)
	}

	to {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg)
	}
}

@keyframes phone-ringing {
	0% {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg)
	}

	5% {
		-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
		transform: rotate(-25deg) scale(1) skew(1deg)
	}

	10% {
		-webkit-transform: rotate(25deg) scale(1) skew(1deg);
		transform: rotate(25deg) scale(1) skew(1deg)
	}

	15% {
		-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
		transform: rotate(-25deg) scale(1) skew(1deg)
	}

	20% {
		-webkit-transform: rotate(25deg) scale(1) skew(1deg);
		transform: rotate(25deg) scale(1) skew(1deg)
	}

	25% {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg)
	}

	to {
		-webkit-transform: rotate(0) scale(1) skew(1deg);
		transform: rotate(0) scale(1) skew(1deg)
	}
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 0;
  background: color-mix(in srgb, #FFC66D, transparent 75%);
}

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

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

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

hr.custom-section-divider {
    border: 0!important;
    height: 1px!important;
    background: #000!important;
    background-image: linear-gradient(to right, #ccc, #000, #ccc)!important
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Stats Section - Gradient + Glassmorphism
--------------------------------------------------------------*/
.stats {
  /* Przywracamy stary, dynamiczny gradient */
  background: linear-gradient(135deg, #3a8bca 0%, #FFC66D 100%) !important;
  padding: 80px 0;
  position: relative;
}

/* Wygląd pojedynczej karty - efekt matowego szkła */
.stats .stats-item {
  background-color: rgba(255, 255, 255, 0.85); /* Lekko przezroczysta biel */
  padding: 40px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6); /* Jasna obwódka nadająca kształt */
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px); /* Rozmycie tła pod kartą (Glassmorphism) */
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 100%;
}

/* Efekt Hover na karcie */
.stats .stats-item:hover {
  transform: translateY(-5px);
  background-color: #ffffff; /* Po najechaniu karta staje się w pełni nieprzezroczysta/biała */
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.2);
}

/* Kółko na ikonę (Przywrócony oryginalny wygląd z żółtym kółkiem i białą ikoną) */
.stats .stats-icon {
  width: 64px;
  height: 64px;
  background: #FFC66D;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.4s ease;
  box-shadow: 0px 4px 15px rgba(255, 198, 109, 0.4); /* Poświata kółka */
}

/* Sama ikona */
.stats .stats-icon i {
  font-size: 26px;
  color: #ffffff;
  line-height: 0;
  transition: all 0.4s ease;
}

/* Animacja ikony przy najeździe na kartę - kółko rośnie i staje się niebieskie */
.stats .stats-item:hover .stats-icon {
  transform: scale(1.1);
  background: #3a8bca;
  box-shadow: 0px 4px 15px rgba(58, 139, 202, 0.4);
}

/* Duży numer */
.stats .stats-item span.purecounter {
  font-size: 42px;
  font-weight: 700;
  color: #3a8bca; /* Zostawiamy niebieski dla kontrastu */
  display: block;
  margin-bottom: 5px;
  line-height: 1;
}

/* Tekst pod numerem */
.stats .stats-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #32353a; /* Ciemny szary, żeby był dobrze czytelny na jasnej karcie */
  font-weight: 500;
}


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

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

.pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  padding: 60px 40px;
  height: 100%;
  position: relative;
  border-radius: 15px;
}

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

.pricing .icon {
  margin: 30px auto 20px auto;
  width: 70px;
  height: 70px;
  background: #3a8bca;
  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: 38px;
  color: var(--accent-color);
  font-weight: 700;
  font-family: var(--heading-font);
  margin-bottom: 25px;
  text-align: center;
}

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

.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: #3a8bca;
  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: #3a8bca;
  color: #fff;
}

.pricing .featured {
  z-index: 10;
  /* border: 3px solid var(--accent-color); */
}
.pricing .featured .popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFC66D;
  color: #fff;
  letter-spacing: 1px;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
}
.pricing .featured .popular-badge::before {
  content: '★';
  margin-right:.75rem!important;
}
.pricing .featured .popular-badge::after {
  content: '★';
  margin-left:.75rem!important;
}


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

@media only screen and (max-width: 767px) {
  .pricing h4 {
    font-size: 28px;
  }
  .pricing h4 sup {
    font-size: 14px;
  }
}

.background-triangles {
  margin: 0!important;
  background: transparent url('../img/background-triangles.png') 0% 0% repeat padding-box!important;
}




/* .slow-animation-show {
  animation: swal2-show 0.4s;
}
.slow-animation-hide {
  animation: swal2-hide 0.4s;
} */
.swal-customized {
  /* width:100%!important;
  height:auto!important; */
  background-image:linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)),url('../img/background-triangles.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* .swal2-shown {
    overflow: unset!important;
    padding-right:0px!important;
} */

/* .custom-close {
  color: #32353a!important;
} */

.swal2-dashed-icon-border {
  border:2px dashed #1c0101!important;
  padding:10px!important;
}

@media only screen and (max-width: 767px) {
  .swal2-popup {
    font-size: 0.85em!important;
  }
}
@media only screen and (min-width: 768px) {
  .swal2-popup {
    font-size: 1em!important;
  }
}
/* .swal2-container.swal2-backdrop-show { background: rgba(50,53,58,.9)!important; } */

/* body.swal2-shown > [aria-hidden='true'] {
  transition: 1s filter linear;
  -webkit-transition: 1s -webkit-filter linear;
  -moz-transition: 1s -moz-filter linear;
  -ms-transition: 1s -ms-filter linear;
  -o-transition: 1s -o-filter linear;
  filter: blur(3px);
} */

.swal2-active-progress-step {
  background: #3a8bca!important;
}

.input-validation-failed {
  background-color: rgba(139,0,0,0.15);
}

.swal2-select:focus { outline: none!important; box-shadow: none!important; }

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
@-webkit-keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
.custom-swal-show {
  animation: scaleIn 0.3s ease-out;
  -webkit-animation: scaleIn 0.3s ease-out;
}
.custom-swal-hide {
  animation: scaleOut 0.3s ease-in;
  -webkit-animation: scaleOut 0.3s ease-in;
}

#blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -ms-transition: opacity 0.5s linear;
  -o-transition: opacity 0.5s linear;
}

.form-check-input:checked {
  background-color: #3a8bca!important;
  border-color: #fff!important;
}
.form-check-input:focus {
  box-shadow: none!important;
}
#cc-main {
    /** Change button primary color to black **/
    --cc-btn-primary-bg: #3a8bca;
    --cc-btn-primary-border-color: #3a8bca;

    /** Make the buttons a bit rounder **/
    --cc-btn-border-radius: 33px;

    --cc-font-family: var(--default-font)!important;

    --cc-toggle-on-bg: #FFC66D;
}

/* #cc-main,
#cc-main .pm {
    --cc-modal-transition-duration: 0!important;
} */

#cc-main .cm {
    background: rgba(255,255,255,0.6)!important;
    -webkit-backdrop-filter: blur(8px)!important;
    backdrop-filter: blur(8px)!important;
    --cc-modal-transition-duration: 0.7s!important;
}

button[data-cc="show-preferencesModal"]:hover,
button[data-cc="show-preferencesModal"]:focus {
  background-color: transparent!important;
  border-color: #f8f9fa!important;
  color: #fff!important;
}

/* --- Hero Slider Styles Final Fix --- */

.hero-slider-container {
  position: absolute;
  /* Pozycja w pionie - bliżej góry */
  top: 9%;
  left: 0;

  /* Gwarancja pełnej szerokości */
  width: 100%;
  height: auto;

  z-index: 10;
  padding: 10px 0;

  /* Ukrywa to, co wyjeżdża poza ekran */
  overflow: hidden;
}

.hero-swiper {
  width: 100%;
  height: 100%;
  /* Kluczowe: pozwala widzieć slajdy poza głównym oknem swipera (wewnątrz kontenera) */
  overflow: visible !important;
}

.hero-swiper .swiper-wrapper {
  /* Gwarantuje płynność animacji */
  transition-timing-function: linear;
}

.hero-swiper .swiper-slide {
  /* Kluczowe dla centrowania: slajd ma szerokość obrazka */
  width: auto !important;
  display: block;

  /* Style nieaktywnych slajdów */
  opacity: 0.3;
  transform: scale(0.85);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.hero-swiper .swiper-slide-active {
  /* Style aktywnego (środkowego) slajdu */
  opacity: 1;
  transform: scale(1);
  z-index: 20;
}

.hero-swiper .swiper-slide img {
  display: block;
  /* Stała wysokość - dopasuj do gustu */
  height: 55vh;
  width: auto;

  border-radius: 0;
  box-shadow: none;
  /* Zapobiega pikselozie przy skalowaniu */
  will-change: transform;
}

/* Responsywność */

/* Mobile w pionie */
@media (max-width: 768px) {
  .hero-slider-container {
    top: 22%; /* Jeszcze bliżej headera na telefonie */
  }
  .hero-swiper .swiper-slide img {
    height: 30vh; /* Nieco mniejsze zdjęcia */
  }
}

/* Mobile w poziomie / Bardzo niskie ekrany */
@media (max-height: 500px) {
  .hero-slider-container {
    top: 18%;
  }
  .hero-swiper .swiper-slide img {
    height: 35vh;
  }
}


/* --- START: Animacja Tła (Canvas) i Fix dla Motta --- */

/* 1. Konfiguracja sekcji startowej */
/* overflow: visible jest KLUCZOWE, żeby motto na dole nie było ucięte */
#sekcja-startowa {
    position: relative;
    overflow: visible !important;
}

/* 2. Stylizacja płótna (canvas) */
.sekcja-startowa {
  position: relative;
  /* Ważne: overflow: visible jest potrzebne, aby motto na dole (bottom: -50px) nie zostało ucięte */
  overflow: visible !important;
  height: 100svh;

  /* --- NOWY EFEKT TŁA --- */
  /* Tworzymy duży gradient z 4 kolorami: biały, jasny szary, leciutki błękit (głębia) i srebro */
  background: linear-gradient(-45deg, #ffffff, #e6e9f0, #eef1f5, #d4d7dc);

  /* Rozciągamy tło do 400%, żeby móc je przesuwać */
  background-size: 400% 400%;

  /* Uruchamiamy animację, która trwa 15 sekund i zapętla się w nieskończoność */
  animation: gradientFlow 15s ease infinite;
}

/* Definicja ruchu tła (płynne przejścia) */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Upewnij się, że Canvas jest pozycjonowany absolutnie na tym tle */
#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Tło pod spodem, kropki na wierzchu tła, ale pod treścią */
  pointer-events: none;
}

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

.home-motto-container {
  z-index: 20;
  position: absolute;
  /* bottom: -50px; (dziedziczone z oryginalnego CSS) */
}

/* --- END: Animacja Tła --- */





body.scroll_block {
    overflow: hidden;
}

/* --- Popup Container --- */
.popup-full {
    background: #fff;
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow-y: auto;
}

.popup-full.visible {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.popup-inner-wrapper {
    padding-top: 40px;
    padding-bottom: 60px;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 1200px) {
    .popup-inner-wrapper {
        padding-top: 60px;
        padding-bottom: 80px;
    }
}

/* @media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    font-size:11px!important;
  }

  .navmenu a,
  .navmenu a:focus,
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px!important;
  }
} */

/* --- Zamknij Button --- */
.popup-full-exit {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.popup-full-exit button {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid #e1e7ed;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.3s;
}

.popup-full-exit button:hover {
    background: #f8f9fa;
    color: var(--text-dark);
    border-color: #d1d7dd;
}

/* --- Typografia --- */
.popup-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.popup-desc {
    font-size: 16px;
    color: var(--text-gray);
}

@media (min-width: 992px) {
    .popup-title { font-size: 36px; }
    .popup-desc { font-size: 18px; }
}

/* --- Sekcja Tytułowa --- */
.form-section-label {
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-dark);
    display: block;
}

/* --- Kafelki Usług --- */
.topic-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
@media (min-width: 576px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .topic-grid { grid-template-columns: repeat(4, 1fr); } }

.topic-item { position: relative; cursor: pointer; }
.topic-item input { position: absolute; opacity: 0; width: 0; height: 0; }

.topic-content {
    background: var(--bg-light);
    border: 1px solid transparent;
    border-radius: var(--radius-main);
    padding: 20px 15px;
    height: 100%;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
}

.topic-content i { font-size: 24px; color: #aebacf; margin-bottom: 12px; transition: color 0.3s; }
.topic-content span { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--text-dark); transition: color 0.3s; }

@media (hover: hover) {
  .topic-item:hover .topic-content { background: #fff; border-color: #dbe4ef; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
}

.topic-item input:checked + .topic-content {
    background: #fff;
    border-color: var(--blue-b);
    position: relative;
    box-shadow: 0 0 0 1px var(--blue-b), 0 10px 20px rgba(4, 160, 253, 0.15);
}
.topic-item input:checked + .topic-content::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-primary); border-radius: var(--radius-main); z-index: 0; opacity: 1;
}
.topic-item input:checked + .topic-content i,
.topic-item input:checked + .topic-content span { color: #fff; position: relative; z-index: 2; }

/* --- Formularz Inputy --- */
.form-label-sm {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light-gray);
    margin-bottom: 6px;
    display: block;
}

.custom-input {
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: var(--radius-main);
    padding: 12px 18px;
    font-size: 15px;
    color: var(--text-dark);
    font-weight: 400;
    box-shadow: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 50px;
}

textarea.custom-input { height: auto; padding-top: 15px; }

.custom-input:focus {
    border-color: var(--blue-b);
    box-shadow: 0 0 0 4px rgba(4, 160, 253, 0.1);
    outline: none;
}
.custom-input::placeholder { color: #b0b8c4; }

/* =========================================
   === CUSTOM SELECT CSS (Zintegrowane) ===
   ========================================= */
.custom-select-wrapper {
    position: relative;
    user-select: none;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    cursor: pointer;
}

.custom-select-wrapper.is-open .custom-select-trigger,
.custom-select-trigger:focus {
    border-color: var(--blue-b) !important;
    box-shadow: 0 0 0 4px rgba(4, 160, 253, 0.1) !important;
}

.custom-select-trigger .selected-text {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-trigger .dropdown-arrow {
    margin-left: 12px;
    font-size: 14px;
    color: var(--text-light-gray);
    transition: transform 0.2s ease;
}

.custom-select-wrapper.is-open .dropdown-arrow {
    transform: rotate(180deg);
    color: var(--blue-b);
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #e2e6ea;
    border-radius: var(--radius-main);
    margin-top: 6px;
    padding: 5px 0;
    list-style: none;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: none;
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--blue-b) #f1f1f1;
}

.custom-select-wrapper.is-open .custom-select-options {
    display: block;
    animation: fadeInSelect 0.2s ease-out;
}

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

.custom-select-options li {
    padding: 10px 18px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-weight: 400;
    font-size: 14px;
    color: var(--text-dark);
}

.custom-select-options li:hover {
    background-color: #f3f7fb;
    color: var(--blue-a);
}

.custom-select-options li.is-selected {
    background-color: #eef2ff;
    font-weight: 600;
    color: var(--blue-a);
}

/* --- Custom Checkbox --- */
.custom-checkbox-container {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-gray);
    user-select: none;
    line-height: 1.5;
}
.custom-checkbox-container input {
    position: absolute;
    opacity: 0;
    height: 20px;
    width: 20px;
    left: 0;
    top: 2px;
    margin: 0;
    z-index: -1;
}
.checkmark {
    position: absolute; top: 2px; left: 0; height: 20px; width: 20px;
    background-color: #fff; border: 1px solid #d1d7dd; border-radius: 4px; transition: all 0.2s;
}
.custom-checkbox-container:hover .checkmark { border-color: var(--blue-b); }
.custom-checkbox-container input:checked ~ .checkmark { background-color: var(--blue-b); border-color: var(--blue-b); }
.checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox-container input:checked ~ .checkmark:after { display: block; }
.custom-checkbox-container .checkmark:after { left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.custom-checkbox-container a { color: var(--blue-b); text-decoration: underline; }

/* --- Submit Button --- */
.btn-submit {
    background: linear-gradient(90deg, #000 0%, #3a8bca 100%)!important;
    color: #fff!important;
    border: 0;
    border-radius: 33px;
    font-size: 16px;
    font-weight: 600;
    padding: 0 35px;
    height: 54px;
    transition: all 0.3s;
    width: 100%;
    margin-top: 18px!important;
    margin-bottom: 10px!important;
}
@media (min-width: 768px) { .btn-submit { width: auto; margin-top: 0!important; margin-bottom: 0!important; } }

/* --- Bottom Banner --- */
.popup-full-banner {
    background: linear-gradient(180deg, #3a8bca 0%, #8fc5ee 100%);
    border-radius: 33px;
    margin-top: 40px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #edf2f7;
}
@media (min-width: 992px) { .popup-full-banner { flex-direction: row; justify-content: space-between; padding: 30px 50px; } }
.popup-full-banner h2 { font-size: 20px; color: #fff; margin-bottom: 20px; font-weight: 600; }
@media (min-width: 992px) { .popup-full-banner h2 { margin-bottom: 0; } }

.call-person {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 10px 20px 10px 10px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.call-person .photo { position: relative; width: 120px; height: 120px; }
.call-person .photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.status-dot { width: 14px; height: 14px; background: #58c83b; border: 2px solid #fff; border-radius: 50%; position: absolute; bottom: 10px; right: 10px; }
.text-person { margin-left: 15px; }
.text-person p { margin: 0; line-height: 1.2; }
.text-person p:first-child { font-size: 13px; color: var(--text-gray); margin-bottom: 3px; }
.text-person p:last-child a { font-size: 16px; font-weight: 700; color: var(--text-dark); text-decoration: none; }
:root {
    --blue-a: #3a8bca;
    --blue-b: #04a0fd;
    --text-dark: #2e2e2e;
    --text-gray: #606060;
    --text-light-gray: #32353a;
    --bg-light: #f3f7fb;
    --font-main: 'Poppins', sans-serif;
    --gradient-primary: linear-gradient(135deg, var(--blue-a) 0%, var(--blue-b) 100%);
    --radius-main: 0;
}

/* ==========================================================================
   USUWANIE CIENI I OUTLINE W FORMULARZU KONTAKTOWYM (#popup-contact)
   ========================================================================== */

/* 1. Standardowe pola (Input, Textarea) i kontenery customowe */
#popup-contact input,
#popup-contact textarea,
#popup-contact select,
#popup-contact .form-control,
#popup-contact .custom-input,
#popup-contact .custom-select-trigger {
    outline: none !important;
    box-shadow: none !important;
}

/* 1a. Stany aktywne (Focus) dla powyższych */
#popup-contact input:focus,
#popup-contact textarea:focus,
#popup-contact select:focus,
#popup-contact .form-control:focus,
#popup-contact .custom-input:focus,
#popup-contact .custom-select-trigger:focus {
    outline: none !important;
    box-shadow: none !important;
    /* Jeśli bootstrap dodaje niebieski border, a chcesz go uniknąć, odkomentuj poniższe: */
    /* border-color: #dee2e6 !important; */
}

/* -------------------------------------------------------------------------- */

/* 2. TOPIC GRID (Kafelki wyboru usługi) - te duże kwadraty */
/* Stan domyślny, hover oraz zaznaczony */
#popup-contact .topic-item .topic-content,
#popup-contact .topic-item:hover .topic-content,
#popup-contact .topic-item input:checked + .topic-content,
#popup-contact .topic-item input:focus + .topic-content {
    box-shadow: none !important; /* Usuwa cień pod kafelkiem */
    outline: none !important;    /* Usuwa obrys */
    transform: none !important;  /* Usuwa ewentualne podnoszenie się kafelka */
}

/* -------------------------------------------------------------------------- */

/* 3. CUSTOM SELECT (Rozwijane listy) */

/* Trigger (to co klikasz, żeby otworzyć) - stan otwarty */
#popup-contact .custom-select-wrapper.open .custom-select-trigger {
    box-shadow: none !important;
    outline: none !important;
}

/* Lista opcji (to co się rozwija) - usuwa cień rzucany przez listę na tło */
#popup-contact .custom-select-options {
    box-shadow: none !important;
    outline: none !important;
    /* Opcjonalnie: Dodaj border, jeśli po usunięciu cienia lista zlewa się z tłem */
    border: 1px solid #dee2e6 !important;
}

/* -------------------------------------------------------------------------- */

/* 4. PRZYCISK WYŚLIJ i inne przyciski */
#popup-contact button,
#popup-contact .btn-submit {
    box-shadow: none !important;
    outline: none !important;
}

#popup-contact button:focus,
#popup-contact button:active,
#popup-contact .btn-submit:focus,
#popup-contact .btn-submit:active {
    box-shadow: none !important;
    outline: none !important;
}

/* Usuwa border, cień i outline TYLKO dla zaznaczonych kafelków (topic-item) */
#popup-contact .topic-item input:checked + .topic-content {
    border: none !important;        /* To usuwa ramkę całkowicie */
    box-shadow: none !important;    /* To usuwa cień/poświatę */
    outline: none !important;       /* To usuwa outline */
}

/* ==========================================================================
   NOWA SEKCJA - STRONY INTERNETOWE KUTNO (.lokalnie)
   ========================================================================== */

section.lokalnie {
  padding-top: 140px!important;
  padding-bottom: 100px!important;
  background: transparent url('../img/background-triangles.png') 0% 0% repeat padding-box!important;
}
section.lokalnie h2 {
  font-size: 32px;
  font-weight: 700;
  color: #32353a;
}
section.lokalnie p {
  font-size: 16px;
  font-weight: 400;
  color: #212529;
  line-height: 1.35;
}
/* Sekcja i kompozycja zdjęć */
.lokalnie .image-composition {
  padding: 0 30px 40px 0;
}

.lokalnie .monitor-img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
  z-index: 1;
}

.lokalnie .phone-img {
  max-width: 30%;
  bottom: -10%;
  right: 0;

  transition: transform 0.4s ease;
  z-index: 2;
}

/* Dostosowania modułu inline na mniejszych ekranach */
@media (max-width: 991px) {
  section.lokalnie {
    padding-top: 80px!important;
  }
  .lokalnie .image-composition {
    padding: 0 15px 30px 0;
  }
  section.lokalnie h2 {
    font-size: 22px;
    line-height: 1.2;
  }
}
@media (max-width: 767px) {
  .lokalnie .phone-img {
    max-width: 35%;
  }
}

/* Efekt najechania na link w module */
.hover-blue:hover {
  color: #3a8bca !important;
}
.transition-all {
  transition: all 0.3s ease;
}

/* ==========================================================================
   SWEETALERT2 - ZAOKRĄGLONE PRZYCISKI (Zgodne z brandingiem)
   ========================================================================== */
.swal2-styled {
    border-radius: 33px !important;
}

/* =======================================================
*     STYLE DLA MOBILNEJ NAWIGACJI (BOTTOM SHEET)
======================================================== */

/* --- Kontener i Overlay --- */
.mobile-nav-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;

	/* Domyślnie ukryte i niewidoczne dla czytników ekranu */
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 0.6s, opacity 0.6s ease-in-out;
}

.mobile-nav-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}

.mobile-nav-container.is-open .mobile-nav-overlay {
	opacity: 1;
}

/* Stan aktywny (po otwarciu) */
.mobile-nav-container.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.6s ease-in-out;
}

/* --- Panel Menu --- */
.mobile-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;

    margin: 0 auto;
    width: calc(100% - 32px);
    max-width: 500px;

    padding-bottom: 10px;
    max-height: calc(100svh - 16px);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mobile-nav-container.is-open .mobile-nav {
	transform: translateY(0);
}

/* --- Nagłówek i przycisk zamknięcia --- */
.mobile-nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	flex-shrink: 0;
	border-bottom: 1px solid #E8E8E8;
}

.mobile-nav-title {
	font-size: 20px;
	font-weight: 700;
	color: #3a8bca; /* WEB-SPEC Blue */
}

.mobile-nav-close {
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	line-height: 0;
	margin: -8px;
}

/* --- Zawartość i lista menu --- */
.mobile-nav-content {
	overflow-y: auto;
	padding: 0;
}

.mobile-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-nav-item {
	border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-item:last-child {
	border-bottom: none;
}

.mobile-nav-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 20px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	color: #181C2C;
	transition: background-color 0.2s ease;
}

.mobile-nav-link:focus {
	background-color: #f8f8f8;
}

.mobile-nav-link .arrow-icon {
	width: 24px;
	height: 24px;
	transition: transform 0.35s ease-in-out;
}

/* Stan otwartego dropdownu */
.mobile-nav-item.is-open>.mobile-nav-link .arrow-icon {
	transform: rotate(180deg);
}

/* --- Submenu (lista linków w dropdownie) --- */
.mobile-nav-submenu {
	list-style: none;
	padding: 0 20px 8px 40px;
	margin: 0;
	background-color: #f9f9f9;
	display: none;
}

.mobile-nav-submenu li {
	padding: 12px 0;
	border-top: 1px solid #efefef;
}

.mobile-nav-submenu li:first-child {
	border-top: none;
}

.mobile-nav-submenu a {
	text-decoration: none;
	color: #555;
	font-size: 12px;
	font-weight: 400;
	transition: color 0.2s ease;
}

/* NON DROPDOWN MOBILE MENU ITEM: */
.mobile-nav-item--static a {
	display: flex;
	align-items: center;
	padding: 18px 20px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	color: #181C2C;
	transition: background-color 0.2s ease;
	width: 100%;
}

.mobile-nav-item--static a:focus {
	background-color: #f8f8f8;
}

/* Przycisk CTA na dole menu */
.mobile-nav-item--cta {
	padding: 16px 20px 8px 20px;
	border-bottom: none;
	margin-top: 8px;
	background-color: #fff;
}

.mobile-nav-cta-button {
	display: block;
	width: 100%;
	padding: 16px;
	text-decoration: none;
	text-align: center;
	background-color: #3a8bca; /* WEB-SPEC Blue */
	color: #ffffff;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	transition: background-color 0.3s ease;
}

.mobile-nav-cta-button:hover {
	background-color: #2b6a9e;
	color: #ffffff;
}
/* Wymuszenie fontu Poppins (głównego fontu strony) dla mobilnego menu */
.mobile-nav,
.mobile-nav-title,
.mobile-nav-link,
.mobile-nav-item--static a,
.mobile-nav-submenu a,
.mobile-nav-cta-button {
    font-family: var(--default-font) !important;
}
/* Blokada zmiany koloru na niebieski przy hoverze w menu mobilnym */
.mobile-nav-link:hover,
.mobile-nav-item--static a:hover {
    color: #181C2C !important; /* Utrzymuje oryginalny ciemny kolor głównych linków */
}

.mobile-nav-submenu a:hover {
    color: #555 !important; /* Utrzymuje oryginalny szary kolor w podmenu "Cenniki" */
}

/* ==========================================================================
   FIX DLA SKAKANIA ELEMENTÓW NAWIGACJI (HARDWARE ACCELERATION)
   ========================================================================== */
@media only screen and (min-width: 1199px) {
  .navmenu ul > li > a {
    will-change: transform;
    transform: translateZ(0);
    transition: color 0.3s ease-in-out;
  }

  .navmenu ul > li > a > i {
    will-change: transform;
    transform: translateZ(0);
  }
}

/* ==========================================================================
   FANCY DROPDOWNS (Desktop Nav & Footer Dropup)
   ========================================================================== */

/* 1. MAIN HEADER DROPDOWN */
/* ==========================================================================
   FANCY MEGA MENU (Desktop Nav) - STABILNY FULL SCREEN
   ========================================================================== */

/* 1. MAIN HEADER DROPDOWN (MEGA MENU) */
@media (min-width: 1200px) {
    /* Uwalniamy menu, żeby pozycjonowało się swobodnie */
    .navmenu .dropdown.mega-menu {
        position: static !important;
    }

    /* Pełnoekranowy kontener Mega Menu - Stabilne centrowanie */
    .navmenu #dropdown-list.mega-menu-container {
        position: absolute;
        top: calc(100% + 5px);

        /* KLUCZ DO IDEALNEJ SYMETRII (bez problemu paska przewijania 100vw na Windows) */
        left: 30px;
        right: 30px;
        width: auto; /* Zajmie przestrzeń między left a right */
        max-width: 1300px;
        margin: 0 auto; /* Wyśrodkuje, jeśli ekran > 1360px */

        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        /* Wyczyszczony, subtelny cień. Usunięto ostre czarne refleksy */
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;

        display: flex !important;
        flex-direction: row;
        padding: 0 !important;

        /* Gładka animacja wejścia bez lagów */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform-origin: top center;
        transform: translateY(15px); /* Prosty ruch z dołu do góry */
        transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), visibility 0.3s ease !important;
        will-change: opacity, transform;
        z-index: 99;
        overflow: hidden;
    }

    /* Wymuszenie widoczności divów zepustych starym kodem */
    .navmenu #dropdown-list.mega-menu-container div {
        display: block !important;
    }

    /* Hover wywołujący Mega Menu */
    .navmenu .dropdown.mega-menu:hover > #dropdown-list.mega-menu-container {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* --- LEWA STRONA (LINKI) --- */
    .navmenu .mega-menu-links {
        flex: 0 0 45%;
        padding: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
        list-style: none;
        margin: 0;
    }

    .navmenu .mega-menu-links a {
        display: block !important;
        position: relative;
        padding: 20px 20px 20px 90px !important;
        border-radius: 16px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #32353a !important;
        text-decoration: none;
        transition: all 0.3s ease !important;
        background: transparent;
    }

    .navmenu .mega-menu-links a:hover {
        background-color: rgba(58, 139, 202, 0.06) !important;
        color: #3a8bca !important;
    }

    /* Ikony */
    .navmenu .mega-menu-links a::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "";
        position: absolute;
        left: 20px;
        top: 20px;
        width: 50px;
        height: 50px;
        background: rgba(58, 139, 202, 0.1);
        color: #3a8bca;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        transition: all 0.3s ease;
    }

    /* Opisy */
    .navmenu .mega-menu-links a::after {
        content: "";
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: #6c757d;
        margin-top: 8px;
        line-height: 1.5;
        white-space: normal;
    }

    .navmenu .mega-menu-links a[href="strony-www-cennik.html"]::before { content: "\f2d2"; }
    .navmenu .mega-menu-links a[href="strony-www-cennik.html"]::after { content: "Nowoczesne, responsywne witryny zoptymalizowane pod sprzedaż i SEO."; }

    .navmenu .mega-menu-links a[href="pozycjonowanie-seo-cennik.html"]::before { content: "\f002"; }
    .navmenu .mega-menu-links a[href="pozycjonowanie-seo-cennik.html"]::after { content: "Zwiększ widoczność w Google i zdobądź ruch, który konwertuje."; }

    .navmenu .mega-menu-links a[href="aplikacje-webowe-cennik.html"]::before { content: "\f135"; }
    .navmenu .mega-menu-links a[href="aplikacje-webowe-cennik.html"]::after { content: "Dedykowane systemy i narzędzia usprawniające procesy w firmie."; }

    /* --- PRAWA STRONA (PROMO KARTA Z URZĄDZENIAMI) --- */
    .navmenu .mega-menu-promo {
        flex: 1;
        background: linear-gradient(135deg, #FFC66D 0%, #3a8bca 100%);
        padding: 50px;
        position: relative;
        flex-direction: column;
        list-style: none;
        margin: 0;
        min-height: 420px;
        overflow: hidden;
    }

    .navmenu .promo-content {
        position: relative;
        z-index: 10;
    }

    .navmenu .promo-badge {
        background: #fff;
        color: #3a8bca;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 6px 14px;
        border-radius: 30px;
        display: inline-block;
        margin-bottom: 20px;
    }

    .navmenu .promo-title {
        color: #ffffff;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 0;
        /* Usunięto tekstowy cień */
    }

    .navmenu .promo-images {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1;
        pointer-events: none;
    }

    /* Zmniejszony i usztywniony widok obrazków, brak animacji (bugi usunięte) */
    .navmenu .promo-img-webspec {
        position: absolute;
        top: 35px;
        right: 45px;
        width: 100%; /* Zmniejszony z 75% */
        max-width: 120px; /* Sztywny limit szerokości */
        height: auto;
        object-fit: contain;
        z-index: 1;
        /* Usunięto transformacje i cienie */
    }
    .navmenu .promo-img-mac {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 55%; /* Zmniejszony z 75% */
        max-width: 480px; /* Sztywny limit szerokości */
        height: auto;
        object-fit: contain;
        z-index: 1;
        /* Usunięto transformacje i cienie */
    }

    .navmenu .promo-img-tablet {
        position: absolute;
        bottom: 15px;
        right: 40%; /* Przesunięty bliżej środka Maca */
        width: 18%; /* Zmniejszony z 20% */
        max-width: 150px;
        height: auto;
        object-fit: contain;
        z-index: 2;
    }

    .navmenu .promo-img-iphone {
        position: absolute;
        bottom: 15px;
        right: 52%; /* Przesunięty bliżej Tabletu */
        width: 8%; /* Zmniejszony z 12% */
        max-width: 70px;
        height: auto;
        object-fit: contain;
        z-index: 3;
    }
}

/* --- FOOTER DROPDOWN (otwierane w dół) --- */
.footer-custom-dropdown {
	position: relative;
}

.footer-custom-dropdown .fancy-dropdown {
	position: absolute;
	top: calc(100% + 10px); /* Ustala pozycję pod linkiem, z 10px odstępem */
	bottom: auto; /* Resetuje pozycję dolną */
	left: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(15px) !important;
	-webkit-backdrop-filter: blur(15px) !important;
	border-radius: 16px !important;
	border: 1px solid rgba(58, 139, 202, 0.15) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
	padding: 10px !important;
	margin: 0;
	list-style: none;
	min-width: 250px;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-15px); /* Animacja wysuwania z góry na dół */
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.footer-custom-dropdown.show .fancy-dropdown {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.footer-custom-dropdown .dropdown-item {
	border-radius: 8px !important;
	padding: 12px 18px !important;
	font-size: 14px !important;
	color: #32353a !important;
	text-decoration: none;
	display: flex !important;
	align-items: center !important;
	transition: all 0.3s ease !important;
	white-space: nowrap;
}

.footer-custom-dropdown .dropdown-item i {
	font-size: 16px !important;
	color: #32353a;
	transition: color 0.3s ease;
}

.footer-custom-dropdown .dropdown-item:hover,
.footer-custom-dropdown .dropdown-item:focus {
	background-color: rgba(58, 139, 202, 0.06) !important;
	color: #3a8bca !important;
	transform: translateX(6px) !important;
}

.footer-custom-dropdown .dropdown-item:hover i {
	color: #3a8bca !important;
}