/*
Theme Name:     Neve Child
Theme URI:      https://themeisle.com/themes/neve/
Template: neve
Author:         ThemeIsle
Author URI:     https://themeisle.com
Description:    Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you!
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    neve
Tags: blog, custom-logo, e-commerce, rtl-language-support, post-formats, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, wide-blocks, block-styles
*/

.wrapper,.wrapper p,.wrapper a,.wrapper span,h1,h2,h3,h4,.site-logo{
	font-family: 'Banda' !important;
}

.hfg_header.site-header {
    box-shadow: none !important;
}

  .hidden {
    display: none;
  }

a, a:hover{
    color:black;
}

header.header {
    padding-top: 60px;
}

audio {
    min-width: 100%;
    background: black;
    padding: 5px;
}

.twae-description .toggle-btn {
    padding: 5px;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.toggle-content {
    padding-top: 10px;
}

.toggle-content button {
    min-width: 100%;
}


.shopLeft.sticky {
  position: fixed;
  top: 5px;
  box-sizing: border-box;
}

/* pillars -*/
.headerElements {
    max-width: 1800px;
    margin: auto;
    position: relative;
    display: block;
}

.headerElements .container {
    max-width: 100%;
    width: 1800px;
    margin: auto;
    position: relative;
    display: block;
    /* height: 20px; */
}

.headerElements img{
	width: 100%;
	position: absolute;
}

.pilRight {
    position: absolute;
    right: 0px;
}

.pilLeft {
    position: absolute;
    left: 0px;
}

/* menu */
.current-menu-item a {
    color: black !important;
    font-weight: bold;
}

nav a:hover{
    font-weight: bold;	
}

.site-logo:before {
    content: 'Celebrating';
    font-size: 24px;
    padding-right: 20px;
}

.site-logo:after{
    content: '100 Years!';
    font-size: 24px;
    padding-left: 20px;
}

.hfg-slot.right img {
    margin-right: 50px;
}

/*-- fixed second menu --*/

.is-fixed .header-bottom-inner {
    position: fixed;
    width: 100%;
    background: #00000024;
    z-index: 1000;
    top: 0px;
}



/* footer */
.footer-bottom-inner {
    display: none;
}


.footerLogos{
    margin-bottom: 50px;
}

.footerLogos img {
    display: inline-block !important;
    padding: 10px;
}

.site-footer {
    background: white;
    padding-top: 60px;
}

footer .container {
    max-width: 1225px;
    margin: auto !important;
}

footer h2, .widget-title {
    font-size: 20px !important;
    margin-bottom: 30px !important;
    line-height: 20px;
}

.footerBottom {
    background: white;
    padding-top: 100px;
    position: relative;
}

.footerBottom .container {
    max-width: 1300px !important;
    position: relative;
}

.imageLeft{
	left:0px;
	bottom:0px;
    position: absolute;
    bottom: 0px;
}

.imageRight{
    position: absolute;
    bottom: 0px;	
    right:0px;
	bottom:0px;
}

.copywrite {
    max-width: 800px;
    margin: auto;
    text-align: center;
}

.copywrite p {
    font-size: 10px;
    font-family: 'Banda' !important;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 14px;
}

.copywrite img {
    width: 150px;
    display: block;
    margin: auto;
    padding-bottom: 60px;
}

.copywrite span {
    position: relative;
    top: -20px;
}

.copywrite a {
    color: black;
    font-weight: bold;
}

.footerBottom img {
    max-width: 250px;
}

.footerBottom {
    background: white;
    padding-top: 100px;
    position: relative;
    padding-bottom: 20px;
}

.site-footer {
    background: white;
    padding-top: 60px;
    border-top: 1px solid black;
}


.scroll-to-top {
    background: #000000;
    border-radius: 0px;
}


/*----- Map styling ----*/
  .shop {
        text-align: center;
    }  
    .shop span {
        position: relative;
        color: white;
        top: 8px;
    }
  .parade-wrapper {
    position: relative;
    margin: 2rem auto;
    max-width: 1200px;
    width: 95%;
  }
  .scroll-box { width: 100%; overflow-x: hidden; }
  .parade-container {
    position: relative;
    width: 100%;
    aspect-ratio: 2048 / 551;
    overflow: hidden;
  }
  .parade-container img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 1s ease;
    opacity: 0;
    z-index: 1;
  }
  .parade-container img.active { opacity: 1; z-index: 2; }
  .shops-layer { position: absolute; inset: 0; z-index: 3; }
  .shop {
    position: absolute;
    border: 3px solid transparent;
    transition: all 0.25s ease;
  }
  .shop:hover {
      border: 0px solid #000;
      background-color: rgb(0 127 161 / 28%);
      transform: scale(1.03);
      z-index: 4;
  }
  .shop {
      width: 12%;
      top: 9%;
      height: 84%;
  }
  .shop1 { left: 3%; }  
  .shop2 { left: 14%; }
  .shop3 { left: 25%; width: 11%; }
  .shop4 { left: 35%; width: 11%; }
  .shop5 { left: 46%; width: 11%; }
  .shop6 { left: 56%; width: 11%; }
  .shop7 { left: 67%; width: 10%; }
  .shop8 { left: 77%; width: 10%; }
    .shop9 {
        left: 87%;
        width: 9%;
        height: 34%;
        top: 57%;
    }
  .toggle-btn,button#toggleButton  {
      background-color: #000000;
      font-family: "Banda", Sans-serif;
      font-size: 20px;
      font-weight: 500;
      transition-duration: 0s;
      border-style: solid;
      border-width: 1px 1px 1px 1px;
      border-color: #000000;
      border-radius: 0px 0px 0px 0px;
      padding: 15px 60px 15px 60px;
  }
  .toggle-btn:hover,button#toggleButton:hover { background-color: #FFF; color:black; border-color:black;}
    button#toggleButton {
        width: 100%;
    }
  @media (max-width: 768px) {
    .scroll-box {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      border: 0px solid #000;
    }
    .parade-container { width: 1200px; aspect-ratio: 2048 / 551; margin: 0 auto; }
    .parade-container img { width: 1200px; }
    .shops-layer { width: 1200px; }
  }
  /* Scroll controls under image */
  .scroll-controls {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
  }

  .scroll-btn {
    background: #000;
    color: #fff;
    border: 3px solid #000;
    width: 52px;
    height: 52px;
    font-size: 28px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
  }

  .scroll-btn:active {
    transform: scale(0.95);
  }

  /* Mobile tap-active state */
  .shop.is-active {
    border: 0px solid #000;
    background-color: rgb(0 127 161 / 28%);
    transform: scale(1.03);
    z-index: 4;
  }

  /* Hide horizontal scrollbar completely */
  .scroll-box {
    overflow-x: scroll;     /* must still be scrollable */
    -ms-overflow-style: none;   /* IE / Edge */
    scrollbar-width: none;      /* Firefox */
  }

  .scroll-box::-webkit-scrollbar {
    display: none;              /* Chrome / Safari / iOS */
  }

  /* Hide arrows on desktop */
  @media (min-width: 769px) {
    .scroll-controls {
      display: none;
    }
  }


/*-- shop images --*/
    .image-toggle-wrapper {
      width: 100%;
      text-align: center;
    }

    .image-toggle-wrapper img {
      width: 100%;
      height: auto;
      display: block;
      margin-bottom: 10px;
    }

    .image-toggle-wrapper button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    .image-toggle-wrapper img {
        padding-left: 20%;
        padding-right: 20%;
        padding-top: 20px;
    }
    .toggle-content {
        font-size: 14px;
    }

/*--- timeline --*/
.twae-content {
    border-radius: 0px !important;
    border: 1px solid black !important;
}

.twae-label-big {
    width: max-content;
    background: black;
    color: white !important;
    padding: 10px;
}

.twae-story-right .twae-label-big {
    position: absolute !important;
    right: 0px;
    top: -8px;
}

.twae-story-left .twae-label-big{
    position: absolute !important;
    top: -8px;  
} 

.twae-description ul {
    list-style: inside;
}



/*-- lightbox --*/
.hidden {
  display: none !important;
}

.toggle-content div {
    padding-bottom: 20px;
}

.toggle-content div:last-child {
    padding-bottom: 0px;
}

button.lightbox-btn img {
    max-width: 100px;
    float: left;
    padding-right: 10px;
}


button.lightbox-btn {
    border-radius: 0px;
    background: black;
    color: white;
    font-family: 'Banda' !important;
    text-align: left;
}

/* Lightbox overlay */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Lightbox image */
#lightbox-img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 8px;
}

/* Close button */
#close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

button.articleBtn {
    border-radius: 0px;
    background: black;
    font-family: 'Banda' !important;
    text-align: left;
}

.articleBtn a {
    color: white !important;
}

.articleBtn img{
    max-width: 100px;
    float: left;
    padding-right: 10px;
}

/*-- blog styling --*/

h2.comments-title {
    margin-bottom: 20px;
}

.entry-header {
    background: white;
    padding: 20px;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    margin-bottom: 0px !important;
}


.entry-content {
    background: white;
    padding: 20px;
    margin-bottom: 20px !important;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}


/*-- Form styling --*/
div#respond {
    background: white;
    border-radius: 0px;
    border: 1px solid black;
    padding: 20px;
}

.comment-form-comment textarea {
    border-radius: 0px;
    border: 1px solid black !important;
}

input#submit,#contact .wpcf7-submit{
    background-color: #000000;
    font-family: "Banda", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    transition-duration: 0s;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #000000;
    border-radius: 0px 0px 0px 0px;
    padding: 15px 60px 15px 60px;
}

#contact .wpcf7-text,#contact textarea {
    border: 1px solid black !important;
    border-radius: 0px !important;
    min-width: 100% !important;
    width: 100% !important;
}

#contact label {
    min-width: 100%;
}

ol.nv-comments-list {
    background: white;
    padding: 20px;
    border: 1px solid black;
}

.scroll-btn:active,.scroll-btn:hover {
    transform: scale(0.95);
    background: grey;
}

a.wp-block-button__link.wp-element-button {
    background-color: #000000;
    font-family: "Banda", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    transition-duration: 0s;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #000000;
    border-radius: 0px 0px 0px 0px;
    padding: 15px 60px 15px 60px;
    /* min-width: 100% !important; */
}

a.wp-block-button__link.wp-element-button:hover {
    /* color: white !important; */
    background: white !important;
    border: 1px solid black;
}

figcaption.wp-element-caption {
    line-height: 14px !important;
    font-weight: bold !important;
}

@media (max-width: 1600px) {
    .headerElements{
        display: none;
    }
    header.header{
        padding-top: 0px;
    }

}


@media (max-width: 959px) {
    .sticky {
        left: 0px !important;
    }
    .site-logo:before{
        content:none;
    }
    .site-logo:after{
        content:'Celebrating 100 years!';
    }
    .nv-html-content img {
        width: 75px;
    }
    .twae-story-left .twae-label-big,.twae-story-right .twae-label-big{
        right: 0px;
        z-index: 1;
    }
    .image-toggle-wrapper img {
        padding-left: 20px;
        padding-right: 20px;
    }
    .sticky {
        position: relative !important;
        width: 100% !important;
        top: 0px !important;
    }
    .copywrite p {
        padding-left: 0px;
        padding-right: 0px;
    }
    footer .hfg-slot {
        padding-bottom: 50px;
    }
    .imageRight,.imageLeft{
        display: none;
    }
}

@media (max-width: 650px) {
    .site-logo:after{
        content:none;
    }
    .nv-html-content img {
        width: 75px;
    }
}