main{padding-top: 100px;}
@media(max-width:768px){
	main{padding-top: 80px;}
	
}
.container7 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
	    color: black;
}
.ranking-section {
  background-color: #f0f8ff;
  padding: 20px 0;
  border-radius: 40px;
}
.container7 .dl {
  margin: 33px 0;
}
.ranking-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 15px;
}
.button7 {
  display: inline-block;
  padding: 15px 0px;
  background-color: #fff;
  color: black;
  font-size: 1.85rem !important;
  text-decoration: none;
  transition: background-color 0.3s;
  width: 100%;
  max-width: 350px;
  text-align: center;
  position: relative;
  border-radius: 9px;
	border: 1px solid transparent;
	

}
.button-image7 {
  width: 40px;
  height: 40px;
  object-fit: contain;
	margin-right: 5px;
}
.button7:hover {
    border: 1px solid #c3e7f5;
	transition: border-color 0.2s;
}


@media (max-width: 1024px) {
  .ranking-buttons{
justify-content: center;
  }
}

@media (max-width: 768px) {
  .ranking-buttons {
    flex-direction: column;
    align-items: center;
  }
  .button7 {
    width: 90%;
    margin-bottom: 10px;
	text-align: justify;
  }
}
.broker-container {
  width: 100%;
  text-align: center;
  padding: 20px;
}
.title {
  font-size: 3.25rem !important;
  margin-bottom: 30px;

  font-weight: 600;
  color: #000;
}
.broker-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.broker-item {
  background-color: #fff;
  width: 45%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  text-align: center;
  margin-bottom: 20px;
}
.broker-item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.broker-item a {
  text-decoration: none;
  text-align: -webkit-center;
}
.broker-img-wrapper {
  width: 100%;
  overflow: hidden;
  padding-top: 18px;
}
.broker-img {
  object-fit: contain;
  transition: filter 0.3s ease;
  height: 80px;
  max-width: 86px;
}
.broker-img:hover {
  opacity: .8 !important;
}
.broker-info {

  text-align: center;
}

.broker-container {
  margin: 0 auto
}
.bba {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  line-height: 3.1;
}
.zj {
  font-size: 1.825rem !important;
  margin-bottom: 25px;
}
.broker-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
.register-btn {
  background-color: #008fc7;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
  width: 29%;
  border-radius: 9px;
}
.register-btn:hover {
  background-color: #10b981;
}
.risk-warning {
  font-size: 12px;

  margin-bottom: 10px;
}
.about-link {
  font-size: 14px;
  color: #007BFF;
  text-decoration: none;
}
.about-link:hover {
  text-decoration: underline;
}
@media (min-width:1536px) {
  .broker-container {
    max-width: 1536px;
  }
}
@media (min-width:1280px) {
  .broker-container {
    max-width: 1280px;
  }
  .broker-item {
    width: 24.33%;
  }
}
@media (min-width:1024px) {
  .broker-item {
    width: 31.33%;
  }
}


@media (max-width: 768px) {
  .broker-list {
    flex-direction: row;
    align-items: center;
  }
  .broker-item {
    width: 45%;
    margin-bottom: 20px;
  }
}

@media (max-width: 678px) {
  .broker-item {
    width: 78%;
  }
}


@media (max-width: 480px) {
  .title {
    font-size: 20px;
  }
  .broker-item {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  .soy {
   display: none;
  }
}

.soy a {
  background-color: #008fc7;
  color: white;
  padding: 12px 9px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  margin-bottom: 10px;
  display: block;
  width: 22rem;
  border-radius: 9px;
}
.soy svg {
  width: 2.875rem !important;
  height: 1.075rem !important;
}
.soy a:hover {
  background-color: #10b981;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem !important;
  width: 100%;
  padding: 0px 2%;
	justify-content: space-around;
}
@media (max-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    padding: 0px 4%;
  }
}

@media (max-width: 678px) {
  .grid-container {
    flex-direction: column;
    align-items: center;
	display: flex;
	gap: 0rem !important;
  }
  .broker-card{
    width: 78%;
    margin-bottom: 20px;
  }
}


.broker-card {
  background-color: #6599ad;
  border: 1px solid #ffffff;
  border-radius: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  padding-bottom: 11px;
}
.broker-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  padding: 20px 20px 8px 20px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  transition: all 0.3s ease;
}
.broker-card:hover {
  border: 1px solid #c3e7f5;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.vs-block {
  display: flex;
  flex-direction: column;
  /*  align-items: center;	*/
  gap: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.soy1{display: flex;
    justify-content: space-around;
    padding-top: 30px;}
.broker-item2 {
  display: flex;
  gap: 10px;
  padding: 11px 95px 11px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  align-items: center;
  flex-direction: row;
  width: -webkit-fill-available;
}
.broker-card:hover .broker-item2 {
  border: 0.5px solid #c3e7f5;
/*  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);*/
}
.broker-item2 img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border: 1px solid #e2e5e7;
  border-radius: 12px;
  background-color: #f9f9f9;
  padding: 10px;
  margin-left: 9px;
}
.vs-circle {
  height: 2rem !important;
  color: #008fc7;
  font-weight: bold;
  padding: 2px 6px;
  letter-spacing: 0.136em !important;
}
.arrow {
  font-size: 22px;
  color: #ccc;
  transition: color 0.3s ease;
  margin-top: 10px;
  height: 31px;
}
.broker-card:hover .arrow {
  color: #3399ff;
  font-size: 23px;
}
.broker-name {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.divider {
  display: flex;
  align-items: center;
  text-align: center;
}
.divider span {
  padding: 5px 12px;
  border: 1px solid #6599ad;
  border-radius: 50px;
  background: #fff;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
}
.divider::before {
  margin-right: 10px;
}
.divider::after {
  margin-left: 10px;
}
.h-3s{
	text-align: center;
	font-size: 24px;
    line-height: 150%;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 30px;
}
	

.pagination-container {
    margin: 40px 0;
    text-align: center; 
    font-family: Arial, sans-serif;
}
.pagelist {
    list-style: none;
    padding: 0;
    display: inline-flex; 
    gap: 8px; 
}
.pagelist li {
    display: inline-block;
}
.pagelist a, .pagelist strong, .pagelist span {
    display: inline-block;
    padding: 10px 16px;

    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 14px;
    min-width: 40px;
    text-align: center;
}	
.pagelist .active span{color:#fff;}
.pagelist .active {
    background-color: #0099cc !important; 
    border-color: #0099cc !important; 
    color: #fff !important;
	border-radius: 6px;
}

.pagelist a:hover {
    background-color: #0099cc;
    color: #fff;
    border-color: #0099cc;
}
.pagelist strong {
    background-color: #0099cc;
    color: #fff;
    border-color: #0099cc;
    font-weight: bold;
    cursor: default;
}
.pagelist span.disabled {
    color: #ccc;
    background-color: #f9f9f9;
    cursor: not-allowed;
}  

.gradient-box1{padding: 40px;}
 .gradient-box {
            position: relative;

            border-radius: 20px; 
            background-color: #ffffff; 
            box-shadow: 0 8px 16px rgba(0,0,0,0.08); 
            overflow: hidden; 
            z-index: 1;
            margin-bottom: 18px;
        }
        .gradient-box::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: -1; 
            border-radius: 20px; 
            background-image:
                radial-gradient(circle at 0% 0%, rgba(173, 216, 230, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(173, 216, 230, 0.4) 0%, transparent 50%);
        }
*, *::before, *::after { 
	box-sizing: border-box; margin: 0; padding: 0; 
}
:root {
	--primary: #117da8;
    --primary-dark: #0d6289;
    --primary-light: #e8f4f9;
    --text: #1a1a2e;
    --text-muted: #666;
    --text-light: #999;
    --border: #e2e8f0;
    --bg: #f7f9fc;
    --white: #fff;
    --gold: #f5a623;
    --green: #27ae60;
    --radius: 10px;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-hover: 0 6px 24px rgba(17,125,168,0.15);
  }
	
.allforex{padding: 18px;line-height: 40px;    margin: 0 auto;max-width: 1680px;}
  .breadcrumbo {
    max-width: 1200px;
    margin: 16px auto 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
  }
	
  .breadcrumbo a { color: #525252; }
  .breadcrumbo a:hover { text-decoration: underline; }
  .breadcrumbo .sep { opacity: .5; }
  
  
.breadcrumbo1 a { color: #525252; }
  .breadcrumbo1 a:hover { text-decoration: underline; }
  .breadcrumbo1 .sep { opacity: .5; }
  /* ── PAGE TITLE ── */
  .page-hero {
    max-width: 1200px;
    margin: 12px auto 0;
    padding: 0 20px;
  }
  .page-hero h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    margin: 18px 0 4px 0;
  }
  .page-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
    margin-top: 15px;
  }
  .author-img{width: 60px;}
  .author-img img{height: auto;max-width: 100%; border-radius: 50%;}
  .author-avatar {
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; color: var(--primary);
    flex-direction: column;
    line-height: 28px;padding-left: 15px;
  }
  .author-avatar span{color:#666;font-weight: 500;}
  .avataro{padding-left: 44px;;}
@media (max-width:680px){
  .author-avatar{width: 111px;padding: 0;letter-spacing: 1px;}
  .avataro{padding-left: 8px;width: 150px;letter-spacing: 1px;}
}

 
  .page-desc {
    font-size: 14px;
    color: #000;
    margin-bottom: 16px;
    line-height: 25px;
  }
  .main-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 60px;
  }

  /* ── BROKER CARD (Desktop) ── */
  .broker-cardto {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 56px 200px 1fr auto auto 160px;
    align-items: center;
    gap: 0;
    transition: box-shadow .2s, border-color .2s;
    overflow: hidden;
}
  .broker-cardto:hover {
    box-shadow: var(--shadow-hover);
    border-color: #b8ddf0;
  }

  .broker-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
    border-right: 1px solid var(--border);
    background: var(--bg);
  }
  .broker-rank.top3 { color: var(--primary); list-style-type: none;}

.broker-cardto .num {
    background-color: #008fc7; 
    color: #fff;
    font-style: normal; 
	width: 46px;
    height: 46px;
    border-radius: 23px;
    text-align: center;
    padding-top: 12px;
    display: block;
	
}


.broker-cardto:nth-child(1) .num {
    background-color: #FFD700; 
    color: #000; 
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);    width: 46px;
    height: 46px;
    border-radius: 23px;
    text-align: center;
    padding-top: 12px;
    display: block;
}

.broker-cardto:nth-child(2) .num {
    background-color: #C0C0C0; 
    color: #000; 
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.6);    width: 46px;
    height: 46px;
    border-radius: 23px;
    text-align: center;
    padding-top: 12px;
    display: block;
}

.broker-cardto:nth-child(3) .num {
    background-color: #CD7F32; 
    color: #fff;
    box-shadow: 0 0 8px rgba(205, 127, 50, 0.6);    width: 46px;
    height: 46px;
    border-radius: 23px;
    text-align: center;
    padding-top: 12px;
    display: block;
}

.broker-rank .top99{
	width: 46px;
    height: 47px;
    border-radius: 23px;
    text-align: center;
    padding-top: 11px;
	background-color: #000;
    color: #fff;
}
  .broker-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-right: 1px solid var(--border);
  }
  .broker-logo-cell img {
    max-height: 50px;
    max-width: 120px;
    object-fit: contain;
  }
.broker-logo-cell img:hover{ opacity: .8 !important;}
.broker-logo-aoo{padding: 0 12px;}
  .broker-logo-placeholder {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: var(--primary);
    border-radius: 6px;
    padding: 0 12px;
    min-width: 80px;
  }

  .broker-info {
    padding: 0 16px 20px;
  }
  .broker-info .meta-row {
    display: flex;
    gap: 20px;
    margin-bottom: 4px;
  }
  .meta-item {
    display: flex;
    flex-direction: column; line-height: 28px;
  }
  .meta-label {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
  }
  .meta-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
  }
  .broker-disclaimer {
    font-size: 11px;
	
    color: var(--text-light);
    margin-top: 4px;
/*    max-width: 320px;*/
    line-height: 1.4;text-align: initial;
  }
@media(max-width:914px){
	.broker-disclaimer{   display: none; 
	}
}
@media(max-width:769px){
	.broker-disclaimer{display: block;
	}
}
  .broker-rating-cell {
    padding: 16px 20px;
    text-align: center;
  }
	
.stars {
  position: relative;
  display: inline-block;
  font-size: 18px;
  color: #ddd; 
}

.stars::before {
  content: '★★★★★';
  color: #ddd;
}


.stars::after {
  content: '★★★★★';
  color: #f5a623;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: calc(var(--rating) / 5 * 100%); 
  white-space: nowrap;
}

	
  .rating-num {
    font-size: 18px;
    font-weight: 700;
    color: #10b981;
  }
  .rating-sub { font-size: 11px; color: var(--text-light); }

  .broker-actions {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
  }
  .btn-review {
    display: block;
    text-align: center;
    padding: 8px 16px;
    border: 1.5px solid var(--primary);
    border-radius: 6px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s;
  }
  .btn-review:hover { background: var(--primary); color: var(--white); }
  .btn-register {
    display: block;
    text-align: center;
    padding: 9px 16px;
    background: var(--primary);
    border-radius: 6px;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    transition: background .15s;
  }
  .btn-register:hover { background: var(--primary-dark); }

  /* ── Section heading ── */
  .section-note {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff8e7;
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
  }
  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .broker-cardto {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
	  }
    .broker-rank {
      display: none;
    }
    .broker-logo-cell {
      border-right: none;
      border-bottom: 1px solid var(--border);
      justify-content: flex-start;
      padding: 14px 16px;
    }
    .broker-info { padding: 12px 16px; border-right: none; }
    .broker-rating-cell { padding: 0 16px 8px; text-align: left; }
    .broker-actions {
      flex-direction: row;
      padding: 12px 16px 16px;
      border-top: 1px solid var(--border);
    }
    .btn-review, .btn-register { flex: 1; }}