@import url(_responsive.scss);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Libre Franklin";
  src: url(../fonts/static/LibreFranklin-Thin.ttf);
  font-weight: 100;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(../fonts/static/LibreFranklin-SemiBold.ttf);
  font-weight: 600;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(../fonts/static/LibreFranklin-Regular.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(../fonts/static/LibreFranklin-Medium.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(../fonts/static/LibreFranklin-Light.ttf);
  font-weight: 300;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(../fonts/static/LibreFranklin-ExtraLight.ttf);
  font-weight: 200;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(../fonts/static/LibreFranklin-ExtraBold.ttf);
  font-weight: 800;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(../fonts/static/LibreFranklin-Bold.ttf);
  font-weight: 700;
}
@font-face {
  font-family: "Libre Franklin";
  src: url(../fonts/static/LibreFranklin-Black.ttf);
  font-weight: 900;
}
:root {
  --primaryColor: #121212;
  --darkBg: #121212;
  --whiteColor: #FFFFFF;
  --textDark: #121212;
  --bodyFont: "Libre Franklin", sans-serif;
  --titleFont: "Libre Franklin", sans-serif;
  --lightColor: #949494;
}

p, h1, h2, h3, h4, h5, h6, figure, figcaption, img, ul, li, a, blockquote, summary, article {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--bodyFont);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--titleFont);
  font-weight: 700;
}

img {
  max-width: 100%;
}

a, a:hover, a:focus {
  text-decoration: none;
}

a:hover {
  color: var(--lightColor);
}

.container {
  max-width: 1364px;
  padding-left: 24px;
  padding-right: 24px;
}

input:focus, select:focus {
  outline: unset;
}

.gap-24 {
  gap: 24px;
}

.secTitle {
  font-size: 40px;
  line-height: 64px;
  font-weight: 700;
  margin-bottom: 40px;
}

.siteSec {
  padding-top: 40px;
  padding-bottom: 40px;
}

.darkBg {
  background-color: var(--darkBg);
}
.darkBg .secTitle {
  color: var(--whiteColor);
}

.viewMoreBtn {
  height: 53px;
  width: 53px;
  border: 3px var(--textDark) solid;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
}
.viewMoreBtn:hover {
  background-color: var(--textDark);
}
.viewMoreBtn:hover svg path {
  fill: var(--whiteColor);
}

.swiper-button-disabled {
  opacity: 0.5 !important;
}

hr.seperatorBox {
  margin-top: 40px;
  margin-bottom: 40px;
  border: 4px var(--darkBg) solid;
  max-width: 1316px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  opacity: 1;
}

.adsBanner {
  background-color: var(--darkBg);
  text-align: center;
  margin-bottom: 8px;
}
.adsBanner img {
  max-width: 100%;
  margin: 0 auto;
}

.siteHeader {
  background-color: var(--darkBg);
  position: relative;
}
.siteHeader .topHeader {
  padding: 20px 0;
}
.siteHeader .subscribeBtn, .siteHeader .languageSelector a {
  color: var(--whiteColor);
  font-size: 16px;
  font-weight: 500;
  line-height: 185%;
}
.siteHeader .searchDesktopBox {
  position: absolute;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: var(--darkBg);
  padding-top: 33px;
  padding-bottom: 33px;
  display: none;
}
.siteHeader .searchDesktopBox.openSearchDesktop {
  display: block;
}
.siteHeader .crossBtn {
  margin-bottom: 16px;
  text-align: right;
  max-width: 24px;
  max-height: 24px;
  margin-right: 0;
  margin-left: auto;
  cursor: pointer;
}
.siteHeader .searchBoxInner {
  padding-bottom: 32px;
}
.siteHeader .searchBoxInner form {
  position: relative;
  border-top: 1px #757776 solid;
}
.siteHeader .searchBoxInner form i {
  position: absolute;
  left: 0;
  z-index: 9;
  top: 13px;
}
.siteHeader .searchBoxInner form input {
  height: 50px;
  width: 100%;
  background-color: transparent;
  border: 0;
  padding-left: 35px;
  color: #fff;
}
.siteHeader .searchBoxInner form button {
  position: absolute;
  right: 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 185%;
  color: #fff;
  background-color: #8E732D;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: 0;
  top: 15px;
}

.LogoContainer {
  text-align: center;
}
.LogoContainer a {
  display: block;
}
.LogoContainer img {
  max-width: 83px;
  max-height: 45px;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.navMwnu {
  border-top: 1px var(--whiteColor) solid;
  padding-top: 20px;
  padding-bottom: 20px;
}
.navMwnu ul {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.navMwnu ul li {
  list-style: none;
}
.navMwnu ul li a {
  text-transform: uppercase;
  color: var(--whiteColor);
}
.navMwnu ul li a:hover {
  color: var(--lightColor);
}

.imageOverCardWrapper {
  margin-bottom: 32px;
}
.imageOverCardWrapper img {
  -o-object-position: top;
     object-position: top;
}
.imageOverCardWrapper.heroCard {
  margin-bottom: 0;
}

.imageOverTextInner {
  position: relative;
}

.imageOverTextInner img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 792px;
}

.authorName {
  color: #757776;
  font-size: 14px;
}
.authorName a {
  color: #757776;
  font-size: 14px;
}

.darkBg .smallCartegory span {
  color: #fff;
}

.overLayText {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 61.34%, rgba(0, 0, 0, 0.7) 100%);
  gap: 8px;
  padding: 35px 35px 43px;
}
.overLayText * {
  color: #fff;
}
.overLayText h3, .overLayText h2 {
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}
.overLayText .authorName {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2%;
  text-transform: capitalize;
  color: #fff;
}
.overLayText .smallCartegory span {
  color: #fff;
}

.smallCartegory span {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2%;
  text-transform: capitalize;
  color: var(--darkBg);
}

.heroBanner .imageOverTextInner img {
  height: 650px;
}
.heroBanner .overLayText h3, .heroBanner .overLayText h2 {
  font-size: 40px;
  line-height: 64px;
}
.heroBanner .swiper-button-next-custom-hero, .heroBanner .swiper-button-prev-custom-hero {
  left: 48px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50px);
  transition: 0.3s ease-in-out;
}
.heroBanner .swiper-button-next-custom-hero {
  left: unset;
  right: 48px;
  transform: translate(50px);
}
.heroBanner:hover .swiper-button-next-custom-hero, .heroBanner:hover .swiper-button-prev-custom-hero {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}

.numberingBox {
  font-size: 80px;
  line-height: 64px;
  margin-bottom: 16px;
}

.heroBannerSlide .swiper-pagination-bullet {
  height: 2px;
  width: 33px;
  background-color: #fff;
  z-index: 9;
}

.heroBannerSlide .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 45px;
}

.gridInner {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.darkBg .twoColumnCard h1, .darkBg .twoColumnCard h2, .darkBg .twoColumnCard h3, .darkBg .twoColumnCard h4, .darkBg .twoColumnCard h5, .darkBg .twoColumnCard h6, .darkBg .twoColumnCard .numberingBox, .darkBg .twoColumnCard .authorName {
  color: var(--whiteColor);
}

.twoColumnContentGrid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.twoColumnCard {
  margin-bottom: 24px;
}
.twoColumnCard h1, .twoColumnCard h2, .twoColumnCard h3, .twoColumnCard h4, .twoColumnCard h5, .twoColumnCard h6 {
  font-weight: 700;
  font-size: 18px;
  line-height: 156%;
  color: var(--textDark);
}
.twoColumnCard .numberingBox {
  color: var(--textDark);
}
.twoColumnCard .numberTitleWrap {
  display: flex;
  gap: 15px;
}
.twoColumnCard .numberTitleWrap .numberingBox {
  font-weight: 700;
  font-size: 60px;
  line-height: 64px;
}
.twoColumnCard .contentGrid {
  flex: 0 0 calc(60% - 16px);
}
.twoColumnCard .imageGrid {
  flex: 0 0 calc(40% - 16px);
}
.twoColumnCard .imageGrid img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 180px;
  -o-object-position: top;
     object-position: top;
}

.genericgridInner a {
  display: flex;
  flex-direction: column;
}
.genericgridInner h3 {
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: #000;
}
.genericgridInner img {
  width: 100%;
  height: 312px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 16px;
}

.twocolumnsSec {
  padding-bottom: 8px;
}
.twocolumnsSec .imageOverTextInner img {
  height: 500px;
}

.recommendsSec .siteTitle {
  color: var(--whiteColor);
}
.recommendsSec.darkBg {
  padding-top: 80px;
  padding-bottom: 80px;
}
.recommendsSec.darkBg .genericgridInner h3 {
  color: var(--whiteColor);
}
.recommendsSec.darkBg .viewMoreBtn {
  color: var(--whiteColor);
  border-color: var(--whiteColor);
  width: unset;
  height: unset;
  display: inline-block;
  margin-top: 24px;
}
.recommendsSec.darkBg .viewMoreBtn.btnwithText {
  padding: 16px 26px;
}
.recommendsSec.darkBg .viewMoreBtn svg path {
  fill: var(--whiteColor);
}
.recommendsSec.darkBg .viewMoreBtn:hover {
  background-color: var(--whiteColor);
  color: var(--textDark);
}
.recommendsSec.darkBg .viewMoreBtn:hover svg path {
  fill: var(--textDark);
}

.videoSec {
  overflow: hidden;
}

.imgHolder {
  position: relative;
}
.imgHolder .videoSvg {
  position: absolute;
  bottom: 39px;
  left: 28px;
}

.gridSlider {
  overflow: unset !important;
}

.gridSliderWrapper {
  position: relative;
}

.swiper-button-prev-custom, .swiper-button-next-custom, .swiper-button-next-custom-hero, .swiper-button-prev-custom-hero {
  position: absolute;
  top: 50%;
  left: -21px;
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2509803922);
  z-index: 9;
}

.swiper-button-next-custom, .swiper-button-next-custom-hero {
  left: unset;
  right: -21px;
}

.siteFooter .topFooter {
  text-align: center;
  padding-top: 83px;
  padding-bottom: 73px;
}
.siteFooter .topFooter img {
  max-width: 111px;
}
.siteFooter .topFooter .socialLinks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
  margin-top: 44px;
}
.siteFooter .topFooter .socialLinks li a {
  height: 56px;
  width: 56px;
  line-height: 56px;
  border: 1px var(--whiteColor) solid;
  display: block;
  border-radius: 50%;
}
.siteFooter .topFooter .socialLinks li a:hover {
  background-color: var(--whiteColor);
}
.siteFooter .topFooter .socialLinks li a:hover svg path {
  fill: var(--darkBg);
}
.siteFooter .belowFooter {
  border-top: 1px var(--lightColor) solid;
  padding-top: 24px;
  padding-bottom: 29px;
}
.siteFooter .belowFooter * {
  color: #fff;
}
.siteFooter .belowFooter p {
  letter-spacing: 1px;
}
.siteFooter .belowFooter .flexCustom {
  gap: 32px;
}
.siteFooter .belowFooter .flexCustom #menu-privacy-menu-footer {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.siteFooter .belowFooter .flexCustom #menu-privacy-menu-footer li a {
  font-size: 12px;
}
.siteFooter .belowFooter select {
  padding: 6px 16px;
  background-color: var(--darkBg);
  border: 1px var(--whiteColor) solid;
  color: var(--whiteColor);
  font-size: 14px;
}

.archive.category .genericgridInner {
  margin-bottom: 36px;
}
.archive.category .genericgridInner h3 {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.archive.category .imageOverTextInner img {
  height: 890px;
}

.category-archive-container {
  padding-top: 80px;
  padding-bottom: 40px;
}

ul.child-category-list {
  padding-top: 60px;
  padding-bottom: 32px;
  border-bottom: 4px var(--darkBg) solid;
  margin-bottom: 40px;
  display: flex;
  list-style: none;
  gap: 60px;
}
ul.child-category-list li a {
  color: rgba(18, 18, 18, 0.5333333333);
  font-size: 24px;
  line-height: 156%;
  font-weight: 700;
}
ul.child-category-list li.active a {
  color: var(--textDark);
  border-bottom: 4px var(--darkBg) solid;
}

.gotTopTop {
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px var(--whiteColor) solid;
  position: fixed;
  bottom: 10px;
  right: 30px;
  background-color: var(--darkBg);
  display: none;
  cursor: pointer;
}
.gotTopTop:hover {
  background-color: var(--whiteColor);
  border-color: var(--darkBg);
}
.gotTopTop:hover svg {
  fill: var(--darkBg);
}
.gotTopTop:hover svg path {
  fill: var(--darkBg);
}
.gotTopTop.visible {
  display: flex;
}

.scroll-progress-container {
  left: 0;
  width: 100%;
  height: 13px;
  background: #C3C3C3;
  z-index: 9999;
  position: sticky;
  top: 0;
  z-index: 9;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: #8E732D;
  transition: width 0.1s ease;
}

.featureImgHolder img {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
}

.categoryBox .cat-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.5px;
  color: var(--darkBg);
}

.calenderDate {
  color: #A4A5A8;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.bannerBox h1 {
  font-weight: 700;
  font-size: 40px;
  line-height: 64px;
  margin-top: 16px;
  margin-bottom: 32px;
  color: var(--darkBg);
}
.bannerBox .excerptBox {
  margin-bottom: 16px;
}
.bannerBox .excerptBox p {
  font-size: 18px;
  line-height: 185%;
}
.bannerBox .authorBox {
  margin-bottom: 16px;
}
.bannerBox .authorBox .aurthorName {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: capitalize;
}

.siteContentInner p {
  font-size: 18px;
  line-height: 185%;
  padding-top: 24px;
}
.siteContentInner figure {
  padding-top: 40px;
}
.siteContentInner figure figcaption {
  margin-bottom: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: #757776;
  margin-top: 16px;
  line-height: 185%;
}

.category-gq-recommends {
  overflow-x: hidden;
}

.archive.category .videoBox .imageOverTextInner img {
  height: 600px;
}
.archive.category .videoBox .genericgridInner img {
  height: 180px;
}
.archive.category .videoBox .genericgridInner svg {
  height: 36px;
  width: 36px;
}
.archive.category .videoBox .infinite-scroll-posts img {
  height: 227px;
}
.archive.category .videoBox .infinite-scroll-posts svg {
  height: 54px;
  width: 54px;
}

.overLayText .flexVideo {
  display: flex;
  gap: 24px;
}
.overLayText .flexVideo h2, .overLayText .flexVideo h3 {
  font-size: 32px;
  line-height: 156%;
}

.searchBoxPageInner {
  padding: 26px 34px 32px;
  max-width: 660px;
  margin: 0 auto;
}
.searchBoxPageInner form {
  position: relative;
}
.searchBoxPageInner form i {
  position: absolute;
  top: 10px;
  left: 0;
}
.searchBoxPageInner form input {
  width: 100%;
  border: 0;
  border-bottom: 2px #424B5A solid;
  padding-left: 40px;
  padding-bottom: 16px;
  padding-top: 10px;
}
.searchBoxPageInner form button {
  background-color: var(--darkBg);
  padding: 7px;
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
}

.searchContainer .genericgridInner {
  margin-bottom: 40px;
}
.searchContainer .genericgridInner h3 {
  font-size: 18px;
  line-height: 156%;
}

.customContainer {
  max-width: 1115px;
  margin-top: 40px;
}

.bannerSecPost img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.recommended-article-tab {
  border-bottom: 4px solid #121212;
  border-top: 4px solid #121212;
  padding: 40px 0;
  display: flex;
  gap: 30px;
  margin-top: 100px;
}

.recommended-article-tab .tags-container {
  display: flex;
  gap: 50px;
}

.recommended-article-content-list .recommended-article-content-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0px 40px;
  position: absolute;
  bottom: 32px;
}

.recommended-article-tab p.tag {
  font-weight: 700;
  font-size: 16px;
  line-height: 156%;
}
.recommended-article-tab a span {
  font-weight: 700;
  font-size: 16px;
  line-height: 160%;
  color: #121212;
}

.recommended-articles .flexVideo svg {
  height: 49px;
  width: 49px;
}
.recommended-articles .overLayText .flexVideo h3 {
  font-size: 20px;
  line-height: 30px;
}

.searchBoxPageInner {
  padding-left: 0;
  padding-right: 0;
}

.featured-post {
  display: flex;
  padding-top: 32px;
  padding-bottom: 32px;
  border-top: 3px #000 solid;
  border-bottom: 3px #000 solid;
  gap: 24px;
}
.featured-post img {
  height: 146px;
  width: 146px;
  -o-object-fit: cover;
     object-fit: cover;
}
.featured-post .relatedWrapBox {
  max-width: calc(100% - 146px - 24px);
}
.featured-post .post-category-related {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-transform: capitalize;
  margin-bottom: 8px;
}
.featured-post .post-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 156%;
}
.featured-post .post-title a {
  color: #121212;
}

.relatedTitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-transform: capitalize;
  color: #757776;
  margin-bottom: 16px;
  display: block;
}

/* Gallery Modal Styles */
.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.gallery-modal-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
  gap: 30px;
}

.close-gallery-modal {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.toggle-view-btn {
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  background-color: transparent;
  font-size: 18px;
  display: flex;
  gap: 8px;
}

.nextPrevCustom {
  position: absolute;
  left: 27px;
  top: 50%;
}
.nextPrevCustom.next-image {
  right: 27px;
  left: unset;
}

/* Grid View Styles */
.gallery-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.gallery-grid-item {
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery-grid-item:hover {
  transform: scale(1.02);
}

.gallery-grid-item img {
  width: 100%;
  height: auto;
  display: block;
  height: 367px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Single View Styles */
.gallery-single-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.gallery-single-image img {
  max-height: 80vh;
  max-width: 100%;
  margin-bottom: 15px;
}

.image-caption {
  color: white;
  margin-bottom: 20px;
}

.gallery-navigation {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.gallery-navigation button {
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Button Styles */
.view-gallery-btn {
  background-color: #121212;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  border: none;
  padding: 16.5px 20px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s;
  display: flex;
  word-spacing: 5px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  line-height: 156%;
  letter-spacing: 0px;
  border: 2px var(--darkBg) solid;
}
.view-gallery-btn:hover {
  background-color: transparent;
  color: var(--textDark);
}
.view-gallery-btn:hover svg path {
  fill: var(--darkBg);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .gallery-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .gallery-grid-container {
    grid-template-columns: 1fr;
  }
}
/* Retailer Products Block */
.retailer-section-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 156%;
  letter-spacing: 0px;
  color: var(--primaryColor);
  margin-bottom: 30px;
}

.retailer-products-grid {
  display: grid;
  gap: 30px;
}

.retailer-products-grid.columns-1 {
  grid-template-columns: repeat(1, 1fr);
}

.retailer-products-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.retailer-products-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.retailer-products-grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.retailer-product {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.retailer-product:hover {
  transform: translateY(-5px);
}

.product-image {
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s;
  height: 446px;
  -o-object-fit: cover;
     object-fit: cover;
}

.retailer-product:hover .product-image img {
  transform: scale(1.03);
}

.product-details {
  padding: 24px 0 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-subtitle {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: capitalize;
  color: var(--textDark);
  margin-bottom: 8px;
}

.product-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 156%;
  margin-bottom: 16px;
}

.product-button {
  display: inline-block;
  padding: 10px 20px;
  color: var(--primaryColor);
  text-align: center;
  text-decoration: none;
  border: none;
  margin-top: auto;
  align-self: flex-start;
  transition: background-color 0.3s;
  background-color: transparent;
  border: 3px var(--primaryColor) solid;
  width: 100%;
  font-weight: 700;
}
.product-button .product-price {
  font-weight: 300;
  font-size: 18px;
  line-height: 156%;
}

.product-button:hover {
  background-color: var(--primaryColor);
  color: #fff;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .retailer-products-grid.columns-2,
  .retailer-products-grid.columns-3,
  .retailer-products-grid.columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .retailer-products-grid.columns-1,
  .retailer-products-grid.columns-2,
  .retailer-products-grid.columns-3,
  .retailer-products-grid.columns-4 {
    grid-template-columns: 1fr;
  }
}
/* Numbered Title Block */
.numbered-title-block {
  margin: 2rem 0;
}

.numbered-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  font-size: 24px;
  line-height: 156%;
  color: var(--textDark);
}

.title-number {
  font-weight: 800;
  padding: 10px;
  background-color: var(--primaryColor);
  color: var(--whiteColor);
  font-weight: 700;
  font-size: 18px;
  line-height: 156%;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .numbered-title {
    font-size: 1.5rem;
  }
}/*# sourceMappingURL=style.css.map */