/*********************************************************
    GLOBAL
*********************************************************/
html {font-family: var(--body-font); font-size: 20px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; width: 100%; min-height: 100%; height: 100%; scroll-behavior: smooth}
body {font-family: var(--body-font); overflow-x: hidden; line-height: 1; color: var(--black); text-align: left; -webkit-font-smoothing: antialiased; position: relative; text-rendering: optimizelegibility; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga"; min-height: 100%; height: 100%; padding: 0; margin: 0; background-color: var(--light-gray)}
p {line-height: 1.75}
@-ms-viewport {width: device-width}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {display: block; margin: 0}
main {padding-bottom: 3rem}
[tabindex="-1"]:focus {outline: 0 !important}
input[type="radio"], input[type="checkbox"] {box-sizing: border-box; padding: 0}
input, button, select, optgroup, textarea {margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; outline: none !important; box-shadow: none !important}
table {border-collapse: collapse}
img {vertical-align: middle; border-style: none; max-width: 100%; height: auto}
input:focus, button:focus {outline: none !important; box-shadow: none !important}
fieldset {border: none}
.btn {color: #fff; white-space: normal; font-size: 1.2rem; line-height: 1.75; transition: none; padding: 0.75rem 1.5rem; text-decoration: none; border: 0px; cursor: pointer; display: inline-block; background-image: none !important; text-shadow: none !important; font-weight: 800 !important; letter-spacing: 0px !important}
.btn:hover {color: #fff; text-decoration: none; transition: 0.2s ease !important}

/*********************************************************
    ASSETS
*********************************************************/
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {font-family: var(--heading-font); font-weight: 900 !important; line-height: 1.2; margin-top: 0; margin-bottom: 1rem}
h1, .h1 {font-size: 2.8rem; letter-spacing: normal}
h2, .h2 {font-size: 2.1rem; letter-spacing: normal; color: var(--primary)}
h3, .h3 {font-size: 1.8rem; letter-spacing: normal; color: var(--dark-primary)}
h4, .h4 {font-size: 1.4rem; color: var(--black)}
h5, .h5 {font-size: 1.2rem; color: var(--dark-gray)}
.fa-large {font-size: 4em}
strong, .bold {font-weight: 800 !important}
a {color: var(--link); text-decoration: none; font-weight: bold}
a:hover {color: var(--link-hover); text-decoration: underline; transition: 0.2s ease}
p {margin-top: 0; margin-bottom: 2rem}
ol,ul,dl {margin-top: 0; margin-bottom: 2rem; padding-inline-start: 30px}
ol ol,ul ul,ol ul,ul ol {margin-bottom: 0}
li {margin-bottom: 0.5rem; line-height: 1.75}
.circle {border-radius: 50em !important}
.no-border {border: none}
.text-left {text-align: left}
.text-right {text-align: right}
.text-center {text-align: center}
small, .small {font-size: .8rem !important; line-height: 1.5 !important}
.tiny {font-size: 0.75rem !important; line-height: 1.5 !important}
.rounded {border-radius: 0.75rem !important}
.shadow, .shadow:focus {box-shadow: 0 3px 6px rgba(0, 0, 0, 0.20) !important}
.hover-underline:hover {text-decoration: underline !important}
.hover-down:hover {transform: translateY(5px); box-shadow: none !important}
.hover-glow:hover {text-shadow: 0px 0px 10px white !important}
.underline {text-decoration: underline !important}
.no-underline {text-decoration: none !important}
.pointer {cursor: pointer}
.muted {opacity: 0.5 !important}
.hide {display: none}
.float-left {float: left!important}
.float-right {float: right!important}

/*********************************************************
    HELPERS
*********************************************************/
.w-100 {width: 100% !important}
.p-0 {padding: 0 !important}
.p-1 {padding: 0.25rem !important}
.p-2 {padding: 0.5rem !important}
.p-3 {padding: 1rem !important}
.p-4 {padding: 2rem !important}
.p-5 {padding: 3rem !important}
.px-0 {padding-left: 0 !important; padding-right: 0 !important}
.px-1 {padding-left: 0.25rem !important; padding-right: 0.25rem !important}
.px-2 {padding-left: 0.5rem !important; padding-right: 0.5rem !important}
.px-3 {padding-left: 1rem !important; padding-right: 1rem !important}
.px-4 {padding-left: 2rem !important; padding-right: 2rem !important}
.px-5 {padding-left: 3rem !important; padding-right: 3rem !important}
.pl-0 {padding-left: 0rem !important}
.pl-1 {padding-left: 0.25rem !important}
.pl-2 {padding-left: 0.5rem !important}
.pl-3 {padding-left: 1rem !important}
.pl-4 {padding-left: 2rem !important}
.pl-5 {padding-left: 3rem !important}
.pr-0 {padding-right: 0 !important}
.pr-1 {padding-right: 0.25rem !important}
.pr-2 {padding-right: 0.5rem !important}
.pr-3 {padding-right: 1rem !important}
.pr-4 {padding-right: 2rem !important}
.pr-5 {padding-right: 3rem !important}
.py-0 {padding-top: 0.25rem !important; padding-bottom: 0.25rem !important}
.py-1 {padding-top: 0.25rem !important; padding-bottom: 0.25rem !important}
.py-2 {padding-top: 0.5rem !important; padding-bottom: 0.5rem !important}
.py-3 {padding-top: 1rem !important; padding-bottom: 1rem !important}
.py-4 {padding-top: 2rem !important; padding-bottom: 2rem !important}
.py-5 {padding-top: 3rem !important; padding-bottom: 3rem !important}
.pt-0 {padding-top: 0 !important}
.pt-1 {padding-top: 0.25rem !important}
.pt-2 {padding-top: 0.5rem !important}
.pt-3 {padding-top: 1rem !important}
.pt-4 {padding-top: 2rem !important}
.pt-5 {padding-top: 3rem !important}
.pb-0 {padding-bottom: 0 !important}
.pb-1 {padding-bottom: 0.25rem !important}
.pb-2 {padding-bottom: 0.5rem !important}
.pb-3 {padding-bottom: 1rem !important}
.pb-4 {padding-bottom: 2rem !important}
.pb-5 {padding-bottom: 3rem !important}
.m-0 {margin: 0 !important}
.m-1 {margin: 0.25rem !important}
.m-2 {margin: 0.5rem !important}
.m-3 {margin: 1rem !important}
.m-4 {margin: 2rem !important}
.m-5 {margin: 3rem !important}
.mr-0 {margin-right: 0rem !important}
.mr-1 {margin-right: 0.25rem !important}
.mr-2 {margin-right: 0.5rem !important}
.mr-3 {margin-right: 1rem !important}
.mr-4 {margin-right: 2rem !important}
.mr-5 {margin-right: 3rem !important}
.ml-0 {margin-left: 0rem !important}
.ml-1 {margin-left: 0.25rem !important}
.ml-2 {margin-left: 0.5rem !important}
.ml-3 {margin-left: 1rem !important}
.ml-4 {margin-left: 2rem !important}
.ml-5 {margin-left: 3rem !important}
.my-0 {margin-top: 0rem !important; margin-bottom: 0rem !important}
.my-1 {margin-top: 0.25rem !important; margin-bottom: 0.25rem !important}
.my-2 {margin-top: 0.5rem !important; margin-bottom: 0.5rem !important}
.my-3 {margin-top: 1rem !important; margin-bottom: 1rem !important}
.my-4 {margin-top: 2rem !important; margin-bottom: 2rem !important}
.my-5 {margin-top: 3rem !important; margin-bottom: 3rem !important}
.mb-0 {margin-bottom: 0rem !important}
.mb-1 {margin-bottom: 0.25rem !important}
.mb-2 {margin-bottom: 0.5rem !important}
.mb-3 {margin-bottom: 1rem !important}
.mb-4 {margin-bottom: 2rem !important}
.mb-5 {margin-bottom: 3rem !important}
.mt-0 {margin-top: 0rem !important}
.mt-1 {margin-top: 0.25rem !important}
.mt-2 {margin-top: 0.5rem !important}
.mt-3 {margin-top: 1rem !important}
.mt-4 {margin-top: 2rem !important}
.mt-5 {margin-top: 3rem !important}
.mx-auto {margin-left: auto !important; margin-right: auto !important}
.mx-0 {margin-left: 0rem !important; margin-right: 0rem !important}
.mx-1 {margin-left: 0.25rem !important; margin-right: 0.25rem !important}
.mx-2 {margin-left: 0.5rem !important; margin-right: 0.5rem !important}
.mx-3 {margin-left: 1rem !important; margin-right: 1rem !important}
.mx-4 {margin-left: 2rem !important; margin-right: 2rem !important}
.mx-5 {margin-left: 3rem !important; margin-right: 3rem !important}
.max-height {max-height: 5rem !important}
.d-none, .hidden {display: none}

/*********************************************************
    COLORS
*********************************************************/
.primary {color: var(--primary) !important}
.primary-bg {background-color: var(--primary) !important}
.primary-border {border: 2px solid var(--primary) !important}
.primary-border-thick {border: 5px solid var(--primary) !important}
.primary-hover:hover {color: var(--primary) !important}
.dark-primary {color: var(--dark-primary) !important}
.dark-primary-bg {background-color: var(--dark-primary) !important}
.dark-primary-border {border: 2px solid var(--dark-primary) !important}
.dark-primary-border-thick {border: 5px solid var(--dark-primary) !important}
.dark-primary-hover:hover {color: var(--dark-primary) !important}
.light-primary {color: var(--light-primary) !important}
.light-primary-bg {background-color: var(--light-primary) !important}
.light-primary-border {border: 2px solid var(--light-primary) !important}
.light-primary-border-thick {border: 5px solid var(--light-primary) !important}
.light-primary-hover:hover {color: var(--light-primary) !important}
.ultra-light-primary {color: color-mix(in srgb, var(--light-primary) 15%, transparent) !important}
.ultra-light-primary-bg {background-color: color-mix(in srgb, var(--light-primary) 15%, transparent) !important}
.secondary {color: var(--secondary) !important}
.secondary-bg {background-color: var(--secondary) !important}
.secondary-border {border: 2px solid var(--secondary) !important}
.secondary-border-thick {border: 5px solid var(--secondary) !important}
.secondary-hover:hover {color: var(--secondary) !important}
.light-secondary {color: var(--light-secondary) !important}
.light-secondary-bg {background-color: var(--light-secondary) !important}
.light-secondary-border {border: 2px solid var(--light-secondary) !important}
.light-secondary-border-thick {border: 5px solid var(--light-secondary) !important}
.light-secondary-hover:hover {color: var(--light-secondary) !important}
.dark-secondary {color: var(--dark-secondary) !important}
.dark-secondary-bg {background-color: var(--dark-secondary) !important}
.dark-secondary-border {border: 2px solid var(--dark-secondary) !important}
.dark-secondary-border-thick {border: 5px solid var(--dark-secondary) !important}
.dark-secondary-hover:hover {color: var(--dark-secondary) !important}
.purchase {color: var(--purchase) !important}
.purchase-bg {background-color: var(--purchase) !important}
.purchase-border {border: 2px solid var(--purchase) !important}
.purchase-border-thick {border: 5px solid var(--purchase) !important}
.purchase-hover:hover {color: var(--purchase) !important}
.dark-purchase {color: var(--dark-purchase) !important}
.dark-purchase-bg {background-color: var(--dark-purchase) !important}
.dark-purchase-border {border: 2px solid var(--dark-purchase) !important}
.dark-purchase-border-thick {border: 5px solid var(--dark-purchase) !important}
.dark-purchase-hover:hover {color: var(--dark-purchase) !important}
.light-purchase {color: var(--light-purchase) !important}
.light-purchase-bg {background-color: var(--light-purchase) !important}
.light-purchase-border {border: 2px solid var(--light-purchase) !important}
.light-purchase-border-thick {border: 5px solid var(--light-purchase) !important}
.light-purchase-hover:hover {color: var(--light-purchase) !important}
.red {color: var(--red) !important}
.red-bg {background-color: var(--red) !important}
.red-border {border: 2px solid var(--red) !important}
.red-border-thick {border: 5px solid var(--red) !important}
.red-hover:hover {color: var(--red) !important}
.light-red {color: var(--light-red) !important}
.light-red-bg {background-color: var(--light-red) !important}
.light-red-border {border: 2px solid var(--light-red) !important}
.light-red-border-thick {border: 5px solid var(--light-red) !important}
.light-red-hover:hover {color: var(--light-red) !important}
.dark-red {color: var(--dark-red) !important}
.dark-red-bg {background-color: var(--dark-red) !important}
.dark-red-border {border: 2px solid var(--dark-red) !important}
.dark-red-border-thick {border: 5px solid var(--dark-red) !important}
.dark-red-hover:hover {color: var(--dark-red) !important}
.light-red {color: var(--light-red) !important}
.light-red-bg {background-color: var(--light-red) !important}
.light-red-border {border: 2px solid var(--light-red) !important}
.light-red-border-thick {border: 5px solid var(--light-red) !important}
.light-red-hover:hover {color: var(--light-red) !important}
.green {color: var(--green) !important}
.green-bg {background-color: var(--green) !important}
.green-border {border: 2px solid var(--green) !important}
.green-border-thick {border: 5px solid var(--green) !important}
.green-hover:hover {color: var(--green) !important}
.light-green {color: var(--light-green) !important}
.light-green-bg {background-color: var(--light-green) !important}
.light-green-border {border: 2px solid var(--light-green) !important}
.light-green-border-thick {border: 5px solid var(--light-green) !important}
.light-green-hover:hover {color: var(--light-green) !important}
.dark-green {color: var(--dark-green) !important}
.dark-green-bg {background-color: var(--dark-green) !important}
.dark-green-border {border: 2px solid var(--dark-green) !important}
.dark-green-border-thick {border: 5px solid var(--dark-green) !important}
.dark-green-hover:hover {color: var(--dark-green) !important}
.black {color: var(--black) !important}
.black-bg {background-color: var(--black) !important}
.black-border {border: 2px solid var(--black) !important}
.black-border-thick {border: 5px solid var(--black) !important}
.black-hover:hover {color: var(--black) !important}
.light-black {color: var(--light-black) !important}
.light-black-bg {background-color: var(--light-black) !important}
.light-black-border {border: 2px solid var(--light-black) !important}
.light-black-border-thick {border: 5px solid var(--light-black) !important}
.light-black-hover:hover {color: var(--light-black) !important}
.dark-gray {color: var(--dark-gray) !important}
.dark-gray-bg {background-color: var(--dark-gray) !important}
.dark-gray-border {border: 2px solid var(--dark-gray) !important}
.dark-gray-border-thick {border: 5px solid var(--dark-gray) !important}
.dark-gray-hover:hover {color: var(--dark-gray) !important}
.gray {color: var(--gray) !important}
.gray-bg {background-color: var(--gray) !important}
.gray-border {border: 2px solid var(--gray) !important}
.gray-border-thick {border: 5px solid var(--gray) !important}
.gray-hover:hover {color: var(--gray) !important}
.light-gray {color: var(--light-gray) !important}
.light-gray-bg {background-color: var(--light-gray) !important}
.light-gray-border {border: 2px solid var(--light-gray) !important}
.light-gray-border-thick {border: 5px solid var(--light-gray) !important}
.light-gray-hover:hover {color: var(--light-gray) !important}
.white {color: var(--white) !important}
.white-bg {background-color: var(--white) !important}
.white-border {border: 2px solid var(--white) !important}
.white-border-thick {border: 5px solid var(--white) !important}
.white-hover:hover {color: var(--white) !important}
.no-border {border: 0px !important}
.btn.primary-bg:hover {background-color: var(--dark-primary) !important}
.btn.secondary-bg:hover {background-color: var(--dark-secondary) !important}
.btn.purchase-bg:hover {background-color: var(--dark-purchase) !important}
.btn.gray-bg:hover {background-color: var(--dark-gray) !important}
.link {color: var(--link) !important}
.link-bg {background-color: var(--link) !important}
.link-border {border: 2px solid var(--link) !important}
.link-border-thick {border: 5px solid var(--link) !important}
.link-hover:hover {color: var(--link-hover) !important}

/*********************************************************
    HEADER
*********************************************************/
.site-header {background-color: var(--white); box-shadow: 0 2px 4px rgba(0,0,0,.1); padding: 10px 0}
.site-branding img {max-height: 50px; width: auto}
.main-navigation {display: flex; align-items: center; flex-direction: row-reverse}
.nav-menu {display: flex; list-style-type: none; margin: 0; padding: 0}
.nav-menu > li {position: relative; margin-left: 1rem}
.nav-menu > li > a {color: var(--black); text-decoration: none; padding: 0.5rem 1rem; display: block}
.nav-menu > li:hover > a {color: var(--primary)}
.nav-menu .sub-menu {display: none; position: absolute; top: 100%; left: 0; background-color: var(--white); box-shadow: 0 2px 4px rgba(0,0,0,.1); min-width: 200px; z-index: 1000; padding: 0; list-style-type: none}
.nav-menu li:hover > .sub-menu {display: block}
.nav-menu .sub-menu li {padding: 0}
.nav-menu .sub-menu a {color: var(--black); text-decoration: none; padding: 0.5rem 1rem; display: block}
.nav-menu .sub-menu a:hover {color: var(--primary); background-color: var(--light-gray)}

@media (max-width: 1200px) {
    .nav-menu .sub-menu {position: relative; display: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out}
}

/*********************************************************
    FOOTER
*********************************************************/

/*********************************************************
    HOMEPAGE
*********************************************************/

/*********************************************************
    CONTENT
*********************************************************/

/*Lasso*/
.lasso-display.lasso-cutter {box-shadow: none; font-family: poppins !important}
.lasso-display.lasso-cutter .lasso-button-1, .lasso-display.lasso-cutter .lasso-button-2, .lasso-box-3 a.lasso-button-1, .lasso-box-4 a.lasso-button-2  {font-size: 1rem !important; border-radius: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.20); width: 100%;}
.lasso-display.lasso-cutter .lasso-button-1:hover, .lasso-display.lasso-cutter .lasso-button-2:hover, .lasso-box-3 a.lasso-button-1:hover, .lasso-box-4 a.lasso-button-2:hover  {transform: translateY(5px); box-shadow: none !important}

#full-trust-section h2 {margin-bottom: 1.5rem}
#full-trust-section h3 {font-size: 1.3rem; margin-bottom: 1rem}
#full-trust-section li {margin-bottom: 0.5rem}
#full-trust-section ul {padding-left: 1.5rem}
.all-posts-section .post-list {display: flex; flex-direction: column; gap: 1rem; align-items: center}
.all-posts-section .section-title {text-align: center}
.alternative-product {border-bottom: 1px solid #e0e0e0; padding-bottom: 20px}
.alternative-product:last-child {border-bottom: none}
.as-seen-in {padding: 2rem 0; text-align: center}
.blog-archive-card {width: 100%; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease}
.blog-archive-card:hover {transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15)}
.blog-archive-date {font-size: 0.9rem; color: #666}
.blog-archive-link {display: block; padding: 1.5rem; text-decoration: none; color: inherit}
.blog-archive-title {margin: 0; margin-bottom: 0.5rem; color: var(--primary)}
.blog-container {max-width: 1200px; margin: 0 auto; padding: 2rem}
.brand-logo img {max-width: 100%; height: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease}
.brand-logo img:hover {filter: grayscale(0%); opacity: 1}
.breadcrumbs {font-size: 0.9rem; line-height: 1.4}
.breadcrumbs .current {color: #666; opacity: 0.8}
.breadcrumbs .separator {margin: 0 0.5rem; color: #666}
.breadcrumbs a {color: var(--primary); text-decoration: none}
.breadcrumbs a:hover {text-decoration: underline}
.btn-primary {background-color: var(--primary-color); border-color: var(--primary-color); color: white}
.btn-primary:hover, .btn-secondary:hover {opacity: 0.9}
.btn-secondary {background-color: var(--secondary-color); border-color: var(--secondary-color); color: white}
.button {display: inline-block; padding: 0.5rem 1rem; background-color: #007bff; color: white; text-decoration: none; border-radius: 4px; margin-bottom: 2rem}
.carousel-container {display: flex; transition: transform 0.5s ease-in-out; height: 100%}
.carousel-content {flex: 1; padding: 2rem; background-color: #f0f0f0}
.carousel-image {flex: 0 0 50%}
.carousel-dots {position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem}
.carousel-image {flex: 1; background-size: cover; background-position: center}
.carousel-item {flex: 0 0 100%; display: flex; flex-direction: row}
.carousel-link {display: flex; flex: 1; flex-direction: inherit; text-decoration: none; color: inherit}
.category-feed {margin-bottom: 2rem; max-width: 1200px; margin-left: auto !important; margin-right: auto !important}
.category-feeds .post-card {flex: 0 0 calc(33.333% - 20px); margin: 0 10px; border: 1px solid #e0e0e0; border-radius: 5px; overflow: hidden}
.category-feeds .post-card.hidden {display: block; opacity: 0; pointer-events: none}
.category-feeds .post-content {padding: 1rem}
.category-feeds .post-content h3.post-title {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 0; margin-bottom: 0.5rem; line-height: 1.2em; max-height: 2.4em; font-size: 1.4rem}
.category-feeds .post-image {height: 200px; background-size: cover; background-position: center}
.category-feeds .post-slider {display: flex; transition: transform 0.5s ease; margin: 0 -10px}
.category-feeds .post-slider-container {position: relative; overflow: visible; padding: 0}
.category-feeds .read-more {display: inline-block; margin-top: 0.5rem; text-decoration: none; color: #000; font-weight: bold}
.category-feeds .read-more:hover {text-decoration: underline !important}
.category-feeds .slider-arrow {position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; z-index: 10; opacity: 1}
.category-feeds .slider-arrow.next {right: -50px}
.category-feeds .slider-arrow.prev {left: -50px}
.category-section {margin-bottom: 3rem}
.category-title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem}
.category-title .see-all {font-size: 0.9rem; text-decoration: none; color: #666}
.commitment-card {background: white; border-radius: 1rem; padding: 2rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s ease}
.commitment-card:hover {transform: translateY(-5px)}
.commitment-description {color: var(--text-muted); line-height: 1.6}
.commitment-section {padding: 5rem 0}
.commitment-title {color: var(--primary-color); font-weight: 700; margin-bottom: 1rem}
.container.affiliate-container {max-width: 1200px; width: 60%}
.criterion {font-size: 1.1rem}
.default-thumbnail {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center}
.default-thumbnail .site-logo {width: 80% !important; height: auto; max-width: 80% !important; max-height: 80% !important; object-fit: contain}
.dot {width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; cursor: pointer}
.dot.active {background-color: #000}
.editor-choice {background-color: #007bff; color: white; padding: 20px; margin-bottom: 20px}
.error-404-container {max-width: 1200px; margin: 0 auto; padding: 2rem; text-align: center}
.error-404-container h1 {font-size: 3rem; margin-bottom: 1rem}
.error-404-container p {font-size: 1.2rem; margin-bottom: 2rem}
.featured-carousel {position: relative; overflow: hidden; height: auto; min-height: 400px}
.featured-post {border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease}
.featured-post a {text-decoration: none; color: inherit}
.featured-post h3 {padding: 1rem; margin: 0; font-size: 1.2rem; line-height: 1.2; height: 3.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical}
.featured-post-image {height: 150px; background-size: cover; background-position: center}
.featured-post:hover {box-shadow: none}
.featured-posts-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem}
.green {color: var(--green, green)}
.hamburger {display: none; background: none; border: none; padding: 10px; z-index: 1001}
.hamburger span {display: block; width: 25px; height: 3px; background: #000; margin: 5px 0; transition: 0.3s}
.hero-image {height: 300px; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #888; font-size: 24px}
.hero-section {padding: 6rem 0; background: linear-gradient(var(--white),var(--light-gray))}
.hero-section h1 {font-size: 4rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem}
.hero-subtitle {font-size: 1.25rem; color: var(--text-muted); max-width: 800px; margin: 0 auto}
.lasso-display.lasso-cutter {height: 100%}
.meet-the-team {padding: 3rem 0; background-color: #f9f9f9}
.member-avatar {width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 1rem; background-size: cover; background-position: center}
.member-description {font-size: 0.9rem; color: #666; padding: 0 1rem}
.member-name {font-size: 1.2rem; margin-bottom: 0.5rem}
.mobile-only {display: none}
.nav-menu li {align-content: center}
.navigation-posts {margin: 2rem 0}
.navigation-posts .nav-arrow {font-size: 1.5rem; flex-shrink: 0}
.navigation-posts .nav-next, .navigation-posts .nav-previous {max-width: 33.333%}
.navigation-posts .nav-title {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.navigation-posts a {text-decoration: none; color: inherit; display: flex; align-items: center; gap: 0.5rem}
.page-title {text-align: center; margin-bottom: 2rem}
.percentage-circle {width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-weight: bold}
.placeholder-block {background-color: #e9ecef; padding: 20px; margin-bottom: 20px; text-align: center; color: #6c757d}
.popular-post-item {padding: 0.5rem 0; border-bottom: 1px solid var(--light-gray)}
.popular-post-item:last-child {border-bottom: none}
.post-card {flex: 0 0 calc(33.333% - 20px); border: 1px solid #e0e0e0; border-radius: 5px; overflow: hidden; background: var(--white); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; min-height: 320px}
.post-card.hidden {display: none; opacity: 0; pointer-events: none}
.post-content {padding: 1rem; flex-grow: 1; display: flex; flex-direction: column}
.post-content .read-more {font-size: .8rem}
.post-content a {text-decoration: none}
.post-content h3.post-title {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 0; margin-bottom: 0.5rem; line-height: 1.2em; max-height: 2.4em}
.post-excerpt {font-size: 0.9rem; color: #666}
.post-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 1rem}
.post-hero {background-color: var(--dark-primary); position: relative; overflow: hidden; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8); min-height: 350px}
.post-hero .hero-container {max-width: 1000px; z-index: 1; position: relative}
.post-hero .hero-container .post-meta p {font-size: .8rem}
.post-hero .hero-container p {font-size: 1.1rem}
.post-hero a {text-shadow: none; font-weight: inherit}
.post-hero:before {content: ""; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: inherit; pointer-events: none; opacity: 0.3; filter: brightness(0.5)}
.post-image {height: 200px; background-size: cover; background-position: center}
.post-slider {display: flex; transition: transform 0.5s ease}
.post-slider-container {position: relative; overflow: hidden; padding: 0 40px}
.post-thumbnail {display: block; margin: 0; padding: 0; height: 200px; overflow: hidden}
.post-thumbnail img {width: 100%; height: 100%; object-fit: cover; display: block; margin: 0}
.post-title {margin-top: 0; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; max-height: 4.2em; font-size: 1.4rem !important}
.post-title a {color: #333; text-decoration: none}
.process-card {background: white; border-radius: 1rem; padding: 2rem; height: 100%; box-shadow: 0 1px 3px rgba(0,0,0,0.1)}
.process-description {color: var(--text-muted); line-height: 1.6}
.process-icon {width: 3rem; height: 3rem; background: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem}
.process-list {list-style: none; padding: 0}
.process-list .icon {background: var(--primary-color); color: white; width: 2rem; height: 2rem; min-width: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center}
.process-list .icon i {font-size: 1.2rem}
.process-list li {display: flex; align-items: flex-start; margin-bottom: 1rem; padding: 1rem; border-radius: 0.5rem; transition: background-color 0.2s ease}
.process-list li:hover {background-color: var(--gray-light)}
.process-section {padding: 5rem 0}
.process-title {font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem}
.product-actions .btn {flex: 1; text-align: center}
.product-info {margin-top: 20px}
.product-item {border-bottom: 1px solid #e0e0e0; padding-bottom: 20px}
.product-item:last-child {border-bottom: none}
.pros, .cons {flex: 1; padding: 20px; background-color: #f8f9fa}
.pros-cons {display: flex; gap: 20px; margin-bottom: 20px}
.pros-list i, .cons-list i {margin-right: 0.5rem; font-size: 1.2em; line-height: 1.25; flex-shrink: 0}
.pros-list li > span, .cons-list li > span {line-height: 1.5}
.pros-list li, .cons-list li {display: flex; align-items: flex-start; margin-bottom: 0.5rem}
.pros-list, .cons-list {padding-left: 0; list-style-type: none}
.rating {display: inline-flex; align-items: center; font-size: 1em}
.rating-tooltip {visibility: hidden; width: 300px; background-color: var(--black); color: var(--white); text-align: center; border-radius: 6px; padding: 15px 0; position: absolute; z-index: 1; bottom: 250%; left: 12.5%; margin-left: -100px; opacity: 0; transition: opacity 0.3s, transform 0.5s, visibility 0.3s; transform: translateY(80px)}
.rating-tooltip::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: var(--black)transparent transparent transparent}
.read-full-review {display: inline-block; padding: 0.5rem 1rem; background-color: #000; color: #fff; text-decoration: none; margin-top: 1rem}
.read-more {display: inline-block; margin-top: 0.5rem; text-decoration: none; color: #000; font-weight: bold}
.red {color: var(--red, red)}
.scoring-item {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem}
.search-container {margin-bottom: 2rem}
.search-container form {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5rem}
.search-container input[type="submit"] {background-color: #007bff}
.search-container input[type="submit"]:hover {background-color: #0056b3}
.section-title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem}
.see-all {font-size: 0.9rem; text-decoration: none; color: #666}
.sidebar-widget a {color: var(--dark); text-decoration: none}
.sidebar-widget a:hover {color: var(--primary)}
.sidebar-widget h4 {margin-bottom: 1rem}
.site-content {margin: 0}
.site-content .container {max-width: 1000px}
.site-footer .social-icons a {font-size: 2rem; color: #9ca3af}
.site-footer .social-icons a:hover {color: #ffffff}
.site-footer a {color: #9ca3af; text-decoration: none; display: block; margin-bottom: 0.5rem}
.site-footer a:hover {color: #ffffff}
.skip-list {margin-bottom: 20px}
.skip-list h3 {font-size: 1.2rem; margin-bottom: 10px}
.skip-list li {margin-bottom: 5px}
.skip-list ul {list-style-type: none; padding-left: 0}
.slider-arrow {position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; z-index: 10}
.slider-arrow.next {right: 0}
.slider-arrow.prev {left: 0}
.stars {--percent: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: 1.25rem; font-family: Times; line-height: 1; margin-right: 10px}
.stars-container {display: inline-flex; align-items: center}
.stars-container:hover .rating-tooltip {visibility: visible; opacity: 1; transform: translateY(0)}
.stars::before {content: '★★★★★'; letter-spacing: 3px; background: linear-gradient(90deg, var(--light-secondary)var(--percent), var(--gray) var(--percent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent}
.stat-card {background: white; border-radius: 1rem; padding: 2rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s ease; height: 100%}
.stat-card:hover {transform: translateY(-5px)}
.stat-label {color: var(--text-muted); font-size: clamp(0.9rem, 2vw, 1.1rem); line-height: 1.4}
.stat-number {font-size: clamp(2rem, 5vw, 3.5rem)}
.stats-section {padding: 5rem 0}
.team-bio {color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.6}
.team-card {overflow: hidden; height: 100%}
.team-content {padding: 2rem}
.team-image {width: 100%; height: 300px; object-fit: cover}
.team-member {text-align: center; text-decoration: none; color: inherit; transition: transform 0.3s ease}
.team-member:hover {transform: scale(1.05)}
.team-members {display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 1200px; margin: 0 auto}
.team-name {font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem}
.team-role {color: var(--primary-color); font-weight: 600; margin-bottom: 1rem}
.team-section {padding: 5rem 0; background: var(--gray-light)}
.team-social {display: flex; gap: 1rem}
.team-social a {color: var(--text-muted); transition: color 0.2s ease}
.team-social a:hover {color: var(--primary-color)}
.trust-card {background: white; border-radius: 1rem; padding: 2rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s ease; height: 100%}
.trust-card:hover {transform: translateY(-5px)}
.trust-description {color: var(--text-muted); line-height: 1.6}
.trust-icon {width: 3rem; height: 3rem; background: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem}
.trust-preview-box {background-color: #f8f9fa; border: 1px solid #dee2e6}
.trust-preview-box h3 {font-size: 1.2rem; margin-bottom: 0.5rem}
.trust-preview-box p {font-size: 0.9rem; margin-bottom: 0}
.trust-reason {flex: 1; padding: 0 1rem}
.trust-reason .icon {font-size: 2.5rem; margin-bottom: 1rem}
.trust-reason h3 {font-size: 1.2rem; margin-bottom: 0.5rem}
.trust-reason p {font-size: 0.9rem; line-height: 1.4}
.trust-reasons {display: flex; justify-content: space-around; max-width: 1200px; margin: 0 auto}
.trust-section {padding: 5rem 0; background: var(--gray-light)}
.trust-title {color: var(--primary-color); font-weight: 700; margin-bottom: 1rem}
.verdict-badge {position: relative; top: -5.5rem; margin-bottom: -3.5rem; display: flex; justify-content: center; align-items: center; padding: 1rem 0}
.verdict-badge .rating {display: inline-flex; align-items: center; margin-left: 10px}
.verdict-badge .rating-tooltip {visibility: hidden; width: 300px; background-color: var(--black); color: var(--white); text-align: center; border-radius: 6px; padding: 15px 0; position: absolute; z-index: 1; bottom: 250%; left: 12.5%; margin-left: -100px; opacity: 0; transition: opacity 0.3s, transform 0.5s, visibility 0.3s; transform: translateY(80px)}
.verdict-badge .rating-tooltip::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: var(--black)transparent transparent transparent}
.verdict-badge h3 {display: flex; align-items: center; margin: 0}
.view-all-link {display: inline-block; padding: 0.5rem 1rem; background-color: #007bff; color: white; text-decoration: none; border-radius: 4px}
.why-trust-us {background-color: #1a1a1a; color: #ffffff; padding: 3rem 0; text-align: center}
.why-trust-us h2 {font-size: 2rem; margin-bottom: 2rem}
.youtube-embed-wrapper {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%}
.youtube-embed-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}
:root {--primary-color: #6B21A8; --gray-light: #F3F4F6; --text-muted: #6B7280}
button.slider-arrow {border-radius: 3px}
button.slider-arrow.next {right: -40px !important}
button.slider-arrow.prev {left: -40px !important}
tbody tr:hover {background-color: var(--light-gray)}

/*********************************************************
    FAQ
*********************************************************/
.tabs input {position: absolute; opacity: 0; z-index: -1}
.row {display: flex}
.row .col {flex: 1}
.row .col:last-child {margin-left: 1em}
.tabs {border-radius: 8px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.20) !important}
.tab {width: 100%; color: white; overflow: hidden}
.tab-label {display: flex; justify-content: space-between; padding: 1em; background: white; color: var(--black); border: 1px solid var(--dark-gray); border-radius: 8px; font-weight: bold; cursor: pointer}
.tab-label::after {content: "\276F"; width: 1em; height: 1em; text-align: center; transition: all 0.3s}
.tab-content {max-height: 0; line-height: 1.5em; padding: 0 1em; color: var(--black); background: white; transition: all 0.3s}
.tab-close {display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: var(--blue); cursor: pointer}
.tab-close:hover {background: var(--blue)}
.tabs input:checked + .tab-label::after {transform: rotate(90deg)}
.tabs input:checked ~ .tab-content {max-height: 100vh; padding: 1em}

/*********************************************************
    RESPONSIVE
*********************************************************/
@media screen and (max-width: 1200px) {
    .container.affiliate-container {width: 95% !important}
    .sidebar {display: none}
    .col-lg-8 {width: 100%}
    .team-member {flex: 0 1 calc(33.333% - 2rem)}
    .hamburger {display: block}
    .main-navigation {display: flex; flex-direction: column; position: fixed; top: 0; right: -300px; width: 300px; height: 100vh; background: #fff; transition: 0.3s; z-index: 1001}
    .menu-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999}
    .menu-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999}
    .site-header {position: relative; z-index: 1001; background: #fff}
    .nav-menu {width: 100%; padding: 0 15px; display: flex; flex-direction: column; list-style: none}
    .nav-menu li {margin: 12px 0; width: 100%}
    .nav-menu a {display: block; width: 100%}
    .nav-menu li {opacity: 0; transform: translateX(30px); margin: 12px 0; padding-right: 25px; position: relative}
    .menu-open .main-navigation {right: 0}
    .menu-open .menu-overlay {display: block}
    .menu-open .hamburger span:first-child {transform: rotate(45deg) translate(5px, 5px)}
    .menu-open .hamburger span:nth-child(2) {opacity: 0}
    .menu-open .hamburger span:last-child {transform: rotate(-45deg) translate(7px, -7px)}
    .menu-open .nav-menu li {animation: slideIn 0.5s forwards}
    @keyframes slideIn {to {
            opacity: 1; transform: translateX(0)}
    }
    .menu-open .nav-menu li:nth-child(1) {animation-delay: 0.2s}
    .menu-open .nav-menu li:nth-child(2) {animation-delay: 0.3s}
    .menu-open .nav-menu li:nth-child(3) {animation-delay: 0.4s}
    .menu-open .nav-menu li:nth-child(4) {animation-delay: 0.5s}
    .menu-open .nav-menu li:nth-child(5) {animation-delay: 0.6s}
    .nav-menu .menu-item-has-children {display: flex; flex-direction: column}
    .nav-menu .menu-item-has-children::after {content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 0; top: 0.8em; transform: none; padding: 0; width: 20px; text-align: center; transition: 0.3s}
    .nav-menu .menu-item-has-children.active::after {transform: rotate(180deg)}
    .nav-menu .sub-menu {width: 100%; margin-left: 15px; padding-left: 0; margin-top: 0; position: relative; display: block !important; max-height: 0}
    .nav-menu .sub-menu li {margin: 0 0 0 20px; padding: 0; width: 100%}
    .nav-menu .sub-menu a {padding: 0; margin: 0; display: block; width: 100%}
    .nav-menu .sub-menu a:hover {background: none}
    .nav-menu .sub-menu li:hover {background: none}
    .nav-menu .sub-menu li:hover > a {background: none}
    .nav-menu .sub-menu li:hover > a:hover {background: none}
    .nav-menu .sub-menu li:hover > a:hover {background: none}
    .nav-menu .menu-item-has-children.active > .sub-menu {max-height: 500px}
    .nav-menu .menu-item-has-children > .sub-menu {position: relative; top: auto; left: auto; box-shadow: none; border: none}
    .nav-menu .menu-item-has-children:hover > .sub-menu {max-height: 0}
    .mobile-menu-close {position: absolute; left: 15px; top: 15px; background: none; border: none}
    .mobile-menu-close {position: absolute; left: 15px; top: 15px; background: none; border: none; font-size: 24px; padding: 10px; z-index: 2}
    .mobile-menu-header {width: 100%; padding: 60px 20px 20px; text-align: center}
    .mobile-menu-logo {display: block; margin: 0 auto; max-width: 150px}
    .mobile-menu-logo img {width: 100%; height: auto}
    .hamburger {display: block}
    .main-navigation {display: flex; flex-direction: column; position: fixed; top: 0; right: -300px; width: 300px; height: 100vh; background: #fff; transition: 0.3s; z-index: 1001}
    .menu-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999}
    .menu-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999}
    .site-header {position: relative; z-index: 1001; background: #fff}
    .nav-menu {width: 100%; padding: 0 15px; display: flex; flex-direction: column; list-style: none}
    .nav-menu li {margin: 12px 0; width: 100%}
    .nav-menu a {display: block; width: 100%}
    .nav-menu li {opacity: 0; transform: translateX(30px); margin: 12px 0; padding-right: 25px; position: relative}
    .menu-open .main-navigation {right: 0}
    .menu-open .menu-overlay {display: block}
    .menu-open .hamburger span:first-child {transform: rotate(45deg) translate(5px, 5px)}
    .menu-open .hamburger span:nth-child(2) {opacity: 0}
    .menu-open .hamburger span:last-child {transform: rotate(-45deg) translate(7px, -7px)}
    .menu-open .nav-menu li {animation: slideIn 0.5s forwards}
    @keyframes slideIn {to {
            opacity: 1; transform: translateX(0)}
    }
    .menu-open .nav-menu li:nth-child(1) {animation-delay: 0.2s}
    .menu-open .nav-menu li:nth-child(2) {animation-delay: 0.3s}
    .menu-open .nav-menu li:nth-child(3) {animation-delay: 0.4s}
    .menu-open .nav-menu li:nth-child(4) {animation-delay: 0.5s}
    .menu-open .nav-menu li:nth-child(5) {animation-delay: 0.6s}
    .nav-menu .menu-item-has-children {display: flex; flex-direction: column}
    .nav-menu .menu-item-has-children::after {content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 0; top: 0.8em; transform: none; padding: 0; width: 20px; text-align: center; transition: 0.3s}
    .nav-menu .menu-item-has-children.active::after {transform: rotate(180deg)}
    .nav-menu .sub-menu {width: 100%; margin-left: 15px; padding-left: 0; margin-top: 0; position: relative; display: block !important; max-height: 0}
    .nav-menu .sub-menu li {margin: 0; padding: 0; width: 100%}
    .nav-menu .sub-menu a {padding: 0; margin: 0; display: block; width: 100%}
    .nav-menu .sub-menu a:hover {background: none}
    .nav-menu .sub-menu li:hover {background: none}
    .nav-menu .sub-menu li:hover > a {background: none}
    .nav-menu .sub-menu li:hover > a:hover {background: none}
    .nav-menu .sub-menu li:hover > a:hover {background: none}
    .nav-menu .menu-item-has-children.active > .sub-menu {max-height: 500px}
    .nav-menu .menu-item-has-children > .sub-menu {position: relative; top: auto; left: auto; box-shadow: none; border: none}
    .nav-menu .menu-item-has-children:hover > .sub-menu {max-height: 0}
    .mobile-menu-close {position: absolute; left: 15px; top: 15px; background: none; border: none}
    .mobile-menu-close {position: absolute; left: 15px; top: 15px; background: none; border: none; font-size: 24px; padding: 10px; z-index: 2}
    .mobile-menu-header {width: 100%; padding: 60px 20px 20px; text-align: center}
    .mobile-menu-logo {display: block; margin: 0 auto; max-width: 150px}
    .mobile-menu-logo img {width: 100%; height: auto}
    .sidebar {display: none}
    .col-lg-8 {width: 100%}
    .featured-carousel {min-height: 600px;}
}
@media (max-width: 768px) {
    .carousel-item {flex-direction: column}
    .carousel-content, .carousel-image {flex: 0 0 100%}
    .carousel-image {max-height: 300px; order: -1}
    .carousel-content {padding: 1.5rem}
    .mobile-hidden {display: none}
    .trust-reasons {flex-direction: column}
    .trust-reason {margin-bottom: 2rem}
    .team-member {flex: 0 1 calc(50% - 2rem)}
    .category-feeds .post-card.hidden {display: none !important}
    .category-feeds .post-slider {flex-direction: column; transform: none !important}
    .category-feeds .post-card {flex: 0 0 auto; margin: 0 0 1rem 0; flex-direction: column; height: auto}
    .category-feeds .post-image {width: 100%; height: 200px; margin: 0}
    .category-feeds .post-content {padding: 0.75rem}
    .category-feeds .post-title {font-size: 1.2rem; margin-bottom: 0.5rem}
    .category-feeds .post-title {font-size: 1rem !important; margin: 0 !important}
    .category-feeds .read-more {display: none !important}
    .category-feeds .slider-arrow {display: none !important}
    .category-feeds .post-slider a:nth-child(n+4) {display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important}
    .featured-posts-grid {grid-template-columns: repeat(2, 1fr)}
    .hero-section h1 {font-size: 2.5rem}
    .stat-number {font-size: 2.5rem}
    .team-image {height: 200px}
    .team-name {font-size: 1.2rem}
    .team-role {font-size: 1rem}
    .team-bio {font-size: 0.9rem}
    .process-title {font-size: 1.1rem}
    .process-description {font-size: 0.9rem}
    .commitment-title {font-size: 1.1rem}
    .commitment-description {font-size: 0.9rem}
    .blog-archive-card {max-width: 100%}
    .blog-archive-title {font-size: 1.1rem}
    .post-grid {grid-template-columns: repeat(2, 1fr)}
    .post-title {font-size: 1rem !important}
    .post-grid {grid-template-columns: repeat(2, 1fr)}
    .post-title {font-size: 1rem !important}
    .all-posts-section {padding: 0rem}
    .blog-archive-card {max-width: 100%}
    .blog-archive-title {font-size: 1.1rem}
    .navigation-posts .nav-title {display: none}
    .navigation-posts .nav-arrow {font-size: 2rem}
    .navigation-posts .nav-previous,
    .navigation-posts .nav-next {max-width: none}
    .blog-archive-card {max-width: 100%}
    .blog-archive-title {font-size: 1.1rem}
    .post-grid {grid-template-columns: repeat(2, 1fr)}
    .post-grid {grid-template-columns: repeat(2, 1fr)}
    .blog-archive-card {max-width: 100%}
    .blog-archive-title {font-size: 1.1rem}
    .desktop-only {display: none}
    .mobile-only {display: inline}
    .navigation-posts .nav-previous,
    .navigation-posts .nav-next {max-width: none}
    .trust-reasons {flex-direction: column}
    .trust-reason {margin-bottom: 2rem}
    .team-member {flex: 0 1 calc(50% - 2rem)}
    .post-grid {grid-template-columns: repeat(2, 1fr)}
    .blog-archive-card {max-width: 100%}
    .blog-archive-title {font-size: 1.1rem}
    .comparison-table {display: none}
    .trust-reasons {flex-direction: column}
    .trust-reason {margin-bottom: 2rem}
    .team-member {flex: 0 1 calc(50% - 2rem)}
}
@media (max-width: 480px) {
    .team-member {flex: 0 1 100%}
    .featured-posts-grid {grid-template-columns: 1fr}
    .post-grid {grid-template-columns: 1fr}
    .team-member {flex: 0 1 100%}
}
@media (min-width: 1200px) {
    .mobile-menu-close, .mobile-menu-header {display: none}
}
@media (max-width: 768px) {
    .carousel-item {
        flex-direction: column;
    }
    
    .carousel-content, .carousel-image {
        flex: 0 0 100%;
    }
    
    .carousel-image {
        min-height: 300px;
        order: -1;
    }
    
    .carousel-content {
        padding: 1rem;
    }
    
    .mobile-hidden {
        display: block !important;
    }
    
    .mobile-hidden p {
        display: none;
    }
}