/* Hero */
#hero-loan .hero-container {
  margin-bottom: 40px;
}

#hero-loan .hero-container .updated {
  color: #707070;
  position: relative;
  padding-left: 12px;
  margin-bottom: 4px;
}

#hero-loan .hero-container .updated::before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 8px;
  left: 0px;
  background-color: #9ed635;
}

#hero-loan .hero-container h1 {
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  color: #000000;
  text-transform: none;
}

#hero-loan .hero-container h2 {
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 8px;
}

#hero-loan .hero-container p {
  color: #000000;
  font-weight: 400;
}

/* End of Hero */

/* *************** */
/* Content Section */
/* *************** */
.grid {
  display: grid;
  grid-template-columns: 70% 30%;
  margin-bottom: 64px;
}

.grid>* {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.grid-col-1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Search container */

.filter-section {
  width: 100%;
  margin: 10px 0;
  display: block;
}

.filter-section span.label {
  font-size: 15px;
  margin: 5px 0;
  display: inline-block;
}

.select-container {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  background-color: #f9ffef;
}

.select-container h3 {
  font-weight: 600;
  font-size: 22px;
  line-height: 22px;
  color: black;
  margin-bottom: 8px;
}

.select-container .select-box {
  display: flex;
  align-items: end;
  gap: 16px;
}

.select-box .custom-select-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.select-box .custom-select-wrapper p {
  margin-bottom: 6px;
}

.select-box .custom-select-wrapper .custom-select-dp {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(93, 112, 121, 0.3);
  border-radius: 5px;
  background-color: white;
}

.custom-select-dp.disabled {
  background: #a5a3a3;
}

.custom-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 16px 12px;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  color: #000;
  font-weight: 500;
}

.custom-select__trigger span {
  position: absolute;
  top: 8px;
  color: #7a7a7a;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.custom-select__trigger.disabled {
  background: #a5a3a3;
  cursor: not-allowed;
  pointer-events: all !important;
  border-radius: 10px;
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #979797;
  background: #fff;
  transition: all 0.5s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
}

.custom-select-dp.open .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.custom-option,
.custom-option-modal {
  position: relative;
  display: block;
  padding: 0 22px 0 22px;
  font-size: 16px;
  font-weight: 500;
  color: #3b3b3b;
  line-height: 60px;
  cursor: pointer;
  transition: all 0.5s;
}

.custom-option:hover,
.custom-option-modal:hover {
  cursor: pointer;
  background-color: #f5f6f7;
}

.custom-option.selected,
.custom-option-modal.selected {
  color: #1664bf;
}

.select-box .custom-select-wrapper .custom-select__trigger .arrow {
  position: relative;
  height: 24px;
  width: 24px;
  background-image: url("../images/arrow.svg");
  background-size: cover;
  margin-right: -10px;
}

.select-box .sumbit-btn {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid black;
  padding: 10px;
  background-color: transparent;
}

/* *************** */
/* Ranking Section */
/* *************** */

/* DESKTOP */

.ranking-container .ranking-card {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 6fr 2fr;
  column-gap: 16px;
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.08);
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.ranking-card .card-label {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
}

/* Only For Card-1 */
.ranking-card .card-label .card-1 {
  border-radius: 12px 0 0 0 !important;
}

.ranking-card .card-label .card-no {
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  border-radius: 12px 0 12px 0;
  background-color: #0f4034;
  padding: 0 8px 1px;
}

.ranking-card .card-label .advantages {
  background: #099058;
  color: white;
  padding: 0 12px 1px;
  height: 24px;
  border-radius: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
}

/* IMG */
.grid-col-1 .ranking-card .img-box {
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  width: auto;
}

.grid-col-1 .ranking-card .img-box img {
  max-width: 90%;
  max-height: 80px;
}

.ranking-card .img-box .rating-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ranking-card .img-box .rating-box p {
  font-size: 16px;
  font-weight: 600;
  color: #707070;
  margin-bottom: 0;
}

.ranking-card .img-box .rating-box p span {
  font-size: 24px;
  color: black;
  font-weight: 700;
}

.ranking-card .img-box .rating-box .star-box {
  display: flex;
  align-items: center;
}

.ranking-card .img-box .rating-box .star-box .fullstar {
  background: url(../images/loan_logos/fullstar.svg);
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: cover;
}

.ranking-card .img-box .rating-box .star-box .halfstar {
  background: url(../images/loan_logos/halfstar.svg);
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Feature */
.ranking-card .feature-box {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 6px;
}

.ranking-card .feature-box p {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  margin-bottom: 0;
}

.ranking-card .feature-box ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 0;
}

.ranking-card .feature-box ul li {
  position: relative;
  font-size: 16px;
  list-style: none;
  line-height: 24px;
  font-weight: 400;
  padding-left: 24px;
}

.ranking-card .feature-box ul li::before {
  content: "";
  position: absolute;
  background-image: url(../images/loan_logos/checkcircle.svg);
  height: 16px;
  width: 16px;
  left: 0;
  top: 3px;
}

/* BTN */
.row-span-2 {
  grid-row: span 2;
}

.grid-col-1 .ranking-card .btn-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ranking-card .btn-box .btn {
  display: inline-block;
  width: 100%;
  background: black;
  padding: 15px 40px;
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  border: none;
}

.ranking-card .btn-box a {
  color: black;
  font-weight: 700;
  font-size: 16px;
}

/* Advantages */

.outerbox {
  grid-column: span 2;
}

.card_1_advantages {
  display: flex;
  padding-top: 16px;
  gap: 12px;
  border-top: 1px solid #e6e6e6;

  margin-top: 16px;
}

.advantages-box {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: #e6f6c6;
  border-radius: 4px;
  gap: 8px;
}

.advantages-box p {
  font-size: 14px;
  margin-bottom: 0;
  font-weight: 400;
  color: black;
}

.card_1_advantages span {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
}

.card_1_advantages .computer {
  background: url(../images/loan_logos/service/computer.svg);
}

.card_1_advantages .headphone {
  background: url(../images/loan_logos/service/headphone.svg);
}

.card_1_advantages .timer {
  background: url(../images/loan_logos/service/timer.svg);
}


/* ------------- */
/* Table Section */
/* ------------- */

/* Ranking Table */

.top-sites-container {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #f6f7f9;
  border-radius: 12px;
  margin-bottom: 16px;
}

.top-sites-container h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  color: #000000;
  text-align: unset;
  margin-bottom: 0;
}

.top-sites-container p {
  vertical-align: middle;
  line-height: 24px;
}

.top-sites-container .top-sites-table .grid-table {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
}

  .top-sites-container .top-sites-table .grid-table .sub-head {
    display: none;
  }

.top-sites-container .top-sites-table .grid-table .table-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.7fr 1.3fr 1fr 1fr 1fr 1.7fr;
  background-color: white;
  border-bottom: 1px solid #e6e6e6;
  padding: 5px 0px;
  border-radius: 8px 8px 0 0;
}

.top-sites-table .grid-table .table-row .table-tag {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #099058;
  color: white;
  font-weight: 700;
  font-size: 10px;
  line-height: 14px;
  padding: 0 12px 1px;
  border-bottom-right-radius: 4px;
}

.top-sites-container .top-sites-table .grid-table .table-row:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.top-sites-table .grid-table .table-row .table-heading {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  padding: 10px;
  line-height: 14px;
}

/* Table Img */
.top-sites-table .grid-table .table-row .table-img {
  padding: 16px 12px 12px;
}

.top-sites-table .grid-table .table-row .table-img img {
  width: 100%;
  object-fit: cover;
}

/*  Table Rating  */
.top-sites-table .grid-table .table-row .table-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 18px;
}

.top-sites-table .grid-table .table-row .table-rating span {
  position: relative;
  font-size: 16px;
  font-weight: 700;
}

.top-sites-table .grid-table .table-row .table-rating span::before {
  position: absolute;
  content: "";
  left: -18px;
  top: 3px;
  background: url(../images/loan_logos/fullstar.svg);
  height: 14px;
  width: 14px;
  background-repeat: no-repeat;
}

/*  Table Cell */
.top-sites-table .grid-table .table-row .table-cell {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 22px;
}

/* Table Button */
.top-sites-table .grid-table .table-row .table-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-sites-table .grid-table .table-row a {
  padding: 10px 24px;
  color: white;
  background: #000000;
  border-radius: 8px;
  border: none;
  font-weight: 700;
}



/* ******************** */
/* *** Bank Section *** */
/* ******************** */

/* DESKTOP */

.grid .grid-col-1 div h2 {
  font-size: 24px;
  line-height: 34px;
  text-align: unset;
  margin-bottom: 40px;
}

.grid .grid-col-1 div div h2 {
  font-size: 24px;
  line-height: 34px;
  text-align: unset;
  margin-bottom: 8px;
}

/* .grid .grid-col-1 div div p {
  margin-bottom: 40px;
} */

.bank {
  position: relative;
  display: grid;
  column-gap: 24px;
  grid-template-columns: 1.6fr 3fr 1.2fr;
  padding: 32px;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.bank-top {
  border: 2px solid #0f4034;
}

.top-h::after {
  position: absolute;
  content: "";
  background-image: url(../images/loan_logos/trophy.svg);
  background-repeat: no-repeat;
  height: 24px;
  width: 24px;
  margin-left: 6px;
}

.bank .bank-tag {
  position: absolute;
  background-color: #0f4034;
  line-height: 22px;
  font-size: 14px;
  color: white;
  padding: 0 16px;
  border-radius: 24px;
  top: -12px;
  left: 32px;
}

.bank .logo-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bank .logo-box .logo {
  width: 90%;
  display: inherit;
  align-items: center;
  justify-content: start;
}

.bank .logo-box img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.bank .logo-box span {
  display: inline-block;
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin-left: 20px;
}

.bank .logo-box span::before {
  content: "";
  position: absolute;
  background-image: url(../images/loan_logos/fullstar.svg);
  left: -18px;
  top: 3px;
  height: 14px;
  width: 14px;
  background-repeat: no-repeat;
}

.bank .bank-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bank .bank-content .heading-first {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 0;
}

.bank .bank-content .atm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6e6e6;
}

.bank .bank-content .atm p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0;
}

.bank .bank-content ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 24px;
  margin-bottom: 0;
}

.bank .bank-content ul li {
  position: relative;
  font-size: 16px;
}

.bank .bank-content ul li::before {
  position: absolute;
  content: "";
  left: -24px;
  top: 3px;
  height: 16px;
  width: 16px;
  background-image: url(../images/loan_logos/checkcircle.svg);
}

.bank .bank-btn {
  display: flex;
  align-items: center;
}

.bank .bank-btn a {
  text-align: center;
  display: inline-block;
  border-radius: 8px;
  padding: 15px 40px;
  background-color: #000000;
  border: none;
  color: white;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  flex: 1;
}

/* MOBILE */

.bank .logo-box .rating-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.bank .logo-box .rating-box p {
  font-size: 14px;
  font-weight: 600;
  color: #707070;
  margin-bottom: 0;
}

.bank .logo-box .rating-box p span {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.bank .logo-box .rating-box .star-box {
  display: flex;
}

.bank .logo-box .rating-box .star-box span::before,
.bank .logo-box .rating-box p span::before {
  display: none;
}

.bank .logo-box .rating-box .star-box .fullstar {
  height: 12px;
  width: 12px;
  background-image: url(../images/loan_logos/fullstar.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 1px;
}

.bank .logo-box .rating-box .star-box .halfstar {
  height: 12px;
  width: 12px;
  background-image: url(../images/loan_logos/halfstar.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 1px;
}

.bank .logo-box .rating-box .star-box .emptystar {
  height: 12px;
  width: 12px;
  background-image: url(../images/loan_logos/emptystar.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 1px;
}


/* ----------------------- */
/* ------ SIDEBAR -------- */
/* ----------------------- */

.grid-col-2 {
  padding: 0 15px;
}

.grid-col-2 .sidebar {
  position: sticky;
  top: 5px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
}

.grid-col-2 .sidebar .sidebar-imgbox {
  position: relative;
  max-width: 100%;
  border-radius: 12px;
  background-color: #e6ffb7;
  padding: 0 10px 0 30px;
}

.grid-col-2 .sidebar .sidebar-imgbox .img-content {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(15%, -60%);
}

.grid-col-2 .sidebar .sidebar-imgbox .img-content h5 {
  font-weight: 700;
  font-size: 100%;
  line-height: 28px;
  margin-bottom: 0;
}

.grid-col-2 .sidebar .sidebar-imgbox .img-content p {
  font-size: 70%;
  line-height: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

.grid-col-2 .sidebar .sidebar-imgbox img {
  width: 100%;
}

.grid-col-2 .sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Accordion Container */

.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grid-col-2 .sidebar .accordion-container .top-heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  background-color: #f6f7f9;
  padding: 10px 16px;
  border-radius: 8px;
}

.accordion-container .content {
  padding: 0 16px;
}

.accordion-container .content p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 4px;
}

/* Accordion section */

.accordion-container .content .accordion .accordion-item {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 0;
}

.accordion-container .content .accordion .accordion-item:last-child {
  border-bottom: none;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.grid-col-2 .content .accordion .accordion-button {
  --bs-accordion-active-bg: white;
  --bs-accordion-active-color: black;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-active-icon: url(data:image/svg + xml,
 %3csvgxmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23212529" stroke-linecap="round" stroke-linejoin="round" %3e%3cpathd="m2 5 6 6 6-6" /%3e%3c/svg%3e);
}

.grid-col-2 .content .accordion .accordion-body {
  font-size: 16px;
  padding: 4px 8px 8px;
}

.grid-col-2 .content .accordion:active {
  background-color: white;
}

.grid-col-2 .content .accordion .accordion-button {
  align-items: flex-start;
  gap: 8px;
  padding: 16px 0;
  font-size: 16px;
  line-height: 24px;
  text-wrap: wrap;
}

.grid-col-2 .content .accordion .accordion-button b {
  font-weight: 600;
}

/* SideBar Icons */

.accordion .accordion-item .accordion-header button span {
  height: 24px;
  width: 24px;
  flex-shrink: 0;
}

.handshake {
  background-image: url(../images/loan_logos/sidebar/logos/handshake.svg);
}

.crown {
  background-image: url(../images/loan_logos/sidebar/logos/crown.svg);
}

.verified {
  background-image: url(../images/loan_logos/sidebar/logos/verified.svg);
}

/* Provider Box */

.grid-col-2 .provider-box {
  background-color: #f6f7f9;
  border-radius: 12px;
  padding: 12px 18px;
}

.grid-col-2 .provider-box .provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.grid-col-2 .provider-box .provider img {
  width: 40%;
}

.grid-col-2 .provider-box .provider p {
  color: #7f7f7f;
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 0;
}

/* Opinion Box */

.grid-col-2 .opinion-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grid-col-2 .opinion-box .opinion-heading {
  background-color: #f6f7f9;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
}

.grid-col-2 .opinion-box .opinion-rank-box {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grid-col-2 .opinion-box .opinion-rank {
  display: flex;
  gap: 16px;
}

.grid-col-2 .opinion-box .opinion-rank .img-box {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  border: 1px solid #eeeeee;
  overflow: hidden;
}

.grid-col-2 .opinion-box .opinion-rank .img-box img {
  width: 100%;
}

.grid-col-2 .opinion-box .opinion-rank .content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.grid-col-2 .opinion-box .opinion-rank .content p {
  font-size: 16px;
  margin-bottom: 0;
  padding: 0;
}

.grid-col-2 .opinion-box .opinion-rank .content .content-link {
  font-size: 16px;
  color: #000000;
  text-decoration: none;
  line-height: 24px;
  font-weight: 400;
}

.grid-col-2 .opinion-box .opinion-rank-box a {
  font-weight: 700;
  font-size: 16px;
  color: black;
  line-height: 24px;
}

/* .grid-col-2 .content .accordion .accordion-button::after{
  margin: 0;
} */

/* Articles Container */

.grid-col-2 .articles-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.articles-container .articles-heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  border-radius: 8px;
  background-color: #f6f7f9;
  padding: 10px 16px;
}

.articles-container .articles-box {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.articles-container .articles a {
  color: #000000;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.articles-container .articles {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.articles-container span {
  color: #707070;
  font-size: 13px;
  line-height: 24px;
  font-style: italic;
}

.articles-container .articles-box .all-articles {
  font-weight: 700;
  font-size: 16px;
  color: black;
  line-height: 24px;
}

/* End of Content Section */

/* ************************** */
/* ****** Text Content ****** */
/* ************************** */

.text-content {
  margin-bottom: 120px;
}

.text-content .container .para-content {
  display: flex;
  flex-direction: column;
}

.text-content .container .para-content h2 {
  position: relative;
  text-align: left;
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  background-color: #e6f6c6;
  padding: 8px 16px 8px 52px;
  border-radius: 8px;
  margin: 24px 0;
}

.text-content .container .para-content h2:first-child {
  margin-top: 0;
}

.text-content .container .para-content h2::before {
  position: absolute;
  content: "";
  background-image: url(../images/loan_logos/paperPlaneRight.svg);
  left: 16px;
  top: 13px;
  width: 24px;
  height: 24px;
}

.text-content .container .para-content ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 18px;
}

.text-content .container .para-content ul li {
  list-style: disc;
  font-size: 16px;
  line-height: 24px;
}

/* End of Text Content Section */

/* Media Queries */
@media (max-width: 1024px) {
    .feature-box ul li {
    font-size: 14px;
    line-height: 20px;
  }

  .feature-box ul li::before {
    top: 2px;
  }

  .advantages-box p {
    font-size: 11px;
    line-height: 16px;
  }

  /* Ranking Table */
  .top-sites-container .table-overflow {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .top-sites-container .grid-table {
    min-width: 800px;
  }

  
  /* Ranking Table */

  .top-sites-container .top-sites-table-top h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .top-sites-container .grid-table {
    min-width: auto;
  }

  .top-sites-container .top-sites-table .grid-table .disappear {
    display: none;
    padding: 0;
    border-radius: 0;
    border-bottom: none;
  }
  .top-sites-container .top-sites-table .grid-table .sub-head {
    display: block;
  }



  .top-sites-container .top-sites-table .grid-table .table-row {
    position: relative;
    grid-template-columns: 1fr 1fr;
    padding: 16px;
    row-gap: 12px;
    border-bottom: none;
  }

  /* Border Bottom Using After & Psuedo element */
  .top-sites-container .top-sites-table .grid-table .table-row::after {
    position: absolute;
    content: "";
    width: 90%;
    height: 1px;
    left: 5%;
    bottom: 0;
    background-color: #e6e6e6;
  }

  .top-sites-container .top-sites-table .grid-table .table-row:last-child::after,
  .top-sites-container .top-sites-table .grid-table .table-row:first-child::after {
    background-color: transparent;
  }

  .top-sites-container .top-sites-table .grid-table .table-row span::before {
    display: none;
  }

  .top-sites-container .top-sites-table .grid-table .table-row .table-heading {
    text-align: start;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    line-height: 22px;
  }

  /*  Table IMG */

  .top-sites-table .grid-table .table-row .table-img {
    padding: 8px 0 0 0;
  }

  .top-sites-table .grid-table .table-row .table-img img {
    width: 60%;
    max-height: 80px;
  }

  /*  Table Rating */
  .top-sites-table .grid-table .table-row .table-rating {
    flex-direction: column;
    align-items: unset;
    padding-left: 0;
    gap: 4px;
    font-size: 16px;
    color: #707070;
  }

  .top-sites-table .grid-table .table-row .table-rating span{
        color: #000000;
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
  }

  /*  Table Cell */
  .top-sites-table .grid-table .table-row .table-cell {
    flex-direction: column;
    align-items: unset;
    gap: 4px;
  }

  .top-sites-table .grid-table .table-row .table-cell br {
    display: none;
  }

  /*  Table BTN */

  .top-sites-table .grid-table .table-row .table-btn {
    justify-content: unset;
  }

  .top-sites-table .grid-table .table-row .table-btn a {
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    flex: 1;
    margin-right: 24px;
  }


  /* Bank Content */

  .bank-container .bank .bank-content {
    flex-direction: column;
    padding: 32px 32px 32px 32px;
    row-gap: 24px;
  }

  .bank .bank-content .bank-col-1 {
    flex-direction: column;
    flex: 0;
  }

  .bank .bank-content .bank-col-1 .img-container {
    flex-direction: row;
    justify-content: space-between;
  }

  .bank .bank-content .bank-col-2 {
    padding: 0;
  }

  .bank .bank-content .bank-col-2,
  .bank .bank-content .bank-col-2 .btn-box,
  .bank .bank-content .bank-col-2 .btn-box button {
    width: 100%;
  }

  /* Sidebar */

  .grid-col-2 {
    padding: 0 0 0 15px;
  }

  .grid-col-2 .provider-box .provider img {
    width: 50%;
  }

  .grid-col-2 .sidebar .sidebar-imgbox .img-content h5 {
    font-size: 68%;
    line-height: 14px;
  }

  .grid-col-2 .sidebar .sidebar-imgbox .img-content p {
    font-size: 48%;
    line-height: 20px;
  }

  .grid-col-2 .provider-box .provider{
    flex-direction: column;
  }

}

/* ****************** */
/* ****************** */
/* ****************** */
@media (max-width: 768px) {

  /* Hero */
  #hero-loan .hero-container {
    margin-bottom: 24px;
  }

  #hero-loan .hero-container h1 {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 16px;
  }

  #hero-loan .hero-container h2,
  .grid .grid-col-1 h2 {
    font-size: 20px;
    line-height: 28px;
  }

  
  .grid .grid-col-1 .bank-container-mobile p {
    margin-bottom: 32px;
  }



  /* Ranking Cards */

  /* MOBILE */

  .ranking-container .ranking-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.08);
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
  }

  .grid-col-1 .ranking-card .img-box {
    flex-direction: row;
    width: auto;
    justify-content: space-between;
  }

  .ranking-card .btn-box {
    padding: 0;
  }

  .ranking-card .img-box img {
    margin-top: 8px;
    width: 38%;
    object-fit: cover;
  }

  .ranking-card .img-box .rating-box {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  .ranking-card .img-box .rating-box .star-box .fullstar,
  .ranking-card .img-box .rating-box .star-box .halfstar {
    width: 10px;
    height: 10px;
  }

  .ranking-card .feature-box {
    padding: 0;
  }

  
  /* Ranking Table */

  .top-sites-container .top-sites-table-top h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .top-sites-container .grid-table {
    min-width: auto;
  }

  .top-sites-container .top-sites-table .grid-table .disappear {
    display: none;
    padding: 0;
    border-radius: 0;
    border-bottom: none;
  }

  .top-sites-container .top-sites-table .grid-table .table-row {
    position: relative;
    grid-template-columns: 1fr 1fr;
    padding: 16px;
    row-gap: 12px;
    border-bottom: none;
  }

  /* Border Bottom Using After & Psuedo element */
  .top-sites-container .top-sites-table .grid-table .table-row::after {
    position: absolute;
    content: "";
    width: 90%;
    height: 1px;
    left: 5%;
    bottom: 0;
    background-color: #e6e6e6;
  }

  .top-sites-container .top-sites-table .grid-table .table-row:last-child::after,
  .top-sites-container .top-sites-table .grid-table .table-row:first-child::after {
    background-color: transparent;
  }

  .top-sites-container .top-sites-table .grid-table .table-row span::before {
    display: none;
  }

  .top-sites-container .top-sites-table .grid-table .table-row .table-heading {
    text-align: start;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    line-height: 22px;
  }

  .top-sites-table .grid-table .table-row .table-tag {
    border-top-left-radius: 4px;
}

  /*  Table IMG */

  .top-sites-table .grid-table .table-row .table-img {
    padding: 8px 0 0 0;
  }

  .top-sites-table .grid-table .table-row .table-img img {
    width: 60%;
    max-height: 80px;
  }

  /*  Table Rating */
  .top-sites-table .grid-table .table-row .table-rating {
    flex-direction: column;
    align-items: unset;
    padding-left: 0;
    gap: 4px;
    font-size: 16px;
    color: #707070;
  }

  .top-sites-table .grid-table .table-row .table-rating span{
        color: #000000;
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
  }

  /*  Table Cell */
  .top-sites-table .grid-table .table-row .table-cell {
    flex-direction: column;
    align-items: unset;
    gap: 4px;
  }

  .top-sites-table .grid-table .table-row .table-cell br {
    display: none;
  }

  /*  Table BTN */

  .top-sites-table .grid-table .table-row .table-btn {
    justify-content: unset;
  }

  .top-sites-table .grid-table .table-row .table-btn a {
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    flex: 1;
    margin-right: 24px;
  }

  

  /* Bank */

  .grid .grid-col-1 div h2 {
    font-size: 20px;
    line-height: 28px;
    text-align: unset;
    margin-bottom: 40px;
  }

  .grid .grid-col-1 div div h2 {
    font-size: 20px;
    line-height: 28px;
    text-align: unset;
    margin-bottom: 8px;
    margin-top: 24px;
  }

  /* .grid .grid-col-1 div div p {
    margin-bottom: 32px;
  } */

  .bank .bank-content .atm p {
    font-size: 14px;
    line-height: 22px;
  }

  .bank .bank-content ul li {
    position: relative;
    font-size: 14px;
    line-height: 22px;
  }

  .bank .logo-box span {
    margin: 0;
  }

  .bank {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 16px;
  }

  .bank .bank-tag {
    left: 16px;
  }

  .bank .logo-box {
    flex-direction: row;
    justify-content: space-between;
  }

  .bank .logo-box .logo {
    width: 60%;
  }

  /* Sidebar */

  .grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .grid-col-2 {
    padding: 0px;
  }

  .grid-col-2 .sidebar .sidebar-imgbox .img-content h5 {
    font-size: 100%;
    line-height: 32px;
  }

  .grid-col-2 .sidebar .sidebar-imgbox .img-content p {
    font-size: 90%;
    line-height: 24px;
  }

  .grid-col-2 .content .accordion .accordion-button {
    align-items: center;
  }

  /* text-content */

  .text-content {
    margin-bottom: 72px;
  }

  .text-content .container .para-content h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .text-content .container .para-content h2::before {
    left: 18px;
    top: 8px;
  }

    .grid-col-2 .provider-box .provider{
    flex-direction: row;
  }
}



/* skeleton */

.skeleton {
    opacity: .6
}

.img-skeleton {
    width: 95%;
    height: 100px;
    background: #ecebeb;
    position: relative;
    display: inline-block
}

.blanktext {
    background: #ecebeb;
    margin-bottom: 5px;
    width: 90%;
    position: relative;
    display: inline-block
}

.btn-skeleton {
    background-color: #ecebeb;
    color: #fff;
    width: 90%;
    margin: auto;
    transition: .5s;
    padding: 10px;
    display: block
}

.loading {
    position: relative;
    background-color: #b1b0b0
}

.loading::after {
    display: block;
    content: "";
    position: absolute;
    width: 60%;
    height: 100%;
    transform: translateX(-100%);
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, .2)), to(transparent));
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    animation: loading .8s infinite;
    top: 0
}

@keyframes loading {
    100% {
        transform: translateX(100%)
    }
}

/* skeleton */