@charset "UTF-8";
/*
Theme Name: Author Book Publisher
Author: TheMagnifico52
Theme URI: https://www.themagnifico.net/products/author-book-publisher
Author URI: https://www.themagnifico.net/
Description: The Author Book Publisher offers a multipurpose and modern design crafted for authors, publishers, literary agencies, books library, online books library, public library, digital library , local library, library services, community library , library books, book lending , library catalog, ebook library and creative professionals who want an online presence that feels minimal, elegant, and sophisticated. Built with clean, secure, and optimized codes, this theme ensures faster page load time, making it ideal for showcasing books, author profiles, publishing services, and literary portfolios with ease. Fully responsive, retina-ready, and mobile-friendly, the theme provides a seamless browsing experience across all devices. Its user-friendly layout and intuitive navigation make it easy for visitors to explore book categories, event schedules, testimonials, or the author’s journey. With powerful personalization options, you can adjust colors, fonts, banners, and overall page structure to match your unique branding style. The theme comes packed with essential features like a beautifully designed testimonial section, interactive Banner layouts, prominent Call to Action Button (CTA) placements, and a stylish Team section for publishing agencies. Its social media integration helps you stay connected with readers and expand your online reach. Built on a robust Bootstrap framework, the theme guarantees stability, speed, and flexibility. For developers and creative users, the theme provides clean shortcodes, advanced Customization Options, and complete translation-ready compatibility, making it suitable for global audiences. Whether you're a solo author or part of a large agency-friendly publishing team, the theme supports every need with its multipurpose, interactive, stunning, and even animated design capabilities. Beautiful, luxurious, and built with attention to detail, the Author Book Publisher is the perfect digital companion to showcase stories, promote books, and build a powerful brand presence online.
Version: 0.8
Tested up to: 6.9
Requires PHP: 7.2
Requires at least: 5.0
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: digital-books
Text Domain: author-book-publisher
Tags: custom-logo, one-column, two-columns, wide-blocks, block-styles, editor-style, sticky-post, custom-background, custom-colors, custom-header, custom-menu, footer-widgets, featured-images, flexible-header, full-width-template, threaded-comments, theme-options, rtl-language-support, left-sidebar, right-sidebar, grid-layout, blog, e-commerce, education

Author Book Publisher WordPress Theme has been created by TheMagnifico52(themagnifico.net), 2025.
Author Book Publisher WordPress Theme is released under the terms of GNU GPL
*/


/*--------------------------------------------------------------
# Import typographique
# Cormorant Garamond : serif classique, manuscrits, philosophie
# Lato : sans-serif lisible pour le corps
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Lato:wght@300;400;700&display=swap');
 
/*--------------------------------------------------------------
# Variables - surcharge des variables du theme parent
# --first-color et --second-color sont utilisees partout
# dans le parent. En les redefinissant ici, tout suit.
--------------------------------------------------------------*/
:root {
  /* Surcharge directe des variables parent */
  --first-color:  #8B6914;   /* Or de reliure */
  --second-color: #1C1A17;   /* Noir chaud */
 
  /* Palette etendue pour le child */
  --color-gold:         #8B6914;
  --color-gold-light:   #A07D20;
  --color-gold-subtle:  #F5EDD8;
  --color-ink:          #1C1A17;
  --color-ink-soft:     #2C2A27;
  --color-muted:        #7A7264;
  --color-parchment:    #FAF7F2;
  --color-surface:      #FFFFFF;
  --color-border:       #E5DFD4;
 
  /* Typographie */
  --font-serif: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
  --font-sans:  'Lato', 'Segoe UI', system-ui, sans-serif;
 
  /* Effets */
  --radius-sm:  4px;
  --radius-md:  8px;
  --shadow-sm:  0 1px 6px rgba(28, 26, 23, 0.08);
  --shadow-md:  0 4px 20px rgba(28, 26, 23, 0.14);
  --transition: 220ms ease;
}
 
/*--------------------------------------------------------------
# Base - surcharge du theme parent
--------------------------------------------------------------*/
body {
  font-family: var(--font-sans);
  background-color: var(--color-parchment);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}
 
/* Le parent definit 'Ubuntu' et 'Libre Baskerville' ici */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-ink-soft);
  letter-spacing: 0.01em;
}
 
a {
  text-decoration: none;
  transition: color var(--transition);
}
 
a:hover {
  color: var(--color-gold);
}
 
.article-box a:hover {
  color: var(--color-gold);
}
 
/* Focus moderne - remplace le outline: 1px dotted du parent */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.18);
  border-color: var(--color-gold) !important;
}
 
/*--------------------------------------------------------------
# Header principal
# Le parent definit .main_header { background: #efefef }
--------------------------------------------------------------*/
.main_header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
 
/*--------------------------------------------------------------
# Logo / Brand
# Parent : Libre Baskerville, couleur #161616
--------------------------------------------------------------*/
.navbar-brand,
.navbar-brand h1.site-title,
p.site-title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.04em;
}
 
.navbar-brand a {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ink);
  transition: color var(--transition);
}
 
.navbar-brand a:hover {
  color: var(--color-gold);
}
 
/*--------------------------------------------------------------
# Topbar
# Parent : .top-info { background: var(--second-color) }
# -> herite automatiquement du --second-color redefini
--------------------------------------------------------------*/
.top-info p {
  color: #C8BFA8;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
}
 
.top-btn {
  display: flex;
  justify-content: flex-end;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
}
 
a.topbar1-btn {
  background: var(--color-gold);
  color: #fff;
  padding: 7px 14px;
  display: inline-block;
  margin: 0;
  letter-spacing: 0.07em;
  font-size: 11px;
  transition: background var(--transition);
}
 
a.topbar1-btn:hover {
  background: var(--color-gold-light);
  color: #fff;
}
 
/*--------------------------------------------------------------
# Navigation principale
--------------------------------------------------------------*/
.site-navigation .primary-menu > li a {
  padding: 8px 18px;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 0;
  transition: color var(--transition);
}
 
/* Hover nav desktop - surcharge du parent (var(--first-color)) */
.site-navigation ul.primary-menu.theme-menu li a:hover,
.main-navigation .menu > li > a:focus {
  color: #fff !important;
  background: var(--color-gold);
  border-radius: var(--radius-sm);
}
 
/* Sous-menu - fond gere par --first-color (auto) */
.site-navigation .primary-menu ul {
  background-color: var(--color-gold);
}
 
ul.sub-menu,
#site-navigation .menu ul li a {
  border-radius: var(--radius-sm);
}
 
#site-navigation .menu ul li a:hover {
  color: var(--color-gold);
}
 
/* Surcharge du #FF782D orange du parent sur sous-menu */
.site-navigation ul.sub-menu > li > a:hover,
.main-navigation ul.sub-menu > li > a:focus {
  background: var(--color-gold-light) !important;
  color: #ffffff !important;
}
 
.site-navigation .primary-menu ul li a:hover,
.site-navigation .primary-menu ul li a:focus {
  background: var(--color-ink) !important;
  color: #ffffff !important;
}
 
/* Nav responsive - surcharge du #FC3657 / #FF782D */
@media screen and (max-width: 1000px) {
  .main-navigation .menu > li > a:hover,
  #site-navigation .menu ul li a:hover {
    color: var(--color-gold) !important;
  }
}
 
/*--------------------------------------------------------------
# Menu mobile (offcanvas)
# Parent code en dur : #FF782D, #1E192D - a ecraser
--------------------------------------------------------------*/
 
/* Fond du panneau offcanvas */
.offcanvas-wraper {
  background: var(--color-ink);
}
 
/* Bouton burger - parent : background: #FF782D */
span.navbar-control-trigger i {
  font-size: 30px;
  color: #fff;
  padding: 8px;
  background: var(--color-gold);
}
 
/* Bouton fermeture offcanvas - parent : background: #FF782D */
button.button-offcanvas-close {
  background: var(--color-gold);
  border-radius: var(--radius-sm);
  color: #fff;
}
 
/* Liens dans le menu offcanvas */
.offcanvas-main-navigation a,
.responsive-content-menu a {
  color: #C8BFA8;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.04em;
}
 
.offcanvas-main-navigation a:hover {
  color: var(--color-gold);
}
 
/*--------------------------------------------------------------
# Scroll-to-top button
# Parent utilise var(--first-color) - herite automatiquement
--------------------------------------------------------------*/
#button:hover,
#button:active {
  background-color: var(--color-ink);
}
 
/*--------------------------------------------------------------
# Slider
--------------------------------------------------------------*/
.slider-box {
  position: relative;
  overflow: hidden;
}
 
/* Surcharge de l'opacite 0.5 et du fond --second-color du parent */
.slider-box img {
  opacity: unset;
  width: 100%;
  height: 600px;
  object-fit: cover;
}
 
/* Overlay : noir chaud au lieu du fond plat du parent */
.slider-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(28, 26, 23, 0.82) 0%,
    rgba(28, 26, 23, 0.30) 60%,
    transparent 100%
  );
}
 
.slider-inner-box {
  z-index: 999;
  text-align: left;
}
 
.slider-inner-box h5 {
  color: #C8BFA8;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
}
 
/* Parent : uppercase, bold, var(--first-color) -> texte elegant */
.slider-inner-box h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  text-transform: none;
  color: #FAF7F2;
  line-height: 1.2;
  margin-bottom: 20px;
}
 
.slider-inner-box p {
  color: #C8BFA8;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
}
 
.slider-btns {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 28px;
}
 
/* Bouton principal slider - fond or */
.slide-btn-1 a {
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  display: inline-block;
  font-weight: 400;
  color: #fff;
  background: var(--color-gold);
  transition: background var(--transition), color var(--transition);
}
 
.slide-btn-1 a:hover {
  color: var(--color-gold);
  background: var(--color-surface);
}
 
/* Bouton secondaire slider - contour */
.slide-btn-2 a {
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  display: inline-block;
  font-weight: 400;
  color: #fff;
  background: transparent;
  border: 1px solid var(--color-gold);
  transition: background var(--transition), color var(--transition);
}
 
.slide-btn-2 a:hover {
  background: var(--color-gold);
  color: #fff;
}
 
/*--------------------------------------------------------------
# Titres de sections
# Parent : .theme-area-headlines h2 { font-size: 60px; font-weight: 900 }
--------------------------------------------------------------*/
.theme-area-headlines h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}
 
/*--------------------------------------------------------------
# Produits
--------------------------------------------------------------*/
 
/* Onglets */
#author-product-tabs .tab-pane {
  display: none;
}
 
#author-product-tabs .tab-pane.show.active {
  display: block;
}
 
#author-product-tabs .men-tabs ul li button {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 400;
  padding-bottom: 15px;
  letter-spacing: 0.03em;
}
 
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background: transparent;
  border: none;
}
 
/* Fix Bootstrap tabs (conserve du child precedent) */
.featured .tab-content { display: block; }
.featured .tab-content > .tab-pane {
  display: none;
  opacity: 0;
  visibility: hidden;
}
.featured .tab-content > .tab-pane.active {
  display: block;
  opacity: 1;
  visibility: visible;
  animation: fadeInPane 0.3s ease;
}
 
@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
.men-tabs a.nav-link {
  border: 0;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
}
 
.men-tabs a.nav-link.active {
  position: relative;
  background: none;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}
 
.men-tabs a.nav-link.active::before {
  content: "";
  position: absolute;
  left: -5px;
  transform: rotate(90deg);
  height: 60%;
  width: 10px;
  background: var(--color-gold);
  border-radius: 10px;
}
 
.men-tabs ul.nav-tabs.nav {
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
/* Sous-titres section produits */
.featured h4.main-heading {
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
 
.featured p.main-content {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.7;
}
 
section.featured {
  background: var(--color-surface);
}
 
/* Image produit */
.prodimg_box img {
  height: 300px;
  width: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
 
.prodimg_box:hover img {
  transform: scale(1.03);
}
 
/* Titres produits */
h4.hidedesktop a,
.product-content h3 a {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--color-ink-soft);
  transition: color var(--transition);
}
 
h4.hidedesktop a:hover,
.product-content h3 a:hover {
  color: var(--color-gold);
}
 
/* Prix */
.text_box p.price,
p.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gold);
}
 
.text_box p.price del {
  font-weight: 300;
  color: var(--color-muted);
}
 
.sells-product .text_box {
  padding: 18px 15px;
  text-align: center;
}
 
/* Badge promo */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
.sells-product span.onsale {
  position: absolute;
  top: 5%;
  left: 5%;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  background: var(--color-gold);
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: none;
}
 
/* Fond de section */
.bg-color, .mask1 {
  background: var(--color-gold-subtle);
  min-height: 400px;
}
 
/* Bouton produit principal */
a.product-btn,
.pro-button a {
  background: var(--color-gold);
  padding: 8px 22px;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  color: #fff;
  border-radius: var(--radius-sm);
  display: inline-block;
  font-weight: 500;
  transition: background var(--transition), box-shadow var(--transition);
}
 
a.product-btn:hover,
.pro-button a:hover {
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  box-shadow: none;
}
 
/* Boutons WooCommerce */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wp-block-button__link {
  background: var(--color-gold);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background var(--transition), border var(--transition), color var(--transition);
}
 
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.added_to_cart:hover {
  border: 1px solid var(--color-gold);
  background: transparent;
  color: var(--color-gold);
}
 
/* Boutons WooCommerce blocks */
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained,
button.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained,
a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
  background: var(--color-gold);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
}
 
/* Cart et wishlist */
.cart-btn a,
.cart-btn a i {
  color: var(--color-gold);
}
 
a.add_to_wishlist.single_add_to_wishlist {
  background: rgba(255, 255, 255, 0.92);
  padding: 10px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  text-align: center;
  display: block;
}
 
a.add_to_wishlist.single_add_to_wishlist i {
  margin-right: 0;
  color: var(--color-muted);
}
 
.prodimg_box .yith-wcwl-wishlistaddedbrowse a:after,
.yith-wcwl-wishlistexistsbrowse a:after {
  content: '\f004';
  font-size: 14px;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  opacity: 1;
  width: 36px;
  height: 36px;
  padding: 8px;
  color: var(--color-muted);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}
 
.prodimg_box .yith-wcwl-wishlistaddedbrowse { display: flex; position: absolute; }
.prodimg_box span.wishlist { position: absolute; top: 5px; right: 50px; }
.prodimg_box a.added_to_cart.wc-forward { margin-left: 49px; padding: 10px !important; }
.product-content .pro-button a { box-shadow: var(--shadow-sm); }
span.feedback { font-size: 0; }
 
/* Etoiles WooCommerce */
.woocommerce .star-rating span::before,
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--color-gold);
}
 
/* Ordering select */
.woocommerce .woocommerce-ordering select {
  background: var(--color-gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
}
 
/* Compte client */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  background: var(--color-gold);
}
 
.woocommerce-account .woocommerce-MyAccount-navigation ul li:hover {
  background: var(--color-ink);
}
 
/* Citations */
.btn-primary,
.wp-block-quote,
.wp-block-quote:not(.is-large):not(.is-style-large),
.wp-block-pullquote {
  border-color: var(--color-gold) !important;
}
 
/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.navigation.pagination .nav-links a.current,
.navigation.pagination .nav-links a:hover,
.navigation.pagination .nav-links span.current,
.navigation.pagination .nav-links span:hover {
  background: var(--color-gold);
  color: #fff;
  border: 1px solid var(--color-gold);
}
 
/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar h5,
.sidebar .wp-block-search .wp-block-search__label,
.sidebar .widget h2.wp-block-heading {
  background: var(--color-gold);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.05em;
}
 
.sidebar h1 a, .sidebar h2 a, .sidebar h3 a,
.sidebar h4 a, .sidebar h5 a, .sidebar h6 a {
  color: #fff;
}
 
.sidebar input[type="submit"],
.sidebar button[type="submit"] {
  background: var(--color-gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  width: 100%;
  padding: 0.6rem;
  cursor: pointer;
  transition: background var(--transition);
}
 
.sidebar input[type="submit"]:hover,
.sidebar button[type="submit"]:hover {
  background: var(--color-gold-light);
}
 
.sidebar .tagcloud a:hover {
  background: var(--color-gold);
  color: #fff;
}
 
.widget_text p a,
.widget h1 a, .widget h2 a, .widget h3 a,
.widget h4 a, .widget h5 a, .widget h6 a {
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
}
 
/*--------------------------------------------------------------
# Footer
# Parent : #colophon utilise var(--second-color) - herite auto
--------------------------------------------------------------*/
#colophon {
  background: var(--color-ink);
}
 
#colophon a:hover,
#colophon a:focus {
  color: var(--color-gold);
}
 
.footer-widgets h1, .footer-widgets h2, .footer-widgets h3,
.footer-widgets h4, .footer-widgets h5, .footer-widgets h6 {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #C8BFA8;
}
 
/*--------------------------------------------------------------
# Sticky post
--------------------------------------------------------------*/
.sticky .entry-title::before {
  background: var(--color-gold);
}
 
/*--------------------------------------------------------------
# Navigation articles (precedent / suivant)
--------------------------------------------------------------*/
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover,
.posts-navigation .nav-previous a:hover,
.posts-navigation .nav-next a:hover {
  background: var(--color-gold);
  color: #fff;
}
 
/*--------------------------------------------------------------
# Commentaires
--------------------------------------------------------------*/
.comment-respond input#submit {
  background: var(--color-gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 20px;
  cursor: pointer;
  transition: background var(--transition);
}
 
.comment-respond input#submit:hover {
  background: var(--color-gold-light);
}
 
/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media screen and (min-width: 320px) and (max-width: 720px) {
  .sidenav #site-navigation { padding: 40px 0; }
 
  .main-navigation .sub-menu,
  .main-navigation .menu > li > a:hover,
  .current-menu-item a { background: transparent; }
 
  .topbar-text { padding: 10px 0; }
  .social-link { margin-top: 10px; }
  .bg-color { min-height: 350px; }
  .top-btn { justify-content: center; }
}
 
@media screen and (min-width: 768px) and (max-width: 1000px) {
  i.far.fa-times-circle { padding: 20px; }
  .sidenav .closebtn { right: 0; }
}
 
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .main-navigation .menu { padding: 0 35px; }
}