.hero h1, .hero h2 {

	font-size: 4rem;

	margin-bottom: 0.5rem;

}



h2 {

	font-size: 1.5rem;

	margin-bottom: 1rem;

}



.hero {

	height: calc(100vh - 15rem);

	min-height: 606px;

	display: flex;

	flex-wrap: wrap;

	padding: 0rem !important;

}



/* Slideshow container */

.slideshow-container {

  position: relative;

  display: flex;

  width: 100%;

  height: 100%;

}



/* Hide the images by default */

.mySlides {

  display: none;

  padding: 3rem 1rem;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: bottom;

  width: 100%;

}



/* Next & previous buttons */

.prev, .next {

  display: none;

}



/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(17,17,17,0.5);

}



/* Caption text */

.text {

  color: #fff;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}



/* Number text (1/3 etc) */

.numbertext {

  color: #fff;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



/* The dots/bullets/indicators */



.dot-nav {

	position: relative;

	top: -2rem;

}



.dot {

  cursor: pointer;

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #fff;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.active, .dot:hover {

  background-color: #fff234;

}



/* Fading animation */

.fade {

  animation-name: fade;

  animation-duration: 1.5s;

}



@keyframes fade {

  from {opacity: .4}

  to {opacity: 1}

}



.services-grid {

	margin-top: 2rem;

}



.service-grid-item {

	padding-top: 5rem;

	background-repeat: no-repeat;

  background-size: 4rem;

  margin-bottom: 2rem;

}


.download .button {
	cursor: pointer;
	width: fit-content;
	margin: auto;
}


.download-overlay {
	opacity: 0;
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(34, 34, 34, 0.8);
	z-index: -19;
	-webkit-transition: opacity 1.5s ease-out;
  -moz-transition: opacity 1.5s ease-out;
  -ms-transition: opacity 1.5s ease-out;
  -o-transition: opacity 1.5s ease-out;
  transition: opacity 1.5s ease-out;
}

.download-overlay.show {
	opacity: 1;
	z-index: 19;
	-webkit-transition: opacity 1.5s ease-out;
  -moz-transition: opacity 1.5s ease-out;
  -ms-transition: opacity 1.5s ease-out;
  -o-transition: opacity 1.5s ease-out;
  transition: opacity 1.5s ease-out;
}

.why-pop-up {
	opacity: 0;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-height: 90vh;
	overflow-y: auto;
	width: 90vw;
	margin: auto;
	max-width: 420px;
	background-color: #231f20;
	color: #fff;
	z-index: -20;
	overflow: hidden;
	padding: 1rem;
	-webkit-transition: opacity 1.5s ease-out;
  -moz-transition: opacity 1.5s ease-out;
  -ms-transition: opacity 1.5s ease-out;
  -o-transition: opacity 1.5s ease-out;
  transition: opacity 1.5s ease-out;
}

.why-pop-up.show {
	opacity: 1;
	z-index: 20;
	-webkit-transition: opacity 1.5s ease-out;
  -moz-transition: opacity 1.5s ease-out;
  -ms-transition: opacity 1.5s ease-out;
  -o-transition: opacity 1.5s ease-out;
  transition: opacity 1.5s ease-out;
}

.why-pop-up .close-button {
	content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jaXJjbGUteC1pY29uIGx1Y2lkZS1jaXJjbGUteCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJtMTUgOS02IDYiLz48cGF0aCBkPSJtOSA5IDYgNiIvPjwvc3ZnPg==');
	height: 24px;
	width: 24px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	z-index: 99;
}

.download h2 {
	margin-bottom: 3rem;
}

.download img {
	display: block;
	margin: 3rem auto;
}


.download .wpforms-field-label, .download .wpforms-field-sublabel {
	color: #fff !important;
}

.download div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
	background-color: #fff234;
	border: #fff234;
	color: #333;
	font-weight: 700;
}

.download div.wpforms-container-full button[type=submit]:hover {
	background: #fff;
	border: #fff234;
	color: #333;
	font-weight: 700;
}

.download div.wpforms-container-full .wpforms-confirmation-container-full, .download div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	background: unset;
	border: unset ;
}


.help-content ul {

	margin-top: 4rem;

	display: grid;

	list-style: none;

}



.help-content ul li {

	margin-bottom: 2rem;

	font-family: 'Roboto Condensed', sans-serif !important;

	font-weight: 600;

	font-size: 1.25rem;

}



.help .cta-button-group .button {

	max-width: 250px;

	margin: auto;

	margin-top: 2rem;

}



.help .cta-button {

	text-align: center;

	font-size: 1rem;

}



.video-review-block {

	position: relative;

	padding-bottom: 56.25%;

	height: 0; overflow: hidden; 

	max-width: 100%;

	margin: 2rem;

}



.video-review-block iframe, .video-review-block embed, .video-review-block object {

	position: absolute; 

	top: 0; 

	left: 0; 

	width: 100%; 

	height: 100%;

}



.quotation-content h2, .quotation-content p {

	font-family: 'Roboto Condensed', sans-serif !important;

}



.benefits-block {

	padding: 1.5rem;

	padding-top: 8rem;

	margin: 1rem auto;

	background-repeat: no-repeat;

	background-position: center 2rem;

	background-size: 5rem;

	background-image: url('/wp-content/uploads/2025/03/benefits-tick-icon.png');

}



.benefits-block p {

	font-family: 'Roboto Condensed', sans-serif !important;

}



.package-grid-item {

	width: 100%;

	padding: 2rem;

	margin: 1rem auto;

}



.package-grid-item h3 {

	font-family: 'Roboto Condensed', sans-serif !important;

	font-size: 1.5rem;

	margin-bottom: 3rem;

}



.package-grid-item h4 {

	font-size: 1.25rem;

	margin-bottom: 1rem;

}



.package-grid-item .black-button {

  text-align: center;

  width: fit-content;

  margin: auto;

  margin-top: 2rem;

  color: #fff;

  background-color: #111;

  font-size: 1rem;

  border: none;

}



.package-grid a.button:hover .black-button {

	background-color: #fff234;

	color: #111;

}



.faqs {

	max-width: 735px;

}



.faqs h2 {

	margin-bottom: 2rem;

}





.faq-question {

	padding: 0.5rem;

	margin-top: 0.5rem;

	margin-bottom: 1rem;

	border-bottom: solid 0.15rem #fff234;

	cursor: pointer;

}



.faq-question:hover {

	background-color: #f7f7f7;

}



.faq-question:after {

	content: "+";

	font-weight: 600;

	font-size: 1.5rem;

	position: absolute;

	right: 0;

	color: #fff234;

	rotate: 0deg;

	-webkit-transition: all 0.5s ease-out;

  -moz-transition: all 0.5s ease-out;

  -ms-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}



.faq-question.open::after {

	rotate: 135deg;

}



.faq-answer {

	max-height: 0;

	opacity: 0;

	-webkit-transition: all 0.75s ease-out;

  -moz-transition: all 0.75s ease-out;

  -ms-transition: all 0.75s ease-out;

  -o-transition: all 0.75s ease-out;

  transition: all 0.75s ease-out;

}





.faq-answer.open {

	max-height: 20rem;

	opacity: 1;

}





.post-image {

    width: 100%;

    height: 200px;

    object-fit: cover;

}



.post-content {

    padding: 15px;

}



.post-meta {

    display: flex;

    gap: 15px;

    margin-top: 10px;

    color: #666;

    font-size: 0.9em;

}



.post-meta time {

    margin-left: auto;

    color: #999;

}



.like-icon::before {

    content: "♥";

    margin-right: 5px;

}



.comment-icon::before {

    content: "💬";

    margin-right: 5px;

}



.facebook {

    border-top: 4px solid #1877f2;

}



.instagram {

    border-top: 4px solid #e4405f;

}



@media only screen and (min-width:735px) {



	.hero h1, .hero h2 {

		font-size: 3rem;

	}



	.hero {

		height: calc(100vh - 15rem);

	}



	/* Next & previous buttons */

	.prev, .next {

		cursor: pointer;

	  position: absolute;

	  top: 50%;

	  width: auto;

	  margin-top: -22px;

	  padding: 16px;

	  color: white;

	  font-weight: bold;

	  font-size: 18px;

	  transition: 0.6s ease;

	  border-radius: 0 3px 3px 0;

	  user-select: none;

	}



	.prev, .next {

  	display: block;

	}



	.slide-content {

		width: 70%;

		margin-top: 7rem;

	}



	.hero-content {

		max-width: 500px;

	}

	.why-pop-up {
		max-width: 735px;
	}


	.services-grid {

		grid-template-columns: 50% 50%;

	}



	.service-grid-item {

		padding-left: 4.5rem;

		padding-top: 4rem;

		margin-right: 2rem;

		margin-bottom: 0rem;

		background-position: left;

	}



	.benefits-wrapper {

		grid-template-columns: 50% 50%;

	}



	.benefits-block {

		margin: 2rem;

	}



	.help-content ul {

		grid-template-columns: 50% 50%;

		margin-top: 2rem;

	}



	.help-content li {

		grid-template-columns: 50% 50%;

		padding: 2rem 4rem;

	}



	.video-review-wrapper {

		max-width: 735px;

		margin: auto;

	}

	

	.video-review {

		width: 100%;

	}



	.package-grid {

		grid-template-columns: repeat(4, 1fr);

		grid-auto-rows: 1fr;

		grid-gap:1rem;

	}



	.package-grid-item {

		grid-column: span 2;

		display: grid;

		align-items: end;

		margin: 0rem;

	}



	.package-grid-item:last-child:nth-child(3n - 1) {

	  grid-column-end: -2;

	}

}





@media only screen and (min-width:1069px) {

	.service-grid-item {

		padding-top: 2rem;

	}


	.why-pop-up {
		max-width: 979px;
	}

	.why-pop-wrapper .wpforms-container {
		padding: 2rem 8rem !important;
	}

	.benefits-wrapper {

		grid-template-columns: 25% 25% 25% 25%;

	}



	.package-grid {

		grid-template-columns: repeat(6, 1fr);

	}



	.package-grid-item:nth-last-child(2):nth-child(3n + 1) {

  	grid-column-end: 4;

	}



}