.tab-wrapper-kingdom {
    margin: auto;
    width: 80%;
  }

  .tab-header-kingdom {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
	gap:20px;
  }

  .tab-btn-kingdom {
    width: 32%;
    padding: 15px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
    font-size: 14px;
    color: #777;
  }
.border-content ul li span{
	font-weight:700;
	
}
.flexcardWrapper .text-red{
	color:red;
		font-weight:700;
}
  .tab-btn-kingdom.active {
    background: #44bff8;
    color: white;
  }

  .tab-progress {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 20px;
    padding: 0 100px;
  }

  .tab-step {
    width: 80%;
    display: flex;
    align-items: center;
  }

  .tab-step .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ccc;
    z-index: 1;
    transition: background 0.3s;
  }

  .tab-step .dot.active {
    background: #44bff8;
  }

  .tab-step .line {
    height: 4px;
    width: 100%;
    background: #ccc;
    margin: 0 5px;
    transition: background 0.3s;
  }

  .tab-step.propress-cus {
    width: fit-content;
  }

  .tab-contents-kingdom {
    width: 100%;
  }

  .tab-content-kingdom {
    display: none;
    border-radius: 10px;
    background: #f9fdff;
  }

  .tab-content-kingdom.active {
    display: block;
  }

  .tab-flex {
    display: flex;
    justify-content: space-between;
    gap: 50px;
  }

  .border-content {
    border: 1px solid #44bff888;
    width: 50%;
    padding: 10px;
    border-radius: 10px;
  }

  .border-content ul {
    margin-bottom: 16px;
  }

  .border-content ul li {
    font-size: 14px;
  }

  .cta-btn {
    padding: 4px 20px;
    background: #2daafc;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    text-transform: none;
  }

  .text-learn h2 {
    color: #45c0f8;
    margin-bottom: 4px;
  }

  .text-learn h4 {
    margin-top: 10px;
  }

  .row-bg {
    background: #fff;
    border-radius: 30px;
    padding: 40px 30px;
  }
  .tab-btn-kingdom.hovered {
    background: #44bff8;
    color: white;
  }
  .tab-content-kingdom .cta-btn {
    background: #44bff8;
	  padding: 10px 20px;
  }

  .tab-progress .dot.hovered {
    background: #44bff8;
  }

  .tab-progress {
    position: relative;
    height: 40px;
    margin-bottom: 40px;
  }

  .tab-step {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding: 0 50px;
  }

  .tab-step .dot {
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
    z-index: 2;
    position: relative;
  }

  .tab-progress .line {
    position: absolute;
    top: 50%;
    left: 50px;
    right: 50px;
    height: 4px;
    background: #d3d3d3;
    z-index: 1;
    width: 90%;
  }
/* YLE Cambridge*/

 .cambridge-wrapper {
    margin: auto;
    width: 80%;
  }

  .cambridge-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .cambridge-btn {
    width: 32%;
    padding: 15px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
    font-size: 14px;
  }

  .cambridge-btn.active {
    background: #a5b0e1;
    color: white;
  }

  .cambridge-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 100px;
  }

  .cambridge-step {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .cambridge-step .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ccc;
    z-index: 1;
    transition: background 0.3s;
  }

  .cambridge-step .dot.active {
    background: #a5b0e1;
  }

  .cambridge-step .line {
    height: 4px;
    width: 100%;
    background: #ccc;
    margin: 0 5px;
    transition: background 0.3s;
  }

  .cambridge-step.propress-cus {
    width: fit-content;
  }

  .cambridge-contents {
    width: 100%;
  }

  .cambridge-content {
    display: none;
    border-radius: 10px;
    background: #f9fdff;
  }

  .cambridge-content.active {
    display: block;
  }

  .tab-flex {
    display: flex;
    justify-content: space-between;
    gap: 50px;
  }

  .border-content {
    border: 1px solid #44bff888;
    width: 50%;
    padding: 10px;
    border-radius: 10px;
  }

  .border-content ul {
    margin-bottom: 16px;
  }

  .border-content ul li {
    font-size: 14px;
  }

  .cta-btn {
    padding: 4px 20px;
    background: #2daafc;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    text-transform: none;
  }

  .text-learn h2 {
    color: #45c0f8;
    margin-bottom: 4px;
  }

  .text-learn h4 {
    margin-top: 10px;
  }

  .row-bg {
    background: #fff;
    border-radius: 30px;
    padding: 40px 30px;
  }
  .cambridge-btn.hovered {
    background: #a5b0e1;
    color: white;
  }
  .cambridge-content .cta-btn {
    background: #a5b0e1;
	  padding:10px 20px;
  }

  .cambridge-progress .dot.hovered {
    background: #a5b0e1;
  }
  .cambridge-progress {
    position: relative;
    height: 40px;
    margin-bottom: 40px;
  }

  .cambridge-step {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding: 0 50px;
  }

  .cambridge-step .dot {
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
    z-index: 2;
    position: relative;
  }

  .cambridge-step .dot.active {
    background: #a5b0e1;
  }

  .cambridge-progress .line {
    position: absolute;
    top: 50%;
    left: 50px;
    right: 50px;
    height: 4px;
    background: #d3d3d3;
    z-index: 1;
    width: 90%;
  }
/*ESOL Cambridge */

 .esol-wrapper {
    margin: auto;
    width: 80%;
  }

  .esol-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .esol-btn {
    width: 32%;
    padding: 15px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
    font-size: 14px;
  }

  .esol-btn.active {
    background: #FDBE8B;
    color: white;
  }

  .esol-progress {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 20px;
    padding: 0 100px;
  }

  .esol-step {
    width: 80%;
    display: flex;
    align-items: center;
  }

  .esol-step .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ccc;
    z-index: 1;
    transition: background 0.3s;
  }

  .esol-step .dot.active {
    background: #FDBE8B;
  }

  .esol-step .line {
    height: 4px;
    width: 100%;
    background: #ccc;
    margin: 0 5px;
    transition: background 0.3s;
  }

  .esol-step.propress-cus {
    width: fit-content;
  }

  .esol-contents {
    width: 100%;
  }

  .esol-content {
    display: none;
    border-radius: 10px;
    background: #f9fdff;
  }

  .esol-content.active {
    display: block;
  }

  .tab-flex {
    display: flex;
    justify-content: space-between;
    gap: 50px;
  }

  .border-content {
    border: 1px solid #44bff888;
    width: 50%;
    padding: 10px;
    border-radius: 10px;
  }

  .border-content ul {
    margin-bottom: 16px;
  }

  .border-content ul li {
    font-size: 14px;
  }

  .cta-btn {
    padding: 4px 20px;
    background: #2daafc;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    text-transform: none;
  }

  .text-learn h2 {
    color: #45c0f8;
    margin-bottom: 4px;
  }

  .text-learn h4 {
    margin-top: 10px;
  }

  .row-bg {
    background: #fff;
    border-radius: 30px;
    padding: 40px 30px;
  }
  .esol-btn.hovered {
    background: #FDBE8B;
    color: white;
  }
  .esol-content .cta-btn {
    background: #FDBE8B;
	  padding:10px 20px;
  }

  .esol-progress .dot.hovered {
    background: #FDBE8B;
  }
  .esol-progress {
    position: relative;
    height: 40px;
    margin-bottom: 40px;
  }

  .esol-step {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding: 0 50px;
  }

  .esol-step .dot {
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
    z-index: 2;
    position: relative;
  }

  .esol-progress .line {
    position: absolute;
    top: 50%;
    left: 50px;
    right: 50px;
    height: 4px;
    background: #d3d3d3;
    z-index: 1;

    width: 90%;
  }
/* ielst*/

.ielst-wrapper {
    margin: auto;
    width: 80%;
  }

  .ielst-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap:20px;
  }

  .ielst-btn {
    width: 32%;
    padding: 15px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
    font-size: 14px;
  }

  .ielst-btn.active {
    background: #b6e2a1;
    color: white;
  }

  .ielst-progress {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 20px;
    padding: 0 100px;
  }

  .ielst-step {
    width: 100%;
    display: flex;
    align-items: center;
    transform: translateY(5%);
  }

  .ielst-step .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ccc;
    z-index: 1;
    transition: background 0.3s;
  }

  .ielst-step .dot.active {
    background: #b6e2a1;
  }

  .ielst-step .line {
    height: 4px;
    width: 100%;
    background: #ccc;
    margin: 0 5px;
    transition: background 0.3s;
  }

  .ielst-step.propress-cus {
    width: fit-content;
  }

  .ielst-contents {
    width: 100%;
  }

  .ielst-content {
    display: none;
    border-radius: 10px;
    background: #f9fdff;
  }

  .ielst-content.active {
    display: block;
  }

  .tab-flex {
    display: flex;
    justify-content: space-between;
    gap: 50px;
  }

  .border-content {
    border: 1px solid #44bff888;
    width: 50%;
    padding: 10px;
    border-radius: 10px;
  }

  .border-content ul {
    margin-bottom: 16px;
  }

  .border-content ul li {
    font-size: 14px;
  }

  .cta-btn {
    padding: 4px 20px;
    background: #2daafc;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    text-transform: none;
  }

  .text-learn h2 {
    color: #45c0f8;
    margin-bottom: 4px;
  }

  .text-learn h4 {
    margin-top: 10px;
  }

  .row-bg {
    background: #fff;
    border-radius: 30px;
    padding: 40px 30px;
  }
  .ielst-btn.hovered {
    background: #b6e2a1;
    color: white;
  }
  .ielst-content .cta-btn {
    background: #b6e2a1;
	  padding:10px 20px;
  }

  .ielst-progress .dot.hovered {
    background: #b6e2a1;
  }

  .ielst-progress {
    position: relative;
    height: 40px;
    margin-bottom: 40px;
  }

  .ielst-step {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding: 0 50px;
  }

  .ielst-step .dot {
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
    z-index: 2;
    position: relative;
  }

  .ielst-step .dot.active {
    background: #b6e2a1;
  }

  .ielst-progress .line {
    position: absolute;
    top: 50%;
    left: 50px;
    right: 50px;
    height: 4px;
    background: #d3d3d3;
    z-index: 1;
    width: 90%;
	
  }

@media(max-width:768px){
	.tab-wrapper, .cambridge-wrapper, .esol-wrapper, .ielst-wrapper {

    width: 100%;
  }
  .tab-progress, .cambridge-progress, .esol-progress, .ielst-progress {
  display:none;
  }
  .row-bg{
  	padding:40px 0px;
    padding-bottom:0px;
  }
  .tab-flex{
      display: flex;
    gap: 10px;
    flex-direction: column;
  }
  .border-content{
  width:100%;
  }
  .esol-header{
  justify-content: space-around;
  }
  .ielst-header {
  overflow-x: auto;
  }
  .ielst-btn{
      display: flex;
    justify-content: center;
    align-items: center;
        flex: 0 0 50%;
  }
  .text-banner h1 {
  	font-size:20px !important;
  }
  .section-banner{
  	height:250px !important;
  }
  .text-banner {
    margin-top: 170px !important;
	}

  .tab-header, .cambridge-header {
  	overflow-x: auto;
    gap: 20px;
  }
  .tab-btn, .cambridge-btn{
  flex:0 0 50%;
  }
}