@font-face {
  font-family: 'Cooper-Regular';
  src: url('../fonts/cooper-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Cooper-Black';
  src: url('../fonts/cooper-black.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'great_vibesregular';
  src: url('../fonts/greatvibes-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
:root {
  --font01: 'Cooper-Regular';
  --font02: 'Cooper-Black';
  --font03: 'great_vibesregular';
  --light: 255,255,255;
  --dark: 51,51,51;
  --color01: 10,80,255;
  --color02: 102,161,255;
  --color03: 214,233,247;
  --color04: 135, 207, 235;
  --color05: 191, 233, 255;
  --width: 1440px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: transform 0.3s ease;
}
body {
  background-color: rgba(var(--light),1);
  font-family: var(--font01), Arial, serif;
  color: rgba(var(--dark),1);
}
b, strong, h1,h2,h3,h4,h5 {
  font-family: var(--font02), Arial, sans-serif;
  font-weight:normal;
}
h2 {
  font-size:2.8em;
}
.outer {
  width:100%;
}
.inner {
  width: 100%;
  max-width: var(--width);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.header {
  background-color: rgba(var(--color02),1);
  height:100px;
  position:sticky;
  top:0;
  z-index:100;
}
.header .inner {
  align-items: center;
  display: flex;
  gap:1em;
  height:100%;
  justify-content:space-between;
  padding:.5em 0;
}
.logo {
  align-items: center;
  color:rgba(var(--color01),1);
  display:flex;
  gap:.5em;
  height:100%;
  text-decoration:none;
}
.logo-icon {
  height:100%;
}
.logo img {
  height:100%;
  transition: height 0.3s ease-out, width 0.3s ease-out;
}
.logo-text {
  font-family: var(--font03), Arial, serif;
  font-size:2.4em;
}

.nav-list {
  display: flex;
  justify-content:space-between;
  gap:.1em;
  list-style: none;
  text-transform: uppercase;
}

.nav-list a {
  border-radius: .25em;
  color:rgba(var(--light),1);
  padding:.25em 1em;
  text-decoration: none;
}
.nav-list a:hover,
.nav-list a.is-active {
  background:rgba(var(--light),1);
  color:rgba(var(--color01),1);
}

.hero {
  background:linear-gradient(to top, rgba(var(--color03),1), rgba(var(--color03),1));
  position:relative;
}

.cloud {background: white;border-radius: 50px;position: absolute;}
.cloud::before,.cloud::after {content: "";position: absolute;background: white;border-radius: 50%;}
.cloud1 {width: 120px;height: 40px;top: 80px;left: -150px;animation: moveClouds 60s linear infinite;animation-delay: -10s;}
.cloud1::before {width: 60px;height: 60px;top: -30px;left: 10px;}
.cloud1::after {width: 80px;height: 80px;top: -40px;right: 10px;}
.cloud2 {width: 160px;height: 50px;top: 150px;left: -200px;animation: moveClouds 90s linear infinite;animation-delay: -30s;}
.cloud2::before {width: 70px;height: 70px;top: -30px;left: 20px;}
.cloud2::after {width: 90px;height: 70px;top: -40px;right: 20px;}
.cloud3 {width: 100px;height: 35px;top: 40px;left: -120px;animation: moveClouds 75s linear infinite;animation-delay: -50s;}
.cloud3::before {width: 50px;height: 50px;top: -25px;left: 10px;}
.cloud3::after {width: 60px;height: 30px;top: -10px;right: 10px;}
@keyframes moveClouds {from {transform: translateX(120vw);} to {transform: translateX(0);}}

.hero .slider {
  position: relative;
  overflow: hidden;
}
.hero .slides {
  display: flex;
  transition: transform 1.5s ease;
}
.hero .slide {
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding:2em 0;
transform-style: preserve-3d;
}
.hero .slide .grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.hero .slide .grid .left, .hero .slide .grid .right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .slide .grid .caption {
  flex-direction:column;
  text-shadow:2px 2px 10px rgba(255,255,255,1);
}
.hero .slide .grid .caption h2{
  color:rgb(201, 168, 76);
  line-height:1em;
}
.hero .slide .grid .caption p{
  color:rgb(66, 66, 6);
  font-size:1.2em;
  line-height:1.2em;
}
.hero .book {
  align-items:center;
  background: linear-gradient(135deg, #C0392B, #922B21);
  border-radius: 1em;
  box-shadow:10px 10px 10px rgba(0,0,0,1);
  color:#fff;
  display:flex;
  flex-direction:column;
  margin:1em;
  overflow:hidden;
  width:300px;
  transform:rotate(-6deg) translateX(100px);
  text-decoration:none;
}
.hero .book:nth-child(2) {
  background: linear-gradient(135deg, #1E8449, #145A32);
  transform:rotate(0deg) translateX(0);
  z-index:1;
}
.hero .book:nth-child(3) {
  background: linear-gradient(135deg, #2874A6, #1A5276);
  transform:rotate(6deg) translateX(-100px) translateY(20px) ;
}
.hero .book .icon img {
  width:100%;
  display:block;
}
.hero .book .label {
  line-height:1em;
  padding:.5em 1em 1em;
  text-align:center;
}
.hero .book:hover {
  cursor:pointer;
  transform:rotate(0deg) translateX(0);
}

.offers {
  background: rgb(255,248,236);
  padding:1em 0;
  text-align:center;
}
.offers small {
  color: rgb(139,105,20);
}
.offers h2 {
  color:rgb(107, 94, 79);
  line-height:1.2em;
}
.offers p {
  color:rgb(107, 94, 79);
  font-size:1.2em;
  line-height:1.2em;
  padding:15px;
}

.offers form input[type="text"],
.offers form input[type="search"] {
background:rgb(245, 236, 215);
  border:1px solid rgb(107, 94, 79);
  border-radius:1em;
  color:rgb(107, 94, 79);
  font-family: var(--font01), Arial, serif;
  font-size:1.2em;
  padding:.5em;
  outline:none;
  width:40em;
  max-width:100%;
}
.offers form input[type="text"]::placeholder,
.offers form input[type="search"]::placeholder {
  color:rgb(107, 94, 79);
  font-family: var(--font01), Arial, serif;
}
.offers .kat {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap:.5em;
     justify-content: center;
     align-items: center;
     align-content: center;
     padding:15px 0;
}

.offers button {
  background:rgb(245, 236, 215);
  flex: 1 1 auto;
  font-family: var(--font02), Arial, serif;
  border:none;
  border-radius:1em;
  color:rgb(107, 94, 79);
  font-size:.9em;
  padding:.5em;
}
.offers button:hover,
.offers button.is-active {
  background:rgb(0, 0, 0);
  color:rgb(245, 236, 215);
  cursor:pointer;
}

.shop {
  display: flex;
  align-items: center;
  justify-content: center;
    flex-wrap:wrap;
}

.shop .book {
  align-items:center;
  background:#fff;
  border:1px solid rgb(107, 94, 79);
  border-radius: 1em;
  color:rgb(107, 94, 79);
  display:flex;
  flex-direction:column;
  margin:1em;
  overflow:hidden;
  width:150px;
  text-decoration:none;
}
.shop .book .icon img {
  width:100%;
  display:block;
}
.shop .book .label {
  line-height:1em;
  padding:.5em .65em .75em;
  text-align:center;
}
.shop .book .label h3 {
  font-size:1em;
  margin-bottom:.25em;
}
.shop .book .label p {
  font-size:.85em;
}
.shop .book[hidden] {
  display:none;
}
.shop-empty {
  color: rgb(107, 94, 79);
  padding: 1.5em;
}

.about {
  background:rgb(245, 236, 215);
  padding:1em 0;
  }
.about .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  align-items: center;
}
.about .inner .left{
  text-align:center;
}
.about .inner .left img {
  max-width: min(100%, 320px);
  height: auto;
}
.about .inner .right p {
  color: rgb(107, 94, 79);
  line-height: 1.55;
  margin-bottom: .75em;
}
.about .inner .right h2 {
  color: rgb(107, 94, 79);
  margin-bottom: .5em;
}

.hero button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

.pause {
  display:none;
  top: 10px;
  right: 10px;
  transform: none;
}
footer {
  background-color: rgba(var(--color02),1);
  color: #fff;
  padding: 1em 0;
}
footer .inner {
  text-align:center;
}
footer a {
  color: #fff;
}

.preview-banner {
  background: rgb(255, 248, 220);
  border-bottom: 1px solid rgb(201, 168, 76);
  color: rgb(107, 94, 79);
  font-size: .85em;
  padding: .35em 1em;
  text-align: center;
}
.preview-banner a {
  color: rgba(var(--color01), 1);
}

@media (max-width: 768px) {
.header .inner {
  flex-direction: column;
  height: auto;
  padding: .75em 0;
}
.header {
  height: auto;
}
.nav-list {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .5rem;
}
.hero .slide .grid {
  grid-template-columns: 1fr;
}
.hero .book {
  transform: none !important;
  width: min(260px, 85vw);
}
.about .inner {
  grid-template-columns: 1fr;
}
.offers form input[type="text"],
.offers form input[type="search"] {
  width: 100%;
}
}