html, body {
  overflow-x: clip;
}

body * {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-optical-sizing: auto;
}

@font-face {
  font-family: "Gloss";
  src: url("/wp-content/themes/cannavita-us/assets/fonts/Gloss_And_Bloom.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
    font-display: swap;

}

.font-gloss {
    font-family: "Gloss", sans-serif;
    font-weight: 400;
    font-style: normal;
}

header {
    position: absolute;
    width: 100%;
    z-index: 9;
}

ul.navbar-nav {
    gap: 2rem;
    text-transform: uppercase;
}

ul.navbar-nav li a {
    color: #F9FBF3 !important;
}

section.hero-section {
    display: flex;
    padding-top: 10rem;
    padding-bottom: 2rem;
    background: url(/wp-content/themes/cannavita-us/assets/images/hero-bg.png);
    background-size: cover;
    background-position: center;
}

section.hero-section .container {
	display: flex;
    flex-direction: column;
    gap: 6rem;	
}

section.hero-section.alternate-hero {
    padding-top: 15rem;
}

.hero-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-wrapper h1 {
    font-size: 5rem;
    color: white;
    line-height: 1;
}

section.hero-section.alternate-hero h1 {
    font-size: 6rem;
}

.hero-description h2 {
    font-size: 3.5rem;
    color: white;
}

.offers-description {
	display: flex;
	justify-content: space-between;
}

.hero-description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-description p {
    color: white;
    width: 60%;
}



.alternate-hero .hero-wrapper p {
    width: 100%;
    font-size: 18px;
	color: white;
}

.alternate-hero .hero-wrapper div h3 {
    color: white;
    font-size: 24px;
    font-weight: bold;
}

section.hero-section.alternate-hero.flex-hero .hero-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.offers-cta-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.cta-buttons a {
    color: white;
    padding: 5px 40px;
    text-decoration: none;
    border-bottom: 1px solid;
}


.cta-buttons a.cta-bg {
    background: white;
    color: black;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    border: none;
}

/* .cta-buttons a:hover {
    background: #F4C37D;
    color: #03302B;
    transition: ease all .2s;
    border: none;
    font-weight: bold;
    border-radius: 10px;
} */


.cta-buttons a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #F4C37D;
  transition: width 0.6s ease;
  z-index: -1;
  border-radius: 10px;
}

.cta-buttons a:hover::before {
  width: 100%;
}

.cta-buttons a:hover {
  color: white;
  border: none;
}


.cta-buttons {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.hero-offers {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
	width: 100%;
}

.hero-offers h2 {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
}

.offers-wrapper {
    display: flex;
    flex-direction: column;
    width: 500px;
    margin-left: auto;
    position: relative;
}

.hero-offers .swiper {
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

.offers-wrapper .offer {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    background: #03302B33;
    border-radius: 20px;
    padding: 1rem;
    border: 1px solid #ffffff59;
}


.offer-info p {
    color: white;
    font-size: 14px;
}

.offer-info a {
    color: black;
    text-decoration: none;
    background: white;
    border-radius: 10px;
    padding: 5px 30px;
	position: relative;
	display: flex;
	width: fit-content;
	z-index: 9;
}

.offer-info a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #F4C37D;
  transition: width 0.6s ease;
  z-index: -1;
  border-radius: 10px;
}

.offer-info a:hover::before {
  width: 100%;
}

.offer-info a:hover {
  color: white;
  border: none;
}

section.shop-section {
    display: flex;
    background: #03302B;
    padding: 2rem 0;
    position: relative;
}

.shop-wrapper-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-wrapper-title h2 {
    color: white;
    display: flex;
    gap: 15px;
    align-items: center;
}

.shop-wrapper-title h2 span {
    font-size: 4rem;
}

.shop-descripton {
    margin-top: 2rem;
    width: 70%;
}

.shop-descripton p {
    color: white;
}

.shop-wrapper-title a {
    display: flex;
    gap: 15px;
    color: white;
    text-decoration: none;
}

.shop-products {
    margin-top: 3rem;
}

.shop-products-slider {
    display: flex;
}

.shop-products-slider .swiper-button-prev, .shop-products-slider .swiper-button-next {
	background: #f4c37d;
    border-radius: 30px;
}

.shop-slider-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #022622;
    padding: 2rem;
    border-radius: 20px;
    gap: 1rem;
    position: relative;
    height: 100%;
}

.shop-slider-box p.price {
    position: absolute;
    top: 0;
    left: 0;
    background: #F4C37D;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 5px 10px;
    color: #283A26;
    font-weight: bold;
}

.shop-slider-box h2 {
    color: white;
    font-size: 22px;
}

.shop-slider-box img {
    height: 150px;
    object-fit: contain;
}

.shop-slider-box a {
    background: white;
    text-decoration: none;
    color: #283A26;
    border-radius: 6px;
    padding: 5px 40px;
}

.shop-slider-box p {
    color: white;
    margin: 0;
}

.swiper-navigation-icon {
    display: none;
}

.swiper-button-prev {
    left: 10% !important;
    top: 60% !important;
}

.swiper-button-next {
    right: 10% !important;
    top: 60% !important;
}

.hero-offers .swiper-button-next {
    right: 0 !important;
}

.category-slider .shop-products-slider .shop-slider-box {
    background: white;
}

.category-slider .shop-products-slider .shop-slider-box h2 {
    color: #283A26;
    font-weight: bold;
}

.category-slider .shop-products-slider .shop-slider-box a {
    background: #283A26;
    color: white;
}

section.bundles {
    background: #F9FBF3;
    padding: 3rem 0;
}

.bundles-wrapper {
    display: flex;
    flex-direction: column;
}

.bundles-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bundles-title h2 {
    text-transform: uppercase;
    font-size: 20px;
    display: flex;
    gap: 15px;
    color: #03302B;
}

.bundles-title a {
    color: #374836;
    font-weight: bold;
}

.bundles-slider {
    margin-top: 2rem;
}

.bundles-slider .swiper-slide img {
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

section.top-shelf {
    padding: 3rem 0;
    background: #F9FBF3;
}

.top-shelf-wrapper {
    display: flex;
    flex-direction: column;
}

.top-shelf-hero {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.top-shelf-events {
    display: flex;
    gap: 3rem;
}

.top-shelf-event {
    background: white;
    border: 1px solid;
    padding: 1rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.top-shelf-hero h2 {
    font-size: 3rem;
    text-transform: uppercase;
    color: #03302B;
}

.top-shelf-content {
    margin-top: 5rem;
    display: flex;
    justify-content: space-between;
    gap: 3rem;
}

.top-shelf-cards {
    display: flex;
    flex-direction: column;
}

.top-shelf-cards-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.top-shelf-cards-wrapper .full-card {
    grid-column: 1 / -1;

}

.top-shelf-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.top-shelf-card h2 {
    font-size: 20px;
    color: #374836;
    font-weight: bold;
}

.top-shelf-card img {
    margin-bottom: 2rem;
}

.top-shelf-card p {
    color: #374836;
}

section.visit-us {
    padding: 3rem 0;
    background: #F9FBF3;
}

.visit-us-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}

.visit-us-wrapper h2 {
    font-size: 3rem;
    color: #03302B;
}

.visit-us-wrapper h3 {
    font-weight: bold;
    font-size: 20px;
}

section.visit-us-cards {
    display: flex;
    flex-direction: column;
    background: url(/wp-content/themes/cannavita-us/assets/images/visit-us-hero.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.visit-us-cards-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 3rem;
    gap: 2rem;
}

.visit-us-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid #00000069;
    border-radius: 10px;
    background: #00000069;
    padding: 20px;
    width: 50%;
}

.visit-us-img {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 50%;
    align-items: center;
    position: relative;
}

.visit-us-img a {
    background: white;
    color: black;
    border-radius: 10px;
    text-decoration: none;
    padding: 5px 30px;
	position: relative;
	display: flex;
	width: fit-content;
	z-index: 9;
}

.visit-us-img a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #F4C37D;
  transition: width 0.6s ease;
  z-index: -1;
  border-radius: 10px;
}

.visit-us-img a:hover::before {
  width: 100%;
}

.visit-us-img a:hover {
  color: white;
  border: none;
}

.visit-us-card-info {
    display: flex;
    flex-direction: column;
    width: 80%;
}

.visit-us-card-info h2 {
    font-size: 22px;
    color: white;
    font-weight: bold;
}

.visit-us-card-info p {
    color: white;
}

.visit-us-card-info ul li, .visit-us-card-info ol li {
    color: white;
}

section.events {
    padding: 3rem 0;
    background: #F9FBF3;
}

section.events.green-bg {
    background: #03302B;
}

section.events.green-bg .events-title h2 {
    color: white;
    font-size: 3rem;
    background: linear-gradient(90deg, #ffffff, #03302B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}

.events-wrapper {
    display: flex;
    flex-direction: column;
}

.events-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.events-info-texts {
    display: flex;
    align-items: center;
    margin-top: 2rem;
}

.events-info-texts h2 {
    font-size: 3rem;
    color: #03302B;
}

.events-info-texts span {
    color: #F4C37D;
}


.events-title h2 {
    text-transform: uppercase;
    font-size: 20px;
    display: flex;
    gap: 15px;
    color: #03302B;
}

.events-title a {
    color: #374836;
    font-weight: bold;
}

.events-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

.events-grid .event.active {
    width: 100%;
}

.events-grid .event {
    width: 50%;
    transition: ease-in all 0.3s;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 600px;
    border-radius: 20px;
    position: relative;
}

.events-grid .event img {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 40px;
}

.events-grid .event h2 {
    color: white;
}

.events-grid .event p {
    color: white;
	font-size: 14px;
}

.events-grid .event.active p {
	font-size: 16px;	
}


section.events-calendar {
    padding: 3rem 0;
    background: #F9FBF3;
}

section.events-calendar .container {
    background: #03302B;
    border-radius: 20px;
}

.events-calendar-wrapper {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.events-calendar-title {
    display: flex;
    justify-content: space-between;
}

.events-calendar-wrapper h2, .events-calendar-wrapper h3 {
    color: white;
}

.events-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 3rem;
}

.event-calendar-box {
    border-bottom: 1px solid #ffffff66;
    border-right: 1px solid #ffffff66;
    height: 140px;
    position: relative;
    display: flex;
    align-items: start;
	justify-content: end;
	flex-direction: column;
	padding: 5px;
}

.events-calendar-grid  > :nth-last-child(-n+7) {
    border-bottom: none;
}

.events-calendar-grid  > :nth-child(7n) { 
    border-right: none;
}

.event-calendar-box p {
    color: white;
    margin: 0;
}

.event-calendar-box p.day {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 15px;
}

.event-calendar-box p.day.active {
    background: #FF0000;
}

section.reviews-section {
    padding: 3rem 0;
    background: #F9FBF3;
}

.reviews-wrapper {
    display: flex;
    flex-direction: column;
}

.reviews-wrapper h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
}

.reviews-slider {
    margin-top: 3rem;
    position: relative;
}

.review-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2rem;
}

.review-author {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-author p {
    margin: 0;
}

.review-content {
    display: flex;
}

.review-content p {
    color: black;
    font-size: 1.5rem;
    line-height: 1.2;
}

.reviews-slider .swiper-button-prev, .reviews-slider .swiper-button-next {
    background: #374836;
    border-radius: 20px;
    top: 20% !important;
}


section.puppy-section {
    background: url(/wp-content/themes/cannavita-us/assets/images/puppy-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 2rem;
}

.puppy-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.puppy-img {
    bottom: 0;
    position: absolute;
    z-index: 9;
    left: 150px;
}

.puppy-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 300px;
}

.puppy-content {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: end;
    padding: 2rem;
    border-radius: 10px;
    z-index: 2;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    --webkit-backdrop-filter: blur(15px);
}

.puppy-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
}

.puppy-content h2 {
    color: white;
}

.puppy-content p {
    color: white;
}

section.about-us {
    padding: 3rem 0;
    background: #F9FBF3;
}

.about-us-wrapper {
    display: flex;
    gap: 2rem;
}

.about-us-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.about-us-left h2 {
    color: #03302B;
    font-size: 3rem;
    font-weight: bold;
}

.about-us-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-us-right p {
    color: #676767;
}

section.why-us {
    padding: 3rem 0;
    background: #03302B;
}

section.why-us h2 {
    font-size: 3rem;
    background: linear-gradient(90deg, #ffffff, #03302B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: white;
}


.why-us-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
}

.why-us-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.why-us-cards.items-4 {
  grid-template-columns: repeat(4, 1fr);
}

.why-us-cards.items-5 {
  grid-template-columns: repeat(3, 1fr);
}

.why-us-cards.items-5 > :nth-child(3) {
  grid-column: 1;
}

.why-us-card {
    background: #022622;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    border-radius: 20px;
    gap: 20px;
    justify-content: flex-start;
    height: 100%;
    position: relative;
}

.why-us-icons .why-us-card {
    justify-content: space-between;
}

.why-us-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 2px solid transparent;
  border-top-color: #F4C37D;
  border-right-color: #F4C37D;
  border-bottom-color: #F4C37D;
  border-left-color: #F4C37D;
  clip-path: inset(0 100% 100% 0);
  transition: clip-path .6s linear;
}

.why-us-card:hover::before {
  clip-path: inset(0 0 0 0);
}

.why-us-card h3 {
    color: white;
    margin: 0;
    z-index: 2;
}

.why-us-card p {
    color: #ffffff83;
    z-index: 2;
}

.why-us-card ul {
    color: #ffffff83;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
}

.why-us-card a {
    text-transform: uppercase;
    z-index: 2;
    text-decoration: underline;
    color: #ffffff83;
}

section.top-shelf-montly {
    padding: 3rem 0;
    background: #F9FBF3;
}

section.top-shelf-montly h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
}

.top-shelf-montly-cards {
    display: flex;
    margin-top: 2rem;
    gap: 2rem;
}

.top-shelf-montly-card {
    background: #022622;
    border-radius: 20px;
    padding: 20px;
    width: 100%;
}

.top-shelf-montly-card h3 {
    color: white;
}

.top-shelf-montly-card p {
    color: #F9FBF3;
}

section.why-join-us {
    padding: 3rem 0;
    background: #F9FBF3;
}

.why-join-wrapper {
    display: flex;
    gap: 5rem;
    align-items: center;
}

.why-join-us-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.why-join-us-content h2 {
    font-size: 3rem;
}

.why-join-us-content p {
    font-size: 20px;
    width: 70%;
}

section.top-shelf-gallery {
    padding: 3rem 0;
    background: #f9fbf3;
}

.top-shelf-gallery-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.top-shelf-gallery-wrapper h2 {
    font-size: 3rem;
}

.shelf-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.shelf-gallery img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

section.events-section {
    padding: 3rem 0;
    background: #F9FBF3;
}

.events-section-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
}

.events-section-hero h2 {
    font-size: 3rem;
    font-weight: bold;
}

section.events-section .event-calendar-box {
    border-color: black;
}

section.events-section .event-calendar-box p.event-title {
    color: black;
    font-size: 13px;
    border-bottom: 1px dashed;
    padding-bottom: 5px;
    width: 100%;
    padding-top: 5px;
    z-index: 9999;
    font-weight: bold;
	line-height: 1.1;
}

section.events-section .event-calendar-box p.event-title:nth-last-child(1) {
    border: none !important;
}

section.events-section .event-calendar-box p.event-title span {
    margin-right: 5px;
    font-size: 14px;
}

section.events-section .event-calendar-box p.day:not(.active) {
    color: black;
}

section.events-section .events-calendar-title {
    justify-content: end;
}

section.events-section .events-calendar-title h3 {
    font-size: 20px;
    color: black;
}

section.highlights-section {
    padding: 3rem 0;
    background: #F9FBF3;
}

.highlights-wrapper p {
    text-align: center;
}

.highlights.cards {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.highlight-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 20px;
    overflow: hidden;
}

.highlight-card-content {
    background: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.highlight-card-content h2 {
    font-size: 1.4rem;
    font-weight: bold;
}

.highlight-card-content p {
    text-align: left;
    color: #00000074;
}

.highlight-card-content a {
    color: black;
}

section.contact-section {
    padding: 3rem 0;
    background: #F9FBF3;
}

.contact-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-section-wrapper .contact-description {
    text-align: center;
}

.contact-section-form {
    display: flex;
    gap: 2rem;
}

.contact-section-form iframe {
    border-radius: 20px;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-wrapper h2 {
    font-size: 1.3rem;
    margin: 0;
    font-weight: bold;
    color: #03302B;
}

.form-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-wrapper form .form-inputs {
    display: flex;
    gap: 1rem;
}

.form-wrapper form textarea {
    resize: none;
}

.form-wrapper form button {
    background: #03302B;
    border: none;
    padding: 10px 5px;
    color: white;
    border-radius: 10px;
}

.form-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-contact-info h3 {
    font-size: 1.3rem;
    font-weight: bold;
    color: #03302B;
    margin: 0;
}

.form-contact-info p {
    margin-bottom: 5px;
}

.hero-wrapper div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-wrapper .delivery-pricing {
    justify-content: center;
    align-items: center;
}

.hero-wrapper div a {
    background: white;
    padding: 7px 40px;
    font-weight: bold;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    border-radius: 10px;
    text-align: center;
    width: fit-content;
}

section.menu-section {
    padding: 3rem 0;
    background: #F9FBF3;
}

.menu-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.menu-section-wrapper h2 {
    font-size: 3rem;
    text-align: center;
}

.menu-section-wrapper p.description {
    text-align: center;
    color: #333333;
    font-weight: 400;
}

.menu-section-content {
    display: flex;
    gap: 2rem;
}

.delivery-map-wrapper {
    display: flex;
    width: 100%;
}

.delivery-map-wrapper #map {
	width: 100%;
	height: 400px;
}

.tooltip {
      position: absolute;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      padding: 6px 10px;
      font-size: 13px;
      border-radius: 6px;
      pointer-events: none;
      white-space: nowrap;
      transform: translate(-50%, -120%);
      opacity: 0;
      transition: opacity 0.1s ease;
    }

.menu-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.menu-section-wrapper a {
    background: #03302B;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    padding: 7px 40px;
    width: fit-content;
    border-radius: 10px;
    margin: auto;
}

section.free-delivery {
    background: #03302B;
    padding: 3rem 0;
}

.free-delivery-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.free-delivery-wrapper h2 {
    color: white;
    font-size: 3rem;
    background: linear-gradient(90deg, #ffffff, #03302B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.free-delivery-cards {
    display: flex;
    flex-direction: column;
}

.free-delivery-row-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.free-delivery-card {
    display: flex;
    flex-direction: column;
}

.free-delivery-card h2 {
    font-size: 20px;
    font-weight: bold;
    background: none;
    color: white;
    -webkit-text-fill-color: white;
}

.free-delivery-card h2::before {
    content: attr(data-no);
    margin-right: 1rem;

}

.free-delivery-card {
    display: flex;
    flex-direction: column;
    border-left: 1px dotted white;
    border-bottom: 1px solid white;
    padding: 2rem;
    position: relative;
}

.free-delivery-card:before {
    content: "";
    background: white;
    width: 30px;
    height: 30px;
    position: absolute;
    left: -15px;
    bottom: -16px;
    border-radius: 50%;
}

.free-delivery-card p {
    color: #ffffff85;
}

.free-delivery-row-2 {
    display: flex;
    justify-content: center;
}

.free-delivery-row-2 .free-delivery-card {
    padding-top: 2rem;
    width: 50%;
    border-bottom: none;
}

.free-delivery-row-2 .free-delivery-card:before {
    left: -15px;
    top: -15px;
    bottom: 0;
}

section.faq-section {
    padding: 3rem 0;
    background: #F9FBF3;
}

.faq-wrapper {
    display: grid;
    gap: 2rem;
    grid-template-columns: .4fr 1fr;
}

button.accordion-button {
    background: #F9FBF3 !important;
    border: none !important;
    border-bottom: 1px solid;
    box-shadow: none !important;
    font-weight: bold;
    color: black !important;
}

.accordion-header {
    background: #F9FBF3 !important;
}

.accordion-body {
    background: #F9FBF3 !important;
}

.accordion-item {
    border: none;
    border-bottom: 1px solid black;
}

.free-delivery-title {
    font-size: 3rem;
    font-weight: bold;
}

.delivery-pricing.grid-pricing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    text-align: center;
    border: 1px solid #ffffff52;
    border-radius: 10px;
    height: fit-content;
    z-index: 2;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    --webkit-backdrop-filter: blur(15px);
}

.delivery-pricing.grid-pricing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
}

.delivery-pricing.grid-pricing table tbody tr td:nth-child(2) {
    color: #f4c37d;
    font-weight: bold;
}

.delivery-pricing.grid-pricing table tbody tr:nth-last-child(1) td {
    border-bottom: none;
}

.delivery-pricing.grid-pricing table td {
    background: none !important;
    color: white;
    border-right: 1px solid #156e5f;
    border-bottom: 1px solid #156e5f;
    width: 50%;
    padding: 0;
}

.table>thead {
    vertical-align: middle;
}

.delivery-pricing.grid-pricing table th {
    background: none;
    color: white;
    border: none;
}

section.cta-section {
    padding: 3rem 0;
    background: #F9FBF3;
}

.cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2rem;
}

.cta-wrapper h2 {
    font-size: 3rem;
    font-weight: bold;
}

.cta-wrapper a {
    background: #022622;
    color: white;
    border-radius: 10px;
    padding: 7px 40px;
    width: fit-content;
    text-decoration: none;
    text-transform: uppercase;
}

.cta-wrapper a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #F4C37D;
  transition: width 0.6s ease;
  z-index: -1;
  border-radius: 10px;
}

.cta-wrapper a:hover::before {
  width: 100%;
}

.cta-wrapper a:hover {
  color: white;
  border: none;
}

footer {
    background: #03302B;
    padding: 3rem 0;
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-company-info {
    display: grid;
    justify-content: space-between;
    grid-template-columns: .5fr .5fr 1fr;
    gap: 2rem;
}

.company-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 2rem; */
}

.company-info img {
    margin-bottom: 2rem;
}

footer h3 {
    color: #D9D9D9;
    font-size: 18px;
    font-weight: bold;
}

footer p {
    color: #D9D9D9;
}

.working-hours {
    display: flex;
    flex-direction: column;
}

.working-hours h3 {
    margin-bottom: 2rem;
}

.working-hours p {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.company-map {
    display: flex;
    align-items: center;
}

.company-map iframe {
    width: 100%;
    height: 280px;
    border-radius: 20px;
}

.company-disclaimer {
    background: #FFDD00;
    padding: 2rem;
    border-radius: 20px;
}

.company-disclaimer p {
    color: black;
    font-weight: bold;
}

.company-disclaimer ul {
    color: black;
    font-weight: bold;
}

.company-copyright {
    display: flex;
    justify-content: space-between;
    text-align: center;
    border-top: 1px solid white;
    padding-top: 2rem;
}

.company-copyright ul {
    display: flex;
    list-style-type: none;
    gap: 10px;
}

.company-copyright ul li {
    color: white;
}

.company-copyright ul li a {
    color: white;
    text-decoration: none;
}

section.rewards-section {
    padding: 3rem 0;
    background: #F9FBF3;
}

.rewards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.rewards-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rewards-hero h2 {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
}

.rewards-hero-button {
    display: flex;
}

.rewards-hero-button a {
    background: #03302B;
    padding: 10px 40px;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
}

.rewards-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.rewards-list .reward {
    display: flex;
    align-items: center;
    gap: 2rem;
    text-align: center;
    /* justify-content: center; */
}

.rewards-list .reward h2 {
    font-weight: bold;
    color: #03302B;
    font-size: 26px;
}

.rewards-list .reward p {
    background: #03302B;
    border-radius: 10px;
    width: fit-content;
    padding: 5px 30px;
    color: white;
}

.reward-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.reward img {
    width: 140px;
    object-fit: contain;
    height: 200px;
}

section.highlights-inner {
    padding: 3rem 0;
    background: #F9FBF3;
}

.highlights-inner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 80%;
    margin: 0 auto;
}

article img {
    margin: 20px auto;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

article iframe[title="cannavita"] {
    display: none;
}

.gallery-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.gallery-wrapper .accordion-item {
    margin-bottom: 2rem;
    border: none;
}

h2.accordion-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    background: white !important;
}

.gallery-wrapper button.accordion-button {
    width: auto;
	background: white !important;
}

.gallery-wrapper .accordion-header h2 {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.gallery-wrapper .accordion-header h2 span {
    font-size: 1rem;
    margin-top: 10px;
    color: #03302B;
}

.gallery-wrapper .accordion-body {
    padding: 2rem 0;
}

.gallery-wrapper .accordion-header {
    display: grid;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    background: white !important;
    grid-template-columns: 1fr 1fr 1fr;
}

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

	ul.navbar-nav {
		gap: 10px;
		text-transform: uppercase;
	}
	
}

@media screen and (max-width: 1024px) {
	.offers-description {
		flex-direction: column;
	}
}

.hide-desktop {
	display: none;
}

@media screen and (max-width: 1000px) {
	
	.hide-mobile {
		display: none;
	}

	.show-mobile {
		display: flex;
	}
	
	section.hero-section .container {
		gap: 2rem;
	}
	
	.font-gloss {
		line-height: 1.2;
		padding: 15px;
	}

    /* html, body {
        overflow-x: hidden;
    } */

    .navbar-toggler {
        background: #f1c27c;
    }

    ul.navbar-nav {
        background: #f1c27c;
        gap: 10px;
        text-align: center;
    }

    header form {
        display: none !important;
    }

    .hero-offers {
        margin-top: 3rem;
    }

    .hero-wrapper h1 {
        font-size: 3.5rem;
    }

    section.hero-section.alternate-hero h1 {
        font-size: 3.5rem;
    }

    .hero-description h2 {
        font-size: 2rem;
    }

    .hero-description p {
        width: 100%;
    }

    .alternate-hero .hero-wrapper p {
        width: 100%;
    }

    .shop-descripton {
        width: 100%;
    }

    .about-us-wrapper {
        flex-direction: column;
    }

    .about-us-wrapper img {
        max-width: 100%;
    }

    .why-us-cards {
        grid-template-columns: 1fr !important;
    }

    .top-shelf-montly-cards {
        flex-direction: column;
    }

    .why-join-wrapper {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .highlights.cards {
        grid-template-columns: 1fr;
    }

    .contact-section-form {
        flex-direction: column-reverse;
    }

    .contact-section-form iframe {
        width: 100%;
    }

    .top-shelf-hero h2 {
        text-align: center;
    }

    section.hero-section.alternate-hero.flex-hero .hero-wrapper {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .rewards-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .rewards-list {
        grid-template-columns: 1fr;
        margin-top: 2rem;
        gap: 1rem;
    }

    .cta-wrapper h2 {
        font-size: 2rem;
    }

    .why-join-us-content p {
        width: 100%;
    }

    .shelf-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .menu-section-content {
        flex-direction: column-reverse;
    }

    .menu-section-content p {
        width: 100%;
    }

    .free-delivery-row-1 {
        grid-template-columns: 1fr;
    }

    .free-delivery-row-2 {
        justify-content: flex-start;
    }

    .free-delivery-row-2 .free-delivery-card {
        width: 100%;
		border-bottom: 1px solid white;
    }

    .free-delivery-card:before {
        left: -10px;
        top: -10px;
        width: 20px;
        height: 20px;
    }

    .free-delivery-row-2 .free-delivery-card:before {
        left: -10px;
        top: -10px;
    }

    .faq-wrapper {
        grid-template-columns: 1fr;
    }

    .faq-wrapper h2 {
        text-align: center;
    }

    .offers-cta-buttons {
        flex-direction: column;
    }

    .cta-buttons a {
        padding: 5px 25px;
    }

    .offers-wrapper {
        width: 100%;
        margin: 0;
    }

    .shop-wrapper-title h2 span {
        font-size: 3rem;
    }

    .top-shelf-hero {
        flex-direction: column;
        gap: 2rem;
    }

    .top-shelf-events {
        flex-direction: column;
        gap: 1rem;
    }

    .top-shelf-hero h2 span {
        font-size: 2.5rem;
    }

    .top-shelf-cards-wrapper {
        grid-template-columns: 1fr;
    }

    .visit-us-cards-wrapper {
        flex-direction: column;
        padding: 1rem;
    }

    .visit-us-card {
        flex-direction: column-reverse;
        width: 100%;
    }

    .visit-us-img {
        gap: 20px;
		width: 100%;
    }

    .events-info-texts {
        flex-direction: column;
        gap: 10px;
    }

    .puppy-content {
        width: 100%;
    }

    .puppy-img {
        position: absolute;
        z-index: 4;
        width: 130px;
        right: 0;
        left: auto;
    }

    .puppy-wrapper {
        padding-bottom: 2rem;
    }

    .review-content p {
        font-size: 1.5rem;
    }

    .top-shelf-cards {
        grid-template-columns: 1fr;
    }

    .top-shelf-content {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .events-grid {
        flex-direction: column;
    }

    .events-grid .event {
        width: 100%;
    }

    .highlights-inner-wrapper {
        width: 100%;
    }

    .footer-company-info {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .company-info {
        align-items: center;
    }

    .working-hours h3 {
        text-align: center;
    }

    .company-copyright {
        flex-direction: column;
        gap: 2rem;
    }
	
	.events-calendar-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 500px) {
	    .hero-wrapper h1 {
			font-size: 3rem;
		}	
	
	.offers-wrapper .offer {
		flex-direction: column;
	}
	
	.shop-wrapper-title {
		flex-direction: column;
	}
}

@media (max-width: 991px) {
	ul.navbar-nav {
        gap: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
		background: none !important;
		height: 80%;
    }
  .navbar-collapse {
    position: absolute; /* you already have this */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
    z-index: 1050;
	    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    --webkit-backdrop-filter: blur(15px);
  }
	
  .navbar-collapse	button.btn-close.hide-desktop.show-mobile {
    background: no-repeat;
    font-size: 3rem;
    color: white;
    opacity: 1;
    position: absolute;
    right: 0;
    line-height: 1;
    padding: 0;
}

  .navbar-collapse.show {
    transform: translateX(0);
  }
}