body {
	background-color: white;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*colors for offer's*/

.basic-fuetures{
	background-color:rgb(232,237,242);
}

/*offer container*/

.offers_container{
	display:flex;
	justify-content: center;
}

.offer_container{
	display:flex;
	border-top: 3px rgb(58,95,132) solid;
	background-color:white;
	max-width:30%;
}

.info-offer-container{
	display:flex;
	flex-direction:column;
	justify-content: center;
}

.info-offer-header{
	display:flex;
	align-items: center;
	justify-content: center;
	font-family:normalFont;
	font-size:26px;
	font-weight:600;
	padding:10px;
}

.info-offer-description{
	display:flex;
	font-family:normalFont;
	text-align:center;
	font-size:14px;
	padding:5px;
}

.info-offer-price{
	display:flex;
	align-items: center;
	justify-content: center;
	font-size:36px;
	font-family:normalFont;
	padding:5px;
}

.info-offer-price-interval{
	display:flex;
	align-items: center;
	justify-content: center;
	padding:5px;
	font-family:normalFont;
}

.info-offer-action-container{
	display:flex;
	align-items: center;
	justify-content: center;
	flex-direction:row;
	padding:5px;
	margin:10px;
}

.info-offer-action-container div{
	margin:10px;
}

.info-offer-features{
	display:flex;
	flex-direction:column;
}

.info-offer-features-header{
	padding:10px;
	display:flex;
	font-size:14px;
	font-family:normalFont;
	font-weight:600;
}

.info-offer-features-position{
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	display:flex;
	font-size:14px;
	font-weight:200;
	font-family:normalFont;
}

/*end offer container*/

/*contents*/

.main-content {
	width: 100%;
	overflow:hidden;
}

.top_container {
	display: flex;
	flex-direction:row;
	white-space: nowrap;
	height: 70px;
	position: fixed;
	z-index: 100;
	width: 100vw;
	box-shadow: 0px 0px 25px 0px rgba(45, 69, 95, 0.1);
	background: rgba(255, 255, 255, 0.2); /* półprzezroczyste tło */
    backdrop-filter: blur(10px);          /* rozmycie tego co pod spodem */
    -webkit-backdrop-filter: blur(10px);  /* Safari */
}

.chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.label_chart{
	 font-size: 18px;
  fill: white;
  font-family: normalFont;
  opacity: 0.75;
}

/* linie */

.line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-out forwards;
}

/* kolory */

.quality { stroke: #3b82f6; animation-delay: 0s; }
.efficiency { stroke: #22c55e; animation-delay: 0.3s; }
.cost { stroke: #f97316; animation-delay: 0.6s; }

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.top_container.scrolled {
  background-color: black !important;
  transition: background-color 200ms linear;
}

.top_container.scrolled .nav-link {
  color:#555;
}

.logo {
	display:flex;
	font-weight:600;
	font-family: normalFont;
	font-size: 24px;
	height: 70px;
	justify-content: center;
	align-items: center;
	margin-left: 10px;
	color:black;
}

.welcome-content {
	background:transparent;
	border-radius: 12px;
	min-height: 100%;
	width: 100%;
	display:flex;
	flex-direction:column;
	justify-content: center;
}

.buttons-section{
	display:flex;
	flex-direction:row-reverse
}

.buttons-section a{
	 margin: 10px;
}

.bg-row {
  position: relative;
  background-image: url('../img/welcome-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height:400px;
}

.bg-pricing{
	position: relative;
  background-image: url('../img/pricing4.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height:400px;
}

#offers {
  scroll-margin-top: 70px; /* wysokość Twojego navbara */
}

.benefits {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.benefits li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 16px;
  font-size: 18px;
  font-family:normalFont;
  color: #333;
  line-height: 1.5;
}

.benefits li::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #f28c38; /* Twój pomarańcz */
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 10px;
}

.bg-pricing-chart{
	position: relative;
  background-image: url('../img/chart2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height:400px;
}


.bg-row::before{
 content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-pricing-chart::before{
 content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.bg-pricing::before{
	content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-row > * {
  position: relative;
  z-index: 1;
}

.bg-pricing > * {
  position: relative;
  z-index: 1;
}

.bg-pricing-chart > * {
  position: relative;
  z-index: 1;
}

.aboutme-content{
	width:100%;
	min-height:100%;
	display:flex;
	flex-direction:row;
	margin-left:100px;
	margin-right:100px;
}

.contact-content{
	width:100%;
	height:auto;
	display:flex;
	flex-direction:row;
	margin-left:100px;
	margin-right:100px;
}

.projects-content{
	width:100%;
	height:auto;
	display:flex;
	flex-direction:row;
	margin-left:100px;
	margin-right:100px;
}

/*end contents*/

.page-header {
	width: 100%;
	height: 220px;
	flex-direction: column;
	display: flex;
	justify-content: center;
	align-items: center;
}

.page-header-content {
	margin-top: 70px;
}

/*buttons style*/

.shimmer {
  color: grey;
  display: inline-block;
  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% 100%;
  animation: shimmer 4s 2;
  font-size: 50px;
  max-width: 100%;
}

@keyframes shimmer {
  100% {
    mask-position: left
  }
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
}

.fade-up.delay-1 { animation-delay: 0.2s; }
.fade-up.delay-2 { animation-delay: 0.4s; }
.fade-up.delay-3 { animation-delay: 0.6s; }
.fade-up.delay-4 { animation-delay: 0.8s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.button_right {
	margin-top: 30px;
	text-align: right;
	position: relative;
}

.buttonStandard {
	background-color: rgb(130,98,147);
	color:white;
	padding: 0.75rem 2.5rem;
	font-family: normalFont;
	border-radius: 0.5rem;
	text-decoration: none;
	border: 2px rgb(130,98,147) solid;
	 box-shadow: 0 8px 20px rgba(92, 61, 245, 0.3);
}

.buttonStandard2 {
	background-color: rgb(201,105,43);
	color:white;
	padding: 0.75rem 2.5rem;
	font-family: normalFont;
	border-radius: 0.5rem;
	text-decoration: none;
	border: 2px rgb(201,105,43) solid;
	box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
}

.buttonSend {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	align-items: center;
	border: 5px #23405D solid;
	background-color: #23405D;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}

.buttonSendAgain{
	width:150px;
	height: 50px;
	align-items: center;
	border: 5px #23405D solid;
	background-color: #23405D;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}

.buttonMobileMenu{
	background-color:transparent;
	color:black;
	font-size:22px;
	border:none;
	font-family: normalFont;
	padding:15px;
}

.buttonMobileExit{
	background-color:#23405D;
	border-radius:10px;
	color:white;
	font-size:22px;
	border:none;
	font-family: normalFont;
	padding:10px;
}

/*end buttons style*/

/*responsive menu elements*/
.menu, .menuMobile {
	width: inherit;
	margin: 0;
}

.menu-full-screen{
	margin-left: 100px;
}

.menuMobile{
	display:none;	 
}

.show{
	display:flex;
    flex-direction: row-reverse;
	position:absolute;
	height:100vh;
	width:100vw;
	z-index:50;
	background-color: rgba(0, 0, 0, 0.0);
	animation: menuMobileBackgroundAnimation 1s forwards ease-in-out;
}

.responsiveMenuContent{
	display:none;
	position:absolute;
	height:100vh;
	width:100vw;
}

.menuUl{
	background:black;
	height:100%;
	opacity:1;
	z-index:100;
	display:flex;
	flex-direction:column;
	justify-content:center;
	animation: menuMobileContentAnimation 1s forwards ease-in-out;
}

.menuWrapperTop{
	display:flex;
	align-items:left;
	width:100%;
	margin-left:10px;
}


ul#navigationMobile {
list-style-type: none;
margin-left:10px;
padding-left:0px;
}

ul#navigationMobile li {
	font-size: 22px;
	color: white;
	padding: 10px;
	padding-bottom: 5px;
	font-family: normalFont;
	text-decoration: none;
	margin-left:0px;
}

/*end reposnive menu elements*/

/*desktop menu elements*/

ul#footerNavigation{
	display:flex;
	flex-direction:column;
	align-items:center;
	height:100%;
	width:100%;
	margin: 0;
	padding: 0;
}

ul#footerNavigation li {
	display:flex;
	font-size: 16px;
	font-family: normalFont;
	text-decoration: none;
	padding:5px;
}

ul#navigation {
	display:flex;
	flex-direction:row;
	align-items:center;
	height:100%;
}

ul#navigation li {
	display:flex;
	align-items:center;
	line-height: 70px;
	justify-content:center;
	font-size: 16px;
	color: white;
	font-family: normalFont;
	margin: 10px;
	text-decoration: none;
	min-width:100px;
}

ul#navigation li a, ul#footerNavigation li a,  ul#navigationMobile li a {
	text-decoration: none;
	font-family: normalFont;
}

ul#navigation li:hover {
	border-bottom: 2px #23405D solid;
	cursor: pointer;
}

.li_active {
	border-bottom: 4px #23405D solid;
}

/*end desktop menu elements*/

/*fotter*/

.footer {
	color: rgb(204, 204, 204);
	font-family: normalFont;
	font-size: 14px;
	background-color:rgb(48, 39 , 47);
	width: 100%;
	text-align: center;
	overflow: hidden;
	height: auto;
	padding-top:50px;
	padding-bottom:50px;
}

.fotter-position-container{
	display:flex;
	flex-direction:row;
}

.fotter-position-container div{
	display:flex;
	flex-direction:row;
}

/*end fotter*/

.successMessage{
	color:black;
	text-align:center;
	font-family: normalFont;
	font-size:1.2rem;
}

.succesMail, .errorMail, .successMessage, .errorMessage{
	justify-content:center;
	align-items:center;
	display:flex;
	flex-direction:column;
	background:white;
	border-radius:10px;
}

/*mobile elements*/

@media screen and (min-width: 960px){
	.show{
	display:none;}
.responsiveMenuContent{
	display:none;
}
.main-content{
	padding-top:60px;
}
.welcome-content{
	margin-bottom:50px;
	width:100%;
	}
}

@media screen and (min-width: 601px) and (max-width: 1000px) {
	.welcome-content{
	width:100%;
	}
	
	.main-content{
	padding-top:70px;
	}
}

@media screen and (max-width: 600px) {

	.main-content {
	    padding-top:10px;
		flex-direction: column;
	}
	ul#navigation {
		display: none;
	}
	
	.menuMobile{
	display:block;
	display:flex;
	justify-content:right;
	margin-right:10px;
	align-items:center;
		}
	.picture_area {
		margin-top: 50px;
	}
	.welcome-content {
		width: 100%;
		height:100%;
		margin-top: 50px;
		margin-bottom:50px;
		padding: 5px;
		padding-left: 10px;
		display:flex;
		justify-content:center;
		flex-direction:column;
	}
	
	.aboutme-content{
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	margin-left:100px;
	margin-right:100px;
	}
	
	.cv-left{
	height:auto;
	width:100%;
	}
	
	.cv-right{
	height:auto;
	width:100%;
	padding-left:10px;
	}
	
	.contact-content{
	width:100%;
	display:flex;
	flex-direction:column;
	margin-left:100px;
	margin-right:100px;
}

.projects-content{
	width:100%;
	display:flex;
	flex-direction:column;
	margin-left:100px;
	margin-right:100px;
}

.contact-left {
	width:100%;
}

.contact-right {
	width:100%;
}

.social_media{
	justify-content:center;
	
}

.contact_container{
	flex-direction:column;
}
}

/*end mobile elements*/

.head_title {
	position: relative;
	width: 100%;
	font-family: normalFont;
	font-weight: 50;
	font-size: 50px;
	color: rgb(204, 204, 204);
}

.item_content {
	z-index: -1;
	flex-direction: column;
}

.white {
	color: white;
}

.rgb {
	color: rgb(33, 37, 41);
}

/*social media and contacts elements*/

.social_media {
	justify-content:center;
	padding: 10px;
	display: flex;
	flex-direction: row;
}

.contact_container{
	justify-content:center;
	align-items:center;
	padding: 10px;
	display: flex;
}

.soc_whatsapp {
	position: relative;
	color: #65BD56;
	font-size: 24px;
	transition: transform 250ms;
	margin-right:25px;
}

.soc_messenger {
	position: relative;
	color: #5181F5;
	font-size: 24px;
	transition: transform 250ms;
	margin-right:25px;
}

.soc_facebook {
	position: relative;
	color: #5181F5;
	font-size: 24px;
	transition: transform 250ms;
	margin-right:25px;
}

.soc:hover, .soc_whatsapp:hover, .soc_messenger:hover, .soc_facebook:hover {
	cursor: pointer;
	transform: scale(2);
}

.con {
	margin-right: 10px;
	color: rgb(153, 153, 153);
	font-family: normalFont;
	transition: 0.3s;
	white-space: pre;
}

.con:hover {
	color: #680747;
	cursor: pointer;
}

/*end social media and contacts elements*/