.home-hero-section {
    /* margin-bottom: 4rem; */
}
.homepage-main {
    width: 100%;
    overflow-x: hidden;
}
.product-dot-overlay {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--black-80);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: .5rem;
    pointer-events: all;
}
.product-overlay-wrapper {
    position: absolute;
    display: flex;
    pointer-events: none;
}
.product-overlay-wrapper * {
    /* pointer-events: all; */
}

.product-dot-overlay::before {
    content: '';
    display: flex;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--white-45);
    position: absolute;
}
.product-dot-overlay::after {
    content: '';
    display: flex;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--white);
    position: absolute;
}
.price-overlay-container {
    padding: 1rem;
    background-color: var(--black-60);
    color: var(--white);
    border-bottom: 2px solid var(--white);
    width: 286px;
    box-shadow: 0 2px 4px 0 var(--black-50);
    opacity: 0;
    transition: all ease .4s;
    pointer-events: none;
    transform: translateY(20px);
}
.price-overlay-container .color-text {
    color: var(--lime-green-color);
    font-size: .875rem;
}
.price-overlay-container .title {
    margin-top: .5rem;
    font-size: 1rem;
}
.price-overlay-container .price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
}
.price-overlay-container .price-container .price {
    font-weight: 600;
}
.price-overlay-container .price-container img {
    height: .875rem;
    width: auto;
    object-fit: contain;
    user-select: none;
}
.image-wrapper.hover-active .price-overlay-container {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0px);
}

/* Hero Animation */
.hero-animation-container {
    width: 1440px;
    max-width: 100%;
    aspect-ratio: 1440/655;
    background-color: var(--gray-color);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

.hero-animation-container .svg-wrapper {
    display: flex;
    position: absolute;
    pointer-events: none;
}


.hero-animation-container .image-wrapper {
    position: absolute;
    height: unset;
    opacity: 0;
    display: flex;
}
.hero-animation-container .image-wrapper.hover-active {
    z-index: 1;
}
.hero-animation-container.product-hover-active .product-overlay-wrapper {
    pointer-events: all;
}
.hero-animation-container.product-hover-active .image-wrapper:not(.hover-active) img {
    opacity: 0.2 !important;
}
.hero-animation-container.product-hover-active .image-wrapper:not(.hover-active) * {
    opacity: 0 !important;
}
.hero-animation-container .image-wrapper img {
    width: 100%;
    height: 100%;
    transition: all ease .2s;
    pointer-events: none;
}

.hero-animation-container .svg-wrapper svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-animation-container .svg-wrapper:first-child {
    width: 94.11%;
    left: 8.75%;
    /* height: 100%; */
    top: 0;
}

.hero-animation-container .svg-wrapper:nth-child(2) {
    width: 8.31%;
    left: 52.57%;
    top: -1.22%;
}

.hero-animation-container .svg-wrapper:nth-child(3) {
    width: 29.18%;
    left: 66.82%;
    top: 0%;
}

.hero-animation-container .svg-wrapper:nth-child(4) {
    width: 83.96%;
    left: 18.79%;
    top: 62.02%;
}

.hero-animation-container .svg-wrapper:nth-child(5) {
    width: 23.12%;
    left: 86%;
    top: 50.07%;
    z-index: 3;
}

.hero-animation-container .svg-wrapper:nth-child(6) {
    width: 8.41%;
    left: 81.81%;
    top: 67.49%;
}

.hero-animation-container .svg-wrapper:nth-child(7) {
    width: 5.19%;
    left: 94.21%;
    top: 31.14%;
    z-index: 4;
}

.hero-animation-container .svg-wrapper:nth-child(8) {
    width: 2.65%;
    left: 64.28%;
    top: 22.44%;
    z-index: 1;
}

.hero-animation-container .image-wrapper:nth-child(9) {
    width: 38.10%;
    left: 55.15%;
    top: 33.23%;
}
.hero-animation-container .image-wrapper:nth-child(9) .product-overlay-wrapper {
    top: 11%;
    left: 22%;
}
.hero-animation-container .image-wrapper:nth-child(9).hover-active ~ .image-wrapper:nth-child(10) * {
    pointer-events: none !important;
}
.hero-animation-container .image-wrapper:nth-child(9).hover-active ~ .image-wrapper:nth-child(10) {
    z-index: 2;
}
.hero-animation-container .image-wrapper:nth-child(9).hover-active ~ .image-wrapper:nth-child(14) img {
    opacity: 1 !important;
    pointer-events: none;
}
.hero-animation-container .image-wrapper:nth-child(9).hover-active ~ .image-wrapper:nth-child(14) {
    z-index: 2;
    pointer-events: none;
    opacity: 1 !important;
}
.hero-animation-container img:nth-child(9) {
}

.hero-animation-container .image-wrapper:nth-child(10) {
    width: 9.99%;
    left: 76.04%;
    top: 22.26%;
}
.hero-animation-container .image-wrapper:nth-child(10) .product-overlay-wrapper {
    flex-direction: row-reverse;
    top: 48%;
    right: -13%;
}

.hero-animation-container .image-wrapper:nth-child(11) {
    width: 12.87%;
    left: 66.47%;
    top: 19.27%;
}

.hero-animation-container .image-wrapper:nth-child(11) .product-overlay-wrapper  {
    top: 74%;
    right: 21%;
}

.hero-animation-container .image-wrapper:nth-child(12) {
    width: 3.59%;
    left: 86.34%;
    top: 40.11%;
}

.hero-animation-container .image-wrapper:nth-child(13) {
    width: 3.96%;
    left: 86.21%;
    top: 39.25%;
}
.hero-animation-container .image-wrapper:nth-child(13) .product-overlay-wrapper {
    top: 63%;
    right: 0%;
}

.hero-animation-container .image-wrapper:nth-child(14) {
    width: 20.32%;
    left: 50.81%;
    top: 45.84%;
}

.hero-animation-container .image-wrapper:nth-child(14) .product-overlay-wrapper {
    top: 36%;
    right: 60%;
}

.hero-overlay-content-wrapper {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.hero-overlay-content-wrapper div[class*='container'] {
    height: 100%;
}

.hero-overlay-content-wrapper .hero-overlay-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 470px;
    max-width: 100%;
    margin-top: -2rem;
}

.hero-overlay-content h1 {
    font-size: 3.5rem;
    opacity: 0;
    line-height: 1.15;
    font-weight: 700;
}

.hero-overlay-content h1 span {
    color: var(--medium-gray-color);
}

.hero-overlay-content .hero-para {
    font-size: 18px;
    margin-top: 1.5rem;
    opacity: 0;
}

.hero-overlay-content .button-primary {
    margin-top: 2rem;
    opacity: 0;
}

/* Product categories Section */
.product-icon-wrapper {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    /* padding: 2.5rem 0rem; */
    /* margin-bottom: 5rem; */
}

.product-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem;
}

.product-icon-container .title {
    font-size: 1.125rem;
    margin-top: .75rem;
    color: var(--black-80);
    text-align: center;
}

.product-icon {
    /* background: var(--gray-color); */
    height: 112px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    flex-direction: column;
}

.product-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all ease .3s;
}

.green-color-bg {}

.product-icon::before {
    content: '';
    display: flex;
    height: 112px;
    width: 112px;
    background: var(--gray-color);
    z-index: -1;
    position: absolute;
    border-radius: 100px;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    transition: all ease .3s;
    /* transform-origin: center; */
}

.product-icon:hover.product-icon::before {
    background: var(--lime-green-color);
    transform: scale(0.9);
}

.product-icon:hover img {
    transform: scale(1.1);
}

.product-card-content .title {
    font-family: 'PT Sans', sans-serif;
    font-size: 1rem;
}

/* Deal Section */
.deal-container {
    background: var(--light-gray-color);
    padding: 1rem 2rem;
    /* position: relative; */
}

.deal-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.deal-section .upper-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
}

.deal-section .arrow-btn .inactive-btn {
    filter: opacity(0.3);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    margin-right: 1.5rem;
    /* background: #000; */
}

.deal-container .product-img-wrapper {
    width: 153px;
    height: 236px;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}

.deal-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    /* display: flex; */
    align-items: center;
    justify-content: center;

}

.product-img-wrapper {}

.product-img-wrapper img {
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    object-fit: contain;
}

.deal-container .strike-price {
    color: rgba(0, 0, 0, 0.4);
    text-decoration: line-through;

}

.deals-section-container .rating {
    list-style: none;
    display: flex;
}

.product-card {
    width: 308px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--light-gray-color);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.product-swiper .product-card {
    width: 100%;
}
.product-list-main .checkbox-container {
    margin-bottom: .5rem;
}
.product-list-main .accordion .accordion-arrow *  {
    user-select: none;
    pointer-events: none;
}
.product-list-main .accordion .accordion-arrow {
    /* background-color: red; */
    display: flex;
    transform: rotate(180deg);
    transition: all ease .3s;
}
.product-list-main .accordion-item.active .accordion-arrow {
    transform: rotate(0deg);
}
.product-card .product-img-wrapper {
    height: 280px;
    position: relative;
}

.product-card .discount {
    font-size: 1rem;
    color: #FFFFFF;
    font-family: 'PT Sans', sans-serif;
    background: red;
    position: absolute;
    padding: 0.3125rem 1rem;
    left: 1rem;
    top: 1rem;
}

.product-card .product-card-btn-overlay {
    position: absolute;
    right: 1rem;
    top: 1rem;
    /* background: red; */
    display: flex;
    flex-direction: column;
    z-index: 100;
    opacity: 0;
    transform: translateY(-50px);
    transition: all ease .3s;
}

.product-card:hover .product-card-btn-overlay {
    transform: translateY(0px);
    opacity: 1;
}

.product-card .squre-btn {
    height: 2rem;
    width: 2rem;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all ease .3s;
}

.product-card .squre-btn img {
    object-fit: contain;
    width: 40%;
    height: auto;
    transition: all ease .3s;
}

.product-card .squre-btn:hover {
    background-color: #000;
}

.product-card .squre-btn:hover img {
    filter: invert(1);
}


.product-card-content {
    padding: 1rem;
    margin-top: 1.5rem;
    padding-bottom: 0;
}

.product-card-content .title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: .625rem;
}

.no-of-lines-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.product-card-content .pricing-container {
    display: flex;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.product-card-content .product-rating {
    margin-bottom: 1rem;
    display: flex;
}
.product-card-content .product-rating img:not(:first-of-type) {
    margin-left: .125rem;
}

.product-card-content .pricing-container .strikeoff-price {
    text-decoration: line-through;
    color: var(--black-40);
    margin-right: .5rem;
}

.product-card-content .card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.product-rating .active {
    filter: brightness(0) opacity(.1);
}

/* Feature Section */
.feature-section-container {
    border: 1px solid rgba(0, 0, 0, 0.16)
}

.feature-section-container {
    display: flex;
    justify-content: space-around;
}

.feature-section-container .img-wrapper {
    background: #E6E6E6;
    height: 50px;
    width: 50px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.feature-section-container .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-card {
    padding: 3rem 0.625rem;
    flex: 1;
}

.feature-card-content-container {
    padding: 1.3rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feature-card .featured-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.feature-card:not(:last-of-type) .feature-card-content-container {
    border-right: 1px solid rgba(0, 0, 0, 0.16);
}

.feature-section-container .no-border {
    border-right: none;
}

.feature-card-content-container .title {
    font-size: 1.125rem;
    font-family: var(--haeding-font);
    font-weight: bold;
    margin-top: .875rem;
    padding-bottom: 0;
    font-weight: 600;
}

.feature-card-content-container .card-content {
    font-size: 1rem;
    font-family: 'PT Sans', sans-serif;
    padding: 0.5rem 2.5rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.8);
}

.feature-section-container.horizontal .feature-card-content-container {
    flex-direction: row;
}

.feature-section-container.horizontal .img-wrapper {
    flex-shrink: 0;
    margin-right: 0.5rem;
    background-color: transparent;
}

.feature-section-container.horizontal .img-wrapper img {
    width: 100%;
    height: 100%;
}

.feature-section-container.horizontal .feature-card-content-container .card-content {
    padding: 0;
    text-align: left;
    width: 190px;
    max-width: 100%;
}

.feature-section-container.horizontal .feature-card-content-container .title {
    margin: 0;
}

.feature-section-container.horizontal .feature-card .featured-card-content {
    text-align: left;
    align-items: flex-start;
}

.feature-section-container.horizontal {
    border-left: 0;
    border-right: 0;
}

.feature-section-container.horizontal .feature-card:not(:last-of-type) .feature-card-content-container {
    border: none;
}

/* Pagination Section */
.cta-banner-with-image {
    /* margin-top: 5rem; */
    font-family: 'PT Sans', sans-serif;
    display: flex;
    position: relative;
}

.cta-banner-with-image .content-area {
    z-index: 1;
    padding: 5rem;
    background: #F2F2F2;
    width: 100%;
    clip-path: polygon(0 0, 57% 0%, 44% 96%, 0% 96%);
    position: relative;
    /* max-height: 390px; */
}

.cta-banner-with-image .content-area .overlay-shape {
    position: absolute;
    top: 0;
    left: 0;
}

.cta-banner-with-image .cta-banner-with-image-img {
    position: absolute;
    right: 0;
    z-index: 2;
    clip-path: polygon(24% 0%, 100% 0, 100% 83%, 0 83%);

    /* opacity: 0; */
}

.cta-banner-with-image .content-area .heading {
    font-size: 2.5rem;
    color: #121228;
}

.cta-banner-with-image .content-area .content {
    font-size: 1.125rem;
    color: rgba(0, 0, 0, 0.8);
    padding: 1.5rem 0rem;
}

.cta-banner-with-image .content-area .content {
    padding-right: 40rem;
}

.cta-banner-with-image button {
    font-size: 1.125rem;
    color: #FFFFFF;
    background: #121228;
    padding: 0.625rem 4rem;
    border: none;
}

/* CTA BANNER */
.cta-banner-with-image img {
    user-select: none;
    pointer-events: none;
}
.cta-banner-with-image .col-left {
    padding: 80px;
    background-color: var(--light-gray-color);
    position: relative;
    display: flex;
    align-items: center;
}
.cta-banner-with-image .col-left::after {
    content: '';
    display: flex;
    width: calc(100% + 0px);
    transform: skewX(-20deg);
    position: absolute;
    top: 0;
    left: 80px;
    bottom:0;
    background-color: var(--light-gray-color);
    border-right: 24px solid #fff;
    pointer-events: none;
    z-index: 10;
}
.cta-banner-with-image .col-left-content {
    display: flex;
    flex-direction: column;
    width: 500px;
    max-width: 100%;
    position: relative;
    z-index: 99;
    /* overflow: hidden; */
}
.cta-banner-with-image .col-left .title {
    font-size: 40px;
    font-family: var(--haeding-font);
    font-weight: 700;
    line-height: 1.1;
}
.cta-banner-with-image .col-left .description {
    font-size: 18px;
    margin-top: 24px;
}
.cta-banner-with-image .col-left .button-primary {
    margin-top: 32px;
}
.cta-banner-line-shape {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.cta-banner-with-image .col-right {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    pointer-events: none;
}
.cta-banner-with-image .col-right-content {
    height: 100%;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 616/414;
    display: flex;
}
.cta-banner-with-image .col-right-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta-banner-corner-overlay {
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
    z-index: 10;
    max-width: 21px;
}
.cta-banner-corner-overlay .corner-shape.top::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 7px;
    width: 100vw;
    background: var(--white);
    left: calc(100% - 2px);
}
.corner-shape {
    display: flex;
}
.corner-shape.top {
    position: relative;
    left: 2px;
}
.corner-shape.bottom {
    position: relative;
    top: -2px;
    left: 2px;
}
.cta-banner-with-image .swiper-pagination-bullets {
    position: static;
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin-left: 6px;
    pointer-events: all;

}
.cta-banner-with-image .swiper-pagination-bullet {
    height: 16px;
    width: 6px;
    border-radius: 50px;
    transition: all ease .3s;
    margin: 0 !important;
    background: var(--black-24);
    opacity: 1;
}
.cta-banner-with-image .swiper-pagination-bullet.swiper-pagination-bullet-active {
    height: 64px;
    background: #003D34;
}
.cta-banner-with-image .swiper-pagination-bullet:not(:last-of-type) {
    margin-bottom: 8px !important;
}
.cta-banner-content-swiper {
    width: 100%
}

/*  Recommended Section  */
.recommended-section {
    position: relative;
}

.recommended-section hr {
    position: absolute;
    width: 100%;
    top: 3.5rem;
}

.recommended-section .heading {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Helvetica', 'Arial', sans-serif;
    padding: 2rem 0rem;
}

.product-card-horizontal {
    /* padding: 1.5rem; */
    background: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    margin-bottom: 1rem;
    /* width: 100%; */
}

.product-card-horizontal .card-content-area {
    width: 100%;
}

.product-card-horizontal .content-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* width: 100%; */
}

.product-card-horizontal .content-area .title {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, .4);
}

.product-card-horizontal .model-name {
    font-size: 1rem;
    font-weight: bold;
    margin: .25rem 0;
    color: rgba(0, 0, 0, 0.8);
}

.product-card-horizontal .pricing {
    font-size: 1rem;
}

.product-card-horizontal .img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F2F2F2;

}

.product-card-horizontal .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-horizontal .rating {
    object-fit: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 1rem;
}
.product-card-horizontal .rating img:not(:last-of-type) {
    margin-right: .125rem;
}

/* .horizontal-product-card-section {
    padding: 5rem 0;
} */

.horizontal-product-card-swiper {
    margin-top: 1.5rem;
}

.horizontal-product-card-thumb-container {
    border-bottom: 1px solid var(--black-16);
    position: relative;
}

.horizontal-product-card-thumb-swiper .tab-item {
    font-size: 1.5rem;
    padding-bottom: 1rem;
    cursor: pointer;
    font-family: var(--haeding-font);
}

.horizontal-product-card-thumb-container .marker {
    height: 4px;
    background-color: #333333;
    position: absolute;
    left: 0;
    bottom: -2px;
    transition: all ease .3s;
}

.horizontal-product-card-swiper .row {
    --bs-gutter-x: 1rem;
}

/* Product List Page Style */
.product-list-main .product-card {
    width: 100%;
    margin-bottom: 1.5rem;
}

.footer-container {
    background: #121228;
    padding-top: 5rem;
    padding-bottom: 5rem;
    color: #FFFFFF;
}

.footer-container .title {
    padding-bottom: 1.5rem;
    color: #BED752;
    font-family: var(--haeding-font);
}

.footer-container .footer-links {
    /* padding: 0.2rem 0rem; */
}

.footer-container .footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    display: flex;
    cursor: pointer;
    padding: 0.3rem 0;
}

.footer-container .footer-links a:hover {
    background: #000;
    padding-left: 0.4rem;
    transition: all ease .3s;
}

.footer-container .email {
    padding-top: 0.8rem;
}

.copyright {
    background: #000;
    text-align: center;
    color: #FFFFFF;
    padding: 1.1875rem 0rem;
    font-family: 'PT Sans', sans-serif;
}


/* WFHB Section  */

.wfhb-grid-row {
    display: flex;
    gap: 1rem;
}

.wfhb-grid-row .wfhb-grid-col {
    flex: 1;
}

.wfhb-grid-col .image-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.wfhb-grid-col .image-container>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wfhb-grid-row .col-left {
    aspect-ratio: 1/1;
    width: 632px;
    max-width: 100%;
    position: relative;
}

.wfhb-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.wfhb-grid-container .wfhb-grid-item {
    /* background-color: #BED752; */

}

.wfhb-grid-container .wfhb-grid-item:first-child {
    grid-column: span 2;
}

.wfhb-grid-col .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
    background-color: var(--black-40);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wfhb-grid-col .image-overlay .title {
    font-family: var(--haeding-font);
    font-weight: 600;
    font-size: 1.125rem;
}

.arrow-circle {
    height: 2rem;
    width: 2rem;
    border-radius: 2rem;
    background-color: var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease .3s;
}

.arrow-circle img {
    height: unset;
    width: 50%;
}

.arrow-circle.transparent {
    background-color: transparent;
}

.arrow-circle.transparent img {
    width: 60%;
    transition: all ease .3s;
}

.wfhb-grid-item.cta-grid {
    background-color: #BED752;
}

.wfhb-grid-col .cta-grid .image-overlay {
    background-color: transparent;
    color: var(--black);
}

.link-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background-color: red; */
    z-index: 99;
}

.wfhb-grid-col .image-container .link-overlay:hover~.image-overlay {

    text-decoration: underline;
}

.wfhb-grid-col .image-container .link-overlay:hover~.image-overlay .arrow-circle {
    transform: translateX(10px);
}

.wfhb-grid-col .image-container .link-overlay:hover~.image-overlay .arrow-circle.transparent {
    background-color: var(--black);
}

.wfhb-grid-col .image-container .link-overlay:hover~.image-overlay .arrow-circle.transparent img {
    width: 50%;
}

/* .wfhb-grid-row .wfhb-col-right-grid-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
}
.wfhb-col-right-grid-container .col-right-grid-item {
    flex: 1;
}
.wfhb-col-right-grid-bottom-container {
    display: flex;
}
.wfhb-col-right-grid-bottom-container {
    display: flex;
    height: 100%;
    gap: 1rem;
}
.wfhb-col-right-grid-container .wfhb-col-right-grid-top-container {
    background-color: pink;
    height: unset;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 632/308;
    max-width: 100%;
}
.wfhb-col-right-grid-bottom-container .wfhb-col-right-grid-bottom-item {
    flex: 1;
    background-color: green;
    width: 100%;
    aspect-ratio: 1/1;
    max-width: 100%;
    height: unset;
    flex-shrink: 0;
} */
.testimonial-card {
    padding: 5rem;
    background-color: var(--light-gray-color);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}

.testimonial-card .testimonial-content {
    /* background-color: red; */
    width: 560px;
    max-width: 100%;
}

.testimonial-card .quote-img {
    height: 2rem;
    width: auto;
    margin-bottom: 2rem;
    pointer-events: none;
    user-select: none;
}

.testimonial-card .paragraph {
    font-size: 1.125rem;
}

.testimonial-card .name {
    font-size: 1.125rem;
    color: var(--black-80);
    margin-top: 1.5rem;
}

.testimonial-card .overlay-image {
    position: absolute;
    top: -1px;
    left: -1px;
    pointer-events: none;
    user-select: none;
    display: flex;
}
.testimonial-card .overlay-image:not(.bottom-right) {
    display: flex;
    height: 88px;
    width: auto;
}
.testimonial-card .overlay-image:not(.bottom-right) img {
    width: 100%;
    height: 100%;
}

.testimonial-card .overlay-image.bottom-right {
    right: 0;
    bottom: 0;
    left: unset;
    top: unset;
}

.testimonial-swiper-wrapper {
    position: relative;
}

.testimonial-swiper-wrapper .arrow-overlay-container {
    /* background-color: red; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    padding-left: 5rem;
    padding-right: 5rem;
    z-index: 99;
    justify-content: space-between;
}

.testimonial-swiper-wrapper .arrow-overlay-container .swiper-arrow {
    pointer-events: all;
    cursor: pointer;
    height: 2.25rem;
    width: 2.25rem;
    /* background-color: green; */
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease .3s;
}

.testimonial-swiper-wrapper .arrow-overlay-container .swiper-arrow img {
    width: 50%;
    height: auto;
    object-fit: contain;
}

.testimonial-swiper-wrapper .arrow-overlay-container .swiper-arrow.swiper-button-disabled {
    opacity: 0.1;
    cursor: default;
}

.testimonial-swiper-wrapper .arrow-overlay-container .swiper-arrow:hover {
    background-color: var(--black-8);
}

.testimonial-swiper-wrapper .arrow-overlay-container .swiper-arrow img {
    filter: brightness(0);
}

.testimonial-swiper-wrapper .arrow-overlay-container .swiper-arrow.arrow-prev {
    transform: scaleX(-1);
}
.testimonioal-feature-image-swiper {
    width: 100%;
}
.testimonial-feature-image-container {
    display: flex;
    /* gap: .5rem; */
    margin-top: .5rem;
}

.testimonial-feature-image-container .feature-image-item {
    flex: 1;
    /* max-width: 100%; */
    width: 100%;
    aspect-ratio: 250/154;
    display: flex;
}

.testimonial-feature-image-container .feature-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.explore-section .product-card {
    width: 100%;
    margin-bottom: 1.5rem;
}

.grid-cta-card {
    background-color: var(--lime-green-color);
    height: calc(100% - 1.5rem);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.grid-cta-card::after {
    content: '';
    display: flex;
    /* width: 308px; */
    height: 227px;
    background-color: #0B9B86;
    filter: blur(50px);
    position: absolute;
    left: 0;
    right: 0;
    top: 85%;
    transition: all ease .6s;
}

.grid-cta-card:hover::after {
    top: 70%;
    filter: blur(70px);
}

.grid-cta-card .title {
    font-size: 2rem;
    line-height: 1.2;
}

.button-horizontal {
    width: 260px;
    max-width: 100%;
    background-color: #003D34;
    color: var(--white);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.button-horizontal:hover::after,
.grid-cta-card:hover .button-horizontal::after {
    transform: translateX(10px);
}

.button-horizontal::after {
    width: 23px;
    height: 17px;
    content: '';
    display: flex;
    position: absolute;
    right: 1.5rem;
    background-image: url(./images/wfhb-section/arrow-right.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all ease .3s;
}

.grid-cta-card .button-horizontal {
    margin-top: auto;
    z-index: 2;
    position: relative;
}

.cta-banner {
    background-color: #EDC94E;
    padding-top: 112px;
    padding-bottom: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cta-banner .cta-banner-content {
    width: 580px;
    max-width: 100%;
    text-align: center;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-banner-content .cta-title-container {
    display: flex;
    align-items: center;
    position: relative;
    left: -1.5rem;
    margin-bottom: .5rem;
}

.cta-banner-content .cta-title-container img {
    height: 5.25rem;
    width: 5.25rem;
    border-radius: 5rem;
    object-fit: contain;
    margin-right: 1.5rem;
}

.cta-banner-content .cta-title-container .title {
    font-size: 3.75rem;
    font-family: var(--haeding-font);
    font-weight: 700;
    line-height: 1
}

.cta-banner-content .subtitle {
    font-family: var(--haeding-font);
    font-size: 1.5rem;
    line-height: 1;
}

.cta-banner-content .paragraph {
    margin-top: 1.5rem;
    font-size: 1.125rem;
}

.cta-banner .overlay-image {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.cta-banner .overlay-image.top-left {
    top: 0;
    left: 0;
}

.cta-banner .overlay-image img {
    width: 100%;
    height: 100%;
}

.cta-banner .overlay-image.absolute-fill {
    top: 0;
    bottom: 0;
    /* transform: scaleX(1.028); */
    padding: 1.25rem;
    left: 0rem;
    right: 0rem;
    /* background-color: red; */
}

.social-media-card .image-wrapper {
    aspect-ratio: 1/1;
    width: 308px;
    max-width: 100%;
    display: flex;
}

.social-media-card .img-wrapper img {
    width: 100%;
    height: 100%;
}

.social-media-card .title {
    font-size: 1.125rem;
    color: var(--black-80);
    margin-top: .75rem;
}

@media(min-width: 768px) {
    .horizontal-product-card-thumb-container .marker {
        width: 90px !important;
    }
    .cta-banner-with-image .col-left .absolute-fill {
        display: none;
    }
}
@media(min-width: 1200px) {
    .product-icon-wrapper .product-icon-container:not(:last-of-type) {
        margin-right: 4.625rem;
    }
}
@media(max-width: 1199.98px) {
    .product-icon-wrapper .product-icon-container {
        margin-right: 3rem;
        margin-top: 3rem;
    }
    .product-icon-wrapper {
        margin-right: -3rem;
    }
    .feature-section-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: relative;
    }
    .feature-section-container .feature-card:nth-child(2n) .feature-card-content-container{
        border: none;
    }
    .feature-card {
        padding: 0rem;
    }
    .feature-card-content-container {
        padding: 2.5rem 0rem;
    }
    .feature-section-container::after {
        content: '';
        display: flex;
        width: 100%;
        height: 1px;
        background-color: var(--black-16);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .cta-banner-with-image .col-left {
        width: 460px;
        max-width: 100%;
        padding: 3rem 4rem;
    }
    .cta-banner-with-image .col-left .title {
        font-size: 2rem;
    }
    .cta-banner-with-image .col-left .description {
        font-size: 1rem;
    }
    .cta-banner-line-shape {
        height: 120px;
    }
    .cta-banner-line-shape img {
        width: 100%;
        height: 100%;
    }
    .feature-section-container.horizontal::after {
        display: none;
    }
    .feature-section-container.horizontal .feature-card-content-container .card-content {
        width: auto;
    }
    .feature-section-container.horizontal .feature-card-content-container {
        padding: 1.5rem 0rem;
    }
}
@media(max-width: 991.98px) {
    .hero-overlay-content-wrapper .hero-overlay-content {
        width: 340px;
    }
    .hero-overlay-content h1 {
        font-size: 2.75rem;
    }
    .hero-overlay-content .hero-para {
        font-size: 1rem;
    }
    .cta-banner-with-image .col-left {
        width: 60%;
        padding: 2rem 4rem;
    }
    .cta-banner-with-image .col-left-content {
        width: 350px;
    }
    .wfhb-grid-col .image-overlay .title {
        font-size: 1rem;
    }
    .testimonial-swiper-wrapper .arrow-overlay-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .social-media-card .title {
        font-size: 1rem;
    }
}
@media(max-width: 767.98px) {
    .hero-overlay-content-wrapper .hero-overlay-content {
        margin-top: 0;
    }
    .hero-overlay-content-wrapper {
        display: none;
    }
    .product-icon-wrapper .product-icon-container {
        margin-right: 2rem;
        margin-top: 2rem;
    }
    .product-icon-wrapper {
        margin-right: -2rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .product-icon::before {
        width: 100px;
        height: 100px;
    }
    .product-icon {
        height: 100px;
    }
    .cta-banner-with-image {
        flex-direction: column-reverse;
    }
    .cta-banner-with-image .col-right-content {
        height: 300px;
    }
    .cta-banner-with-image .col-left {
        width: 100%;
    }
    .cta-banner-with-image .col-left::after {
        display: none;
    }
    .cta-banner-with-image .col-left {
        padding: 4rem;
    }
    .cta-banner-with-image .col-left {
        position: relative;
    }
    .cta-banner-with-image .col-left::after {
        all: unset;
        content: '';
        display: flex;
        height: 30px;
        width: 100%;
        background-color: #fff;
        position: absolute;
        top: calc(-30px * 0.7);
        left: 0;
        right: 0;
        z-index: 99;
        transform: skewY(3deg);
    }
    .cta-banner-with-image .col-left .absolute-fill {
        background-color: transparent;
        position: absolute;
        top: 0;
        bottom: 0;
        background-color: var(--light-gray-color);
        left: 0;
        right: 0;
        z-index: 5;
    }
    .cta-banner-with-image .col-left::before {
        content: '';
        display: flex;
        height: 204px;
        width: unset;
        background-color: #fff;
        position: absolute;
        top: calc(-30px * 0);
        left: -50px;
        right: -50px;
        z-index: 2;
        transform: rotate(3deg);
    }
    .cta-banner-with-image .col-left .absolute-fill::after {
        content: '';
        display: flex;
        height: 30px;
        width: 100%;
        position: absolute;
        top: calc(-30px * 0.7);
        left: 0;
        right: 0;
        z-index: 6;
        transform: skewY(3deg);
    }
    .horizontal-product-card-thumb-swiper .swiper-slide {
        width: auto;
    }
    .horizontal-product-card-thumb-swiper .tab-item {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .horizontal-product-card-thumb-swiper .tab-item {
        font-size: 1.25rem;
    }
    .footer-container .title {
        padding-bottom: .5rem;
    }
    .footer-container .footer-block {
        margin-bottom: 2rem;
    }
}
@media(max-width: 575.98px) {
    .product-icon-wrapper .product-icon-container {
        margin-right: 2rem;
        margin-top: 2rem;
    }
    .product-icon-container .title {
        font-size: 1rem;
    }
    .product-icon-wrapper {
        margin-right: -2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .section-title-container .title-arrow-container>*:first-of-type {
        margin-right: 0.125rem;
    }
    .feature-section-container {
        display: flex;
        flex-direction: column;
    }
    .feature-section-container::after {
        display: none;
    }
    .feature-section-container .feature-card:nth-child(2n) .feature-card-content-container {
        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    }
    .feature-card:not(:last-of-type) .feature-card-content-container {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    }
    .feature-card:last-of-type .feature-card-content-container {
        border-bottom: none !important;
    }
    .feature-card-content-container .card-content {
        padding-left: 0;
        padding-right: 0;
    }
    .feature-card .feature-card-content-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .cta-banner-with-image .col-left {
        padding: 3rem;
    }
    .wfhb-grid-row {
        flex-direction: column;
    }
    .testimonial-card .overlay-image:not(.bottom-right) {
        height: 60px;
    }
    .testimonial-card .paragraph,
    .testimonial-card .name {
        font-size: 1rem;
    }
    .testimonial-card {
        padding: 2rem 3rem;
    }
    .testimonial-swiper-wrapper .arrow-overlay-container {
        padding-left: .25rem;
        padding-right: .25rem;
    }
    .testimonial-card .quote-img {
        margin-bottom: 1.25rem;
    }
    .feature-section-container.horizontal .feature-card-content-container {
        justify-content: flex-start;
    }
    .social-media-section .social-media-card {
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
    }
}