/** base styles start **/
body {
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   background: #fff;
}

/** base styles end **/

/** header styles start **/
.header {
   padding: 0;
   box-shadow: none;
   display: flex;
   flex-direction: column;
   position: relative;
   z-index: 11;
   position: sticky;
}

.header-menu {
   background: #0092d3;
}

.header-menu a {
   color: #fff;
   fill: #fff;
   text-decoration: none;
}

.header .container {
   max-width: 1224px;
}

.header-bottom {
   padding: 10px;
   box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.5);
}

.header-bottom .container {
   justify-content: space-between;
   display: flex;
   max-height: 133px;
   gap: 50px;
}

.header-logo .navbar-brand {
   margin: 0;
   max-width: 194px;
   padding: 0;
}

.header-image a {
   display: block;
}

.header-image img {
   max-width: 349px;
}


.header-image.right-img img {
   margin-top: 25px;
}

.menu-opner {
   display: none;
}

.nav {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
   width: 100%;
   justify-content: space-between;
   align-items: center;
}

.nav>li {
   position: relative;
}

.nav>li>a {
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #fff;
   padding: 23px 20px;
   transition: transform 0.3s ease;
   transform-origin: center;
   display: inline-block;
   will-change: transform;
}

.nav>li:has(> ul)>a::after {
   content: "\f0d7";
   font-family: fontAwesome;
   display: inline-block;
   margin-left: 12px;
}

.header-menu-container>ul>li:hover>a {
   transform: scale(1.2);
}

.nav>li>ul {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background: #0092d3;
   min-width: 202px;
   z-index: 11;
}

.nav>li:hover>ul {
   display: block;
}

.nav>li>ul>li>a {
   font-size: 18px;
   font-weight: 500;
   padding: 13px 20px;
   display: block;
   color: #fff;
}

.nav>li>ul>li>a:hover {
   background: #efb02a;
}

.header-top {
   display: flex;
   justify-content: space-between;
   padding: 0;
}

.header-category .nav-link {
   padding: 0 10px;
   font-size: 12px;
   color: #fff;
}

.header-category .nav-link:hover {
   color: #efb02a;
}

/** header styles end **/

ul.category-tree>li {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   flex-direction: column;
   width: 100%;
}
ul.category-tree>li.has-child > a{
   display: none;
}
ul.category-tree {
   margin: 0 auto;
   flex-direction: column;
}

ul.child {
   display: flex;
   flex-direction: column;
   margin-left: 0;
   padding-left: 0;
   width: 100%;
}

.header-category {
   padding: 20px 0;
   background: #060606;
}

.category-links-holder {
   position: relative;
}

.category-opner {
   position: relative;
   padding: 12px 15px;
   background: #efb02a;
   color: #161616;
   font-size: 16px;
   border-radius: 3px;
   text-transform: uppercase;
   min-width: 200px;
   font-weight: 600;
   cursor: pointer;
   border: 0;
}

.category-opner:hover {
   background: #f6bb3a;
}

.category-opner::after {
   content: "\f0d7";
   font-family: fontAwesome;
   position: absolute;
   right: 15px;
   transform: rotate(90deg);
}

.category-opner:hover::after {
   animation: bumpRight 1.5s linear infinite;
}

#login-link {
   display: flex;
}

.header-category .container {
   display: flex;
   justify-content: space-between;
   max-width: 1224px;
   align-items: center;
}

.fixed-category-links {
   position: fixed;
   right: 0;
   top: 0;
   background: #efb02a;
   padding: 40px 0;
   bottom: 0;
   height: 100%;
   width: 300px;
   z-index: 12;
   box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.5);
   margin-right: -350px;
   transition: all 0.3s ease-in-out;
   opacity: 0;
   visibility: hidden;
}

.fixed-category-links.active {
   margin-right: 0;
   visibility: visible;
   opacity: 1;
   transition: all 0.3s ease-in-out;
}

.close-fixed-category-links {
   position: absolute;
   top: -9px;
   right: 10px;
   font-weight: 100;
   font-size: 40px;
   transform: rotate(45deg);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
}

.close-fixed-category-links:hover {
   transform: rotate(-45deg);
}

ul.category-tree li a {
   font-size: 1.2rem;
   padding: 10px 20px;
   display: block;
   border-left: 5px solid transparent;
   transition: padding-left 0.3s ease-in-out;
   width: 100%;
   box-sizing: border-box;
}

ul.category-tree li a::after {
   display: none;
}

ul.category-tree li a:hover {
   padding-left: 40px;
   transition: padding-left 0.3s ease-in-out;
   border-left: 5px solid #0092d3;
   text-decoration: none;
   color: #161616;
   background-color: #fff;
}


.modal.show .modal-dialog {
   max-width: 800px;
}

.modal.show .modal-dialog {
   max-width: 800px;
}

.header-category .nav-link.disabled {
   color: #7e7e7e;
}

.modal.show .modal-dialog {
   max-width: 800px;
   margin: 70px auto;
}

.modal-open .modal {
   max-width: initial;
}

#banner-heading {
   position: relative;
   overflow: hidden;
}

.inner-page-banner {
   position: relative;
   height: 325px;
}

.inner-page-banner img {
   width: 100%;
}

#banner-heading h2,
#banner-heading h1 {
   padding: 25px 0px;
   text-align: center;
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: "Lilita One", Sans-serif;
   font-size: 80px;
   font-weight: 400;
   text-transform: uppercase;
   text-shadow: 3px 3px 0px #000000;
   color: #FFFFFF;
}

div#banner-heading+.container .category-box,
div#banner-heading+.inner-page-contents .category-box {
   display: none;
}

.notifications {
   position: fixed;
   bottom: 0;
   z-index: 9999;
   left: 0;
   width: 100%;
   border-radius: 0;
   margin: 0;
}

.product-card {
   padding: 15px;
   border-radius: 5px;
   border: 1px solid #ededed;
   position: relative;
   overflow: hidden;
   z-index: 0;
   transition: transform 0.3s ease;
}

/* Add glow effect with a pseudo-element */
.product-card::before {
   content: '';
   position: absolute;
   top: 3px;
   left: 3px;
   right: 3px;
   bottom: 3px;
   border-radius: 5px;
   background: transparent;
   z-index: -1;
   opacity: 0;
   box-shadow: 0 0 15px #0092d3, 0 0 30px #0092d3;
   transition: opacity 0.4s ease, box-shadow 0.4s
}

/* Hover effect */
.product-card:hover::before {
   opacity: 1;
   box-shadow: 0 0 15px #0092d3, 0 0 30px #9ce1ff;
}

.product-card:hover {
   border: 1px solid transparent;
}

.plp-product-name {
   margin: 20px 0 10px;
   font-size: 18px;
   text-transform: capitalize;
   font-family: "Montserrat", sans-serif;
}

.price-bottle-group {
   width: 100%;
   margin: 0 0 20px;
}

.product-image-plp {
   transition: transform 1s ease;
   max-width: 85%;
   margin: 0 auto;
}

.product-card:hover .product-image-plp {
   animation: doubleFlip 1.5s linear infinite;
}

.product-card .btn {
   height: 38px;
   padding: 0 20px;
}

.product-card .ui-spinner .form-control-sm {
   height: auto;
   padding: 0;
   font-size: 16px;
   line-height: normal;
   width: 50px !important;
   text-align: center;
   line-height: 36px;
   margin: 0 9px 0 0;
}

.btn {
   background: #efb02a;
   color: #161616;
}

.btn:hover {
   background: #161616;
   color: #efb02a;
}

.bottle-size {
   color: #5d5d5d;
}

.page-link {
   color: #3d3d3d;
}

.product-options hr {
   display: none;
}

/**footer start here**/
.footer-top {
   border-top: 1px solid #ededed;
   padding: 40px 0;
}

.footer-top img {
   max-height: 202px;
}

.footer-top .container {
   max-width: 995px;
}

.state-image img {
   max-height: 176px;
}

.footer-top ul {
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.5px;
   margin-bottom: 18px;
   display: block;
}

.footer-top ul li {
   margin-bottom: 5px;
   display: block;
}

.f-title {
   font-size: 20px;
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #000000;
   margin: 10px 0;
   font-family: "Lilita One", Sans-serif;
   display: block;
}

.footer-middle {
   padding: 50px 0;
   background: #f8bf4c;
}

.footer-middle-content-left {
   padding: 30px 40px 0;
}

.join-our-club-link {
   background-color: #0092d3;
   font-family: "Montserrat", Sans-serif;
   font-size: 14px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1px;
   fill: #000000;
   color: #000000;
   border-radius: 0px 0px 0px 0px;
   padding: 10px 22px 10px 22px;
   transition-duration: .3s;
   transition-property: transform;
   display: inline-block;
   text-align: center;
}

.join-our-club-link:hover {
   transform: scale(1.1);
   transition-duration: .3s;
   color: #000000;
   text-decoration: none;
   transition-property: transform;
}

.footer-middle a:hover {
   color: #000000;
   text-decoration: none;
}

.footer-middle a.footer-fb-icon {
   font-size: 24px;
   color: #f8bf4c;
   width: 28px;
   height: 28px;
   background: #000;
   border-radius: 100%;
   text-align: center;
   transition-duration: .3s;
   text-decoration: none;
   transition-property: transform;
   display: inline-block;
}

.footer-middle a.footer-fb-icon:hover {
   background: #0092d3;
   transform: scale(1.1);
   transition-duration: .3s;
   text-decoration: none;
   transition-property: transform;
}

.footer-middle-content-left.f-right-content {
   padding: 30px 0;
}

.f-right-content .join-our-club-link {
   background: #EC003B;
}

.footer-middle-holder {
   display: flex;
}

#footer {
   background-color: #0167c6;
   font-weight: 600;
}

.footer-nav-holder {
   display: inline-flex;
}

.footer-nav-holder .nav {
   display: inline-block;
   background: transparent;
}

.footer-nav-holder .nav li {
   padding: 0 0 0 3px;
   display: inline-block !important;
   font-size: 14px;
}

.footer-nav-holder .nav li a {
   padding: 0;
}

.footer-nav-holder .nav li::after {
   content: "|";
   display: inline-block;
   margin-left: 8px;
}

.footer-nav-holder .nav li:last-child::after {
   content: "";
   display: none;
}

.notifications.alert.alert-notification {
   background: #c6ffc4;
}

.shareThis {
   display: none;
}

.product-detail-wrapper .product-detail {
   padding: 0 10px;
   flex: 0 0 60%;
   line-height: 24px;
}

.product-detail-wrapper .product-image {
   flex: 0 0 40%;
   margin-bottom: 20px;
}

/** clubs **/
.inner-page-contents.clubs {
   max-width: 100%;
   width: 100%;
   padding-top: 15px;
}

.clubs .store-card-header {
   height: auto;
}

.clubs #joining_club {
   max-width: 1024px;
   margin: 0 auto;
}

.clubs .card-title {
   margin: 10px 0 0;
   text-align: left !important;
   font-size: 14px;
   letter-spacing: 0.5px;
}

.clubs .card-body {
   margin-bottom: 50px;
}

.clubs .card-footer {
   border: 0;
   background: #fff;
   min-height: 110px;
   padding-top: 40px;
}

.clubs .store-card-column .card .btn {
   display: block;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-family: "Lilita One", sans-serif;
   font-size: 14px;
   border-radius: 0 20px 0 20px;
   height: 40px;
   padding: 0 15px;
   line-height: 40px;
   transition: border-radius 0.2s ease-in-out;
   width: 70%;
   margin: 0 auto;
}

.clubs .store-card-column .card:hover .btn {
   border-radius: 20px 0 20px 0;
   transition: border-radius 0.2s ease-in-out;
}

.clubs .store-card-column .card {
   position: relative;
   margin-bottom: 15px;
   overflow: hidden;
   border-radius: 0 20px 0 20px;
   transition: border-radius 0.2s ease-in-out;
   margin: 0;
}

.clubs .store-card-column .card:hover {
   border-radius: 20px 0 20px 0;
   transition: border-radius 0.2s ease-in-out;
}

.clubs .store-card-column .card::before {
   content: "";
   position: absolute;
   bottom: 90px;
   right: 50%;
   margin-right: -45px;
   width: 90px;
   height: 90px;
   background: #fff url(https://wineryonthebay.bottlethreesixty.net/themes/wineryonthebay/uploads/userfiles/images/crab-logo.png) no-repeat center center;
   background-size: 90%;
   transform: rotate(0deg);
   transition: none;
   border-radius: 100%;
   border: 1px solid #efb02a;
}

.clubs .card-header {
   position: relative;
   overflow: hidden;
   border: 0;
   background: transparent;
}

.clubs .card-header::after {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: rgba(255, 215, 0, 0.2);
   transition: left 0.5s ease;
   pointer-events: none;
}

.clubs .card:hover .card-header::after {
   left: 0;
}

#club-form {
   max-width: 950px;
   margin: 0 auto;
   border: 1px solid #ededed;
   padding: 20px;
}

#club-form .btn {
   text-transform: uppercase;
   letter-spacing: 1px;
   font-family: "Lilita One", sans-serif;
   font-size: 14px;
   width: 150px;
   height: 40px;
}

.clubs .card-deck {
   margin: 0;
   gap: 30px;
}

.clubs .form-horizontal {
   max-width: 1024px;
   margin: 0 auto;
}

.clubs .card-deck.justify-content-between {
   justify-content: flex-start !important;
}

.beer-club-page h2 {
   font-family: "Lilita One", Sans-serif;
   font-size: 50px;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 1em;
   letter-spacing: 0px;
   color: #000000;
}

.beer-club-page .join-our-club-link {
   background-color: #efb02a;
   height: 54px;
   line-height: 54px;
   display: inline-block;
   padding: 0 30px;
}

.beer-club-page .join-our-club-link.benefits-join-link {
   width: 100%;
   height: 70px;
   line-height: 70px;
   transition: transform 0.3s ease;
   animation: pulse 2.5s infinite;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.beer-club-page .join-our-club-link.benefits-join-link:hover {
   transform: scale(1.1);
}

@keyframes pulse {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.08);
   }

   100% {
      transform: scale(1);
   }
}

.beer-club-page .page-content {
   max-width: initial;
   padding: 0;
}

.beer-club-join-content {
   max-width: 1140px;
   margin: 100px auto;
   padding: 0 15px;
   text-align: center;
}

.beer-club-page .beer-club-join-content.bcjc-bottom h2 {
   color: #0092D3;
   font-family: "Lilita One", Sans-serif;
   font-size: 40px;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 1em;
   letter-spacing: 0px;
}

.beer-club-page .beer-club-join-content.bcjc-bottom h2 p {
   color: #EFB02A;
}

.club-member-benefits {
   background-image: url(https://wineryonthebay.bottlethreesixty.net/themes/wineryonthebay/uploads/userfiles/images/Rockport-Beach.jpg);
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
   padding: 100px 15px;
}

.club-member-benefits {
   position: relative;
}

.club-member-benefits-content {
   max-width: 766px;
   padding: 50px 70px;
   background-color: #FFFFFFE0;
   transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
   margin: 0 auto;
   position: relative;
}

.club-member-benefits-content img {
   max-width: 100%;
}

.club-member-benefits-content ul {
   margin: 20px 0 30px;
   display: block;
}

.club-member-benefits-content ul li {
   font-family: "Montserrat", Sans-serif;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.5px;
   padding-bottom: 5px;
}

.scrolling-image {
   position: absolute;
   top: 50%;
   left: -195px;
   transform: translateY(-50%);
   width: 242px;
   height: 164px;
   pointer-events: none;
   transition: transform 0.6s ease;
}

.club-member-benefits-content h2 {
   font-family: "Lilita One", Sans-serif;
   font-size: 50px;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 45px;
   letter-spacing: 0px;
   color: #EFB02A;
}

.club-member-benefits-content p {
   font-family: "Montserrat", Sans-serif;
   font-weight: 600;
   margin: 30px 0;
   font-size: 18px;
   line-height: 27px;
}

@keyframes rotateCrab {
   0% {
      transform: rotate(0deg);
   }

   50% {
      transform: rotate(15deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

.store-card-column .card:hover::before {
   animation: rotateCrab 1s infinite ease-in-out;
}

@keyframes doubleFlip {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.02);
   }

   100% {
      transform: scale(1);
   }
}

@keyframes bumpRight {
   0% {
      transform: rotate(90deg) translateY(0);
   }

   50% {
      transform: rotate(90deg) translateY(20px);
   }

   100% {
      transform: rotate(90deg) translateY(0);
   }
}

@media only screen and (min-width: 1024.577px) {
   .header-menu {
      display: block !important;
   }

   .text-image-right {
      text-align: right;
      flex: 0 0 21%;
   }

   .state-image {
      flex: 0 0 28%;
      max-width: 28%;
   }

   .width-large {
      width: 30%;
   }

   .width-small {
      width: 20%;
   }

   .img-right-side {
      text-align: right;
   }

   .product-detail-wrapper .product-detail {
      padding: 0 30px;
   }
}

@media only screen and (max-width: 1450px) {
   .clubs .card-deck.justify-content-between {
      justify-content: center !important;
   }

   .clubs .store-card-column .card {
      flex: 0 0 23%;
   }
}

@media only screen and (max-width: 1200px) {
   .nav>li>a {
      font-size: 13px;
      padding: 18px 12px;
   }

   .clubs .store-card-column .card {
      flex: 0 0 30%;
   }
}

@media only screen and (max-width: 1024px) {

   #banner-heading h2,
   #banner-heading h1 {
      font-size: 60px;
   }

   .footer-nav-holder .nav li::after {
      display: none;
   }

   .beer-club-page h2 {
      font-size: 26px;
   }

   .clubs .store-card-column .card {
      flex: 0 0 47%;
   }

   .header .container {
      padding: 0;
   }

   .category-links-holder {
      margin: 0 0 15px;
   }

   .menu-opner {
      display: inline-flex;
      padding: 8px;
      background: #EFB02A;
      border-radius: 3px;
   }

   .hamburger {
      width: 30px;
      height: 20px;
      position: relative;
      cursor: pointer;
      transition: 0.3s ease;
      display: inline-block;
   }

   .hamburger span {
      position: absolute;
      height: 3px;
      width: 100%;
      background: #000;
      left: 0;
      transition: 0.3s ease;
   }

   .menu-opner:hover .hamburger span {
      background: #fff;
   }

   .hamburger span:nth-child(1) {
      top: 0;
   }

   .hamburger span:nth-child(2) {
      top: 8px;
   }

   .hamburger span:nth-child(3) {
      top: 16px;
   }

   .hamburger.active span:nth-child(1) {
      transform: rotate(45deg);
      top: 8px;
   }

   .hamburger.active span:nth-child(2) {
      opacity: 0;
   }

   .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg);
      top: 8px;
   }

   .logo {
      display: none;
   }

   .header-bottom .container {
      align-items: center;
      gap: 25px;
   }

   .header-image img {
      max-width: 195px;
   }

   .header-main {
      display: flex;
      flex-direction: column-reverse;
   }

   .header-menu {
      display: none;
      background: #161616;
   }

   .header-image.right-img img {
      margin: 0;
   }

   .header-col {
      width: 33%;
      display: flex;
      justify-content: center;
   }

   .nav {
      flex-direction: column;
      align-items: flex-start;
      background: #161616;
   }

   .nav>li>a {
      color: #FFBA28;
      font-size: 16px;
      display: inline-block;
      padding: 10px 15px;
   }

   .nav>li {
      display: block;
      width: 100%;
   }

   .header-menu-container>ul>li:hover>a {
      transform: scale(1);
   }

   .nav>li>ul {
      position: static;
   }

   .nav>li:hover>ul {
      display: none;
   }

   .inner-page-banner img {
      width: auto;
   }

   .footer-middle-holder {
      display: flex;
      flex-direction: column;
      text-align: center;
   }
}

@media only screen and (max-width: 570px) {
   .beer-club-join-content {
      margin: 50px auto;
   }

   .club-member-benefits-content {
      padding: 30px;
   }

   .clubs .store-card-column .card {
      margin-bottom: 30px;
   }

   .header-image img {
      max-width: 100%;
   }

   .header-category .container {
      flex-direction: column;
   }

   #banner-heading h2,
   #banner-heading h1 {
      font-size: 50px;
   }

   .cc-page-container.inner-page-contents {
      padding: 0 20px;
   }

   .modal-footer {
      justify-content: space-between;
   }

   #shoppingCartModal th {
      font-size: 10px;
      padding: 8px 6px;
   }

   .modal-footer .btn {
      width: 48%;
      margin: 0 0 15px;
      font-size: 12px !important;
      font-weight: 600;
   }

   .modal-footer .btn.checkout-btn {
      width: 100%;
   }

   .modal.show .modal-dialog {
      max-width: 95%;
   }

   .checkout-detail {
      margin-top: -45px;
   }

   .checkout-detail #shopping-cart-content .table th,
   .checkout-detail #shopping-cart-content .table td {
      word-break: normal;
      display: flex;
      overflow: hidden;
      font-size: 12px;
      line-height: 18px;
      padding: 8px 10px;
      align-items: center;
      justify-content: flex-start;
   }

   .checkout-detail #shopping-cart-content #promotion_code {
      display: flex;
   }

   .checkout-detail #shopping-cart-content #promotion_code input#Discount_Coupan {
      height: 34px;
      width: auto;
      font-size: 12px;
      margin: 0;
   }

   .checkout-detail h2 {
      margin-top: 20px;
   }

   .checkout-detail .form-control {
      margin-bottom: 12px;
   }

   .checkout-detail #shopping-cart-content .ui-spinner {
      margin: 0;
      width: 60px;
      text-align: center;
   }

   .checkout-detail #shopping-cart-content .table td img.pr-4 {
      padding: 0 !important;
      margin-right: 12px;
      max-width: 60px;
   }
}