/* RESET --------------------------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/*transition: 0.2s ease;*/
}
a {
	text-decoration: none;

}

/* MONTSERATT ----------------------------------------------- */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
}

/* VARIABLES COLORS ###################################################################### */

:root {

	/* transitions */
	--transition-very-slow: 0.4s ease;
	--transition-slow: 0.3s ease;
	--transition-normal: 0.2s ease;
	--transition-fast: 0.1s ease;
	--transition-very-fast: 0s ease;


	--color-white:  #ffffff;
  /* Brand */
  --color-primary: #1f2937;        /* Deep editorial navy */
  --color-primary-hover: #111827;

  --color-secondary: #64748b;      /* Slate */
  --color-secondary-hover: #475569;

  --color-accent: #d4a017;
           /* Heritage gold */
  --color-accent-hover: #b78a14;

  /* Backgrounds */
  --color-bg: #e0dcd3;
  /*#dbd2c1; */
  /*#d1c7b6; */
  /*#f1ece4;*/
  --color-surface: #ffffff;        
  --color-surface-alt: #edebe1; 
  /*#c9c7bb;*/
  /*#f0e9c7; */
  /*#c9c8c3;*/

  /*#b5b3ae;*/
  /*#f7f2ea;   */

  /* Text */
  --color-text: #1c1b1;
  --color-text-muted: #6b7280;

  /* Borders */
  --color-border: #e3dacd;

  /* Status */
  --color-success: #15803d;
  --color-warning: #d97706;
  --color-danger: #dc2626;

  /* Shadows (slightly stronger for contrast) */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --padding-sides-h: 0 20px;
}


/* body ---------------------------------------------------------------------- */

body {
	background-color: var(--color-bg);
	font-family: 'Montserrat', sans-serif;
}

/* nav ------------------------------------------------------------------------- */

/* top_nav --------------------------------------------------------------------x  */

.top_nav {
	padding: var(--padding-sides-h);
	height: 35px;
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	transition: var(--transition-slow);
}

/* hide after scroll to ---------------------- */
.top_nav.hide {
	display: none;
}
/*--------------------------------------------*/

.top_nav_right {
	display: flex;
	flex-direction: row;
	column-gap: 20px;
}
.top_nav_right p {
	cursor: pointer;
}
.top_nav_right p:hover {
	color: var(--color-accent);
}
.nav a {
	color: var(--color-white);
}
.top_nav a:hover {
	color: var(--color-accent);
}

/* middle nav -------------------------------------------------------------------------- */

.middle_nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	column-gap: 10px;
	height: 70px;
	padding: var(--padding-sides-h);
	padding-top: 5px;
	padding-bottom: 5px;
	box-shadow: 0 1px 3px 0px var(--color-accent);
	background-color: rgba(224, 220, 211, 0.8);

	transition: var(--transition-slow);
	z-index: 15;

	/*opacity: 0.5;*/
}

/* fixe after -------------------------------- */
.middle_nav.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: rgba(224, 220, 211, 1);
	box-shadow: 0 1px 3px 0px var(--color-accent);
}
/*--------------------------------------------*/

div.brand a{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	column-gap: 10px;
	align-items: center;
	font-size: 30px;
	font-weight: 900;
	color: var(--color-accent);
	text-shadow: 1px 2px 1px black;

	/*opacity: 1;*/
}
img.brand_logo {
	height: 60px;
}
div.search {
	height: 40px;
	/*border:1px solid grey;*/
	border-radius: 100px;
	width: 400px;
}
div.search div {
	height: 40px;
	border:1px solid var(--color-accent);
	border-radius: 100px;
	width: 400px;
	background-color: var(--color-surface);
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	
}
div.search div input {
	height: 38px;	
	border: none;
	border-radius: 100px;
	width: 305px;
	padding: 5px;
	font-size: 16px;
}
div.search div button {
	height: 39px;
	border:1px solid var(--color-accent);
	background-color: var(--color-accent);
	border-radius: 100px;
	width: 87px;
	cursor: pointer;
}
div.search div button:hover {
	background-color: var(--color-accent-hover);
}
div.account {
	display: flex;
	flex-direction: row;
	column-gap: 20px;
}
div.account img {
	height: 30px;
	cursor: pointer;
	transition: 0.3 ease;
}
div.account img:hover {
	transform: scale(1.08);
	/*margin-left: 10px;*/
}
a.img_logged_out{
	margin-top: 20px;
}
div.cart_notif {
	background-color: brown;
	padding: 0;
	box-shadow: 0 0 5px 0 var(--color-primary);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.9;
	position: relative;
	top: -15px;
	right: -25px;
}
div.cart_notif_logged_out {
	background-color: brown;
	padding: 0;
	box-shadow: 0 0 5px 0 var(--color-primary);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	/*font-weight: bold;*/
	opacity: 0.9;
	position: relative;
	top: -45px;
	right: -25px;
}


/* LOGGED IN */

div.account.logedin {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
	justify-content: flex-end;
	align-items: flex-end;
	/*border: 1px solid black;*/
	padding: 0;
}
div.accountname_div.accounts {
	display: flex;
	flex-direction: row;
	column-gap: 15px;
	align-items: flex-end;
	height: 35px;
}
div.accountname_div.accounts img {
	/*border: 1px solid red;*/
	margin: 0;
	padding: 0;
	position: relative;
	top: 25px;
}
div.accountname_div.orders {
	display: flex;
	flex-direction: row;
	column-gap: 15px;
	align-items: flex-end;
}
a.accountname {
	font-size: 18px;
	font-weight: bold;
	color: var(--color-primary);
	transition: 0.3 ease;
}
a.accountname:hover {
	transform: scale(1.05);
}
a.accountname.orders {
	font-size: 18px;
	font-weight: bold;
	color: var(--color-primary);
	transition: 0.3 ease;
}
a.accountname.orders:hover {
	transform: scale(1.05);
}
a.accountname.logout {
	font-size: 18px;
	font-weight: bold;
	color: var(--color-secondary);
	padding: 0;
}
button.logout {
	padding: 3px 5px;
	background-color: var(--color-secondary);
	color: var(--color-surface);
	font-weight: bold;
	cursor: pointer;
	margin: 0;
	transition: 0.3 ease;
	border: none;
	box-shadow: 0 0 3px 0 var(--color-primary);
	border-radius: 5px;
}
button.logout:hover {
	transform: scale(1.05);
}
button.orders {
	padding: 3px 5px;
	background-color: var(--color-accent);
	color: var(--color-surface);
	font-weight: bold;
	cursor: pointer;
	margin: 0;
	transition: 0.3 ease;
	border: none;
	box-shadow: 0 0 3px 0 var(--color-primary);
	border-radius: 5px;
}
button.orders:hover {
	transform: scale(1.05);
}
/* bottom_nav ---------------------------------------------------------------- */

/* OFF CANVAS######################################################## */
div.off_canvas {
	display: flex;
	flex-direction: column;
	position: fixed;
	row-gap: 20px;
	top: 20px;	
	background-color: var(--color-bg);	
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 1px 2px 0 var(--color-primary-hover);
	z-index: 60;
	transition: var(--transition-slow);
	right: -75vw;
	width: 70vw;
}
div.off_canvas.open {
	right: 10px;
}

div.off_canvas a {
	color: #424242;
	font-size: 15px;
	/*font-family: 'Montserrat', sans-serif;*/
	font-weight: 600;
	/*padding-left: 20px;*/

}
div.close_icon_off_canvas_div {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
img.close_icon_off_canvas {
	height: 20px;
	cursor: pointer;
}
img.close_icon_off_canvas:hover {
	transform: scale(1.1);
}


/* off canvas end =================================================== */  




div.bottom_nav {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	column-gap: 50px;
	height: 30px;
	/*background-color: var(--color-surface-alt);*/
	background-color: rgba(224, 220, 211, 0.4);

	padding: var(--padding-sides-h);
	transition: var(--transition-slow);
	z-index: 10;
}

/* fixed after scroll to ---------------------- */
div.bottom_nav.fixed {
	position: fixed;
	width: 100%;
	top: 70px;
	background-color: rgba(224, 220, 211, 1);

}
/*--------------------------------------------*/

/* hide after scroll to ---------------------- */
div.bottom_nav.hide {
	display: none;
}
/*--------------------------------------------*/

div.bottom_nav a {
	color: var(--color-text);
	font-size: 15px;
	/*font-family: 'Montserrat', sans-serif;*/
	font-weight: 600;
}
div.down_arrow_div {
	display: flex;
	align-items: center;
}
span.down_arrow {
	font-size: 22px;
	display: inline-block;
	margin-top: 5px;
}

/* hero section ---------------------------------------------------------------------------------- */

img.hero_bg_image {
	position: absolute;
	height: 100vh;
	background-color: var(--color-accent);
	width: 100%;
	opacity: 1;
	z-index: -30;
}
div.hero_overlay {
	position: absolute;
	height: 100vh;
	background-color: var(--color-bg);
	width: 100%;
	opacity: 0.5;
	z-index: -20;
}  

section.hero_section {
	height: calc(100vh - 70px);
	/*background-image: url("../img/hero.png");*/
	/*background-repeat: no-repeat;*/
	/*background-size: cover;*/
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: var(--padding-sides-h);
	column-gap: 10px;

}

div.hero_text_div {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	row-gap: 100px;	
}
h1.hero_text {
	/*font-family: 'Montserrat', sans-serif;*/
	font-weight: 900;
	font-size: 40px;
	text-align: center;
}
p.hero_text {
	/*font-family: 'Montserrat', sans-serif;*/
	font-weight: 600;
	font-size: 20px;
	text-align: center;

}
div.hero_image_div {
		text-align: center;
	}
img.hero_image {
	height: 500px;
}

button.hero_button {
	height: 39px;
	border:1px solid var(--color-accent);
	background-color: var(--color-accent);
	border-radius: 100px;
	width: 120px;
	cursor: pointer;
	/*font-family: 'Montserrat', sans-serif;*/
	font-size: 16px;
	font-weight: bold;
}
button.hero_button:hover {
	background-color: var(--color-accent-hover);
}


/* search ---------------------------------------------------------------------------- */

div.search_response_div {
	z-index: 300;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	width: 80vw;
	position: fixed;
	top: 100px;
	left: 100px;
	padding: 10px;
	max-height: calc(100vh - 120px);
	/*overflow-y: auto;*/
	border-radius: 10px;
	/*box-shadow: 0 0 7px 0 var(--color-primary);*/
	/*background-color: var(--color-secondary);*/
}
div.search_response_div.hidden {
	display: none;
}
/* best sellers     section ---------------------------------------------------------- */

section.best_sellers {
	padding-bottom: 100px;
	background-color: var(--color-bg);
}

div.section_heading_div {
	background-color: var(--color-bg);
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: var(--padding-sides-h);
	padding-top: 60px;
	padding-bottom: 50px;	
}
div.section_heading_div h1 {
	font-weight: bold;
	font-size: 2.2rem;
}
div.best_sellers_cards_div {
	background-color: var(--color-bg);
	display: flex;
	flex-direction: row;
	justify-content: center;	
	gap: 25px;
	flex-wrap: wrap;
	padding: var(--padding-sides-h);	
}
div.best_sellers_card {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	row-gap: 10px;
	width: 240px;
	height: 350px;
	background-color: var(--color-surface);	
	box-shadow: 0 0 6px 0 darkgray;
	border-radius: 10px;
	padding: 10px;
	/*cursor: pointer;*/
	transition: var(--transition-slow);
}
div.index_add_to_cart_btn_div {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	column-gap: 10px;
}
button.index_add_to_cart_btn {
	border:1px solid var(--color-accent);
	background-color: var(--color-accent);
	border-radius: 10px;
	cursor: pointer;
	padding: 2px 5px;
	color: black;
	font-weight: bold;
	/*z-index: 100;*/
}
button.add_to_cart_btn:hover {
	transform: scale(1.05);
}
button.index_add_to_cart_btn:hover {
	transform: scale(1.05);
}
div.best_sellers_card:hover {
	/*background-color: var(--color-border);*/
	box-shadow: 0 0 7px 0px black;
	transform: scale(1.01);

}
img.best_sellers_card_img {
	width: 110px;
	/*width: auto;*/
}
div.best_sellers_card_info {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
}
p.book_tittle {
	font-weight: bold;
	text-align: center;
}
p.book_info {
	font-size: 0.9rem;
	overflow: hidden;

}
p.book_price {
	text-align: right;
	font-weight: bold;
	color: var(--color-accent);
	margin-top: 5px;
}
span.book_prev_price {
	font-weight: normal;
	color: grey;
	text-decoration: line-through;

}
a.best_seller_book {
	/*display: block;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 20px;*/
	/*display: block;*/
	color: var(--color-primary);
}

a.best_seller_book p {
	margin: 10px 0;
}
/* best readings     section --------------------------------------------------------------------------- */

section.readings{
	/*background-color: #dde094;*/
	background-color: #ffffff;
	padding-top: 50px;
	padding: var(--padding-sides-h);
	padding-bottom: 70px;
	box-shadow: 0 0 3px 0 var(--color-primary);
}
div.section_heading_div.readings {
	padding-top:50px;
	padding-bottom: 50px;
	/*background-color: #dde094;*/
	background-color: #ffffff;
}
img.readings_img, img.readings_img {	
	max-width: 100px;
	max-height: 100px;
	/*aspect-ratio: 2/1;*/
	/*height: auto;*/
	/*object-fit: contain;*/
	flex-shrink: 1;
}
div.readings_div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 10px;
}
div.readings_card {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}

div.readings_left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*flex: 1;*/
}
div.readings_right {
	/*flex: 2;*/
	display: flex;
	flex-direction: column;
	/*cursor: pointer;*/
	transition: var(--transition-slow);

}
/*div.readings_right:hover {
	transform: translate(0, -2px);
}*/
div.readings_right_head {
	border-left: 5px solid var(--color-accent);
	padding-left: 20px;
	padding-bottom: 30px;
}
p.readings_author {
	font-weight: bold;
}
h4.readings_sub_tittle {
	border-left: 5px solid var(--color-accent);
	padding-left: 20px;
}
p.readings_paragraph {
	line-height: 1.5rem;
	border-left: 5px solid var(--color-accent);
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 30px;
}
div.readings_button_div {
	border-left: 5px solid var(--color-accent);
	padding-left: 20px;
}
button.readings_button {
	height: 39px;
	border:1px solid var(--color-accent);
	background-color: var(--color-accent);
	border-radius: 100px;
	width: 120px;
	cursor: pointer;
	/*font-family: 'Montserrat', sans-serif;*/
	font-size: 16px;
	font-weight: bold;
	transition: 0.3s ease;
}
button.readings_button:hover {
	transform: scale(1.1);
}


/* reviews section -------------------------------------------------------------------- */
img.background_bg {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -50;
	/*overflow: hidden;*/
	/*border: 2px solid red;*/
	/*margin: 20px;*/
}
div.background_bg-overlay {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	padding: 0;
	margin: 0;
	background: var(--color-bg);
	opacity: 0.5;
	z-index: -40;
	/*overflow: hidden;*/
	/*margin-left: -15px;*/

}


section.reviews {
	background: transparent;
	padding: var(--padding-sides-h);
	padding-bottom: 70px;
	box-shadow: 0 0px 3px 0 var(--color-primary);
	margin-bottom: 3px;
	/*border: 2px solid red;	*/

}
div.section_heading_div.reviews {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 15px;
	padding: var(--padding-sides-h);
	padding-top: 60px;
	padding-bottom: 50px;
	background:transparent;
	/*border: 1px solid red;*/
}
div.reviews_div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: 30px;
	align-items: center;
}
div.rating {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
div.stars_card {
	height: 20px;
	max-width: 100px;
	display: flex;
	/*flex-wrap: wrap;	*/
}
button.review_button {
	background-color: var(--color-accent);
	cursor: pointer;
	padding: 5px;
	border: none;
	border-radius: 5px;
	font-weight: bold;
	font-size: 14px;
}
button.review_button:hover {
	background-color: var(--color-accent-hover);
	transform: translate(0, -2px);
}
div.reviews_info_div {
	display: flex;
	flex-direction: row;
	padding: var(--padding-sides-h);
	gap: 20px;
	cursor: pointer;
	flex-wrap: wrap;
}
div.review_info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 5px;
	background-color: var(--color-surface);
	padding: 10px;
	border-radius: 7px;
	box-shadow: 0 0 5px 0 var(--color-accent);
	flex: 1;
}
img.reviewer_img {
	width: 50px;
	border-radius: 50%;
	/*border:1px solid red;*/
}
p.reviewer_name {
	font-weight: bold;
	text-align: center;
	width: 200px;
}
p.reviewer_review {
	text-align: center;
	padding-top: 20px;
}

/* one_on section ------------------------------------------------------------------------------- */

section.one_on {
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg);
	padding: var(--padding-sides-h);
	padding: 50px 20px 20px 20px;
	padding-bottom: 100px;
	justify-content: center;

}
div.one_on_main {
	background-color: var(--color-surface);
	margin: 20px;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 3px 0 var(--color-accent);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	column-gap: 10px;
	/*width: 100%;*/
	column-gap: 20px;

}
div.one_on_left {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}
img.author_img {
	width: 220px;
	border-radius: 7px;
	box-shadow: 0 0 5px 0 var(--color-accent);
}
div.one_on_right {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
	justify-content: flex-start;
}
div.event_dates_and_button {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
	justify-content: flex-start;
}
div.one_on_heading_div {
	background-color: var(--color-surface);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	row-gap: 5px;
	/*padding: var(--padding-sides-h);*/
	/*padding-top: 10px;*/
	padding-bottom: 20px;
}
h2.one_on_heading {
	padding-bottom: 20px;
}
div.chat_dates_main {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}
div.chat_dates {
	display: flex;
	flex-direction: row;
	gap: 20px;
	padding-top: 10px;
	flex-wrap: wrap;
}
div.chat_button_div {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
button.chat_button {
	height: 39px;
	border:1px solid var(--color-accent);
	background-color: var(--color-primary);
	border-radius: 100px;
	width: 120px;
	cursor: pointer;	
	font-size: 16px;
	font-weight: bold;
	align-self: flex-end;
	color: var(--color-surface);
	transition: var(--transition-slow);
}
button.chat_button:hover {
	background-color: var(--color-primary-hover);
	transform: translate(0, -2px);
}
button.chat_dates_btn {
	height: 25px;
	border:1px solid var(--color-primary);
	background-color: var(--color-accent);
	border-radius: 100px;
	width: 130px;
	cursor: pointer;	
	font-size: 12px;
	font-weight: bold;
	align-self: flex-end;
	color: var(--color-surface);
	transition: var(--transition-slow);
}
button.chat_dates_btn.open span.event_time {
	color: black;
}
button.chat_dates_btn.full span.event_time {
	color: darkgray;
}
button.chat_dates_btn:hover {
	background-color: var(--color-accent-hover);
	transform: translate(0, -2px);
}
button.chat_dates_btn.full {
	height: 25px;
	border:1px solid grey;
	background-color: var(--color-border);
	border-radius: 100px;
	width: 130px;
	cursor: not-allowed;	
	font-size: 12px;
	font-weight: bold;
	align-self: flex-end;
	color: darkgray;
	transition: var(--transition-slow);
}

button.chat_dates_btn.open.selected {
	background-color: green;	
}
/*button.chat_dates_btn.open.selected {
	background-color: green;	
}*/

/* small_info_section ------------------------------------------------------------------------- */

section.small_info_section {
	background-color: var(--color-secondary-hover);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: var(--padding-sides-h);
	padding-top: 40px;
	padding-bottom: 40px;
	color: var(--color-surface);
}
div.small_info_card {
	background-color: var(color-secondary-hover);
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: 10px;
	align-items: center;
	font-size: 16px;
}
div.small_info {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
}
div.small_info p {
	font-size: 12px;
}

/* footer section --------------------------------------------------------------------------------- */

section.footer {
	background-color: var(--color-primary-hover);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	column-gap: 10px;
	color: var(--color-surface);
	padding: var(--padding-sides-h);
	padding-top: 50px;
	padding-bottom: 50px;
	border-bottom: 2px solid grey;
}
div.footer_card {
	display: flex;
	flex-direction: column;
	flex-shrink: 1;
	row-gap: 20px;
	flex: 1;
	width: 100%;
}
div.footer_card.logo {
	flex: 2;
}
img.footer_logo {
	width: 100px;
}
div.footer_card a {
	color: var(--color-surface);
	font-size: 14px;
	transition: var(--transition-slow);
}
div.footer_card a:hover {
	color: var(--color-accent);
}
div.footer_card a img {
	height: 35px;
	margin: 0 10px 0 10px;
	cursor: pointer;
	transition: var(--transition-slow);
}
div.footer_card a img:hover {
	transform: translate(0, -2px);
}
h4.footer_card_h4 {
	font-size: 18px;
}
div.footer_card_icons_div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
h4.join_news {
	font-size: 18px;
	margin-top: 30px;
}
div.footer_logo_div {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 10px;
}
div.footer_logo_div h4 {
	font-size: 30px;
	color: var(--color-accent);
}
div.talk_to_us_div {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
	padding-top: 30px;
}
img.footer_payment_icon {
	height: 30px;
}




/* footer subscribe */
div.subscribe {
	height: 40px;
	/*border:1px solid grey;*/
	border-radius: 100px;
	width: 100%;
}
div.subscribe div {
	height: 40px;
	border:1px solid var(--color-accent);
	border-radius: 100px;
	width: 400px;
	background-color: var(--color-surface);
	display: flex;
	flex-direction: row;
	justify-content: space-between;	
}
div.subscribe div input {
	height: 38px;	
	border: none;
	border-radius: 100px;
	width: 305px;
	padding: 5px;
	font-size: 16px;
}
div.subscribe div button {
	height: 39px;
	border:1px solid var(--color-accent);
	background-color: var(--color-accent);
	border-radius: 100px;
	width: 87px;
	cursor: pointer;
}
div.subscribe div button:hover {
	background-color: var(--color-accent-hover);
}

/* end section ---------------------------------------------------------------------------- */

section.end_section {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: var(--color-primary-hover);
	padding: var(--padding-sides-h);
	padding-top: 15px;
	padding-bottom: 50px;
	color: var(--color-surface);
}
div.end_section_left {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 10px;
}
img.verified_icon {
	height: 30px;

}

/* DROP DOWNS AND NAV RESPONSE #################################################################### */

img.middle_nav_menu_icon {
	display: none;
}
div.books_drop_down {
	box-shadow: 0 0 3px 0 var(--color-primary);
	background-color: var(--color-border);
	border-radius: 3px;
	position: absolute;
	top: 135px;
	display: none;
	flex-direction: column;
	row-gap: 15px;
	padding: 20px;	
	padding-top: 15px;
	transition: var(--transition-slow);
}
div.books_drop_down.fixed {
	top: 30px;
}

div.pages_drop_down {
	box-shadow: 0 0 3px 0 var(--color-primary);
	background-color: var(--color-border);
	border-radius: 3px;
	position: absolute;
	top: 135px;
	display: none;
	flex-direction: column;
	row-gap: 15px;
	padding: 20px;	
	padding-top: 15px;
	transition: var(--transition-slow);
}
div.pages_drop_down.fixed {
	top: 30px;
}

div.books_drop_down.view {
	display: flex;
	transition: var(--transition-slow);
}
div.pages_drop_down.view {
	display: flex;
	transition: var(--transition-slow);
}

div.pages_drop_down a, div.books_drop_down a {
	font-weight: normal;
	transition: var(--transition-slow);
}
div.pages_drop_down a:hover, div.books_drop_down a:hover {
	color: var(--color-accent);
}


/* CHATS AREA ############################################################################## */

div.chats_main_div {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	position: fixed;
	bottom: 45px;
	right: 10px;
	width: 350px;
	height: 450px;
	scroll-behavior: smooth;
	background-color: var(--color-bg);
	box-shadow: 0 0 7px 0 var(--color-primary);
	padding: 10px;
	border-radius: 10px;
	z-index: 100;
}
div.chats_main_div.hidden {
	display: none;
}
div.chats_head {
	display: flex;
	flex-direction: row;
	column-gap: 10px;
	justify-content: flex-start;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
}
img.chat_logo {
	height: 30px;
	width: 30px;
}
/*---------*/
div.chats_body {
	display: flex;
	flex-direction: column-reverse;
	row-gap: 20px;
	padding: 10px 0;
	height: 400px;
	overflow-y: auto;
	padding: 5px;
}
div.support {
	background-color: var(--color-surface-alt);
	padding: 5px;
	border-radius: 10px;
	box-shadow: 0 0 5px 0 var(--color-primary);
	width: 85%;
	align-self: flex-start;
}
div.client {
	background-color: var(--color-secondary);
	padding: 5px;
	/*margin: 10px;*/
	border-radius: 10px;
	box-shadow: 0 0 5px 0 var(--color-primary);
	width: 85%;
	align-self: flex-end;
	color: var(--color-surface);
}
div.message_status_date_div {
	margin-bottom: 10px;
	display: flex;
	flex-direction: row;
	column-gap: 20px;
}
div.add_input_div_new_msg {
	align-self: flex-end;
	display: flex;	
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	row-gap: 10px;
	width: 100%;
	/*flex-wrap: wrap;*/
	min-height: ;	
}
textarea.add_input_new_msg {
	width: 85%;
	border-radius: 10px;
	border: 1px solid var(--color-primary);
	font-size: 17px;
	padding: 5px 10px;
}
button.add_main_btn {
	padding: 5px 5px;
	height: 30px;
	background-color: var(--color-secondary);
	border-radius: 10px;
	border: none;
	/*border: 1px solid var(--color-primary);*/
	box-shadow: 0 0px 1px 0 var(--color-primary);
	font-size: 18px;
	margin-top: 10px;
	/*font-weight: bold;*/
	color: var(--color-surface);
	cursor: pointer;
	transition: 0.3s ease;
}
button.add_main_btn:hover {
	transform: scale(1.1);
}



div.chats {
	display: flex;
	flex-direction: row;
	column-gap: 20px;
	position: fixed;
	bottom: 5px;
	right: 5px;
	/*height: 200px;
	width: 200px;*/
	z-index: 150;

}
div.chats img {
	height: 40px;
	cursor: pointer;	
}
div.chats img:hover {
	transform: scale(1.1);
}
div.chats_notif {
	background-color: brown;
	padding: 0;
	box-shadow: 0 0 5px 0 var(--color-primary);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	/*font-weight: bold;*/
	opacity: 0.9;
	position: absolute;
	bottom: 15px;
	right: -5px;
	color: var(--color-surface);
	
}


/* SESSION RESPONSES ######################################################### */

div.session_response_div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 90%;
}
div.session_response_div.hidden {
	display: none;
}
div.success_session_response_div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 0px;
	background-color: var(--color-success);
	width: 70%;
	padding: 5px 5px 15px 5px;
	border-radius: 10px;
	color: white;
	font-weight: bold;
	box-shadow: 0 0 7px 0 var(--color-primary);
}
div.error_session_response_div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 0px;
	background-color: var(--color-warning);
	width: 70%;
	padding: 5px 5px 15px 5px;
	border-radius: 10px;
	color: white;
	font-weight: bold;
	box-shadow: 0 0 7px 0 var(--color-primary);
}
div.session_response_close_btn_div {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	width: 100%;
	padding: 0;
	margin: 0;
}
button.session_response_close_btn {
	background-color: brown;
	padding: 2px 5px;
	font-size: 16px;
	border-radius: 5px;
	border: none;
	color: white;
	font-weight: bold;
	transition: 0.3s ease;
	cursor: pointer;
}
button.session_response_close_btn:hover {
	transform: scale(1.05);
}






/* MEDIA QUERY  ############################################################################### */

/* 920 ======================================================================== */

@media (max-width: 920px) {
	section.footer {
		flex-wrap: wrap;
		row-gap: 20px;		
	}
	div.footer_card, div.talk_to_us_div {
		row-gap: 5px;
	}


}

/* 850 ======================================================================== */
@media (max-width: 850px) {
	div.chat_dates {
		flex-wrap: wrap;
		row-gap: 5px;
	}
	button.chat_button {
		flex-shrink: 0;
	}
	img.brand_logo {
		height: 50px;
	}


div.search {
	height: 30px;
	/*border:1px solid grey;*/
	border-radius: 100px;
	width: 260px;
}
div.search div {
	height: 30px;
	border:1px solid var(--color-accent);
	border-radius: 100px;
	width: 260px;
	background-color: var(--color-surface);
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	
}
div.search div input {
	height: 28px;	
	border: none;
	border-radius: 100px;
	width: 185px;
	padding: 5px;
	font-size: 16px;
}
div.search div button {
	height: 29px;
	border:1px solid var(--color-accent);
	background-color: var(--color-accent);
	border-radius: 100px;
	width: 70px;
	cursor: pointer;
}
div.brand a {
	font-size: 1.5rem;
}
img.readings_img {
	width: 200px;
	aspect-ratio: 2/1;
}



}

/* 700 ================================================================================= */

@media (max-width: 700px) {
	.top_nav {
		display: none;
	}
	div.books_drop_down, div.pages_drop_down {
		top: 100px;
	}

	section.hero_section{
		justify-content: space-between;
	}
	div.hero_text_div {
		/*flex-basis: 80%;*/

	}
	div.image_text_div {
		/*flex-basis: 20%;*/
	}

	img.hero_image {
		height: auto;
		width: 60%;
	}
	div.one_on_main {
		flex-wrap: wrap;
		row-gap: 20px;
		justify-content: center;
	}
	div.one_on_right {
		padding-top: 20px;
		align-items: center;
		align-content: center;
		justify-content: center;
	}
	div.one_on_left {
		display: flex;
		justify-content: center;
	}
	img.author_img {
	max-width: 80%;
}
div.search {
		display: none;
	}

}

/* 650 =========================================================================== */

@media (max-width: 650px) {
	div.accountname_div.orders {
		display: none;
	}

	div.account.logedin {
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	/*border: 1px solid red;*/
	padding: 0;
	/*padding: 5px;*/
}
div.accountname_div.accounts {
	/*border: 1px solid black;*/
}
img.middle_nav_menu_icon {
	display: block;
	position: relative;
	top: 10px;
	right: 5px;
	margin-left: 25px;
	}
div.cart_notif {	
	top: -10px;
	right: -20px;
}
div.cart_notif_logged_out {	
	top: -35px;
	right: -20px;
}
.middle_nav {	
	height: 80px;
	padding: 5px;
}



	div.search {
		display: none;
	}
	div.bottom_nav {
		display: none;
	}
	section.small_info_section {
		flex-wrap: wrap;
		row-gap: 20px;
		justify-content: center;
		column-gap: 20px;
	}
	div.brand a {
		font-size: 1.2rem;
		text-shadow: none;
	}
	div.account img {
	height: 20px;
	transition: 0.3s ease;	
	}
	div.account img:hover {
	transform: scale(1.08);
	}
	
	section.hero_section {
	flex-wrap: wrap;
	align-content: center;
	row-gap: 20px;
	justify-content: center;
	}

	div.hero_text_div {	
	row-gap: 20px;	
	}


h1.hero_text {
	/*font-family: 'Montserrat', sans-serif;*/
	font-weight: 900;
	font-size: 30px;
	text-align: center;
}
p.hero_text {
	/*font-family: 'Montserrat', sans-serif;*/
	font-weight: 600;
	font-size: 16px;
	text-align: center;

}
div.hero_image_div {
		text-align: center;
	}
img.hero_image {
	max-height: 500px;
}






	div.readings_div {
		flex-direction: column;
		justify-content: center;		
		gap: 70px;
	}
	div.readings_one {
		display: flex;
		flex-direction: column;
		
		/*align-content: center;*/
	}
	div.reviews_div {
	
	flex-direction: column;
	justify-content: center;
	row-gap: 10px;	
	}
	div.section_heading_div.reviews {
		text-align: center;
	}


	div.search {
	height: 30px;
	/*border:1px solid grey;*/
	border-radius: 100px;
	width: 260px;
}
div.subscribe div {
	height: 30px;
	border:1px solid var(--color-accent);
	border-radius: 100px;
	width: 260px;
	background-color: var(--color-surface);
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	
}
div.subscribe div input {
	height: 28px;	
	border: none;
	border-radius: 100px;
	width: 185px;
	padding: 5px;
	font-size: 16px;
}
div.subscribe div button {
	height: 29px;
	border:1px solid var(--color-accent);
	background-color: var(--color-accent);
	border-radius: 100px;
	width: 70px;
	cursor: pointer;
}
section.end_section {
	flex-wrap: wrap;
}






}