.main-nav,
.menu,
body {
     display: flex
}

.header-text a:active,
.header-text a:hover,
.hero .btn {
     color: #000
}

.outset-box .concept,
.outset-box .outset-text {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     line-height: 2
}

#contact .btn,
.btn-group .button,
.contact-info a:hover,
.main-nav li a,
.scroll-down {
     text-decoration: none
}

.clean-list ul,
.clean-lister ul {
     grid-template-columns: repeat(2, 1fr)
}

*,
.blog-box,
.box {
     box-sizing: border-box
}

.clean-list li,
.clean-lister li,
.italic,
.stories p {
     font-style: italic
}

* {
     margin: 0;
     padding: 0
}

body {
     flex-direction: column;
     overflow-x: hidden;
     animation: .9s ease-in-out fadeIn
}

html {
     scroll-behavior: smooth;
     transition-duration: .2s
}

.btn:focus,
a:focus,
button:focus {
     outline: 0 !important;
     box-shadow: none !important
}

.about-us img,
figure img {
     box-shadow: 0 0 8px rgba(0, 0, 0, .5);
     backdrop-filter: blur(8px)
}

.scroll-down {
     position: fixed;
     bottom: 20px;
     left: 50%;
     border: #222;
     transform: translateX(-50%);
     font-size: 32px;
     color: #333;
     z-index: 100;
     animation: 1.5s infinite posun
}

.menu,
.mobile-nav-back {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%
}

@keyframes posun {

     0%,
     100% {
          transform: translate(-50%, 0)
     }

     50% {
          transform: translate(-50%, -10px)
     }
}

.menu {
     height: 70px;
     padding: 15px;
     align-items: center;
     background: snow;
     justify-content: space-between;
     z-index: 1000
}

.main-nav {
     align-items: center;
     gap: 35px;
     list-style: none
}

.main-nav li a {
     font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
     font-size: 18px;
     font-weight: 600;
     color: var(--brand-dark-cyan);
     padding: 22px;
     transition: .3s ease-in-out
}

.main-nav li a:active,
.main-nav li a:hover {
     color: var(--brand-cyan);
     background-color: transparent !important
}

.menu.scrolled {
     box-shadow: 0 1px 0 rgba(0, 0, 0, .08)
}

.mobile-nav-icon img {
     display: none;
     float: right;
     cursor: pointer
}

.mobile-nav-back {
     height: 100vh;
     background: rgba(0, 0, 0, .5);
     opacity: 0;
     z-index: 9998 !important;
     pointer-events: none;
     transition: opacity .5s ease-in-out
}

.col h4,
.hero,
footer {
     position: relative
}

.mobile-nav-back.open {
     opacity: 1;
     pointer-events: auto !important
}

.hero {
     width: 100%;
     overflow: hidden
}

.hero-img {
     width: 100%;
     height: 500px;
     display: block;
     object-fit: cover
}

.header-text {
     color: #1e292b;
     position: absolute;
     left: 40%;
     top: 40%;
     transform: translate(-40%, -40%)
}

.header-text h1 {
     color: #fff;
     font-size: 43px;
     font-weight: 700;
     letter-spacing: 1.2px;
     word-spacing: 2.5px;
     padding: 10px;
     border: none;
     text-shadow: 2px 2px 3px rgba(0, 0, 0, .3)
}

.heading h3,
.heading-register h5 {
     letter-spacing: 1.5px;
     word-spacing: 1.5px
}

.hero .btn {
     display: inline-block;
     font-size: 25px;
     border: 1px solid #dce61e;
     border-radius: 10px;
     padding: 5px 30px;
     margin-top: 20px;
     letter-spacing: 1px;
     transition: .3s cubic-bezier(.25, .8, .25, 1);
     animation: 2s infinite pulse-wave1
}

.btn-full:link,
.btn-full:visited {
     background: #e2e611;
     font-weight: 600
}

.btn-full:active,
.btn-full:hover {
     background: #cad414;
     font-weight: 600;
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
     color: #000;
     transition: background-color .5s;
     animation: none
}

#contact .btn,
.btn-groups .btn {
     transition: .3s cubic-bezier(.25, .8, .25, 1);
     letter-spacing: 1px
}

.outset h2 {
     font-size: 45px;
     padding-top: 50px;
     text-align: center
}

.outset-box {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     align-items: stretch;
     gap: 50px;
     margin: 80px 0 100px;
     padding: 40px
}

.concept p {
     font-size: 22px
}

.clean-lister li i,
.outset-list i {
     width: 30px;
     color: #469494;
     font-size: .8em
}

.outset-box .outset-text {
     text-transform: uppercase;
     flex: 1 1 300px;
     color: #222;
     font-size: 28px;
     font-weight: 600
}

.outset-list ul {
     max-width: 500px;
     margin: 15px auto
}

.outset-list i {
     margin: 10px
}

.list-item li {
     display: flex;
     justify-content: start;
     padding: 12px 15px;
     background: #f4f4f4;
     border-left: 5px solid #469494;
     border-radius: 5px;
     font-weight: 600;
     font-size: 1.1em
}

.clean-lister ul {
     list-style: none;
     padding: 20px;
     max-width: 900px;
     margin: 0 auto;
     display: grid;
     flex-wrap: wrap;
     gap: 5px 100px
}

.clean-lister li {
     display: flex;
     align-items: left;
     font-size: 1.3em;
     color: #096a6a;
     font-weight: 700;
     padding: 22px 0;
     margin: -10px;
     border-bottom: 1px solid #e0e0e0;
     text-align: center;
     transition: .3s
}

.about-us h2,
.contact h2 {
     font-size: 45px;
     text-align: center
}

.clean-lister li i {
     margin-right: 20px
}

.clean-list li:last-child,
.clean-list li:nth-last-child(-n+2),
.clean-lister li:last-child,
.clean-lister li:nth-last-child(-n+2) {
     border-bottom: none
}

.clean-list li:hover,
.clean-lister li:hover {
     padding-left: 5px;
     color: #447b7b
}

.outset-box .concept {
     flex: 1 1 300px;
     color: #000;
     font-size: 27px;
     font-weight: 600
}

.outset-box .project-text,
.outset-box .text-about p {
     font-size: 20px;
     font-family: Inter, sans-serif;
     display: flex
}

.about-us h2 {
     padding-top: 110px
}

.about-us img {
     width: 100%;
     height: 400px;
     margin-top: 60px
}

.outset-box .project-text {
     color: #000;
     flex-wrap: wrap
}

.outset-box .text-about p {
     flex-wrap: wrap;
     color: #414040
}

.contact h2 {
     padding-top: 70px;
     padding-bottom: 40px
}

.info {
     padding-top: 140px;
     text-align: center;
     font-size: 24px;
     color: #483d8b
}

.comment {
     font-size: 20px;
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     letter-spacing: 2px;
     padding-top: 40px;
     text-align: center;
     margin: 5px
}

#contact .btn {
     display: inline-block;
     background: #000;
     color: #fff;
     font-size: 17px;
     border-radius: 10px;
     padding: 5px 10px;
     margin-left: 20%;
     margin-top: 60px;
     margin-bottom: 40px
}

#contact a {
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     font-size: 16px;
     color: #f2f2f2;
     text-align: center;
     padding-bottom: 2px
}

.fa-hand-point-right {
     padding-left: 1%;
     text-align: left;
     font-size: 17px
}

.fa-hand-point-down {
     font-size: 29px;
     margin-left: 30%;
     margin-top: 45px;
     color: #3b6b64
}

.comment-form {
     max-width: 700px;
     text-align: left;
     color: #186e6e;
     font-size: 20px;
     margin: 0 auto;
     padding-top: 30px;
     padding-left: 10px
}

.form-title h2 {
     color: #fff;
     text-align: center;
     font-weight: 700;
     font-size: 30px;
     padding-top: 20px;
     padding-bottom: 10px;
     margin: 0 auto
}

.box {
     background: #186e6e;
     flex: 0 1 500px;
     width: 100%;
     max-width: 800px;
     height: 580px;
     padding-top: 20px
}

.box input,
.box textarea {
     width: 90%;
     height: 56px;
     display: block;
     margin: 10px auto;
     padding: 10px;
     box-sizing: border-box;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     outline: 0
}

.box input[type=email]:focus,
.box input[type=text]:focus,
textarea:focus {
     transition: .25s;
     width: 280px;
     border-color: #f05454
}

.box textarea {
     height: 150px;
     max-width: 100%;
     border-radius: 8px
}

.box input[type=submit] {
     width: auto;
     min-width: 200px;
     background: #000;
     color: #fff;
     margin: 20px auto;
     font-size: 15px;
     text-transform: uppercase;
     letter-spacing: 1px;
     word-spacing: 2.5px;
     border-radius: 8px;
     cursor: pointer
}

.box input[type=submit]:hover {
     background: #1a1919;
     color: #fff
}

.protection-container {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     margin: 15px 0;
     text-align: left;
     cursor: pointer;
     user-select: none
}

.protection-container input[type=checkbox] {
     width: 25px;
     height: 30px;
     min-width: 25px;
     margin-top: 2px;
     margin-left: 2%;
     cursor: pointer;
     z-index: 10;
     touch-action: manipulation
}

.protection-container label {
     display: inline-block;
     font-size: 13px;
     line-height: 1.4;
     cursor: pointer;
     touch-action: manipulation
}

.protection-container label a {
     color: #d1d1d1;
     font-size: 12px;
     text-decoration: underline;
     font-weight: 600
}

.protection-container label a:hover {
     color: #c5c1c1;
     text-decoration: none
}

.informations {
     display: flex;
     max-width: 1200px;
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
     gap: 40px;
     margin: 0 auto
}

.my-contact {
     flex: 0 1 400px
}

.name h3 {
     font-size: 26px;
     text-align: center;
     padding-top: 70px;
     margin: 20px
}

.info-contact {
     margin: 110px
}

.col .contact-details p,
.contact-info a {
     font-size: 16px
}

.contact-info .fa-envelope,
.fa-phone {
     font-size: 24px;
     margin-bottom: 15px;
     margin-top: 15px
}

.fa-location-dot {
     font-size: 24px;
     margin-top: 15px
}

.residence {
     max-width: 100%;
     padding-top: 10px;
     font-weight: 700
}

.form-message {
     margin-top: 15px;
     font-weight: 600
}

#form-message {
     font-size: 15px;
     font-weight: 600;
     margin-top: 20px;
     text-align: center;
     opacity: 0;
     transition: opacity .5s
}

#form-message.show {
     opacity: 1
}

.loading::after {
     content: "...";
     animation: 1s steps(3, end) infinite dots
}

.btn-groups .btn,
.contact-btn {
     animation: 2s infinite pulse-wave
}

@keyframes dots {
     0% {
          content: "."
     }

     33% {
          content: ".."
     }

     66% {
          content: "..."
     }
}

.btn-groups .btn {
     display: inline-block;
     flex-wrap: wrap;
     justify-content: center;
     border: none;
     padding: 2px 8px;
     font-size: 18px;
     gap: 10px;
     margin-top: 7px
}

.about-btn:hover,
.btn-group .button:hover,
.btn-groups .btn:hover {
     animation: none
}

.btn-full1:link,
.btn-full1:visited {
     background: #469494;
     color: #fff !important;
     font-weight: 600
}

.btn-full1:active,
.btn-full1:hover,
.btn-full2:active,
.btn-full2:hover,
.btn-full3:active,
.btn-full3:hover,
.button:hover {
     background: #366f6f;
     font-weight: 600;
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
     color: #fff !important;
     transition: .3s
}

.btn-full2:link,
.btn-full2:visited,
.btn-full3:link,
.btn-full3:visited {
     background: #469494;
     color: #fff !important;
     font-weight: 600;
     margin-left: 25px
}

.btn-full1,
.btn-full2,
.btn-full3 a:hover {
     color: #fff !important
}

.btn-group .button {
     display: inline-block;
     color: #fff;
     font-size: 20px;
     border: 1px solid #186e6e;
     border-radius: 10px;
     padding: 5px 10px;
     margin: 60px 20px 20px;
     letter-spacing: 1px;
     transition: .3s cubic-bezier(.25, .8, .25, 1);
     animation: 3s infinite pulse-wave
}

.button,
.button-fullleft:link,
.button-fullleft:visited {
     background: #469494;
     font-weight: 600
}

.button-fullleft:active,
.button-fullleft:hover,
.button-fullright:active,
.button-fullright:hover {
     background: #366f6f;
     font-weight: 600;
     transform: translateY(-1.5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
     color: #fff !important;
     transition: .3s
}

.button-fullright:link,
.button-fullright:visited {
     background: #469494;
     font-weight: 600;
     margin-left: 75px
}

.heading h3 {
     font-family: monospace, sans-serif;
     color: #096a6a;
     text-align: center;
     font-size: 2em;
     font-weight: 600;
     margin-top: 90px;
     text-shadow: 1px 1px 1px #213131
}

.aboutbox-row,
.info-box,
.perfume-row,
.product-row {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     align-items: stretch;
     gap: 30px;
     margin: 80px 0 100px;
     padding: 30px;
     background: #fff;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .1)
}

.aboutbox-row img,
.info-box img {
     flex: 0 1 400px;
     max-width: 400px;
     height: auto;
     border-radius: 15px;
     object-fit: cover
}

.aboutbox-row .text-content,
.info-box .text-content,
.product-row .text-content {
     flex: 1 1 300px;
     color: #333;
     font-weight: 500;
     font-size: 1.2em;
     line-height: 2;
     font-family: Roboto, sans-serif
}

.odmeny-list {
     max-width: 500px;
     margin: 20px auto;
     font-family: sans-serif
}

.heading-register h5,
.heading-register p,
.partner-link,
.perfume-row .text-content p {
     font-family: monospace, sans-serif
}

.odmena-item {
     display: flex;
     justify-content: space-between;
     padding: 12px 15px;
     margin-bottom: 8px;
     background: #f4f4f4;
     border-left: 5px solid #469494;
     border-radius: 5px;
     font-size: 1.1em
}

.odmena-item span {
     font-weight: 700;
     color: #096a6a
}

.register-box {
     max-width: 100%;
     height: auto;
     margin-top: 110px;
     margin-bottom: 70px;
     padding: 30px;
     background: #fff;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .1)
}

.heading-register h2 {
     text-align: center;
     font-size: 2.2em;
     text-decoration: underline
}

.btn-register .button,
.buttons .btn a,
.copyrightText a,
.partner-link {
     text-decoration: none !important
}

.heading-register h5 {
     color: #096a6a;
     text-align: left;
     margin-top: 40px;
     font-size: 1.2em;
     font-weight: 600
}

.register-box ul {
     list-style: square;
     max-width: 900px;
     margin: 0 auto;
     line-height: 1.8
}

.register-box p {
     margin-top: 30px;
     font-weight: 600;
     font-size: 1.1em;
     padding-left: 2%;
     letter-spacing: 1px
}

.heading-main p,
.heading-register p {
     font-size: 1.3em;
     color: #333;
     font-weight: 600;
     letter-spacing: 1px
}

.heading-register p {
     margin-top: 50px
}

.fa-circle-right {
     color: #096a6a;
     font-size: 20px
}

.btn-register .button {
     display: inline-block;
     color: #fff;
     font-size: 20px;
     border: 1px solid #186e6e;
     border-radius: 10px;
     padding: 5px 10px;
     margin-top: 7px;
     letter-spacing: 1px;
     transition: .3s cubic-bezier(.25, .8, .25, 1)
}

.buttons .btn,
.information-box {
     padding: 10px;
     text-align: center
}

.heading-main p {
     font-family: sans-serif;
     line-height: 2;
     margin-top: 40px
}

.information-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     margin-top: 40px;
     gap: 20px
}

.clean-list li,
.partner-link {
     align-items: center;
     font-weight: 700;
     color: #096a6a;
     transition: .3s
}

.information-box {
     display: block;
     background: #dde6ed;
     border: 1px solid #e0e0e0;
     border-radius: 10px;
     width: 200px;
     margin-bottom: 40px;
     margin-top: 70px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, .05);
     transition: .3s
}

.information-box:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 15px rgba(0, 0, 0, .1)
}

.information-box h3,
.information-box i {
     font-size: 1.5em;
     color: #096a6a
}

.information-box h3 {
     color: #096a6a
}

.clean-list ul {
     list-style: none;
     padding: 20px;
     max-width: 900px;
     margin: 0 auto;
     display: grid;
     gap: 10px 40px
}

.partners-list,
.perfume-row img {
     max-width: 400px
}

.clean-list li {
     display: flex;
     font-size: 1.3em;
     padding: 12px 0;
     border-bottom: 1px solid #e0e0e0;
     text-align: center
}

.clean-list li i {
     width: 30px;
     color: #469494;
     margin-right: 15px;
     font-size: .8em
}

.partners-list {
     margin: 40px auto;
     display: flex;
     flex-direction: column;
     gap: 10px
}

.partner-link {
     display: flex;
     font-size: 18px;
     background: #f4f4f4;
     padding: 15px 25px;
     border-radius: 10px;
     border-left: 6px solid #469494
}

.cosmetic-row,
.quote-info-box,
.slide,
.storiesbox-row {
     border-radius: 20px
}

.abouts h2,
.title-text,
summary {
     font-weight: 600
}

.partner-link i {
     margin-right: 20px;
     color: #000;
     width: 30px;
     text-align: center
}

.partner-link:hover {
     background: #469494;
     color: #fff;
     transform: translateX(8px)
}

.sliders {
     display: flex;
     align-items: center;
     column-gap: 10px;
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
     padding: 40px
}

.slide {
     min-width: 18%;
     height: 320px;
     overflow: hidden;
     scroll-snap-align: center;
     box-shadow: 0 5px 15px rgba(0, 0, 0, .3)
}

.slide img {
     width: 100%;
     height: 100%;
     object-fit: cover
}

.product-row img {
     flex: 0 1 400px;
     min-width: 300px;
     height: auto;
     border-radius: 15px;
     object-fit: cover
}

.cosmetic-row img,
.perfume-row img {
     flex: 1;
     height: auto;
     object-fit: cover;
     border-radius: 15px
}

.fa-angles-down {
     padding-left: 110px;
     margin-top: 30px;
     font-size: 24px
}

.buttons .btn {
     max-width: 80%;
     background: #469494;
     height: 70px;
     margin: 50px 225px 70px
}

.buttons .btn:active,
.buttons .btn:hover {
     background: #366f6f
}

.buttons .btn a {
     color: #000
}

.buttons .btn a:active,
.buttons .btn a:hover {
     color: #fff
}

.buttons .text h4 {
     color: #fff;
     padding: 5px;
     font-weight: 600;
     letter-spacing: 1px;
     line-height: 25px
}

.perfume-row .text-content p {
     color: #000;
     font-size: 20px;
     margin-left: 60px;
     flex: 2;
     min-width: 300px
}

.perfume-row .text-content i {
     font-size: 12px
}

.cosmetic-row {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     align-items: stretch;
     gap: 30px;
     margin: 80px 0 90px;
     padding: 30px;
     background: #fff;
     box-shadow: inset 0 10px 30px #eae5db
}

.cosmetic-row img {
     min-width: 300px;
     min-height: 400px
}

.info-text {
     flex: 1;
     min-width: 300px;
     padding: 10px
}

.title-text {
     color: #096a6a;
     font-size: 1.2rem;
     margin-top: 15px
}

.text-label {
     color: #444;
     font-size: 1.2rem;
     line-height: 1.4;
     margin-bottom: 10px
}

.quote-info-box {
     max-width: 700px;
     height: 130px;
     min-height: 200px;
     display: flex;
     align-items: stretch;
     margin-top: 110px;
     margin-bottom: 70px;
     padding: 30px 20px;
     background: #fff;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .1)
}

.article h1 {
     color: #4c4c4c;
     font-size: 3rem;
     font-family: "Monotype Corsiva", serif;
     padding: 0;
     margin: 10px;
     letter-spacing: 1px;
     word-spacing: 1px;
     text-align: center;
     text-shadow: 0 1px 3px #333
}

.abouts h2 {
     font-size: 32px;
     font-family: Monotype, serif;
     color: #096a6a;
     margin-bottom: 10px
}

.my-story h4 {
     color: #000;
     font-size: 23px;
     font-family: Inter, serif;
     text-align: center;
     font-weight: 500
}

.blog-box h3,
.bold,
.button-cookieempty,
.button-cookiefull,
.col h4,
.cookie-text,
.faq-butotn span:hover {
     font-weight: 700
}

.storiesbox-row {
     align-items: center;
     padding: 18px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, .1)
}

.blog-box,
summary {
     padding: 20px;
     display: flex
}

.stories p {
     color: #000;
     font-size: 17px;
     padding-top: 30px
}

.photos img {
     max-width: 500px;
     padding-top: 50px;
     align-items: center;
     object-fit: cover
}

.images img {
     width: 100%;
     height: 400px;
     margin-top: 110px;
     border-radius: 15px;
     box-shadow: 4px 6px 8px #000
}

.blog-box {
     flex-direction: column;
     width: 100%;
     min-height: 180px;
     margin-top: 80px;
     margin-bottom: 30px;
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, .1)
}

.title h1 {
     font-size: 50px;
     font-family: Inter, sans-serif;
     color: #fff;
     padding-top: 240px;
     margin-left: 0
}

.title i {
     font-size: .5em;
     vertical-align: middle;
     margin-right: 15px;
     margin-left: 15px
}

.blog-box h3 {
     text-align: left;
     color: #096a6a;
     margin: 0 0 15px;
     font-size: 20px;
     letter-spacing: 1.5px
}

.center,
.col .social a i,
.cookie-bar,
.copyrightText p,
.faq-container h1,
.faq-cta,
.faq-intro,
.heading-main h2,
.next-steps h2 {
     text-align: center
}

.about-blog p {
     color: #333;
     font-size: 16px;
     line-height: 1.6;
     margin: 0
}

.blog-box i {
     display: block;
     color: #096a6a;
     margin-bottom: 15px;
     font-size: 1.5rem
}

footer {
     background: #000;
     width: 100%;
     min-height: 350px;
     padding: 3rem;
     margin-top: 140px
}

.footer-container {
     max-width: 1140px;
     margin: 0 auto;
     justify-content: center;
     flex-direction: column
}

.footer-row {
     display: flex;
     justify-content: space-between
}

.col {
     min-width: 250px;
     color: #f2f2f2;
     font-family: poppins, sans-serif;
     padding: 0 2rem
}

.col .logo {
     width: 140px;
     margin-bottom: 2rem !important
}

.col h4 {
     color: #fff;
     letter-spacing: 2px;
     word-spacing: 1.5px;
     margin-bottom: 22px
}

.col h4::after {
     content: "";
     height: 3px;
     width: 0;
     position: absolute;
     bottom: 0;
     left: 0
}

.col h4:hover::after {
     width: 30px
}

.col h3 {
     font-size: 22px;
     margin-top: 20px
}

.col .social a i {
     font-size: 18px;
     color: #fff;
     margin-top: 6rem;
     margin-right: 5px;
     padding: 10px;
     background: #007acc;
     width: 40px;
     height: 40px;
     border-radius: 10px
}

.col .social a i:hover {
     transform: scale(1.2);
     filter: grayscale(10)
}

.col .links li {
     list-style: none;
     line-height: 35px
}

.col .links a {
     color: #fff;
     text-decoration: none;
     font-size: 18px
}

.col .links a:hover {
     transition: border-bottom 1s;
     border-bottom: 1px solid #007acc
}

.col .contact-details span i {
     font-size: 20px;
     color: #007acc
}

.col .contact-details a {
     text-decoration: none;
     color: #fff
}

.copyrightText p {
     width: 100%;
     background: #e2e8ce;
     color: #000;
     padding: 20px 100px 15px;
     border-top: 1px solid rgba(0, 0, 0, .15)
}

.copyrightText a {
     color: #4c4c4c;
     padding: 15px
}

figure img {
     width: 100%;
     height: 450px;
     margin-top: 90px;
     border-radius: 5px
}

.faq-container {
     max-width: 800px;
     margin: 100px auto;
     padding: 0 2rem;
     font-family: monospace
}

.faq-container h1 {
     color: #000;
     margin-bottom: 15px
}

.faq-intro {
     color: #666;
     margin-bottom: 50px
}

details {
     background: #f0eeee;
     margin-bottom: 15px;
     border-radius: 10px;
     border-left: 3px solid #186e6e;
     transition: .3s
}

summary {
     cursor: pointer;
     list-style: none;
     flex-direction: column;
     justify-content: space-between;
     align-items: center
}

summary::after {
     content: '+';
     font-size: 16px;
     float: right;
     color: #186e6e
}

details[open] summary::after {
     content: '-'
}

.faq-content {
     padding: 0 20px 20px;
     line-height: 1.6;
     color: #444
}

.faq-cta {
     margin-top: 60px;
     background: #eee;
     padding: 30px;
     border-radius: 15px
}

.contact-btn,
.faq-button:link,
.faq-button:visited {
     border-radius: 10px;
     transition: .3s;
     text-decoration: none !important
}

.contact-btn {
     display: inline-block;
     background: #186e6e;
     color: #fff;
     padding: 15px 30px;
     margin-top: 15px
}

.contact-btn:hover {
     background: #000;
     color: #f2f2f2;
     animation: none
}

.faq-button:link,
.faq-button:visited {
     width: 150px;
     height: 35px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #007acc;
     color: #fff;
     padding: 12px, 25px;
     font-weight: 700;
     letter-spacing: 1px;
     gap: 10px;
     animation: 2s infinite pulse-wave
}

.faq-button i {
     margin-right: 2px;
     font-size: 18px
}

.col p,
.faq-button span {
     letter-spacing: 1.5px
}

.faq-butotn span:hover {
     color: #000
}

.faq-button:active,
.faq-button:hover {
     background-color: #007acc;
     border-color: #e6eeee;
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(230, 238, 238, .3);
     animation: none
}

.next-steps h2 {
     color: #000;
     margin-bottom: 15px;
     font-family: "Lucida Console", "Courier New", monospace
}

.heading-main h2,
.side-text h4 {
     font-family: monospace, sans-serif
}

.step-grid {
     display: flex;
     gap: 20px;
     justify-content: center;
     margin-top: 30px
}

.step-card {
     background: #eee;
     padding: 20px;
     border-radius: 15px;
     text-decoration: none !important;
     color: #000;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 180px;
     transition: .3s
}

.step-card:hover {
     background: #186e6e;
     color: #fff;
     transform: translateY(-5px)
}

.step-card.highlight {
     background: #007acc;
     color: #fff
}

.gdpr img {
     width: 100%;
     height: 450px;
     margin-top: 110px
}

.protection-title {
     margin: 40px;
     padding-top: 90px
}

.protection-text {
     margin: 40px;
     padding-left: 20px;
     text-indent: -9px
}

.cookie img {
     width: 100%;
     height: 400px;
     margin-top: 110px
}

.cookie-text {
     margin: 40px;
     padding-top: 20px
}

.cookie-concept {
     color: #4c4c4c;
     margin: 10px 40px 40px
}

.cookie-links a {
     border-bottom: 1px solid #4c4c4c;
     color: #096a6a;
     text-decoration: none !important;
     margin: 40px;
     font-size: 1.2em
}

.cookie-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     background: #222;
     padding: 20px;
     z-index: 9999
}

.cookie-bar p {
     letter-spacing: 1px;
     color: #fff
}

.button-cookiefull {
     background: #e2e611;
     color: #000;
     border: none;
     padding: 8px 15px;
     margin-left: 10px;
     cursor: pointer;
     border-radius: 5px
}

.button-cookieempty:hover,
.button-cookiefull:hover {
     background: #dce61e;
     color: #000 !important;
     font-weight: 600
}

.button-cookieempty {
     border: 1px solid #dce61e;
     background: 0 0;
     margin-left: 15px;
     padding: 8px 13px;
     border-radius: 5px;
     cursor: pointer
}

.button-cookieempty a {
     text-decoration: none !important;
     color: #fff
}

.button-cookieempty a:hover {
     color: #000 !important
}

#scrollToTop {
     display: none;
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 1000;
     border: none;
     outline: 0;
     background-color: #186e6e;
     color: #fff;
     cursor: pointer;
     padding: 10px;
     border-radius: 10px;
     font-size: 15px;
     transition: .3s;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .2)
}

#scrollToTop:hover {
     background-color: #000;
     transform: translateY(-5px)
}

.heading-main h2 {
     color: #000;
     font-size: 30px;
     font-weight: 800;
     margin-top: 70px;
     letter-spacing: 1px;
     word-wrap: break-word
}

.heading-main i {
     font-size: 24px;
     color: #469494
}

.side-text h4 {
     color: #000;
     text-align: left;
     font-size: 1.5em;
     margin: 20px 25px;
     padding-top: 0
}

.about-btn {
     display: inline-block;
     align-items: center;
     justify-content: center;
     margin: 80px;
     background: #096a6a;
     padding: 12px 30px;
     border-radius: 10px;
     animation: 2s infinite pulse-wave
}

.about-btn a {
     color: #fff;
     font-size: 18px;
     font-weight: 600
}

.about-btn a:hover {
     color: #fff;
     text-decoration: none !important
}

.container {
     flex-direction: column;
     align-items: center;
     justify-content: center
}

.column {
     max-width: 1140px;
     width: 100%;
     margin: 0 auto
}

.reversed {
     flex-direction: row-reverse
}

.fancy-hr {
     width: 100%;
     height: 1px;
     background: #b8b4b4;
     margin-top: 60px;
     margin-bottom: 20px;
     border: 0
}

.large {
     font-size: 2rem
}

.bigger {
     font-size: 1em
}

.hidden {
     display: none
}

.moreContent {
     animation-name: show;
     animation-duration: 2s
}

@keyframes show {
     0% {
          color: #fff
     }

     100% {
          color: #000
     }
}

@keyframes pulse-wave {
     0% {
          box-shadow: 0 0 0 0 rgba(9, 106, 106, .7)
     }

     70% {
          box-shadow: 0 0 0 10px rgba(9, 106, 106, 0)
     }

     100% {
          box-shadow: 0 0 0 0 rgba(9, 106, 106, 0)
     }
}

@keyframes pulse-wave1 {
     0% {
          box-shadow: 0 0 0 0 rgba(207, 181, 13, .836)
     }

     70% {
          box-shadow: 0 0 0 10px rgba(9, 106, 106, 0)
     }

     100% {
          box-shadow: 0 0 0 0 rgba(9, 106, 106, 0)
     }
}

@keyframes fadeIn {
     from {
          opacity: 0
     }

     to {
          opacity: 1
     }
}

.clearfix {
     zoom: 1
}

.clearfix:after {
     content: ".";
     clear: both;
     display: block;
     height: 0;
     visibility: hidden
}

@media screen and (max-width:1280px) {
     .outset-text {
          font-size: 22px !important
     }

     a {
          font-size: 18px !important
     }

     body,
     html {
          width: 100% !important;
          max-width: 100vw !important;
          overflow-x: hidden !important;
          box-sizing: border-box !important
     }

     img {
          max-width: 100%;
          height: auto
     }

     .btn-groups .btn {
          display: block;
          text-align: center;
          margin-left: 10px;
          margin-right: 10px
     }

     .btn-group {
          display: block;
          width: 100%
     }

     .faq-button {
          display: inline-flex;
          width: 50% !important;
          height: auto
     }

     .cosmetic-row {
          flex-direction: column;
          padding: 20px;
          gap: 20px
     }

     .cosmetic-row img,
     .info-text {
          min-width: 100%;
          max-width: 100%
     }

     .cosmetic-row img {
          min-height: auto;
          width: 100%
     }

     .fa-hand-point-down {
          font-size: 29px;
          margin-left: 20%
     }

     .comment-form,
     .form-title h2 {
          max-width: 900px
     }

     .box input,
     .box textarea {
          font-size: 18px
     }

     label {
          font-size: 30px
     }

     .footer-row {
          flex-wrap: wrap;
          justify-content: center
     }

     .concept p {
          font-size: 22px
     }
}

@media screen and (max-width:1024px) {
     .outset-text p {
          font-size: 20px !important;
          line-height: 1.5 !important
     }

     .comment-form p,
     .form-title h2 {
          text-align: center
     }

     .fa-hand-point-down {
          font-size: 25px;
          margin-left: 50%;
          margin-top: 45px;
          color: #3b6b64
     }
}

@media screen and (max-width:768px) {
     .menu {
          justify-content: flex-start;
          position: relative
     }

     .menu ul li {
          margin: 15px
     }

     .main-nav {
          display: flex !important;
          flex-direction: column;
          left: auto !important;
          margin: 0 !important;
          transform: none;
          position: fixed !important;
          top: 0 !important;
          right: -100%;
          width: 75% !important;
          height: 100vh;
          background-color: rgba(255, 250, 250);
          background-image: radial-gradient(circle at 85% 20%, rgba(74, 111, 165, .045) 0, transparent 30%);
          pointer-events: none !important;
          box-shadow: -5px 0 15px rgba(0, 0, 0, .3);
          gap: 24px;
          transition: right .9s ease-in-out;
          padding-top: 80px;
          z-index: 9999
     }

     .main-nav.open {
          right: 0 !important;
          pointer-events: auto !important
     }

     .main-nav li a {
          width: 100%;
          text-align: center;
          color: #1e292b !important;
          font-size: 24px !important;
          display: block;
          padding: 15px 0;
          letter-spacing: 1.3px;
          transition: .3s
     }

     .main-nav li a:active,
     .main-nav li a:hover {
          background-color: transparent !important;
          outline: 0
     }

     .main-nav a {
          -webkit-tap-highlight-color: transparent !important
     }

     .mobile-nav-icon img {
          height: 40px;
          width: auto;
          font-size: 16px;
          display: block;
          float: right;
          position: absolute;
          top: 16px;
          right: 25px;
          z-index: 10001;
          cursor: pointer
     }

     .outset-link p {
          margin: 20px;
          padding-left: 10px;
          font-size: 22px
     }

     .text-about p {
          width: 100%;
          font-size: 20px
     }

     .name h3 {
          padding-top: 90px
     }

     .header-text h1 {
          color: #fff;
          margin-bottom: 110px;
          text-align: left !important;
          font-size: 4rem
     }

     .hero .btn {
          display: block;
          margin: 10px
     }

     .btn-groups .btn {
          color: #fff;
          text-decoration: none !important;
          font-size: clamp(14px, 2vw, 20px);
          border: 1px solid #186e6e;
          border-radius: 10px;
          padding: 8px 16px;
          letter-spacing: 1px;
          transition: .3s cubic-bezier(.25, .8, .25, 1);
          animation: 2s infinite pulse-wave;
          white-space: nowrap;
          text-align: center;
          margin-left: 10px
     }

     .aboutbox-row,
     .info-box,
     .perfume-row,
     .product-row {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          align-items: stretch;
          gap: 30px;
          margin: 80px 0 100px
     }

     .cosmetic-row {
          flex-direction: column;
          padding: 20px;
          gap: 20px
     }

     .cosmetic-row img,
     .info-text {
          min-width: 100%;
          max-width: 100%
     }

     .cosmetic-row img {
          min-height: auto;
          width: 100%
     }

     .faq-button {
          display: inline-flex;
          width: 100% !important;
          height: auto
     }

     .contact .btn {
          display: block;
          margin-left: 10px;
          margin-right: 10px
     }

     .heading h3 {
          font-size: 22px
     }

     .heading-register h2 {
          font-size: 1.5em
     }

     .faq-container h1,
     .heading-main h2 {
          font-size: 24px
     }

     .comment-form p,
     .contact h2,
     .form-title h2 {
          text-align: center
     }

     .protection-container {
          align-items: center
     }

     .protection-container label {
          font-size: 16px;
          padding-left: 5px
     }

     .register-box p {
          padding-left: 0;
          letter-spacing: 1px
     }

     .faq-container {
          padding: 0 15px;
          margin-top: 50px
     }

     .faq-intro {
          font-size: 14px;
          margin-bottom: 30px
     }

     summary {
          padding: 15px;
          font-size: 15px
     }

     .faq-content {
          font-size: 14px;
          padding: 0 15px 15px
     }

     figure img {
          width: 100%;
          height: auto
     }

     .contact-btn {
          display: block;
          width: 100%;
          padding: 18px 0;
          font-size: 17px;
          animation: 2s infinite pulse-wave
     }

     .footer-row {
          flex-direction: column;
          align-items: center;
          text-align: center
     }

     .faq-wrapper {
          text-align: center;
          margin-bottom: 20px
     }

     #contact .btn,
     .btn-group .button,
     .btn-groups .btn {
          display: block;
          margin-right: 10px
     }

     .btn-group {
          display: block;
          width: 100%
     }

     .btn-group .button {
          width: 100%;
          font-size: 16px;
          text-align: center;
          margin-left: -.9px
     }

     #contact .btn {
          width: 100%;
          margin-left: 10px
     }

     .fa-hand-point-down {
          font-size: 25px;
          margin-left: 50%;
          margin-top: 45px;
          color: #3b6b64
     }
}

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

     .main-nav,
     body,
     html {
          width: 100% !important
     }

     .info-box img,
     .perfume-row img,
     body,
     html {
          overflow-x: hidden !important
     }

     body,
     html {
          max-width: 100vw !important;
          box-sizing: border-box !important
     }

     p {
          font-size: 20px !important
     }

     .header-text h1 {
          font-size: 170% !important
     }

     .outset h2 {
          font-size: 35px !important
     }

     .outset-box .outset-text {
          line-height: 1.1;
          font-size: 18px
     }

     .outset-box .outset-link-text {
          padding-left: 13px;
          font-size: .9em;
          line-height: 2
     }

     .outset-box .project-text,
     .text-about {
          font-size: 15px
     }

     .concept p {
          line-height: 1.5;
          font-size: 22px !important
     }

     .blog-box,
     .info-box {
          padding: 10px !important
     }

     .fancy-hr {
          display: none !important
     }

     .perfume-row .text-content p {
          margin-left: 30px
     }

     .buttons .btn {
          margin: 40px;
          padding: 0;
          max-width: 80%;
          height: 60px
     }

     .about-btn {
          display: inline-block;
          align-items: center;
          justify-content: center;
          margin: 10px;
          background: #096a6a
     }

     .clean-lister ul {
          grid-template-columns: 1fr !important;
          padding: 10px
     }

     .protection-container {
          align-items: center
     }

     .protection-container label {
          font-size: 16px;
          padding-left: 5px
     }

     .one-line {
          white-space: nowrap;
          overflow-x: auto
     }
}

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

     .aboutbox-row img,
     .info-box img,
     .perfume-row img,
     body,
     html {
          overflow-x: hidden !important
     }

     body,
     html {
          width: 100% !important;
          max-width: 100vw !important;
          box-sizing: border-box !important
     }

     p {
          font-size: 18px !important
     }

     a {
          font-size: 15px !important
     }

     .article h1 {
          font-size: 23px
     }

     .heading-main h2 {
          font-size: 19px !important
     }

     .heading-main i {
          font-size: 13px
     }

     .perfume-row .text-content p {
          font-size: medium !important;
          margin-left: 0
     }

     .information-box {
          width: 150px
     }

     .information-box i {
          font-size: 10px !important;
          display: block;
          padding: 3%
     }

     .information-box h3 {
          font-size: 15px !important;
          position: relative;
          display: inline;
          letter-spacing: 1.5px;
          font-weight: 600
     }

     .side-text h4 {
          font-size: 11.5px !important
     }

     .cont {
          font-size: 11px !important;
          padding-left: 20px
     }

     .buttons .btn {
          padding: 8px;
          height: auto
     }

     .buttons .btn:active,
     .buttons .btn:hover {
          background: #366f6f
     }

     .buttons .btn a {
          color: #000;
          text-decoration: none !important
     }

     .buttons .btn a:active,
     .buttons .btn a:hover {
          color: #fff
     }

     .buttons .text h4 {
          font-size: 12px;
          color: #fff;
          padding: 0;
          font-weight: 600;
          text-align: center;
          letter-spacing: 1px
     }

     .about-btn {
          display: inline-block;
          align-items: center;
          justify-content: center;
          margin: 10px;
          background: #096a6a;
          animation: 4s infinite pulse-wave !important
     }

     .about-btn:hover {
          animation: none
     }

     .about-btn a {
          font-size: 16px
     }

     .infooutset p {
          margin: 20px;
          padding-left: 10px;
          text-indent: -51px;
          font-size: 14px
     }

     .infooutset i {
          font-size: 10px;
          flex-shrink: 0
     }
}

@media screen and (max-width:992px) {
     .footer-row {
          flex-wrap: wrap;
          justify-content: center
     }

     .col {
          width: 50%;
          text-align: center;
          margin-bottom: 3rem
     }

     .col h4::after {
          left: 50%;
          transform: translateX(-50%)
     }
}

@media screen and (max-width:600px) {
     .col {
          width: 100%
     }

     .clean-list ul {
          grid-template-columns: 1fr;
          padding: 10px
     }

     .info-container,
     .teamwork-container {
          padding: 20px 15px
     }

     .aboutbox-row,
     .info-box,
     .perfume-row,
     .product-row {
          width: 100%;
          max-width: none;
          margin-bottom: 15px
     }

     .photos img {
          max-width: 100%
     }
}

@media (max-width:768px) {
     .product-flex {
          grid-template-columns: 1fr;
          text-align: center
     }

     .product-img img {
          margin: 0 auto
     }
}

@media screen and (max-width:768px) {
     .info-box-flex {
          grid-template-columns: 1fr;
          text-align: center
     }

     .info-box img img {
          margin: 0 auto
     }

     .images img,
     .img img,
     .outset img {
          height: auto
     }

     .up {
          right: 15px;
          bottom: 15px;
          width: 38px;
          height: 38px;
          font-size: 14px;
          border-radius: 8px;
          opacity: .8
     }

     .up:active {
          opacity: 1;
          transform: scale(.9)
     }
}