@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary-button: #2B2B2B;
  --primary-button-color: #fff;
  --theme-button-color: #fff;

  --primary-color: #2B2B2B;
  --secondary-color: #C2AA78;
  --gray-color: #B1B1B1;
  --red-color: #D83030;
  --black-color: #000000;
  --white-color: #FFFFFF;
  --modal-white: #FFFFFF;
  --loader-color: rgba(255,255,255,1);

  --light-gray: #F9F9F9;
}

[data-theme="dark"]{ 
  --primary-button: #C2AA78; 
  
  --light-gray: #3e3e3e;
  --gray-color: #999;
  --dark-white-color: #ffffff;
  --dark-black-color: #000000;
  --primary-color: #ffffff;  
  --white-color: #000000;
  --theme-color: #C2AA78;
  --modal-white: #2B2B2B;
  --black-color: #FFFFFF;
  --loader-color: rgba(0,0,0,1);
}


body { background: var(--white-color); position: relative; padding: 0; margin: 0; font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.42; color: var(--primary-color); } 
img{ max-width: 100%; }

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { font-weight: 600; color: var(--theme-color); }

a{ color: inherit; }
/* a:hover{ color: #2B2B2B; text-decoration: none;} */
a:hover,
a:focus{ text-decoration: none; color: inherit; }

a, .btn { text-decoration: none; -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
.btn:focus { box-shadow: 0 0 0 0.2rem rgb(43 43 43 / 24%); /* box-shadow: 0 0 0 0.2rem rgb(55 52 53 / 24%); */ }
.btn:hover { color: inherit; }

.iti { width: 100%; }
.iti__country-list { background: var(--white-color); }
.form-group label{  color: var(--black-color); margin: 0 0 3px; font-size: 14px;}
.form-control, .form-select { color: var(--dark-white-color); background-color: transparent; border-color: var(--gray-color); outline: none; box-shadow: none; font-size: 14px; border-radius: 50px; height: 43px; padding: 0 20px; font-weight: 500; } 
.form-control:focus, .form-select:focus{background-color: var(--dark-black-color); color: var(--dark-white-color);}

.input-symbol { position: relative; }
.input-symbol .img{ position: absolute;left: 15px; top: 12px; font-size: 20px; line-height: 0;}
.input-symbol .show-pass { position: absolute; right: 15px; top: 9px; font-size: 20px; cursor: pointer; }
.input-symbol .form-control{ padding-left: 50px; }


textarea.form-control { resize: none; height: 100px; border-radius: 15px; padding: 10px 15px;} 
.form-control:focus, .form-select:focus{ box-shadow: none;  border-color: var(--primary-color);  } 

.primary-btn { text-transform: uppercase;background: var(--primary-button); color: var(--primary-button-color); padding: 8px 30px; border-radius: 40px; border: 1px solid var(--primary-button); outline: none; font-weight: 600; }
.primary-btn:hover, .primary-btn:focus{ color: var(--primary-button-color); }

.secondary-btn { text-transform: uppercase; /* background: var(--white-color); */ color: var(--primary-color); padding: 8px 30px; border-radius: 40px; border: 1px solid var(--primary-color); outline: none; font-weight: 600;  }
.secondary-btn:hover, .secondary-btn:focus{ color: var(--primary-color); }
.theme-color { color: var(--primary-color); }

.theme-btn { text-transform: uppercase;background: var(--secondary-color); color: var(--theme-button-color); padding: 8px 30px; border-radius: 40px; border: 1px solid var(--secondary-color); outline: none; font-weight: 600; }
.theme-btn:hover, .theme-btn:focus{ color: var(--theme-button-color); }
.required-star { color: var(--red-color); }
.link-color,.link-color:hover { color: var(--secondary-color); }

.text-muted { color: var(--gray-color) !important; }


/* ----------------------------------
 Bootstrap Fix: IE10
 in Windows 8 & Windows Phone 8
 ---------------------------------- */
@-webkit-viewport { width: device-width; } 
@-moz-viewport { width: device-width; } 
@-ms-viewport { width: device-width; } 
@-o-viewport { width: device-width; } 
@viewport { width: device-width; } 


/* ----------------------------------
 Input Light
 ---------------------------------- */
/* .form-control.form-control-light { color: #B8B8B8;  }  */
.form-control.form-control-light:-moz-placeholder { color: #B8B8B8; } 
.form-control.form-control-light::-moz-placeholder { color: #B8B8B8; } 
.form-control.form-control-light:-ms-input-placeholder { color: #B8B8B8; } 
.form-control.form-control-light::-webkit-input-placeholder { color: #B8B8B8; } 

/* ====== Page Loader Animation ====== */
.loader { background: var(--loader-color); position: fixed; z-index: 1200; box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; transition: opacity 1s linear; } 
.fade-out.loader { opacity: 0; } 
.loader .loader-inner { display: block; width: 70px; }
.loader .loader-inner lottie-player{width: 70px; }

/* Load More */
.load-more { padding: 50px 30px 0; text-align: center; }
.load-more img{ max-width: 50px;}

/* Page Title */
.page-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px;}
.page-title .read-now{ display: flex; align-items: center; }
.page-title h1{ margin: 0; font-size: 32px; }

.page-title .read-arrow { background: var(--primary-color); border-radius: 30px; width: 30px; height: 30px; display: flex;align-items: center; justify-content: center;color: var(--white-color); }

/* Section Title */
.section-title { margin: 20px 0; display: flex; align-items: center; justify-content: space-between; }
.section-title h2{ font-size: 26px; font-weight: 700; margin: 0; }
.section-title h2 span{ font-weight: 300; }
.section-title a{ color: var(--secondary-color); }

/* filter title */
.filter-title { margin: 15px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-color); padding: 0 0 10px; }
.filter-title h2{ font-size: 26px; font-weight: 400; margin: 0; }
.filter-title a{ color: var(--secondary-color); }

/*=== Slick Slider Common Css ===*/
.slick-dots { padding: 0; margin: 0;  list-style: none; text-align: center;}
.slick-dots li { display: inline-block; padding: 0 3px;}
.slick-dots li button{ padding: 0; margin: 0; border: 0; line-height: normal; font-size: 0; background: var(--gray-color); height: 5px; width: 5px; border-radius: 5px; outline: none; cursor: pointer; -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
.slick-dots li.slick-active button{ background: var(--secondary-color); width: 15px; }

 
/* Comman Check box */
.common-check .checkbox { font-weight: 400; display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height: 1.4; }
.common-check .checkbox input { position: absolute; cursor: pointer; opacity: 0; height: 20px; width: 20px; top: 0px; left: 0; }
.common-check .checkmark {position: absolute;top: 0px;left: 0;height: 20px;width: 20px;background-color: transparent;border: 1px solid var(--secondary-color); border-radius: 4px; }
.common-check .checkbox input:checked ~ .checkmark {  border: solid 1px var(--secondary-color); background: var(--secondary-color); }
.common-check .checkmark::after {content: ""; position: absolute;display: none;}
.common-check .checkbox input:checked ~ .checkmark::after {display: block;}
.common-check .checkbox .checkmark::after {left: 7px; top: 2px; width: 5px; height: 11px; border: solid var(--primary-color); border-width: 0 1px 1px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* Comman Radio Button */
.radio-box { font-weight: 400; display: inline-block; position: relative; padding-left: 28px; margin-bottom: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; line-height: 20px; }
.radio-box .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: transparent; border: 1px solid var(--secondary-color); border-radius: 50%; }
.radio-box input:checked~.checkmark { background-color: transparent;    }
.radio-box input:checked~.checkmark::after { display: block; }
.radio-box .checkmark::after { content: ""; position: absolute; display: none; }
.radio-box .checkmark::after { top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--secondary-color); }
.radio-box input { position: absolute; opacity: 0; cursor: pointer; }

/* Modal Comman Css */
.modal-header .close { outline: none; opacity: 1; margin: 0; padding: 0; font-weight: 300; font-size: 32px; position: absolute;  right: 10px;  top: 4px; color: var(--primary-color); z-index: 1000; background: none; border: none; line-height: 30px; }
.modal-header .close span{  }
.modal .modal-header{ padding: 8px 15px; border-bottom: 0; }
.modal .modal-content { border: none; border-radius: 10px; box-shadow: none; background: var(--modal-white); }
.modal .custom-footer { padding: 15px; }
.modal-custom-footer .btn{ margin: 0 5px;  }

/* Delete Modal */
.delete-confirm .modal-dialog { color: var(--primary-color); max-width: 400px; margin: 0 auto; padding: 0 15px; }
.delete-confirm .modal-content { border: none; text-align: center; }
.delete-confirm .modal-header{ border: 0; }
.delete-confirm .modal-body .icon-box{  }
.delete-confirm .modal-body .icon-box span{ border: 2px solid #f6253b; height: 70px; width: 70px;display: flex; border-radius: 50%; justify-content: center; margin: 0 auto; font-size: 55px; font-weight: 100; color: #f6253b; }
.delete-confirm .modal-body h4{ margin: 20px 0; color: var(--theme-color); }
.delete-confirm .modal-body .button-list { padding: 20px 0 10px; display: flex; justify-content: center; align-items: center; }
.delete-confirm .modal-body .button-list .btn{ margin: 0 5px; width: 100%;}


/* Custom Tab  */
.custom-tab-main .tab-content{ padding: 20px 0 0; }
.custom-tab-main .custom-nav-tabs {  border: none;  }
.custom-tab-main .custom-nav-tabs .nav-link{ padding: 10px 0px; position: relative; border: none;  border-radius: 0; transition: color .2s ease-out; color: var(--gray-color); font-weight: 400; }
.custom-tab-main .custom-nav-tabs .nav-item { margin: 0 40px 0 0; }
.custom-tab-main .custom-nav-tabs .nav-link.active { color: var(--secondary-color); position: relative; }
.custom-tab-main .custom-nav-tabs .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; background: var(--secondary-color); height: 2px; bottom: -1px;  }
 
/* ====== Favourite Icon Checkbox Css ====== */
.favourite-mark{ }
.favourite-mark label{position: relative; width: 20px; height: 20px; display: block; margin: 3px 0 0; cursor: pointer; }
.favourite-mark input{position: absolute; opacity: 0; }
.favourite-mark span::before{background: url('../images/fav-unfill.svg') no-repeat; background-size: 100%; position: absolute; left: 0; top: 0; content: ""; width: 20px; height: 20px;  }
.favourite-mark input:checked ~ span::before{background: url('../images/fav-fill.svg') no-repeat; background-size: 100%; }

/* ====== Dark Light Mode Css ====== */
.dark-light-mode{/*  background: #fff; padding: 10px 12px; position: fixed; right: 0; top: 50px; border-radius: 10px 0 0 10px; box-shadow: 0px 0px 3px 0px #444;  */}
.dark-light-mode{ position: relative; }
.dark-light-mode::after{ content: ""; position: absolute; width: 1px; height: 20px; left: -15px; top: 0; background: var(--black-color); }
.dark-light-mode label{position: relative; width: 18px; height: 18px; display: block; margin: 0; cursor: pointer; }
.dark-light-mode input{position: absolute; opacity: 0; }
.dark-light-mode span::before{ content: "\e920";  font-family: 'icomoon'; position: absolute; left: 0; top: 0; color: #ff6a00; font-size: 26px; }
.dark-light-mode input:checked ~ span::before{ content: "\f186"; font-family: "Font Awesome 5 Free"; position: absolute; color: #fff; font-size: 20px; }

/* ====== BookMark Css ====== */
.bookmark-mark{ }
.bookmark-mark label{position: relative; width: 20px; height: 23px; display: block; margin: 3px 0 0; cursor: pointer; }
.bookmark-mark input{position: absolute; opacity: 0; }
.bookmark-mark span::before{content: "\e903"; color: var(--priamry-color); position: absolute; left: 0; top: 0; font-family: 'icomoon'; font-size: 20px; line-height: normal; }
.bookmark-mark input:checked ~ span::before{content: "\e902";  font-family: 'icomoon'; }

/* ====== BookMark white Css ====== */
.bookmark-mark-white {  }
.bookmark-mark-white label{position: relative; width: 20px; height: 23px; display: block; margin: 3px 0 0; cursor: pointer; }
.bookmark-mark-white input{position: absolute; opacity: 0; }
.bookmark-mark-white span::before{ color: #fff; font-size: 20px; position: absolute; left: 0; top: 0; content: "\e903";  font-family: 'icomoon'; width: 20px; height: 23px;  }
.bookmark-mark-white input:checked ~ span::before{ content: "\e902";  font-family: 'icomoon'; }
 
/* Data Not Found */
.no-data-found { padding: 80px 0;  display: flex; align-items: center; justify-content: center; }
.no-data-found .box{ max-width: 380px; margin: 0 auto; text-align: center; }
.no-data-found .box img{ margin: 0 0 30px; max-width: 250px; }

/* Custom Scrolling Css */
.custom-scroll-div { scrollbar-width: thin; scrollbar-color: #c3c3c3 #fff; }
.custom-scroll-div::-webkit-scrollbar { width: 8px; }
.custom-scroll-div::-webkit-scrollbar-track { background-color: #f1f1f1; /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */ }
.custom-scroll-div::-webkit-scrollbar-thumb { background-color: #939393; }

/* Tag List */
.tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.tag-list li { padding: 5px; }
.tag-list li span{ display: inline-block; background: var(--secondary-color); padding: 5px 15px; border-radius: 40px; font-size: 14px; }


/* Book Box */
.book-box { margin: 15px 0; }
.book-box .img { position: relative; }
.book-box .img img{ border-radius: 6px;   object-fit: cover; }
.book-box .img .favourite-mark{position: absolute; top: 10px; right: 10px;  background: var(--white-color); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 3px 0px #e2e2e2; }
.book-box .detail .inner-head{ display: flex; justify-content: space-between; padding: 10px 0 0;   }
.book-box .detail .inner-head .text{display: flex; justify-content: space-between; overflow: hidden; flex-direction: column; }
.book-box .detail .inner-head .text h5{ font-size: 16px; margin: 0; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.book-box .detail .inner-head .text p{ font-size: 13px; margin: 0; }
.book-box .detail .inner-head .member{ flex: 0 0 auto; }
.book-box .detail .dropdown-menu { background: #E3E3E3; min-width: 110px;  gap: 10px; box-shadow: 0px 0px 0px 2px #e2e2e2; padding: 10px; border: 0; border-radius: 10px;  margin: 0;  }
.book-box .detail .dropdown-menu li { padding: 5px 0; display: inline-block; }
.book-box .detail .dropdown-menu li a{  }

 

.book-box.list-view { display: flex; align-items: center; }
.book-box.list-view .img{ flex: 0 0 auto;  }
.book-box.list-view .img img{ width: 100px; height: 115px; object-fit: cover;  }
.book-box.list-view .detail { flex: 1 1 auto; padding: 0 0 0 15px; }
.book-box.list-view .detail .content{ font-size: 14px; margin: 7px 0 0; }
.book-box.list-view .detail .content a{ color: var(--secondary-color); text-decoration: underline; margin: 0 0 0 5px; }

/* News Box  */
.news-box { display: flex; padding: 20px 0; border-bottom: 1px solid var(--gray-color); }
.news-box .img{ flex: 0 0 auto; width: 33%; }
.news-box .img img{ object-fit: cover; width: 100%; height: 150px; border-radius: 5px; }
.news-box .detail{ padding: 0 0 0 15px; flex: 1 1 auto; overflow: hidden;}
.news-box .detail h5{ font-size: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 45px; margin: 0 0 5px; }
.news-box .detail p{  margin: 0 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 40px; font-size: 14px; }

/* Museum Box */
.museum-box { margin: 10px 0; }
.museum-box .img{ position: relative; margin: 0 0 10px; overflow: hidden; border-radius: 10px; }
.museum-box .img img{ width: 100%; height: 208px; object-fit: cover; }
.museum-box .img .bookmark-mark-white{ position: absolute;  z-index: 100;right: 20px; bottom: 20px; }
/* .museum-box .img::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 50%, #565656); } */
.museum-box .img h3{ position: absolute; left: 15px; bottom: 5px; color: #fff; font-weight: 300; z-index: 10;font-weight: bold; }
.museum-box .detail h4{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.museum-box .detail p{ margin: 0 0 5px; display: -webkit-box; height: 44px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.museum-box .detail .readmore{ font-size: 14px; }

/* File Upload */
.common-upload { }
.common-upload .upload-img { border: 2px dashed #D6D6D6; border-radius: 6px; padding: 10px; text-align: center; height: 100px; display: flex; align-items: center; }
.common-upload .upload-img .file-input-input { width: 0.1px; height: 0.1px;  opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.common-upload .upload-img .file-input-label { margin: 0; cursor: pointer; width: 100%; display: flex; align-items: center; padding: 0px 5px; flex-direction: column; text-align: center; font-size: 12px;    color: #9f9f9f; }
.common-upload .upload-img .file-input-label img{ width: 30px; margin: 0 0 5px; }


 
section { padding: 50px 0; }
/* Authentication From */
section.auth-page .left-side-img{ background: url('../images/background1.png') no-repeat 100% 100%; text-align: center; padding: 30px 20px 0; border-radius: 30px; }
section.auth-page .left-side-img img{ max-width: 340px; margin: 0 auto; }
section.auth-page .auth-form .forgot-password { font-weight: 500; font-size: 13px; text-align: right; margin: 0 0 20px;}
section.auth-page .auth-form .forgot-password a{  }
section.auth-page .auth-form { padding: 50px 30px; position: relative;  }
section.auth-page .auth-form .title{ margin: 0 0 30px; }
section.auth-page .auth-form .title h3{ text-transform: uppercase; font-size: 22px; }
section.auth-page .auth-form .title p{ font-size: 14px; font-weight: 400; color: var(--gray-color); }

section.auth-page .auth-form .signin-with .or{ text-align: center; border-bottom: 1px solid var(--primary-color); margin: 20px 0 30px; }
section.auth-page .auth-form .signin-with .or span{ display: inline-block; position: relative; top: 10px; background: var(--white-color); padding: 0 9px; }
section.auth-page .auth-form .signin-with ul.social{ padding: 0; margin: 20px 0; list-style: none; display: flex; align-items: center; justify-content: center; }
section.auth-page .auth-form .signin-with ul.social li { padding: 0 10px; }
section.auth-page .auth-form .signin-with ul.social li a{ width: 40px; height: 40px; border: 1px solid var(--primary-color); border-radius: 100%; display: flex; align-items: center; justify-content: center; }
section.auth-page .auth-form .signin-with ul.social li a:hover{ background: var(--secondary-color); border-color: var(--secondary-color);  }
section.auth-page .auth-form .signin-with .have-account { color: var(--gray-color); text-align: center; }
section.auth-page .auth-form .signin-with .have-account a{ color: var(--primary-color); }
section.auth-page .auth-form .img-head{ margin: 0 0 30px; text-align: center; }
section.auth-page .auth-form .form-group { margin: 0 0 33px !important; }

section.auth-page .auth-form .form-group label.error{ color: red; font-size: 12px; position: absolute; top: 100%; display: block; width: 100%; }

section.auth-page .successfull{ background: url('../images/background1.png') no-repeat; background-size: cover;  border-radius: 20px; padding: 50px; text-align: center; }
section.auth-page .successfull img, section.auth-page .successfull h3{ margin: 0 0 20px; }


/* ====== Header ====== */
header { padding: 5px 0; position: fixed; left: 0; right: 0; z-index: 999; box-shadow: 0 4px 12px 0 rgb(0 0 0 / 5%); background: var(--white-color); }
header a{ transition: none; }
header .dropdown-toggle::after{ display: none; }

header .navbar-light .navbar-toggler { border: none; outline: none; box-shadow: none; }
header .navbar-brand{   display: flex; align-items: center; }
header .navbar-brand .mobile-hide{ max-width: 250px; }
header .right-side { display: flex; align-items: center; margin-left: auto; } 

header .navbar .navbar-toggler-icon { width: 24px; height: 17px; background-image: none; position: relative; border-bottom: 1px solid var(--primary-color); transition: all 300ms linear; }
header .navbar .navbar-toggler-icon::after, 
header .navbar .navbar-toggler-icon::before{ width: 24px; position: absolute; height: 1px;  background-color: var(--primary-color); top: 0; left: 0; content: ''; z-index: 2; transition: all 300ms linear; }
header .navbar .navbar-toggler-icon::after{ top: 8px; }
header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { transform: rotate(45deg); }
header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: translateY(8px) rotate(-45deg); }
header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { border-color: transparent; }
header .search-view { position: absolute; left: 0px; right: 0px; top: 60px;  }
header .search-view .inner-search{ background: var(--secondary-color); padding: 15px; }
header .search-view .btn{ width: 18px; position: absolute; left: 30px; top: 22px; background: none;outline: none; padding: 0; color: #bdbdbd;  box-shadow: none; }
header .search-view .form-control{ background: var(--white-color); border: 1px solid var(--gray-color); border-radius: 6px;  color: var(--primary-color);  height: 40px;  padding-left: 50px; }


header .notification { position: relative;  }
header .notification span{ position: absolute; top: 0px; right: 10px; background: #E31E24; width: 6px; height: 6px; border-radius: 50%; }

header .navbar-nav { display: flex; align-items: center; }
header .navbar-nav li { padding: 8px 15px; }

header .mmenu-icon { display: flex; align-items: center; margin: 0px 0px 0px 20px;}
header .menu-icon ul{ padding: 0; margin: 0; display: flex; list-style: none; }
header .menu-icon ul li{ padding: 0 15px; position: relative; line-height: 20px; }

header .menu-icon .dropdown { margin: 0 0px 0 0px; }
header .menu-icon .dropdown .dropdown-toggle { background: none;   border: 0; outline: none; font-size: 17px;display: flex;  }
header .menu-icon .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0px); }
header .menu-icon .dropdown .dropdown-menu { margin: 0;  padding: 10px 0; width: 200px; right: 0; left: initial; border: 0; border-radius: 0; box-shadow: 0px 0px 4px 0px #adadad; background-clip: unset; transform: translateY(20px); opacity: 0; display: unset; visibility: hidden;}
header .menu-icon .dropdown .dropdown-menu .profile { display: flex; align-items: center; border-bottom: 1px solid var(--gray-color); padding: 0 10px 10px; }
header .menu-icon .dropdown .dropdown-menu .profile img{ width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
header .menu-icon .dropdown .dropdown-menu .profile .text { margin-left: 10px; }
header .menu-icon .dropdown .dropdown-menu .profile .text h5{ word-break: break-all; font-size: 13px; margin: 0 0 3px; color: var(--primary-color); }
header .menu-icon .dropdown .dropdown-menu .profile .text p{ font-size: 12px; margin: 0; color: var(--primary-color); }
header .menu-icon .dropdown .dropdown-menu .login{ text-align: center; margin: 10px 0; }
header .menu-icon .dropdown .dropdown-menu .login a{ font-size: 13px; border-radius: 30px; transition: none; color: var(--white-color); background: var(--primary-color); padding: 10px 20px; display: inline-block; }
header .menu-icon .dropdown .dropdown-menu .menu{ list-style-type: none; padding: 0; margin: 0; display: block; }
header .menu-icon .dropdown .dropdown-menu .menu li { padding: 0; }
header .menu-icon .dropdown .dropdown-menu .menu li a{ text-align: left; transition: none; font-size: 14px; padding: 8px 15px; color: var(--primary-color); display: inline-block; width: 100%;}
header .menu-icon .dropdown .dropdown-menu .menu li a i{ text-align: center; margin-right: 10px; min-width: 22px;display: inline-block; vertical-align: middle; font-size: 18px; color: var(--secondary-color); }
header .menu-icon .dropdown .dropdown-menu .menu li a img{ margin-right: 10px; max-width: 22px; }
header .menu-icon .dropdown .dropdown-menu .menu li a .icon-suggestion-box{ font-size: 22px; }
header .menu-icon .dropdown .dropdown-menu .menu li a .icon-bookmark-fill{ font-size: 14px; }
header .menu-icon .dropdown .dropdown-menu .menu li a:hover{ background: rgb(194 170 120 / 30%); }

/* header .navbar .dropdown {position:static;} */
header .navbar .dropdown-menu { width:100%; left:0; right:0; top:100%; display:block; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s linear; }
header .navbar .dropdown:hover .dropdown-menu, 
header .navbar .dropdown .dropdown-menu:hover { display:block; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s linear; }
header .navbar .dropdown-menu { border: 1px solid rgba(0,0,0,.15); background-color: var(--white-color);}



/* ====== Home Banner ======*/
.main-wapper { padding: 58px 0 0;  }
section.home-banner { padding: 0px; background: var(--white-color); }
section.home-banner .single-img {padding: 50px 0;text-align: center; }
section.home-banner .single-img img{ max-width: 500px; margin: 0 auto;}
section.home-banner .banner-slider{ padding: 80px 0 0; }
section.home-banner .item { padding: 50px 140px; }
section.home-banner .home-banner-img img{ width: 100%; object-fit: cover; }
section.home-banner .banner-slider img{ width: 100%; -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear;}
section.home-banner .banner-slider .slick-slide.slick-current, 
section.home-banner .banner-slider .slick-slide.slick-center img{ transform: scale(1.3);  }
section.home-banner .banner-slider .slick-dots { position: absolute; left: 0; right: 0; }


/*========== Breadcrum ========*/
section.inner-page-banner { padding: 20px 0;  }
section.inner-page-banner .breadcrumb{  background: none;  padding: 0;  font-size: 13px; margin: 0; }
section.inner-page-banner .breadcrumb .breadcrumb-item + .breadcrumb-item::before{   }
section.inner-page-banner .breadcrumb .breadcrumb-item a{ color: var(--gray-color); }
section.inner-page-banner .breadcrumb .breadcrumb-item.active{ font-weight: 500; color: var(--primary-color); }


/*========= Membership =======*/
section.choose-plan { padding: 50px 0 80px; }
section.choose-plan .member-box { margin: 20px 0; }
section.choose-plan .member-box .top-box{ position: relative; color: #fff; text-align: center; margin: 0 0 20px; background: #2B2B2B; padding: 30px 20px; border-radius: 10px; }
section.choose-plan .member-box .top-box img{ max-width: 200px; margin: 0 auto;  }
section.choose-plan .member-box .top-box h5{ margin: 20px 0; height: 50px; color: var(--dark-white-color); }
section.choose-plan .member-box .top-box.red{ background: #D83030; }
section.choose-plan .member-box .top-box .brouch img{ position: absolute; top: 10px; left: 10px; width: 40px; }

/* section.choose-plan .member-box .top-box.red::after{ content: ""; position: absolute; left: 15px;  top: 15px; background: url('../images/red-member.png') no-repeat; background-size: 100%; height: 90px; width: 37px; } */

section.choose-plan .subscription-list { background: #fff; color: #000; padding: 20px 0px; overflow: hidden; box-shadow: 0px 3px 10px 0px rgb(66 66 66 / 50%); border-radius: 10px;  }
section.choose-plan .subscription-list .inner-scroll{ margin-right: -17px; padding: 0px 30px; height: 370px; overflow-y: auto; }
section.choose-plan .subscription-list h4{ margin: 0 0 15px; font-size: 20px; text-align: center; }
section.choose-plan .subscription-list ul{ list-style: none; padding: 0 0 0 30px; margin: 0; }
section.choose-plan .subscription-list ul li{ position: relative; margin: 10px 0; display: inline-block; width: 100%; }
section.choose-plan .subscription-list ul li::after{ content: ""; position: absolute; width: 15px; height: 15px; background: url('../images/circal-right.svg') no-repeat; background-size: 100%; left: -30px; top: 5px; }
section.choose-plan .subscription-list .bottom-btn { text-align: center; margin: 20px 0 0px; }
section.choose-plan .subscription-list .common-check{ margin: 10px 20px 0 20px; background: #C2AA7866; padding: 10px; border: 1px solid #c8a977; border-radius: 4px; }
section.choose-plan .subscription-list .common-check .checkbox{ margin: 0;  }

/* Book Details */
section.book-detail .book-img {  position: sticky; top: 90px; }
section.book-detail .book-img .img{ position: relative; max-width: 370px; margin: 0 auto; }
section.book-detail .book-img .img img{ width: 100%; }
section.book-detail .book-img .img .share-icon{box-shadow: 0px 0px 4px 3px #e2e2e2; position: absolute; top: 10px; right: 10px; background: var(--white-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
section.book-detail .book-img .button-list { max-width: 370px; margin: 20px auto; display: flex;  align-items: center; justify-content: center; }
section.book-detail .book-img .button-list .theme-btn{ flex: 0 0 auto; padding: 0;width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: #fff; }
section.book-detail .book-img .button-list .theme-btn i{ margin-left: 2px;  }
section.book-detail .book-img .button-list .secondary-btn{ width: 100%;margin: 0 10px 0 0; }

section.book-detail .book-content {  }
section.book-detail .book-content .custom-tab-main .custom-nav-tabs { border-bottom: 1px solid var(--gray-color); }
section.book-detail .book-content .favourite-mark { background: var(--white-color); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 4px 3px #e2e2e2; flex: 0 0 auto; margin: 0 0 0 15px; }

section.book-detail .book-content .top-line{ margin: 0px 0 10px; display: flex; justify-content: space-between;  }
section.book-detail .book-content .top-line h1{ font-size: 32px; }
section.book-detail .book-content .top-line h1 span{ font-size: 16px; font-weight: 400; display: block; }
section.book-detail .book-content .basic-detail{  }
section.book-detail .book-content .basic-detail ul { list-style-type: none; padding: 5px 0; margin: 0; display: flex; }
section.book-detail .book-content .basic-detail ul li{  text-align: center; padding: 0 30px; border-right: 1px solid var(--gray-color);  }
section.book-detail .book-content .basic-detail ul li:last-child{ border-right: none; }
section.book-detail .book-content .basic-detail ul li label{ display: block; color: var(--gray-color);  }
section.book-detail .book-content .basic-detail ul li p{ margin: 0; }
section.book-detail .book-content h6.title { margin: 15px 0; }
section.book-detail .book-content .about-book ul { list-style-type: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; /* justify-content: space-between; */ }
section.book-detail .book-content .about-book ul li span{ font-weight: 400; color: var(--gray-color); display: block; }
section.book-detail .book-content .about-book ul li { width: 33.33%; }
section.book-detail .book-content .about-book ul li p{ word-break: break-all; }

section.book-detail .book-content .chapter-list {  }
section.book-detail .book-content .chapter-list ul { position: relative; list-style-type: none; padding: 10px 0 0; margin: 0; border-top: 1px solid #e2e2e2; }
section.book-detail .book-content .chapter-list ul::after{ content: ""; position: absolute; left: 35px; top: 0; bottom: 0; background: #e2e2e2; width: 1px; }
section.book-detail .book-content .chapter-list ul li { display: flex;  justify-content: space-between; padding: 15px 0; }
section.book-detail .book-content .chapter-list ul li .num{ width: 60px; font-weight: 600; flex: 0 0 auto; }
section.book-detail .book-content .chapter-list ul li .content{ flex: 0 3 auto; margin-right: auto; font-size: 14px; font-weight: 400; }
section.book-detail .book-content .chapter-list ul li .content h6, 
section.book-detail .book-content .chapter-list ul li .content p{ margin: 0; }
section.book-detail .book-content .chapter-list ul li .bookmark{ width: 30px; text-align: right; flex: 0 0 auto; }

section.book-detail .book-content .bookmark{  }
section.book-detail .book-content .bookmark .box{ margin: 15px 0; display: inline-flex; justify-content: space-between; font-size: 14px; font-weight: 400; width: 100%; }
section.book-detail .book-content .bookmark .box h6, section.book-detail .book-content .bookmark .box p{ margin: 0; }
section.book-detail .book-content .bookmark .clear { text-align: right; margin: 0 0 10px; }

/*===== Profile ======== */
section.profile {  }
section.profile .form-group p{ word-break: break-word; color: var(--theme-color); }
section.profile .profile-img{  text-align: center; display: table; align-items: center; margin: 0 auto; position: relative; }
section.profile .profile-img img{ width: 150px; height: 150px; object-fit: cover; margin: 0px auto 20px; border: 1px solid #e2e2e2; border-radius: 50%; }
section.profile .profile-img .file-input { position: relative; }
section.profile .profile-img .add-avatar { position: absolute; right: 0; bottom: 20px; }
section.profile .profile-img .add-avatar a{ width: 40px; height: 40px; border-radius: 50%; background: var(--secondary-color); font-size: 29px; line-height: 0; display: flex; align-items: center; justify-content: center; color: var(--white-color); font-weight: 300; }
section.profile .name { text-align: center; font-weight: 700; color: var(--theme-color); }
section.profile .profile-info { display: flex; align-items: center; justify-content: center; }
section.profile .profile-info ul{ list-style: none; padding: 20px 0; margin: 0; display: flex; }
section.profile .profile-info ul li { font-weight: 600; text-align: center; padding: 0 50px; border-right: 1px solid var(--gray-color); }
section.profile .profile-info ul li:last-child{ border-right: 0; }
section.profile .profile-info ul li h6{ margin: 0; color: var(--theme-color); }
section.profile .profile-info ul li span{ display: block; font-size: 14px; color: var(--gray-color); }

section.profile .member-box { margin: 5px 0 30px; background-image: url('../images/member-bg.png'); background-repeat: no-repeat; background-size: cover;  padding: 20px; border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: space-between;  box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 50%); }
section.profile .member-box.red {  background-color: #d83232; }
section.profile .member-box.black {  background-color: #2B2B2B; }
section.profile .member-box .content p, section.profile .member-box .content h6{ margin: 0; }
section.profile .member-box .content span{ opacity: 0.8; margin: 0 0 5px; display: inline-block; width: 100%; font-weight: 300; }
section.profile .member-box .btn-change{ background: #fff; padding: 10px 20px; border-radius: 5px; color: #000; }

section.profile .contact-list  { margin: 0 0 20px; display: flex; align-items: center; }
section.profile .contact-list .img{ flex: 0 0 auto; background: rgb(194 170 120 / 20%); color: var(--secondary-color); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
section.profile .contact-list .contact-info {  flex: 1 1 auto; padding: 0 0 0 20px; }
section.profile .contact-list .contact-info .lable{ color: var(--gray-color); display: flex; align-items: center; justify-content: space-between; }
section.profile .contact-list .contact-info .lable a{ color: var(--gray-color); font-size: 14px; }
section.profile .contact-list .contact-info .req-mem { display: flex; justify-content: space-between; }
section.profile .more-detail { display: flex; align-items: center; justify-content: space-between; margin: 10px 0;border-bottom: 1px solid var(--gray-color); }
section.profile .more-detail a{ color: var(--theme-color); }

section.profile .avatar-box { position: relative; }
section.profile .avatar-box a{ display: inline-block; }
section.profile .avatar-box .premium{ position: absolute; left: 0; right: 0; bottom: -10px; text-align: center; }

/* Contact-us Page */
/* section.contact-page .img-box { background: #2B2B2B; padding: 50px 50px 0 50px; border-radius: 20px; box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 50%); } */
section.contact-page .inner-contact { padding: 50px 50px 0 30px; border-radius: 20px; box-shadow: 0px 4px 4px 1px rgb(0 0 0 / 10%); border: 1px solid var(--secondary-color); }

/* section.contact-page .img-box { height: 100%; display: flex; align-items: center; text-align: center; padding: 0 50px; } */
section.contact-page .img-box {  }
section.contact-page .img-box lottie-player{ margin: 0 auto; }

/* Customer Support */
section.customer-support .ticket-list .ticket-box{  margin: 15px 0; padding: 15px;  box-shadow: 0px 0px 10px 0px var(--gray-color);border-radius: 10px; }
section.customer-support .ticket-list .ticket-box label{ color: var(--gray-color); margin: 0 5px 0 0; font-weight: 400; }
section.customer-support .ticket-list .ticket-box p{ margin: 0; font-weight: 600;  }
section.customer-support .ticket-list .ticket-box .head{ display: flex; align-items: center; justify-content: space-between; width: 100%; border-bottom: 1px dashed var(--gray-color); padding: 0 0 10px; margin: 0 0 10px; }
section.customer-support .ticket-list .ticket-box .head p{ margin: 0;}
section.customer-support .ticket-list .ticket-box .details p{ margin: 0 0 5px; }

/* CMS Page */
section.cms-page {  }
section.cms-page .about-logo img{ max-width: 300px; margin: 0 0 10px; }

/* News Page */
section.news-page .news-slide { position: relative; margin: 40px 100px; -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear; }
section.news-page .item { padding: 30px 0; }
section.news-page .slick-slide.slick-current .news-slide, 
section.news-page .slick-slide.slick-center .news-slide{  transform: scale(1.2);}
section.news-page .news-slide .content{ padding: 30px; position: absolute; left: 0; right: 0; bottom: 0; color: #fff; }
section.news-page .news-slide .content h5{ color: var(--dark-white-color); }
section.news-page .news-slide .ago{ padding: 30px; position: absolute; left: 0; right: 0; top: 0; color: rgba(255,255,255, 0.7);}

/* News details */
section.news-details p{ color: var(--gray-color); }
section.news-details .img{ text-align: center; }
section.news-details .img img{ margin: 0 0 10px;  width: 100%;  object-fit: cover; }
section.news-details .posted{ padding: 5px 0; }
section.news-details .heading{ display: flex; justify-content: space-between; margin: 10px 0 30px; align-items: center; }
section.news-details .heading h1{ font-size: 27px; font-weight: 700; position: relative; }
section.news-details .heading h1::after{ content: ""; position: absolute; bottom: -15px; left: 0; height: 5px; width: 100px; background: var(--secondary-color); }
section.news-details .heading a{ font-size: 20px; }

/* Suggestion Box */
section.suggestion-box {  }
section.suggestion-box .img-box lottie-player{ margin: 20px auto; max-width: 200px; }

/* Notification */
section.notification-page .page-title a{ color: var(--red-color); }
section.notification-page ul.notification-list { list-style-type: none; padding: 0; margin: 0; } 
section.notification-page ul.notification-list li { display: inline-block; width: 100%; }
section.notification-page ul.notification-list li .box{ padding: 15px 35px 15px 0px; position: relative; border-bottom: 1px solid var(--gray-color); }
section.notification-page ul.notification-list li .box p{ margin: 0;  } 
section.notification-page ul.notification-list li .box .date{ color: var(--gray-color); margin: 5px 0 0; } 
section.notification-page ul.notification-list li .box .date i{ margin-right: 10px; color: var(--secondary-color); } 
section.notification-page ul.notification-list li .box .delete{ display: flex; align-items: center; justify-content: center;  border-radius: 50%; color: var(--red-color); width: 30px; height: 30px; position: absolute; right: 0; } 

/* bookclub Page */
.search-friend{ position: relative; flex: 1 1 auto; }
.search-friend .btn{color: var(--primary-color); width: 18px; position: absolute; left: 15px; top: 8px; background: none;outline: none; padding: 0;  box-shadow: none; }
.search-friend .form-control{ background: var(--dark-black-color);  border: 1px solid var(--gray-color); color: var(--primary-color);  height: 40px;  padding-left: 50px; }
section.bookclub {  }
section.bookclub .page-title .addnew{ display: flex; align-items: center; justify-content: center; background: var(--secondary-color); width: 40px; height: 40px; border-radius: 50%; font-size: 30px; font-weight: 300;  }
section.bookclub .bookclub-list ul{ list-style: none; padding: 0; margin: 20px 0 0; }
section.bookclub .bookclub-list ul li{ padding: 10px 0; border-bottom: 1px solid var(--gray-color); }
section.bookclub .bookclub-list ul li .box { display: flex; justify-content: space-between; align-items: center;  }
section.bookclub .bookclub-list ul li .box .profile { display: flex; justify-content: space-between; align-items: center; }
section.bookclub .bookclub-list ul li .box .profile .img{ max-width: 50px; }
section.bookclub .bookclub-list ul li .box .profile .detail{ padding: 0 0 0 20px; }
section.bookclub .bookclub-list ul li .box .profile .detail h6{ margin: 0;color: var(--primary-color); }
section.bookclub .bookclub-list ul li .box .arrow { display: flex; }
section.bookclub .bookclub-list ul li .box .arrow .btn{ min-width: 110px; font-size: 13px; padding: 8px 0; }
section.bookclub .bookclub-list ul li .box .arrow .right{ border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--secondary-color); color: var(--white-color); font-size: 12px;}
section.bookclub .bookclub-list ul li .box .arrow .close{ margin: 0 0 0 10px; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #999; color: var(--white-color); font-size: 12px; }

section.bookclub .profile-info {  text-align: center;  }
section.bookclub .profile-info .profile-img{  text-align: center; display: table; align-items: center; margin: 0 auto; position: relative; }
section.bookclub .profile-info .profile-img img{ box-shadow: 0px 0px 0px 6px var(--gray-color); width: 150px; height: 150px; object-fit: cover; margin: 0px auto 20px; border: 1px solid var(--gray-color); border-radius: 50%; }

section.bookclub .profile-info  .name { text-align: center; font-weight: 700; }
section.bookclub .profile-info .user-info {  display: flex; align-items: center; justify-content: center;  }
section.bookclub .profile-info .user-info ul{ list-style: none; padding: 20px 0; margin: 0; display: flex; }
section.bookclub .profile-info .user-info ul li { font-weight: 600; text-align: center; padding: 0 50px; border-right: 1px solid var(--gray-color); }
section.bookclub .profile-info .user-info ul li:last-child{ border-right: 0; }
section.bookclub .profile-info .user-info ul li span{ display: block; font-size: 14px; color: var(--gray-color); }
section.bookclub .profile-info .button-list { padding: 5px 0; display: flex; align-items: center; justify-content: center; }
section.bookclub .profile-info .button-list a{ margin: 0 5px; min-width: 200px; padding: 8px 0; }

section.bookclub .add-member-detail {  padding: 20px; border-radius: 20px; margin: 20px 0 0; }

/* Chat Css */
section.bookclub .chat-details { border: 1px solid var(--gray-color); padding: 15px; height: 100%; border-radius: 5px; }
section.bookclub .chat-details .top-head { border-bottom: 1px solid var(--gray-color); }
section.bookclub .chat-details .top-head .profile{ display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px;}
section.bookclub .chat-details .top-head .profile .img { display: flex; align-items: center; }
section.bookclub .chat-details .top-head .profile .img h5{ margin: 0 10px;   }
section.bookclub .chat-details .top-head .profile .img img{ width: 48px; height: 48px; border-radius: 50%; object-fit: fill;  }


section.bookclub .chat-details .chat-list { height: calc(100vh - 245px); overflow-y: auto; margin-right: -15px; padding-right: 15px; }
section.bookclub .chat-details .chat-list ul { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
section.bookclub .chat-details .chat-list ul li { padding: 10px 0; }
section.bookclub .chat-details .chat-list ul li .time{ font-size: 12px; color: var(--gray-color); }
section.bookclub .chat-details .chat-list ul li.me-chat { margin-left: auto; }
section.bookclub .chat-details .chat-list ul li.me-chat .time{ text-align: right; }
section.bookclub .chat-details .chat-list ul li.user-chat { margin-right: auto; }
section.bookclub .chat-details .chat-list ul li.me-chat .msg-body{ border-radius: 10px 10px 0 10px; color: var(--white-color); }
section.bookclub .chat-details .chat-list ul li.user-chat .msg-body{ border-radius: 0px 10px 10px 10px; background: #E3E3E3;  color: var(--dark-black-color); }
section.bookclub .chat-details .chat-list ul li .msg-body{ max-width: 260px; width: 100%; background: var(--secondary-color);  padding: 10px 15px; margin: 5px 0;  font-size: 14px; }
section.bookclub .chat-details .chat-list ul li .msg-body a{ display: block;  padding: 4px 0 0; text-decoration: underline; }
section.bookclub .chat-details .chat-list ul li .msg-body .img{ max-width: 100px; }

section.bookclub .chat-details .send-comment { position: relative; display: flex; align-items: center; padding: 10px 0 0 0; }
section.bookclub .chat-details .send-comment .book-btn{ border: 1px solid var(--gray-color); height: 43px; width: 43px; display: flex; align-items: center; justify-content: center; border-radius: 5px; flex: 0 0 auto; color: var(--primary-color); }
section.bookclub .chat-details .send-comment .form-control{ border-radius: 5px; margin: 0 0 0 5px; padding: 0 45px 0 15px; }
section.bookclub .chat-details .send-comment .send{ position: absolute; right: 10px; top: 22px; background: none; border: 0; font-size: 18px; line-height: 18px; color: var(--primary-color);}

/* Library Page */
section.library-page {  }
section.library-page .search-filter{ display: flex; align-items: center; }
section.library-page .search-filter .search{ }
section.library-page .search-filter .filter-btn{ padding: 0 0 0 15px; }

/* Museum Detail */
section.museum-detail {  }
section.museum-detail .museum-banner { position: sticky; top: 90px; }
section.museum-detail .museum-banner model-viewer{ width: 100%; height: 400px; /* --progress-bar-color: red; */ box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 50%); border-radius: 15px; }


section.museum-detail h6.title{ font-size: 20px; font-weight: 700; }
section.museum-detail .title-number { padding: 20px 0; display: flex; align-items: center; justify-content: center; text-align: center; }
section.museum-detail .title-number .arrow{ padding: 0 35px; }
section.museum-detail .title-number h4{ margin: 0 0 5px; }
section.museum-detail .title-number p{ margin: 0; }

section.museum-detail .basic-detail ul { list-style-type: none; padding: 5px 0; margin: 0; display: flex; }
section.museum-detail .basic-detail ul li{  text-align: center; padding: 0 30px; border-right: 1px solid var(--gray-color);  }
section.museum-detail .basic-detail ul li:last-child{ border-right: none; }
section.museum-detail .basic-detail ul li label{ display: block; color: var(--gray-color);  }
section.museum-detail .basic-detail ul li p{ margin: 0; }

section.museum-read-now h6.title{ font-size: 20px; font-weight: 700;  }
section.museum-read-now .museum-banner model-viewer{ width: 100%; height: 350px; background: var(--white-color); box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 50%); border-radius: 15px; }
section.museum-read-now .museum-banner model-viewer canvas{ background: var(--white-color); }
section.museum-read-now .museum-banner .gallery .img{ margin: 0px 0 20px;}
section.museum-read-now .link-book { margin: 0px 0 20px; position: relative; }
section.museum-read-now .link-book .member{ position: absolute; right: 15px; bottom: 15px; }

/* Bookmark Page */
section.bookmark-page .bookmark-mark-white {  }

/* Bookshelf Page */
section.bookshelf-page {  }
section.bookshelf-page .last-read{ display: flex; align-items: center; margin: 0 0 30px; }
section.bookshelf-page .last-read .img{ max-width: 200px; }
section.bookshelf-page .last-read .detail{ padding: 0 0 0 20px; }
section.bookshelf-page .last-read .detail .favourite-mark{ display: inline-block; vertical-align: middle; margin: 0 10px 0 0;}
section.bookshelf-page .last-read .detail .favourite-mark label{ margin: 0; }

/*=========== Now Player Page =============*/
section.player-view.dark { background: #000; } 
section.player-view.yellow { background: #C2AA78; } 
section.player-view.light { background: #fff; } 
section.player-view #viewer, 
section.player-view.dark #viewer, 
section.player-view.light #viewer {box-shadow: 0px 0px 2px 0px #c2aa78; } 
section.player-view.yellow #viewer { box-shadow: 0px 0px 2px 0px #ffd695; } 
section.player-view.dark .page-title .read-now a{  } 

section.player-view .content-top { border-radius: 10px; margin: 0 0 30px; text-align: center; padding: 40px 20px; background: url('../images/background.png') no-repeat;  }
section.player-view .content-top .thumbmail-img { position: relative; }
section.player-view .content-top .thumbmail-img .lottie{ position: absolute; left: -20px; right: -20px; z-index: -1; top: -30px;}
section.player-view .content-top .thumbmail-img img{ max-width: 250px; margin: 0 auto; box-shadow: 0px 0px 6px 3px #00000029; border-radius: 10px;}
section.player-view .content-top .details { padding: 20px 0 0; text-align: left; }
section.player-view .content-top .details .head{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px;    align-items: end; }
section.player-view .content-top .details .head .right{ display: flex; margin: 0 0 19px; }
section.player-view .content-top .details .head .right .favourite-mark{ margin: 0 20px 0 0;  }
section.player-view .bottom-content { padding: 25px; border-radius: 10px; box-shadow: 0px 0px 10px 0px #e2e2e2; }


section.player-view .play-pause {grid-area: one; display: flex; justify-content: center; align-items: center;}
section.player-view .play-pause i{ background: var(--secondary-color);  width: 60px; height: 60px;  border-radius: 50%;line-height: 3; text-align: center; color: var(--white-color); }
section.player-view .icon-push {border: 1px solid var(--secondary-color);  background: none !important; color: var(--secondary-color) !important;  cursor: pointer;   display: none; line-height: 2.9 !important; }
section.player-view .next-prev i{ cursor: pointer; }
section.player-view .next-prev .icon-left10, 
section.player-view .next-prev .icon-right10{     font-size: 24px; }
section.player-view .next-prev { padding: 20px 0;    font-size: 20px; grid-area: three; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 auto; }
section.player-view .custom-progress { overflow: hidden; } 
section.player-view .custom-progress #progressBar {height: 5px; width: 100%; outline: none; border-radius: 30px; }
section.player-view .custom-progress #progressBar::-webkit-slider-thumb { appearance: none; height: 11px; width: 11px;outline: none; border-radius: 30px; cursor: pointer; }
section.player-view .track-time { grid-area: five; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin: 10px auto; }
section.player-view iframe p{ color: var(--primary-color) !important; }


/* === range theme and appearance === */
section.player-view input[type="range"] { font-size: 1.5rem; width: 12.5em; }
section.player-view input[type="range"] { --thumb-height: 0.45em; --track-height: 0.125em; --track-color: rgba(0, 0, 0, 0.2); /*--brightness-hover: 180%; */ --brightness-down: 80%; --clip-edges: 0.125em; }
section.player-view input[type="range"].win10-thumb { color: var(--secondary-color); }

@media (prefers-color-scheme: dark) {    
  section.player-view input[type="range"] { color: #f07167; --track-color: rgba(255, 255, 255, 0.1); } 
  section.player-view input[type="range"].win10-thumb {  color: #3a86ff; }
}

/* === range commons === */
section.player-view input[type="range"] { position: relative; /* background: #fff0; */ /* overflow: hidden; */ }
section.player-view input[type="range"]:active { cursor: grabbing; }
section.player-view input[type="range"]:disabled { filter: grayscale(1); opacity: 0.3;  cursor: not-allowed; }

/* === WebKit specific styles === */
section.player-view input[type="range"],
section.player-view input[type="range"]::-webkit-slider-runnable-track,
section.player-view input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;transition: all ease 100ms; height: var(--thumb-height); }
section.player-view input[type="range"]::-webkit-slider-runnable-track,
section.player-view input[type="range"]::-webkit-slider-thumb { position: relative; }
section.player-view input[type="range"]::-webkit-slider-thumb { --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px); --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px); --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px); --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor; width: var(--thumb-width, var(--thumb-height)); background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);background-color: currentColor; box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height)); filter: brightness(100%); clip-path: polygon( 100% -1px,
    var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom),
    var(--clip-edges) 100%, var(--clip-further) var(--clip-further) );
}

section.player-view input[type="range"]:hover::-webkit-slider-thumb { filter: brightness(var(--brightness-hover)); cursor: grab; }
section.player-view input[type="range"]:active::-webkit-slider-thumb { filter: brightness(var(--brightness-down)); cursor: grabbing; }
section.player-view input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px); }
 
/* === Firefox specific styles === */
section.player-view input[type="range"],
section.player-view input[type="range"]::-moz-range-track,
section.player-view input[type="range"]::-moz-range-thumb { appearance: none;transition: all ease 100ms; height: var(--thumb-height); }

section.player-view input[type="range"]::-moz-range-track,
section.player-view input[type="range"]::-moz-range-thumb,
section.player-view input[type="range"]::-moz-range-progress { background: #fff0; }
section.player-view input[type="range"]::-moz-range-thumb { background: currentColor; border: 0; width: var(--thumb-width, var(--thumb-height)); border-radius: var(--thumb-width, var(--thumb-height)); cursor: grab; }
section.player-view input[type="range"]::-moz-range-track { width: 100%; background: var(--track-color); }
section.player-view input[type="range"]::-moz-range-progress { appearance: none; background: currentColor; transition-delay: 30ms; }
section.player-view input[type="range"]::-moz-range-track,
section.player-view input[type="range"]::-moz-range-progress { height: calc(var(--track-height) + 1px); border-radius: var(--track-height);}
section.player-view input[type="range"]::-moz-range-thumb,
section.player-viewinput[type="range"]::-moz-range-progress { filter: brightness(100%); }

/*============ Player END =========*/

/*=============Comic Readnow ===========*/
.np-arrow .arrow{ position: fixed; top: 50%; margin-top: -32px; font-size: 64px; color: #E2E2E2; font-weight: bold; cursor: pointer; -webkit-user-select: none;-moz-user-select: none;user-select: none; text-decoration: none; }
.np-arrow .arrow:hover{ color: #000; }
.np-arrow .next { right: 40px; }
.np-arrow .prev { left: 40px; }

section.comic-readnow {  }
section.comic-readnow .main-comic { }    
section.comic-readnow .comic-box { display: inline-block; }
section.comic-readnow .comic-box img{   }    

/* section.comic-readnow .comic-box a{ display: inline;  margin: 0 -5px;} */
/* section.comic-readnow .main-img {height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
section.comic-readnow .main-img .img{ padding: 12px 0; }
section.comic-readnow .main-img .img img{  } */



/*========================
    Payment Setting
==========================*/
section.payment-setting {  }
section.payment-setting .custom-nav-tabs{ display: block; }
section.payment-setting .custom-nav-tabs li { padding: 0px 0 10px; }
section.payment-setting .custom-nav-tabs li a{ display: flex; align-items: center; justify-content: space-between; padding: 8px 15px; width: 100%; color: var(--black-color); border: 1px solid var(--black-color); }
section.payment-setting .custom-nav-tabs li a i{ font-size: 8px; }
section.payment-setting .custom-nav-tabs li a.active{ background: var(--secondary-color); color: #fff; border-color: var(--secondary-color); }

section.payment-setting .active-plan { background: var(--light-gray); padding: 15px; }
section.payment-setting { padding: 50px 0 80px; }
section.payment-setting .member-box { margin: 20px 0; }
section.payment-setting .member-box .top-box{  position: relative; color: #fff; text-align: center; margin: 0 0 20px; background: #2B2B2B; padding: 30px 0px; border-radius: 10px; }
section.payment-setting .member-box .top-box img{ max-width: 130px; margin: 0 auto;  }
section.payment-setting .member-box .top-box h5{ margin: 10px 0; font-size: 16px; color: var(--dark-white-color); }
section.payment-setting .member-box .top-box.theme{ background: #C2AA78; }
section.payment-setting .member-box .top-box .brouch img{ position: absolute; top: 10px; right: 10px; width: 20px; }
section.payment-setting .member-box .top-box .price{ background: #3D3D3D; padding: 5px 10px; margin: 0 0 5px; font-size: 20px; }
section.payment-setting .member-box .top-box.theme .price{ background: #AF9869; }
section.payment-setting .member-box .plan-details { font-size: 14px; margin: 0 0 10px; display: flex;  background: var(--secondary-color); padding: 10px 15px; border-radius: 10px; }
  
section.payment-setting .subscription-list { background: #fff; color: #000; padding: 20px 0px; overflow: hidden; box-shadow: 0px 3px 10px 0px rgb(66 66 66 / 50%); border-radius: 10px;  }
section.payment-setting .subscription-list .inner-scroll{ margin-right: -17px; padding: 0px 25px 20px; height: 300px; overflow-y: auto; }
section.payment-setting .subscription-list h4{ margin: 0 0 15px; font-size: 20px; text-align: center; }
section.payment-setting .subscription-list ul{ list-style: none; padding: 0 0 0 30px; margin: 0; }
section.payment-setting .subscription-list ul li{ position: relative; margin: 5px 0; display: inline-block; width: 100%; }
section.payment-setting .subscription-list ul li::after{ content: ""; position: absolute; width: 15px; height: 15px; background: url('../images/circal-right.svg') no-repeat; background-size: 100%; left: -30px; top: 5px; }
section.payment-setting .subscription-list .bottom-btn { text-align: center; margin: 20px 0 0px; }
section.payment-setting .subscription-list .common-check{ margin: 10px 20px 0 20px; background: #C2AA7866; padding: 10px; border: 1px solid #c8a977; border-radius: 4px; }
section.payment-setting .subscription-list .common-check .checkbox{ margin: 0;  }

section.payment-setting .billing-history { background: #fff; }
section.payment-setting .billing-history table { font-size: 14px; }
section.payment-setting .billing-history table thead{ color: #C2AA78; background: #FCFCFC; }
section.payment-setting .billing-history table thead{ }

section.payment-setting .setting-list{ background: var(--light-gray); padding: 15px;   } 
section.payment-setting .setting-list .box .radio-box:last-child{ border-bottom: 0;  }
section.payment-setting .setting-list .box .radio-box { border-bottom: 1px solid var(--gray-color); display: inline-block; margin: 0;  width: 100%; padding: 10px 35px 10px 0; }
section.payment-setting .setting-list .box .radio-box .text img{ margin: 0 15px 0 0; }
section.payment-setting .setting-list .box .radio-box .checkmark, 
section.payment-setting .setting-list .box .radio-box .checkbox input{ left: unset; right: 0; top: 15px; }

section.payment-setting .pagination { display: flex; justify-content: center; }
section.payment-setting .pagination .page-link{ color: #000;  }
section.payment-setting .pagination .page-link.active{ font-weight: 700; color: #C2AA78;  }

/*===============
  PAYMENT
=================*/
section.payment-scr {  }
section.payment-scr .box{  border-radius: 6px; background: var(--light-gray); padding: 15px; }

section.payment-scr .box .radio-box:last-child{ border-bottom: 0;  }
section.payment-scr .box .radio-box { border-bottom: 1px solid var(--theme-color); display: inline-block; margin: 0;  width: 100%; padding: 10px 35px 10px 0; }
section.payment-scr .box .radio-box .text img{ margin: 0 15px 0 0; }
section.payment-scr .box .radio-box .checkmark, 
section.payment-scr .box .radio-box .checkbox input{ left: unset; right: 0; top: 15px; }
section.payment-scr .total-amount { margin: 0 0 30px; background: var(--theme-color); padding: 10px 15px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

section.payment-now .qr-code{ background: var(--dark-white-color); padding: 15px; text-align: center; }
section.payment-now .qr-code img{ max-width: 200px; }
section.payment-now .form-control{ color: #FF3030;  padding: 0 40px 0 20px; }
section.payment-now .input-symbol .show-pass{ color: #000; }
section.payment-now .invoice-no { text-align: center; margin: 20px auto; }
section.payment-now .invoice-no span{ font-weight: 600; background: var(--light-gray); padding:8px 20px; text-align: center; border-radius: 50px; display: inline-block; }
section.payment-now .btn-list{ margin: 10px 0 0; text-align: center; display: flex; justify-content: center; gap: 10px; }


/* payment waiting */
section.payment-waiting {  }
section.payment-waiting .box{ text-align: center; }
section.payment-waiting .box lottie-player { width: 120px; margin: 0 auto 20px;  }

/* Add New Books */
section.add-new-book .radio-box{ display: flex; padding: 0; position: relative; width: 50px; height: 50px;}
section.add-new-book .radio-box .checkmark{ border: 1px solid var(--black-color);  -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; height: 48px; width: 48px; border-radius: 4px;  }
section.add-new-book .radio-box input:checked ~ .checkmark { transform: scale(1.1);}
section.add-new-book .radio-box .checkmark::after { background: none; }
section.add-new-book .radio-box input:checked ~ .checkmark::after {  }

section.add-new-book .color-list { margin: 10px 0 30px; }
section.add-new-book .color-list ul { padding: 0; margin: 0; list-style: none; gap: 8px; display: flex; }
section.add-new-book .color-list ul li{ display: inline-block;  }

section.add-new-book .select-layout ul{ display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 30px; }
section.add-new-book .select-layout ul li{ width: 33.33%; }
section.add-new-book .select-layout ul li.active .book-data{ border: 1px solid #000; }

section.add-new-book .select-layout .book-data { cursor: pointer; position: relative; height: 250px; padding: 15px 30px 15px 15px; overflow: hidden; border-radius: 10px; background-image: url('../images/cover-bg1.png'); background-repeat: no-repeat; background-blend-mode: multiply; background-size: cover; }
section.add-new-book .select-layout .book-data .logo { position: absolute; right: 0; top: 0; bottom: 0; }
section.add-new-book .select-layout .book-data .logo img{ width: 30px; }
section.add-new-book .select-layout .book-data .title h4{ margin: 0; font-size: 1.2rem; }
section.add-new-book .select-layout .book-data .title p{ font-size: 0.8rem;  }
section.add-new-book .select-layout .book-data .author{ font-size: 0.9rem; font-weight: 600; }
section.add-new-book .select-layout .book-data.cover1 { display: flex; flex-direction: column; justify-content: space-between;  text-align: left;  }
section.add-new-book .select-layout .book-data.cover2 { text-align: center;display: flex; flex-direction: column; align-items: center; justify-content: center;  }
section.add-new-book .select-layout .book-data.cover3 {  display: flex; flex-direction: column; justify-content: space-between; text-align: center; }

section.add-new-book .preview { background: rgb(239 239 239 / 19%); padding: 20px; border-radius: 10px; } 
section.add-new-book .preview .book-data{ padding: 15px 39px 15px 15px; width: 230px; height: 325px; margin: 0 auto;  } 
section.add-new-book .preview .book-data .logo img { width: 39px; }



/*======= Footer ========*/
footer { background: #000; padding: 50px 0 10px; text-align: center; color: #666; }
footer .about-info .footer-logo{ max-width: 300px; margin: 0 auto; }
footer .about-info ul.social{ padding: 0; margin: 20px 0; list-style: none; display: flex; align-items: center; justify-content: center; }
footer .about-info ul.social li { padding: 0 10px; }
footer .about-info ul.social li a{ width: 40px; height: 40px; border: 1px solid var(--primary-color); border-radius: 100%; display: flex; align-items: center; justify-content: center; }
footer .about-info ul.social li a:hover{ background: var(--secondary-color); border-color: var(--secondary-color); color: var(--black-color);  }

footer .footer-link ul{ list-style: none; padding: 0; margin: 0 0 30px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
footer .footer-link ul li { display: inline-block; padding: 0 10px;  }
footer .footer-link ul li a{ color: #fff; }
footer .footer-bottom { margin: 20px 0 0; }



/* OTP Modal */
.otp-modal {  }
.otp-modal .otp-box{ text-align: center; padding: 20px 0; }
.otp-modal .otp-box h3{ font-size: 22px; }
.otp-modal .otp-box .otp-input { display: flex; align-items: center; justify-content: center; margin: 20px 0; }
.otp-modal .otp-box .otp-input .form-control{ padding: 0; margin: 0 8px; border: 0; border-bottom: 1px solid var(--secondary-color); border-radius: 0; text-align: center; color: var(--secondary-color); background: transparent; font-weight: 600; font-size: 17px; }
.otp-modal .otp-box .resend { margin: 15px 0 30px; }
.otp-modal .otp-box .countdown { color: #a5a5a5;  margin: 15px 0 0; display: inline-block; width: 100%; }

/* Filters Popup */
.filter-modal h4.title{ font-size: 17px; border-bottom: 1px solid var(--secondary-color); padding: 0 0 5px 0; margin: 0 0 10px;}
.filter-modal .common-check .checkmark, 
.filter-modal .common-check .checkbox input{ left: unset; right: 0; }
.filter-modal .common-check .checkbox{ padding: 0 35px 0 0; }

.filter-modal .radio-box { display: inline-block; margin: 0px 0 12px;  width: 100%; padding: 0 35px 0 0; }
.filter-modal .radio-box .checkmark, 
.filter-modal .radio-box .checkbox input{ left: unset; right: 0; }

/* Congratulations popup */
.congratulations-popup .modal-content{ background: url("../images/background1.png") no-repeat; background-size: cover; border-radius: 20px; padding: 50px 20px;  text-align: center; }
.congratulations-popup .successfull img, .congratulations-popup .successfull h3{ margin: 0 0 20px; }
.congratulations-popup .successfull h3 { color: #000; }
.congratulations-popup { color: #000; }


/* Share Popup */
.share-popup .share-option ul { list-style-type: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.share-popup .share-option ul li { padding: 0 10px; }
.share-popup .share-option ul li a{ text-align: center; display: flex; flex-direction: column; }
.share-popup .share-option ul li a img{ display: block; margin: 0 auto 10px auto; height: 45px; }

/* Avatars use Popup */
.avatar-use .modal-dialog { color: #636363; max-width: 400px; margin: 0 auto; padding: 0 15px; }
.avatar-use .modal-content { border: none; text-align: center; }
.avatar-use h5{ color: var(--secondary-color); }
.avatar-use .box {  }
.avatar-use .box img{ max-width: 150px; }
.avatar-use .button a{ width: 90%; margin: 20px 0 0; }


/* Ticket Popup  */
.ticket-popup .detail{  }
.ticket-popup .head{ display: flex; align-items: center; justify-content: space-between; padding: 5px 0; margin: 0 0 10px; border-bottom: 1px dashed var(--gray-color); }
.ticket-popup p{ margin: 5px 0; }
.ticket-popup label{ color: var(--gray-color); }
.ticket-popup .response { border-bottom: 1px solid var(--gray-color); padding: 0 0 10px; }
.ticket-popup .response .head { border-bottom: 0; }

/* Friend Detail */
.friend-detail p{ word-break: break-all;  }

/*====== Book Send Popup ======*/
.book-send-popup {  }
.book-send-popup .search-box{ position: relative; }
.book-send-popup .search-box .btn{ width: 18px; position: absolute; left: 15px; top: 8px; background: none;outline: none; padding: 0; box-shadow: none; color: var(--primary-color);}
.book-send-popup .search-box .form-control{ border: 1px solid var(--gray-color); color: var(--theme-color);  height: 40px;  padding-left: 50px; }
.book-send-popup .inner-booklist { height: calc(100vh - 180px); overflow-y: auto; padding: 0 15px 0 0; margin-right: -15px; }

/*======== Unsubscribe =======*/
.unsubscribe-modal .modal-dialog{ max-width: 470px; }
.unsubscribe-modal .modal-body .button-list { flex-wrap: wrap; gap: 10px; }


/*====== table of content ======*/
.table-of-content ul{ padding: 0; list-style: none; margin: 0; }
.table-of-content ul li{ margin: 0 0 10px; display: inline-block; width: 100%; }
.table-of-content ul li h6{ margin: 0; display: flex; justify-content: space-between; }
.table-of-content ul li h6 span{  }
.table-of-content ul li p{ color: var(--gray-color); }


/*====== Readnow Filter Modal ======*/
.readnow-filter .page-number { padding: 0 0 15px; display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px; border-bottom: 1px solid var(--gray-color); }
.readnow-filter .page-number .field{ display: flex; align-items: center; }
.readnow-filter .page-number .form-control{ width: 100px; margin: 0 10px 0 0; }

.readnow-filter .read-mode {padding: 0 0 15px;  margin: 0 0 20px; border-bottom: 1px solid var(--gray-color); }
.readnow-filter .read-mode .radio-box { padding: 0; margin: 0 15px 0 0; display: inline-flex; position: relative;   cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;  }
.readnow-filter .read-mode .radio-box .wpcf7-list-item-label {display: inline-block;  font-size: 13px;  border: 1px solid #000; border-radius: 5px; padding: 10px 15px; -webkit-transition: all 0.2s linear;  -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear;  -o-transition: all 0.2s linear;  transition: all 0.2s linear;}
.readnow-filter .read-mode .radio-box input:checked~.wpcf7-list-item-label { transform: scale(1.1); }
.readnow-filter .read-mode .radio-box input:checked~.wpcf7-list-item-label::after { display: block; }
.readnow-filter .read-mode .radio-box input { position: absolute; opacity: 0; cursor: pointer; }

.font-slider { display: flex; align-items: center; justify-content: space-between; }
/* === range theme and appearance === */
.font-slider input[type="range"] {position: relative; background: #fff0; overflow: hidden; font-size: 2.5rem; width: 100%; overflow: hidden; --thumb-height: 0.45em; --track-height: 0.125em; --track-color: rgba(0, 0, 0, 0.2); /*--brightness-hover: 180%; */ --brightness-down: 80%; --clip-edges: 0.125em;}
.font-slider input[type="range"].font-slider__range { color: var(--secondary-color); }

@media (prefers-color-scheme: dark) {    
  .font-slider input[type="range"] { color: #f07167; --track-color: rgba(255, 255, 255, 0.1); } 
  .font-slider input[type="range"].win10-thumb {  color: #3a86ff; }
}

/* === range commons === */
.font-slider input[type="range"]:active { cursor: grabbing; }
.font-slider input[type="range"]:disabled { filter: grayscale(1); opacity: 0.3;  cursor: not-allowed; }

/* === WebKit specific styles === */
.font-slider input[type="range"],
.font-slider input[type="range"]::-webkit-slider-runnable-track,
.font-slider input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;transition: all ease 100ms; height: var(--thumb-height); }
.font-slider input[type="range"]::-webkit-slider-runnable-track,
.font-slider input[type="range"]::-webkit-slider-thumb { position: relative; }
.font-slider input[type="range"]::-webkit-slider-thumb { --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px); --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px); --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px); --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor; width: var(--thumb-width, var(--thumb-height)); background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);background-color: currentColor; box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height)); filter: brightness(100%); clip-path: polygon( 100% -1px,
    var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom),
    var(--clip-edges) 100%, var(--clip-further) var(--clip-further) );
}

.font-slider input[type="range"]:hover::-webkit-slider-thumb { filter: brightness(var(--brightness-hover)); cursor: grab; }
.font-slider input[type="range"]:active::-webkit-slider-thumb { filter: brightness(var(--brightness-down)); cursor: grabbing; }
.font-slider input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px); }
 
/* === Firefox specific styles === */
.font-slider input[type="range"],
.font-slider input[type="range"]::-moz-range-track,
.font-slider input[type="range"]::-moz-range-thumb { appearance: none;transition: all ease 100ms; height: var(--thumb-height); }
.font-slider input[type="range"]::-moz-range-track,
.font-slider input[type="range"]::-moz-range-thumb,
.font-slider input[type="range"]::-moz-range-progress { background: #fff0; }
.font-slider input[type="range"]::-moz-range-thumb { background: currentColor; border: 0; width: var(--thumb-width, var(--thumb-height)); border-radius: var(--thumb-width, var(--thumb-height)); cursor: grab; }
.font-slider input[type="range"]::-moz-range-track { width: 100%; background: var(--track-color); }
.font-slider input[type="range"]::-moz-range-progress { appearance: none; background: currentColor; transition-delay: 30ms; }
.font-slider input[type="range"]::-moz-range-track,
.font-slider input[type="range"]::-moz-range-progress { height: calc(var(--track-height) + 1px); border-radius: var(--track-height);}
.font-slider input[type="range"]::-moz-range-thumb,
.font-slider input[type="range"]::-moz-range-progress { filter: brightness(100%); }


.font-small,
.font-large { font-kerning: none; }
.range-min,
.range-max { padding: 0 10px; }

.range-min { font-size: 16px; }
.range-max { font-size: 22px; }