@import url("style-v11.css");

#mobile {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -100000;
}

/* Mobile sizes */
@media (max-width: 768px) {
	#mobile {
		display: block;
	}

	.hero {
		#logo-hero {
			display: none;
			visibility: hidden;
		}
	}

	#Header {
		height: 105px;
		padding: unset;
		transition: 0.3s;

		.HeaderContainer {
			margin-top: unset;
			height: 100%;
			gap: unset;
			transition: 0.3s;

			#menu {
				display: none;
				visibility: hidden;
			}

			.button {
				display: none;
				visibility: hidden;
			}

			#navbar-logo {
				visibility: visible;
				width: 281.8px;
				height: 51px;

				top: 34px;
				left: 16px;
				transition: 0.3s;

				svg {
					transition: 0.3s;

				}
			}

			.hamburger {
				display: block;
				visibility: visible;

				position: fixed;
				/*top: 34px;*/
				right: 17px;

				z-index: 1001;

				background: none;
				border: none;

				cursor: pointer;

				/* padding: 5px; */
				height: 51px;
				transition: 0.3s;

			}

			.hamburger span {
				display: block;
				visibility: visible;

				width: 25px;
				height: 4px;

				background: white;
				margin: 12px 0;
				transition: 0.3s;

			}
		}
	}

	#Header.shrink {
		height: 72px;

		.HeaderContainer {
			#navbar-logo {
				width: 132.61px;
				height: 24px;
			}

			.hamburger {
				top: 18px;

				span {
					background-color: var(--Pink-Pepper, rgba(251, 72, 196, 1));
				}

			}


		}
	}

	#Header.hidden {
		visibility: hidden;

		#navbar-logo {
			display: none;
		}

		#hamburger {
			display: none;
		}
	}

	#hero {
		margin-top: -105px;

	}

	.float-button {
		display: block;
		visibility: visible;

		position: fixed;

		right: 8px;
		bottom: 20px;

		padding: 32px 56px;

		/* margin: 0 auto; */
		max-width: 223px;
		min-width: 223px;
		height: 86px;

		background: #FB48C4;
		border-radius: 100px;

		flex-grow: 1;

		order: 2;
		flex-basis: 223px;

		z-index: 10000;

		a.open-account {

			width: 111px;
			height: 22px;

			font-family: 'Pepper Neo-Black';
			font-size: 20px;
			line-height: 22px;
			text-align: center;

			color: #FFFFFF;
			text-decoration: none;

			flex: none;
			order: 0;
			flex-grow: 0;
		}
	}

	.float-button.hidden {
		display: none;
		visibility: hidden;
	}

	#content {
		#services {
			padding: 52px 16px 0px 0px;

			h1 {
				font-size: 64px;
				line-height: 52px;
				padding-left: 16px;
			}
		}

		#aboutus_qr {
			padding: 200px 16px 0 16px;
			gap: 45px;
			

			.qr {
				width: 100%;
				min-width: unset;

				.img_text {
					.img {
						width: 75px;
						height: 69px;
						border-radius: 10px;
						background-color: unset;
					}

					.text {
						text-align: center;

						span {
							font-size: 24px;
							line-height: 28px;
						}
					}
				}

				.download_button {
					border: unset;
					padding: unset;
					height: unset;

					a {
						text-decoration: none;
						font-family: 'Pepper Neo-SemiBold';
						line-height: 18px;
						border-bottom: 2px solid;
					}
				}
			}

			.aboutus {
				flex-direction: column;
				width: 100%;
				min-width: 254px;
				min-height: 499px;
				gap: 38px;


				.image-box {
					width: 100%;

					.image-box-content-mobile {
						display: block;
						visibility: visible;
						padding: 23px 75px;
						overflow: hidden;
						
						video {
							width: 100%;
						}
					}

					.image-box-content-mobile.horizontal {
						padding: 75px 23px;
						overflow: hidden;
					}

					.image-box-content {
						display: none;
						visibility: hidden;
					}


				}

				.text {
					font-family: Pepper Neo-Regular;
					font-size: 18px;
					line-height: 20px;

					.black {
						font-family: Pepper Neo-Regular;
						font-size: 18px;
						line-height: 20px;

					}

				}


			}
		}

		#faq {
			padding: 77px 16px 38px 0px;
			flex-direction: column;
			gap: 32px;

			.header-category {
				width: 100%;

				.header {
					font-size: 42px;
					line-height: 44px;
					margin-bottom: 15px;
				}

				.categories {
					flex-wrap: nowrap;
					overflow-x: auto;
					scrollbar-width: none;
					-ms-overflow-style: none;
					gap: unset;

					.category {
						margin-left: 6px;
					}
				}
			}

			.aqs {
				padding-left: 16px;

				.aq-by-category {
					gap: 16px;

					.aq {
						padding-bottom: 16px;

						.question_line {
							height: 22px;

							.question {
								font-size: 18px;
								line-height: 20px;
							}

							.open_close_icon {
								width: 15px;
								height: 15px;
							}
						}

						.answer {
							font-size: 18px;
							line-height: 20px;
						}
					}

					.aq.top {
						border-top: unset;
						padding-top: 16px;
					}
				}
			}
		}

		#footer {
			gap: unset;

			.footer_menu {

				flex-direction: column;
				padding: 56px 16px 0px 16px;
				gap: 40px;

				.mobile_open_hamburger {
					display: none;
					visibility: hidden;
					width: 100%;

					flex: none;
					order: 0;

					z-index: 1001;

					background: none;
					border: none;

					cursor: pointer;

					/* padding: 5px; */
					height: 31px;
					transition: 0.3s;

					.X {
						width: 24px;
						height: 24px;
						background-image: url('/wp-content/themes/pepper/img/close_hamburger.png');
						background-position: center;
						background-repeat: no-repeat;
						transition: background-image 0.5s ease-in-out;

					}
				}

				.menu {
					gap: 6px;

					.menu_itm {
						font-family: "Pepper Neo-Black";
						font-size: 42px;
						line-height: 44px;
					}
				}

				.documents {
					width: 100%;
					border-bottom: 1px solid var(--Neutrals-White, rgba(255, 255, 255, 1));

					.header {
						display: none;
					}

					.items {
						width: 100%;

						.doc_category {
							width: 100%;
							border-top: 1px solid var(--Neutrals-White, rgba(255, 255, 255, 1));
							padding-bottom: 24px;
							padding-top: 24px;

							.categ_header {
								justify-content: space-between;
								width: 100%;

								.text {
									flex-grow: unset;
									font-family: "Pepper Neo-Regular";
									font-size: 18px;
									line-height: 20px;

								}

								.arrow {
									flex-grow: unset;
								}
							}
						}
					}
				}


				.button {
					display: none;
					visibility: hidden;
				}

				.button_mobile {
					display: block;
					visibility: visible;

					order: 3;

					a {
						text-decoration: underline;

						font-family: "Pepper Neo-ExtraBold";
						font-size: 16px;
						line-height: 19px;

						color: var(--Neutrals-White, rgba(255, 255, 255, 1));
					}
				}

				.contact {
					width: 100%;
					gap: 20px;
					order: 4;
					justify-content: space-between;

					.address {
						width: 50%;
						order: 1;

						flex-direction: column;
						gap: 8px;


						.header {
							font-family: Pepper Neo-Medium;
							font-size: 16px;
							line-height: 18px;
						}

						.items {
							font-family: Pepper Neo-Bold;
							font-size: 16px;
							line-height: 18px;
						}
					}

					.contactus {
						width: 50%;
						order: 2;
						flex-direction: column;
						gap: 8px;

						.header {
							font-family: Pepper Neo-Medium;
							font-size: 16px;
							line-height: 18px;
						}

						.items {
							font-family: Pepper Neo-Bold;
							font-size: 16px;
							line-height: 18px;
						}
					}
				}
			}

			.footer_logo {
				flex-grow: unset;
				padding-top: 100px;
				padding-bottom: 16px;
				padding-left: 16px;
				padding-right: 16px;
				gap: 12px;

				svg {
					order: 2;
				}

				.byLeumi {
					order: 1;
				}


			}
		}
	}

	#content.as_menu {
		padding-top: 0px;

		#footer {
			.footer_menu {
				.mobile_open_hamburger {
					display: block;
					visibility: visible;
				}
			}
		}
	}
}