@charset "UTF-8";

body {
  overflow: unset;
}

/* Common Start */
main {
  font-family: "Poppins Regular";
  --primary-black-color: #2e2e2e;
  --primary-orange-color: #ff9933;
  --primary-blue-color: #1b77f2;
  --primary-orange-color-hover: #e5892d;
  --primary-blue-color-hover: #3f91ff;
  --primary-light-blue-color: #00bde3;
  --primary-light-blue-color-hover: #00a9cb;
  --primary-green-color: #4abc4d;
  --primary-green-color-hover: #3ba03e;
}

main h2 {
  margin-bottom: 10px;
  font-family: "Poppins Bold";
  font-size: 36px;
  line-height: 54px;
  color: var(--primary-text-color);
  text-align: center;
}

main h3 {
  font-size: 24px;
  line-height: 36px;
  font-family: "Poppins Bold";
}

main .title-desc {
  max-width: 810px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 21px;
  opacity: 0.7;
}

main section {
  margin-top: 140px;
}

.arrow-right-btn {
  cursor: pointer;
}

.arrow-right-btn svg {
  margin-left: 13px;
  transition: all 0.5s ease;
}

.arrow-right-btn:hover svg {
  transform: translateX(8px);
}

.base-orange-btn,
.base-blue-btn,
.base-green-btn,
.base-lighter-blue-btn,
.base-border-white-btn {
  font-family: "Poppins SemiBold";
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 48px;
  font-size: 18px;
  line-height: 32px;
  border-radius: 10px;
  color: #fff;
  transition: all 0.2s ease;
}

.base-orange-btn {
  background: var(--primary-orange-color);
}

.base-blue-btn {
  background: var(--primary-light-blue-color);
}

.base-green-btn {
  background: var(--primary-green-color);
}

.base-lighter-blue-btn {
  background: rgba(0, 189, 227, 0.2);
  color: var(--primary-light-blue-color);
}

.base-white-btn:hover {
  transform: translateY(-3px);
}

.base-orange-btn:hover,
.base-blue-btn:hover,
.base-btn:hover,
.base-green-btn:hover,
.base-lighter-blue-btn:hover,
.base-border-white-btn:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-3px);
}

.base-orange-btn:hover {
  background: var(--primary-orange-color-hover);
}

.base-blue-btn:hover {
  background: var(--primary-light-blue-color-hover);
}

.base-green-btn:hover {
  background: var(--primary-green-color-hover);
}

.base-lighter-blue-btn:hover {
  background: rgba(0, 189, 227, 0.3);
  color: var(--primary-light-blue-color-hover);
}

.base-border-blue-btn {
  background: #ffff;
  color: var(--primary-blue-color);
  border: 1px solid var(--primary-blue-color);
  font-family: "Poppins SemiBold";
  border-radius: 12px;
  font-size: 18px;
  line-height: 30px;
}

.base-border-white-btn {
  border: 1px solid rgba(254, 255, 255, 1);
  color: #fff;
  background: transparent;
}

.base-border-blue-btn:hover {
  background: var(--primary-blue-color);
  color: #fff;
  text-decoration: none;
}

.base-border-blue-btn:hover svg {
  transition: all 0.2s ease;
  fill: #fff;
}

.base-border-white-btn:hover {
  background: #fff;
  color: var(--primary-light-blue-color);
}

.highlight-blue {
  color: var(--primary-light-blue-color);
}

.bg-warp {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(232, 244, 255, 0) 3.04%,
    #e8f4ff 100%
  );
  margin-top: 101px;
  padding-bottom: 140px;
}

.bg-warp::before {
  position: absolute;
  content: "";
  left: -201px;
  top: 3%;
  width: 399px;
  height: 421px;
  background: #e3ffcd;
  opacity: 0.6;
  border-radius: 50%;
  z-index: -1;
  filter: blur(95px);
}

.bg-warp::after {
  position: absolute;
  content: "";
  left: -230px;
  bottom: 297px;
  width: 550px;
  height: 550px;
  background: #21f5e8;
  opacity: 0.5;
  border-radius: 50%;
  z-index: -1;
  filter: blur(120px);
}

@media (max-width: 1660px) {
  .base-maxwidth {
    padding: 0 10px;
  }
}

@media (max-width: 991px) {
  main section {
    margin-top: 60px;
  }
}

@media (max-width: 768px) {
  .bg-warp::after,
  .bg-warp::before {
    display: none;
  }

  .base-maxwidth {
    padding: 0;
    margin: 0 16px;
  }

  .base-orange-btn,
  .base-blue-btn {
    width: 200px;
    height: 48px;
    font-size: 16px;
  }


  main h2 {
    font-family: "Poppins SemiBold";
    font-size: 24px;
    line-height: 36px;
  }

  main h3 {
    font-size: 18px;
    line-height: 26px;
  }

  main .support {
    margin-top: 60px;
  }

  main .title-desc {
    font-size: 14px;
    line-height: 21px;
  }
}

/* Common End */

/* Banner Start */

.banner {
  margin-top: 0;
  padding: 56px 0 0;
  background: linear-gradient(
    180deg,
    rgba(230, 248, 252, 0) 0%,
    #e6f8fc 64.58%,
    #e6f8fc 100%
  );
}

.banner .base-blue-btn {
  width: 240px;
  height: 60px;
  border-radius: 8px;
}

.banner .base-maxwidth {
  position: relative;
  padding-bottom: 66px;
}

.banner .title {
  display: flex;
  align-items: center;
  margin: 0 0 5px;
  line-height: 64px;
}

.banner .title .product-name {
  font-family: "Poppins SemiBold";
  margin-left: 11px;
  font-size: 24px;
}

.banner h1 {
  max-width: 664px;
  margin-bottom: 28px;
  font-family: "Poppins Bold";
  font-size: 40px;
  line-height: 50px;
}

.banner h1 .highlight-blue {
  color: var(--primary-light-blue-color);
}

.banner .desc-list {
  font-size: 14px;
  line-height: 23px;
  color: var(--primary-black-color);
}

.banner .desc-list .item {
  position: relative;
  padding-left: 14px;
  margin-bottom: 8px;
}

.banner .desc-list .item::before {
  position: absolute;
  content: "";
  left: -2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-orange-color);
}

.banner .btn-group {
  display: flex;
  margin-top: 40px;
}

.banner .btn-group .buy-btn {
  margin-right: 40px;
  width: 240px;
  height: 60px;
}

.banner .banner-cover {
  position: absolute;
  right: 0;
  bottom: 47px;
  max-width: 509px;
  width: 42.5%;
}

.banner .banner-cover img {
  width: 100%;
}

.banner .btn-group .count-down::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 76px;
  height: 24px;
  background: url(https://images.clevguard.com/en/assets/images/common/20_percent_count_down.gif)
    no-repeat;
  background-size: contain;
  border-radius: 0 8px 0 0;
}

@media (max-width: 1024px) {
  .banner .banner-cover {
    position: relative;
    bottom: 0;
  }

  .banner .base-maxwidth {
    padding-bottom: 0;
  }

  .banner .title {
    justify-content: center;
  }

  .banner h1,
  .banner .desc {
    max-width: 100%;
    text-align: center;
  }

  .banner .pc-show {
    display: none;
  }

  .banner .btn-group {
    justify-content: center;
  }

  .banner .btn-group .btn {
    width: 220px;
    height: 48px;
  }

  .banner .banner-cover {
    margin: 30px auto 0;
  }

  .banner .desc-list {
    width: fit-content;
    max-width: 90%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .banner {
    padding: 0;
  }

  .banner .base-maxwidth {
    margin: 0 9px;
  }

  .banner .title .product-name {
    font-size: 18px;
    line-height: 27px;
  }

  .banner h1 {
    margin-bottom: 15px;
    font-size: 36px;
    line-height: 48px;
  }

  .banner h1 span {
    display: block;
  }

  .banner .desc {
    margin-bottom: 30px;
    line-height: 24px;
    font-size: 16px;
  }

  .banner .title {
    margin: 23px 0 16px;
  }

  .banner .btn-group {
    flex-direction: column;
    align-items: center;
  }

  .banner .btn-group .buy-btn {
    margin-right: 0;
    margin-bottom: 16px;
  }

  .banner .title img {
    width: 24px;
  }

  .banner .btn-group .count-down::after {
    width: 60px;
  }

  .banner .banner-cover {
    width: 100%;
    max-width: 80%;
  }
}

/* Banner End */

/* Logo Group Start */
.scroll-wrap {
  overflow: hidden;
  max-width: 100vw;
  margin-top: 0;
}

.logo-group {
  margin-top: 80px;
  display: flex;
  align-items: center;
  width: 3840px;
  height: 80px;
  animation: scroll 60s linear infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes scroll {
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .logo-group {
    margin-top: 0;
  }
}

/* Logo Group End */

/* Func List Start */
.func-list {
  margin-top: 110px;
}

.func-list .scroll-container {
  background: linear-gradient(180deg,#fff, 7%, #e6f8fc 17.18%, #edf8ed 50.35%, #fff6ed 85.76%);
}

.func-list .scroll-container .base-maxwidth {
  position: relative;
}

.func-list .func-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 685px;
}

.func-list .func-item .base-maxwidth {
  display: flex;
  align-items: center;
  gap: 109px;
  height: 100%;
}

.func-list .func-item .cover {
  opacity: 0;
  position: absolute;
  top: 126px;
  left: 0;
  bottom: 128px;
  max-width: 616px;
  width: 51.3%;
  transition: all 0.3s ease;
}

.func-list .func-item .cover.active {
  opacity: 1;
}

.func-list .func-item .cover img {
  position: sticky;
  top: 241px;
  width: 100%;
}

.func-list .func-item .func-intro {
  flex: 1;
  margin-top: 20px;
  max-width: 473px;
}

.func-list .func-item .func-intro h3 {
  margin-bottom: 24px;
}

.func-list .func-item .func-intro .highlight-blue {
  display: block;
}

.func-list .func-item.green .highlight-blue {
  color: #4abc4d;
}

.func-list .func-item.orange .highlight-blue {
  color: #fea64c;
}

.func-list .desc-list {
  margin-bottom: 38px;
  color: var(--primary-black-color);
  opacity: 0.7;
  font-size: 16px;
}

.func-list .desc-list .item {
  position: relative;
  padding-left: 23px;
  line-height: 24px;
}

.func-list .desc-list .item::before {
  position: absolute;
  left: 9px;
  top: 12px;
  width: 4px;
  height: 4px;
  background: var(--primary-black-color);
  content: "";
  border-radius: 50%;
}

.func-list .btn-warp {
  display: flex;
  align-items: center;
  gap: 30px;
}

.func-list .func-item.green .base-text-btn {
  color: var(--primary-green-color);
}

.func-list .func-item.green .base-text-btn:hover {
  color: var(--primary-green-color-hover);
}

.func-list .func-item.orange .base-text-btn {
  color: var(--primary-orange-color);
}

.func-list .func-item.orange .base-text-btn:hover {
  color: var(--primary-orange-color-hover);
}

@media (max-width: 1024px) {
  .func-list .func-item {
    justify-content: space-between;
    flex-direction: column-reverse;
    gap: 40px;
    padding: 20px 0 40px;
  }

  .func-list .func-item .cover {
    position: relative;
    top: 0;
    opacity: 1;
    max-width: 500px;
  }

  .func-list .func-item .cover img {
    top: 0;
  }

  .func-list {
    padding: 0;
    margin: 35px 16px 0;
  }

  .func-list .func-item {
    height: auto;
    border-radius: 10px;
  }

  .func-list .func-item:first-of-type .base-maxwidth {
    padding-top: 0;
  }

  .func-list .func-item .func-intro {
    text-align: center;
  }

  .func-list .func-item .cover {
    width: 100%;
  }

  .func-list .btn-warp {
    flex-direction: column;
  }

  .func-list .desc-list {
    text-align: left;
  }

  .func-list .btn-warp {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .func-list .func-item {
    padding-bottom: 20px;
  }
}

/* Func List End */

.ultimate {
  margin-top: 168px;
}

.ultimate h3 {
  margin-bottom: 10px;
  font-family: "Poppins Bold";
  font-size: 24px;
  line-height: 36px;
}

.ultimate .container {
  display: flex;
  gap: 20px;
  margin-top: 76px;
}

.ultimate .container .desc {
  margin-bottom: 23px;
  font-size: 16px;
  line-height: 24px;
}

.ultimate .left {
  padding: 40px 0 35px 40px;
  border-radius: 20px;
  background: rgba(0, 189, 277, 0.1);
}

.ultimate .right,
.ultimate .left {
  width: 50%;
}

.ultimate .left .desc {
  max-width: 360px;
}

.ultimate .left .mobile-lottie {
  width: 347px;
  height: 307px;
  max-width: 347px;
}

.ultimate .right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ultimate .right .desc {
  max-width: 242px;
}

.ultimate .right img {
  position: absolute;
  right: -9px;
  bottom: -2px;
  max-width: 244px;
}

.ultimate .right .top,
.ultimate .right .bottom {
  position: relative;
  display: flex;
  min-height: 240px;
  padding: 40px 0 0 40px;
}

.ultimate .right .top {
  border-radius: 20px;
  background: rgba(74, 188, 77, 0.1);
}

.ultimate .right .bottom {
  border-radius: 20px;
  background: rgba(254, 166, 76, 0.1);
}

.ultimate .right .bottom .soon {
  color: #fea64c;
}

@media (max-width: 991px) {
  .ultimate {
    margin-top: 60px;
  }

  .ultimate .container {
    flex-direction: column;
    margin-top: 20px;
  }

  .ultimate .right,
  .ultimate .left {
    width: 100%;
  }

  .ultimate .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .ultimate .left .desc {
    max-width: 100%;
    text-align: center;
  }

  .ultimate .left .desc br {
    display: none;
  }

  .ultimate .left .mobile-lottie{
    max-width: 300px;
    width: 60%;
  }

  .ultimate .right .top,
  .ultimate .right .bottom {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .ultimate .right img {
    max-width: 150px;
  }

  .ultimate .left .mobile-lottie{
    width: 80%;
  }
}

/* Ultimate End */

/* Kid Digital Start */
.kid-digital .base-maxwidth {
  display: flex;
  justify-content: space-between;
  padding: 46px 23px 54px 80px;
  border-radius: 20px;
  background: rgba(219, 94, 211, 0.1);
}

.kid-digital .left {
  max-width: 328px;
  padding-top: 72px;
}

.kid-digital .left h2 {
  margin-bottom: 10px;
  font-size: 24px;
  text-align: left;
  line-height: 36px;
}

.kid-digital .right {
  max-width: 645px;
}

.kid-digital .desc {
  font-size: 16px;
  line-height: 24px;
}

.kid-digital .right .desc {
  font-size: 14px;
  line-height: 21px;
  color: rgba(46, 46, 46, 0.5);
}

.kid-digital .right .item {
  display: flex;
}

.kid-digital .right .item:first-child {
  margin-bottom: 69px;
}

.kid-digital .right .item img {
  width: 96px;
  margin-right: 23px;
  object-fit: contain;
}

.kid-digital .right .item:nth-child(2) img {
  width: 128px;
  margin-right: 0;
  object-fit: contain;
}

.kid-digital .right .info .title {
  margin-bottom: 10px;
  font-family: "Poppins Bold";
  font-size: 16px;
  line-height: 24px;
}

@media (max-width: 991px) {
  .kid-digital .base-maxwidth {
    display: flex;
    flex-direction: column;
    padding: 40px 25px 25px;
  }

  .kid-digital .left h2 {
    margin-bottom: 0;
    text-align: center;
  }

  .kid-digital .left {
    padding-top: 0;
    max-width: 100%;
    text-align: center;
  }

  .kid-digital .right {
    max-width: 100%;
    margin-top: 40px;
  }

  .kid-digital .right .item:first-child {
    margin-bottom: 40px;
  }
}

/* Kid Digital End */

/* Lowdown Start */
.lowdown {
  background: linear-gradient(
    180deg,
    rgba(230, 248, 252, 0) 0%,
    #e6f8fc 67.41%,
    #e6f8fc 104.38%
  );
  padding-bottom: 75px;
}

.lowdown .title-desc {
  max-width: 1008px;
}

.lowdown .btn-group {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  width: 100%;
  gap: 20px;
  margin-bottom: 56px;
}

.lowdown .tab-container {
  min-height: 558px;
  padding: 25px;
  border-radius: 12px;
  background: #ffffff33;
  border: 2px solid #ffffff;
}

.lowdown .tab-container .tab-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 270px;
}

.lowdown .tab-container .tab-list .item {
  display: flex;
  padding: 25px 0 27px 20px;
  cursor: pointer;
  border-radius: 10px;
  background: rgba(217, 217, 217, 0.2);
}

.lowdown .tab-container .tab-list .item:hover,
.lowdown .tab-container .tab-list .item.active {
  background: rgba(0, 189, 227, 0.1);
  color: var(--primary-light-blue-color);
}

.lowdown .tab-container .item svg {
  margin-right: 10px;
  min-width: 24px;
}

.lowdown .tab-container {
  display: flex;
  justify-content: space-between;
}

.lowdown .tab-container .tab-list {
  flex: 1;
}

.lowdown .tab-container .tab-content  {
  max-width: 863px;
}

.lowdown .tab-container .tab-content .tab-pane {
  display: none;
  opacity: 0;
  object-fit: contain;
}

.lowdown .tab-container .tab-content .tab-pane.active {
  display: block;
  opacity: 1;
}

@media (max-width: 991px) {
  .lowdown {
    padding-bottom: 30px;
  }

  .lowdown .btn-group {
    margin: 20px auto 30px;
  }

  .lowdown .tab-container {
    flex-direction: column;
    min-height: auto;
    border-radius: 10px;
  }

  .lowdown .tab-container .tab-list {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: none;
  }

  .lowdown .tab-container .tab-list .item {
    width: 24%;
    min-width: 120px;
    padding: 10px;
  }

  .lowdown .tab-container .tab-content {
    margin-top: 20px;
  }

  .lowdown .tab-container .tab-content .tab-pane {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .lowdown .tab-container {
    padding: 10px;
  }

  .lowdown .tab-container .tab-list .item {
    width: 48%;
    min-width: 120px;
  }
}

/* Lowdown End */

/* #region No technical expertise required start */
.use-step {
  margin-top: 52px;
}

.use-step .desc {
  text-align: center;
  margin: 10px 0 69px;
  color: #000;
}

.use-step .left-img {
  width: 627px;
  overflow: hidden;
}

.use-step .swiper-slide {
  padding: 20px;
}

.use-step .swiper-slide img {
  box-shadow: 3.39px 4.52px 22.59px 0px #0000001a;
  border-radius: 22px;
}

.use-step .step-list {
  width: 491px;
  overflow: hidden;
  margin-left: 82px;
}

.use-step .content {
  display: flex;
  align-items: center;
}

.step-list .step-item {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 30px;
  cursor: pointer;
  margin-bottom: 30px;
}

.step-list .step-item h3 {
  font-size: 18px;
  color: #666;
  font-weight: normal;
  font-family: Poppins, sans-serif;
}

.step-list .step-item.active h3 {
  color: #00bde3;
  font-weight: 600;
}

.step-list .step-desc {
  font-size: 14px;
  line-height: 21px;
  color: #2e2e2e;
  opacity: 0.7;
}

.step-list .step-item.active .step-desc {
  display: block;
}

.step-list .step-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.use-step .step-list .guide-btn,
.use-step .step-list .guide-btn:hover svg {
  color: var(--primary-light-blue-color);
  transition: all 0.3s;
}

.use-step .step-list .guide-btn:hover {
  text-decoration: none;
}

.use-step .step-list .guide-btn:hover svg {
  transform: translateX(5px);
}


@media (max-width: 1199px) and (min-width: 1000px) {
  .use-step .content {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 991px) {
  .use-step .desc {
    margin-bottom: 30px;
  }

  .use-step .left-img {
    width: 100%;
  }

  .use-step .content {
    flex-direction: column;
  }

  .use-step .step-list {
    width: auto;
    margin-left: 0;
    margin-top: 30px;
  }

  .step-list .step-item {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}

/* #endregion No technical expertise required end */

/* #region buy-card start */
.buy-card {
  margin-top: 90px;
}

.buy-card .base-maxwidth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 419px;
  background: url(https://images.clevguard.com/en/assets/overview/tiktok_monitoring/bug-card-bg.webp)
    no-repeat;
  box-shadow: 2.63px 3.5px 18.38px 0px #0049570d;
  backdrop-filter: blur(26.256633758544922px);
  border-radius: 10px;
  padding: 59px 50px 48px 80px;
  background-position: right bottom;
  background-size: cover;
}

.buy-card .buy-card-left h2 {
  max-width: 304px;
  text-align: left;
  color: #fff;
  margin-bottom: 15px;
}

.buy-card .desc {
  color: #fff;
  margin-bottom: 34px;
}

.buy-card .yellow-price {
  font-size: 36px;
  font-weight: 600;
  line-height: 54px;
  text-align: left;
  color: #ffd739;
}

.buy-card .btn-group {
  display: flex;
  align-items: center;
}

.buy-card .btn-group a {
  width: 160px;
  height: 56px;
  line-height: 56px;
}

.buy-card .btn-group .base-orange-btn {
  background: #f0c61e;
  margin-right: 20px;
}

.buy-card .base-blue-btn {
  background: #fff;
  color: #00bde3;
}

.buy-card img {
  margin-top: 25px;
  margin-right: 10px;
}

@media (max-width: 1200px) {
  .buy-card .base-maxwidth {
    min-height: unset;
  }

  .buy-card img {
    width: 50%;
  }
}

@media (max-width: 1024px) {
  .buy-card .base-maxwidth {
    flex-direction: column;
    align-items: center;
  }

  .buy-card .buy-card-left {
    width: 100%;
  }

  .buy-card img {
    width: 100%;
    margin-right: 0;
    margin-top: 60px;
  }

  .buy-card .buy-card-left h2 {
    max-width: unset;
    text-align: center;
  }

  .buy-card .desc {
    text-align: center;
  }

  .buy-card .btn-group {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .buy-card {
    margin-top: 60px;
  }

  .buy-card .base-maxwidth {
    padding: 32px 24px;
  }

  .buy-card img {
    margin-top: 24px;
  }

  .buy-card .yellow-price,
  .buy-card .buy-card-left h2 {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 12px;
  }

  .buy-card .desc {
    margin-bottom: 24px;
  }

  .buy-card .btn-group {
    justify-content: center;
  }
}

/* #endregion buy-card end */

/* #region Reviews start */
.reviews .base-maxwidth {
  display: flex;
  justify-content: space-between;
  max-width: 1240px;
  padding-left: 20px;
  overflow: hidden;
}

.reviews .stars-list {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reviews .reviews-left h2 {
  color: #2e2e2e;
  margin-top: 60px;
  text-align: left;
  max-width: 403px;
}

.reviews .reviews-pagination {
  margin-top: 70px;
}

.reviews .swiper-pagination-bullet {
  background: #ccf2f9;
  opacity: 1;
  width: 12px;
  height: 12px;
  margin-right: 8px;
}

.reviews .swiper-pagination-bullet-active {
  background: #00bde3;
}

.reviews .reviews-right {
  flex: 1;
  overflow: hidden;
}

.reviews .reviews-navigation {
  text-align: right;
  padding-right: 20px;
  color: #00bde3;
  cursor: pointer;
}

.reviews .navigation-prev {
  margin-right: 8px;
}

.reviews .navigation-prev svg {
  transform: rotate(180deg);
}

.reviews-navigation .disabled {
  opacity: 0.2;
  cursor: default;
}

.reviews .swiper-wrapper .swiper-slide {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 30px;
  padding: 20px;
}

.reviews .swiper-slide .reviews-card {
  display: flex;
  flex-direction: column;
  color: #2e2e2e;
  width: 318px;
  gap: 20px;
  padding: 20px 25px 20px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 3.39px 4.52px 22.59px 0px #0000001a;
  min-height: 273px;
  font-size: 14px;
}

.reviews .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.reviews .user-info-detail span {
  display: block;
}

.reviews .user-info-detail .user-name {
  font-size: 14px;
  color: #2E2E2E;
}

.reviews .user-info-detail .user-desc {
  font-size: 12px;
  color: #666666;
}

.reviews .swiper-slide img {
  margin-top: auto;
}

@media (max-width: 1024px) {
  .reviews .base-maxwidth {
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 0 0 40px;
  }

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

  .reviews .reviews-left h2 {
    order: 0;
    margin-top: 0;
    max-width: 100%;
    text-align: center;
  }

  .reviews .stars-list {
    order: 1;
    justify-content: center;
  }

  .reviews .reviews-left p {
    order: 2;
    text-align: center;
  }

  .reviews .reviews-pagination {
    position: absolute;
    margin-top: 0;
    bottom: 0;
    left: 50%;
  }

  .reviews .reviews-navigation {
    display: none;
  }

  .reviews .reviews-right {
    width: 100%;
  }

  .reviews .swiper-wrapper .swiper-slide {
    justify-content: space-evenly;
  }

  .reviews .swiper-slide .reviews-card {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .reviews .swiper-wrapper .swiper-slide {
    flex-direction: column;
  }

  .reviews .swiper-slide .reviews-card {
    width: 100%;
  }
}

/* #endregion Reviews end */

/* #region hot-topic */
.hot-topic {
  margin: 140px 0 0;
  padding: 73px 0 75px;
  text-align: center;
  background: linear-gradient(180deg, #e6f8fc 0%, rgba(230, 248, 252, 0) 100%);
}

.hot-topic .base-maxwidth {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1240px;
  padding: 0;
}

.hot-topic h2 {
  text-align: center;
}

.hot-topic .topic-swiper {
  width: 100%;
  padding: 0 15px;
}

.hot-topic .topic-pagination {
  margin-top: 60px;
}

.hot-topic .swiper-pagination-bullet {
  background: #ccf2f9;
  opacity: 1;
  margin-right: 8px;
}

.hot-topic .swiper-pagination-bullet-active {
  background: #00bde3;
}

.hot-topic .topic-content {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  margin-top: 60px;
}

.topic-content .topic-item {
  width: calc(33.3% - 16.6px) !important;
  height: auto;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 18px 0px #1a21201a;
  transition: transform 0.2s ease;
  color: #2e2e2e;
  text-align: left;
  transform: translateZ(0);
}

.topic-content .topic-item:hover {
  box-shadow: 0px 4px 18px 0px #09d3fc5c;
  transform: translateZ(8px) scale(1.01);
  cursor: pointer;
  text-decoration: none;
}

.topic-item .topic-image {
  width: 100%;
  height: 226px;
  object-fit: cover;
  border-radius: 10px;
  overflow: hidden;
  max-width: 515px;
}

.topic-item .topic-info {
  padding: 5px;
}

.topic-item .topic-title {
  margin-top: 19px;
  font-size: 18px;
  line-height: 27px;
  text-align: left;
}

.topic-item .topic-desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 21px;
  text-align: left;
}

.hot-topic .read-more {
  color: #00bde3;
  margin-top: 40px;
}

@media (max-width: 1200px) {
  .topic-item .topic-image {
    height: auto;
  }
}

@media (max-width: 991px) {
  .hot-topic {
    margin: 48px 0 0;
    padding: 60px 0;
  }

  .hot-topic h2 {
    margin-bottom: 20px;
  }

  .hot-topic .topic-content {
    margin-top: 20px;
  }

  .topic-content .topic-item {
    width: 100% !important;
    padding: 10px 10px 24px;
    margin-bottom: 30px;
  }

  .hot-topic .topic-pagination {
    margin-top: 24px;
  }

  .topic-item .topic-info {
    padding: 0 12px;
  }

  .hot-topic .read-more {
    margin-top: 24px;
  }
}

/* #endregion hot-topic */

/* #region product-faq Start */
.product-faq {
  margin-top: 65px;
}

.product-faq h2 {
  margin-bottom: 60px;
}

.product-faq .faq-question {
  font-size: 18px;
  font-weight: 400;
}

.product-faq .faq-answer {
  font-size: 14px;
  line-height: 24px;
}

.product-faq .faq-right {
  display: flex;
  flex-direction: column;
  width: 430px;
  gap: 20px;
  margin-left: 40px;
}

.product-faq .faq-right .right-item {
  position: relative;
  background: #ecfafd;
  border-radius: 12px;
  padding: 16px 16px 16px 62px;
}

.product-faq .faq-right .right-item::before {
  content: "";
  width: 36px;
  height: 36px;
  position: absolute;
  top: 16px;
  left: 16px;
  background: url(https://images.clevguard.com/en/assets/overview/tiktok_monitoring/support-center.svg)
    no-repeat;
}

.product-faq .faq-right .right-item:nth-child(2)::before {
  background: url(https://images.clevguard.com/en/assets/overview/tiktok_monitoring/contact-us.svg)
    no-repeat;
}

.product-faq .right-item h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 21px;
}

.product-faq .right-item p {
  color: #101829b2;
  margin-bottom: 21px;
}

.product-faq .right-item a,
.product-faq .right-item a svg {
  color: #00bde3;
  transition: all 0.3s;
}

.product-faq .right-item a:hover {
  text-decoration: none;
}

.product-faq .right-item a:hover svg {
  transform: translateX(5px);
}

@media (max-width: 1024px) {
  .product-faq .faq-right {
    flex-direction: row;
    margin-left: 0;
    margin-top: 32px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .product-faq .faq-right {
    flex-direction: column;
  }
}

/* #endregion product-faq end */

/* Slogan Start */
.slogan {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  text-align: center;
  height: 380px;
  background: linear-gradient(180deg, #00bde3 0%, rgba(0, 189, 227, 0.49) 100%);
  box-shadow: 2.63px 3.5px 18.38px 0px rgba(0, 73, 87, 0.05);
  backdrop-filter: blur(26px);
  color: #fff;
}

.slogan::after {
  position: absolute;
  content: "";
  top: -30%;
  right: 0;
  width: 661px;
  height: 661px;
  z-index: -1;
  background: url(https://images.clevguard.com/en/assets/overview/tiktok_monitoring/slogan-bg.svg)
    no-repeat;
}

.slogan h3 {
  margin-bottom: 37px;
}

.slogan h3 img {
  margin-right: 16px;
}

.slogan .btn-warp {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
}

.slogan .btn-warp .btn {
  width: 160px;
  height: 58px;
}

@media (max-width: 768px) {
  .slogan .btn-warp {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .slogan .btn-warp .btn {
    width: 66%;
  }
}

/* Slogan End */