::-webkit-scrollbar {
  width: 7px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: rgb(255, 255, 255);
}

::-webkit-scrollbar-thumb {
  background: #78909c;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #78909c;
}

:root {
  /* fonts */
  --primary-font: "Roboto", sans-serif;
  --secondary-font: "Albert Sans", sans-serif;
  --primary-mono-font: "Roboto Mono", monospace;
  /* colors */
  --body-bg: #f2f2f2;
  --card-bg: #fafafa;
  --primary-color: #f69b45;
  --primary-text-color: #323738;
  --primary-btn-color: #ff9900;
  --secondary-color: #e7eaef;
  --secondary-text-color: #727574;
  --link-color: #3a58c2;
  --blue-300: #13a7e3;
  --blue-800: #041e70;
  --red-color: #ff0000;
  --white-color: #ffffff;

  /* gradient */
  --primary-gradient: linear-gradient(53.3deg, #3266fa 38.48%, #7a98f9 119.13%);
  --secondary-gradient: linear-gradient(90deg, #53c9f1 0%, #539df1 100%);

  /* border radius */
  --radius-full: 9999px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--primary-font);
  background-color: var(--body-bg);
  color: var(--primary-text-color);
  font-size: 16px;
  line-height: 1.5;
}
/* base style */
.container {
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
  padding: 0 16px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
button {
  all: unset;
  padding: 0.6rem 1.2rem;
  text-align: center;
  border-radius: 3px;
  text-decoration: none;
  user-select: none;
  border: none;
}
h2 {
  font-family: var(--secondary-font);
  font-size: clamp(20px, 4.3vw, 40px);
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 24px;
}
h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 16px;
}

/* buttons style */
.btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease-in-out;
  padding: 10px 20px;
  background: var(--primary-gradient);
  color: var(--white-color);
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 700;
}
.btn:hover {
  opacity: 0.8;
}
.btn:active {
  transform: scale(0.98);
}
.font-heading {
  font-family: var(--secondary-font);
}
.pb-0 {
  padding-bottom: 0 !important;
}

/* link style */
a {
  color: var(--link-color);
  text-decoration: none;
}

/* advertorial bar start */
.advertorial {
  font-size: 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 12px;
  background: #e1e1e1;
}
/* advertorial bar end */

/* header start */
header {
  padding: 16px 0;
}
header .logo {
  display: block;
  height: 60px;
  width: fit-content;
  margin: 0 auto;
}
header .logo img {
  max-height: 60px;
}
/* header end */

main {
  padding: 0 0 24px;
}

/* badge section start */
.badge-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background-color: var(--card-bg);
  border-radius: var(--radius-full);
  box-shadow: 0px 4px 8px 0px #00000008;
}
.badge .badge-icon {
  height: 12px;
  width: 12px;
}
.badge .badge-text {
  font-size: 12px;
  line-height: 14px;
}
/* badge section end */

/* hero section start */
.hero-section {
  padding: 40px 0 0;
}
.hero-section h1 {
  font-weight: 700;
  font-size: clamp(24px, 4.3vw, 48px);
  line-height: 130%;
  margin-bottom: 22px;
}
.hero-section .description {
  font-weight: 500;
  font-size: clamp(16px, 3vw, 24px);
  line-height: 156%;
  margin-bottom: 22px;
}

.author-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.author-content {
  max-width: 245px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-content .author-img {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-full);
}
.author-content .author-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}
/* hero section end */

/* verified badge section start */
.verified-badge-section {
  padding: 32px 0;
}
.verified-badge-section .verified-badge {
  max-width: 532px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--card-bg);
  padding: 7px 15px;
  border-radius: var(--radius-full);
}
.verified-badge-section .badge-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--blue-300);
}
.verified-badge-section .badge-icon-wrapper .badge-icon {
  flex-shrink: 0;
  height: 24px;
  width: 24px;
}
.verified-badge-section .badge-icon-wrapper .badge-icon-text {
  font-weight: 600;
  font-size: 12px;
  line-height: 120%;
}
.verified-badge-section .badge-text {
  font-size: 12px;
  line-height: 130%;
}
/* verified badge section end */

/* product section start */
.product-section {
  padding: 0 0 40px;
}
.product-wrapper {
  max-width: 400px;
  margin: 0 auto;
}
.product-card:not(:last-child) {
  margin-bottom: 32px;
}
[data-rank="1"].product-card {
  border-color: #fbbb7f;
  box-shadow: 10px 16px 16px 0px #efdecf;
}
[data-rank="1"].product-card .rating-badge .rank-1-svg {
  display: block;
}
[data-rank="1"].product-card .rating-badge .rank-all-svg {
  display: none;
}
[data-rank="1"].product-card .rating-badge .rank-title {
  width: 207px;
}
[data-rank="2"].product-card {
  border-color: #abbefb;
  box-shadow: 10px 16px 16px 0px #dfe9f8;
}
[data-rank="2"].product-card .rating-badge .rank-2-svg {
  display: block;
  margin-right: -1px;
}
[data-rank="2"].product-card .rating-badge .rank-all-svg {
  display: none;
}
[data-rank="1"].product-card .rating-badge .rank-title .rank-text,
[data-rank="2"].product-card .rating-badge .rank-title .rank-text {
  display: block;
}
[data-rank="2"].product-card .rating-badge .rank-title {
  width: 207px;
  color: var(--white-color);
}
[data-rank="1"].product-card .rating-badge,
[data-rank="2"].product-card .rating-badge {
  top: -2px;
}
.product-card {
  background-color: var(--card-bg);
  border: 1px solid #e3e2e2;
  border-radius: 16px;
  padding: 28px 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  position: relative;
}
.product-card .rating-badge {
  position: absolute;
  top: -6px;
  left: -1px;
  height: 50px;
  background: var(--body-bg);
  font-size: 14px;
}
.product-card .rating-badge .rank-1-svg {
  display: none;
}
.product-card .rating-badge .rank-2-svg {
  display: none;
}
.product-card .rating-badge .rank-title {
  position: absolute;
  top: -1px;
  left: 0;
  height: 50px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
}
.product-card .rating-badge .rank-title .rank-text {
  display: none;
}
.product-card .left {
  flex-shrink: 0;
  width: 100%;
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.product-card .left .left-wrapper {
  max-width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.product-card .middle {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.product-card .right {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.product-card .logo {
  height: 24px;
  margin-bottom: 24px;
}
.product-card .logo img {
  max-height: 24px;
}
.product-card .rating-box {
  width: 100px;
  background: var(--body-bg);
  border: 1px solid #dddddd;
  border-radius: 8px;
  display: inline-block;
  padding: 14px 10px;
  text-align: center;
}
.product-card .rating-box .score {
  font-weight: 600;
  font-size: 32px;
  line-height: 100%;
  margin-bottom: 4px;
}
.product-card .rating-box .text {
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}
.product-card .stars {
  color: var(--primary-color);
  font-size: 16px;
  line-height: 16px;
}
.product-card .title {
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
}
.product-card .offer {
  width: fit-content;
  background: #edf5fc;
  border: 1px dashed #d7d7d7;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--primary-mono-font);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
}
.product-card .list-wrapper:not(:last-child) {
  margin-bottom: 20px;
}
.product-card .list-wrapper .list-title {
  color: var(--secondary-text-color);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.product-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--secondary-text-color);
}
.product-card ul li:not(:last-child) {
  margin-bottom: 5px;
}
ul.pros li::before {
  content: "✓";
  color: #47ac5d;
  margin-right: 4px;
}
ul.cons li::before {
  content: "✕";
  color: #f83434;
  margin-right: 4px;
}
.product-card .left ul.features {
  padding-top: 50px;
  margin-bottom: 0;
  font-size: 11px;
}
.product-card ul.features {
  margin-bottom: 20px;
}
.product-card ul.features li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.product-card ul.features li svg {
  flex-shrink: 0;
}
.product-card .btn {
  width: 100%;
}
.product-card .btn svg {
  flex-shrink: 0;
}
.product-card .quiz {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  text-decoration: underline;
}
.product-card .bottom {
  width: 100%;
}
.product-card .show-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  background-color: #f5f5f5;
  color: #a7a7a7;
  font-size: 12px;
  line-height: 19.5px;
  border-radius: 0 0 16px 16px;
  cursor: pointer;
}
.product-card .show-more-content {
  margin-bottom: 0 !important;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
  overflow: hidden;
}
.product-card .show-more-content.active {
  grid-template-rows: 1fr;
}
.product-card .show-more-content .content-wrapper .quiz {
  margin-bottom: 20px;
}
.product-card .show-more-content > div {
  overflow: hidden;
}
.product-card .show-more-btn svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease-in-out;
}
.product-card .show-more-btn.active svg {
  transform: rotate(180deg);
}
/* product section end */

/* top product section start */
.top-pick-product-section {
  padding: 40px 0;
  margin-bottom: 16px;
  background-color: #e7eaef;
}
.top-pick-product-section h2.section-title {
  text-align: center;
}
.top-pick-product-section .product-card .rating-badge {
  background: var(--secondary-color);
}
.top-pick-product-section .bottom-text {
  max-width: 676px;
  margin: 0 auto;
  margin-top: 32px;
  font-style: Italic;
  /* font-size: 14px; */
  font-size: clamp(12px, 3vw, 14px);
  line-height: 130%;
  text-align: center;
}
/* top product section end */

/* description section start */
.description-section {
  padding: 16px 0;
}
.description-section h2 {
  margin-bottom: 12px;
}
.description-section p:not(:last-child) {
  margin-bottom: 16px;
}
.description-section p.question-text:not(:last-child) {
  margin-bottom: 8px;
}
.description-section img.banner-img {
  width: 100%;
  border-radius: 16px;
}
.description-section ul.link-list {
  padding-left: 32px;
}
.description-section ul.link-list li::marker {
  color: var(--link-color);
}
.description-section ul.link-list li a {
  text-decoration: underline !important;
}
/* description section end */

/* recommended providers section start */
.recommended-providers-section {
  padding: 16px 0;
}
.recommended-providers-section .recommended-title {
  position: absolute;
  top: -36px;
  right: 20px;
  background-color: #ff9933;
  color: var(--primary-text-color);
  text-align: center;
  padding: 6px 10px;
  border-radius: 8px 8px 0 0;

  font-family: var(--secondary-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
}
.recommended-providers-wrapper {
  position: relative;
  max-width: 785px;
  margin: 40px auto 0;
  background-color: #ececec;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
}
.recommended-provider-card {
  background-color: var(--card-bg);
  padding: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 7px;
}
.recommended-provider-card .provider-logo-wrapper {
  width: 100%;
  max-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.recommended-provider-card .provider-features {
  width: 100%;
  max-width: 345px;
  list-style: none;
  font-size: 12px;
  color: var(--secondary-text-color);
}
.recommended-provider-card ul.provider-features li:not(:last-child) {
  margin-bottom: 6px;
}
.recommended-provider-card .provider-rating {
  width: fit-content;
  margin: 0 auto;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #eeeeee;
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
}
.recommended-provider-card .provider-rating svg {
  width: 14px;
  height: 14px;
  color: var(--primary-color);
  flex-shrink: 0;
}
.recommended-provider-card .right-wrapper {
  width: 100%;
  max-width: 150px;
}
.recommended-provider-card .recommended-btn {
  width: 100%;
}
/* recommended providers section end */

/* comparison cards section start */
.comparison-cards-section {
  display: none;
  padding: 32px 0 48px;
}
.comparison-cards-wrapper {
  display: flex;
  align-items: center;
}
.comparison-card {
  flex: 1;
  background-color: var(--card-bg);
  border: 1px solid #d5e2ec;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.comparison-card.best-overall {
  padding-top: 24px;
  flex: 1.2;
  border-top-left-radius: 0;
  border-color: var(--primary-color);
  box-shadow: 0px 8px 16px 0px #ebd7a673;
}
.comparison-card .best-badge {
  position: absolute;
  top: -25px;
  left: -1px;
  background: var(--primary-color);
  padding: 3px 16px;
  border-radius: 12px 12px 0 0;
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
}
.comparison-card .rating-score {
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #eeeeee;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
}
.comparison-card .rating-score svg {
  width: 14px;
  height: 14px;
  color: var(--primary-color);
}
.comparison-card.best-overall .provider-logo {
  margin-bottom: 24px;
}
.comparison-card .provider-logo {
  height: 30px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comparison-card .provider-logo img {
  max-height: 30px;
  max-width: 180px;
}
.comparison-card.best-overall .provider-tagline {
  margin-bottom: 24px;
}
.comparison-card.best-overall .provider-tagline {
  font-size: 16px;
}
.comparison-card .provider-tagline {
  max-width: 219px;
  min-height: 40px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  font-size: 14px;
  text-align: center;
}
.comparison-card .comparison-btn {
  width: 100%;
}
/* comparison cards section end */

/* recommended providers slider section start */
.recommended-providers-slider-section {
  padding: 16px 0;
}
.recommended-providers-slider-section .section-title {
  margin-bottom: 20px;
}
.provider-swiper-wrapper {
  margin-left: -16px;
  margin-right: -16px;
}
.providers-swiper {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 30px !important;
}
.providers-swiper .swiper-slide {
  width: 251px !important;
  height: auto !important;
}
.provider-slider-card.best-overall {
  border-color: #fbbb7f;
}
.provider-slider-card.popular-pick {
  border-color: #abbefb;
}
.provider-slider-card {
  background-color: var(--card-bg);
  border: 1px solid #e3e2e2;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.provider-slider-card .card-badge {
  padding: 8px 16px;
  color: var(--primary-text-color);
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  text-align: center;
}
.provider-slider-card.best-overall .card-badge {
  background: var(--primary-color);
}
.provider-slider-card.popular-pick .card-badge {
  background: #5388d8;
  color: var(--white-color);
}
.provider-slider-card.great-value .card-badge {
  background: #e5e5e5;
}
.provider-slider-card .card-content {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.provider-slider-card .provider-screenshot {
  aspect-ratio: 502/282;
  width: 100%;
  overflow: hidden;
}
.provider-slider-card .provider-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.provider-slider-card .provider-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.provider-slider-card .provider-logo {
  display: flex;
  align-items: center;
  min-height: 20px;
}
.provider-slider-card .provider-logo img {
  max-height: 20px;
}
.provider-slider-card .provider-rating {
  width: fit-content;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #eeeeee;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  border-radius: 4px;
}
.provider-slider-card .provider-rating svg {
  width: 14px;
  height: 14px;
  color: var(--primary-color);
  flex-shrink: 0;
}
.provider-slider-card .provider-offer {
  width: fit-content;
  background: #edf5fc;
  border: 1px dashed #d7d7d7;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--primary-mono-font);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
}
.provider-slider-card .slider-btn {
  margin-top: auto;
}
/* Swiper custom styles */
.providers-swiper .swiper-pagination {
  --swiper-pagination-bottom: -7px;
}
.providers-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #c2c2c2;
  opacity: 1;
}
.providers-swiper .swiper-pagination-bullet-active {
  background: #787878;
}
/* recommended providers slider section end */

/* footer start */
footer .footer-top-wrapper {
  background-color: #ededed;
  color: var(--primary-text-color);
  padding: 35px 0;
}
footer .footer-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
footer .footer-logo {
  height: 68px;
  width: fit-content;
}
footer .footer-logo img {
  max-height: 68px;
  width: auto;
}
footer .footer-links-section {
  font-family: var(--secondary-font);
}
footer .footer-heading {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
footer .footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
footer .footer-links-list li a {
  color: var(--primary-text-color);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
footer .footer-links-list li a:hover {
  opacity: 0.8;
}
footer .footer-contact-text {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 24px;
  color: var(--primary-text-color);
}
footer .footer-badges {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
footer .footer-badge {
  height: 38px;
  display: flex;
  align-items: center;
}
footer .footer-badge img {
  max-height: 38px;
}
footer .footer-bottom-wrapper {
  background-color: var(--primary-text-color);
  padding: 32px 0;
}
footer .footer-disclaimer {
  margin-bottom: 24px;
}
footer .footer-disclaimer .footer-text {
  color: #aaaaaa;
  margin-bottom: 12px;
  font-weight: 300;
  font-size: 12px;
}
footer .footer-disclaimer .footer-text:last-child {
  margin-bottom: 0;
}
footer .footer-disclaimer a {
  color: #aaaaaa;
  text-decoration: underline;
}
footer .footer-copyright {
  text-align: center;
}
footer .footer-copyright .footer-text {
  color: #aaaaaa;
  font-size: 12px;
}
/* footer end */