/*

Softy Pinko

https://templatemo.com/tm-535-softy-pinko

*/
/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. welcome
06. features
07. team
08. pricing
09. blog
10. contact
11. footer
12. preloader

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  background-color: #f2f2fe;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}


a, .section-title, .features-title, .pricing-title {
  color: #1e1e1e; /* Ciemniejszy kolor tekstu */
}



h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: "Raleway", sans-serif;
}

::selection {
  background: #ff589e;
  color: #fff;
}

::-moz-selection {
  background: #ff589e;
  color: #fff;
}

.section {
  position: relative;
  padding-top: 100px;
  padding-bottom: 80px;
}

.section.colored {
  background: #f2f2fe;
}

.hr {
  bottom: 0px;
  width: 100%;
  height: 1px;
  margin-top: 100px;
  border-bottom: 1px solid #eee;
}

.left-heading.light .section-title {
  color: #ffffff;
}

.left-heading .section-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 42px;
  color: #1e1e1e;
  letter-spacing: 0.25px;
  margin-bottom: 30px;
  position: relative;
}

.center-heading {
  text-align: center;
}

.center-heading .section-title {
  font-weight: 500;
  font-size: 28px;
  color: #1e1e1e;
  letter-spacing: 1.75px;
  line-height: 38px;
  margin-bottom: 20px;
}

.center-heading.colored .section-title {
  color: #ffffff;
}

.center-text {
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  color: #777;
  line-height: 28px;
  letter-spacing: 1px;
  margin-bottom: 50px;
}

.center-text.colored {
  color: #fff;
}

.center-text p {
  font-size: 15px;
  color: #777;
  margin-bottom: 30px;
}

.left-text {
  font-weight: 400;
  font-size: 16px;
  color: #777;
  line-height: 28px;
  letter-spacing: 1px;
}

.left-text.light {
  color: #fff;
}

.left-text p {
  margin-bottom: 30px;
}

.left-text p.dark {
  color: #3B566E;
}

.padding-bottom-top-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.padding-bottom-80 {
  padding-bottom: 80px !important;
}

.padding-bottom-100 {
  padding-bottom: 100px !important;
}

.border-bottom {
  border-bottom: 1px solid #eee !important;
}

.mbottom-30 {
  margin-bottom: 30px !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-bottom {
  -ms-flex-item-align: flex-end !important;
  align-self: flex-end !important;
}

.padding-bottom-0 {
  padding-bottom: 0px !important;
}

.padding-top-0 {
  padding-top: 0px !important;
}

.padding-top-80 {
  padding-top: 80px !important;
}

.padding-top-70 {
  padding-top: 70px !important;
}

.padding-top-20 {
  padding-top: 20px !important;
}

.margin-bottom-0 {
  margin-bottom: 0px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

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

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

.margin-bottom-45 {
  margin-bottom: 45px !important;
}

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

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

.margin-bottom-100 {
  margin-bottom: 100px !important;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

a.main-button-slider {
  font-size: 13px;
  border-radius: 20px;
  padding: 12px 20px;
  background-color: #ff589e;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.25px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-button-slider:hover {
  background-color: #8261ee;
}

a.main-button {
  font-size: 13px;
  border-radius: 20px;
  padding: 12px 20px;
  background-color: #8261ee;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.25px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-button:hover {
  background-color: #ff589e;
}

button.main-button {
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  border-radius: 20px;
  padding: 12px 20px;
  background-color: #8261ee;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.25px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

button.main-button:hover {
  background-color: #ff589e;
}

a.main-button2 {
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  border-radius: 20px;
  padding: 12px 20px;
  background-color: #8261ee;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.25px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.header-area {
  position: fixed;
  top: 30px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;


 
}

.header-area .main-nav {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  min-height: 80px;
  background: #fff;
  justify-content: center;  /* Wyśrodkowanie logo poziomo */
  align-items: center;      /* Wyśrodkowanie logo pionowo */
  padding: 0 30px; /* Dodatkowa przestrzeń po bokach */
  
}

.header-area .main-nav .logo {
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: auto;
  margin-top: -5px !important;
  margin-left: 20px;  /* Usuń margines po lewej stronie, aby logo było wyśrodkowane */
  max-width: 80px; /* Dostosuj rozmiar logo */
}

.header-area .main-nav .logo img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 27px;
  margin-left: 0px;
  margin-right: 30px;
  position: relative;
  z-index: 999;
  justify-content: space-between; /* Wyśrodkowanie logo i menu */
  align-items: center; /* Wyśrodkowanie logo pionowo */
  
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 550;
  font-size: 16px;
  color: #333; /* Ciemniejszy kolor tekstu dla lepszej widoczności */
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;

  
}


.header-area .main-nav .nav li a:hover {
  color: #ff589e;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #3B566E;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #3B566E;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
  
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #3B566E;
}

.header-area .main-nav .menu-trigger.active span:after {
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #3B566E;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area.header-sticky .logo {
  margin-top: 10px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a {
  color: #1e1e1e;
}

.header-area.header-sticky .nav li a.active {
  color: #7a00b3;
 
}

/* Menu i hamburger na ekranach poniżej 1200px */
@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
    
  }

  .header-area .main-nav:before {
    display: none;
  }
}

/* Menu rozwija się po kliknięciu na hamburgera */
@media (max-width: 991px) {
  .header-area {
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
    
  }

  .header-area .container {
    padding: 0px;
    
  }

  .header-area .logo {
    margin-top: 8px !important;
    margin-left: 30px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    margin-top: 80px !important;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
    
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
    
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #fff !important;
    color: #3B566E !important;
    
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
  }
}

/* Menu na dużych ekranach */
@media (min-width: 992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* Menu rozwijane na urządzeniach mobilnych */
@media (max-width: 991px) {
  .header-area .main-nav .nav {
    display: none; /* Menu ukryte początkowo */
    width: 100%;
    margin-top: 80px !important;
    position: absolute;
    top: 5%;
    left: 0;
    background-color: #fff; /* Kolor tła menu */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
   
  }

  /* Menu widoczne, gdy hamburger jest aktywny */
  .header-area .main-nav .nav.active {
    display: block; /* Pokazuje menu, gdy aktywne */
  }

  /* Zmiana wyglądu hamburgera po kliknięciu */
  .header-area .menu-trigger.active span {
    background-color: transparent;
  }

  .header-area .menu-trigger.active span:before {
    transform: translateY(6px) translateX(1px) rotate(45deg);
    background-color: #3B566E;
  }

  .header-area .menu-trigger.active span:after {
    transform: translateY(-6px) translateX(1px) rotate(-45deg);
    background-color: #3B566E;
  }

  /* Dostosowanie widoczności menu na mniejszych ekranach */
  .header-area .main-nav .nav li {
    width: 100%;
    border-bottom: 1px solid #eee;
    text-align: center;
  }

  .header-area .main-nav .nav li a {
    line-height: 50px;
    padding: 0 20px;
    background: #fff;
    color: #3B566E !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: #f4f4f4;
  }
}

/* 
---------------------------------------------
welcome
--------------------------------------------- 
*/



.welcome-area {
  min-height: 100vh;
  padding-top: 130px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image: linear-gradient(to right, #6a11cb, #2575fc);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


.welcome-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Zmniejszyłem przezroczystość */
  z-index: 1; /* Umieszczamy nakładkę poniżej tekstu */
  backdrop-filter: blur(6px); /* Użyjemy mocniejszego rozmycia */
}


.header-text {
  position: relative;
  z-index: 2;
  text-align: center;
}


/* Styl przycisku zamów */

.welcome-area .header-text button.main-button {
  background-color: rgb(129, 29, 236); /* Niebieski przycisk */
  color: #fff;
  border-radius: 30px;
  padding: 12px 25px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Dodanie animacji do background-color i transform */
  border: none; /* Usuwamy obramowanie przycisku */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Dodanie cienia */
}

.welcome-area .header-text button.main-button:hover {
  background-color: #2575fc; /* Jaśniejszy odcień niebieskiego, bardziej wpasowujący się w tło */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Mocniejszy cień przy hover */
}

.welcome-area .header-text button.main-button:focus {
  outline: none; /* Usuwamy kontur na focus */
  box-shadow: 0 0 8px rgba(255, 88, 158, 0.5); /* Podświetlenie na focus */
}



.welcome-area .header-text {
  
  position: relative;
  top: auto;
  transform: none;
  z-index: 2;
  text-align: center;
  width: 100%;
  color: #ff589e;

}

.welcome-area .header-text h1 {
  font-weight: 550;
  font-size: 36px;
  line-height: 54px;
  letter-spacing: 1.4px;
  margin-bottom: 30px;
  color: #fff;
}

.welcome-area .header-text p {
  font-weight: 400;
  font-size: 15px;
  color: #fff;
  line-height: 28px;
  letter-spacing: 0.25px;
  margin-bottom: 40px;
  position: relative;
}


@media (max-width: 991px) {
  .welcome-area {
    padding-top: 140px;
  }

  .welcome-area .header-text {
    text-align: center;
    padding: 0 20px;
  }

  .welcome-area .header-text h1 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 15px;
    color: #fff;
  }

  .welcome-area .header-text p {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 20px;
    color: #fff;
  }
}

@media (max-width: 820px) {
  .welcome-area .header-text h1 {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 15px;
  }

  .welcome-area .header-text p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
  }
}

@media (max-width: 765px) {
  .welcome-area {
    padding-top: 120px;
    margin-bottom: 100px;
  }

  .welcome-area .header-text {
    padding: 0 15px;
  }

  .welcome-area .header-text .buttons {
    display: none;
  }

  .welcome-area .header-text h1 {
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 30px;
  }

  .welcome-area .header-text p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 40px;
  }
}



/* 
---------------------------------------------
features
--------------------------------------------- 
*/
.features-small-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFFFFF;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.10);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease 0s;
  position: relative;
  margin-bottom: 30px;
  min-height: 350px; /* Większa minimalna wysokość */
}

.features-small-item .icon {
  transition: all 0.3s ease 0s;
  width: 90px;
  height: 90px;
  line-height: 90px;
  margin: auto;
  margin-bottom: 30px;


}

.features-small-item .features-title {
  font-weight: 500;
  font-size: 18px;
  color: #1e1e1e;
  letter-spacing: 0.7px;
  margin-bottom: 15px;
  min-height: 60px; /* Minimalna wysokość dla tytułu */
  display: flex;
  align-items: center;
  justify-content: center;
}

.features-small-item p {
  font-weight: 400;
  font-size: 13px;
  color: #777;
  letter-spacing: 0.5px;
  line-height: 25px;
  flex-grow: 1; /* Zajmuje pozostałą przestrzeń */
}

.home-feature {
  padding-bottom: 0px;
  padding-top: 30px;
  margin-top: -220px;
  z-index: 9;
}

@media (max-width: 991px) {
  .home-feature {
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 0px;
  }

  .features-small-item {
    min-height: auto; /* Dostosowanie dla mniejszych ekranów */
  }
}


/* 
---------------------------------------------
parallax & home seperator
--------------------------------------------- 
*/
.mini {
  min-height: 215px;
  overflow: hidden;
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
}

.mini:before {
  content: '';
  position: absolute;
  width: 140%;
  height: 140%;
  opacity: .95;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(../images/work-process-bg2.jpg);
  z-index: 2;
  top: -20%;
  left: -20%;
}

.mini .mini-content {
  position: relative;
  z-index: 3;
}

.mini .mini-content .info {
  text-align: center;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
}

.mini .mini-content .info small {
  display: block;
  font-weight: 400;
  font-size: 13px;
  margin-bottom: 5px;
}

.mini .mini-content .info strong {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 40px;
  display: block;
}

.mini .mini-content .info h1 {
  color: #fff;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.25px;
  margin-bottom: 30px;
}

.mini .mini-content .info p {
  letter-spacing: 1px;
  margin-bottom: 40px;
  color: #fff;
  letter-spacing: 0.25px;
  line-height: 26px;
  font-weight: 400;
  font-size: 15px;
}

.mini .mini-content .info p span {
  text-decoration: underline;
}

.mini .mini-content .mini-box {
  display: block;
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-align: center;
}

.mini .mini-content .mini-box:hover {
  margin-top: -10px;
}

.mini .mini-content .mini-box:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: #fff;
  width: 100%;
  opacity: .15;
  height: 100%;
  bottom: -10px;
  left: 0px;
  right: -20px;
  margin: auto;
  border-radius: 20px;
}

.mini .mini-content .mini-box i {
  display: block;
  font-size: 20px;
  margin-bottom: 15px;
}

.mini .mini-content .mini-box span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: #777;
  letter-spacing: .75px;
}

.mini .mini-content .mini-box strong {
  display: block;
  font-weight: 400;
  font-size: 17px;
  color: #1e1e1e;
  letter-spacing: 0.25px;
  margin-bottom: 5px;
  margin-top: 20px;
}

.counter {
  position: relative;
  padding: 60px 0;
  overflow: hidden; /* Ukrywa wszystko, co wystaje poza sekcję */
  background-image: url(../images/fun-facts-bg1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.counter .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(133, 124, 139, 0.7); /* Półprzezroczysta biała nakładka */
  opacity: 0.9; /* Kontroluj przejrzystość */
  z-index: 2;
}

.counter .content {
  position: relative;
  z-index: 3; /* Ustawienie treści nad nakładką */
}


.counter .content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.counter .content .count-item {
  height: 340px;
  position: relative;
  float: left;
  width: 100%;
}

.counter .content .count-item.decoration-bottom {
  position: relative;
}

.counter .content .count-item.decoration-bottom:after {
  content: '';
  position: absolute;
  width: 70%;
  height: 32px;
  top: 160px;
  left: 70%;
  background: url(../images/circle-dec.png) center center no-repeat;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.counter .content .count-item.decoration-top {
  position: relative;
}

.counter .content .count-item.decoration-top:after {
  content: '';
  position: absolute;
  width: 70%;
  height: 32px;
  top: 140px;
  left: 70%;
  background: url(../images/circle-dec.png) center center no-repeat;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.counter .content .count-item:hover strong {
  margin-top: 110px;
}

.counter .content .count-item strong {
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: 36px;
  letter-spacing: 0.25px;
  margin-bottom: 10px;
  color: #fff;
  margin-top: 120px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.counter .content .count-item span {
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.25px;
}

@media (max-width: 991px) {
  .parallax {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: auto;
  }
  .parallax .content {
    position: relative !important;
    top: 0% !important;
    transform: perspective(1px) translateY(0%) !important;
  }
  .counter {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .counter .content {
    position: relative !important;
    top: 0% !important;
    transform: perspective(1px) translateY(0%) !important;
  }
  .counter .content .count-item {
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .counter .content .count-item:hover strong {
    margin-top: 0px;
  }
  .counter .content .count-item:before {
    display: none;
  }
  .counter .content .count-item:after {
    display: none;
  }
  .counter .content .count-item strong {
    margin-top: 0px;
  }
}

/* 
---------------------------------------------
team
--------------------------------------------- 
*/
.team-item {
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.10);
  border-radius: 20px;
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 25px;
  min-height: 500px;
}

.team-item:hover .team-content .team-info {
  margin-left: 30px;

}

.team-item i {
  display: block;
  margin-left: 25px;
  margin-top: 25px;
  font-size: 30px;
  color: #4E47DE;
  text-align: center;

}

.team-item .user-image {
  width: 60px;
  height: 60px;
  overflow: hidden;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-left: 25px;
  float: left;

}

.team-item .team-content {
  text-align: left;
  overflow: hidden;
}

.team-item .team-content .team-info {
  float: left;
  margin-left: 20px;
  margin-top: 8px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.team-item .team-content .team-info .user-name {
  display: block;
  font-weight: 400;
  font-size: 17px;
  color: #1e1e1e;
  letter-spacing: 0.25px;
  margin-bottom: 5px;
}

.team-item .team-content .team-info span {
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: #ff589e;
  letter-spacing: 0.25px;
}

.team-item .team-content p {
  margin-top: 25px;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 25px;
  font-weight: 400;
  font-size: 15px;
  color: #777;
  letter-spacing: 0.6px;
  line-height: 26px;
}

/* 
---------------------------------------------
pricing
--------------------------------------------- 
*/
.pricing-item {
  background: #ffffff;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  margin: 40px auto;
  padding: 40px 20px;
  transition: all 0.3s ease-in-out;
}

.pricing-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.pricing-item .pricing-header {
  text-align: center;
  margin-bottom: 20px;
}

.pricing-item .pricing-header .pricing-title {
  font-weight: 600;
  font-size: 20px;
  color: #1e1e1e;
  margin-bottom: 10px;
}

.pricing-item .pricing-body {
  text-align: center;
}

.pricing-item .pricing-body .price-wrapper {
  background-color: #2575fc;
  color: #fff;
  padding: 25px 10px;
  border-radius: 15px;
  margin: 20px auto;
  width: 70%;
}

.pricing-item .pricing-body .price-wrapper .price {
  font-size: 36px;
  font-weight: bold;
}

.pricing-item .pricing-body .price-wrapper .period {
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-top: 5px;
  display: block;
}

.pricing-item .pricing-body .list {
  padding: 0;
  margin: 20px 0 0 0;
  list-style: none;
}

.pricing-item .pricing-body .list li {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}

.pricing-item .pricing-footer {
  text-align: center;
  margin-top: 30px;
}

.pricing-item .pricing-footer .main-button {
  padding: 10px 25px;
  background-color: #2575fc;
  color: #fff;
  border-radius: 30px;
  font-size: 14px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.pricing-item .pricing-footer .main-button:hover {
  background-color: #8261ee;
  color: #fff;
}


.pricing-item .pricing-body .list li.active {
  color: #7a7a7a;
  text-decoration: none;
}

.pricing-item .pricing-footer {
  text-align: center;
  margin-top: 50px;
}

/* 
---------------------------------------------
blog
--------------------------------------------- 
*/
.blog-post-thumb {
  text-align: center;
  margin-bottom: 30px;
}

.blog-post-thumb.big .img {
  height: 400px;
}

.blog-post-thumb .img {
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  height: 200px;
}

.blog-post-thumb .blog-content {
  margin-top: -30px;
  padding-top: 50px;
}

.blog-post-thumb h3 {
  margin-bottom: 20px !important;
}

.blog-post-thumb h3 a {
  font-weight: 500;
  font-size: 18px;
  color: #1e1e1e;
  letter-spacing: 0.25px;
  line-height: 26px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.blog-post-thumb h3 a:hover {
  color: #ff589e;
}

.blog-post-thumb .text {
  font-weight: 400;
  font-size: 13px;
  color: #777;
  letter-spacing: 0.26px;
  line-height: 26px;
  margin-bottom: 15px;
}

.blog-post-thumb .post-footer span {
  float: left;
  height: 30px;
  line-height: 30px;
  font-weight: 300;
  font-size: 14px;
  color: #777;
  padding-left: 30px;
}

.blog-post-thumb a.main-button  {
  margin-top: 10px;
  display: inline-block;
}

.blog-list .blog-post-thumb {
  text-align: left;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

#contact-us {
  padding: 160px 0px;
}

#contact-us h5 {
  font-weight: 500;
  font-size: 18px;
  color: #1e1e1e;
  letter-spacing: 0.25px;
  line-height: 26px;
 
}

.contact-text {
  font-weight: 400;
  font-size: 14px;
  color: #6F8BA4;
  letter-spacing: 0.6px;
  line-height: 26px;
}

.contact-text p {
  margin-bottom: 28px;
}

.contact-form input,
.contact-form textarea {
  color: #777;
  font-size: 14px;
  border: 1px solid #eee;
  width: 100%;
  height: 50px;
  outline: none;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

.contact-form textarea {
  height: 200px;
  resize: none;
  padding: 20px;
}


.card {
  background-color: #ffffff; /* Białe tło dla kart */
  border-radius: 8px; /* Zaokrąglenie krawędzi */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Delikatny cień */
  padding: 20px; /* Wewnętrzny odstęp */
  margin-bottom: 30px; /* Odstęp między kartami a innymi elementami */
  text-align: left; /* Wycentrowanie tekstu */
  min-height: 350px; /* Dostosuj tę wartość w zależności od potrzeb */

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease-in-out;
  border-radius: 12px;
}

.card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 15px;
  
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ff589e;
  box-shadow: 0 0 8px rgba(255, 88, 158, 0.2);
  outline: none;
}

.card-title i {
  margin-right: 8px;
  color: #ff589e;
}

.main-button {
  background-color: #ff4081; /* Kolor przycisku */
  color: #ffffff; /* Kolor tekstu */
  padding: 10px 20px;
  border-radius: 5px; /* Zaokrąglenie przycisku */
  border: none; /* Bez obramowania */
  cursor: pointer;
}

.main-button:hover {
  background-color: #ff1e5a; /* Kolor przycisku po najechaniu */
}



/* 
---------------------------------------------
footer
--------------------------------------------- 
*/
footer {
  flex-shrink: 0;
  background-image: linear-gradient(to right, #6a11cb, #2575fc);
  padding: 30px 0;
  color: white;
  text-align: center;
}

footer .social {
  overflow: hidden;
  margin-top: 10px;
  text-align: center;
}

footer .social li {
  margin: 0px 10px;
  display: inline-block;
}

footer .social li a {
  color: #9d5bd9;
   text-align: center;
  background-color: #fff;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  display: inline-block;
  font-size: 16px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

footer .social li a:hover {
  background-color: #ff589e;
  color: #fff;
}

footer .copyright {
  text-align: center;
  border-top: 1px solid rgba(250,250,250,0.2);
  margin-top: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  font-weight: 400;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.88px;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  footer .text {
    margin-bottom: 30px;
  }
  footer h5 {
    margin-bottom: 15px;
  }
  footer .footer-nav {
    margin-bottom: 30px;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/
#preloader {
  overflow: hidden;
  background-image: linear-gradient(135deg, #a759d1 0%, #8261ee 100%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 9999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


#purple
{
  color:#926db4;
}

ul.colored-bullets {
  list-style-type: none; /* Usuwa domyślne kropki */
  padding: 20px;
}

ul.colored-bullets li {
  position: relative; /* Umożliwia pozycjonowanie pseudo-elementu */
  padding-left: 20px; /* Dodaje odstęp dla kropki */
}

ul.colored-bullets li::before {
  content: '•'; /* Ustawia znak kropki */
  position: absolute;
  left: 0;
  color: #8a2be2; /* Kolor fioletowy */
  font-size: 2.0em; /* Rozmiar kropki */
  line-height: 0.6em; /* Dopasowuje wysokość linii dla kropki */
}







/* 3 kafelki*/

.features-small-item {
  min-height: 350px; /* Dostosuj tę wartość w zależności od potrzeb */
  display: flex;
  flex-direction: column;
}


.previous-element-class {
  margin-bottom: 40px; /* zwiększ, jeśli to konieczne */
}

@media (max-width: 576px) {
  .features-small-item {
      margin-bottom: 30px; /* Zwiększenie marginesu między elementami na małych ekranach */
  }

  .home-feature {
      margin-top: 30px; /* Zwiększenie marginesu na górze na małych ekranach */
  }
}

/* koniec 3 kafelki*/




.section-title {
  margin-bottom: 30px; /* Odstęp poniżej tytułu sekcji */
}

.left-heading {
  margin-top: 20px; /* Odstęp powyżej nagłówka autora */
  margin-bottom: 20px; /* Odstęp poniżej nagłówka autora */
}

.left-text {
  margin-bottom: 30px; /* Odstęp poniżej tekstu */
  line-height: 1.6; /* Poprawia czytelność tekstu */
}

.left-text ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

.hr {
  border: 0;
  height: 1px;
  background: #ccc;
  margin: 40px 0; /* Odstęp góra-dół dla linii poziomej */
}




.left-text {
  background-color: #fff; /* Tło dla tekstu */
  padding: 20px; /* Padding wewnętrzny */
  border-radius: 8px; /* Zaokrąglenie narożników */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Cień dla lepszego efektu 3D */
}


@media (max-width: 767px) {
  .col-lg-5, .col-lg-6 {
      text-align: center; /* Wyśrodkowanie tekstu i obrazka na mniejszych ekranach */
  }

  .left-text {
      margin-top: 20px; /* Mniejszy margines górny na małych ekranach */
  }

  .hr {
      margin: 20px 0; /* Mniejszy margines dla linii poziomej */
  }
}


/* Ciemne półprzezroczyste tło */
.text-background {
  background-color: rgba(138, 43, 226, 0.4); /* Ciemne półprzezroczyste tło */
  padding: 10px;
  display: inline-block;
  border-radius: 10px;
}

.text-purple {
  color: #8261ee;
}

.icon-hover {
  transition: all 0.3s ease;
  background-color: #fff;
}


.icon-hover:hover {
  box-shadow: 0 8px 20px rgba(130, 97, 238, 0.2);
  transform: translateY(-5px);
}

.big-icon {
  font-size: 64px; /* lub 72px, jeśli chcesz jeszcze większe */
}

.scroll-down-arrow i {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(10px); }
  60% { transform: translateY(5px); }
}

.icon-hover i {
  transition: transform 0.4s ease;
}
.icon-hover:hover i {
  transform: rotate(15deg) scale(1.1);
}

.floating-notes {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}


.floating-notes .note {
  position: absolute;
  color: rgba(255, 255, 255, 0.25); /* Mniejsze krycie dla subtelniejszego efektu */
  animation: float 8s ease-in-out infinite alternate;
}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

input::placeholder {
  color: #000; /* czarny tekst */
  opacity: 1;
  font-size: 1.1rem;

}
input::-webkit-input-placeholder {
  color: #333;
  opacity: 1;
}
input:-moz-placeholder {
  color: #333;
  opacity: 1;
}
input::-moz-placeholder {
  color: #333;
  opacity: 1;
}
input:-ms-input-placeholder {
  color: #333;
  opacity: 1;
}


.payment-box {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 50px 30px;
  border-radius: 16px;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.15); /* mocniejszy i większy cień */
  transition: box-shadow 0.3s ease;
}

.payment-box:hover {
  box-shadow: 0 16px 55px rgba(0, 0, 0, 0.2);
}


.payment-details {
  background: #f2f2fe;
  border-radius: 12px;
  padding: 25px;
  text-align: left;
}
.payment-details p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 15px;
}

.payment-icon {
  color: #8261ee;
  font-size: 1.3rem;
  margin-right: 10px;
  vertical-align: middle;
}


.btn-back-home {
  background: #8261ee;
  border: none;
  border-radius: 20px;
  padding: 12px 25px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 30px;
  display: inline-block;
}

.btn-back-home:hover {
  background: #ff589e;
}

.payment-details .highlight {
  display: block;
  margin-top: 5px;
  font-weight: 600;
  color: #333;
}

.payment-details .account-number {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.account-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.copy-button-icon {
  background: none;
  border: none;
  color: #8261ee;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  transition: color 0.3s ease;
}

.copy-button-icon:hover {
  color: #ff589e;
}

.success-icon {
  color: #28a745; /* klasyczna zieleń sukcesu */
}


.download-box {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 50px 30px;
  border-radius: 16px;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.download-box .main-button {
  margin-top: 15px;
}

.download-box p:last-of-type {
  margin-bottom: 20px;
}

.gradient-button {
  margin-bottom: 20px;
}

.download-box p:last-of-type {
  margin-top: 20px;
}