/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap');

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
	margin: 0;
	padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* General */
:root {
    --white: hsl(0, 0%, 100%);
	--anti-flash-white: hsl(0, 0%, 95%);
    --platinum: hsl(0, 0%, 90%);
	--spanish-gray: hsl(0, 0%, 59%);
	--raisin-black: hsl(0, 0%, 15%);
    --black: hsl(0, 0%, 10%);
	--razzmatazz: hsl(338, 85%, 54%);
	--apple: hsl(113, 52%, 55%);
	--wageningen-green: hsl(111, 51%, 43%);
	--black-coral: hsl(230, 14%, 41%);
	--page-width: 75ch;
	--font-h1: 2rem;
	--font-h2: 1.5rem;
	--font-h3: 1.3rem;
	--font-h4: 1.3rem;
	--font-body: 1rem;
	--padding-page: 2rem;
	--margin-h1: 1.5rem;
	--margin-section: 2rem;
	--margin-blockquote: 1rem;
}

@media (min-width: 768px) {
	:root {
		--font-h1: 2.25rem;
		--font-h2: 2.5rem;
		--font-h3: 1.75rem;
		--font-h4: 1.4rem;
		--font-body: 1rem;
		--padding-page: 3.5rem;
		--margin-h1: 2rem;
		--margin-section: 3rem;
		--margin-blockquote: 1.5rem;
	}
}

html, body {
    width: 100%;
    height: 100%;
}

body {
	display: grid;
	grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto;
	color: var(--black);
	background: var(--white);
	font-family: "Lato", sans-serif;
	line-height: 1.5;
}

figure {
	margin-block: 1.5rem;
}

img {
	display: block;
	max-width: 100%;
}

/* Typography */
* + p {
	margin-top: 1rem;
}

h1, h2, h3 {
	text-align: center;
	color: var(--wageningen-green);
}

h1 {
    font-size: var(--font-h1);
    line-height: 1.2;
	margin-bottom: var(--margin-h1);
}

h2 {
    font-size: var(--font-h2);
    line-height: 1.3;
}

h3 {
    font-size: var(--font-h3);
    line-height: 1.3;
}

h4 {
    font-size: var(--font-h4);
    line-height: 1.3;
}

figcaption {
	text-align: center;
	font-weight: 600;
    line-height: 1.3;
	margin-top: 1rem;
}

.center {
	text-align: center;
}

a {
	text-decoration: none;
}

a:is(:hover, :focus, :active) {
	text-decoration: underline;
	color: #3692d2;
}

a:visited {
	color: var(--black-coral);
}

/* Header */
header {
	background-color: hsla(0, 0%, 100%, 0.9);
	box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
	position: fixed;
	width: 100%;
	z-index: 1;
}

header section {
	max-width: 138ch;
	padding-inline: 1.5rem;
	margin-inline: auto;
}

header figure {
	margin-block: 1rem;
}

header img {
	max-height: 1.5rem;
}

/* Main */
main {
	margin-top: 3.5rem;
    padding-block: var(--padding-page);
}

main section + section {
	margin-top: var(--margin-section);
}

main ol {
	margin-left: 1rem;
    margin-block: 1.5rem;
}

main > section ol li {
	list-style: decimal;
}

main ol li + li {
	margin-top: 0.5rem;
}

main > section {
	max-width: calc(var(--page-width) + 3rem);
	padding-inline: 1.5rem;
	margin-inline: auto;
}

/* Footer */
footer {
	background: var(--raisin-black);
	color: var(--anti-flash-white);
	padding-block: 2rem;
	padding-inline: 1.5rem;
}

footer article {
	display: flex;
	gap: 5rem;
	margin-inline: auto;
	margin-bottom: 2rem;
	max-width: calc(var(--page-width) + 15ch);
}

footer nav:last-of-type {
	margin-left: auto;
}

footer ul {
	list-style: none;
}

footer li + li {
	margin-top: 0.5rem;
}

footer p {
	color: var(--spanish-gray);
	text-align: center;
}

footer a {
	color: var(--anti-flash-white);
}

footer h4 {
	color: var(--wageningen-green);
	margin-bottom: 1rem;
}

@media (max-width:767px) {
	footer article {
		text-align: center;
		flex-direction: column;
		gap: 1.5rem;
	}

	footer nav:last-of-type {
		margin-left: 0;
	}
}

/* Components - Blockquote */
blockquote {
	color: var(--wageningen-green);
	font-size: var(--font-h3);
    line-height: 1.45;
	text-align: center;
	font-style: italic;
	margin-block: var(--margin-blockquote);
	margin-inline: auto;
	max-width: 90%;
}

blockquote p::before,
blockquote p::after {
	font-size: 175%;
	line-height: 0;
	position: relative;
	top: 0.85rem;
}

blockquote p::before {
	content: "\201C";
    margin-right: 0.25rem;
}

blockquote p::after {
    content: "\201D";
	margin-left: 0.25rem;
}

/* Components - Buy Buttons */
.buy-buttons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.buy-buttons article {
	background: var(--anti-flash-white);
	padding: 4.5rem 2rem;
	position: relative;
	text-align: center;
	border-radius: 0.5rem;
}

.buy-buttons .popular::before {
	content: "Most Popular";
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1.15rem;
	text-align: center;
	background: var(--wageningen-green);
	color: var(--white);
	width: 100%;
	padding: 0.25rem 0;
	border-radius: 0.5rem 0.5rem 0 0;
}

.buy-buttons figure {
	margin-block: 0;
}

.buy-buttons img {
	display: inline-block;
}

.buy-buttons .option {
	font-size: 1.25rem;
	text-transform: uppercase;
}

.buy-buttons .option span {
	border: 1px solid var(--black);
	padding: 0.5rem 0.75rem;
	margin-left: 0.5rem;
}

.buy-buttons .product {
	font-size: 1.5rem;
	font-weight: 600;
}

.buy-buttons .price {
	font-size: 3rem;
	font-weight: 500;
	line-height: 1;
	color: var(--wageningen-green);
	margin-block: 1.25rem 1.75rem;
}

.buy-buttons button,
.buy-buttons a.button {
	font-size: 1.2rem;
	text-transform: uppercase;
	color: var(--white);
	background: var(--apple);
	border: none;
	border-radius: 100rem;
	padding: 1rem;
	margin-bottom: 1.25rem;
	width: 90%;
	cursor: pointer;
}

.buy-buttons button:is(:hover, :focus, :active),
.buy-buttons a.button:is(:hover, :focus, :active) {
	background: var(--wageningen-green);
}

a.button {
	display: inline-block;
}

a.button:is(:hover, :focus, :active, :visited) {
	color: var(--white);
	text-decoration: none;
}

@media (min-width: 768px) {
	.buy-buttons {
		grid-template-columns: 1fr 1fr;
	}

	.buy-buttons .popular::before {
		font-size: 1.15rem;
	}

	.buy-buttons .option {
		font-size: 1.5rem;
	}

	.buy-buttons .price {
		font-size: 3.5rem;
	}
}

.dark {
	color: rgb(30,30,30);
}
.pink {
	color: rgb(237, 38, 111);
}
.news {
	padding: 1em 0;
}
ul.check li::before {
	content: "✓";
	background: var(--wageningen-green);
	font-weight: 900;
}
ul:is(.check, .cross) li::before {
	color: var(--white);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	border-radius: 1rem;
	font-size: 1rem;
	margin-right: 0.5rem;
}
ul:is(.check, .cross), ul.check li::marker {
	list-style: none;
	content: "";
}

h5 {
    font-size: 29px !important; /* 2rem */
}

.txt img {
    width: 85%;
    display: block;
    margin: 0 auto 25px auto;
}

ul li::before {
	background: #63be80 !important;
}

.prc-container-box-value-wrap {
	background: #63be80 !important;
}

.countdown-out .countdown-section .countdown-amount {
    color: #63be80 !important;
}

.btn {
	background: #63be80 !important;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn:active:focus,
.btn.active,
.btn.active:focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
	background: #44a061 !important;
}

.steps-cont a,
.foot-links ul li a,
.foot-links ul li::after {
    color: #63be80 !important;
}

.payment-info .price {
    color: #63be80 !important;
}

.btm-arrow {
    color: #63be80 !important;
}

.pricing-tables .box {
    background: #63be80 !important;
}

.pricing-tables .btn {
    background: #000 !important;
}

.green {
    color: #63be80 !important;
}

.steps-cont {
    width: 100%;
    float: left;
    padding: 0 0 70px 0;
}

.steps-cont:last-child {
    padding-bottom: 0;
}

.steps-cont .article {
    width: 100%;
    float: left;
    margin: 0 0 62px 0;
}

.steps-cont .article:last-child {
    margin-bottom: 0;
}

.steps-cont .article .circle-out {
    width: 187px;
    height: 187px;
    float: left;
    display: table;
    font-weight: 900;
    background: #e9e9e9;
    border: 1px solid #dadada;
    border-radius: 360px;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 0 -187px 0 0;
}

.steps-cont .article .circle-out .inner-bg {
    width: 100%;
    height: 100%;
    float: none;
    display: table-cell;
    vertical-align: middle;
}

.steps-cont .article .circle-out .number {
    width: 100%;
    float: left;
    font-weight: 900;
    font-size: 60px;
    color: #63be80;
    line-height: 60px;
}

.steps-cont .article .circle-out .sml-txt {
    width: 100%;
    float: left;
    font-weight: 900;
    font-size: 24px;
    color: #63be80;
    line-height: 24px;
}

.steps-cont .article aside {
    width: 100%;
    float: left;
    padding: 20px 0 0 245px;
}

.steps-cont .article aside h3 {
    font-size: 32px;
    line-height: 40px;
    padding: 0 0 32px 0;
}

.steps-cont .article aside h3:last-child {
    padding-bottom: 0;
}

.steps-cont .article aside p:last-child {
    padding-bottom: 0;
}

.steps-cont .article aside p a {
    font-weight: 600;
    text-decoration: underline;
}

.steps-cont .article aside ol {
    width: 100%;
    float: left;
    counter-reset: item;
    padding: 5px 0 32px 0;
    margin: 0;
}

.steps-cont .article aside ol:last-child {
    padding-bottom: 0;
}

.steps-cont .article aside ol li {
    width: 100%;
    float: left;
    counter-increment: item;
    padding: 0 0 0 93px;
    margin: 0 0 32px 0;
}

.steps-cont .article aside ol li:last-child {
    margin-bottom: 0;
}

.steps-cont .article aside ol li::before {
    content: "";
    width: 64px;
    height: 64px;
    float: left;
    content: counter(item);
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: #ffffff;
    line-height: 64px;
    text-align: center;
    background: #63be80;
    border-radius: 360px;
    position: absolute;
    top: 9px;
    left: 0;
}

.steps-cont .article-out {
    width: 100%;
    float: left;
}

@media (max-width: 1199px) {
    .steps-cont {
        padding: 0 0 60px 0;
    }

    .steps-cont .article {
        margin: 0 0 52px 0;
    }

    .steps-cont .article .circle-out {
        width: 140px;
        height: 140px;
        margin: 0 -140px 0 0;
    }

    .steps-cont .article .circle-out .number {
        font-size: 48px;
        line-height: 48px;
    }

    .steps-cont .article .circle-out .sml-txt {
        font-size: 22px;
        line-height: 22px;
    }

    .steps-cont .article aside {
        padding: 10px 0 0 180px;
    }

    .steps-cont .article aside h3 {
        font-size: 28px;
        line-height: 36px;
        padding: 0 0 27px 0;
    }

    .steps-cont .article aside ol {
        padding: 5px 0 27px 0;
        margin: 0;
    }

    .steps-cont .article aside ol li {
        padding: 0 0 0 75px;
        margin: 0 0 27px 0;
    }

    .steps-cont .article aside ol li::before {
        width: 50px;
        height: 50px;
        font-size: 24px;
        line-height: 50px;
        top: 6px;
    }
}

@media (max-width: 767px) {
    .steps-cont {
        padding: 0 0 45px 0;
    }

    .steps-cont .article {
        margin: 0 0 45px 0;
    }

    .steps-cont .article .circle-out {
        width: 100px;
        height: 100px;
        margin: 0 0 25px 0;
    }

    .steps-cont .article .circle-out .number {
        font-size: 36px;
        line-height: 40px;
    }

    .steps-cont .article .circle-out .sml-txt {
        font-size: 18px;
        line-height: 20px;
    }

    .steps-cont .article aside {
        padding: 0;
    }

    .steps-cont .article aside h3 {
        font-size: 24px;
        line-height: 30px;
        padding: 0 0 23px 0;
    }

    .steps-cont .article aside h3 br {
        display: none;
    }

    .steps-cont .article aside ol {
        padding: 5px 0 23px 0;
    }

    .steps-cont .article aside ol li {
        padding: 0 0 0 60px;
        margin: 0 0 23px 0;
    }

    .steps-cont .article aside ol li::before {
        width: 40px;
        height: 40px;
        font-size: 22px;
        line-height: 40px;
        top: 9px;
        left: 0;
    }
}

.blue-section {
    margin: 25px 0 60px 0;
    background: #0d2238;
    color: #fff;
    padding: 60px 100px 30px 100px;
}

.blue-section .row-content .txt {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;

}

@media (max-width: 1199px) {
    .blue-section {
        margin: 25px 0 60px 0;
        padding: 45px 40px 15px 40px;
    }
}
@media (max-width: 767px) {
    .blue-section {
        margin: 25px 0 60px 0;
        padding: 30px 20px 15px 20px;
    }
}

.prc-container-box-content {
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    .prc-container-box-content {
        margin-bottom: 35px;
    }
}