/*******************************************************
 MAIN AND GLOBAL
*******************************************************/
* { font-family: system-ui, sans-serif; margin:0; padding:0; box-sizing:border-box; }
.body { min-width: 320px; margin: 0; padding: 0; font-size: 16px; color: #333333; font-weight: 400; text-align: center; height: 100%; overflow-x: hidden; position: relative; }
a { font-size: 16px; }
* { box-sizing: border-box; }
.ignore-border-box { box-sizing: content-box; }
.small_box { width: 75%; max-width: 850px; }



/*******************************************************
 HEADER
*******************************************************/







/*******************************************************
 PAGES AND SECTIONS
*******************************************************/









/*******************************************************
 TEXT AND FONT FORMATTING
*******************************************************/
.gradient { background: linear-gradient(90deg, #1f5979, #e67e22);  font-weight: 900 !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.number { font-family: system-ui, sans-serif; }
.text-label { color: #9E9E9E; }
.red { color: #BA2323 !important; }
.dark_blue { color: #173e53; }
.blue { color: #1f5979; }
.light_blue { color: #4cbeff; }
.green { color: #166534; }
.white { color: #FFFFFF; }
.light_gray { color: #999; }
.gray { color: #656565; }
.dark_gray { color: #343538; }
.orange { color: #e67e22; }
.light-orange { color: rgba(230, 126, 34, 0.80);  /* hex #e67e22 at 80% opacity */
  font-weight: 700; }
.pop { color: #d35400; font-weight: 700; }
.justify { text-align: justify; text-justify: inter-word; text-wrap: pretty; }
.font-heading { font-size: min(2.1rem, max(1.4rem, calc(var(--hero-size) * 0.70))); font-weight: 500; margin: 14px auto 28px; }
.font-main-small { font-size: clamp(1rem, 1vw + 0.8rem, 1.3rem) !important; margin: 14px auto 28px; }
.verification-code { font-family: 'Courier New', monospace; background: #e3f2fd; color: #1565c0; padding: 0px 16px; border-radius: 8px; font-weight: bold; letter-spacing: 1.5px; font-size: 1.2rem; display: inline-block; }





/*******************************************************
 SPACERS
*******************************************************/
.page-spacer { padding-top: 60px; }
.spacer { padding-top: 25px; }
.spacer-large { padding-top: 50px; }
.spacer-small { padding-top: 15px; }



/*******************************************************
 BOX COLORS
*******************************************************/
.uni-border-green::before { background: linear-gradient(to bottom, #4caf50, #388e3c); box-shadow: 0 0 20px rgba(76,175,80,0.5); }
.uni-border-red::before   { background: linear-gradient(to bottom, #f44336, #d32f2f); box-shadow: 0 0 20px rgba(244,67,54,0.4); }
.uni-border-dark_blue::before{background:linear-gradient(to bottom,#173e53,#112f3d);box-shadow:0 0 20px rgba(23,62,83,0.4);}
.uni-border-blue::before{background:linear-gradient(to bottom,#1f5979,#194863);box-shadow:0 0 20px rgba(31,89,121,0.4);}
.uni-border-light_blue::before{background:linear-gradient(to bottom,#4cbeff,#32a8e6);box-shadow:0 0 20px rgba(76,190,255,0.4);}
.uni-border-white::before{background:linear-gradient(to bottom,#FFFFFF,#e6e6e6);box-shadow:0 0 20px rgba(255,255,255,0.5);}
.uni-border-light_gray::before{background:linear-gradient(to bottom,#999999,#808080);box-shadow:0 0 20px rgba(153,153,153,0.4);}
.uni-border-gray::before{background:linear-gradient(to bottom,#656565,#505050);box-shadow:0 0 20px rgba(101,101,101,0.4);}
.uni-border-dark_gray::before{background:linear-gradient(to bottom,#343538,#222225);box-shadow:0 0 20px rgba(52,53,56,0.4);}
.uni-border-orange::before{background:linear-gradient(to bottom,#FFA500,#e69500);box-shadow:0 0 20px rgba(255,165,0,0.4);}
.uni-border-yellow::before{background:linear-gradient(to bottom,#f06626,#d15921);box-shadow:0 0 20px rgba(255,165,0,0.4);}
.uni-border-blue_alt::before{background:linear-gradient(to bottom,#3E5A66,#314854);box-shadow:0 0 20px rgba(62,90,102,0.4);}
.uni-border-black::before{background:linear-gradient(to bottom,#000000,#0c0c0c);box-shadow:0 0 20px rgba(62,90,102,0.4);}

.status-completed   { background: #e8f5e8; color: #2e7d32; border: 1px solid #a5d6a7; }
.status-inprogress  { background: #fff3e0; color: #ef6c00; border: 1px solid #ffe082; }
.status-notstarted  { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }



/*******************************************************
 BOXES
*******************************************************/
.box-xlarge { width: 100% !important; }
.box-large { max-width: 1600px !important; margin: auto;}
.box-normal { max-width: 1200px !important; margin: auto; }
.box-small { max-width: 900px !important; margin: auto; }
.box-xsmall { max-width: 600px !important; margin: auto; }
.welcome-grid h2 { font-size: 1.7rem; margin-bottom: 20px; color: #1e293b; }
.welcome-grid { max-width: 1620px; margin: 0 auto; padding: 60px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; text-align: center; }
.box-item:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.box-item { background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); border-radius: 32px; padding: clamp(35px, 5vw, 45px) clamp(30px, 5vw, 40px); box-shadow: 0 30px 80px rgba(0,0,0,0.1); transition: transform 0.4s ease; container-type: inline-size; }
.box-item-title { display: block; margin: 0 0 clamp(0.8rem, 4cqi, 2rem) 0; font-weight: 700; line-height: 1.2; font-size: clamp(1.5rem, 5cqi, 2.6rem); text-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
.box-item-title-small { display: block; margin: 0 0 clamp(0.8rem, 4cqi, 2rem) 0; font-weight: 700; line-height: 1.2; font-size: clamp(1.4rem, 5cqi, 1.7rem); text-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
.box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; }
.course-section-container { max-width: 1600px; margin: 0 auto; text-align: center; }
.course-grid { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1600px; margin: 0 auto 70px auto; }
.course-column { display: flex; flex-direction: column; gap: 40px; }

.course-list-box { background: #f8fafc; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); margin-top: 15px; }
.course-row-link { display: flex; justify-content: space-between; align-items: center; background: #fff; text-decoration: none; color: #1e293b; transition: all .25s ease; border-bottom: 2px solid #f1f5f9; flex-wrap: nowrap; gap: 12px; }
.course-row-link:last-child { border-bottom: none; }
.course-row-link:hover { background: #f0f9ff; transform: translateX(5px); }
.course-row-title, .course-item-price { font-size: min(1.3rem, max(0.9rem, calc(var(--hero-size) * 0.70))); font-weight: 500; white-space: normal; line-height: 1.8; }
.course-row-title { flex: 1; min-width: 0; padding-right: 0px; display: flex; align-items: center; gap: 10px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; }
.course-item-price { flex-shrink: 0; color: #e67e22; text-align: right; }
.page-wrapper { max-width: 1400px; margin: 0 auto; text-align: center; }
.page-wrapper-small { width: 85%; max-width: 800px;  margin: 0 auto; }

.uni-section-title { font-size: 1.7rem; margin: 35px 25px 20px; color: #1f5979; padding-bottom: 10px; border-bottom: 3px solid #1f5979; display: inline-block; }
.uni-section-title2 { font-size: 1.7rem; color: #1f5979; padding-bottom: 10px; border-bottom: 3px solid #1f5979; display: inline-block; }
.uni-card { position: relative; overflow: hidden; background: white; color: #2c3e50; border-radius: 12px; padding: 22px; margin-top: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; }
.uni-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; }
.uni-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.uni-card p { line-height: 30px; }
.uni-card-link { display: block; text-decoration: none; color: inherit; border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.uni-card-clickable { cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.uni-card-link:hover .uni-card-clickable { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.18) !important; }
.uni-card-title { font-size: 28px; font-weight: 600; color: #2c3e50; margin: 0 0 15px; line-height: 80px; }
.uni-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.uni-detail > .uni-label { font-weight: 500; color: #555; font-size: 20px; }
.uni-detail > .uni-value { font-size: 20px; margin-top: 4px; }
.uni-badge { display: inline-block; padding: 7px 15px; border-radius: 25px; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; }
.uni-detail > .uni-info_label { font-weight: 500; color: #555; font-size: 16px; }
.uni-detail > .uni-info_value { font-size: 16px; margin-top: 4px; }
.uni-label { font-weight: 600; color: #555; font-size: 21px; line-height: 45px; }
.uni-value { font-size: 21px; font-weight: 500; line-height: 45px;}

.email_message { height: 0; max-height: 0; overflow: hidden; transition: all 0.35s ease-out; opacity: 0; margin: 0; padding: 0 0; line-height: 1.4; font-size: 14px; }
.email_message.email_message_show { height: auto; max-height: 120px; margin-bottom: 25px; opacity: 1; }


@media (min-width: 1921px) {
    .course-row-link { padding: 18px 24px; min-height: 76px; }

}
@media (min-width: 1621) {
    .course-row-link { padding: 18px 24px; min-height: 60px; }

}
@media (max-width: 1920px) {
    .course-section-container { max-width: 1440px; margin: 0 auto; text-align: center; }
    .course-row-link { padding: 18px 24px; min-height: 55px; }

}
@media (max-width: 1620px) {
    .welcome-grid { grid-template-columns: 1fr 1fr; gap: 60px 40px; }
}
@media (max-width: 1200px) and (min-width: 801px) {
    .welcome-grid { grid-template-columns: 1fr 1fr; gap: 60px 40px; }
    .welcome-grid > .seal-item { grid-column: 1 / -1; order: -1; margin-bottom: 40px; }
    .course-section-container { max-width: 100%; margin: 0 auto; text-align: center; }
}
@media(max-width: 980px) {
    .uni-card-title { font-size: 1.48rem; line-height: 1.25; text-align: center; text-wrap: balance; max-width: 32ch; margin: 0 auto; font-weight: 500; }
    .uni-card { padding: 24px 20px; margin-bottom: 24px; margin-top: 24px; }
    .uni-card:first-child { margin-top: 20px; }
    .uni-card-grid { margin: auto; padding: 10px 0; }
    .uni-detail { align-items: center; }
    .uni-detail > .uni-value,
    .uni-detail > .uni-badge { font-size: 1.20rem; font-weight: 600; color: #2c3e50; text-align: right; }
    .uni-badge { padding: 9px 20px !important; font-size: 0.92rem !important; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.09); min-width: 120px; text-align: center; }
    .uni-detail > .uni-value.uni-muted { font-size: 1.15rem; color: #aab3c0; }
    .uni-hide-mobile { display: none !important; }
}
@media (max-width: 900px) {
    .welcome-grid { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px; }
    .welcome-grid > .seal-item { order: -1; margin-bottom: 30px; }
    .box-grid, .uni-card-grid { grid-template-columns: 1fr; }
    .page-wrapper-small { width: 100%; max-width: 600px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .course-row-link {
    flex-direction: column;      /* stack vertically */
    align-items: center;         /* horizontal centering */
    justify-content: center;     /* vertical centering */
    text-align: center;
    gap: 6px;                    /* space between title and price */
    padding: 20 0px;               /* a bit more room on mobile */
  }

  .course-row-title {
    margin: 0 -10px;
    justify-content: center;     /* centers text + any icon inside title */
    padding-right: 0;
    text-align: center;
  }

  .course-item-price {
    text-align: center;          /* override the right alignment */
  }
}

@media (max-width: 500px) {
    .welcome-grid { gap: 30px; padding: 0; }
    .course-group-minimal:nth-child(n+2) { padding: 0px; } /* HOME/COURSES & PRICING COURSE LIST */
}

@media (max-width: 480px) {
    .welcome-grid { padding: 30px 15px; gap: 30px; }

}



/*******************************************************
 DIALOGS AND OVERLAYS
*******************************************************/
@keyframes fadeInScale {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.heading-dialog { font-size: clamp(1rem, 4vw, 1.2rem); font-weight: 600; line-height: 1.2; }
/* .dialog, .dialog2 { position: fixed;  background-color: #fff; opacity: 0; pointer-events: none;  z-index: 10001;  display: none; } */
.dialog, .dialog2 {
    height: auto;
    max-width: 90%;
    max-height: 90%;
    background-color: #fff;
    padding: 20px 60px 20px 60px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11001;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: visible;        /* allow horizontal overflow too */
    overflow: visible !important;    /* ← THIS MAKES THE BUTTON VISIBLE OUTSIDE */
    contain: none !important;        /* ← prevents modern browsers from hiding it */
    display: none;
    opacity: 0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: opacity 0.6s;
}

.dialog_show { display: block !important; animation: fadeInScale 0.5s ease-out forwards; }

.dialog_no_effect { background-color: #fff; padding: 30px 20px 30px 20px; text-align: center; min-width: 300px; min-height: 180px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11001; overflow-y: auto; display: none; opacity: 0; }

.dialog_close_button {
    position: absolute;
    top: -80px;           /* exactly as you asked */
    right: -15px;
    z-index: 99999;
    background: none;
    border: none;
    font-size: 52px;
    font-weight: 100;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    cursor: pointer;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    line-height: 1;
}

.loader {
  width: 60px;
  height: 60px;
  border: 8px solid #f0f0f0;
  border-top: 8px solid #4a90e2;
  border-radius: 50%;
  animation: calm-spin 1.8s linear infinite;
  margin: auto;
  box-shadow: 0 0 20px rgba(74, 144, 226, 0.2);
}

@keyframes calm-spin {
  0% { 
    transform: rotate(0deg);
    border-top-color: #4a90e2;
  }
  50% {
    border-top-color: #a0c4ff;             /* Lighter blue for soft pulse */
  }
  100% { 
    transform: rotate(360deg);
    border-top-color: #4a90e2;
  }
}

@media (max-width: 799px) {
    .dialog, .dialog2 { height: auto; width: 90%; background-color: #fff; padding: 20px 20px 30px 20px; text-align: center; max-width: 90%; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 11001; max-height: calc(100vh - 150px); overflow-y: auto; display: none; }
    .dialog_no_effect { background-color: #fff; padding: 20px; text-align: center; min-width: 300px; min-height: 180px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11001; overflow-y: auto; display: none; }
}






@media (min-width: 1080px) { 
    .course-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
    .gray-page-grid { grid-template-columns: 1fr 1fr; gap: 40px;}
}

@media (max-width: 380px) { 
    .contact-lang-container { display: none; }
}

@supports not (text-wrap: balance) {
    .box_header p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .uni-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -webkit-box-pack: center; }
}