html {box-sizing: border-box;}
*, *::before, *::after {box-sizing: inherit; margin: 0; padding: 0;}
ul {list-style: none;}
a {text-decoration: none; color: #F53372;}
img {max-width: 100%; height: auto;}

:root {
    --mainfont: "jaf-domus", Calibri, sans-serif;
	--semibold: 600;
    --white: #F5F5F5;
    --pink: #F4306E;
    --yellow: #FFF4E3;
    --background: #FFF7EC;
    --shadow: 0px 15px 10px -15px #111;
    --rotate-left: rotate(-4.79deg);
    --rotate-right: rotate(4.79deg);
}

body {font-family: var(--mainfont); font-weight: 400; font-size: 1rem; line-height: 1.3; color: #131313; background-color: #FFF; overflow-x: hidden;}
p {margin-bottom: 1.5rem;}

.heading, h1 {font-weight: 700; font-size: clamp(1.6rem, 6.5vw, 1.875rem);}
    .introtext .heading {font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 2.4; color: #F4306E;}
    .secondbook_text .heading {color: var(--pink);}

.heading_small {font-weight: 700; font-size: 1.313rem;}
    @media (max-width: 1050px) {.teaser1 .heading_small, .teaser2 .heading_small {padding-bottom: 15px;}}

h2 {font-weight: 700; font-size: 1.313rem;}

.xl-text {font-size: 1.113rem;}
    @media (min-width: 800px) {.xl-text {font-size: 1.313rem;}}
.l-text {font-size: 1.063rem;}


.header {max-width: 100%; background-image: url("../images/blackbg-small-2x.jpg"); background-size: cover; background-repeat: no-repeat; background-position: top center; padding-top: 74px; margin-bottom: clamp(70px, 10vw, 190px);}
    @media (min-width: 900px) {.header {background-image: url("../images/blackbg-medium-2x.webp"); height: clamp(980px, calc(980px + 2vw), 1060px);}}
    @media (min-width: 1600px) {.header {background-image: url("../images/blackbg-large-2x.webp");}}
.container {max-width: 460px; margin: 0 auto; text-align: center; color: var(--white);}
.logo {max-width: 300px; margin: 0 auto; margin-bottom: clamp(90px, 10vw, 152px);}
.introtext {max-width: 650px; margin: 0 auto 50px; padding-inline: 20px;}
.teaserbox {display: flex; flex-direction: column; gap: 15px; align-items: center;}
.book img {box-shadow: var(--shadow);}
.questions {display: flex; flex-direction: column; padding-left: 30px; padding-top: 30px; padding-right: 30px;}
.teaser1, .teaser2 {margin-bottom: 15px; max-width: 42ch; text-align: left;}
.teaserbutton {text-align: left;}    
.teaserbutton .heading_small {margin-bottom: 15px;}   
 
@media (min-width: 800px) {
    .container {max-width: 1090px;} 
    .logo {max-width: unset;} 
    .teaserbox {flex-direction: row; justify-content: flex-end; align-items: flex-start;}
    .book {transform: var(--rotate-left); margin-left: clamp(0px, 1vw, 20px);}
    .teaser2 {margin-bottom: 35px;}
}

@media (min-width: 1050px) {
    .teaserbox {gap: 45px;}
    .questions {padding-left: unset; min-width: 505px;}
    .teaser1 {margin-bottom: 35px;}
    .teaser2 {text-align: right;}
}

@media (min-width: 1500px) {.questions {margin-top: -10px;}}

@media (min-width: 1900px) {.logo {margin-bottom: 170px;}}

.download-button {width: 277px; height: 46px; position: relative; display: inline-block; line-height:46px; padding-left: 35px; margin-bottom: 40px; font-family: inherit; text-transform: uppercase; font-size: 0.938rem; font-weight: var(--semibold); color: #FFF; background-color: #F64A92; border: none; border-radius: 5px; cursor: pointer;}
    .download-button:hover {background: radial-gradient(100% 100% at 100% 0%, #F64A92 0%, #C2185B 100%);}
    .download-button:hover .iconbox img {animation: bounce 900ms ease-in-out infinite alternate;}
    .download-button:active {background-color: #E63982; transform: scale(0.98);}
.iconbox {width: 45px; height: 46px; position: absolute; line-height: 46px; background-color: #F42D68; border-right: 1px solid #FF9CC6; top: 0; left: 0; border-radius: 5px 0 0 5px; display: grid;}
.iconbox img {margin: auto;}

@keyframes bounce {
    0% {transform: translateY(0);}
    100% {transform: translateY(.4rem);}
  }

.firstbook {max-width: 1180px; margin: 0 auto; text-align: center; margin-bottom: clamp(70px, 10vw, 190px)}
.firstbook_intro {max-width: 670px; text-align: center; margin: 0 auto 41px; padding-inline: 20px;}
.firstbook h1 {margin-bottom: 1.063rem;}
.chapters {display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: clamp(20px, 5.3vw, 45px); counter-reset: counter-one 100 counter-two 104;}
    @media (min-width: 1050px) {.chapters {gap: 20px; flex-direction: row;}}
    @media (min-width: 1300px) {.chapters {gap: 100px;}}
.chapters-left__box, .chapters-right__box {position:relative; text-align: left; background-color: #FFF4E3; max-width: 510px; border-radius: 5px; padding: 35px 30px; margin-bottom: 10px;}
@media (min-width: 500px) {.chapters-left__box:before, .chapters-right__box:before {position: absolute; top: 1.2em; left: -2.6em; font-family: var(--mainfont); font-size: 1.6rem;}}
    @media (max-width: 680px) {.chapters-left__box:before, .chapters-right__box:before {top: 0.2em; left: 17.5em;}}
    @media (min-width: 1050px) and (max-width: 1299px) {.chapters-left__box:before, .chapters-right__box:before {top: 0.2em; left: 17.5em;}}
    @media (min-width: 1300px) {.chapters-left__box:before, .chapters-right__box:before {top: 1.2em; left: -2.6em;}}
.chapters-left__box:before {counter-increment: counter-one; content: "#" counter(counter-one); color: #EEC78C;}
.chapters-right__box:before {counter-increment: counter-two; content: "#" counter(counter-two); color: #EEC78C;}


.feedback {max-width: 100%; position: relative;}
    @media (min-width: 800px) {.feedback {background-image: url("../images/wave.svg"); background-repeat: no-repeat;}}
.feedback .heading {margin-bottom: 1.063rem;}
.feedback-intro {max-width: 670px; text-align: center; margin: 0 auto 41px; padding-inline: 20px;}

.swiper-container {background-color: var(--background);}
.swiper {background-color: var(--background); width: 90vw;}
.swiper-slide {min-height: 400px; display: flex; justify-content: center; padding-top: 10px; padding-bottom: 40px; align-self: center;}
.feedback-btn {position: absolute; bottom: 35%; z-index: 2; cursor: pointer;}
.swiper-button-left {left: 25px;}
.swiper-button-right {right: 25px;}
.story {background-color: #FFF; max-width: 480px; padding: 45px; border: 15px solid #FFF4E3; border-radius: 5px; display: grid;}
.story p {justify-self: center; align-self: center;}


.secondbook {max-width: 100%; background-image: url("../images/blackbg-small-2x.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center -300px; margin-bottom: 100px; padding-bottom: 20px;}
    @media (min-width: 800px) {.secondbook {max-height: 530px; margin-bottom: 165px;}}
    @media (min-width: 900px) {.secondbook {background-image: url("../images/blackbg-medium-2x.webp");}}
    @media (min-width: 1600px) {.secondbook {background-image: url("../images/blackbg-large-2x.webp");}}
.secondbook .heading {margin-bottom: 1.063rem;}
.secondbook_container {max-width: 1090px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    @media (min-width: 800px) {.secondbook_container {flex-direction: row; gap: 15px; align-items: unset;}}
.secondbook_text {max-width: 500px; color: var(--white); padding: 50px 20px 0 25px;}
    @media (min-width: 800px) {.secondbook_text {flex-basis: 60vw; padding-left: 40px; padding-right: clamp(40px, 1vw, 50px); padding-top: clamp(120px, 5vw, 145px);}}
    @media (min-width: 1050px) {.secondbook_text {max-width: 540px; padding-left: unset; padding-right: 70px;}}
.secondbook_image img {padding-top: 40px; box-shadow: var(--shadow);}
    @media (min-width: 800px) {.secondbook_image img {transform: var(--rotate-right); padding-top: 80px;}}
    @media (min-width: 1050px) {.secondbook_image img {padding-top: 100px;}}
    

.chapters2 {max-width: 1180px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px; margin: -55px auto 0 auto; overflow-x: hidden;}
    @media (min-width: 800px) {.chapters2 {margin: 0 auto 40px;}}
    @media (min-width: 1050px) {.chapters2 {flex-direction: row; gap: 175px;}}

    @media (max-width: 1049px) {.chapters2-left {margin-top: 55px;}}
.chapters2-right {margin-top: 10px;}
    @media (min-width: 1050px){.chapters2-right {margin-top: 100px;}}

.chapters2-left_box, .chapters2-right_box {position: relative; max-width: 406px; margin-bottom: 70px;}
    @media (min-width: 1050px) {.chapters2-left_box, .chapters2-right_box {margin-bottom: 120px;}}
.chapters2-left_box:before, .chapters2-right_box:before {position: absolute; content: ''; display: block; width: 200px; height: 200px; border-radius: 50%; background-color: var(--yellow); z-index: -1;}
.chapters2-left_box:nth-of-type(odd):before, .chapters2-right_box:nth-child(odd):before {left: -55px;}
.chapters2-left_box:nth-of-type(even):before, .chapters2-right_box:nth-child(even):before {right: -55px;}
    @media (max-width: 1050px) {.chapters2-right_box:nth-of-type(odd):before {right: -55px; left: auto;} .chapters2-right_box:nth-of-type(even):before {left: -55px; right: auto;}}
.chapters2-left_box.rows-5:nth-of-type(odd):before, .chapters2-right_box.rows-5:nth-of-type(odd):before {top: -48px;}
.chapters2-left_box.rows-5:nth-of-type(even):before, .chapters2-right_box.rows-5:nth-of-type(even):before {top: -46px;}
.chapters2-left_box.rows-6:nth-of-type(odd):before, .chapters2-right_box.rows-6:nth-of-type(odd):before {top: -34px;}
.chapters2-left_box.rows-6:nth-of-type(even):before, .chapters2-right_box.rows-6:nth-of-type(even):before {top: -35px;}
.chapters2-left_box.rows-7:nth-of-type(odd):before, .chapters2-right_box.rows-7:nth-of-type(odd):before {top: -38px;}
.chapters2-left_box.rows-7:nth-of-type(even):before, .chapters2-right_box.rows-7:nth-of-type(even):before {top: -19px;}


.payment {max-width: 100%; margin: 0 auto; background-image: url("../images/wave.svg"); background-repeat: no-repeat; text-align: center;}
.payment .heading {margin-top: 90px; margin-bottom: 3.2rem; display: inline-block;}
.pricebox {background-color: var(--background); display: flex; flex-direction: column; align-items: center;}
.pricebox-books {margin-inline: 10px;}
.pricebox-books span {font-weight: var(--semibold); font-size: 1.313rem;}
.price {font-size: 2rem;}
.paypal-button {width: 270px; height: 40px; margin-bottom: 10px; background-color: #FFC439; border: none; border-radius: 20px; font-family: inherit; cursor: pointer;}
    .paypal-button:hover {filter: brightness(0.95);}
    .paypal-button:active {background-color: #FFC439; transform: scale(0.98); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
.payment-info_wrapper {display: flex; flex-direction: column; justify-content: center; text-align: left; margin-top: 85px; padding: 0 20px 85px 25px; gap: 20px;}
    @media (min-width: 1050px) {.payment-info_wrapper {flex-direction: row; gap: 50px;}}
.payment-info {max-width: 425px; padding-inline: 20px;}
.payment-info img {height: 14px; vertical-align: -3px;}


.footer {max-width: 100%; background-image: url("../images/blackbg-small-2x.jpg"); background-repeat: no-repeat; background-position: center -340px; color: var(--white); padding: clamp(90px, 10vw, 100px) 0 20px;}
    @media (min-width: 900px) {.footer {background-image: url("../images/blackbg-medium-2x.webp");}}
    @media (min-width: 1500px) {.footer {background-image: url("../images/blackbg-large-2x.webp"); background-size: cover;}}
.footer-container {display: flex; flex-direction: column-reverse; align-items: center; gap: 6vw; padding-left: 25px; padding-right: 20px;}
    @media (min-width: 1260px) {.footer-container {flex-direction: row; align-items: flex-end; justify-content: center; gap: 5vw; flex-wrap: wrap-reverse;}}
.author-box {align-self: center; margin-top: 20px;}
.authorinfo {max-width: clamp(450px, 51vw, 500px);}
.author-box img {border: 3px solid #0C0C0C; margin-top: -10px; transform: rotate(-4.79deg); float: left; margin-right: 20px;}
.questions-wrapper {display: flex; flex-direction: column;}
    @media (min-width: 820px) {.questions-wrapper {flex-direction: row; gap: 40px; align-items: center;}} 
.questions-answers {max-width: 450px;}
    @media (min-width: 820px) {.questions-answers {max-width: 370px;}}
.questions-answers h2 {color: var(--pink);}
.footer-logo {margin: 90px auto 15px auto;}
    @media (min-width: 800px) {.footer-logo {margin-inline: unset;}}
.footer-logo img {max-width: clamp(270px, 50vw, 300px);}    
.copyright, .footer-logo {text-align: center;}