* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

header{
width: 100%;
}
main{
width: 100%;
}
footer{
width: 100%;
}

.name {
  font-family: Forum;
  font-size: 30px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 0.02em;
  text-align: left;
  color: rgba(255, 255, 255, 1);
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0C0C0E;
  padding-right:20px;
  margin: 0px;
}

html {
  scroll-behavior: smooth; 
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-right: auto; 
  list-style-type: none; 
  padding: 0;
}

.navigation {
  display: flex;
  align-items: center;
}

.nav-link {
  position: relative; 
  padding: 0;
  line-height: 50px;
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
  font-family: Inter;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
}

.nav-link::after {
  content: ''; 
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: white;
  opacity: 0; 
  transition: opacity 0.2s ease-in-out; 
}

.nav-link:hover::after {
  opacity: 1; 
}

.Log-reg{
  z-index: 50;
}

.icon_profile {
  width: 28px;
  height: 28px;
  margin-top: 31px;
  margin-bottom: 31px;
  margin-left: 40px;
  flex-shrink: 0;
  cursor: pointer;
}

.user-icon {
  width: 28px;
  height: 28px;
  margin-top: 31px;
  margin-bottom: 31px;
  margin-left: 40px;
  margin-right: 40px;
  flex-shrink: 0;
  cursor: pointer;
  background-color: #FFF;
  color: #BB945F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 50%;
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  padding: 4px;
  text-align: center;
}

.register-menu.menu-exit {
  opacity: 1; 
}

.register-menu{
  width: 80px;
  height: 115px;
  background: #FFF;
  position: absolute;
  margin-top: -20px;
  margin-left: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.profile-menu{
  width: 80px;
  height: 115px;
  background: #FFF;
  position: absolute;
  margin-top: -20px;
  margin-left: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
}

.profile-menu.menu-exit-log {
  opacity: 1; 
}

.register-title{
  color: #000;
  font-family: Inter;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  margin: 0px;
  margin-top: 5px;
}

.line-register{
  width: 40px;
  height: 1px;
  background-color: #BB945F;
  margin-top: 5px;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.text-menu{
  color: #000;
  text-align: center;
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-top: 0px;
  margin-bottom: 10px;
  cursor: pointer;
  &:hover{
    color: #BB945F;
  }
}

#Welcome {
  height: 600px;
  background-image: url('img/Welcome.png');
  display: flex;
  margin-bottom: 20px;
  margin-top: 0px;
}

.welcome_bg{
  display: flex;
  width: 600px;
  height: 220px;
  padding: 35px 40px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: #0C0C0E;
  margin-top: 220px;
}

.text_welcome {
  color: #FFF;
  text-align: center;
  font-family: Forum;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; 
  letter-spacing: 3px;
  text-transform: uppercase;
  width: 520px;
  flex-shrink: 0;
}

#About {
margin-bottom: 50px;
}

.section-title{
display: flex;
justify-content: center;
flex-direction:column;
align-items: center;
}


.title {
color: #0C0C0E;
font-family: Forum;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 40px; 
letter-spacing: 2px;
text-transform: capitalize;
display: flex;
justify-content: center;
margin: 0;
}

.line {
width: 50px;
height: 1px;
flex-shrink: 0;
background: #0C0C0E;
margin-top: 20px;
}

.content_about{
color: #000;
text-align: center;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px;
margin-top: 40px;
}

.slider-line{
display: flex;
justify-content: space-between;
position: relative;
left: 0;
transition: 1s;
}

.pointer-events{
  pointer-events: none;
}

.button_arrow{
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-top: 288px;
  background: #FFF;
}

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

.slider{
  display: flex;
  justify-content: center;
}

.slider-wraper{
  width: 450px;
  overflow: hidden;
  margin: 0px 40px;
}

.button_about {
display: flex;
justify-content: center;
margin-top: 40px;
flex-wrap: wrap;
gap: 10px;
margin-top: 25px;
margin-bottom: 10px;
}

.dot{
  width: 16px;
  height: 16px;
  border-radius: 50px;
  background: #0C0C0E;
  cursor: pointer;
}

.activeButton{background: #BB945F;}

#Favorites{
margin-bottom: 20px;
}

.text_favorites{
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-left:20px ;
margin-top: 40px;
}

.seasons {
display: flex;
margin-top: 40px;
gap: 65px;
}

.button_input {
display: none;
}

.button_label {
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
cursor: pointer;
margin-left: 20px;
gap: 20px;
}

.button_inner {
display: inline-block;
width: 17px;
height: 17px;
border-radius: 50%;
border: 2px solid #000;
background-color: #fff;
transition: background-color 0.3s ease-in-out;
margin-right: 5px;
}

.button_input:checked + .button_label .button_inner {
background-color: #000;
background-image: radial-gradient(circle, #000 0%, #000 50%, #fff 50%);
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}

.button_input:checked + .button_label {
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.favorites-items{
margin: 40px 20px;
display: flex;
flex-wrap: wrap;
}

.button {
  width: 75px;
  height: 30px;
  color: #0C0C0E;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 2px;
  border: 1px solid #0C0C0E;
  cursor: pointer;
  background: #FFF;
}

.button:hover {
  border: 1px solid #BB945F;
  background: #BB945F;
}

.first_book{
display: flex;
width: 550px;
height: 555px;
border: 1px solid #000;
padding: 15px 20px;
margin-bottom: 40px;
margin-right: 260px;
}

.book_title {
color: #000;
font-family: Forum;
font-size: 20px;
font-weight: 400;
line-height: 40px;
letter-spacing: 2px;
text-transform: capitalize;
margin: 0;
}

.book_line {
background-color: #BB945F;
height: 1px;
width: 60px;
margin-bottom: 20px;
}

.book_subtitle {
color: #000;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 40px; 
letter-spacing: 2px;
text-transform: uppercase;
margin: 0;
}

.book_nexttitle {
color: #000;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 40px;
letter-spacing: 2px;
text-transform: capitalize;
margin: 0 0 20px 0;
}

.book_text {
color: #000;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 40px; 
letter-spacing: 2px;
text-transform: capitalize; 
width: 355px;
margin-bottom: 15px;
}


.favorites__img {
  width: 200px;
  height: 300px;
  background-repeat: no-repeat;
}


.favorites__img {
  position: absolute;
  margin-left: 370px;
  margin-top: 239px;
}

.second_book{
width: 550px;
height: 555px;
border: 1px solid #000;
display: flex;
padding: 15px 20px;
margin-bottom: 40px;
}

.favorites2__img {
width: 200px;
height: 300px;
background-repeat: no-repeat;
}


.favorites2__img {
position: absolute;
margin-left: 370px;
margin-top: 239px;
}

.book2 {
margin-top: 40px;
}

.third_book{
width: 550px;
height: 555px;
border: 1px solid #000;
padding: 15px 20px;
margin-right: 260px;
display: flex;
}

.favorites3__img {
width: 200px;
height: 300px;
background-repeat: no-repeat;
}


.favorites3__img {
position: absolute;
margin-left: 370px;
margin-top: 239px;
}

.book3_button {
width: 75px;
height: 30px;
color: #0C0C0E;
text-align: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
border-radius: 2px;
border: 1px solid #0C0C0E;
cursor: pointer;
}

.fourth_book{
width: 550px;
height: 555px;
border: 1px solid #000;
display: flex;
padding: 15px 20px;
margin-bottom: 40px;
}

.favorites4__img {
width: 200px;
height: 300px;
background-repeat: no-repeat;
}


.favorites4__img {
position: absolute;
margin-left: 370px;
margin-top: 239px;
}

.book4 {
margin-top: 80px;
}

.own{
  color: #BB945F;
  border: 1px solid #BB945F;
  cursor: default;
  &:hover{
    background-color: #FFF;
  }
}

#Coffee_shop{
display: flex;
padding: 20px 20px 40px 20px;
flex-direction: column;
margin-bottom: -20px;
}

.cofee_text{
color: #000;
text-align: center;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 2px;
margin-top: 40px;
}

.menu{
display: flex;
margin: 40px 20px;
}

.coffe_and_tea_menu{
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 40px;
}

.title_coffe{
color: #BB945F;
font-family: Forum;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 2px;
text-transform: capitalize;
margin: 0;
}

.menu_item1{
display: flex;
align-items: center;
gap: 60px;
height: 40px;
}

.text_item1{
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px; /* 200% */
letter-spacing: 2px;
text-transform: capitalize;
width: 199px;
margin: 0;
padding: 0px;
}

.menu_line{
width: 100px;
height: 1px;
background-color:#BB945F;
margin: 0;
}

.menu_price{
color: #000;
font-family: Forum;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px; 
letter-spacing: 2px;
text-transform: capitalize;
}

.deserts{
display: flex;
width: 482px;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 40px;
}

.title_deserts{
color: #BB945F;
font-family: Forum;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 2px;
text-transform: capitalize;
margin: 0;
}

.menu_item2{
display: flex;
justify-content: flex-end;
align-items: center;
gap: 60px;
height: 40px;
}


.text_item2{
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px; /* 200% */
letter-spacing: 2px;
text-transform: capitalize;
margin: 0;
}

.contacts_info{
margin: 40px 20px;
}

.text_info{
height: 380px;
gap: 40px;
display: flex;
justify-content: flex-start;
flex-direction: column
}

.title_contacts{
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 40px; 
letter-spacing: 2px;
text-transform: capitalize;
margin: 0px;
text-decoration: none;
}

.text_contacts{
display: flex;
flex-direction: column;
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px; 
letter-spacing: 2px;
text-transform: capitalize;
gap: 20px;
margin: 0px;
}

.tc{
display: flex;
flex-direction: row;
margin-top: 20px;
}

.map{
width: 696px;
height: 414px;
}

.number{
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px; 
letter-spacing: 2px;
text-transform: capitalize;
text-decoration: none;
}

#Library_Card{
padding: 20px 20px 41px 20px;
margin-bottom: -20px;
}

.library_card{
display: flex;
margin-bottom: 41px;
}

.library_card-login{
  display: flex;
  margin-bottom: 41px;
}

.DLC-profile{
  display: inline-flex;
  height: 30px;
  width: 75px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid #0C0C0E;
  color: #0C0C0E;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1px;
  background-color: #FFF;
  cursor: pointer;
  &:hover{
    background-color: #BB945F;
    border: 1px solid #BB945F;
  }
}

.kard1{
display: flex;
flex-direction:column;
}

.title_card{
color: #000;
font-family: Inter;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.6px;;
margin-bottom: 30px;
display: flex;
justify-content: center;
margin-top: 40px;
}

.card_bg {
width: 600px;
height: 386px;
flex-shrink: 0;
border: 3px solid #BB945F;
display: flex;
justify-content: center;
padding: 20px;
flex-direction: column;
}

.gold_bg {
width: 560px;
height: 272px;
flex-shrink: 0;
background-color: #BB945F;
padding: 15px 20px 25px 15px;
margin: 0px;
}

.text_bg {
color: #000;
font-family: Forum;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 50px;
letter-spacing: 0.6px;
margin: 0;
}

.input_card {
width: 520px;
height: 66px;
flex-shrink: 0;
gap: 25px;
margin-top: 20px;
border-radius: 10px;
color: #8E8E8E;
font-family: Forum;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 50px;
letter-spacing: 0.6px;
border: none;
padding-left: 20px;
}

.button_card {
width: 242px;
height: 44px;
color: #0C0C0E;
text-align: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
border-radius: 2px;
border: 1px solid #0C0C0E;
cursor: pointer;
margin-top: 20px;
color: #0C0C0E;
text-align: center;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}

.button_card:hover {
border: 1px solid #BB945F;
background: #BB945F;
}

.get_kard{
width: 456px;
flex-shrink: 0;
display: flex;
flex-direction:column;
justify-content: flex-start;
gap: 35px;
}

.title_card2{
color: #000;
text-align: right;
font-family: Forum;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.6px;
margin-top: 40px;
margin-bottom: 0px;
}

.text_card{
color: #000;
text-align: right;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px; 
letter-spacing: 0.4px;
width: 456px;
margin: 0px;
}

.card_button{
display: flex;
justify-content: flex-end;
gap: 20px;
}

.footer{
background-color: #0C0C0E;
margin-top: 20px;
display: flex;
flex-direction: column;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 44px;
}

.floor1{
display: flex;
height: 40px;
justify-content: center;
align-items: flex-start;
flex-shrink: 0;
flex-direction: row;
}

.text_footer{
color: #FFF;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.part1{
width: 229px;
flex-shrink: 0;
text-decoration: none;
}

.part2{
text-align: right;
margin: 0px;
}

.floor2{
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
margin-bottom: 30px
}

.icon{
display: flex;
width: 102px;
height: 24px;
justify-content: center;
align-items: flex-start;
gap: 15px;
list-style-type: none;
padding: 0px;
margin: 0px;
}

.line_footer{
height: 1px;
background-color: #FFF;
margin-bottom: 43px;
}

.floor3{
height: 22px;
flex-shrink: 0;
display: flex;
justify-content: space-between;
}

.text_footer2{
color: #FFF;
text-align: center;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 20px;
letter-spacing: 2px;
text-decoration: none;
margin: 0px;
}

.li_icon{
margin: 0px;
}

.rss{
color: #FFF;
text-align: center;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
letter-spacing: 2px;
display: flex;
height: 22px;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
}

.header_menu {
position: relative; 
}

.menu_icon {
display: flex;
position: relative;
z-index: 50;
align-items: center;
justify-content: flex-end;
width: 45px;
height: 20px;
cursor: pointer;
}

.menu_icon span {
height: 2px;
width: 100%;
transform: scale(1);
background-color: #fff;
}

.menu_icon::before,
.menu_icon::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
background-color: #fff;
transition: all 0.3s ease 0s;
}

.menu_icon::after {
bottom: 0;
}

.menu_icon::before {
top: 0;
}

.menu_icon.active span {
transform: scale(0);
}

.menu_icon.active::before {
top: 50%;
transform: rotate(-45deg) translate(0, -50%);
}

.menu_icon.active::after {
bottom: 50%;
transform: rotate(45deg) translate(0, 50%);
}

.menu_body {
display: none;
justify-content: center;
width: 332px;
background-color: #000;
padding: 100px 107px;
animation: burgerAnimation 0.6s;
position: absolute; 
top: -35px; 
right: -20px; 
z-index: 10;
opacity: 0; 
}

.menu_body.open {
transition: opacity 0.3s ease-in-out 0s; 
}

.menu_list {
margin: 0;
padding: 0;
}

.menu_item {
list-style-type: none;
display: flex;
justify-content: center;
}

.menu_item:not(:last-child) {margin-bottom: 30px;}

.menu_link {
text-decoration: none;
color: #fff;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 50px;
text-align: center;
&:hover{
  text-decoration: underline;
}
}

@keyframes burgerAnimation {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

@keyframes menuSlideIn {
from {
  transform: translateY(-20px); 
}
to {
  transform: translateY(0);
}
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.none{
  display: none;
}

.season {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s ease-in-out, height 0.5s ease-in-out;
  height: 0;
  overflow: hidden;
}

.seas {
  height: auto;
  opacity: 1;
}

.book5{
  margin-top: 160px;
}
.book6{
  margin-top: 120px;
}
.book7{
  margin-top: 120px;
}
.book8{
  margin-top: 40px;
}

.book9{
  margin-top: 40px;
}
.book11{
  margin-top: 120px;
}

.book13{
  margin-top: 40px;
}
.book14{
  margin-top: 40px;
}
.book15{
  margin-top: 40px;
}
.book16{
  margin-top: 80px;
}

.arrow-Next, .arrow-Prev, .slider-wraper, .dot{
  display: inline-block;
  vertical-align: middle;
}

.pop-up{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(20, 20, 20, 0.6);
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.popup-content{
  width: 250px;
  height: 382px;
  background: #FFF;
}

.hidden{
  opacity: 0;
  pointer-events: none;
}

.title-popup{
  display: flex;
  margin-bottom: 20px;
  justify-content: flex-end;
  margin-bottom: 20px;
  margin-top: 20px;
}

.close-popup-log{
  width: 15px;
  height: 15px;
  border: none;
  background: #FFF;
  cursor: pointer;
  padding: 0px;
  margin-top: -5px;
  margin-right: 15px;
  margin-left: 54px;
}

.close-button-mp{
  width: 15px;
  height: 15px;
  border: none;
  background: #FFF;
  cursor: pointer;
  padding: 0px;
  margin-top: -15px;
}

.close-popup{
  width: 15px;
  height: 15px;
  border: none;
  background: #FFF;
  cursor: pointer;
  padding: 0px;
  margin-top: -5px;
  margin-right: 15px;
  margin-left: 54px;
}

.text-popup{
  color: #000;
  text-align: center;
  font-family: Forum;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 100% */
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0px;
}

.text-popup-input{
  color: #000;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 133.333% */
letter-spacing: 0.3px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 25px;
}

.input-popup {
  width: 200px;
  height: 20px;
  border: 1px solid #BB945F;
  margin-left: 25px;
  margin-bottom: 10px;
}

.log-in{
  color: #0C0C0E;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1px;
  width: 75px;
  height: 30px;
  flex-shrink: 0;
  cursor: pointer;
  margin-left: 25px;
  margin-top: 10px;
  background-color: #FFF;
}

.sign-up{
  color: #0C0C0E;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1px;
  width: 75px;
  height: 30px;
  flex-shrink: 0;
  cursor: pointer;
  margin-left: 25px;
  margin-top: 10px;
  background-color: #FFF;
}

.footer-popup{
  display: flex;
  margin: 0px;
}

.footer-text{
  color: #000;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.16);
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-right: 10px;
  margin-left: 25px;
}

.reg-login{
  color: #0C0C0E;
text-align: center;
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
text-decoration-line: underline;
cursor: pointer;
&:hover{
  color: #BB945F;
}
}

.login-reg{
  color: #0C0C0E;
text-align: center;
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
text-decoration-line: underline;
cursor: pointer;
&:hover{
  color: #BB945F;
}
}

.popup-login{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(20, 20, 20, 0.6);
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.popup-my-profile{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(20, 20, 20, 0.6);
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.popup-libraru-card{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(20, 20, 20, 0.6);
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  z-index: 51;
}

.hidden-Bc{
  opacity: 0;
  pointer-events: none;
}

.hidden-log{
  opacity: 0;
  pointer-events: none;
}

.popup-login-content{
  width: 250px;
  height: 262px;
  background: #FFF;
}

.mu-profile-content{
  width: 600px;
  height: 400px;
  display: flex;
  background: #FFF;
}

.hidden-profile{
  opacity: 0;
  pointer-events: none;
}

.left-profile{
  width: 170px;
  height: 403px;
  flex-shrink: 0;
  background: #0C0C0E;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.my-profile-icon{
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #BB945F;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 100% */
  text-transform: capitalize;
}

.my-profile-name{
  flex-shrink: 0;
  background: #FFF;
  display: flex;
  flex-wrap: wrap;
  padding-left: 15px;
  padding-right: 15px;
  color: #000;
  margin-top: 15px;
  margin-left: 25px;
  margin-right: 25px;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-transform: capitalize;
  text-align: center;
}

.right-profile{
 display: flex;
 flex-direction: column;
 padding-top: 40px;
 padding-left: 20px;
}

.title-mp{
  display: flex;
}

.text-mp{
  color: #000;
  text-align: center;
  font-family: Forum;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 50% */
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin:0px 163px 0px 0px;
}

.DLC{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 0;
  gap: 35px;
}

.DLC-input{
  width: 520px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #FFF;
  color: #BB945F;
  font-family: Forum;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; 
  letter-spacing: 0.6px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.full-name-DLC{
  margin-top: 20px;
  margin-bottom: 25px;
}

.PR{
  margin-right: 40px;
  gap: 20px;
}

.VBB{
  display: flex;
}

.vbb{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.vbb-DLC{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.vbb-mp{
  color: #000;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 100% */
  letter-spacing: 0.4px;
  text-transform: capitalize;
  margin: 0px;
}

.vbb-text{
  color: #000;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 200% */
  letter-spacing: 0.2px;
  text-transform: capitalize;
  margin: 0;
}

.rented-books{
  width: 350px;
  height: 100px;
  flex-shrink: 0;
  margin-top: 20px;
}

.rented-text{
  color: #0C0C0E;
  font-family: Inter;
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
  margin-bottom: 30px;
}

.card-number{
  margin-top: 40px;
  display: flex;
  gap: 15px;
}

.text-cn{
  color: #0C0C0E;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; 
  margin: 0px;
}

.cn{
  color: #BB945F;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
}

.card-copy{
  cursor: pointer;
}

.libraru-card{
  width: 640px;
  height: 540px;
  background: #FFF;
}

.title-buy-card{
  background: #0C0C0E;
  display: flex;
}

.text-bc{
  color: #FFF;
  text-align: center;
  font-family: Forum;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 50% */
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 20px 100px 20px 135px;
}

.button-bc{
  width: 15px;
  height: 15px;
  border: none;
  background-color: #0C0C0E;
  cursor: pointer;
  padding: 0px;
  margin-top: 20px;
}

.rented-nav {
  max-height: 70px; 
  max-width: 350px;
  overflow-x: auto;
  white-space: nowrap;
}

.li-rentendet{
  color: #000;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 100% */
  letter-spacing: 2px;
  text-transform: capitalize;
  margin-bottom: 10px;
}

.content-bc{
  display: flex;
  padding: 30px 35px 40px 35px;
}

.left-bc{
  width: 200px;
  height: 410px;
  margin-right: 40px;
  display: flex;
  flex-direction: column;
}

.right-bc{
  width: 330px;
}

.rbc-text{
  color: #8E8E8E;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 133.333% */
letter-spacing: 2px;
margin: 0px;
}

.text-buy-card{
  margin: 0;
  margin-bottom: 10px;
  color: #000;
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 133.333% */
  letter-spacing: 0.3px;
}

.input-bc{
  width: 200px;
  height: 20px;
  border: 1px solid #BB945F;
  margin-bottom: 10px;
}

.input-bc-min{
  width: 45px;
  height: 20px;
  border: 1px solid #BB945F;
  margin-bottom: 10px;
  margin-right: 10px;
}

.mounth-years{
  display: flex;
}

.buy-card{
  margin: 0;
  color: #0C0C0E;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 100% */
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 10px;
}

.buy-bc{
  width: 75px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid #0C0C0E;
  background-color: #FFF;
  margin-right: 25px;
  color: #0C0C0E;
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1px;
  cursor: pointer;
  &:hover{
  border: 1px solid #BB945F;
  background: #BB945F;
  }
}

.button-buy{
  display: flex;
  margin-top: 20px;
}

/* Для ширин от 1440px и выше (стандартная вёрстка) */
@media(min-width: 1440px) {
.user-icon {
  margin-right: 0px;
}
.slider-line{
  gap: 25px;
}
.slider-wraper{
  width: 1400px;
  margin: 0px;
}
.buttonAbut{
  display: none;
}
body{
  max-width: 1440px;
  margin: 0px auto;
}
.favorites-items{
  width: 1400px;
  height: 1150px;
}
.coffe_and_tea_menu{
  margin-right: 480px;
}
#Coffee_shop{
  align-items: center;
}
.contacts_info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.library_card{
  width: 600px;
  gap: 344px;
  height: 453px;
}
.library_card-login{
  width: 600px;
  gap: 344px;
}
.floor1{
  width: 1400px;
  gap: 1022px;
}
.floor2{
  gap: 1147px;
}
.floor3{
  width: 1400px;
}
.rss{
  margin-left: 494px;
  margin-right: 437px;
}
.header_menu{
  display: none;
}
.button_none{
  display: none;
}
.button_arrow{
  display: none;
}
}

/* Для ширин от 1024px до 1439px */
@media(max-width: 1439px) {
  .slider-line{
  gap: 20px;
}
.slider-wraper{
  width: 984px;
  margin: 0px;
}
.buttonAbut{
  display: none;
}
body{
  max-width: 1024px;
  margin: 0px auto;
}
.nav{
  display: none;
}
.imgn{
  width: 315px;
}
.first_book{
  margin-right: 0px;
}
.third_book{
  margin-right: 0px;
  margin-bottom: 40px;
}
.seas{
  display: flex;
  justify-content: center;
}
.seasons {
  justify-content: flex-start;
}
.coffe_and_tea_menu{
  margin-bottom: 0px;
}
.library_card{
  flex-direction: column;
  align-items: center;
}
.library_card-login{
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.get_kard{
  align-items: center;
}
.text_info{
  margin-bottom: 100px;
}
.text_card{
  text-align: center;
}
.floor1{
  gap: 606px;
}
.floor2{
  gap: 731px;
}
.icon_profile{
  margin-right: 40px;
}
.button_none{
  display: none;
}
.button_arrow{
  display: none;
}
.favorites-items{
  height: 2340px;
}
}

/* Для ширин от 768px до 1023px */
@media(max-width: 1023px) {
.buttonAbut{
  display: block;
}
.slider-line{
  gap: 15px;
}
.slider-wraper{
  width: 450px;
  margin: 0px 40px;
}
body{
  max-width: 768px;
  margin: 0px auto;
}
#Welcome {
  background-image: url('img/Welcome1.png');
}
.button_none{
  display: inline-block;
}
.slider-line{
  align-items: center;
}
.imgn{
  width: 450px;
  height: 560px;
  margin-bottom: 0px;
}
.menu{
  flex-direction: column;
  margin-right: 0px;
  margin-left: 0px;
}
.deserts{
  margin-left: 246px;
  margin-top: 40px;
}
.map{
  margin-left: 15.5px;
}
.text_card{
  width: 600px;
}
.floor1{
  gap: 350px;
}
.floor2{
  gap: 475px;
}
.content_about{
  width: 728px;
  margin-left: 20px;
}
.about_button{
  margin-top: -15px;
}
.button_arrow{
  display: block;
  margin-bottom: -40px;
  border: none;
}
.favorites-items{
  margin-left: -21px;
}
#Favorites{
  margin-bottom: -40px;
}
.get_kard{
  margin-top: -23px;
}
.card_button{
  margin-top: 10px;
}
#Library_Card{
  margin-bottom: -52px;
}
}

/* Для ширин от 640px до 767px */
@media(max-width: 767px) {
body{
  max-width: 640px;
  margin: 0px auto;
}
.content_about{
  width: auto;
  margin-left: 0px;
}
.slider-line{
  padding: 0px ;
}
.seasons {
  gap: 30px;
}
.deserts {
  margin-left: 118px;
}
.map{
  width: 568px;
  height: auto;
}
.floor1{
  gap: 222px;
}
.floor2{
  gap: 374px;
}
}

@media(max-width: 639px) {
  body{
    max-width: 600px;
    margin: 0px auto;
  }
  header{
    width: 600px;
    }
    main{
    width: 600px;
    }
    footer{
    width: 600px;
    }
  .seasons {
    gap: 20px;
  }
  .map{
    width: 528px;
    height: auto;
  }
  .floor1{
    gap: 182px;
  }
  .floor2{
    gap: 334px;
  }
  }