::-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;
}

html {
  font-family: 'Roboto', sans-serif;
}

body {
  margin: 0 !important;
}

.no-padding {
  padding: 0;
}

.no-margin {
  margin: 0;
}

.centering-things {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.display-large {
  display: none;
}

.display-small {
  display: unset;
}

.container {
  max-width: 904px;
}

.navbar-section {
  padding: 50px 0;
}


.navbar-section hr {
  border-bottom: 1px solid #DADADA;
  margin: 25px 0;
}

.navbar-section .tab-pills {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  flex-wrap: wrap;
}

.navbar-section .tab-pills p {
  border-radius: 32px;
  border: 1px solid #4088BB;
  padding: 6px 16px;
  margin: 0;

  color: #4088BB;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.header-section h1 {
  color: #1E1E1E;

  font-family: Roboto;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 130.078%;
  margin-bottom: 22px;
}

.header-section h3 {
  color: #1E1E1E;
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 156.445%;
  margin-bottom: 22px;
}

.header-section .client-detail {
  margin: 22px 0 102px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
}

.header-section .client-detail .a-side {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.header-section .client-detail h6 {
  color: #1E1E1E;
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 130.078%;
  margin: 0;
}

.header-section .client-detail h6 b {
  font-weight: 700;
}

.header-section .header-banner {
  width: 100%;
  transform-origin: center;
  transform: scale(1.15);
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
}

.header-section h5 {
  color: #1E1E1E;

  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 156.445%;

  margin: 0px 0 32px 0;
}

.header-section h2 {
  color: #1E1E1E;

  /* Headline 2 */
  font-family: Roboto;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 130.078%;
  /* 52.031px */

  margin-bottom: 35px;
}

.header-section .checklist-card {
  border-radius: 30px;
  border: 3px solid #4088BB;
  background: #FFF;

  padding: 40px 50px;
}

.header-section .checklist-card p {
  margin-bottom: 18px;
  color: #000;

  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.header-section .checklist-card p b {
  font-weight: 700;
}

.header-section .checklist-card p:nth-last-child(1) {
  margin-bottom: 0;
}

.header-section .recommendation-card {
  margin: 35px 0;
  border-radius: 30px;
  border: 3px solid #4088BB;
  background: #FFF;
}

.header-section .recommendation-card .upper-part {
  padding: 20px 40px;
  background: #4088BB;
  border-top-right-radius: 27px;
  border-top-left-radius: 27px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  color: #FFF;
  font-family: Roboto;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 130.078%;
}

.header-section .recommendation-card .bottom-part {
  padding: 50px 70px;
}

.header-section .recommendation-card .bottom-part .doctor-detail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;

  margin-bottom: 50px;
}

.header-section .recommendation-card .bottom-part .doctor-detail:nth-last-child(1) {
  margin-bottom: 0;
}

.header-section .recommendation-card .bottom-part .doctor-detail p {
  color: #000;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120.4%;
  margin: 0;
}

.header-section .recommendation-card .bottom-part .doctor-detail p b {
  font-weight: 700;
}

.header-section .recommendation-card .bottom-part .doctor-detail .b-side p b:nth-child(1) {
  text-decoration-line: underline;
}

.header-section .recommendation-card .bottom-part .doctor-detail img {
  width: 216px;
  max-width: 216px;
  height: 218.945px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.middle-section h2 {
  color: #1E1E1E;
  font-family: Roboto;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

  margin-bottom: 15px;
}

.middle-section .gummies-card {
  border-radius: 30px;
  border: 3px solid #4087BB;
  background: #FFF;
  padding: 60px 65px 40px 65px;
  margin-bottom: 80px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
  flex-wrap: wrap;

  position: relative;
}

.middle-section .gummies-card .bookmark-logo {
  position: absolute;
  left: 50px;
  top: -1px;
}

.middle-section .gummies-card .a-side h6 {
  color: #0C3675;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-decoration-line: underline;
  margin: 8px 0;
}

.middle-section .gummies-card .a-side p {
  color: #8E8E8E;
  text-align: center;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

.middle-section .gummies-card .b-side h2 {
  color: #1E1E1E;
  font-family: Roboto;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 4px;
}

.middle-section .gummies-card .b-side h6 {
  color: #8E8E8E;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}

.middle-section .gummies-card .b-side p {
  color: #1E1E1E;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 13px;
}

.middle-section .gummies-card .b-side p b {
  color: #2CB920;
}

.middle-section .gummies-card .b-side p:nth-last-child(1) {
  margin-bottom: 0;
}

:is(.middle-section .gummies-card .b-side, #showButton1, #showButton2, #showButton3, #showButton4, #showButton) button {
  border-radius: 10px;
  background: #4088BB;

  color: #FFF;
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border: 0;

  padding: 19px 100px;
  margin: 28px 0 11px 0;
}

:is(.middle-section .gummies-card .b-side, #showButton1, #showButton2, #showButton3, #showButton4, #showButton) h5 {
  color: #8E8E8E;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

  margin: 0;
}


.footer-upper-section {
  margin-top: 50px;
  margin-bottom: 40px;
  padding: 40px 0;

  border-top: 2px solid #d9d9d9;
  border-bottom: 2px solid #d9d9d9;
}

.footer-upper-section .footer-inner-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 25px;
}

.footer-upper-section .footer-inner-section p {
  color: #000;
  font-size: 14px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}

.footer-upper-section .footer-inner-section .links-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-upper-section .footer-inner-section .links-section a {
  color: #1016ab;
  font-size: 14px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.footer-bottom-section {
  margin-bottom: 30px;
  text-align: center;
}

.footer-bottom-section p {
  color: #727272;
  font-size: 12px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  line-height: 159.5%;
}

.footer-bottom-section p b {
  font-weight: 700;
}

.footer-bottom-section p a {
  color: #727272;
  text-decoration-line: underline;
}

.grades-card {
  border-radius: 30px;
  border: 3px solid #4087BB;

  padding: 100px 75px 50px 75px;
  margin-top: 100px;
  margin-bottom: 60px;
  position: relative;
}

.grades-card .level-value {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  top: -75px;
  width: 160.021px;
  height: 159.839px;
  margin-right: auto;
}

.grades-card h4 {
  color: #1E1E1E;
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}

.grades-card h3 {
  color: #8E8E8E;
  text-align: center;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.grades-card .votes-card {
  border-radius: 30px;
  border: 2px solid #D7D7D7;
  padding: 40px 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  margin-top: 35px;
  margin-bottom: 70px;
}

.grades-card .votes-card button {
  border-radius: 20px;
  background: var(--Light-gradient-2, linear-gradient(269deg, #89C6E9 -2.64%, #A896DC 100.39%));
  color: #FFF;
  text-align: center;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 156.445%;
  padding: 15px 27px;
  border: 0;
}

.grades-card .votes-card>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 30px;
}

.grades-card .progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;

  border-bottom: 1px solid #D7D7D7;
  margin-bottom: 17px;
}

.grades-card .progress-row p {
  margin-bottom: 15px;
}

.grades-card .progress-row .progress {
  width: 283px;
  border-radius: 18px;
  height: 24px;
  margin-bottom: 15px;
}

.grades-card .progress-row .progress-bar {
  border-radius: 18px;
  background: var(--Light-gradient-2, linear-gradient(269deg, #89C6E9 -2.64%, #A896DC 100.39%));
}

.grades-card .progress-row .b-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.grades-card p, .grades-card li {
  color: #000;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 156.445%;
}

.grades-card p b {
  font-weight: 700;
}

.pros-and-cons div{
  flex: 1;
}

.grades-card .pros-and-cons {
  display: flex;
  align-items: flex-start;
  gap: 30px;

}

.grades-card .pros-and-cons p {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.grades-card .dotted-card {
  border-radius: 30px;
  border: 4px dashed #CE004A;
  padding: 35px 40px;
  margin: 40px 0;
}

.grades-card .dotted-card .upper-part {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
  flex-wrap: wrap;

}

.grades-card .dotted-card .upper-part h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.grades-card .dotted-card .upper-part>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.grades-card .dotted-card .upper-part h6 {
  color: #000;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.grades-card .dotted-card .upper-part h6:nth-child(2) {
  color: #CE004A;
  font-family: Roboto Mono;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border-radius: 3px;
  background: #EDEDED;
  padding: 5px 12px;
}

.grades-card .dotted-card .middle-part {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 70px;
  margin: 35px 0;
}

.grades-card .dotted-card .middle-part img {
  width: 85px;
  height: 152px;
}

.grades-card :is(.dotted-card#hideCard1, .dotted-card#hideCard3, .dotted-card#hideCard4) .middle-part img {
  width: 172px;
  height: 139px;
}

.grades-card .dotted-card .middle-part p b {
  text-decoration-line: underline;
  margin: 0;
}

.grades-card .dotted-card button {
  border-radius: 10px;
  /* background: #4088BB; */
  background: linear-gradient(90deg, #3B66B9, #4087BB);
  color: #FFF;
  text-align: center;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 156.445%;
  padding: 15px 27px;
  border: 0;
  margin-top: 30px;

  position: relative;
  overflow: hidden;
}

.crystal-layer {
  position: absolute;
  top: -5px;
  left: 0;
  width: 15px;
  height: 120%;
  background-color: #fff;
  z-index: 1;
  opacity: 0.5;
  transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  animation: slideContinuous 1s ease-in-out infinite;
  -webkit-animation: slideContinuous 1s ease-in-out infinite;
}

/* Define the keyframe animation */
@keyframes slideContinuous {
  0% {
    left: -10px;
    /* Initial position, off-screen to the left */
  }

  100% {
    left: 100%;
    /* Move to the right end of the container */
  }
}


.grades-card hr {
  height: 2px;
  color: #D7D7D7;
}

.grades-card .dotted-card .loader-part {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 45px 0;
}

.grades-card .dotted-card .loader-part .loader-text {
  color: #000;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.grades-card .dotted-card .loader-part .spinner-border {
  border: 0.25em solid #70D5F4;
  border-right-color: #fff;
}

.grades-card .dotted-card .save-part {
  text-align: center;
}

.grades-card .dotted-card .save-part button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #4088BB;
  margin: auto;
  margin-top: 12px !important;
  margin-bottom: 6px !important;
  border-radius: 10px;
}

.grades-card .dotted-card .save-part .save-text {
  color: #262626;
  text-align: center;
  font-family: Roboto;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
  /* 18px */
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.grades-card .dotted-card .success-part {
  text-align: center;
}

.grades-card .dotted-card .success-part button {
  background: #4088BB;
  margin: auto;
  margin-top: 25px !important;
  border-radius: 10px;
}

.grades-card .dotted-card .success-part .success-text {
  color: #000;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.16px;
  text-align: center;
}
.navbar-section img{
  max-width: 170px;
}

.footer-upper-section img{
  max-width: 120px;
}
.best-product-img{
  width: 200px;
}
.middle-section p:not(.pros-and-cons div p, .progress-row p){
  font-family: Roboto;
  font-size: 20px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: left;
  margin-bottom: 50px;
}
.header-section h2:nth-of-type(1) {
  margin-top: 100px;
}
.product_desc_h4{
  text-align: left !important;
}
.pros-and-cons div:nth-child(1),.pros-and-cons div:nth-child(2){
  flex: 1;
}
.gummies-card div:nth-child(2){
  flex: 1;
}
.gummies-card div:nth-child(3){
  flex: 2;
}
.advertorial {
  font-size: 12px;
  text-align: center;
  max-width: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 15px;
  background: #EAEAEA;
}
.advertorial span{
  font-family: "Open Sans", sans-serif;
  font-size: 10px
}
ul.pros-ul, ul.cons-ul{
  list-style: none; 
  padding-left: 0px;
}
ul.pros-ul li, ul.cons-ul li{
  padding-left: 35px;
  padding-bottom: 12px;
  background-position-y: 3px;
}
.pros-ul li{
  background: url('../images/img-17.svg') no-repeat left top;
}
.cons-ul li{
  background: url('../images/img-18.svg') no-repeat left top;
}
.rating-bg {
    background-image: url('../images/img-37.svg');
    max-width: 186.82px;
    max-height: 199px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
}
.rating-bg p{
  font-size: 16px !important;
  color: #8E8E8E;
  text-align: center !important;
  line-height: 18.75px !important;
}
.rating-bg p, .rating-bg h2{
  margin: 0 !important;
}