/*
====================================
large Screen - Others
====================================
*/
@media screen and (min-width: 1200px) and (max-width: 1399px) {

	.main-menu ul {
		gap: 28px;
	}
	.faq-area-left-items {
		padding-left: calc((100vw - 1090px) / 2);
	}
	.faq-area-right-items {
		padding-right: calc((100vw - 1090px) / 2);
	}

}

/*
====================================
Medium Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.gap-x-40 {
		row-gap: 50px;
	}
	.oplichter-area h2 {
		font-size: 50px;
	}
	.oplichter-area p {
		font-size: 30px;
	}
	.oplichter-area {
		max-width: 870px;
	}
	.helder-box-items {
		padding: 70px 60px 0;
		grid-template-columns: repeat(2, 1fr);
	}
	.helder-box-single-items {
		max-width: 280px;
	}
	.helder-box-heading h2 {
		margin-top: 70px;
		font-size: 50px;
	}
	.spreekt-section {
		padding-top: 160px;
		padding-bottom: 90px;
	}
	.spreekt-button button {
		margin-top: 90px;
	}
	.faq-area-left-items {
		padding-left: calc((100vw - 930px) / 2);
	}
	.faq-area-right-items {
		padding-right: calc((100vw - 930px) / 2);
	}
	.faq-area-items h4 {
		font-size: 22px;
	}
	.faq-area-items p {
		font-size: 20px;
	}
	.faq-area-items {
		min-height: 280px;
		padding: 35px 0;
	}
	.faq-area-items-right {
		padding-left: 40px;
	}
}

/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {
	
	.footer-items > div {
		min-height: initial;
	}
	.footer-items {
		gap: 20px;
	}
	.banner-content h1,
	.banner-content h2 {
		font-size: 45px;
	}
	.banner-content p {
		margin-top: 30px;
		font-size: 22px;
	}
	.banner-content {
		max-width: 380px;
	}
	.banner-bottom {
		margin-top: 120px;
		flex-direction: column;
		align-items: start;
	}
	.banner-area {
		padding: 130px 0 70px 0;
	}
	.oplichter-area h2 {
		font-size: 40px;
	}
	.oplichter-area p {
		font-size: 24px;
	}
	.oplichter-area {
		max-width: 870px;
	}
	.herkenbaar-top {
		padding-top: 55px;
		margin: 0;
	}
	.herkenbaar-top p {
		padding-top: 20px;
		font-size: 22px;
	}
	.herkenbaar-bottom {
		padding-top: 55px;
	}
	.herkenbaar-bottom h3 {
		font-size: 46px;
	}
	.herkenbaar-bottom ul li {
		font-size: 20px;
	}
	.helder-box-items {
		padding: 50px 35px 0;
		grid-template-columns: repeat(2, 1fr);
	}
	.helder-box-single-items {
		max-width: 280px;
	}
	.helder-box-heading h2 {
		margin-top: 50px;
		font-size: 42px;
	}
	.helder-section {
		padding-top: 120px;
	}
	.helder-box-image {
		padding-top: 40px;
	}
	.overstappen-section {
		padding: 90px 0;
	}
	.overstappen-top h2 {
		font-size: 48px;
	}
	.overstappen-list {
		margin-top: 60px;
	}
	.overstappen-list ul li {
		font-size: 26px;
	}
	.spreekt-section {
		padding-top: 135px;
		padding-bottom: 80px;
	}
	.spreekt-button button {
		margin-top: 60px;
	}
	.faq-area {
		grid-template-columns: repeat(1, 1fr);
	}
	.faq-area-left-items {
		padding-left: calc((100vw - 690px) / 2);
		padding-right: calc((100vw - 690px) / 2);
	}
	.faq-area-right-items {
		padding-right: calc((100vw - 690px) / 2);
		padding-left: calc((100vw - 690px) / 2);
	}
	.faq-area-items h4 {
		font-size: 22px;
	}
	.faq-area-items p {
		font-size: 20px;
	}
	.faq-area-items {
		min-height: initial;
		padding: 35px 0;
	}
	.faq-area-items-right {
		padding-left: 0;
	}

}

/*
====================================
Xtra Small Screen - Small Mobile
====================================
*/
@media screen and (max-width: 767px) {

	.gap-x-40 {
		row-gap: 38px;
	}
	.footer-items > div {
		min-height: initial;
	}
	.footer-items {
		gap: 20px;
	}
	.header-nav {
		padding: 15px 0;
	}
	.banner-content h1,
	.banner-content h2 {
		font-size: 40px;
	}
	.banner-content p {
		margin-top: 20px;
		font-size: 20px;
	}
	.banner-content {
		max-width: 330px;
	}
	.banner-bottom {
		margin-top: 50px;
		flex-direction: column;
		align-items: start;
	}
	.banner-area {
		padding: 90px 0 70px 0;
		border-radius: 40px;
		margin-top: 70px;
		position: relative;
		z-index: 1;
	}
	.banner-bottom button {
		padding: 20px 32px;
		font-size: 24px;
	}
	.banner-popup-bottom-submit {
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: start;
		gap: 8px;
	}
	.banner-popup-bottom-submit p br {
		display: none;
	}
	.banner-popup-bottom-submit button {
		padding: 16px 32px;
		font-size: 20px;
		width: 100%;
		text-align: center;
	}
	.banner-popup-top button svg {
		max-width: 20px;
	}
	.banner-pop .popup {
		top: auto;
		bottom: 0;
		left: 0;
		transform: translateY(100%);
		border-radius: 24px 24px 0 0;
		padding: 28px 28px 36px;
		max-width: 100%;
		max-height: 90vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.banner-pop.is-open .popup {
		transform: translateY(0);
	}
	.popup-secondary {
		top: auto;
		bottom: 0;
		left: 0;
		transform: translateY(100%);
		border-radius: 24px 24px 0 0;
		padding: 28px 28px 36px;
		max-width: 100%;
	}
	.spreekt-popup.is-open .popup-secondary {
		transform: translateY(0);
	}
	.banner-popup-bottom {
		gap: 50px;
		margin-top: 20px;
	}
	.banner-popup-bottom-form label {
		margin-bottom: 4px;
		font-size: 18px;
	}
	.banner-popup-bottom-form {
		gap: 20px;
	}
	.banner-popup-top h2 {
		font-size: 26px;
	}
	.banner-pop .popup p {
		padding-top: 12px;
		font-size: 18px;
	}
	.oplichter-area h2 {
		font-size: 34px;
		line-height: 115%;
	}
	.oplichter-area p {
		font-size: 20px;
	}
	.oplichter-area-bottom h4 {
		font-size: 28px;
	}
	.oplichter-area-icon svg {
		transform: translateX(50%);
	}
	.herkenbaar-top {
		padding-top: 55px;
		margin: 0;
	}
	.herkenbaar-top p {
		padding-top: 16px;
		font-size: 18px;
	}
	.herkenbaar-bottom {
		padding-top: 50px;
	}
	.herkenbaar-bottom h3 {
		font-size: 38px;
	}
	.herkenbaar-bottom ul li {
		font-size: 18px;
		line-height: normal;
	}
	.herkenbaar-section {
		padding-bottom: 70px;
	}
	.helder-box-items {
		padding: 50px 35px 0;
		grid-template-columns: repeat(1, 1fr);
		gap: 30px;
	}
	.helder-box-single-items {
		max-width: 280px;
	}
	.helder-section {
		padding-top: 120px;
		padding-bottom: 45px;
	}
	.helder-box-image {
		padding-top: 40px;
		grid-template-columns: repeat(1, 1fr);
	}
	.helder-box {
		padding-top: 44px;
	}
	.helder-box-heading h2 {
		margin-top: 40px;
		font-size: 34px;
		line-height: 115%;
	}
	.helder-box-button button {
		padding: 12px 32px;
		font-size: 22px;
	}
	.overstappen-section {
		padding: 50px 0 90px;
	}
	.overstappen-top h2 {
		font-size: 38px;
	}
	.overstappen-list {
		margin-top: 40px;
	}
	.overstappen-list ul li {
		padding: 18px 35px;
		font-size: 22px;
	}
	.spreekt-content h2 {
		font-size: 38px;
	}
	.spreekt-content p {
		font-size: 22px;
	}
	.spreekt-section {
		padding-top: 120px;
		padding-bottom: 70px;
	}
	.spreekt-button button {
		margin-top: 40px;
		font-size: 24px;
	}
	.faq-area {
		grid-template-columns: repeat(1, 1fr);
	}
	.faq-area-left-items {
		padding-left: calc((100vw - 510px) / 2);
		padding-right: calc((100vw - 510px) / 2);
	}
	.faq-area-right-items {
		padding-right: calc((100vw - 510px) / 2);
		padding-left: calc((100vw - 510px) / 2);
	}
	.faq-area-items h4 {
		font-size: 22px;
	}
	.faq-area-items p {
		font-size: 20px;
	}
	.faq-area-items {
		min-height: initial;
		padding: 35px 0;
	}
	.faq-area-items-right {
		padding-left: 0;
	}
	.faq-section {
		padding-bottom: 65px;
	}
	.logo-area img {
		max-width: 84px;
		transform: translateY(3.5px);
	}
	.oplichter-section {
		padding-top: 55px;
	}
	.herkenbaar-top-number h4 {
		font-size: 23px;
	}
	.justify-center {
		margin-inline: auto;
	}
	.helder-box-single-items p {
		font-size: 14px;
	}
	.banner-area:after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		background-color: #0000005b;
		z-index: -1;
		border-radius: inherit;
	}
	.banner-content p {
		color: #fff;
	}
	.banner-content h1,
	.banner-content h2 {
		color: #fff;
	}
	.banner-bottom .custom-select select {
		color: #fff;
	}
	.select-arrow svg path {
		stroke: white;
	}
	.offcanvas-header img {
		max-width: 90px;
	}
	.hero-custom-select span {
		color: #fff;
	}
	.hero-custom-select svg path {
		stroke: #fff;
	}
	
	.overstappen-top h2 {
		line-height: 117%;
	}

}



@media screen and (max-width: 575px) {
	
	.footer-section {
		padding: 45px 0 50px 0;
	}
	.footer-items {
		gap: 15px;
	}
	.banner-area {
		padding: 80px 0 55px 0;
		border-radius: 20px;
	}
	.banner-content h1,
	.banner-content h2 {
		font-size: 32px;
	}
	.banner-content p {
		margin-top: 17px;
		font-size: 20px;
	}
	.banner-bottom-left {
		flex-direction: column;
		gap: 20px;
		align-items: start;
	}
	.banner-bottom button {
		padding: 12px 32px;
		font-size: 18px;
	}
	.banner-bottom-right {
		flex-wrap: wrap;
		gap: 20px;
	}
	.banner-pop .popup {
		padding: 24px 24px 32px;
	}
	.banner-popup-top h2 {
		font-size: 22px;
	}
	.oplichter-area h2 {
		font-size: 24px;
	}
	.oplichter-area p {
		font-size: 16px;
		padding-top: 8px;
	}
	.oplichter-area-bottom h4 {
		font-size: 22px;
	}
	.oplichter-area-bottom button {
		font-size: 16px;
		padding: 16px 20px;
	}
	.herkenbaar-bottom h3 {
		font-size: 28px;
	}
	.herkenbaar-top p {
		padding-top: 12px;
		font-size: 16px;
	}
	.herkenbaar-top-number {
		height: 45px;
		width: 45px;
		line-height: 78px;
		border: 26px solid #F5F5F7;
	}
	.herkenbaar-bottom ul li:nth-child(2) {
		transform: none;
	}
	.herkenbaar-bottom ul {
		gap: 12px;
		margin-top: 30px;
	}
	.herkenbaar-bottom ul li {
		font-size: 16px;
	}
	.helder-section {
		padding-top: 90px;
	}
	.helder-box {
		padding-top: 40px;
	}
	.helder-box-heading {
		padding: 0 15px;
	}
	.helder-box-heading h2 {
		margin-top: 30px;
		font-size: 26px;
	}
	.helder-box-single-items h4 {
		font-size: 18px;
	}
	.helder-box-single-items span {
		height: 95px;
		width: 8px;
	}
	.helder-box-items {
		padding: 40px 24px 0;
	}
	.overstappen-top h2 {
		font-size: 26px;
	}
	.overstappen-list ul li {
		padding: 15px 20px;
		font-size: 18px;
	}
	.overstappen-list {
		margin-top: 30px;
	}
	.overstappen-list ul {
		gap: 12px;
	}
	.overstappen-bottom {
		padding: 16px;
		bottom: -47px;
	}
	.overstappen-bottom button {
		padding: 15px 30px;
		font-size: 24px;
	}
	.helder-top {
		top: -48px;
	}
	.spreekt-content h2 {
		font-size: 28px;
	}
	.spreekt-section {
		padding-top: 100px;
		padding-bottom: 70px;
	}
	.spreekt-content p {
		font-size: 18px;
	}
	.spreekt-button button {
		margin-top: 30px;
		font-size: 20px;
	}
	.spreekt-popup-top h2 {
		font-size: 30px;
	}
	.spreekt-popup-bottom {
		margin-top: 20px;
		gap: 15px;
	}
	.spreekt-popup-top button svg {
		max-width: 20px;
	}
	.spreekt-popup-bottom button {
		padding: 10px 30px;
		font-size: 20px;
	}
	.faq-area-left-items {
		padding: 0 20px;
	}
	.faq-area-right-items {
		padding: 0 20px;
	}
	.faq-area-items h4 {
		font-size: 20px;
	}
	.faq-area-items p {
		font-size: 18px;
	}
	.faq-area-items {
		min-height: initial;
		padding: 25px 0;
	}
	.faq-area-items-right {
		padding-left: 0;
	}
	.footer-copyright {
		padding-top: 30px;
	}
	.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
		padding-inline: 20px;
	}
}