@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color:#7E393A;
    --primary-color-rgb:126, 57, 58;
    --bg-primary-light:#F7EDEE;
    --bg-gray-light:#F6F6F6;
}

body {
  font-family:'Montserrat', sans-serif;font-size:16px;font-weight:500;color:#111111;
  &.body-home { padding-top:82px;}
  &.has-fixed-header { padding-top:80px;}
}

h1, h2, h3, h4, h5, h6 { margin-bottom:0;font-weight:600;}

p { font-size:1rem;color:#111111;margin-bottom:0;}
a {
  font-size:1rem;font-weight:600;color:var(--primary-color);text-decoration:none;
  &:hover { color:var(--primary-color);}
}
ul { padding-left:0;}

.max-w-auto { max-width:none !important;}
.min-w-auto { min-width:auto !important;}

/* Backgrounds */
.bg-primary { background-color:var(--primary-color) !important;}
.bg-primary-light { background-color:var(--bg-primary-light);}
.bg-gray-light { background-color:var(--bg-gray-light);}
.bg-success { background-color:#D1E7DD !important;}
.bg-success-dark { background-color:#4E7865 !important;}

/* Text Colors */
.text-success { color:#4E7865 !important;}

/* Font Sizes */
.fs-75 { font-size:0.75rem !important;}

/* Buttons */
.btn {
    border:none;height:50px;display:flex;align-items:center;width:fit-content;padding:0 20px;min-width:150px;transition:all 0.3s;font-weight:500;
    &.btn-primary { background-color:var(--primary-color);}
    &.btn-primary-light {
      background-color:var(--bg-primary-light);font-weight:600;color:var(--primary-color);
      svg {
        path { fill:var(--primary-color);}
      }
      &:hover {
        background-color:var(--primary-color);color:#FFFFFF;
        svg {
          path { fill:#FFFFFF;}
        }
      }
    }
    &.btn-white {
      background-color:#FFFFFF;
      svg {
        path { fill:#000000;}
      }
      &:hover {
        background-color:var(--primary-color);
        svg {
          path { fill:#FFFFFF;}
        }
      }
    }
    &.btn-sm { height:30px;font-size:0.75rem;padding:0 12px;}
}

/* Header */
.header-main {
  background-color:var(--bg-primary-light);transition: all .25s ease;z-index:1050;
  &.is-fixed { box-shadow:0 6px 20px rgba(0,0,0,.08);background-color:#ffffff;}
  .navbar {
    .nav-link {
      color:#111;font-weight:500;
      &:hover,
      &.active { color:var(--primary-color);}
    }
    .lang-link {
      color:#353535;text-decoration:none;font-weight:500;
      &:hover,
      &.active { color:var(--primary-color);}
    }
    .separator { color:#D4AFB2;}
  }
}

/* Banner */
.hero-banner{
  padding:0 0 125px;
  h1 {
    font-size:2.25rem;line-height:3rem;font-weight:500;
    strong { font-weight:600;}
  }
}

/* Section */
.section {
    padding:100px 0;
    .section-tag { color:var(--primary-color);font-weight:600;letter-spacing:.5px;font-size:0.875rem;}
    .section-title {
      font-size:1.75rem;font-weight:500;max-width:550px;
      span { color:var(--primary-color);}
    }
    .section-para { max-width:390px;}
    .feature-card {
        border-radius:24px;padding:45px;transition:all 0.3s;
        .feature-icon {
          svg {
            path { fill:var(--primary-color);}
          }
        }
        .feature-title { font-weight:600;margin-bottom:8px;}
        .feature-text { font-size:0.875rem;color:#666;}
        &:hover { box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.06);}
    }
}

/* Enrollment Extension */
.enrollment-extension {
  margin-top:-100px;
  .section {
    border-radius:30px;box-shadow:0 10px 50px 0 rgba(0, 0, 0, 0.05);padding:100px;
    .bv-sub-card {
      background:#F6F6F6;border-radius:30px;padding:30px;overflow:hidden;flex-direction:column;min-height:300px;
      &:hover {
        background-color:var(--bg-primary-light);
        .btn-white {
          background-color:var(--primary-color);
          svg {
            path { fill:#FFFFFF;}
          }
        }
      }
      .btn-sm { width:40px;height:40px;justify-content:center;}
      .bv-sub-card-title { font-size:1.75rem;font-weight:700;line-height:30px;color:#000;}
      .bv-sub-card-desc { font-size:0.875rem;font-weight:500;line-height:25px;color:#000;margin-bottom:4px;}
      .bv-sub-card-feature { font-size:1.25rem;font-weight:700;color:#000;line-height:30px;}
      .bv-sub-card-feature-sub { font-size:0.875rem;font-weight:500;color:#000;}
      .bv-promo-bar {
        background:#D1E7DD;padding:8px 20px;gap:8px;margin:auto -30px -30px -30px;border-radius:0 0 30px 30px;
        .bv-promo-text { font-size:0.75rem;font-weight:600;color:#4E7865;}
      }
    }
  }
}

/* What is 2be */
.what-is-2be {
  .feature-card { padding:50px;}
}

/* Road Map */
.roadmap {
  .roadmap-timeline {
    padding:0;margin:0 auto;max-width:1300px;
    &::before { content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background-image:repeating-linear-gradient(to bottom, #939393 0, #939393 6px, transparent 6px, transparent 14px);}
    .roadmap-item {
      position:relative;margin-bottom:72px;
      &:last-child { margin-bottom:0;}
      .roadmap-dot {
        position:absolute;top:50px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 12px rgba(0, 0, 0, 0.15);z-index:5;display:flex;align-items:center;justify-content:center;
        &::after { content: '';width: 12px;height: 12px;border-radius: 50%;background:#000000;}
      }
      .roadmap-circle {
        width:120px;height:120px;border-radius:50%;border:3px solid transparent;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:2.25rem;flex-shrink:0;background-color:#F6F6F6;margin-right:190px;
        &::before { content:'';width:115px;height:2px;background:#E1E1E1;border-radius:1px;position:absolute;top:50%;transform:translateY(-50%);left:calc(100% + 3px);}
      }
      .roadmap-content-wrap {
        padding-left:40px;margin-top:40px;
        .roadmap-content__title {
          font-weight:600;font-size:1.25rem;line-height:30px;margin:0 0 8px 0;
          svg { position:absolute;left:-50px;top:5px;}
        }
        .roadmap-content-desc { font-weight:500;font-size:0.875rem;line-height:24px;max-width:400px;margin:0 0 16px 0;}
      }

      &.reverse {
        .roadmap-circle {
          margin-left:190px;margin-right:0;
          &::before { right:calc(100% + 3px);left:auto;}
        }
        .roadmap-content-wrap {
          padding-right:40px;padding-left:0;text-align:right;
          .roadmap-content__title {
            svg { right:-50px;left:auto;}
          }
        }
      }

      &:hover {
        .roadmap-circle { border-color:var(--primary-color);background-color:#FFFFFF;color:var(--primary-color);}
        .btn-primary-light {
          background-color:var(--primary-color);color:#FFFFFF;
          svg {
            path { fill:#FFFFFF;}
          }
        }
      }
    }
  }
}

/* System */
.section-system {
  .feature-card {
    .feature-icon {
      width:70px;height:70px;border-radius:50%;background-color:var(--bg-primary-light);display:flex;align-items:center;justify-content:center;margin-bottom:20px;margin:0 auto;
    }
    &:hover {
      background-color:var(--bg-primary-light);box-shadow:none;
      .feature-icon { background-color:#FFFFFF;}
    }
  }
}

/* Leaders */
.leader-card {
  border-radius:20px;border:2px solid #E2E2E2;background:#FFFFFF;overflow:hidden;height:100%;
  .leader-card-img {
    padding:30px 30px 0;
    img { width:100%;height:295px;object-fit:cover;border-radius:20px;}
  }

  .leader-card-body {
    padding:16px 30px 30px;
    .leader-card-name { font-size:20px;line-height:30px;color:#373737;}
    .leader-card-role { font-weight:500;font-size:14px;line-height:30px;color:#000000;}
    .leader-card-desc { font-weight:500;font-size:16px;line-height:28px;color:rgba(0,0,0,0.85);}
  }
  .btn-sm { width:40px;height:40px;background-color:#F6F6F6;justify-content:center;}
  &:hover {
    border-color:var(--primary-color);
    .btn {
      background-color:var(--primary-color);
      svg {
        path { fill:#FFFFFF;}
      }
    }
  }
}

/* Product Membership */
.productmembership {
  max-width:1024px;margin:0 auto;
  .price {
    font-size:1.25rem;
    del { color:#727272;}
  }
  .feature-title {
    p { font-size:1rem;}
    h5 { font-size:1.5rem;}
  }
  .feature-list li {
    margin-bottom: 10px;
  }
  .cta-box {
    background: #d9ece5;
    border-radius: 16px;
    padding: 20px;
  }
  .badge-custom {
    background: #2e7d6d;
    color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
  }
}

/* Income Plan */
.income-plan {
  .product-card {
    border-radius:26px;border:1.5px solid #CDCDCD;background:#FFFFFF;overflow: hidden;min-height:461px;
    .card-body {
      padding:40px;
      .btn-primary {
        width:100%;height:40px;background-color:#FFECEC;justify-content:center;transition:all 0.3s;overflow:hidden;font-size:0.875rem;
        span { color:var(--primary-color);font-weight:600;margin-right:10px;}
        svg {
          path { fill:var(--primary-color);}
        }
      }
      h4 {
        font-weight:600;font-size:1.25rem;
        small { font-size:1rem;font-weight:500;}
      }
      .check-list {
        li {
          margin-bottom:12px;
          .sub-list { margin-left:28px;}
        }
      }
      .price { font-size:1.25rem;font-weight:500;
        small {
          font-size:1rem;font-weight:500;
          &.text-decoration-line-through { color:#727272;}
        }
      }
      .table-wrap {
        background-color:#FBFBFB;border:1px solid #D6D6D6;border-radius:24px;max-height:250px;scrollbar-width:thin;
        .table {
          thead {
            tr{
              th {
                padding:10px 18px;
                &:first-child { padding-right:0;}
                &:last-child { text-align:right;padding-left:0;}
              }
            }
          }
          tbody {
            tr {
              td {
                border:none;font-size:0.875rem;padding:8px 18px;
                &:first-child { padding-right:0;}
                &:last-child { text-align:right;padding-left:0;}
              }
            }
          }
        }
      }
    }
    .free-strip { background: #dcefe7;color:#4c7a67;font-weight:600;text-align:center;padding:10px 12px;font-size:0.875rem;}
    &:hover {
      box-shadow:0 5px 40px rgba(var(--primary-color-rgb),.1);border-color:var(--primary-color);background:linear-gradient(to bottom, rgba(255,254,253,1) 0%,rgba(255,245,245,1) 100%);
      .btn-primary {
        background-color:var(--primary-color);
        span { color:#FFFFFF;}
        svg {
          path { fill:#FFFFFF;}
        }
      }
    }
  }
  .remark {
    h3 { font-size:1.125rem;}
  }
}

/* Marque Strip */
.marquee-wrapper {
  width:100%;overflow:hidden;background:#7FDAD6;
  .marquee-track {
    white-space:nowrap;
    .marquee-img { height:35px;width:auto;flex-shrink:0;}
  }
  &::before,
  &::after {
    content:'';position:absolute;top:0;width:200px;height:100%;z-index:10;pointer-events:none;
  }
  &::before { left:0;background:linear-gradient(to right, rgba(127,218,214,1) 0%,rgba(127,218,214,0.95) 75%,rgba(127,218,214,0) 100%);}
  &::after { right:0;background:linear-gradient(to right, rgba(127,218,214,0) 0%,rgba(127,218,214,0.95) 25%,rgba(127,218,214,1) 100%);}
}

/* Footer */
.footer {
  background:#FFFFFF;color:#000000;
  p { color:#000000;}
  h6 { color:#000000;font-weight:600;margin-bottom:1rem;}
  a {
   text-decoration:none;color:#000000;transition: color .2s ease;font-weight:500;
   &:hover,
   &.active-link { color:var(--primary-color);font-weight:600;}
  }
  .footer-newsletter {
    gap:12px;
    .footer-newsletter-input {
      border:1px solid #D2D2D2;border-radius:10px;padding:12px 16px;font-weight:500;font-size:1rem;width:280px;outline:none;transition:border-color 0.2s ease;
      &::placeholder { color:#919191;}
      &:focus { border-color: var(--clr-primary);}
    }
  }
  .footer-bottom {
    color:#222;font-size:0.875rem;border-top:1px solid #DEDEDE;
    p { color:#2D2D2D;font-size:0.875rem;}
    .social-icons {
      a {
        width:45px;height:45px;background-color:#F2F2F2;border-radius:50%;
        svg {
          path { fill:#777777;}
        }
        &:hover {
          background-color:var(--primary-color);
          svg {
            path { fill:#ffffff;}
          }
        }
      }
    }
  }
}

.modal-header {
  .btn-close { background:none;}
}

.modal-dialog {
  h5 { font-size:1.5rem;font-weight:600;}
  h6 { font-size:1.125rem;font-weight:600;}
  li span,
  p {
    font-size:1rem;font-weight:500;
    strong { font-weight:600;}
  }
  p { line-height:28px;}
}

/* Login */
.login-wrap {
	background:var(--bg-primary-light);min-height:calc(100% - 53px);
	.login-card {
		background:#f8f9fa;border-radius:25px;padding:50px 40px;max-width:480px;width:100%;box-shadow:0 20px 40px rgba(0,0,0,0.08);
		form {
			.input-icon { position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#6c757d;}
			.form-control {
				background:#e9ecef;border:none;padding-left:45px;height:55px;border-radius:12px;
				&:focus { box-shadow:none;background:#e9ecef;}
			}
			.password-toggle {
				position:absolute;right:15px;top:50%;transform:translateY(-50%);cursor:pointer;color:#6c757d;width:20px;height:20px;background-repeat:no-repeat;background-position:center;
				&.pw-eye { background-image:url(../img/ico/eye.svg);}
				&.pw-eye-slash { background-image:url(../img/ico/eye-slash.svg);}
			}
			.link-fp {
				color:#7F8692;
				&:hover { color:var(--primary-color);}
			}
			.register-link {
				color:var(--primary-color);font-weight:500;text-decoration:none;
				&:hover { text-decoration:underline;}
			}
		}
	}
}

/* Accordion */
.accordion {
  .accordion-item {
    border-radius:16px;border:none;
    .accordion-header {
      .accordion-button {
        border-radius:16px;
        &:not(.collapsed) { background:linear-gradient(to bottom, rgba(255,254,253,1) 0%,rgba(255,245,245,1) 100%);color:var(--primary-color);font-weight:600;border-bottom-left-radius:0;border-bottom-right-radius:0;}
        &:focus { box-shadow:none;}
      }
    }
    .accordion-collapse.show:parent { border:1px solid red;}
    &:last-of-type {
      > .accordion-header {
        .accordion-button {
          &.collapsed { border-radius:16px;}
        }
      }
    }
    &.active {
      border:1px solid var(--primary-color);
      .accordion-button { border-bottom:1px solid var(--primary-color);}
    }
  }
}

/* Section Self Study */
.section-self-study {
  .feature {
    display:flex;gap:15px;margin-bottom:35px;
    .icon-circle { width:40px;height:40px;
      svg {
        path { fill:var(--primary-color);}
      }
    }
  }
}

/* Section Lessons */
.typical-session {
  padding:80px 0 0;
  .session-title { font-weight:600;font-size:1.25rem;margin-bottom:60px;}
  .step-wrapper{
    position:relative;
    .step {
      position:relative;text-align:center;z-index:1;
      .step-icon { margin:0 auto 15px;}
      .step-label { color:#888;letter-spacing:1px;font-size:0.75rem;}
      .step-title { font-size:1.125rem;font-weight:600;}
      &::before,
      &::after { content:'';width:calc(50% - 30px);position:absolute;height:3px;background:var(--primary-color);top:12px;border-radius:5px;}
      &::before { left:-1px;}
      &::after { right:-1px;}
      &:first-child::before,
      &:last-child::after { display:none;}
    }
  }
}

/* Registration ISD select + validation message layout */
.reg-parent .input-group { flex-wrap:nowrap; }
.reg-parent .input-group .isd-select {
  flex:0 0 auto;width:130px;height:55px;padding-left:38px;padding-right:22px;
  background-color:#e9ecef;border:none;border-radius:12px;border-top-right-radius:0;border-bottom-right-radius:0;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F8692' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237F8692' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:left 12px center, right 8px center;
  background-size:18px 18px, 12px 12px;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
}
[dir="rtl"] .reg-parent .input-group .isd-select {
  padding-left:22px;padding-right:38px;
  background-position:right 12px center, left 8px center;
}
.reg-parent .input-group .isd-select:focus { box-shadow:none;background-color:#e9ecef; }
.reg-parent .input-group .form-control { padding-left:15px;min-width:0;border-top-left-radius:0;border-bottom-left-radius:0; }
label.validation-error { display:block;width:100%;color:#dc3545;font-size:0.85rem;margin-top:4px;text-align:left; }
[dir="rtl"] label.validation-error { text-align:right; }